/* RATSLIDER styles */

[ratslider=containerslider]{
	width:100%;
	height:100%;
	position:relative;
	overflow: hidden;
}
[ratslider=containerslider] .next{
	position: absolute;
	top:40%;
	right: 2em;
	font-size: 2em;
	line-height: 100%;

}
[ratslider=containerslider] .prev{
	z-index: 100;
	position: absolute;
	top:40%;
	left: 2em;
	font-size: 2em;
	line-height: 100%;
}

[ratslider=containerslider] .handler{
	cursor: pointer;
	-webkit-touch-callout: none;
  	-webkit-user-select: none;
   	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  	user-select: none;
	padding: 0.2em 0.5em;
	background: white;
	border-radius: 25px;
	color:gray;
	opacity: 0.4;
}
[ratslider=containerslider] .handler:active{
	background: gray;
	color:white;
}
[ratslider=containerslider] .dotHandler{
	position: absolute;
	bottom: 0;
	left:0;
	right:0;
}

[ratslider=containerslider] .dotHandler span{
	display: inline-block;
	margin: 6px;
	width:5px;
	height:5px;
	border-radius:25px;
	background: gray;
	border:white 1px solid;
	opacity: 0.5;
	cursor:pointer;
}

[ratslider=containerslider] .dotHandler .ratslider-dot-active{
		background: black;
}

[ratslider$=slid]{
	 position: absolute;
	 top:0;
	 bottom: 0;
	 left:0;
	 right: 0;
	 display: none;
}
[ratslider*=current-slid]{
	 display: block;
}
[ratslider=foward-slid]{
	display: block;
	 animation-name: out-foward;
	 animation-duration: 0.7s;
	 animation-fill-mode: forwards;
	 animation-timing-function:ease-in;
}
[ratslider=current-slid-foward-slid]{
	 animation-name: in-foward;
	 animation-duration: 0.7s;
	 animation-fill-mode: forwards;
	 animation-timing-function:ease-in;
}
/* next */
[ratslider=reverse-slid]{
	display: block;
	 animation-name: out-reverse;
	 animation-duration: 0.7s;
	 animation-fill-mode: forwards;
	 animation-timing-function:ease-in;
}
[ratslider=current-slid-reverse-slid]{
	 animation-name: in-reverse;
	 animation-duration: 0.7s;
	 animation-fill-mode: forwards;
	 animation-timing-function:ease-in;
}
@-webkit-keyframes out-foward{
	from {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
	to {
		-webkit-transform:translateX(100%);
		        transform:translateX(100%);
	}
}
@keyframes out-foward{
	from {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
	to {
		-webkit-transform:translateX(100%);
		        transform:translateX(100%);
	}
}
@-webkit-keyframes in-foward{
	from {
		-webkit-transform:translateX(-100%);
		        transform:translateX(-100%);
	}
	to {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
}
@keyframes in-foward{
	from {
		-webkit-transform:translateX(-100%);
		        transform:translateX(-100%);
	}
	to {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
}
@-webkit-keyframes out-reverse{
	from {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
	to {
		-webkit-transform:translateX(-100%);
		        transform:translateX(-100%);
	}
}
@keyframes out-reverse{
	from {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
	to {
		-webkit-transform:translateX(-100%);
		        transform:translateX(-100%);
	}
}
@-webkit-keyframes in-reverse{
	from {
		-webkit-transform:translateX(100%);
		        transform:translateX(100%);
	}
	to {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
}
@keyframes in-reverse{
	from {
		-webkit-transform:translateX(100%);
		        transform:translateX(100%);
	}
	to {
		-webkit-transform:translateX(0%);
		        transform:translateX(0%);
	}
}