section {display: flex; padding: 5%;}

p.subheading {font-size: 20px; line-height: 32px; padding-bottom: 30px;}

/* INTRO ********************************************************************/
h1 {font-size: 48px; font-weight: 600; color: var(--blue);}

.hr {
  display: inline-block;
  width: 200px;
  border-top: 3px solid var(--green);
  margin: 40px 0 30px;
}

#intro {
  min-height: calc(100vh - 127px);
  color: #ffffff;
  text-align: center;
  background: url("/landing/contact/speaker.png") right center no-repeat;
  background-size: cover;
}
#intro > div {margin: auto 0;}
#intro p {max-width: 600px;}

/* CONTACT ********************************************************************/
#contact {flex-direction: column; background-color: var(--light-blue);}

.white-shadow {
  display: inline-block;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.77); /* rgba for Safari transparency */
  box-shadow: 0 0 3px 7px rgba(255, 255, 255, 0.77);  /* rgba for Safari transparency */
}

h2 {
  text-align: center;
  font-size: 48px;
  font-weight: 600;
  color: var(--blue);
  margin: 0 10px 10px;
}

.flex-row {
  display: flex;
  flex-direction: column;
}

#contact > div > div {margin: 10px;}
h3 {
  text-align: center;
  font-size: 24px;
  color: var(--blue);
  margin-bottom: 15px;
}

/* Option 1: email link */
#address {flex-grow: 1; text-align: center;}
#address a {font-size: 24px; font-weight: 700; color: #000000;}

/* Option 2: email form */
#form {flex-grow: 3;}
.thirds {width: 100%;}
#telephone {margin-right: 0;}
#form .flex-row input {flex-grow: 1;}
#subject {width: 100%;}
#message {width: 100%; resize: vertical;}

/* PHOTOS *******************************************************************/
#photos {
  display: inherit;
  text-align: center;
  position: relative;
  background: url("/landing/contact/code.png") center no-repeat;
  background-size: cover;
}
#photos .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/landing/contact/paperwork.jpg") center no-repeat;
  mask-image: linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* this line is useless but avoids error messages in IDE */
  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  background-size: cover;
}
#photos div.content {position: relative; z-index: 1;}

#photos h2 {text-align: center;}
#photos p {
  color: var(--blue);
  padding: 10px;
  margin: 30px 0 50px;
  background-color: rgba(255, 255, 255, 0.77); /* rgba for Safari transparency */
  box-shadow: 0 0 3px 7px rgba(255, 255, 255, 0.77);  /* rgba for Safari transparency */
}
#photos .flex-row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#photos .flex-row > div {width: 250px; height: 250px; margin: 20px 0;}

#photo1 {
  background: url("/landing/contact/1.png") center no-repeat;
  background-size: cover;
}
#photo2 {
  background: url("/landing/contact/2.png") center no-repeat;
  background-size: cover;
}
#photo3 {
  background: url("/landing/contact/3.png") center no-repeat;
  background-size: cover;
}
#photo4 {
  background: url("/landing/contact/4.png") center no-repeat;
  background-size: cover;
}

/* MEDIA QUERIES ************************************************************/
@media only screen and (min-width: 490px) {
  /* CONTACT */
  .thirds {width: calc(33.249% - 9px);}
}

@media only screen and (min-width: 768px) {
  /* INTRO */
  h1,
  h2 {font-size: 64px;}
  #intro,
  h2 {text-align: left;}
}

@media only screen and (min-width: 1200px) {
  /* CONTACT */
  #contact .flex-row {flex-direction: row;}
}