/*------ PATRON DE COLORES -------------- */
html {
  font-size: 15px; }

body {
  font-family: 'Open Sans', sans-serif;
  color: #111111;
  padding-top: 74px; }

div article img {
  cursor: zoom-in; }

.bienvenidos {
  background: url("..//images/portada.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100vh; }

.encabezado {
  /*background: #131f2a;*/
  background-color: #2b4457;
  padding: .5rem; }

.encabezado .container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 0; }

.encabezado .logo img {
  width: 140px; }

/* ---------Estilos par boton buscar y menu-----------*/
#bloque-buscar {
  flex: 0 1 100%; }

.boton-buscar, .boton-menu {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 2.5rem;
  margin: 0;
  padding: 0 .5rem; }

.boton-buscar:focus,
.boton-menu:focus {
  outline: 0; }

.boton-buscar {
  margin-left: auto; }

.contenedor-bloque-buscar {
  display: flex;
  height: 3rem;
  margin: 1rem 0; }

.contenedor-bloque-buscar input[type="text"] {
  border: 0;
  border-radius: .5rem 0 0 .5rem;
  flex: 1 1 auto;
  padding: .5rem; }

.contenedor-bloque-buscar input[type="submit"] {
  background: #0a0a90;
  border: 0;
  border-radius: 0 .5rem .5rem 0;
  color: white;
  flex: 0 1 auto;
  padding: 0 1.5rem; }

/*------ CODIGO MENU DESPLEGABLE ---------*/
#menu-principal {
  flex: 1 1 100%;
  order: 1; }

#menu-principal ul {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0; }

#menu-principal ul a {
  border-top: 1px solid #fcfcff;
  color: white;
  display: block;
  /*font-weight: bold;*/
  font-size: 1rem;
  padding: .5rem 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase; }

  #menu-principal ul a:hover{
    color: #629cc4;
  }

#menu-principal ul li.active a {
  /*color: #0b0ba2;*/
  /*color: #629cc4; */
}

/*---------- CODIGO BIENVENIDOS ------------*/
.btn-primary {
  border-color: transparent;
  transition: all .5s easy; }

.flecha-bajar {
  font-size: 3rem; }

.flecha-bajar a {
  display: inline-block;
  animation: flecha-animada 2s ease-in-out infinite;
  color: white; }

.texto-encabezado {
  align-items: center;
  display: flex;
  flex: 1 1 auto; }

@keyframes flecha-animada {
  from {
    transform: translateY(0); }
  50% {
    transform: translateY(6px); }
  to {
    transform: translateY(0); } }
@media (max-width: 574px) {
  .texto-encabezado, .flecha-bajar {
    text-align: center; } }
/*----------- SECCION AGENCIA ---------------*/
.agencia {
  /*background-color: rgba(18, 175, 175, 0.9);*/
  background-color: #2b4457;
  /*background-color: #456d8a;*/
  color: white; }

.agencia .info {
  display: flex; }

.agencia .info img {
  display: block;
  height: 90%;
  margin: 1rem auto;
  max-height: 15rem;
  width: 80%; }

/*----------- SECCION TU MEJOR ELECCION ----------*/
.tu-mejor-eleccion p {
  font-size: large; }

.tu-mejor-eleccion h2 {
  color: rgba(18, 175, 175, 0.9); }

.tu-mejor-eleccion ul {
  list-style: none; }

.tu-mejor-eleccion ul li {
  min-height: 11.5rem; }

.tu-mejor-eleccion ul li .fa {
  background: #1fc1df;
  border-radius: 50%;
  color: #fff;
  font-size: 2.5rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  width: 5rem; }

.tu-mejor-eleccion .container .hidden-md-down {
  align-self: center; }

.tu-mejor-eleccion .contenedor-eleccion {
  height: 120px; }

.tu-mejor-eleccion .central {
  display: flex;
  flex-direction: column; }

.tu-mejor-eleccion .central img {
  width: 100%; }

/*----------- SECCION SERVICIOS -------------*/
.servicios {
  background: url("..//images/servicios2.jpg") no-repeat;
  background-size: cover; }

.servicios article {
  align-items: center;
  display: flex;
  margin: 1rem 0; }

.servicios article img {
  margin-right: 1rem;
  max-width: 200px;
  overflow: hidden;
  transition: all 1s ease; }


.servicios h2 {
  color: #fff;
  text-align: center; }

.servicios h3 {
  flex: 1 1 auto;
  font-size: 1.3rem;
  margin: 0; }

.servicios h3 a {
  color: #fff;
  display: flex;
  justify-content: space-between;
  text-decoration: none; }

.servicios h3 a::after {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 1.5rem;
  left: 0;
  margin-left: 1rem;
  opacity: .5;
  position: relative;
  transition: all .5s ease; }

.servicios h3 a:hover::after {
  color: rgba(18, 175, 175, 0.9);
  left: -.5rem;
  opacity: 1; }

.servicios .divisiones a{
  font-weight: bold;
}


/********** INICIO NUEVOS PRODUCTOS **********/
.prod-nuevos{
  background-color: #2b4457;
}
.prod-nuevos .container {
  /*background-color: #000;*/
  padding: 1rem; 
}

.prod-nuevos .container .carousel img {
  height: 500px;
  width: 100%; }

.prod-nuevos h2 {
  color: aqua;
  color: rgba(18, 175, 175, 0.9); }

/********** FIN NUEVOS PRODUCTOS **********/


/********** INICIO AREA CLIENTES **********/
.ultimos-proyectos .container {
  padding-left: 0;
  padding-right: 0; }

.ultimos-proyectos .container h2 {
  color: rgba(18, 175, 175, 0.9);
  color: #111111; 
}

.ultimos-proyectos .container .owl-stage-outer {
  width: auto; }

.ultimos-proyectos .owl-nav {
  display: flex;
  justify-content: center; }

.ultimos-proyectos .owl-prev,
.ultimos-proyectos .owl-next {
  color: rgba(18, 175, 175, 0.9);
  font-size: 2rem;
  margin: 0 .5rem;
  transition: all .5s ease; }

.ultimos-proyectos .owl-prev:hover,
.ultimos-proyectos .owl-next:hover {
  color: darkcyan; }

/*.ultimos-proyectos .owl-carousel a img
    {
        width: 100%;
    }*/

/********** FIN AREA CLIENTES **********/

/*********** INICIO AREA CONTACTO **********/
.area-contacto {
  /*background: rgba(0, 0, 0, 0.9);*/
  background-color: #131f2a;;
}

.area-contacto h3 {
  color: #fff;
  margin: 1rem 0; }

.area-contacto p {
  color: whitesmoke; }

.area-contacto ul {
  display: flex;
  list-style: none; }

.area-contacto ul li a {
  font-size: 3rem;
  margin: 0 1rem; }
/*********** FIN AREA CONTACTO **********/


/********** INICIO PIE DE PAGINA **********/
.piedepagina {
  background: black;
  color: #fff;
  text-align: center; }

.piedepagina p {
  margin-bottom: .5rem; }

.piedepagina ul {
  list-style: none; }

.piedepagina .redes-sociales {
  display: flex;
  justify-content: center; }

.piedepagina .redes-sociales a {
  font-size: 2rem;
  margin: 0 1rem; }

.ir-arriba {
  bottom: 1rem;
  color: #1fc1df;
  font-size: 2rem;
  position: fixed;
  right: 1rem; }

.piedepagina .calec {
  color: ghostwhite;
  font-size: .5rem;
  opacity: .8;
  text-align: right; }

.piedepagina .calec img {
  width: 40px; }

/********** FIN PIE DE PAGINA **********/


/********** INICIO PAGINA CCTV **********/
.pagina-cctv .bienvenidos {
  background: url("..//images/cctv/central-monitoreo-chico.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  height: 500px; }

.pagina-cctv .texto-encabezado .container {
  text-align: center; }

/*.pagina-cctv .ruta {
  background: rgba(18, 175, 175, 0.9); 
  background-color: #456d8a;
}*/

/*.pagina-cctv .lista-cctv
{
    border: 1px solid black;
    background:url("../images/fondoacti.png"),;
    background-size: 300px 150px;
    background-repeat: repeat;
    //background-origin: 100px 200px;
    //padding:25px;
    //background: rgba(128, 128, 128, .1);
    //background: rgba(34, 240, 216, .7);
}*/
.pagina-cctv .lista-cctv .aside-left {
  /*background-color: #456d8a;*/
  background-color: #2b4457;
  border-radius: 3px;
  padding: .5rem; }

.pagina-cctv .lista-cctv .aside-left .card {
  border-radius: 0;
  clear: left;
  margin-bottom: 0;
  padding: .3rem;
  width: 100%; }

.pagina-cctv .lista-cctv .aside-left .card-header {
  background-color: #2b4457;
  padding: .5rem; }

.pagina-cctv .lista-cctv .aside-left .card-header h5 a {
  /*color: black;*/
  color: #F8F8FF;
  font-size: .9rem;
  /*font-weight: 600;*/
  font-weight: bold;
  text-decoration: none; }

.pagina-cctv .lista-cctv .aside-left .card-block a {
  color: #2b4457;
  font-size: .9rem;
  font-weight: bold;
  text-decoration: none; }

.pagina-cctv .lista-cctv .aside-left .card-block a:hover {
  /*color: aqua;*/
  color: #3498DB; 
  /*background-color: #2b4457;*/
}

.pagina-cctv .lista-cctv .item-productos {
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  margin-bottom: 1rem;
  padding: 1rem;
  text-align: center; }

.pagina-cctv .lista-cctv .item-productos h5 {
  font-size: 1rem; }

.pagina-cctv .lista-cctv .item-productos p {
  font-size: .8rem;
  margin-bottom: .5rem; }

.pagina-cctv .lista-cctv .item-productos img {
  border-radius: 5px;
  width: 100px; }

.pagina-cctv .lista-cctv .container article {
  flex: 1 1 auto;
  min-height: 270px; }

/********** FIN PAGINA CCTV **********/


/********** INICIO PAGINA IT **********/
.pagina-it .bienvenidos {
  background: url("..//images/bg-it-chico.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  height: 500px; }
/********** FIN  PAGINA IT **********/

/********** INICIO PAGINA ACCESO **********/
.pagina-acceso .bienvenidos {
  background: url("..//images/control-acceso-chico.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  height: 500px; }

/********** FIN PAGINA ACCESO **********/

/********** INICIO PAGINA VOCEO **********/
.pagina-voceo .bienvenidos {
  background: url("..//images/bg-voceo-ch.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  height: 500px; }

.pagina-voceo .construccion {
  display: flex;
  flex-direction: column; }

.pagina-voceo .construccion img {
  flex: 1 1 0px; }

/********** FIN PAGINA VOCEO **********/

/*.pagina-refrigeracion .bienvenidos
{
    background: url("..//images/.png") no-repeat center top;
    background-size: cover;
    color: white;
    height: 500px;
}*/

/********** INICIO PAGINA CLIMAS **********/
.climas {
  margin-top: 2rem; }

.climas h1 {
  /*color: #1fc1df;*/
  color: #629cc4;
  margin-bottom: 1rem; }

.climas .img-principal img {
  width: 100%; }

.climas .img-mini {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  max-height: 100px; }

.climas .img-mini .img-responsive {
  cursor: zoom-in;
  width: 100px; }

.pagina-refrigeracion .construccion {
  display: flex;
  flex-direction: column; }

.pagina-refrigeracion .construccion img {
  flex: 1 1 0px; }

.pagina-refrigeracion .climas a img {
  width: 100%; }

/********** FIN PAGINA CLIMAS **********/

/********** INICIO PAGINA CONTACTO **********/
.pagina-contacto .bienvenidos {
  background: url("..//images/telefonista-chico.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  height: 500px; }

.pagina-contacto .datos-contacto {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px 5px 0 0;
  color: #fff; }

.pagina-contacto .datos-contacto p {
  font-size: 1rem;
  margin-bottom: .5rem; }

.pagina-contacto .datos-contacto p .fa {
  font-size: 1.5rem; }

.pagina-contacto .mapa {
  border: 2px solid black;
  border-radius: 5px;
  margin: 1rem auto;
  min-height: 200px;
  padding: .3rem;
  width: 100%; }

.pagina-contacto .mapa iframe {
  height: 100%;
  width: 100%; }

/********** FIN PAGINA CONTACTO **********/

/********************************************* 
/          MEDIAS QUERIES 576px (md)         /
**********************************************/
@media (max-width: 576px) {
  .bienvenidos .texto-encabezado h1 {
    font-size: 2rem; }

  #agencia h2 {
    font-size: 1.2rem; }

  .tu-mejor-eleccion .container ul li {
    height: 1rem; }

  .tu-mejor-eleccion .contenedor-eleccion h4 {
    font-size: 1.2rem; }

  .tu-mejor-eleccion .contenedor-eleccion {
    min-height: 2rem; } 
  }
@media (min-width: 576px) {
  .tu-mejor-eleccion .container ul li {
    height: 1rem; }

  /*-------------- CLIENTES ---------------------*/
  /*.ultimos-proyectos .owl-carousel a img
  {
      width: 100%;
  }*/ }


/********************************************* 
/          MEDIAS QUERIES 768px (md)         /
**********************************************/
@media (min-width: 768px) {
  /****** MENU NAVEGACION   **********/

  /********** INICIO PROD NVOS SLIDE **********/
  .prod-nuevos .carousel-item.active-next {
    display: flex; } 
  
  /********** FIN PROD NVOS SLIDE **********/

  /****** TEXTO ENCABEZADO  **********/
  .texto-encabezado .rfc {
    align-self: flex-start;
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    padding: 0; }

  .texto-encabezado .rfc p {
    margin-bottom: 0; }

  /****** TU MEJOR ELECCION **********/
  /****** SERVICIOS **********/
  .servicios .container article {
    flex-direction: column;
    text-align: center; }

  .servicios .container article h3 {
    flex: 0 1 50px; }

  .servicios .container article h3 a::after {
    display: none; }

  .servicios .container article p {
    flex: 0 1 70px; }

  .servicios .container article img {
    margin-bottom: 1rem;
    margin-right: 0;
    flex: 0 0 150px; }

  .servicios .container article p {
    color: #fff; }

  /********** ULTIMOS PROYECTOS ***********/
  .ultimos-proyectos .owl-carousel a img {
    width: 150px; } 
  }


/********************************************* 
/          MEDIAS QUERIES 992px (lg)         /
**********************************************/
@media (min-width: 992px) {
  html {
    font-size: 16px; }

  /********** BIENVENIDOS      ************/
  .bienvenidos {
    /*background: url("..//images/portada1-grande.jpg") no-repeat center top, url("..//images/CIMA.jpg") no-repeat left top;*/
    background: url("..//images/portada-principal1.jpg") no-repeat center top, url("..//images/CIMA.jpg") no-repeat left top;
    background-size: cover; }

  .bienvenidos .logogrande {
    float: left;
    left: 2%;
    position: fixed;
    top: 10px;
    width: 210px;
    z-index: 1040; }

  /* parte solo para logo de pagina voceo y aire acondicionado */
  .logogrande {
    float: left;
    left: 2%;
    position: fixed;
    top: 10px;
    width: 210px;
    z-index: 1040; }

  .encabezado .logo img {
    opacity: 0;
    width: 120px; }

  /********** MENU NAVEGACION  ************/
  .container #menu-principal {
    display: block;
    flex: 0 1 auto;
    margin-left: auto; }

  #menu-principal ul {
    display: flex; }

  #menu-principal ul li a {
    border-bottom: 3px solid transparent;
    border-top: 0;
    margin: 0 .3rem;
    padding: .5rem .3rem;
    text-transform: capitalize;
    transition: all .5s ease; }

  #menu-principal ul .active{
    color: #1fc1df;
  }

  #menu-principal ul li a:hover {
    border-bottom: 3px solid;
    color: #629cc4; }

  #bloque-buscar .contenedor-bloque-buscar input[type="text"] {
    border: 1px solid #05059d;
    transition: all 1s ease; }

  .bienvenidos .container #bloque-buscar {
    order: 3;
    position: absolute;
    right: 1rem;
    top: 4rem; }

  .boton-buscar {
    order: 2; }

  /********** TEXTO ENCABEZADO ************/
  .texto-encabezado p {
    font-size: 1.5rem; }

  .texto-encabezado .imagen-info {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-height: 400px;
    max-width: 1200px;
    padding-top: 3rem; }

  .texto-encabezado .imagen-info p {
    font-size: 14px; }

  .texto-encabezado .imagen-info img {
    height: 50px;
    width: 150px; }

  /*********** TU MEJOR ELECCION ***********/
  .tu-mejor-eleccion ul li {
    display: flex;
    min-height: 12rem; }

  .tu-mejor-eleccion ul li img {
    flex: 0 1 auto;
    padding: 1rem 0;
    text-align: center; }

  .tu-mejor-eleccion ul:first-child li .fa {
    margin-left: 1rem;
    margin-right: 0;
    order: 1; }

  .tu-mejor-eleccion ul:first-child li img {
    margin-left: 1rem;
    margin-right: 0;
    order: 1; }

  .contenedor-eleccion h4 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0; }

  .contenedor-eleccion {
    flex: 1 1 0px; }

  .contenedor-eleccion p {
    font-size: 1rem; }

  .pagina-cctv .bienvenidos {
    background: url("..//images/cctv/central-monitoreo.jpg") no-repeat center top;
    background-size: cover; }

  /************ SERVICIOS **********************/
  .servicios .divisiones {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10rem .3rem; }

  .servicios .divisiones a {
    border-radius: 5px;
    color: black;
    font-size: .9rem;
    font-weight: bold;
    padding: .5rem;
    text-decoration: none; }

  .servicios .divisiones a:hover {
    box-shadow: 0px 0px 10px 5px #0ac2fa;
    /*color: #0ac2fa;*/
   }

  .servicios .divisiones p {
    margin-bottom: 0; }

  .pagina-contacto .bienvenidos {
    background: url("..//images/telefonista-grande.jpg") no-repeat center top;
    background-size: cover;
    color: white;
    height: 500px; }

  .pagina-contacto .mapa {
    border: 2px solid black;
    border-radius: 5px;
    margin: 1rem auto;
    min-height: 400px;
    padding: .3rem;
    width: 100%; }

  .pagina-acceso .bienvenidos {
    /*background: url("..//images/controlacceso-grande.jpg") no-repeat center top;*/
    background: url("..//images/control-acceso.jpg") no-repeat center top;
    background-size: cover;
    color: white;
    height: 500px; }

  .pagina-it .bienvenidos {
    background: url("..//images/bg-it-grande.jpg") no-repeat center top;
    background-size: cover;
    color: white;
    height: 500px; }

  .pagina-voceo .bienvenidos {
    background: url("..//images/bg-voceo-gde.jpg") no-repeat center top;
    background-size: cover;
    color: white; } 
    
  }


/********************************************* 
/          MEDIAS QUERIES 1200px (xl)         /
**********************************************/
@media (min-width: 1200px) {
  .bienvenidos .logogrande {
    float: left;
    left: 2%;
    position: fixed;
    top: 10px;
    width: 300px;
    z-index: 1040; 
  }

  /* parte solo para logo de pagina voceo y aire acondicionado */
  .logogrande {
    float: left;
    left: 2%;
    position: fixed;
    top: 10px;
    width: 300px;
    z-index: 1040; 
  }

  /*********** TU MEJOR ELECCION ***********/
  .tu-mejor-eleccion ul li {
    display: flex;
    min-height: 10rem; 
  }

  /*********** BIENVENIDOS ***********/
  /*.texto-encabezado .imagen-info
  {
      position: absolute;
      width: 95%;
  }
  .texto-encabezado .imagen-info .col-md-6
  {
      display: flex;
      //flex-direction: column;
      max-height: 320px;
      padding: 0 3rem;
  }
  .texto-encabezado .imagen-info .col-md-6 img
  {
      flex: 0 1 300px;
      max-height: 340px;
      opacity: .6;
      transition: all 1s ease;
  }
  .texto-encabezado .imagen-info img:hover
  {
      flex: 0 1 300px;
      opacity: 1;
  }
  .texto-encabezado .imagen-info div:first-child img
  {
      margin-right: auto;
  }
  .texto-encabezado .imagen-info div:last-child img
  {
      margin-left: auto;
  }*/ 
}


/********* CCTV.HTML **********/
.album {
  min-height: 50rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7; }

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0; }

.card > img {
  flex: 0 1 100px;
  margin-bottom: .75rem; }

.card-text {
  font-size: 85%; }


/*************** COLOR METAL DE BOTONES DE SECCION *************************/
.metal.linear {
  background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%), linear-gradient(180deg, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #b3b3b3 100%); }

/* Oval ------------------------- */
.metal.linear.oval {
  margin-top: 100px;
  width: 70px;
  height: 60px;
  line-height: 60px !important;
  border-radius: 50%;
  font: italic bold 3em/50px Georgia, "Times New Roman", Times, serif; }

/************ CODIGO www.w3schools.com MODAL **************/
/*.w3-modal
{padding-top:20%;padding-left:30%;}*/
.w3-modal {
  background: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  overflow: auto;
  padding-top: 15%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3; }

.w3-modal-content {
  /*background-color: #f80a0a;*/
  background-color: white;
  margin: auto;
  outline: 0;
  padding: 0;
  position: relative;
  width: 400px; }

.w3-display-topright {
  position: absolute;
  right: 0;
  top: 0; }

.w3-animate-zoom {
  animation: animatezoom 0.6s; }

@keyframes animatezoom {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }
.escala {
  /*margin: auto;*/
  width: 100%; }

/*# sourceMappingURL=estilos.css.map */



/***********  Clases de prueba  */
.oculto{
  display: none;
}