/*=============================================
SLIDE
=============================================*/
.slide-1{
	margin-top: 110px !important;
}

#demo{
	position:relative;
	margin:auto;
	width:100%;
	overflow: hidden;
	padding:0;
}

#demo ul{
	position:relative;
	left:0%;
	margin:auto;
	height:auto;
	width:400%;
	clear:both;
	display: table;
}

#demo ul li{
	position: relative;
	float:left;
	width:25%;
}	

#demo ul li img{
	width:100%;
}

#demo .slideOpcion1 img{
	position:absolute;
	opacity:1;
	/*top:15%;
	right:10%;
	width:45%;*/
}

#demo .slideOpcion1 .textosSlide{
	position:absolute;
	/*width:40%;
	top:20%;
	left:10%;*/
}


#demo .slideOpcion2 img{
	position:absolute;
	opacity:1;
	/*top:5%;
	left:15%;
	width:25%;*/
}

#demo .slideOpcion2 .textosSlide{
	position:absolute;
	text-align:right;
	/*width:40%;
	top:15%;
	right:15%;*/
}

#demo .slideOpciones h1{	
	text-transform: uppercase;
	font-family: 'Ubuntu Condensed', sans-serif;
	opacity:1;
	top:-10%;
	/*color:#333;*/
}

#demo .slideOpciones h2{
	text-transform: uppercase;
	font-family: 'Ubuntu Condensed', sans-serif;
	opacity:1;
	top:-10%;
	/*color:#777;*/
}

#demo .slideOpciones h3{
	text-transform: uppercase;
	font-family: 'Ubuntu Condensed', sans-serif;
	opacity:1;
	top:-10%;
	/*color:#888;*/
}

#demo .slideOpciones button{
	border:0px;
	margin-top:10px;
	
	opacity:1;
	top:-10%;
}

#demo .slideOpciones button:hover{
	background:black;
	color:white;
	border:0px;
}

#demo .slideOpciones button span{
	margin-left:10px;
}

/*=============================================
FLECHAS
=============================================*/


#demo .flechas{
	position:absolute;
	font-size:2em;
	color:white;
	cursor:pointer;
	z-index:1000;
}

#demo #retroceder{
	left:20px;
	opacity: 0;
	color: green;
}

#demo #avanzar{
	right:20px;
	opacity: 0;
	color: green;

}

#demo #retroceder:hover, #demo #avanzar:hover{
	color: white;
}

#demo #retroceder:active, #demo #avanzar:active{
	color: white;
	
}

/*=============================================
PAGINACIÓN
=============================================*/

#demo #paginacion{
	position: absolute;
	width:100%;
	margin:auto;
	text-align: center;
	line-height: 40px;
	font-size:12px;
	bottom:0px;
	left:0px;
	z-index:1;
	background:rgba(0,0,0,.05);
}

#demo #paginacion li{
	display:inline-block;
	margin:0px 5px;
	cursor:pointer;
	opacity:.5;
	color:white;
	text-shadow:0px 0px 5px #333;
}

#demo #paginacion li:first-child{
	opacity:1;
}

#btnSlide{
	width:150px;
	border:0px;
	font-size:25px;
	padding:2px;
}

#demo img{
        height:35vh;
       /* padding: 5px;
        border-radius: 20px;
        background: #f4eded;*/
    }
/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	 #demo img{
        height:90vh;
    }

	#demo #retroceder{
		top:37%;
		padding:40px 15px 40px 10px;
		font-size:22px;
	}

	#demo #avanzar{
		top:37%;
		padding:40px 10px 40px 15px;
		font-size:22px;
	}

	#demo .slideOpciones h1{			
		font-size:25px;	
		margin-top:5px;
		font-weight: 700;
	}

	#demo .slideOpciones h2{			
		font-size:18px;	
	}

	#demo .slideOpciones h3{	
		font-size:13px;	
	}

	#demo .slideOpciones button{
		padding:10px;
	}	

}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

	#demo #retroceder{
		top:35%;
		padding:40px 15px 40px 10px;
		font-size:18px;
	}

	#demo #avanzar{
		top:35%;
		padding:40px 10px 40px 15px;
		font-size:18px;
	}

	#demo .slideOpciones h1{			
		font-size:22px;	
		margin-top:5px;
		font-weight: 700;
	}
	
	#demo .slideOpciones h2{			
		font-size:15px;	
	}
	

	#demo .slideOpciones h3{	
		font-size:12px;	
	}
	

	#demo .slideOpciones button{
		padding:10px;
	}	

}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

	#demo #retroceder{
		top:35%;
		padding:30px 8px 30px 5px;
		font-size:14px;
	}

	#demo #avanzar{
		top:35%;
		padding:30px 5px 30px 8px;
		font-size:14px;
	}

	#demo .slideOpciones h1{			
		font-size:20px;	
		margin-top:5px;
	}

	#demo .slideOpciones h2{			
		font-size:14px;	
	}

	#demo .slideOpciones h3{	
		font-size:11px;	
	}

	#demo .slideOpciones button{
		padding:5px;
	}	

}
@media (max-width:767px) and (min-width:570px){

#demo .slideOpciones h1{			
		font-size:12px;	
		margin-top:5px;
	}
	

	#demo .slideOpciones h3{			
		display:none;	
	}

	#demo .slideOpciones h2{	
		font-size:10px;	
		margin-bottom:-5px;
	}

	#demo .slideOpciones button{
		padding:5px;
		font-size:8px;
	}	
	#demo .slideOpcion2 .textosSlide{
	  width:30%;
	}

	.slide-1{
	margin-top: 170px !important;
}

	}

/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width:569px){

	#demo #retroceder, #demo #avanzar{
		display:none;
	}

	#demo .slideOpciones h1{			
		font-size:9px;	
		margin-top:5px;
	}
	

	#demo .slideOpciones h3{			
		display:none;	
	}

	#demo .slideOpciones h2{	
		font-size:7px;	
		margin-bottom:-5px;
	}

	#demo .slideOpciones button{
		padding:5px;
		font-size:8px;
	}	
	#demo .slideOpcion2 .textosSlide{
	  width:30%;
	}

	.slide-1{
	margin-top: 170px !important;
}


	
}