html, body
  font-family: Lato, sans-serif
  font-size: 100%

.page
  +grid-row
  z-index: 1
  header, footer
    clear: both
  header
    @extend .hide-for-medium-up
  nav
    +grid-column(3)
    +breakpoint(phone)
      position: absolute !important
      left: -110%
      top: 0
      +grid-column(11)
      display: block
      z-index: 10
      transition: all 0.25s ease-in-out
  .content
    +grid-row($behavior: nest)
    +grid-column(9)
    article
      +grid-column(12, $collapse: true)

  +breakpoint(phone)
    .content
      transition: all 0.25s ease-in-out
      +grid-row
      +grid-column(12)
      article
        +grid-column(12, $collapse: true)

+breakpoint(phone)
  .phone-show-nav .content
    position: absolute
    left: 90%
    z-index: 2
    display: block
  .phone-show-nav nav
    left: 0

article
  margin: emCalc(42px) 0 1em
  video
    clear: both
    background: #333

h2
  font-family: Lato, sans-serif
  font-size: emCalc(18px)
  margin: 1.2em 0 0.5em
  +breakpoint(phone)
    margin-bottom: 0.3em


h3
  line-height: emCalc(20px)
  margin: 1.2em 0
  +breakpoint(phone)
    margin: 0.3em 0

$date-keyword-width: 110px
.date-title
  +grid-row
  width: 100%
  .date
    width: $date-keyword-width
    float: left
    h3
      color: $dark-gray
      font-size: emCalc(12px)
      font-weight: 700
      letter-spacing: 0.3em
      margin: 2.3em 0 0.5em
  .title
    width: 100%
    float: left
    h2
      color: $dark-gray
      margin: 1.2em 0 0.2em $date-keyword-width

.keywords-list
  +grid-row
  width: 100%
  position: relative
  .title
    width: $date-keyword-width
    float: left
    h3
      line-height: 2.8
      text-transform: uppercase
      color: $light-gray
      font-size: emCalc(9px)
      font-weight: 700
      letter-spacing: 0.6em
      margin-top: 0
  .list
    width: 100%
    float: left
    ul.dotted-list
      margin-bottom: 0
      margin-left: $date-keyword-width


.details
  float: left
  padding-top: emCalc(15px)
  ul.dotted-list
    li
      position: relative
      color: $light-gray
      font-size: emCalc(12px)
      text-transform: uppercase
      &.show
        .links
          opacity: 1
          left: 6px
          position: relative
      .links
        opacity: 0
        transition: all 0.25s ease-in-out
        left: 0
        position: relative
        a
          padding-right: 6px
          color: $light-orange



.description
  +grid-row($behavior: nest)
  +grid-column(12)
  margin-top: emCalc(4px)
  p
    color: $dark-gray







