.navProducts
  margin-top: 2rem
  @media (min-width: 768px)
    margin-top: 4rem
.navProducts .container
  flex-wrap: wrap
  gap: .5rem 1rem
  @media (min-width: 1280px)
    gap: .5rem 1.5rem
  @media (min-width: 1600px)
    width: 75%
    margin-top: 4rem
  a
    font-size: 15px
    color: #c4c4c4
    //text-transform: uppercase
    font-weight: $font-bold
    @media (min-width: 1024px)
      font-size: 18px
    @media (min-width: 1280px)
      cursor: pointer
      transition: color .3s
      &:hover
        color: $black
    @media (min-width: 1440px)
      font-size: 20px
    @media (min-width: 1600px)
      font-size: 22px
  a.selected
    color: $black
    padding-bottom: 1px
    border-bottom: 1px solid $black

section.product
  display: none
  @include spaceSection
  .container
    @media (min-width: 1280px)
      width: 70%
    @media (min-width: 1440px)
      width: 60%
  .specs
    width: 100%
    align-items: flex-start
    gap: 2rem
  .item
    width: 100%
  .item h2
    margin-bottom: .5rem
    //text-transform: uppercase
    font-size: 20px
    //padding-left: 1rem
    @media (min-width: 768px)
      text-align: left
    @media (min-width: 1280px)
      font-size: 22px
    @media (min-width: 1440px)
      font-size: 24px
    @media (min-width: 1600px)
      font-size: 26px
  .item table
    width: 100%
    border-collapse: collapse
    table-layout: auto
    tr
      &:nth-child(odd)
        background: #f9f9f9
      &:nth-child(even)
        background: $white
      td
        padding: .5rem 1rem
        // white-space: nowrap
        &:last-child
          text-align: right
  
section.prodDocs
  display: none
  @include spaceSection
  .container
    align-items: flex-start
    @media (min-width: 1600px)
      width: 75%
    .docs
      width: 100%
      flex-wrap: wrap
      gap: 2rem
      .block
        width: 100%
        align-items: flex-start
        border: 1px solid #c4c4c4
        border-radius: 10px
        padding: 1rem
        gap: 1rem 0
        box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1) , 0px 4px 6px -2px rgba(0,0,0,0.05) 
        @media (min-width: 768px)
          width: calc( 50% - 1rem )
          flex-direction: row
          justify-content: space-between
          align-items: center
          //gap: 0 2rem
          p
            width: 75%
        @media (min-width: 1024px)
          p
            width: 70%
        @media (min-width: 1280px)
          padding: 1.5rem
          transition: all .3s
          &:hover
            background: $black
            box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1) , 0px 10px 10px -5px rgba(0,0,0,0.04)  
            p
              color: $white
            .button span  
              color: $yellow
            .button svg circle 
              fill: $yellow
            .button svg path
              fill: $black     
        .button
          align-items: center
          gap: 0 .5rem
          span
            color: $black
    
section.prodGallery
  @include spaceSection
  .container
    @media (min-width: 1600px)
      width: 75%
    p
      margin-bottom: 1rem
      @media (min-width: 768px)
        width: 100%
  .container .slickProd
    // background: red
    width: 100%
    display: flex!important
    flex-direction: column
    .altSlickProd .slick-slide
      @media (max-width: 450px)
        margin: 5px 
    @media (min-width: 768px)
      flex-direction: row-reverse
      gap: 2%
      justify-content: flex-end
      align-items: flex-start
      .bigSlick
        width: 60%
      .altSlickProd
        width: 15%
    @media (min-width: 1024px)
      .altSlickProd
        width: 10%
      .bigSlick
        width: 60%
        margin-left: 20%

section.benefitsProd
  display: none
  @include spaceSection
  .container
    @media (min-width: 1600px)
      width: 75%
    .item
      width: 100%
      gap: 1rem
      &:not(:last-child)
        margin-bottom: 1.5rem
      img, .text
        width: 100%
      @media (min-width: 768px)
        flex-direction: row-reverse
        justify-content: space-between
        align-items: center
        gap: 10%
      @media (min-width: 1024px)
        &:not(:last-child)
          margin-bottom: 2rem
      @media (min-width: 1280px)
        justify-content: flex-end
        img
          width: 35%
        .text
          width: 55%
      @media (min-width: 1600px)
        .text
          width: 50%
        img
          width: 30%
      @media (min-width: 1900px)
        gap: 15%
        .text
          width: 50%
    .text h2
      margin-bottom: 1rem
      //text-transform: uppercase
      @media (min-width: 1280px)
        font-size: 22px
      @media (min-width: 1440px)
        font-size: 24px
      @media (min-width: 1600px)
        font-size: 26px
    .text ul
      padding-left: 1rem
    .text li
      margin-bottom: 1rem

    
section.v360
  display: none
  @include spaceSection
  .container
    @media (min-width: 1600px)
      width: 75%