// queries

// @media (min-aspect-ratio: 16/9)
//   .video-container
//     video
//       width: 100%
//       height: 300%
//       top: -100%
//
// @media (max-aspect-ratio: 16/9)
//   .video-container
//     video
//       height: 100%
//       width: 300%
//       left: -100%
@media screen and (max-width: 1250px)
  .featured
    padding: 50px
    justify-content: center

    div
      margin-top: 50px
      width: 100%

    h4
      font-size: 1.2em

  .flag
    width: 300px
    font-size: 1em
    right: -85px
    top: 40px

@media screen and (max-width: 960px)
  .side-nav
    display: none

  .header-content
    margin-left: 15px

    p
      max-width: 100%
      line-height: 2em

  .nav-block
    font-size: 1.5em

  .mercer
    flex-wrap: wrap-reverse

    iframe
      margin-bottom: 50px

  .contact-page
    width: 100%
    height: auto
    position: relative

  .contact-copy
    padding: 20px
    margin: 0px auto

  .map
    position: relative
    width: 100%
    height: 80vh

  .portfolio-image-container
    width: 100%

  .portfolio-info-container
    width: 100%
    padding: 100px 100px 0px 100px

@media screen and (max-width: 870px)
  p
    font-size: .9em

  .info-block, .img-block
    width: 100vw
    height: 50vh
    overflow: hidden

  .img-block
    img
      height: 70%

  .info-block
    padding: 20px

    h2
      font-size: 1.5em

    h4
      font-size: 1.2em

    p
      font-size: 1em

  .bases
    display: flex
    flex-wrap: wrap
    text-align: center

    .cta
      margin: 25px auto 0px auto

  .base-cards
    padding: 50px 40px

  .base-flex
    .polaroid-inner
      width: 150px
      height: 150px

    .polaroid
      width: 175px
      height: 225px
      margin-bottom: 50px

    img
      width: 150px

  .ask-about
    font-size: 1.2em
    padding: 20px

  .workshop-card
    width: 350px
    padding: 50px 20px
    // margin: 0 15px

    // &:nth-child(1)
    //   margin-left: 0px

    img
      width: 300px

    h1
      margin-top: 25px

    h4
      font-size: 1.2em

    p
      font-size: .9em

  .text-block
    margin: 50px auto

  .calendar
    iframe
      width: 100%
      height: 400px
      margin-bottom: 0px

  .mercer
    iframe
      width: 80%
      margin: 0 auto 50px auto

  .media-links
    a
      font-size: 1.2em
      padding-bottom: 25px
      margin-bottom: 25px
      border-bottom: 1px solid lightgrey


@media screen and (max-width: 667px)
  // .phone
  //   img:nth-child(1),p
  //     display: none

  .phone
    margin-right: -15px

  .close-nav
    right: 20px
    left: auto

  .nav-block
    font-size: 1em
    width: 100%
    height: 12.5%

  .glass-logo
    width: 175px

  h1
    font-size: 2.2em
    letter-spacing: normal

  // .video-container
  //   display: none
  //
  // .mobile-video
  //   display: flex
  //   overflow: hidden

  .desktop-hide
    display: none

  // .mobile-show
  //   position: relative
  //   display: flex
  //   justify-content: center
  //   align-items: center
  //   height: calc(100% - 25vh)
  //   z-index: 1000

  .buttons
    justify-content: center

  .header
    text-align: center

    img
      margin: 0 auto

  footer
    position: relative
    display: flex
    justify-content: space-between
    align-items: flex-start
    flex-wrap: wrap
    padding: 40px
    background: $black

  .left, .right, .center
    width: 100%
    color: #fff
    font-family: $body
    line-height: 2em
    text-align: center
    margin-bottom: 50px

  .right
    text-align: center
    order: -1


    span
      font-weight: 700

  .center
    text-align: center

    img
      margin: 15px

  .page-header-container
    padding: 20px

  .portfolio-info-container
    width: 100%
    padding: 40px

    ul
      li
        font-size: .9em

  .corp-client
      -webkit-column-count: 1
      -moz-column-count: 1
      column-count: 1
      -webkit-column-gap: 1
      -moz-column-gap: 1
      column-gap: 50px

  .text-block
    h1
      font-size: 1.5em

  .missing
    img
      width: 300px