/*! Made with Bones: http://themble.com/bones :) */
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/

@font-face {
  font-family: 'Dutch 801 Roman BT';
  src: url('../fonts/Dutch 801 Roman BT.eot');
  src: url('../fonts/Dutch 801 Roman BT.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Dutch 801 Roman BT.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dutch801BT-Roman';
  src: url('../fonts/Dutch801BT-Roman.svg#Dutch801BT-Roman') format('svg'),
       url('../fonts/Dutch801BT-Roman.ttf') format('truetype'),
       url('../fonts/Dutch801BT-Roman.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Du801It';
  src: url('../fonts/Du801It.eot');
  src: url('../fonts/Du801It.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Du801It.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dutch801BT-Italic';
  src: url('../fonts/Dutch801BT-Italic.svg#Dutch801BT-Italic') format('svg'),
       url('../fonts/Dutch801BT-Italic.ttf') format('truetype'),
       url('../fonts/Dutch801BT-Italic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


body, html {
  position: relative;
}
body {
  background-color: #fdf6f4;
  border:20px solid #fffbfa;
}
body.halt {
  overflow: hidden;
}
.main-content {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 400px; /* height of your footer */  
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

/* general */
.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.4);
  background-blend-mode: multiply;
  cursor: pointer;
  transition: .3s ease all;
}
.overlay:hover {
  opacity: .7;
}
.square:after {
  content:'';
  float:left;
  padding-bottom: 100%;	
}
.rectangle:after {
  content:'';
  float:left;
  padding-bottom: 50%;	
}
.chubby-rectangle:after {
  content:'';
  float:left;
  padding-bottom: 75%;	
}
.tall-rectangle:after {
  content:'';
  float:left;
  padding-bottom: 150%;	
}
.circle {
	position: relative;
	border-radius: 50%;
	width: 100%;
	height: auto;
	padding-top: 100%;
	background: white;	
	display: block;
}
.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe, .video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video {
	max-width: 100%;
}
.p-absolute {
  position: absolute;
}
.p-relative {
  position: relative;
}
img {
  max-width: 100%;
  height: auto;
}
.bw {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/* animations */
.fadeimg {
  visibility: hidden;
}
.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
}
@-webkit-keyframes animat_show{
  0%{opacity:0}
  100%{opacity:1}
}


/* text/fonts */
.text-black {
	color: #000;
}
.h1, h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  /*font-family: 'Dutch 801 Roman BT', 'Dutch801BT-Roman', sans-serif;*/
  text-transform: uppercase;
}
.font-serif {
	font-family: serif;
	font-style: normal;
	font-weight: 400;
}
.font-sansserif {
	font-family: sans-serif;
	font-style: normal;
	font-weight: 400;
}


/* links */
a { 
  transition: .3s ease all;
  color: #333;
}
a:hover {
  text-decoration: none;
}


/* buttons */
button:focus, .btn.focus, .btn:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.btn {
	border-radius: 0;
  width: auto;
  font-weight: 300;
  letter-spacing: 1px;
}
.btn-primary {
  background: #fff;
  border-color: #fff;
  color: #000;
}
.btn-primary:hover {
  background: #000;
  border-color: #fff;
  color: #fff;
}
.btn-default {

}
.btn-default:hover {
	
}
.btn-secondary {
  background: transparent;
  border-width: 1px;
  border-color: #333;
  color: #333;
  letter-spacing: 0px;
  text-transform: uppercase;
}
.btn-secondary:hover {
  background-color: transparent;
  color: #333;
  border-color: #004d8f;
}


/* backgrounds */
.bg-black {
	background: #000;
}
.bg-light-gray {
  background: #fae7e0;
}
.bg-peach {
}

/* borders */ 
.bl-dark {
	border-left: 1px solid #000;
}
.br-dark {
	border-right: 1px solid #000;
}
.bt-dark {
	border-top: 1px solid #000;
}
.bb-dark {
	border-bottom: 1px solid #000;
}
.bl-light {
	border-left: 1px solid #ddd;
}
.br-light {
	border-right: 1px solid #ddd;
}
.bt-light {
	border-top: 1px solid #ddd;
}
.bb-light {
	border-bottom: 1px solid #ddd;
}
.bb-white {
  border-bottom: 2px solid #999;
}

/* forms */
.form-control {
	border-radius: 0;
	border:0;
	padding: 2rem;
}


/* header */
header.navbar {
  background: #fdf6f4;
  width: 100%;
  z-index: 20;
  transition: 1s ease all;
  left: 0;
  position: relative;
}
header.navbar.slidedown {
  position: fixed;
  top:-200px;
  left: 0;
  box-shadow: 3px 2px 9px #333;
}
header.navbar.sliddown {
  top:0;
}
a.nav-link {
  color: #000;
  letter-spacing: 2px;
  font-weight: 300;
  text-transform: uppercase;
  font-size: .9rem;
}

.navbar a.nav-link:after {
  /*border-bottom: 2px solid #fff;*/
  content:'';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #004d8f;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.navbar a.nav-link:hover:after {
  /*border-bottom: 2px solid #c90a18;*/
  transform-origin: bottom left;
  transform: scaleX(1);
}


.navbar-toggler {
  border: 0;
}
button.navbar-toggler:focus {
  box-shadow: none;
}
#nav-icon {
  width: 32px;
  height: 22px;
  position: relative;
  margin: 4px;
  background: transparent;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  float: right;
}
#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #eee;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 0px;
  background: #68aace;
}
#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 20px;
  left: 0px;
  background: #68aace;
}

/* BIT */
.bit-widget .bit-top-track-button, .bit-nav-bar-container, .bit-widget .bit-play-my-city-button {
  display: none!important;
}

.modal-content {
  background: transparent;
  border:0;
}
.modal-header {
  border: 0;
}
.close {
  color: #fff;
  text-shadow:none;
  opacity: .9;
}

/* mailchimp */
.footer #mc_embed_signup .mc-field-group input {
  width: auto;
  text-indent: 0;
  padding: .5rem 1rem;
  max-width: 100%;
}
.footer #mc_embed_signup input {
  border: 1px solid #fff;
}
.footer #mc-embedded-subscribe {
  margin: 0;
}
.footer #mc_embed_signup .mc-field-group {
  min-height: 0;
  padding-bottom: 0;
}
.footer .form-control {
  height: auto;
}

.alignright {
  float: right;
  margin-left: 2rem;
}
.modal-lg, .modal-xl {
  max-width: 80%;
}

.bit-widget-container .bit-widget {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important;
}
.bit-widget-container .bit-widget .bit-event .bit-button {
  line-height: inherit;
  font-weight: normal;
}
.bit-widget-container .bit-widget.bit-layout-desktop .bit-event .bit-button {
  min-width: 100px;
  padding: .1rem .05rem;
  width: initial;
  letter-spacing: 0px;
  font-weight: 300;
  font-size: .8rem;
}
}
.bit-widget-container .bit-widget .bit-rsvp {
  color: #333;
  border-color: #333;
}
.bit-widget-container .bit-widget .bit-event, .bit-widget-container .bit-widget .bit-upcoming-events {
  border: 0;
}

.carousel-indicators li {
  height: 15px;
  width: 15px;
  border-radius: 50%;  
  border: 1px solid #ccc;
}

@media (max-width:767px) {
  .main-content {
   min-height: auto; /* will cover the 100% of viewport */
   overflow: hidden;
   display: block;
   position: relative;
   padding-bottom: 0px; /* height of your footer */  
  }
  footer {
   position: relative;
  }

  .alignright {
    float: none;
    margin-left: 0;
  }
}