/*=============================================
SLIDE
=============================================*/



#slide{
	position:relative;
	margin:auto;
	width:100%;
	overflow: hidden;
	padding:0;
	border-radius: 6px;
}

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

#slide dul dil{
	position: relative;
	float:left;
	width:25%;
}	

#slide dul dil img{
	width:100%;
}

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

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


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

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

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

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

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

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

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

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

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

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

#slide #retroceder{
	background:#D8D8D8;
	left:0;
	opacity: 0;
	width: 40px;
	border-radius: 6px;
}

#slide #avanzar{
	background:#D8D8D8;
	right:0;
	opacity: 0;
	width: 40px;
	border-radius: 6px;
}

#slide #retroceder:hover, #slide #avanzar:hover{
	background:#B7B7B7;
	opacity: 0.3;
}

#slide #retroceder:active, #slide #avanzar:active{
	background:#B7B7B7;
	opacity: 0.3;
}

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

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

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

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

#btnSlide{
	width:60px;
	border:0px;
	font-size:10px;
	padding:2px;
	border-radius: 0px 0px 10px 10px;
}


/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	#slide{			
		width:90%;
		
	}

	#slide #retroceder{
		top:37%;
		padding:20px 10px 20px 10px;
		font-size:20px;
	}

	#slide #avanzar{
		top:37%;
		padding:20px 10px 20px 10px;
		font-size:20px;
	}

	#slide .slideOpciones h1{			
		font-size:45px;	
		margin-top:0px;
	}

	#slide .slideOpciones h2{	
		font-size:22px;	
	}

	#slide .slideOpciones h3{	
		font-size:28px;	
	}

	#slide .slideOpciones button{
		padding:8px;
	}	

}

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

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

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

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

	#slide .slideOpciones h1{			
		font-size:35px;	
		margin-top:5px;
	}

	#slide .slideOpciones h2{			
		font-size:30px;	
	}

	#slide .slideOpciones h3{	
		font-size:20px;	
	}

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

}

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

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

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

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

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

	#slide .slideOpciones h2{			
		font-size:20px;	
	}

	#slide .slideOpciones h3{	
		font-size:15px;	
	}

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

}

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

@media (max-width:767px){

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

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

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

	#slide .slideOpciones h3{	
		display:none;	
	}

	#slide .slideOpciones button{
		padding:5px;
		font-size:10px;
	}	
	#btnSlide{
		background: #FFFFFF ;
	}
	
}