@charset "utf-8";


/* jCS4
------------------------------------------------------------*/

/* To hide the element before start animating */
.animationHidden {
	visibility: hidden !important;
}

/* Resetting CSS */
.jcs4 * {
	padding: 0;
	margin: 0;
}

/* Formatting default elements */
.jcs4 {
	position: relative;
}

.jcs4-viewport { 
	position: relative;
	overflow: hidden;
}

.jcs4-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.jcs4-slide img {
	display: block;
	width: 100%;
	height: auto;
}

/* Crop effect for images */

.jcs4-image-crop {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.jcs4-image-crop img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	-webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.no-csstransforms .jcs4-image-crop img {
	top: 0;
	left: 0;
}


/* Theme, you can edit from here!
------------------------------------------------------------*/

/* Loading */
.jcs4-loading {
	z-index: 9999;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid rgba(255, 255, 255, .2);
	border-top-color: #fff;
	border-radius: 40px;
	-webkit-animation: loader 1250ms infinite linear;
	animation: loader 1250ms infinite linear;
}

@-webkit-keyframes loader {
	0% { 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% { 
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loader {
	0% { 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% { 
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* Controls */

.jcs4-controls {
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.jcs4.loading .jcs4-controls {
	display: none;
}

/* Previous and Next */

.jcs4-prev,
.jcs4-next {
	z-index: 3;
	cursor: pointer;
	position: absolute;
	top: 50%;
	display: block;
	width: 30px;
	height: 60px;
	margin-top: -30px;
	background: url(../img/arrows.png) no-repeat;
	opacity: 0;
	transition: all .3s;
}

.jcs4-prev {
	left: -30px;
	background-position: center -60px;
}

.jcs4-next {
	right: -30px;
	background-position: center 0;
}

.jcs4-prev:hover,
.jcs4-next:hover {
	opacity: .7 !important;
	transition: all .3s;
}

.jcs4:hover .jcs4-prev {
	left: 20px;
	opacity: 1;
	transition: all .3s;
}

.jcs4:hover .jcs4-next  {
	right: 20px;
	opacity: 1;
	transition: all .3s;
}

/* Pages */

.jcs4-pages {
	z-index: 3;
	position: absolute;
	bottom: -30px;
	left: 50%;
	opacity: 0;
	transition: all .3s;
	-webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}

.jcs4:hover .jcs4-pages {
	bottom: 20px;
	opacity: 1;
	transition: all .3s;
}

.jcs4-pages a {
	cursor: pointer;
	display: block;
	float: left;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background: white;
	border: 2px solid white;
	border-radius: 12px;
	font-size: 0;
	line-height: 1;
	text-indent: -999px;
	overflow: hidden;
}

.jcs4-pages a:hover {
	background: #ccc;
}

.jcs4-pages a.active {
	background: #333;
}