/* Mobile (from bootstrap) */
@media (max-width: 767px) {
    /*General*/
    .content {
        width: 100%;
        margin-top: 20px;
    }

        .content.index {
            margin-top: 60%;
            width: 90%;
        }

            .content.index.toggled {
                margin-top: 10%;
            }

    .navbar-nav .dropdown-menu {
        margin-top: 0;
    }

    .navbar-nav .nav-link span.current {
        display: none;
    }

    .text-xxs {
        font-size: .7em;
    }

    /* Index page */
    /* Carousel banner */
    .banner > .carousel-inner > .carousel-item > img {
        /*margin-top: -10%;*/
        margin-top: 0;
    }

    /* Navbar (Shop list) */
    .nav-item.col-2.col-md-4.col-lg-2,
    .nav-item.col-2.col-md-4.col-lg-2 * {
        padding: 0;
    }

    /* Reward page */
    #reward-detail {
        width: 100%;
    }

    .progress-bullet div span {
        display: inline-block;
        transform: translateX(-5px) rotateZ(-45deg);
        font-size: 0.9em;
        position: relative;
        top: 10px;
        right: 60%;
        text-align: right;
        width: 6em;
    }

    /* Coupon */
    .coupon .emp {
        font-size: 18pt;
        text-align: left;
    }

    .hidden-coupon .info {
        top: 30px;
        right: 25px;
    }

    /* Hidden coupon */
    .hidden-coupon.fancybox-content {
        padding: 30px 20px;
    }

    #selectLanguage {
        position: static;
        border-top: 1px solid #1e475b;
    }

        #selectLanguage li.dropdown {
            margin-left: 8px !important;
            text-align: left;
        }

        #selectLanguage div.dropdown-menu {
            margin-top: 0;
        }
}

/* Tablet (From bootsrap) */
@media (min-width: 768px) and (max-width: 991px) {
    .content.index {
        margin-top: 50%;
    }

        .content.index.toggled {
            margin-top: 20%;
        }

    #selectLanguage {
        position: static;
        border-top: 1px solid #1e475b;
    }

        #selectLanguage li.dropdown {
            margin-left: 8px !important;
            text-align: left;
        }

        #selectLanguage div.dropdown-menu {
            margin-top: 0;
        }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .hero-wrapper {
        width: 100%;
        padding: 0;
    }

        .hero-wrapper h2 {
            font-size: 40px;
            padding: 0 30px;
        }

    .index h2 {
        font-size: 28px;
    }

    .circle-container {
        margin-bottom: 60px;
        font-size: 18px;
    }
}

@media (min-width: 320px) and (max-width: 600px) {
    .hero-wrapper {
        width: 100%;
        padding: 0;
    }

        .hero-wrapper h2 {
            font-size: 40px;
            padding: 0 30px;
        }

    .index h2 {
        font-size: 28px;
    }

    .circle-container {
        margin-bottom: 60px;
        font-size: 18px;
    }
}