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

  .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
    padding-top: 56.25%
    //margin-right: 5rem

  .team__head
    border-bottom: none
    border-right: solid 1px $opd-blue-confidence
    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-confidence
    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-confidence
    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-confidence
    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%