/*!
* Elegant Pingendo template (https://templates.pingendo.com)
* Based on: Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2014-2018 Pingendo (https://pingendo.com)
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:200'); 
@import url('https://fonts.googleapis.com/css?family=Cormorant Garamond:300,600');


// Semantic color scheme

$theme-colors: (
  primary: #1b2021,
  secondary: #505050,
  success: #28a745,
  info: #8a8a8a,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #202020
);

// Options
//
// Quickly modify global styling by enabling or disabling optional features.
 
$enable-rounded:            true !default;
$enable-shadows:            false;
$enable-gradients:          false;
$enable-transitions:        true !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;

// Variables
//
// Theme settings.

$body-bg: #111;

$body-color: white;

$headings-color: white;
$body-color-inverse: invert($body-color) !default;
$link-color: #aaaaaa;

$font-family-base: Montserrat;

$headings-font-family: Cormorant Garamond;



$font-size-base: 0.8rem;
$font-weight-normal: 300;

// Assumes the browser default, typically `16px`
$h1-font-size: 2.5 * $font-size-base;
$h2-font-size: 2 * $font-size-base;
$h3-font-size: 1.75 * $font-size-base;
$h4-font-size: 1.5 * $font-size-base;
$h5-font-size: 1.25 * $font-size-base;
$h6-font-size: $font-size-base;
$display1-size: 6 * $font-size-base;
$display2-size: 5.5 * $font-size-base;
$display3-size: 4.5 * $font-size-base;
$display4-size: 3.5 * $font-size-base;

$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 960px);
$spacer: 1.5rem;


// Components
$border-width: 													1px;
$border-radius: 												0rem;
$border-radius-lg: 											$border-radius * 1.2;
$border-radius-sm: 											$border-radius * .4;
$component-active-color :								map-get($theme-colors,"light");

// Buttons

$input-btn-padding-x-lg:    						1.25rem;
$input-btn-padding-x:       						1rem !default;

// Cards
$card-border-width:        							0px;
$card-bg: 															rgba(#333,.5);

// Breadcrumb
$breadcrumb-bg: 												transparent !default;
$breadcrumb-active-color:       				white;

// Carousel
$carousel-caption-width:      					75%;
$carousel-indicator-height:							6px !default;

// Forms
$form-group-margin-bottom:       0rem;

// Nav tabs
$nav-tabs-border-color:									map-get($theme-colors,"primary");
$nav-tabs-link-hover-border-color:      transparent;
$nav-tabs-link-active-color:  					$component-active-color;
$nav-tabs-link-active-bg:               map-get($theme-colors,"primary");
$nav-tabs-link-active-border-color:     $nav-tabs-border-color;

// Nav pills
$nav-pills-link-active-color: 					$component-active-color;

// Pagination
$pagination-bg:                        	$body-bg;
$pagination-border-color:              	map-get($theme-colors,"dark");
$pagination-hover-bg:                  	$body-bg;
$pagination-hover-border-color:        	$pagination-border-color;
$pagination-active-color:              	$component-active-color;
$pagination-active-bg:                 	map-get($theme-colors,"primary");
$pagination-active-border-color:       	$component-active-color;
$pagination-disabled-color:            	darken(map-get($theme-colors,"light"), 70%);
$pagination-disabled-bg:               	$body-bg;
$pagination-disabled-border-color:     	$pagination-disabled-bg;

// List group
$list-group-bg:                  				$body-bg;
$list-group-border-color:        				map-get($theme-colors,"dark");
$list-group-hover-bg:                 	$body-bg;
$list-group-active-color:             	$component-active-color;
$list-group-action-color:             	$link-color;
$list-group-active-border-color:      	map-get($theme-colors,"dark") !default;
$list-group-action-hover-color:       	map-get($theme-colors,"light");
$list-group-action-active-color:      	$body-color !default;
$list-group-action-active-bg:         	transparent;

// Horizontal rule
$hr-border-color: rgba(map-get($theme-colors,"light"),.25);

// Tables
$table-accent-bg:               				rgba(map-get($theme-colors,"light"),.05);
$table-inverse-bg:              				rgba(map-get($theme-colors,"light"),.5);
$table-hover-bg:                				rgba(map-get($theme-colors,"light"),.1);

@import 'bootstrap/bootstrap';

html,body {
   height:100%;
}

body > * {
  background-position: center;
}

.photo-overlay {
  overflow: hidden;
  position: relative;
  background-size: cover;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px; 
    pointer-events:none;
    background: rgba(map-get($theme-colors, 'dark'), 0.5);
  }
}

.bg-dark-opaque {
  background: rgba(map-get($theme-colors, 'primary'), 0.60);  
  .btn {
  border-color: rgba(map-get($theme-colors, 'light'), 1);
  color: white;
  }
}

.btn {
 &.btn-outline-light:hover {
      color: map-get($theme-colors,"dark");
      background-color: map-get($theme-colors,"light");
 }
 &.btn:active, .btn.active {
    color: map-get($theme-colors,"dark");
    box-shadow: 0 0 0 3px rgba(18, 187, 173, 0.25), inset 0 3px 5px rgba(0, 0, 0, 0.125); }
}

.carousel {
	.carousel-caption {
    padding-top:10px;
    padding-bottom:10px;
	  bottom:40px;
		background: rgba(map-get($theme-colors, 'dark'), 0.75);
    color: $body-color;
	}
  
	.carousel-control-next, .carousel-control-prev {
    opacity:0.85;
  }
  
  .carousel-indicators {
    bottom: 0px;
  }
  p {
  margin-bottom:0px;
  }
}

.cover {
 min-height:100%; 
}

/* Animate state between .navbar and .navbar-ontop */
.navbar  {
  transition: background-color .5s ease-out;
}

.navbar-ontop {
  background-color: transparent !important;
}

/* Animate on entrance */

.animate-in-down {
  transition: all 1.3s ease-out;
	position:relative;
  opacity:1;
  top:0px;
  &.out-of-viewport {
    top:40px;
    opacity:0;
  }
}


.animate-in-left {
  transition: all 1.0s ease-out;
	position:relative;
  opacity:1;
	left:0%;
  &.out-of-viewport {
    opacity:0;
      left:-5%;
  }
}


.animate-in-right {
  transition: all 1.0s ease-out;
	position:relative;
  opacity:1;
	left:0%;
  &.out-of-viewport {
    opacity:0;
    left:5%;
  }
}