* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
html, body {
  overflow-x: hidden;
}
a {
  color: #00c77b;
}
.font-style {
  font-size: larger;
  font-weight: 600;
}
a:hover {
  text-decoration: none;
  color: #4affba;
}
.container-fluid {
  padding: 0;
}
/* Index CSS */
.header-img {
max-width: 50%;
position: relative;
right: 30vw;
opacity: 0;
}
.header-text {
display: inline-block;
position: relative;
right: 60vw;
opacity: 0;
font-size: 3vh;
}
.header {
background-color: #2D6072;
color: white;
height: auto;
margin: 0;
padding: 2rem;
padding-bottom: 0%;
}
.navbar {
background-color: #2D6072;
}
div.header {
margin-top: 2rem;
}
#omg {
  max-height: 250px;
}
.close {
position: absolute;
top: 65px;
right: 35px;
color: #ffffff;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.about {
  padding: 25px;
  color: #2D6072;
}
.logos {
  bottom: 1vh;
  opacity: 0;
}
.stationary {
  max-height: 500px;
}
.services {
background-color:#2D6072;
color: white;
}
.service-text {
margin: 0 auto;
padding: 2rem;
}
.blurb {
margin: 25% 0;
}
#blurb {
  margin: 0 auto;
  text-align: center;
  color: rgb(168, 168, 168);
  }
.blurb-text {
font-size: 1.5rem;
}
.icons {
 margin: 0 auto;
 max-width: 50%;
}
.list {
 list-style-type: none;
}
.service-div {
 position: relative;
 right: 30vw;
 opacity: 0;
}
.imgs {
   max-height: 85%;
   max-width: 85%;
}
.tagline {
 color: #2D6072;
 font-size: 2.5rem;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 top: 50px;
 margin-bottom: 2vh;
}
div.col-sm-12 {
  margin-bottom: 2rem;
}
.web {
  max-width: 100%;
  transition: .5s ease;
}
div#web1, div#web2, div#web3 {
  opacity: 0;
}
div#stat1, div#stat2 {
  opacity: 0;
}
.col-sm-4:hover .overlay {
  opacity: .7;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
div.col-sm-12 {
  padding: 30px;
}
div.col-sm-6 h2 {
color: #2D6072;
}
.footer {
  background-color: #2D6072;
  color: white;
  margin-bottom: 0;
}
i {
  margin: 0 20px;
}
.foottext {
margin: 0 25px;
margin-bottom: 10px;
}
/* Form CSS */
.form-group {
width: 75%;
margin: 0 auto;
margin-top: 5px;
font-size: 18px;
color: #2D6072;
font-weight: 700;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 5px;
font-size: 16px;
border: 2px solid rgba(128, 128, 128, 0.199);
margin-top: 5px;
}
button[type="submit"] {
width: 75%;
border: none;
padding: 10px;
font-size: 20px;
color: #2D6072;
margin: 20px 0px;
}
button[type="submit"]:hover {
background-color: #2D6072;
color: white;
transition: .3s;
}
#status {
  width: 75%;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 10px;
}
#status.success {
  background-color: rgb(211, 250, 153);
  animation: status 4s ease forwards;
}
#status.error {
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}
@keyframes status {
  0% {
    opacity: 1;
    pointer-events: all;
  }
  90% {
    opacity: 1;
    pointer-events: all;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

/* Gallery CSS */
.col-md-3 {
padding: 0px;
margin: 0px;
height: auto;
text-align: center;
color: white;
}
.col-md-2 {
padding: 0px;
margin: 0px;
height: auto;
text-align: center;
color: white;
}
.img {
opacity: 1.0;
transition: 0.3s;
}
.overlay {
position: absolute;
top: 0%;
background-color: black;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
transition: 0.3s;
z-index: 1;
}
.overlayText {
position: relative; 
font-size: 1.5rem;
margin: 50% 0%;
}
.overlay:hover {
opacity: .7;
}
.web:hover .overlay {
opacity: .7;
}
/* Modal */
.modal {
display: block;
visibility: hidden;
opacity: 0;
z-index: 1;
position: fixed;
overflow: auto;
width: 100%;
height: 100%;
}
.modal-content {
position: relative;
background-color: #000000;
background-blend-mode: darken;
margin: auto;
padding: 0;
width: 100%;
height: 100%;
padding: 2rem;
border-radius: 0px;
border-style: none;
background-attachment: fixed;
}  
.modalImg {
width: 100%;
max-width: 500px;
display: block;
margin: auto;
}
.mySlide {
  display: none;
  margin: auto;
}
.numbersText {
position: absolute;
top: 0;
color: white;
padding: 5px;
}
#caption {
margin: auto;
text-align: center;
color: white;
font-size: 1rem;
font-weight: 700;
}
.imgBlurb {
display: none;
}
.blurb {
margin: auto;
text-align: center;
font-size: 1rem;
padding: 25px;
}

/* Modal controls  */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
cursor: pointer;
z-index: 2;
}
.close:hover, .close:focus {
color: white;
border-style: double;
border-width: 2px;
border: white;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -50px;
font-size: 35px;
color: white;
border-radius: 0px 3px 3px 0px;
padding: 5px;
}
.next {
right: 31px;
border-radius: 0px 3px 3px 0px;
}
.prev:hover, .next:hover {
background-color: rgb(0, 0, 0, 0.8);
text-decoration: none;
}