#sequence {
	z-index: 0;
}

#sequence, #sequence > .sequence-canvas li > * {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#sequence .sequence-canvas > li { /* required */
    opacity: 0;
    width: 100%;
    height: 100%;
}

#sequence #slide {
z-index: 1;
opacity: 0;
}

#sequence .animate-in #slide {
z-index: 2;
opacity: 1;
transition: opacity .50s ease-in-out;
-moz-transition: opacity .50s ease-in-out;
-webkit-transition: opacity .50s ease-in-out;
   -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
     -o-transition-duration: 1s;
-ms-transition-duration: 1s;
    transition-duration: 1s;
}

#sequence .animate-out #slide {
	opacity: 0;
	z-index: 1;
	transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
}

#sequence .animate-in #slidebackground {
	opacity: 1;
	   -webkit-transition-duration: 0s;
	      -moz-transition-duration: 0s;
	     -o-transition-duration: 0s;
	-ms-transition-duration: 0s;
	    transition-duration: 0s;
}
#sequence .animate-in #slidecontents {
	   -webkit-transition-duration: 0s;
	      -moz-transition-duration: 0s;
	     -o-transition-duration: 0s;
	-ms-transition-duration: 0s;
	    transition-duration: 0s;
}

#sequence .growin {
  transform: translateZ(0) scale(0);
  transition-duration: .5s;
  transition-property: transform, opacity;
}

#sequence .seq-in .growin {
  transform: translateZ(0) scale(1);
}

#sequence .seq-out .growin {
  transform: translateZ(0) scale(1);
  opacity: 0;
}