#menuToggle {
    margin-top: 7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menuToggle input {
    display: flex;
    width: 38px;
    height: 38px;
    position: absolute;
    cursor: pointer;
    opacity: 0; /* hide input */
    z-index: 1; /* top of the menu */
}

#menuToggle span{
    width: 38px;
    height: 3px;
    margin-bottom: 8px;
    background: #fff;
    -webkit-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    -moz-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    -ms-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    -o-transition: all .5s cubic-bezier(.08,.81,.87,.71);
    transition: all .5s cubic-bezier(.08,.81,.87,.71);
}

body.white-page #menuToggle span {
    background: #00a651;
}

#span1 {
    transform-origin: 4px 0px;
}

#span3 {
    transform-origin: bottom right;
}

#menuToggle input:checked ~ #span1 {
    transform: rotate(45deg) translate(5px);
}
#menuToggle input:checked ~ #span2 {
    transform: rotate(495deg) translate(3px);
}
#menuToggle input:checked ~ #span3 {
    transform: rotate(45deg);
    opacity: 0;
}

@media (min-width: 1280px) {
    #menuToggle {
        display: none;
    }
}


.logoAnimation {
    animation-name: logoPlus;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.logoAnimationReverse {
    animation-name: logoPlus;
    animation-duration: 1s;
    animation-direction: reverse;
}

@keyframes logoPlus {
    from {width: 165px;}
    to {width: 250px;}
}

@media (min-width: 1280px) {
    .logoAnimation {
        animation-name: none;
    }
}


#contacts {
    border-top: 40px solid transparent;
    margin-top: -40px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

#about {
    border-top: 130px solid transparent;
    margin-top: -130px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}