/* Dssktop menu */
#menu {
	display: block;
	padding: 7px 0 5px;
	position: relative;
	z-index: 1000;
}
#menu a {
	color: #039;
	text-decoration: none;
	font-size: 0.9em !important;
}
#menu .active a {
	color: #d8006d;
	text-decoration: none;
}
#menu a:hover {
	color: #d8006d;
}
#menu li {
	display: inline-block;
padding: 2px 1vw 4px;
text-transform: uppercase;
}


/* Mobile menu */
@media (max-width: 1024px) {
 body {
 perspective: none;
 transform-style: inherit;
}
 .button_menu {
 cursor: pointer;
 position: fixed;
 height: 26px;
 right: 4%;
 top: 20px;
 width: 30px;
 -webkit-transition: opacity .25s ease;
 transition: opacity .25s ease;
 z-index: 2000;
}
.button_menu:hover {
 opacity: .7;
}
.button_menu.active .top {
 -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
 transform: translateY(10px) translateX(0) rotate(45deg);
 background: #FFF;
	outline: 0;
}
.button_menu.active .middle {
 background: #FFF;
 opacity: 0;
	outline: 0;
}
.button_menu.active .bottom {
 background: #FFF;
 -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
 transform: translateY(-10px) translateX(0) rotate(-45deg);
	outline: 0;
}
.button_menu span {
 background: #039;
 border: none;
 cursor: pointer;
 height: 5px;
 width: 100%;
 left: 0;
 position: absolute;
 top: 0px;
 -webkit-transition: all .35s ease;
 transition: all .35s ease;
 outline: 4px white solid;
}
.button_menu span:nth-of-type(2) {
 top: 10px;
}
.button_menu span:nth-of-type(3) {
 top: 20px;
}
#menu {
height: 100%;
 left: 0;
 opacity: 1;
 position: fixed;
 visibility: hidden;
 top: 0;
 -webkit-transition: opacity .35s, visibility .35s, width .35s;
 transition: opacity .35s, visibility .35s, width .35s;
 transform-style: inherit;
 width: 100%;
 z-index: 500;
}
#menu:before {
 content: '';
 background: #001339;
 left: -55%;
 top: 0;
 width: 50%;
 height: 100%;
 position: absolute;
 -webkit-transition: left .35s ease;
 transition: left .35s ease;
}
#menu:after {
 background: #001339;
 content: '';
 right: -55%;
 top: 0;
 width: 50%;
 height: 100%;
 position: absolute;
 -webkit-transition: all .35s ease;
 transition: all .35s ease;
}
#menu.open {
 visibility: visible;
 height: 100%;
}
#menu.open:before {
 left: 0;
}
#menu.open:after {
 right: 0;
}
#menu.open li {
 -webkit-animation: fadeInRight .5s ease forwards;
 animation: fadeInRight .5s ease forwards;
 -webkit-animation-delay: .35s;
 animation-delay: .35s;
}
#menu nav {
 position: relative;
 height: 70%;
 top: 45%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 font-size: 3rem;
 text-align: center;
 z-index: 100;
}
#menu ul {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 display: inline-block;
 position: relative;
 height: 100%;
}
#menu ul li {
 display: block;
 height: 10vh;
 height: calc(100% / 8);
 letter-spacing: 0.05em;
 min-height: 30px;
 position: relative;
 opacity: 0;
}
#menu ul li a {
 display: block;
 font-size: 4vh;
 position: relative;
 color: #FFF;
 text-decoration: none;
 overflow: hidden;
}
#menu ul li a:hover:after, #menu ul li a:focus:after, #menu ul li a:active:after {
 width: 100%;
}
#menu ul li a:after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 0%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 height: 3px;
 background: #FFF;
 -webkit-transition: .35s;
 transition: .35s;
}
 @-webkit-keyframes fadeInRight {
 0% {
 opacity: 0;
 left: 20%;
}
 100% {
 opacity: 1;
 left: 0;
}
}
 @keyframes fadeInRight {
 0% {
 opacity: 0;
 left: 20%;
}
 100% {
 opacity: 1;
 left: 0;
}
}
