.cntPrimario {
    background-color:  #e1e5ea; 
    box-shadow: 1px -5px 5px 5px #e1e5ea;   
    padding: 50px 0px;
    text-align: justify;
}

.alCntCenter {
    align-content: center;
}

.cntSecundario {
 background-color: #d0d9dd;
 box-shadow: 1px -5px 5px 5px #d0d9dd;
 text-align: center;
 padding: 50px 0px; 
}

.cntVision {
    background-color:  #e1e5ea; 
    box-shadow: 1px -5px 5px 5px #e1e5ea;   
    padding: 50px 0px;
    text-align: center;
}

.cardValores {
    display: inline-flex;
    width: 600px;
    height: 430px;
}

.cardValores img {
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.cardValores img:hover {
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

.cardContent p{
    position: absolute;
    opacity: 0;
    max-width: 80%;
    transition: opacity .3s ease-out;
}

.imgRespeto{
    background-image: url('../img/Respetoabr.svg');
    background-position: center;
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgRespeto:hover{
    background-image: url('../img/Respeto.svg');
    background-position: center;
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

.imgIntegridad{
    background-image: url('../img/Integridadabr.svg');
    background-position: center;
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgIntegridad:hover{
    background-image: url('../img/Integridad.svg');
    background-position: center;
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

.imgSolidaridad{
    background-image: url('../img/Solidaridadabr.svg');
    background-position: center;
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgSolidaridad:hover{
    background-image: url('../img/Solidaridad.svg');
    background-position: center;
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

.imgExcelencia{
    background-image: url('../img/Excelenciaabr.svg');
    background-position: center;
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgExcelencia:hover{
    background-image: url('../img/Excelencia.svg');
    background-position: center;
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

.imgResponsabilidad{
    background-image: url('../img/Responsabilidadsabr.svg');
    background-position: center;
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgResponsabilidad:hover{
    background-image: url('../img/Responsabilidads.svg');
    background-position: center;
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

.imgDemocracia{
    background-image: url('../img/Democraciaabr.svg');
    background-position: center;
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.imgDemocracia:hover{
    background-image: url('../img/Democracia.svg');
    background-position: center;
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

@media screen and (max-width: 768px) {
    .cardValores {
        width: 100%;
    }
}