@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');

:root {
    --canvas-color: white;
    --theme-color1: #dd1200;
    --theme-color2: #002180;
}

nav li a { border: none !important; }

nav li a,
footer { background-color: var(--theme-color1); }

header,
nav > ul > li > a.current { background-color: var(--canvas-color); }

nav > ul > li.current:hover > a { background-color: var(--theme-color2); }

header #mobile_button,
nav li a.current { color: var(--theme-color1); }

nav li a.current {
    outline: solid 3px var(--theme-color1) !important;
    margin-left: 2px;
    margin-right: 2px;
}

nav ul ul li a.current:hover { color: var(--canvas-color); }

header, #slideshow { box-shadow: 0px 0px 3px 2px rgba(64, 64, 64, 0.84); }

footer a { color: var(--canvas-color); }

@media screen and (max-width: 700px) {
    nav > ul > li:hover > a {
        color: var(--theme-color1);
        background-color: var(--canvas-color);
    }
}

header { z-index: 5; }

.copy { color: #738380; }

.slogan {
    background-color: var(--theme-color1);
    color: var(--canvas-color);
}

#gallery_filter { display: none; }

.gallery_brick a[title]::after {
    display: block;
    margin: 5px auto;
    content: attr(title);
    text-align: center;
}

.box h2 {
    font-family: 'Kaushan Script', cursive;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--theme-color2);
}

.box h3 { color: var(--theme-color1); }

.box .content { padding: 0; }

.box-hero-image { aspect-ratio: 16 / 9; }

.custom_button {
    --btn-bg: var(--theme-color2);
    --btn-hover-bg: var(--theme-color1);
}

@media screen and (min-width: 768px) {
    .slogan { max-width: 240px; }
}