.principal__background {
    background-image: url('/imagenes/pasantias/paralax.jpg');
    height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 575.98px) {
    .principal__background {
        height: 500px;
    }
}

.principal__text-background {
    background-color: rgba(0, 0, 0, .8);
    padding: 10vh 20vh;
}

.principal__text {
    text-transform: uppercase;
    opacity: 1;
    color: #c49c39;
    font-size: 60px;
}

.experiencia__cols {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.experiencia__space {
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.experiencia__title {
    padding-top: 10vh;
    margin-bottom: 10vh;
    font-size: 48px;
    font-weight: 800;
    color: rgba(0, 87, 123, 1);
    word-spacing: .5em;
}

.experiencia__backgrounds-format {
    border-radius: 2px;
    background-repeat: no-repeat;
    background-position: center !important;
    max-width: 310px;
    height: 241px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.experiencia__background-civil {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/civil.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-civil:hover {
    background-image: url('/imagenes/areasdepractica/civil.jpg');
    cursor: pointer;
}

.experiencia__background-amparo {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/amparo.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-amparo:hover {
    background-image: url('/imagenes/areasdepractica/amparo.jpg');
    cursor: pointer;
}

.experiencia__background-familiar {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/familiar.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-familiar:hover {
    background-image: url('/imagenes/areasdepractica/familiar.jpg');
    cursor: pointer;
}

.experiencia__background-ambiental {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/ambiental.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-ambiental:hover {
    background-image: url('/imagenes/areasdepractica/ambiental.jpg');
    cursor: pointer;
}

.experiencia__background-penal {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/penal.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-penal:hover {
    background-image: url('/imagenes/areasdepractica/penal.jpg');
    cursor: pointer;
}

.experiencia__background-laboral {
    background: linear-gradient(0deg, rgba(4, 126, 179, 0.5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/laboral.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-laboral:hover {
    background-image: url('/imagenes/areasdepractica/laboral.jpg');
    cursor: pointer;
}

.experiencia__background-corporativo {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/corporativo.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-corporativo:hover {
    background-image: url('/imagenes/areasdepractica/corporativo.jpg');
    cursor: pointer;
}

.experiencia__background-migratorio {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/migratorio.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-migratorio:hover {
    background-image: url('/imagenes/areasdepractica/migratorio.jpg');
    cursor: pointer;
}

.experiencia__background-agrario {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/agrario.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-agrario:hover {
    background-image: url('/imagenes/areasdepractica/agrario.jpg');
    cursor: pointer;
}

.experiencia__background-administrativo {
    background: linear-gradient(0deg, rgba(0, 87, 123, .5), rgba(0, 87, 123, .5)), url('/imagenes/areasdepractica/administrativo.jpg');
    background-size: cover;
    width: 100%;
}
.experiencia__background-administrativo:hover {
    background-image: url('/imagenes/areasdepractica/administrativo.jpg');
    cursor: pointer;
}



.experiencia__icons {
    width: 148px;
    height: 148px;
}

.experiencia__subtext {
    font-size: 28px;
    margin-top: 2vh;
}

.experiencia__description-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.experiencia__description-container {
    margin-top: 5vh;
    margin-bottom: 5vh;
    width: 961px;
    border-left: 5px solid #c49c39;
    border-right: 5px solid #c49c39;
}

.experiencia__description-container-text {
    text-align: justify;
    margin-left: 10vh;
    margin-right: 10vh;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 25px;
}


.modal__description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal__column-images {
    background-color: #0d3d4c;
}

#modal__image {
    margin-top: 5vh;
    width: 100%;
}

#modal__icon {
    margin: 10vh;
    width: 100px;
}

/*
#modal__title {
    margin-top: 10vh;
    text-transform: uppercase;
    border: 3px solid#c49c39;
    padding: 10px 50px;
    font-size: 30px;
} */


.modal__container {
    display: flex;
    flex-direction: row;
}

.cols__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0d3d4c;
}

.cols__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#modal__title {
    margin-top: 10vh;
    text-transform: uppercase;
    border: 3px solid#c49c39;
    padding: 10px 50px;
    font-size: 30px;
}

#modal__text {
    text-align: justify;
    margin-top: 5vh;
    margin-bottom: 10vh;
    font-size: 25px;
    margin-left: 5vh;
    margin-right: 5vh;
}

@media (max-width: 575.98px) {
    #modal__text {
        text-align: left;
    }
}


@media (max-width: 768px) {
    .modal__container {
        flex-direction: column;
    }

    #modal__icon {
        display: none;
    }

    .principal__text-background {
        background-color: rgba(0, 0, 0, .8);
        padding: 5vh 10vh;
    }

    .principal__text {
        font-size: 30px;
        text-align: center;
    }

    .experiencia__title {
        padding-top: 10vh;
        margin-bottom: 10vh;
        font-size: 24px;
        letter-spacing: 1px;
    }

    .experiencia__description-container-text {
        margin-left: 3vh;
        margin-right: 3vh;
        font-size: 20px;
        text-align: left;
    }
}