﻿
* {
	padding: 0;
	margin: 0;
	
}



body{
	
	
	background: #F4A460 /*SandyBrown*/	
	
	}	

#tamaño{
	/*position: relative;*/
	width: 100%;
	/*max-width: 1250px;*/
	
	margin-top: 50px;
	margin-bottom: 100px;
	margin-left: auto;
    margin-right: auto;
	font-family: 'Droid Sans', sans-serif;
	
	/*overflow: hidden;*/
	
	/*background:  #8B4513; /*SaddleBrown*/
	background: #F4A460 /*SandyBrown*/
	/*box-sizing: border-box;*/
}



.conlui{
	width: 200px;
	height: 50px;
	/*display: inline;*/
	margin: 0 auto;
	/*background: green;*/
	font-size: 17; 
	color: white; 
	padding-left: 5%;
}





.rectangulo{
  position: relative;
   width: 1000px;
   height: 500px;
  /* background-color: black;*/
   border-radius: 15px;
   margin: 0 auto;
   overflow: hidden;
   z-index: 0;
   
}




.imagen{
	position: absolute;
	
	width: 100%;
    height: 100%;
	
	visibility: hidden;
	
	
	opacity: 0;
	transition: visibility 3s, opacity 3s;

}

.imagen img{
	position: relative;
	width:100%;
	height: 100%;
	border-radius: 15px;
	left: 50%;
	transform: translateX(-50%);
    
}



.rectangulo a{
	position: absolute;
	width: 45px;
	/*height: 400px;*/
	border-radius: 50%;
	background-color: rgba(31, 31, 31, 0.5);
	text-decoration: none;
	color: white;
	text-align: center;
	font-size: 36px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transition: opacity 1s;
	opacity: 0;
	
}






.rectangulo:hover a{
	color: #ffffff;
	cursor: default;
	opacity: 1;
	
	/*left: 0%;*/
}

.rectangulo:hover .siguiente{
	/*transform: translateX(10%);*/
	/*right:3%;*/
	/*-moz-transition: -moz-opacity 0.5s ease-in-out 0.1s;
	-webkit-transition: -webkit-opacity 0.5s ease-in-out 0.1s;*/
}


.rectangulo:hover .anterior{
	/*transform: translateX(10%);*/
	/*right:3%;*/
	/*-moz-transition: -moz-opacity 0.5s ease-in-out 0.1s;
	-webkit-transition: -webkit-opacity 0.5s ease-in-out 0.1s;*/
}


.texto{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 85%;
	color: #CD5C5C;/*IndianRed*/
	font-weight: bold;
}

.texto2{
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 17px;
	top: 10%;
	color: 	#FFD700;/*Gold*/
	font-weight: bold;
}






.anterior{
	left: 0%;
	
}


.siguiente {
	/*-webkit-transform: translateX(500px);*/
	right:0%;
	
}


.actual{
	visibility: visible;
	opacity: 1;
	transition: visibility 3s, opacity 3s;
}





.puntos{
	position: absolute;
	top:93%;
	width: 100%;
	text-align: center;
}

.punto{
	display: inline-block;
	width:16px;
	height: 16px;
	background-color: white;
	border-radius: 50px;
	margin-right: 5px;
}

.punto:hover{
	cursor: pointer;
	background-color: brown;
}





.activo{
	background-color: brown;
}





@media screen and (max-width: 500px){
	.rectangulo{
  position: relative;
   width: 400px;
   height: 250px;
  /* background-color: black;*/
   border-radius: 15px;
   margin: 0 auto;
   overflow: hidden;
   z-index: 0;
   
}


/*

.imagen{
	position: absolute;
	
	width: 100%;
    height: 100%;
	
	visibility: hidden;
	
	
	opacity: 0;
	transition: visibility 3s, opacity 3s;

}

.imagen img{
	position: relative;
	width:400px;
	height: 200px;
	border-radius: 15px;
	left: 50%;
	transform: translateX(-50%);
    
}
*/


.rectangulo a{
	position: absolute;
	width: 35px;
	
	border-radius: 50%;
	background-color: rgba(31, 31, 31, 0.5);
	text-decoration: none;
	color: white;
	text-align: center;
	font-size: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transition: opacity 1s;
	opacity: 0;
	
}






.rectangulo:hover a{
	color: #ffffff;
	cursor: default;
	opacity: 1;
	
	/*left: 0%;*/
}

.rectangulo:hover .siguiente{
	/*transform: translateX(10%);*/
	/*right:3%;*/
	/*-moz-transition: -moz-opacity 0.5s ease-in-out 0.1s;
	-webkit-transition: -webkit-opacity 0.5s ease-in-out 0.1s;*/
}


.rectangulo:hover .anterior{
	/*transform: translateX(10%);*/
	/*right:3%;*/
	/*-moz-transition: -moz-opacity 0.5s ease-in-out 0.1s;
	-webkit-transition: -webkit-opacity 0.5s ease-in-out 0.1s;*/
}


.texto{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 85%;
	color: #CD5C5C;/*IndianRed*/
	font-weight: bold;
}

.texto2{
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 17px;
	top: 10%;
	color: 	#FFD700;/*Gold*/
	font-weight: bold;
}

	
	
}
