﻿
.demo-header {
    height: 4.25rem;
    margin-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    display: flex !important;
    align-items: center !important;
    background-color: #1E1D1E;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
}

    .demo-header .demo-brand {
        margin-right: auto;
        vertical-align: middle;
        font-size: 1.825rem;
        font-weight: bold;
        color: #FFFFFF;
    }

    .demo-header .demo-balance {
        padding: .25rem 1.25rem;
    }

.demo-sign-in .demo-brand,
.demo-sign-up .demo-brand,
.demo-admin .demo-brand {
    margin-top: 1.75rem;
    margin-bottom: 1.25rem;
    vertical-align: middle;
    text-align: center;
    font-size: 8.25rem;
    font-weight: bold;
    color: #FFFFFF;
}

.demo-index {
    height: calc(100% - 6.25rem);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 3.25rem;
}

    .demo-index .card {
        margin: 3rem auto;
        padding: 1.475rem;
        border: 3px solid transparent;
        color: rgb(230, 222, 213);
        text-align: center;
    }

        .demo-index .card:hover {
            cursor: pointer;
            border: 3px solid rgba(230, 222, 213, .8);
        }

        .demo-index .card i {
            font-size: 10rem;
        }

.demo-product {
    color: rgb(230, 222, 213);
}

    .demo-product .card.logo {
        text-align: center;
        font-size: 1.75rem;
    }

        .demo-product .card.logo i {
            font-size: 7rem;
        }

.demo-game .card img {
    width: 90%;
    margin: 0 auto;
    cursor: pointer;
}

@media (max-width: 767px) {
    .demo-header {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

        .demo-header .demo-brand {
            font-size: 1rem;
        }

    .demo-index {
        height: calc(100% - 5.25rem);
        font-size: 1.75rem;
    }

        .demo-index .card {
            margin: 1.5rem auto;
            padding: .75rem;
        }

            .demo-index .card i {
                font-size: 8rem;
            }
}
