.first::after {
    width: 100%;
}

/* section {
    display: flex;
    justify-content: space-between;
    margin: 3.5vw 2.8vw;
    margin-bottom: 0vw;
} */

.about {
    display: flex;
    justify-content: space-between;
    margin: 3.5vw 2.8vw;
    margin-bottom: 0vw;
}

.info {
    width: 30vw;
    height: 56vw;
}

.zal {
    height: 52vw; 
    width: 48.8vw;
    height: 50vw;
}


/* .info  */

.poster-1, .poster-2, .poster-3, .poster-4 {
    width: 20vw;
    height: 28.3vw;
    background-size: contain;
    background-repeat: no-repeat; 
}

.poster-1 {
    background-image: url("../images/poster_1.png");
}

.poster-2 {
    background-image: url("../images/poster_2.png");
}

.poster-3 {
    background-image: url("../images/poster_3.png");
}

.poster-4 {
    background-image: url("../images/poster_4.png");
}

.info h2 {
    margin-top: 1.2vw;
}

.info p:nth-of-type(1) {
    margin-top: 2vw;
}

.info p:nth-of-type(2) {
    margin: -2.5vw 7vw;
}


.seats {
    width: 100%;
    height: 45.5vw;
    background-color: #121212;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "1 2 3 4 5 6 7 8 9 10 11 12"
    "13 14 15 16 17 18 19 20 21 22 23 24"
    "25 26 27 28 29 30 31 32 33 34 35 36"
    "37 38 39 40 41 42 43 44 45 46 47 48"
    "49 50 51 52 53 54 55 56 57 58 59 60"
    "61 62 63 64 65 66 67 68 69 70 71 72"
    "73 74 75 76 77 78 79 80 81 82 83 84"
    "85 86 87 88 89 90 91 92 93 94 95 96"
    "stage stage stage stage stage stage stage stage stage stage stage stage"
    "stage stage stage stage stage stage stage stage stage stage stage stage";
    row-gap: 2.7vw;
    column-gap: 2vw;
    padding: 2.3vw 3vw;
    border: 0.1vw solid #F0F0F0;
}

.seat {
    border-radius: 100%
}

.taken {
    background-color: #DADADA;
}

.pink {
    background-color: #F394BE;
}

.green {
    background-color: #028642;
}

.orange {
    background-color: #FF994D;
}

.blue {
    background-color: #7EB6CE;
}

.blue, .orange, .green, .pink {
    cursor: pointer;
}

.selected {
    transform: scale(1.2);
    /* border: 0.2vw solid #F0F0F0; */
}

.stage {
    grid-area: stage;
    width: 100%;
    background-color: #DADADA;
    text-align: center;
    padding: 2vw;
}

.stage p {
    color: #888888;
}

.zal ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.taken_kv {
    width: 1.8vw;
    height: 1.8vw;
    background-color: #DADADA;
}

.blue_kv {
    width: 1.8vw;
    height: 1.8vw;
    background-color: #7EB6CE;
}

.orange_kv {
    width: 1.8vw;
    height: 1.8vw;
    background-color: #FF994D;
}

.green_kv {
    width: 1.8vw;
    height: 1.8vw;
    background-color: #028642;
}

.pink_kv {
    width: 1.8vw;
    height: 1.8vw;
    background-color: #F394BE;
}

.zal ul {
    list-style: none;
    margin-top: 1vw;
    
}

li {
    font-size: 1.6vw;
    font-weight: 500;
}

li:nth-of-type(1) {
    color: #DADADA;
}

li:nth-of-type(2) {
    color: #7EB6CE;
}

li:nth-of-type(3) {
    color: #FF994D;
}

li:nth-of-type(4) {
    color: #028642;
}

li:nth-of-type(5) {
    color: #F394BE;
}

li::before {
    display: inline-block;
    content: "";
    border-radius: 0%;
    width: 1.8vw;
    height: 1.8vw;
    margin-right: 0.6vw;
}

li:nth-of-type(1)::before {
    background-color: #F0F0F0;
}

li:nth-of-type(2)::before {
    background-color: #7EB6CE;
}

li:nth-of-type(3)::before {
    background-color: #FF994D;
}

li:nth-of-type(4)::before {
    background-color: #028642;
}

li:nth-of-type(5)::before {
    background-color: #F394BE;
}

.order {
    width: 100%;
    height: 27vw;
    /* background-color: gold; */
    padding: 1vw 2.8vw;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

input {
    padding-left: 1.3vw;
    width: 20vw;
    height: 5vw;
    margin-top: 1.8vw;
    background-color: #121212;
    border: 0.2vw solid #F0F0F0;
    border-radius: 0.5vw;
    outline: none;
    color: #F0F0F0;
    font-family: 'Gilroy', sans-serif;
    font-size: 2.1vw;
    margin-left: 1.2vw;
}

input:nth-of-type(1) {
    margin-left: 0vw;
}

input::placeholder {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 2.1vw;
}

.button {
    width: 20vw;
    height: 5vw;
    margin-top: 1.8vw;
    margin-left: 1.2vw;
    padding-top: 1.5vw;
}

.none {
    display: none;
}

.ghost-ticket {
    width: 30vw;
    height: 21vw;
    position: absolute;
    left: 14vw;
    top: 92vw;
    background-image: url("../images/ghost-afisha.png");
    background-size: contain;
    background-repeat: no-repeat;
    animation: ghost-fly-2 1.5s linear;
    animation-play-state: paused;
}

.fly-2 {
    animation-play-state: running;
}


@keyframes ghost-fly-2 {
    0% {
        top: 92vw;
    }
    50%{
        top: 78vw;
    } 
    100% {
        top: 92vw;
    }
}


@media only screen and (max-device-width: 450px) {
    .about {
        flex-direction: column;
    }
    .info h2, .info p {
        margin-left: 24vw;
        margin-top: -28.6vw;
    }
    .info p:nth-of-type(2) {
        margin: -2.5vw 36vw;
    }
    .zal {
        width: 100%;
        margin-top: 4vw;
        margin-bottom: 44vw;
    }
    .zal ul {
        margin-top: 2vw;
    }
    li {
        font-size: 2.5vw;
    }
    li::before {
        width: 3vw;
        height: 3vw;
    }
    .seats {
        width: 100%;
        height: 82vw;
        column-gap: 3.2vw;
        row-gap: 3.8vw;
    }
    .info {
        width: 50vw;
        height: 29vw;
    }
    form {
        flex-direction: column;
    }
    form input {
        width: 40vw;
        margin-left: 0vw;
    }
    .button {
        margin-left: 0vw;
    }
    footer {
        margin-top: 8vw;
    }
}