/* INTRO ********************************************************************/
#intro {
  display: flex;
  min-height: calc(100vh - 127px);
  color: #ffffff;
  background: url("/landing/about/architecture.jpg") center no-repeat;
  background-size: cover;
  padding: 5%;
}
#intro > div {margin: auto;}
h1 {text-align: center; font-size: 48px; font-weight: 600; color: var(--blue);}
#intro .hr {
  display: inline-block;
  text-align: center;
  width: 200px;
  border-top: 3px solid var(--green);
  margin: 40px 0 30px;
}
#intro p {
  max-width: 900px;
  font-size: 20px;
  line-height: 32px;
  padding: 0 0 30px;
  margin: 0 auto;
}

/* VISION *******************************************************************/
#vision-values h2 {
  text-align: center;
  font-size: 36px;
  color: var(--blue);
  margin: 0 0 30px;
}
#vision-values p {font-size: 18px; line-height: 1.7em; margin-bottom: 36px;}
#vision-values > div {
  padding: 3%;
  margin: 5% 5% 0;
  background-color: rgba(255, 255, 255, 0.9); /* rgba for Safari transparency */
  box-shadow: 0 0 3px 7px rgba(255, 255, 255, 0.9);  /* rgba for Safari transparency */
}
#vision-values > div:last-of-type {margin: 5%;}
#values {float: right;}
#vision-values:after {content: ""; display: table; clear: both;}
#vision-values .background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("/landing/about/contemporaryConference.jpg") center no-repeat;
  background-size: cover;
  margin: 0%;
}

/* QUOTES *******************************************************************/
#quotes {background-color: #ffffff}
.forty-percent {
  display: flex;
  justify-content: center;
  color: #ffffff;
  background-color: var(--light-green);
  padding: 70px 20px 50px;
}
.forty-percent p:first-of-type {font-size: 30px; font-weight: 500;}
.open-quote {font-family: Georgia, "Times New Roman", monospace; font-size: 100px; line-height: 0rem;}
.forty-percent p span:after {content: "\A"; white-space: pre;}
.sixty-percent {height: 380px;}

#geometric {
  background: url("/landing/about/geometric.png") center no-repeat;
  background-size: cover;
}
#buildingNew {
  background: url("/landing/about/buildingNew.jpeg") center no-repeat;
  background-size: cover;
}

/* MEDIA QUERIES ************************************************************/
@media only screen and (min-width: 490px) {
  #vision-values > div {width: 60%;}
  .forty-percent {padding: 100px 80px;}
}

@media only screen and (min-width: 768px) {h1 {font-size: 64px;}}

@media only screen and (min-width: 992px) {
  #quotes > div >div {margin: 3px;}
  .row-container {display: flex;}
  .forty-percent {width: 40%;}
  .sixty-percent {width: 60%; height: initial;}
  .first {order: 1;}
  .second {order: 2;}
}