$documentWidth: 1200px
$headerheight: 44px

.al-container
  width: 98%
  min-width: 304px // 310 - 6 (scrollbar)
  height: 100%
  margin: 0 auto
  // @include smart
  //   padding: 0 1%
  // @include desktop
  width: $documentWidth

.al-wrapper
  min-width: 100%
  min-height: 100%
  position: absolute
  left: 0
  top: 0

.al-contentWrapper
  min-width: 100%
  min-height: 100%

.al-modal
  width: 100%
  position: absolute
  top: 470px //временно
  left: 0
  right: 0
  z-index: 110

.al-overlay
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 10
  background-color: $wildblueyonder
  opacity: 0.75
  filter: alpha(opacity=75)
  display: none

.al-overlay__body
  @extend .al-overlay
  background-color: white

.al-headerWrapper
  background-image: url('../images/back.jpg')
  background-color: black
  background-repeat: no-repeat
  background-position: right top
  background-size: 100% 270px 
  background-size: 100% 100%

.al-header
  width: 100%
  height: $headerheight
  background-color: transparentize(black, 0.5)
  .al-headerContainer
    @extend .al-container
    // @include smart
    //   padding: 0
    //   width: 100%
    // @include tablet
    //   padding: 0
    //   width: 100%
    line-height: $headerheight
    color: white
    a
      color: white

    .al-logo
      float: left
      height: $headerheight
      a
        display: inline-block
        border: none
        height: 100%

    .al-lang
      position: relative
      float: left
      cursor: pointer
      i
        position: relative
        top: 3px
        left: 0
        margin: 0 10px
      ul
        line-height: $headerheight
        width: 140px
      ul li ul
        position: absolute
        left: 0
        top: $headerheight
        z-index: 10
        display: none
        line-height: 24px
        box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
      ul li:hover ul
        display: block
      ul li:hover
        background-color: $iron
        color: $monza
        a
          color: $monza
      ul li:hover ul li
        background-color: $iron
        padding-right: 10px
        width: 100%
        color: black
        a
          color: black
          @extend .al-link--dotted
          &:hover
            color: $monza
      ul li:hover ul li:last-child
        padding-bottom: 10px
    
    .al-lang__smart
      @extend .al-lang
      width: 50px
      i
        display: inline-block
        margin: 0
        margin-left: 10px
      a
        border-bottom: none
      ul
        width: 48px
      ul li:hover
        a
          border-bottom: none
      ul li:hover ul li
        a
          border-bottom: none

    .al-phone
      float: left
      margin: 0 10px
      cursor: pointer
      // @include tablet
      //   float: right
      //   margin: 0 5px
      // @include desktop
      margin: 0 40px
      margin-left: 10%
      i
        margin-right: 5px
        position: relative
        top: 2px
        left: 0

    .al-cart
      float: left
      position: relative
      margin: 0 10px
      padding: 0 10px
      // @include tablet
      //   float: right
      //   margin: 0 5px
      // @include desktop
      margin: 0 0
      margin-left: 5%
      i
        margin-right: 5px
        position: relative
        top: 6px
        left: 0
      span
        color: darken(white, 30%)
      strong
        color: white
      &:hover
        background-color: $iron
        color: $monza
        a
          color: $monza
          border-bottom: 1px dotted rgba($monza, 0.25)
        strong
          color: $monza
      &:hover .al-cartContent
        display: block
    .al-cartContent
      position: absolute
      right: 0
      top: $headerheight
      color: black
      background-color: $iron
      box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
      width: auto
      z-index: 10
      display: none
      .al-cartPurchase
        padding: 5px 10px
        min-width: 400px
        line-height: 1.4
        font-size: 16px
        img
          float: left
          margin-right: 15px
        table.al-table--scroll
          width: 100%
          overflow-y: visible
          overflow-x: hidden
          max-height: 300px
          display: block
          td
            padding: 5px 2px
            vertical-align: top
          td:first-child
            width: 75%
          td:last-child
            text-align: right
            font-size: 18px
        table.al-table--sum
          width: 100%
          td
            padding: 5px 2px
            vertical-align: top
            text-align: right
          td:first-child
            width: 75%
          tr
            border-top: 1px solid $mystic
            font-size: 24px
        a
          color: black
          border-bottom: 1px solid rgba(black, 0.25)
          &:hover
            color: $monza
      .al-cartGo
        text-align: right
        width: 100%
        padding: 5px 0
        background-color: $mystic
        a
          color: black
          font-size: 20px
          padding: 5px 10px
          margin-right: 10px
          background-color: $gold
          border-radius: 4px
          border-bottom: none
          text-decoration: none
          &:hover
            color: black
            border-bottom: none
            text-decoration: none

    .al-userArea
      float: right
      cursor: pointer
      padding: 0 5px
      i
        position: relative
        top: 6px
        left: 0
        margin: 0 5px
      a
        margin-right: 5px
      // @include smart
      //   &:hover
      //     background-color: $iron
      //     color: $monza
      //     a
      //       color: $monza
      //       border-bottom: 1px dotted rgba($monza, 0.25)
      // @include tablet
      //   &:hover
      //     background-color: $iron
      //     color: $monza
      //     a
      //       color: $monza
      //       border-bottom: 1px dotted rgba($monza, 0.25)
      // @include desktop all til .al-userDropMenu
      position: relative
      &:hover
        background-color: $iron
        color: $monza
        a
          color: $monza
          border-bottom: 1px dotted rgba($monza, 0.25)
      &:hover .al-userDropMenu
        display: block
      .al-userDropMenu
        position: absolute
        right: 0
        min-height: 50px
        // @include smart
        //   min-width: 320px
        //   max-width: 400px
        top: $headerheight
        color: black
        background-color: $iron
        box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
        width: auto
        z-index: 110
        display: none
        form
          min-width: 300px
          padding-top: 10px
          padding-left: 20px
          padding-right: 10px
          table
            width: 100%
            input[type='text'], input[type='password']
              width: 100%
              height: 35px
            input[type='submit']
              min-width: 50%
              height: 35px
              background-color: $wildblueyonder
              color: white
              font-weight: bold
              position: absolute
              right: 0
              top: 8px
            a
              color: black
              border-bottom: 1px solid darken(white, 25%)
              font-size: 14px
              line-height: 1
              top: 16px
              &:hover
                color: $monza
            td
              position: relative
            td:last-child
              height: $headerheight
        .al-user__logout
          text-align: right
          input[type='submit']
            margin-bottom: 15px
            min-width: 35%
            height: 35px
            background-color: $wildblueyonder
            color: white
            font-weight: bold
        .al-userRegister
          padding: 10px 0
          margin-top: 10px
          background-color: $mystic
          text-align: center
          line-height: 1.5
          font-size: 14px
          span
            display: block
          a
            color: $monza
            font-size: 16px
            border-bottom: 1px solid rgba($monza, 0.25)
            &:hover
              color: black

.al-headerMenu
  width: 100%
  height: $headerheight
  background-color: transparentize(black, 0.75)
  font-size: 20px

  .al-menuContainer
    @extend .al-container
    line-height: $headerheight
    ul
      width: 100%
      display: table
    li
      text-align: center
      display: table-cell
    li:first-child
      text-align: left
    li:last-child
      text-align: right
    a
      @extend .al-link--solid

.al-search
  width: 100%
  .al-searchContainer
    position: relative
    @extend .al-container
    // @include smart
    //   line-height: $headerheight
    //   height: $headerheight
    //   position: relative
    // @include tablet
    //   padding: 10px 0
    // @include desktop
    padding: 10px 0
    h1
      color: white
      margin: 10px 0
      margin-left: 10px
      font-size: 42px
      position: relative
      z-index: 2
    .al-might
      color: white
      margin: 10px 0
      margin-left: 10px
      font-size: 60px
      position: relative
      z-index: 2
    img.al-background
      position: absolute
      top: 20px
      right: -40px
      z-index: 1
.al-searchAdvertisement
  text-align: center
  text-transform: uppercase
  padding: 25px 0
  color: white
  h4
    font-size: 20px
    letter-spacing: 5px
    line-height: 1.5
.al-searchContainer__Window
  color: white
  font-size: 18px
  margin-right: 4%
  padding: 0 1%
  float: right
  cursor: pointer
  i
    position: relative
    top: 3px
    left: 0
    margin-right: 4px
  &:first-child
    margin-right: 0
  &:hover
    background-color: white
    color: $monza
    a
      color: $monza
      border-bottom: 1px dotted rgba($monza, 0.25)
.al-searchContainer__Window--search
  @extend .al-searchContainer__Window
.al-searchContainer__Window--cart
  @extend .al-searchContainer__Window
.al-searchContainer__Window--menu
  @extend .al-searchContainer__Window

.al-searchPart
  max-width: 800px
  padding-top: 10px
  padding-bottom: 5px
  margin-left: 10px
  font-size: 16px
  color: white
  li
    display: inline
    list-style-type: none
    margin-right: 5px
    &:first-child
      margin-right: 50px
  a
    margin: 0 10px
    color: white
    &:hover
      color: $gold
      text-shadow: 0px 0px 10px $gold, 0px 0px 20px $gold, 0px 0px 30px $gold
  .al-active
    text-shadow: 0px 0px 10px $gold, 0px 0px 20px $gold, 0px 0px 30px $gold
.al-searchInput
  max-width: 800px
  margin: 10px 0
  table
    width: 100%
    td:first-child
      width: 80%
    td:last-child
      min-width: 200px
      padding-left: 20px
  input
    width: 100%
    height: $headerheight
  input[type="search"]
    -webkit-appearance: none
    box-sizing: border-box
    font-size: 20px
    padding-left: 9px
  input[type="search"]:focus, input[type="password"]:focus, textarea:focus
    box-shadow: 0 0 10px $gold
    border: 3px solid $gold
    border-radius: 5px
    padding-left: 7px
  input[type="submit"]
    background-color: $gold
    font-size: 20px
    padding: 0 10px
    box-sizing: border-box
  .al-searchInput__example
    color: $mystic
    font-size: 14px
    margin: 10px 0
    margin-left: 10px
    a
      margin-left: 10px
      color: $iron
      border-bottom: 1px dashed
      display: inline-block
      &:hover
        border-bottom: 1px dashed transparent!important

.al-searchFooter
  width: 100%
  font-size: 14px
  line-height: 20px
  font-size: 13px
  i
    margin: 0 5px
  @include clearfix
  .al-searchHelp
    float: left
    width: 30%
    color: darken(white, 30%)
    font-style: italic
    a
      color: inherit
      &:hover
        color: $gold
    span
      display: block
    i
      display: inline-block
      position: relative
      top: 4px
      left: 0

.al-window
  display: none
  background-color: white
  color: black
  position: absolute
  right: 0px
  top: 0
  z-index: 100
  box-shadow: 0px 5px 10px -2px rgba($wildblueyonder, 0.75)
  min-width: 300px
  width: 100%
  max-width: 400px
  padding: 2%
  h4
    font-size: 16px
    font-weight: bold
    padding: 5px 0
.al-window__searchMenu
  @extend .al-window
  .al-searchMenu--Input
    width: 100%
    padding: 10px 0
    table
      width: 100%
      td:first-child
        width: 70%
      td:last-child
        padding-left: 10px
    input
      width: 100%
      height: 100%
      height: 30px
      font-size: 16px
    input[type="search"]
      padding-right: 0!important
    input[type="search"]:focus, input[type="password"]:focus, textarea:focus
      box-shadow: 0 0 10px $gold
      border: 3px solid $gold
      border-radius: 5px
    input[type="submit"]
      background-color: $gold
      box-sizing: border-box
  .al-searchMenu--select
    margin-bottom: 10px
    padding-bottom: 20px
    .selectize-input
      border: 1px solid black
      width: 95%

.al-tab
  display: none
  overflow: auto
.al-tab--active
  display: inherit
.al-searchMenu__TabList
  font-size: 16px
  ul
    display: inline-block
    list-style-type: none
    margin: 0
    padding: 0
    border: 1px solid $wildblueyonder
    border-radius: 2px
    background-color: white
    li
      display: inline-block
      cursor: pointer
      padding: 5px 8px

  .al-list--active
    background-color: $mystic
    border: 1px solid $wildblueyonder
    margin: -1px



.al-window__menuMenu
  @extend .al-window
  min-width: 250px
  max-width: 260px
  span
    margin-right: 10px
  a
    display: block
    border-bottom: 1px solid $mystic
    line-height: 1
    font-size: 18px
    color: black
    text-decoration: none
    position: relative
    padding: 8px
    padding-left: 10px
    &:first-child
      padding-top: 10px
    &:last-child
      border: none
      padding-bottom: 10px
    &:hover
      text-decoration: none
      border-bottom: 1px solid $mystic!important
      background-color: rgba($mystic, 0.5)
    &.al-active
      font-weight: bold
      color: inherit!important
      text-decoration: none
      border-bottom: 1px solid $mystic!important
      background-color: rgba($mystic, 0.5)
    i
      position: absolute
      right: 8px
      top: 40%
.al-window__cartMenu
  @extend .al-window
  .al-table__cartMenu--header
    margin-top: 2%
    margin-bottom: 4%
    table
      width: 100%
      td
        padding: 5px 10px
        &:first-child
          font-weight: bold
          width: 55%
      input
        font-size: 16px
      input[type="submit"]
        background-color: $gold
        box-sizing: border-box
        padding: 10px
  .al-table__cartMenu--bottom
    padding: 20px 0
    table
      width: 100%
      td
        padding: 5px 10px
        &:first-child
          font-weight: bold
          width: 55%
      input
        font-size: 16px
      input[type="submit"]
        background-color: $gold
        box-sizing: border-box
        padding: 10px
  .al-table__cartMenu--item
    table
      width: 100%
      td
        height: 80px
        padding: 1%
        border-top: 1px solid $mystic
        border-bottom: 1px solid $mystic
      td:last-child
        vertical-align: top
        position: relative
      img
        max-width: 80px
        max-height: 160px
  .al-cartMenu__item
    position: relative
    h5
      margin-right: 30px
      font-weight: bold
    table
      margin-top: 20px
    a
      position: absolute
      top: 0
      right: 0
  .al-table__cartMenu--info
    table
      margin-top: 20px
      td
        border: none
        height: 30px
        &:first-child
          width: 55px
        &:last-child
          font-weight: bold
          vertical-align: middle
          text-align: right
          width: 65px

.al-searchBreadcrumbs
  font-size: 14px
  background-color: $mystic
  padding: 5px 10px
  display: inline-block
  border-bottom-left-radius: 4px
  .al-bread__divider
    display: inline-block
    color: black
    margin: 0 5px
  ul
    display: inline-block
    margin: 5px 2px
  ul li
    position: relative
    white-space: nowrap
    a
      color: black
      text-decoration: none
      border-bottom: 1px dotted rgba(black,0.3)
      &:hover
        color: $monza
  ul li:hover .al-breadcrumbsUnit
    display: block

.al-breadcrumbsUnit
  display: none
  position: absolute
  z-index: 100
  background-color: white
  padding: 10px 0
  box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
  max-height: 300px
  max-width: 400px
  overflow-y: auto
  overflow-x: hidden
  em
    background-color: $gold
  form
    min-width: 100%
    padding: 10px
  input
    width: 100%
    padding-left: 6px
  & ul li
    text-align: left
    padding: 0 10px 0 18px
    line-height: 1.7
    display: block
    min-width: 200px
    a
      color: black
      @extend .al-link--dotted
      &:hover
        color: $monza
    // img
    //   display: block
    //   position: absolute
    //   top: 0
    //   left: -30px
    //   background-color: white
    //   z-index: 10
    //   padding: 5px
    //   border-radius: 5px
    //   border: 1px solid $mystic
  .al-breadcrumbs--none
    display: none
    min-width: 200px

.al-body
  width: 100%
  min-height: 200px
  position: relative
  background-color: white
  // @include smart
  //   padding-bottom: 360px
  // @include tablet
  //   padding-bottom: 230px
  // @include desktop
  padding-bottom: 240px
  
  .al-bodyContainer
    @extend .al-container

// FOOTER
.al-footer
  width: 100%
  position: absolute
  left: 0
  bottom: 0
  background-color: lighten(black, 15%)
  color: white

.al-footerContainer
  @extend .al-container
  padding-top: 25px
  overflow: hidden
  // @include smart
  //   padding-left: 10px

.al-footerInfo
  float: left
  line-height: 22px
  margin: 0 5%
  padding-bottom: 20px
  // @include smart
  //   width: 100%
  // @include tablet
  //   max-width: 28%
  span
    display: block
    font-weight: 700
    font-size: 16px
    letter-spacing: 0.5px
    padding-bottom: 2px
  a
    @extend .al-link--solid
    color: white
    &:hover
      color: white
      border-bottom: 1px solid white!important
  i
    margin-left: -20px
    margin-right: 4px
    position: relative
    top: 1px
  i.icon-new_window
    margin-left: 4px
    margin-right: 0
  &:nth-child(1)
    // @include desktop
    margin-left: 10px
  &:nth-child(2)
    // @include desktop
    margin: 0 16%
  // &:last-child
  //   @include smart
  //     span
  //       margin-left: -18px
  //       font-weight: normal