@import url(https://fonts.googleapis.com/css?family=Montserrat);

@font-face {
  font-family: Moderne Sans;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moderne_sans.woff2);
}


html, body {
  overflow: hidden;
}

a {
text-decoration: none;
color: inherit;
}

header {
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    transition: 0.8s;
    z-index: 20;
    line-height: 2;
}

header:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #000;
}

h1 {
  font-family: Moderne Sans, sans-serif;
  text-align: center;
  font-size: 2rem;
  width: 100%;
  letter-spacing: 0.5rem;
}

nav a {
  text-decoration: none;
  color: inherit;
  padding: 1rem;
}

.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%;
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}
.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("../cup-1.jpg");*/
  transform: translateY(-15vh);
}
.background:first-child .content-wrapper {
  transform: translateY(15vh);
}
.background:nth-child(2) {
  /*background-image: url(https://i.postimg.cc/W14vywqg/photo-1424746219973-8fe3bd07d8e3.jpg);*/
}
.background:nth-child(3) {
/*  background-image: url(https://i.postimg.cc/TY0xQ41T/photo-1433840496881-cbd845929862.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: flex;
  justify-content: center;
  text-align: center;
  flex-flow: column nowrap;
  color: #fff;
  font-family: Montserrat;
  text-transform: uppercase;
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}

.video-box video {
	width: 100%;
	height: auto;
}

.content-title {
    font-size: 12vh;
    line-height: 1.4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
}

.content-subtitle {
	position: absolute;
    width: fit-content;
    transform: translateX(-50%);
    left: 50%;
    top: 63%;
}

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

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

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

	.content-title {
		font-size: 6vh;
		line-height: 1.4;
	}

}