@media screen and (min-width:381px) and (max-width: 1023px) {

    video {
        display: none;
    }

    .start {
        position: relative;
        width: 100%;
        height: 700px;
        overflow: hidden;
        animation: stata .5s linear;
        background: url("images/street.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .start h1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(30deg);
        font-size: 100px;
        z-index: 6;
        -webkit-text-stroke: 3px #fff;
        color: transparent;
        font-family: 'Bangers', cursive;
        white-space: nowrap;
        opacity: 1;
        text-shadow: 3px 3px 4px;
    }

    .start p {
        position: absolute;
        left: 10px;
        bottom: 15%;
        font-size: 20px;
        z-index: 6;
        color: #fff;
        font-family: 'Bangers', cursive;
        width: 500px;
    }

    .col {
        background: #000;
    }

    .main {
        height: 500px;
    }

    .ob {
        position: absolute;
        width: 550px;
        height: 300px;
        background: #000;
        border-radius: 40px;
    }

    .ob h1 {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
        font-size: 52px;
        z-index: 3;
        color: #fff;
        white-space: nowrap;
    }

    .ob p {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        z-index: 3;
        color: #fff;
        width: 500px;
    }

    .ob5 h1 {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translate(-50%);
        font-size: 80px;
        z-index: 3;
        color: #fff;
        white-space: nowrap;
    }

    .ob1 {
        left: 20px;
        top: 70px;
        background: url("images/red-dead-redemption-2-xbox-one-4k-eg.webp") no-repeat center center/cover;
    }

    .ob1 {
        border-radius: 19% 81% 59% 41% / 38% 38% 62% 62%;
    }

    .ob1::before {
        border-radius: 19% 81% 59% 41% / 38% 38% 62% 62%;
    }

    .ob2 {
        left: 900px;
        top: 70px;
        background: url("images/707055.webp") no-repeat center center / cover;
        border-radius: 44% 56% 78% 22% / 38% 43% 57% 62%;
    }

    .ob2::before {
        border-radius: 44% 56% 78% 22% / 38% 43% 57% 62%;
    }

    .ob3 {
        background: url("images/metro-exodusnextgen.webp") no-repeat center center / cover;
        left: 1950px;
        top: 70px;
        border-radius: 85% 15% 70% 30% / 30% 30% 70% 70%;
    }

    .ob3::before {
        border-radius: 85% 15% 70% 30% / 30% 30% 70% 70%;
    }

    .ob4 {
        background: url("images/mafia2.webp") no-repeat center center / cover;
        left: 2950px;
        top: 70px;
        border-radius: 52% 48% 32% 68% / 54% 28% 72% 46%;
    }

    .ob4::before {
        border-radius: 52% 48% 32% 68% / 54% 28% 72% 46%;
    }

    .ob5 {
        left: 3950px;
        top: 70px;
        border-radius:
            43% 57% 32% 68% / 47% 84% 16% 53%;
    }

    .ob5::before {
        border-radius: 43% 57% 32% 68% / 47% 84% 16% 53%;
        background: #000;
    }

    .col {
        display: none;
    }

    .main h3 {
        position: absolute;
        left: 5px;
        bottom: 0;
        font-size: 20px;
        color: #ccc;
    }

    .back a:hover {
        left: 50%;
        top: 55%;
        box-shadow: none;
    }
}

@media screen and (min-width:200px) and (max-width: 600px) {
    .nev {
        width: 100%;
        border-radius: 0px 0px 20px 20px;

    }

    .start img {
        display: none;
    }

    .start {
        position: relative;
        width: 100%;
        height: 700px;
        overflow: hidden;
        animation: stata .5s linear;
        background: url("images/street.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .start h1 {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%) rotate(45deg);
        font-size: 75px;
        z-index: 6;
        -webkit-text-stroke: 3px transparent;
        color: #fff;
        font-family: 'Bangers', cursive;
        white-space: nowrap;
        opacity: 1;
        letter-spacing: 0px;
        text-shadow: 3px 3px 4px #000;
    }

    .start p {
        position: absolute;
        left: 0;
        bottom: 15%;
        font-size: 20px;
        z-index: 6;
        color: #fff;
        font-family: 'Bangers', cursive;
        width: 100%;
    }

    .bek p {
        position: absolute;
        width: 100%;
        font-family: 'Bangers', cursive;
        z-index: 3;
        font-size: 20px;
    }

    .main {
        height: 400px;
    }

    .ob {
        position: absolute;
        width: 300px;
        height: 200px;
        background: #000;
        border-radius: 40px;
    }

    .ob h1 {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        z-index: 3;
        color: #fff;
        white-space: nowrap;
    }

    .ob p {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        z-index: 3;
        color: #fff;
        width: 100%;
    }

    .ob5 h1 {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
        font-size: 60px;
        z-index: 3;
        color: #fff;
        white-space: nowrap;
    }

    .ob1 h1 {
        font-size: 28px;
        left: 50%;
    }

    .ob1 {
        left: 10px;
        top: 70px;
        background: url("images/red-dead-redemption-2-xbox-one-4k-eg.webp") no-repeat center center/cover;
    }

    .ob1 {
        border-radius: 19% 81% 59% 41% / 38% 38% 62% 62%;
    }

    .ob1::before {
        border-radius: 19% 81% 59% 41% / 38% 38% 62% 62%;
    }

    .ob2 {
        left: 400px;
        top: 70px;
        background: url("images/707055.webp") no-repeat center center / cover;
        border-radius: 44% 56% 78% 22% / 38% 43% 57% 62%;
    }

    .ob2::before {
        border-radius: 44% 56% 78% 22% / 38% 43% 57% 62%;
    }

    .ob3 {
        background: url("images/metro-exodusnextgen.webp") no-repeat center center / cover;
        left: 850px;
        top: 70px;
        border-radius: 85% 15% 70% 30% / 30% 30% 70% 70%;
    }

    .ob3::before {
        border-radius: 85% 15% 70% 30% / 30% 30% 70% 70%;
    }

    .ob4 {
        background: url("images/mafia2.webp") no-repeat center center / cover;
        left: 1300px;
        top: 70px;
        border-radius: 52% 48% 32% 68% / 54% 28% 72% 46%;
    }

    .ob4::before {
        border-radius: 52% 48% 32% 68% / 54% 28% 72% 46%;
    }

    .ob5 {
        left: 1800px;
        top: 70px;
        border-radius:
            43% 57% 32% 68% / 47% 84% 16% 53%;
    }

    .ob5::before {
        border-radius: 43% 57% 32% 68% / 47% 84% 16% 53%;
        background: #000;
    }

    .col {
        display: none;
    }

    .main h3 {
        position: absolute;
        left: 5px;
        bottom: 5px;
        font-size: 12px;
        color: #ccc;
    }

    .back h4 {
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        font-size: 18px;
        color: #ccc;
        white-space: normal;
        width: 80%;
        z-index: 3;
    }

    .col {
        background: url("images/78be3ed68c5fde6fbde88052ffa93aca.jpg") no-repeat center / cover fixed;
    }

    .back a {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        text-decoration: none;
        color: #fff;
        background: 0;
        border: 3px solid #ccc;
        padding: 20px 20px;
        transition: all .5s ease;
        z-index: 3;
        white-space: nowrap;
    }

    .back a:hover {
        left: 50%;
        top: 55%;
        box-shadow: none;
    }
}