/* ----------------------------------------- */
/* View: ImageCarousels - start */
/* ----------------------------------------- */
.galleryCarousels {
align-items: center;
margin: 0;
padding: 0;
background-color: #F3F3EE !important;
border-color: #F3F3EE;
}
.galleryCarousels img {
/*the following two lines can be added to force all images to have the same height. this leaves some margins around the picture, which is less nice than just letting it be auto and making all the images have the same proportions (640/434 at the moment)
object-fit: contain;
height: 200pt !important; */
width:100%;
}
.galleryCarousels > div {
width: 32%;
margin: 0;
padding: 0;
display: inline-block;
height: auto;
margin-left: 1.6%;
margin-top: 20px;
}
.firstCarouselEntry {margin-left: 0 !important;}
/* ----------------------------------------- */
/* View: ImageCarousels - end */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* Content Template: Loop item in ImageCarousels - start */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* Content Template: Loop item in ImageCarousels - end */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* Content Template: Template of ImageCarousels - start */
/* ----------------------------------------- */
.carouselWrapper {
position: relative;
}
.slideshow-container {
margin: 0;
width: 100%;
}
.column-text {
min-height: 210pt;
}
/* nice colour change around "Read more" */
.columnmore { background-color: #F3F3EE; }
.columnmore:before { border-bottom-color: #F3F3EE; }
/* The CSS that follows displays the animations and buttons of the carousels */
/* Next & previous buttons */
.previousImage, .nextImage {
cursor: pointer;
position: absolute;
top: 26%;
left: 0%;
color: #bbb;
padding: 2%;
background-color: transparent;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.nextImage {
left: 93%;
}
/* On hover, add a black background color with a little bit see-through */
.previousImage:hover, .nextImage:hover {
color: #FFCD00;
}
/* The dots/bullets/indicators */
.wrapperCarouselCircles {
position: absolute;
top: 50%;
left: 45%;
}
.dot {
cursor: pointer;
height: 10pt;
width: 10pt;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #FFCD00;
}
/* Fading animation */
.fadeCarousel {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fadeActivity;
animation-duration: 1.5s;
}
@-webkit-keyframes fadeCarousel {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fadeCarousel {
from {opacity: .4}
to {opacity: 1}
}
/* ----------------------------------------- */
/* Content Template: Template of ImageCarousels - end */
/* ----------------------------------------- */
