@import 'header';

@import 'athlets';

@import 'players';

@import 'be-active__find-contact__work-it';

@import 'footer';

@media (max-width: 1550px) {
    .container {
        margin: 0px auto;
        padding: 0px 2.7425%;
    }

    .header {
        padding-top: 50px;
        padding-bottom: 90px;
    }

    .athlets-and-coaches {
        margin-top: 15px;
    }

    .header-top {
        padding-bottom: 195px;
    }

    .header-main-caption-1 h1,
    .header-main-caption-2 h1 {
        font-size: 64px;   
        line-height: 74px; 
    }

    .header-main-caption-1 h1 {
        margin-left: 15%;
    }

    .header-main-caption-2 h1 {
        width: 66.2087%;
        margin-right: 70px;
        z-index: 1;
    }

    .header-main-caption-1 h1:before {
        top: -54px;
        right: 50px;
    }

    .header-main-caption-2 {
        margin-bottom: 180px;
    }

    .header-main-menu {
        justify-content: center;
        margin-bottom: 115px;
    }

    .header-menu-item {
        font-size: 16px;    
    }

    .mr-50 {
        margin-right: 30px;
    }

    .section-text {
        font-size: 18px;
    }

    .connection-item2 {
        padding-top: 75px;
        padding-bottom: 65px;
    }

    .section-caption-container {
        margin-bottom: 18px;
    }

    .collaboration-item2 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .growth-item2 {
        padding-top: 40px;
        padding-bottom: 35px;
    }

    .players .connection-item2 {
        padding-top: 75px;
        padding-bottom: 40px;
    }

    .athlets-caption {
        margin-bottom: 50px;
    }

    .players .collaboration-item2 {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .players .growth-item2 {
        padding-top: 40px;
        padding-bottom: 45px;
    }

    .athlets .connection-image1 {
        width: 419px;
        height: 664px;
        top: 94px;
        right: 15px;
        background-size: contain;
    }

    .connection-image-plus1 {
        top: 85px;
        right: 224px;
    }

    .connection-image-plus2 {
        top: 72px;
        right: 246px;
    }

    .connection-image-line {
        width: 288px;
        height: 317px;
        top: 109px;
        right: 49px;
        background-image: url('../images/line-media1730-athlets.svg');
    }

    .players .connection-image1 {
        top: -40px;
        right: -557px;
        width: 690px;
        height: 565px;
        background-size: contain;
    }

    .athlets .connection-item2,
    .athlets .collaboration-item2,
    .athlets .growth-item2 {
        width: 60%;
    }

    .athlets .connection-item1,
    .athlets .collaboration-item1,
    .athlets .growth-item1 {
        width: 40%;
    }

    .connection-image-line1 {
        top: 100px;
        right: -311px;
    }

    .players .connection-item2,
    .players .collaboration-item2,
    .players .growth-item2 {
        padding: 0;
        width: 40%;
    }

    .players .connection-item1,
    .players .collaboration-item1,
    .players .growth-item1 {
        width: 60%;
    }

    .players .connection-item2-text-container,
    .players .collaboration-item2-text-container,
    .players .growth-item2-text-container {
        margin-left: auto;
        padding-left: 20px;
    }

    .players .connection-image-plus1 {
        top: 39px;
        right: -80px;
    }

    .players .connection-image-plus2 {
        top: 54px;
        right: -106px;
    }

    .line2 {
        top: 43px;
        left: 517px;
        display: none;
    }

    .players .plus3 {
        top: 361px;
        left: 640px;
        display: none;
    }

    .players {
        overflow: hidden;
    }

    .athlets .connection-item2-text-container,
    .athlets .collaboration-item2-text-container,
    .athlets .growth-item2-text-container {
        padding-right: 20px;
    }

    .players .growth-item1 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .players .collaboration-item1 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .players .connection-item1 {
        padding-top: 70px;
        padding-bottom: 30px;
    }

    .be-active, .find-contact, .work-it {
        flex-direction: column;
    }

    .be-active-img,
    .find-contact-img,
    .work-it-img {
        height: 584px;
        width: 100%;
    }

    .be-active-caption,
    .find-contact-caption,
    .work-it-caption {
        font-size: 90px;
        line-height: 70px;
        max-width: 660px;
    }
    
    .be-active-container,
    .find-contact-container,
    .work-it-container {
        width: 100%;
        padding: 0;
        padding-top: 85px;
        padding-bottom: 60px;
        display: flex;
        justify-content: center;
    }

    .be-active-text,
    .find-contact-text,
    .work-it-text {
        max-width: 615px;
        margin-top: 35px;
        margin-bottom: 30px;
    }

    .be-active-block,
    .find-contact-block,
    .work-it-block {
        position: relative;
    }

    .be-active-number-container,
    .find-contact-number-container,
    .work-it-number-container {
        top: -168px;
        left: 0px;
    }

    .be-active-number-container,
    .find-contact-number-container,
    .work-it-number-container {
        width: 116px;
        height: 116px;
    }

    .download-app-container {
        flex-direction: column;
        margin-bottom: 185px;
    }

    .footer {
        padding-top: 130px;
    }

    .download-app-logo {
        margin-bottom: 80px;
    }

    .download-app-caption1 {
        font-size: 80px;
        line-height: 65px;
        margin-bottom: 20px;
        position: static;
    }

    .download-app-caption-container {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .download-app-caption2 {
        z-index: 1;
    }

    .footer-bottom {
        margin-top: 130px;
        padding-top: 37px;
        padding-bottom: 37px;
    }

    .footer .header-top__item1 {
        display: none;
    }

    .contact-us {
        display: none;
    }

    .social-container {
        margin-left: 0;
    }

    .footer-container {
        justify-content: center;
    }

    .facebook {
        width: 15px;
        height: 27px;
    }
    
    .twitter {
        width: 27px;
        height: 22px;
    }

    .instagram {
        width: 23px;
        height: 25px;
    }

    .download-app-caption1::before {
        left: 14px;
    }

    .download-app-caption1::after {
        right: 116px;
    }
}

@media (max-width: 767px) {
    body {
        min-width: 320px;
    }

    .header {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .container {
        margin: 0px auto;
        padding: 0px 12px;
        display: flex;
        flex-direction: column;
    }

    .header-top {
        justify-content: center;
        padding-bottom: 140px;
    }

    .athlets-and-coaches {
        display: none;
    }

    .header-top__item1 {
        width: 137px;
        height: 24px;
        background-size: contain;
    }

    .header-main-caption-1 h1,
    .header-main-caption-2 h1 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 1.6px;
    }

    .header-main-caption-1 h1 {
        margin-left: 0;
        margin-right: 18%;
    }

    .header-main-caption-2 h1 {
        margin-right: 0;
        width: 245px;
        margin-left: 17%;
    }

    .header-main-caption-1 {
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
    }

    .header-main-caption-2 {
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
    }

    .header-main-caption-1 h1:before {
        top: -22px;
        right: 10px;
        width: 142px;
        height: 176px;
        background-size: contain;
    }

    .app-text-container {
        font-size: 8px;
    }

    .app-icon-1 {
        background-size: contain;
        width: 15px;
        height: 17px;
        margin-right: 10px;
        margin-left: 20px;
    }

    .app-icon-2 {
        background-size: contain;
        width: 16px;
        height: 18px;
        margin-left: 30px;
        margin-right: 8px;
    }

    .app-item {
        width: 142px;
        height: 39px;
    }

    .header-main-menu {
        flex-wrap: wrap;
        order: 1;
        margin-top: 45px;
        margin-bottom: 0;
    }

    .header-menu-item {
        font-size: 12px;
        margin-right: 16px;
        margin-left: 0;
        line-height: 20px;
    }

    .header-menu-item:last-child {
        margin-right: 0;
    }

    .mr-50 {
        margin-right: 8px;
    }

    .athlets {
        display: none;
    }

    .athlets-320px {
        display: flex;
        flex-direction: column;
    }

    .players {
        display: none;
    }

    .players-320px {
        display: flex;
        flex-direction: column;
    }

    .athlets-caption {
        margin-bottom: 0;
        font-size: 50px;
    }

    .be-active-number__number,
    .find-contact-number__number,
    .work-it-number__number {
        font-size: 14px;
    }

    .be-active-number-container,
    .find-contact-number-container,
    .work-it-number-container {
        width: 70px;
        height: 70px;
    }

    .be-active-number-container,
    .find-contact-number-container,
    .work-it-number-container {
        top: -90px;
        left: 15px;
    }

    .be-active-container,
    .find-contact-container,
    .work-it-container {
        padding-top: 35px;
        padding-bottom: 50px;
    }

    .be-active-caption,
    .find-contact-caption,
    .work-it-caption {
        font-size: 28px;
        line-height: 35px;
    }

    .be-active-text,
    .find-contact-text,
    .work-it-text {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 20px;
        max-width: 400px;
    }

    .be-active-block,
    .find-contact-block,
    .work-it-block {
        padding: 0 15px;
    }

    .be-active-img,
    .find-contact-img,
    .work-it-img {
        height: 351px;
    }

    .footer {
        padding-top: 95px;
    }

    .download-app-logo {
        margin-bottom: 55px;
        width: 73px;
        height: 78px;
        background-size: contain;
    }

    .download-app-caption1 {
        font-size: 34px;
        letter-spacing: 2px;
        line-height: 29px;
        margin-bottom: 7px;
    }

    .download-app-caption2 {
        font-size: 15px;
        letter-spacing: 0.75px;
        line-height: 15px;
    }

    .download-app-container {
        margin-bottom: 70px;
    }

    .footer-bottom {
        margin-top: 125px;
        padding-top: 20px;
        padding-bottom: 15px;
    }

    .facebook {
        width: 10px;
        height: 18px;
    }

    .twitter {
        width: 18px;
        height: 15px;
    }

    .instagram {
        width: 17px;
        height: 17px;
    }

    .download-app-caption1::before {
        background-image: url('../images/footer-320-line1.svg');
        width: 58px;
        height: 67px;
        top: -7px;
        left: 5px;
    }

    .download-app-caption1::after {
        background-image: url('../images/footer-320-line2.svg');
        width: 95px;
        height: 121px;
        top: -35px;
        left: 139px;
    }
}

@media (max-width: 365px) {
    .header-main-menu {
        flex-wrap: wrap;
        order: 1;
        margin-top: 45px;
        margin-bottom: 0;
    }

    .header-menu-item {
        font-size: 12px;
        margin-right: 30px;
        line-height: 20px;
    }

    .header-menu-item:nth-child(3n) {
        margin-right: 0;
    }

    .header-menu-item:nth-child(4) {
        margin-right: 50px;
    }

    .header-menu-item:last-child {
        margin-right: 0;
    }
}