/* VARIABLES */
:root {
    --colorbg: #ECEAE2;
    --colormain: #1F5C77;
    --colortext: #000000;
}

;

/* ----------- */

@font-face {
    font-family: 'helvetica-light';
    src: url('/fonts/helvetica-light.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'helvetica-light', sans-serif;
    font-size: 1.1rem;
}

html {
    height: -webkit-fill-available;
    scroll-behavior: smooth;
}

body {
    background-color: var(--colorbg);
    color: var(--colortext);
    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: var(--colortext);
}

.border-down {
    border-bottom: 1px solid #000;
}
.border-top {
    border-top: 1px solid #000;
}

.text-full {
    font-size: 7.7vw;
    color: var(--colormain);
    opacity: .1;
}

.text-full.eng{
    font-size: 6.8vw;
}

.pt-5rem {
    padding-top: 5rem;
}

.icon {
    max-width: 60px;
}

.arrow {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 7vw;
    height: 3.5vw;
}

.arrow.left {
    background-image: url(../img/arrow-left.svg);
}

.arrow.right {
    background-image: url(../img/arrow-right.svg);
}

a.nav-link {
    color: var(--colortext);
}

a.nav-link:hover {
    color: var(--colormain);
}

.active {
    color: var(--colortext);
    opacity: .5;
}

.active:hover, a.nav-link.active:hover {
    cursor: initial;
    color: var(--colortext);
    opacity: .5;
}

.hero {
    margin: 1rem auto;
}

.bio {
    p {
        font-size: 3vw;
        line-height: 4vw;
        text-indent: 15vw;
    }

    span {
        font-size: 2vw;
        color: var(--colormain);
    }
}


#more-bio {
    font-size: 2vw;
    line-height: 3vw;
    text-indent: 15vw;
    display: none;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.plus-minus {
    button {
        margin-left: 15vw;
        color: var(--colortext);
        background: transparent;
        width: 70px;
        height: 70px;
        position: relative;
        font-size: 50px;
        cursor: pointer;
        border: 0;
        outline: 0;
        padding: 0
    }

    .plus,
    .minus {
        color: var(--colortext);
        background: transparent;
        padding: 10px;
        width: 80px;
        height: 80px;
        line-height: 50px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        box-sizing: border-box;
        transition: .5s all ease-out;
    }

    .plus {
        opacity: 1;
        transform: rotate(0deg);
    }

    button.active .plus {
        opacity: 0;
        transform: rotate(90deg);
    }

    .minus {
        opacity: 0;
        transform: rotate(-90deg);
    }

    button.active .minus {
        opacity: 1;
        transform: rotate(0deg);
    }
}

.contents {

    span {
        color: var(--colortext);
        font-size: 4.5rem;
    }

    .year,
    .personal {
        font-size: 1.6rem;
    }
}

footer {
    background-image: url(../img/Pocha-bg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

footer a:hover{
    color: var(--colormain);
}

.contacto {
    margin-top: 15vw;

    h4 {
        font-size: 4.5vw;
    }

    p {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    a {
        color: var(--colortext);
    }

    a:hover {
        color: var(--colormain);
    }
}

.social {
    p {
        font-size: 1.2rem;
        margin-bottom: 0;
        text-align: center;
    }
}




/* PELICULAS --------------------------------- */

.hero-pelis {
    margin-top: 8vw;

    h1 {
        font-size: 15vw;
    }
}

.hero-pelis.eng {
    h1 {
        font-size: 14vw;
    }
}

.back {
    img {
        width: 1vw;
        min-width: 10px;
    }

    a {
        color: var(--colortext);
    }

    a:hover {
        color: var(--colormain);
    }

    span {
        margin-left: .5rem;
    }
}

.header-pelis {

    >.row {
        background-image: url(../img/Pocha-bg.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 17vw;
    }

}

#films,
#comercials {

    a span,
    a h3 {
        color: var(--colortext);
        font-size: 3rem;
    }

    a:hover span,
    a:hover h3 {
        color: var(--colormain);
    }

    .year,
    .personal {
        font-size: 1.6rem;
    }
}

footer.footer-films {
    background: none;
    background-image: none;
}



/* COMERCIALES --------------------------------- */

.hero-comerciales {
    margin-top: 8vw;

    h1 {
        font-size: 15vw;
    }
}

.hero-comerciales.eng {
    max-height: 19vw;
    h1 {
        font-size: 14vw;
        line-height: 12vw;
    }
}

.header-comerciales {
    background-image: url(../img/Pocha-bg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 18rem;
    margin-bottom: 5rem;
}




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


/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    * {
        font-size: 1rem;
    }

    .pt-5rem {
        padding-top: 2rem;
    }

    .navbar-nav {
        flex-direction: row;

        li:nth-child(2) {
            margin-left: 2rem;
        }
    }

    .contacto {
        margin-top: 10vw;

        /* a {
            color: var(--colormain);
        } */
    }

    .social {
        p {
            font-size: 1rem;
        }
    }

    .hero-pelis.eng {
        h1 {
            font-size: 11vw;
        }
    }

    .hero-comerciales {
        h1 {
            font-size: 12vw;
        }
    }

    .hero-comerciales.eng {
        h1 {
            font-size: 12vw;
        }
    }
    .comercial-portada{
        max-height: 380px;
    }


}



/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .hero {
        margin: 2rem auto;
    }

    .plus-minus {

        .plus,
        .minus {
            width: 60px;
            height: 60px;
        }
    }

    .contents {
        span {
            font-size: 11vw;
        }
    }

    .contacto {
        h4 {
            font-size: 1.5rem;
        }

        p {
            font-size: 1rem;
        }
    }

    .header-pelis {
        >.row {
            padding-top: 23vw;
        }
    }

    #films,
    #comercials {

        a span {
            font-size: 3.5rem;
        }

        a h3 {
            font-size: 1.5rem;
        }
        .row div:first-child {
            padding-left: 0;
        }
        .row div:nth-child(2) {
            padding-right: 0;
        }

    }

    .header-comerciales {
        height: 6rem;
        margin-bottom: 2rem;
        margin-top: -1rem;
    }

    .comercial-portada{
        max-height: 250px;
    }


}