/* oliver seller
------------------------------ */
@font-face {
    font-family:"mn";
    src: url('../fonts/MaisonNeue-Light.eot');
    src: url('../fonts/MaisonNeue-Light?#iefix') format('embedded-opentype'),
         url('../fonts/MaisonNeue-Light.woff2') format('woff2'),
         url('../fonts/MaisonNeue-Light.woff') format('woff');
         url('../fonts/MaisonNeue-Light.ttf') format('truetype');   
}

@media screen {
    /* Setup */
    html {
        font-family: "mn", sans-serif;
        text-rendering: optimizeLegibility;
    }
    body {
        background: #00a2da;
        color: var(--color-grey);
        font-weight: 200;
        text-rendering: optimizeLegibility;
        margin: 0;
    }
    /* Copy & Lists */
    p {
        line-height: 1.5rem;
        margin: 0 0 1.5rem 0;
    }
    ul,
    ol {
        margin: 1.5rem 0 1.5rem 0;
    }
    ul li,
    ol li {
        line-height: 1.5rem;
    }
    ul ul,
    ol ul,
    ul ol,
    ol ol {
        margin-top: 0;
        margin-bottom: 0;
    }
    blockquote {
        line-height: 1.5rem;
        margin: 1.5rem 0 1.5rem 0;
    }
    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        /* Change heading typefaces here */
        font-family: "mn", sans-serif;
        font-weight: 200;
        line-height: 1.5rem;
        margin-bottom: 0.833rem;
        word-wrap: break-word;
    }
    h1 {
        font-size: 2.488rem;
        font-size: 2.288rem;
        line-height: 2.986rem;
        margin-top: 2.074rem;
    }
    h2 {
        font-size: 2.074rem;
        line-height: 2.488rem;
        margin-top: 1.728rem;
    }
    h3 {
        font-size: 1.728rem;
        line-height: 2.074rem;
        margin-top: 1.44rem;
    }
    h4 {
        font-size: 1.44rem;
        margin-top: 1.2rem;
    }
    h5 {
        font-size: 1.2rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }
    h6 {
        font-size: 1rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }
    /* Hyperlinks */
    a {
        color:var(--color-font);
        text-decoration: none;
        border-bottom: 8px solid var(--color-font);
    }
    a:link {
        color:var(--color-font);
    }
    a:hover {
        color:var(--color-font);
        border-bottom: none;
    }
    a:active {
        color:var(--color-font);
        border-bottom: 8px solid var(--color-font);
    }
    a:visited {
        color:var(--color-font);
        border-bottom: 8px solid var(--color-font);
    }
    /* Tables */
    table {
        margin-top: 1.5rem;
        border-spacing: 0px;
        border-collapse: collapse;
    }
    table td,
    table th {
        padding: 0;
        line-height: 33px;
    }
    /* Responsive Images */
    img,
    video,
    canvas,
    object,
    embed {
        max-width: 100%;
        _width: 100%;
    }
    img {
        vertical-align: middle;
        border: 0;
        -ms-interpolation-mode: bicubic;
        /* Improve IE's resizing of images */
        display: block;
        margin: 1.5rem auto 1.5rem auto;
    }

    /* Responsive Design */
    .container {
        width: 95%;
        max-width: 980px;
        margin: 0;
    }
    .grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .grid .col {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    hr {
        border: 0;
        background: var(--color-grey);
        height: 2px;
        width: 1.5rem;
        margin: 1.5rem 0 .75rem;
        left:0;
    }
 
    @media (min-width: 320px) {
        html {
            font-size: 125%;
        }
        .grid {
            display: block;
        }
    }
    @media (min-width: 600px) {
        html {
            font-size: 125%;
        }
    }
    @media (min-width: 768px) {
        html {
            font-size: 137.5%;
        }
        .grid {
            display: flex;
        }
        .grid .col {
            padding: 0.25rem;
        }
    }
    @media (min-width: 1024px) {
        html {
            font-size: 137.5%;
        }
    }
    @media (min-width: 1360px) {
        html {
            font-size: 137.5%;
        }
    }
}