#App > :nth-last-child(2){
  /*padding-bottom: 15vh;*/  /* This used to be used to make sure padding was at the botom, but with the satisfaction guarantee container it just causes problems*/
}

.App {
  text-align: center;
}


.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}


/*Garrett's additions*/

.hidden{display:none;}

h1, h2, h3, h4, h5, h6{
    font-family: "Lato", Verdana, Arial, sans-serif;
}

p, div, span{
    font-family: "Montserrat", Verdana, Arial, sans-serif;
}


/* PLAUSIBLE WOMEN'S HEALTH COLOR TEMPLATE */
/* Color Theme Swatches in Hex */
.Womens-March-1-hex { color: #EF6270; } /*Orangish... slightly darker*/
.Womens-March-2-hex { color: #734052; } /*Soft purple. Also nice.*/
.Womens-March-3-hex { color: #213443; } /*Dark blue. Nice color.*/
.Womens-March-4-hex { color: #F4EAC8; } /*Whiteish*/
.Womens-March-5-hex { color: #F15F60; } /*Orangeish, slightly lighter*/

/* END PLAUSIBLE WOMEN'S HEALTH COLOR TEMPLATE */

/* Components */
.button, .button:hover, .button:focus{
  background-color: #63FBE0;
  color: #000;
  border-radius: 3px;
  margin-bottom: 0; 
}


/*Main page*/

#main-container {
  min-height: 90vh;
  /*background-color: #213343;*/
}

#left-main-container, #right-main-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#left-main-container.player-started {
    /*align-items:baseline; */ /* use for */
}

#left-main-container {
  background-color: #FB637E;
  min-height: 40vh;
  padding-top: 12vh;
  padding-bottom: 25vmin;
  transition: width 2s;
  position: relative;
}

#logo-container{
  position: absolute;
  top: 1vw;
  padding: 1vw;
  width: 100%;
  display: flex;
}

#logo-container img{
  max-height: 1.75rem;
  max-width: 40vw;
}

#logo-container img:hover{
  cursor: pointer;
}

.gumroad-container{
  position: absolute;
  right: 1vw;
}

@media only screen and (min-width: 40em) and (max-width: 64em) {
  #main-left-content {
    max-width: 85%;
  }
}


@media only screen and (min-width: 64em) {
  #main-left-content {
    max-width: 75%;
  }
}

  


#main-left-content h1, main-left-content h2{
  font-size: calc(2rem + 1vmax);
  line-height: 1.1;
}

#main-left-content h3{
  font-size: 100%;
  font-size: calc(0.5rem + 1vmax);
}
#main-pg-cta .button{
  padding: 0.75rem;
  /*background-color: #FB637E;*/
}

#main-pg-cta p, #main-pg-cta .button a {
  margin-bottom: 0;
  line-height: .75;
}

#main-pg-cta p{
  color: #4E5B73;
}
#main-pg-cta #get-reminder-button-container.button{
  background-color: #fff;
  border: solid 1px #0083FF;
}

#main-pg-cta .button a{
  color: #0083FF;
  line-height: .9;
}
#main-pg-cta p span, #main-pg-cta .button a span {
  font-size: 0.7rem; 
  font-style: italic;
  color: #aaa;
  margin-bottom: 0;
}

#right-main-container {
  background-color: #4E5B73; /* a light blue */
  background-color: #213343;
}

#right-main-container .grid-y{
  height: 100%;
  justify-content: space-evenly;
  padding-top: 1rem;
  padding-bottom: 1rem;
}


@media only screen and (min-width: 40em) {
  #right-main-container .grid-y{
    height: 80%;
    width: 100%;
    justify-content: space-evenly;
    transition: width 1s;
  }
}

#right-main-container .grid-y.expanded{
  width: 80%;
  transition: width 1s;
}

#right-main-container.player-started .grid-y.expanded{
  width: 100%;
  height: 100%;
  transition: width 1s;
}

@media only screen and (max-width: 40em) {
  #right-main-container .grid-y.expanded{
    width: 100%;
  }
}

#right-main-container .grid-y.contracted{
  width: 0%;
  transition: width 1s;
}


@media only screen and (max-width: 40em) {
  #left-main-container.player-started, #right-main-container.player-started{
  }

  #left-main-container.player-started{
    min-height: 35vh;
    transition: min-height 1s;
  }

  #right-main-container.player-started{
    transition: height 1s;
  }
}

q{
  color: #fff;
}

.quote-container{
  align-items: flex-start;
}

.quote-container > img{
  width: 4.8vw;
}

#right-main-container .quote-container .quote-text {
  overflow: hidden;
  max-height: 10.5rem;
}

#grant-list{
  margin-top: 3vh;
}

.grant-img-container{    
  align-self: center; /*fixes a stupid chrome behavior that stretches images*/
}


.play-button{
  margin: 0 auto;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  /*border-width: 6vmax 0 6vmax 11vmax;*/
  border-width: 3rem 0 3rem 5rem;
  border-color: transparent transparent transparent #63FBE0;
  cursor: pointer;
  z-index: 3;
}

.pause-button{
  border-style: double;
  /*border-width: 0rem 0 0rem 12vmax;*/
  border-width: 0rem 0 0rem 6rem;
  height: 6rem;
  cursor: pointer;
  border-color: #63FBE0;
  margin: 0 auto;
  z-index: 3;
  width:0;
}


#survey-container, #survey-container h3, #survey-container p{
  color: #fff;
}







/* Science section */

#the-scientist, #the-book{
  position: relative;
}


#science-section-container, #faq-container, .section-container, #benefits-section-container{
  padding-top: 15vh;
  background-color: #213343; /* a dark blue*/
  background-color: #E6EBF5; /* a very light blue (basically off-white) */
  background-color: #F0F3FA; /* an extremely light blue (nearly white) */

}

#science-section-container h1, #science-section-container h2, #science-section-container p, #science-section-container span{
  color: #fff;
  color: #213343; /* a dark blue */
}

#science-section-container p , #benefits-section-container p {
  color: #4E5B73; /* a light blue */
}

#science-section-container h2, #faq-container h2, #benefits-section-container h2{
  font-weight: 900;
  font-size: 1.25rem;
}
.section-header, #science-section-header{
  padding-bottom: 10vh;
}


#science-section-container h3, #science-section-container h4, #benefits-section-container h3, #benefits-section-container h4, .section-container h3, .section-container h4 {
    color: #FB637E; /* orange-y pink */
}

#science-section-container h3, #benefits-section-container h3{
  font-size: 1.5rem;
  font-weight: 700;
}

#science-section-container h4, #benefits-section-container h4{
    font-size: 1rem;
    font-weight: 700;
}

#the-science-container > .cell, #the-benefits-container > .cell {
    margin-bottom: 5vh;
}

#science-section-container .science-caption, #benefits-section-container .caption{
  color: #aaa;
  text-align: left;
}