/* BOOTSTRAP 3.

x GLOBAL STYLES -------------------------------------------------- */ body { padding-bottom: 40px; color: #5a5a5a; }

/* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* 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: 60px; } /* 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: 400px; background-color:#555; } .carousel img { position: absolute; top: 0; left: 0; min-height: 400px; }

/* 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 righ t 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 roughl y 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; } }