// Theme

//  X.X | Mixins
//  0.0 | Variables
//  1.0 | Global
//  2.0 | Typography
//  4.0 | Navbar
//  5.0 | Card
// 16.0 | Utilities
//

// Contextual backgrounds

@mixin bg-variant($parent, $color) {
  #{$parent} {
    color: #fff !important;
    background-color: $color !important;
  }
  a#{$parent} {
    @include hover-focus {
      background-color: darken($color, 10%) !important;
    }
  }
}

@mixin hover {
    &:hover { @content }
}

@mixin hover-focus {
&:focus,
  &:hover {
    @content
  }
}


@mixin plain-hover-focus {
  &,
  &:focus,
  &:hover {
    @content
  }
}

@mixin hover-focus-active {
  @if $enable-hover-media-query {
    &:focus,
    &:active {
      @content
    }
    @include hover { @content }
  }
  @else {
    &:focus,
    &:active,
    &:hover {
      @content
    }
  }
}

// WebKit-style focus

@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);

  color: $color;
  background-color: $background;
  border-color: $border;


  @include hover {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
  }

  &:focus,
  &.focus {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
    // Remove the gradient for the pressed/active state
    background-image: none;

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: darken($background, 17%);
          border-color: darken($border, 25%);
    }
  }

  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      background-color: $background;
          border-color: $border;
    }
    @include hover {
      background-color: $background;
          border-color: $border;
    }
  }
}

@mixin button-outline-variant($color) {
  color: $color;
  background-image: none;
  background-color: transparent;
  border-color: $color;

  @include hover {
    color: #fff;
    background-color: $color;
        border-color: $color;
  }

  &:focus,
  &.focus {
    color: #fff;
    background-color: $color;
        border-color: $color;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: #fff;
    background-color: $color;
        border-color: $color;

    &:hover,
    &:focus,
    &.focus {
      color: #fff;
      background-color: darken($color, 17%);
          border-color: darken($color, 25%);
    }
  }

  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      border-color: lighten($color, 20%);
    }
    @include hover {
      border-color: lighten($color, 20%);
    }
  }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  @include border-radius($border-radius);
}
// Single side border-radius

@mixin border-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-radius: $radius;
  }
}

@mixin border-top-radius($radius) {
  @if $enable-rounded {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  }
}

@mixin border-right-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
  }
}

@mixin border-bottom-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

@mixin border-left-radius($radius) {
  @if $enable-rounded {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  }
}

// 0.0 | Variables
//

$gray-dark:                 #222 !default;
$gray:                      #55595c !default;
$gray-light:                #818a91 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;

$brand-primary:             #2EB9BF !default;
$brand-success:             #33D857 !default;
$brand-info:                #4067CA !default;
$brand-warning:             #FFBF3C !default;
$brand-danger:              #FF413C !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-flex:               false !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        false !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;
$border-width: 1px !default;


// Body
//
// Settings for the `<body>` element.

$body-bg:    #fff !default;
$body-color: $gray-dark !default;


// Links
//
// Style anchor elements.

$link-color:            $brand-primary !default;
$link-decoration:       none !default;
$link-hover-color:      darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;

// Typography
//
// Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif: "Noto Sans", "Open Sans", verdana, "Helvetica Neue", Arial, sans-serif !default;
$font-family-heading:    "Montserrat", sans-serif;
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:       $font-family-sans-serif !default;

// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default;

$font-size-base: 1rem !default;
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;
$font-size-xs:   .75rem !default;

$line-height-base: 1.5 !default;

$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;

$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;

$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;

$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family:   inherit !default;
$headings-font-weight:   500 !default;
$headings-line-height:   1.1 !default;
$headings-color:         inherit !default;

$lead-font-size:   1.25rem !default;
$lead-font-weight: 300 !default;

$small-font-size: 80% !default;

$text-muted: $gray-light !default;

$abbr-border-color: $gray-light !default;

$blockquote-small-color:  $gray-light !default;
$blockquote-font-size:    ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-border-width: .25rem !default;

$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;

$mark-padding: .2em !default;

$dt-font-weight: bold !default;

$kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
$nested-kbd-font-weight: bold !default;

$list-inline-padding: 5px !default;


// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:         (4 / 3) !default;
$line-height-sm:         1.5 !default;

$border-radius:          .5rem !default;
$border-radius-lg:       .3rem !default;
$border-radius-sm:       .2rem !default;

$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;

$caret-width:            .3em !default;
$caret-width-lg:         $caret-width !default;


// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.

$btn-padding-x:                  1.2rem !default;
$btn-padding-y:                  .75rem !default;
$btn-line-height:                1.25 !default;
$btn-font-weight:                normal !default;

$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
$btn-primary-border:             $btn-primary-bg !default;

$btn-secondary-color:            $gray-dark !default;
$btn-secondary-bg:               #fff !default;
$btn-secondary-border:           #ccc !default;

$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                $btn-info-bg !default;

$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             $btn-warning-bg !default;

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              $btn-danger-bg !default;

$btn-link-disabled-color:        $gray-light !default;

$btn-padding-x-sm:               .5rem !default;
$btn-padding-y-sm:               .25rem !default;

$btn-padding-x-lg:               1.5rem !default;
$btn-padding-y-lg:               .75rem !default;

$btn-block-spacing-y:            5px !default;
$btn-toolbar-margin:             5px !default;

$split-btn-dropdown-toggle-padding-x:     8px !default;
$split-btn-lg-dropdown-toggle-padding-x: 12px !default;

// Allows for customizing button radius independently from global border radius

$btn-border-radius:              $border-radius !default;
$btn-border-radius-lg:           $border-radius-lg !default;
$btn-border-radius-sm:           $border-radius-sm !default;
// Forms

$input-padding-x:                .75rem !default;
$input-padding-y:                .5rem !default;
$input-line-height:              1.25 !default;

$input-bg:                       #fff !default;
$input-bg-disabled:              $gray-lighter !default;

$input-color:                    $gray !default;
$input-border-color:             rgba(0,0,0,.15) !default;
$input-btn-border-width:         $border-width !default; // For form controls and buttons
$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;

$input-border-radius:            $border-radius !default;
$input-border-radius-lg:         $border-radius-lg !default;
$input-border-radius-sm:         $border-radius-sm !default;

$input-border-focus:             #66afe9 !default;
$input-box-shadow-focus:         rgba(102,175,233,.6) !default;

$input-color-placeholder:        #999 !default;

$input-padding-x-sm:             .5rem !default;
$input-padding-y-sm:             .25rem !default;

$input-padding-x-lg:             1.5rem !default;
$input-padding-y-lg:             .75rem !default;

$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;

$form-group-margin-bottom:       $spacer-y !default;

$input-group-addon-bg:           $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;

// 1.0 | Global
//



// 2.0 | Typography
//

body,
html {
  color: #222;
  font: 18px $font-family-sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 2.5rem;
}

h1 { font-size: 4rem; }
h2 { font-size: 3rem;}
h3 { font-size: 2.5rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1rem; }

.display-1 {
  font-size: 5.9rem;
}

// Add underline

.display-1,
.display-2,
.display-3,
.display-4 {

text-align: center;

  &:after {
    content:'';
    display: block;
    width: 75%;
    height: 0.2rem;
    margin: 1rem auto;
    margin-bottom: 2rem;
    background: #000;
  }  

}
.lead {
  margin-bottom: 2rem;
}
p {
  margin-bottom: 1.5rem;
}

.blockquote {
  border-color: #2EB9BF;
  font-size: 1.1rem;
}

.blockquote-footer::before {
    content: '';
    display: block;
    width: 40%;
    height: 2px;
    background: $gray-lighter;
    margin-top: 1rem;
    margin-bottom: .5rem;
}

hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: 1px solid #000;
}
// Tables
//

.table thead th {
    border-bottom: 2px solid $gray-dark;
}
.table td, .table th {
    border-top: none;
}
// 3.0 | Buttons
//

//
// Base styles
//

.btn {
  display: inline-block;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
  //@include transition(all .2s ease-in-out);

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus();
    }
  }

  @include hover-focus {
    text-decoration: none;
  }
  &.focus {
    text-decoration: none;
  }

  &:active,
  &.active {
    background-image: none;
    outline: 0;
    //@include box-shadow($btn-active-box-shadow);
  }

  &.disabled,
  &:disabled {
    opacity: .65;
    //@include box-shadow(none);
  }
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-secondary {
  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}
.btn-info {
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-success {
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}

// Remove all backgrounds
.btn-outline-primary {
  @include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
  @include button-outline-variant($btn-secondary-border);
}
.btn-outline-info {
  @include button-outline-variant($btn-info-bg);
}
.btn-outline-success {
  @include button-outline-variant($btn-success-bg);
}
.btn-outline-warning {
  @include button-outline-variant($btn-warning-bg);
}
.btn-outline-danger {
  @include button-outline-variant($btn-danger-bg);
}

// 4.0 | Navigation
//

// Links

a {
  color: $brand-primary;
  &:hover {
    color: darken($brand-primary, 10%);
  }
}

// Navbar
.navbar {
  padding: 0;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

.navbar-brand {
  padding: .5rem;
}

.nav-link {
  height: 46px;
  padding: 0 1.2rem!important;
  line-height: 46px;
  transition: all .2s ease-in;
}

.active {
  background: $brand-danger!important;
  color: #fff;
  transition: all .2s ease-in;  
}

.navbar-brand,
.nav-link {
  font-family: $font-family-heading;
  font-weight: 700;
}

.navbar-nav .nav-item+.nav-item {
  margin-left: 0;
}

.navbar-brand {
  text-transform: uppercase;
}

// Footer
//

.bg-primary a {
  color: #fff;
  &:hover {
    color: $brand-danger;
  }
}

// 6.0 Cards
//

.card {
    border: 1px solid #000;
}
// 15.0 | Utilities
//

//
// Contextual backgrounds
//

// Inverse
// TODO: redo this as a proper class
.bg-inverse {
  color: $gray-lighter;
  background-color: $gray-dark;
}

.bg-faded {
  background-color: $gray-lightest;
}

@include bg-variant('.bg-primary', $brand-primary);

@include bg-variant('.bg-success', $brand-success);

@include bg-variant('.bg-info', $brand-info);

@include bg-variant('.bg-warning', $brand-warning);

@include bg-variant('.bg-danger', $brand-danger);

// Page Specific

// resets

html,
body,
main {
  height: 100%;
  white-space: break;
  // Stops words overflowing 
  -ms-word-wrap: break-word;
  word-wrap: break-word;   
}

body {
  padding: 0!important;
}

.full-screen {
  width: 100%;
  min-height: 100%;
  margin: 0;
  position: relative;
  border-radius: 0;
}

.center {
  width: 100%;
}
@media (min-height: 700px) {   
  @media (min-width: 992px) {

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);  
    }
  }
}
#beach-img {
  background: #C4DCDE url(https://static.pexels.com/photos/47424/pexels-photo-47424.jpeg) fixed
}

.block {
  display: block;
}
.padding-b-t-100p {
  padding: 100px 0;
}
@media (min-width: 1260px) {
  .display-lg-flex {
    display: flex;
  }  
}

.x-large {
  font-size: 10rem;
}

.color-font-header {
  color: #000;
}
.text-gray-dark {
  color: $gray-dark;
}

.text-white {
  color: #fff;
  &:after{
    background: #fff;
  }
}
.color-danger-hover:hover {
  color: $brand-danger;
}

.bg-white {
  background: #fff;
}

.list-inline > li {
  display: inline-block;
  padding-right: .3rem;
  padding-left: .3rem;  
}
// required for scroll spy
main {
  position: relative;
  overflow-y:scroll;
}

.hidden {
  opacity: 0;
}

.fade-in {
  animation: fade-in 1.4s;
}

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}

::selection {
  background: $brand-primary;
  color: #fff;
}