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


}

body {
   width: 100%;
   height: 100%;
      text-align: center;
   overflow-x: hidden; 
}

*/


p {
  /*  margin-bottom: 40px;
    font-size: 25px;
    color: #000;
    padding: 0 100px;
    position: left;*/

}
/* ----------------------------header imagen-------------------*/
.content-header {
   
     background:  url(../image/Nosotros.jpg);  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
     background-size: cover;
         background-position: right;
         background-color: white;
         margin-right: 0px;

}

.circulos_azules{
    width: 100%;
    height: 100%;
    background:  url(../image/CirculosNosotros.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
    background-size: 490px 65%;
    background-position: 60% 100%;
    display: flex;
    align-items: center;

}

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

}
.controlpp{
    color: #000;
    padding-left: 35px;
    width: 50%;
    text-align: left;
    float: left;
}
/*.btn {
 
     padding: 5px 20px;
    font-size: 20px;
     background: #15ABE0;
      text-decoration: none;

      color:white;
      border-radius:50px;
      border: 1.5px solid white;
      transition: all 0.9s;
      text-align: center;
      width:90%;
      font-weight: normal;

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

.btn-home {
    margin-left: 60px;
    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: 0px 5px;
    color: #fff;
margin-left: 40px;
      font-size: 18px;

}

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

.content-about {
      padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content {
    min-height: 30vh;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about {
   min-height: 30vh;
       width: 100%;
       background: #fff;

}
.pa{
    color: #000;
    font-size: 25px;
}
.psim{
    margin-top: 40px;
    padding: 0 100px;
     margin-bottom: 25px !important;
}
.val{
    text-align: center;
     margin-top: 65px !important;
}
.cards{
    display: flex;
    justify-content: space-evenly;
    padding-left: 0px;
        flex-wrap:wrap;
        margin-left: 70px;
        margin-right: 70px;
        margin-top: 30px !important;
    }

.divcard{
    display: flex; 
    min-height: 15vh;
    width: 340px; 
    margin: 0 10px; 
 }

.cards .card{
    display: flex; 
    margin-top: 0;

}
.cards .card img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    display: flex;
 }
/* .texth4{
   margin-top: 1px;
   font-size: 25px;
    color: #000;
    margin-right: 150px;
 }*/
  .texth4a{
    color: #15ABE0;

 }
   .texth4ai{

    color: #15ABE0;

 }
  .texth4ad{
    color: #15ABE0;

 }
 
/* .ph4{
  margin-top: 1px;
   font-size: 20px;
    color: #000;
     text-align: left;
    padding: 0;
 }*/

 .admin{
      padding: 10px;
      width: 100%!important;
      text-align: left;
 }
 .map_logo{
    margin-top: 45px;
 }
  .map_logo_1{
    margin-top:  55px;
 
 }






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

 .contentia{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
       
        min-height: 60vh;
}
.contentia .servicesBx{
  padding:  30px;
  max-width: 340px;
  max-height: 180px;
 margin: 20px;
 transition: 0.5s;
 text-align: center;
 background:  #191D45;
}

 .contentia .servicesBx h4{
    
    font-size: 18px;
    transition: 0.5s;
    color:#fff;
}
.pjoin{
   padding-right: 90px;
    padding-left: 150px;
    padding-top: 30px;
}
.pjoindif{
    margin-left:90px; 
     margin-top: 20px !important;

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

/* --------------------TARJETAS CON GIRO------------------ */
.divtextimg{
    display:flex; 
  min-height: 15vh;
          flex-wrap:wrap;
     justify-content:  center;
}
.divcardgiro{

  display:flex; 
  min-height: 15vh;
  flex-wrap:wrap;
  justify-content:  center;
  margin-top: 15px !important;
}

.card{
    position: relative;
     width: 300px;
    height: 95px;
    margin: 10px;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
    min-height: 0vh;
    margin-right: 50px; 
}
.card .face{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1px;
    overflow: hidden;
    transition: .5s;
}
.card .front{
    transform: perspective(600px) rotateY(0deg);
   
}
.card .front img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-top:15px;
   }
.card .front h3{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
        padding-top: 12px;
}
.h3giro{
  
}
.card .back{
    transform: perspective(600px) rotateY(180deg);
    background: rgb(21,171,224);
    padding: 10px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;


}

.card .back .pcard{
  
   
     color: #fff;
     text-align: center;
    padding-top: 2px;


}
.card:hover .front{
    transform: perspective(600px) rotateY(180deg);
}
.card:hover .back{
    transform: perspective(600px) rotateY(360deg);
}













/*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;
}

.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-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/*---------------====================================================================RESPONSIVE-=====================================================================================================------------------*/
/* ////////////////////////////////RESOLUCION CELULARES//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  @media  (max-width: 600px){
/*=========header=======*/
.content-header {
   
     background:  url(../image/Nosotros.jpg);  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
     background-size: cover;
         background-position: 73% 90%;
         background-color: white;

}



/*==========================*/
.controlp{
    color: #000;
    width: 100%;
    padding-left: 35px;
    text-align: left;
    float: left;

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

/*========================*/
.psim{
    padding: 0 20px;

}

/*==========================*/
 .contentia{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
       
        min-height: 5vh;
}
.cards{
    display: flex;
    flex-direction: column;
 text-align: center;
    align-items: center;   
            margin: 0 80px;

 
}
     
.divcard{
    display: flex; 
    min-height: 15vh;
      width:100%!important; 

 }

/*==============================*/
.divcardgiro{

  display:flex; 
  margin-bottom: 70px;
  padding-left: 50px;
}

.pjoin{
   
   padding-right: 25px;
    padding-left: 25px;
    padding-top: 40px;
}

.pjoindif{
    margin-left: 0px; 
     margin-top: 40px !important;
  }


}



 @media  (min-width: 600px) and (max-width: 800px){
  /*=========header=======*/
.content-header {
   
     background:  url(../image/Nosotros.jpg);  /* Chrome 10-25, Safari 5.1-6 */
     background-repeat: no-repeat;
     background-size: cover;
         background-position: 73% 90%;
         background-color: white;

}

/*==================================*/
.controlp{
    color: #000;
    width: 100%;
    padding-left: 35px;
    text-align: left;
    float: left;

}
.controlpp{
    color: #000;
    padding: 0 35px;
    width: 100%;
    text-align: left;
    float: left;
}
/*========================*/
.psim{
    padding: 0 20px;

}

/*==========================*/
.cards{
    display: flex;
    flex-direction: column;
 text-align: center;
    align-items: center;
                margin: 0 10px;

    }

         .divcard{
    display: flex; 
    min-height: 15vh;
      width:100% !important;

 }
/*==============================*/
.divcardgiro{

  display:flex; 
}


.pjoin{
   padding-right: 50px;
    padding-left: 50px;
    padding-top: 40px;
}


}






  @media  (min-width: 800px) and (max-width: 1025px){

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

}

/*==========================*/
.controlp{
    color: #000;
    width: 100%;
    padding-left: 35px;
    text-align: left;
    float: left;

}
.controlpp{
    color: #000;
    padding: 0 35px;
    width: 70%;
    text-align: left;
    float: left;
}
/*==========================*/
.cards{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
                margin: 0 10px;

    }
         .divcard{
    display: flex; 
    min-height: 15vh;
      width:80%; 


 }


.pjoin{
   padding-right: 90px;
    padding-left: 100px;
    padding-top: 40px;
}

 }