@media (min-width: 425px) {

    .hero {
        border-radius: 0px;
        min-height: 500px;
        width: 100% !important;
        background: url(../images/mobile/banner-world-cup-mobile.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .hero-content {
        min-height: 350px;
        flex-direction: row-reverse;
    }

    .hero-btn {
        position: absolute;
        top: 51% !important;
        right: 12%;
        min-width: 200px;
    }
    
    .swc-hero {
        border-radius: 0px;
        min-height: 500px;
        width: 100% !important;
        background: url(../images/mobile/banner-world-cup-mobile.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .swc-hero-content {
        min-height: 350px;
        flex-direction: row-reverse;
    }

    .swc-hero-btn {
        position: absolute;
        top: 51% !important;
        right: 13%;
        min-width: 200px
    }
}

@media (min-width: 768px) {

    .hero-btn {
        position: absolute;
        top: 52% !important;
        right: 31%;
        min-width: 200px;
    }
    
    .swc-hero {
        border-radius: 0px;
        min-height: 500px;
        width: 100%;
        background: url(../images/mobile/banner-world-cup-mobile.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .swc-hero-content {
        min-height: 640px;
        flex-direction: row-reverse;
    }

    .swc-hero-btn {
        position: absolute;
        top: 51% !important;
        right: 29%;
        min-width: 223px
    }

}

@media (min-width: 1024px) {
    
    .hero {
        border-radius: 0px;
        min-height: 500px;
        width: 100%;
        background: url(../images/banner-world-cup.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .hero-content {
        min-height: 640px;
        flex-direction: row-reverse;
    }

    .hero-btn {
        position: absolute;
        top: 46% !important;
        right: 35%;
        min-width: 223px
    }
    
    .swc-hero {
        border-radius: 0px;
        min-height: 500px;
        width: 100%;
        background: url(../images/banner-world-cup.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .swc-hero-content {
        min-height: 640px;
        flex-direction: row-reverse;
    }

    .swc-hero-btn {
        position: absolute;
        top: 45% !important;
        right: 35%;
        min-width: 223px
    }

}

@media (min-width: 1440px) {

    .hero {
        border-radius: 0px;
        min-height: 800px;
        background: url(../images/banner-world-cup.png) no-repeat center;
        background-size: cover;
        position: relative;
    }
    .hero-content {
        min-height: 640px;
        flex-direction: row-reverse;
    }
    .hero-btn {
        position: absolute;
        top: 47% !important;
        right: 41%;
        min-width: 223px
    }

    .swc-hero {
        min-height: 866px;
        background: url(../images/program/swc.png) no-repeat center;
        background-size: cover;
        position: relative;
        display: flex;
        align-items: center;
    }

    .swc-hero-content {
        min-height: 640px;
        flex-direction: row-reverse;
    }
    
    .swc-hero-btn {
        position: absolute;
        top: 47% !important;
        right: 41%;
        min-width: 223px
    }

    .intro-text {
        text-align: justify;
    }

    .swc-intro-font{
        font-family: 'Avenir LT Pro', sans-serif !important;
    }

    .swc-timeline {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 991px) {
    
}

@media (max-width: 1200px) and (min-width: 992px) {

    .main-menu li {
        margin-right: 18px; /* reduce spacing */
    }

    .main-menu li a {
        font-size: 15px; /* slightly smaller text */
    }

}

@media (max-width: 1200px) and (min-width: 992px) {

    .main-menu .btn {
        padding: 8px 20px !important;
        font-size: 14px;
        min-width: auto;
    }

}

@media (max-width: 1200px) {

    .col-md-4 {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .col-md-8 {
        flex: 0 0 70%;
        max-width: 70%;
    }

}

@media (min-width: 992px) and (max-width: 1200px) {

    .container-fluid {
        padding-left: 40px;
        padding-right: 40px;
    }

}