@charset "UTF-8";

.rs_container {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	display: inline-block;
}
.rs_container ul {
	position: absolute;
	z-index: 3;
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	bottom: 0px;
}
.rs_container ul li {
	display: inline-block;
	list-style: none;
	width: 15px;
	height: 5px;
	font-size: 5px;
	margin: 5px;
	padding: 0px 5px;
	cursor: pointer;
	background-color: #FFFFFF;
	border-radius: 5px;
	text-indent: -5000px;
}
.rs_container ul li.rs_current {
	background-color: #55CCFF;/*#8B8B8B;*/
}
.rs_container img {
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
}

/* example 1 */
#example_primary,#example_secondary {
	position: absolute;
	z-index: 1;
}
.example_primary {
	top: 0px;
	left: 0px;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.example_secondary {
	top: -300px;
	left: 0px;
	z-index: 2;
}

/* example 2 */
#example2_primary,#example2_secondary {
	position: absolute;
	z-index: 1;
}
.example2_primary {
	top: 0px;
	left: 0px;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.example2_secondary {
	top: 0px;
	left: -700px;
	z-index: 2;
}


/* example 3 */
#example3_primary,#example3_secondary {
	position: absolute;
	z-index: 1;
}
.example3_primary {
	top: 0px;
	left: 0px;
	opacity: 1.0;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.example3_secondary {
	opacity: 0;
	z-index: 2;
}

/* example 4 */
#example4_primary,#example4_secondary {
	position: absolute;
	z-index: 1;
}
.example4_primary {
	top: 0px;
	left: 0px;
	opacity: 1.0;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.example4_secondary {
	opacity: 0;
	top: 150px;
	left: -350px;
	z-index: 2;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* example 5 */
#example5_primary,#example5_secondary {
	position: absolute;
	z-index: 1;
}
.example5_primary {
	top: 0px;
	left: 0px;
	opacity: 1.0;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.example5_secondary {
	opacity: 0;
	top: -150px;
	left: 350px;
	z-index: 2;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* example 6 */
div#example6.rs_container {
	width: 100%;
	height: auto;
	background-color: #F00;
}
div#example6.rs_container img {
	width: 100%;
	height: 100%;
	display: block;
}
#example6_primary,#example6_secondary {
	width: 100%;
	position: absolute;
	z-index: 1;
}
.example6_primary {
	top: 0px;
	left: 0px;
	opacity: 1.0;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.example6_secondary {
	opacity: 0;
	top: -100%;
	left: -100%;
	z-index: 2;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* ani */
#ani_primary,#ani_secondary {
	position: absolute;
	z-index: 1;
}
.ani_primary {
	top: 0px;
	left: 0px;
	opacity: 1.0;
	z-index: 2;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.ani_secondary {
	opacity: 0;
	z-index: 2;
}


@media screen and (max-width: 970px) {

	.rs_container img {
		width: 100%;
		height: auto;
		border-radius: 0px 0px 0px 0px;
	}
}