@keyframes image-fade-out {
    from {
        background: url("/assets/templates/main/images/nav/icon-nav-dark-center.png") lightgrey;
    }
    to {
        background: lightgrey;
    }
}
@keyframes bar-shift-down {
    from {
        transform: none;
    }
    to {
        transform: rotate(-45deg);
    }
}
@keyframes bar-shift-up {
    from {
        transform: none;
    }
    to {
        transform: rotate(45deg);
    }
}

@media all and (max-width: 800px) {
    .js #toggle-navigation {
        text-transform: uppercase;
        left: 0;
        border-radius: 0;
        background-image: none;
        background-color: lightgrey;
        transition: background 1.5s linear;
        height: 45px;
        
    }
    .js #toggle-navigation a {
        position: relative;
        font-size: 18px;
        padding-left: 40px;
        line-height: 45px;
    }
    .js #toggle-navigation a::before,
    .js #toggle-navigation a::after,
    .js #toggle-navigation::before {
        content: '';
        position: absolute;
        width: 30px;
        height: 4px;
        background-color: #333333;
        left: 3.4px;
    }
    .js #toggle-navigation a::before {
        top: 10px; 
        transform-origin: center right;
        transition: rotate 0.3s ease-out;
    }
    .js #toggle-navigation a::after {
        bottom: 10px;
        transform-origin: center right;
        transition: rotate 0.3s ease-out;
    }
    .js #toggle-navigation::before {
        top: 20.5px;
    }
    .js .active-navigation #toggle-navigation {
        width: auto;
        height: 45px;
        background-color: #fff;
    }
    .js .active-navigation #toggle-navigation a::before {
        animation: bar-shift-down 0.3s;
        animation-fill-mode: forwards;
    }
    .js .active-navigation #toggle-navigation a::after {
        animation: bar-shift-up 0.3s;
        animation-fill-mode: forwards;
    }
    .active-navigation #container-masthead.ims-push-content, 
    .active-navigation .ims-push-content,
    .active-navigation #container-fixed-masthead {
        left: 0;
    }
    #primary-navigation {
        background-color: rgba(255,255,255,0.9);
        padding-top: 45px;
        box-shadow: none;
    }
    .active-navigation #container-primary-navigation {
        width: 100%;
    }
    .js .active-navigation #toggle-navigation a {
        text-align: left;
        width: auto;
        height: 45px;
        line-height: 45px;
        display: inline-block;
        background-color: lightgrey;
        padding: 0 5px 0 40px;
        font-size: 17px;
    }
    .phone-number {
        position: fixed;
        background-color: lightblue;
        top: 0;
        right: 0;
        width: calc(100% - 100px);
        height: 45px;
        line-height: 40px;
        text-align: right;
        font-size: 32px;
        z-index: 2000;
        padding-top: 3px;
    }
    #primary-navigation ul li.nav-level-1 > a,
    #primary-navigation ul li.nav-level-1 li a {
        text-decoration: underline;
    }
    #primary-navigation ul li.nav-level-1 > ul > li ul {
        border-left: 0;
    }
    div.expand-nav {
        width: 30px;
        background-color: lightgrey;
        right: 10px;
        top: 0;
        margin: 5px 0;
        padding: 0 5px;
        height: 30px;
        font-size: 22px;
    }
    div.expand-nav > span.nav-expand {
        transition: all 0.4s ease-in-out;
    }
    div.expand-nav.active {
        background-color: lightblue;
    }
    span.nav-expand:after {
        content: '\2227';
    }
    div.expand-nav.active > span.nav-expand:after {
        content: '\2227';
    }
    div.expand-nav.active > span.nav-expand {
        transform: rotate(180deg);
        line-height: 23px;
    }
    li.nav-level-1 li span.nav-expand,
    li.nav-level-1 li div.expand-nav.active span.nav-expand {
        line-height: 20px;
    }
    li.nav-level-1 li div.expand-nav {
        width: 20px;
        padding: 0;
    }
}

@media all and (max-width: 570px) {
    .js #toggle-navigation {
        background-size: auto 36px;
        top: 0;
        height: 45px;
    }
    .js #toggle-navigation a {
        line-height: 45px;
    }
}