/** GENERAL **/
body {
	font-family: Verdana, sans-serif;
	min-height: 740px;
	background-color: #ddd;
	-webkit-font-smoothing: antialiased;
}

/** STEP STYLES **/
.step {
	width: 900px;
    height: 650px;
	font-size: 1em;
	min-height: 500px;

	display: block;
    padding: 40px 60px;
    border-radius: 10px;

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);

    letter-spacing: -1px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	-ms-box-sizing:     border-box;
	-o-box-sizing:      border-box;
	box-sizing:         border-box;

	-webkit-transition: opacity 1s;
	-moz-transition:    opacity 1s;
	-ms-transition:     opacity 1s;
	-o-transition:      opacity 1s;
	transition:         opacity 1s;
}

/* fade out inactive slides */
.step:not(.active) {
	opacity: 0.3;
}

/* hint on the first slide */
.hint {
	position: fixed;
	left: 0;
	right: 185px;
	bottom: 90px;

	/* background: #333; */
	color: #fff;
	text-align: right;

	padding: 10px;
	z-index: 100;

	opacity: 0;

	-webkit-transform: translateY(400px);
	-moz-transform:    translateY(400px);
	-ms-transform:     translateY(400px);
	-o-transform:      translateY(400px);
	transform:         translateY(400px);

	-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
	-moz-transition:    opacity 1s,    -moz-transform 0.5s 1s;
	-ms-transition:     opacity 1s,     -ms-transform 0.5s 1s;
	-o-transition:      opacity 1s,      -o-transform 0.5s 1s;
	transition:         opacity 1s,         transform 0.5s 1s;
}
.step-home + .hint {
	opacity: 1;

	-webkit-transition: opacity 1s 3s, -webkit-transform 0.5s;
	-moz-transition:    opacity 1s 3s,    -moz-transform 0.5s;
	-ms-transition:     opacity 1s 3s,     -ms-transform 0.5s;
	-o-transition:      opacity 1s 3s,      -o-transform 0.5s;
	transition:         opacity 1s 3s,         transform 0.5s;

	-webkit-transform: translateY(0px);
	-moz-transform:    translateY(0px);
	-ms-transform:     translateY(0px);
	-o-transform:      translateY(0px);
	transform:         translateY(0px);
}

/** NOT SUPPORTED STYLES **/
.not-supported .step {
	position: relative;
	opacity: 1;
	margin: 20px auto;
}

/** PRINT STYLE **/
@media print {
	body {
		background: white;
	}
	.hint {
		display: none;
	}
	#simple {
		width: auto; 
		margin: 0 5%;
		padding: 0; 
		border: 0;
		float: none !important;
		color: black; 
		background: transparent;
	}
	.step {
		page-break-after: always;
		opacity: 1;
		clear: both;
		display: block;
		float: none !important;
		position: relative;
		margin: 20px auto;

		-webkit-transition: rotate(0deg);
		-moz-transition:    rotate(0deg);
		-ms-transition:     rotate(0deg);
		-o-transition:      rotate(0deg);
		transition:         rotate(0deg);
	}
	.step:not(.active) {
		opacity: 1;
	}
}