/* ==========================================================================
   Responsive rules (Elementor breakpoints of the live site: 1024 / 767)
   ========================================================================== */


/* Tablet & below --------------------------------------------------------- */

@media (max-width: 1024px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 24px;
        letter-spacing: .5px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    h5 {
        font-size: 16px;
    }
    h6 {
        font-size: 15px;
    }
     :root {
        --s20-container: 1024px;
    }
    .s20-section-title {
        font-size: 24px;
        margin-bottom: 25px;
    }
    h1 {
        height: 100px !important;
    }
    .s20-section-desc {
        font-size: 15px;
        margin: -10px 0 25px;
    }
    .s20-dark-card {
        padding: 0 15px 15px;
    }
    .s20-dark-card--left {
        padding-top: 25px;
    }
    .s20-card-section .s20-dark-card {
        width: 90%;
    }
    /* The live site hides the whole top bar on tablet */
    .s20-topbar {
        display: none;
    }
    .s20-header-brand {
        width: 40%;
    }
    .s20-logo {
        width: auto;
    }
    .s20-logo-img {
        max-width: 150px;
    }
    .s20-header-meta {
        width: auto;
        order: 3;
        margin-left: 0;
    }
    .s20-date-badge {
        font-size: 14px;
        padding: 2px 14px;
    }
    .s20-marquee-text {
        font-size: 14px;
    }
    /* Mobile navigation */
    /* Tablet: logo | (hamburger at the right of the middle column) | date badge */
    .s20-navigation {
        flex: 1 1 auto;
        order: 2;
        justify-content: flex-end;
        margin: 0 10px;
        position: static;
    }
    .s20-menu-toggle {
        display: inline-flex;
    }
    .s20-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 70;
        display: none;
        background: #fff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
    }
    .s20-menu.is-open {
        display: block;
    }
    .s20-nav-list {
        flex-direction: column;
        align-items: stretch;
    }
    .s20-nav-list>li>a {
        padding: 13px 20px;
        color: var(--s20-text-dark);
        border-bottom: 1px solid #eee;
        white-space: normal;
    }
    .s20-nav-list>li>a::after {
        display: none;
    }
    .s20-nav-list>li>a:hover,
    .s20-nav-list>li.current-menu-item>a,
    .s20-nav-list>li.current_page_item>a {
        background: var(--s20-gold);
        color: #000;
    }
    .s20-nav-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: #f7f7f7;
    }
    .s20-nav-list .sub-menu a {
        padding-left: 36px;
    }
    .s20-header {
        position: relative;
    }
    .s20-header-inner {
        position: relative;
        justify-content: space-between;
    }
    .s20-hero {
        padding: 20px 10px;
    }
    .s20-clock-box {
        padding: 10px;
    }
    .s20-pill {
        padding: 5px;
        font-size: 14px;
    }
    .s20-pill-icon {
        font-size: 16px;
    }
    .s20-games-heading,
    .s20-payment-closing {
        font-size: 24px;
    }
    .s20-games-subheading,
    .s20-payment-heading {
        font-size: 18px;
    }
    .s20-games-timing {
        font-size: 16px;
    }
    .s20-payment-text,
    .s20-payment-tagline {
        font-size: 15px;
    }
    .s20-card-desc,
    .s20-card-note {
        font-size: 14px;
    }
    .s20-card-name,
    .s20-card-phone {
        font-size: 17px;
    }
    .s20-results-split--2 {
        grid-template-columns: 1fr;
    }
    .s20-scroll-hint {
        display: block;
    }
    .s20-blog-carousel .s20-blog-slide,
    .s20-blog-carousel.s20-cols-3 .s20-blog-slide {
        flex-basis: calc((100% - 20px) / 2);
    }
    .s20-blog-grid,
    .s20-blog-grid.s20-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .s20-post-card-title {
        font-size: 18px;
    }
    .s20-post-card-excerpt {
        font-size: 14px;
    }
    .s20-faq-answer {
        padding: 10px;
    }
    .s20-footer-main {
        padding: 40px 10px 20px;
    }
    .s20-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .s20-footer-brand {
        padding: 5px;
    }
    .s20-footer-disclaimer {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .s20-disclaimer-title {
        justify-content: center;
        border-right: 0;
        padding-right: 0;
    }
    .s20-disclaimer-text {
        border-right: 0;
        padding-right: 0;
    }
    .s20-contact-grid {
        grid-template-columns: 1fr;
    }
    .s20-page-builder-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .s20-page-builder-section--content_left .s20-page-builder-content,
    .s20-page-builder-section--content_left .s20-page-builder-media {
        grid-column: auto;
        grid-row: auto;
    }
}


/* Mobile ------------------------------------------------------------------ */

@media (max-width: 767px) {
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 24px;
    }
     :root {
        --s20-container: 767px;
        --s20-section-pad: 40px 10px;
    }
    .s20-topbar {
        display: block;
        padding: 8px 10px;
    }
    .s20-topbar-inner {
        justify-content: center;
    }
    .s20-topbar-text {
        display: none;
    }
    .s20-topbar-links {
        justify-content: center;
        gap: 6px 14px;
    }
    .s20-header-brand {
        width: 35%;
        padding: 8px 6px;
    }
    .s20-navigation {
        flex: 0 0 8%;
        min-width: 40px;
        margin: 0;
        justify-content: center;
    }
    .s20-header-meta {
        width: 40%;
        justify-content: flex-end;
        padding-right: 6px;
    }
    .s20-date-badge {
        font-size: 13px;
        padding: 2px 10px;
    }
    .s20-marquee {
        padding: 6px;
    }
    .s20-marquee-text {
        font-size: 12px;
    }
    .s20-hero {
        padding: 15px 8px;
    }
    .s20-hero-strip {
        font-size: 18px;
    }
    .s20-strip {
        font-size: 15px;
        padding: 5px 14px;
    }
    .s20-card-section {
        padding: 15px 8px;
    }
    .s20-card-section .s20-dark-card {
        width: 100%;
    }
    .s20-dark-card {
        padding: 0 12px 15px;
    }
    .s20-card-actions {
        width: 100%;
    }
    .s20-card-actions .s20-btn {
        flex: 1 1 auto;
    }
    .s20-games-heading {
        font-size: 22px;
    }
    .s20-payment-methods {
        gap: 10px 16px;
    }
    .s20-blog-section,
    .s20-faq-section {
        padding: 30px 8px;
    }
    .s20-blog-carousel .s20-blog-slide,
    .s20-blog-carousel.s20-cols-3 .s20-blog-slide,
    .s20-blog-carousel.s20-cols-2 .s20-blog-slide {
        flex-basis: 100%;
    }
    .s20-blog-grid,
    .s20-blog-grid.s20-cols-4,
    .s20-blog-grid.s20-cols-2 {
        grid-template-columns: 1fr;
    }
    .s20-carousel-prev {
        left: 4px;
    }
    .s20-carousel-next {
        right: 4px;
    }
    .s20-post-card-img {
        height: 220px;
    }
    .s20-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
    }
    .s20-footer-brand {
        grid-column: 1 / -1;
    }
    .s20-footer-links {
        max-width: none;
    }
    .s20-post-nav {
        flex-direction: column;
    }
    .s20-post-nav-next {
        text-align: left;
    }
    .s20-404-code {
        font-size: 80px;
    }
    .s20-search-form {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .s20-footer-grid {
        grid-template-columns: 1fr;
    }
    .s20-topbar-links a,
    .s20-topbar-static {
        font-size: 11px;
    }
    .s20-date-badge {
        font-size: 12px;
        padding: 2px 8px;
        gap: 4px;
    }
    .s20-header-brand {
        width: 38%;
    }
    .s20-header-meta {
        width: 35%;
    }
    .s20-clock-box {
        font-size: 14px;
    }
    .s20-pill-text {
        font-size: 13px;
    }
    .s20-payment-text,
    .s20-payment-tagline {
        font-size: 14px;
    }
    .s20-card-name,
    .s20-card-phone {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .s20-hero {
        padding: 10px 6px;
    }
    .s20-dark-card {
        padding: 0 10px 12px;
    }
    .s20-strip {
        font-size: 14px;
    }
    .s20-hero-strip {
        font-size: 16px;
    }
    .s20-date-badge span {
        font-size: 11px;
    }
}


/* Large screens -------------------------------------------------------- */

@media (min-width: 1440px) {
    .s20-card-section .s20-dark-card {
        width: 70%;
    }
}