@media only screen and (max-width: 1200px) {

    .main-container {
        max-width: 1024px;
    }
}

@media only screen and (max-width:1024px) {

    main {
        background-image: url('../en/bg-1024.jpg?v=1792411613');
    }

    .main-container {
        max-width: 768px;
    }


}

@media only screen and (max-width:768px) {

    main {
        background-image: url('../en/bg-768.jpg?v=1792411613');
    }

    .main-container {
        max-width: 600px;
    }

    .promo-container {
        font-size: 16px;
        width: 260px;
    }

    .promo-container button {
        font-size: 20px;
        width: 180px;
        height: 45px;
    }

    .how-it-works-container, .tnc-container {
        width: 100%;
    }
}

@media only screen and (max-width:600px) {

    main {
        background-image: url('../en/bg-600.jpg?v=1792411613');
        background-position: center -50px;
    }

    .main-container {
        max-width: 480px;
    }

    .promo-container {
        font-size: 14px;
        width: 230px;
    }

    .promo-container button {
        font-size: 18px;
        width: 175px;
        height: 40px;
    }

    .how-it-works-container div {
        padding: 10px 0px;
    }

    .how-it-works-container div ol {
        position: relative;
        left: 35px;
        width: 85%;
    }

    .collapse {
        padding: 25px 35px;
    }

    td, th {
        font-size: 14px;
    }
}

@media only screen and (max-width:480px) {

    main {
        background-image: url('../en/bg-480.jpg?v=1792411613');
        background-position: center -50px;
    }

    .main-container {
        max-width: 95%;
    }

    .promo-container {
        font-size: 14px;
        width: 230px;
    }

    .promo-container button {
        font-size: 18px;
        width: 170px;
        height: 40px;
    }

    .how-it-works-container div {
        padding: 10px 0px;
    }

    .how-it-works-container div ol {
        position: relative;
        left: 45px;
    }

    td, th {
        font-size: 14px;
    }
}