.pwp__mast
  display: flex
  justify-content: center
  align-items: center
  height: 90vh
  height: calc( var(--vh, 1vh) * 90 )

.pwp__bg
  position: relative
  height: 100%
  width: 100%
  background-image: url($baseurl + 'assets/img/landing__pwp-mobile.jpg')
  background-size: cover
  opacity: .7
  filter: grayscale(1) contrast(.2) brightness(1.6)

.pwp__overlay
  position: relative
  height: 100%
  width: 100%
  background-color: $env-primary

.pwp--strap
  position: absolute
  color: $env-secondary
  text-align: center
  padding-top: $navbar-height


.pwp--strap-start
  color: $env-primary

.pwp__follow
  display: flex
  position: absolute
  bottom: 4.5vh
  width: 30px
  height: 11vh
  background-color: $env-primary
  z-index: 2
  border-radius: 30px
  color: $white
  align-items: center
  justify-content: center
  &::after
    content: "\2193"
    font-size: 20px
    transform: scaleY(2)

.pwp__device--img
  background-size: cover
  background-repeat: no-repeat
  width: 100%
  height: 0
  padding-top: 62.5%
  z-index: 99999

.pwp__device--docked
  background-image: url($baseurl + 'assets/img/pwp_device_group_docked.png')
  svg
    position: absolute
    transform: translateY(-100%)

.pwp__device--group
  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
  svg
    position: absolute
    transform: translateY(-100%)
    //-height: 100vh

.pwp__straps
  text-align: center
  //padding: 5rem 2rem
  background-position: center
  color: $env-secondary

.pwp__device--strap
  background-color: $opd-blue-trust
  padding: 5rem 2rem
  & > h2
    padding: 2rem 0

.pwp__grid-wrap
  display: flex
  flex-direction: column-reverse
  width: 100vw

.pwp__grid-col-r
  svg
    display: none
    position: absolute

.pwp__grid__text
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column
  width: 100%
  background-color: $env-primary
  color: $white
  padding: 4rem 0
  .site__logo
    width: 60%
  .site__logo--curve,
  .site__logo--legvert,
  .site__logo--leg45,
  .site__logo--g,
  .site__logo--a,
  .site__logo__i,
  .site__logo--t,
  .site__logo--Q
    fill: $white

.pwp__grid_img
  background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
  background-size: cover
  background-repeat: no-repeat
  padding-top: 150%
  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)

.pwp--guarantee
  border-top: solid 1px $soft-white
  width: 80%
  margin: 3rem 0

.pwp__grid_keywords
  display: flex
  flex-direction: row
  flex-wrap: wrap
  background-color: $opd-blue-trust
  & > *
    padding: 3rem 0
    width: 50%


.pulsating-circle
  position: absolute
  left: 75.5%
  top: 52.5%
  transform: translateX(-50%) translateY(-50%)
  width: 8px
  height: 8px

  &::before
    content: ''
    position: relative
    display: block
    width: 300%
    height: 300%
    box-sizing: border-box
    margin-left: -100%
    margin-top: -100%
    border-radius: 100px
    background-color: rgb(252, 133, 133)
    animation: pulse-ring 2s cubic-bezier(.01,.56,.2,.2) infinite

  &::after
    content: ''
    position: absolute
    left: 0
    top: 0
    display: block
    width: 100%
    height: 100%
    background: radial-gradient(rgb(255, 176, 176), rgb(255, 107, 107))
    border-radius: 100px


@keyframes pulse-ring
  0%
    opacity: 1
    transform: scale(.3)

  80%
    opacity: 0

  100%
    opacity: 0
    transform: scale(1)