@charset "utf-8";



#slider {
	position: relative;
	width: 100%;
	margin: 2px auto 0;
	padding: 31.20% 0 0;
	background:#333;
	overflow:hidden;
}

#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5,#slider_next {
	display: none;
}
.slicenter{
	background:#666;
	z-index:2;
	position: absolute;
	bottom:0px;
	left: 50%;
	text-align: center;  
}
#lb1:before,#lb2:before,#lb3:before,#lb4:before,#lb5:before {
	color:#fff;
	font-size:1.5em;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.7);
	-moz-text-shadow: 0px 0px 5px rgba(0,0,0,0.7);
	-webkit-text-shadow: 0px 0px 5px rgba(0,0,0,0.7);
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
}

#lb1:before {
	position: absolute;
	bottom:5px;
	left: -60px;
	font-family: "dashicons";
	content: "\f159";
}
#lb2:before {
	position: absolute;
	bottom:5px;
	left: -20px;
	font-family: "dashicons";
	content: "\f159";
}
#lb3:before {
	position: absolute;
	bottom:5px;
	left: 20px;
	font-family: "dashicons";
	content: "\f159";
}
#lb4:before {
	position: absolute;
	bottom:5px;
	left: 60px;
	font-family: "dashicons";
	content: "\f159";
}

.slider_contents { 
	position: absolute;
	top:0;
	left: 0;
	width:100%;
	height:100%;
	animation:flowSlides 32s infinite;
}

.slider_content_1,.slider_content_2,.slider_content_3,.slider_content_4,.slider_content_5 {
	position: absolute;
	width:100%;
	height:auto;
	left:0px;
	top:0px;
}

.slider_content_1 {
	left: 0;
	height:100%;
}
.slider_content_2 {
	left: 100%;
	height:100%;
}
.slider_content_3 {
	left: 200%;
	height:100%;
}
.slider_content_4 {
	left: 300%;
	height:100%;
}

.slider_content_1:before,.slider_content_2:before,.slider_content_3:before,.slider_content_4:before,.slider_content_5:before {
	z-index:3;
	color:#fff;
	font-size:1.5em;
	padding:0px 0px;

}
.slider_content_1:before {
	position: absolute;
	bottom:5px;
	left: calc(50% - 60px);
	margin:-200px 100px 0 0;
	font-family: "dashicons";
	content: "\f159";
}
.slider_content_2:before {
	position: absolute;
	bottom:5px;
	left: calc(50% - 20px);
	font-family: "dashicons";
	content: "\f159";
}
.slider_content_3:before {
	position: absolute;
	bottom:5px;
	left: calc(50% + 20px);
	font-family: "dashicons";
	content: "\f159";
}
.slider_content_4:before {
	position: absolute;
	bottom:5px;
	left: calc(50% + 60px);
	font-family: "dashicons";
	content: "\f159";
}

#r1:checked ~ .slider_contents {
	animation:flowSlides1 32s infinite; animation-delay: 0s;
}
#r2:checked ~ .slider_contents {
	animation:flowSlides2 32s infinite; animation-delay:-8s;
}
#r3:checked ~ .slider_contents {
	animation:flowSlides3 32s infinite; animation-delay:-16s;
}
#r4:checked ~ .slider_contents {
	animation:flowSlides4 32s infinite; animation-delay:-24s;
}

#back1:checked ~ .slider_contents {
	animation:flowSlides4 32s infinite; animation-delay:-24s;
}
#back2:checked ~ .slider_contents {
	animation:flowSlides1 32s infinite; animation-delay: 0s;
}
#back3:checked ~ .slider_contents {
	animation:flowSlides2 32s infinite; animation-delay:-8s;
}
#back4:checked ~ .slider_contents {
	animation:flowSlides3 32s infinite; animation-delay:-16s;
}

#next1:checked ~ .slider_contents {
	animation:flowSlides2 32s infinite; animation-delay:-8s;
}
#next2:checked ~ .slider_contents {
	animation:flowSlides3 32s infinite; animation-delay:-16s;
}
#next3:checked ~ .slider_contents {
	animation:flowSlides4 32s infinite; animation-delay:-24s;
}
#next4:checked ~ .slider_contents {
	animation:flowSlides1 32s infinite; animation-delay:0s;
}

@keyframes flowSlides {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	23% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-100%; opacity:0; }
	27% { left:-100%; opacity:1; }
	48% { left:-100%; opacity:1; }
	50% { left:-100%; opacity:0; }
	50.01% { left:-200%; opacity:0; }
	52% { left:-200%; opacity:1; }
	73% { left:-200%; opacity:1; }
	75% { left:-200%; opacity:0; }
	75.01% { left:-300%; opacity:0; }
	77% { left:-300%; opacity:1; }
	98% { left:-300%; opacity:1; }
	100% { left:-300%; opacity:0; }
}
@keyframes flowSlides1 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	23% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-100%; opacity:0; }
	27% { left:-100%; opacity:1; }
	48% { left:-100%; opacity:1; }
	50% { left:-100%; opacity:0; }
	50.01% { left:-200%; opacity:0; }
	52% { left:-200%; opacity:1; }
	73% { left:-200%; opacity:1; }
	75% { left:-200%; opacity:0; }
	75.01% { left:-300%; opacity:0; }
	77% { left:-300%; opacity:1; }
	98% { left:-300%; opacity:1; }
	100% { left:-300%; opacity:0; }
}
@keyframes flowSlides2 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	23% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-100%; opacity:0; }
	27% { left:-100%; opacity:1; }
	48% { left:-100%; opacity:1; }
	50% { left:-100%; opacity:0; }
	50.01% { left:-200%; opacity:0; }
	52% { left:-200%; opacity:1; }
	73% { left:-200%; opacity:1; }
	75% { left:-200%; opacity:0; }
	75.01% { left:-300%; opacity:0; }
	77% { left:-300%; opacity:1; }
	98% { left:-300%; opacity:1; }
	100% { left:-300%; opacity:0; }
}
@keyframes flowSlides3 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	23% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-100%; opacity:0; }
	27% { left:-100%; opacity:1; }
	48% { left:-100%; opacity:1; }
	50% { left:-100%; opacity:0; }
	50.01% { left:-200%; opacity:0; }
	52% { left:-200%; opacity:1; }
	73% { left:-200%; opacity:1; }
	75% { left:-200%; opacity:0; }
	75.01% { left:-300%; opacity:0; }
	77% { left:-300%; opacity:1; }
	98% { left:-300%; opacity:1; }
	100% { left:-300%; opacity:0; }
}
@keyframes flowSlides4 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	23% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-100%; opacity:0; }
	27% { left:-100%; opacity:1; }
	48% { left:-100%; opacity:1; }
	50% { left:-100%; opacity:0; }
	50.01% { left:-200%; opacity:0; }
	52% { left:-200%; opacity:1; }
	73% { left:-200%; opacity:1; }
	75% { left:-200%; opacity:0; }
	75.01% { left:-300%; opacity:0; }
	77% { left:-300%; opacity:1; }
	98% { left:-300%; opacity:1; }
	100% { left:-300%; opacity:0; }
}

#slider_prev{
	position: absolute;
	top: 0;
	left: 0;
	padding:0 8% 0 0;
	height:100%;
	display: block;
	font-weight: bold;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=1 );
}
.slidbtn_l:before{
	position: absolute;
	top: 50%;
	left: 0;
	margin:-12px 0 0;
	font-family: "dashicons";
	content: "\f341";
}
#slider_next{
	position: absolute;
	top: 0;
	right: 0;
	padding:0 0 0 8%;
	height:100%;
	display: block;
	font-weight: bold;
	margin: 0px 0 0 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=1 );

}
.slidbtn_r:before{
	position: absolute;
	top: 50%;
	right: 0;
	margin:-12px 0 0;
	font-family: "dashicons";
	content: "\f345";
}
#slider_prev,#slider_next{
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	color:#fff;
}
#slider_prev:hover,#slider_next:hover{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.slidertxt {
	font-weight:bold;
	display: flex;
	align-items: center;
	justify-content: center;
	width:80%;
	height:100%;
	padding:0 10%;
	line-height:1.1em;
	background-position: center;
	background-repeat:repeat;
	background-size: 100% auto;
}
.slidertxt_shadow {
	text-shadow: 0px 0px 5px #000;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
}

.slider_contents a:hover {
	text-decoration: none;
}

@media screen and (max-width: 480px) {
#slider_prev,#slider_next{
	font-size:2em;
}
.slidertxt {
	font-size:1em;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
#slider_prev,#slider_next{
	font-size:3em;
}
.slidertxt {
	font-size:1.8em;
}
}


@media screen and (min-width: 769px) {
#slider_prev,#slider_next{
	font-size:4em;
}
.slidertxt {
	font-size:3em;
}
}