/* Attempting to move all css from inline to a separate file like a civilized Human
*/

body, html {
  height: 100%;
}

/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
opacity: 1;
}

.gnavbar {
overflow: hidden;
background-color: #393939;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 9; /* Navbar appears on top of everythign else */
opacity: 0.75;

}
.gnavbar a {
/* float: right; */
color: #fff;
text-align: center;
/* padding: 12px 14px; */
text-decoration: none;
opacity: 1;

}

/* Change background on mouse-over */
.gnavbar a:hover {
background: #6cc54a; /*FBC Green*/
color: #fff;
opacity: 1;
}

.gnavbar img {
display: inline-block;
vertical-align: top;
height: 50px;
/* float: left; */
padding-left: 12px;
padding-right: 5px;
opacity: 1;

}

.gnavbar img:hover {
background: #6cc54a; /*FBC Green*/
opacity: 1;
}


/* The hero image */
.hero-image {

background-image: url("https://fbclr.blob.core.windows.net/webdocs/spheader.jpg");

/* Set a specific height */
height: 18%;

/* Position and center the image to scale nicely on all screens */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 50px;
}


/* Main content */


.w3-theme-light {color:#000 !important; background-color:#eaf6ff !important}
.w3-theme-dark {color:#fff !important; background-color:#393939 !important}
.w3-theme-action {color:#fff !important; background-color:#393939 !important}

.w3-theme-blue {color:#fff !important; background-color:#393939 !important}
.w3-text-theme {color:#005b9a !important}
.w3-border-theme {border-color:#393939 !important}

.g-theme-lightblue {color:#fff !important; background-color:#6c6c6c !important}
.g-theme-green {color:#fff !important; background-color:#6cc54a !important}
.g-green,.g-hover-green:hover{color:#fff!important;background-color:#6cc54a!important}


/* Page content */
.content {
padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}

/* list style */

.ul.a {
list-style-type: circle;
}

.greeting-top {
padding-left: 50px;
padding-right: 50px;
}

.greeting-top p {
font-size: 20px;
}


@media screen and (max-width: 801px) {
.greeting-top h3 {
  font-size: 30px;
  font-weight: bold;
}
.gnavbar a {
  padding: 10px, 12px;
  font-size: 15px
}
.greeting-top h2 {
  font-size: 40px;
}
.greeting-top li {
  font-size: 20px;
}
}
}

@media screen and (min-width: 800px) {
.greeting-top h3 {
  font-size: 60px;
  font-weight: bold;
}
.greeting-top h2 {
  font-size: 80px;
}
.greeting-top li {
  font-size: 20px;
}
}
}

.storyteamvideo {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
display: block;
max-width: 60%;
height: auto;

}