@import "vars";

/* *******************************************
 ************** Section ************** *
 ******************************************* */

.section {
  min-height: 100px;
  padding: 30px 0;
}

/* *******************************************
 ************** Section 2 ************** *
 ******************************************* */

.section-2 {
  padding: 30px 0;

  h1,
  h2,
  h3 {
    font-size: @title-lg;
    color: @textDark;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: @title-lg-ls;
  }

  h4,
  h5,
  h6 {
    font-size: @paragraph-lg;
    color: @textDark;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    color: @textDark;
    margin-bottom: 10px;
  }
}

/* *******************************************
 ************** Section 3 ************** *
 ******************************************* */

.section-3 {
  padding: 30px 0;

  .container {
    max-width: 700px;
    text-align: center;
  }

  h1,
  h2,
  h3 {
    font-size: @title-lg;
    color: @textDark;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: @title-lg-ls;

    @media screen and (max-width: 1199px) {
      font-size: @title-lg;
    }

    @media screen and (max-width: 767px) {
      font-size: @title-md;
    }
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textDark;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    color: @textDark;
    margin-bottom: 10px;
  }
}

/* *******************************************
 ************** Section 4 ************** *
 ******************************************* */

.section-4 {
  min-height: 100px;
  padding: 30px 0;

  .container {
    padding: 0 10%;
    text-align: center;
  }

  h1,
  h2,
  h3 {
    font-size: @title-lg;
    color: @textLight;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: @title-lg-ls;

    @media screen and (max-width: 1199px) {
      font-size: @title-lg;
    }

    @media screen and (max-width: 767px) {
      font-size: @title-md;
    }
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textLight;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    color: @textLight;
    margin-bottom: 10px;
    font-weight: 300;
  }

  @media screen and (max-width: 991px) {
    .slider-wrapper {
      max-width: 100%;
    }

  }
}

/* *******************************************
 ************** Section 5 ************** *
 ******************************************* */

.section-5 {
  min-height: 100px;
  padding: 30px 0;
  background: @silver;

  .features {
    max-width: 1200px;
    margin: 0 auto;
  }

  .feature {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;

    .image {
      width: 100px;
      height: 100px;
      background-color: @light;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 100px;
      margin: 20px auto;
      display: flex;
      -ms-flex-line-pack: center;
      align-content: center;
      align-items: center;

      .holder {
        -ms-flex-line-pack: center;
        align-content: center;

        img {
          max-width: 130%;
          margin-left: -15%;
        }
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: @title-xs;
      font-weight: 600;
      color: @textDark;
      text-align: center;
      margin-bottom: 10px;
    }

    p {
      font-size: @paragraph-sm;
      text-align: center;
      color: @grey;
      letter-spacing: @title-xs-ls;
    }
  }
}

/* *******************************************
 ************** Section 6 ************** *
 ******************************************* */

.section-6 {
  min-height: 100vh;

  .container {
    text-align: center;
  }

  h1,
  h2,
  h3 {
    font-size: @title-xl;
    color: @textLight;
    letter-spacing: @title-xl-ls;
    font-weight: 600;
    margin-bottom: 30px;

    @media screen and (max-width: 1199px) {
      font-size: @title-lg;
    }

    @media screen and (max-width: 767px) {
      font-size: @title-md;
    }
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textLight;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    font-size: @paragraph-lg;
    color: @textLight;
    margin-bottom: 10px;
    font-weight: 400;
  }

}

.section-6.h-third {
  min-height: 33vh;
}

.section-6.h-half {
  min-height: 50vh;
}

.section-6.inverse {
  h1,
  h2,
  h3 {
    color: @textDark;
  }

  h4,
  h5,
  h6 {
    color: @textDark;
  }

  p {
    color: @textDark;
  }
}

/* *******************************************
 ************** Section 7 ************** *
 ******************************************* */

.section-7 {
  padding: 30px 0;
  background: @silver;

  h1,
  h2,
  h3 {
    font-size: @title-lg;
    color: @textDark;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: @title-lg-ls;

    @media screen and (max-width: 1199px) {
      font-size: @title-lg;
    }

    @media screen and (max-width: 767px) {
      font-size: @title-md;
    }
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textDark;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    color: @textDark;
    margin-bottom: 10px;
  }
}

/* *******************************************
 ************** Section 8 ************** *
 ******************************************* */

.section-8 {
  padding: 30px 0;

  .container {
    max-width: 1280px;
  }

  h1,
  h2,
  h3 {
    font-size: @title-lg;
    color: @textDark;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: @title-lg-ls;

    @media screen and (max-width: 1199px) {
      font-size: @title-lg;
    }

    @media screen and (max-width: 767px) {
      font-size: @title-md;
    }
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textDark;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    color: @textDark;
    margin-bottom: 10px;
  }

  .menu {
    .item {
      margin-bottom: 20px;

      .title {
        color: @textDark;
        font-size: @paragraph-sm;
        text-transform: uppercase;
        letter-spacing: @title-xs-ls;
        font-weight: bold;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 1.8;
        text-align: left;
        float: left;
        width: calc(~"100% - 100px");

        span {
          position: relative;
          display: inline;
          top: 1px;
          border-bottom: 1px solid #fff;
          padding-right: 8px;
        }

        &:before {
          position: absolute;
          right: 0;
          -webkit-transform: translateY(-100%);
          -moz-transform: translateY(-100%);
          transform: translateY(-100%);
          content: '';
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #ccc;
        }
      }

      .price {
        float: left;
        width: 100px;
        text-transform: uppercase;
        font-size: @paragraph-lg;
        font-weight: 600;
        text-align: right;
      }

      p {
        font-size: @paragraph-sm;
        color: #666666;
        margin-top: 30px;
      }
    }
  }
}

/* *******************************************
 ************** Section 9 ************** *
 ******************************************* */

.section-9 {
  padding: 30px 0;

  h1,
  h2,
  h3 {
    font-size: @title-md;
    color: @textDark;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: @title-md-ls;
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textDark;
    font-weight: 500;
    margin-bottom: 10px;
  }

  p {
    font-size: @paragraph-sm;
    color: @grey;
    margin-bottom: 10px;
    letter-spacing: @title-xs-ls;
  }

  @media screen and (min-width: 992px) {
    .description {
      padding: 0 30px;
    }
  }

  .nav {
    border-right: 2px solid #dedede;
    //height: 100%;
    width: 100%;

    .nav-link {
      font-size: @title-xs;
      color: #bbbbbb;
      margin: 5px 0;
      letter-spacing: @title-xs-ls;
      text-transform: uppercase;
      font-weight: 500;
      @media screen and (max-width: 991px) {
        padding-left: 0;
      }
    }
  }

  .nav .nav-link.active {
    color: @dark;
    border-right: 4px solid @dark;
    margin-right: -3px;
  }

}

/* *******************************************
 ************** Section 10 ************** *
 ******************************************* */

.section-10 {
  padding: 30px 0;

  h1,
  h2,
  h3 {
    font-size: @title-md;
    color: @textDark;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: @title-md-ls;
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textDark;
    font-weight: 700;
    margin-bottom: 10px;
  }

  p {
    font-size: @paragraph-sm;
    font-weight: 600;
    color: @textDark;
    margin-bottom: 10px;
    letter-spacing: @title-xs-ls;
  }
}

/* *******************************************
 ************** Section 11 ************** *
 ******************************************* */

.section-11 {

  h1,
  h2,
  h3 {
    font-size: @title-md;
    color: @textDark;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: @title-md-ls;
  }

  h4,
  h5,
  h6 {
    font-size: @title-xs;
    color: @textDark;
    font-weight: 700;
    margin-bottom: 10px;
  }

  p {
    font-size: @paragraph-sm;
    color: @textDark;
    margin-bottom: 10px;
    letter-spacing: @title-xs-ls;
    font-weight: 600;
  }

  .left-side {
    //padding-top: 56.25%;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 400px;
  }

  .right-side {
    display: flex;
    align-items: center;
    align-content: center;
    vertical-align: middle;
    padding-top: 100px;
    @media screen and (max-width: 1199px) {
      padding-top: 50px;
    }
  }

  .module-google-maps > div {
    height: 100%;
    display: flex;
  }

  .module-google-maps iframe {
    height: 100%;
    min-height: 400px;
  }

  ul.socials li a {
    color: @light;
  }

  @media screen and (max-width: 991px) {
    .right-side {
      min-height: 400px;
    }
  }

}

.section-42 {
  max-width: 820px;
  margin: 0 auto;

  textarea {
    min-height: 130px;
  }

  .form-group {
    margin-bottom: 25px;
  }
}