@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Ranchers&display=swap');
    /* ---------------> GLOBAL */
    
    * {
        font-family: 'Ranchers', cursive;
    }
    
    .btn {
        font-family: " Arial", "Helvetica", "sans-serif";
        font-weight: bold;
    }
    
    .purple {
        background-color: purple;
        color: snow;
    }
    
    .blue {
        color: snow;
        background-color: #17a2b8;
        border-color: #17a2b8;
    }
    
    .yellow {
        color: #212529;
        background-color: #ffc107;
        border-color: #ffc107;
    }
    
    .gray {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    .green {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
    }
    
    .red {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }
    
    .dark {
        color: #fff;
        background-color: #343a40 !important;
        border-color: #343a40 !important;
    }
    
    .m-top-bot-4vh {
        margin-top: 4vh;
        margin-bottom: 1vh;
    }
    
    .jumbotron {
        margin-bottom: 13px;
        border-bottom: 3px solid;
        /* opacity: 0.9; */
        box-shadow: 7px 6px 8px 2px black;
    }
    
    .slid {
        display: flex;
        overflow: auto;
    }
    
    .video {
        height: 26vh;
        width: 100%;
        margin-right: 10px
    }
    
    .allert {
        font-family: "Arial", "Helvetica", "sans-serif" !important;
        font-size: x-large;
    }
    
    .mb-0 {
        font-family: fantasy;
    }
    
    @media screen and (max-width:650px) {
        .img {
            margin-left: 15px;
        }
    }
    
    @media screen and (min-width:651px) {
        .img {
            margin-left: 15px;
        }
    }
    /*----------> NAV  */
    /* NAV BOTAO FOOTER QUANDO TIVER EM MOBILE */
    
    @media screen and (max-width:600px) {
        .buttonNavFooterModile {
            display: none;
        }
        /* .NavLogoMobile {} */
        .FooterModile {
            bottom: 0;
            position: fixed;
            align-items: center;
            right: 1px;
            left: 1px;
            width: 100%;
        }
    }
    
    @media screen and (min-width:601px) {
        .FooterModile {
            display: none;
        }
        .buttonNavFooterModile {
            color: snow;
            background-color: #00f;
            border-color: #00f
        }
    }
    /* ----------------> HEADER */
    
    .card-texto {
        padding: 1.25rem;
        text-align: center;
        bottom: 0;
        position: absolute;
        color: #fffafa;
        font-family: 'Ranchers', cursive;
    }
    
    .card-title {
        font-size: 65px;
    }
    /* -------------> MOBILE */
    
    @media screen and (max-width:650px) {
        .card-img {
            width: 100%;
            height: 100%;
            opacity: 0.4;
        }
    }
    
    @media screen and (min-width:651px) {
        .card-img {
            width: 100%;
            height: 70vh;
        }
    }
    /* ----------------> SESSION */
    /* -------------> MOBILE */
    
    @media screen and (max-width:650px) {
        .cardImagem {
            position: relative;
            padding-left: 0px;
        }
    }
    
    @media screen and (min-width:651px) {
        .cardImagem {
            padding-left: 0px;
        }
    }
    /* FILMES  */
    
    .flip-container {
        display: inline-block;
        width: 200px;
        height: 100%;
        perspective: 1000px;
    }
    
    .flipper {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.8s;
        transform-style: preserve-3d;
        margin-left: 1vw;
        margin-right: 39vw;
    }
    /* #switch:checked~.flip-container .flipper {
        transform: rotateY(180deg);
    } */
    
    .front,
    .back {
        position: absolute;
        width: 100%;
        backface-visibility: hidden;
    }
    
    .back {
        transform: rotateY(180deg);
    }
    
    .back-link {
        margin: 0px;
        margin-bottom: -47px;
        vertical-align: center;
        text-align: center;
        height: 20vh;
    }
    
    ul h1 {
        color: snow;
    }


    footer{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #222;;
        color: #FFF;
        height: 150px;
    }

    footer a:hover{
        text-decoration: none;  
        color: #FFF;
    }

    .button {
        display: inline-block;
        background-color: #B28756;
        color: #FFF;
        text-transform: uppercase;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        text-decoration: none;
        padding: 10px 30px;
        margin-top: 30px;
        border-radius: 20px;
    }