@charset "utf-8";
/* CSS Document slideshow.css*/
.Menuitem {font-family: "Sansation"; font-size: 16px}
/* Slideshow container */
.GalleryContainer {
width: 35.5%;
margin: 1%;
float: left;
font-family: "Opensans";
text-align: center;
background-color: #faf0e6;
position: relative;
}
.slidetext {background: #faf0e6}
.Menuitem {
font-family: "Sansation";
font-size: 16px;
}
/* Slideshow container */
.GallerySlideContainer {
position: relative;
width: 58%;
}
/* Slides */
.Slide {
display: none;
position: relative;
}
.Slide img {
width: 100%;
}
.GallerySlideshow {
display: none;
position: relative;
}
.controls {overflow-x: scroll}
.GallerySlideshow img {
width: 100%;
}
/* Hide the images by default */
.Slideshow1 {
display: none;
}
#imgRotate {width: 100%; height: auto}
/* Next & previous buttons */
.prev, .next, .prev1, .next1, .prev2, .next2, .prev3, .next3 {
cursor: pointer;
position: absolute;
top: 85%; /*positions the prev and next buttons 85% of the height from the top of the container*/
width: auto;
padding: 16px;
color: #007791;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.prev2, .next2, .prev1, .next1 {color:#faf0e6; background: #007791}
.next, .next1, .next2, .next3 {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover, .prev1:hover, .next1:hover, .prev3:hover, .next3:hover  {
background-color: #faf0e6;
}
.prev2:hover, .next2:hover, .prev1:hover, .next1:hover  {
background-color: #faf0e6; color: #007791
}
/* Keeps all the thumbnails in a line scrolling horizontally */
.thumbnailcontrol {
position: relative;
/*top: 20px; - this was stopping the scroll bar from being visible?!*/
width: 80%;
white-space: nowrap;
display: inline-block;
overflow-x: scroll !important;
height: 100px;
background-color: #faf0e6;
}
/* Caption text */
.text {
color: #4F7942;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.thumbnail img:hover, .thumbnail.active img {
border: 2px solid #4F7942;
}
/* Don't use this yet, 
.Slideshow1 {
animation: kenburns 10s infinite;
}*/
.GallerySlideshow {
position: relative}/*important to line up the arrows for prev and next*/
@keyframes kenburns {
0% {
transform: scale(1.2) ;
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.2) ;
}
}
@media (max-width: 850px) {
.GalleryContainer, .GalleryContainerRight,.GallerySlideContainer {width: 100%}
}