.hide{
  display: hidden;
}

.anchor{
  display: block;
  height: 48px; /*same height as header*/
  margin-top: -48px; /*same height as header*/
  visibility: hidden;
}

.navbar{
  margin-bottom: 0;
}

.navbar-default{
  margin-bottom: none;
  background-color: #fff;
  opacity: .8;
}

#navfluid{
  border: none;
}

.cover{
  background:  linear-gradient(
      rgba(255, 255, 255, 0.45), 
      rgba(255, 255, 255, 0.45)
    ), url(/images/BG-image.jpg) no-repeat; 
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100vh; /*same height as jumbotron */
  min-height: 350px;
  bottom:0;
  color: #fff;
  text-shadow: #444 0 1px 1px;
  text-align: center;

}

#ghost-button-rounded a {
    color: #fff!important;
    text-decoration:none;

}

#headline {
  padding-top: 8%;
  font-size: 10em;
}

#headline h1{ font-size: .5em;

}

#hope-nav-right{
  padding-right: 3%;
}

#headline h2{
  font-size: .2em;
}

#ghost-button-rounded-corners {
  display: inline-block;
  width: 5%;
  padding: 8px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 1.5em;
  outline: none;
  text-decoration: none;
  background-color: transparent;
}
#ghost-button-rounded-corners:hover,
#ghost-button-rounded-corners:active {
  background-color: #fff;
  color: #000;
}
}

#ghost-button-rounded-corners .col-lg-12 a{
  color:#ffffff!important;
  display:none;

}

ul {
    list-style-position: inside;
}

#services {
  background-color: #FEA11E;
  color:#fff;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}

#dark{
background-color: #e4901b;
width: 33%;
padding:3px;
}

#light{
background-color: #feaa34;
width: 33%;
padding:3px;
}

#dark img{
/*	width: 300px;*/
/*	height: auto;*/
  padding-bottom: 10px;
}

.top-3 {
  background-color: #090;
  color:white;
  float:none;
  margin: 0 auto;
  width:100%;
}

.center{
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  text-align: center;
  color: #fff;
}

img.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#highlight3{
  background-color: #090;
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
  color: #fff;
}

#contact{
background-color: #222;
  color: #fff;
  width: 100%
}


footer{
padding-left: 20%;
}


#grid{
      display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
      display: -ms-flexbox;  /* TWEENER - IE 10 */
      display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
      display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	max-width: 70%
}
 #headline{
  padding-bottom: 20px;
 }


/* These are the classes that are going to be applied: */
.column {float: left;}
.size-1of3 { width: 20vw;
    
}



h1{
  font-family: font-family: 'Roboto', sans-serif;
}

#counseling{
  background: ##d3d3d3;
}

#rcorners1 {
    border-radius: 25px;
    background: #d3d3d3;
}

.container-fluid .top-3{
  display: none;
  width:60%;
  background-color: #090;
  text-align: center;
  color:white;
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

      #light{
          width:100vw;
      }
      #dark{
          width:100vw;
      }
      #dark img{
          display:none;
      }
}