@keyframes tick1 {
    0% {
        transform: rotate(0);
    }

    35% {
        transform: rotate(5deg);
    }

    /* 50% {
        transform: rotate(0);
    } */
    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0);
    }
}

@media (orientation: portrait) {
    #mobile-div-img {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #mobile-div-img-bg {
        width: 100vw;
        height: 59vw;
        filter: blur(12vh) brightness(75%);
        margin-bottom: -59vw;
        position: relative;
        z-index: 1;
    }

    #mobile-img-età {
        padding-top: 3vh;
        padding-bottom: 3vh;
        display: flex;
    }

    #mobile-img-età img {
        margin-left: -4vh;
        margin-right: -1vh;
        margin-top: -2vh;
        height: 5vh;
        z-index: 5;
    }

    #mobile-img {
        width: 90vw;
        height: 50.625vw;
        border-radius: 2vh;
        z-index: 2;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: end;
        position: relative;
        box-shadow: #0007 0 0 2vh;
    }

    #mobile-img button {
        z-index: 3;
        background-color: var(--main-color);
        position: relative;
        align-self: flex-end;
        color: var(--white);
        font-weight: 800;
        border-radius: 1vh;
        font-size: 1.8vh;
        margin: 1vh;
        padding: 0.5vh 1vh 0.5vh 1vh;
    }

    .section-img-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 7.6vh;
        width: 100vw;
        background-color: var(--grey0);
    }

    #title {
        color: var(--white);
        width: max-content;
        font-size: 3.5vh;
        font-family: dm-sans;
        font-weight: 1000;
        line-height: 5vh;
        user-select: text;
        z-index: 1;
    }

    #info {
        margin-top: 0.5vh;
        font-size: 1.8vh;
        color: var(--grey4);
        font-family: dm-sans;
        user-select: text;
    }

    #sala {
        transition: .5s;
        background-color: #292929;
        padding: 1.5vh;
        border-radius: 15px;
    }

    #sala:hover {
        scale: 110%;
        transition: 0.4s;
        background-color: var(--main-color);
        color: var(--white);
        cursor: pointer;
    }

    .plot-div {
        flex-direction: column;
        max-width: 90vw;
        height: fit-content;
        padding: 2vw;
        /* border-radius: 15px;
        box-shadow:0px 0px 20px 8px #111111DD; */
        display: flex;
        color: var(--white);
        font-size: 1.8vh;
        font-family: dm-sans;
    }

    #plot {
        max-width: 90vw;
        margin-top: 1vh;
        font-weight: 300;
        text-align: justify;
        user-select: text;
    }

    #poster {
        height: 63vh;
    }

    .shop-button {
        background-color: var(--main-color);
        height: 8vh;
        width: 8vh;
        /* margin-top: -8vh;
        margin-left: -8vh; */
        border-radius: 4vh;
        z-index: 2;
        /* position: relative;
        top: -59vh;
        left: 47vh; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        transition: .2s;
        /* align-self: flex-end; */
        margin: -4vh;
    }

    .shop-button .ticket {
        height: 5vh;
        border-radius: 4vh;
        padding: 1.5vh;
        background-color: var(--main-color);
    }

    .shop-button:hover {
        transition: .2s;
        border-radius: 4vh;
        width: 24.6vh;
        cursor: pointer;
        margin-right: -20.6vh;
    }

    .shop-button:hover::after {
        color: var(--white);
        font-family: dm-sans;
        content: "Biglietto online";
        margin-right: 3vh;
        font-weight: 600;
        text-wrap: nowrap;
        font-size: 2vh;
    }

    .shop-button:hover .ticket {
        justify-self: left;
        animation: tick1 .4s;

    }

    .title-classification {
        width: 80vw;
        height: fit-content;
        display: flex;
    }

    .title-classification #age {
        display: none;
    }

    #poster-background {
        z-index: -1;
        position: relative;
        top: -66vh;
        height: 77vh;
        margin: -4vh;
        margin-bottom: -73vh;
        filter: blur(30px) brightness(0.3) opacity(.8);
        border-radius: 6vh;
    }

    .poster-div {
        display: none;
    }

    #posterleft-div {
        display: flex;
    }

    #age {
        height: 8vh;
        width: 8vh;
    }

    .room-time {
        font-family: dm-sans;
        color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 3vh;
        gap: 1.2vh;
        width: 90vw;
        font-size: 1vh;
    }

    #time {
        display: flex;
        align-items: center;
        gap: 5vw;
    }
    #orari{
        margin-right: -2vw;
    }
    .frame {
        /* margin-bottom: -1vh; */
        /* background-color: #292929; */
        /* padding: 1.5vh; */
        border-radius: 15px;
    }

    .frame-close {
        margin-bottom: -1vh;
        /* background-color: var(--main-color); */
        /* padding: 1.5vh; */
        /* border-radius: 15px; */
        display: flex;
        align-items: center;
        gap: 2vh;
    }

    .frame-close::before {
        content: "!";
        color: #d00000;
        outline: solid .4vh #d00000;
        font-size: 2.5vh;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        /* vertical-align: text-top; */
        border-radius: 1.5vh;
        height: 4vh;
        width: 4vh;
        font-weight: 1000;
    }

    #time .in3d {
        display: flex;
        align-items: center;
        gap: 1vh;
    }

    #time .in3d::before {
        content: url(file/grafiche/star.svg);
        height: 4vh;
        width: 4vh;
    }

    #trailer {
        width: 38vh;
        height: 21.37vh;
        border-radius: 2vh;
        margin-top: 6vh;
        margin-bottom: 6vh;
    }

    #gradient {
        display: none;
    }

    #data {
        color: var(--white);
        text-align: center;
        display: flex;
        align-items: baseline;
        gap: 3vw;
    }

    #sfondo-stelle {
        margin-top: -20vh;
        padding-top: 20vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* background: linear-gradient(180deg, var(--grey0) 10%, #010b18 100%), url(file/grafiche/ant-stelle.png); */
        background-blend-mode: overlay;
        background-size: 50vh;
    }
    #infotitolo {
        color: var(--white);
        margin-top: 4vh;
        font-size: 2vh;
    }
}

@media only screen and (orientation: landscape) {
    #mobile-div-img {
        display: none;
    }

    .section-img-tab {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-top: 13vh;
        width: 100vw;
        height: 87vh;
        background-color: var(--grey0);
    }

    #title {
        color: var(--white);
        width: max-content;
        font-size: 8vh;
        font-family: dm-sans;
        font-weight: 1000;
        line-height: 8vh;
        user-select: text;
    }

    #info {
        margin-top: 0.5vh;
        font-size: 2vh;
        color: var(--grey4);
        font-family: dm-sans;
        user-select: text;
    }

    #sala {
        transition: .5s;
        background-color: var(--grey1);
        padding: 1.5vh;
        border-radius: 15px;
    }

    #sala:hover {
        scale: 110%;
        transition: 0.4s;
        background-color: var(--main-color);
        color: var(--white);
        cursor: pointer;
    }

    .plot-div {
        flex-direction: column;
        max-width: 40vw;
        height: fit-content;
        padding: 2vw;
        /* border-radius: 15px;
        box-shadow:0px 0px 20px 8px #111111DD; */
        display: flex;
        color: var(--white);
        font-size: 2.3vh;
        font-family: dm-sans;
    }

    #plot {
        max-width: 40vw;
        margin-top: 3vh;
        font-weight: 300;
        text-align: justify;
        user-select: text;
    }

    #poster {
        height: 63vh;
        border-radius: 2vh;
    }

    .shop-button {
        background-color: var(--main-color);
        height: 8vh;
        width: 8vh;
        /* margin-top: -8vh;
        margin-left: -8vh; */
        border-radius: 4vh;
        z-index: 2;
        /* position: relative;
        top: -59vh;
        left: 47vh; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        transition: .2s;
        /* align-self: flex-end; */
        margin: -4vh;
    }

    .shop-button .ticket {
        height: 5vh;
        border-radius: 4vh;
        padding: 1.5vh;
        background-color: var(--main-color);
    }

    .shop-button:hover {
        transition: .2s;
        border-radius: 4vh;
        width: 24.6vh;
        cursor: pointer;
        margin-right: -20.6vh;
    }

    .shop-button:hover::after {
        color: var(--white);
        font-family: dm-sans;
        content: "Biglietto online";
        margin-right: 3vh;
        font-weight: 600;
        text-wrap: nowrap;
        font-size: 2vh;
    }

    .shop-button:hover .ticket {
        justify-self: left;
        animation: tick1 .4s;

    }

    .title-classification {
        width: 40vw;
        height: fit-content;
        display: flex;
        justify-content: space-between;
    }

    #poster-background {
        z-index: -1;
        position: relative;
        top: -66vh;
        height: 77vh;
        margin: -4vh;
        margin-bottom: -73vh;
        filter: blur(12vh) brightness(0.7) opacity(.6);
        border-radius: 6vh;
    }

    .poster-div {
        display: flex;
        text-align: center;
        flex-direction: column;
        border-radius: 2vh;
        transform: scale(105%);
    }

    #posterleft-div {
        display: flex;
    }

    #age {
        height: 8vh;
        width: 8vh;
        margin-left: 3vh;
    }

    .room-time {
        font-family: dm-sans;
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15vh;
        width: 100vw;
        height: 10vh;
        font-size: 1.5vh;
        position: relative;
    }

    #time {
        display: flex;
        align-items: center;
        gap: 3vw;
    }

    .frame {
        /* margin-bottom: -1vh; */
        /* background-color: #292929; */
        /* padding: 1.5vh; */
        border-radius: 15px;
    }

    .frame-close {
        margin-bottom: -1vh;
        /* background-color: var(--main-color); */
        /* padding: 1.5vh; */
        /* border-radius: 15px; */
        display: flex;
        align-items: center;
        gap: 2vh;
    }

    .frame-close::before {
        content: "!";
        color: #d00000;
        outline: solid .4vh #d00000;
        font-size: 2.5vh;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        /* vertical-align: text-top; */
        border-radius: 1.5vh;
        height: 4vh;
        width: 4vh;
        font-weight: 1000;
    }

    #time .in3d {
        display: flex;
        align-items: center;
        gap: 1vh;
    }

    #time .in3d::before {
        content: url(file/grafiche/star.svg);
        height: 4vh;
        width: 4vh;
    }

    #trailer-div {
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        margin-top: -100vh;
        padding-top: 100vh;
        /* background: linear-gradient(180deg, var(--grey0) 0%, #010b18 50%), url(file/grafiche/ant-stelle.png); */
        background-blend-mode: overlay;
        background-size: 90vh;
    }

    #trailer {
        margin-top: 12.25vh;
        width: 120vh;
        height: 67.5vh;
        border-radius: 3vh;
    }

    #gradient {
        width: 100vw;
        height: 20vh;
        background: linear-gradient(var(--grey0), #151515 60%, #000000);
    }

    #data {
        color: var(--white);
        text-align: center;
        display: flex;
        align-items: baseline;
        gap: 3vw;
    }
    #infotitolo {
        color: var(--white);
        margin-top: 4vh;
        font-size: 2.5vh;
        text-align: center;
    }
}