/* Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
    margin: 0;
    padding: 0;
}

fieldset, img {
    border: 0;
}

img {
    width: 100%;
}

/* Clearfix */
.cf:before, .cf:after { content: " "; display: table;}
.cf:after {clear: both;}

/* Typography */
h1, h2, h3, h4 {
    font-family: "Maiola", "maiola", serif !important;
    font-weight: bold;
    line-height: 1;
}

h5, h6, p, form, input, textarea, nav, .card a, footer a {
    font-family: "Proxima Nova", "proxima-nova", sans-serif !important;
    text-align: justify;
}

a {
    text-decoration: none;
}

hr {
    background: #CCC;
    height: 2px;
    width: 100%;
    border: 0;
}

html {
    background: #003142;
}

header, #content {
    background: #e6e6e6;
}

@keyframes slide {
    0% { left: 0%; }
    30% { left: 0%; }
    33% { left: -100%; }
    63% { left: -100%; }
    66% { left: -200%; }
    96% { left: -200%; }
    100% { left: 0%; }
}

/* Phones */
@media (min-width: 20em) {
    
    header, #content, .intermission, footer, .colophon {
        width: 95%;
        margin: 0 auto;
    }
    
    .contact-info {
        background: #00698F;
        padding: .5em .75em;
        font-size: .75em;
        text-align: center;
        color: #E6E6E6;
    }
    
    .bullet {
        color: #369EC3;
    }
    
    .phone-highlight {
        font-weight: bold;
        color: #DDBB3F;
    }
    
    .header-content {
        padding: 1.5em;
    }
    
    .logo {
        width: 10em;
    }
    
    nav {
        margin-top: 1.5em;
    }
    
    nav a {
        background: #00698F;
        color: #E6E6E6;
        display: inline-block;
        float: left;
        text-align: center;
        padding: .75em .5em;
        width: calc(50% - 1em);
    }
    
    .frame, .slide {
        height: 6.5em;
    }
    
    .frame {
        width: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    
    figure {
        width: 300%;
        position: relative;
        animation: 12s slide infinite;
    }
    
    .slide {
        width: 33.3333%;
        float: left;
        position: relative;
    }
    
    .slide-img {
        position: absolute;
    }
    
    .overlay {
        float: left;
        position: absolute;
        padding: 1em;
        background: rgba(6, 49, 66, .6);
        color: #e6e6e6;
    }
    
    .overlay h2 {
        font-size: 1.5em;
    }
    
    #content {
        border-bottom-left-radius: .25em;
        border-bottom-right-radius: .25em;
    }
    
    .title {
        background: #003142;
        padding: .75em;
        color: #E6E6E6;
        font-size: 1.5em;
    }
    
    .card {
        padding: 1.25em;
        background: #CCC;
        border-radius: .25em;
        box-sizing: border-box;
    }
    
    .area {
        padding: 1.5em;
    }
    
    .quarter {
        width: 100%;
        float: left;
        margin: 0 1.5em 1.5em 0;
    }
    
    .quarter:nth-of-type(2n) {
        margin-right: 0;
    }
    
    .third {
        float: left;
        margin-bottom: 1.5em;
    }
    
    .third img {
        margin-bottom: 1em;
    }
    
    .two-thirds {
        float: left;
    }
    
    .vcard, .btn {
        float: left;
        padding: .5em;
        border: 2px solid #808080;
        border-radius: .25em;
        clear: both;
    }
    
    .card .vcard {
        font-weight: normal;
        text-transform: none;
        margin-top: 1em;
    }
    
    .card h4 {
        font-size: 1.25em;
        color: #00698F;
        margin-bottom: 1.5em;
    }
    
    .card p {
        font-size: .875em;
        line-height: 1.3;
        color: #404040;
        margin-bottom: 1.5em;
    }
    
    .card a {
        text-transform: uppercase;
        font-weight: bold;
        color: #808080;
    }

    .half {
        width: 100%;
        float: left;
        margin-right: 1.9em;
    }
    
    .half h3 {
        font-size: 2em;
        color: #00698F;
    }
    
    .s-h3 {
        font-size: 1.125em;
        font-style: italic;
        line-height: 1.25;
        color: #404040;
        margin-bottom: 2em;
    }
    
    .copy p {
        line-height: 1.375;
        margin-bottom: 2em;
        color: #404040;
    }
    
    .copy a {
        color: #00698F;
    }
    
    form label {
        display: none;
    }
    
    input, textarea {
        font-size: 1em;
        width: calc(100% - .5em);
        margin: .5em 0;
        padding: .5em;
        border: none;
        max-width: 100%;
    }
    
    input[type="submit"] {
        width: 100%;
    }
    
    textarea {
        height: 13em;
    }
    
    .nav-list {
        list-style: none;
    }
    
    .nav-list a {
        color: #00698F;
        text-transform: none;
        font-weight: normal;
    }
        
    .nav-list li {
        margin-bottom: .5em;
    }
    
    .intermission {
        padding: 1.5em 0;    
    }
    
    .intermission p {
        text-align: center;
        color: #369ec3;
        font-size: .75em;
    }
    
    footer {
        box-sizing: border-box;
        background: #142126;
        padding: 1.25em;
        color: #E6E6E6;
    }
    
    footer .logo {
        width: 12em;
        margin-bottom: 1.25em;
    }
    
    footer h5 {
        text-transform: uppercase;
        color: #369ec3;
        margin: 2em 0;
    }
    
    footer a {
        display: block;
        margin-bottom: .75em;
        color: #E6E6E6;
        font-size: .875em;
    }
    
    footer p {
        margin-bottom: 1em;
    }
    
    footer .half {
        margin: 0;
    }
    
    footer .half .half {
        width: calc(50% - 1em);
        margin-right: 1em;
    }
    
    .colophon .left {
        float: left;
        font-size: .625em;
        color: #369ec3;
        margin: 1em 0;
    }
    
    .colophon .right a {
        float: right;
        font-size: .625em;
        color: #369ec3;
        margin: 1em 0;
    }
}

/* Tablets */
@media (min-width: 40.063em) {

    header, #content, .intermission, footer, .colophon {
        width: 40em;
    }
    
    .contact-info {
        font-size: .875em;
        text-align: right;
    }
    
    .logo {
        float: left;
    }
    
    nav {
        float: right;
        margin-top: .25em;
    }
    
    nav a {
        width: auto;
        display: inline;
        background: none;
        color: #00698F;
    }
    
    .title {
        font-size: 2em;
    }
    
    .frame, .slide {
        width: 42.5em;
        height: 12.75em;
    }
    
    .frame {
        z-index: 1;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
        border-radius: .25em;
    }
    
    .overlay {
        top: 50%;
        margin: -4.25em 0 0 2em;
    }
    
    .overlay h2 {
        font-size: 2em;
    }
    
    .quarter {
        width: calc(50% - .9em);
        float: left;
        margin: 0 1.5em 1.5em 0;
    }
    
    .third {
        width: calc(33% - .88em);
        margin-right: 1.5em;
        margin-bottom: 0;
    }
    
    .third:nth-of-type(3) {
        margin-right: 0;
    }
    
    .two-thirds {
        width: calc(66% - .9em);
    }
    
    .card .description {
        font-size: .75em;
        margin-top: -2.5em;
    }
    
    .intermission {
        padding: 2.5em;    
    }
    
    .intermission p {
        font-size: 1.25em;
    }
    
    footer {
        border-radius: .25em;
    }
    
    footer .logo {
        margin-right: 4em;
    }
}

/* Desktops */
@media (min-width: 64.063em) {

    header, #content, .intermission, footer, .colophon {
        width: 60em;
    }

    .header-content {
        padding: 2.5em;
    }
    
    .logo {
        width: 14em;
    }

    nav {
        margin-top: 1em;
    }
    
    nav a {
        margin-left: 2em;
    }
        
    .frame, .slide {
        width: 62.5em;
        height: 18.75em;
    }
    
    .overlay {
        top: 50%;
        margin: -5.5em 0 0 3em;        
    }
    
    .overlay h2 {
        font-size: 2.875em;
    }
    
    .frame {
        margin: 0 auto;
    }
    
    .overlay {
        position: relative;
    }
    
    .quarter {
        width: calc(25% - 1.13em);
        margin-right: 1.5em;
    }
    
    .quarter:nth-of-type(2n) {
        margin-right: 1.5em;
    }
    
    .quarter:nth-of-type(4) {
        margin-right: 0;
    }

    .half {
        width: calc(50% - 1em);
    }
    
    .half:nth-of-type(2) {
        margin-right: 0;
    }
}