@import "base/variavles"

.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_tml span
    content: ''
    position: absolute
    width: 27px
    height: 24px
    //left: -35px
    top: 0
    background: url('#{$static}/img/list4.png') no-repeat center !important
    background-size: cover !important

.icon_tml:hover span
  background: url('#{$static}/img/list4tml.png') no-repeat center !important
  background-size: cover !important

.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

.rating
  width: 46px
  height: 46px
  float: right
  border-radius: 100%
  background-color: #4D4D4D
  margin: 15px 0 0 10px
  position: relative

.ratingInset
  width: 46px
  height: 46px
  border-radius: 100%
  background-color: #FF0027
  position: absolute
  /*left:-1.859px;*/
  /*bottom: 3px;*/
  clip: rect(0, 22px, 50px, 0)
  transform: rotate(-90deg)

.iconRating
  width: 100%
  height: 100%
  position: absolute
  left: 0
  top: 0
  background: url('#{$static}/img/button12.png') no-repeat center

.ratingPer
  color: #ff2c2c
  font-size: 18px
  font-family: 'pfdintextcomppro-regular', sans-serif
  float: right
  margin: 28px 0 0 9px
  cursor: pointer

.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

li.officeList.icon_tml > a > p
  display: inline-block
  padding: 5px 7px 3px 7px
  background: #ff0000
  border-radius: 35px
  position: absolute
  right: -34px
  top: -4px

.reg, .reg:link, .reg:visited
  color: #fb1818
  font-size: 16px
  text-transform: uppercase
  float: left
  line-height: 75px
  font-family: 'pfdintextcomppro-regular', sans-serif
  letter-spacing: 4px

.lock
  width: 75px
  height: 75px
  background: url('#{$static}/img/lock.png') no-repeat center, white
  float: right
  cursor: pointer
  margin: 0 -25px 0 0

.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