html, body{height: 100%;}
body{font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 18px; background:#ffffff; color:#6d6e70;}
img{max-width: 100%; height: auto;}
a{display: inline-block; color: #b76e79; font-weight: bold;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
a:hover{color: #da9e8e;}
.max-page-with{max-width: 975px; margin: auto;}
.fb-like.fb_iframe_widget span{height: 20px!important; width: 100%!important;}
.fb-like, 
.fb-like span, 
.fb-like span iframe[style] { 
    width: 100% !important; 
}

.cookie-box{z-index: 99999; padding: 10px 15px; background: rgba(0, 0, 0, .8); position: fixed; left: 0; top: 0; display: flex; width: 100%; height: 100%; justify-content: center; text-align: center; align-content: center;}
.cookie-box-inside{background: #ffffff; max-width: 500px; border-radius: 3px; padding: 20px 25px; display: flex; flex-wrap: wrap; justify-content: center; align-self: center;}
.cookie-box-inside h1{font-size: 21px;}
.cookie-box-inside p{padding: 10px 0px; margin: 10px 0px; border-top: 1px dotted #aaaaaa; border-bottom: 1px dotted #aaaaaa;}
#accept-cookie{cursor: pointer; display: inline-block; padding: 5px 10px; background: #000000; border-radius: 3px; text-transform: uppercase; font-size: 12px; color: #fff;}
#accept-cookie:hover{background: #da9e8e;}

.submit-button{background: #000000; color: #ffffff; text-transform: uppercase; font-size: 11px; border: 1px solid #000000; margin: auto; display: block; width: 150px; max-width: 200px; margin-top: 7px; margin-bottom: 7px;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.submit-button:hover{background: #b76e79; border:1px solid #b76e79;}

#header{background: #ffffff; z-index: 9999; border-bottom: 15px solid #da9e8e; position: fixed; width: 100%; top: 0px; left: 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
#header #top-black{background: #000000; height: 24px; color: #efefef; text-align: right; padding: 3px 15px; font-size: 11px; text-transform: uppercase;}

#header #top-red{background: #d90000; color: #efefef; padding: 3px 15px; font-size: 10px; text-transform: uppercase;}
#header #top-black .max-page-with a{color: #ffffff; font-weight: normal;}
#header #top-black .max-page-with a:hover{color: #da9e8e;}
#header #top-black .max-page-with a#mobil-menu{display: inline-block; margin-left:20px;}

#header #top-header{padding: 0px 15px;}
#header #top-header .max-page-with #top-header-inside{display: flex; align-items: center;}
#header #top-header .max-page-with #top-header-inside .page-logo{flex: 1; padding: 8px 0px 7px 0px;}
#header #top-header .max-page-with #top-header-inside .page-logo img{height: 90px;}
#header #top-header .max-page-with #top-header-inside .page-slogen{flex: 3; display: none;}
#header #top-header .max-page-with #top-header-inside .page-slogen span{font-family: 'Dancing Script', cursive; display: block; text-align: center; margin: auto; font-size: 38px; line-height: 38px; color: #b76e79;}
#header #top-header .max-page-with #top-header-inside .page-search-basket{flex: 1.2;}
#header #top-header .max-page-with #top-header-inside .page-search-basket #search-box{position: relative;}
#header #top-header .max-page-with #top-header-inside .page-search-basket #search-box #search_field{position: relative; border-radius:0px; border:1px solid #949494; padding-right:40px; height: 36px;}
#header #top-header .max-page-with #top-header-inside .page-search-basket #search-box #submit-search{position: absolute; right: 6px; top: 6px;}
#header #top-header .max-page-with #top-header-inside .page-search-basket #basket-box{text-align: right; margin-top: 10px; background: url('/design/white-basket-icon.png') no-repeat right 8px top 5px #949494; height: 36px;}
#header #top-header .max-page-with #top-header-inside .page-search-basket #basket-box a{font-size: 16px; color: #fff; padding: 8px 40px 8px 10px; font-weight: normal;}

#body{padding: 0px 15px; margin-top: 160px;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
#body .max-page-with #body-inside{display: flex; flex-flow: row wrap; box-shadow: 0px 0px 5px #888888;}
#body .max-page-with #body-inside .body-left{width: 100%; background: #efefef;}
#body .max-page-with #body-inside .body-right{width: 100%; flex: 1; display: flex; flex-flow: row wrap; padding: 7px; align-self: flex-start;}
#body .max-page-with #body-inside .body-right .morzsa{margin: 4px 7px; width: 100%;}
#body .max-page-with #body-inside .body-right .morzsa a{font-size: 11px; font-weight: normal; display: inline-block;}
#body .max-page-with #body-inside .body-right .morzsa a i{margin: 0px 5px 0px 6px;}
#body .max-page-with #body-inside .body-right .morzsa a:first-child i{margin: 0px;}
#body .max-page-with #body-inside .body-right #social{margin: 7px; width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 7px 0px;}

#body .max-page-with #body-inside .body-right .page-title{margin: 0px 7px 7px 7px; width: 100%;}
#body .max-page-with #body-inside .body-right .page-title h1{ font-family: 'Dancing Script', cursive; font-size: 32px; line-height: 36px; color: #b76e79;}
#body .max-page-with #body-inside .body-right .product-section{display: flex; flex-flow: row wrap; width: 100%; margin: 5px 7px 0px 7px!important; background: #efefef; border-radius: 5px; border: 1px solid #dedede;}
#body .max-page-with #body-inside .body-right .product-section .product-images{flex: 1 1 100%; padding: 7px;}
#body .max-page-with #body-inside .body-right .product-section .product-details{flex: 1 1 100%; padding: 7px;}
#body .max-page-with #body-inside .body-right .product-section .product-details section:nth-child(2){padding: 4px 0px; margin: 4px 0px; border-top: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc;}
#body .max-page-with #body-inside .body-right .product-section .product-details section h2{font-size: 13px; padding: 1px 2px;}
#body .max-page-with #body-inside .body-right .product-section .product-offer{flex: 1 1 100%; padding: 7px; background: #ccc; margin: 7px; border-radius: 3px; border: 1px dotted #aaa; color: #333333;}
#body .max-page-with #body-inside .body-right .product-section .product-offer label{font-size: 12px; font-weight: bold;}
.mini-infos{padding: 7px; text-align: center;}
.mini-info-text{text-align: center;  font-size: 10px; line-height: 12px; text-transform: uppercase;}
.mini-info{font-weight: bold; text-align: center; font-size: 18px; line-height: 21px; color: #b76e79;}


#footer .max-page-with .footer-box{padding: 14px 0px;}
#footer .max-page-with .footer-box h2{color: #da9e8e; font-size: 14px; text-transform: uppercase; margin-bottom: 10px;}
#footer .max-page-with .footer-box ul{list-style: none;}
#footer .max-page-with .footer-box ul li{margin-top: 4px;}
#footer .max-page-with .footer-box ul li a{color: #000000; font-size: 13px;}
#footer .max-page-with .footer-box ul li a:hover{color: #da9e8e;}

#footer .max-page-with .footer-bottom{margin: 14px 0px; padding: 14px 0px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
#footer .max-page-with .footer-copyright{font-size: 12px; text-align: right; padding: 0px 0px 20px 0px; margin-top: -7px}


/* PRODUCT LIST*/
.product-box{flex: 0 1 calc(50% - 14px); -webkit-flex: 0 1 calc(50% - 14px); display: flex; flex-flow: column wrap; margin: 7px; border: 1px solid #da9e8e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.product-box:hover{border: 1px solid #b76e79;}
.product-box.discount, .product-box.discount:hover{border: 1px solid #d90000;}
.product-image-box{position: relative;}
.discount-text{position: absolute; background: #d90000; color: #ffffff; font-size: 10px; text-transform: uppercase; padding: 5px 10px; top: 15px; left: 0px;}
.product-box figure{}
.product-box figure a, .product-images a{line-height: 0px; display: block; background-size: cover!important; background-position: 50% 50%!important; background-repeat: no-repeat!important;}
.product-images a{box-shadow: 0px 0px 3px #888888; border: 5px solid #ffffff; border-radius: 3px; margin: 5px; width: calc(33.33333333% - 10px); display: inline-block;}
.product-images a:first-child{box-shadow: 0px 0px 3px #888888; border: 5px solid #ffffff; border-radius: 3px; margin: 0px; width: 100%;}
.product-box figure figcaption{display: none;}
.product-box .product-box-inside{padding: 12px 12px 6px 12px; flex: 1; position: relative; padding-bottom: 47px;}
.product-box .product-box-inside header{}
.product-box .product-box-inside header h2 a{font-size: 18px; line-height: 21px; font-family: 'Dancing Script', cursive;}
.product-box .product-box-inside p{font-size: 12px; line-height: 18px; color: #da9e8e; padding: 5px 0px 8px 0px;}
.product-box .product-box-inside .price-box{text-align: right;position: absolute; right: 7px; bottom: 10px;}
.product-box .product-box-inside .price-box .price-label{line-height: 15px; padding: 7px 14px; color: #ffffff; font-weight: bold; background: url(/design/price-label.png) no-repeat; display: inline-block; width: 125px; height: 29px;}
.product-box .product-box-inside .price-box .price-label.discount{line-height: 15px; padding: 7px 14px; color: #ffffff; font-weight: bold; background: url(/design/price-label-action.png) no-repeat; display: inline-block; width: 125px; height: 29px;}

.product-information{margin-top: 5px; width: 100%; padding: 0px 7px;}
.product-information h2{background: #b76e79; padding: 5px 10px; border-radius: 5px; color: #fff; font-weight: normal; font-size: 14px; line-height: 18px;}
.product-information-text{padding: 7px; background: #efefef; border-radius: 5px; border: 1px solid #dedede; font-size: 13px; line-height: 17px; margin-top: 5px;}
div[class^="sizes_"]{cursor: pointer; font-size: 12px; display: inline-block; background: #777777; color: #fff; margin: 2px 1px; padding: 4px 9px; border-radius: 45px; text-transform: uppercase; line-height: 14px;}
div[class^="colors_"]{cursor: pointer; font-size: 12px; display: inline-block; background: #b76e79; color: #fff; margin: 2px 1px; padding: 4px 9px; border-radius: 45px; text-transform: uppercase; line-height: 14px;}
div[class^="colors_"]:hover{background: #da9e8e;}
div[class^="minerals_"]{cursor: pointer; font-size: 12px; display: inline-block; background: #da9e8e; color: #fff; margin: 2px 1px; padding: 4px 9px; border-radius: 45px; text-transform: uppercase; line-height: 14px;}
div[class^="minerals_"] a, div[class^="minerals_"] a:hover{color:#ffffff; font-weight: normal;}
div[class^="minerals_"]:hover{background: #b76e79;}

.price-without-vat{}
.price-inlcude-vat{font-size: 28px; font-weight: bold; text-align: right;}
.price-inlcude-vat span{font-size: 16px; font-weight: normal;}
/* ARTICLE */
.article{overflow: hidden; margin: 0px 7px;}
.article h1{margin: 5px 0px 10px 0px; color: #b76e79;}
.article h2{margin: 4px 0px 8px 0px; color: #b76e79;}
.article-list{margin-top: 10px; padding-top: 5px; border-top: 1px dotted #cccccc;}
.article-list h2{margin: 2px 0px 8px 0px; color: #b76e79; font-size: 21px; line-height: 24px;}
.article h3{margin: 3px 0px 6px 0px; color: #b76e79;}
.article h3{margin: 2px 0px 4px 0px; color: #b76e79;}
.article p{margin: 5px 0px 10px 0px;}
.article ul, .article ol{margin: 10px 25px;}
.article ul li, .article ol li{padding: 0px 5px 0px 10px;}



/* MENU */
.menu{display: none; position: fixed; background: #ffffff; top: 24px; left: 0px; width: 100%; z-index: 99999;}
.menu ul{}
.menu ul li{border-bottom: 1px solid #cfcfcf; padding: 7px 14px; position: relative;}
.menu ul li a{font-size: 12px; line-height: 16px; text-transform:uppercase;}
.menu ul li a.open-submenu{position: absolute; font-size: 18px; right: 10px; top: 8px;}
.menu ul li ul{margin-top: 10px; display: none;}
.menu ul li.selected ul{margin-top: 10px; display: block;}
.menu ul li ul li{padding: 5px 0px;border-bottom: none; border-top: 1px dotted #cfcfcf;}
.menu ul li ul li a{font-weight: normal; font-size: 11px; line-height: 14px;}

.banner{padding: 7px; line-height: 0px;}



#footer{padding: 0px 15px; border-top: 20px solid #da9e8e;}

/* FORM */
#form_registration_id{}
.form-row-information{margin-top: 7px; width: 100%; padding: 0px 7px;}
.form-row-information h2{background: #b76e79; padding: 5px 10px; border-radius: 5px; color: #fff; font-weight: normal; font-size: 14px; line-height: 18px;}
.form-row-information-inputs{padding: 7px; background: #efefef; border-radius: 5px; border: 1px solid #dedede; font-size: 13px; line-height: 17px; margin-top: 5px;}
.chechkbox-inputs{width: 17px!important; height: 17px!important; float: left; position: relative; top: -3px; margin-right: 5px;}
#same{font-size: 11px; font-style: italic; line-height: 14px; cursor: pointer; color: #ffffff;}
#same:hover{color: #000000;}
.form-row-information-inputs label{font-size: 12px; font-weight: bold; cursor: pointer;}
.required{color: #d90000;}
.display-hide{display:none;}

.popup-contener{display: none; background: rgba(0, 0, 0, .9); position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 13px 15px; z-index: 99999;}
.popup-contener-inside{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.popup-box{width: 0px; height: 0px; max-width: 0px; max-height: 0px; overflow:hidden; background: #ffffff; border-radius: 3px; box-shadow: 0px 0px 3px #777777;}
.popup-box-alert{display: none; overflow-y: auto; width: 400px; height: auto; max-width: 90%; max-height: 80%; padding: 12px 15px;}
.popup-box-alert .section-box{padding: 0px; margin: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}

.popup-box-alert .section-box h1{text-transform: uppercase; font-weight: normal; font-size: 15px; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 5px; }
.popup-box-alert .section-box a{display: inline-block; width: calc(100% - 20px); background: #da9e8e; color: #fff; padding: 5px 10px; border-radius: 5px; font-weight: normal; font-size: 14px; text-align: center; margin: 5px 10px;}
.popup-box-alert .section-box a:hover{background: #000000;}

/*KOSAR*/
.kosar-sor-header{background: #333; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 5px; margin-bottom: 5px;}
.kosar-sor{margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #cccccc;}
.kosar-kep a{border-radius: 5px; border: 1px solid #bbbbbb; display: block; background-size: cover!important; background-repeat: no-repeat!important; background-position: 50% 50%!important;}
.kosar-nev{padding: 5px 10px;}
.kosar-nev p{padding: 5px 0px; font-size: 13px; line-height: 16px;}
.kosar-ar{text-align: center;}
.kosar-db{text-align: center}
.kosar-sor-header div{padding: 0px;}
@media (min-width:651px){
    .product-box{flex: 0 1 calc(33.3333333333% - 14px); }
    #body .max-page-with #body-inside .body-right .product-section .product-images{flex: 1 1 50%; padding: 7px;}
    #body .max-page-with #body-inside .body-right .product-section .product-details{flex: 1 1 50%; padding: 7px;}
    #body .max-page-with #body-inside .body-right .product-section .product-offer{flex: 1 1 100%; padding: 7px;}
    div[class^="sizes_"]{font-size: 10px; padding: 3px 8px;}
    div[class^="colors_"]{font-size: 10px; padding: 3px 8px;}
    div[class^="minerals_"]{font-size: 10px; padding: 3px 8px;}
    
}

@media (min-width:993px){
    #header{position: relative;}
    #header #top-black .max-page-with a#mobil-menu{display: none!important;}
    #header #top-header .max-page-with #top-header-inside .page-logo img{height: auto;}
    #header #top-header .max-page-with #top-header-inside .page-slogen{display: initial;}
    #body{margin-top: 0px;}
    .menu{display: block!important; background: #efefef; position: relative; top: 0px; left: 0px; z-index: 1;}
    #body .max-page-with #body-inside .body-left{width: 195px;}
    #body .max-page-with #body-inside .body-right{flex: 4;}
   .product-box{flex: 0 1 calc(25% - 14px); }
    #body .max-page-with #body-inside .body-right .product-section .product-images{flex: 3.5; padding: 7px;}
    #body .max-page-with #body-inside .body-right .product-section .product-details{flex: 5; padding: 7px;}
    #body .max-page-with #body-inside .body-right .product-section .product-offer{flex: 3; padding: 7px;}
    div[class^="sizes_"]{font-size: 9px; padding: 2px 7px;}
    div[class^="colors_"]{font-size: 9px; padding: 2px 7px;}
    div[class^="minerals_"]{font-size: 9px; padding: 2px 7px;}
}