/*
slider
*/

.slider {
    position: relative;

	margin: 0;
    padding: 0;
    
    width: 100%;
}

.slider figure {    
    margin: 0;
    padding: 0;

	width: 100%;
    
	overflow: hidden;
}

.slider, .slider figure { height: 100%; }

.slider figure img {
    width: 100%;
	height: 100%;
    
    -o-object-fit: cover;
    object-fit: cover;
}

.slider > figure {
	visibility: hidden;
}

.slider > figure:first-child {
	visibility: visible;
}

.slider figure > figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.5);
	padding: 20px;
	color: #fff;
}

/* opciones */

.loopslider{
	position:relative;
	overflow:hidden;
}

.loopslider-body{
	position:relative;
}

.loopslider-item-wraper{
	display:inline-block;
}

.loopslider-fullscreen .loopslider-body,
.loopslider-fullscreen .loopslider-item-wraper,
.loopslider-fullscreen .loopslider-item-wraper > *{
	height: 100%;
}

.loopslider-pagination {
    position: absolute; right: 0; bottom: 20px; left: 0;
    
    text-align: center;
}

.loopslider-page-nav-item {
	display: inline-block;
    
	margin: 0 20px 0 0;
    padding: 0;

    width: 20px;
	height: 20px;

    border-radius: 6px;
    box-shadow: 0 0 10px 0 #000;
	background: #fff;

	cursor:pointer;
    
    -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;
}

.loopslider-page-nav-item:last-child { margin: 0 0 0 0; }

.loopslider-page-nav-item.loopslider-active { background:#CE1418; }
.loopslider-page-nav-item:hover { background: #666; }

.loopslider-nav-button{
	cursor: pointer;
    height: 81px;
    width: 81px;
	position: absolute;
	fill: transparent; /* default nav buttons color */
}

.loopslider:hover .loopslider-nav-button{
	fill: #999;
}

.loopslider:hover .loopslider-nav-button:hover{
    fill: #fff;
}

.loopslider-nav-button > svg {
	width: 100%;
	height: 100%;
	background: inherit;
	fill: inherit;
	pointer-events: none;
	transform: translateX(0px);
}

.loopslider-prev-button{
	left:0;
}

.loopslider-next-button{
	right:0;
}

.loopslider-parallax-container{
	background-size: 100% auto;
	background-repeat: no-repeat;
}

@media (pointer:coarse){
	.loopslider .loopslider-nav-button{
		fill: #999;
	}
}

@media all and (max-width: 480px){
	.loopslider-nav-button{
		height: 64px;
		width: 64px;
	}
}