/*--------- pages legales ---------*/

.legal .first {
    height: 30vh;
    padding-top: 12vh;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0, rgba(0, 0, 0, 0.70) 30%, var(--secondary-fixed-color) 100%),
        url("../img/illustrations/legal_background.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 20%;
}

.legal .first .container .presentation-legal {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 2vh;
}

.legal .first .container .presentation-legal span {
    display: inline-block;
    height: 30px;
    width: 2px;
    background-color: var(--primary-fixed-color);
    margin-right: 25px;
}

.legal  .first .container .presentation-legal p {
    max-width: 45vw;
}

.legal .content-text .container {
    display: flex;
    flex-direction: column;
    margin-bottom: 2vh;
}

.legal .content-text .container h2.title {
    font-size: 2rem;
    margin: 3vh 0 2vh;
}

.legal .content-text .container p, .legal .content-text .container a.solo {
    margin-left: 55px;
    text-align: justify;
}

.legal .content-text .container p strong {
    padding-top: 1vh !important;
}

.legal .content-text .container a:hover {
    text-decoration: underline;
}

.legal .content-text .container .btn1:hover {
    text-decoration: none;
}

.legal .content-text .container .btn1 {
    margin: 2vh auto;
}

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

    .legal .first .container .presentation-legal p {
        max-width: 55vw;
    }

    .legal .content-text .container h2.title {
        font-size: 1.8rem;
    }

    .legal .content-text .container p, .legal .content-text .container a.solo {
        margin-left: 50px;
    }
}

@media screen and (max-width: 769px) {

    .legal .first {
        height: 25vh;
    }

    .legal .first .container .presentation-legal p {
        max-width: 60vw;
    }

    .legal .content-text .container h2.title {
        font-size: 1.6rem;
        margin: 2vh 0 1vh;
    }

    .legal .content-text .container p, .legal .content-text .container a.solo {
        margin-left: 35px;
    }
}

@media screen and (max-width: 570px) {

    .legal .first .container .presentation-legal p {
        max-width: 80vw;
    }

    .legal .content-text .container h2.title {
        font-size: 1.4rem;
    }

    .legal .content-text .container p, .legal .content-text .container a.solo {
        margin-left: 20px;
    }
}