/* Menu Trigger and Animation */

.megamenu-trigger {

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

    width: 50px;

}

.megamenu-trigger__icon {

    display: inline-block;

    position: absolute;

    left: 50%;

    top: 50%;

    bottom: auto;

    right: auto;

    width: 20px;

    height: 3px;

    -webkit-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -ms-transform: translateX(-50%) translateY(-50%);

    -o-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

    background-color: rgba(255,255,255,0.85);

    background-color: rgba(0,0,0,0.85);

    -webkit-transition: background-color 0.3s;

    -moz-transition: background-color 0.3s;

    transition: background-color 0.3s;

}

.megamenu-trigger__icon::before,

.megamenu-trigger__icon:after {

    content: '';

    width: 100%;

    height: 100%;

    position: absolute;

    background-color: rgba(255,255,255,0.85);

    background-color: rgba(0,0,0,0.85);

    right: 0;

    -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;

    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;

    transition: transform .3s, top .3s, background-color 0s;

}

.megamenu-trigger__icon::before {

    top: -6px;

}

.megamenu-trigger__icon::after {

    top: 6px;

}

.megamenu-trigger__icon.is-clicked {

    background-color: rgba(255, 255, 255, 0);

}

.megamenu-trigger__icon.is-clicked::before,

.megamenu-trigger__icon.is-clicked::after {

    background-color:  rgba(255, 255, 255, 1);

        background-color: rgba(0,0,0,0.85);

}

.megamenu-trigger__icon.is-clicked::before {

    top: 0;

    -webkit-transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -ms-transform: rotate(135deg);

    -o-transform: rotate(135deg);

    transform: rotate(135deg);

}

.megamenu-trigger__icon.is-clicked::after {

    top: 0;

    -webkit-transform: rotate(225deg);

    -moz-transform: rotate(225deg);

    -ms-transform: rotate(225deg);

    -o-transform: rotate(225deg);

    transform: rotate(225deg);

}



@media only screen and (min-width: 768px) {

    .megamenu-trigger {

        right: 15px;

    }

}

@media only screen and (min-width: 1024px) {

    .megamenu-trigger {

        display:none;

    }

}

@media only screen and (min-width: 1280px) {

    .megamenu-trigger {



    }

}