html {
    font-size: 16px;
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

header {
    display: flex;
    background-color: #F8F7F8;
}


#logo {
    width: 30rem;
}

@media (max-width:500px){
    #logo {
        width: 20rem;
    }
}

/* Menu Entries - Start */

#toggle {
    display: none;
}

.hamburger {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    margin-right: 0.5rem;
    z-index: 770;
}

    .hamburger span {
        display: block;
        position: relative;
        width: 2.5rem;
        height: 5px;
        border-radius: 3px;
        background-color: #1F2125;
        margin-top: 6px;
        transition: all 0.3s ease-in-out;
    }

nav {
    font-size: 1.5rem;
}

.nav {
    position: fixed;
    width: 25rem;
    height: 100%;
    background-color: #F8F7F8;
    top: -100%;
    right: 0;
    color: #4e4e4e;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    z-index: 700;
    border-left: 3px solid #4e4e4e;
}

.nav-wrapper {
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
    padding: 1rem;
}

    .nav-wrapper nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


        .nav-wrapper nav a, .nav-wrapper nav span {
            flex: 1 0 auto;
            display: inline-block;
            margin-right: 1.5rem;
            text-decoration: none;
            color: #1F2125;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .nav-wrapper nav .selected {
            border-bottom: 4px solid #CE1C1C;
        }


#toggle:checked + .hamburger .top-bun {
    transform: rotate(-45deg);
    margin-top: 25px;
}

#toggle:checked + .hamburger .bottom-bun {
    opacity: 0;
    transform: rotate(45deg);
}

#toggle:checked + .hamburger .meat {
    transform: rotate(45deg);
    margin-top: -7px;
}

#toggle:checked + .hamburger + .nav {
    top: 0;
}
/* Menu Entries - End */


.debug {
    border: 1px dashed red;
}


footer {
    font-family: Verdana;
    color: #fff;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.1rem;
    padding-bottom: 2rem;
    text-align: center;
}

    footer div div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.top-p-0, .tp-0 {
    padding-top: 0;
}

.top-p-1 {
    padding-top: 1rem;
}

.top-p-1_5 {
    padding-top: 1.5rem;
}

.p-0 {
    padding: 0;
}

.top-m-0 {
    margin-top: 0;
}

.top-m-1 {
    margin-top: 1rem;
}

.bp-0 {
    padding-bottom: 0;
}

.bp-1 {
    padding-bottom: 1rem;
}

h4 {
    text-transform: uppercase;
    margin-top: 0;
    color: #CE1C1C;
}


.top-m-2 {
    margin-top: 2rem;
}

.center-cols {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-border {
    border-top: 2px dashed #ccc;
    margin-left: 4rem;
    margin-right: 4rem;
}

.cells {
    flex-direction: column;
    padding: 1rem;
}

@media(min-width: 830px) {
    .cells {
        display: flex;
        justify-content: space-evenly;
        font-size: 1.25em;
        line-height: 1.3em;
        padding: 2rem;
        flex-direction: row;
        /*margin-left: 10rem;
                margin-right: 8rem;*/
    }

        .cells.cards {
            padding-top: 0;
        }

        .cells > div {
            margin-left: 4rem;
            margin-right: 4rem;
            flex: 1 1 auto;
        }

            .cells > div.card {
                display: flex;
                border: 1px solid #ccc;
                align-items: center;
                justify-content: center;
                height: 15rem;
                flex: 0 1 20rem;
                margin: 0;
                position: relative;
            }

                .cells > div.card > img {
                    width: 20rem;
                }

        .cells h2 {
            font-size: 2.2rem;
            font-weight: 400;
            line-height: 1.1em;
        }


        .cells > div.card:hover {
            background-color: rgba(205, 35, 35, 0.3);
            transition: opacity 0.3s ease;
        }

            .cells > div.card:hover > img {
                opacity: 0.02;
            }

        .cells > div.card p {
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            padding: 1rem;
            color: #fff;
            opacity: 0;
        }

            .cells > div.card p > strong {
                font-size: 1.25em;
                display: block;
            }

        .cells > div.card:hover p {
            opacity: 1;
        }

}

@media (min-width: 1400px) {

    nav {
        font-size: 1rem;
    }

    #container {
        width: 1400px;
        margin-left: auto;
        margin-right: auto;
        border-left: 2px solid #000;
        border-right: 2px solid #000;
        background-color: #fff;
    }

    #logo {
        width: 25rem;
    }

    .nav {
        position: unset;
        width: unset;
        height: unset;
        top: unset;
        left: unset;
        right: unset;
        overflow: unset;
        transition: unset;
        transform: unset;
        border-left: unset;
    }

    .nav-wrapper nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .hamburger {
        display: none;
    }

    footer {
        font-family: Verdana;
        color: #fff;
        background-color: #000;
        display: flex;
        flex-direction: column;
        font-size: 1.22rem;
        padding-bottom: 2rem;
    }

    #footer-copyrights {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4rem;
    }


    #footer-misc, #footer-locations {
        display: flex;
        justify-content: space-evenly;
        padding-top: 4rem;
    }

        #footer-misc div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 1.5rem;
        }

    #footer-locations {
        text-align: center;
        color: #ccc;
        width: 100%;
    }

        #footer-locations b {
            color: #fff;
            font-weight: 500;
        }
}