/* CSS that is only loaded on the homepage */

/* Text Styles and Utilities*/
.brand-font {
  font-family: "benton-sans", "sf-pro-display", "Helvetica", "Arial", "sans-serif";
  font-weight: 400;
}
body .body-text {
  font-size: 1.575rem;
  line-height: 1.175;
}
body .body-2-text {
  font-size: 1.33rem;
  line-height: 1.175;
  color: #ffffff;
}
body .body-3-text {
  font-size: 1.5rem;
  line-height: 1.175;
}
.headline-text {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
}
.display-text {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
}
.strong-text {
  font-weight: 900;
  font-size: 1.65rem;
  line-height: 1.15;
}
.caption-text {
  font-size: 1.1rem;
  line-height: 1.2;
}
.text-center {
  text-align: center;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.link {
  font-weight: 600;
  color: #0099cc;
}
.link:hover {
  color: #addd00;
}
.quote-outdent {
  text-indent: -0.8ch;
}

/* Colors */
.light-color {
  color: #fff;
}
.dark-color {
  color: #222;
}
.mid-color {
  color: #666666;
}
.tint-1 {
  color: #0099cc;
  fill: #0099cc;
}
.tint-2 {
  color: #addd00;
  fill: #addd00;
}
.tint-3 {
  color: #40b649;
  fill: #40b649;
}
.tint-4 {
  color: #ff0000;
  fill: #ff0000;
}

.tint-5 {
  color: #ffff34;
  fill: #ffff34;
}

@media screen and (max-width: 700px) {
  body .body-text { font-size: 1.125rem }
  body .body-2-text { font-size: 1rem }
  .headline-text { font-size: 1.5rem }
  .display-text { font-size: 1.8rem }
  .caption-text { font-size: 0.875rem }
}

/* ---------------------------------------------------------- */

/* Scene and Layout Utilities */
.scene-canvas {
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}
.scene-background {
  background: transparent no-repeat center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
}
.scene-mask {
  overflow: hidden;
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.layout-between {
  justify-content: space-between;
}
.layout-center {
  justify-content: center;
}
.label-offset {
  margin-top: 1rem;
}
.headline-offset {
  margin-bottom: 1rem;
}
.footer-offset {
  margin-top: 2.5rem;
}
.footer-offset-more {
  margin-top: 2.5rem;
}
.icon-size {
  height: 2.25rem;
  width: auto;
}
.large-icon-size {
  height: 3rem;
  width: auto;
}

/* ---------------------------------------------------------- */

/* Scene 1: Heroes */
#s1-heroes {
  margin-top: -70px;
}
#s1-heroes .scene-background {
  background-color: #fff;
}
#s1-obj-introtext {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 6.0%;
  z-index: 2;
  width: 31%;
  height: 100%;
}
.s1-tagline {
  position: absolute;
  height: 28.33%;
  z-index: 4;
}
.s1-tagline svg {
  height: 100%;
  width: auto;
}
#s1-obj-tagline1 {
  right: 67.5%;
  bottom: 34%;
  margin-right: 10px;
}
#s1-obj-tagline2 {
  left: 32.5%;
  bottom: 10.5%;
  margin-left: 10px;
}
.s1-hero-a,
.s1-hero-b {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 32.5%;
  background: transparent no-repeat right;
  background-size: cover;
}
.s1-hero-a {
  right: 67.5%;
}
.s1-hero-b {
  background-position: left;
  left: 32.5%;
}
.s1-hero {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: transparent no-repeat right;
  background-size: cover;
}

#s1-obj-hero1-a { background-image: url(../images/s1-hero3-a.jpg); z-index: 2; right: 70% }
#s1-obj-hero1-b { background-image: url(../images/s1-hero3-b.jpg); z-index: 2; left: 30%}

#s1-obj-hero2-a { background-image: url(../images/s1-hero2-a.jpg) }
#s1-obj-hero2-b { background-image: url(../images/s1-hero2-b.jpg) }

#s1-obj-hero3-a { background-image: url(../images/s1-hero1-a.jpg) }
#s1-obj-hero3-b { background-image: url(../images/s1-hero1-b.jpg) }

@media screen and (max-width: 700px) {
  .s1-hero-a,
  .s1-hero-b {
    top: 0;
    bottom: 30%;
    width: 50%;
  }
  .s1-hero-a {
    right: 50%;
  }
  .s1-hero-b {
    left: 50%;
  }
  #s1-obj-introtext {
    left: 0;
    right: 0;
    top: 70%;
    width: auto;
    height: 30%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-top: 1px solid #eee;
  }
  .s1-tagline {
    height: 20%;
  }
  #s1-obj-tagline1 {
    right: 50%;
    bottom: 50%;
  }
  #s1-obj-tagline2 {
    left: 50%;
    bottom: 33.5%;
  }
}

/* ---------------------------------------------------------- */

/* Scene 2: Three Pillars 1 */
#s2-pillars-1 {
  background: #263547 url(../images/s2-bg1.jpg) no-repeat center;
  background-size: cover;
  color: #fff;
}
#s2-obj-headline {
  position: absolute;
  bottom: 55%;
  right: 50%;
  width: 35%;
  padding-right: 8px;
  text-align: right;
}
#s2-obj-introtext {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 40%;
  padding-left: 8px;
}
#s2-obj-centerline {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgb(40,54,51);
  background: linear-gradient(180deg, rgba(40,54,51,1) 0%, rgba(173,221,0,1) 37%, rgba(173,221,0,1) 100%);
}
#s2-obj-scrim1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: rgba(0,0,0,0.22);
}
.s2-tag {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 10px 18px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1.5px solid;
}
#s2-obj-tag1,
#s2-obj-tag2,
#s2-obj-tag3 {
  position: absolute;
}
#s2-obj-tag1 {
  right: 50%;
  bottom: 6.7rem;
  margin-right: -1px;
}
#s2-obj-tag2 {
  left: 50%;
  bottom: 4.1rem;
}
#s2-obj-tag3 {
  right: 50%;
  bottom: 1.5rem;
  margin-right: -1px;
}

@media screen and (max-width: 700px) {
  #s2-obj-centerline {
    top: 55%;
    height: 45%;
  }
  #s2-obj-headline {
    right: 1.5rem;
    left: 1.5rem;
    bottom: 65%;
    width: auto;
    text-align: left;
  }
  #s2-obj-introtext {
    right: 1.5rem;
    left: 1.5rem;
    top: 35%;
    width: auto;
    padding-left: 0;
    padding-top: 1rem;
  }
  .s2-tag {
    font-size: 0.92rem;
    padding: 6px 12px;
  }
  #s2-obj-tag1 {
    bottom: 8.7rem;
  }
  #s2-obj-tag2 {
    bottom: 6.55rem;
  }
  #s2-obj-tag3 {
    bottom: 4.5rem;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s2-pillars-1 .body-text {
    font-size: 1.25rem;
  }
  #s2-pillars-1 .headline-text {
    font-size: 2rem;
  }
}

/* ---------------------------------------------------------- */

/* Scene 3: Three Pillars 2 */
#s3-obj-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #006499;
  background-size: cover;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 56%;
}
#s3-obj-header > * {
  width: 100%;
  max-width: 800px;
}
#s3-obj-body {
  display: flex;
  align-items: stretch;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  background: #006499;
  color: #ffffff;
}
#s3-obj-body > * {
  width: 33.33%;
  padding: 3.5% 5.5%;
}
#s3-obj-body::after,
#s3-obj-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 33.33%;
  width: 1px;
  height: 100%;
  background: rgb(173,221,0);
  background: linear-gradient(180deg, rgba(173,221,0,0) 0%, rgba(173,221,0,1) 25%, rgba(173,221,0,1) 75%, rgba(173,221,0,0) 100%);
}
#s3-obj-body::after {
  left: 66.67%;
}
.s3-more-offset {
  margin-top: 1rem;
}
@media screen and (min-width: 701px) {
  .s3-more-offset {
    margin-top: 5rem;
  }
}
@media screen and (min-width: 1400px) {
  #s3-obj-header {
    padding-top: 5rem;
  }
  #s3-obj-header .strong-text {
    font-size: 4vmin;
  }
  #s3-obj-header .body-text {
    font-size: 3vmin;
  }
}
@media screen and (max-width: 700px) {
  #s3-pillars-2 .scene-canvas {
    height: auto;
  }
  #s3-obj-header,
  #s3-obj-body {
    position: static;
  }
  #s3-obj-body {
    flex-direction: column;
    text-align: center;
  }
  #s3-obj-body::after,
  #s3-obj-body::before { display: none }
  #s3-obj-body > * {
    width: auto;
    padding: 1.5rem;
  }
  #s3-obj-body > * {
    border-top: 1px solid rgb(173,221,0);
  }
  #s3-obj-body .body-3-text {
    font-size: 1.25rem;
  }

  .footer-offset-more {
    margin-left: -30%;
  }
}

/* ---------------------------------------------------------- */

/* Scene 4: Experiences 1 */
#s4-experiences-1 {
  color: #fff;
}
#s4-obj-bg1 {
  background-image: url(../images/s4-bg1.jpg);
  z-index: 1;
}
#s4-obj-bg2 {
  background-image: url(../images/s4-bg2.jpg);
}
#s4-obj-mask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
}
#s4-obj-content {
  position: absolute;
  left: 7%;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 37.5%;
}
@media screen and (max-width: 700px) {
  #s4-experiences-1 {
    background: #fafafa;
  }
  #s4-obj-bg1,
  #s4-obj-mask {
    top: 0%;
    height: 50%;
  }
  #s4-obj-bg2 {
    height: 100%;
  }
  #s4-obj-content {
    padding-top: 1.5rem;
    top: 50%;
    right: 1.5rem;
    left: 1.5rem;
    bottom: 0;
    width: auto;
  }
  #s4-obj-content {
    color: #0099cc;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s4-experiences-1 .body-text {
    font-size: 1.25rem;
  }
  #s4-experiences-1 .headline-text {
    font-size: 2rem;
  }
}

/* ---------------------------------------------------------- */

/* Scene 11: Experiences 3: Success at MSU */
#s11-success {
  background: #000;
  color: #fff;
}
#s11-obj-bg1 {
  background-image: url(../images/s11-bg1.jpg);
  z-index: 1;
}
#s11-obj-bg2 {
  left: auto;
  right: 0;
  background-image: url(../images/s11-bg2.jpg);
}
#s11-obj-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
}
#s11-obj-content {
  position: absolute;
  right: 7%;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 37.5%;
}
@media screen and (max-width: 700px) {
  #s11-success {
    background: #fafafa;
  }
  #s11-obj-bg1,
  #s11-obj-mask {
    top: 0%;
    height: 50%;
  }
  #s11-obj-bg2 {
    height: 100%;
  }
  #s11-obj-content {
    padding-top: 1.5rem;
    top: 50%;
    right: 1.5rem;
    left: 1.5rem;
    bottom: 0;
    width: auto;
  }
  #s11-obj-content {
    color: #0099cc;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s11-success .body-text {
    font-size: 1.25rem;
  }
  #s11-success .headline-text {
    font-size: 2rem;
  }
}

/* ---------------------------------------------------------- */

/* Scene 5: Experiences 2 */
#s5-experiences-2 {

}
#s5-obj-bg1 {
  background-image: url(../images/s5-bg1.jpg);
  z-index: 1;
}
#s5-obj-bg2 {
  background-image: url(../images/s5-bg2.jpg);
}
#s5-obj-mask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34%;
  z-index: 2;
}
#s5-obj-content {
  position: absolute;
  right: 8%;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 35.5%;
}
@media screen and (max-width: 700px) {
  #s5-experiences-2 {
    background: #fafafa;
  }
  #s5-obj-bg1,
  #s5-obj-mask {
    top: 0%;
    height: 50%;
  }
  #s5-obj-bg2 {
    height: 100%;
  }
  #s5-obj-content {
    padding-top: 1.5rem;
    top: 50%;
    right: 1.5rem;
    left: 1.5rem;
    bottom: 0;
    width: auto;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s5-experiences-2 .body-text {
    font-size: 1.25rem;
  }
  #s5-experiences-2 .headline-text {
    font-size: 2rem;
  }
}

/* ---------------------------------------------------------- */

/* Scene 6: Program Aspire */
#s6-program-aspire-it {

}
#s6-obj-bg1 {
  background-image: url(../images/s6-bg1.jpg);
  z-index: 1;
}
#s6-obj-bg2 {
  left: auto;
  right: 0;
  background-image: url(../images/s6-bg2.jpg);
}
#s6-obj-mask {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}
#s6-obj-stat {
  position: absolute;
  left: 15%;
  top: 29.2%;
  height: 28%;
  width: 100%;
  z-index: 3;
}
#s6-obj-stat svg {
  height: 100%;
  width: auto;
}
#s6-obj-body {
  position: absolute;
  top: 60%;
  left: 32%;
  width: 50%;
  z-index: 3;
}
#s6-obj-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  z-index: 3;
}
.learn-more-text {
  color: #fff;
  margin-left: 20px;
  top: 52%;
  position: absolute;
  font-size: 1.25rem;
}
@media screen and (max-width: 700px) {
  #s6-obj-mask {
    height: 40%;
  }
  #s6-obj-stat {
    top: 7%;
    left: 1.5rem;
    right: 1.5rem;
    width: auto;
  }
  #s6-obj-stat svg {
    width: 100%;
  }
  #s6-obj-body {
    top: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 1.5rem;
    background: rgba(0,0,0,0.66);
  }
}

/* ---------------------------------------------------------- */

/* Scene 7: Program TIJ */
#s7-program-cfc {

}
#s7-obj-bg1 {
  background-image: url(../images/home-tij-bg1.jpg);
  z-index: 1;
}
#s7-obj-bg2 {
  top: auto;
  bottom: 0;
  background-image: url(../images/home-tij-bg2.jpg);
}
#s7-obj-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 41%;
  width: 100%;
  z-index: 2;
}
#s7-obj-stat {
  position: absolute;
  left: 0;
  top: 14%;
  height: 34%;
  width: 100%;
  z-index: 3;
}
#s7-obj-stat svg {
  height: 100%;
  width: auto;
}
#s7-obj-headline {
  position: absolute;
  left: 11.5%;
  top: 59%;
  z-index: 3;
  margin-top: -0.9em;
}
#s7-obj-body {
  position: absolute;
  left: 30.6%;
  bottom: 15%;
  z-index: 3;
  width: 32%;
}
#s7-obj-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  z-index: 3;
}
@media screen and (max-width: 700px) {
  #s7-obj-bg1,
  #s7-obj-bg2 {
    background-position: 65% 10%;
  }
  #s7-obj-mask {
    height: 60%;
  }
  #s7-obj-stat {
    left: 1.5rem;
    right: 1.5rem;
    top: 5%;
    height: 30%;
    width: auto;
  }
  #s7-obj-stat svg {
    width: 100%;
  }
  #s7-obj-headline {
    top: 40%;
    left: 0;
    right: 0;
    padding: 1.5rem;
    margin-top: 0;
  }
  #s7-obj-body {
    left: 0;
    bottom: auto;
    right: 0;
    top: 50%;
    width: auto;
    padding: 1.5rem;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s7-program-cfc .body-2-text {
    font-size: 1.1rem;
  }
  #s7-obj-body {
    width: 40%;
    bottom: 18%;
  }
}

/* ---------------------------------------------------------- */

/* Scene 12: Program Aspirations in Computing */
#s12-program-aic {

}
#s12-obj-bg1 {
  background-image: url(../images/s12-bg1.jpg);
  z-index: 1;
}
#s12-obj-bg2 {
  top: auto;
  bottom: 0;
  background-image: url(../images/s12-bg2.jpg);
}
#s12-obj-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 41%;
  width: 100%;
  z-index: 2;
}
#s12-obj-stat {
  position: absolute;
  left: 0;
  top: 14%;
  height: 34%;
  width: 66%;
  z-index: 3;
}
#s12-obj-stat svg {
  height: 100%;
  width: auto;
}
#s12-obj-headline {
  position: absolute;
  left: 11.5%;
  top: 59%;
  z-index: 3;
  margin-top: -0.9em;
}
#s12-obj-body {
  position: absolute;
  left: 30.6%;
  bottom: 20%;
  z-index: 3;
  width: 32%;
}
#s12-obj-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  z-index: 3;
}
@media screen and (max-width: 700px) {
  #s12-obj-bg1,
  #s12-obj-bg2 {
    background-position: 65% 10%;
  }
  #s12-obj-mask {
    height: 60%;
  }
  #s12-obj-stat {
    left: 1.5rem;
    right: 1.5rem;
    top: 5%;
    height: 30%;
    width: auto;
  }
  #s12-obj-stat svg {
    width: 100%;
  }
  #s12-obj-headline {
    top: 40%;
    left: 0;
    right: 0;
    padding: 1.5rem;
    margin-top: 0;
  }
  #s12-obj-body {
    left: 0;
    bottom: auto;
    right: 0;
    top: 50%;
    width: auto;
    padding: 1.5rem;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s12-program-aic .body-2-text {
    font-size: 1.1rem;
  }
  #s12-obj-body {
    width: 40%;
    bottom: 18%;
  }
}

/* ---------------------------------------------------------- */

/* Scene 8: Program Sit With Me */
#s8-program-sit {

}
#s8-obj-bg1 { background-image: url(../images/s8-bg2.jpg) }
#s8-obj-bg2 { background-image: url(../images/s8-bg1.jpg) }
#s8-obj-headline {
  position: absolute;
  right: 60.6%;
  bottom: 20.5%;
  z-index: 3;
}
#s8-obj-body {
  position: absolute;
  left: 55.4%;
  bottom: 8.5%;
  width: 34.8%;
}
#s8-obj-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  z-index: 3;
}
@media screen and (max-width: 700px) {
  #s8-obj-bg1,
  #s8-obj-bg2 {
    bottom: auto;
    height: 65%;
    background-position: 35% 50%;
  }
  #s8-obj-headline {
    right: 1.5rem;
    left: 1.5rem;
    bottom: 36%;
    width: auto;
  }
  #s8-obj-body {
    top: 65%;
    right: 1.5rem;
    bottom: auto;
    left: 1.5rem;
    width: auto;
  }
}

@media screen and (min-width: 700px) and (max-height: 760px) {
  /* For small desktop screens */
  #s8-program-sit .body-2-text {
    font-size: 1rem;
  }
  #s8-program-sit .strong-text {
    font-size: 1.4rem;
  }
}

/* ---------------------------------------------------------- */

/* Scene 9: Stats */
#s9-stats {
  background: rgb(51,102,153);
  background: linear-gradient(180deg, rgba(51,102,153,1) 0%, rgba(30,102,157,1) 40%, rgba(13,41,63,1) 100%);
  color: #fff;
}
.s9-caption {
  position: absolute;
  left: 30%;
  top: 68%;
  width: 40%;
}
.s9-stat {
  position: absolute;
  top: 9.25%;
  left: 0;
  right: 0;
  height: 49%;
  text-align: center;
}
.s9-stat svg {
  height: 100%;
  width: auto;
}
#s9-obj-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  z-index: 3;
}
@media screen and (max-width: 700px) {
  .s9-stat {
    left: 8%;
    right: 5%;
  }
  .s9-stat svg {
    width: 100%;
  }
  .s9-caption {
    top: 63%;
    left: 1.5rem;
    right: 1.5rem;
    width: auto;
  }
}

/* ---------------------------------------------------------- */

/* Scene 10: Bias and Diversity */
#s10-hooks {
  background: #104e39;
  color: #fff;
  overflow-x: hidden;
}
#s10-obj-bg1 {
  width: 160vw;
  background-image: url(../images/s10-bg1.jpg);
  left: auto;
  right: 0;
}
.s10-keyword {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  z-index: 2;
  text-align: center;
}
.s10-keyword svg {
  height: 100%;
  width: 100%;
}
.s10-letter {
  transform-origin: center;
}
.s10-caption {
  position: absolute;
  left: 30%;
  top: 61.5%;
  width: 40%;
  z-index: 4;
}
#s10-obj-bias {
  height: 22%;
}
#s10-obj-diversity {
  height: 27.7%;
}
#s10-obj-culture {
  height: 21.8%;
}
#s10-obj-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  z-index: 3;
}
@media screen and (max-width: 700px) {
  .s10-keyword {
    top: 36%;
  }
  .s10-caption {
    top: 56%;
    left: 1.5rem;
    right: 1.5rem;
    width: auto;
  }
  #s10-obj-bias {
    height: 19vmin;
  }
  #s10-obj-diversity {
    height: 24vmin;
  }
  #s10-obj-culture {
    height: 19vmin;
  }
}