@charset "utf-8";
/* CSS Document */

/*
Struttura Prima Della Scheda Film 
*/

    .movie-show-container {
        padding: 0 6%;
        text-align: center;
    }

    .movie-show-container>h1 {
        color: red;
        text-align: center;
        padding: 0 0 10px 0;
        margin-top: 10%;
        font-family: monospace;
        text-decoration: underline;
    }

    .movie-show-container>h3:after {
        content: '';
        display: block;
        height: 3px;
        width: 7%;
        background: red;
        position: relative;
        bottom: -10px;
    }

    .locandine-film {
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: auto auto auto auto auto auto;
        padding: 60px 0;
    }

    .film-box {
        position: relative;
        margin: 10px 0;
    }

    .film-box img {
        display: block;
        height: 100%;
        width: 100%;
    }

    .film-box .film-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        height: 101%;
        width: 101%;
        opacity: 0;
        transition: .7s ease;
        background-color: black;
        text-decoration: underline;
        text-decoration-color: white;
    }

    .film-box:hover .film-info {
        opacity: 0.8;
    }

    .film-info>h3 {
        padding: 50px 0;
        color: white;
    }

    .film-info>a {
        display: inline-block;
        padding: 0.35em 1.2em;
        border: 0.1em solid white;
        border-radius: 0.13em;
        box-sizing: border-box;
        text-decoration: none;
        font-weight: 300;
        color: white;
        text-align: center;
        transition: all 0.2s;
    }

    .film-info>a:hover {
        color: black;
        background-color: white;
    }

/*
Struttura Scheda Film
*/

    .pannello_scheda {
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 25% 75%;
        background-color: white;
        padding: 40px;
        box-shadow: 1px 0px 23px 3px rgba(0, 0, 0, 0.45);
        transition: all 0.7s ease;
        width: 90%;
        height: 100vh;
        margin: 0 auto;
        font-family: 'Lato', sans-serif;
    }

    .pannello_scheda_1{}

    .pannello_scheda_2{}

    .pannello_scheda_2>i {
        padding: 15px;
        float: right;
        cursor: pointer;
        transition: all 0.5s ease;
    }

    .fa-times:before {
        content: "\21BB";
        color: red;
    }

    .fa-2x {
        font-size: 2em;
    }

    .fa, .fab, .fal, .far, .fas { 
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
}

    .pannello_scheda_2>i:hover {
        color: rgb(139, 139, 139);
    }

    .pannello_scheda_3>.film-box {
        border-radius: 10px;
        overflow: hidden;
        margin-top: -32%;
    }

    .pannello_scheda_3 img {
        max-width: 100%;
    }

    .pannello_scheda_3>.film-box {
        margin: 0;
    }

    .pannello_scheda_4 {
        border-radius: 10px;
        border: 1px black solid;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Lato', sans-serif;
        text-decoration: none;
        color: unset;
    }

    .pannello_scheda_4>.titolo {
        border-bottom: black 1px solid;
        color: red;
        padding: 35px 35px 20px 35px;
        margin: 0 0 15px 0;
        font-size: 24pt;
        font-weight: bold;
        font-family: monospace;
        text-align: center;
    }

    .info-film>table {
        padding: 0 35px 0 35px;
    }

    .info-film td {
        padding: 8px 25px 8px 0;
        text-align: left;
        color: black;
    }

    .info-film table tr td:first-child {
        color: red;
        font-weight: bold;
    }

    .form-scheda-container {
        padding: 25px;
        margin: 20px 0;
    }

    .form-scheda-container form {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        align-items: center;
    }

    .form-scheda-container form select {
        padding: 10px;
        box-sizing: border-box;
        border: solid 2px #cbcbcb;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
        color: #606060;
        text-indent: 0.01px;
        text-overflow: '';
        width: 25%;
        height: 46px;
        margin: 5px 0;
    }

    .form-scheda-container form input {
        border-radius: 4px;
        border: 1px solid #6e6e6e;
        padding: 9px;
        width: 50%;
        height: 25px;
        margin: 5px 0;
        text-align: center;
    }

    #qta{
        padding: 10px;
        width: 100px;
        height: 45px;
        margin: 6px 22px;
        margin-left: auto;
        text-align: center;
    }

    .acquisti{
        width: 50%;
        margin-left: auto;
        margin: 25px;
    }

    button {
            border-radius: 4px;
            border: none;
            padding: 15px;
            text-align: center;
            background-color: darkgray;
            color: #FFF;
            transition: all 0.7s ease;
            cursor: pointer;
        }