@import url('general.css?58');
@import url('tables/style-tables.css?3');
@import url('forms/style-forms.css?23');
@import url('icon-panel/icon-panel.css?1');

body { padding: 0px; margin: 0px; font-family: 'Fira Sans'; min-width: 300px; font-size: 1em; }
nav { box-sizing: border-box; }
main { display: block; background-color: none; }
footer { min-height: 30em; }

/* HOMEPAGE IMAGE */

#hpImage { position: absolute; left: 0; top: 0; right: 0; z-index: -9999; height: 10000px; background-color: rgb(14,76,141); }
#hpImage img { width: 100%; }

/* HOMEPAGE TITLE */

#hpTitle { color: white; font-size: 175%; padding-top: 3em; padding-bottom: 3em; background-repeat: no-repeat; background-size: cover; }
#hpTitle h1 { line-height: 120%; }
#hpTitle a { box-sizing: border-box; display: inline-block; color: white; text-transform: uppercase; font-weight: bold; background-color: rgb(14,76,141); padding: 1em 1em 1em 1em; }
#hpTitle #eshopLink { background-color: rgb(255,168,0); }
#hpTitle #eshopLink, #hpTitle #b2bLink { font-size: 90%; }
#hpTitle > .pane1 { padding: 3em; padding-right: 7em; }

/* NEWS PREVIEW/LIST */
#newsPreview span, #newsList span { display: inline-block; }

/* OUR BRANDS TILES */

.ourBrandTile { display: inline-block; text-align: center; padding: 0.2em; }
.ourBrandTile a > div { padding: 10%; line-height: 3em; background-color: white;  }
.ourBrandTile a img { display: inline-block; max-width: 100%; max-height: 2.8em; opacity: 0.6; filter: invert(30%) sepia(8%) saturate(7187%) hue-rotate(179deg) brightness(88%) contrast(106%); }
.ourBrandTile a:hover img { opacity: 1.0; }

/* BRANDS LOGO */
#brandLogoLink { position: absolute; top: 0px; left: 0px; right: 50%; bottom: 0px; height: 100%;}
#brandLogoLink a { width: 100%; height: 100%; box-sizing: border-box; }
#brandLogoLink a img { height: 100%; max-width: 50%; }

/* ESHOP HOMEPAGE */

#eshopBg { margin-top: 20px; text-align: center; position: relative; }
#eshopBg img { width: 100%; }
#eshopBg span { position: absolute; top: 15%; left: 25%; width: 50%; font-size: 1.5em; display: inline-block; border: 0px solid white; color: white; text-transform: uppercase; }

/* ESHOP MENU */

.eshopMenu.menu.vertical a:hover { text-decoration: none; }
.eshopMenu { padding-top: 0px; }
.eshopMenu .menuItem { text-transform: uppercase; }
.eshopMenu > .menuItem { font-weight: bold; }
.eshopMenu > .menuItem + .menuItem { margin-top: 1px; }
.eshopMenu .submenu .submenu .menuItem { font-weight: normal; }

.eshopMenu .submenu { }
.eshopMenu .menuItem > a { background-color: rgb(14,76,141); color: white; display: block; padding: 0; padding-left: 1em; box-sizing: border-box; line-height: 2.5em; text-decoration: none; }
.eshopMenu .menuItem > a:hover { color: rgb(255,168,0); text-decoration: none; }

.eshopMenu .submenu .menuItem a { background-color: rgb(225,232,240); color: rgb(14,76,141); font-size: 90%; padding-left: 1.5em; line-height: 2.5em; }
.eshopMenu .submenu .menuItem > a:before { content: "\002B"; display: inline-block; border: 1px solid rgb(14,76,141); line-height: 0.5em; width: 0.5em; text-align: center; vertical-align: -0.1em; font-weight: normal; font-size: 150%; margin-right: 0.2em; }
.eshopMenu .submenu .submenu .menuItem a { font-size: 80%; padding-left: 2em; line-height: 1.6em; }
.eshopMenu .submenu .submenu .menuItem a:before { content: ""; display: inline-block; border: 0px; width: 1em; }

.eshopMenu .submenu .menuItemSelected > a { font-weight: bold; color: black; }
.eshopMenu .submenu .menuItemSelected > a:before { content: "\2212"; }
.eshopMenu .submenu .submenu .menuItemSelected > a { font-weight: normal; padding-left: 2em; }
.eshopMenu .submenu .submenu .menuItemSelected > a:before { content: "\27A5"; display: inline-block; border: 0px; width: 1em; }

.eshopMenu > .menuItemSelected > a { font-weight: bold; color: rgb(255,168,0); padding-left: 1em; }

input[name="eshopMenuSwitch"] { display: none; }
#eshopMenuCategoriesSwitch + label, #eshopMenuBrandsSwitch + label { text-transform: uppercase; position: relative; display: inline-block; margin: 0px; line-height: 2em; text-align: center; cursor: pointer; clip-path: polygon(0% 0%, calc(100% - 2em) 0%, 100% 100%, 0% 100%); }
#eshopMenuCategoriesSwitch + label { padding-left: 1em; padding-right: 2em; z-index: 2; }
#eshopMenuBrandsSwitch + label { margin-left: -2em; padding-left: 2em; padding-right: 2em; z-index: 1; }
#eshopMenuCategoriesSwitch + label:hover, #eshopMenuBrandsSwitch + label:hover { color: rgb(14,76,141); opacity: 1.0; }

#eshopMenuCategoriesSwitch:checked + label[for="eshopMenuCategoriesSwitch"], #eshopMenuBrandsSwitch:checked + label[for="eshopMenuBrandsSwitch"] { background-color: rgb(238,150,0); color: white; cursor: default; }

#eshopMenuCategoriesSwitch:checked ~ #eshopMenuCategories { display: block; }
#eshopMenuCategoriesSwitch:checked ~ #eshopMenuBrands { display: none; }
#eshopMenuBrandsSwitch:checked ~ #eshopMenuCategories { display: none; }
#eshopMenuBrandsSwitch:checked ~ #eshopMenuBrands { display: block; }

/* CART CONTENT */

.cartContent {}
.cartContentItem + .cartContentItem { margin-top: 20px; }
.cartContentItem a.button { width: 100%; box-sizing: border-box; text-align: center; }
.cartContentName { font-weight: bold; padding-bottom: 5px; }
.cartContentDetailHeader { margin-top: 5px; background-color: rgb(238,238,238); color: black; line-height: 1.5em; padding: 2px; padding-left: 5px; text-align: left; text-transform: uppercase; }
.cartContentDetailValue input[type="text"] { line-height: 1.66em; padding: 0px; }
.cartContentDetailValue { padding: 2px; line-height: 2em; text-align: left; padding-left: 5px; }
.cartContentDetailValue .inlineIcon { height: 1.5em; margin-right: 0.25em; opacity: 0.7; }
.cartContentButtons { margin: -5px; margin-top: 20px; box-sizing: border-box; }
.cartContentButtons .pane4 { padding: 5px; }
.cartContentButtons .formButton { box-sizing: border-box; width: 100%; }

/* CHECKOUT */

#checkoutForm button[name="back_to_cart"] { display: none; }

#invoice_address_same:checked ~ #invoiceAddressForm { display: none; }
#invoice_address_same:not(:checked) ~ #invoiceAddressForm { display: block; margin-top: 20px; }

/* CONTROL BOX */

#controlBoxPanel { background-color: white;  }
#controlBox .searchBox { display: block; background-color: rgb(195,210,226); border: 1px solid rgb(195,210,226); padding: 0px; }
#controlBox .searchField { display: inline-block; box-sizing: border-box; font-size: 1em; line-height: 2em; border: none; padding: 10px 20px 10px 20px; margin: 0px; color: rgb(14,74,141); width: calc(100% - 4.0em); }
#controlBox .searchButton { display: inline-block; padding: 0px; background: none; outline: none; border: 0px; box-sizing: border-box;  }
#controlBox .searchButton .inLineIcon { width: 2em; height: 2em; display: inline-block; margin: auto 1em auto 1em; fill: black; box-sizing: border-box; }
#controlBox .checkboxShowAll, #controlBox .checkboxInStock { display: inline-block; margin-top: 20px; margin-right: 20px; color: rgb(128,128,128); font-size: 0.85em; }
/* #controlBox .checkboxShowAll .checkbox, #controlBox .checkboxInStock .checkbox { margin-right: 10px; } */

/* PRODUCT LIST */

.productBox { }
.productBox + .productBox { }
.productBox .paneContent { padding: 5px; }
.productBoxContent { position: relative; display: block; background-color: white; padding: 20px; text-decoration: none; }
.productBoxContent:hover { text-decoration: none; }
.productList .productBoxTitle { margin-top: 0.5em; height: 3.6em; line-height: 1.2em; font-size: 90%; font-weight: bold; }
.productBoxPrice { border-top: 1px solid rgb(221,221,221); margin-top: 0.5em; padding-top: 0.5em; font-weight: bold; }
.productBoxPrice .campainPrice { color: red; }
.productBoxStock { font-size: 0.8em; color: white; margin-right: -20px; text-align: right; margin-top: 0.5em; letter-spacing: 0.1em; }
.productBoxStock span { font-weight: bold; display: inline-block; line-height: 1.6em; border-radius: 0.8em 0 0 0.8em; padding-left: 0.3em; padding-right: 1em; }
.productBoxStock span:before { content: ""; display: inline-block; box-sizing: border-box; border: 0.1em solid white; border-radius: 0.5em; height: 1em; width: 1em; line-height: 1.6em; vertical-align: -0.15em; margin-left: 0.1em; margin-right: 1em; }  
.productBoxStock span.productInStock { background-color: rgb(11,127,90);  }
.productBoxStock span.productOnOrder { background-color: rgb(135,166,198); }
.productBoxStock span.productOnOrder:before { background-color: rgb(233,233,233); }
.productBoxStock img { display: none; }
/* .productBoxStock img { vertical-align: middle; height: 20px; margin-right: 5px; } */

/* PRODUCT DETAIL */

.productDetail h1 { padding: 20px; padding-bottom: 0px; }
.productDetail .tabPanelContent { font-size: 0.85em; }
.productDetail .productCode { font-size: 1em; }
.productDetail .imgIllustrative { font-size: 0.85em; }
.productDetail .squareImageBoxWrapper { padding: 20px; }
.smallProductImagesWrapper { margin-left: -5px; margin-right: -5px; }
.smallProductImagesWrapper:after { content: ''; display: block; clear: both; }
.smallProductImagesWrapper .squareImageBox { width: 25%; float: left; }
.smallProductImagesWrapper .squareImageBox .squareImageBoxWrapper { margin: 5px; padding: 0px; }

.priceBox {  }
.priceBox span { font-size: 1.5em; display: inline-block; margin-right: 0.5em; color: black; }
.priceBox span.campainPrice { color: red; font-weight: bold; }
.priceBox span.oldPrice { font-size: 1.2em; }

.productDetail .campainStickerDesc .campainSticker { float: left; margin-right: 1em; font-size: 0.8em; letter-spacing: 0.1em; line-height: 1.6em; }
.productDetail .campainStickerDesc { vertical-align: middle; font-size: 1em; }
.productDetail .stockInfo { line-height: 24px; color: rgb(0,224,0); }
.productDetail .stockInfo img { height: 24px; vertical-align: middle; margin-right: 5px; }
.productDetail .variantSelector { margin-top: 10px; }
.productDetail .variantSelector table { border-spacing: 0px; width: 100%; }
.productDetail .variantSelector td { font-size: 0.8em; vertical-align: top; line-height: 1.6em; border-top: 1px solid white; padding-top: 0.5em; padding-bottom: 0.5em; }
.productDetail .variantSelector td:first-child { width: 2.2em; padding-left: 1em; }
.productDetail .variantSelector td:nth-child(2) { text-align: left; }
.productDetail .variantSelector tr { cursor: pointer; background-color: rgb(225,232,240); }
.productDetail .variantSelector tr:hover { background-color: rgb(240,243,247); }
.productDetail .variantSelector td+td { text-align: right; }
.productDetail .variantSelector td:last-child { width: 10em; text-align: left; }

.productDetail .inCartButtons { margin-top: 20px; margin-bottom: 20px; }
.productDetail .inCartButtons .buttonIcon { vertical-align: middle; margin-right: 0.5em; width: 1.5em; height: 1.5em; }
.productDetail .inCartButtons .formButton { line-height: 1.6em; border: 0px; width: 100%; }
.productDetail .buttonStores { display: none; }

#itemDetailFullImage { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-color: white; cursor: pointer; overflow: auto; text-align: center; }
#itemDetailFullImage img { max-width: 100%; }

/* SQUARE IMAGE BOX */

.squareImageBox { position: relative; width: 100%; }
.squareImageBox:before { content: ' '; display: block; padding-top: 100%; }
.squareImageBox > .squareImageBoxWrapper { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; text-align: center; }
.squareImageBox > .squareImageBoxWrapper:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; }
.squareImageBox > .squareImageBoxWrapper img, .squareImageBox > .squareImageBoxWrapper .noImage { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; box-sizing: border-box; }
.squareImageBox .noImage { width: 100%; height: 100%; }
.squareImageBox .noImage:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; }

/* CAMPAINS */

.campainsStickersWrapper { position: absolute; z-index: 9998; text-align: left; left: 0px; top: 10px; font-size: 0.8em; letter-spacing: 0.1em; }
.campainsStickersWrapper:after { clear: both; }
.campainSticker { display: inline-block; color: white; font-size: 100%; line-height: 160%; font-weight: bold; text-transform: uppercase; padding-left: 10px; padding-right: 10px; margin-top: 1px; }
.campainSticker.productDiscount { background-color: rgb(238,150,0); font-size: 130%; line-height: 200%; margin-top: 1px; }

/* TABS */

.tabs { display: block; }
.tabs input[type="radio"] { display: none; }
.tabs input[type="radio"] + label.customized { display: none; }
.tabs input[type="radio"] + label.customized ~ label { margin: 0px; }
.tabs input[type="radio"] ~ label:not(.customized) { display: inline-block; }
.tabs label { text-transform: uppercase; position: relative; display: inline-block; font-size: 1em; line-height: 2em; margin: 0px; padding-left: 2em; padding-right: 2em; background-color: rgb(14,76,141); text-align: center; color: white; cursor: pointer; }
.tabs label:not(.customized) + label:not(.customized) { border-left: 1px solid white; }
.tabs .tabPanelContent { font-size: 1em; display: none; overflow: hidden; background-color: white; padding: 20px; border: 1px solid rgb(195,210,226); box-sizing: border-box; }
.tabs input[type="radio"].radio_1:checked ~ label.label_1 { background-color: rgb(225,232,240); color: black; cursor: default; font-weight: bold; }
.tabs input[type="radio"].radio_2:checked ~ label.label_2 { background-color: rgb(225,232,240); color: black; cursor: default; font-weight: bold; }
.tabs input[type="radio"].radio_3:checked ~ label.label_3 { background-color: rgb(225,232,240); color: black; cursor: default; font-weight: bold; }
.tabs input[type="radio"].radio_4:checked ~ label.label_4 { background-color: rgb(225,232,240); color: black; cursor: default; font-weight: bold; }
.tabs input[type="radio"].radio_5:checked ~ label.label_5 { background-color: rgb(225,232,240); color: black; cursor: default; font-weight: bold; }
.tabs input[type="radio"].radio_1:checked ~ .tabPanelContent.panel_1 { display: block; }
.tabs input[type="radio"].radio_2:checked ~ .tabPanelContent.panel_2 { display: block; }
.tabs input[type="radio"].radio_3:checked ~ .tabPanelContent.panel_3 { display: block; }
.tabs input[type="radio"].radio_4:checked ~ .tabPanelContent.panel_4 { display: block; }
.tabs input[type="radio"].radio_5:checked ~ .tabPanelContent.panel_5 { display: block; }

/* FOOTER */
.paneBorderedLeft { border-left: 1px solid rgb(198,213,227); }
#fbLogo { fill: rgb(14,76,141); }


/* ****** CHECKOUT ***** */


@media (max-width: 900px) {
    
    #hpTitle { font-size: 100%; }    

    .brandTile img { height: 1.2em; }

    .fancybox-inner { font-size: 50%; }

    .cartContentButtons .formButton { width: 100%; }
}

@media (max-width: 800px) {
    #mainMenu .mainMenuVertical { display: block; }
    #mainMenu .mainMenuHorizontal { display: none; }
    #mainMenu label { top: -3em; }
    #mainMenu label svg { height: 3em; width: 3em; }
    
    #locales { font-size: 150%; height: 2em; }
    #locales .selectBox { font-size: 66%; }
    #brandLogoLink { position: relative; margin-top: 1em; height: 3em; }        
    #brandLogoLink a img { max-width: 100%; }
    
    .productBox { font-size: 150%; }    
}

@media (max-width: 600px) {
    .homepageBg .pane4 { width: 50%; }
    .homepageBg .hpTileText { font-size: 90%; }

    .brandTile img { height: 1em; }

    #brandsLine { display: none; }

    body { font-size: 80%; }
    .fancybox-inner { font-size: 50%; }

    .tabs input[type="radio"] ~ label:not(.customized) { display: block; line-height: 3em; }
    .tabs label:not(.customized) + label:not(.customized) { border-top: 1px solid rgb(246,246,246); border-left: 0px; }
    
    .paneBorderedLeft { border-left: 0px; }
    
    .productBox { font-size: 170%; }    
}