/*
 * Code is written using BEM naming convention
 * http://getbem.com/naming/
 */


/* ==========================================================================
   Colors
   ========================================================================== */


/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-display: swap;
    font-family: 'UniversNextPro-Basic';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/UniversNextPro-Regular.eot");
    src: url("../fonts/UniversNextPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/UniversNextPro-Regular.woff2") format("woff2"), url("../fonts/UniversNextPro-Regular.woff") format("woff"), url("../fonts/UniversNextPro-Regular.ttf") format("truetype"), url("../fonts/UniversNextPro-Regular.svg#UniversNextPro-Regular") format("svg");
}


/* ==========================================================================
   Media Queries
   ========================================================================== */


/* ==========================================================================
   Base styles
   ========================================================================== */

:root {
    --breakpoint-s: 640px;
    --breakpoint-m: 960px;
    --breakpoint-l: 1200px;
    --breakpoint-xl: 1600px;
    --line-height: 1.2rem;
    --main: #686868;
    --main-revert: #ffffff;
    --orange: #ee7b4a;
}

html {
    color: var(--main);
    font-family: 'UniversNextPro-Basic', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    word-break: break-word;
}

@media (max-width: 960px) {
    html {
        font-size: 20px;
    }
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 */

::selection {
    background: #fde7db;
    text-shadow: none;
}

::-moz-selection {
    background: #fde7db;
    text-shadow: none;
}

* {
    box-sizing: border-box;
    -webkit-user-select: inherit;
    -moz-user-select: inherit;
}

body {
    line-height: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    background-color: #fde7db;
    cursor: pointer;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}

.a--dingbat {
    display: inline-block;
    fill: var(--main);
    overflow-x: hidden;
}

.a--dingbat svg {
    height: 0.8rem;
    margin-left: -20px;
    -webkit-transition: margin-left 350ms;
    transition: margin-left 350ms;
}

.a--dingbat:hover {
    background: none;
}

.a--dingbat:hover svg {
    margin-left: 0;
}

#wrapper {
    height: 100vh;
    width: 100%;
}

#content {
    float: left;
    padding: var(--line-height);
    padding-left: 3.6rem;
    width: 100%;
}

@media (min-width: 320px) and (max-width: 960px) {
    #content {
        padding: 0.8rem;
    }
}


/* ==========================================================================
   Grid
   ========================================================================== */

.row {
    float: left;
    margin-bottom: 1.3rem;
    min-height: 6rem;
    width: 100%;
}

@media (max-width: 960px) {
    .row {
        min-height: 0;
    }
}

.row:first-child {
    height: 12rem;
}

.row:nth-child(3) {
    margin-top: var(--line-height);
}

.row--header,
.row--content {
    opacity: 0;
}

.row [class*='row__']:not(:last-child) {
    margin-bottom: var(--line-height);
}

.row__p {}

@media (max-width: 960px) {
    .row__p br {
        display: none;
    }
}

.row__list {}

.col {
    display: inline-block;
    float: left;
    height: 100%;
    padding-right: var(--line-height);
    width: 33.33%;
}

@media (max-width: 960px) {
    .col {
        width: 100%;
    }
}

@media (min-width: 960px) {
    .col:first-child {
        margin-left: 6rem;
    }
}

.col:nth-child(2) {}

.col:nth-child(3) {
    padding-right: 0;
}

.row--header__subtitle {
    color: var(--orange);
    margin-bottom: var(--line-height);
}

.row--header__name {}

@media (max-width: 960px) {
    .row--header__name span {
        display: block;
    }
}