/*Extra small devices (portrait phones, less than 576px)*/
@media (min-width: 320px) and (max-width: 575px) {
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.7441em;
    }

    .hero-content-left h1 {
        font-size: 2.25rem;
        line-height: initial;
    }

    /*navbar*/
    .main-menu ul li {
        padding: 15px 0 0;
    }

    /*promo*/
    div[class*='col-']:not(:last-of-type) {
        margin-bottom: 20px !important;
    }

    .row > div[class*='col-']:last-of-type {
        margin-bottom: 0;
    }

    .download-btn a.btn {
        margin: 7px 0;
    }

    .hero-animation-img {
        display: none
    }

    .footer-bottom {
        padding-bottom: 30px;
        text-align: center;
    }

    .hero-content-left {
        text-align: center;
    }

    .button-group a {
        margin: 0 auto;
    }

    .mobile {
        display: block;
    }
        .desktop{
    display: none;
}
    .affix .navbar-brand{
        width: 60px;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
    .button-group a {
        margin: 0 auto;
    }
    .affix .navbar-brand{
        width: 60px;
    }
    .footer-bottom {
        padding-bottom: 30px;
        text-align: center;
    }

    .hero-content-left {
        text-align: center;
    }

    /*promo*/
    div[class*='col-']:not(:last-of-type) {
        margin-bottom: 20px !important;
    }

    .row > div[class*='col-']:last-of-type {
        margin-bottom: 0;
    }

    .hero-animation-img {
        display: none
    }

    .mobile {
        display: block;
    }
        .desktop{
    display: none;
}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
    .hero-animation-img {
        display: none
    }
    .affix .navbar-brand{
        width: 60px;
    }
    .mobile {
        display: block;
    }
    .desktop{
    display: none;
}
    .hero-content-left {
        text-align: center;
            width: 200%;
    }

    .footer-bottom {
        padding-bottom: 30px;
        text-align: center;
    }

    .button-group a {
        margin: 0 auto;
    }
    .gams img {
    max-width: 400px;
    margin-top: 14px;
}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}