/* CSS for image carousel 20190110 znm */

body {

	background-size: cover;
}

#imgCarousel {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 500px;
}

.singleSlide {
	background-size: 666px 500px;
	height: 500px;
	position: absolute;
	left: 100%;
	width: 100%;
	top: 0px;
}
	
.slideOverlay {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 50px;
	width: 100%;
}
	
#carouselNav {
	position: relative;
	width: 30%;
	top: -36px;
}

#carouselNav:hover { 
	cursor: pointer; 	
}

#carouselPrev {
	position: relative;
	float: left;
	left: 82px;
	opacity: 0.4;
}

#carouselPrev:hover {
	opacity: 0.6;
}

#carouselNext {
	position: relative;
	float: right;
	right: 52px;
	opacity: 0.4;
}

#carouselNext:hover {
	opacity: 0.6;
}
	
@-webkit-keyframes slideIn {
    100% { left: 0; }
}

@keyframes slideIn {
    100% { left: 0; }
}

.slideInRight {
	left: -100%;
	-webkit-animation: slideIn 1s forwards;
    animation: slideIn 1s forwards;
}

.slideInLeft {
	left: 100%;
	-webkit-animation: slideIn 1s forwards;
    animation: slideIn 1s forwards;
}

@-webkit-keyframes slideOutLeft {
    100% { left: -100%; }
}

@keyframes slideOutLeft {
    100% { left: -100%; }
}

.slideOutLeft {
	-webkit-animation: slideOutLeft 1s forwards;
    animation: slideOutLeft 1s forwards;
}

@-webkit-keyframes slideOutRight {
    100% { left: 100%; }
}

@keyframes slideOutRight {
    100% { left: 100%; }
}

.slideOutRight {
	-webkit-animation: slideOutRight 1s forwards;
    animation: slideOutRight 1s forwards;
}

.moveInRight {
	left: -100%;
	-webkit-animation: slideIn 0s forwards;
    animation: slideIn 0s forwards;
}

.moveInLeft {
	left: 100%;
	-webkit-animation: slideIn 0s forwards;
    animation: slideIn 0s forwards;
}

.moveOutLeft {
	-webkit-animation: slideOutLeft 1s forwards;
    animation: slideOutLeft 1s forwards;
}

.moveOutRight {
	-webkit-animation: slideOutRight 0s forwards;
    animation: slideOutRight 0s forwards;
}