@media screen and (max-width: 320px){
    /*initial*/
    body{
        width: 320px;
    }

    .mainWrapper{
        width: 320px;
        position: relative;

        padding: 15px 10px 15px 10px;
    }

    .desktopMenu{
        display: none;
    }

    .menuBar{
        background-color: transparent;
    }
    /*Перший екран*/
    .BackgroundPic{
        background: none;
    }

    /*меню*/
    .hamburgerToggle{
        display: block;
        z-index: 1;

        position: absolute;
        right: 15px;

    }

    .hamburgerToggle img, .login img{
        box-shadow: -3px 5px 7px #112849;
    }

    #toggle{
        display: none;
    }

    #toggle:checked + .mobileMenu{
        display: block;
    }

    .menuBar{
        margin-top: 0;
    }

    .mobileMenu{
        display: none;

        height: fit-content;
        width: 228px;
        z-index: 0;

        position: absolute;
        right: 0;
        top: 0;

        padding: 8px;
        background-color: #112849;
    }
    .mobileMenu ul{
        float: right;
    }

    .mobileMenu ul li{
        font-family: "Akrobat Regular", sans-serif;
        font-size: 70px;
    }

    .login{
        display: block;
        position: absolute;

        right: calc(40px + 10px + 15px);
    }

    /*логотип*/
    .logo{
        text-align: left;
        margin-top: 7px;
        margin-bottom: auto;

        position: absolute;
        left: 0;
    }

    .logo img{
        width: 30px;
        height: 30px;

        position: initial;
        margin: 0;
    }
    .logoText{
        font-size: 24px;
        text-shadow: -3px 5px 7px #112849;

        padding-left: 3px;
        padding-bottom: 10px;
    }

    /*Перший екран*/
    .firstScreen{
        width: 100%;
        height: 400px;

        margin-bottom: 0;
    }

    .mainSlogan{
        width: 100%;

        margin: 20px auto;
        text-align: center;
    }

    .mainPic{
        display: none;
    }

    .mainSlogan a{
        display: none;
    }

    h1{
       font-size: 30px;
    }

    h2{
        font-size: 25px;

        margin-top: 10px;
    }

    h1::after{
        height: 6px;

        margin-left: 27px;
    }

    .mainSlogan h3{
        font-size: 20px;

        margin-top: 30px;
    }

    .mainSlogan h3 span{
        font-size: 20px;
    }

    /*Другий екран*/
    .corpusImage{
        display: none;
    }
    .aboutSportLine{
        display: initial;
    }

    .aboutText{
        width: 90%;

        padding: 5px;
        margin: 0 auto;
    }

    .textContainer{
        font-size: 15px;
    }

    /*Слайдери*/
    .mobile{
        display: block;
    }

    .advantages{
        display: none;
    }

    .mobileSlider{
        height: 230px;
        display: flex;

        padding-left: 20px;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }

    .mobileSlider > div{
        scroll-snap-align: start;
    }

    .sliderContent{
        width: 210px;
        height: 210px;
        position: relative;

        margin: 10px auto;
        background-color: #275aa2;
        box-shadow: -3px 5px 7px #112849;
    }

    .sliderContent p{
        font-size: 20px !important;
        text-align: center;

        padding-top: 150px;
        margin: 0;
    }

    .sliderContent img{
        width: 100px;

        position: absolute;
        top: 15%;
        right: 27%;
    }

    .slide{
        width: 300px;
        height: 210px;
        display: flex;

        padding-left: 10px;

        flex-shrink: 0;

        scroll-behavior: smooth;
    }

    .mobileSlider + img{
        display: block;

        width: 60px;
        margin: -10px auto;
    }

    .mobile > h3{
        margin-bottom: -10px;
        margin-top: 20px;
    }

    /*Конфігураціяя слайдеру з видами спорту*/
    .sportTypes{
        display: none;
    }

    .advantageName.sport{
        font-size: 20px !important;
    }

    .sliderPic{
        width: 150px !important;

        top: 0 !important;
        right: 33px !important;
    }

    .mobileSlogan{
        margin-top: 20px;
        margin-bottom: 20px;

        text-align: center;
    }

    .mobileSlogan h3{
        font-size: 25px;

        margin-bottom: 10px;
    }

    /*Акордіон з типами абонементів*/
    .subscriptionTypes {
        display: none;
    }

    .accordText{
        display: none;
    }

    .accordBtn{
        margin-left: 80px;
        margin-bottom: 30px;

        font-family: "Akrobat Regular", sans-serif;
    }

    .mobileAccordion{
        margin-bottom: 10px;
        position: relative;

        text-align: center;
    }

    .accordContent{
        height: fit-content;

        background-color: #275aa2;
        box-shadow: -3px 5px 7px #112849;
    }

    .mobile > .sectionName{
        margin-bottom: 20px;
        margin-top: 50px;
    }

    .mobileAccordion input{
        display: none;
    }

    .mobileAccordion label{
        position: absolute;
        bottom: 5px;
        left: 130px;
    }

    .mobileAccordion img{
        padding-top: 20px;
    }

    .accordContent > .sectionName{
        font-family: "Akrobat SemiBold", sans-serif;
        font-size: 40px !important;

        padding-bottom: 70px;
    }

    #accordToggle1:checked + .accordContent.ac1  .accordText,
    #accordToggle2:checked + .accordContent.ac2  .accordText,
    #accordToggle3:checked + .accordContent.ac3  .accordText{
        display: block;

        font-family: "Akrobat Regular", sans-serif;
        font-size: 15px;
        color: white;

        padding-bottom: 60px;
        margin-top: -50px;
    }

    /*Реєстраційна форма*/
    table{
        display: none;
    }

    .comparisonTable{
        margin-bottom: 20px;
    }

    .registrationForm{
        display: block;
        width: 100%;
        height: 1500px;

        background-color: transparent;
        box-shadow: none;
    }

    .registration{
        box-sizing: border-box;
        transform: scale(1.5);
        height: fit-content;

        padding: 20px;
        margin-left: 60px;
        margin-top: -300px;

        background: #275aa2;
        box-shadow: -3px 5px 7px #112849;
    }

    .callMe{
        box-sizing: border-box;
        position: relative;
        height: fit-content;
        width: 220px;
        transform: scale(1.4);

        padding: 5px;
        margin-left: 40px;
        margin-top: 200px;

        background: #275aa2;
        box-shadow: -3px 5px 7px #112849;
    }

    .callMe input[type="submit"]{
        width: fit-content;
        margin-left: -3px;
    }

    .middleBlock{
        text-align: center;
    }

    .middleBlock img{
        margin: 0 auto;
    }

    .middleBlock p{
        display: none;
    }

    .registrationForm .mobile{
        display: block;

        position: absolute;
        bottom: -70px;
        left: 80px;

        font-family: "Akrobat SemiBold", sans-serif;
    }

    form{
        padding: 5px;
    }

    /*Футер*/

    footer{
        margin-top: -200px;
    }

    .gradient{
        width: 340px;
        left: 2px;
        bottom: -15px;

        background: linear-gradient(0deg, #275aa2, 70%, transparent);
    }

    .social{
        width: 100%;

        padding: initial;

        left: 13px;
        bottom: -10px;
    }

    .social img{
        width: 55px;
    }

    .copyright{
        bottom: 50px;
    }

    .contactInfo{
        margin-bottom: 80px;
    }
}