html {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    font-size: 16px;
    background-color: white;
    color: black;
}

  
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    line-height: 1.75;
    padding-bottom: 20px;
}

a {
  color: #1e1e1e;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

.mainBody {
  width: 50%;
  margin: auto;
}

.featureImage{
  margin-top: 120px;
}

.overlay {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
}

.description {
	left: 50%;
	position: absolute;
	top: 45%;
	transform: translate(-50%, -55%);
	text-align: center;
}
.description h1 {
	color: #b44646;
}
.description p {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.5;
}

.description button {
  border:1px solid #b44646;
  background:#b44646;
  border-radius: 0;
  color:#fff;
}
.description button:hover {
border:1px solid #fff;
  background:#fff;
  color:#000;
}

.features {
	margin: 4em auto;
	padding: 1em;
	position: relative;
}
.feature-title {
	color: #333;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.features img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
}

a:link:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: underline;
    cursor: pointer;
    cursor: hand;
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar {
    width: 100% !important;
    padding: 0;
}
.nav-link{
  color: white;
}
.fa-envelope {
  color:white;
}

.fa-linkedin {
  color:white;
}

.fa-github {
  color:white;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}
/*Add mobile code for navbar below*/

/*--------------------------------------------------------------
# Header Section
--------------------------------------------------------------*/
.header {
  position: relative;
  background-color: #343a40;
}

.header .header-title {
  font-weight: 600;
  text-align: center;
  padding: 30vh;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .header .header-title {
    font-size: 4.5rem;
  }
}

/*--------------------------------------------------------------
# WTR Styling
--------------------------------------------------------------*/

.sectionTitle{
  font-weight: bold;
  font-size: 36px;
  font-style: italic;
  color: #c20430;
  margin: auto;
}

.sectionBody{
  font-size: 20px;
  margin: auto;
}

.goals{
  font-weight: bold;
  font-size: 24px;
  font-style: italic;
  margin: auto;
}

.wtr1{
  color: #ffc72a;
}

.wtr2{
  color: #373634;
}

hr.coloredwtr1{
  border: 0;   /* in order to override TWBS stylesheet */
  height: 5px;
  background: -moz-linear-gradient(left, rgba(0,0,0) 0%, rgba(0,0,0) 33.3%, rgba(194,4,48) 33.3%, rgba(194,4,48) 66.7%, rgba(255,199,42) 66.7%, rgba(255,199,42) 100%);  /* FF3.6+ */
  background: -webkit-linear-gradient(left, rgba(0,0,0) 0%, rgba(0,0,0) 33.3%, rgba(194,4,48) 33.3%, rgba(194,4,48) 66.7%, rgba(255,199,42) 66.7%, rgba(255,199,42) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(0,0,0) 0%, rgba(0,0,0) 33.3%, rgba(194,4,48) 33.3%, rgba(194,4,48) 66.7%, rgba(255,199,42) 66.7%, rgba(255,199,42) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(0,0,0) 0%, rgba(0,0,0) 33.3%, rgba(194,4,48) 33.3%, rgba(194,4,48) 66.7%, rgba(255,199,42) 66.7%, rgba(255,199,42) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(0,0,0) 0%, rgba(0,0,0) 33.3%, rgba(194,4,48) 33.3%, rgba(194,4,48) 66.7%, rgba(255,199,42) 66.7%, rgba(255,199,42) 100%); /* W3C */
}

hr.coloredwtr2{
  border: 0;   /* in order to override TWBS stylesheet */
  height: 5px;
  background: -moz-linear-gradient(left, rgb(55, 54, 52) 0%, rgb(55, 54, 52) 33.3%, rgb(217, 45, 41) 33.3%, rgb(217, 45, 41) 66.7%, rgb(212, 213, 215) 66.7%, rgb(212, 213, 215) 100%);  /* FF3.6+ */
  background: -webkit-linear-gradient(left, rgb(55, 54, 52) 0%, rgb(55, 54, 52) 33.3%, rgb(217, 45, 41) 33.3%, rgb(217, 45, 41) 66.7%, rgb(212, 213, 215) 66.7%, rgb(212, 213, 215) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgb(55, 54, 52) 0%, rgb(55, 54, 52) 33.3%, rgb(217, 45, 41) 33.3%, rgb(217, 45, 41) 66.7%, rgb(212, 213, 215) 66.7%, rgb(212, 213, 215) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgb(55, 54, 52) 0%, rgb(55, 54, 52) 33.3%, rgb(217, 45, 41) 33.3%, rgb(217, 45, 41) 66.7%, rgb(212, 213, 215) 66.7%, rgb(212, 213, 215) 100%); /* IE10+ */
  background: linear-gradient(to right, rgb(55, 54, 52) 0%, rgb(55, 54, 52) 33.3%, rgb(217, 45, 41) 33.3%, rgb(217, 45, 41) 66.7%, rgb(212, 213, 215) 66.7%, rgb(212, 213, 215) 100%); /* W3C */
}

.featureImage{
  margin-top: 120px;
}

input[type=submit], button {
    cursor: pointer;
    cursor: hand;
}
@media(max-width: 900px) {
    html {
        font-size: 14px !important;
        width: 80% !important;
    }
}
@media(max-width: 480px) {
    html {
        font-size: 12px !important;
        width: 90% !important;
    }
}
@media(max-width: 320px) {
    html {
        font-size: 12px !important;
        width: 100% !important;
    }
}



/* Featurettes
------------------------- */

.featurette-divider {
  padding-left: 10%;
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* Footer
------------------------- */

.bg-body-tertiary{
  background-color: #343a40;
  color: white;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@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;
  }
}