/* Last full read through 29/12/2020

*
*##############################################
*# about                      /_sass/about.sass
*##############################################
*
*/

.hero

overflow: hidden

.hero__image–fixed

position: fixed

@keyframes fadeInOpacity

0%
  opacity: 0

100%
  opacity: 1

.about__copy

align-items: center
color: $white
display: flex
flex-direction: column
justify-content: center
padding: 5rem 2rem
text-align: center

.about–copy

padding: 3rem 0

.about–video

width: 100vw
//background-color: $opd-grey
display: flex
flex-direction: column
padding: 5rem 0
padding: 0
justify-content: space-between
& > h2
  color: $env-primary
  text-align: center
  padding: 1rem

.video__container

display: block
position: relative
width: 100%
padding-top: 56.25%
iframe
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: 100%
  height: 100%

.about__team

display: flex
flex-direction: column
background-color: $pure-white
border-top: solid 1px $opd-blue

.about__team–title

padding-top: 3rem
text-align: center
color: $pure-white

.team__head

align-items: flex-end
border-bottom: solid 1px $opd-blue
display: flex
height: 10rem
justify-content: space-around
width: 100vw

.team__title

color: $opd-blue
padding-bottom: 2rem
transition: .4s ease-out
cursor: pointer
i
  font-size: $font-size * 1.2
  transition: .4s ease-out

.team__title–active

color: $env-primary
padding-bottom: 2.3rem
i
  @include text-shadow
  font-size: $font-size * 1.5

.team__title.team__title–active

transition: .4s ease-out

.title__title–text

display: none

.team__title–active

.title__title--text
  display: block
  position: absolute
  margin-top: 4rem
  left: 2rem

.team__members

background-color: $white
color: $opd-blue
padding-top: 10rem

.single__member

display: none
flex-direction: column
width: 90%
margin: auto

.single__member–active

display: flex

.single__member__image

display: flex
justify-content: center
width: 100%
padding-bottom: 3rem

.member–image

width: 200px
height: 200px
object-fit: cover
border-radius: 12px
padding: 3px
border: solid 1px $light-grey
transition: .3s ease-in-out
&:hover
  border: solid 1px $white
  box-shadow: 1px 1px 5px $light-grey

.single__member__text

width: 90%
margin: auto

.member__position

display: flex
align-items: center
color: $grey
font-size: $font-size

.member__socials

align-items: center
list-style: none
margin: 0
padding: 0
li
  display: inline

.social

color: $env-primary
font-size: $font-size * .7

.member__info

height: $font-size * 4
max-height: $font-size * 4
overflow: hidden
transition: .8s cubic-bezier(0,.98,.48,.92)

.member__info–reveal

height: 100%
max-height: 1000px
transition: .6s cubic-bezier(.51,.38,1,.42)

.info__conceal

align-items: flex-end
// NOTE: when linear-gradient(rgba(0,0,0,0) ...) we get a shadow on safari
background-image: linear-gradient(rgba($pure-white,0), $white, $white)
color: $black
cursor: pointer
display: flex
font-size: $font-size * .8
height: $font-size * 3
transform: translateY(-100%)
transition: .4s ease-in-out
width: 100%

&::before
  content: 'more \00a0 '

i
  font-size: $font-size * .6

.info__reveal

align-items: baseline
height: $font-size * 1
padding-bottom: $font-size * 2
transform: translateY(0)
transition: .4s ease-in-out

&::before
  content: 'less \00a0 '

i
  transform: rotate(180deg)