@media screen and (min-width: 356px) and (max-width: 480px) {
    /* Template */
    body {
        font-size: 14px;
    }
    .container{ max-width: 100%; }
    section{
        padding: 1rem 1rem;
    }
    h6{
        font-size: 20px;
    }
    p{
        font-size: 14px;
    }
    .banner-content{
        overflow: hidden;
    }
    .px-3rem{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .px-5{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-4{
        padding-top: .8rem !important;
        padding-bottom: .8rem !important;
    }
    .px-4rem{
        padding-left: 0;
        padding-right: 0;
    }
    .px-5rem{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .my-5rem{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    /* End of Template */
    /* Top */
    .fixed-nav {
        padding-top: 25px !important;
    }
    .navbar{
        padding: .5rem 1rem;
    }
    .navbar-logo {
        height: 20px;
    }
    .navbar-collapse {
        background-color: rgba(0, 0, 0, .8)
    }
    .navbar-brand {
        margin: 0;
    }
    .nav-tabs .nav-link{
        width: 33%;
        padding: 8px 10px;
    }
    .nav-tabs .nav-link span{
        font-size: 14px;
    }
    #nav-center .nav-item{
        padding: 0;
    }
    
    /* End of Top */
    /* Main */
        /* Top Banner */
        .banner-overlay{
            bottom: -8rem;
            width: 1000px;
            left: -16rem;
        }
        .to-front-text{
            bottom: -9rem;
        }
        .line-divider{
            margin: 1rem 0;
            width: 70%;
        }
        .register_and_play{
            padding: 5px 10px;
        }
        .register_and_play div{
            padding: 5px 10px;
            font-size: 18px;
        }
        .banner_top .col-md-8, .banner_top .col-md-12{
            padding: 0;
        }
        .img-title{
            width: 100%;
        }
        /* End of Top banner */
        .banner_top{
            padding-top: 5rem;
        }
        .banner_top .banner-content{
            padding: 3rem 0 0 0;
        }
        header img:last-child{
            /* margin-top: 2rem; */
        }
        .img-fluid-sm{
            width: 80%;
        }
        header .px-5{
            padding: 0 !important
        }
       .games-container{
            flex-direction: column;
       }
       .game-items{
        width: 100%;
       }
       .card-top svg{
        width: 100%;
       }
       #rewards{
        padding: 0 1rem;
       }
       .rewards-item{
        width: 100%;
       }
       #rewards .flex-row{
        flex-direction: column !important;
       }
       #cta{
        padding: 4rem 0;
       }
       .btn-custom, .btn-custom-sub{
        font-size: 20px;
        }
        .red-ribbon{
            padding: 0;
        }
        .red-ribbon img{
            margin-top: 2rem;
        }
        .fs-title{
            font-size: 2rem;
        }
        .fs-main{
            font-size: 35px !important;
        }
        /* Accordion */
        .accordion{
            padding: 0;
        }
        .accordion-item{
            padding: .5rem 1rem;
        }
        .accordion-button{
            font-size: 22px;
        }
        /* Cards */
        .card-top{
            top: 0px;
            left: -10px;
        }
        
        /* Modals */
        .modal-body{
            padding: 0 !important;
        }
        .modal-body iframe{
            height: 250px;
        }
    /* End of Main */
    /* Footer */
    footer {
        padding: 1rem 0;
    }
    footer .offset-md-3 {
        margin-left: 0 !important;
        width: 100% !important;
    }
    footer .display-6 {
        font-size: 1.5rem !important;
    }
    footer .footer-logo{
        width: 50% !important;
        height: auto;
    }
    footer .col-md-12{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
    }
    footer .footer-logo-container{
        text-align: left;
    }
    footer img{
        width: auto;
    }
    footer .list-group-custom{
        padding: 0;
    }
    
    footer .justify-content-between.py-5{
        flex-direction: column;
        text-align: center;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    #btn-to-top{
        width: 30px;
        height: 30px;
    }
    #btn-to-top:after{
        font-size: 1.2em;
        line-height: 30px;
    }
    /* End of footer */
}
@media screen and (min-width: 480px) and (max-width: 600px) {
    /* Template */
    body {
        font-size: 15px;
    }
    .container{ max-width: 100%; }
    section{
        padding: 1rem 1rem;
    }
    h6{
        font-size: 20px;
    }
    p{
        font-size: 15px;
    }
    .banner-content{
        overflow: hidden;
    }
    .px-3rem{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .px-5{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-4{
        padding-top: .8rem !important;
        padding-bottom: .8rem !important;
    }
    .px-4rem{
        padding-left: 0;
        padding-right: 0;
    }
    .px-5rem{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .my-5rem{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    /* End of Template */
    /* Top */
    .fixed-nav {
        padding-top: 25px !important;
    }
    .navbar{
        padding: .5rem 1rem;
    }
    .navbar-logo {
        height: 20px;
    }
    .navbar-collapse {
        background-color: rgba(0, 0, 0, .8)
    }
    .navbar-brand {
        margin: 0;
    }
    .nav-tabs .nav-link{
        width: 33%;
        padding: 8px 10px;
    }
    .nav-tabs .nav-link span{
        font-size: 14px;
    }
    #nav-center .nav-item{
        padding: 0;
    }
    
    /* End of Top */
    /* Main */
        /* Top Banner */
        .banner-overlay{
            bottom: -8rem;
            width: 1000px;
            left: -16rem;
        }
        .to-front-text{
            bottom: -9rem;
        }
        .line-divider{
            margin: 1rem 0;
            width: 70%;
        }
        .register_and_play{
            padding: 5px 10px;
        }
        .register_and_play div{
            padding: 5px 10px;
            font-size: 18px;
        }
        .banner_top .col-md-8, .banner_top .col-md-12{
            padding: 0;
        }
        .img-title{
            width: 80%;
        }
        /* End of Top banner */
        .banner_top{
            padding-top: 5rem;
        }
        .banner_top .banner-content{
            padding: 3rem 0 0 0;
        }
        header img:last-child{
            /* margin-top: 2rem; */
        }
        .img-fluid-sm{
            width: 70%;
        }
        header .px-5{
            padding: 0 !important
        }
       .games-container{
            flex-direction: column;
       }
       .game-items{
        width: 100%;
       }
       .card-top svg{
        width: 100%;
       }
       #rewards{
        padding: 0 1rem;
       }
       .rewards-item{
        width: 100%;
       }
       #rewards .flex-row{
        flex-direction: column !important;
       }
       #cta{
        padding: 4rem 0;
       }
       .btn-custom, .btn-custom-sub{
        font-size: 20px;
        }
        .red-ribbon{
            padding: 0;
        }
        .red-ribbon img{
            margin-top: 2rem;
        }
        .fs-title{
            font-size: 2rem;
        }
        .fs-main{
            font-size: 35px !important;
        }
        /* Accordion */
        .accordion{
            padding: 0;
        }
        .accordion-item{
            padding: .5rem 1rem;
        }
        .accordion-button{
            font-size: 22px;
        }
        /* Cards */
        .card-top{
            top: 0px;
            left: -10px;
        }
        
        /* Modals */
        .modal-body{
            padding: 0 !important;
        }
        .modal-body iframe{
            height: 250px;
        }
    /* End of Main */
    /* Footer */
    footer {
        padding: 1rem 0;
    }
    footer .offset-md-3 {
        margin-left: 0 !important;
        width: 100% !important;
    }
    footer .display-6 {
        font-size: 1.5rem !important;
    }
    footer .footer-logo{
        width: 50% !important;
        height: auto;
    }
    footer .col-md-12{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
    }
    footer .footer-logo-container{
        text-align: left;
    }
    footer img{
        width: auto;
    }
    footer .list-group-custom{
        padding: 0;
    }
    
    footer .justify-content-between.py-5{
        flex-direction: column;
        text-align: center;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    #btn-to-top{
        width: 30px;
        height: 30px;
    }
    #btn-to-top:after{
        font-size: 1.2em;
        line-height: 30px;
    }
    /* End of footer */
}
@media screen and (min-width: 600px) and (max-width: 756px) {
    /* Template */
    body {
        font-size: 15px;
    }
    .container{ max-width: 100%; }
    section{
        padding: 1rem 1rem;
    }
    h6{
        font-size: 20px;
    }
    p{
        font-size: 15px;
    }
    .banner-content{
        overflow: hidden;
    }
    .px-3rem{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .px-5{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-4{
        padding-top: .8rem !important;
        padding-bottom: .8rem !important;
    }
    .px-4rem{
        padding-left: 0;
        padding-right: 0;
    }
    .px-5rem{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .my-5rem{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    /* End of Template */
    /* Top */
    .fixed-nav {
        padding-top: 25px !important;
    }
    .navbar{
        padding: .5rem 1rem;
    }
    .navbar-logo {
        height: 20px;
    }
    .navbar-collapse {
        background-color: rgba(0, 0, 0, .8)
    }
    .navbar-brand {
        margin: 0;
    }
    .nav-tabs .nav-link{
        width: 33%;
        padding: 8px 10px;
    }
    .nav-tabs .nav-link span{
        font-size: 14px;
    }
    #nav-center .nav-item{
        padding: 0;
    }
    
    /* End of Top */
    /* Main */
        /* Top Banner */
        .banner-overlay{
            bottom: -8rem;
            width: 1000px;
            left: -16rem;
        }
        .to-front-text{
            bottom: -9rem;
        }
        .line-divider{
            margin: 1rem 0;
            width: 70%;
        }
        .register_and_play{
            padding: 5px 10px;
        }
        .register_and_play div{
            padding: 5px 10px;
            font-size: 18px;
        }
        .banner_top .col-md-8, .banner_top .col-md-12{
            padding: 0;
        }
        .img-title{
            width: 80%;
        }
        /* End of Top banner */
        .banner_top{
            padding-top: 5rem;
        }
        .banner_top .banner-content{
            padding: 3rem 0 0 0;
        }
        header img:last-child{
            /* margin-top: 2rem; */
        }
        .img-fluid-sm{
            width: 50%;
        }
        header .px-5{
            padding: 0 !important
        }
       .games-container{
            flex-direction: column;
       }
       .game-items{
        width: 100%;
       }
       .card-top svg{
        width: 100%;
       }
       #rewards{
        padding: 0 1rem;
       }
       .rewards-item{
        width: 100%;
       }
       #rewards .flex-row{
        flex-direction: column !important;
       }
       #cta{
        padding: 4rem 0;
       }
       .btn-custom, .btn-custom-sub{
        font-size: 20px;
        }
        .red-ribbon{
            padding: 0;
        }
        .red-ribbon img{
            margin-top: 2rem;
        }
        .fs-title{
            font-size: 2rem;
        }
        .fs-main{
            font-size: 35px !important;
        }
        /* Accordion */
        .accordion{
            padding: 0;
        }
        .accordion-item{
            padding: .5rem 1rem;
        }
        .accordion-button{
            font-size: 22px;
        }
        /* Cards */
        .card-top{
            top: 0px;
            left: -10px;
        }
        
        /* Modals */
        .modal-body{
            padding: 0 !important;
        }
        .modal-body iframe{
            height: 250px;
        }
    /* End of Main */
    /* Footer */
    footer {
        padding: 1rem 0;
    }
    footer .offset-md-3 {
        margin-left: 0 !important;
        width: 100% !important;
    }
    footer .display-6 {
        font-size: 1.5rem !important;
    }
    footer .footer-logo{
        width: 50% !important;
        height: auto;
    }
    footer .col-md-12{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
    }
    footer .footer-logo-container{
        text-align: left;
    }
    footer img{
        width: auto;
    }
    footer .list-group-custom{
        padding: 0;
    }
    
    footer .justify-content-between.py-5{
        flex-direction: column;
        text-align: center;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    #btn-to-top{
        width: 30px;
        height: 30px;
    }
    #btn-to-top:after{
        font-size: 1.2em;
        line-height: 30px;
    }
    /* End of footer */
}
@media screen and (min-width: 756px) and (max-width: 991px) {
    /* Template */
    body {
        font-size: 12px;
    }
    .container{ max-width: 100%; }
    section{
        padding: 1rem 1rem;
    }
    h6{
        font-size: 20px;
    }
    p{
        font-size: 18px;
    }
    .banner-content{
        overflow: hidden;
    }
    .px-5{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-4{
        padding-top: .8rem !important;
        padding-bottom: .8rem !important;
    }
    .px-4rem{
        padding-left: 0;
        padding-right: 0;
    }
    .px-5rem{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .my-5rem{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    /* End of Template */
    /* Top */
    .fixed-nav {
        padding-top: 25px !important;
    }
    .navbar-logo {
        height: 20px;
    }
    .navbar-collapse {
        background-color: rgba(0, 0, 0, .8)
    }
    .navbar-brand {
        margin: 0;
    }
    .nav-tabs .nav-link{
        width: 33%;
        padding: 8px 10px;
    }
    .nav-tabs .nav-link span{
        font-size: 14px;
    }
    /* End of Top */
    /* Main */
        /* Top Banner */
        .banner-overlay{
            bottom: -1rem;
            width: 79%;
        }
        .line-divider{
            margin: 1rem 0;
            width: 70%;
        }
        .register_and_play{
            padding: 5px 10px;
        }
        .register_and_play div{
            padding: 5px 10px;
            font-size: 25px;
        }
        /* End of Top banner */
        /* Extra */
        .extra-bg{
            padding: 1rem 0;
        }
        .extra-bg .d-flex{
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .item-extra{
            width: 50%;
            padding: 5px 1rem;
        }
        .item-extra:nth-child(2){
            border: none;
        }
        .item-extra:nth-child(3){
            width: 60%;
            padding: 1rem;
        }
        .item-extra img{
            height: 30px;
        }
        .item-extra h5{
            font-size: 13px;
            padding-left: .5rem;
            font-weight: 200;
        }
        /* End of Extra */
        /* about */
        #about img{
            margin: .5rem 0;
        }
        /* End of About */
        /* How To Join */
        .card-black{
            padding: 1rem;
            border-radius: 5px;
            margin: .5rem 0;
        }
        .card-black h4{
            font-size: 20px;
        }
        .card-black img{
            height: 200px;
        }
        /* End of How to Join */
    /* End of Main */
    /* Footer */
    footer {
        padding: 1rem 0;
    }
    footer .offset-md-3 {
        margin-left: 0 !important;
        width: 100% !important;
    }
    footer .display-6 {
        font-size: 1.5rem !important;
    }
    footer .footer-logo{
        width: 50% !important;
        height: auto;
    }
    footer .col-md-12{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
    }
    footer .footer-logo-container{
        text-align: center;
    }
    footer img{
        width: auto;
    }
    footer .list-group-custom{
        padding: 0;
    }
    
    /* End of footer */
}
@media screen and (min-width: 356px) and (max-width: 991px) {
    .navbar-collapse.show {
        display: block;
        /* position: absolute; */
        width: 100%;
        top: 80px;
    }
    .navbar-collapse {
        background: white;
    }
    .navbar-collapse a {
        color: black;
    }
    .navbar-collapse .nav-item:last-child {
        margin-bottom: 20px;
    }
    footer .list-group-custom{
        margin: 0 !important;
    }
    footer .list-group-custom li{
        line-height: 24px;
    }
}
@media screen and (min-width: 356px) and (max-width: 767px) {
    #steps-mobile{
        display: block;
    }
    #steps{
        display: none;
    }
    .text-right-mobile{
        text-align: right;
    }
}
@media screen and (min-width: 356px) and (max-width: 758px) {
    footer .position-absolute {
        position: absolute !important;
    }
    .navbar .d-flex{
        justify-content: space-between;
    }
}

@media screen and (min-width: 992px)  and (max-width: 1200px){
    
}
.nav-buttons {
    display: inline-flex;
}
.navbar-expand-lg .navbar-collapse.collapse-right{
    margin-left: auto;
}