img{
  max-width: 100%;
  max-height: 100%;
}

button, .modal_actions{
  font-size: 1.2rem;
  width: 10rem;
  padding: 0.5rem;
  font-weight: bold;
  cursor: pointer;

}

#contact{
  font-family: inherit;
  padding-bottom: 0;
  color: white;
  max-width: 85%;
  margin-top: 1rem;
}

#contact h1{
  font-size: 1.2rem;
}

#contact form{
  display:flex;
  flex-direction: column;
  margin:0 auto;
  background-color:#9CA0A3;

}

form{
  display: flex;
  flex-direction: column;
  margin:0 auto;
  background-color:#9CA0A3;
}

#contact label{
  color: white;
  margin-top: 1.2rem;
}


#contact input, textarea, select{
  margin-top: 1.2rem;
  color:rgb(45, 59, 83);
  font-size: 1rem;
  /*font-weight: bold;*/
  border: 1px solid #162947;
  /*font: inherit;*/
  /* background: white; */
  padding: .2rem .5rem;
}

#contact input:invalid, select:invalid, textarea:invalid{
  background: rgba(75, 100, 140, .5);
}


#contact input:focus,select:focus,textarea:focus{
  outline: none;
  background:white;
  border-color: white;
}

#contact button{
  margin-top: 1.2rem;
  margin: 1.5rem auto;
  color:white;
  background: rgba(75, 100, 140, 1.0);
  border-color: rgba(75, 100, 140, 1.0);

}

#contact button[disabled]{
  cursor: not-allowed;
  border: rgba(75, 100, 140, .5);
  background: rgba(75, 100, 140, .5);
  color: #a1a1a1;
}

/** MODAL and Backdrop styling ***/
.backdrop{
  z-index:150;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(22,41,71,0.80);

}

.modal {
  position: fixed;
  width: 40%;
  z-index: 200;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

  background: #9CA0A3;
  padding: 1rem;
  border: 1px solid grey;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.modal__title {
  text-align: center;
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight:lighter;
}

.modal__actions {
  text-align: center;
  width:100%;
  border: #162947;
  background:#162947;
  color: white;
  /*font: inherit;
  padding: 0.5rem 1rem;
  cursor: pointer;
  */
}

.modal__action{

  text-decoration: none;
  color: white;

}




/*****  Media Queries   *****/

/************ @media ******************************/


/* use this image UNTIL the screen is 1k wide */
/*@media screen and (max-width: 1000px){
    .testimonialImage{
      background-image:url("../images/clients-mobile.jpg");
    }
}
*/
@media screen and (max-width : 375px)
{

}

@media screen and (max-height:420px) and (orientation: landscape){

/*img{
  border: 2px solid white;
}
*/
header{
  height:10%;
}

}

/* do this UNTIL the screen is 622 wide*/
@media screen and (min-width : 375px) and (max-width:622px)
{
  #contact{
    width: 424px;
  }
}

@media screen and (min-width: 623px) and (max-width: 917px)
{
  #contact{
    width: 505px;
  }

}

@media screen and (min-width: 918px) and (max-width: 1215px)
{
  #contact{
    width: 802px;
  }

}
/* when the width gets to 1500 pixels, do this **/
@media screen and (min-width: 1216px){
  #contact{
    width: 1100px;
  }

}
/** iphone 5,6,7,8 and x in landscape mode**/
@media screen and (max-width:812px) and (orientation: landscape){



}

/** iphone 5 only ***/
@media screen and (max-width:570px) and (orientation: landscape){

}
/* ipad landscape */
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1300px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {


}
/* ipad pro landscape */
@media only screen
  and (min-device-width: 1300px)
  and (max-device-width: 1400px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {


}

/** START: MailChimp Updates **/
.greyboxSection .contact-form,
.greyboxSection .contact-form div {
  padding: 0;
}
.contact-form label {
    display: block;
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 98%;
  background: rgba(75, 100, 140, .5);
  border: 1px solid #162947;
}

#contact #mc-embedded-subscribe,
#contact #btn-submit {
  display: table;
  width: 10rem;
  margin: 1.5rem auto;
  padding: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  background: rgba(75, 100, 140, 1.0);
  border: rgba(75, 100, 140, 1.0);
}
.contact-responses {
  margin-top: 20px;
}
.error {
  color: #b00;
  font-weight: bold;
}
.success {
  color: #080;
  font-weight: bold;
}
/** END: MailChimp Updates **/