.gallery-container
  width: 100vw

.row
  display: flex
  flex-wrap: wrap
  justify-content: center
  align-items: center
  width: 100%

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

.img-block
  display: flex
  justify-content: center
  align-items: center

  img
    height: 85%
    width: auto

.info-block
  padding: 100px 200px
  display: flex
  justify-content: center
  align-items: center
  background: #fdfdfd

  h2
    font-size: 3em
    max-width: 400px
    line-height: 1em

  h4
    font-size: 1.5em
    margin-bottom: 25px

  p
    font-family: $body
    font-size: 1.2em

.page-header-container
  background: $black
  padding: 40px
  color: #fff
  font-family: $body
  background-size: contain
  background-position: top right
  background-repeat: no-repeat
  position: relative

// .team-head
//   background-image: url(../img/team-head.jpg)

.header-content
  margin: 0 auto
  margin-bottom: 50px
  text-align: center

  p
    margin: 0 auto
    max-width: 60%
    line-height: 2em

h1
  font-size: 4em
  font-family: $font
  letter-spacing: -4px

.page-header
  width: 100%
  display: flex
  justify-content: space-between
  align-items: flex-start
  font-family: $body
  color: #fff
  margin-bottom: 50px

.menu
  width: 25px
  margin-left: 15px
  transform: translateY(-1px)
  cursor: pointer
  z-index: 5


.white
  background: #fdfdfd

.black
  background: #0c0c0c

.ash-white
  background: #fcf9fa

.ash-black
  background: #030303



nav
  width: 100vw
  overflow-y: scroll
  position: fixed
  z-index: 999
  height: 0vh

  a, p
    font-family: $font

    &:hover
      color: $brand

.close-nav
  text-align: center
  padding: 20px
  height: 100px
  color: $black
  box-shadow: 0px 0px 10px -2px #000
  font-size: 2em
  position: absolute
  z-index: 1000
  padding-top: 50px
  border-radius: 50px
  top: -40px
  font-weight: bolder
  left: 0px
  right: 0px
  margin: 0 auto
  width: 60px
  background: #fff
  transform: scale(1.2)
  cursor: pointer



.text-block
  max-width: 960px
  margin: 100px auto
  padding: 40px
  font-family: $body
  font-size: 1.1em
  line-height: 2em

  h1
    font-size: 3em
    text-align: center
    margin-bottom: 50px

.team-images
  position: relative
  margin: 0 auto
  text-align: center
  max-width: 960px
  margin-top: 100px
  margin-bottom: -50px

  img
    height: 250px
    border: 10px solid #fff
    box-shadow: 0px 0px 20px -10px $black

    &:nth-child(even)
      transform: rotate(2deg)

    &:nth-child(odd)
      transform: rotate(-2deg)



.contact-page
  width: 50%
  height: 100vh
  overflow-y: scroll
  position: absolute

.contact-copy
  padding: 40px
  margin: 50px auto

  p
    margin-top: 50px

  .contact-btn
    display: inline-block
    width: 200px
    border: 2px solid #fff
    padding: 10px 40px
    text-align: center
    margin-right: 15px

.map
  right: 0
  position: absolute
  width: 50%
  height: 100vh
  float: right

  iframe
    width: 100%
    height: 100%

.hot-date-logo
  text-align: center
  margin-top: 50px

  img
    max-width: 75%

  p
    margin-top: -10px
    letter-spacing: 10px !important

  img
    max-width: 400px

.base-cards
  padding: 100px 40px
  display: flex
  justify-content: space-around
  flex-wrap: wrap
  align-items: center

.base-flex
  display: flex
  flex-wrap: wrap
  justify-content: space-around
  align-items: center
  margin-bottom: 50px

  .section
    display: flex
    flex-wrap: nowrap

  .polaroid-container
    display: flex
    flex-wrap: wrap
    justify-content: center
    align-items: center
    margin-bottom: 100px

  .polaroid-inner
    width: 250px
    height: 250px
    background: #000
    overflow: hidden

  .polaroid
    width: 275px
    height: 325px
    background: #fff
    box-shadow: 0px 0px 10px -2px $black
    padding: 12.5px
    margin-right: 50px
    transform: rotate(5deg)

  .odd
    transform: rotate(-5deg)

    // &:nth-child(1)
    //   transform: rotate(-5deg)
    //
    // &:nth-child(2)
    //   transform: rotate(5deg) translateY(50px) translateX(-25px)
    //   margin-right: 50px
    //   margin-bottom: 100px

  img
    width: 250px

  div
    max-width: 600px

  h1
    color: $brand

  h4
    font-size: 1.5em
    font-family: $body
    margin-bottom: 15px

  a
    color: $black

  .cta
    padding: 5px 0px
    margin-top: 15px
    border: 2px solid $brand
    width: 150px
    text-align: center

    &:hover
      background: $brand
      color: #fff

.hot-date
  display: block

.bases-select
  width: 100%
  background-color: #f7f7f7
  display: flex
  flex-wrap: wrap
  align-items: center
  justify-content: center
  font-family: $body
  position: relative
  display: none

.ask-about
  text-align: center
  font-size: 1.5em
  opacity: .8
  font-style: italic
  padding: 20px 0px





.container
  position: relative
  cursor: pointer
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  display: flex
  align-items: center
  justify-content: center
  flex-wrap: wrap
  padding: 20px
  z-index: 1

.container input
  position: absolute
  opacity: 0
  cursor: pointer

.container:hover input ~ .checkmark
  background-color: #ccc

.container input:checked ~ .checkmark
  background-color: $brand

.checkmark
  position: absolute
  top: 0
  left: 0
  height: 100%
  width: 100%
  position: absolute
  z-index: -1



// .workshop-container
//   overflow-x: scroll


.workshops
  padding: 100px 0px
  display: flex
  align-items: center
  flex-wrap: wrap
  flex-direction: column

.workshop-card
  border-radius: 15px
  width: 60%
  text-align: center
  margin-bottom: 100px
  //width: 750px
  //margin: 0 50px
  padding: 100px 60px
  box-shadow: 0px 10px 20px -10px #000
  position: relative

  &:nth-child(1)
    margin-top: 100px
    //margin-left: calc(50vw - 475px)

  img
    width: 500px
    position: absolute
    left: 0
    right: 0
    top: -50px
    margin: 0 auto

  h1
    margin-top: 75px
    color: $brand
    text-align: center

  h4
    margin: 0 auto
    text-align: center
    font-size: 1.5em
    font-family: $body
    margin-bottom: 15px
    max-width: 400px

  .prices
    margin-top: 50px
    text-align: center

  a
    color: $black

  .cta
    margin: 50px auto 0px auto
    padding: 5px 0px
    border: 2px solid $brand
    width: 150px
    text-align: center

    &:hover
      background: $brand
      color: #fff


.featured
  padding: 100px
  color: #fff
  display: flex
  justify-content: flex-end
  align-items: center
  overflow: hidden
  background: linear-gradient(125deg, rgba(20,20,20,0) 21%, rgba(20,20,20,1) 100%)
  position: relative
  background-blend-mode: overlay

  &::after
    content: ''
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-image: url(../img/feature-bg.jpg)

  div
    width: 50%

  h1
    line-height: 1em
    margin-bottom: 15px

  h4
    font-size: 1.5em
    font-family: $body
    margin-bottom: 15px

.flag
  position: absolute
  z-index: 1
  background: #fff
  color: $brand
  width: 400px
  padding: 20px
  text-align: center
  font-size: 1.5em
  font-family: $body
  box-shadow: 0px 0px 20px -5px $black
  transform: rotate(45deg)
  right: -100px
  top: 75px




.calendar
  width: 100%
  margin: 0 auto
  text-align: center

  iframe
    width: 80%
    height: 800px
    margin-bottom: 100px


.glass-logo
  width: 250px


//
//
// .slideshow-overflow
//   overflow: hidden
//
// .slideshow
//   width: 100%
//
// .carousel-control
//   &.left, &.right
//     background-image:
//
// // .carousel-control img
// //   margin-top: 175px
//
// .carousel-inner p
//   text-align: center
//   max-width: 800px
//   margin: 10px auto
//
// .carousel-inner a
//   color: #fff
//   text-decoration: none
//   font-family: $font
//
// // .item img
// //   height: auto
// //   width: 100%
//
// .carousel-inner > .item > img
//   width: 100%
//
//
//
//
.carousel-fade .carousel-inner .item
  opacity: 0
  transition-property: opacity


.carousel-fade .carousel-inner .active
  opacity: 1


.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
  left: 0
  opacity: 0
  z-index: 1


.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right
  opacity: 1


.carousel-fade .carousel-control
  z-index: 2


@media all and (transform-3d), (-webkit-transform-3d)
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right
    opacity: 0
    -webkit-transform: translate3d(0, 0, 0)
            transform: translate3d(0, 0, 0)

  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left
    opacity: 0
    -webkit-transform: translate3d(0, 0, 0)
            transform: translate3d(0, 0, 0)

  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active
    opacity: 1
    -webkit-transform: translate3d(0, 0, 0)
            transform: translate3d(0, 0, 0)








.mercer
  padding: 100px 40px
  display: flex
  justify-content: center
  align-items: center
  flex-wrap: wrap

  p
    max-width: 440px

  iframe
    width: 400px
    height: 300px
    border: 15px solid #fff
    box-shadow: 0px 0px 20px -10px $black
    transform: rotate(5deg)
    margin-left: 50px



.media-links
  padding: 100px 40px
  text-align: center

  a
    font-size: 2.5em
    color: darken($brand, 10%)
    display: block
    line-height: 2em
    padding-bottom: 25px
    border-bottom: 1px solid lightgrey
    margin-bottom: 25px



.contact-social
    img
      margin-top: 50px
      margin-right: 15px




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




.test
  filter: drop-shadow()


@keyframes glowing
  0%
    filter: drop-shadow(0 0 -10px #fff)
  40%
    filter: drop-shadow(0 0 7px #fff)
  60%
    filter: drop-shadow(0 0 7px #fff)
  100%
    filter: drop-shadow(0 0 -10px #fff)

.glow
  animation: glowing 10000ms infinite

.portfolio-main-container
  display: flex
  flex-wrap: wrap

.portfolio-image-container
  width: 50%

  .img-block
    width: 100%

    img
      height: 80%
      width: auto

.portfolio-info-container
  width: 50%
  padding: 100px
  position: relative

  ul
    margin: 50px
    font-style: italic
    list-style: none

    li
      font-family: $body
      line-height: 2em

      &::before
        content: "•"
        color: red
        display: inline-block
        width: 1em
        margin-left: -1em
        font-size: 1.2em

.scroll-fixed
  position: fixed
  top: 0
  right: 0
  overflow-y: scroll
  height: 100vh

.scroll-adjust
  height: 300px




.side-nav
  position: fixed
  font-size: .6em
  font-family: $body
  text-align: right
  height: 100vh
  top: 0
  right: 0
  display: flex
  align-items: center
  padding: 20px
  opacity: 0
  z-index: 2

  ul
    list-style: none
    transform: translateX(120px)

  a
    color: $black
    line-height: 4em

.side-nav-show
  opacity: 1

  ul
    transform: translateX(0)

.side-hide
  opacity: 0

.boot-offset
  transform: translateY(7px)



.pure-black
  background: #000