* {
   box-sizing: border-box;
}
 html, body {
   margin: 0 auto;
   padding: 0;
   height: 100%;
   width: 100%;
}
 ul, li {
   margin: 0 auto;
   padding: 0;
   list-style: none;
}
 .drop-down {
   padding: 25px;
   position: absolute;
   width: 100%;
   height: auto;
   background: #3465ecb3;
   top: -550%;
   transition: top 0.4s ease-in-out;
   
}
 .drop-down li {
   height: 50px;
   line-height: 50px;
   
   text-align: center;
}
 .drop-down li:nth-child(1) {
   border-top: 0;
}
 .drop-down li:nth-child(4) {
   border-bottom: 0;
}
 .drop-down a :hover {
   background: #3465ec4a;
}
 .drop-down a {
   display: block;
   font-size: 20pt;
   color: #fff;
   text-decoration: none;
  font-family: 'Museo Sans Cyrl 900', Helvetica, Arial, sans-serif;
}
 .down {
   top: 0;
   transition: top 0.4s ease-in-out;
}
 .menu {
   box-sizing: content-box !important;
   position: fixed;
   right: 0px;
   width: 75px;
   text-align: center;
   border: 0px ;
   background-color: #3465ec66;
   border-radius: 100%;
   opacity: 0,5;
   color: #fff;
}
 .menu:hover {

}
 .menu a {
   display: block;
   text-decoration: none;
   font-size: 45pt;
   font-weight: bold;
   color: #fff;
 
   margin: 0 auto;
}
.close a {
   display: block;
   text-decoration: none;
   font-size: 45pt;
   font-weight: bold;
   color: #fff;
 
   margin: 0 auto;
}
 .menu .close {
   display: none;
}
 .trigger {
   animation: menu-spin-back 0.7s ease-in-out;
   animation-fill-mode: forwards;
  

}
.trigger a {
   opacity: 0,7;
}
.close a {
   width: 75px;
   height:75px;
}
 .round {
   animation: menu-spin 0.4s ease-in-out;
   animation-fill-mode: forwards;
}
 @-webkit-keyframes menu-spin {
   50% {
     border-radius: 100%;
  }
   100% {
     border-radius: 100%;
    
  }
}
 @-webkit-keyframes menu-spin-back {
   50% {
     border-radius: 0;
  }
   100% {
     border-radius: 0;
   
  }
}
 .white {
   color: #fff !important;
}