.entry .entry-content h3 + .s4-carousel_image-2,
.entry .entry-content p + .s4-carousel_image-2,
.entry .entry-content ul + .s4-carousel_image-2,
.entry .entry-content ol + .s4-carousel_image-2 {
margin-top: 20px;
}
.s4-carousel_image-2 {
position: relative;
overflow: hidden;
}
.s4-carousel_image-2 .horizontalScroll .carousel-item {
height: 400px;
min-width: 400px;
position: relative;
}
.s4-carousel_image-2 .horizontalScroll .carousel-item .img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 10px;
}
.s4-carousel_image-2 .horizontalScroll .carousel-item .caption {
position: absolute;
left: 0;
bottom: 0;
background: #fff;
color: #102d8e;
font-size: 1rem;
border-radius: 0 5px 0 5px;
padding: 8px 15px;
width: auto;
}
.s4-carousel_image-2 .horizontalScroll .carousel-item:not(:last-child) {
margin-right: 15px;
}
.s4-carousel_image-2 .horizontalScroll {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
overflow: auto;
scroll-behavior: smooth;
padding-bottom: 20px;
position: relative;
width: 80%;
width: calc(100% - 70px * 2);
margin: auto;
}
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar-track {
background: #f7f7f7;
height: 10px;
border-radius: 10px;
}
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar-thumb {
background: #102d8e;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 10px;
}
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar-thumb:hover {
background: #102d8e;
}
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow {
position: absolute;
cursor: pointer;
top: 50%;
top: calc(50% - 20px);
z-index: 25;
height: 37px;
width: 37px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transition: all 0.3s;
background-color: rgba(124, 199, 223, 0.2);
border-radius: 100%;
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow:not(.showIt) {
opacity: 0.4;
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow::before {
content: " ";
display: block;
width: 20px;
height: 20px;
background: url(//www.cornimont.fr/wp-content/themes/section4-cornimont/images/icon/arrow-deroulant-bleu.svg) no-repeat center;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow.left { right: 0;
left: unset;
top: calc(50% - 30px);
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow.left::before {
-webkit-transform: rotate(-180deg) translate(50%, 50%);
-moz-transform: rotate(-180deg) translate(50%, 50%);
-ms-transform: rotate(-180deg) translate(50%, 50%);
transform: rotate(-180deg) translate(50%, 50%);
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow.right { left: unset;
right: 0;
top: calc(50% + 20px);
} @media (max-width: 1549px) {
.s4-carousel_image-2 .horizontalScroll .carousel-item {
height: 300px;
}
}
@media (max-width: 1199px) {
.s4-carousel_image-2 .horizontalScroll .carousel-item {
height: 250px;
}
}
@media (max-width: 991px) {
.s4-carousel_image-2 .horizontalScroll {
width: 100%;
width: calc(100% - 40px * 2);
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow {
width: 27px;
height: 27px;
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow::before {
width: 17px;
height: 17px;
}
}
@media (max-width: 767px) {
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar-track {
height: 6px;
border-radius: 6px;
}
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar-thumb {
border-radius: 6px;
}
.s4-carousel_image-2 .horizontalScroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.s4-carousel_image-2 .horizontalScroll ~ .arrow {
display: none;
}
.s4-carousel_image-2 .horizontalScroll {
width: 100%;
}
.s4-carousel_image-2 .horizontalScroll .carousel-item {
height: 150px;
}
}