.l2d-bg-light {
/* background-color: yellow; */
}

body {
  overflow-x: hidden;
}

.text-offwhite {
  color: #AFB0B1;
}

.background-offwhite {
  background-color: #AFB0B1;
}

.raiseItem {
  margin-top: -160px;
}

.bg-light {
  background-color: #D9D8D8 !important;
}

#navbar {
border-bottom: 3px solid grey ;
}
.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem;
  padding-right: 1rem;
}

.navbar .nav-item.active {
  /* border-left: #444 3px solid; */
}

.carousel-item {
height: 350px;
}

.carousel-image-1 {
background: url(./img/banner1.jpg);
background-size: cover;
}
.carousel-image-2 {
background: url(./img/banner2.jpg);
background-size: cover;
}
.carousel-image-3 {
background: url(./img/banner3.jpg);
background-size: cover;
}


#home-heading {
position: relative;
min-height: 550px;
background-color: red;
background: url(./img/footprints-in-sand.jpg);
background-size: cover;
background-attachment: fixed; 
text-align: center;
color: #fff;
border-top:10px solid grey;
border-bottom:10px solid grey;
}

.home-p {
  font-size: 1.2em;
}

#online-banner-container {
position:relative;
}
.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);

}


#main-footer {
background-color: #000;
color: #fff;
}

#main-footer p {
font-size: 0.9em;
}


#testimonials a:hover {
  text-decoration: none;
}

#about-banner-container {
min-height: 250px;
background: url(./img/dandelion.jpg);
background-size: cover;
}

#about-banner-catchline {
padding-top: 7%;
}

#online-banner-container {
min-height: 250px;
background: url(./img/onlinebanner.jpg);
background-size: cover;
}

#online-banner-catchline {
padding-top: 7%;
}

#testimonal-banner-container {
min-height: 250px;
background: url(./img/testimonials.jpg);
background-size: cover;
}

#testimonal-banner-catchline {
padding-top: 7%;
}


/* ============================ User login Page ========================= */
#userLoginForm {
  min-height: 497px;
}

#closeFormButton{
margin-left: 90%; 
}

.closeFormButtonStyle {
font-size: 1.5em; 
color: grey; 
text-decoration: none;
}

/*
Grid Classes

The Bootstrap grid system has four classes:

    xs (for phones - screens less than 768px wide)
    sm (for tablets - screens equal to or greater than 768px wide)
    md (for small laptops - screens equal to or greater than 992px wide)
    lg (for laptops and desktops - screens equal to or greater than 1200px wide)
*/



@media (max-width: 768px) {
  #showcase {
     }
    #showcase h1 {
      font-size: 2rem; }
	  
  .carousel-image-1 {
    background: url(./img/banner1-mobile.jpg);
	background-size: cover;
   }
	 
  #home-heading {
    min-height: 400px;
  }
  
  #home-heading  h1{
    font-size: 1.2em !important;
  }  
  #home-heading  h2{
    font-size: 1.2em !important;
  }   
 }