html, body {
    height: 100vh;
    width: 100%;
    font-family: "Roboto", "Montserrat", "Quicksand", Helvetica, sans-serif;
    font-weight:400;

/* from https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
/* removes text selection, makes user experience nicer on touch screens */
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Old versions of Firefox */
   -ms-user-select: none; /* Internet Explorer & Edge */
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

}


/* TOP */

body {
    margin: 0;
    padding: 0;
    background:#fff;
    background: linear-gradient(to bottom, rgb(91,124,153,9), rgb(255,255,255,.4)), url('why_background.jpg') no-repeat center center fixed;
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

/* preload images from https://stackoverflow.com/questions/1373142/preloading-css-images */
body:after {
   position:absolute; width:10; height:10; overflow:hidden; display:block;z-index:-10;
   content:url(prob_desks.jpg) url(prob_faculty.jpg) url(prob_puzzle.jpg) url(prob_hr.jpg);
}

/* background splash image fixed doesn't work for mobile devices */ 
@media (hover: none) {
body {
        background-attachment: scroll;
    }
}

.top-bar {
  position:fixed;
  top:0;
  width:100vw;
  height:50px;
  background:#5b7c99;
  z-index:3;
  color:#eee;
  font-family:'Poppins';
}

.top-bar-title {
//  float:left;
  font-size:28.5pt;
  padding-left:40px;
  line-height:50px;
  display:inline-block;
}

.top-bar-logo {
  background:#5b7c99;
  display:inline-block;
  position:relative;
  border:1pt solid white;
  border-radius:50%;
  padding:3pt;
//  left:-15pt;
  top:1pt;
  font-size:28.5pt;
  line-height:50px;
}

.top-menu-wrapper {
  float:right;
  height:50px;
  line-height:50px;
  padding-right:min(5vw,75px);75px; /*REVISIT */
  position:relative;
  font-size:18.75pt;
}

.top-menu-item {
  padding:0px min(2vw,20px);
  display:inline-block;
}

.top-menu-link {text-decoration:none;color:inherit;cursor:pointer;}

.top-menu-link:hover {text-decoration:underline; color:#fff;}


.top-byline-wrapper {
 top: 25vh;
 position: absolute;
 padding-left: 10vw;
}

.top-byline-text {
  width: 600px;
  margin: 0;
  padding: 0;
  text-align:center;
  color:#eee;
  font-size:28pt;
  padding-top:100px;
  font-family:'Quicksand';
}

.flip {
  display:inline-block;
  padding-top: 3px;
  transform: rotate(180deg);
}

.downa.visible {
  bottom: 20px;
}

.downa {
  border: 3px solid #eee;
  border-radius: 50%;
  color: #5b7c99;
  text-align: center;
  
  bottom:-120px;
  display: block;
  right: 10%;
  margin-left: -50px;
  position: absolute;
  
  height: 50px;
  line-height: 50px;
  width: 50px;
  z-index:-1;
  
  -webkit-transition: bottom 1s ease;
  -moz-transition: bottom 1s ease;
  -o-transition: bottom 1s ease;
  transition: bottom 1s ease;  
  font-size:45px;
  cursor:pointer;
}

.downa:hover {
  opacity:0.6;
}

.wide-nowrap {
  white-space: nowrap;
}

.break {
  display:none;
}


/* GENERAL */

.content {
  margin: 0;
  padding:0;
  background: #fff;
  margin-top:100vh;
}


.section-wrapper {
  text-align:center;
  padding: 10px calc(100vw - 1380px) 100px 80px;
  position:relative;
  margin:auto;
}

.section-title-wrapper {
  text-align:left;
  padding:0;
  font-weight:400;
  color:#5b7a66;
  z-index:1;
  margin:20px 0;
  font-family:'Montserrat';
}

.section-title-bar {
  position:relative;
  float:left;
  width:16px;
  height:108px;
  background:#5b7a66;
  margin-right:20px;
}

.section-title-bar-circle-why, .section-title-bar-circle-what, .section-title-bar-circle-who {
  background:#eee;
  width:16px;
  height:16px;
  position:absolute;
  border-radius:50%;
}

.section-title-bar-circle-why {
  top:25px;
}

.section-title-bar-circle-what, .section-title-bar-circle-who {
  bottom:25px;
}

.section-title {
  font-size: 40pt;
  display:inline-block;
  font-weight:bold;
}

.section-bytitle {
  font-size:26pt;
  font-weight:normal;
}

.paragraph-wrapper {
  margin-top:30px;
  padding-bottom:20px;
  border-top:1px solid #5b7c99;
  border-bottom:1px solid #5b7c99;
  text-align:left;
  display:inline-block;
  width:100%;
}

.paragraph {
  font-size:20pt;
  margin-top:20px;
  width:calc(100% - 60px);
  padding: 0 20px 0 40px;
  display:inline-block;
}

.awesome {
  transition: transform .7s ease-in-out;
  font-size:30pt;
  margin-top:30px;
  color:#5b7a66;
}

.awesome:hover {
  transform: rotate(720deg);
}

.emph {
  font-weight:bold;
  font-style:italic;
}

.alink {
  color:blue;
  text-decoration:none;
}

.alink:hover {
  text-decoration:underline;
}

/* WHY */

.problems-text {
  position:absolute;
  width:60%;
  height:97%;
  padding:80px 140px 0 30px;
  padding-right:100px;
  left:0px;
  z-index:0;
  border-left:15px solid #704214;#5b7c99;
  font-size:18pt;
  text-align:left;
  background:#f4f1ed;
}

.problems-title {
  text-align:left;
  font-size:26pt;
  padding-top:10px;
  color:#704214;#5b7a66;
  position:absolute;
  top:0px;
  width:100%;
}

.problems-image {
  position:absolute;
  right:0;
  top:0;
  width:32%;
  height:100%;
  display:inline-block;
  vertical-align:top;
  background-size:50% 33.33% !important;
  //margin-right:10px;
}

.problems-image-faculty {
  min-height:100%;
  background:linear-gradient(0deg, rgba(112, 66, 20, 0.3), rgba(112, 66, 20, 0.3)), url('prob_faculty.jpg');
}

.problems-image-desks {
  min-height:100%;
  background:linear-gradient(0deg, rgba(112, 66, 20, 0.5), rgba(112, 66, 20, 0.5)), url('prob_desks.jpg');
}

.problems-image-puzzle {
  min-height:100%;
  background:linear-gradient(0deg, rgba(112, 66, 20, 0.5), rgba(112, 66, 20, 0.5)), url('prob_puzzle.jpg');
}

.problems-image-hr {
  min-height:100%;
  background:linear-gradient(0deg, rgba(112, 66, 20, 0.5), rgba(112, 66, 20, 0.5)), url('prob_hr.jpg');
}

/* WHAT */

.section-cards-wrapper {
  width 100%;
  padding-top:40px;
}

.card-wrapper {
  width:300px;
  margin:10px;
  margin-left:0px;
  position:relative;
  display:inline-block;
  vertical-align:top;
  text-align:center;
  border:1px solid black;
  height:500px;
  background:#fff
}

.card-pic-gen {
  width:100%;
  height:200px;
  background-size:cover;100% auto;
  background-position:center;
}

.card-pic-ta {
  background-image:url('ta.jpg');
}

.card-pic-summer {
  background-image:url('summer.jpg');
}

.card-pic-curriculum {
  background-image:url('curriculum.jpg');
}

.card-pic-process {
  background-image:url('process.jpg');
}

.card-title {
  font-size:20pt;
  padding-left:10px;
  padding-bottom:20px;
  padding-top:40px;
  text-align:left;
  font-weight:bold;
}

.card-text {
  font-size:14pt;
  padding:0 20px;
  text-align:left;
}

.card-learn-more {
  background:indigo;#36454f;goldenrod;#34788b;#5b7a66;
  color:white;
  text-align:center;
  font-size:14pt;
  padding:5px 0;
  width:100%;
  font-family:'Montserrat';
  white-space:nowrap;
  position:absolute;
  bottom:0;
  cursor:pointer;
}

.card-learn-more:hover {
  text-decoration:underline;
}

.card-overlay-wrapper {
  position:absolute;
  width:100%;
  height:300px;
  visibility:hidden;
  z-index:1;
  display:block;
  background:#36454f;#34788b;#5b7a66;
  color:eee;
  text-align:left;
}

.card-overlay-close {
  width:15pt;
  height:15pt;
  color:#eee;
  text-align:center;
  line-height:15pt;
  font-size:14pt;
  position:absolute;
  top:5px;
  border-radius:50%;
  right:10px;
  cursor:pointer;
  z-index:2;
}

.card-overlay-close::after {
  content:"\02715";
}

.card-overlay-close:hover {
  background:#7d9b99;
}

.card-overlay-text-wrapper {
  position:absolute;
  left:0;
  text-align:left;
  overflow-y:auto;
  height:100%;
}

.card-overlay-text {
  padding-left:20px;
  padding-right:20px;
  padding-bottom:40px;
}

.card-color-1 {
  color:#856197;#c23b23;
}

.card-color-2 {
  color:#5f956b;#f39a27;
}

.card-color-3 {
  color:#b27e41;#03c03c;
}

.card-color-4 {
  color:#b64b51;#976ed7;
}

.card-bg-1 {
  background:#856197;#c23b23;
}

.card-bg-2 {
  background:#5f956b;#f39a27;
}

.card-bg-3 {
  background:#b27e41;#03c03c;
}

.card-bg-4 {
  background:#b64b51;#976ed7;
}



/* WHO */

.team-wrapper {
  text-align:center;
  padding-top:30px;
  width:100%;height:230px;
}

.teammember {
  width:40%;
  height:280px;
  border-radius:7px;
  display:inline-block;
  margin:0 auto;
//  text-align:center;
  position:relative;
  font-family:'Quicksand';
  vertical-align:bottom;
}

.teammemberpic {
  position:absolute;
  bottom:0px;
  left:0;
  right:0;
  width:155px;height:auto;
  text-align:center;
  margin:0 auto;
}

.teammemberbio {
 white-space:normal !important;
 color: black;
 background:#ddd;
 padding-right:0px;
 height:100%;
 margin:0 auto;
 position:absolute;
 opacity:0;
 text-align:center;
 line-height:14pt;
 overflow:hidden;
 bottom:0;
 position:absolute;
 overflow-y:auto;
}

.teammembername {
  font-size:18pt;
  font-weight:bold;
  width:100%;
  background:#b8860b;goldenrod;#5b7a66;
  color:#eee;
  padding-top:15px;
}

.teammemberdegree {
  font-size:15pt;
  width:100%;
  background:#b8860b;goldenrod;#5b7a66;
  color:#eee;
  padding:10px;
}

.teammemberbiotext {
  font-size:16pt; 
  text-align:left;
  padding:15px;
}


.teammember:hover .teammemberbio {
  bottom: 0;
  -webkit-transition: all 0.5s, -webkit-transform 0.5s;
  transition: all 0.5s, transform 0.5s;
  opacity:.9;
}

.teammember:hover .teammemberpic {
  transform: rotateY(180deg);
}

.teammembermail {
  color:blue;
  padding-left:10px;
  position:absolute;
  font-size:0pt;
  transition-property:font-size;
}

.teammember:hover .teammembermail {
  font-size:18pt;
  transition-delay: 0.5s;
  transition:0.5s;
}

.teammembermail:hover {opacity:1;}


@media screen and (max-width: 1375px) {

.section-wrapper {
  padding: 10px calc(100vw - 1320px) 100px 20px;
}

}


@media screen and (max-width: 1340px) {


.problems-title {
  font-size: 22pt;
}

.problems-text {
  font-size: 16pt;
}

}

@media screen and (max-width: 1295px) {

.section-cards-wrapper {
  width:640px;
  margin:auto;
}

.teammember {
  width:45%;
}

}


@media screen and (max-width: 1230px) {

.problems-image {
  background-size:50% 33.33% !important;
}


}


@media screen and (max-width: 1000px) {

/* Font decrease ~10% */

.top-byline-text {
  font-size:24pt;
}

.section-title {
  font-size: 36pt;
}

.section-title-bar {
  height:95px;
}

.section-bytitle {
  font-size:23.4pt;
}

.paragraph {
  font-size:18pt;
}

.problems-text {
  font-size: 15pt;
}

.problems-title {
  font-size:20pt;
}

}

@media screen and (max-width: 800px)

{

.top-byline-text {
  font-size:22pt;
}


.section-title {
  font-size:32.4pt;
}

.section-title-bar {
  height:84px;
}

.section-bytitle {
  font-size:20.5pt;
}

.paragraph {
  font-size: 16pt;
}

.problems-text {
  padding-left:7px;
  font-size: 14pt;
}

.problems-list-wrapper {
  width:480px;
}

.problems-title {
  font-size:16pt;
}

.problems-image {
  background-size:100% 50% !important;
}


.section-title-bar {
  width:14px;
  margin-right:16px;
}

.section-title-bar-circle-why, .section-title-bar-circle-what, .section-title-bar-circle-who {
  width:14px;
  height:14px;
}

.section-title-bar-circle-why {
  top:15px;
}

.section-title-bar-circle-what, .section-title-bar-circle-who {
  bottom:15px;
}


.teammember {
  width:47%;
  height:250px;
}

.teammembername {
  font-size:16pt;
}

.teammemberdegree {
  font-size:13pt;
}

.teammemberbiotext {
  font-size:14pt; 
}


.teammember:hover .teammembermail {
  font-size:16pt;
  transition-delay: 0.5s;
  transition:0.5s;
}



}



@media screen and (max-width: 680px) {

.section-wrapper {
  padding: 10px 2px 60px 2px;
}


.problems-text {
  padding-top:50px;
}

.problems-image {
  background-size:100% 33.33% !important;
}


.downa {
  margin-left: -50px;
  position: absolute;
  
  height: 30px;
  line-height: 30px;
  width: 30px;
  
  font-size:25px;
  padding-top:4px;

  bottom:-120px;
}

.downa.visible {
  bottom: 100px;
}


/* begin revisit 680 */

.top-menu-wrapper {
  height:40px;
  line-height:40px;
  padding-right:2vw;
  font-size:16pt;
}

.top-bar {
  height:40px;
}

.top-bar-title {
  font-size:26px;
  //padding-left:20px;
  height:40px;
  line-height:40px;
}

.top-byline-wrapper {
 top: 15vh;
 position: absolute;
 padding-left: 2vw;
}

.top-byline-text {
  width: 95vw;
  padding-top:70px;
  font-size:18pt;
}

.section-title {
  font-size:29pt;
}

.section-bytitle {
  font-size:18pt;
}

.paragraph {
  width:calc(100% - 30px);
  font-size:14pt;
  padding:0 15px;
}

.section-title-bar {
  height:72px;
  margin-right:8px;
}

.narrow-nowrap {
  white-space:nowrap;
}

.problems-item {
  font-size:11pt;
}

.section-cards-wrapper {
  width:302px;
}



/* End revisit 680 */

.card-title {
  padding-top: 10px;
  font-size:18pt;
  padding-bottom: 10px
}

.card-text {
//  font-size:14pt;
}


.teammember {
  width:49%;
}

.teammemberpic {
  width:145px;
}

.teammembername {
  font-size:14pt;
  padding-top:10px;
}

.teammemberdegree {
  font-size:12pt;
  padding:5px 0;
}

.teammemberbiotext {
  font-size:12pt; 
}


.teammember:hover .teammembermail {
  font-size:14pt;
  transition-delay: 0.5s;
  transition:0.5s;
}



}



@media screen and (max-width: 530px) {


.break {
  display:unset;
}


.top-byline-text {
  font-size:16pt;
}

.section-title {
  font-size: 22pt;
}


.section-bytitle {
  font-size:14pt;
}

.section-title-bar {
  height:62px;
}

.problems-text {
  font-size: 12pt;
}

.card-wrapper {
//  margin:2px;
  height:350px;
}

.card-pic-gen {
  height:150px;
//  background-size:100% 100%;
}

.card-text{
  font-size:12pt;
}

.card-overlay-wrapper {
  height:200px;
}
.teammemberbio {
  transform:translateY(30px);
  height:220px;
}

}

@media screen and (max-width: 480px) {


.top-menu-wrapper {
  height:30px;
  line-height:30px;
  padding-right:1vw;
  font-size:16px;
}

.top-bar {
  height:30px;
}

.top-bar-title {
  font-size:20px;
  padding-left:10px;
  height: 30px
  line-height:30px;
}

.top-bar-logo {
//  left: -5pt;
}

.wide-nowrap {
  white-space:normal;
}

.section-title {
  font-size: 20pt;
}


.section-bytitle {
  font-size:13pt;
}

.section-title-bar {
  height:58px;
}

.problems-image {
  margin-right:0px;
  background-size:100% 25% !important;
}

.teammember {
  height:175px;
  width:49%;
}

.teammemberpic {
  width:100px;
}

.teammembername {
  font-size:13pt;
  padding:5px 0 0 2px;
}

.teammemberdegree {
  font-size:11pt;
  padding:0;
}

.teammemberbiotext {
  padding: 2px;
  font-size:11pt; 
}


.teammember:hover .teammembermail {
  font-size:12pt;
  transition-delay: 0.5s;
  transition:0.5s;
}

}


@media screen and (max-width: 420px) {

.problems-text {
  font-size: 11pt;
}

.problems-title {
  font-size: 14pt;
}

}