.open-nav{height: 100vh; overflow: hidden;}





#mainnavigation #menu-button{position: absolute; width: 20px; height: 20px; top: 0px; right: 0px; padding: 22px; box-sizing: content-box; z-index: 99999; cursor: pointer;}
#mainnavigation #menu-button #menu-button-inner   {    position: relative; -webkit-transform: translateY(10px);-ms-transform: translateY(10px);
    transform: translateY(10px);-webkit-transition: .3s transform;transition: .3s transform;}


#mainnavigation #menu-button #menu-button-inner>div   {width: 100%; height: 2px; border-radius: 8px;  background: #000; -webkit-transform-origin: center center;
    -ms-transform-origin: center center;transform-origin: center center; -webkit-transition: .3s;transition: .3s; position: absolute;}

#mainnavigation #menu-button #menu-button-inner>div:nth-child(1){-webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px);}
#mainnavigation #menu-button #menu-button-inner>div:nth-child(2){-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0); opacity: 1;}
#mainnavigation #menu-button #menu-button-inner>div:nth-child(3)   {-webkit-transform: translateY(6px);-ms-transform: translateY(6px); transform: translateY(6px);}



body.open-nav #mainnavigation #menu-button #menu-button-inner {
    -webkit-transform: translateY(10px) rotate(-180deg);
    -ms-transform: translateY(10px) rotate(-180deg);
    transform: translateY(10px) rotate(-180deg);
}

body.open-nav #mainnavigation #menu-button #menu-button-inner>div:nth-child(1)  {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #fff;
}

body.open-nav #mainnavigation #menu-button #menu-button-inner>div:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff;
}

body.open-nav #mainnavigation #menu-button #menu-button-inner>div:nth-child(2) {
    -webkit-transform: translateY(0) rotate(135deg);
    -ms-transform: translateY(0) rotate(135deg);
    transform: translateY(0) rotate(135deg);
    opacity: 0;
    background: #fff;
}




#mainnavigation > .drop{content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background:#000; opacity: 0;    
-webkit-transition: .4s; transition: .4s;pointer-events: none;}
body.open-nav #mainnavigation > .drop{content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background:#000; opacity: 0.4; }



#mainnavigation > ul {position: fixed;z-index: 1000; padding: 0 ; margin: 0; list-style: none;top: 0; right: -320px; width: 300px;
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05); background: #340e51; height: 100vh; color: #fff;
	-webkit-transition: .4s; transition: .4s;
}

body.open-nav #mainnavigation > ul {right: 0px;}



#mainnavigation > ul > li:first-child{background: #40195e; padding: 20px; }


#mainnavigation > ul > li a{padding: 10px 20px; color: #fff; display: block; }





@media (min-width: 576px) {
  
}

@media (min-width: 768px) {
  
}

@media (min-width: 992px) {
  #mainnavigation > ul{position: relative; width: auto; height: auto; background: none; box-shadow: none; right: auto;}
  #mainnavigation > ul > li:first-child{display: none}
  #mainnavigation > ul > li{display: inline-block;}
  #mainnavigation > ul > li a:not(.btn){color: #40195e}
  #mainnavigation #menu-button{display: none}
  .drop{display: none}
  .open-nav{height: auto; overflow: auto;}
}

@media (min-width: 1300px) {
 
}