@media only screen and (max-width: 320px) {
    .bottom-menu .navbar{
        font-size: 12px;
    }
}

@media only screen and (max-width: 375px) {
    h1{
        font-size: 20px;
    }

    p{
        font-size: 0.8rem;
    }

    .header{
        padding: 20px 15px;
    }

    .main-overlay{
        width: 65%;
        top: 40%;
    }

    .font-md{
        font-size: 14px;
    }

    .bottom-menu .navbar{
        font-size: 12px;
    }

}

@media only screen and (max-width: 428px) {
    h1{
        font-size: 24px;
    }

    p{
        font-size: 1rem;
    }

    .main-overlay{
        width: 70%;
        top: 40%;
    }

    .font-md{
        font-size: 14px;
    }

    .bottom-menu .navbar{
        font-size: 12px;
    }

}

@media only screen and (min-width: 425px) {

    .slider-content{
        width: 65%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: 25px;
    }

    .bottom-menu .nav-item {
        text-align: center;
         padding: 5px 5px;
    }

    .main-overlay{
        display: flex;
        padding:0;
    }

    .main-overlay h1{
        text-align: left;
    }

    .main-overlay p {
        text-align: left;
    }

    .slider-content__btn-wrapper{
        text-align: left;
    }

    .slider-img{
        position: absolute;
        top:220px;
        z-index: 98;
        width: 120px;
        left:unset;
        right: 20px;
        transform: unset;
    }

    .slider-img img{
        width: 100%;
    }

}

@media only screen and (min-width: 568px) {

    .download{
        text-align: center;
    }

    .games{
        text-align: center;
    }

    .games img{
        width: 70%;
    }

    .download img{
        width: 70%;
    }

    .footer-logo img{
        width: 40%;
    }

    .footer-links img{
        width: 25%;
    }

    .bottom-menu .nav-item {
        text-align: center;
        padding: 5px 15px;
    }
}

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

    body.opened{
        overflow: initial;
    }

    .header-logo{
        max-width: 150px;
    }

    .steps img {
        width: 30%;
    }

    .title{
        font-size: 28px;
    }

    .subtitle{
        font-size: 24px;
    }

    .payments img{
        width: 100%;
    }

    .download img {
        width: 100%;
    }

    .footer-links img{
        width: 70%;
    }

    .footer-logo img {
        width: 70%;
    }

    .slider-img{
        width: 150px;
    }

    .main-overlay h1{
        width: 100%;
    }

    .slider-img{
        top:180px;
        width: 140px;
        left:unset;
        right: 150px;
        transform: unset;
    }

    .feature-title{
        text-align: left;
    }

    .feature-content{
        text-align: left;
    }

    .feature-icon{
        width: 55%;
    }

    footer{
        margin-bottom: 82px;
    }
}

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

    .main-overlay{
        margin: 0 auto;
    }

    .slider-content{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .main-nav__wrapper{
        width: 300px;
        right: 0;
    }

    .main-nav li {
        display: block;
        text-align: left;
    }

    .step-img{
        width: 80%;
        margin: 0 auto;
    }

    .video-frame{
        width: 450px;
        height: 300px;
    }

    .bottom-menu{
        width: 768px;
    }
}

@media only screen and (min-width: 769px){
    .main-nav__wrapper{
        right: unset;
    }
}


@media only screen and (min-width: 992px) {
    .sidebar,.back-to-top{
        right: 15%;
    }
}

@media only screen and (min-width: 1200px) {
    .sidebar,.back-to-top{
        right: 20%;
    }

    .step-img{
        width: 65%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1400px) {
    .sidebar,.back-to-top{
        right: 25%;
    }
}

@media only screen and (min-width: 1600px) {
    .sidebar,.back-to-top{
        right: 28%;
    }
}