.intro-row
  background: url('/images/structure/intro-foto.jpg')
  background-size: cover
  background-position: 50%
  width: 100%
  +flex(center, center)
  height: 948px

  header
    +flex(space-between, center)
    padding: 75px 120px
    position: absolute
    left: 0
    top: 0
    width: calc(100% - 240px)

  .call
    &:hover
      a
        .icon-circle
          background: white
          span
            background-position: -195px 0
    a, p
      +font-bold(20px, 24px)
      color: white
      +flex(flex-start, center)
      max-width: 235px
      cursor: pointer
      margin: 0

    .icon-circle
      border-radius: 9999px
      border: 2px solid white
      +flex(center, center)
      width: 32px
      height: 32px
      margin-right: 10px
      +transition(background 0.3s)

      span
        +phoneWhite
        +transition(background-position 0.3s)


  nav
    +flex(space-between, baseline)

    .logo
      +sprite(0 0, 178px, 36px)
      display: block
      margin-right: 65px

      +transform(translate3d(0, 0, 0))
      opacity: 1
      +transition(all 0.5s)

      &.start-animation
        +transform(translate3d(-50px, 0, 0))
        opacity: 0

    ul
      list-style: none
      margin: 0
      padding: 0
      li
        float: left
        margin-right: 36px
        cursor: pointer
        position: relative
        +font-bold(18px, 40px)

        +transform(translate3d(0, 0, 0))
        opacity: 1
        +transition(all 0.5s)

        &:nth-of-type(2)
          +transition-delay(0.1s)

        &:nth-of-type(3)
          +transition-delay(0.2s)

        &:nth-of-type(4)
          +transition-delay(0.3s)

        &:nth-of-type(5)
          +transition-delay(0.4s)

        &.start-animation
          +transform(translate3d(0, -30px, 0))
          opacity: 0

        &:after
          content: ''
          width: 0px
          position: absolute
          bottom: -2px
          left: 0
          height: 2px
          background: white
          +transition(all 0.4s)

        &:hover
          &:after
            width: 100%

        a
          +font-bold(18px, 18px)
          color: white

  .cta-block
    text-align: center
    h1
      +font-light(50px, 70px)
      color: white
      margin:  0 0 74px 0
      text-align: center
      font-weight: 300
      +transform(translate3d(0, 0, 0))
      opacity: 1
      +transition(all 0.5s)
      +transition-delay(0.2s)

      &.start-animation
        +transform(translate3d(0, 20px, 0))
        opacity: 0


    .button-row
      display: initial
      margin: auto

    .find-out-more, .direct-contact
      display: inline
      a
        background: $orange
        border-radius: 6px
        +font-bold(18px, 18px)
        color: white
        padding: 14px 20px

        span
          +arrowWhite
          display: inline-block
          margin-left: 15px
          position: relative
          +transform(translate3d( 0,0,0))
          opacity: 1
          +transition(all 0.3s)

        &:hover
          span
            opacity: 0
            +transform(translate3d( 0,40px,0))
    .find-out-more
      a
        &:after
          content: ''
          +arrowWhite()
          display: inline-block
          margin-left: -9px
          margin-top: 7px
          position: absolute
          +transform(translate3d( 0,-40px,0))
          opacity: 0
          +transition(all 0.3s)

      &:hover
        a
          background: darken($orange, 4%)
          &:after
            +transform(translate3d( 0,0,0))
            opacity: 1

    .direct-contact
      a
        background: none
        border: 2px solid white
        +box-sizing(border-box)
        +transition(all 0.3s)
        &:after
          content: ''
          +arrowBlue()
          display: inline-block
          margin-left: -9px
          margin-top: 7px
          position: absolute
          +transform(translate3d( 0,-40px,0))
          opacity: 0
          +transition(all 0.3s)

      &:hover
        a
          background: white
          color: $blue
          &:after
            +transform(translate3d( 0,0,0))
            opacity: 1


    .divider
      +font-special(20px, 20px)
      color: white
      display: inline-block
      margin: 0 14px

  .return-home a
    background: $blue
    color: white
    width: 200px
    padding: 10px 20px
    +font-default(21px, 21px)
    display: inline-block
    border-radius: 6px

.error, .av, .news
  .logo
    +sprite(0 0, 178px, 36px)
    display: block
    margin-right: 65px
    opacity: 1
.news
  height: 880px
  .cta-block
    max-width: 1060px
    width: 80%
    .av-text
      color: white
      +font-default(24px, 36px)
.av
  position: fixed
  height: 100%!important
  top: 0
  .cta-block
    max-width: 1060px
    width: 80%
    .av-text
      color: white
      +font-default(24px, 36px)

.scroll-content-av
  padding-top: 175px
  max-width: 1060px
  width: 80%
  margin: auto

  h1
    +font-light(42px, 60px)
    color: white
    margin:  0 0 45px 0
    text-align: center
    font-weight: 300
    position: relative
    z-index: 99

  p.av-text
    +font-default(21px, 28px)
    color: white
    margin-bottom: 40px
    position: relative
    text-align: center
    z-index: 99

  .av-article
    padding: 60px 80px
    background: white
    color: $blue
    margin-bottom: 60px
    position: relative
    z-index: 999

    h3
      +font-black(21px, 18px)
      text-transform: uppercase
      margin: 0 0 50px 0
      letter-spacing: 3.6px
      color: $blue

    p
      +font-default(18px, 28px)
      color: $blue

    &:after
      content: ''
      width: 0
      height: 0
      border-left: 24px solid transparent
      border-right: 24px solid transparent
      border-top: 24px solid white
      position: absolute
      bottom: -24px
      left: calc( 50% - 12px)

    &:nth-of-type(even)
      background: $blue
      color: white

      h3, p
        color: white

      &:after
        border-top: 24px solid $blue

    &:last-child
      &:after
        display: none





+media-query(1200px)
  .intro-row
    header
      padding: 75px 60px
      width: calc(100% - 120px)
    nav
      .logo
        +transform(scale(0.8))
        margin-right: 25px

+media-query(1000px)

  .intro-row
    header
      padding: 75px 20px
      width: calc(100% - 40px)

    nav
      ul
        li
          margin-right: 30px


+media-query(920px)
  .intro-row
    header
      +flex(space-between, center)
    nav
      ul
        display: none

+media-query-height(540px)
  .intro-row
    header
      padding: 30px 30px
      width: calc(100% - 60px)

+media-query(490px)
  .intro-row
    .call
      a
        p
          display: none

+media-query(430px)
  .intro-row
    header
      padding: 30px 30px
      width: calc(100% - 60px)

    .cta-block
      h1
        font-size: 26px
        line-height: 48px
        margin-bottom: 36px

      .find-out-more, .direct-contact
        display: block
        text-align: center

      .divider
        width: 100%
        margin: 30px 0
        text-align: center