﻿@media only screen and (max-width: 1340px) {

    .sponsors-container img {
        width: 68px;
    }

    .promo-details h2 {
        font-size: 26px;
    }


    .steps-container h2 {
        font-size: 19px;
    }

    .steps-container p {
        font-size: 12px;
    }

    .sponsors-container {
        height: 80px;
        background-size: cover;
    }

    .bottom-wrapper {
        max-width: 1024px;
    }

    iframe {
        width: 1024px;
    }

}

@media only screen and (max-width: 1024px) {
    main {
        background-position: center -134px;
    }

    .sponsors-container img {
        width: 50px;
    }

    iframe {
        height: 105px;
    }

    .odds-box {
        height: 105px;
    }

    .red-arrow {
        transform: rotate(90deg);
    }

    .steps-container h2 {
        font-size: 16px;
    }

    .digit{
        font-size: 72px !important;
    }

    .promo-details h2 hr {
        width: 22%;
    }

    .promo-details h2 {
        font-size: 21px;
    }

    .steps-container p {
        font-size: 12px;
    }

    .how-it-works-list li p {
        font-size: 13px;
    }

    .tnc-container {
        font-size: 13px;
    }

    .payments-logo {
        height: 80px;
    }

    .sponsors-container {
        height: 60px;
    }

    .bottom-wrapper {
        max-width: 768px;
    }

    iframe {
        width: 768px;
    }

}

@media only screen and (max-width: 768px) {

    main {
        background-image: url(../image/bg-768.jpg);
        background-repeat: no-repeat;
        background-position: center -91px;
    }

    .promo-details-title {
        font-size: 29px;
    }

    .tnc-container {
        width: 100%;
    }

    .promo-details-title-2 {
        margin-top: -30px;
        font-size: 22px;
    }

    .sponsors-container img {
        width: 40px;
    }

    .steps-container h2 {
        font-size: 14px;
    }

    .steps-container p {
        font-size: 11px;
    }

    .digit {
        font-size: 60px !important;
        margin-top: 21px;
    }

    .payments-logo {
        height: 65px;
    }

    .sponsors-container {
        height: 50px;
    }

    .bottom-wrapper {
        max-width: 650px;
    }

    iframe {
        width: 650px;
    }

}


@media only screen and (max-width: 600px) {

    main {
        background-image: url(../image/bg-600.jpg);
        background-repeat: no-repeat;
        background-position: center -56px;
    }

    .collapse {
        padding: 25px 35px;
    }

    .promo-details-title {
        font-size: 20px;
    }

    .promo-details {
        font-size: 14px;
    }

    .rf-main-wrapper .action-container>.terms-and-conds {
        font-size: 11px!important;
        padding: 0px!important;
    }

    .rf-main-wrapper button.rf-submit-button {
        font-size: 20px !important;
    }

    .registration-form {
        padding: 15px!important;
    }

    .promo-details h2 hr {
        width: 18%;
    }

    .promo-details h2 {
        font-size: 20px;
    }

    .how-it-works-list {
        width: 90%;
    }

    .digit {
        font-size: 54px !important;
        margin-top: 25px;
    }

    .step {
        padding: 0 7px;
    }

    .promo-details h2 {
        font-size: 17px;
    }

    .tnc-table td {
        font-size: 10px;
    }

    .tnc-table th {
        font-size: 12px;
    }

    .how-it-works-list li p {
        font-size: 12px;
    }

    .tnc-container h2 {
        font-size: 14px;
    }

    .payments-logo {
        height: 50px;
    }

    .rf-main-wrapper {
        max-width: 475px !important;
    }

    .sponsors-container img {
        width: 32px;
    }

    .sponsors-container {
        height: 40px;
    }

    .bottom-wrapper {
        max-width: 480px;
    }

    iframe {
        width: 480px;
    }

}

@media only screen and (max-width: 480px) {

    main {
        background-image: url(../image/bg-480.jpg);
        background-repeat: no-repeat;
        background-position: center -5px;
    }

    .sponsors-inner-container {
        flex-wrap: wrap;
    }

    .rf-main-wrapper {
        max-width: 95% !important;
    }

    .promo-details-title {
        font-size: 27px;
    }

    .promo-details-title-2{
        font-size: 20px;
    }

    .promo-details {
        font-size: 12px;
    }

    .steps-container h2 {
        font-size: 16px;
    }

    .steps-container p {
        font-size: 11px;
    }

    .promo-details h2 hr {
        width: 13%;
    }

    .promo-details h2 {
        font-size: 13px;
    }

    .how-it-works-list li {
        font-size: 15px;
    }

    .payments-logo {
        height: 35px;
    }

    .tpl-contacts span.tpl-social-media {
        display: inline-block!important;
        margin-top: 0px!important;
    }

    .how-it-works-list li p {
        font-size: 13px;
    }

    .sponsors-container img {
        width: 60px;
        height: 60px;
    }

    .sponsors-container {
        height: auto;
    }

    .bottom-wrapper {
        max-width: 335px;
    }

    iframe {
        width: 335px;
    }

    .step {
        padding: 0 7px;
        background: #263c58;
        border-radius: 10px;
        margin: 11px auto;
    }

    .step-2 {
        border-right: none;
        border-left: none;
        margin: 0;
    }

    .steps-container {
        display: grid;
        background: none;
        margin: 0px auto;
        text-align: center;
    }

    .step{
        padding-left: 81px;
        border: 2px solid #00f0ff;
        max-width: 100%;
        width: 380px;
    }

    .tnc-container h2 {
        font-size: 11px;
    }

    .tnc-container {
        font-size: 11px;
    }

    .tnc-add {
        font-size: 11px;
    }

    .how-it-works-list li p {
        font-size: 11px;
    }

    .promo-text {
        font-size: 11px;
    }

    .bottom-button {
        width: 199px;
        height: 44px;
        font-size: 17px;
    }

    .tnc-table{
        width: 100%;
        border-collapse: collapse;
        white-space: nowrap;
        margin-bottom: 10px;
    }

    .scrollable{
        overflow-x: auto;
    }

    /* Define scrollbar styles */
    /* width */
    .scrollable::-webkit-scrollbar {
        width: 0px;
        height: 7px;
    }

    /* Track */
    .scrollable::-webkit-scrollbar-track {
        background: #696969;
        border-radius: 5px;
        height: 5px;
    }

    /* Handle */
    .scrollable::-webkit-scrollbar-thumb {
        background: #83f8ff;
        border-radius: 5px;
        height: 7px;
    }

    .digit {
        font-size: 71px !important;
        margin-top: 0;
    }

    .step-text {
        margin-top: 0;
        margin-left: 25px;
    }

}

@media only screen and (max-width: 380px) {
    .step {
        width: 320px;
    }

    .step {
        padding-left: 47px;
    }
}

@media only screen and (max-width: 320px) {

    main {
        background-image: url(../image/bg-320.jpg);
        background-repeat: no-repeat;
        background-position: center -5px;
    }

    .step {
        width: 280px;
    }

    .step {
        padding-left: 24px;
    }

}
