/*===============================================================
  
  Programa    : estiloslider.css
  Descripción : Contiene los estilos CSS del carrusel principal 
                del sitio web Triotoy. 
  Correspe a: el slider de fotos del programa index.php
  Fecha Programación : Abril 25 de 2019.
  Fecha Puesta en la Nube: Abril 27 de 2019. 
  Versión     : 1.0.

================================================================*/

* {
	padding:0;
	margin:0;
}

body {
	background:rgb(255,255,255);
	font-family:Tahoma, Geneva, sans-serif;
	color:#07579C;
}

h2 {
	margin-top:0;
	padding-top:35px;
	padding-right: 15px;
	padding-bottom:8px;
	color:rgb(7,87,156);
}

p {
	padding-top:40px;
}

a {
	color:rgb(7,87,156);
}

input, textarea {
	font-family:tahoma;
}

.contenedor {
	width:80%;
	max-width:1000px;
	min-width:300px;
	margin:0 auto;
}

.contenedorcolor {
	background:#07579C;
	border: solid 1px darkblue;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
}

.pctablet {
	display:block;
}

.celular {
	display:none;
}

header {
	background:rgb(255,255,255);
	margin:10px 0;
	padding:5px 20px;
	border: solid 1px darkblue;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	overflow:hidden;
}

.logo {
	float:left;
	width:50%;
}

.endesarrollo {
	float:right;
	width:50%;
	text-align:right;
	margin-top:30px;
	/*font-weight:bold;*/
}

.mensaje {
	text-align:left;
	font-size:11px;
	color:rgb(255,255,255);
	margin-left:5%;
}

.texto {
	background:rgb(204,204,204);
	margin:20px 0;
	padding:20px;
	font-size:18px;
	border: solid 1px darkblue;
}


/*------------------- pagina de contactos --------------*/
.pagcontacto {
	display:none;
}

.pagcontacto:target {
	display:block;
	position:fixed;
	background:rgba(7,87,156,0.8);
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.formulario {
	width: 30%;
	height: 440px;
	margin-top:150px;
	background:rgb(255,255,255);
	border-radius:5px;
}

.formulario label {
	text-align:left;
	margin:10px 0;
	margin-left:50px;
	display:block;
	color:rgb(7,87,156);
	font-size:20px;
}

.ingreso {
	width:80%;
	height:20px;
	padding:0 10px 0 10px;
	border-radius:5px;
	background:rgb(57,121,176);
	color:rgb(255,255,255);
	font-size:16px;
	border:none;
}

#msjingreso {
	width:80%;
	padding:0 10px 0 10px;
	border-radius:5px;
	background:rgb(57,121,176);
	color:rgb(255,255,255);
	font-size:16px;
	border:none;
}

.ingreso:focus, #msjingreso:focus {
	background:rgb(7,87,156);;
	color:rgb(255,255,255);
}

.botoncorreo {
	display:block;
	width:100px;
	height:35px;
	margin-top:20px;
	border-radius:5px;
	background:rgb(7,87,156);
	color:rgb(255,255,255);
	border:none;
	font-size:20px;
	text-decoration:none;
}

.botoncorreo:hover {
	background:rgb(57,121,176);
	color:rgb(255,255,255);
	font-weight:bold;
	cursor:pointer;
}



/*------------------- pagina de contactosok --------------*/

.okcontacto {
	display:none;
}

.okcontacto:target {
	display:block;
	position:fixed;
	background:rgba(7,87,156,0.8);
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.gracias {
	width: 30%;
	height: 440px;
	margin-top:150px;
	background:rgb(255,255,255);
	border-radius:5px;
}

.botonok {
	display:block;
	width:100px;
	background:rgba(153 153 153);
	border-radius:5px;
	height:35px;
	margin-top:10px;
	padding-top:10px;	
	color:rgba(7,87,156);
	border:none;
	font-size:18px;
	text-decoration:none;
	text-align:center;
	margin:auto;
}

.botonok:hover {
	background:rgb(102,102,102);
	font-weight:bold;
	cursor:pointer;
}

.botonok a {
	text-decoration:none;
	color:rgb(7,87,156);
}

.botonok a:hover {
	color:rgb(255,255,255);
}


/*-------------------- footer ---------------------*/
footer {
	background:rgb(255,255,255);
	margin:10px 0;
	padding:20px;
	border: solid 1px darkblue;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
}


/*------------------- slider para pc o tablet --------------*/

.contenido-slider {
	width:100%;   
	height:300px;
	perspective:1000px;   
	perspective-origin:center;
	position:relative;
	margin:5% auto;
}

.slider {
	width:16%;    
	height:auto;
	margin-left:42%;
	margin-top:90px;
	position:absolute;
	animation: rotar 40s infinite linear;
	transform-style:preserve-3d;
}

.slider:hover {
	animation-play-state:paused;
	cursor:pointer;
}

.slider figure {
	width:100%;     
	height:100%;    
	position:absolute;
}

.slider figure:nth-child(0) {
	transform:rotateY(0deg) translateZ(500px);}   
.slider figure:nth-child(1) {
	transform:rotateY(20deg) translateZ(500px);}
.slider figure:nth-child(2) {
	transform:rotateY(40deg) translateZ(500px);}
.slider figure:nth-child(3) {
	transform:rotateY(60deg) translateZ(500px);}
.slider figure:nth-child(4) {
	transform:rotateY(80deg) translateZ(500px);}
.slider figure:nth-child(5) {
	transform:rotateY(100deg) translateZ(500px);}
.slider figure:nth-child(6) {
	transform:rotateY(120deg) translateZ(500px);}
.slider figure:nth-child(7) {
	transform:rotateY(140deg) translateZ(500px);}
.slider figure:nth-child(8) {
	transform:rotateY(160deg) translateZ(500px);}
.slider figure:nth-child(9) {
	transform:rotateY(180deg) translateZ(500px);}
.slider figure:nth-child(10) {
	transform:rotateY(200deg) translateZ(500px);}
.slider figure:nth-child(11) {
	transform:rotateY(220deg) translateZ(500px);}
.slider figure:nth-child(12) {
	transform:rotateY(240deg) translateZ(500px);}
.slider figure:nth-child(13) {
	transform:rotateY(260deg) translateZ(500px);}
.slider figure:nth-child(14) {
	transform:rotateY(280deg) translateZ(500px);}
.slider figure:nth-child(15) {
	transform:rotateY(300deg) translateZ(500px);}
.slider figure:nth-child(16) {
	transform:rotateY(320deg) translateZ(500px);}
.slider figure:nth-child(17) {
	transform:rotateY(340deg) translateZ(500px);}
.slider figure:nth-child(18) {
	transform:rotateY(360deg) translateZ(500px);}

.slider img {
	width:100%;     
		transition:all 5s;
}    

.slider img:hover {
	transform:scale(1.5);    
	/*transition:all 300ms;*/
}   

@keyframes rotar {
	0%{                                                      /* de izuierda */
		transform:rotateY(0deg);
	} 100% {                                                 /* a derecha */
		transform:rotateY(360deg);
	}
}


/*------------------- slider para celulares --------------*/
.sliderauto {
    width: 100%;
    overflow: hidden;
}

.sliderauto ul {
    padding: 0;
    display: flex;
    width: 1800%;
    
    animation: tiempo;
    animation-duration:  19s;
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
}

.sliderauto li {
    width: 100%;
    list-style: none;
}

.sliderauto img {
    width: 100%;
}

@keyframes tiempo {
    0% {margin-left: 0; opacity: 1;}
    5% {margin-letf: 0; opacity: 0.7;}
    
    6% {margin-left: -100%; opacity: 1;}
    10% {margin-left: -100%; opacity: 0.7;}
    
    11% {margin-left: -200%; opacity: 1;}
    15% {margin-left: -200%; opacity: 0.7;}
    
    16% {margin-left: -300%; opacity: 1;}
    20% {margin-left: -300%; opacity: 0.7;}
    
    21% {margin-left: -400%; opacity: 1;}
    25% {margin-left: -400%; opacity: 0.7;}
    
    26% {margin-left: -500%; opacity: 1;}
    30% {margin-left: -500%; opacity: 0.7;}
    
    31% {margin-left: -600%; opacity: 1;}
    35% {margin-left: -600%; opacity: 0.7;}
    
    36% {margin-left: -700%; opacity: 1;}
    40% {margin-left: -700%; opacity: 0.7;}
    
    41% {margin-left: -800%; opacity: 1;}
    45% {margin-left: -800%; opacity: 0.7;}
    
    46% {margin-left: -900%; opacity: 1;}
    50% {margin-left: -900%; opacity: 0.7;}
    
    51% {margin-left: -1000%; opacity: 1;}
    55% {margin-left: -1000%; opacity: 0.7;}
    
    56% {margin-left: -1100%; opacity: 1;}
    61% {margin-left: -1100%; opacity: 0.7;}
    
    62% {margin-left: -1200%; opacity: 1;}
    66% {margin-left: -1200%; opacity: 0.7;}
    
    67% {margin-left: -1300%; opacity: 1;}
    72% {margin-left: -1300%; opacity: 0.7;}
    
    73% {margin-left: -1400%; opacity: 1;}
    77% {margin-left: -1400%; opacity: 0.7;}
    
    78% {margin-left: -1500%; opacity: 1;}
    82% {margin-left: -1500%; opacity: 0.7;}
    
    83% {margin-left: -1600%; opacity: 1;}
    86% {margin-left: -1600%; opacity: 0.7;}
    
    87% {margin-left: -1700%; opacity: 1;}
    93% {margin-left: -1700%; opacity: 0.7;}
    
    94% {margin-left: -1800%; opacity: 1;}
    100% {margin-left: -1800%; opacity: 0.7;}
}


/*================== tamaños de dispositivos ================*/

@media screen and (max-width:1000px) {
	.slider {
		width:20%;
		}
	/*header {
			background:orange;
		}*/
	.formulario {
		width:60%;
	}
	.gracias {
		width:60%;
	}
}

@media screen and (max-width:800px) {
	.slider {
		width:24%;
		}
	/*header {
			background:pink;
		}*/
	.formulario {
		width:60%;
	}
	.gracias {
		width:60%;
	}
}

@media screen and (max-width:640px) {
	.slider {
		width:30%;
		}
	/*header {
			background:yellow;
		}*/
	.formulario {
		width:80%;
		margin-top:5px;
	}
	.gracias {
		width:80%;
		margin-top:5px;
	}
	.pctablet {
		display:none;
	}
	.celular {
		display:block;
	}
}

@media screen and (max-width:500px) {
	.slider {
		width:38%;
		}
	/*header {
			background:green;
		}*/
	.formulario {
		width:90%;
		margin-top:5px;
	}
	.gracias {
		width:90%;
		margin-top:5px;
	}
	.pctablet {
		display:none;
	}
	.celular {
		display:block;
	}
}

@media screen and (max-width:400px) {
	.slider {
		width:45%;
		}
	/*header {
			background:red;
		}*/
	.formulario {
		width:90%;
		margin-top:5px;
	}
	.gracias {
		width:90%;
		margin-top:5px;
	}
	.pctablet {
		display:none;
	}
	.celular {
		display:block;
	}
}
