.content {
    min-height: 30vh !important;
    padding: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}
.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;
}

.navbar a {
    display: block;
    padding: 20px 20px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;
    text-align: right;
}

/* --------------------------------ESTILOS DE EMPIEZA AQUI=---------------------------------*/
.divimg{
    height: 5vh;
      width: 120vh;  
}

.img{
    height: 906px;
    background-repeat: no-repeat;
    float: right;

}


.menu-ce, .admin,  .seguridad, .residente{
    display:flex; 

}
.head-empieza{
    text-align: left;
    margin-left:90px;
    padding-top: 40px;


}
.aemp{
    color: #000;
    font-size: 20px;
    padding-top:100px;
   position: relative;
  right: 15px;
}
.aempr{
    color: #000;
    font-size: 20px;
    padding-top:100px;
   position: relative;
  right: 15px;
}

.aemps{
    color: #000;
    font-size: 20px;
    padding-top:100px;
   position: relative;
  right: 85px;
}
.imgava{
    width: 10px; transform: rotate(-180deg); 
    margin: 0px;
     cursor: pointer;
}
h1{
    font-weight: normal;
    font-size: 35px;
}
.ph1{
     padding-top:100px;
     font-size: 20px;
    }





/* ----------------------------flecha de resgreso a soluciones en el header-------------------

    .contenedor_soluciones{
margin-top: 0;
   
}
.logo_flecha{
 width: 35px;
    border-radius:10%;
    transform:rotate(180deg);
}

.admin{
     margin-bottom: 0px;
    color: #fff;


}*/
/* --------------------------------ESTILOS DE EMPIEZA AQUI CARD---------------------------------*/


.tarjetas-empieza{
    display: flex;
    justify-content: space-bettwen;
    padding-left:80px;
    padding-right:20px;
    padding-top: 30px;
    
}

.tarjetas-empieza-seguridad{
    display: flex;
    padding-left:80px;
    padding-right:20px;
    padding-top: 30px;
}

.card{
    position: relative;
     width: 205px;
    height: 250px;
    margin: 10px;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    min-height: 0vh; 
}
.card .face{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    transition: .5s;
}
.card .front{
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 2px 3px #000;
}
.card .front .img-card{
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-top: 15px;

}
.card .front h3{
    margin-top: 15px;
    bottom: 0;
    width: 100%;
    height: 8px;
    line-height: 5px;
    color: #15ABE0;
    font-weight: normal;

}
.pcard{
    padding-top: 7px;
        width: 170px;
        text-align: center;
         padding-right: 8px;
}

.card:hover {
    background: #15ABE0;
    border-radius: 8px;
    cursor: pointer;
}
.card:hover .front .admin-img{
    margin-top: 20px;
    width: 60px;
    height: 60px;
  content:url("../image/Administrador.png");
  background: white;
  border-radius: 50%;
  padding: 5px;

}

.card:hover .front .residente-img{
    margin-top: 20px;
    width: 60px;
    height: 60px;
  content:url("../image/Residentes.png");
    background: white;
  border-radius: 50%;
  padding: 5px;

}

.card:hover .front .seguridad-img{
    margin-top: 20px;
    width: 60px;
    height: 60px;
  content:url("../image/Seguridad.png");
    background: white;
  border-radius: 50%;
  padding: 5px;

}
.card:hover .front h3{
        margin-top: 20px;
       color: white;
}
.card:hover .front .pcard{
  color: white;
}



/*----------------------marcas de agua--------------------------------*/
 .marcaagua1{
    background:  url(../image/MarcadeAguaDer2.png); 
    background-repeat: no-repeat;
   background-size: 250px 45%;
     background-position: top right;
     height: 100%;
 }
.marcaagua2{  
    background:  url(../image/MarcadeAguaIzq.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 250px 42%;
     background-position: bottom left;
     height: 100%;}


/* --------------------------------ESTILOS DE EMPIEZA AQUI ADMINISTRADOR---------------------------------*/

.logo_flecha{
 width: 15px;
    transform:rotate(180deg);
    margin-left: -15px;
       position: relative;
       margin-top: 15px;

}

.card-admin{
    position: relative;
     width: 340px;
    min-height: 160px;
    margin: 0 10px;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
        float: left;
   
}

.card-admin-s{
    position: relative;
    width: 340px;
    min-height: 210px;
    margin: 0 ;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
        float: left;
   
}

.card-admin .face, .card-admin-s .face{
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    transition: .5s;
    padding: 20px 0px !important;


}


.card-admin .front, .card-admin-s .front{
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 2px 5px #000;
}
.card-admin .front .img-card, .card-admin-s .front .img-card{
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-top: 10px;

}
.card-admin .front h3,.card-admin-s .front h3{
    margin-top: 0px;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
}
.card-admin .front p,.card-admin-s .front p{
    bottom: 0;
   
    line-height: 17px;
}
.pcard{
     margin-left: 30px;
    margin-right: 30px;
     font-size: 15px;
     text-align: center;
}

/* --------------------------------ESTILOS DE EMPIEZA AQUI CARD emergencia---------------------------------*/

.card-adminemer{
    position: relative;
     width: 340px;
    min-height: 180px;
    margin: 0px 10px;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
}
.card-adminemer-ind{
    position: relative;
     width: 340px;
    height: 70px;
    margin: 10px;
    margin-top: 5px;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
    min-height: 0vh; 
}



.card-adminemer .faceemer,.card-adminemer-ind .faceemer{
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    transition: .5s;
    padding: 20px 0px !important;

}
.card-adminemer .frontemer, .card-adminemer-ind .frontemer{
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 2px 5px #000;
}
.card-adminemer .frontemer .img-card, .card-adminemer-ind .frontemer .img-card{
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-top: 1px;

}
.card-adminemer .frontemer h3, .card-adminemer-ind .frontemer h3{
    margin-top: 15px;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
}
.pcard{
     margin-left: 30px;
    margin-right: 30px;
     font-size: 15px;
     text-align: center;
}

/* --------------------------------ESTILOS DE EMPIEZA AQUI PERFIL---------------------------------*/
.card-adminper{
    position: relative;
     width: 40px;
    height: 70px;
    margin: 0px;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
}
.card-adminper-ind{
    position: relative;
     width: 340px;
    min-height: 70px;
    margin-left: 10px;
        margin-bottom: 20px;

    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
}
.card-adminper .faceper,.card-adminper-ind .faceper{
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    transition: .5s;
        padding: 20px 0px !important;

}
.card-adminper .frontper,.card-adminper-ind .frontper{
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 2px 5px #000;
}
.card-adminper .frontper .img-card, .card-adminper-ind .frontper .img-card{
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-top: 15px;

}
.card-adminper .frontper h3, .card-adminper-ind .frontper h3{
    margin-top: 15px;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
}
.pcard{
     margin-left: 30px;
    margin-right: 30px;
     font-size: 15px;
     text-align: center;
}


/* --------------------------------ESTILOS DE EMPIEZA AQUi SEGURIDAD acceso---------------------------------*/



.card-admin1{
     position: relative;
     width: 410px!important;
    min-height: 210px;
    margin: 0 ;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
        float: left;
    }

.card-admin1 .face1{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px 0px !important;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    transition: .5s;
    float: left;

}

.card-admin1 .front1{
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 2px 5px #000;
}
.card-admin1 .front1 .img-card{
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-top: 10px;

}
.card-admin1 .front1 h3{
    margin-top: 0px;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
}
.card-admin1 .front1 p{
    bottom: 0;
    line-height: 17px;
}












































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






@media (min-width: 300px) and (max-width: 500px) { /* ----------------- (Size: 412 x 915) (Movil Vertical)---------------*/

    /* -----------------   menu navbar---------------*/

            .navbar a {
            display: block;
            padding: 10px 15px;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 12px;
        }

.img{
    height: 906px;
    background-repeat: no-repeat;
    float: right;
    display: none;
}
.head-empieza{
    text-align: left;
    margin-left:70px;
    padding-top: 0px;
}

/* --------------------------------ESTILOS DE EMPIEZA AQUI CARD---------------------------------*/


.tarjetas-empieza{
    flex-direction: column;
    justify-content: center;
        align-items:center;

    
}

.card{
    position: relative;
     width: 80%;
    height: 305px;
   
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
}

.card .front h3{
    margin-top: 14px;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
    font-size: 20px;
    font-weight: normal;

}
.pcard{
     margin-left: 30px;
    margin-right: 0px;
     font-size: 20px;
     text-align: center;
}


/*----------------------marcas de agua--------------------------------*/
 .marcaagua1{
    background:  url(../image/MarcadeAguaDer2.png); 
    background-repeat: no-repeat;
   background-size: 200px 30%;
     background-position: top right;
     height: 100%;
 }
.marcaagua2{  
    background:  url(../image/MarcadeAguaIzq.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 350px 50%;
     background-position: bottom left;
     height: 100%;}


}


@media (min-width: 500px) and  (max-width:  650px){ /* -----------------   motorola G20---------------*/
}


@media  (min-width: 768px) and (max-width:  830px){ /* -----------------   (Size: 915x412) IPAD 


    /* -----------------   menu navbar---------------*/

            .navbar a {
            display: block;
            padding: 10px 15px;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 12px;
        }

.img{
    height: 906px;
    background-repeat: no-repeat;
    float: right;
    display: none;
}
.head-empieza{
    text-align: left;
    margin-left:70px;
    padding-top: 0px;
}

/* --------------------------------ESTILOS DE EMPIEZA AQUI CARD---------------------------------*/


.tarjetas-empieza{
    flex-direction: row;
    justify-content: center;
        align-items:center;
   
  
    
}

.card{
    position: relative;
     width: 70%;
    height: 305px;
   
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    align-items:center;
    justify-content:  center;
}

.card .front h3{
    margin-top: 14px;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 5px;
    color: #15ABE0;
    text-align: center;
    font-size: 20px;
    font-weight: normal;

}
.pcard{
     margin-left: 30px;
    margin-right: 30px;
     font-size: 20px;
     text-align: center;
}


/*----------------------marcas de agua--------------------------------*/
 .marcaagua1{
    background:  url(../image/MarcadeAguaDer2.png); 
    background-repeat: no-repeat;
   background-size: 200px 40%;
     background-position: top right;
      min-height: 82vh;
 }
.marcaagua2{  
    background:  url(../image/MarcadeAguaIzq.png);  /* Chrome 10-25, Safari 5.1-6 */
    background-repeat: no-repeat;
   background-size: 350px 60%;
     background-position: bottom left;
     min-height: 82vh;
  
}
}

@media  (min-width: 830px) and (max-width:  880px){ /* -----------------   (Size: 915x412) (movil horizontal moto g20)---------------*/

}

@media  (min-width: 880px) and (max-width:  950px){ /* -----------------   (Size: 915x412) (movil horizontal VIVO)---------------*/
}


@media  (min-width: 1048px) and (max-width:  1370px){ /* -----------------   (Size: 1366x768) (Noteboock)---------------*/



}



@media  (min-width: 1075px) { /* -----------------   (Size: 1920 X 1080) (Laptop)---------------*/
.textheader{
   width: 75%;
    margin-top: 90px;

}
.textheader p {
    margin-bottom: 40px;
    font-size: 35px!important;
    color: #fff;
    padding-left: 80px;
    position: left;
}

}