body {
  background: #50c5ff;
  color:#000;
}

.navbar {
  border-bottom: #008ed6 3px solid;
  font-size: 1.25rem;
  color: #fff;
  opacity: 0.85;
  padding: 0.2rem 0.2rem;
}


div.services-text {
  font-size: 1.5rem;
  text-shadow: 2px, 2px, 1px rgb(0, 136, 79);
}

span.rates {
  font-size: 2.3rem;
  text-shadow: 3px 3px 2px rgb(0, 136, 79);
  
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
  opacity: 0.85;
}

.trademark {
  text-align: center;
  font-style: bold;
  font-size: 1.5rem;
  color:rgb(0, 122, 35); 
  text-shadow:  3px 3px 2px rgb(255, 255, 255);
  padding-bottom: 60px; 
  margin:5px;
  
}


/* Progress Bar */
/* The progress container*/
.progress-container {
  position: fixed;
  top: 88px;
  z-index: 1;
  width: 100%;
  height: 8px;

  background: #ccc;
}

/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: rgb(255, 93, 44);
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color:rgb(255, 60, 0);
}


/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 50%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  width: 0%;
}



/*  
*  Carousel  
*/
#myCarousel {
  margin-top: 0px;
}

#carousel-titles {
  font: 700 32px/36px;
  font-family: "Open Sans";
}

.carousel-item {
  height: 450px;
}

.carousel-image-1 {
  background: :#008ed6;
  background-size: cover;
}

.carousel-image-2 {
  background: :#008ed6;
  background-size: cover;
}

.carousel-image-3 {
  background: #008ed6;
  background-size: cover;
}


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

#fixed-cellnumber:hover {
  box-shadow:  5px 5px 15px 0 #c0eaff;
}

#carusel-buttons:hover {
  box-shadow:  5px 5px 15px 0 #c0eaff;
}

#submit-btn {
  border-radius: 5px;
  margin: 10px 10px 50px 10px;
}

#submit-btn:hover {
  box-shadow:  5px 5px 15px 0 #ececec;
}

#myVideo {
  position: absolute;
    min-width: 100%;
    padding: 10px;
}

/* Style the container/contact section */
#reachover-section {
  border-radius: 5px;
  color: white;
  background: #50c5ff;
  text-shadow: 3px 3px 2px rgb(0, 136, 79);
  padding:30px;
  background-image:
    linear-gradient(to bottom, 
    white 0%, #50c5ff 15%);
}

#map {
  height: 500px;  /* The height is 400 pixels */
  width: 100%;  /* The width is the width of the web page */
  padding-left: 1rem;
 }

#contact-section {
  background: #fff;
  color: #000;
  padding: 5px;
  border-radius: 5px;
}

#rates-head-section {
  color: white; 
  background: #31b6f8;
  text-shadow: 3px 3px 2px rgb(0, 136, 79);
}

#leaveInfoComment {
  text-align:center; 
  font-weight: bold;
  font-size: 1.5rem;
  padding: 100px 30px 30px 30px;

  color:rgb(255, 255, 255); 
  text-shadow: 3px 3px 1px rgba(24, 63, 233, 0.801);
}

#main-footer {
  background-image: url('../img/footer-wide.png');
  background-size:100% 150px;
  height: 130px; 
  width:100%; 
  overflow:hidden;
}


#footer-black-box {
  background: rgb(17, 27, 27); 
  height: 10px; 
  width: 100%;
}

#img-text1 {
  font-weight: bold;
  font-size: 2.2;
  color: rgb(255, 255, 255);
  font-family: "Open Sans";
  text-shadow: 2px 2px 2px #ff7300;
}

#img-text2 {
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 1.5rem;
  font-family: "Open Sans";
  text-shadow: 2px 2px 2px #020303;
}

#call-us-text {
  text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.815);
  font-weight: bold;
}

/* 
*   Responsive layout 
*
* - when the screen is less than 600px wide, 
* - make the two columns stack on top of each other instead of next to each other 
*/

/* 
    Adaptive Content 
*/
@media screen and (max-width: 420px) { 
  .progress-container {
    position: fixed;
    top: 135px;
    z-index: 1;
    width: 100%;
    height: 8px;
    background: #ccc;
  }

  #leaveInfoComment { 
    padding: 40px 0 20px 0;
    font-size: 1.5rem;
  }

  .btn {
    font-size: 1rem;
  }

  span.rates {
    font-size: 1.4rem;
    text-shadow: 3px 3px 2px rgb(0, 136, 79);
    
  }
  h4.theRates {
    font-size: 1.5rem;
  }

  h5.asterisks {
    font-size: 1rem;
  }


  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }

  #img-text1 {
    font-size: 1.8rem;
  }
  #img-text2 {
    font-size: 1.2rem;
  }

  #map {
    height: 350px;  /* The height is 400 pixels */

   }
}

 @media screen and (min-width: 421px) {
  span.rates {
    font-size: 1.8rem;
    text-shadow: 3px 3px 2px rgb(0, 136, 79);
    
  }
  .theRates {
    font-size: 1.5rem;
  }

  .asterisks {
    font-size: 1.2rem;
  }

  .btn {
    font-size: 1rem;
  }



}
@media (min-width: 600px) {

}
@media (min-width: 800px) {
  span.rates {
    font-size: 2.2rem;  
  }

  h4.theRates {
    font-size: 1.8rem;
  }

  #leaveInfoComment { 
    padding: 100px;
    font-size: 2rem;
  }

  h4.asterisks {
    font-size: 1.8rem;
  }

  .btn {
    font-size: 1.2rem;
  }
}

@media (min-width: 1200px) {
  span.rates {
    font-size: 2.4rem;  
  }

  h4.theRates {
    font-size: 2rem;
  }
  h4.asterisks {
    font-size: 2rem;
  }

  .btn {
    font-size: 1.4rem;
  }
  
  #main-footer {
    background: #50c5ff;
    background-image: url('../img/footer-wide.png');
    background-size:100% 120px;
    height: 120px;
  }
}