﻿* {
font-family: Helvetica; 
/* font-family: Helvetica, Helvetica, sans-serif; */
}

      img {
        display: inline;
        margin: 0 auto;
        max-width: 100%;
      }

/*a:hover DEBE ir después a:linky a:visiteden la definición de CSS para que sea efectivo! a:active¡DEBE ir después a:hoveren la definición de CSS para ser efectivo! Los nombres de pseudoclases no distinguen entre mayúsculas y minúsculas.*/
.aAzul16:link    {font-family: Helvetica; font-size: 16pt; color: #a4c7db;}
.aAzul16:visited {font-family: Helvetica; font-size: 16pt; color: #a4c7db;}
.aAzul16:hover   {font-family: Helvetica; font-size: 16pt; color: #ffffff;}
.aAzul16:active  {font-family: Helvetica; font-size: 16pt; color: #a4c7db;}

.aAzul10:link    {font-family: Helvetica; font-size: 10pt; color: #a4c7db;}
.aAzul10:visited {font-family: Helvetica; font-size: 10pt; color: #a4c7db;}
.aAzul10:hover   {font-family: Helvetica; font-size: 10pt; color: #ffffff;}
.aAzul10:active  {font-family: Helvetica; font-size: 10pt; color: #a4c7db;}

.aAzulServicios10:link    {font-family: Helvetica; font-size: 10pt; color: #417586;}
.aAzulServicios10:visited {font-family: Helvetica; font-size: 10pt; color: #417586;}
.aAzulServicios10:hover   {font-family: Helvetica; font-size: 10pt; color: #417586;}
.aAzulServicios10:active  {font-family: Helvetica; font-size: 10pt; color: #417586;}


.pAzul12{
font-family: Helvetica;
 color: #a4c7db;
 font-size: 12px;
}
.pAzul20{
font-family: Helvetica;
 color: #a4c7db;
 font-size: 20px;
}
.pAzul20B{
font-family: Helvetica; 
 color: #a4c7db;
 font-size: 20px;
 font-weight: bold;
}
.pAzul55{
font-family: Helvetica; 
 color: #a4c7db;
 font-size: 55px;
 font-weight: bold;
}
.pAzul75{
font-family: Helvetica; 
 color: #a4c7db;
 font-size: 55px;
 font-weight: bold;
}
.pAzul100{
font-family: Helvetica; 
 color: #a4c7db;
 font-size: 100px;
 font-weight: bold;
margin: 0pt;  
padding: 0pt;  
top: 0px; 
}


.pAzulObscuro12{
font-family: Helvetica;
 color: #4d92b9;
 font-size: 12px;
}
.pAzulObscuro16{
font-family: Helvetica;
 color: #004670;
 font-size: 16px;
}
.pAzulOscuro20{
font-family: Helvetica;
 color: #004670;
 font-size: 20px;
}
.pAzulOscuroSomos20{
font-family: Helvetica;
 color: #004670;
 font-size: 20px;
 letter-spacing: 2px;
 line-height: 1.3;
}
.pAzulObscuro55{
font-family: Helvetica; 
 color: #004670;
 font-size: 55px;
 font-weight: bold;
}

.pAzulMuyOscuro20{
font-family: Helvetica;
 color: #002338;
 font-size: 20px;
}
.pAzulMuyOscuro20B{
font-family: Helvetica;
 color: #002338;
 font-size: 20px;
 font-weight: bold;
}
.pAzulMuyOscuro20C{
font-family: Helvetica;
 color: #002338;
 font-size: 20px;
 text-align: center;
/* justify-content: center;*/
}
.pAzulMuyObscuro55{
font-family: Helvetica; 
 color: #002338;
 font-size: 55px;
 font-weight: bold;
}

.pBlanco16{
font-family: Helvetica;
 color: #ffffff;
 font-size: 16px;
}
.pBlanco20{
font-family: Helvetica;
 color: #ffffff;
 font-size: 20px;
}
.pBlanco20B{
font-family: Helvetica; 
 color: #ffffff;
 font-size: 20px;
 font-weight: bold;
}
.pBlancoSomos20{
font-family: Helvetica;
 color: #ffffff;
 font-size: 20px;
 letter-spacing: 2px;
 line-height: 1.3;
}
.pBlanco55{
font-family: Helvetica;
 color: #ffffff;
 font-size: 55px;
 font-weight: bold
}

.pRojo20{
font-family: Helvetica; 
 color: #ff0000;
 font-size: 20px;
 font-weight: bold;
}

.pRojo100{
font-family: Helvetica; 
 color: #ff0000;
 font-size: 100px;
 font-weight: bold;
}




.centro {vertical-align: middle; text-align: center; }

body {
background-color: #FFFFFF; 	
margin: 0px;
/*margin-left: 0px;
margin-top: 0px;  */
font-family: Helvetica; 
font-size: 10pt;
}



.tdder {
text-align: right;
}
.tdizq {
text-align: left;
}
.tdMargen0{
padding: 0pt;
vertical-align: top;
}
.tdMargen10{
padding: 10pt;
vertical-align: top;
}
.tdMargen30{
padding: 30pt;
vertical-align: top;
}

table.menu td a {
font-family: Helvetica;
text-decoration: none;
color: #ff0000;
/*font-size: 20px;*/
font-size: 1.0vw;/*vw significa viewport units, es decir que depende del ancho de la ventana del navegador*/
border: none;
padding: 0pt;
top: 0px;
}

table.menu a:hover{
color: #90d2f0;
}
table.menu a:active{
color: #90d2f0;
}



form {
/*font-family: Helvetica;*/
/*text-decoration: none;*/
/*color: #ffffff;*/
/*font-size: 20px;*/
/*font-size: 1.0vw;*//*vw significa viewport units, es decir que depende del ancho de la ventana del navegador*/
border: none;
padding: 0pt;
top: 0px;
margin: 0pt;  
}

label.cotiza {
font-family: Helvetica;
color: #a4c7db;
font-size: 14px;
}

input.cotiza {
font-family: Helvetica;
color: #a4c7db;
font-size: 14px;
border: 1px solid #a4c7db;
background: #002338;
padding: 1vw;
}

textarea.cotiza {
font-family: Helvetica;
color: #a4c7db;
font-size: 14px;
border: 1px solid #a4c7db;
background: #002338;
padding: 1vw;
}


label.servicio {
font-family: Helvetica;
color: #417586;
font-size: 14px;
font-weight:bold
}

input.servicio {
	font-family: Helvetica;
	color: #417586;
	font-size: 14px; /*	border-bottom: 10px;*/ /*border-bottom: 1px solid #417586;*/; /*	border background: #004670;*/;
	padding: 1vw;
/*    width : 20vw;*/
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 2px solid;
	border-bottom-color: #417586;
}

textarea.servicio {
font-family: Helvetica;
color: #417586;
font-size: 14px;
border: 1px solid #417586;
/*background: #004670;*/
padding: 1vw;
/*width : 30vw;
height : 10vw;
box-sizing: border-box;*/
}


.pacceso {
font-family: Helvetica;
color: #000000;
font-size: 20px;
font-weight: bold;
}

label.acceso {
font-family: Helvetica;
color: #000000;
font-size: 14px;
}

input.acceso {
	font-family: Helvetica;
	color: #000000;
	font-size: 14px; /*	border-bottom: 10px;*/ /*border-bottom: 1px solid #417586;*/; /*	border background: #004670;*/;
	padding: 1vw;
/*    width : 20vw;*/
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 2px solid;
	border-bottom-color: #000000;
}

.b_acceso {
    padding:8px 40px;
    	font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;	 
	color: #FFFFFF;
	border-radius:6px;
    border: 0px;
	background-color: #000000;
	}

.tdacceso_s_i{
/*border: none;*/
background-color: #ffffff;
border: 10px solid #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}

xinput.redondeado {
font-family: Helvetica;  
font-size: 10pt;  
color: #020d2c;  
background-color: #f2f6f8;

padding: 3px 3px;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;

-moz-border-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border: 1px solid #020d2c;
}

textarea.redondeado {
font-family: Helvetica;  
font-size: 10pt;  
color: #020d2c;  
background-color: #f2f6f8;

padding: 3px 3px;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;

-moz-border-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border: 1px solid #020d2c;
}



#encabezado {
	display: block;
	/*color: #FFF;*/
/*	background-image: url(../imagenes/encabezado_zyanya.png);*/
	width: 100%;
    max-height:1000px; /*alto del div*/
/*    height:158px; alto del div*/
/*	text-align: center;*/
	position: fixed;
/*	position: absolute; */
	left:0px; /*A la derecha deje un espacio de 0px*/
	right:0px; /*A la izquierda deje un espacio de 0px*/
	top:0px; /*Abajo deje un espacio de 0px*/
/*	bottom:500px; Abajo deje un espacio de 0px*/
	z-index:100;
	box-shadow: 1px 1px 15px #000;
/*	border-radius: 0px;*/
}

#contenido {
	display: block;
	width: 100%;
	position: relative;
	left:0px; /*A la derecha deje un espacio de 0px*/
	right:0px; /*A la izquierda deje un espacio de 0px*/
/*	left: 10px; *//*A la izquierda deje un espacio de 0px*/
/*	right: 10px; *//*A la derecha deje un espacio de 0px*/
	top: 90px; /*Arriba deje un espacio de 0px*/
/*    bottom: 270px;*/ /*Abajo deje un espacio de 0px*/
/*	z-index:-1;*/
/*	background-color: #ff0000;*/
/*color: #000;*/
/*	background-image: url(../imagenes/encabezado_zyanya.png);*/
/*    height:70px;*/ /*alto del div*/
/*	text-align: center;*/
/*		position: fixed; */
/*	box-shadow: 1px 1px 15px #000;
	border-radius: 0px;*/
}

#pie {
	display: block;
	position: relative;
	width: 100%;
/*	text-align: center;*/
/*	vertical-align: middle; */
	left:0px; /*A la derecha deje un espacio de 0px*/
	right:0px; /*A la izquierda deje un espacio de 0px*/
	top: 90px; /*Arriba deje un espacio de 0px*/
	}

fieldset { 
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
/*  border: 2px groove (internal value);*/
}



.div_contenedor_video{
position: relative;
/*border: 2px groove red;*/
padding_bottom:56.25%;/*esta es la proporción de las dimensiones del video*/
/*padding-top:30px;*/
height:600px;/*para ??*/
overflow:hidden; /*para que la caja se adpte al video*/
}

.div_contenedor_video iframe{/*para ponerle estilo al iframe que etá DENTRO del div_contenedor_video*/
position: absolute;
/*border: 2px groove blue;*/
top: 0;
left:0;
height:99%;
width: 99%;
border: none;
}

video{
position: relative;
border: 1px groove grey;
height:98%;/*para ??*/
width: 98%;
/*overflow:hidden;*/ /*para que la caja se adpte al video*/
}

/*////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////*/

.slider{
/* según el tamaño de las imágenes*/
  width: 600px;
  height: 450px;
/*  border-radius: 10px;*/
/*border: 2px solid #ff0000;*/
overflow: hidden;
/*max-width: 100%;*/
}

.slides{
/*  width: 600%;*/
  width: 800%;
  height: 450px;
  display: flex;
}

.slides input{
  display: none;
}

.slide{
/*  width: 20%;*/
  width: 12.5%;
  transition: 2s;
}

.slide img{
  width: 600px;
  height: 450px;
}

/*css for manual slide navigation*/

.navigation-manual{
  position: absolute;
/*  width: 700px;*/
  width: 600px;
/*  margin-top: -40px;*/
  margin-top: -15px;
  display: flex;
  justify-content: center;
}
.manual-btn{
  border: 2px solid #a4c7db;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}
.manual-btn:not(:last-child){
  margin-right: 40px;
}
.manual-btn:hover{
  background: #a4c7db;
}

#radio1:checked ~ .first{
  margin-left: 0;
}
#radio2:checked ~ .first{
  margin-left: -12.5%;
}
#radio3:checked ~ .first{
  margin-left: -25%;
}
#radio4:checked ~ .first{
  margin-left: -37.5%;
}
#radio5:checked ~ .first{
  margin-left: -50%;
}
#radio6:checked ~ .first{
  margin-left: -62.5%;
}
#radio7:checked ~ .first{
  margin-left: -75%;
}
#radio8:checked ~ .first{
  margin-left: -87.5%;
}

/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 600px;
  justify-content: center;
/*  margin-top: 260px;*/
  margin-top: 435px;
}

.navigation-auto div{
  border: 2px solid #a4c7db;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
  background: #a4c7db;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
  background: #a4c7db;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
  background: #a4c7db;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
  background: #a4c7db;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
  background: #a4c7db;
}
#radio6:checked ~ .navigation-auto .auto-btn6{
  background: #a4c7db;
}
#radio7:checked ~ .navigation-auto .auto-btn7{
  background: #a4c7db;
}
#radio8:checked ~ .navigation-auto .auto-btn8{
  background: #a4c7db;
}

