$static: '/static'

.wrTop
  width: 100%
  background-color: black

.topMain
  width: 1200px
  margin: 0 auto
  .col-lg-7
    width: 55%
  .col-lg-2
    width: 19%
  .mainMenu li
    padding-right: 25px
    a
      font-size: 15px

.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

.logo
  width: 183px
  height: 36px
  background: url('#{$static}/img/logo.png') no-repeat center
  background-size: cover
  float: left
  margin: 18px 0 21px 10px
  cursor: pointer

.mainMenu
  float: left
  margin: 26px 0 0 0
  li
    float: left
    position: relative
    padding-right: 30px
    list-style: none
    a
      text-decoration: none
      border-bottom: 3px solid transparent
      -webkit-transition: all 0.4s ease-out
      -moz-transition: all 0.4s ease-out
      transition: all 0.4s ease-out
    &:hover a
      border-color: #ff0029
    span
      content: ''
      position: absolute
      height: 23px
      left: 0
      top: -1px
  .icon_tm1 span
    width: 26px
    //background: url('../img/listMain.png') no-repeat left
    background-size: cover
    background: url('#{$static}/img/listMain.png') no-repeat 0 0
  .icon_tm2 span
    width: 22px
    background-size: cover
    background: url('#{$static}/img/listMain.png') no-repeat -26px 0
  .icon_tm3 span
    width: 24px
    background-size: cover
    background: url('#{$static}/img/listMain.png') no-repeat -48px 0

.icon_tm1:hover span
  width: 26px
  background: url('#{$static}/img/listMain2.png') no-repeat left !important
  background-size: cover
  background-position: 0 0 !important

.icon_tm2:hover span
  width: 22px
  background: url('#{$static}/img/listMain2.png') no-repeat left !important
  background-size: cover
  background-position: -26px 0 !important

.icon_tm3:hover span
  width: 26px !important
  background: url('#{$static}/img/listMain2.png') no-repeat left !important
  background-size: cover
  background-position: -49px 0 !important

.mainMenu li
  &:last-child
    padding-right: 0
  a
    color: white
    font-size: 18px
    padding: 30px 0 27px 40px
    font-family: 'pfbeausanspro-reg', sans-serif
  &.active > a
    border-color: #ff0029
  &.icon_tm1.active span
    background: url('#{$static}/img/listMain2.png') no-repeat !important
  &.officeList.active span
    background: url('#{$static}/img/list4tml.png') no-repeat center !important
  &.icon_tm2.active span
    background: url('#{$static}/img/listMain2.png') no-repeat center !important
  &.icon_tm3.active span
    background: url('#{$static}/img/listMain2.png') no-repeat right !important

.changeBlock
  width: 485px
  overflow: hidden
  padding: 113px 0 0 0
  position: relative
  &a
    border: none
    cursor: pointer
    height: 40px
    border-radius: 40px
    font-size: 20px
    text-transform: uppercase
    font-family: 'pfdintextcomppro-regular', sans-serif
    letter-spacing: 4px
    position: relative
    top: -60px
    display: table
    margin: auto

.changeBlock1
  float: left
  margin-left: -15px
  background-color: rgba(255, 0, 6, 0.7)
  &a
    &:link,
    &:visited
      background: url('#{$static}/img/button1.png') no-repeat 25px, black
      color: white
      padding: 24px 26px 20px 72px

.changeBlock2
  float: right
  margin-right: -15px
  background-color: rgba(0, 0, 0, 0.7)
  &a
    &:link,
    &:visited
      background: url('#{$static}/img/button2.png') no-repeat 27px, white
      color: black
      padding: 24px 26px 20px 72px

.changeBlock
  p
    font-family: 'Arial-MT-Regular', sans-serif

.changeBlock1
  p
    color: white

.changeBlock2
  p
    color: black

.changeBlock
  min-height: 500px
  display: table
  padding: 143px 20px 120px 20px
  &:after
    content: ''
    position: absolute
    width: 66px
    height: 1px
    left: 50%
    margin-left: -30px
    background-color: white
    bottom: 60px

.changeBlock2
  float: right
  margin-right: -15px
  background-color: rgba(0, 0, 0, 0.7)

.square
  width: 46px
  height: 46px
  position: absolute
  right: -23px
  top: 100px
  z-index: 9
  -webkit-transform: rotate(135deg)
  -moz-transform: rotate(135deg)
  transform: rotate(135deg)
  background-color: #DCDCDD

  .insetSquare
    width: 100%
    height: 100%
    position: relative
    -webkit-transform: rotate(-135deg)
    -moz-transform: rotate(-135deg)
    transform: rotate(-135deg)
    background: url('#{$static}/img/arrow.png') no-repeat center

.imgProfile
  width: 75px
  height: 75px
  float: right
  margin: 0 0 0 -60px
  img
    display: block
    width: 100%
    height: 100%

.infoProfile
  float: right
  .btn-group
    .btn
      width: 75px
      height: 75px
      float: left
      border-radius: 0 !important
      background-color: black
      border: none
      span
        color: white
        font-size: 26px
    .dropdown-toggle
      &:hover, &:active, &:focus
        -webkit-box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99)
        -moz-box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99)
        box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99)
        background-color: rgb(255, 0, 39)
  .dropdown-menu
    border-radius: 0
    background-color: black
    left: -174px
    margin: -1px 100% 0 0
    float: left
    width: 250px
    height: auto
    padding: 30px 20px 15px 40px
    border-top: 3px solid #ff2c2c
    li
      margin-bottom: 10px
      &:last-child
        margin-bottom: 0
      a
        color: white
        font-size: 17px
        font-family: 'pfbeausanspro-reg', sans-serif
        position: relative
        &:link, &:visited
          color: white
          font-size: 17px
          font-family: 'pfbeausanspro-reg', sans-serif
          position: relative
        &:hover, &:active
          background-color: black !important
          color: #ff2c2c
        span
          content: ''
          position: absolute
          width: 20px
          left: -18px
          top: 4px
    .icon_mm1 a span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 0
    .icon_mm2 a span
      height: 22px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 -20px
    .icon_mm3 a span
      height: 13px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 -42px
      top: 6px
    .icon_mm4 a span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 -55px
    .icon_mm5 a span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 -75px
    .icon_mm6 a span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 -95px
    .icon_mm7 a span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu.png') no-repeat 0 0
    .icon_mm8 a span
      height: 20px
      background-size: contain
      background: url('#{$static}/img/user-5.png') no-repeat 0 0
    .icon_mm1 a:hover span
      height: 20px
      background: url('#{$static}/img/menu2.png') no-repeat center !important
      background-size: cover !important
      background-position: 0 0 !important
    .icon_mm2 a:hover span
      height: 22px
      background-size: cover
      background: url('#{$static}/img/menu2.png') no-repeat 0 -20px
    .icon_mm3 a:hover span
      height: 13px
      background-size: cover
      background: url('#{$static}/img/menu2.png') no-repeat 0 -42px
    .icon_mm4 a:hover span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu2.png') no-repeat 0 -55px
    .icon_mm5 a:hover span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu2.png') no-repeat 0 -75px
    .icon_mm6 a:hover span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu2.png') no-repeat 0 -95px
    .icon_mm7 a:hover span
      height: 20px
      background-size: cover
      background: url('#{$static}/img/menu2.png') no-repeat 0 0
    .icon_mm8 a:hover span
      height: 20px
      background-size: contain
      background: url('#{$static}/img/user-4.png') no-repeat 0 0