@charset "utf-8";
/* CSS Document */


.burger {
    
    position: fixed;
    top: 36px;
    right: 45px;
    width:64px;
    height:64px;
    transform-origin: 100% 50%;
    cursor: pointer;
    z-index: 9000;
    transition: background 1s ease;
    -webkit-transition: background 1s ease;
    -moz-transition:    background 1s ease;
    -o-transition:      background 1s ease;
    -ms-transition:     background 1s ease;
    display:block;
    
}

.burger .line {
    
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-transition: background 0.4s ease, opacity 0.4s ease;
    -moz-transition: background 0.4s ease, opacity 0.4s ease;
    -o-transition: background 0.4s ease, opacity 0.4s ease;
    -ms-transition: background 0.4s ease, opacity 0.4s ease;
    transition: background 0.4s ease, opacity 0.4s ease;
    
}

.burger .line:nth-child(1) {
    
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    
}

.burger .line:nth-child(3) {
    
    -webkit-transform: translateY(18px);
    -moz-transform: translateY(18px);
    -o-transform: translateY(18px);
    -ms-transform: translateY(18px);
    transform: translateY(18px); 
    
}

.burger.open .line:nth-child(1) {
    
  animation: burgerOpenLine1 0.7s ease forwards;
    
}

.burger.open .line:nth-child(3) {
    
  animation: burgerOpenLine2 0.7s ease forwards;
    
}

.burger.open .line:nth-child(2) {
    
  opacity: 0;
    
}

.burger.close .line:nth-child(1) {
    
  animation: burgerCloseLine1 0.7s ease forwards;
    
}

.burger.close .line:nth-child(3) {
    
  animation: burgerCloseLine2 0.7s ease forwards;
    
}

.burger.close .line:nth-child(2) {
    
  opacity: 1;
    
}

/*
-----------------------------------------
Open Animations — 
Move lines into center, pause then rotate
-----------------------------------------
*/

@keyframes burgerOpenLine1 {
  0% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  30% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
  }
}

@keyframes burgerOpenLine2 {
  0% {
    -webkit-transform: translateY(18px);
    -moz-transform: translateY(18px);
    -o-transform: translateY(18px);
    -ms-transform: translateY(18px);
    transform: translateY(18px);
  }
  30% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }
}

/*
-----------------------------------------
Close Animations — 
Rotate, pause, then move lines into center
-----------------------------------------
*/

@keyframes burgerCloseLine1 {
  100% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  40% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  30% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  0% {
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
  }
}

@keyframes burgerCloseLine2 {
  100% {
    -webkit-transform: translateY(18px);
    -moz-transform: translateY(18px);
    -o-transform: translateY(18px);
    -ms-transform: translateY(18px);
    transform: translateY(18px);
  }
  40% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  30% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
  0% {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }
}

.menu-button svg {
    
    width:3.33vw;
    height:3.33vw;

}

.menu-button:hover {
    
    cursor: pointer;
    
}

#menu-close {
    
    position: absolute;
    right:2.34vw;
    top:1.97vw;
    
}

.burger {

/*    transform: scale(0.8);
    top: 24px;
    right: 35px;*/
    
    transform: scale(0.5);
    top: 10px;
    right: 24px;

}


@media only screen and (max-width: 799px) {

    .burger {

        right: 16px;
 
    }
 
}