// Variables
$enable-rounded: false;
$enable-shadows: true;
$enable-gradients: true;

// Custom colors
$white: #fff;
$facebook: #3b5998;
$youtube: rgb(255, 0, 0);
$twitter: #1ca0f2;
$theme-colors: (
        "primary": #d62a41,
        "secondary": #3f3f3f
);
$primary: #d62a41;
$secondary: #3f3f3f;

// Grid containers
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 970px,
        xl: 970px
);
$grid-gutter-width: 15px;

$navbar-dark-color: $white;
$navbar-dark-hover-color: $white;
$navbar-dark-active-color: $white;

/**
 * Breadcrump
 */
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding: .5rem;
$breadcrumb-margin-bottom: 0;
$breadcrumb-bg: none;
$breadcrumb-divider-color: $secondary;
$breadcrumb-active-color: $secondary;
$breadcrumb-divider: "»";

.breadcrumb-item.active {
  font-weight: 600;
}

.breadcrumb {
  @extend .py-3;
}

@import "node_modules/bootstrap/scss/bootstrap";

/**
 * Fonts
 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald' !important;
}

section:nth-child(even) {
  background: $gray-200;
  @extend .py-5;
}

// Box shadow helper
@mixin BoxShadowHelper($level: 1) {
  @if $level == 1 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  }
  @if $level == 2 {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
  }
}

a {
  transition: .25s all;
}

.card {
  overflow: hidden;
  @include BoxShadowHelper(1);
  transition: .25s box-shadow;
  &:focus,
  &:hover {
    @include BoxShadowHelper(2);
  }
}

.card-inverse .card-img-overlay {
  background-color: rgba(#333, .85);
  border-color: rgba(#333, .85);
}

/**
 * Homepage
 */
#homepage {

  section:first-child {

    //padding-top: 48px;
    padding-bottom: 33px;

    @include media-breakpoint-up(md) {
      .col-md-6 {
        margin-bottom: 15px;
      }
    }

    @include media-breakpoint-down(sm) {
      .col-md-6 {
        margin-bottom: 7.5px;
      }
    }

    div.card {
      border: 0;
      z-index: -1;

      img {
        overflow: hidden;
      }

      .card-img-overlay {
        box-shadow: inset 0 -200px 200px -100px rgba(0, 0, 0, 0.75);
        @extend .d-flex;
        @extend .align-items-end;
      }
    }

    a {
      @extend .d-block;
    }

    a:hover {
      background: rgba(214, 42, 65, .1);
    }
  }
}

// Font Awesome Stuff

// Anchors
a, li {
  transition: color .1s ease-in-out, background-color .1s ease-in-out
}

// Logo
.logo {
  width: 225px;
  height: auto;
}

// Header
header {
  @extend .py-3
}

// Make all images responsive
img {
  @extend .img-fluid;
}

// Social Stuff
.social {

  .facebook {
    color: $facebook;
  }

  .facebook:hover {
    color: darken($facebook, 10);
  }

  .youtube {
    color: $youtube;
  }

  .youtube:hover {
    color: darken($youtube, 10);
  }

  .twitter {
    color: $twitter;
  }

  .twitter:hover {
    color: darken($twitter, 10);
  }

  .col:nth-child(2) {
    @extend .text-right;
  }
}

.nav-item {
  @extend .py-1
}

/**
 * Navbar
 */
@include media-breakpoint-up(lg) {
  nav {
    padding: 0 !important;
  }
}

nav {
  @include gradient-x(darken($primary, 5%), $primary);
  font-family: 'Oswald';
  font-weight: 400;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .5);

  .nav-item.active, .nav-item:hover {
    background: $secondary;
  }
}

// Dropdown Fix
.dropdown-menu.show {
  margin: 0 100% 0 0;
}

// Pre-Footer
.pre-footer {

  position: relative;

  @extend .bg-secondary;
  @extend .text-muted;
  @extend .py-5;

  @include media-breakpoint-down(sm) {
    .row > div:not(:last-child) {
      margin-bottom: 3rem;
    }
  }

  .row > div:first-child > a {
    @extend .d-block;
  }

  .row > div > span {
    @extend .d-block;
  }

  .row > div > span > i {
    @extend .mr-3;
  }

  .row > div > a > i {
    @extend .mr-3;
  }

  .row > div > p {
    @extend .lead;
    @extend .text-white;
    @extend .text-uppercase;
  }

  a {
    color: $gray-600;
  }

  a:hover {
    color: $gray-400;
  }

  @include gradient-x(darken($secondary, 5%), $secondary);
}

@include media-breakpoint-down(sm) {
  .pre-footer {
    text-align: center;
  }
}

@include media-breakpoint-up(md) {
  .pre-footer:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-position-y: 100px;
    opacity: .05;
    background: url("img/banner.png") no-repeat right;
  }
}

// Footer
.footer {

  @extend .py-4;

  background: $secondary;

  img {
    opacity: .25;
  }
}