/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index: 10;}
/* CUSTOMIZE THE CAROUSEL */
/* Carousel base class */
.carousel { margin-bottom: 0px;}
/* Since positioning the image, we need to help out the caption */
.carousel-caption { z-index: 1;}
/* Declare heights because of positioning of img element */
.carousel .item { background-color:#555;}
.carousel img { position: absolute; top: 0; left: 0;}
/* MARKETING CONTENT -------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing { padding-left: 15px; padding-right: 15px;}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 { text-align: center; margin-bottom: 20px;}
.marketing h2 { font-weight: normal;}
.marketing .col-lg-4 p { margin-left: 10px; margin-right: 10px;}
/* Featurettes */
.featurette-divider { margin: 80px 0; /* Space out the Bootstrap <hr> more */}
.featurette { padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ overflow: hidden; /* Vertically center images part 2: clear their floats. */}
.featurette-image { margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left { margin-right: 40px;}
.featurette-image.pull-right { margin-left: 40px;}
/* Thin out the marketing headings */
.featurette-heading { font-size: 50px; font-weight: 300; line-height: 1; letter-spacing: -1px;}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Remve the edge padding needed for mobile */ 
.marketing { padding-left: 0; padding-right: 0; }
/* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ }
/* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; }
/* Bump up size of carousel content */
.carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; }
}

.carousel-caption { width: 100%; left: 0px; right: 0px; /*top:20%; bottom: 0px;*/ text-align:center; padding-top: 5px; padding-left: 15%; padding-right: 15%; }
.carousel-caption .carousel-caption-header { color:#fff; padding:0; margin:0; }

@media screen and (min-width: 240px) and (max-width: 768px) { 
.carousel .item { height: 200px; }
.carousel img { min-height: 200px;}
.carousel-caption .carousel-caption-header{ font-size:25px; line-height:30px;}
}
@media screen and (min-width: 320px) {
.carousel .item { height: 200px; }
.carousel img { min-height: 200px;}
.carousel-caption .carousel-caption-header{ font-size:25px; line-height:30px;}
}
@media screen and (min-width: 480px) and (max-width: 800px) { 
.carousel .item { height: 300px; }
.carousel img { min-height: 300px;}
.carousel-caption .carousel-caption-header{ font-size:25px; line-height:30px;}
}
@media screen and (min-width: 768px) {
.carousel .item { height: 400px; }
.carousel img { min-height: 400px;}
.carousel-caption .carousel-caption-header{ font-size:35px; line-height:30px;}
}
@media screen and (min-width: 1000px) {
.carousel .item { height: 400px; }
.carousel img { min-height: 400px;}
.carousel-caption .carousel-caption-header{ font-size:35px; line-height:30px;}
}