$width-columnwide: 1200px
$desktop-footerHeight: 235px

.wrapper
  min-width: 100%
  min-height: 100%
  position: absolute
  left: 0
  top: 0
  background-color: $color-white

  .wrapper__content
    min-width: 100%
    min-height: 100%
    // background-color: $color-wildsand

.header
  width: 100%
  margin-top: 2%
  @include tablet
    margin-top: 1%
  background: url(../images/part-quest/background_header.jpg)

  .header__content
    width: 98%
    margin: 0 auto
    @include desktop
      width: $width-columnwide

  .row
    @include clearfix
    @include smart
      background-color: $color-white
      padding-bottom: 10px
      border-bottom-left-radius: 20px
      border-bottom-right-radius: 20px
    @include tablet
      margin-bottom: 10px
    @include desktop
      margin-bottom: 80px

  .logo
    @include tablet
      background-color: $color-white
    @include desktop
      background-color: $color-white
    padding: 1px 10px
    border-bottom-left-radius: 20px
    border-bottom-right-radius: 20px
    @include smart
      width: 300px
      margin: 0 auto
    @include tablet
      display: inline-block
      float: left
    @include desktop
      display: inline-block
      float: left

  .switch
    background-color: $color-white
    line-height: 62px
    border-bottom-left-radius: 20px
    border-bottom-right-radius: 20px
    @include smart
      width: 90px
      margin-right: 9%
      float: right
    @include tablet
      display: inline-block
      float: right
    @include desktop
      display: inline-block
      float: right

  .address__short
    float: left
    @include tablet
      float: right
      margin-left: 3%
      color: $color-white
      font-size: 14px
    @include desktop
      float: right
      margin-left: 3%
      color: $color-white
      font-size: 14px
    margin-top: 6px
    margin-left: 5%
    color: $color-shark
    font-size: 12px
    line-height: 1.3
    @include clearfix
    span
      display: block
      span
        display: inline
      sup
        top: -3px
    a
      display: inline-block
      margin-top: 5px
      @include smart
        color: $color-shark!important
      @include tablet
        color: $color-white!important
      @include desktop
        color: $color-white!important

  h1
    color: $color-white
    margin: 0
    text-align: center
    @include tablet
      margin: 0 0 0 20%
      text-align: left
      // font-size: 50px
    @include desktop
      margin: 0 0 0 20%
      text-align: left
      font-size: 50px
    padding-bottom: 10px
    font-weight: normal

.body
  width: 100%
  min-height: 600px
  background: url(../images/part-quest/varuosadAutoteenindus.jpg)
  background-repeat: repeat

  .body__content
    width: 98%
    margin: 0 auto
    padding-bottom: $desktop-footerHeight
    position: relative
    @include tablet
      padding-top: 20px
    @include desktop
      width: $width-columnwide
      padding-top: 20px
    h1
      color: $color-sttropaz
      margin: 0
      text-align: center
      padding: 10px 0
      @include tablet
        margin: 0 0 0 20%
        text-align: left
      @include desktop
        font-size: 50px
        margin: 0 0 0 20%
        text-align: left
      font-weight: normal

    h2.formSubHeading
      @extend h1
      font-size: 26px
      max-width: 500px
      line-height: 32px
      padding-bottom: 0px

  .body__img--cart
    position: absolute
    top: 30px
    right: 0
    z-index: 10
    @include smart
      display: none

  .body__form
    margin-top: 0
    margin-left: 10%
    margin-bottom: 90px
    @include tablet
      margin-top: 40px
      margin-left: 20%
      margin-bottom: 20px
    @include desktop
      margin-top: 40px
      margin-left: 20%
      margin-bottom: 20px

    ::-webkit-input-placeholder
      color: $color-sttropaz
    ::-moz-placeholder
      color: $color-sttropaz
    :-ms-input-placeholder 
      color: $color-sttropaz

    input[type='text'], input[type='email']
      width: 220px
    input[type='text'], input[type='email'], textarea 
      border: 2px solid $color-chathamsblue
      padding: 8px
      color: $color-chathamsblue
    input[type='button']
      min-width: 240px
    textarea
      width: 220px
      height: 100px
    @include desktop
      textarea
        width: 460px
        height: 200px

  .body__form--selectize
    width: 240px
    position: relative
    .selectize-control
      margin: 10px 0
      line-height: 1
    .selectize-input
      border: 2px solid $color-chathamsblue
      color: $color-chathamsblue
      &:after
        border-color: $color-chathamsblue transparent transparent transparent !important
    .selectize-dropdown
      color: $color-chathamsblue
      .selectize-dropdown-content
        .option
          &:hover
            background-color: lighten($color-chathamsblue, 60%)
        .selected
          background-color: lighten($color-chathamsblue, 60%)

  .form__input
    position: relative
    margin: 10px 0
  
  .input--required
    display: inline-block
    position: absolute
    top: 8px
    left: -28px

  .input__tooltip
    display: none
    vertical-align: top
    position: absolute
    top: 0
    left: 270px
    // margin-left: 30px
    margin-bottom: -1px
    background-color: $color-frenchpass
    padding: 8px
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50)
    span
      white-space: nowrap
    &:before
      position: absolute
      top: 0
      left: -16px
      content: ' '
      width: 0
      height: 0
      border-top: 20px solid transparent
      border-bottom: 20px solid transparent
      border-right: 16px solid $color-frenchpass
      // border-style: inset

  .input--error
    input
      border-color: $color-pink !important
    .input__tooltip
      background-color: $color-pink
      &:before
        border-right: 16px solid $color-pink !important

  .textarea--tooltip
    display: none
    vertical-align: top
    position: relative
    margin-left: 30px
    margin-bottom: -1px
    background-color: $color-frenchpass
    padding: 8px
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50)
    span
      white-space: nowrap
    &:before
      position: absolute
      top: 0
      left: -16px
      content: ' '
      width: 0
      height: 0
      border-top: 20px solid transparent
      border-bottom: 20px solid transparent
      border-right: 16px solid $color-frenchpass
      // border-style: inset

  .form__submit
    margin-top: 20px
    margin-bottom: 50px
    font-size: 20px


.footer
  width: 100%
  position: absolute
  left: 0
  bottom: 0
  background-color: $color-chathamsblue
  @include tablet
    height: $desktop-footerHeight
  @include desktop
    height: $desktop-footerHeight

  .footer__content
    width: 100%
    height: 100%
    overflow: hidden
    margin: 0 auto
    background: url(../images/part-quest/backgroundFooter.png)
    background-repeat: no-repeat
    background-position: 30% bottom
    
    @include desktop
      width: $width-columnwide
      background-size: 50% 100%

  .footer__content--left
    margin-top: 2%
    @include tablet
      float: left
      margin-top: 40px
    @include desktop
      float: left
      margin-top: 40px
    .logo
      display: inline-block
      margin-left: 3%
      @include desktop
        display: block
      a
        border-bottom: 0

  .social
    margin-top: 10px
    @include smart
      margin-left: 3%
    @include tablet
      margin-left: 3%

  .footer__content--right
    margin-top: 2%
    @include tablet
      margin-top: 40px
      margin-right: 5%
      float: right
    @include desktop
      margin-top: 40px
      margin-right: 15%
      float: right

  .footer__info
    @include smart
      margin-left: 3%
      margin-bottom: 3%

  .info__phone
    font-size: 20px
    @include tablet
      font-size: 28px
    @include desktop
      font-size: 28px
    font-weight: bold
    color: $color-sunglow
    sup
      font-size: 13px
      @include tablet
        font-size: 20px
      @include desktop
        font-size: 20px
      top: -5px
      font-weight: normal

  h3
    font-size: 20px
    margin: 0
    margin-bottom: 3%
    @include tablet
      font-size: 28px
      margin: 10px 0 20px 0
    @include desktop
      font-size: 28px
      margin: 10px 0 20px 0
    font-weight: bold
    color: $color-sunglow
    

  span
    font-size: 16px
    @include tablet
      font-size: 20px
    @include desktop
      font-size: 20px
    display: block
    color: $color-white

  a
    font-size: 16px
    @include tablet
      font-size: 20px
    @include desktop
      font-size: 20px
    display: inline-block


// ################## partQuest Sended

.body__cart
  margin-left: 2%
  margin-right: 2%
  margin-bottom: 20px
  background-color: $color-white
  padding: 10px 5px 30px 130px
  @include tablet
    width: 460px
  @include desktop
    width: 460px
    margin-left: 20%
    margin-right: 0
  position: relative
  color: $color-sttropaz

  h2
    margin: 0
    margin-bottom: 10px
    font-size: 30px
    position: relative
    img
      margin-left: 10px
      position: relative
      bottom: -5px

  h4
    margin: 0
    font-size: 22px
    font-weight: normal

  p
    margin: 0
    padding-bottom: 10px
    font-size: 14px
    font-style: italic

  .img--sent
    position: absolute
    top: 10px
    left: 20px

  .social
    margin-top: 20px

    span
      font-size: 14px
      line-height: 1.3
      width: 150px
      display: inline-block
      position: relative
      margin-bottom: 15px

    .img--like
      position: absolute
      top: 10px
      left: -48px

    // facebook hacks
    // .pluginConnectTextDark
    //   color: $color-white!important
    //   a
    //     color: $color-wildsand

  .img--discount
    position: absolute
    top: 0
    left: 0

.body__cart.goToService
  cursor: pointer