@import url('estilos.-loading.css');
@import url('estilos.css');
@import url('estilos_slider.css');
@import url('estilos_menu.css');
@import url('estilos-testimonial.css');

/*===================================
ESTILOS GLOBALES, EL RESETEO DE ESTILOS
 ====================================*/


 
 *{
 	margin:0;
 	padding:0;
 	/*list-style: none;*/
 	/*text-decoration: none;*/
 	font-family: sans-serif;
 	box-sizing: border-box;/*este estilo lo que hace es que el relleno y bordes que apliquemos ya esten incluidos en el alto y ancho de los elementos esto para que a la hora de ordenar no ayan problemas y no se modifiquen los anchos y altos que pongamos*/
 	-webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
 } 

 
/*estilos para el doby*/
  body
  {
    overflow-y:hidden;
    background-color:#fff; 
    font-family:Futura, 'Trebuchet MS', Arial, sans-serif; 
  }

  h2{
    text-align: center;
    font-size: 2.5rem !important;
  }
  .titulo-Servicios,.titulo-testimonio{
    color:#FA5C06;
    padding: 35px 0 25px 0;
  }
/*estilos para los botones de las redes sociales*/
.social-bar
{
  position: fixed;
  right: 0;
  top:65%;
  font-size:1.3rem;
  display: flex;
  -webkit-display: flex;
  -webkit-flex-direction: column;
  direction: column;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  z-index:1000;
}   

.icon-sociales
{
  color:white;
  text-decoration:none; 
  padding:.4rem;
  display:flex;
  -webkit-display:flex;
  transition:all .5s;  
  -webkit-transition:all .5s;  

}

.icon-sociales:first-child
{
  border-radius:1rem 0 0 0;
}

.icon-sociales:last-child
{
  border-radius:0 0 0 1rem;
}

.fab:nth-child(1)
{
  background-color:#2E406E; 
}

/*.fab:nth-child(2)
{
  background-color:#339DC5; 
}*/

.fab:nth-child(2)
{
  background-color:#E83028; 
}

.fab:nth-child(4)
{
  background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);; 
}

.icon-sociales:hover
{
  padding-right:2rem; 
  border-radius:1rem 0 0 1rem;
  box-shadow:0 0 .5rem rgba(0,0,0,0.42);
}

.flaticon
{
  position:relative; 
  width:31px;
  height:33px;  
  transition:all .5s;  
  -webkit-transition:all .5s; 
  background-color:#23035F; 
}

.flaticon img
{
  position:absolute;
  left:0;
  top:0; 
  width:100%;
  height:33px 
}

.flaticon:hover
{
  padding-right:3rem; 
  border-radius:2rem 0 0 2rem;
  box-shadow:0 0 .5rem rgba(0,0,0,0.42);

}

.flaticon img:hover 
{
  /*padding-right:1rem; */
  border-radius:2rem 0 0 2rem;
}



/*==============estilos para el efecto de copos de nieve========================*/
#capa {
position: fixed; 
top: -10vh; left: 0; 
height: 120vh; 
width: 100vw; 
pointer-events: none; 
z-index:5000;
}


#capa .nieve { 
position: absolute; 
top: 0; left: 0; 
width: 2.5vmin; height: 2.5vmin; 
background: radial-gradient(circle, white 50%, transparent 70%); 
  z-index:4000;
}
/* fin copos de nieve*/





/*===============estilos para todas las secciones de la pagina============================*/
.sec
{
  position:relative;
  width:100%;
  top:82px;
  /*padding:8px;  */
}





/*==================esitlos para el contenedor prinsipal(padre de todo) del slider ======================*/
.seccion1{
  margin-bottom:10px;  
  height:450px; 
  /*background-color:red; */
  top:-10px;
  }/**/



/*===================contenedor prinsipal de la seccion 3 donde estan ubicados los servicios==============*/
.seccion2{
  height:auto;
  /*background-color:green; */
 }/**/


 /*=====================================Seccion 4 donde estan los productos ==============================*/
.seccion3{
  height:auto;
  background-size:cover; 
  background-repeat:no-repeat;  
  background-position:top right;
  padding:0 0 30px 10px;
  }/**/




/*=============seccion 3 parte de servicios que ofrece=================*/

/*Contenedor prinsipal de la seccion de ofrece*/
.content-ofrece
{
  position:relative; 
  /*background-color:skyblue;*/
  width:85%;/**/
  margin:auto; /**/
  top:20px; /**/
  display:flex;/**/
  flex-wrap:wrap;/**/
  justify-content:space-between;/**/
}

/*clase para animacion de cada uno de los cuadros que ofrece*/
.anima-scroll
{
  opacity:0; 

}


/*contenedor de cada opcion de servicios que ofrece(done estan los imagenes)*/
.ofrece
{
  /* background-color:pink; */
  width:32%;/**/
  height:300px;/**/
  margin-top:100px;/**/   
  margin-bottom:70px; /**/
  text-align:center; /**/
  
}
/*clase que se agrega cuando se hace scroll para la animacion que aparescan las cajas de ofrece al hacer escroll en la pagina*/
.animate
{
  animation:arriba 3s forwards;/**/
}

/*contenido donde esta el icono y la descripcion de cada ofrece*/
.contenido-ofrece
{ 
  width:100%; /**/
  /*background-color:green;  */
  margin-top:20px;/**/ 
  color:#333;/**/
}

/*estilos solo para los iconos, osea el primer hijo del .contenido-ofrece */
.contenido-ofrece:nth-child(1)
{
  font-size:100px; /**/
}

/*Ojo cambiar nombre de la clase y agregar las demas imagenes y quitar todos los iconos estilos solo para las images que estan en lugar de iconos de ofrece */
.pru
{
  /*background-color:red; */
  width: 100px;/**/
  height:100px; /**/
}

/*efecto hover al ponerse en cima de los icnos*/
.contenido-ofrece:nth-child(1):hover
{
  /*border:solid 1px purple;*/
  color:#F2780C;/**/
  transform:scale(1.1);  /**/
  transition:all 1.5s; /**/
}

/*=============fin de seccion3 parte de ofrece*============/




/*============================Seccion 4 Productos que ofrece=============================*/

/*contenendor prinsipal de la seccion de prductos*/
.content-servicios
{
  /*background-color:blue; */
  position:relative; 
  transform: translateY(90px);
  width:80vw;
  height:auto;
  margin:auto;  
  display:flex;
  flex-wrap:wrap;  
  justify-content:space-around;  
}


/*estilos para el contenedor del titulo de la seccion*/
.content-titulo-servi 
{
  /*background-color:red; */
  height:auto;
  width:100%;  
  color:#FA5C06;
  text-align:center;
}


/*estilos para el titulo en si*/
.titulo-servicios
{
  /*background-color:green; */
  margin-bottom:60px; 
}
/*estilos para el contenedor de la caja donde salen los paquetes la caja sola y alta */
.servicio-solo
{
   position: relative;
  height:600px;
  width:400px; 
  margin: auto; 
  /*background-color: red; */

}

/*estilos para la imagen que se ve de fondo de la caja de paquetes*/
.servicio-solo-img
{
  position: relative;
  width:100%; 
  height:580px;
  margin:auto; 
  background-image: url(../img/servi1.jpg);  
  background-repeat:no-repeat;
  background-size:100% 625px; 
  background-position:center;
}


/*Contenedor del boton de planes*/
.planes{
  /* width:220px; */
  display: inline-block;
  padding:10px 25px;
  background-color:#ab0f8e;
  cursor:pointer;  
  border-radius:10px;   
  margin:auto; 
  position:relative;
  bottom:70px; 
  font-size:1.5em; 
  /* font-family:'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif;  */
  font-family: neon;
  color: #ffffff;

 transition: all .2s;
   }
   .planes:hover{
    padding:11px 26px;
    box-shadow: 2px 1px 5px  1px #f2f2f2;
   }

  
/*estilos para el contenedor de donde estan las demas cajas de productos*/
.servicio-grupo
{
  /*background-color:black;*/
  height:auto; 
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;  
}
.servicios
{
  position:relative; 
  width:45%; 
  height:280px;
  margin-bottom:20px; 
  box-sizing:border-box; 
  background-repeat:no-repeat;
  background-size:cover;
 
}


/*estilos para cada caja en especifico para asignarles las imagenes de fondo*/
.servicios:nth-child(1)
{
  background-image:url(../img/servi.jpg); 
}


.servicios:nth-child(2)
{
  background-image:url(../img/Redes_1.original.jpg); 
}



.servicios:nth-child(3)
{
  background-image:url(../img/telas.jpg); 
}



.servicios:nth-child(4)
{
  background-image:url(../img/servi2.jpg); 

}



/* contenedor de las sombras que van en las imagenes de donde esta las 4 cajas*/
.sombra-servicio
{
  position:absolute;
  width:100%;
  height:100%;   
  color:white; 
}

.sombra
{

  background: -moz-radial-gradient(center, ellipse cover, rgba(255,0,0,0.7) 0%, rgba(0,0,0,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,0,0,0.7)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
  background:-webkit-radial-gradient(center, ellipse cover, rgba(255,0,0,0.7) 0%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(255,0,0,0.7) 0%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,0,0,0.7) 0%, rgba(0,0,0,1) 100%); /* ie10+ */
  background:radial-gradient(ellipse at center, rgba(255,0,0,0.7) 0%, rgba(0,0,0,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000000',GradientType=1 ); /* ie6-9 */
  height:580px; 
  
}

.sombra-1
{
  /*background-color:rgba(46, 134, 193,.75); */
  background: -moz-radial-gradient(center, ellipse cover, rgba(128,0,128,0.7) 0%, rgba(0,0,0,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(128,0,128,.07)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(128,0,128,0.7) 0%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(128,0,128,0.7) 0%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(128,0,128,0.7) 0%, rgba(0,0,0,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(128,0,128,0.7) 0%, rgba(0,0,0,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800080', endColorstr='#000000',GradientType=1 ); /* ie6-9 */
  
}

/*estilos para cada una de los otras cajas  donde esta las 4 de productos*/
.sombra-2
{
  /*background-color:rgba(3,4,2,0.7); */
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,150,0.7) 0%, rgba(33,33,33,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,150,0.7)), color-stop(100%, rgba(33,33,33,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,150,0.7) 0%, rgba(33,33,33,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,150,0.7) 0%, rgba(33,33,33,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,150,0.7) 0%, rgba(33,33,33,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(0,0,150,0.7) 0%, rgba(33,33,33,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000096', endColorstr='#212121',GradientType=1 ); /* ie6-9 */
}

/*en el hover se les aplica la animacion alas sombras*/
/*.sombra-2:hover{
   animation:lado-uno 2s forwards;
}*/

.sombra-3
{
  /*background-color:rgba(211,84,0,0.8);*/
  background: -moz-radial-gradient(center, ellipse cover, rgba(184,92,0,0.7) 0%, rgba(255,128,0,0.7) 35%, rgba(184,92,0,0.7) 75%, rgba(184,92,0,0.7) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184,92,0,1)), color-stop(35%, rgba(255,128,0,1)), color-stop(75%, rgba(184,92,0,1)), color-stop(100%, rgba(184,92,0,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(184,92,0,0.7) 0%, rgba(255,128,0,0.7) 35%, rgba(184,92,0,0.7) 75%, rgba(184,92,0,0.7) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(184,92,0,0.7) 0%, rgba(255,128,0,0.7) 35%, rgba(184,92,0,0.7) 75%, rgba(184,92,0,0.7) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(184,92,0,0.7) 0%, rgba(255,128,0,0.7) 35%, rgba(184,92,0,0.7) 75%, rgba(184,92,0,0.7) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(184,92,0,0.7) 0%, rgba(255,128,0,0.7) 35%, rgba(184,92,0,0.7) 75%, rgba(184,92,0,0.7) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b85c00', endColorstr='#B85C00',GradientType=0 ); /* ie6-9 */
}
.sombra-4
{
  /*background-color:rgba(3,43,2,0.7);*/
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,128,0,0.7) 0%, rgba(0,0,0,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,128,0,0.7)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(0,128,0,0.7) 0%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,128,0,0.7) 0%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,128,0,0.7) 0%, rgba(0,0,0,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(0,128,0,0.7) 0%, rgba(0,0,0,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#000000',GradientType=1 ); /* ie6-9 */
}

/*contenedor donde va el contendido de cada una de las cajas*/
.contenido-servicios
{
  position:absolute; 
  top:20%; 
  text-align:center; 
  /*background-color:red; */
  width:100%; 
  height:auto; 

}

/*estilos para la etiquta p donde va la descripcion del cada producto*/
.parrafo-servicios{
  position:relative; 
  /*background-color:blue;*/
  font-size:1.1em;  
  text-align:center;
  bottom:20px; 

}

.parrafo-servicios-solo
{
  position:relative; 
  /*background-color:blue;*/
  font-size:1.3em; 
  bottom:80px; 
}

/*titulo de las cajas de servicios*/
.subtitulos-servicios
{
  /*background-color:yellow; */
  /*font-weight:normal; */
  font-size:1.6em; 
  text-transform:uppercase; 
  margin-top:15px;
}
.subtitulos-servicios-solo
{
  position:relative; 
  /*background-color:green; */
  font-size:2.4em; 
  text-transform:uppercase; 
  margin-top:-90px;
  bottom:50px; 
}


/*ojo agregar esta clase a los titulos de las demas cajas y cambiar el nombre de la clase*/
.ps1
{
  /*background-color:red; */
  margin-top:40px;
  font-weight:700;
  font-size:1.7em; 
  /*left:10px; */
  text-align:center; 
  text-transform:uppercase; 
}

.ps2
{
  /*background-color:green;*/
  text-align:left; 
  top:-10px;  
}

.ps3
{
  /*background-color:red;*/
  top:10px; 
  font-size:1.3em; 
  text-align:center; 
}

.ps4
{
  /*background-color:blue;*/
  top:10px; 
  font-size:1.3em;  
  text-align:center; 
}



/*iconos*/
.icono-servicios
{
  /*font-size:em; */
  width:80px;
  height:80px;  
  margin-top:-50px; 
}

.icono-servicios-solo
{
  position:relative; 
  width:100px;
  height:100px;  
  top:-190px; 
  /*background-color:orange; */
}

/* estilos para el contenedor del contenido de la caja de planes */
.ser-solo
{
  /*background-color:red; */
  top:48%;


}


/*estilos para la ventana modal que va en planes*/


/*contendor de la ventana modal*/
.modal{
  position:fixed; 
  z-index:99999; 
  width:100vw;
  height:100vh; 
  bottom:0; 
  left:0;
  padding:0; 
  background-color:rgba(0,0,0,0.9);  
  transform:scale(0); 
  opacity:0; 
  text-align: center;
  overflow-y: auto;
}

/*contenedor donde va el contenido de la modal*/

  .content-paq-residenciales/*conteedor secundario deonde iran las paquetes residenciales*/
{
  position:relative;
  /*background-color:red;*/
  width:100%;
  height:auto;   
  color:white;  
}


/*contenedor del titulo de paquetes residenciales*/
.titulo-paq-residencial
{
  /*background-color:green;*/
  text-transform:uppercase;  
  /* font-family:Baskerville, 'Baskerville old face', 'Hoefler Text', Garamond,  'Times New Roman', serif; */
  font-weight: 700;
  font-size:2.6em;  
}

.icon-subtitulo-recidencial
{
  position:relative; 
  left:15px; 
}

/*contenedor padre de las caracteristicas de las tablas de precios*/
.content-tablas-precio
{
  position:relative; 
  /* background-color:blue; */
  width:100%;
  height:auto; 
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   

}

.content-tablas:hover
{
  /* -webkit-transform:scale(1.02);
  -ms-transform:scale(1.02);
  -o-transform:scale(1.02);
  -moz-transform:scale(1.02);
  transform:scale(1.02); */
}
/**/
.content-tablas
{
  position:relative; 
  margin-left:10px;
  margin-right:10px; 
  margin-bottom:300px;
  width:350px; 
  height:400px; 
  text-align:center;
  -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
  box-shadow:0 0 15px rgba(0,0,0,0.4);
  -webkit-transition:all 0.25s ease;
  -o-transition:all 0.25s ease;
  transition:all 0.25s ease;    
}

.content-titulo-tabla
{
  position:absolute; 
  width:100%; 
  top:0;
  display:flex; 
  background-color:orange; 
  /* font-family:'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif;  */
  /*background-color:red; */
}



.titulo-prinsipal-tabla
{
  width:80%;
  position:relative;
  top:-15px; 
  text-transform: uppercase;
  font-size:2em;
  /*background-color:red;  */
}

.icon-titulo-tabla-recidencial
{
  /*background-color:pink;  */
  width:20%; 
  position:relative;
  margin-top:20px; 
  font-size:2em; 
  font-weight:bold;
}

.content-megas-tabla
{
  position:relative;
  top:80px; 
  background-color:#212F3C;
  padding:25px;  
  margin-bottom:50px; 
  font-size:2.5em;
  font-weight:bold; 
  /* font-family:'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif;  */
}



.caracteristicas-tabla 
{
   padding:20px 0; 
}

.caracteristicas-tabla p
{
  position:relative; 
  float: right;
  font-weight:700; 

}

.content-caracteristicas-tabla
{
  list-style:none; 
  position:absolute; 
  width:100%;
  height:auto; 
  background-color:white; 
  color:#333;
  padding:25px 0;
  font-size:1.5em;
  /* font-family:'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif;  */
  font-weight:800; 
  margin-bottom:10px; 

}
.caracteristicas-tabla:nth-child(2n)
{
  background:#F0f0f0
}

.ilimitdo
{
  position:relative;
  top:-50px; 
  background:#e95846;
  color:#FFF;
  font-size:18px;
  font-weight:400;
  -webkit-border-radius:38px;
  -moz-border-radius:38px;
  border-radius:38px;
  padding:5px 7px;  
  right:40px; 
}

.des-ilimitada
{
  position:relative;
  top:-25px; 
  left:-30px; 
  padding:7px; 
}
.soporte24{
  position:relative; 
  /*padding:10px; */
  /* font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; */
  left:-35px;
  top:-50px;
  top:-50px; 
  background:#e95846;
  color:#FFF;
  font-size:18px;
  font-weight:400;
  -webkit-border-radius:38px;
  -moz-border-radius:38px;
  border-radius:38px;
  padding:5px 7px;  
  right:40px; 
}

.corporativo-soporte-24
{
  /*background-color:blue; */
  left:0;
  top:-15px; 
  font-size:0.7em; 
}

.soporte-personalizado
{
  font-size:22px; 
  /*background-color:pink; */
}

.soporte24 sup
{
  position:relative;
  top:-2px; 
  font-size:18px; 
}
.icon-check
{
  position:relative;
  left:-1px;  
  font-size:22px; 
  font-weight:bold;
  color:#03943A;
}



.content-paq-corporativo
{
  /*background-color:#4756;*/
  position:relative;
  top:50px;   
}

.btn-precios-consultar
{
  display:flex; 
  /*justify-content:space-between; */
  position:absolute; 
  background-color:white; 
  top:550px;
  width:100%;
  height:70px; 
  color:#2b2727;
}
.precio-tabla
{
  /*background-color:yellow; */
  position:relative;
  width:50%; 
  font-size:2.2em; 
  bottom:25px; 
  font-weight:700; 
  display:table; 
  /* font-family:'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif;  */
}

.btn-precios-consultar
{
  /*background-color:green;*/
  width:100%;  
}
.precio-tabla sup{
  font-size:0.7em; 
}

.content-btn-accion
{
  position:relative; 
  width:50%;
  /* background-color:pink; */
}

.btn-accion
{
  position:relative; 
  background-color:tomato;
  display:table;
  padding:8px 22px;
  border-radius:10px;
  margin:6px 34px;  
  text-decoration:none;
  color:white; 
  font-size:1.2em; 
  transition: all .2s;
}

.btn-accion:hover{
  padding:9px 23px;
  box-shadow: 2px 1px 5px  1px #250000;
}



.titulo-coporativo
{
  background-color:#790D86 
}

.contnt-btn-corporativo
{
  position:relative; 
  /*background-color:red; */
  top:448px;
}

.btn-corporativo
{
  position:absolute; 
  /*background-color:blue;*/
  /*left:215px;*/
}







/*animacion para mostar la modal*/
.mostrar-modal
{
  animation:modal 2s forwards; 
}

/*animacion para cerrar la modal*/
.cerrar_modal
{
  animation:cerrar-modal 1s forwards;
}

/*contenedor del boton cerrar del modal*/
.cerrar-mo
{
  position:absolute; 
  right:90px;
  top:5px; 
  cursor: pointer;
  color:#fff;
  background-color:tomato;
  padding:3px;  
  height:42px; 
  width:40px; 
  font-size:1.8em; 
  border-radius:5px; 
  z-index:600px 
  
}



/*fin de la seccion 3 de productos*/







/*==============quienes somos seccion 4=================================*/

/*contenedor de la seccion de quienes somos*/
.seccion4{
  width:99%; 
  display:flex; 
  flex-wrap: wrap;
  height: auto;
 background: -moz-linear-gradient(270deg, rgba(240,147,7,1) 0%, rgba(240,147,7,1) 27%, rgba(255,169,10,1) 49%, rgba(255,169,10,1) 50%, rgba(248,159,8,1) 59%, rgba(240,147,7,1) 71%, rgba(255,156,8,1) 99%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240,147,7,1)), color-stop(27%, rgba(240,147,7,1)), color-stop(49%, rgba(255,169,10,1)), color-stop(50%, rgba(255,169,10,1)), color-stop(59%, rgba(248,159,8,1)), color-stop(71%, rgba(240,147,7,1)), color-stop(99%, rgba(255,156,8,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(240,147,7,1) 0%, rgba(240,147,7,1) 27%, rgba(255,169,10,1) 49%, rgba(255,169,10,1) 50%, rgba(248,159,8,1) 59%, rgba(240,147,7,1) 71%, rgba(255,156,8,1) 99%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(240,147,7,1) 0%, rgba(240,147,7,1) 27%, rgba(255,169,10,1) 49%, rgba(255,169,10,1) 50%, rgba(248,159,8,1) 59%, rgba(240,147,7,1) 71%, rgba(255,156,8,1) 99%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(240,147,7,1) 0%, rgba(240,147,7,1) 27%, rgba(255,169,10,1) 49%, rgba(255,169,10,1) 50%, rgba(248,159,8,1) 59%, rgba(240,147,7,1) 71%, rgba(255,156,8,1) 99%); /* ie10+ */
background: linear-gradient(180deg, rgba(240,147,7,1) 0%, rgba(240,147,7,1) 27%, rgba(255,169,10,1) 49%, rgba(255,169,10,1) 50%, rgba(248,159,8,1) 59%, rgba(240,147,7,1) 71%, rgba(255,156,8,1) 99%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09307', endColorstr='#ff9c08',GradientType=0 ); /* ie6-9 */

}


/*contendedor deonde va la imagen de quienes somos*/
.img-nosotros
{
  position:relative; 
  width:25vw;
  height:450px;
  left:70px;
  top:200px;
  border-radius:15px; 
  background-image:url(../img/secretaria.jpg);   
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;  
  /*background-color:red; */
}

/*contenedor de la partde donde va la infoemacion de quienes somos*/
.nosotros
{
  width:65vw ; 
  height:auto;
  margin-left:100px; 
  display:flex;
  flex-direction:column;
  align-items:center; 
  /*margin-top:40px;*/
  /*background-color:red; */
}

/*estilos para todos los contenedores, histori,vision,mision y valores*/
.about
{
  width:90%;
  height:auto;
  margin-bottom:10px;  
  text-align:center; 
 
  font-size: 20px;
  line-height: 25px;  
  color:white;
  text-align:left; 
}


/*estilos para los titulos del contenido de quienes somos*/
.title-historia,.title-vision,.title-mision,.title-valores,.titulo-nosotros{
  text-align:center ;
  color:white;
}


/*==========cierre de quienes somos==========*/




/*=============seccion6 footer==============*/

/*Contenedor padre de la seccion del footer*/
.seccion6
{
  position:relative; 
  background-color:#222;
  color:white;
  width:99%; 
  height:auto;
  top:150px;
}


/*contenedor del lo que va dentro del footer footer*/
.container-footer
{
  position:relative; 
  width:100%;
  height:auto; 
  /*background-color:green;  */
  display:flex; 
  flex-wrap:wrap; 

 
}


/* contenedor de la parte de informacion de contactanos*/
.footer-direccion
{
  position:relative; 
  /*width:50%;*/
  /*background-color:black;*/
  height:auto;   
}

/*contenedor de la parte donde se muestra la direccion y tlefonos*/
.encuentranos
{
  text-align:center; 
  width:100%; 
  position:relative; 
  /*background-color:orange; */
  display:table;
  
}


.iconos-footer
{
  /*background-color:pink;*/
  display:flex;  
}

.icon-footer
{
  top:12px;  
  margin-right:40px; 
  margin-bottom:40px; 
  height:45px; 
  font-size:2.2em; 
  position:relative; 
  /*background-color:blue; */
  
}

/*estilo para el contenido de informacion del contacto*/
.contenido-encuentranos
{
  font-size:18px; 
  color:white;
}





/*contenedor de donde esta el mapa de como llegar*/
.mapa-encuentranos
{
  position:relative;
  top:10px;
  width:100%;  
  /*background-color: black;*/
}

.mapa-encuentranos iframe
{
  position:relative; 
 height:250px; 
  width: 100%;
  bottom:10px; 
}


/*================formulario de contacto=====================*/

/*contenedor de donde va el formulario de contacto*/
.footer-contacto
{
  position:relative; 
  width:50%;
  /*background-color:red;*/
  height:auto;  
  margin:auto; 
  /*border-radius:2%; */

}

/*estilos pra el formulario*/
.formulario
{
 /*background-color:green; */
  position:relative; 
  /*border-radius:2%;  */
  height:auto;
  width:90%;  
  margin:auto; 
  /*top:30px; */
}

/*estilos para el contenedor de contacto*/
.container-contacto
{
  position:relative; 
 /*background-color:red; */
  display: flex;
  flex-direction: column;
  justify-content:center;
  height:auto; 
  border-top-right-radius:10px;
  border-bottom-left-radius: 10px;
  border-top-left-radius:10px; 
  border-bottom-right-radius:10px;
  /*bottom:10px; */
}


/*titulo del formulario*/
.titulo-contacto
{
  /*background-color:orange; */
  /*border-radius:2%; */
  text-align: center;
  width:94%; 
  padding:20px;  

}


/*contenedor de nombre y telefono los input del formulario*/
.container-nombre,.container-telefono
{
  position:relative; 
  margin-top:20px; 
  margin-bottom:70px; 
}

/*contenedor del textarea del formulario*/
.container-consulta
{
  margin-top:70px; 
  margin-bottom:30px; 
  /*background-color:blue; */
}
/*contenedor de donde va el telefono y email*/
.container-telefono-email

{
  display:flex; 
  width:90%;
  
}
/*esstilos para los input de email y telefono*/
#email,#telefono
{ 
  margin-left:5px; 
  margin-right:5px;
}
/*estilos para todos los input del formulario*/
input
{
  padding:12px;
  width:100%;  
  border-top-right-radius:10px;
  border-bottom-left-radius: 10px;
  border-top-left-radius:10px; 
  border-bottom-right-radius:10px; 
  outline: none;
}
/*estilos para el textarea*/
textarea
{
  border-top-right-radius:10px;
  border-bottom-left-radius: 10px;
  border-top-left-radius:10px; 
  border-bottom-right-radius:10px; 
  min-width:100%; 
  height:150px; 
  max-height:200px;
  outline: none;

}
/*estilos para cuando se seleccionen los input*/
input:focus
{
  box-shadow: 0.5px 0.5px 2px 2px purple; 
  padding:18px; 

}
/*estilos para cuando se seleccionen el textarea*/
textarea:focus
{
  box-shadow: 0.5px 0.5px 2px 2px purple; 
  padding:5px;
}
/*estilos para el boton de enviar*/
button
{
  padding:15px;
  width:200px;  
  border-top-right-radius:10px;
  border-bottom-left-radius: 10px;
  border-top-left-radius:10px; 
  border-bottom-right-radius:10px; 
  background-color:orange; 
    outline: none;

}

.resultado
{
  color:red;
  font-size:2em; 
}
/*estilos para el contenedor del boton*/
.container-btn-enviar
{
  margin-bottom:100px;
}
/*estilos para la ultima parte donde salen los derechos de autor*/
.derechos
{
  position: absolute;
  background-color:#111;
  bottom:-10px;
  text-align:center;
  width:100%; 
  /*top:10px;    */
}

/*seccion del chat*/
  .chat-container
  {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 340px;
  height:auto;
  position: fixed;
  bottom: 0;
  right: 15px;
  z-index: 2000;
  transition:all 2s; 
}



.chat-button{
  width: 100%;
  margin: 0;
  cursor: pointer;
  user-select: none;
  padding:1px;
  height:40px; 
  background-color: #337AB7;
  text-align:center; 
  color: #fff;
}

.chat-content {
  margin: 0;
  padding: 0;
  display: none;
  background-color: #fff;
  height:490px; 
  width:340px; 
}

.btn-cerrar-chat
{
  background-color:#337AB7;
  color:white; 
  position:absolute;
  bottom:100px;
  right:0;
  padding:6px 12px; 
  font-size:1.4em; 
  border-radius:50%;
  cursor:pointer;
  transition:all 1s;  
  display:none; 
}

.abrir_btn_close_chat
{
  display:block; 
}

.chat-content iframe
{
  height:100%; 
  width:100%; 
  overflow:hidden; 
}

.titulo-chat
{
position:relative;
top:-20px; 
font-size:18px; 
/*background-color:red; */
}

.icon-chat
{
  position:relative;
  left:10px;  
  font-size:1.8em; 
  /*background-color:green; */
}


/*fin seccion del chat*/



/*===========================Seccion de Animaciones Keyframes===========================================*/


/*================animacion para la ventana modal===========================*/

/*animacion para abrir la modal*/
@keyframes modal{
  to{
     /*transform:translateY(0);*/
     opacity:1; 
     transform:scale(1); 
   }
}
/*animacion para cerrar la modal*/
@keyframes cerrar-modal{
  0%{
    opacity:1; 
     transform:scale(1); 
  }
  100%{
    opacity:1; 
    transform:scale(0); 
  }

}


/*===================Animaciones de productos============================*/
@keyframes lado{
  to{
    transform:rotateY(180deg); 
    background-color:purple; 
  }
}

@keyframes lado-uno{
  to{
    transform:rotateY(180deg); 
    background-color:#1F618D  ; 
  }
}

@keyframes lado-dos{
  to{
    transform:rotateY(180deg); 
    background-color:#BA4A00; 
  }
}

@keyframes lado-tres{
  to{
    transform:rotateY(180deg); 
    background-color:#154360  ; 
  }
}

@keyframes lado-cuatro{
  to{
    transform:rotateY(180deg); 
    background-color:purple; 
  }
}

@keyframes txt-lado{
   30%{
    opacity:0; 
   } 
   100%{
    opacity:1;
    transform:rotateY(180deg);  
   }

  }



  /*=====================animacion para la seccion de ofrece==================================*/
/*animacion para el efecto cuando se aga hover*/
@keyframes arriba
{
/**/
  to{
    opacity:1;/**/
    margin-top:0; /**/ 
    transform: translateY(0);
  }
}

/*=======================================================================
Uso de los medias query(en pantallas grandes - LARGE(lg))
=========================================================================*/ 
/*Siempre que se quiera usar los media query se inicia con @media(aqui va la condicion, que seria el tamaño del ancho que  puede ser min(minimo) y max(maximo))*/

 @media(min-width: 1200px){/*en este caso dice que el minimo de la pantalla sea de 1200px eso seria lo minimo que se puede reducir.*/
	/*se pone -lg en la clase para diferenciar que este lg de LARGE par identificar */
	.col-lg-12{width: 100%;}/*En este caso se dice que una solo columna va a cubrir todo el ancgo de la pantalla por eso tiene un witdth del 100%*/
	.col-lg-11{width:91.66666667%; }
	.col-lg-10{width:83.33333333%;}
	.col-lg-9{ width: 75%;}
	.col-lg-8{width:66.66666667%;}
	.col-lg-7{width:58.33333333%;}
	.col-lg-6{width: 50%;}
	.col-lg-5{width:41.66666667%;}
	.col-lg-4{width: 33.33333333%;}
	.col-lg-3{width: 25%;}		
	.col-lg-2{width:16.66666667%;}
	.col-lg-1{width:8.33333333%;}

.sec
{
  width:99%; 
}
.seccion1
{
  /*background-color:black; */
  top:10px;
}


  /*acerca de*/
.img-nosotros
{
  width:30vw;
}

.nosotros
{
   width: 57vw;
}
/*modal*/
.titulo-precio-paquetes
  {
    font-size:2.5em;
    /*color:red; */
  }
 }

/*=======================================================================
Uso de los medias query(en pantallas medianas - MEDIUM(md))
=========================================================================*/ 

@media(max-width:1199px) and (min-width:992px ){/* Aqui lo que dice es que se van a aplicar cambios entre el siguiente rango de quiebre: que sea un ancho minimo de 992px hasta un ancho maximo de 1199px */
	.col-md-12{width: 100%;}
	.col-md-11{width:91.66666667%; }
	.col-md-10{width:83.33333333%;}
	.col-md-9{ width: 75%;}
	.col-md-8{width:66.66666667%;}
	.col-md-7{width:58.33333333%;}
	.col-md-6{width: 50%;}
	.col-md-5{width:41.66666667%;}
	.col-md-4{width: 33.33333333%;}
	.col-md-3{width: 25%;}		
	.col-md-2{width:16.66666667%;}
	.col-md-1{width:8.33333333%;}

.sec
{
  width:99%; 
}

.seccion1
{
  /*background-color:black; */
  top:10px;
}
  /*cada uno de los cuadros que ofrece*/
.ofrece
{
  /*background-color:red; */
  width:43%; 
}


/*acerca de*/
.img-nosotros
{
  width:30vw;
}

.nosotros
{
   width: 57vw;
}

/*productos*/

.servicios
{
  width:48%; 
  margin-left:2px; 
}



.icono-servicios
{
  width:60px;
  height:60px;  
}
.subtitulos-servicios
{

  font-size:1.5em;  
  /*margin-top:-4px;*/
  /*background-color:blue;*/
}

.subtitulos-servicios-solo
{
   
}

.parrafo-servicios
{
 /*background-color:red;*/
}

.ps1
{
  top:-35px; 
}


/*ventana modal*/


.cerrar-mo
{
  right:0;
}


.titulo-precio-paquetes
  {
    font-size:2.1em;
    /*color:red; */
  }


}







/*=======================================================================
Uso de los medias query(en pantallas extra pequeñas - SMALL(sm))
=========================================================================*/ 

@media(max-width:991px) and (min-width:768px ){/* Aqui lo que dice es que se van a aplicar cambios entre el siguiente rango de quiebre: que sea un ancho minimo de 768px hasta un ancho maximo de 991px */
	.col-sm-12{width: 100%;}
	.col-sm-11{width:91.66666667%; }
	.col-sm-10{width:83.33333333%;}
	.col-sm-9{ width: 75%;}
	.col-sm-8{width:66.66666667%;}
	.col-sm-7{width:58.33333333%;}
	.col-sm-6{width: 50%;}
	.col-sm-5{width:41.66666667%;}
	.col-sm-4{width: 33.33333333%;}
	.col-sm-3{width: 25%;}		
	.col-sm-2{width:16.66666667%;}
	.col-sm-1{width:8.33333333%;}

.sec
{
  width:99%; 
}

    .ofrece
  {
    /*background-color:blue; */
    width:47%; 
  }

  .servicios
  {
    width:46%; 
    margin-left:8px; 
  }
  
  .content-servicios
  {
    width:100% ;

  }


/*seccion 4 de nosotros*/
.seccion4
{
  /*background-color:pink; */
}

  .nosotros, .img-nosotros
{
  width:100vw;
 }

.nosotros
{
  
  /*background-color:red;*/
  margin-top:25px;
  margin-left:0;


}

.img-nosotros
{
  
  margin-left:10px;   
  left: 0;
  top:20px; 
  height:300px; 
}

/*ventana modal*/



.cerrar-mo
{
  right:0;
}


.titulo-precio-paquetes
  {
    font-size:1.9em;
    /*color:blue; */
  }

  .ps1
{
  top:-35px; 
}

 

}/*cierre mediaquery*/

/*=======================================================================
Uso de los medias query(en pantallas extra pequeñas - EXTRA SMALL(xs))
=========================================================================*/ 
@media(max-width:767px){/*Lo que dice es que el ancho maximo va ser de 767px osea desde 0 hasta 767px*/
	.col-xs-12{width: 100%;}
	.col-xs-11{width:91.66666667%; }
	.col-xs-10{width:83.33333333%;}
	.col-xs-9{ width: 75%;}
	.col-xs-8{width:66.66666667%;}
	.col-xs-7{width:58.33333333%;}
	.col-xs-6{width: 50%;}
	.col-xs-5{width:41.66666667%;}
	.col-xs-4{width: 33.33333333%;}
	.col-xs-3{width: 25%;}		
	.col-xs-2{width:16.66666667%;}
	.col-xs-1{width:8.33333333%;}
  
  .sec
{
  width:99%; 
}

.seccion1
{
  /*background-color:black; */
  top:10px;
  /* height: 300px; */
}

/*==================seccion de ofrece======================*/
.ofrece
{
  /*background-color:green; */
  width:85%; 
  margin:auto;
  margin-bottom:40px;  
}

/*=========seccion de servicios===================*/



.servicios
{
  width:100vw; 
}

.content-servicios
{
  /*position:relative; */
  /*background-color:blue; */
  width:calc(100vw - 25px); 
  /*height:100vh; */
}

.servicio-solo,.servicio-solo-img
{
  width:100%; 
}
 

/*acerca de */

.seccion4
{
  height: auto;
}

.nosotros, .img-nosotros
{  
  width:100vw;
 }

.nosotros
{
  /*background-color:red;*/
  margin-top:25px;
  margin-left:1px;
  height:auto; 
}

.img-nosotros
{
  
  /*margin-left:10px;   */
  left: 0;
  top:20px; 
  height:300px; 
}


/*ventana modal*/



.cerrar-mo
{
  right:0;
}


.titulo-precio-paquetes
  {
    font-size:1.3em;
    /*color:white; */
  }

/*seccion de contenido de la ventan modal*/
  .content-tablas
  {
    width:90%; 
    bottom:20px;
  }

  .btn-accion
  {
    /*background-color:black; */
    padding:15px 0; 
    width:80%; 

  
  }

  .btn-residencial
  {
    position:relative; 
  }

  .btn-corporativo
  {
    position:relative;
    margin-left:10%;
    /*background-color:blue; */
  }

  .precio-tabla
  { 
    margin-top:-1px;
    /*background-color:silver ;*/
    padding:10px; 
    top:1px;
    font-size:2.2em; 
    font-weight:bold; 
  }

  .btn-residencial
  {
     top:1px;
  }
  
.derechos
{
  text-align:left; 
}

  .ilimitdo
  {
    /*background-color:green;*/
    left:-40px;  
  }
  
  .soporte24
  {
    /*background-color:orange; */
    font-size:1em;
    top:-30px; 
    left:30px; 
    position:relative;
    margin-right:20px; 
  }

  .corporativo-soporte-24
  {
    /*background-color:red;*/
    left:4px;  
  }
  

}/*cierre del mediaquery*/


@media(max-width:453px){/*Lo que dice es que el ancho maximo va ser de 767px osea desde 0 hasta 767px*/
  .col-xs-12{width: 100%;}
  .col-xs-11{width:91.66666667%; }
  .col-xs-10{width:83.33333333%;}
  .col-xs-9{ width: 75%;}
  .col-xs-8{width:66.66666667%;}
  .col-xs-7{width:58.33333333%;}
  .col-xs-6{width: 50%;}
  .col-xs-5{width:41.66666667%;}
  .col-xs-4{width: 33.33333333%;}
  .col-xs-3{width: 25%;}    
  .col-xs-2{width:16.66666667%;}
  .col-xs-1{width:8.33333333%;}

  .sec
{
  width:99%; 
}

 .btn-accion
  {
    /*background-color:brown; */
    padding:15px 0; 
    width:70%; 

  
  }

  .btn-residencial
  {
    position:relative; 
  }

  .btn-corporativo
  {
    position:relative;
    margin-left:10%;
    /*background-color:green; */
    width:85%; 
  }

  .precio-tabla
  {
    /*background-color:silver ;*/
    margin-top:6px;;
    font-size:1.6em; 
    font-weight:bold; 
  }

  .btn-residencial
  {
     top:1px;
  }
  
 .ps1
{
  top:-35px;  
}

.derechos
{
  text-align:left; 
}

  .planes
  {
    width:100%; 
  /*background-color:red; */
  bottom:110px; 
  }

  .subtitulos-servicios-solo
  {
    bottom:90px;
    /*background-color:blue; */
  }

  .parrafo-servicios-solo
  {
    bottom:110px; 
    /*background-color:green; */
  }

  .soporte24
  {
    top:-50px;
    left:-20px; 
    /*background-color:green; */
    
  }

  .corporativo-soporte-24
  {
    /*background-color:red;*/
    left:10px;  
    top:-25px; 
    margin-right:20px; 
  }

  .seccion1{
    height:200px;
  }

}