@font-face {
    font-family: 'Cambria';
    src: url('../fonts/Cambria.ttf') format('truetype'),
        url('../fonts/Cambria.woff') format('woff'),
        url('../fonts/Cambria.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'League Gothic';
    src: url('../fonts/league_gothic.ttf') format('truetype'),
        url('../fonts/league_gothic.woff') format('woff'),
        url('../fonts/league_gothic.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
	--dark-brown: #492e2e;
	--middle-brown: #7b706b;
	--light-brown: #999999;
	--orange: #e97e14;
	--gray: #e9e7e7;
}
body {background: url(../images/page-bg.gif); font-family: 'Cambria'; font-size: 16px; line-height: 22px; color: var(--dark-brown)}
h1,h2,h3,h4,h5,h6 {font-family:'League Gothic';}
.light-brown {color: var(--light-brown)}
.middle-brown {color: var(--middle-brown)}

div.headerbar .container, div.infobar .container, div.main-content, div.content-top.container, div.content-bottom.container {background: url(../images/main-bg.gif)}
div.headerbar .container {display: flex; justify-content: flex-end; align-items: center; padding-top: 10px; padding-bottom: 10px}
div.headerbar .container p {margin: 0}
div.headerbar .container > div {padding-top: 10px; padding-bottom: 10px}
div.headerbar .container .login p {padding-left: 30px; margin-left: 30px; border-left: 1px solid}
div.headerbar .cart #productlist-switch.productlist-switch {position: relative}
div.headerbar .cart #productlist-switch.productlist-switch .btn	{position: absolute; width: 120px; right: -28px; bottom: -15px; padding: 0px 5px}
.btn:hover {background: var(--orange)}
.yagModPowerShoppingcart.layout-default .total-products {background: var(--orange) !important; color: white !important; left: unset !important; right: -15px !important;}



div.navigationbar {display: flex; justify-content: center}
div.navigationbar .container {background: url(../images/bg-mainnav.png); height: 54px; margin: unset; display: flex}
div.navigationbar .container-left, div.navigationbar .container-right {width: 77px; height: 54px;}
div.navigationbar .container-left {background: url(../images/mainnav-left.png);}
div.navigationbar .container-right {background: url(../images/mainnav-right.png);}

div.navigationbar div.container div.logo {margin-top: -80px}

div.infobar div.container {display: flex; justify-content: flex-end; padding-top: 15px;  padding-bottom: 15px}
div.infobar div.container div.phone,div.infobar div.container #pipakereso {font-size: 22px; font-family: 'League Gothic';}
div.infobar div.container p {margin-bottom: 0}
div.infobar div.container #pipakereso {margin-left: 30px; padding-left: 30px; border-left: 1px solid var(--light-brown)}

div#main .main-content.container {padding-top: 35px;padding-bottom: 15px}

footer.footer .container {background-image: url(../images/user-bg.png), url(../images/userb-bg.png); background-repeat: repeat-x, repeat; color: var(--light-brown); padding-top: 45px; display: flex; justify-content: space-between}
footer.footer .container .moduletable {flex: 1; padding: 15px}
footer.footer .container .moduletable a {color:var(--orange); text-decoration: none; margin: 3px 0; padding: 2px 0; display: inline-block}

div#copyright .container {background-image: url(../images/userb-bg.png);}

div.media-inner {padding-right: 30px;}
div.media-inner .main-image {border: 10px solid var(--gray); border-radius: 5px; /*height: 450px;*/ background: white; display: flex; align-items: center; justify-content: center; min-height: 250px;}
div.vm-product-container {display: flex; flex-wrap: wrap;}
div.product-field.product-field-type-S {display: flex;}
div.product-field.product-field-type-S .product-fields-title-wrapper {min-width: 120px;}
div.adat div.product-field.product-field-type-S .product-fields-title-wrapper {width: 30px;}

div.meretWrapper {display: flex; align-items: center}

div.browse-view div.vm-product-price div.PricesalesPrice {text-align: center}
div.browse-view div.productWrapper.row .product {padding-top: 10px; padding-bottom: 10px;}
div.browse-view div.productWrapper.row .product,div.browse-view div.productWrapper.row .product img { transition: all 0.3s}
div.browse-view div.productWrapper.row .product:hover {-webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.07); 
box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.07); background: var(--gray)}
div.browse-view div.productWrapper.row  div.product-price {display: flex; justify-content: center}
div.browse-view div.productWrapper.row  div.product-price div.PricebasePriceWithTax  {padding-right: 15px}
div.browse-view div.productWrapper.row  div.product-price div.PricebasePriceWithTax span.PricebasePriceWithTax,
.vm-product-details-container div.PricebasePriceWithTax span.PricebasePriceWithTax  {color: var(--orange);  text-decoration: line-through;}

.cf_filtering_knob {background-color: var(--orange) !important}
.cf_filtering_knob:hover, .cf_filtering_knob:focus {background-color: var(--orange) !important; box-shadow: 0 0 4px var(--orange) !important }
.style-wl.fa {margin-right: 2px !important; background: var(--gray); border-radius: 50%}
.style-wl.added, .style-wl:hover, .style-wl:active, .style-wl:focus {color: var(--orange) !important}
#tab-wishlist .show-sort, .show-full {left: 10px !important}
#tab-wishlist .sort-wishlist {padding-left: 10px !important;}
#tab-wishlist .check-wishlist {left: 5px}
#tab-wishlist .full-wishlist .action-wishlist {display: flex; flex-wrap: wrap; height: auto !important; justify-content: space-around}
#tab-wishlist .full-wishlist .action-wishlist p {width: 48% !important; margin-left: 0 !important; margin-right: 0 !important }
#login-form .login-left h2 {color: var(--dark-brown) !important}
.nbj_button-login #btn_login_nb {background: var(--orange) !important}
#login-form .login-right {display: flex; flex-direction: column}
#login-form .login-right a {color: var(--orange) !important}
.browse-view .orderby-displaynumber .display-number {display: flex; flex-wrap: wrap; justify-content: space-between}

#hero .hero-content.container .custom {margin-left: -30px; margin-right: -30px}
#hero .hero-content.container .custom img {max-width: unset; width: 100%; height: auto}
#hero .hero-content.container .custom p {margin: 0}


#cbottom div.content-bottom.container, #ctop div.content-top.container {padding-top: 30px; padding-bottom: 30px}
#ctop div.content-top.container {display: flex; flex-wrap: wrap; justify-content: space-between;  }
#ctop div.content-top.container > .moduletable {flex: 1}
#ctop div.content-top.container > .moduletable h3 {text-align: center}

#ctop div.content-top.container > .moduletable .spacer {padding: 15px}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper .ribbon { position: absolute; left: -4px; top: -4px; z-index: 1; overflow: hidden; width: 95px; height: 95px; text-align: right;}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper .ribbon span { font-size: 11px; font-weight: bold; color: #FFF; text-transform: uppercase;text-align: center; line-height: 20px;  transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 120px; display: block; background: #79A70A;  background: linear-gradient(#96B37A 0%, #809868 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute;  top: 25px; left: -25px;}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper .ribbon span::before { content: "";  position: absolute; left: 0px; top: 100%;  z-index: -1;  border-left: 3px solid #809868;  border-right: 3px solid transparent;  border-bottom: 3px solid transparent;  border-top: 3px solid #809868;}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper .ribbon span::after {  content: "";  position: absolute; right: 0px; top: 100%;  z-index: -1;  border-left: 3px solid transparent;  border-right: 3px solid #809868;  border-bottom: 3px solid transparent;  border-top: 3px solid #809868;}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper {position: relative; margin: auto}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper, .vm-categories-wall-spacer .imageWrapper.box, .vm-categories-wall-spacer img {border: 10px solid var(--gray); border-radius: 5px; max-width: 250px; background: white; width: 100%}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper {min-height: 230px}
#ctop div.content-top.container > .moduletable .spacer .imageWrapper img {max-height: 235px}
.vm-categories-wall-spacer {padding: 15px; min-height: 200px}

div.category-view div.category .spacer {padding: 15px;}

@media (max-width: 900px) {
	.menu {display: flex; width: calc(100% - 195px);}
	#login-cmsmart-wishlist form#login-form {display: flex; flex-direction: column}
	#colorbox {left: 50% !important; transform: translateX(-50%)}
	#cboxWrapper, #colorbox, #cboxContent, #cboxContent, #cboxLoadedContent {max-width: 320px !important; margin-left: auto; margin-right: auto}
	#login-form .login-left, #login-form .login-right  {border: none; width: 320px;}
	#login-form .login-left h2 {display: none}
	#login-form .username, #login-form .password {text-align: center !important}
	#login-form .login-left label.remember {display: none}
	#login-form .login-left label span {display: none}
	#login-form .login-right .lostpassword, #login-form .login-right .lostuser {margin-bottom: 0 !important}
}
@media (max-width: 767px) {
	.filter form.cf_form {display: flex; flex-wrap: wrap;}
	.filter form.cf_form .cf_flt_wrapper {margin-right: 15px; }
	.footer .container {flex-wrap: wrap}
	.footer .container div.moduletable {flex: 50%; order: 1}
	.footer .container div.moduletable:nth-child(2) {flex: 100%; order: 2}
	div.infobar div.container #pipakereso {margin-left: 15px; padding-left: 15px;}1
	div.meretWrapper div.abra {width: 30%}
#ctop div.content-top.container > .moduletable {flex: 50% !important}

}
@media (max-width:575px) {
	div.headerbar .container {height: 80px; justify-content: space-between; align-items: flex-start}
	div.headerbar .container > div {flex: 1}
	div.navigationbar div.container div.logo img {width: 120px; height: auto; margin-top: 40px;}
	.menu {width: calc(100% - 120px);}
	div.infobar div.container {padding-top: 0}
	.yagModPowerShoppingcart.layout-default .cart-summary .total-price {display: none !important}
	div.headerbar .cart #productlist-switch.productlist-switch .btn {right: 25px; top: 0; bottom: unset}
	div.infobar div.container div.phone, div.infobar div.container #pipakereso {font-size: 20px;}
	div.meretWrapper div.abra, div.meretWrapper div.adat {width: 50%}
	 div.meretWrapper div.adat div.product-field.product-field-type-S .product-fields-title-wrapper {min-width: 60px}
	.container {padding-right: 15px; padding-left: 15px;}
	.vm-categories-wall-spacer, #ctop div.content-top.container > .moduletable .spacer {padding: 15px 7px}
	div.product.col-sm-6 {float: left; width: 50% !important;}
	div.browse-view div.productWrapper.row .product {padding: 10px 5px}
}	
@media (max-width:480px) {
	div.filter {display: none}
	div.infobar div.container div.phone span {display: none}
	div.infobar div.container {flex-direction: column; align-items: flex-end;}
	div.infobar div.container #pipakereso {margin-left: 0; padding-left: 0; border: none}
	div.meretWrapper {flex-direction: column}
	div.meretWrapper div.abra, div.meretWrapper div.adat {width: 100%}

}
@media (max-width:320px) {
	#ctop div.content-top.container > .moduletable {flex: 100% !important}
	.vm-categories-wall-catwrapper{width: 100%;}
	div.product.col-sm-6 {width: 100% !important; margin: auto}
}