/*-----------------
* palette
* ----------------
*
*/

/******** Header *********/

header#header {
  position: absolute;
  top: 120px;
  width: 100%;
  z-index: 99;
  background: #fff;

  .logo-wrap {
    position: relative;
  }

  .menu {
    list-style: none;
    padding: 15px 0;
    margin: 0;
    display: flex;
    justify-content: space-between;

    a {
      color: #060125;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 20px;
    }

    li:hover>a,
    li.current-menu-item>a {
      color: #DE067C;
    }
  }

  img.company-logo {
    width: 130px;
    margin: auto;
    text-align: center;
    display: block;
  }

  a.company-logo-link {
    position: absolute;
    top: 60%;
    transform: translateY(-30%);
    left: 0;
    right: 0;
  }
}

section.header-top--wrap {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
  padding: 10px;
  border-bottom: 1px solid #fff;

  ul.contact-details {
    list-style: none;
    padding: 0;
    text-align: left;
    display: flex;
    justify-content: flex-end;
    margin: 0;

    strong {
      color: #DE067C;
    }

    li:nth-child(2) {
      margin: 0 0 0 15px;
    }

    a {
      color: #fff;
    }

    a:hover {
      color: #DE067C;
    }
  }

  .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;

    li {
      margin-right: 10px;
    }

    a {
      color: #fff;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 16px;
    }

    li:hover>a,
    li.current-menu-item>a {
      color: #DE067C;
    }
  }
}

/******** Responsive ***********/

/* XXL > 1400 */

/* XL */
@media (max-width: 1400px) {}

/* L */
@media (max-width: 1200px) {
  section.header-top--wrap {
    & .menu {
      a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 15px;
      }
    }
  }
}

/* M */
@media (max-width: 992px) {
  section.header-top--wrap {
    & .menu {
      a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 14px;
      }
    }
  }

  header#header {
    img.company-logo {
      width: 105px;
      margin: auto;
      text-align: center;
      display: block;
    }
  }

  .contact-details {
    li {
      font-size: 14px;
      display: flex;
    }
  }

  header#header {
    & .menu {
      a {
        color: #060125;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 15px;
      }
    }
  }

  header#header {
    position: absolute;
    top: 90px;
    width: 100%;
    z-index: 99;
    background: #fff;
  }
}

/* S */
@media (max-width: 768px) {
  section.header-top--wrap {
    text-align: center;
  }

  header#header {
    a.company-logo-link {
      position: absolute;
      top: 20%;
      transform: translateY(-30%);
      left: 0;
      right: 0;
    }
  }

  section.header-top--wrap {
    ul.contact-details {
      list-style: none;
      padding: 0;
      text-align: left;
      display: flex;
      justify-content: center;
      margin: 0;
    }
  }

  .contact-details {
    li {
      font-size: 16px;
      display: flex;
    }
  }

  section.header-top--wrap {
    & ul.contact-details {
      strong {
        margin-right: 7.5px;
      }
    }
  }
}

/* XS */
@media (max-width: 576px) {
  .contact-details {
    li {
      font-size: 15px;
      display: flex;
    }
  }

  span.btn.btn-slider {
    margin: 7.5px auto;
  }

  #swiper-page {
    .btn-two-slider {
      margin-left: 0px !important;
    }
  }
}

@media (max-height: 600px) {
  span.btn.btn-slider {
    padding: 10px 25px;
  }
}


@media (max-height: 550px) {
  .swiper-content {
    display: none;
  }
}

@media (max-height: 500px) {
  header#header {
    position: absolute;
    top: 90px;
    width: 100%;
    z-index: 99;
    background: #fff;
  }



  #swiper-page {
    h1#slider-text {
      font-size: 33px;
    }

    .swiper-content {
      padding: 0px 0;
    }
  }
}

@media (max-height: 375px) {
  header#header {
    position: absolute;
    top: 45px;
    width: 100%;
    z-index: 99;
    background: #fff;

    a.company-logo-link {
      position: absolute;
      top: 45%;
      transform: translateY(-30%);
      left: 0;
      right: 0;
    }
  }

  header#header {
    .logo-wrap {
      position: relative;
      top: 20px;
    }
  }

  #swiper-page {
    .swiper-slide-inner {
      width: auto;
      margin: auto;
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      z-index: 999;
    }
  }
}