/*
 * =============================================================================
 * [ HEADER ]
 * =============================================================================
 */

html.menu-is-opened {
    overflow-y: hidden;
}

/* utils */
.l-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.shadow-5 {
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.12),
    0 4px 4px rgba(0,0,0,0.12),
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12);
}

.visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}
/* responsive container for iframe */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* holder for video without loading */
lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (max-width: 1200px) {
    .l-padding {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.header {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    z-index: 1502; /* 1052 - to overlay above select2 dropdown */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}


.header__panel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.15s ease;
}

.header__login-link {
    border: 1px solid #929292;
    color: #929292;
    border-radius: 30px;
    padding: 1px 10px 3px 22px;
    margin-left: 17px;
    line-height: 1.1;
    transition: opacity 0.2s ease-in-out;
    position: relative;
    display: flex;
    background: url("/wp-content/themes/Clevvers/images/icons/icon-login.svg") no-repeat 7px 50%;
}

.header__login-link:hover,
.header__login-link:focus {
    opacity: 0.7;
    color: #929292;
    text-decoration: none;
}

.header__cart {
    border: 1px solid #929292;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    padding: 0;
    margin-left: 17px;
    line-height: 1.1;
    transition: opacity 0.2s ease-in-out;
    position: relative;
    display: block;
    background: url("/wp-content/themes/Clevvers/images/icons/icon-cart.svg") no-repeat 50% 50%;
    background-size: 24px 24px;
}

.header__cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    border-radius: 50%;
    background-color: #f00;
    text-align: center;
    color: #fff;
    width: 16px;
    height: 16px;

}

.header__cart:hover {
    opacity: 0.7;
}

.header__currency {
    position: relative;
    margin-left: 5px;
}

.header__currency::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: solid #737373;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    top: calc(50% - 4px);
    right: 0;
    pointer-events: none;
    transition: border-top-color 0.2s ease-in-out;
}

.header__currency:hover::after,
.header__currency:focus::after {
    border-top-color: #737373;
}

.header__currency:hover .header__currency-select,
.header__currency:focus .header__currency-select {
    color: #737373;
}

.header__currency-select {
    font-size: 14px;
    padding: 5px 12px 5px 3px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    color: #737373;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.wpml-ls-legacy-dropdown-click {
    width: auto;
    margin-left: 5px;
}

.wpml-ls-sub-menu {
    width: 74px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04),
    0 2px 2px rgba(0,0,0,0.06),
    0 4px 4px rgba(0,0,0,0.08),
    0 8px 8px rgba(0,0,0,0.10);
    border-radius: 3px;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.wpml-ls-sub-menu[style*="visible"] {
    transform: translateY(0);
    opacity: 1;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a {
    border: none;
    position: relative;
    padding-left: 12px;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a:hover {
    background-color: #f9f9f9;
}

/* languages custom flags */
.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-en a::before,
.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-fr a::before,
.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-de a::before,
.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-es a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 12px;
    background: url("/wp-content/themes/Clevvers/images/icons/flag-gb.svg") no-repeat;

}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-fr a::before {
    background-image: url("/wp-content/themes/Clevvers/images/icons/flag-fr.svg");
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-de a::before {
    background-image: url("/wp-content/themes/Clevvers/images/icons/flag-de.svg");
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item-es a::before {
    background-image: url("/wp-content/themes/Clevvers/images/icons/flag-es.svg");
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
    border: 1px solid #cdcdcd;
    background: #fff;
    z-index: 115;
}

.js-wpml-ls-item-toggle .wpml-ls-flag {
    display: none;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-flag {
    width: 18px;
    height: 12px;
    /* hide wpml flags to make it custom */
    display: none;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle {
    border: none;
    font-size: 14px;
    padding-right: 26px;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover .wpml-ls-item-toggle,
.wpml-ls-legacy-dropdown-click .wpml-ls-item-toggle:focus {
    background-color: transparent;
    text-decoration: none;
    color: #737373;
}

.wpml-ls-legacy-dropdown-click a {
    padding: 8px 5px 8px 8px;
    color: #737373;
    background-color: transparent;
}

.wpml-ls-legacy-dropdown-click a:hover,
.wpml-ls-legacy-dropdown-click a:focus {
    text-decoration: none;
    color: #737373;
    background-color: transparent;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {
    width: 6px;
    height: 6px;
    border: solid #737373;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    top: calc(50% - 4px);
    right: 11px;
}

.wpml-ls-legacy-dropdown-click a span {
    vertical-align: top;
    margin-left: 5px;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-display {
    vertical-align: middle;

}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: background-color 0.15s ease;
}

.logo {
    margin: 0;
    width: 150px;
    display: flex;
}

.header__logo {
    min-height: 60px;
}

.logo a {
    display: flex;
}

.logo svg,
.logo a img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.header__logo svg path {
    transition: all 0.15s ease;
}

.header__logo svg .cls-3 {
    fill: #101a2f;
}

.header__logo svg .cls-4 {
    fill: #2d4882;
}

.header__nav {
    padding: 0;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
}

.header__nav::after {
    display: none;
}

/* mega-menu overrides */
#mega-menu-wrap-main-menu,
#mega-menu-wrap-main-menu #mega-menu-main-menu {
    position: static;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu {
    padding: 0 !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    top: 70px;
    margin-top: 0 !important;
}

#reg_butt {
    background: #ffce12;
    padding: 11px 21px;
    margin-left: 40px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    color: #fff;
    font-weight: bold;
}

#reg_butt:hover,
#reg_butt:focus {
    text-decoration: none;
    color: #5e5e5e;
    border-color: #dcdcdc;
    background-color: #dcdcdc;
}

/* hamburger button */
.hamburger {
    padding: 15px 15px;
    display: none;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #fff;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 100%;
    height: 4px;
    background-color: #243547;
    border-radius: 4px;
    position: absolute;
    transition-property: transform, background-color;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
    width: 72%;
}

.hamburger-inner::after {
    bottom: -10px;
    width: 50%;
}

/* hamburger spin effect */
.hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
    width: 100%;
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 100%;
}

.nav-mobile {
    padding: 0;
    background-color: transparent;
    display: none;
}

.nav-mobile .menu {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.nav-mobile .menu li {
    position: relative;
}

.nav-mobile .menu li::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 30px;
    width: calc(100% - 60px);
    height: 1px;
    background-color: #295179;
}

.nav-mobile .dropdown-container {
    background-color: transparent;
    padding: 0;
}
.nav-mobile .menu-ic {
    top: 5px;
    margin: 0 11px 0 11px;
}

.nav-mobile .product-menu-icon .menu-ic {
    width: 22px;
    height: 22px;
    background: url("/wp-content/themes/Clevvers/images/icons/icon-nav-products.svg") no-repeat;
}

.nav-mobile .location-menu-icon .menu-ic {
    width: 22px;
    height: 22px;
    background: url("/wp-content/themes/Clevvers/images/icons/icon-nav-locations.svg") no-repeat;
}

.nav-mobile .pricing-menu-icon .menu-ic {
    width: 22px;
    height: 22px;
    background: url("/wp-content/themes/Clevvers/images/icons/icon-nav-pricing.svg") no-repeat;
}

.nav-mobile .company-menu-icon .menu-ic {
    width: 22px;
    height: 22px;
    background: url("/wp-content/themes/Clevvers/images/icons/icon-nav-company.svg") no-repeat;
}

.nav-mobile .dropdown-btn {
    transition: all 0.2s ease-in-out;
    padding-top: 5px;
    padding-bottom: 9px;
    background-color: transparent;
    font-weight: normal;
}
.nav-mobile .dropdown-btn:hover {
    text-decoration: none;
}

.nav-mobile .menu > li > a {
    font-size: 19px !important;
}

.nav-mobile .dropdown-btn.background_h {
    background-color: #214263;
}

.nav-mobile .level_2_menu:last-child {
    border-bottom: 0;
}
.nav-mobile .level_2_menu a {
    padding-left: 80px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px !important;
    font-weight: normal;
}

.nav-mobile .level_2_menu a::before {
    display: none;
}

.nav-mobile .arrow-menu-div {
    width: 90px;
    height: 42px;
    position: absolute;
    top: 0;
    right: 0;
    transition: transform 0.2s ease-in-out;
}

.nav-mobile .arrow-menu-div.rotated {
    transform: rotate(180deg);
}

.nav-mobile .down-arrow-menu {
    position: absolute;
    top: calc(50% - 4px);
    right: calc(50% - 14px);
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-mobile .active-side > a {
    color: #ffcb00;
}
.nav-mobile__button-holder::before {
    content: "";
    position: absolute;
    top:-25px;
    left: 0;
    width: 100%;
    height: 25px;
    background: linear-gradient(to bottom, rgba(23, 49, 74, 0) 0%, rgba(23, 49, 74, 1) 60%, rgba(23, 49, 74, 1) 100%);
}
.nav-mobile__button-holder {
    width: 100%;
    padding: 0 5px 25px;
    position: sticky;
    bottom: 0;
    background-color: #17314a;
    z-index: 11;

    display: flex;
    justify-content: space-around;
}

.nav-mobile__button-box {
    margin-bottom: 10px;
    display: flex;
    width: 47%;
}

.nav-mobile__button {
    padding: 14px 25px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    width: 100%;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ffce12;
    color: #ffce12;
    background-color: transparent;
    text-transform: uppercase;
    font-size: 15px;
}

.nav-mobile__button--registration {
    color: #17314a;
    border-color: #ffce12;
    background-color: #ffce12;
}

.nav-mobile__button:hover {
    text-decoration: none;
    color: #17314a;
    border-color: #ffce12;
    background-color: #ffce12;
}
/* header responsive styles */

@media (max-width: 1200px) {
    .header__panel,
    .header__inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 1100px) {
    .menu-is-opened .header {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: #17314a;
    }

    .menu-is-opened .header__logo {
        opacity: 0;
    }
    .menu-is-opened .wpml-ls-legacy-dropdown-click .wpml-ls-current-language .wpml-ls-item-toggle,
    .menu-is-opened .wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover .wpml-ls-item-toggle,
    .menu-is-opened .wpml-ls-legacy-dropdown-click .wpml-ls-item-toggle:focus {
        color: #356798;
    }
    .menu-is-opened .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {
        border-color: #356798;
    }
    .menu-is-opened .header__login-link,
    .menu-is-opened .header__currency {
        display: none;
    }

    .header__login-link {
        height: 30px;
        width: 30px;
        border: none;
        padding: 0;
        background-position-x: 50%;
        background-size: 16px 16px;
        margin-left: 10px;
    }
    .header__login-text {
        display: none;
    }
    .header__inner {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    /*.header__logo svg .cls-3 {
        fill: #fff;
    }

    .header__logo svg .cls-4 {
        fill: #feeda3;
    }*/

    #mega-menu-wrap-main-menu,
    #reg_butt {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-mobile.is-opened {

    }
}

@media (max-width: 768px) {
    .header__panel {
        padding-bottom: 0;
    }
    .header__inner {
        padding-top: 0;
    }
}