section * {
	transition: all .8s;
}

#intro {
	height: 100%;
}

#skip-intro-button {
	position: absolute;
	width: 100px;
	height: 22px;
	border: solid 2px hsla(0, 0%, 0%, 0.2);
	color: hsla(0, 0%, 0%, 1.0);
	border-radius: 30px;
	line-height: 22px;
	text-align: center;
	bottom: 15px;
	right: 30px;
	font-size: 13px;
	cursor: pointer;
	
	-webkit-transition: color .4s, border .4s, opacity .4s;
	-moz-transition: color .4s, border .4s, opacity .4s;
	transition: color .4s, border .4s, opacity .4s;
	

	opacity: 0;
	z-index: 1000;
}

#skip-intro-button:hover {
	border: solid 2px hsla(0, 0%, 0%, 1.0);
	color: hsla(0, 0%, 0%, 1.0);
}

#intro .content {
	background-image: url('images/wagner.png');
	background-position: right center;
	background-size: auto 3.25in;
}

#custom {
}

#custom .content {
	background-image: url('images/custom.png');
	background-position: right center;
	background-size: auto 3.25in;
	/*width: 960px;*/
	background-position: left center;
}

#custom .text-container {
	margin-left: 3.55in;
}

#custom .content p {
	/*width: 285px;*/
	width: 360px;
}

#custom .content aside {
	width: 350px;
}

#custom .content aside a
{
	cursor: pointer;
	color: #08c;
}

#exceed {
	min-height: 0;
	height: 0;
	border: none;

	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  hsla(0,0%,0%,0.05) 0%, hsla(0,0%,0%,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,0%,0.05)), color-stop(100%,hsla(0,0%,0%,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); /* IE10+ */
background: linear-gradient(to top,  hsla(0,0%,0%,0.00) 0%,hsla(0,0%,0%,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */

}

#exceed .text-container {
	width: 100%;
	text-align: right;
}

#exceed .text-container .text {
	width: 100%;
	height: 0in;
}

#exceed .content {
	border: solid 1px #4d5a69;
	border-radius: 5px;
}

#exceed .text-container .text h1 {
	padding: .5in 0;
	font-size: 15px;
	width: 700px;
	line-height: 1.6em;
	text-align: center;
	color: #4d5a69;
	/*border-top: solid 2px hsla(0, 0%, 0%, 0.10);*/
}


#customized .content {
	background-image: url('images/customized.png');
	background-position: right center;
	background-size: auto 3.25in;
}

#customized .content:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	left: 0;
	
	background-image: url('images/wagner.png');
	background-position: right center;
	background-size: auto 3.25in;
	background-repeat: no-repeat;

	transition: opacity 1.5s;
}

#customized.mint .content:after {
	opacity: 0;
}

#heat-the-tray-movie {
	position: absolute;
	right: 0;
	height: 100%;
}


@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 

	video {
		display: none;
	}
}

@media only screen  and (min-device-width : 414px) and (max-device-width : 736px) {

	video {
		display: none;
	}	
}

#heat-the-tray.animated {
	background-image: url('images/heat-the-tray.gif'); background-size: auto 100%;
	background-position: right;
}

#cool-the-tray-movie {
	position: absolute;
	left: 0;
	/*z-index: -100;*/
	height: 100%;
}

#cool-tray.animated {
	background-image: url('images/cool-the-tray.gif');
	background-size: auto 100%;
	background-position: left;
}

#add-material.animated {
	background-image: url('images/add.gif');
	background-size: auto 100%;
	background-position: left;
}

#trim-material.animated {
	background-image: url('images/cut.gif');
	background-size: auto 100%;
	background-position: right;
}

#stretch-tray .content p {
	width: 300px;
}


#stretch-tray.animated {
	background-image: url('images/stretch.gif');
	background-size: auto 100%;
	background-position: right;
}


#place-in-mouth.animated {
	background-image: url('images/place-in-mouths.png');
	background-size: auto 100%;
	background-position: center;
}

#make-final.animated {
	background-image: url('images/final.gif');
	background-position: right center;
	background-size: auto 100%;
}

/*#make-final .content {
	background-image: url('images/customized.png');
	background-position: right center;
	background-size: auto 3.25in;
}*/

#material-is-key.animated {
	background-image: url('images/flex.gif');
	background-size: auto 100%;
	background-position: left;
}

#material-is-key .text-container {
	margin-left: 50%;
}

#place-in-mouth .text-container {
	margin-left: 50%;
}

#add-material .content {
	background-position: left center;
}

#add-material .text-container {
	margin-left: 50%;
}

#cool-tray .text-container {
	margin-left: 50%;
}

#intro .text-container {
	-webkit-transform: perspective(600px);
	-moz-transform: perspective(600px);
	transform: perspective(600px);
}

#summary {
	/*background: hsla(0, 0%, 90%, 1.0);*/
	height: 180px;
	min-height: 180px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}

#summary .content {
	width: 860px;
	border-radius: 10px;
}

#summary p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	font-size: 15px;
}

#summary p strong {
	white-space: nowrap;
}

#summary a {
	white-space: nowrap;
	color: #08c;
}

#summary a:after {
	content: '\25BA';
	font-size: .5em;
	padding-left: 5px;
	top: -1px;
	position: relative;
}

#summary a:hover {
	text-decoration: underline;
}

#slides {
	position: absolute;
	height: 100px;
	width: 50%;
	right: 0;
	top: 50%;
	margin-top: -50px;
	opacity: 0;

	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;

	-webkit-transform: translateX(100%) perspective(600px) rotateY(90deg);
	-moz-transform: translateX(100%) perspective(600px) rotateY(90deg);
	transform: translateX(100%) perspective(600px) rotateY(90deg);
}

.slide {
	opacity: 1;
	position: absolute;

	font-size: 24px;
	line-height: 29px;
	color: #4d5a69;

	text-align: left;

	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	transform-origin: center bottom;

	-webkit-transform: perspective(600px) rotateX(-90deg);
	-moz-transform: perspective(600px) rotateX(-90deg);
	transform: perspective(600px) rotateX(-90deg);
}


.goToSlide0 .content {
	background-position: center !important;
}

/*text container out */
.goToSlide0 .text-container {
	margin-left: -50%;

	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	transform-origin: right center;

	-webkit-transform: perspective(600px) rotateY(-90deg) !important;
	-moz-transform: perspective(600px) rotateY(-90deg) !important;
	transform: perspective(600px) rotateY(-90deg) !important;

	opacity: 0;
}

/* FIRST SLIDE */

/*slides in */
.goToSlide1 #slides {
	opacity: 1;

	-webkit-transform: rotateY(0) !important;
	-moz-transform: rotateY(0) !important;
	transform: rotateY(0) !important;
}

/* Skip Intro Button */
.goToSlide1 #skip-intro-button {
	opacity: 1;
}

/*text container out */
.goToSlide1 .text-container {
	margin-left: -50%;

	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	transform-origin: right center;

	-webkit-transform: perspective(600px) rotateY(-90deg) !important;
	-moz-transform: perspective(600px) rotateY(-90deg) !important;
	transform: perspective(600px) rotateY(-90deg) !important;

	opacity: 0;
}

/*scoot the background over */
.goToSlide1 .content {
	background-position: left center !important;
}

/* transform slide 1 in */
.goToSlide1 #slide1 {
	-webkit-transform: perspective(600px) rotateX(0deg);
	-moz-transform: perspective(600px) rotateX(0deg);
	transform: perspective(600px) rotateX(0deg);
}

/* Slide 2 */

/* change to the customized tray */
.goToSlide2 .content {
	background-image: url('images/customized.png') !important;
}

/*hide the fist slide */
.goToSlide2 #slide1 {
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	transform-origin: center bottom;

	-webkit-transform: perspective(600px) rotateX(90deg) !important;
	-moz-transform: perspective(600px) rotateX(90deg) !important;
	transform: perspective(600px) rotateX(90deg) !important;

	opacity: 0;
}

/*show the second */
.goToSlide2 #slide2 {
	-webkit-transform: perspective(600px) rotateX(0) !important;
	-moz-transform: perspective(600px) rotateX(0) !important;
	transform: perspective(600px) rotateX(0) !important;
}

/* SLIDE 3 */

/*hide the second slide */
.goToSlide3 #slide2 {
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	transform-origin: center bottom;

	-webkit-transform: perspective(600px) rotateX(90deg) !important;
	-moz-transform: perspective(600px) rotateX(90deg) !important;
	transform: perspective(600px) rotateX(90deg) !important;

	opacity: 0;
}

/* Center the text */
.goToSlide3 #slides {
	right: 50%;
	margin-right: -25%;
}

/*scoot the background off screen */
.goToSlide3 .content {
	background-position: left center !important;
	background-image: url('images/transparent.png') !important;
}

/*show the third */
.goToSlide3 #slide3 {
	-webkit-transform: perspective(600px) rotateX(0) !important;
	-moz-transform: perspective(600px) rotateX(0) !important;
	transform: perspective(600px) rotateX(0) !important;

	text-align: center;
}

/* SLIDE 4 */

/*hide the second slide */
.goToSlide4 #slide3 {
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	transform-origin: center bottom;

	-webkit-transform: perspective(600px) rotateX(90deg) !important;
	-moz-transform: perspective(600px) rotateX(90deg) !important;
	transform: perspective(600px) rotateX(90deg) !important;

	opacity: 0;
}

/*show the third */
.goToSlide4 #slide4 {
	text-align: center;

	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	transform-origin: center center;

	-webkit-transform: perspective(600px) rotateX(0) !important;
	-moz-transform: perspective(600px) rotateX(0) !important;
	transform: perspective(600px) rotateX(0) !important;

}

/* EXIT SLIDE */

/*hide the last slide */
.goToSlide5 #slide4 {
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	transform-origin: center bottom;

	-webkit-transform: perspective(600px) rotateX(90deg) !important;
	-moz-transform: perspective(600px) rotateX(90deg) !important;
	transform: perspective(600px) rotateX(90deg) !important;

	opacity: 0;
}

/* animate the slides off */
.goToSlide5 #slides {

	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;

	-webkit-transform: translateX(150%) perspective(600px) rotateY(90deg) !important;
	-moz-transform: translateX(150%) perspective(600px) rotateY(90deg) !important;
	transform: translateX(150%) perspective(600px) rotateY(90deg) !important;
}

/*bring the background back on screen */
.goToSlide5 .content {
	background-image: url('images/wagner.png') !important;
	background-position: right center !important;
}

.goToSlide5 #skip-intro-button {
	opacity: 0;
}

/*bring the text container back in */
.goToSlide5 .text-container {
	margin-left: 0%;
	
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	transform-origin: right center;

	-webkit-transform: perspective(600px) rotateY(0deg) !important;
	-moz-transform: perspective(600px) rotateY(0deg) !important;
	transform: perspective(600px) rotateY(0deg) !important;
	
	opacity: 1 !important;
}