@import "config";
@import "../../bower_components/bootstrap/scss/bootstrap";
@import "../../bower_components/fontawesome/web-fonts-with-css/scss/fontawesome";
@import "../../bower_components/fontawesome/web-fonts-with-css/scss/fa-solid";
@import "../../bower_components/fontawesome/web-fonts-with-css/scss/fa-regular";
@import "../../bower_components/fontawesome/web-fonts-with-css/scss/fa-brands";
@import "../../bower_components/fancybox/dist/jquery.fancybox.min";
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,700,700i,900');

// Fonts
@font-face {
  font-family: 'adam.cg_proregular';
  src: url('../fonts/adam.cg_pro-webfont.eot');
  src: url('../fonts/adam.cg_pro-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/adam.cg_pro-webfont.woff2') format('woff2'),
  url('../fonts/adam.cg_pro-webfont.woff') format('woff'),
  url('../fonts/adam.cg_pro-webfont.ttf') format('truetype'),
  url('../fonts/adam.cg_pro-webfont.svg#adam.cg_proregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

// Defaults
*:focus {
  outline: none !important;
}

i {
  margin-right: .5rem;
}

.small-gutters {
  margin-right: -10px;
  margin-left: -10px;

  > .col,
  > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
}

.btn {
  font-family: 'adam.cg_proregular';
}

h1 {
  letter-spacing: 0.25rem;
}

// Divider
.divider {
  margin: 50px 0;
  height: 50px;
  background: url("../images/divider-floral.png") no-repeat center;
}

// Arrow down
.arrowDown {
  display: block;
  margin: 50px auto 0 auto;
  width: 50px;
  height: 50px;
  background: url("../images/arrow-down.png");
}

// Footer
.footer {
  display: flex;
  background: $gray;
  color: $white;
  padding: 10px 15px;
  font-family: 'adam.cg_proregular';
  font-size: .875rem;

  a {
    color: $white;
  }

  @include media-breakpoint-down(md) {
    display: block;
  }
}

// Menu
.menu {
  display: flex;
  align-items: center;
  position: fixed;
  padding: 2rem;
  left: -300px;
  height: 100%;
  width: 300px;
  background: $gray;
  z-index: $zindex-fixed;
  @include transition(left .5s ease-in-out);

  .menuToggle {
    position: absolute;
    display: block;
    left: 300px;
    top: 50%;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    border: none;
    background: url("../images/icon-menu.jpg");
    cursor: pointer;
  }

  ul {
    margin: 0;
    padding: 0;
    width: 100%;

    li {
      list-style: none;
      margin: 0;
      padding: 20px 0;
      border-bottom: 1px solid $primary;

      a {
        font-family: 'adam.cg_proregular';
        color: $white;
        text-decoration: none;

        @include hover-focus-active {
          color: $primary;
        }
      }
    }
  }

  &.active {
    left: 0;
    @include transition(left .25s ease-in-out);

    .menuToggle {
      background: url("../images/icon-close.jpg");
    }
  }

  @include media-breakpoint-down(md) {
    display: none;
  }
}

// Menu mobile
.navbarMenuMobile {
  padding: 1rem;
  background: $gray;

  .navbar-toggler {
    padding: .5rem .75rem;
    border-color: $primary;
    color: $primary;
  }

  .navbar-collapse {
    text-align: center;

    .navbar-nav {
      padding: 1rem 0;
    }
  }
}

@include media-breakpoint-up(sm) {
  .navbarMenuMobile {
    display: none;
  }
}

// Header
.header {
  .logo {
    position: absolute;
    display: block;
    top: 25px;
    left: 25px;
    z-index: $zindex-tooltip;
    font-family: 'adam.cg_proregular';
    font-size: 2rem;
    text-decoration: none;
  }

  .phone {
    position: absolute;
    display: block;
    top: 25px;
    right: 25px;
    padding: .5rem 1.5rem;
    background: $gray;
    color: $white;
    font-family: 'adam.cg_proregular';
    font-size: 1rem;
    text-decoration: none;
    z-index: $zindex-tooltip;

    i {
      color: $primary;
    }
  }

  @include media-breakpoint-down(md) {
    display: none;
  }
}

// Main
.main {
  padding-bottom: 60px;
  background: url("../images/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  text-align: center;
  color: $white;

  h1 {
    margin: 0;
    padding-top: 200px;
    color: $white;
  }

  p {
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: $primary;
  }

  @include media-breakpoint-down(md) {
    h1 {
      padding-top: 100px;
    }
  }
}

// Featured
.featured {
  text-align: center;
  padding: 5rem 0;

  .features {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
      margin: 0 0 1rem 0;
      padding: 0;
    }
  }

  .quest {
    font-size: 2rem;
  }

  @include media-breakpoint-down(md) {
    .features {
      li {
        list-style: disc;
        text-align: left;
        margin: 0 0 1rem 1.5rem;
      }
    }
  }
}