@import 'init';

.subtitle {
  .fw-4;
  .fs-md;
  text-transform: uppercase;
  color: #3a3a3a;
}
.title {
  .fw-7;
  .fs-xl;
  text-transform: uppercase;
}
.btn {
  .fw-7;
  .fs-sm;
  text-transform: uppercase;
}

section {
  padding-top: 60px;
  padding-bottom: 60px;
}
@banner-bg: rgba(0,0,0,0.4);

@media only screen and (min-width: 1600px) {
    .container {
        max-width: 1400px;
    }
}

/* fixed-top */
/*@header-height: 110px;*/
body { 
/*    padding-top: @header-height; */
  font-family: 'Spartan', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #2f2f2f;
}
.error, .success {
    padding: 16px 0;
/*    max-width: 500px;*/
/*    margin: 0 auto;*/
    .text {
        padding: 8px 16px 8px 70px;
        position: relative;
        color: white;
        border-radius: 32px;
        &::before {
            position: absolute;
            font-family:'FontAwesome';
            font-weight: 700;
/*            font-size: 42px;*/
            font-size: 28px;
            left: 20px;
            top: 0;
        }
    }
}
.error {
    .text {
        background-color: #eb2f2faa;
        &::before {
            content: '\f057';
        }
    }
}
.success {
    .text {
        background-color: #3c872eaa;
        &::before {
            content: '\f058';
        }
    }
}
img {
  max-width: 100%;
}
/* recaptcha */
.grecaptcha-badge, .rc-anchor-invisible {
    opacity: .4;
  }

/* slider */
.slick-prev:before, .slick-next:before {
    font-family: 'FontAwesome';
    font-size: 37px;
    color: rgba(0,0,0,0.5);
}
.slick-prev, .slick-next {
  width: 65px;
  height: 65px;
}
.slick-prev {
    z-index: 1;
    left: -35px;
    &::before {
        content: '\f053';
    }
}
.slick-next {
    right: -26px;
    &::before {
        content: '\f054';
    }
}
.slick-dots {
    bottom: -60px;
    li {
        position: relative;
        width: 26px;
        height: 26px;
        cursor: pointer;
/*        margin-left: 5px;*/
        margin-left: 0;
        margin-bottom: 12px;
        button {
            font-size: 0;
            line-height: 0;
            display: block;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
            &:hover, &:focus {
                outline: none;
            }
            &::before {
                font-family: 'FontAwesome';
                font-size: 20px;
                line-height: 20px;

                position: absolute;
                top: 0;
                left: 0;

                width: 20px;
                height: 20px;

/*                content: '\f10c';*/
                content: '\F0C8';
                text-align: center;
                color: white;
                opacity: .5;

                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
        &.slick-active button:before {
/*            content: '\f111';*/
            color: white;
            opacity: 1;
        }
    }
}
@media only screen and (max-width:767px) {
    .slick-dots li {
        width: 16px;
        height: 16px;
        button {
            &::before {
                font-size: 16px;
                line-height: 16px;
            }
        }
    }
}
/* banner */
#banners {
    .slick-prev:before, .slick-next:before {
        font-size: 21px;
        color: rgba(255,255,255,1);
        background-color: @brown;
        padding: 22px 25px;
        border-radius: 50%;
    }
    .slick-prev {
        left: 26px;
    }
    .slick-next {
        right: 26px;
    }
    .slick-dots {
        bottom: 0;
    }
    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }
}

.banner {
    background-size: cover;
    background-position: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 760px;
    .container {
        padding: 16px 32px;
        margin-top: 80px;
        &.banner-bg {
            background-color: @banner-bg;
        }
    }
    .title {
        font-weight: 800;
        font-size: 3em;
        color: white;
/*        margin-bottom: 1rem;*/
        line-height: 1.2;
    }
    .content {
        color: white;
        max-width: 660px;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }
    .btn {
      font-size: 1em;
      padding-left: 32px;
      padding-right: 32px;
        /*width: max-content;
        padding: 32px;
        &:hover {
            background-color: white;
        }*/
    }
}
@media only screen and (max-width:1399px) {
  body {
    font-size: 14px;
  }
}
@media only screen and (max-width:1199px) {
  body {
    font-size: 12px;
  }
    .banner {
        height: 390px;
        .title {
/*            font-size: 2em;*/
        }
        .content {
/*            font-size: 1.2em;*/
        }
        .btn {
            padding: 16px;
        }
    }
}
@media only screen and (max-width:991px) {
  body {
    font-size: 16px;
  }
  .banner {
    .container {
      margin-top: 30px;
    }
      .title {
          font-size: 2em;
      }
      .content {
          font-size: 1.2em;
      }
  }
  section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
@media only screen and (max-width:575px) {
  body {
    font-size: 14px;
  }
  .title {
    font-size: 1.4em;
  }
  .banner {
      height: 360px;
      .content p {
          margin-bottom: 0.5rem;
      }
      .title {
          font-size: 1.5em;
      }
      .content {
          font-size: 1em;
          margin-top: 0.5rem;
          margin-bottom: 1rem;
      }
      .btn {
          padding: 4px 16px;
      }
  }
  section {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.btn-trans {
  border: 1px solid white;
  color:white;
  a {
    color: white;
  }
  &:hover {
    background-color: white;
    color:@brown;
    a {
      color: @brown;
    }
  }
}
.btn-brown {
  background-color: @brown;
  border: 1px solid @brown;
  color: white;
  a {
    color: white;
  }
  &:hover {
    background-color: white;
    color: @brown;
    a {
      color: @brown;
    }
  }
}
.btn-border-brown {
  background-color: white;
  border: 1px solid @brown;
  color:@brown;
  a {
    color: @brown;
  }
  &:hover {
    background-color: @brown;
    color:white;
    a {
      color: white;
    }
  }
}
.btn-white {
  background-color: white;
  border: 1px solid white;
  color: @brown;
  a {
    color: @brown;
  }
  &:hover {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    a {
      color: white;
    }
  }
}

#mid-links {
  padding-top: 40px;
  padding-bottom: 40px;
  .link-wrapper {
    display: flex;
    justify-content: center;
    color: white;
    padding: 30px;
    border-radius: 12px;
    transition: .4s all cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  a:hover {
    text-decoration: none;
    color: white;
    .link-wrapper {
      transform:scale(1.1);
    }
  }
}
@media only screen and (max-width:1199px) {
  #mid-links {
    .link-wrapper {
      padding: 16px;
    }
  } 
}
@media only screen and (max-width:991px) {
  #mid-links {
    padding-top:16px;
    padding-bottom:16px;
    .link-wrapper {
    }
    .col-12:not(:last-child) {
      margin-bottom: 8px;
    }
  }
}
@media only screen and (max-width:575px) {
}