/* Most of the following is an adaptation of CSS from Bootstrap Responsive Design - Single Page lynda.com */

@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:400,400i,700|Roboto:400,400i,700');

/*Basic Page CSS*/
body {
  padding-top: 60px; /* This value is set to the height of .navbar so that the element following is direclty underneath with no overlap. */
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", sans-serif;
  font-weight: 200;
  margin: 0;
}



/**  Header Navigation **/

header .navbar {
  padding:15px  0;
  margin-bottom: 0;
  transition: all .5s ease-out;
}

header .navbar-default {
  background-color: #bf0a30;
/*  background-color: transparent;*/
  border: none;
}

header .navbar-default .navbar-nav a {
  color: white;
  padding: 5px 8px;
}

header .navbar-default .navbar-nav a:hover {
  color: #002868;
}

header .navbar-default .navbar-nav .active a {
  font-weight: 700;
  color: white;
  background:#344571;
  border-radius: 6px;
/*  border-bottom: 3px solid #F26E24;*/
  text-shadow: none;
}

header .navbar-default .navbar-nav .active a:hover {
  font-weight: 800;
  color: #E80c0d;
  background:#344571;
  border-radius: 6px;
  text-shadow: none;
}

/**  Navbar Brand **/

header .navbar-brand img {
  /* background: url(../_images/SA-stars-logo.svg);
  background-repeat: no-repeat;
  margin-left: -20px;
  background-position: 15px 0;*/
  max-width:100px; 
  margin-top: -7px;
}

/*header .navbar-brand h1 {
  color: white;
  margin: 0;
  font-size: 2 em;
  font-weight: 200;
  padding-left: 70px;
}
*/
 /* Media queries to adjust size of logo and Brand Text */                 
/*
@media only screen and (max-width: 670px) {
    header .navbar-brand h1 { 
      font-size: 0.7em;
      padding-left: 35px;
    }
 }
*/


@media only screen and (max-width: 670px) {
  header .navbar-brand {
    background-size: 40px;
    background-position: top left;
    margin-top: 5px;
    padding-bottom: 0;
    margin-left: 10px;
  }
  header .navbar {
    padding:10px  0;
  }  
   header .navbar-brand h1 { 
      font-size: 0.7em;
      padding-left: 35px;
    }
}
 
/*

@media only screen and (max-width: 670px) {
  header .navbar {
    padding:10px  0;
  }
}
*/






/* Make the navbar background a transparent blue when toggled.  Media query to solve bootstrap injection of "in" class*/
@media only screen
and (max-width: 768px) {
  header .navbar-collapse.in {
    background-color: rgba(191,10,48, 0.8);
  }
}
/*

@media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
}
*/

/**  nav inbody  -- sets styles for when user scrolls.  The Custom JS was written that injects the class of "inbody"**/

header .inbody {
  background: rgba(191,10,48,.8);
}

header .navbar.inbody {
  padding-top: 0;
  padding-bottom: 0;
}

header .navbar.inbody .navbar-nav {
  padding-top: 10px;
}

header .inbody .navbar-brand {
  background-size: 40px;
  background-position: top left;
  margin-top: 5px;
  padding-bottom: 0;
  margin-left: 10px;
}

header .inbody .navbar-brand h1 {
  font-size: 1em;
  padding-left: 40px;
}

  /* styles for browsers smaller than 670 px; */                 
@media only screen and (max-width: 670px) {
    header .inbody .navbar-brand h1 { 
      font-size: 0.7em;
      padding-left: 35px;
    }
}

/*Red bar on top*/
div.top-red {
  height: 60px;  /* set as same height as .navbar for consistent height */
  background-color: #bf0a30;
  display: flex;
  align-items: center;
  justify-content: center }
div.top-red h1 {
  margin: 0 
font-family: "Lato", sans-serif;
  color: #fff;
}


/*White bar with logo in header*/
header .top-white {
  background-image: url(../_images/SA-Logo-Draft-4a.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 60px; /* set as same height as .navbar for consistent height */
}
/*Blue bar with text header*/

div.top-blue {
  height: 60px;  /* set as same height as .navbar for consistent height */
  background-color: #002868;
  display: flex;
  align-items: center;
  justify-content: center }
div.top-blue h1 {
  margin: 0 
font-family: "Lato", sans-serif;
  color: #fff;
}

.carousel.fade {
  opacity: 1;
}

.carousel.fade .item {
  transition: opacity ease-out 3.5s;
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;  /*stacks all the images on top of each other */
  width: 100%;
  display: block;
}

.carousel.fade .item:first-child {
  top: auto;
  opacity: 0;
  position: relative;
}

.carousel.fade .item.active {
  opacity: 1;
}

/*This is used for fullheight of carousel background images. Needs supporting jquery too.  Chapter 3.6 of lynda responsive single page design...*/
#featured .item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%; 
  }


/* Carousel Text Overlay */

/*.carousel-inner {*/
/*  position: relative;*/
/*  }*/

.carousel-caption h1 {
  font-family: "Lato", sans-serif;
  color: #fff; 
  padding-top: 0;
  bottom: auto;
/*  font-size: 2.5em;*/
    }
.carousel-caption {
    top: 0%;
  }

#causeButton {
  margin-top: 50%;
  margin-bottom: 30px;
}

/* styles for browsers larger than 987px; */
@media only screen and (min-width:987px){
  .carousel-caption h1 { 
    font-size: 2.5em;
  }
  .carousel-caption {
    top: 0%;
  }
}



  /* styles for browsers smaller than 615 px; */                 
@media only screen and (max-width: 615px) {
    .carousel-caption h1 { font-size: 1.5em;}
  .carousel-caption p {font-size: 1em; }
     }


/*Sets the caption position of the Sphere of Capabilities carousel*/
#carouselSphere .carousel-caption {
  top: 80%;
}
/*Sets the caption paragraph size of the Sphere of Capabilities carousel*/
#carouselSphere .carousel-caption p {
  font-size: 1em;
}




/* Move the reset button a little lower on small screens, so as not to obscure the image caption.*/
@media only screen
and (max-width: 380px) {
  #carouselSphere .carousel-inner {
  height: 200px;
  }
  #carouselSphere .carousel-caption p {
  font-size: 0.7em;
  }
  #carouselSphere .carousel-caption h3 {
  font-size: 1em;
  }
  .reset-button {
    padding-top: 10px;
  }
}
@media only screen
and (min-width: 381px) and (max-width: 770px){
  #carouselSphere .carousel-inner {
  height: 400px;
  }
}


/**  Page Styles  **/
   
.page {
  padding: 50px 0;  
}

.page h2 {
  text-align: center;
  margin-bottom: 30px;
}




/*Creates a transparent border to separate sections within the "Solution" page*/
#solution .section-bottom {
  border-bottom-style: solid;
  border-bottom-width: 2em;
  border-bottom-color: rgba(242, 110, 36, .15);
}

#solution {
  border-top: 20px solid rgba(25, 43, 88, .9);
  background-color: #fff;
  background-image: linear-gradient(to bottom, #fff, #192B58);
}

/*create space at top and bottom of platform section*/
#solution .platform {
  margin: 50px 0px;
 }

/*create space at top and bottom of cycle section*/
#solution .cycle {
  padding: 50px 0px;
 }

/*create a bit of space after the Solution Page headline*/
#solution .pageheadline {
  padding-bottom: 10px;
 }

#solution .platform-description {
  vertical-align: bottom;
 }

/*Sets the color and font of the diagram captions in the Solutions Page*/
#solution .caption {
  color: #192B58;
  font-style: italic;
  font-weight: bold;
  padding-top: 10px;
 }
/*

#solution .platform-image {
  padding-bottom: 100px;
}
*/


#solution .subheadline {
  margin: 2em 0 1.5em 0;
}
/*Puts a headline in the center (used for the Sphere of Capabilities section)*/
#solution .sphere-description h3 {
  text-align: center;
}

#solution .supporting-text {
  font-size: 1.2em;
   margin-bottom: 1,5em;
}

#solution .sphere .supporting-text {
  text-align: center;
}

#solution .benefit li{
  font-size: 1.2em;
  line-height: 1em;
  margin: 1.5em;
}

#solution .benefit .bullet-lead {
  font-weight: bold;
}


/*
#solution .sphere-image {
  width 100%;
  position:absolute;
}
*/

/*
#solution .sphere-image.area {
  height: 150px;
  width: 150px;
  border-radius: 10px;
  border-color:crimson;
}
*/



/**  Page -- Team **/

#team {
  border-top: 20px solid rgba(25, 43, 88, .9);
/*  background-color: #E4D29D;*/
  background-image: linear-gradient(to bottom, #fff, #a3aabc);
}

.member {
  margin: 10px 0;
}

.member h3 {
  font-weight: 600;
  font-size: 1.2em;
  color: #192B58;
  padding-bottom: 5px;
}

.member p {
  font-size: 1em;
}

.member img {
  width: 100%;
}

/* Footer */

footer {
  background: #192B58;
  color: white;
  font-size: 1em;
  text-align: center;
  font-family: "Lato", sans-serif; 
  padding-top: 8em;
}

.copyright{
   font-size: .8em;    
}
