Current File : /customers/3/5/c/campinoeksjo.se/httpd.www/wp-content/themes/MHreklam/sass/_home-page.scss

/*---------------------
  Categories
-----------------------*/
.categories__slider {
  padding: 0 15px;
  
  &.owl-carousel {

    .owl-stage-outer {
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(240, 135, 50, 0.5);
  }

    .owl-nav {

      button {
        font-size: 36px;
        color: #888888;
        position: absolute;
        left: -60px;
        top: 35%;

        &.owl-next {
          left: auto;
          right: -60px;
        }
      }
    }
  }
}

.categories__item {
  text-align: center;
  border-radius: 50%;
  @include transition(all, .3s);
  height: 194px;
  width: 194px;
  padding-top: 25px;
  position: relative;

  &:after {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -48px;
    width: 15px;
    height: 15px;
    border: 1px solid $primary-color;
    border-color: transparent $primary-color $primary-color transparent;
    content: "";
    transform: rotate(-135deg);
    opacity: 0;
    @include transition(all, .3s);
  }

  &:hover {
    background: $primary-color;

    &:after {
      opacity: 1;
    }

    span {
      color: $white-color;
    }

    h5 {
      color: $white-color;
    }
  }
}

.categories__item__icon {

  span {
    color: $primary-color;
    @include transition(all, .2s);
  }

  h5 {
    color: $heading-color;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
    @include transition(all, .2s);
  }
}

/*---------------------
  Class
-----------------------*/
.class {
  background: rgba(240, 135, 50, 0.1);
  position: relative;
  padding-bottom: 0;
}

.class__form {
  height: 620px;

  form {

    input {
      height: 50px;
      width: 100%;
      padding-left: 20px;
      font-size: 15px;
      color: #444444;
      background: $white-color;
      border: none;
      margin-bottom: 20px;

      &::placeholder {
        color: #444444;
      }
    }

    .nice-select {
      float: none;
      border-radius: 0;
      border: none;
      padding-left: 20px;
      margin-bottom: 20px;
      height: 50px;
      line-height: 50px;

      span {
        font-size: 15px;
        color: #444444;
      }

      .list {
        margin-top: 0;
        border-radius: 0;
        width: 100%;
      }

      &:after {
        border-bottom: 1.5px solid #111;
        border-right: 1.5px solid #111;
        height: 9px;
        right: 25px;
        width: 9px;
      }
    }

    button {
      letter-spacing: 2px;
      width: 100%;
    }
  }
}

.class__video {
  height: 720px;
  width: 47%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: -50px;

  .play-btn {
    display: inline-block;
    width: 70px;
    height: 70px;
    background: $primary-color;
    font-size: 24px;
    color: $white-color;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
  }
}

/*---------------------
  Team
-----------------------*/
.team {
  padding-bottom: 70px;
}

.team__btn {
  text-align: right;

  .primary-btn {
    border: 2px solid #b7b7b7;
    background: transparent;
    color: $heading-color;
  }
}

.team__item {
  height: 360px;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;

  &:hover {

    .team__item__text {
      opacity: 1;
      bottom: 0;
      visibility: visible;
    }
  }
}

.team__item__text {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 30px 0;
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  @include transition(all, .5s);

  h6 {
    color: $heading-color;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  span {
    color: $heading-color;
    font-size: 14px;
    display: block;
    margin-bottom: 12px;
  }
}

.team__item__social {

  a {
    display: inline-block;
    color: $heading-color;
    font-size: 16px;
    margin-right: 14px;
  }
}

/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  background: #fdf3ea;
  padding-top: 90px;
  padding-bottom: 70px;
}

.testimonial__slider {

  .col-lg-6 {
    max-width: 100%;
  }

  &.owl-carousel {

    .owl-dots {
      text-align: center;
      padding-top: 35px;

      button {
        height: 10px;
        width: 10px;
        background: rgba(17, 17, 17, 0.1);
        border-radius: 50%;
        margin-right: 10px;

        &.active {
          background: rgba(17, 17, 17, 0.5);
        }
        
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}

.testimonial__item {
  background: $white-color;
  padding: 40px 45px 35px 50px;
  position: relative;

  .rating {
    position: absolute;
    right: 50px;
    top: 60px;

    span {
      font-size: 14px;
      color: #f0c656;
      margin-right: -5px;
      display: inline-block;
    }
  }

  p {
    color: $heading-color;
    font-style: italic;
    margin-bottom: 0;
  }
}

.testimonial__author {
  overflow: hidden;
  margin-bottom: 24px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 26px;

  img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
  }
}

.testimonial__author__text {
  overflow: hidden;
  padding-top: 12px;

  h5 {
    color: $heading-color;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  span {
    color: #444444;
    font-size: 14px;
  }
}

/*---------------------
  Instagram
-----------------------*/
.instagram__text {
  padding-top: 90px;

  .section-title {
    margin-bottom: 55px;
  }

  h5 {
    font-size: 20px;
    color: #444444;
    position: relative;
    z-index: 1;

    &:after {
      position: absolute;
      left: 0;
      top: -34px;
      background: url(../img/instagram/cake-piece.png) no-repeat;
      height: 139px;
      width: 114px;
      content: "";
    }

    i {
      color: #111111;
      font-size: 36px;
      position: relative;
      top: 6px;
      margin-right: 8px;
    }
  }
}

.instagram__pic {
  margin-bottom: 30px;

  &.middle__pic {
    padding-top: 30px;
    margin-bottom: 0;
  }

  img {
    min-width: 100%;
  }
}

/*---------------------
  Map
-----------------------*/
.map {
  position: relative;
  height: 300px;

  .container {
    position: relative;
    z-index: 5;
    top: 20px;
  }
}

.map__iframe {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;

  iframe {
    width: 100%;
  }
}

.map__inner {
  text-align: center;
  background: $white-color;
  box-shadow: 0 0 10px rgba(223, 223, 224, 0.7);
  padding: 30px 25px 25px;
  position: relative;

  &:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 20px;
    width: 20px;
    background: $white-color;
    content: "";
    transform: rotate(45deg);
    margin: 0 auto;
  }

  h6 {
    color: $heading-color;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  
  ul {
    
    li {
      list-style: none;
      font-size: 14px;
      color: #444444;
      margin-bottom: 10px;
    }
  }
}