.scroll-fade {
   opacity: 0;
   -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 2s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-fade.is-visible {
  opacity: 1;

}


.scroll-fade-2 {
   opacity: 0;
   -webkit-transition: opacity .6s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .6s .25s ease-out,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1),
              opacity .6s .25s ease-out;
  transition: transform 2s .25s cubic-bezier(0,1,.3,1),
              opacity .6s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-fade-2.is-visible {
  opacity: 1;

}


.scroll-slide-left {
   opacity: 0;
  -webkit-transform: translateX(-20%) rotateZ(0deg);
          transform: translateX(-20%) rotateZ(0deg);
  -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);
  transition: transform 3s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 3s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-left.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}

.scroll-slide-right {
   opacity: 0;
  -webkit-transform: translateX(20%) rotateZ(0deg);
          transform: translateX(20%) rotateZ(0deg);
  -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-right.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}


.scroll-slide-up {
   opacity: 0;
  -webkit-transform: translateY(20%) rotateZ(0deg);
          transform: translateY(20%) rotateZ(0deg);
  -webkit-transition: opacity .3s .25s ease-in,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-up.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);

}


.scroll-slide-up-stagger {
   opacity: 0;
  -webkit-transform: translateY(20%) rotateZ(0deg);
          transform: translateY(20%) rotateZ(0deg);
  -webkit-transition: opacity .3s .25s ease-in,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 3s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 3s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 3s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-up-stagger.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);

}

.scroll-slide-up-delay1 {
   opacity: 0;
  -webkit-transform: translateY(20%) rotateZ(0deg);
          transform: translateY(20%) rotateZ(0deg);
  -webkit-transition: opacity .9s .25s ease-in,
              -webkit-transform 6s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .9s .25s ease-out,
              -webkit-transform 6s .25s cubic-bezier(0,1,.3,1);
  transition: transform 6s .25s cubic-bezier(0,1,.3,1),
              opacity .9s .25s ease-out;
  transition: transform 6s .25s cubic-bezier(0,1,.3,1),
              opacity .9s .25s ease-out,
              -webkit-transform 6s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-up-delay1.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);

}

.scroll-slide-up-delay2 {
   opacity: 0;
  -webkit-transform: translateY(20%) rotateZ(0deg);
          transform: translateY(20%) rotateZ(0deg);
  -webkit-transition: opacity .3s .25s ease-in,
              -webkit-transform 8s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 8s .25s cubic-bezier(0,1,.3,1);
  transition: transform 8s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 8s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 8s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-up-delay2.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);

}

.scroll-slide-down {
   opacity: 0;
  -webkit-transform: translateY(-100%) rotateZ(0deg);
          transform: translateY(-100%) rotateZ(0deg);
  -webkit-transition: opacity .3s .25s ease-in,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 2s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);

  will-change: transform, opacity;
}

.scroll-slide-down.is-visible {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);


.hover-up:hover {
  -webkit-transform: translateY(-4%) ;
          transform: translateY(-4%) ;
}





/***** iPhone (landscape) *****/
@media only screen and (max-width: 720px) {

	.scroll-slide-up {
	   opacity: 0;
	  -webkit-transform: translateX(-20%) translateY(0) rotateZ(0deg);
	          transform: translateX(-20%) translateY(0) rotateZ(0deg);
	  -webkit-transition: opacity .3s .25s ease-in,
	              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
	  transition: opacity .3s .25s ease-out,
	              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
	  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
	              opacity .3s .25s ease-out;
	  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
	              opacity .3s .25s ease-out,
	              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
	
	  will-change: transform, opacity;
	}
	
	.scroll-slide-up.is-visible {
	  opacity: 1;
	  -webkit-transform: rotateZ(0deg);
	          transform: rotateZ(0deg);
}
}









.main-photo {
  -webkit-transform: scale(.8);
          transform: scale(.8);
}

.heading {
  -webkit-transform: translate(-50%, calc(-50% + 1em));
          transform: translate(-50%, calc(-50% + 1em));
}

.is-visible .main-photo {
  -webkit-transform: none;
          transform: none;
}

.is-visible .heading {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.main-photo, .heading {
  -webkit-transition: -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1), -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);

  will-change: transform;
}