//
//
//
//
// 
//
//
// VARIABLES
// 
// 
// 
//
//
//
//
//
//

/* MEDIA queries */

@xs: ~"(max-width: @{screen-xs-max})";
@sm: ~"(max-width: @{screen-sm-max})";
@md: ~"(max-width: @{screen-md-max})";
@lg: ~"(min-width: @{screen-md-max})";
@global-space: 10px;

/**
* TYPOGRAPHY
*/

// size global
@font-size-base: 16px;
@font-size-middle: 14px;
@font-size-small: 12px;
@line-height-middle: @line-height-small;
// size headings
@font-size-h1: ceil((@font-size-base * 1.85));
@font-size-h2: @font-size-h1;
@font-size-h3: ceil((@font-size-base * 1.3));
@font-size-h4: @font-size-base;
@font-size-h5: @font-size-h4;
@font-size-h6: @font-size-h5;
// font-weight
@ew-bold-font-weight: normal;
@headings-font-weight: @ew-bold-font-weight;
@alert-link-font-weight: @ew-bold-font-weight;
@alert-link-font-weight: @ew-bold-font-weight;
@badge-font-weight: @ew-bold-font-weight;
@close-font-weight: @ew-bold-font-weight;

/* BRAND */

@brand-primary: #FF7A00;
@brand-secondary: @gray-dark;
@brand-tertiary: green;
@brand-cart: #5cb85c;
@brand-cta: red;

/* COLOR ON BRANDs */

@color-on-brand-primary: white;
@color-on-brand-secondary: white;
@color-on-brand-tertiary: white;
@color-on-cart: white;
@color-on-cta: white;
@gray-light-borders: lighten(#000, 88%);
@text-color: @gray;
@headings-color: @gray-dark;
@text-muted: lighten(#000, 60%);
@product-listing-title-color: @text-color;
@special-price-color: @brand-danger;
@link-color: @brand-primary;
@link-hover-color: @brand-primary;
@navbar-default-mega-background: transparent;

/* BTNS */

@btn-primary-color: @color-on-brand-primary;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-secondary-color: @color-on-brand-secondary;
@btn-secondary-bg: @brand-secondary;
@btn-secondary-border: darken(@btn-secondary-bg, 5%);
@btn-cart-color: @color-on-cart;
@btn-cart-bg: @brand-cart;
@btn-cart-border: darken(@btn-cart-bg, 5%);
@btn-cta: @color-on-cta;
@btn-cta-bg: @brand-cta;
@btn-cta-border: darken(@btn-cta-bg, 5%);
@btn-default-color: @gray;
@btn-default-bg: @gray-lighter;
@btn-default-border: darken(@btn-default-bg, 5%);

/* @btn-default-color: @color-on-brand-tertiary;
@btn-default-bg: @brand-tertiary;
@btn-default-border: darken(@brand-tertiary, 5%); */


/* MAINNAV BUTTON */

@navigation-link-font-size: 1em;
@navigation-link-padding-top: 19px;
@navigation-link-padding-bottom: 19px;
@navigation-link-padding-left: 19px;
@navigation-link-padding-right: 19px;
@mega-menu-height: round((@navigation-link-padding-bottom + @navigation-link-padding-top) + (@navigation-link-font-size * @font-size-base));

/* MOBILNAV */

@padding-global: 12px;
@mobil-nav-color: whitesmoke;
@mobil-nav-border-color: #cfcfcf;
@mobil-nav-active-color: darken(@gray-lighter, 5%);
@btn-overlay-show-height: 40px;

/* ZINDEX */

@zindex-navbar: 1000;
@zindex-dropdown: 1053;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; //1040
@zindex-modal: 1052; //1052
@zindex-shop-nav: 1052;
@zindex-megamenu: 1051;
@zindex-mobil-bottom-nav: 1500;
@zindex-mobil-nav: 5000;
@zindex-btn-overlay: 1051;
@zindex-zoom-detail: 1090;
@zindex-zoom-lg-outer: 1600;

/* NAV ICONS */

@nav-icon-open: "\f00d";
@nav-icon-close: "\f078";
@nav-icon-more: "\f054";

/* SHOP ICONS */

@directional-fa-icon-right: chevron-right;
@directional-fa-icon-left: chevron-right;
@directional-fa-icon-up: chevrone-up;
@directional-fa-icon-down: chevron-down;
@directional-fa-icon-close: times;

/* HEADER */

@header-height: 150px;
@header-height-mobil: 150px;
@header-margin-top: 30px;
@header-margin-bottom: 30px;
@header-bgcolor: transparent;
@header-bgimg: "../images/header-bg.jpg";
@sub-header-height: 150px;
@sub-header-height-mobil: 150px;
@sub-header-margin-top: 30px;
@sub-header-margin-bottom: 30px;
@sub-header-bgcolor: transparent;
@sub-header-bgimg: "../images/sub-bg.jpg";

/* SHOPNAV */

@shop-nav-height-monitor: 30px;
@shop-nav-height-mobil: 45px;
@shop-nav-font-size-monitor: @font-size-base;
@shop-nav-font-size-mobil: 20px;
@shop-nav-bg-color: whitesmoke;
@shop-nav-bg-transparent: 95%;
@shop-nav-text: #777777;
@shop-nav-orientation: center;

/* MEGA NAV */

@mega-nav-bg: @brand-secondary;
@mega-nav-text: @color-on-brand-secondary;
@mega-menu-bg: white;
@mega-menu-padding: 10px;
@mega-menu-link-bg: white;
@mega-nav-cols: 12;
@mega-menulist-img-size: 6;
@mega-nav-link: @text-color;
@mega-nav-link-icon: fade(@text-color, 50%);

/* USP Boxen */

@usp-bg: fade(whitesmoke, 95%);
@usp-text: #777777;
@slider-buttons-outer: 0px !important;
@slider-buttons-border: 0px solid @color-on-brand-secondary !important;
@slider-buttons-color: @color-on-brand-secondary !important;
@slider-buttons-bg: @brand-secondary !important;
@slider-buttons-opacity: 0.4 !important;

/**
* WEBFONT
*/

// PT sans
@web-font-path: "../../fonts/PT-Sans/";
@fa-font-path: "../fonts/";
@icon-font-path: "../fonts/";
@ew-font-family-regular: "pt_sansregular",
Helvetica,
Arial,
sans-serif;
@font-family-sans-serif: @ew-font-family-regular;
@ew-font-family-bold: "pt_sansbold",
Helvetica,
Arial,
sans-serif;
@headings-font-family: @ew-font-family-bold;

/**
* FORMS
*/

@input-border-focus: @brand-primary;
@ew-required-color: red;
@input-border: @gray-light-borders;

/**
* SIDEBAR
*/

@ew-sidebar-horizontal-padding: (@grid-gutter-width / 2);
@ew-sidebar-vertical-padding: @navbar-padding-vertical;
// SIDEBAR CATEGORIES NAVIGATION
@ew-box-categories-horizontal-padding: @ew-sidebar-horizontal-padding;
@ew-box-categories-vertical-padding: @ew-sidebar-vertical-padding;
@ew-box-categories-levels: 20;
@ew-box-categories-heading-color: @navbar-default-color;
@ew-box-categories-heading-background: @navbar-default-bg;
@ew-box-categories-color: @gray;
@ew-box-categories-font-size: @font-size-base;
@ew-box-categories-background: @gray-lighter;
@ew-box-categories-color-active: @navbar-default-link-active-color;
@ew-box-categories-background-active: @navbar-default-link-active-bg;
@ew-box-categories-border: 0 none;
@ew-box-categories-subs-border: 1px solid darken(@ew-box-categories-background, 10%);
@ew-box-categories-subs-color: @link-color;
@ew-box-categories-subs-font-size: @font-size-middle;
@ew-box-categories-subs-background: lighten(@ew-box-categories-background, 3%);

/**
* ZINDEX
**/

@zindex-base: 1;
@zindex-extra: @zindex-tooltip + 1;

/**
* MODAL
*/

@modal-backdrop-bg: #000;
@modal-backdrop-opacity: .66;

/**
* BORDER RADIUS
*/

@border-radius-base: 0;
@border-radius-small: 0;
@border-radius-large: 0;
@badge-border-radius: @border-radius-large;

/**
* PRIMARY STYLE
**/

// Alerts
@state-primary-text: @brand-primary;
@state-primary-bg: lighten(@state-primary-text, 65%);
@state-primary-border: darken(spin(@state-primary-bg, -10), 7%);
@alert-primary-bg: @state-primary-bg;
@alert-primary-text: @state-primary-text;
@alert-primary-border: @state-primary-border;
// Progress Bars
@progress-bar-primary-bg: @brand-primary;

/**
* SECONDARY STYLE
**/

// Labels
@label-secondary-bg: @brand-secondary;
// Alerts
@state-secondary-text: @brand-secondary;
@state-secondary-bg: lighten(@state-secondary-text, 65%);
@state-secondary-border: darken(spin(@state-secondary-bg, -10), 7%);
@alert-secondary-bg: @state-secondary-bg;
@alert-secondary-text: @state-secondary-text;
@alert-secondary-border: @state-secondary-border;
// Panels
@panel-default-border: @gray-light-borders;
@panel-inner-border: @panel-default-border;
@panel-secondary-text: #FFF;
@panel-secondary-border: @brand-secondary;
@panel-secondary-heading-bg: @brand-secondary;
@panel-heading-padding-sidebar: @nav-link-padding;
@panel-body-padding: (@grid-gutter-width + floor(@grid-gutter-width / 3));

/**
* REVIEW STARS
*/

@reviews-icon-size: @font-size-base;
@reviews-icon-background: #FFF;
@reviews-icon-inactive: star;
@reviews-icon-active: star;
@reviews-icon-inactive-color: #A6A6A6;
@reviews-icon-active-color: #FFCB2E;
@reviews-icon-horizontal-spacing: 1px;

/**
* LightGallery
*/

@lg-background-color: @body-bg;
@lg-elements-background-color: @gray-lighter;
@lg-elements-color: lighten(@gray-dark, 4%);

/**
* WELLS
*/

@well-bg: lighten(@gray-base, 97%);
@well-border: @gray-light-borders;
@well-border-setting: 1px solid @well-border;
@well-shadow: none;
@well-padding: 19px;
@well-padding-lg: 24px;
@well-padding-sm: 9px;

/**
* FOOTER
*/

@footer-background: @brand-secondary;
@footer-heading-color: @color-on-brand-secondary;
@footer-heading-border: 1px solid fade(@color-on-brand-secondary, 30%);
@footer-text-color: @color-on-brand-secondary;
@footer-link-color: @color-on-brand-secondary;
@footer-link-hover-color: lighten(@footer-link-color, 25%);
@footer-copyright-color: @footer-text-color;
@footer-copyright-font-size: @font-size-middle;
@footer-border: 1px solid darken(@footer-background, 15%);
//
//
//
//
// 
//
//
// MIXINS
// 
// 
// 
//
//
//
//
//
//

.generate-columns(@n, @selector: 'li', @i: 1) when (@i =< @n) {
  &:first-child:nth-last-child(@{i}),
  &:first-child:nth-last-child(@{i}) ~ & {
    width: (100% / @i);
  }
  .generate-columns(@n, @selector, (@i + 1));
}


.gradient (@startColor: rgba(255, 0, 0, 0.2), @endColor: rgba(255, 0, 0, 0.8)) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
}

.opacity (@opacity: 0.5) {
    -webkit-opacity: @opacity;
    -moz-opacity: @opacity;
    opacity: @opacity;
}

//
//
//
//
// 
//
//
// HELPER
// 
// 
// 
//
//
//
//
//
//


.scroll-menu {
    position: fixed;
    top: 10%;
    left: 0;
    .opacity(0);
    z-index: @zindex-btn-overlay;
    pointer-events: none;
    transition: all 0.4s;
}

.scroll-menu.scroll-menu-show {
    .opacity(1);
    pointer-events: auto;
}


/** TRUSTED SHOPS **/

.trusted-shops {
    overflow: hidden;
    text-align: center;
}

.box-shadow {
    -webkit-box-shadow: 0px 15px 20px -13px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 15px 20px -13px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 15px 20px -13px rgba(0, 0, 0, 0.3);
}

.dropdown-menu {
    box-shadow: none;
    border: 1px solid @gray-light-borders;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    .box-shadow();
    .divider {
        margin: @global-space /2 0;
    }
    li {
        position: relative;
    }
    li > a {
        white-space: normal;
    }
}

.link-no-td {
    text-decoration: none;
    &:hover,
    &:focus {
        text-decoration: none;
    }
}

.row-fix {
    margin-left: 0;
    margin-right: 0;
}

.btn-cta {
    .button-variant(@btn-cta;
    @btn-cta-bg;
    @btn-cta-border);
}

.btn-cart {
    .button-variant(@btn-cart-color;
    @btn-cart-bg;
    @btn-cart-border);
}

.col-helper {
    padding-left: @global-space *1.5;
    padding-right: @global-space *1.5;
}

.container-fluid {
    .col-helper {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.flag-icon {
    width: 1.1em;
}

.flag-gray {
    -webkit-filter: grayscale(50%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(50%);
    .opacity(0.5);
}

.show-on-xs {
    display: none;
    @media @xs {
        display: inline-block;
        width: 100%;
    }
}

.btn-group-fullwith {
    width: 100%;
    .btn {
        display: block;
        width: 100%;
    }
}

.seo-text {
    font-size: 0.7em;
    padding-left: 20%;
    padding-right: 20%;
    margin-top: @global-space *2;
    .opacity(0.3);
    color: @color-on-brand-secondary;
    @media @xs {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.lg-outer {
    z-index: @zindex-zoom-lg-outer;
}

//
//
//
//
// 
//
//
// OVERRIDE XT5 TEMPLATE
// 
// 
// 
//
//
//
//
//
//
.listing .section .section-footer .footer-buttons .btn {
    width: 40%;
    font-size: 12px;
    padding: @global-space @global-space;
}

.owl .owl-controls .owl-buttons .owl-prev,
.owl .owl-controls .owl-buttons .owl-next {
    background-color: @slider-buttons-bg;
    border: @slider-buttons-border;
    color: @slider-buttons-color;
    opacity: @slider-buttons-opacity;
}

.owl .owl-controls .owl-buttons .owl-prev {
    left: @slider-buttons-outer;
}

.owl .owl-controls .owl-buttons .owl-next {
    right: @slider-buttons-outer;
}

.breadcrumb-container {
    margin-top: 0;
    margin-bottom: 0;
}

.breadcrumb-container + .container {
    padding-top: @grid-gutter-width;
}

#header + .container {
    padding-top: @grid-gutter-width;
}

body.mfp-zoom-out-cur,
body.modal-open,
body.lg-on {
    .shop-nav-wrapper,
    .mega-menu,
    .sticky-bottom-mobil-footer {
        z-index: 100;
    }
}

.lg-outer {
    z-index: @zindex-zoom-detail;
}

//
//
//
//
// 
//
//
// XTLIVE
// 
// 
// 
//
//
//
//
//
//
.main-header-wrapper + .xtlive-slider {
    .xtlive-element {
        margin-top: 0;
    }
}

//
//
//
//
// 
//
//
// SHOP NAV
// 
// 
// 
//
//
//
//
//
//
.shop-nav-wrapper {
    height: @shop-nav-height-monitor;
    z-index: @zindex-shop-nav;
    border-bottom: 1px solid @gray-light-borders;
    background-color: fade(@shop-nav-bg-color, @shop-nav-bg-transparent);
    display: table;
    width: 100%;
    padding-left: @global-space *1.5;
    padding-right: @global-space *1.5;
    position: fixed;
    width: 100%;
    top: 0;
    &.active {
        background-color: fade(@shop-nav-bg-color, 100%);
    }
    @media @sm {
        height: @shop-nav-height-mobil;
    }
}

.shop-nav-container,
.social-nav-container {
    text-align: @shop-nav-orientation;
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    list-style: none;
    margin-bottom: 0;
    > li {
        display: inline-block;
        margin: 0;
        position: relative;
        border-right: 1px solid @gray-light-borders;
    }
    @media @xs {
        text-align: center !important;
    }
}

.shop-nav-container {
    position: absolute;
    left: 0;
    right: 0;
    z-index: @zindex-shop-nav;
    .dropdown-menu {
        margin-left: -5px;
    }
}

.social-nav-container {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: @zindex-shop-nav + 1;
    @media @xs {
        display: none !important;
    }
}

.shop-nav-link {
    padding-left: @global-space *2;
    padding-right: @global-space *2;
    display: inline-block;
    color: @shop-nav-text;
    line-height: 1;
    font-size: @shop-nav-font-size-monitor;
    padding-top: calc((@shop-nav-height-monitor - (@shop-nav-font-size-monitor * 1)) / 2);
    padding-bottom: calc((@shop-nav-height-monitor - (@shop-nav-font-size-monitor * 1)) / 2);
    background-color: transparent;
    margin-left: -@global-space /2;
    @media @sm {
        padding-top: calc((@shop-nav-height-mobil - (@shop-nav-font-size-mobil * 1)) / 2);
        padding-bottom: calc((@shop-nav-height-mobil - (@shop-nav-font-size-mobil * 1)) / 2);
        font-size: @shop-nav-font-size-mobil;
        padding-left: @global-space *2;
        padding-right: @global-space *2;
    }
    @media @xs {
        padding-left: @global-space;
        padding-right: @global-space;
        min-width: @global-space *5;
    }
    &:hover,
    &:focus {
        color: @shop-nav-text;
        background-color: darken(@shop-nav-bg-color, 5%);
        .flag-gray {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            .opacity(1);
        }
    }
    .fa {
        font-size: 0.9em;
    }
    &.dropdown-toggle:before {
        content: '';
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid rgba(204, 204, 204, .2);
        position: absolute;
        bottom: -4px;
        left: 9px;
        display: none;
        z-index: 1052;
    }
    &.dropdown-toggle:after {
        content: '';
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        position: absolute;
        bottom: -4px;
        left: 10px;
        display: none;
        z-index: 1055;
    }
}

.open {
    .dropdown-toggle:before {
        display: block;
    }
    .dropdown-toggle:after {
        display: block;
    }
}

.shop-nav-titel {
    padding-left: @global-space /2;
    @media @sm {
        display: none;
    }
}

.shop-nav-titel-info {
    margin-left: 3px;
    font-size: 0.7em;
    font-family: @ew-font-family-bold;
}

li.selected {
    a {
        padding-right: @global-space;
        background-color: @gray-lighter;
        padding-right: calc(@font-size-base * 2);
    }
    &:after {
        content: "\f00c";
        font: normal normal normal 14px/1 FontAwesome;
        position: absolute;
        pointer-events: none;
        font-size: calc(@font-size-base - 2px);
        top: calc((@font-size-base - 2px) / 2);
        right: calc((@font-size-base - 2px) / 2);
    }
}

//
//
//
//
// 
//
//
// HEADER
// 
// 
// 
//
//
//
//
//
//
.main-header-wrapper {
    background-color: @header-bgcolor;
    padding-top: @shop-nav-height-monitor;
    &.bg-img {
        background-image: url(@header-bgimg);
        background-position-x: center;
        background-position-y: top;
        background-repeat-x: no-repeat;
        background-repeat-y: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    @media @sm {
        padding-top: calc(@shop-nav-height-mobil + @btn-overlay-show-height);
    }
}

.header-wrapper {
    height: @header-height;
    display: table;
    width: 100%;
    margin-top: @header-margin-top;
    margin-bottom: @header-margin-bottom;
    @media @xs {
        height: 100px;
        margin-top: 0;
        margin-bottom: 0;
    }
}

.main-header-brand {
    .img-responsive {
        max-height: @header-height;
        @media @xs {
            margin: 0 auto;
            max-height: 100px;
        }
    }
}

.subpage-wrap {
    .header-wrapper {
        height: @sub-header-height;
        display: table;
        width: 100%;
        margin-top: @sub-header-margin-top;
        margin-bottom: @sub-header-margin-bottom;
        @media @xs {
            height: 100px;
            margin-top: 0;
            margin-bottom: 0;
        }
    }
    .main-header-brand .img-responsive {
      max-height: @sub-header-height;
      @media @xs {
            margin: 0 auto;
            max-height: 100px;
        }
    }
    .main-header-wrapper {
        &.bg-img {
            background-image: url(@sub-header-bgimg);
        }
        &.bg-color {
            background-color: @sub-header-bgcolor;
        }
        @media @sm {
            padding-top: calc(@shop-nav-height-mobil + @btn-overlay-show-height);
        }
    }
}


.header-center {
    display: table-cell;
    vertical-align: middle;
}

/* MOBILE STICKY FOOTER */
.sticky-bottom-mobil-footer {
    @media @xs {
        z-index: @zindex-mobil-bottom-nav;
        position: fixed !important;
        bottom: 0;
        text-align: center;
        width: 100%;
        background-color: fade(@brand-secondary, 85%);
        padding: @global-space @global-space;
        border-top: 1px solid @brand-secondary;
        .header-wrapper {
            height: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
    }
}

/* HEADER BOXEN */
.header-boxen-inner {
    .make-row()
}

.header-box-right-inner-left {
    .make-xs-column(6);
    .make-sm-column(5);
}

.header-box-right-inner-right {
    .make-xs-column(6);
    .make-sm-column(7);
}


/* ADD TO CART HEADER */
.main-header-cart {
    max-height: 400px;
    padding: @global-space;
    min-width: 250px;
    overflow-y: auto;
    .media-heading {
        color: @text-color;
        white-space: nowrap;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1em;
        display: block;
        margin-bottom: 0;
    }
}

.subtotal-cart {
    border-top: 1px solid @gray-light-borders;
    border-bottom: 1px solid @gray-light-borders;
    padding-top: @global-space /2;
    padding-bottom: @global-space /2;
    margin-top: @global-space;
    margin-bottom: @global-space;
}

.icon-shopping-cart-content {
    display: block;
    margin: 0;
    font-size: @global-space;
    padding: 2px 4px;
    line-height: 1;
    position: absolute;
    top: -@global-space /2;
    right: 3px;
    color: @color-on-cart;
    background-color: @brand-cart;
}

.btn-overlay-show {
    display: none;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: @shop-nav-height-mobil;
    z-index: @zindex-btn-overlay;
    border-top-right-radius: 0!important;
    border-top-left-radius: 0!important;
    .box-shadow();
    height: @btn-overlay-show-height;
    background-color: @mega-nav-bg;
    color: @mega-nav-text;
    border: 0;
    text-transform: uppercase;
    font-family: @ew-font-family-bold;
    @media @sm {
        display: block;
    }
}




/* BTNS HEADER */

.btn-head-wish {}

.btn-head-search {}

.btn-group-head-cart {}

.btn-head-cart {}

.btn-head-cart-dropdown {}


/* HEADER MUTATION */

.header-1 {
    .container();
    .header-left-box {
        .make-sm-column(7);
        .make-lg-column(6);
    }
    .header-center-box {
        display: none;
    }
    .header-right-box {
        text-align: right;
        @media @xs {
            text-align: center;
        }
        .make-sm-column(5);
        .make-lg-column(6);
    }
}


/* HEADER MUTATION */

.header-2 {
    .container();
    .header-left-box {
        .make-sm-column(3);
        .make-lg-column(3);
    }
    .header-center-box {
        .make-xs-column(12);
        .make-sm-column(6);
    }
    .header-right-box {
        text-align: right;
        @media @xs {
            text-align: center;
        }
        .make-sm-column(3);
        .make-lg-column(3);
    }
    .header-left-box {
        @media @xs {
            display: none;
        }
    }
    .main-header-brand {
        .img-responsive {
            margin: 0 auto;
        }
    }
    .btn-overlay-show {
        display: none;
        @media @xs {
            display: block;
        }
    }
}


/* HEADER MUTATION */

.header-3 {
    .container();
    .header-left-box {
        .make-xs-column(12);
        .make-sm-column(7);
        .make-md-column(5);
        .make-lg-column(5);
    }
    .header-center-box {
        display: none;
    }
    .header-right-box {
        .make-xs-column(12);
        .make-sm-column(5);
        .make-md-column(7);
        .make-lg-column(7);
    }
    .cart-header-button {
        float: right;
        .main-header-cart {
            margin: -1px 0 0;
        }
        @media @xs {
            display: block;
            width: 100%;
            .btn {
                display: block;
                width: 100%;
            }
        }
    }
}

//
//
//
//
// 
//
//
// MAIN NAV
// 
// 
// 
//
//
//
//
//
//
.navigation {
    list-style-type: none;
    margin: 0;
    position: relative;
    white-space: nowrap;
    max-width: none;
    padding: 0;
    overflow: hidden;
    padding-left: @global-space*3;
    padding-right: @global-space*3;
    .flickity-prev-next-button {
        width: @global-space*3;
        height: @mega-menu-height;
        background: darken(@mega-nav-bg, 5%);
        border-radius: 0;
    }
    .flickity-prev-next-button:hover {
        background: darken(@mega-nav-bg, 10%);
    }
    /* arrow color */
    .flickity-prev-next-button .arrow {
        fill: @mega-nav-text;
    }
    .flickity-prev-next-button.no-svg {
        color: @mega-nav-text;
    }
    /* position outside */
    .flickity-prev-next-button.previous {
        left: 0;
    }
    .flickity-prev-next-button.next {
        right: 0;
    }
    .flickity-prev-next-button:disabled {
        .opacity(1);
    }
}

.navigation-enter {
    display: inline-block;
    position: relative;
    &.is-hovered {
        .navigation-link {
            background-color: @brand-primary;
            color: @color-on-brand-primary;
        }
    }
}

.navigation-link {
    font-size: @navigation-link-font-size;
    padding-top: @navigation-link-padding-top;
    padding-bottom: @navigation-link-padding-bottom;
    padding-left: @navigation-link-padding-left;
    padding-right: @navigation-link-padding-right;
    border-top-right-radius: @border-radius-base;
    border-top-left-radius: @border-radius-base;
    color: @mega-nav-text;
    background-clip: padding-box;
    line-height: 1;
    margin: 0;
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    font-family: @ew-font-family-bold;
    min-height: @mega-menu-height;
    &:focus {
        color: @color-on-brand-primary;
    }
}

.navigation-wrapper {
    position: relative;
    .container();
}

.flickity-prev-next-button[disabled] {
    display: none;
}

//
//
//
//
// 
//
//
// MEGAMENÜ
// 
// 
// 
//
//
//
//
//
//

/* MEGAMENÜ WRAPPER */

.mega-menu-wrapper {
    height: @mega-menu-height;
    @media @sm {
        height: 0 !important;
    }
}

.mega-menu {
    z-index: @zindex-megamenu;
    background-color: @mega-nav-bg;
    position: relative;
    min-height: @mega-menu-height;
    @media @sm{
        min-height: 0;
    }
    &.is-sticky {
        transition: transform .5s;
        top: @mega-menu-height * -1;
        position: fixed;
        left: 0;
        right: 0;
    }
    &.is-shown {
        -webkit-transform: translateY(@mega-menu-height + @shop-nav-height-monitor);
        /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
        -ms-transform: translateY(@mega-menu-height + @shop-nav-height-monitor);
        /* IE 9 */
        transform: translateY(@mega-menu-height + @shop-nav-height-monitor);
        /* IE 10, Fx 16+, Op 12.1+ */
    }
}

.mega-menu-list {
    position: relative;
    border-bottom-right-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
}

.mega-menu-item {
    position: absolute;
    z-index: 100;
    width: 100%;
    visibility: hidden;
    /* top: -1px; */
    .opacity(0);
    &.is-active {
        visibility: visible;
        .opacity(1);
    }
}

.mega-menulist-wrapper {
    border-bottom-right-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
    .box-shadow();
    .clearfix();
}

.mega-menulist-inner {
    background-color: @mega-menu-bg;
    padding: @mega-menu-padding;
    .clearfix();
}

.mega-menulist-inner > .row {
    margin-left: 0;
    margin-right: 0;
}


/* BIG LINK in MEGAMENÜ */

.navigations-link-more {
    border-top: @global-space /2 solid @brand-primary;
    padding: @global-space *2.5 @global-space *2;
    display: block;
    width: 100%;
    font-size: 1em;
    text-transform: uppercase;
    font-family: @ew-font-family-bold;
    border-bottom: 1px solid @gray-light-borders;
    position: relative;
    background-color: white;
    min-height: @font-size-base * @line-height-base + 56px;
    a {
        color: @text-color;
        &:hover {
            color: @brand-primary;
        }
    }
}

.mega-menu-close {
    position: absolute;
    right: @global-space *1.5;
    z-index: 10000000;
    border: 0;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: @border-radius-base;
}


/* COLS in MEAGMENÜ */

.mega-nav-item {
    .make-sm-column(@mega-nav-cols);
}

.mega-menu-itemlist {
    list-style: none;
    padding: 0;
    .clearfix();
}


/* CONTAINER LINK */

.mega-nav-listitem-drop {
    position: relative;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 1px solid @gray-light-borders;
    border-top-left-radius: @border-radius-base;
    border-top-right-radius: @border-radius-base;
    .clearfix();
}


/* LINK NAME */

.mega-nav-listitem {
    width: 85%;
    color: @mega-nav-link;
    background-color: @mega-menu-link-bg;
    padding-left: @global-space *2;
    padding-right: 5px;
    padding-top: @global-space;
    padding-bottom: @global-space;
    display: block;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    text-transform: uppercase;
    font-family: @ew-font-family-bold;
    &:hover {
        text-decoration: none;
        color: lighten(@mega-nav-link, 15%);
    }
}


/* LINK MORE and DROPDOWN */

.mega-nav-listitem-down {
    .mega-nav-listitem();
    width: 15%;
    color: @mega-nav-link-icon;
    text-align: center;
    border-left: 1px solid @gray-light-borders;
    padding-left: @global-space /2;
    padding-right: @global-space /2;
    background-color: @mega-menu-link-bg;
    .fa:before {
        content: @nav-icon-more;
    }
}


/* DROPDOWN ICON */

.mega-nav-listitem-down.dropdown-toggle {
    .fa:before {
        content: @nav-icon-close;
    }
}


/* DROPDOWN OPEN ICON */

.mega-nav-listitem-drop.open {
    .mega-nav-listitem {
        background-color: @gray-lighter;
        color: @text-color;
    }
    .mega-nav-listitem-down {
        background-color: @gray-lighter;
        color: @text-color;
        .fa:before {
            content: @nav-icon-open;
        }
    }
}


/* DROPDOWN MEGA */

.dropdown-megamenu {
    border: none;
    width: 100%;
    font-size: 0.9em;
    padding: 0;
    margin: 1px 0;
    padding-top: @global-space /2;
    padding-bottom: @global-space /2;
    border-left: 1px solid @gray-light-borders;
    border-right: 1px solid @gray-light-borders;
    border-bottom: 1px solid @gray-light-borders;
}


/* IN DROPDOWN MORE */

.dropdown-in-mega-linkmore {
    font-weight: bold !important;
    .fa:before {
        content: @nav-icon-more;
    }
}


/* KAT IMG in MEGAMENU */

.mega-menulist-entries {
    .make-md-column(12 - @mega-menulist-img-size);
}

.mega-menulist-img {
    .make-md-column(@mega-menulist-img-size);
}

.navbar-mega-overlay {
    pointer-events: none;

    .no-csspointerevents & {
        display: none;
    }
}


/* KAT Description in MEGAMENU */

.categorie-box-mega {
    margin-top: @global-space *2;
    .categorie-head {
        text-transform: uppercase;
        margin-top: @global-space;
        margin-bottom: 0px;
        color: @brand-primary;
        font-size: 1em;
        font-family: @ew-font-family-bold;
    }
}

//
//
//
//
// 
//
//
// MOBILNAV
// 
// 
// 
//
//
//
//
//
//
body.overlay-open {
    height: 100%;
    overflow: hidden !important;
    width: 100%;
    .overlay-mobilnav-wrapper {
        pointer-events: none;
        & > * {
            pointer-events: initial;
        }
    }
}

/* MOBIL NAV OVERLAY */
.overlay-mobilnav {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: fade(black, 75%);
    overflow: auto;
    z-index: @zindex-mobil-nav;
    display: none;
}

.overlay-mobilnav-wrapper {
    position: relative;
    padding-top: @global-space *5;
    padding-right: 20%;
    padding-left: 20%;
    padding-bottom: @global-space *5;
    @media @sm {
        padding-right: 10%;
        padding-left: 10%;
    }
    @media @xs {
        padding-right: @global-space;
        padding-left: @global-space;
    }
}


/* MOBIL NAV */
.mobil-nav-header {
    background-color: @gray-lighter;
    color: @color-on-brand-primary;
    padding: @global-space *2;
    font-size: 1.1em;
    position: relative;
    border-top-right-radius: @border-radius-base;
    border-top-left-radius: @border-radius-base;
    .close {
        margin-top: 0;
        height: 35px;
        width: 35px;
        background-color: @gray;
        position: absolute;
        right: -@global-space;
        top: -@global-space;
        .opacity(1);
        color: white;
        font-size: 25px;
        @media @xs {
            right: @global-space;
        }
        span {
            font-family: arial;
        }
    }
    .dropdown {
        display: inline-block;
    }
}

.mobil-nav-footer {
    background-color: @brand-primary;
    color: @color-on-brand-primary;
    padding: @global-space;
    border-bottom-right-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
    font-size: 0.8em;
    a {
        color: @color-on-brand-primary;
    }
}

.mobil-nav {
    background-color: white;
    border-top: 1px solid @mobil-nav-border-color;
    border-right: 1px solid @mobil-nav-border-color;
    border-left: 1px solid @mobil-nav-border-color;
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li {
        box-shadow: inset 0 1px @mobil-nav-border-color;
        &:hover {
            background-color: darken(@mobil-nav-color, 1%);
        }
    }
    .li-table {
        width: 100%;
        display: table;
        &.active {
            a {
                box-shadow: inset 0 1px @mobil-nav-border-color;
                background-color: @mobil-nav-active-color;
                font-family: @ew-font-family-bold;
            }
            a.more {
                background-color: @mobil-nav-active-color;
                &:after {
                    content: @nav-icon-open;
                }
            }
        }
    }
    &.small {
        margin-top: @global-space *2;
        font-size: 0.8em;
    }
    a {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        font-size: 0.9em;
        color: @gray;
        text-decoration: none;
        cursor: pointer;
        padding: @padding-global;
        width: 90%;
        padding-right: 10%;
        min-width: 150px;
        text-transform: uppercase;
    }
    a.more {
        width: 10%;
        padding: @padding-global !important;
        text-align: center;
        border-left: 1px solid @mobil-nav-border-color;
        background-color: darken(@mobil-nav-color, 2%);
        box-shadow: inset 0 1px @mobil-nav-border-color;
        min-width: @global-space *3;
        &:hover {
            background-color: darken(@mobil-nav-color, 5%);
        }
        &:after {
            content: @nav-icon-close;
            width: @global-space *3;
            display: block;
            margin: 0 auto;
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
    a.no {
        width: 10%;
        padding: @padding-global !important;
        text-align: center;
        border-left: 1px solid @mobil-nav-border-color;
        background-color: darken(@mobil-nav-color, 2%);
        box-shadow: inset 0 1px @mobil-nav-border-color;
        min-width: @global-space *3;
        &:hover {
            background-color: darken(@mobil-nav-color, 5%);
        }
        &:after {
            content: @nav-icon-more;
            .opacity(0.5);
            width: @global-space *3;
            display: block;
            margin: 0 auto;
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
    .level-1 > li:first-child > .no {
        box-shadow: none;
    }
    .level-1 > li:first-child > .more {
        box-shadow: none;
    }
    .level-1 > li:first-child {
        box-shadow: inset 0 0px @mobil-nav-border-color;
    }
    .level-1 > li:last-child {
        box-shadow: inset 0 -1px 0 0 @mobil-nav-border-color, inset 0 1px 0 0 @mobil-nav-border-color;
    }
    .level-1 > li:first-child > .li-table > a.more {
        box-shadow: inset 0 0px @mobil-nav-border-color;
    }
    .level-1 > li:first-child > .li-table > a.no {
        box-shadow: inset 0 0px @mobil-nav-border-color;
    }
    .level-1 > li:last-child > .li-table > a.more {
        box-shadow: inset 0 -1px 0 0 @mobil-nav-border-color, inset 0 1px 0 0 @mobil-nav-border-color;
    }
    .level-2 > li a {
        padding-left: @padding-global + @global-space;
    }
    .level-3 > li a {
        padding-left: @padding-global + @global-space *2;
    }
    .level-4 > li a {
        padding-left: @padding-global + @global-space *3;
    }
    .level-5 > li a {
        padding-left: @padding-global + @global-space *4;
    }
    .level-2,
    .level-3,
    .level-4,
    .level-5 {
        overflow: hidden;
        position: relative;
    }
    .level-2:before {
        position: absolute;
        content: "";
        height: 100%;
        width: @global-space;
        background-color: darken(@mobil-nav-active-color, 20%);
        display: block;
        left: 0;
        z-index: 100;
    }
    .level-3:before {
        position: absolute;
        content: "";
        height: 100%;
        width: @global-space;
        background-color: darken(@mobil-nav-active-color, 30%);
        display: block;
        left: @global-space;
        z-index: 100;
    }
    .level-4:before {
        position: absolute;
        content: "";
        height: 100%;
        width: @global-space;
        background-color: darken(@mobil-nav-active-color, 40%);
        display: block;
        left: @global-space *2;
        z-index: 100;
    }
    .level-5:before {
        position: absolute;
        content: "";
        height: 100%;
        width: @global-space;
        background-color: darken(@mobil-nav-active-color, 50%);
        display: block;
        left: @global-space *3;
        z-index: 100;
    }
}

.mobil-nav > .level-1 > li:first-child > .li-table.active > a {
    box-shadow: none;
}

//
//
//
//
// 
//
//
// FOOTER
// 
// 
// 
//
//  
//
//
//
//
.footer-wrapper {
    background-color: @footer-background;
    padding-bottom: @global-space *5;
    .form-control {
        background-color: @gray-lighter;
        border: @gray-lighter;
        color: @text-color;
    }
    hr {
        border-top: @footer-border;
    }
    address {
        margin-bottom: 0;
        color: @footer-text-color;
    }
    .footer-top {
        padding-top: @global-space *8;
        padding-bottom: @global-space *2;
    }
    .footer-bottom {
        padding-top: @global-space *2;
        padding-bottom: @global-space *2;
    }
    .google-wrapper {
        position: relative;
        height: 350px;
        overflow: hidden;
        iframe {
            pointer-events: initial;
        }
        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            background-color: transparent;
            top: 0;
            pointer-events: none;
            transition: all 0.4s;
        }
    }
    .google-wrapper.locked {
        iframe {
            pointer-events: none;
        }
        &:after {
            background-color: fade(@footer-background, 30%);
        }
    }
    .footer-top + .footer-highlight {
        margin-top: -@global-space *2;
    }
    .footer-highlight + .footer-bottom {
        padding-top: @global-space *5;
    }
    .footer-highlight {
        background-color: darken(@footer-background, 5%);
        padding-top: @global-space *5;
        padding-bottom: @global-space *5;
        .footer-box {
            margin-bottom: 0;
        }
    }
    ul {
        width: 100%;
        margin-bottom: 0;
    }
    .copyright {
        color: @footer-copyright-color;
        a {
            color: @footer-copyright-color;
        }
    }
    .footer-head,
    label {
        font-family: @ew-font-family-bold;
        color: @footer-heading-color;
        padding-bottom: @global-space /2;
        margin-bottom: @global-space;
        max-width: 100%;
        font-family: @ew-font-family-bold;
        text-transform: uppercase;
        border-bottom: @footer-heading-border;
    }
}


/* FOOTER SOGAN */

.footer-slogan {
    background-color: @brand-primary;
    color: @color-on-brand-primary;
    padding: @global-space /2 @global-space *1.5;
    text-align: center;
    a {
        color: @color-on-brand-primary;
        font-weight: bold;
    }
}

.footer-col {
    .make-sm-column(4);
    .clearfix();
}

.footer-col.information {
    .make-md-column(12);
}

//FOOTER BOXEN 
.footer-box {
    margin-bottom: @global-space *2;
    border-radius: @border-radius-base;
    padding: @global-space *2.5;
    background-color: fade(@color-on-brand-secondary, 5%);
}

.footer-col.contact {
    .img-responsive {
        max-height: 180px;
    }
}

.footer-social {
    li {
        a {
            font-size: 1.5em;
            color: @footer-link-color;
            &:hover {
                color: @footer-link-hover-color;
            }
        }
    }
}

.footer-col.contact {
    color: @footer-text-color;
}

.footer-bottom-nav {
    li {
        a {
            color: @footer-link-color;
            &:hover {
                color: @footer-link-hover-color;
            }
        }
    }
}

.footer-payment,
.footer-versand {
    line-height: 0;
    font-size: 14px;
    li {
        margin-bottom: @global-space;
        img {
            max-width: @global-space*7;
            max-height: @global-space*5;
            -webkit-filter: grayscale(100%);
            /* Safari 6.0 - 9.0 */
            filter: grayscale(100%);
            .opacity(0.8);
            &:hover {
                -webkit-filter: grayscale(0%);
                /* Safari 6.0 - 9.0 */
                filter: grayscale(0%);
                .opacity(1);
            }
        }
    }
}
.payment-logos{
  .logos {
    img {
      max-width: @global-space*7;
      max-height: @global-space*5;
    }
  }
}

/* FOOTER MUTATION */

.footer-2 {
    .footer-box {}
    .footer-bottom-nav {
        li {
            display: block;
            width: 100%;
            margin-bottom: @global-space/2;
            a {
                display: block;
                &:hover,
                &:focus {
                    text-decoration: none;
                }
            }
        }
    }
    .footer-head,
    label {
        color: @footer-heading-color;
        margin-bottom: @global-space*2;
        max-width: 100%;
        font-family: @ew-font-family-bold;
        font-size: 1em;
        text-transform: uppercase;
    }
}


/* FOOTER MUTATION */

.footer-3 {
    .footer-box {
        text-align: center;
        padding: @global-space*1.5;
    }
    .footer-bottom-nav {
        text-align: center;
        li {
            @media @xs {
                display: block;
                width: 100%;
                padding-left: 0;
                padding-right: 0;
            }
            a {
                padding: @global-space @global-space;
                background-color: fade(white, 2%);
                font-family: @ew-font-family-bold;
                text-transform: uppercase;
                display: block;
                width: 100%;
                @media @xs {
                    margin-bottom: @global-space/2;
                }
                &:hover,
                &:focus {
                    text-decoration: none;
                }
            }
        }
    }
    .footer-head,
    label {
        display: none;
    }
}

