/* pink:    #9e1e57     rgb(158,30,86)  */
/* green:   #a2bf2f     rgb(162,191,47) */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    src: local('Open Sans'), url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Open Sans'), url('/static/fonts/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    src: local('Oswald'), url('/static/fonts/Oswald-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: bold;
    src: local('Oswald'), url('/static/fonts/Oswald-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Maven Pro';
    font-style: normal;
    src: local('Maven Pro'), url('/static/fonts/MavenPro-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: bold;
    src: local('Maven Pro'), url('/static/fonts/MavenPro-Bold.ttf') format('truetype');
}

* { margin: 0 auto; padding: 0; }
.only_mobile { display: none; }
html { background-color: white; width: 100%; height: 100%; }
body { font-family: 'Open Sans'; }
h1, h2, h3, h4, h5, h5 { font-family: 'Oswald'; }
body > header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 8em;
    z-index: 10;

    background-size: cover;
    background-position: center center;
}
body > nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 8em;
    padding-top: .5em;
    padding-bottom: .5em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    background-color: white;
    z-index: 10;
}

body > nav ul li, body > nav label {
    display: inline-block;
    margin: 0 .25em 0 .25em;
    padding: 0 .5em 0 .5em;
    background-color: #a2bf2f;

    font-family: 'Maven Pro';
}


body > nav li.active { background-color: #9e1e57; }
body > nav input { display: none; }
body > nav label { display: none; }

body > nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: black;
}

body > main {
    position: absolute;
    top: 12em;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: left;
}

body > main li {
    margin-left: 1.5em;
}

body > main article {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 1200px; left: 50%; transform: translateX(-50%);
    padding-bottom: 3em;
    /* padding-left: 1em; */
    /* padding-right: 1em; */
}

article header {
    padding-left: 1em;
    padding-right: 1em;
}

article h1 { font-size: 2em; margin-bottom: .5em; }
article h2 { font-size: 1.75em; margin-bottom: .25em; }
article p, article ul { margin-bottom: 1em; }

article section {
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
}

article section figure { width: 75%; margin: auto; text-align: center; margin-bottom: 1em; }
article section figure img { max-width: 90%; }

article.right { width: 50%; float: right; margin-top: 2em; margin-left: 1em; }
article.right section { margin-top: 2em; }
article.left { float: left; }

article section figure.right { width: 50%; float: right; }
article section figure.right img { margin: auto; max-width: 90%; max-height: 450px; }

article section figure.portrait { width: 30%; float: right; margin-top: 0; margin-left: 2em; margin-bottom: 1em; margin-right: 0; text-align: center; }
article section figure.portrait img { vertical-align: middle; max-width: 400px; max-height: 400px; }

article section div.slides { width: 50%; float: right;  margin: auto; text-align: center; margin-left: 3em; margin-bottom: 9em; }
article section div.slides img { max-width: 100%; max-height: 550px; margin-bottom: 1em; }

article section figure.logo { width: 50%; float: right; margin: auto; text-align: center; margin-bottom: 1em; margin-top: -5em; text-align: right; }
article section figure.logo img { max-width: 70%; }

body > footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.25em;
    line-height: 1.125em;
    text-align: center;
    background-color: #9e1e56;
}
body > footer ul li { display: inline-block; }
body > footer ul li:nth-child(n+2):before { content: "| "; color: white; }
body > footer ul li a { text-decoration: none; color: white; }

@media (max-width: 800px) {
    body > header { height: 7em; }
    body > main { text-align: left; }
    .mobile_center {
        text-align: center;
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    article h1 { text-align: center; }

    .hide_on_mobile { display: none; }
    .only_mobile { display: block; }

    article.right { float: none; margin-top: 0; }
    article section figure.logo { width: 90%; float: none; margin: auto; text-align: center; margin-bottom: 1em;  }
article section figure .logoimg { max-width: 90%; }

    article section figure.right { width: 90%; float: none; text-align: center; }
    article section figure.right img { max-width: 90%; max-height: 350px; }


    article section div.slides { width: 90%; float: none; margin: auto; text-align: center; }
    article section div.slides img { max-width: 90%; max-height: 450px; }
    .slideshow-container { width: 90% !important; float: none !important; margin: auto; margin-bottom: 1em; text-align: center !important; }

    article section figure.portrait { width: 100%; float: none; text-align: center; margin-bottom: 1em; margin-left: 0; margin-right: 0; }
    article section figure.portrait img { vertical-align: middle; max-width: 350px !important; max-height: 350px; }

    body > nav {
        /*top: 7.5em;*/
        top: 7em;
        padding-top: .5em;
        padding-bottom: .5em;
        background-color: white;
    }
    body > nav ul {
        background-color: white;
        position: fixed;

        padding-top: .5em;
        top: 10em;
        left: 0;
        right: 0;
        bottom: 0;
    }
    body > nav ul li, body > nav label { display: inline-block; width: 90%; margin-bottom: .5em; font-weight: bold; }

    body > nav ul { display: none; }
    body > nav input[type=checkbox]:checked ~ ul { display: block; }

    body > main { top: 10em; padding: .5em; }
    body > main article { position: relative; width: auto; height: auto; left: 0; transform: none; }
    article section img.right { width: 100%; float: none; clear: both; padding: 0; }
    article section img.logo { background-color: orange; width: 50%; float: none; clear: both; padding: 0; }

    nav li a { display: block; }
}

/* pink:    #9e1e57     rgb(158,30,86)  */
/* green:   #a2bf2f     rgb(162,191,47) */