/*
*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    text-align: center;
}
*/


.head {
    display: flex;
    align-items: center;
    justify-content: end;
     height: 43px;
    background: #12192C;
    position: relative;
    width: 100%;
    z-index: 100;
}

/* ----------------------------menu-------------------*/
.navbar {
    display: flex;
    margin-right: 10px;
    justify-content: end;

}

.navbar a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    text-align: right;
    justify-content: end;
    font-weight: normal;


}
.divp{
  width: 35%;
}
.navbar a:hover {
    color: #15ABE0;
}





/* ----------------------------header imagen-------------------*/
.content-header {
   
     background:  url(../image/ControlTotal.jpg);  /* Chrome 10-25, Safari 5.1-6 */
        height: 470px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
     background-repeat: no-repeat;
       background-size: cover;
     background-position: right; 
          position: left;
     text-align:left;


}
.textheader{
       width: 85%;
    margin-top: 30px;
}
.controlpp{
    color: #fff;
    padding-left: 30px;
    width: 50%;
    text-align: left;
    float: left;
}

.controlp{
      color: #fff;
    width: 100%;
    padding-left: 30px;
    text-align: left;
    float: left;
}


.btn-c{
      margin-left: 20px;

}
.btn:hover {
    background: #1C639E;
}

.btn-home {
    margin-left: 0px;
    margin-top: 20px;


}

.btn-home a {
    margin: 0 10px;
}



/* ----------------------------BARRA MENU ESTATICO------------------*/
.sau {
     height: 43px;
    background: #12192C;
}
.navbar-barra-submenu{
    display: flex;
    justify-content: start;
    text-align: left;
}

.navbar-barra-submenu a {
   display: block;
    padding: 10px 0px;
    color: #fff;
margin-left: 40px;

}

/* ----------------------------CONTROL TOTAL  Y COMUNICACION COMPLETA-----------------*/

 .content-price{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
               padding: 0px;


}
.content {
      min-height: 30vh!important;
    padding: 60px!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;


}

.about {
    background: #ECFAFF;
   min-height: 10vh;
   display: flex;
    flex-direction: column;
    justify-content: center;
}

.divcontrol{
  padding: 30px;
}

.divtitle{
  position: relative;
margin-bottom: 30px;
padding-top: 35px;
}
.title {
        font-weight: normal;
    color: #000;
}
.titlec {
    font-size: 35px;
    font-weight: normal;
    color: #000;
   position: relative;
   top: 35px;
}
.divpa{
  margin-bottom:0px;
  min-height: 10vh;
  width: 80%;
margin-left: 120px; 
      position: relative;
   top: 7px;


}
.pa{
    text-align: center;
    font-weight: normal;

  }

/*==========================================CARD ADMINISTRADOR IMAGEN=============*/

.cards{
  display: flex;
  justify-content: center;
    flex-direction: row;
        flex-wrap: wrap;

    width: 100%;
    margin-top: 30px;
}

.cardadmin{
      display: flex; 
       margin: 10px 20px;
        width: 345px;
   text-align: left;
   /*padding-right: 30px;*/


}
.cardres{
   margin: 10px 20px;
   width: 345px;
   text-align: left;
      /*padding-right: 30px;*/

}
.cardseg{
        margin: 10px 20px;
         width: 345px;
   text-align: left;

      /*padding-right: 30px;*/

}
.imgadmin{
    margin-top: 0px;

      width: 80px;
      padding:6px;
    }
 .admin-res{
  margin-right: 130px;
 }

.ph4{
   font-size: 20px;
    color: #000;
     text-align: left;
    padding: 0px 4px;
    width: 280px;
    font-weight: normal;



 }
  .texth4a{
    color: #00BFFF;
    margin-right: 200px;
    font-weight: normal;
 }
   .texth4ad{
    color: #00BFFF;
    margin-right: 168px;
    font-weight: normal;

 }
    .texth4ar{
    color: #00BFFF;
    margin-right: 186px;
    font-weight: normal;


 }

/* =====================CARD TEXTO========================*/
.cardscomu{
    display: flex;
    justify-content: start;
    margin-top: 0px;
    min-height: 15vh;
    width: 160%;
    padding-left: 70px;
    position: relative;
   top: 50px;


    }
.cardscomu .cardvi{
    display: flex;
    min-height: 20vh;
    width: 20%;
    padding: 30px;
}
.cardscomu .cardpe{
    display: flex;
    min-height: 20vh;
    width: 20%;
        padding: 30px;

}
.cardscomu .cardac{
    display: flex;
    min-height: 20vh;
    width: 20%;
            padding: 30px;

}


.texth4vi{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;
    

 }
 .texth4pe{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;

 }
 .texth4ac{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
        font-weight: normal;
        text-align: left;

 }

.ph4vi{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
  text-align: left;
  font-weight: normal;
  }
 .ph4pe{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     font-weight: normal;

    


 }.ph4ac{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     font-weight: normal;

   }

/*---------------------- seccion de informacion de ingfrestructura-----------------*/
.aboutia {
    background: #fff;
   min-height: 50vh;
}

 .contentia{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
     margin-top: 50px;
        min-height: 44vh;


}
.contentia .servicesBx{
  padding:  30px;
 max-width: 300px;
  max-height: 257px;
 margin: 20px;
 transition: 0.5s;
 text-align: center;
 background:  #191D45;
}
 .contentia .servicesBxu{
     padding:  30px;
  max-width: 300px;
  max-height: 257px;
 margin: 20px;
 transition: 0.5s;
 text-align: center;
 background: #1C639E;

}
 .contentia .servicesBxd{
     padding:  30px;
    max-width: 300px;
  max-height: 257px;
 margin: 20px;
 transition: 0.5s;
 text-align: center;
     background: #15ABE0;

}

 .contentia .servicesBx h4{
    
    font-size: 25px;
    transition: 0.5s;
    color:#fff;
    margin-top: 6px;
      padding-bottom: 15px;
      font-weight: normal;

}

.contentia .servicesBx p{
 font-size: 20px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;


}
.contentia .servicesBxu h4{
    
    font-size: 25px;
    transition: 0.5s;
    color:#fff;
    margin-top: 6px;
      padding-bottom: 15px;
      font-weight: normal;

}

.contentia .servicesBxu p{
 font-size: 20px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;


}

.contentia .servicesBxd h4{
    
    font-size: 25px;
    transition: 0.5s;
    color:#fff;
    margin-top: 6px;
    padding-bottom: 15px;
    font-weight: normal;

}

.contentia .servicesBxd p{
 font-size: 20px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  font-weight: normal;

}

.h1o-infra{
 
  font-size: 35px; 
  font-weight: normal;
    color: #000;
  padding-top: 65px;
  padding-left: 150px;
  padding-right: 150px;
}

/*---------------------- SECCION DE OPINION CLIENTES-----------------*/


.notice{
    padding: 0px 0;
    margin: auto;
    overflow: hidden;
    min-height: 60vh;
    background: #fff;
}
.h2notice{
  font-weight: normal;

}
.contenedor_s {
    width: 95%;
    overflow: hidden;
    margin: 40px;
    margin-top: 70px;
    border-radius: 8px;
           box-shadow: 3px 3px 13px Gainsboro;


}
.heading{
  padding-top: 20px;
}

.slider-contenedor{
    width: 100%;
    display: flex

}
.contenido-slider{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;

}
.contenido-slider{
    background: #fff;
    color: black;
    border-radius: 5px;
}




.contenido-slider > img{
    width: 500px;
}

.contenido-slider > div{
    width: 40%;
}

.contenido-slider h2{
    font-weight: normal;
   text-align: justify;
    line-height: 30px;
    font-size: 20px;

}
.pclien{
    color: #68C9F0;
    font-weight: normal;
    text-align: left;
    padding: 15px 0;
    font-size: 20px;
}

/*---------------------- PROBAR JOINHOME-----------------*/

/*---------------------- PROBAR JOINHOME-----------------*/

.price {
    background: #fff;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
    height: 30%;
    width: 100% !important;
    padding-top: 60px;

}

.headblan{
    height: 100%;
    width: 100%;

 

}

.headblan{
   height: 100%;
  width: 100%;
   background:  url(../image/MarcadeAguaIzq.png) ;  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
   background-size: 200px 310px;
     background-position: left top;
       margin-top: 0px;
         

 
}
.headblan2{
    height: 40%;
   background:  url(../image/MarcadeAguaDer.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 120px 100%;
     background-position: right;
     margin-bottom: 90px !important; 
 
}

.contenido-probar{
 height: 50%;
  margin-top:10px;


    

}
.h5{
  color:DeepSkyBlue !important;
   text-align:left;
    font-weight: normal;
      padding-right: 320px;

 
}
.phome{
  color:black !important;
   text-align:left; 
  margin-top: 10px;
      padding-bottom: 40px;
          font-weight: normal;

}
.btn_cont{
 
 padding-right: 940px;
 
     

}





/*HOVER DE IMAGENES*/

.azul {
    background:     #99E3FA;
     min-height: 950px;

}
.container{
    display: flex;
    width: 100%;
    height: 70vh;
    padding: 2% 2%;
    box-sizing: border-box;
}

 .box{
    flex: 1;
    overflow: hidden;
    margin: 4px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.20);
    line-height: 0;
    transition: all 600ms;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.box > .hover img{
    width: 100%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: all 300ms;

}




.box > span{
    font-size: 35px;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
    font-weight: normal;

}

.box:hover{
    flex: 50%;

}









/* --------------------------videos ----------------------------------*/
.videoIntro{
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.videoIntro.active{
    visibility: visible;
    opacity: 1;
}
.videoIntro .VideoInto{
    max-width: 1000px;
    outline: none;
    border-radius: 30px;

}

.closeInto{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    max-width: 40px;
}


.videoExpli{
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.videoExpli.active{
    visibility: visible;
    opacity: 1;
}
.videoExpli .VideoExp{
    max-width: 1000px;
    outline: none;
    border-radius: 30px;
}

.closeExp{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    max-width: 40px;
    filter: invert(1);
}


























/*---------------======================RESPONSIVE-===============================================------------------*/

/*---------------======================RESPONSIVE-===============================================------------------*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    @media  (max-width: 600px){

.videoIntro .VideoInto{
     max-width: 90%;
    }
    
 /* -----------------   header---------------*/
     .content-header {
   
     background:  url(../image/ControlTotal.jpg);  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
     background-size: cover;
         background-position: 73% 90%;
         background-color: white;

}

.textheader{
       width: 90%;
    margin-top: 30px;
}

.controlp{
    width: 100%;
    padding-left: 35px;
    text-align: left;
    float: left;

}
.controlpp{
    padding: 0 35px;
    width: 100%;
    text-align: left;
    float: left;
}



.navbar-barra-submenu a {
   display: block;
    padding: 10px 1px;
    color: #fff;
margin-left: 7px;

}
.a-submenu{
padding-right: 0px;
}
        
.a-submenu-i {
  padding: 0 7px;

}
/*---------------*/
.navbar-barra-subenu a {
     font-size: 12px;
}
.navbar-barra-submenu {
  
         padding-left: 14px;
}

/* ----------------------------CONTROL TOTAL  Y COMUNICACION COMPLETA-----------------*/

.content {
    min-height: 145vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    display:inline-block;
    align-items: center;
}
.about {
    background: #F5FCFF;
   /*padding-top: 20px;*/
   width: 100%;
}

.divpa{
  margin-bottom: 20px;
  min-height: 15vh;
  width: 100%;
padding:  0 30px;
margin: 0;
}
/*.divtitle{
  margin-top: 65px;
}*/
.cards{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-top: 30px;
    flex-direction:column;
}

.cardadmin{
      display: flex; 
       margin: 10px 20px;
        width: 100%;
   text-align: left;
   padding-right: 30px;

}
.cardres{
   margin: 10px 20px;
   width: 100%;
   text-align: left;
      padding-right: 30px;
}
.cardseg{
        margin: 10px 20px;
         width: 100%;
   text-align: left;
      padding-right: 30px;

}
 .texth4a{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
    text-align: left;
 }
    .texth4ad{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
    text-align: left;

 }
    .texth4ar{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
   text-align: left;

 }
 .ph4{
   font-size: 20px;
    color: #000;
     text-align: left;
    padding: 0px 0px;
           width: 100%;
           font-weight: normal;

 }
 .admin-res{
  margin-right: 0px;
 }

 .cardscomu{
    display: flex;
    justify-content: start;
    margin-top: 10px;
        margin-bottom: 10px;
    min-height: 30vh;
    width: 100%;
    padding-left: 0px;
    flex-direction:column;

    }

.titlec {
    font-weight: normal;
    color: #000;
    /*margin-top: 20px;*/
}
.cardscomu .cardvi{
    display: flex;
    min-height: 20vh;
    width: 100%;
    padding: 15px 30px;
}
.cardscomu .cardpe{
    display: flex;
    min-height: 20vh;
    width: 100%;
        padding: 15px 30px;

}
.cardscomu .cardac{
    display: flex;
    min-height: 20vh;
    width: 100%;
            padding: 15px 30px;

}

.texth4vi{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;
    

 }
 .texth4pe{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;

 }
 .texth4ac{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
        font-weight: normal;
text-align: left;

 }

.ph4vi{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
  text-align: left;
  padding-right: 20px;
  font-weight: normal;
  }
 .ph4pe{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     padding-right: 20px;
     font-weight: normal;
    


 }.ph4ac{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     padding-right: 20px;
     font-weight: normal;
   }


/*---------------------- seccion de informacion de ingfrestructura-----------------*/
.aboutia {
    background: #fff;
   min-height: 80vh;
}

 .contentia{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
     margin-top:60px;
        min-height: 44vh;


}
.contentia .servicesBx{
  padding:  30px;
  width: 100%;
  max-height: 340px;
 margin: 10px;
 transition: 0.5s;
 text-align: center;
 background:  #191D45;
}
 .contentia .servicesBxu{
     padding:  30px;
  width: 100%;
  max-height: 340px;
 margin: 0px;
 transition: 0.5s;
 text-align: center;
 background: #1C639E;

}
 .contentia .servicesBxd{
     padding:  30px;
  width: 100%;
  max-height: 340px;
 margin: 10px;
 transition: 0.5s;
 text-align: center;
     background: #15ABE0;

}

 .contentia .servicesBx h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
      padding-bottom: 15px;
}

.contentia .servicesBx p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;

}
.contentia .servicesBxu h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
      padding-bottom: 15px;
}

.contentia .servicesBxu p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;

}

.contentia .servicesBxd h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
    padding-bottom: 10px;
}

.contentia .servicesBxd p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  font-weight: normal;
}

.h1o-infra{
 
  font-size: 25px; 
  font-weight: normal;
    color: #000;
  padding-top: 65px;
  padding-left: 20px;
  padding-right: 20px;

}

/*---------------------- SECCION DE OPINION CLIENTES-----------------*/


.notice{
    padding: 0!important;
    width: 100%;
    margin: 0!important;
    overflow: hidden;
    min-height: 50vh;
    background: #fff;
}
.contenedor_s {
    width: 97%;
    overflow: hidden;
    border-radius: 8px;
           box-shadow: 3px 3px 13px Gainsboro;
           padding: 0!important;
           margin: 10px!important;


}

.slider-contenedor{
    width: 100%;
    display: flex;

}
.contenido-slider{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;

}
.contenido-slider{
    background: #fff;
    color: black;
    border-radius: 5px;
    display: flex;
    flex-direction:column;
    width: 100%;
}




.contenido-slider > img{
    width: 250px;
    margin-top: 20px;
}

.contenido-slider > div{
    width: 100%;
    padding: 10px;
}

.contenido-slider h2{
    font-weight: normal;
   text-align: center;
    line-height: 1.2;
    font-size: 20px;

}
.pclien{
    color: #68C9F0;
    font-weight: normal;
    text-align: center;
    padding: 15px 0;
    font-size: 20px;
}
.h2notice{
  font-size:25px;
  margin-top: 60px; 
  font-weight: normal;
    margin-bottom: 65px; 

}

/*---------------------- PROBAR JOINHOME-----------------*/

.price {
    background: #fff;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
           height: 50vh;
           margin: 0!important;
}
.content-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    display:inline-block;
    align-items: center;
    min-height: 40vh;
    margin: 0!important;
}


.headblan{
  height: 300px;
    width: 100%;
   box-shadow: 3px 3px 13px Gainsboro;
   background:  url(../image/MarcadeAguaIzq1.png) left no-repeat;  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
   background-size: 190px 100%;
     background-position: left;
         margin: 0px;
 
}
.headblan2{
  height: 300px;
    width: 100%;
   background:  url(../image/MarcadeAguaDer.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 150px 80%;
     background-position: right; 
}
.contenido-probar{
  margin-top: 10px;
}
.h5{
  margin-left: 0px;
  width: 100%;
  color:DeepSkyBlue !important;
   text-align:center; 
   font-weight: normal;
         padding-right: 0px;

}
.phome{
  color:black !important;
   text-align:center; 
     font-size: 20px;
  margin-left: 0px;
  margin-top: 10px;
    
      padding-bottom: 40px;
}
.btnayuda{
     text-decoration: none;
    padding: 4px;
    font-size: 20px;
    color: #fff;
    background-color:  #15ABE0;
    border-radius: 15px;
     margin-left: 0px;
     text-align: center;
     font-weight: normal;
}


}

 /* ---============================================================================================================================responsividad========================================================---------------*/
  /* ---============================================================================================================================responsividad========================================================---------------*/
 /* ---============================================================================================================================responsividad========================================================---------------*/
 /* ---============================================================================================================================responsividad========================================================---------------*/
 /* ---============================================================================================================================responsividad========================================================---------------*/
 /* ---============================================================================================================================responsividad========================================================---------------*/
 /* ---============================================================================================================================responsividad========================================================---------------*/
 @media  (min-width: 600px) and (max-width: 900px){
.videoIntro .VideoInto{
     max-width: 90%;
    }
    

 /* -----------------   header---------------*/
     .content-header {
   
     background:  url(../image/ControlTotal.jpg);  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
     background-size: cover;
         background-position: 73% 90%;
         background-color: white;

}

.textheader{
       width: 90%;
    margin-top: 30px;
}

.controlp{
    width: 100%;
    padding-left: 35px;
    text-align: left;
    float: left;

}
.controlpp{
    padding: 0 35px;
    width: 100%;
    text-align: left;
    float: left;
}
/*---------------*/
.navbar-barra-submenu a {
   display: block;
    padding: 10px 0px;
    color: #fff;
margin-left: 25px;
}

/* ----------------------------CONTROL TOTAL  Y COMUNICACION COMPLETA-----------------*/

/*.content {
    min-height: 145vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    display:inline-block;
    align-items: center;
}*/
.about {
    background: #F5FCFF;  
   padding-top: 20px;
   width: 100%;
}

.divpa{
  margin-bottom: 20px;
  min-height: 15vh;
  width: 100%;
padding:  0 30px;
margin: 0;
}

.cards{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 60px;
}

.cardadmin{
      display: flex; 
       margin: 10px 20px;
        width: 300px;
   text-align: left;
   /*padding-right: 30px;*/

}
.cardres{
   margin: 10px 20px;
   width: 300px;
   text-align: left;
      /*padding-right: 30px;*/
}
.cardseg{
        margin: 10px 20px;
         width: 300px;
   text-align: left;
      /*padding-right: 30px;*/

}
 .texth4a{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
    text-align: left;
 }
    .texth4ad{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
    text-align: left;

 }
    .texth4ar{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
   text-align: left;

 }
 .ph4{
   font-size: 20px;
    color: #000;
     text-align: left;
    padding: 0px 0px;
           width: 100%;
           font-weight: normal;

 }
 .admin-res{
  margin-right: 0px;
 }

 .cardscomu{
    display: flex;
    justify-content: start;
    margin-top: 15px;
    min-height: 10vh;
    width: 100%;
    padding-left: 0px;
    flex-direction:column;

    }

.titlec {
    font-weight: normal;
    color: #000;
    margin-top: 20px;
}
.cardscomu .cardvi{
    display: flex;
    min-height: 10vh;
    width: 100%;
        padding: 15px 55px;

}
.cardscomu .cardpe{
    display: flex;
    min-height: 10vh;
    width: 100%;
    padding: 15px 55px;

}
.cardscomu .cardac{
    display: flex;
    min-height: 10vh;
    width: 100%;
       padding: 15px 55px;


}

.texth4vi{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;
    

 }
 .texth4pe{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;

 }
 .texth4ac{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
        font-weight: normal;
text-align: left;

 }

.ph4vi{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
  text-align: left;
  padding-right: 20px;
  font-weight: normal;
  }
 .ph4pe{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     padding-right: 20px;
     font-weight: normal;
    


 }.ph4ac{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     padding-right: 20px;
     font-weight: normal;
   }


/*---------------------- seccion de informacion de ingfrestructura-----------------*/
.aboutia {
    background: #fff;
   min-height: 80vh;
}

 .contentia{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
     margin-top:95px;
        min-height: 44vh;


}
.contentia .servicesBx{
  padding:  30px;
  width: 100%;
  max-height: 340px;
 margin: 10px;
 transition: 0.5s;
 text-align: center;
 background:  #191D45;
}
 .contentia .servicesBxu{
     padding:  30px;
  width: 100%;
  max-height: 340px;
 margin: 0px;
 transition: 0.5s;
 text-align: center;
 background: #1C639E;

}
 .contentia .servicesBxd{
     padding:  30px;
  width: 100%;
  max-height: 340px;
 margin: 10px;
 transition: 0.5s;
 text-align: center;
     background: #15ABE0;

}

 .contentia .servicesBx h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
      padding-bottom: 15px;
}

.contentia .servicesBx p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;

}
.contentia .servicesBxu h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
      padding-bottom: 15px;
}

.contentia .servicesBxu p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;

}

.contentia .servicesBxd h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
    padding-bottom: 10px;
}

.contentia .servicesBxd p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  font-weight: normal;
}

.h1o-infra{
 
  font-size: 25px; 
  font-weight: normal;
    color: #000;
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
    padding-bottom: 0px;

}

/*---------------------- SECCION DE OPINION CLIENTES-----------------*/


.notice{
    padding: 0!important;
    width: 100%;
    margin: 0!important;
    overflow: hidden;
    min-height: 50vh;
    background: #fff;
}
.contenedor_s {
    width: 98%;
    overflow: hidden;
    border-radius: 8px;
           box-shadow: 3px 3px 13px Gainsboro;
           padding: 0!important;
           margin: 10px!important;


}

.slider-contenedor{
    width: 100%;
    display: flex;

}
.contenido-slider{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;

}
.contenido-slider{
    background: #fff;
    color: black;
    border-radius: 5px;
    display: flex;
    flex-direction:column;
    width: 100%;
}




.contenido-slider > img{
    width: 250px;
    margin-top: 20px;
}

.contenido-slider > div{
    width: 100%;
    padding: 10px;
}

.contenido-slider h2{
    font-weight: normal;
   text-align: center;
    line-height: 1.2;
    font-size: 20px;

}
.pclien{
    color: #68C9F0;
    font-weight: normal;
    text-align: center;
    padding: 15px 0;
    font-size: 20px;
}
.h2notice{
  font-size:25px;
  margin-top: 40px; 
  font-weight: normal;
    margin-bottom: 65px; 

}

/*---------------------- PROBAR JOINHOME-----------------*/

.price {
    background: #fff;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
           height: 50vh;
           margin: 0!important;


}
.content-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    display:inline-block;
    align-items: center;
    min-height: 40vh;

           margin: 0!important;

}


.headblan{
  height: 300px;
    width: 100%;
   box-shadow: 3px 3px 13px Gainsboro;
   background:  url(../image/MarcadeAguaIzq1.png) left no-repeat;  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
   background-size: 190px 100%;
     background-position: left;
         margin: 0px;
 
}
.headblan2{
  height: 300px;
    width: 100%;
   background:  url(../image/MarcadeAguaDer.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 150px 80%;
     background-position: right; 
}
.contenido-probar{
  margin-top: 10px;
}
.h5{
  margin-left: 0px;
  width: 100%;
  color:DeepSkyBlue !important;
   text-align:center; 
   font-weight: normal;
         padding-right: 0px;

}
.phome{
  color:black !important;
   text-align:center; 
     font-size: 20px;
  margin-left: 0px;
  margin-top: 10px;
    
      padding-bottom: 40px;
}
.btnayuda{
     text-decoration: none;
    padding: 4px;
    font-size: 20px;
    color: #fff;
    background-color:  #15ABE0;
    border-radius: 15px;
     margin-left: 0px;
     text-align: center;
     font-weight: normal;
}


}






 /* ---============================================================responsividad========================================================---------------*/
 /* ---============================================================responsividad========================================================---------------*/
 /* ---============================================================responsividad========================================================---------------*/


 @media  (min-width: 900px) and (max-width: 1025px){
  /*----------------------============================================================================== PROBAR JOINHOME==============================-----------------*/
.videoIntro .VideoInto{
     max-width: 90%;
    }
    
   /* -----------------   header---------------*/
     
 /* -----------------   header---------------*/
     .content-header {
   
     background:  url(../image/ControlTotal.jpg);  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
     background-size: cover;
         background-position: 73% 90%;
         background-color: white;

}

.textheader{
       width: 90%;
    margin-top: 30px;
}

.controlp{
    width: 100%;
    padding-left: 35px;
    text-align: left;
    float: left;

}
.controlpp{
    padding: 0 35px;
    width: 100%;
    text-align: left;
    float: left;
}
/*---------------*/
.navbar-barra-submenu a {
   display: block;
    padding: 10px 0px;
    color: #fff;
margin-left: 25px;
}

/* ----------------------------CONTROL TOTAL  Y COMUNICACION COMPLETA-----------------*/

/*.content {
    min-height: 145vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    display:inline-block;
    align-items: center;
}*/
.about {
    background: #F5FCFF;
   width: 100%;
}

.divpa{
  margin-bottom: 20px;
  min-height: 15vh;
  width: 100%;
padding:  0 30px;
margin: 0;
}

.cards{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0px;
}

.cardadmin{
      display: flex; 
       margin: 10px 20px;
        width: 300px;
   text-align: left;
   /*padding-right: 30px;*/

}
.cardres{
   margin: 10px 20px;
   width: 300px;
   text-align: left;
      /*padding-right: 30px;*/
}
.cardseg{
        margin: 10px 20px;
         width: 300px;
   text-align: left;
      /*padding-right: 30px;*/

}
 .texth4a{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
    text-align: left;
 }
    .texth4ad{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
    text-align: left;

 }
    .texth4ar{
   font-size: 20px;
    color: #00BFFF;
    margin-right: 0px;
    font-weight: normal;
   text-align: left;

 }
 .ph4{
   font-size: 20px;
    color: #000;
     text-align: left;
    padding: 0px 0px;
           width: 100%;
           font-weight: normal;

 }
 .admin-res{
  margin-right: 0px;
 }

 .cardscomu{
    display: flex;
    justify-content: start;
    margin-top: 15px;
    min-height: 30vh;
    width: 100%;
    padding-left: 0px;
    flex-direction:column;

    }

.titlec {
    font-weight: normal;
    color: #000;
    margin-top: 20px;
}
.cardscomu .cardvi{
    display: flex;
    min-height: 20vh;
    width: 100%;
    padding:  15px 100px;
}
.cardscomu .cardpe{
    display: flex;
    min-height: 20vh;
    width: 100%;
        padding: 15px 100px;

}
.cardscomu .cardac{
    display: flex;
    min-height: 20vh;
    width: 100%;
            padding: 15px 100px;

}

.texth4vi{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;
    

 }
 .texth4pe{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
    font-weight: normal;
text-align: left;

 }
 .texth4ac{
   margin-top: 15px;
   font-size: 30px;
    color: #000;
        font-weight: normal;
text-align: left;

 }

.ph4vi{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
  text-align: left;
  padding-right: 20px;
  font-weight: normal;
  }
 .ph4pe{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     padding-right: 20px;
     font-weight: normal;
    


 }.ph4ac{
  margin-top: 0px;
   font-size: 20px;
    color: #000;
     text-align: left;
     padding-right: 20px;
     font-weight: normal;
   }


/*---------------------- seccion de informacion de ingfrestructura-----------------*/
.aboutia {
    background: #fff;
   min-height: 80vh;
}

 .contentia{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
     margin-top:65px;
        min-height: 44vh;

}
.contentia .servicesBx{
  padding:  30px;
  width: 100%;
    min-height: 180px!important;
  max-height: 340px;
 margin: 10px;
 transition: 0.5s;
 text-align: center;
 background:  #191D45;
}
 .contentia .servicesBxu{
     padding:  30px;
  width: 100%;
    min-height: 80px!important;
  max-height: 340px;
 margin: 0px;
 transition: 0.5s;
 text-align: center;
 background: #1C639E;

}
 .contentia .servicesBxd{
     padding:  30px;
  width: 100%;
  max-height: 340px;
    min-height: 180px!important;

 margin: 10px;
 transition: 0.5s;
 text-align: center;
     background: #15ABE0;

}

 .contentia .servicesBx h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
      padding-bottom: 15px;
}

.contentia .servicesBx p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;

}
.contentia .servicesBxu h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
      padding-bottom: 15px;
}

.contentia .servicesBxu p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: normal;

}

.contentia .servicesBxd h4{
    
    font-size: 20px;
    font-weight: normal;
    transition: 0.5s;
    color:#fff;
    padding-bottom: 10px;
}

.contentia .servicesBxd p{
 font-size: 15px;
 margin-top: 20px;
 transition: 0.5s;
  color: #fff;
  width: 100%;
  margin: 0 !important;
  font-weight: normal;
}

.h1o-infra{
 
  font-size: 25px; 
  font-weight: normal;
    color: #000;
  padding-top: 65px;
  padding-left: 20px;
  padding-right: 20px;
}

/*---------------------- SECCION DE OPINION CLIENTES-----------------*/


.notice{
    width: 100%;
    margin: 0!important;
    overflow: hidden;
    min-height: 60vh;
    background: #fff;
}
.contenedor_s {
    width: 98%;
    overflow: hidden;
    border-radius: 8px;
           box-shadow: 3px 3px 13px Gainsboro;
           padding-top: 60!important;
           margin: 10px!important;


}

.slider-contenedor{
    width: 100%;
    display: flex;

}
.contenido-slider{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;

}
.contenido-slider{
    background: #fff;
    color: black;
    border-radius: 5px;
    display: flex;
    flex-direction:column;
    width: 100%;
}




.contenido-slider > img{
    width: 250px;
    margin-top: 20px;
}

.contenido-slider > div{
    width: 100%;
    padding: 10px;
}

.contenido-slider h2{
    font-weight: normal;
   text-align: center;
    line-height: 1.2;
    font-size: 20px;

}
.pclien{
    color: #68C9F0;
    font-weight: normal;
    text-align: center;
    padding: 15px 0;
    font-size: 20px;
}
.h2notice{
  font-size:25px;
  margin-top: 40px; 
    margin-bottom: 60px; 

  font-weight: normal;
}

/*---------------------- PROBAR JOINHOME-----------------*/

.price {
    background: #fff;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
           height: 50vh;
           margin: 0!important;


}
.content-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    display:inline-block;
    align-items: center;
    min-height: 40vh;

           margin: 0!important;

}


.headblan{
  height: 300px;
    width: 100%;
   box-shadow: 3px 3px 13px Gainsboro;
   background:  url(../image/MarcadeAguaIzq1.png) left no-repeat;  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
   background-size: 200px 100%;
     background-position: left;
         margin: 0px;
 
}
.headblan2{
  height: 300px;
    width: 100%;
   background:  url(../image/MarcadeAguaDer.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 150px 80%;
     background-position: right; 
}
.contenido-probar{
  margin-top: 10px;
}
.h5{
  margin-left: 0px;
  width: 100%;
  color:DeepSkyBlue !important;
   text-align:center; 
   font-weight: normal;
         padding-right: 0px;

}
.phome{
  color:black !important;
   text-align:center; 
     font-size: 20px;
  margin-left: 0px;
  margin-top: 10px;
    
      padding-bottom: 40px;
}
.btnayuda{
     text-decoration: none;
    padding: 4px;
    font-size: 20px;
    color: #fff;
    background-color:  #15ABE0;
    border-radius: 15px;
     margin-left: 0px;
     text-align: center;
     font-weight: normal;

}
}