@charset "UTF-8";
/* CSS Document */
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #FFF;
  background-color: #000;
}

a, a:focus, a:hover { /* changes color of hyperlinks */
	color: #28976c;
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/*Hid some styles below and added new styles right below them to make slideshow height responsive*/

/* Carousel base class */
.carousel {
  /*height: 500px;*/
  min-height: 200px;
  margin-bottom: 20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  /*height: 500px;*/
  height: auto;
  overflow: hidden;
  background-color: #FFF; /*was #777*/
}
.carousel-inner > .item > img {
  /*position: absolute;*/
  position: relative;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
  height: auto;
}

/*also added this below*/
.carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}




/* RESPONSIVE CSS
-------------------------------------------------- */

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }



/* MORE STYLES BY STEINER DESIGNS
----------------------------------------------*/
	
.carousel-control.left { /*removes linear gradient behind left arrow in slideshow*/
	background-image: none;
}

.carousel-control.right { /*removes linear gradient behind right arrow in slideshow*/
	background-image: none;
}

	
@media screen and (max-width: 600px) { /*moves carousel down at smaller screen size*/
	.carousel {
		margin-top: 10px;
	}
}

@media screen and (max-width: 500px) { /*removes extra space below carousel smaller screen size*/
	.carousel {
		margin-bottom: 10px;
	}
	.carousel-control.left { /*makes control less tall at smaller screen size - otherwise lots of space below carousel*/
		height: 150px;
	}
	.carousel-control.right {
		height: 150px;
	}
}

.bodytextbolditalblu {
	color: #28976c;
	font-style: italic;
	font-weight: bold;
}

.h3-green {
	color: #28976c;
	font-style: italic;
}

.h4-green {
	color: #28976c;
	font-style: italic;
}

footer {
	margin-top: 10px;
}

.top-row { /* 70px is enough to push top row below nav bar and give 20px top margin */
	margin-top: 70px;
}

.container-no-padding {
	padding-left: 0px;
	padding-right: 0px;
}

@media screen and (max-width: 768px) {
.FCC-header-logo {
	padding-bottom: 10px;
}
}

@media screen and (max-width: 768px) {
.main-row { /* adds a little margin on each side of the site at small screen size */
	margin-left: -5px;
	margin-right: -5px;
}
}

.gap-right {
  margin-right: 10px; 
}

.gap-left {
  margin-left: 10px; 
}

.gap-btm {
	margin-bottom: 10px;
}

.gap-top-20px {
	margin-top: 20px;
}

/*xxs class added below for media queries below sm size*/
@media (max-width: 525px) {
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
  float: left;
}
.col-xxs-12 {
  width: 100%;
}
.col-xxs-11 {
  width: 91.66666667%;
}
.col-xxs-10 {
  width: 83.33333333%;
}
.col-xxs-9 {
  width: 75%;
}
.col-xxs-8 {
  width: 66.66666667%;
}
.col-xxs-7 {
  width: 58.33333333%;
}
.col-xxs-6 {
  width: 50%;
}
.col-xxs-5 {
  width: 41.66666667%;
}
.col-xxs-4 {
  width: 33.33333333%;
}
.col-xxs-3 {
  width: 25%;
}
.col-xxs-2 {
  width: 16.66666667%;
}
.col-xxs-1 {
  width: 8.33333333%;
}
}

.coupon {
	border: medium dashed #28976c;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	display:block;
	overflow:auto;
}

@media screen and (max-width: 525px) {
	.hundredperc-no-float { /* this style allows pics that pull-right or pull-left to take up 100% of div width at small screen size */
		width: 100%;
		float: none;
	}
}

.map-container { /*makes map responsive*/
 	position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.map-container iframe { /*makes map responsive*/
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.claudio-pic {
	margin-top: 50px;
}

@media screen and (max-width: 768px) {
	.claudio-pic {
		margin-top: 10px;
	}
}

.social-icons-sml {
	margin-left: 10px;
	margin-top: 10px;
}