/* --------------------------------- до 320------------------------------------------ */
@media screen and (max-width:320px) {

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: grid;
        grid-template-rows: minmax(60px, 4vw) 1fr minmax(30px, 2vw);
        grid-template-columns: 1fr;
    }


    header {
        background-color: #7d8489;
        position: relative;
    }

    main {
        background-color: #7d8489;
    }

    footer {
        background-color: brown;

    }

    a {
        color: white;
    }

    .logo {
        font-size: calc(20px + 16 *(100vw/1280));
        color: white;
        margin-left: 2%;
        position: absolute;
        top: 6%;
    }

    .logo_img {
        height: 80%;
        margin-top: 0.25rem;
    }

    .one_section {
        background-color: #2f353d;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .girl_one_section {
        height: 100vh;
        background-image: url(girl.png);
        background-position: -39vw 18%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .man_one_section {
        height: 100vh;
        background-image: url(man.png);
        background-position: calc(70px + 90%) 4%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .tringl {
        content: "";
        right: 0;
        top: 30%;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 30vh solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 70vh solid red;
        opacity: 0.5;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .crocos_run_one_section {
        width: 100%;
    }

    .crocos_one_section {
        height: 5vh;
        position: absolute;
        z-index: 1;
        top: 30vh;
        left: 5vw;

    }

    .run_one_section {
        height: 5vh;
        position: absolute;
        z-index: 2;
        top: 38vh;
        left: 5vw;
    }

    .data_one_section {
        height: 3vh;
        position: absolute;
        z-index: 2;
        top: 70vh;
        left: 10vw;
    }

    .flag {
        content: "";
        border-top: #2185e8 10px solid;
        border-bottom: #f8e345 10px solid;

        width: 60vw;
        position: absolute;
        z-index: 1;
        top: 42.5vh
    }

    .km {
        position: absolute;
        color: white;
        font-size: 10vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        left: 10vw;
        top: 45vh;
        z-index: 3;

    }

    a.button {
        position: absolute;
        display: inline-block;
        color: white;
        font-weight: 700;
        text-decoration: none;
        user-select: none;
        padding: .3em 1em;
        outline: none;
        /* border: 2px solid; */
        border-radius: 5px;
        /* transition: 0.2s; */
        background-color: red;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 2vh;
        font-weight: bold;
        top: 60vh;
        left: calc(45vw - 3em);
        z-index: 6;
    }

    /* -------------------------------------two_section------------------------------------------- */
    .two_section {
        background-color: #4e5255;
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .about {
        position: absolute;
        z-index: 2;
        color: white;
        font-size: calc(1px + 14 *(100vh/800));
        width: 80vw;
        /* height: 80vh; */
        left: 10vw;
        padding-top: 4vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    }

    .galochka {
        color: red;
        font-size: calc(1px + 14 *(100vh/800));
        z-index: 2;
    }

    .red {
        color: red
    }

    .girl_two_section {
        height: 100vh;
        background-image: url(girl2.png);
        background-position: 40vw 80%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .tringl_two_section {
        content: "";
        left: 0;
        top: 65vh;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 0vh solid transparent;
        border-right: 30vh solid transparent;
        border-bottom: 70vh solid red;
        opacity: 0.50;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .div_footer {
        position: absolute;
        height: 30px;

    }

    .img_footer {
        position: relative;
        height: 25px;
        left: 10vw;

    }

    .crocosrun_footer {
        position: relative;
        color: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        left: 20vw;
        bottom: 5px;
        text-decoration: none;



    }
}

/* --------------------------------- после 320------------------------------------------ */
@media screen and (min-width:320px) {

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: grid;
        grid-template-rows: minmax(60px, 4vw) 1fr minmax(30px, 2vw);
        grid-template-columns: 1fr;
    }


    header {
        background-color: #7d8489;
        position: relative;
    }

    main {
        background-color: #7d8489;
    }

    footer {
        background-color: brown;
    }

    a {
        color: white;
        text-decoration: underline;
    }

    .logo {
        font-size: calc(20px + 16 *(100vw/1280));
        color: white;
        margin-left: 2%;
        position: absolute;
        top: 6%;
    }

    .logo_img {
        height: 80%;
        margin-top: 0.25rem;
    }

    .one_section {
        background-color: #2f353d;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .girl_one_section {
        height: 100vh;
        background-image: url(girl.png);
        background-position: -39vw 18%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .man_one_section {
        height: 100vh;
        background-image: url(man.png);
        background-position: calc(70px + 90%) 4%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .tringl {
        content: "";
        right: 0;
        top: 30vh;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 30vh solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 70vh solid red;
        opacity: 0.50;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .crocos_run_one_section {
        width: 100%;

    }

    .crocos_one_section {
        height: 6vh;
        position: absolute;
        z-index: 2;
        top: 30vh;
        left: 6vw;

    }

    .run_one_section {
        height: 5vh;
        position: absolute;
        z-index: 2;
        top: 38vh;
        left: 6vw;
    }

    .data_one_section {
        height: 3vh;
        position: absolute;
        z-index: 2;
        top: 70vh;
        left: 15vw;
    }

    .flag {
        content: "";
        border-top: #2185e8 10px solid;
        border-bottom: #f8e345 10px solid;

        width: 60vw;
        position: absolute;
        z-index: 1;
        top: 42.5vh
    }

    .km {
        position: absolute;
        color: white;
        font-size: 10vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        left: 15vw;
        top: 45vh;
        z-index: 3;
    }

    a.button {
        position: absolute;
        display: inline-block;
        color: white;
        font-weight: 700;
        text-decoration: none;
        user-select: none;
        padding: .3em 1em;
        outline: none;
        /* border: 2px solid; */
        border-radius: 5px;
        /* transition: 0.2s; */
        background-color: red;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 2vh;
        font-weight: bold;
        top: 60vh;
        left: calc(45vw - 3em);
        z-index: 6;
    }

    /* -------------------------------------two_section------------------------------------------- */
    .two_section {
        background-color: #4e5255;
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .about {
        position: absolute;
        z-index: 2;
        color: white;
        font-size: calc(1px + 14 *(100vh/810));
        width: 80vw;
        /* height: 80vh; */
        left: 10vw;
        padding-top: 4vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    }

    .galochka {
        color: red;
        font-size: calc(1px + 14 *(100vh/810));
        z-index: 2;
    }

    .red {
        color: red
    }

    .girl_two_section {
        height: 100vh;
        background-image: url(girl2.png);
        background-position: 40vw 80%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .tringl_two_section {
        content: "";
        left: 0;
        top: 60vh;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 0vh solid transparent;
        border-right: 30vh solid transparent;
        border-bottom: 70vh solid red;
        opacity: 0.50;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .div_footer {
        position: absolute;
        height: 30px;

    }

    .img_footer {
        position: relative;
        height: 25px;
        left: 10vw;

    }

    .crocosrun_footer {
        position: relative;
        color: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        left: 20vw;
        bottom: 5px;
        text-decoration: none;



    }
}

/* --------------------------------- после 768------------------------------------------ */
@media screen and (min-width:768px) {

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: grid;
        grid-template-rows: minmax(60px, 4vw) 1fr minmax(30px, 2vw);
        grid-template-columns: 1fr;
    }

    header {
        background-color: #7d8489;
        position: relative;
    }

    main {
        background-color: #7d8489;
    }

    footer {
        background-color: brown;
    }

    a {
        color: white;
        text-decoration: underline;
    }

    .logo {
        font-size: calc(20px + 16 *(100vw/1280));
        color: white;
        margin-left: 2%;
        position: absolute;
        top: 6%;
    }

    .logo_img {
        height: 80%;
        margin-top: 0.25rem;
    }

    .one_section {
        background-color: #2f353d;
        height: 100vh;
        position: relative;
    }

    .girl_one_section {
        height: 100vh;
        background-image: url(girl.png);
        background-position: -40vw 1%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .man_one_section {
        height: 100vh;
        background-image: url(man.png);
        background-position: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        z-index: 2;

    }

    .tringl {
        content: "";
        right: 0;
        top: 30%;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 50vh solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 70vh solid red;
        opacity: 1;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .crocos_run_one_section {
        width: 100%;
    }

    .crocos_one_section {
        height: 5vw;
        position: absolute;
        z-index: 3;
        top: 25vh;
        left: 30vw;

    }

    .run_one_section {
        height: 5vw;
        position: absolute;
        z-index: 3;
        top: 32vh;
        left: 50vw;
    }

    .data_one_section {
        height: 2vw;
        position: absolute;
        z-index: 2;
        top: 40vh;
        left: 30vw;
    }

    .flag {
        content: "";
        border-top: #2185e8 10px solid;
        border-bottom: #f8e345 10px solid;

        width: 100vw;
        position: absolute;
        z-index: 1;
        top: 80vh
    }

    .km {
        position: absolute;
        color: white;
        font-size: 12vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        left: 60vw;
        top: 40vh;
        z-index: 3;

    }

    a.button {
        position: absolute;
        display: inline-block;
        color: white;
        font-weight: 700;
        text-decoration: none;
        user-select: none;
        padding: .5em 2em;
        outline: none;
        /* border: 2px solid; */
        border-radius: 5px;
        /* transition: 0.2s; */
        background-color: red;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 2.5vh;
        font-weight: bold;
        top: 60vh;
        left: calc(45vw - 3em);
        z-index: 6;
    }

    /* -------------------------------------two_section------------------------------------------- */
    .two_section {
        background-color: #4e5255;
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .about {
        position: absolute;
        z-index: 2;
        color: white;
        font-size: calc(1px + 14 *(100vh/700));
        width: 80vw;
        /* height: 80vh; */
        left: 10vw;
        padding-top: 4vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    }

    .galochka {
        color: red;
        font-size: calc(1px + 14 *(100vh/700));
        z-index: 2;
    }

    .red {
        color: red
    }

    .girl_two_section {
        height: 100vh;
        background-image: url(girl2.png);
        background-position: 50vw 1%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .tringl_two_section {
        display: none;
    }

    .div_footer {
        position: absolute;
        height: 30px;

    }

    .img_footer {
        position: relative;
        height: 25px;
        left: 30vw;

    }

    .crocosrun_footer {
        position: relative;
        color: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        left: 50vw;
        bottom: 5px;
        text-decoration: none;
    }

}


/* --------------------------------- после 1024------------------------------------------ */
@media screen and (min-width:1024px) {

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: grid;
        grid-template-rows: minmax(60px, 4vw) 1fr minmax(30px, 2vw);
        grid-template-columns: 1fr;
    }


    header {
        background-color: #7d8489;
        position: relative;
    }

    main {
        background-color: #7d8489;
    }

    footer {
        background-color: brown;
    }

    a {
        color: white;
        text-decoration: underline;
    }

    .logo {
        font-size: calc(20px + 16 *(100vw/1280));
        color: white;
        margin-left: 2%;
        position: absolute;
        top: 6%;
    }

    .logo_img {
        height: 80%;
        margin-top: 0.25rem;
    }

    .one_section {
        background-color: #2f353d;
        height: 100vh;
        position: relative;
    }

    .girl_one_section {
        height: 100vh;
        background-image: url(girl.png);
        background-position: -30vw 20%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .man_one_section {
        height: 100vh;
        background-image: url(man.png);
        background-position: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .tringl {
        content: "";
        right: 0;
        top: 30%;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 50vh solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 70vh solid red;
        opacity: 1;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .crocos_run_one_section {
        width: 100%;
    }

    .crocos_one_section {
        height: 5vw;
        position: absolute;
        z-index: 3;
        top: 25vh;
        left: 30vw;

    }

    .run_one_section {
        height: 5vw;
        position: absolute;
        z-index: 3;
        top: 35vh;
        left: 50vw;
    }

    .data_one_section {
        height: 2vw;
        position: absolute;
        z-index: 3;
        top: 50vh;
        left: 30vw;
    }

    .km {
        position: absolute;
        color: white;
        font-size: 15vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        left: 70vw;
        top: 55vh;
        z-index: 3;

    }

    a.button {
        position: absolute;
        display: inline-block;
        color: white;
        font-weight: 700;
        text-decoration: none;
        user-select: none;
        padding: .5em 2em;
        outline: none;
        /* border: 2px solid; */
        border-radius: 5px;
        /* transition: 0.2s; */
        background-color: red;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 2.5vh;
        font-weight: bold;
        top: 60vh;
        left: calc(50vw - 3em);
        z-index: 6;
    }

    /* -------------------------------------two_section------------------------------------------- */
    .two_section {
        background-color: #4e5255;
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .about {
        position: absolute;
        z-index: 2;
        color: white;
        font-size: calc(1px + 14 *(100vh/650));
        width: 80vw;
        /* height: 80vh; */
        left: 10vw;
        padding-top: 4vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    }

    .galochka {
        color: red;
        font-size: calc(1px + 14 *(100vh/650));
        z-index: 2;
    }

    .red {
        color: red
    }

    .girl_two_section {
        height: 100vh;
        background-image: url(girl2.png);
        background-position: 50vw 1%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .tringl_two_section {
        display: none;
    }

    .div_footer {
        position: absolute;
        height: 30px;

    }

    .img_footer {
        position: relative;
        height: 25px;
        left: 30vw;

    }

    .crocosrun_footer {
        position: relative;
        color: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        left: 50vw;
        bottom: 5px;
        text-decoration: none;
    }

}

/* ------------------------------ после 1280--------------------------------------------- */
@media screen and (min-width:1280px) {

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: grid;
        grid-template-rows: minmax(60px, 4vw) 1fr minmax(30px, 2vw);
        grid-template-columns: 1fr;
    }


    header {
        background-color: #7d8489;
        position: relative;
    }

    main {
        background-color: #7d8489;
    }

    footer {
        background-color: brown;
    }

    a {
        color: white;
        text-decoration: underline;
    }

    .logo {
        font-size: calc(20px + 16 *(100vw/1280));
        color: white;
        margin-left: 2%;
        position: absolute;
        top: 6%;
    }

    .logo_img {
        height: 80%;
        margin-top: 0.25rem;
    }

    .one_section {
        background-color: #2f353d;
        height: 100vh;
        position: relative;
    }

    .girl_one_section {
        height: 100vh;
        background-image: url(girl.png);
        background-position: -5vw 1%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .man_one_section {
        height: 100vh;
        background-image: url(man.png);
        background-position: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }

    .tringl {
        content: "";
        right: 0;
        top: 30%;
        /* Положение треугольника */
        position: absolute;
        width: 0;
        height: 0;
        border-left: 80vh solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 70vh solid red;
        opacity: 1;
        z-index: 1;
        /* Измените цвет фона на нужный вам */
    }

    .crocos_run_one_section {
        width: 100%;
    }

    .crocos_one_section {
        height: 5vw;
        position: absolute;
        z-index: 3;
        top: 25vh;
        left: 30vw;

    }

    .run_one_section {
        height: 4vw;
        position: absolute;
        z-index: 3;
        top: 40vh;
        left: 50vw;
    }

    .data_one_section {
        height: 2vw;
        position: absolute;
        z-index: 2;
        top: 50vh;
        left: 20vw;
    }

    .km {
        position: absolute;
        color: white;
        font-size: 20vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        left: 70vw;
        top: 55vh;
        z-index: 3;

    }

    a.button {
        position: absolute;
        display: inline-block;
        color: white;
        font-weight: 700;
        text-decoration: none;
        user-select: none;
        padding: .5em 2em;
        outline: none;
        /* border: 2px solid; */
        border-radius: 5px;
        /* transition: 0.2s; */
        background-color: red;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 3vh;
        font-weight: bold;
        top: 60vh;
        left: calc(50vw - 3em);
        z-index: 6;
    }

    /* -------------------------------------two_section------------------------------------------- */
    .two_section {
        background-color: #4e5255;
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .about {
        position: absolute;
        z-index: 2;
        color: white;
        font-size: calc(1px + 14 *(100vh/550));
        width: 80vw;
        /* height: 80vh; */
        left: 10vw;
        padding-top: 4vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    }

    .galochka {
        color: red;
        font-size: calc(1px + 14 *(100vh/550));
        z-index: 2;
    }

    .red {
        color: red
    }

    .girl_two_section {
        height: 100vh;
        background-image: url(girl2.png);
        background-position: 50vw 1%;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .tringl_two_section {
        display: none;
    }

    .div_footer {
        position: absolute;
        height: 30px;

    }

    .img_footer {
        position: relative;
        height: 25px;
        /* left: 30vw; */

    }

    .crocosrun_footer {
        position: relative;
        color: white;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        /* left: 50vw; */
        bottom: 5px;
        text-decoration: none;
    }

}