// Array of colors to loop through
- colors = ["primary", "secondary", "warning", "danger", "success", "info"];
nav.navbar.navbar-fixed-top.navbar-dark.bg-primary
  .container
        button.navbar-toggler.hidden-lg-up.pull-xs-right(type="button" data-toggle="collapse" data-target="#primary-nav") ☰
        a(href="#" class="navbar-brand") Life's a Beach
        #primary-nav.collapse.navbar-toggleable-md.pull-xs-right
            ul.nav.navbar-nav
                li.nav-item
                    a.nav-link(href="#cards") Cards                
                li.nav-item
                    a.nav-link(href="#about") About
                li.nav-item
                    a.nav-link(href="#buttons") Buttons                        
                li.nav-item
                    a.nav-link(href="#typography") Typography
                li.nav-item
                    a.nav-link(href="https://uk.linkedin.com/in/edd-yerburgh-74aa5768" target="newwindow") Me    
.jumbotron.full-screen#beach-img
    .center
        .container.text-xs-center.m-t-2
            h1.display-1 Life's a Beach
            h3 Bootstrap 4 Concept Theme
            a(href="#cards")
                i.fa.fa-caret-down.color-font-header.x-large.color-danger-hover
.jumbotron.bg-white#cards
    .padding-b-t-100p
        .container
            .row#cards             
                h2.display-4 Cards
            .row.display-lg-flex.hidden
                .col-lg-4.display-lg-flex.m-t-3.p-t-3
                    .card
                        .card-block
                            h4.card-title.text-xs-center.m-b-1 Lightweight
                            i.fa.fa-cloud.fa-5x.fa-fixed.text-xs-center.block.m-b-2                   
                            p.card-text As many styles as needed an no more. This is a lightweight theme.
                .col-lg-4.display-lg-flex.m-t-3.p-t-3
                    .card
                        .card-block
                            h4.card-title.text-xs-center.m-b-1 Customizable
                            i.fa.fa-wrench.fa-5x.fa-fixed.text-xs-center.block.m-b-2          
                            p.card-text Written in SCSS using Bootstrap mixins. It's easy to customize the source code.

                .col-lg-4.display-lg-flex.m-t-3.p-t-3
                    .card
                        .card-block
                            h4.card-title.text-xs-center.m-b-1 Free
                            i.fa.fa-money.fa-5x.fa-fixed.text-xs-center.block.m-b-2 
                            p.card-text Free-fallin', free as a bird, free as in beer. Land of the free. It's free.                                       
.jumbotron.bg-danger#about
    .padding-b-t-100p
        .container.bg-white.jumbotron
            .col-md-6.col-md-offset-3.text-gray-dark
                h2.display-4 About
                p.lead This is a mock up of a Bootstrap 4 theme. It's a work in progress, but I want to get some feedback on the design before I proceed.
                p I'm gonna make a Bootstrap 4 theme. Bootstrap 4's exciting - there are way more features than previous versions. First though I figured I'd mock this and get some feedback.
                p There's still a long time before it's release, but a lot of the core classes and styles are stable.
                p Scroll down to see the styling.
.container
    .row                                     
        .col-md-12.text-xs-center.m-t-3.m-b-3.p-t-3#buttons
            h2.text-xs-center.m-b-3 Buttons
            .row
                each val in colors
                    button( type="button" class="btn btn-" + val) #{val}
            br
            .row
                each val in colors
                    button( type="button" class="btn btn-outline-" + val) #{val}
.container

        .col-md-8.col-md-offset-2.p-b-3.m-t-3#typography
            h2.text-xs-center.m-b-3 Typography
            p.lead This is lead text. Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.

            p Hogshead ye Letter of Marque bucko knave Pieces of Eight matey mutiny interloper six pounders. 
            p Quarter squiffy topmast plunder swab square-rigged gally nipperkin reef man-of-war. Keelhaul to go on account no prey, no pay Privateer Pieces of Eight belaying pin scuppers Jolly Roger bounty aye.
            p You can use the mark tag to 
                mark highlight
                |  text
            p
                del This line of text is meant to be treated as deleted text.
            p
                s This line of text is meant to be treated as no longer accurate
            p
                ins This line of text is meant to be treated as an addition to the document.
            p
                u This line of text will render as underlined
            p
                small This line of text is meant to be treated as fine print.
            p
                strong This line rendered as bold text.
            p
                em This line rendered as italicized text.

            p It's always good to see what 
                a(href="#") links look like
            hr
            h2 Headings

            h1 Heading 1
            h2 Heading 2  
            h3 Heading 3  
            h4 Heading 4  
            h5 Heading 5  
            h6 Heading 6 
            hr
            h2 Lists
            ul
                li Cheese
                li Tomato 
                li Bread
            ol
                li Firstly
                li Secondly
                li Thirdly
                li Fourthly
            hr
            h2 Blockquotes
            blockquote.blockquote
                p.m-b-0 I grew up in a utopia, I did. California when I was a child was a child's paradise, I was healthy, well fed, well clothed, well housed. I went to school and there were libraries with all the world in them and after school I played in orange groves and in Little League and in the band and down at the beach and every day was an adventure. . . . I grew up in utopia
                footer.blockquote-footer
                    p.m-b-0  Kim Stanley Robinson, 
                        cite(title="Pacific Edge") Pacific Edge
            hr
            h2 Tables
            table.table
                thead
                    tr
                        th #
                        th First Name
                        th Last Name
                        th Username
                    tbody
                        tr
                            th(scope="row") 1
                            td Mark
                            td Otto
                            td @mdo
                        tr
                            th(scope="row") 2
                            td Jacob
                            td Thornton
                            td @fat                                                    
                        tr
                            th(scope="row") 3
                            td Larry
                            td the Bird
                            td @twitter  
        .col-md-8.col-md-offset-2
            h2 Display Headings          
        .col-md-12
            h2.display-1 Heading 1
            h2.display-2 Heading 2
            h2.display-3 Heading 3
            h2.display-4 Heading 4
footer.footer.bg-primary.m-t-3.p-t-3.p-b-3
    .container
        .col-md-4.text-md-center
            h4.text-white Wanna Help?
            p Get in touch on github or add me on Codepen.
        .col-md-4.text-md-center
            h4.text-white Connect
            ul.list-inline
                li
                    a(href="https://www.linkedin.com/in/edd-yerburgh-74aa5768" target="newwindow")
                        i.fa.fa-linkedin.fa-3x 
                li
                    a(href="https://github.com/eddyerburgh" target="newwindow")
                        i.fa.fa-github.fa-3x  
                li
                    a(href="https://twitter.com/EddYerburgh" target="newwindow")  
                        i.fa.fa-twitter.fa-3x                        
        .col-md-4.text-md-center
            h4.text-white Join in!
            p Get Bootstrap 4 
                a(href="https://v4-alpha.getbootstrap.com/" target="newwindow") here       

// 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;
}

// add class to body for scroll spy to work
$("body").attr("data-spy", "scroll").attr("data-target", "#primary-nav")
// Activate srollspy
$("main").scrollspy({ target: "#primary-nav" })

// Smooth Scrolling for internal links
$('a[href^="#"]').on("click",function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $("html, body").stop().animate({
	        "scrollTop": $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});

// Animate buttons with .hidden class
var animateHTML = function() {
  var elems,
      windowHeight
  
  var init = function() {
    elems = $(".hidden");
    windowHeight = window.innerHeight;
    _addEventHandlers();
  }
  
  var _addEventHandlers = function() {
      window.addEventListener("scroll", _checkPosition);
      window.addEventListener("resize", init)
  }
  var _checkPosition = function() {
    for ( var i = 0; i < elems.length; i++ ) {
      var posFromTop = elems[i].getBoundingClientRect().top;
      if ( posFromTop - windowHeight <= 0) { 
        elems[i].className = elems[i].className.replace( "hidden", "fade-in" );
      }
    }    
  }
  
  return {
    init: init
  }
}

animateHTML().init();