@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Roboto|Roboto+Slab:400,700&display=swap');

html, body {
overflow: hidden;
}

.background {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
will-change: transform;
-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
height: 130vh;
position: fixed;
width: 100%;
-webkit-transform: translateY(30vh);
  transform: translateY(30vh);
-webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
background-color: #05244d !important;
}
.container {
width: 100% !important;
padding: 0 !important;
}
.background:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.background:first-child {
background-image: url(https://www.auburn.edu/cosam/resources/stratplan/auburnsign-stratplan.jpg);
-webkit-transform: translateY(-15vh);
  transform: translateY(-15vh);
}
.background:first-child .content-wrapper {
-webkit-transform: translateY(15vh);
  transform: translateY(15vh);
}
.background:nth-child(2) {
background-image: url(https://www.auburn.edu/cosam/resources/physics/dennis-classroom.jpg);
}
.background:nth-child(3) {
background-image: url(https://www.auburn.edu/cosam/resources/future-students.jpg);
}

/* Set stacking context of slides */
.background:nth-child(1) {
z-index: 3;
}

.background:nth-child(2) {
z-index: 2;
}

.background:nth-child(3) {
z-index: 1;
}

.content-wrapper {
height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
  justify-content: center;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
  flex-flow: column nowrap;
color: #fff;
font-family: 'Roboto Slab', serif;
text-transform: uppercase;
-webkit-transform: translateY(40vh);
  transform: translateY(40vh);
will-change: transform;
-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
-webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}
.content-title {
font-size: 12vh;
line-height: 1.4;
}

.background.up-scroll {
-webkit-transform: translate3d(0, -15vh, 0);
  transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
-webkit-transform: translateY(15vh);
  transform: translateY(15vh);
}
.background.up-scroll + .background {
-webkit-transform: translate3d(0, 30vh, 0);
  transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper {
-webkit-transform: translateY(30vh);
  transform: translateY(30vh);
}

.background.down-scroll {
-webkit-transform: translate3d(0, -130vh, 0);
  transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
-webkit-transform: translateY(40vh);
  transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) {
-webkit-transform: translate3d(0, -15vh, 0);
  transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
-webkit-transform: translateY(15vh);
  transform: translateY(15vh);
}