/* TOGGLE */
.menuToggle {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:none;
    margin-top:0px;
    z-index:1000000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
.menuToggle.open{
    background:none;
    }
.menuToggle input {
    display: flex;
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: pointer;
    opacity: 0; /* hide input */
    z-index: 1; /* top of the menu */
    }
.menuToggle span {
    width: 40px;
    height: 3px;
    margin-bottom: 6px;
    background-color: rgba(255,255,255,1);
    border-radius: 0px;
    -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);
    }
#span1 {
    transform-origin: 4px 0px;
    }
#span3 {
    transform-origin: bottom right;
    }
.menuToggle input:checked ~ #span1 {
    background-color: rgba(255,255,255,1);
    transform: rotate(45deg) translate(3px);
    }
.menuToggle input:checked ~ #span2 {
    background-color: rgba(255,255,255,1);
    transform: rotate(495deg) translate(5px);   
    }
.menuToggle input:checked ~ #span3 {
    background-color: rgba(255,255,255,1);
    transform: rotate(45deg);
    opacity: 0;
    }
/* NAV */
nav#overlay {
    z-index:10000;
    }
nav {
    position: fixed;
    overflow: auto;
    background-color: rgba(0,0,0,.9);
    padding: 20px;
    width: calc(100% - 0em);
    height: calc(100vh - 0em);
    display: none;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    }
nav ul,
nav ul ul,
nav ul ul ul {
    font-family: 'Oswald', sans-serif;
    list-style-type: none;
    padding: 0;
    width: 100%;
    margin: 15% auto 0 auto;
    display: inline-block;
    }
nav ul li,
nav ul li ul li,
nav ul li ul li ul li {
    opacity: 0;
    text-align: center;
    margin-bottom:0px;
    }
nav ul a {
    text-decoration: none;
    text-transform: uppercase;
    }
nav ul li a {
    color: rgba(255,255,255,1);
    font-size: 24px;
    line-height: 27px;
    margin:0 0;
    }
nav ul.sub-menu {
    margin:0 0 10px;
    }
nav ul.sub-menu li a {
    color: rgba(255,255,255,.55);
    display: inline-block;
    font-size: 13px;
    line-height: 22px;
    }
nav ul.sub-menu li.headline a {
    color: rgba(5,129,218,1);
    display: block;
    }
nav ul.sub-menu li.headline ul li a {
    color: rgba(255,255,255,.55);
    display: block;
    }
nav ul li i {
    margin-right:10px;
    }
.show-menu {
    display: block;
    -webkit-animation: slide-menu 0.5s ease-in forwards;
    animation: slide-menu 0.5s ease-in forwards;
    }
.show-menu .close-button {
    -webkit-animation: show-x 1s 1s forwards;
    animation: show-x 1s 1s forwards;
    }
.show-menu li:nth-of-type(1) {
    -webkit-animation: menu-item-anim .35s forwards .5s ease-in-out;
    animation: menu-item-anim .35s forwards .5s ease-in-out;
    }
.show-menu li:nth-of-type(2) {
    -webkit-animation: menu-item-anim .35s forwards 0.7s ease-in-out;
    animation: menu-item-anim .35s forwards 0.7s ease-in-out;
    }
.show-menu li:nth-of-type(3) {
    -webkit-animation: menu-item-anim .35s forwards 0.9s ease-in-out;
    animation: menu-item-anim .35s forwards 0.9s ease-in-out;
    }
.show-menu li:nth-of-type(4) {
    -webkit-animation: menu-item-anim .35s forwards 1.1s ease-in-out;
    animation: menu-item-anim .35s forwards 1.1s ease-in-out;
    }
.show-menu li:nth-of-type(5) {
    -webkit-animation: menu-item-anim .35s forwards 1.3s ease-in-out;
    animation: menu-item-anim .35s forwards 1.3s ease-in-out;
    }
.show-menu li:nth-of-type(6) {
    -webkit-animation: menu-item-anim .35s forwards 1.5s ease-in-out;
    animation: menu-item-anim .35s forwards 1.5s ease-in-out;
    }
.show-menu li:nth-of-type(7) {
    -webkit-animation: menu-item-anim .35s forwards 1.7s ease-in-out;
    animation: menu-item-anim .35s forwards 1.7s ease-in-out;
    }
.show-menu li:nth-of-type(8) {
    -webkit-animation: menu-item-anim .35s forwards 1.9s ease-in-out;
    animation: menu-item-anim .35s forwards 1.9s ease-in-out;
    }
.show-menu li:nth-of-type(9) {
    -webkit-animation: menu-item-anim .35s forwards 2.1s ease-in-out;
    animation: menu-item-anim .35s forwards 2.1s ease-in-out;
    }
.show-menu li:nth-of-type(10) {
    -webkit-animation: menu-item-anim .35s forwards 2.3s ease-in-out;
    animation: menu-item-anim .35s forwards 2.3s ease-in-out;
    }
@-webkit-keyframes slide-menu {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        }
    }
@keyframes slide-menu {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        }
    }
@-webkit-keyframes show-x {
    from {
        opacity: 0;
        }
    to {
        opacity: 1;
        }
    }
@keyframes show-x {
    from {
        opacity: 0;
        }
    to {
        opacity: 1;
        }
    }
@-webkit-keyframes menu-item-anim {
    from {
        -webkit-transform: translateY(70%);
        transform: translateY(70%);
        opacity: 0;
        }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        }
    }
@keyframes menu-item-anim {
    from {
        -webkit-transform: translateY(70%);
        transform: translateY(70%);
        opacity: 0;
        }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        }
    }

/* =============================================
   ###
================================================ */
@media (max-width: 767px) {
    .menuToggle {
        background-color: rgba(0,0,0,1);
        height: 50px;
        margin-left:0px;
        border:0;
        }
    .menuToggle input {
        width: 50px;
        height: 50px;
        }
    .menuToggle span {
        background: rgba(255,255,255,1) !important;
        }
    nav {
        padding: 10px;
        }
    nav ul,
    nav ul ul,
    nav ul ul ul {
        margin: 10px auto 0;
        }
    nav ul li a {
        font-size: 21px;
        }
    body nav#overlay,
    nav ul.sub-menu li a {
        line-height: 18px !important;
        }
    }

/* =============================================
   ###
================================================ */
@media (min-width: 768px) {
    
    }


/* =============================================
   ###
================================================ */
@media (min-width: 992px) {

    nav {
        padding: 30px;
        }
    nav ul {
        margin: 10% auto 0 auto;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (auto)[5];
        grid-template-columns: repeat(5, auto);
        }
    nav ul li,
    nav ul li ul li,
    nav ul li ul li ul li {
        text-align: left;
        }
    nav ul ul{
        display: block;
        -ms-grid-columns: inherit;
        grid-template-columns: inherit;
        }
    
    
    }

/* =============================================
   ###
================================================ */
@media (min-width: 1200px) {
    nav ul {
        width: 80%;
        }
    
    }