@import url('https://fonts.googleapis.com/css?family=Oxygen');

.header {
	background-color: #fff;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 20px;
	position: fixed;
	top: 0;
	z-index: 1000;
	box-shadow: 0 0 10px #0003;
	clear: both;
}

.top-nav {
	position: relative;
}

.logo-container {
	width: 100%;
	position: relative;
    z-index: 1;
    background-color: #c5f1f3;
	height: 86px;
	text-align: center;
	overflow-y: hidden;
}

.logo-link {
	position: relative;
	background-color: #c5f1f3;
}

.logo-effect-div {
	width: 100%;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	height: 86px;
	background-color: #fff;
    background-image: url('../images/Foxygen_Logo_Pink.png');
    background-position: 50% -2px;
    background-repeat: no-repeat;
    background-size: 250px 90px;
	-webkit-transition: height .5s;
    transition: height .5s;
	border-bottom: 2px solid #49e1f3;
}

#logoSVG {
	padding-top: 4px;
	position: relative;
	z-index: 2;
}

#logo {
	fill: #fff;
}

.nav-menu {
	position: absolute;
	right: 0;
	top: 0;
	text-align: right;
	display: inline-block;
}

.nav-left {
	left: 0;
	text-align: left;
}

.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-tab {
	display: inline-block;
	position: relative;
	background-color: #c5f1f3;
	z-index: 1;
	overflow-y: hidden;
}

.link {
	text-decoration: none;
	color: #49e1f3;
}

.menu-link {
	display: inline-block;
	padding: 30px 35px;
	z-index: 3;
	position: relative;
	-webkit-transition: color .25s;
    transition: color .25s;
}

.effect-div {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	height: 86px;
	width: 100%;
	cursor: pointer;
	background-color: #fff;
	z-index: 2;
	-webkit-transition: height .5s;
    transition: height .5s;
	border-bottom: 2px solid #49e1f3;
}

#currentPage + .effect-div {
	height: 0;
}

#currentPage {
	color: #fff;
}

/*----- Mobile Menu -----*/

.mobile-nav-menu {
	z-index: 999;
	background-color: #fba099;/*c5f1f3;*/
	height: 0;
	-webkit-transition: height .5s;
	transition: height .5s;
	overflow: hidden;
}

.mobile-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.mobile-menu-tab {
	display: inline-block;
	padding: 10px 15px;
	line-height: 30px;
}

.mobile-menu-link {
	font-size: 20px;
	color: #fff;
	-webkit-transition: color .125s;
    transition: color .125s;
}

.mobile-menu-link:hover {
	color: #db8079;
	-webkit-transition: color .125s;
    transition: color .125s;
}

/*----- Hover Styles -----*/

.logo-container:hover .logo-effect-div {
	-webkit-transition: height .5s;
    transition: height .5s;
	height: 0;
}

.menu-tab:hover .effect-div {
	-webkit-transition: height .5s;
    transition: height .5s;
	height: 0;
}

.menu-tab:hover .menu-link {
	color: #fff;
	-webkit-transition: color .25s;
    transition: color .25s;
}

/*----- Responsive Styles -----*/

@media only screen and (max-width: 1068px) {
	
	.nav-menu {
		display: none;
	}
	
	.logo-container {
		box-shadow: 0 0 10px #0003;
	}
	
	.mobile-nav-menu {
		height: 50px;
		-webkit-transition: height .5s;
		transition: height .5s;
	}
}