@import "base/variavles"
@import "base/fonts"

.home
  background:
    image: url("#{$static}/img/main.png")
    repeat: no-repeat
    position: center
    size: cover

.icons
  display: inline-block
  width: 24px
  height: 24px
  background:
    image: url("#{$static}/img/sprite.png")
    repeat: no-repeat

.welcomeMain
  width: 100%
  float: left
  font-size: 48px
  text-align: center
  padding: 54px 0 39px 0
  font-family: 'pfbeausanspro-thin', sans-serif

.welcomeMain
  line-height: 48px
  font-family: 'pfdintextcomppro-regular', sans-serif
  font-size: 43px

.infoBlock
  //padding: 113px 0 0 0
  height: 100%
  text-align: center
  padding: 80px 0 40px
  ul
    &.customer-list,
    &.contractor-list
      text-align: left
      padding-left: 60px
      padding-right: 20px
      li
        display: flex
        align-items: center
        padding-top: 10px
        list-style: none
        font-size: 12px
        .text
          padding-left: 10px
          display: inline-block
        .icon
          &-1
            @extend .icons
            width: 40px
            background-position: 0 0
          &-2
            @extend .icons
            background-position: 0 -24px
          &-3
            @extend .icons
            background-position: 0 -48px
          &-4
            @extend .icons
            background-position: 0 -72px
          &-5
            @extend .icons
            background-position: 0 -96px
          &-6
            @extend .icons
            background-position: 0 -120px
          &-7
            @extend .icons
            background-position: 0 -144px
          &-8
            @extend .icons
            background-position: 0 -168px
          &-9
            @extend .icons
            background-position: 0 -192px
          &-10
            @extend .icons
            background-position: 0 -216px
          &-11
            @extend .icons
            background-position: 0 -240px
          &-12
            @extend .icons
            background-position: 0 -264px

    &.customer-list
      li
        color: #c7c5c5
    &.contractor-list
      li
        color: #353434



  a
    text-decoration: none
    border: none
    cursor: pointer
  & > a.to-profile
    height: 40px
    border-radius: 40px
    font-size: 20px
    text-transform: uppercase
    font-family: 'pfdintextcomppro-regular', sans-serif
    letter-spacing: 4px
    position: relative
    display: table
    margin: 0 auto
  a.create
    font-family: Myriad, sans-serif
    font-weight: normal
    font-size: 20px
    letter-spacing: 4px
    display: inline-block
    margin-top: 40px
    text-transform: uppercase
  &.customer
    background-color: rgba(0, 0, 0, 0.7)
    p, a.create
      color: #c7c5c5
      &:hover
        color: #f3f1f1
    & > a.to-profile
      &:link, &:visited
        background: url('#{$static}/img/button2.png') no-repeat 27px, white
        color: black
        padding: 24px 26px 20px 72px
      &:hover
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8)
        -webkit-transform: scale(1.04)
        -moz-transform: scale(1.04)
        transform: scale(1.04)
  &.contractor
    background-color: rgba(255, 0, 6, 0.7)
    p, a.create
      color: #353434
      &:hover
        color: #141313
    & > a.to-profile
      &:link, &:visited
        background: url('#{$static}/img/button1.png') no-repeat 25px, black
        color: white
        padding: 24px 26px 20px 72px
      &:hover
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.8)
        -webkit-transform: scale(1.04)
        -moz-transform: scale(1.04)
        transform: scale(1.04)

.youtube
  display: block
  border-radius: 50%
  width: 80px
  height: 80px
  margin: 20px auto 40px
  //border-radius: 100%
  cursor: pointer
  background:
    image: url('#{$static}/img/youtube.png')
    repeat: no-repeat
    position: center
    size: cover
  &:hover
    box-shadow: 0 0 15px rgba(255, 19, 19, 0.8)
    -webkit-transform: scale(1.04)
    -moz-transform: scale(1.04)
    transform: scale(1.04)
  &:focus
    outline: none