/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body { padding-bottom: 1rem; color: #5a5a5a; font-family: 'Roboto Condensed', 'Helvetica', Arial, sans-serif; }

h3 { font-size: 1.5em; line-height: 1.5; margin-bottom: 24px; margin-top: 0px; color: #00008B; }

h4 { font-size: 1.25em; margin-bottom: 10px; margin-top: 20px; color: #00008B; }
h4:first-child { margin-top: 0; }

h5 { font-size: 1.1rem; margin-top: 1rem; }

.navbar { position: absolute; width: 100%; z-index: 9; background-color: rgba(0, 0, 0, 0.5); }
.navbar .navbar-toggleable-xs { max-width: 940px; margin: 0 auto; height: 85px; padding: 0 20px; }
.navbar .navbar-brand { background-image: url(../img/scp-logo.png); background-repeat: no-repeat; width: 193px; height: 85px; text-indent: -100%; overflow: hidden; margin-right: 3.5rem; }
.navbar .navbar-brand.small { position: relative; width: 133px; background-size: 110% auto; height: 45px; margin: 0 auto; display: block; float: none; margin-top: -43px; margin-bottom: 0; display: none; background-position: -17px top; }
.navbar .navbar-toggler { background-color: rgba(255, 255, 255, 0.3); color: #fff; }
.navbar .navbar-nav { float: left; position: relative; width: auto; margin-top: 21px; }
.navbar .navbar-nav .nav-item { width: auto; }
.navbar .navbar-nav .nav-item.active .nav-link { color: white; }
.navbar .navbar-nav .nav-item .nav-link { color: rgba(255, 255, 255, 0.7); }
.navbar .navbar-nav .nav-item .nav-link:hover { color: white; }
.navbar .navbar-nav .nav-item.facebook .nav-link { background: url(../img/FB-f-Logo__white_29.png) no-repeat left top; text-indent: -9999px; overflow: hidden; width: 29px; height: 29px; padding: 0; margin: 3px auto 0px; opacity: .7; }
.navbar .navbar-nav .nav-item.facebook .nav-link:hover { opacity: 1; }
.navbar .navbar-nav .nav-item + .nav-item { margin-left: 40px; }

.row { margin-left: 0; margin-right: 0; padding-top: 50px; }
.row.heading { background: #00008B; color: #fff; padding-top: 0; margin-top: 2rem; }
.row.heading:first-child { margin-top: 0; }
.row.heading .col-lg-12 { padding-top: 20px; padding-bottom: 25px; }
.row.heading .col-lg-12 h3:last-child { margin-bottom: 0; color: inherit; }
.row .copy-area { padding: 0 2rem; }
.row .copy-area a { color: #00008b; text-decoration: underline; }
.row .copy-area a:hover { text-decoration: none; }
.row blockquote { color: #00008b; }
.row blockquote h3 { font-style: italic; margin-bottom: 10px; line-height: 1.25; font-size: 1.25rem; }
.row blockquote p { text-align: right; }
.row address h4 { margin-bottom: 2px; }
.row address h4 a.facebook:hover { text-decoration: none; }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 0; }

/* Since positioning the image, we need to help out the caption */
.carousel-caption { z-index: 10; right: auto; left: auto; }
.carousel-caption h2 { font-size: 1.5rem; margin-bottom: 40px; }
.carousel-caption h2 a { color: #fff; text-decoration: underline; }
.carousel-caption h2 a:hover { text-decoration: none; }
.carousel-caption .cta { background-color: #00008b; border: none; }

/* Declare heights because of positioning of img element */
.carousel-item { height: 32rem; background-color: #777; }
.carousel-item.hero { background-image: url(../img/hero.jpg); background-size: cover; background-position: top center; }
.carousel-item.hero .container { height: 100%; }
.carousel-item.hero .container .col-lg-12 { height: 100%; }

.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 32rem; }

.carousel-indicators { top: 1.5rem; right: 1.5rem; bottom: auto; left: auto; width: 1rem; margin-left: 0; }

.carousel-indicators > li { margin-bottom: .25rem; }

/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-12 { margin-bottom: 1.5rem; text-align: left; max-width: 940px; float: none; margin: 0 auto; }

.marketing h2 { font-weight: normal; }

.marketing .col-lg-4 p { margin-right: .75rem; margin-left: .75rem; }

/* Featurettes
------------------------- */
.featurette-divider { margin: 2rem 0; /* Space out the Bootstrap <hr> more */ }

/* Thin out the marketing headings */
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; }

footer { position: relative; height: 60px; padding: 20px 20px 10px; margin-bottom: auto; bottom: -30px; background-color: #00008b; color: #fff; font-size: 12px; }

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 320px) { .container { max-width: none; padding-left: 0; padding-right: 0; }
  .container .row blockquote { max-width: 640px; margin-bottom: 20px; } }
@media (max-width: 767px) { .navbar .navbar-brand { display: none; }
  .navbar .navbar-brand.small { display: block; }
  .navbar .navbar-nav { width: 100%; }
  .navbar .navbar-nav .nav-item { width: 100%; }
  .navbar .navbar-nav .nav-item + .nav-item { margin-left: 0; }
  .navbar .navbar-nav .nav-item .nav-link { text-align: center; }
  .navbar .navbar-nav .nav-item.facebook .nav-link { margin: 11px auto 10px; }
  h1 { font-size: 2rem; line-height: 2rem; }
  .carousel-caption h2 { font-size: 1.25rem; line-height: 1.3; }
  h3 { font-size: 1.2rem; }
  .row blockquote h3 { font-size: 1.2rem; }
  h4 { font-size: 1.2rem; line-height: 1.5; }
  h5 { font-size: 1.1rem; line-height: 1.5; } }
@media (min-width: 40em) { /* Bump up size of carousel content */
  .carousel-caption p { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4; }
  .featurette-heading { font-size: 50px; } }
@media (min-width: 62em) { .featurette-heading { margin-top: 7rem; } }