/* 
    plugins used: ci-mobile-menu (currently turned off)
    components used: phone-number, language-menu, tile 
    modules used: mobile-menu
*/
#navigation-view {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background-color: #fff;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2)
}
#navigation-view .grid {
    height: 100px; position: relative;
    -webkit-transition: height .2s;
    -moz-transition: height .2s;
    -ms-transition: height .2s;
    transition: height .2s
}
#navigation-view .navigation-view-logo {
    position: absolute; left: 10px; top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: top .2s;
    -moz-transition: top .2s;
    -ms-transition: top .2s;
    transition: top .2s
}
#navigation-view .navigation-view-logo img {
    width: 140px; border: none;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    transition: all .2s
}
#navigation-view .navigation-view-postscript {font-size: 11px; display: block; text-align: right; color: #596d82}
#navigation-view .navigation-view-phone-numbers {
    position: absolute; right: 80px; top: 20px;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -ms-transition: opacity .2s;
    transition: opacity .2s
}
#navigation-view .navigation-view-submenu-1 {width: 1040px}
#navigation-view .navigation-view-submenu-2 {width: 360px; padding: 15px}

/* modifiers */
#navigation-view.sticky .grid {height: 60px}
#navigation-view.sticky .navigation-view-phone-numbers {opacity: 0}
#navigation-view.sticky .ci-mobile-menu .ci-mobile-menu-menu > li > a,
#navigation-view.sticky .mobile-menu .mobile-menu-list > li > a {padding-bottom: 15px}
#navigation-view.sticky .ci-mobile-menu .ci-mobile-menu-submenu-box,
#navigation-view.sticky .mobile-menu .mobile-menu-submenu-box {top: 38px}
#navigation-view.sticky .navigation-view-logo img {width: 110px;}
#navigation-view .navigation-view-phone-numbers.is-to-the-right {right: 10px}
#navigation-view a.is-language {margin-left: 10px}
#navigation-view a.is-language img {max-height: 17px}

/* overwrites */
#navigation-view .phone-number {margin-left: 30px}
#navigation-view .language-menu {
    position: absolute; top: -40px; right: 10px;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -ms-transition: opacity .2s;
    transition: opacity .2s
}
#navigation-view.sticky .language-menu {opacity: 0}
#navigation-view .tile {height: 90px; min-height: 0}
#navigation-view .tile:not(:last-child) {margin-bottom: 15px}
#navigation-view .tile .tile-txt {padding-top: 15px; padding-bottom: 15px}
#navigation-view .tile .tile-title {font-size: 18px}
#navigation-view .tile .tile-subtitle {font-size: 14px}
#navigation-view .mobile-menu .navigation-view-logo {
    top: 30px; left: 20px; z-index: 12;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

#navigation-view .mobile-user-trigger, 
#navigation-view .mobile-lang-trigger {display: none}

@media screen and (min-width: 980px) {
    /* overwrites */
    #navigation-view .mobile-menu {position: absolute; right: 0px; bottom: 0}
    #navigation-view .mobile-menu .navigation-view-logo {display: none}
}
@media screen and (max-width: 1164px) {
    #navigation-view .grid {height: 80px}
    #navigation-view .navigation-view-logo img {width: 130px}
    #navigation-view .navigation-view-submenu-1 {width: 100%}
    
    /* modifiers */
    #navigation-view.sticky .ci-mobile-menu .ci-mobile-menu-menu > li > a,
    #navigation-view.sticky .mobile-menu .mobile-menu-list > li > a {padding-bottom: 19px}
    
    /* overwrites */
    #navigation-view .phone-number {font-size: 16px}
    #navigation-view .language-menu {padding-left: 40px}
}
@media screen and (max-width: 980px) {
    #navigation-view .grid {height: 60px}
    #navigation-view .navigation-view-phone-numbers {
        top: 50%; right: 70px; 
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
    #navigation-view .navigation-view-submenu-2 {width: 100%}    
    #navigation-view a.is-language {display: none;}
    
    /* overwrites */
    #navigation-view .language-menu {top: 14px; right: 5px}
    #navigation-view .navigation-view-phone-numbers.is-to-the-right {
        opacity: 1; position: relative; width: 100%; top: auto; bottom: -108px; height: 93px; max-width: 100%;
        background: #fff; display: none; right: 0;
    }
    #navigation-view .mobile-user-trigger {
        width: 50px; height: 60px; position: absolute; right: 50px;  top: 0;
        border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;
        display: flex; -webkit-display: flex;
        justify-content: center; -webkit-justify-content: center;
        align-items: center; -webkit-align-items: center; 
    }
    #navigation-view .mobile-user-trigger:before {
        content: ''; display: block; width: 36px; height: 36px; 
        background-image: url(../../images/user-trigger.png);
        background-repeat: no-repeat;
        background-position: center center; 
        background-size: 36px
    }
    #navigation-view .mobile-lang-trigger {
        width: 50px; height: 60px; position: absolute; right: 99px;  top: 0;
        border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;
        display: flex; -webkit-display: flex;
        justify-content: center; -webkit-justify-content: center;
        align-items: center; -webkit-align-items: center; 
    }
    
    
    #navigation-view .navigation-view-phone-numbers .user-login {width: 100%; display: none;}
    #navigation-view .navigation-view-phone-numbers.user-box-active .user-login {display: block;}
    #navigation-view .navigation-view-phone-numbers.lang-box-active {height: 145px; bottom: -133px}
    #navigation-view .navigation-view-phone-numbers.lang-box-active a.is-language,
    #navigation-view .user-login a {
        display: block; margin-left: 0; font-size: 14px; height: auto; background: 0 0; color: #777; line-height: 25px; width: 100%;
        padding: 10px 0; text-align: center; border-top: 1px solid #c8c8c8;
    }
}
@media screen and (max-width: 620px) {
    #navigation-view .navigation-view-phone-numbers {
        text-align: right; max-width: 160px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap
    }
    
    /* overwrites */
    #navigation-view .phone-number {width: 100%; margin: 2px 0}
}
@media screen and (max-width: 480px) {  
    #navigation-view .navigation-view-logo img {width: 100px}
    #navigation-view .navigation-view-postscript {font-size: 9px}
    #navigation-view .navigation-view-phone-numbers {right: 60px}
    
    /* overwrites */
    #navigation-view .phone-number::before {margin-right: 2px}
    #navigation-view .navigation-view-phone-numbers.is-to-the-right {right: 0px}
}