@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                     transform: translate3d(0,0,0);
               transform-style: preserve-3d;
                    box-shadow: 0 0 0 rgba(0,0,0,.9);
  }

  40%, 43% {
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                     transform: translate3d(0, -30px, 0);
               transform-style: preserve-3d;
                    box-shadow: 0 30px 30px rgba(0,0,0,.01);
  }

  70% {
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                     transform: translate3d(0, -15px, 0);
               transform-style: preserve-3d;
                    box-shadow: 0 15px 15px rgba(0,0,0,.5);
  }

  90% {
            transform: translate3d(0,-4px,0);
      transform-style: preserve-3d;
           box-shadow: 0 4px 4px rgba(4px,0,4px,.7);
  }
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                     transform: translate3d(0,0,0);
               transform-style: preserve-3d;
                    box-shadow: 0 0 0 rgba(0,0,0,.9);
  }

  40%, 43% {
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                     transform: translate3d(0, -30px, 0);
               transform-style: preserve-3d;
                    box-shadow: 0 30px 30px rgba(0,0,0,.01);
  }

  70% {
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                     transform: translate3d(0, -15px, 0);
               transform-style: preserve-3d;
                    box-shadow: 0 15px 15px rgba(0,0,0,.5);
  }

  90% {
            transform: translate3d(0,-4px,0);
      transform-style: preserve-3d;
           box-shadow: 0 4px 4px rgba(4px,0,4px,.7);
  }
}

.noSelect {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge */
            user-select: none; /* Non-prefixed version, for the latest browsers */
}

.select {
	-webkit-touch-callout: auto; /* iOS Safari */
    -webkit-user-select: auto; /* Chrome/Safari/Opera */
       -moz-user-select: auto; /* Firefox */
        -ms-user-select: auto; /* IE/Edge */
            user-select: auto; /* Non-prefixed version, for the latest browsers */
}

.navigation {
	position: relative; /* Works with client side js to emulate floating */
    height: 74.3px;
    background: none;
    display: flex;
    align-items: center; /* Vertical center alignment */
	z-index: 10; /* Required for .logo's dropdown menu to display correctly */
	background: rgba(224,236,235, 0.9);
}

.navigation .welcomeMessage {
    padding-left: 20.8px;
    color: #3B798B;
    font-weight: 500;
    font-size: 16.46px;
}

.navigation .leftContent {
	position: absolute;
	right: 0;
	top: auto;
	padding-right: 10px;
	width: 100%;
	text-align: right;
}

.navigation .customContent {
	z-index: 1;
}

#menuToggle {
	padding-left: 7px;
    cursor: pointer;
	position: relative;
}

#menuToggle svg {
	width: 25px;
	height: 25px;
}

#menuToggle svg g {
	fill: #81B4C1;
	transition: fill 0.5s ease;
	-webkit-transition: fill 0.5s ease;
}

#menuToggle:hover svg g {
	fill: #006577;
}

.navigation .leftContent .logo {
	padding-left: 24.5px;
	padding-right: 60px;
	font-weight: 500;
	position: relative;
	display: inline-block;
	font-size: 20px;
}

.navigation .leftContent .logo > span {
	z-index: 2;
}

.navigation .dropdown-content {
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
	opacity: 0;
	visibility: hidden;
	top: 0;
	left: -0;
	width: 150px;

	margin-bottom: 25px;
	
	transition: opacity 0.5s ease, visibility 0.5s;
	-webkit-transition: opacity 0.5s ease, visibility 0.5s;
}

.navigation .dropdown-content:hover,
.navigation .dropdown-content:active {
	opacity: 1;
	visibility: visible;
}

.navigation .leftContent .dropdown-anchor {
	position: relative;
}

.navigation .leftContent .dropdown-anchor:hover .dropdown-content,
.navigation .leftContent .logo:hover .dropdown-content,
.navigation .leftContent .dropdown-anchor:active .dropdown-content,
.navigation .leftContent .logo:active .dropdown-content {
	opacity: 1;
	visibility: visible;
}

.navigation .admin.dropdown-content {
	/*position beneath button*/
	top: 25px;
	left: calc(-75px + 25%);
}

.navigation .admin.dropdown-content h4 {
	margin: 0;
}

.navigation .admin.dropdown-content a {
	text-decoration: none;
}

.navigation .admin.dropdown-content ul {
	padding: 0;
	text-align: left;
}

.navigation .admin.dropdown-content ul li {
	list-style-type: none;
	padding: 7px 0;
	border-bottom: 1px solid #afafb0;
	font-size: 12px;
}

/*.navigation .leftContent .logo .my {
	font-family: 'Museo';
	font-weight: 700;
	color: #007F95;
}

.navigation .leftContent .logo .kindo {
	font-family: 'Museo';
	font-weight: 700;
	color: #45A8BB;
}*/

.navigation .leftContent .navLinks {
	padding-right: 25px;
}

.navigation .leftContent .navLinks a {
	padding-left: 24.5px;
	color: #007F95;
	text-decoration: none;
	
	transition: color 0.5s ease;
	-webkit-transition: color 0.5s ease;
}

.navigation .leftContent .navLinks a:hover {
	color: #005868;
}

.navigation .leftContent .circleLinks .spacer {
	padding-right: 5px;
}

.navigation .leftContent .circleLinks button {
	padding-right: 0;
	padding-left: 0;
	height: 23.5px;
	width: 23.5px;
	line-height: 7px;
	font-weight: 500;
	font-size: 15.4px;
	background-color: #FFFFFF;
	color: #81B4C1;
	vertical-align: middle;
	position: relative;
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	-webkit-transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	
	transition: padding 0.5s ease;
	-webkit-transition: padding 0.5s ease;
}

.navigation .leftContent .circleLinks button:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.navigation .leftContent .circleLinks button img {
	position: absolute;
	top: -1px;
	left: -2px;
}

.navigation .leftContent .circleLinks button .quantity {
	top: -5px;
	right: -8px;
}

.navigation .leftContent .circleLinks button.wideAdminButton {
	width: inherit;
	padding-left: 5px;
	padding-right: 5px;
}

.navigation .circleLinks .smallAdminButton {
	display: none;
}

.navigation .leftContent .circleLinks button.itemAdded {
	animation: bounce 1s;
	transform-origin: center bottom;
}

@media only screen and (max-width: 975px) {
	.navigation .leftContent .navLinks {
		padding-right: 0;
	}
	
	.navigation .leftContent .logo {
		padding-right: 10px;
	}
}

/* Dropdowns: */

.navigation .logo .dropdown-content .dropdownLogo {
	position: relative;
	text-align: left;
}

.navigation .logo .dropdown-content .dropdownLogo > span {
	left: 8px;
	top: -12px;
	position: absolute;
}

.navigation .adminButton .dropdow-content {
	
}

.navigation .imgNameTable {
	margin-top: 20px;
	width: 100%;
	border-collapse: collapse;
	font-size: 14.4px;
	font-weight: 100;
	
	font-family: 'Museo Sans', Helvetica, sans-serif;
}

.navigation .imgNameTable tr {
	cursor: pointer;
	font-weight: normal;
}

.navigation .imgNameTable tr.currentPage {
	cursor: default;
	font-weight: 500;
}

.navigation .imgNameTable td {
	border-bottom: 1px solid #E7E7E7;
	height: 30px;
	color: #007F95;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	
	transition: color 0.5s ease;
	-webkit-transition: color 0.5s ease;
}

.navigation .imgNameTable tr:hover td {
	color: #006577;
}

.navigation .imgNameTable tr.currentPage td {
	color: #007F95;
	transition: none;
	-webkit-transition: none;
}

.navigation .imgNameTable .img {
	width: 35px;
	text-align: center;
}

.navigation .imgNameTable .img img {
	max-width: 25px;
	max-height: 20px;
}

@media only screen and (max-width: 330px) {
	/* Phones */
	
	.navigation {
		height: 40px;
	}
	
	.navigation .leftContent .dropdown-anchor {
		position: initial;
	}

	.navigation .dropdown-content {
		width: 90%;
		top: 0;
		left: 0;
		padding: 5% 5%;
	}
	
	.navigation .admin.dropdown-content {
		left: 0;
		top: 0;
	}

	.navigation .leftContent .logo {
		padding-right: 5px !important;
		padding-left: 10px !important;
		position: initial;
	}
	
	.navigation .leftContent .circleLinks .spacer {
		padding-right: 0;
	}
	
	.navigation .logo .dropdown-content .dropdownLogo > span {
		position: initial;
	}
	
	.navigation .logo .dropdown-content .imgNameTable {
		margin-top: 10px;
	}
}

@media only screen and (max-width: 500px) {
	/*
		hide customContent
	*/
	.navigation .leftContent {
		position: initial;
		width: 100%;
	}

	.navigation .customContent {
		display: none;
	}
}

@media only screen and (max-width: 675px) {
    /* In-between Phone and Portrait Tablet*/
	.navigation .leftContent .circleLinks #nav_pane_logout_element {
		display: none;
	}

	.navigation .admin.dropdown-content {
		right: 0;
		left: auto;
	}
}

@media only screen and (max-width: 867px) {
	.welcomeMessage {
        display: none;
    }
    
    .navigation #menuToggle {
        display: block;
    }
    
	.navigation {
		height: 40px;
	}

	.navigation .customContent {
		margin-left: 8px;
	}

	.navigation .leftContent {
		/*position: initial;*/
        width: auto;
	}
	
	.navigation .leftContent .navLinks {
		display: none;
	}
	
	.navigation .leftContent .logo {
		padding-right: 13px;
		font-size: 17px;
		float: left;
	}
	
	.navigation .circleLinks > button {
		margin-left: 7px;
	}
}

@media only screen and (min-width: 868px) {
	.navigation #menuToggle {
        display: none;
    }
	
	.navigation .leftContent .navLinks {
		/*display: inherit;*/
	}
}

@media screen and (max-width: 900px) {
	/*
		Shrink admin button to just a
	*/
	.navigation .circleLinks .wideAdminButton {
		display: none;
	}

	.navigation .circleLinks .smallAdminButton {
		display: inline;
	}
}

@media screen and (min-width: 1280px) {
	.navigation {
		width: 1260px;
	}
}