/*=========================================
Slide
=========================================*/
#slide{
	position: relative;
	margin: auto;
	width: 100%;
	overflow: hidden;
	padding: 0;
	padding-top: 15px;
}
#slide ul{
	position: relative;
	left: 0%;
	margin: auto;
	height: auto;
	width: 400%;
	clear: both;
	display: table;
}
#slide ul li{
	position: relative;
	float: left;
	width: 25%;
}
#slide ul li img{
	width: 100%;
}
#slide .slideOpcion1 img{
	position: absolute;
	opacity: 1;
}
#slide .slideOpcion1 .textosSlide{
	position: absolute;
}
#slide .slideOpcion2 img{
	position: absolute;
	opacity: 1;
}
#slide .slideOpcion2 .textosSlide{
	position: absolute;
	text-align: right;
	width: 40%;
	top:20%;
	right: 15%;
}
#slide .slideOpciones h1{
	text-transform: uppercase;
	font-size: 35px;
	font-family: "Roboto thin", sans-serif;
	opacity:1;
	top:-10%;
}
#slide .slideOpciones h2{
	text-transform: uppercase;
	font-size: 25px;
	font-family: "Roboto", sans-serif;
	opacity:1;
	top:-10%;
}
#slide .slideOpciones h3{
	text-transform: uppercase;
	font-size: 20px;
	font-family: "Roboto", sans-serif;
	opacity:1;
	top:-10%;
	color:#888;
}
.slide-button{
	border: 0px;
	margin-top: 10px;
	padding: 9px ;
	opacity: 1;
	top:-10%;
	background-image: -webkit-linear-gradient(#3c4691, #282d62);
	border-radius: 11px;
	box-shadow: 0px 1px 3px #757575;
	color: #ffffff;
}
.slide-button:hover{
	background: #191e22;
	color: white;
	border: 0px; 
}
/*=========================================
flechas
=========================================*/

#slide .flechas{
	position:absolute;
	font-size:2em;
	color:white;
	cursor:pointer;
	z-index:2;
}
#slide #retroceder{
	background: #2B2B2B;
	left:0;
	opacity: 0;
	border-radius:0px 10px 10px 0px;
}
#slide #avanzar{
	background: #2B2B2B;
	right:0;
	opacity: 0;
	border-radius:10px 0px 0px 10px;
}
#slide #retroceder:hover, #slide #avanzar:hover{
	background:#585858;
}
#slide #retroceder:active, #slide #avanzar:active{
	background:#585858;
}
/*=========================================
paginacion 
=========================================*/
#slide #paginacion{
	position: absolute;
	width:100%;
	margin:auto;
	text-align: center;
	line-height: 40px;
	font-size:14px;
	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:.4;
	color:#3D4252;
	text-shadow:0px 0px 5px #fff;
}

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

#btnSlide{
	width:150px;
	border:0px;
	font-size:25px;
	padding:2px;
}
/*=============================================
Escritorio grande de 1366 en adelante
=============================================*/
@media (min-width:1200px){
	#slide #retroceder{
		top:37%;
		padding:40px 15px 40px 10px;
		font-size:22px;
	}
	#slide #avanzar{
		top:37%;
		padding:40px 10px 40px 15px;
		font-size:22px;
	}
	#slide .slideOpciones h1{			
		font-size:50px;	
		margin-top:5px;
	}
	#slide .slideOpciones h2{			
		font-size:20px;	
	}
	#slide .slideOpciones h3{	
		font-size:30px;	
	}
	#slide .slideOpciones button{
		padding:10px;
	}	
}
/*=============================================
Escritorio mediano o tablet horizontal 
=============================================*/
@media (max-width:1199px) and (min-width:992px){
	#slide .slideOpciones h1{
	font-size: 35px;
	margin-top: 5px;
	}
	#slide .slideOpciones h2{
	font-size: 30px;
	}
	#slide .slideOpciones h3{
	font-size: 20px;
	}
	#slide .slideOpciones button{
	margin-top: 10px;
	padding: 10px;
	}
	#slide #retroceder{
	padding: 40px 15px 40px 10px;
	font-size: 18px;
	top:35%;
	}
	#slide #avanzar{
	padding: 40px 10px 40px 15px;
	top:35%;
	font-size: 18px;
	}
}
/*=============================================
Escritorio pequeño o tablet vertical
=============================================*/
@media (max-width:991px) and (min-width:768px){
	#slide .slideOpciones h1{
		font-size: 20px;
		margin-top: 0px;
		margin-bottom: -5px;
	}
	#slide .slideOpciones h2{
		font-size: 17px;
		margin-bottom: -10px;
	}
	#slide .slideOpciones h3{
		font-size: 15px;
		margin-bottom: -5px;
	}
	#slide .slideOpciones button{
		margin-top: 15px;
		font-size: 15px;
		padding: 5px;
	}
	#slide #retroceder{
	padding: 20px 5px 20px 10px;
	font-size: 22px;
	top:37%;
	}
	#slide #avanzar{
	padding: 20px 5px 20px 10px;
	top:37%;
	font-size: 22px;
	}
}
/*=============================================
Escritorio celular
=============================================*/
@media (max-width:767px){
	#slide #retroceder, #slide #avanzar{
	display: none;
	}
	#slide .slideOpciones h1{
		font-size: 20px;
		margin-top: 5px;
		margin-bottom: -15px;
	}
	#slide .slideOpciones h2{
		display:none;
	}
	#slide .slideOpciones h3{
		font-size: 15px;
		margin-bottom: -5px;
	}
	#slide .slideOpciones button{
		margin-top: 10px;
		font-size: 10px;
		padding: 5px;
	}
}