/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require social-share-button
 *= require select2
 *= require select2-bootstrap
 *= require_self

 */
$color-orange: #F65732;
$color-gray: #666666;
$color-black: #000000;
$color-dark-gray: #4D4D4D;

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-datetimepicker";

html {
  height: 100%;
  box-sizing: border-box;
  font-family: verdana, arial, helvetica, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding-top: 50px;
  position: relative;
  min-height: 100%;
  padding-bottom: 4%;
}

ul {
  list-style: none;
  padding: 0;
}

.panel-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #f5f5f5;
  margin-top: 20px;
}

.underline {
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

.page-subheader {
  text-align: center;
}

.btn-primary.outline {
  border: 2px solid #0099cc;
  color: #0099cc;
}

#map {
  width: 100%;
  height: 400px;
  margin: 40px 0 0 0;
}

.background-orange {
  background-color: #de651b;
  color: #fff;
}

.orange-font {
  color: #de651b;
 }

.background-gray {
  background-color: #777;
  color: #fff;
}

.caption {
  width: 100%;
  bottom: 0px;
  position: absolute;
  background: #000;
  background: -webkit-linear-gradient(bottom, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(bottom, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  background: -o-linear-gradient(bottom, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  background: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.thumbnail {
  border: 0 none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.caption h4 {
  color: #fff;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}


/* Removing the default padding for cells */

.col-lg-3,
.col-md-4,
.col-xs-2 {
  padding-left: 0px;
  padding-right: 0px;
}

/* Removing an unused filter on select2() */

.select2-container--classic .select2-selection--single {
  filter: unset;
}

@media only screen and (min-width: 960px) {
  /* Making the header thinner */
  .navbar-fixed-top {
    height: 50px;
  }

  /* Moving the logo a litle bit to the right */
  .navbar-brand {
    position: relative;
    left: 10px;
    padding-bottom: 10px;
  }

  /* Increase the state search height to match other elements */
  .selection,
  .select2-container--default,
  .select2-selection__rendered,
  .select2-container .select2-selection--single {
	  height: 34px;
  }
}


/* Change the bootstrap dropdown point
 * Retrieved from https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
 */
@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}