// Media queries breakpoints
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1664px;

ul.categories {

  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;

  @media (min-width: (@screen-md)) {
    margin-bottom: 30px;
  }

  @media (min-width: (@screen-lg)) {
    margin-bottom: 60px;
  }

  li.category {

    font-family: Raleway, sans-serif;
    font-size: 111.11%;
    color: rgb(91,92,91);
    margin-bottom: 5px;
    padding-left: 0;
    &:before {
      display: none;
    }

    @media (min-width: (@screen-md)) {
      display: inline-block;
      margin-right: 30px;
    }

    @media (min-width: (@screen-lg)) {
      margin-right: 80px;
    }

      span {

      cursor: pointer;

        @media (min-width: (@screen-md)) {
          padding-bottom : 2px;
        }

        @media (min-width: (@screen-lg)) {
          padding-bottom : 4px;
        }

        &.active {

        color: rgb(75,150,58);
        border-bottom: 2px solid rgb(75,150,58); @media (min-width: (@screen-md)) { border-bottom-width: 5px; } @media (min-width: (@screen-lg)) { border-bottom-width: 9px; }

      }

    }

  }

}

.controls {

  max-width: 430px;

  .results {

    background-color: rgb(75,150,58);
    color: white;
    font-family: Raleway, sans-serif;
    font-size: 146.16%;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1px;
    white-space: nowrap;
    line-height: 50px; @media (min-width: (@screen-md)) { line-height: 113px } @media (min-width: (@screen-lg)) { line-height: 150px }

    img {
      height: 28px; @media (min-width: (@screen-lg)) { height: 42px }
      width: 28px; @media (min-width: (@screen-lg)) { width: 42px }
    }

  }

  .reset {

    font-family: Raleway, sans-serif;
    font-weight:600;
    font-size: 83.33%;
    white-space: nowrap;
    color: white;
    text-align: center;
    background-color: rgb(124,124,124);
    margin-bottom: 1px;
    cursor: pointer;
    line-height: 30px; @media (min-width: (@screen-md)) { line-height: 67px } @media (min-width: (@screen-lg)) { line-height: 89px }

  }

  .config-box {

    font-family: Raleway, sans-serif;
    font-size: 85.27%;
    color: rgb(91,92,91);
    padding: 15px; @media (min-width: (@screen-md)) { padding: 29px } @media (min-width: (@screen-lg)) { padding: 38px }
    background-color: rgb(218,218,218);
    margin-bottom: 1px;

    &:last-child {

      margin-bottom: 30px;

    }

    .header {

      position: relative;
      font-weight: 600;
      cursor: pointer;

      &:after {

        content: '+';
        font-size: 146.16%;
        font-weight: 400;
        position: absolute;
        right:0;
        top: -4px;

      }

      &.active:after {

        content: '-';
        top: -6px;

      }

    }

    .body {

      ul {

        margin:0;
        padding:0;
        list-style: none;

        li {

          cursor: pointer;
          padding-left: 33px; @media (min-width: (@screen-lg)) { padding-left: 40px }
          margin-top: 15px; @media (min-width: (@screen-lg)) { margin-top: 30px }
          line-height: 1.2;
          position: relative;

          .checkbox {

            display: block;
            position: absolute;
            top:-2px;
            left:0;
            margin:0;
            width: 22px; @media (min-width: (@screen-lg)) { width: 29px }
            height: 22px; @media (min-width: (@screen-lg)) { height: 29px }
            background: url(../img/configurator-checkbox.png);
            background-position: 22px; @media (min-width: (@screen-lg)) { background-position: 29px; }
            background-size: cover;

            &.checked {

              background-position: 0;

            }

          }

        }

      }

    }


  }

}

.products {

  padding:0;
  max-width: 430px; @media (min-width: (@screen-md)) { max-width: @screen-lg; }

  .product {

    margin-bottom: 30px;

    a {

      display: block;
      color: black;
      text-decoration: none;

      .image {

        border: 2px solid rgb(218,218,218); @media (min-width: (@screen-md)) { border-width: 4px }  @media (min-width: (@screen-lg)) { border-width: 6px }
        padding-bottom: 73.47%;
        max-width: 400px;
        cursor: pointer;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;

      }

      .title {

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: Raleway, sans-serif;
        font-weight: 600;
        font-size: 121.77%;
        margin: 15px 0 3px 0; @media (min-width: (@screen-lg)) { margin: 20px 0 5px 0 }

      }

      .description {
        font-family: Raleway, sans-serif;
        font-size: 85.27%;
        overflow: hidden;
        @media (min-width: (@screen-md)) { height: 98px; } @media (min-width: (@screen-lg)) { height: 130px; }
      }

    }

  }

}

.single-product {

  h1, h2, h3, h4, h5, h6 {
    color: rgb(91,92,91);
  }

  .background {
    @media (min-width: (@screen-md)) {
      position: relative;
      height: 1px;
      div {
        background-image: url(../img/configurator-background.jpg);
        background-size: cover;
        width: 100%;
        padding-bottom: 56.04%;
        position: absolute;
        top: 0;
        z-index: -1;
      }
    }
  }

  .container {

    margin-top:15px;
    margin-bottom:15px;

    &:nth-child(2){
      //@media (min-width: (@screen-md)) { margin-bottom: 30px; margin-top:30px }
      //@media (min-width: (@screen-lg)) { margin-bottom: 45px; margin-top:45px }
      @media (min-width: (@screen-md)) { margin-bottom: 0; margin-top:30px }
      @media (min-width: (@screen-lg)) { margin-bottom: 0; margin-top:45px }
    }

    &:last-child {

      @media (min-width: (@screen-md)) {

        min-height: 55vw;
        margin-top:0;
        margin-bottom:0;

      }

      &>.row {

        //@media (min-width: (@screen-md)) { margin-top: 65px; }
        //@media (min-width: (@screen-lg)) { margin-top: 90px; }

        &>div:first-child {

          background-color: rgba(255,255,255,.75);
          @media (min-width: (@screen-md)) { padding: 28px }
          @media (min-width: (@screen-lg)) { padding: 38px }

          li:before {
            @media (min-width: (@screen-md)) { left: 26px; }
            @media (min-width: (@screen-lg)) { left: 36px; }
          }

        }

      }


    }

    .categories {

      margin-bottom: 0;
      @media (min-width: (@screen-md)) { margin-bottom: 15px }

    }

    .downloads {

      margin-top:15px;

      h2 {

        font-family: Raleway, sans-serif;
        font-weight: 800;
        font-size: 155.55%;
        @media (min-width: (@screen-md)) { color: white }
        @media (min-width: (@screen-md)) { margin-bottom: 30px }
        @media (min-width: (@screen-lg)) { margin-bottom: 50px }
        @media (min-width: (@screen-md)) { margin-top: 40px }
        @media (min-width: (@screen-lg)) { margin-top: 60px }

      }

      a {

        text-decoration: none;
        color: black;

        @media (min-width: (@screen-md)) {

          color: white;
          font-weight: 600;

          padding-left: 30px;
          position: relative;

          &:before{
            content: '';
            display: block;
            position: absolute;
            top:0;
            left:0;
            width: 22px;
            height: 22px;
            background-image: url(../img/arrow-down.png);
            background-size: cover;
          }

        }

        @media (min-width: (@screen-lg)) {

          padding-left: 45px;

          &:before{
            width: 30px;
            height: 30px;
          }

        }

      }

      li {

        @media (min-width: (@screen-md)) {

          margin-bottom: 5px;
          padding:0;

          &:before{
            display: none;
          }

        }

        @media (min-width: (@screen-lg)) {

          margin-bottom: 10px;

        }

      }

    }

  }

  ul {
    padding: 0;
    li {
      padding-left: 20px;
      list-style: none;
      &:before {
        content: '–';
        position: absolute;
        left: 13px;
      }
    }
  }

  .wonderpluginslider-container {
    margin-bottom: 0!important;
  }

}