#main-slider { position: relative; overflow: hidden; }
/* #main-slider .owl-item:after { content: " "; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4); top: 0; left: 0; } */
#main-slider img { width: 100%; }
#main-slider .item { position: relative; }
#main-slider .contents { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: white; text-align: center; max-width: 60%; }
#main-slider .contents .lead { font-weight: 600; padding: 25px 0; line-height: 140%; }
section.title { padding: 60px 0 0; text-align: center; }
section.top-categories { padding: 60px 0 0; }
section.top-categories .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
section.top-categories .container > a { height: 280px; flex: 0 0 32%; position: relative; overflow: hidden; border-radius: 0.25rem; transition: 1.5s; }
section.top-categories .container > a:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); content: " "; z-index: 1; }
section.top-categories img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: 0.5s; }
section.top-categories .container > a:hover img { transform: scale(1.05); }
section.top-categories .container > a:hover:after { background: rgba(0,0,0,0.65); transition: 0.5s; }
section.top-categories h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; z-index: 2; }
section.products { padding: 80px 0 0; text-align: center; }
section.products .container { padding: 0 60px; }
section.products .owl-carousel { padding: 20px 0px 20px; text-align: center; }
section.products .owl-carousel .item { padding: 30px 15px; margin: auto; }
section.product-offer { padding: 80px 0 0; text-align: center; }
section.newsletter-signup { display: flex; align-items: center; background: url('/modules/main/images/newsletter-background.jpg') no-repeat; background-size: cover; background-position: center center; position: relative; padding: 80px 0; }
section.newsletter-signup:after { content: " "; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6); top: 0; left: 0; }
section.newsletter-signup .container { display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; }
section.newsletter-signup h2 { color: white; }
section.newsletter-signup .newsletter-form { width: 460px; padding: 40px 20px 20px; display: flex; flex-wrap: wrap; justify-content: center; }
section.newsletter-signup .newsletter-form > div:not(.email) { flex: 0 0 calc(50% - 10px); }
section.newsletter-signup .newsletter-form > div.email { flex: 0 0 100%; margin-top: 20px; }
section.newsletter-signup .newsletter-form > div:nth-child(1) { margin-right: 10px; }
section.newsletter-signup .newsletter-form > div:nth-child(2) { margin-left: 10px; }
.product-offer-box { background: #fff; box-shadow: 0 0 16px rgb(0 0 0 / 10%); display: flex; align-items: center; padding: 20px 60px 20px 20px; position: relative; margin: 0 95px; border-radius: 0.25rem; }
.product-offer-box img { height: 240px; padding: 30px 20px; }
.product-offer-box .product { text-align: left; margin: 0 40px; flex-grow: 1; }
#brand-slider { padding: 20px 0px 0; text-align: center; }
#brand-slider .container { padding: 0 60px; }
#brand-slider .item { padding: 30px 60px; margin: auto; position: relative; }
#brand-slider .item img { width: 100%; }
#brand-slider .owl-stage { display: flex; align-items: center; justify-content: center; }

@media (max-width: 1680px){

}

@media (max-width: 1440px){

section.title { padding: 40px 0 0; }
section.top-categories { padding: 40px 0 0; }
section.top-categories .container > a { height: 210px; flex: 0 0 31%; }
section.new-products { padding: 50px 0 0; }
section.product-offer { padding: 50px 0 0; }
section.top-products { padding: 50px 0 0; }
section.sales-products { padding: 50px 0 0; }
section.newsletter-signup { padding: 60px 0; }
section.products { padding: 60px 0 0; }
.product-offer-box { padding: 15px 40px 15px 15px; }
#brand-slider { padding: 0px 80px 0; text-align: center; }
#brand-slider .item { width: 224px; padding: 30px 45px; margin: auto; }
}

@media (max-width: 1366px){

}

@media (max-width: 1280px){

section.products .container { padding: 0 80px; }
}

@media (max-width: 1024px){
#main-slider .contents { position: absolute; top: 20px; left: 0px; transform: initial; z-index: 2; max-width: initial; padding: 0 20px; }
section.top-categories { padding: 20px 10px 0; }
section.top-categories .container { flex-direction: column; }
section.top-categories .container > a { height: 130px; flex: initial; margin: 5px 0; }
section.newsletter-signup { text-align: center; }
section.newsletter-signup .newsletter-form { width: 100%; flex-direction: column; }
section.newsletter-signup .newsletter-form > div:not(.email) { flex: initial; }
section.newsletter-signup .newsletter-form > div.email { flex: initial; margin-top: 10px; }
section.newsletter-signup .newsletter-form > div:nth-child(1) { margin-right: 0px; }
section.newsletter-signup .newsletter-form > div:nth-child(2) { margin-left: 0px; margin-top: 10px; }
.product-offer-box { flex-direction: column; margin: 0; }
.product-offer-box img { height: initial; width: 90%; }
section.products, section.product-offer { padding: 20px 0 0; }
section.products .container { padding: 0; }
section.products .owl-carousel { padding: 0; } 
section.products .owl-carousel .item { width: 100%; padding: 20px 10px; }
#brand-slider { padding: 0 10px; }
#brand-slider .item { width: 100%; padding: 0 10px; }
#brand-slider .container { padding: 0; }
}