﻿.icon-sprite {
    background-image: url(../images/icon_sprite.png);
    background-repeat: no-repeat;
    text-indent: -9999px
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .icon-sprite {
        background-image: url(../images/icon_sprite@2x.png);
        background-size: 100px 1000px
    }
}

.nav-container .grid-full::after {
    content: '';
    display: table;
    clear: both
}

.nav .grid-full > .parent > a > span:after {
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: normal;
    font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f107"
}

.sf-menu-phone li strong:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: normal;
    font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f105"
}

.sf-menu-phone li strong.opened:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: normal;
    font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f107"
}

.skip-nav {
    width: 33.3333%
}

.skip-nav:not(.skip-active):hover {
    text-decoration: none
}

.skip-nav .label {
    display: inline
}

.skip-nav .icon {
    width: auto;
    height: auto
}

.skip-nav .icon:before {
    display: inline-block;
    font-family: "material-design";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "";
    font-size: 24px
}

@media only screen and (min-width: 500px) {
    .skip-nav {
        width: 33.3333%
    }
}

@media only screen and (max-width: 991px) {
    #header-nav {
        padding: 0;
    }

    .main-menu {
        position: relative !important
    }

    .pseudoStickyBlock {
        display: none !important
    }
}

.nav-primary a {
    text-decoration: none;
    position: relative;
    display: block;
    color: #8b8b8b;
    line-height: 30px;
    font-family: "Roboto", sans-serif
}

.nav-primary li {
}

.nav-primary .menu-active > ul.level0, .nav-primary li.level0 li.sub-menu-active > ul {
    display: block
}

.nav-primary li.level0 > a {
    text-transform: uppercase
}

@media only screen and (max-width: 991px) {
    .nav-primary a.level0,
    .nav-primary a {
        line-height: 40px
    }

    .nav-primary li.level0 ul {
        display: none
    }

    .nav-primary li.level0 li {
        padding: 0 0 0 25px
    }

    .nav-primary li.level1 a {
        padding: 0 15px 0 25px
    }
    .no-touch .nav-primary a:hover,
    .no-touch .nav-primary .active a {
        background: none;
        color: #d6375f;
        text-decoration: none;
    }

    .nav-primary li.parent > a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        display: block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #ccc;
        border-right: none;
        top: 50%;
        left: 10px;
        right: auto;
        margin-top: -5px
    }

    .nav-primary li.parent.sub-menu-active > a:after,
    .nav-primary li.parent.menu-active > a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        display: block;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 5px solid #ccc;
        border-bottom: none;
        top: 50%;
        left: 10px;
        right: auto;
        margin-top: -5px
    }

    .nav-primary li.menu-active > a, .nav-primary li.sub-menu-active > a {
        color: #333
    }
}

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

    .skip-nav {
        display: none
    }

    #header-nav {
        display: block;
        padding: 0;
        background: #fff;

    }

    .main-menu {
        position: relative;
        top: 0;
        width: 100%;
        left: 0;
        z-index: 11
    }

    .main-menu.isStuck {
        z-index: 9990
    }

    .header-nav {
        display: block;
        margin-top: 15px
    }
    .nav-primary .menu-active {
        z-index: 200
    }

    .nav-primary {
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: 130px;
        position: relative;
    }

    .nav-primary > li {
        /*display: flex;*/
        /*align-items: center;*/
    }

    .nav-primary li.level0 > a {
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        color: #383838;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        position: relative;
        text-transform: none ;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        height: 130px;
        position: relative;
        /*****************/
        vertical-align: middle;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }

    .nav-primary li.level0 > a:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 5px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #383838;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .nav-primary li.level0:hover a:before {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
        transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    }
    .nav-primary > li.level0.active > a:before {
        background: #383838;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    .nav-primary li.level0:hover > a,
    .nav-primary li.level0.active > a {
        color: #fff;
    }
    .nav-primary li.level0 > a:after {
        content: "";
        display: block;
        font-family: FontAwesome;
        font-size: inherit;
        font-weight: normal;
        line-height: normal;
        text-rendering: auto;
        transform: translate(0px, 0px);
    }

    .nav-primary a.level0 {
        padding: 0 25px
    }


    .nav-primary li.level0 > ul {
        background: #fff;
        position: absolute;
        left: 0;
        top: 130px;
        z-index: 10;
        width: 100%;
        display: none;
        box-shadow: 0 5px 21px rgba(0, 0, 0, 0.09);
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .nav-primary li.level0 ul:after {
        content: '';
        display: table;
        clear: both;
    }
    .nav-primary li.level0 > ul > li {
        float: left;
        width: 33.33333%;
        padding: 0 30px 30px;
    }
    .nav-primary li.level0 > ul > li:nth-child(3n+1) {
        clear: left;
    }
    .nav-primary li.level0 > ul > li.view-all {
        display: none;
    }
    .nav-primary li.level0 > ul > li > a {
        color: #3e3e3e;
        font-size: 24px;
        font-weight: normal;
    }
    .nav-primary li.level0 ul ul {
        padding-top: 15px;
    }
    .nav-primary li.level0 > ul ul li {
        margin-bottom: 8px;
    }
    .nav-primary li.level0 > ul ul li a {
        color: #d6375f;
        display: block;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
    }

    /*.nav-primary li.level0 li.parent > a {*/
        /*position: relative*/
    /*}*/

    /*.nav-primary li.level0 li.parent > a:after {*/
        /*content: '';*/
        /*position: absolute;*/
        /*width: 0;*/
        /*height: 0;*/
        /*display: block;*/
        /*border-top: 4px solid transparent;*/
        /*border-bottom: 4px solid transparent;*/
        /*border-left: 4px solid #ccc;*/
        /*border-right: none;*/
        /*right: 5px;*/
        /*top: 50%;*/
        /*margin-top: -3px*/
    /*}*/
}

.nav-primary li.menu-active > ul {
    display: block
}
