/********************************** NAV ***********************************/

/* nav styles */
nav.m-nav {
	font-family: 'Montserrat';
}

a.nav-toggle {
	display: none;
}

ul {
	-webkit-padding-start: 0px;
}
nav.m-nav ul {
	width:100vw;
	list-style: none;
	margin: 0;
	display:flex;
	flex-wrap: wrap
}
nav.m-nav li {
	flex-grow: 1;
	flex-basis: 0;
    height: auto;
	overflow: hidden;
	text-decoration: none;
	float:left;
	text-align:center;
	vertical-align:bottom;
}

nav.m-nav li:last-child {
	flex-grow: 2;
	float:right;
	text-align:right;

}

nav.m-nav li:last-child a{
	padding-right:60px;
	text-align:right;

}
nav.m-nav li a {
	position:relative;
	top:0;
	height: 120px;
	width:100%;
	box-sizing: border-box;
	display: block;
	padding: 45px 0px 0px 0px;
	color: #fff;
	transition: all 0.3s;
	text-decoration: none;
	
}
nav.m-nav li a:hover {
	padding-top:70px;
	top:-20px;
	transition: all 0.3s;
}
/* repeat this section for the 8 different colors */
/* --- BEGIN --- */

nav.m-nav li.color-1 a {
	background-color: #2E767A;
}
nav.m-nav li.color-1 a:hover {
	background-color: #B53F5A;
}

nav.m-nav li.color-2 a {
	background-color: #3C989E;
}
nav.m-nav li.color-2 a:hover {
	background-color: #F57A82;
}

nav.m-nav li.color-3 a {
	background-color: #5DB5A4;
}
nav.m-nav li.color-3 a:hover {
	background-color: #e0c1a5;
}

nav.m-nav li.color-4 a {
	background-color: #f1ce9b;
}
nav.m-nav li.color-4 a:hover {
	background-color: #6ea097;
}

nav.m-nav li.color-5 a {
	background-color: #F57A82;
}
nav.m-nav li.color-5a a:hover  {
	background-color: #3C989E;
}

nav.m-nav li.color-6 a {
	background-color: #B53F5A;
}
nav.m-nav li.color-6 a:hover {
	background-color: #2E767A;
}

nav.m-nav li.color-7 a {
	background-color: #34557F;
	color: #FFFFFF;
}
nav.m-nav li.color-7 a:hover {
	background-color: #34557F;
}
nav.m-nav li.color-8 {
	background-color: #34557F;
}
nav.m-nav li.color-8 a {
	background-color: #34557F;
}
nav.m-nav li.color-8 a:hover {
	background-color: #34557F;
}
/* --- END --- */

/* smoother transitions */
nav.m-nav li, nav.m-nav li a {
	transform: translate3d(0, 0, 0);
}
a.nav-toggle {
	display: none;
	padding: 20px;
	background-color: #006478;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-family: 'Montserrat';
}
a.nav-toggle:hover {
	background-color: #c8d2dc;
}

/* **************  RESPONSIVE  ************** */

/* **************  Max 1024  ************** */

@media all and (max-width: 1024px) {
nav.m-nav li {
	min-width:33.3%;
	width: calc(100/3);
}

nav.m-nav li a {
	padding:20px;
	width:100%;
    height: 50px;
	float:left;
}
	
nav.m-nav li a:hover, nav.m-nav li:last-child a:hover{
	padding:20px;
	font-weight:700;
	top:0px;
	transition: all 0.3s;
	
}
	
}

/* **************  Max 768 ************** */

@media all and (max-width: 768px) {
nav.m-nav {
	display: block;
}
nav.m-nav li {
	display:inline-block;
	width: 33%;	
	width: calc(100/3);
	float:left;
}
nav.m-nav li:last-child {
}
nav.m-nav a {
	text-align: center;
	padding: 60px 20px 20px 20px;
}
nav.m-nav a:hover {
	transform: translateX(0);
	transform: translateY(-20px);
}
#search input {
	padding: 10px;
	border: 0px;
	background-color: #006478;
	color: #FFF;
	font-family: 'Montserrat';
	margin: 0px;
	box-sizing: border-box;
}
#search {
	padding: 10px;
	border: 0px;
	background-color: #006478;
	color: #FFF;
	font-family: 'Montserrat';
	margin: 0px;
	height: 79px;
	box-sizing: border-box;
	width: 25%;
}
}

/* **************  Max 480 ************** */

@media all and (max-width: 480px) {
nav.m-nav {
	display: none;
	z-index: 9999;
	position: relative;
}
nav.m-nav li {
	width: 50%;
	float: left;
}
a.nav-toggle {
	display: block;
}
}