@media screen and ( min-width: 1024px )

.about--copy
  max-width: 800px

.about__team
  flex-direction: row

.about__team--title
  display: none

.about--video
  flex-direction: row
  padding: 12rem 0
  padding: 0

  & > h2
    padding-left: 5rem
    text-align: left

.video__container
  display: block
  position: relative
  width: 100%
  padding-top: 56.25%
  background-color: $env-primary
  iframe
    position: absolute
    margin: auto
    width: 75%
    height: 100%

.team__head
  border-bottom: none
  border-right: solid 1px $opd-blue
  display: block
  height: auto
  width: auto
  padding: 10rem 0 0 5rem

.title__title--text
  display: block

.team__title--active
  .title__title--text
    display: block
    position: relative
    margin-top: 0
    left: auto

.team__title
  display: flex
  border-radius: 6px 0 0 6px
  padding: 2rem 4rem 2rem 2rem
  transform: rotate(0)
  white-space: nowrap
  color: $opd-blue
  border: solid 1px rgba($env-primary, 0)
  margin: 2rem 0
  &:not(.team__title--active)
    transition:  .2s ease-out

  &:hover:not(.team__title--active)
    background-color: rgba($white,.3)
    transform: translateX(-2px)
    box-shadow: -1px 1px 10px 0px rgba($env-secondary,.5)
    border: solid 1px $env-secondary
    border-radius: 6px
  i
    &::after
      content: " "
      white-space: pre

.team__title.team__title--active
  transition: .4s ease-out

.team__members
  //padding: 10rem
  color: $opd-blue
  background-color: $white

.team__title--active
  //transition: 2s ease-in-out
  justify-content: flex-end
  padding-right: 1rem !important
  color: $env-primary !important
  background-color: $white
  border: solid 1px $opd-blue
  border-right: solid 1px $white
  transform: translateX(1px)
  text-align: right
  //font-size: inherit

.single__member
  width: 90%
  margin: auto
  flex-direction: row

.single__member__image
  width: 25%

.member--image
  width: 10vw
  height: 10vw

.single__member__text
  width: 75%