/*******************************************************************************
 * COLORS
 *******************************************************************************
 * Darkest Blue - #1C2233
 * Blue - #4A84FF
 * Green - #1EFF7A, rgb(30, 255, 122)
 * Yellow - #FFB233, rgb(255, 187, 51)
 * Bright Yellow - #FFF433
 * Pink -  #FFDADA, rgb(255, 218, 218)
 * Pastel-ish Blue - #98DBFF, rgb(152, 219, 255)
 * Purple - #CBA5FF
 *
 *
 * White - #FFFFFF
 * Light Gray - #E5E6E7
 * Dark Gray - #BBBDC2, rgb(187, 189, 194)
 *
 ******************************************************************************/



/*******************************************************************************
 * GLOBAL ELEMENT SYTLES
 ******************************************************************************/
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html {
  font-size: 110%;
}
@media (max-width: 70.0em) {
    html {
        font-size: 100%;
    }
}

body {
    border: 0;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    color: #1C2233;
    font: normal normal 62.5% 'Lora', serif;
}

a {
    text-decoration: none;
}

::selection {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #FFF433;
}


/*******************************************************************************
 * UTILITY STYLES
 ******************************************************************************/

/* Headers
 ******************************************************************************/

/* H1 ------------------------------------------------------------------------*/
.header--primary {
    margin: 0;
    padding: 0;
    font: normal 400 6.4em 'Arbutus Slab', serif;
    line-height: 1.2em;
    text-align: center;
}
@media (max-width: 20.0em) {
    .header--primary {
        font-size: 4.5em;
    }
}
@media (min-width: 20.01em) and (max-width: 60.0em) {
    .header--primary {
        font-size: 5.0em;
    }
}

/* H2 ------------------------------------------------------------------------*/
.header--secondary {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 3.2em;
    line-height: 2em;
}
@media (max-width: 60.0em) {
    .header--secondary {
        font-size: 3.0em;
    }
}

/* H3 ------------------------------------------------------------------------*/
.header--tertiary {
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 1.8em;
    line-height: 2em;
}

/* Body Text
 ******************************************************************************/
.text--primary {
    font-size: 1.6em;
    line-height: 1.6em;
}

.text--secondary {
    font-size: 1.4em;
    line-height: 1.6em;
}

.text--micro {
    font-size: 1.2em;
    line-height: 1.4;
}

.text--bold {
    font-weight: 700;
}

.text--italic {
    font-style: italic;
}

.text--middot {
    padding: 0 5px;
}

.clearfix:after {
    content: "";
    clear: both;
}

/* Links
 ******************************************************************************/
.link--primary {
    display: inline-block;
    position: relative;
    color: #1C2233;
}
    .link--primary:after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        height: 10px;
        border-radius: 3px;
        width: 95%;
        top: 60%;
        left: 10%;
        opacity: 0.8;
        background: rgb(255, 187, 51);
        -webkit-transition: opacity 150ms, top 300ms, left 300ms;
        -o-transition: opacity 150ms, top 300ms, left 300ms;
        transition: opacity 150ms, top 300ms, left 300ms;
    }
    .link--primary:hover:after,
    .link--primary:visited:hover:after {
        top: 30%;
        left: 0%;
        opacity: 0.4;
        width: 100%;
        background: rgb(255, 187, 51);
    }
    .link--primary:visited:after {
        background: #E5E6E7;
    }


.link--secondary {
    display: inline-block;
    position: relative;
    font-size: 1em;
    line-height: 1em;
    color: #1C2233;
    text-decoration: none;
    text-shadow:
         0.05em  0.05em     #fff,
        -0.05em  0.05em     #fff,
         0.05em -0.05em     #fff,
        -0.05em -0.05em     #fff;

    -webkit-transition: text-shadow 150ms;
    -o-transition: text-shadow 150ms;
    transition: text-shadow 150ms;
}
    .link--secondary:after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        height: 2px;
        width: 100%;
        bottom: -.1em;
        background-color: #1C2233;
        -webkit-transition: height 150ms, background-color 150ms;
        -o-transition: height 150ms, background-color 150ms;
        transition: height 150ms, background-color 150ms;
    }
    .link--secondary:hover,
    .link--secondary:visited:hover {
        text-shadow: none;
    }
    .link--secondary:hover:after,
    .link--secondary:visited:hover:after {
        height: 100%;
        background-color: #FFF433;
    }
/* Alignment
 ******************************************************************************/
.text-align--left {
    text-align: left;
}
.text-align--center {
    text-align: center;
}
.text-align--right {
    text-align: right;
}

/* Word Breaks
 ******************************************************************************/
 .word-break--keep-all {
     word-break: keep-all;
 }
 .white-space--nowrap {
    white-space: nowrap;
 }

/* Spacers
 ******************************************************************************/
.spacer {
    display: inline-block;
}

/*******************************************************************************
 * SITE GENRALS
 ******************************************************************************/

/* Site Wrapper
 ******************************************************************************/
.site-wrapper {
    margin: 0 auto;
    padding: 0.25rem;
    width: 100%;
    max-width: 100vw;
}
@media (min-width: 60em) {
    .site-wrapper {
        width: 90%;
    }
}
@media (min-width: 80em) {
    .site-wrapper {
        width: 70%;
    }
}

/* Header
 ******************************************************************************/
.header {
    display: block;
    position: relative;
    width: 100%;
    margin: 2.0rem 0 2.0rem;

    text-align: center;
}
    .header__link {
        padding: 0.3em 0;
        font: normal 400 1.8em 'Arbutus Slab', serif;
        line-height: 1em;
    }

/* Footer
 ******************************************************************************/
.footer {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 10.0rem 2.0rem 2.0rem;
    justify-content: space-between;
}
    @media (min-width: 60em) {
        .footer {
            margin: 10.0rem 0 2.0rem;
        }
    }
    @media (max-width: 16em) {
        .footer {
            justify-content: center;
            text-align: center;
        }
    }


/*******************************************************************************
 * ICONS
 ******************************************************************************/
.icon {
    display: inline-block;
    position: relative;
    text-indent: -9999px;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
    .icon--xsmall {
        width: 12px;
        height: 12px;
    }
    .icon--small {
        width: 16px;
        height: 16px;
    }
    .icon--android,
    .icon--google-phone {
        background-image: url(../images/icons/google-phone.svg);
    }
    .icon--external,
    .icon--outgoing-link {
        background-image: url(../images/icons/outgoing-link.svg);
    }
    .icon--book-cabinet,
    .icon--shelf {
        background-image: url(../images/icons/book-cabinet.svg);
    }
    .icon--camera {
        background-image: url(../images/icons/camera.svg);
    }
    .icon--checkbox-checked-dark {
        background-image: url(../images/icons/checkbox-checked-dark.svg);
    }
    .icon--checkbox-checked-green {
        background-image: url(../images/icons/checkbox-checked-green.svg);
    }
    .icon--clock,
    .icon--wall-clock {
        background-image: url(../images/icons/wall-clock.svg);
    }
    .icon--desk,
    .icon--work-desk {
        background-image: url(../images/icons/work-desk.svg);
    }
    .icon--document-page {
        background-image: url(../images/icons/document-page.svg);
    }
    .icon--doodle,
    .icon--journal {
        background-image: url(../images/icons/doodle.svg);
    }
    .icon--forward-time {
        background-image: url(../images/icons/forward-time.svg);
    }
    .icon--front-page {
        background-image: url(../images/icons/front-page.svg);
    }
    .icon--game,
    .icon--gameboy {
        background-image: url(../images/icons/gameboy.svg);
    }
    .icon--iphone {
        background-image: url(../images/icons/iphone.svg);
    }
    .icon--laptop {
        background-image: url(../images/icons/laptop.svg);
    }
    .icon--photo,
    .icon--polaroid-stack {
        background-image: url(../images/icons/polaroid-stack.svg);
    }


/*******************************************************************************
 * CARDS
 ******************************************************************************/

/* Card Grid
 ******************************************************************************/
.card-grid {
    margin: 3rem 0 0 0;
    padding: 0;
    list-style-type: none;

    -webkit-columns: 3 18.0rem;
    columns: 3 18.0rem;
    -webkit-column-gap: 0;
    column-gap: 0;

    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(18.0rem, 1fr));
}
@media (max-width: 18.0rem) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, 100%);
    }
}


/* Card
 ******************************************************************************/
.card-wrapper {
    display: inline-block;
    position: relative;
    width: 100%;
}
.card {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 11.0rem;
    padding: 1.0rem;
    margin: 0.25rem;
    border-radius: 0.3em;
    color: #1C2233;
    text-align: center;
    text-decoration: none;
}
    .card__pre-header {
        padding-bottom: 0.4em;
    }
    .card__image {
      display: block;
      position: relative;
      width: 100%;
      height: 10.5rem;
      margin: 0 0 30px 0;
      background-color: white;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    .card__header {
        display: block;
        position: relative;
        width: 100%;
        line-height: 1.4;
    }
    .card__header__text {
        position: relative;
        vertical-align: baseline;
        max-width: 90%;
    }
    .card__header__icon {
      vertical-align: baseline;
    }
    .card__summary {
        padding: 0;
        margin: 0.2em 0 1.0em;
        width: 100%;
    }
    .card__details {
        margin: 0;
        padding: 0;
        width: 100%;
        opacity: 0.8;
    }
        .card__details--url {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    @media (min-width: 40.15em) {
        .card {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: start;
        }
    }

/* Card (Job Type) ----------------------------------------------------------*/
.card.job {
    min-height: 8rem;
}

/* Card (Post Type) ----------------------------------------------------------*/
.card.post {
    text-align: center;
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
    -webkit-transition: border 300ms, background-color 300ms, box-shadow 300ms;
    -o-transition: border 300ms, background-color 300ms, box-shadow 300ms;
    transition: border 300ms, background-color 300ms, box-shadow 300ms;
}
    .card.post .card__header:before {
        content: "";
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        top: 50%;
        left: 0;
        background-color: #FFFFFF;
    }
    .card.post:visited .card__header:before {
        background-color: #BBBDC2;
    }
    .card.post.post--featured {
        border: 2px solid rgb(255, 187, 51);
    }
    .card.post:visited:hover,
    .card.post:hover {
        border: 2px solid #BBBDC2;
    }
    @media (min-width: 40.15em) {
        .card.post {
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            text-align: left;
        }
    }