@font-face {
    font-family: 'Tiemann';
    src: url('fonts/tiemann.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/tiemann.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

:root {
    --base-font-size: 13px;
    --logo-width: 150px; 
    --grid-cols-2: 1fr;
    --sm-padding: 40px;
    --block-padding: 0;
    --block-content-padding: 30px;
    --form-padding-h: 20px;
    --tall-height: 750px;

    --sm-padding-0: 0;
    --sm-padding-1: 20px;
    --sm-padding-2: 40px;

    --md-padding-0: 0;
    --md-padding-1: 20px;
    --md-padding-2: 40px;
}

@media all and (min-width: 700px) {
    :root {
        --base-font-size: 16px;
        --logo-width: 250px; 
        --grid-cols-2: 1fr 1fr;
        --sm-padding: 0;
        --block-padding: 40px;
        --block-content-padding: 40px;
        --form-padding-h: 20px;
        --tall-height: 900px;

    }
}

/* tags */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #999;
    font-family: 'Raleway', sans-serif;
    font-size: var(--base-font-size);
}
::-moz-placeholder { /* Firefox 19+ */
    color: #999;
    font-family: 'Raleway', sans-serif;
    font-size: var(--base-font-size);
}
:-ms-input-placeholder { /* IE 10+ */
    color: #999;
    font-family: 'Raleway', sans-serif;
    font-size: var(--base-font-size);
}
:-moz-placeholder { /* Firefox 18- */
    color: #999;
    font-family: 'Raleway', sans-serif;
    font-size: var(--base-font-size);
}

html * {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: var(--base-font-size);
}

a {
    color: #dc9;
    border-bottom: 1px solid #dc9;
    text-decoration: none;
}

form {
    margin: 40px 0 40px 0;
    padding: 20px var(--form-padding-h);
}
p {
    max-width: 800px;
    margin: 0 0 1em 0;
    line-height: 1.5em;
}

h1, h2 {
    font-family: 'Libre Baskerville', serif;
    xfont-family: 'Libre Caslon Display', serif;
    font-family: 'Tiemann', serif;
    text-transform: uppercase;
    margin-bottom: 1.5em;
    margin-top: 0;
    font-weight: 400;
}
input {
    font-size: var(--base-font-size);
    padding: 5px 10px;
    border: none;
    margin-bottom: 10px;
    width: auto;
    max-width: 200px;
    font-family: 'Raleway', sans-serif;
}
button, .button {
    font-family: 'Raleway', sans-serif;
    font-size: var(--base-font-size);
    border:none;
    background-color: white;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-block;
}

label {
    display: block;
    margin-bottom: 15px; 
}

/* horizontal blocks */

.header {
    text-align: center;
}
.footer {
    margin: 0;
    padding: 20px; 
    text-align: center;
}

.block {
    text-align: center;
    padding: 0 var(--block-padding);
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}
.block > div {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.block-2 {
    display: grid;
    grid-template-columns: var(--grid-cols-2);
}
.block-2 > div {
    width: 100%;
}

/* elements */

.image {
    width: 100%;
    background-size: cover;
    background-position: center;
}

.logo {
    width: var(--logo-width);
}

/* style classes */

.black { color: black; }
.black:hover { color: var(--very-dark-grey); }

.bg-black { background-color: black; color: #ddd; }
.bg-red { background-color: red; color: white;}
.bg-gold { background-color: #8B715C; color: white; }
.bg-dark-blue { background-color: #37485D; color: white; }

.tall { min-height: var(--tall-height); }
.second { order: 2; }
.text-center { text-align: center; }
.center { margin-left: auto; margin-right: auto; }

.margin-0 { margin: 20px 0; }

.sm-padding-0 { padding: var(--sm-padding-0); }
.sm-padding-1 { padding: var(--sm-padding-1); }
.sm-padding-2 { padding: var(--sm-padding-2); }

.border-black { border: 1px solid black; }

@media all and (min-width: 700px) {
    .md-padding-0 { padding: var(--md-padding-0); }
    .md-padding-1 { padding: var(--md-padding-1); }
    .md-padding-2 { padding: var(--md-padding-2); }
}