﻿@media screen and (max-width: 1160px) {
    .score-cards {
        height: auto;
    }

    .score-card {
        position: relative;
        display: inline-block;
        width: 280px;
        height: 280px;
        margin-bottom: 10px;
    }

        .score-card:nth-child(4), .score-card:nth-child(5) {
            display: none;
        }

        .score-card:first-child {
            top: 0;
            left: auto;
            transform: translateX(0);
        }

        .score-card:nth-child(2) {
            top: 0;
            left: auto;
            transform: translateX(0) scale(1);
        }

        .score-card:nth-child(3) {
            top: 0;
            left: auto;
            transform: translateX(0) scale(1);
        }
}

@media screen and (max-width: 1090px) {
    .nav {
        display: none;
    }

    #mobile-menu {
        display: block;
    }

    .menu-toggle {
        display: inline-block;
    }

    #login-wrapper {
        width: 50%;
    }

    .prize-grid {
        width: 95%;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 15px;
    }

    .header .col:first-child {
        flex-basis: 20%;
    }

    .header .col:nth-child(2) {
        display: none;
    }

    .header .col:last-child {
        flex-basis: 80%;
    }
}

@media screen and (max-width: 768px) {
    .next-fixture .row .col:first-child, .next-fixture .row .col:last-child {
        display: none;
    }

    h1, h2 {
        width: 80%;
        line-height: normal;
    }

    .next-fixture {
        width: 80%;
    }

    .rules-block {
        width: 80%;
        margin: 30px 0 30px 0;
    }

    #login-wrapper {
        width: 100%;
    }

    .topup-block {
        display: block;
        width: 80%;
        height: auto;
        padding: 0;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
        margin: 10px auto;
        vertical-align: top;
    }

        .topup-block .v-align-center {
            top: auto;
            transform: none;
        }

    /*#topup-wrapper h2, #topup-wrapper p {
        display: none;
    }*/

    .paypal-topup {
        margin-top: 10px;
    }

    .main-btn:hover, .submit:hover {
        background: #009DFF;
    }

    .fixture-block .col .team-name {
        display: block;
        font-size: 11px;
        text-align: center;
        line-height: normal;
        margin-top: 4px;
    }

    .fixture-block .col:first-child,
    .fixture-block .col:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: normal;
    }

    /* Away col: name is before image in HTML, reverse so image shows on top */
    .fixture-block .col:last-child {
        flex-direction: column-reverse;
    }

    .fixture-block .col:nth-child(2), .fixture-block .col:nth-child(3) {
        flex-basis: 40%;
    }

    .fixture-date-header {
        font-size: 12px;
        padding: 10px 15px;
    }

    .paypal-topup:hover {
        transform: scale(1);
    }

    .prize-grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 30px auto;
    }

    .prize-block {
        min-height: 120px;
        padding: 20px 15px;
    }

    /*#topup-wrapper p {
        display: none;
    }*/

    .topup-grid {
        width: 100%;
        margin: 0;
    }

    .topup-block {
        display: inline-block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        border-bottom: solid 1px #e9e9e9;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    /*#topup-wrapper .v-align-center {
        padding: 20px;
    }*/

    .paypal-topup {
        vertical-align: middle;
    }

    .prize-award {
        font-size: 26px;
    }

    #topup-wrapper .prize-award {
        text-align: left;
    }

    .paypal-topup {
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        margin: 0;
        padding-right: 10px;
        border-radius: 0;
        z-index: 1;
        background-position: center 90%;
    }

    .header .col:first-child {
        flex-basis: 10%;
    }

    .header .col:last-child {
        flex-basis: 90%;
    }

    .user-stats {
        height: 150px;
        border-radius: 0;
    }

        .user-stats .col {
            height: 150px;
        }

    .score-label {
        height: auto;
        min-height: 40px;
    }

    .edit-profile-panel {
        width: 70%;
    }
}

@media screen and (max-device-width: 480px) {

    .mobile-menu-list li {
        margin-bottom: 30px
    }

        .mobile-menu-list li a {
            font-weight: 300;
            font-size: 22px;
        }

            .mobile-menu-list li a.topup-btn {
                font-size: 20px;
            }

        .mobile-menu-list li .credit {
            font-size: 20px;
        }

    .week-select {
        width: auto;
    }

    .score-card {
        width: 100%;
    }

    h1 {
        width: 100%;
        font-size: 22px;
    }

    h2 {
        width: 80%;
        margin: 0 auto;
        font-size: 32px;
    }

    .next-fixture {
        padding: 20px;
    }

    .leaders, .forum, .prizes, .rules {
        padding: 150px 0;
    }

    .first-lead {
        bottom: -15%;
    }

    .second-lead {
        bottom: -5%;
    }

    .third-lead {
        bottom: -8%;
    }

    .forth-lead {
        bottom: -3%;
    }

    .fifth-lead {
        bottom: -3%;
    }

    .set-fixtures-page {
        width: 90%;
    }

    .deadline {
        width: 100%;
    }

    .fixtures-page-heading {
        top: 100px;
    }

        .fixtures-page-heading h2 {
            /*display: none;*/
        }

    .top-backdrop {
        height: 80%;
    }

    .recent-results {
        margin: 20px auto;
    }

        .recent-results .row .col .team-name {
            display: none;
        }

        .recent-results .row .col {
            flex-basis: 20% !important;
        }

    .col-score {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-weight: 300;
    }

    .user-stats .col .v-align-center {
        padding: 0;
    }

    .user-page-heading {
        padding: 110px 0 0 0;
    }

    #profile-wrapper {
        padding: 140px 0;
    }

    .edit-profile-panel {
        width: 100%;
    }
}
