.ws_owl_products {
padding: 0;
}
.ws_owlcarousel.productschulen-carousel {
position: relative;
padding:0;
overflow: hidden;
box-sizing: border-box;
}
.ws_owlcarousel.productschulen-carousel .owl-carousel {
overflow: visible;
margin: 0 auto;
position: relative;
}
.ws_owlcarousel.productschulen-carousel .owl-carousel .owl-stage-outer {
overflow: visible; }
.productschulen-item {
margin: 0 15px;
box-sizing: border-box;
padding: 0;
position: relative;
line-height: 1.2;
}
.productschulen-item a {
color: #303031;
text-decoration: none;
}
.productschulen-item a:hover .ws_product-title {
color:#CD1719
}
.productschulen-item-img {
position: relative;
overflow:hidden;
margin-bottom: 12px;
display:flex;
width:100%
}
.productschulen-item-img:after {
content:'';
width:0; height:0; padding-bottom: 150%
}
.productschulen-item img {
position: absolute;
left:0;
width:100%;
top:0;
height:100%;
object-fit: cover;
object-position: center;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
transition: transform .5s
}
.ws_product-title {
font-family: 'Nunito',sans-serif;
font-weight: normal;
font-size: 16px;
color: #303031;
line-height: 1.1;
text-align: left;
text-transform: none;
margin: 0 0 8px;
padding: 0;
display: block;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
transition: color .5s
}
.productschulen-item a:hover .ws_product-title {
color:#ABA282;
}
.productschulen-item .archive-product-colors {
display: flex;
margin-bottom: 10px;
}
.productschulen-item .archive-product-colors > span {
display: inline-block;
width:18px;
height:18px;
border-radius:50%;
margin-right: 8px;
border: 1px solid #fff;
box-shadow: 0 0 0 1px #CCBD9F;
cursor: pointer;
position: relative;
transition: box-shadow .5s
}
.productschulen-item .archive-product-colors > span:hover,
.productschulen-item .archive-product-colors > span.active {
box-shadow: 0 0 0 1px #303031;
}
.productschulen-item .archive-product-colors > span span.first-color {
position:absolute;
top:0;left:0;
width:100%;
display: block;
}
.productschulen-item .archive-product-colors > span span.second-color {
position:absolute;
bottom:0;left:0;
width:100%;
height: 8px;
display: block;
border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.productschulen-item .passform {
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
color: #303031;
margin-bottom: 5px;
}
.productschulen-item .ws-prod-cats {
margin: 0 0 8px;
}
.ws_product-price {
color: #303031;
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
text-align: left;
}
.productschulen-item p.wc-gzd-additional-info, .productschulen-item .gm-wp_bakery_woocommerce_get_price_html {
margin: 0 0 10px;
font-size: 14px;
color: #999;
font-weight: normal;
}
.productschulen-item p.wc-gzd-additional-info a, .productschulen-item .gm-wp_bakery_woocommerce_get_price_html a {
color: #999;
}
.productschulen-carousel .owl-carousel button.owl-prev, .productschulen-carousel .owl-carousel button.owl-next {
position: absolute;
top: 24%;
width: 50px;
height: 68px;
color: #C8BFA1;
font-size: 50px!important;
transition: color .5s
}
.productschulen-carousel .owl-prev span, .productschulen-carousel .owl-next span {
color: transparent;
font-size: 0;
}
.productschulen-carousel .owl-prev:before, .productschulen-carousel .owl-next:before {
pointer-events: none;
font-family: 'icomoon';
text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
}
.productschulen-carousel .owl-prev:before {
content: '\e907';
}
.productschulen-carousel .owl-next:before {
content: '\e908';
}
.productschulen-carousel .owl-prev:hover, .productschulen-carousel .owl-prev:focus,
.productschulen-carousel .owl-next:hover, .productschulen-carousel .owl-next:focus {
color: #536B51!important;
outline: none;
}
.productschulen-carousel .owl-dots {
position: absolute;
bottom: -20px;
width: 100%;
display: inline-flex;
justify-content: center;
}
.productschulen-carousel .owl-dots .owl-dot {
width: 8px;
height: 8px;
background-color: #DDD3BB;
margin: 10px 5px 0;
transition: background-color .5s;
}
.productschulen-carousel .owl-dots .owl-dot.active {
background-color: #536B51;
}
@media only screen and (max-width: 599px) {
.productschulen-item {
margin: 0 5px;
}
}
@media only screen and (max-width: 767px) {
.ws_owl_products {
padding: 0 15px;
}
}
@media only screen and (max-width: 767px) {
.ws_owlcarousel.productschulen-carousel .owl-carousel {
margin-bottom: 30px
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
display:none
}
.productschulen-item {
padding: 0;
}
}
@media only screen and (min-width: 768px) {
.ws_owlcarousel.productschulen-carousel .owl-item:not(.active) {
opacity:0.3
}
.ws_owlcarousel.productschulen-carousel .owl-item.active .productschulen-item a:hover img {
transform: scale(1.05);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.productschulen-carousel .owl-carousel button.owl-prev, .productschulen-carousel .owl-carousel button.owl-next {
top: calc(20vw - 50px)
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.productschulen-carousel .owl-carousel button.owl-prev, .productschulen-carousel .owl-carousel button.owl-next {
top: calc(15vw - 50px)
}
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.productschulen-item {
margin: 0 10px; }
.ws_owlcarousel.productschulen-carousel .owl-carousel {
width: 80%;
}
.productschulen-carousel .owl-prev {
left: calc(50% - 50vw + 10px); }
.productschulen-carousel .owl-next {
right: calc(50% - 50vw + 10px); }
}
@media only screen and (min-width: 1200px) and (max-width:1439px) {
.ws_owlcarousel.productschulen-carousel .owl-carousel {
width: 1060px;
}
.productschulen-carousel .owl-carousel button.owl-prev, .productschulen-carousel .owl-carousel button.owl-next {
top: 142px;
}
.productschulen-carousel .owl-prev {
left: calc(50% - 50vw + 10px); }
.productschulen-carousel .owl-next {
right: calc(50% - 50vw + 10px); }
}
@media only screen and (min-width: 1440px) {
.ws_owlcarousel.productschulen-carousel .owl-carousel {
width: 1200px;
}
.productschulen-carousel .owl-carousel button.owl-prev, .productschulen-carousel .owl-carousel button.owl-next {
top: 170px;
}
.productschulen-carousel .owl-prev {
left: calc(50% - 50vw + 20px); }
.productschulen-carousel .owl-next {
right: calc(50% - 50vw + 20px); }
}