.expanded{
	transition: height 200ms ease-in-out 100ms;}

#white{
	color: white;}

.additional{
		display: none;}

/*========================== TEXTBOX ==========================*/

.textbox{
	z-index: 21;
	vertical-align: top;
	position: relative;}

.textbox button{
	width: auto;
	position: relative;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	left: 50%;
	margin: 10px 0 10px 0;
	transform: translateX(-50%);}

.textbox p{
	transition: opacity 200ms ease-in-out 100ms;
	position: relative;
	margin: 20px 20px 0 20px;
	padding: 0 0 0 0;}

.layers .textbox h1{
	transition: opacity 200ms ease-in-out 100ms;
	position: relative;
	margin: 1rem 1rem 0 1rem;
	padding: 0 0 0 0;}

.layers .textbox h2,
.layers .textbox h3{
	margin: 20px;}

.textbox a{
	color: #f47920;}

.textbox a,
.textbox a:hover button{
	text-decoration: none;}

.textbox a:hover{
	/*text-decoration: underline;*/
	color: #f47920;}

.textbox.left{
	left: 25%;
	float: left;
	transform: translateX(-50%);
	width: 460px;}

.textbox.right{
	right: 25%;
	float: right;
	transform: translateX(50%);
	width: 460px;}

.textbox.center{
	left: 50%;
	float: left;
	transform: translateX(-50%);
	width: 500px;
	text-align: center;}

.textbox ul{
	list-style-image: url(../img/bullet.png);
	margin: 0 0 0 0;}

/*========================== HANDLE ==========================*/

#handle{
	position: relative;
	z-index: 21;
	background-image: url(../img/handle.png);
	background-repeat: no-repeat;
	background-position: top center;
	transition: width 400ms ease-in-out 100ms,
				background-position 300ms ease-in-out;
	cursor: pointer;
	margin: 1rem 20px 0 20px;
	width: 140px;
	height: 30px;}

#handle.clicked{
	width: 80px;
	transition: width 200ms ease-in-out 300ms,
				background-position 300ms ease-in-out;
	background-position: bottom center;}

#handle.left{
	left: 0;
	float: left;}

#handle.right{
	right: 0;
	float: right;}

#handle.center{
	left: 50%;
	float: left;}

#handle.onWhite{
	background-color: rgba(0,0,0,0.2);}

#handle.onWhite:hover{
	background-color: rgba(0,0,0,0.4);}

#handle.onGrey{
	background-color: rgba(0,0,0,0.4);
	background-image: url(../img/handlewhite.png);}

#handle.onGrey:hover{
	background-color: rgba(0,0,0,0.6);}

#handle:hover{
	transition: background-color 200ms ease-in-out;
	background-color: rgba(0,0,0,0.4);}

/*========================== LAYER 1 ==========================*/

.layer01{
	height: 400px;
	background-color: white;
	overflow: hidden;}

.layer01.expanded{
	transition: height 200ms ease-in-out 0ms;
	height: 730px;}

.layer01 .textbox{
	top: 20px;
	transition: top 300ms ease-out;}

.layer01.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer01 img{
	position: absolute;
	padding: 0 0 0 0;
	top: 10px;
	height: 660px;
	right: 50%;
	float: right;
	transition: height 300ms ease-in-out 100ms;
	transform: translate(+100%, 0%);}

/*========================== LAYER 2 ==========================*/

.layer02{
	background-image: url(../img/features/02_contacts_orange.png);
	background-color: #f47920;
	background-position: top;
	background-size: 100%;
	background-attachment: fixed;
	transition: height 200ms ease-in-out 0ms;
	height: 400px;}

.layer02.expanded{
	transition: height 200ms ease-in-out 0ms;
	height: 840px;}

.layer02 #handle{
	background-color: rgba(255,255,255,1.0);}

.layer02 #handle:hover{
	background-color: rgba(255,255,255,0.9);}

.layer02 .textbox.right{
	width: 500px;
	transition: top 300ms ease-out;}

.layer02.expanded .textbox.right{
	top: 0;
	transition: top 300ms ease-out;}

.layer02 img{
	opacity: 0;
	transition: opacity 600ms ease-in-out;
	position: absolute;
	float: left;
	left: 30%;
	top: 50%;
	width: 150px;
	transform: translate(-50%, -50%);}

.layer02 .grey{
	right: 25%;
	float: right;
	transform: translateX(50%);
	width: 500px;
	z-index: 2;
	position: absolute;
	background-color: rgba(104,13,0,0.6);
	background-blend-mode: multiply;
	height: 100%;}

.layer02 button{
	clear: both;}

.layer02 .textbox h1{
	color: white;}

.layer02 .textbox h2{
	color: white;}

.layer02 .textbox p{
	color: white;}

.layer02 .textbox ul li{
	color: white;}
/*
.additional{
	opacity: 0.0;
	transition: opacity 200ms ease-in-out 100ms;}
*/
/*========================== LAYER 3 ==========================*/

.layer03{
	background-color: white;
	width: 100%;
	height: 350px;}

.layer03.expanded{
	height: 460px;}

.layer03 .textbox{
	top: 80px;
	transition: top 300ms ease-out;}

.layer03.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer03 .textbox h3{
	margin-bottom: 0;}

.layer03 .devices{
	position: absolute;
	width: 500px;
	height: 250px;
	bottom: 50%;
	right: 50%;
	float: right;
	transform: translate(100%, 50%);
	transition: bottom 200ms ease-in-out;}

.layer03.expanded .devices{
	display: block;}

.devices.smartphone{
	opacity: 0;
	z-index: 3;
	animation-duration: 600ms;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.layer03.expanded .devices.pc{
	transition: bottom 200ms ease-in-out;
	bottom: 60%;}

.layer03.expanded .devices.smartphone{
	transition: bottom 200ms ease-in-out;
	bottom: 40%;}

.devices.tablet{
	opacity: 0;
	z-index: 2;
	animation-duration: 600ms;
	animation-delay: 200ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.devices.pc{
	opacity: 0;
	z-index: 1;
	animation-duration: 600ms;
	animation-delay: 400ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.animation{
	animation-name: DeviceFrames;}

@keyframes DeviceFrames{
	0% {
		right: 30%;
		opacity: 0.0;}
	100% {
		right: 50%;
		opacity: 1.0;}}

/*========================== LAYER 4 ==========================*/

.layer04{
	overflow: hidden;
	position: relative;
	background-color: #939597;
	width: 100%;
	height: 360px;}

.layer04 iframe{
	z-index: 22;
	left: 25%;
	top: 50%;
	float: left;
	transform: translate(-50%, -50%);
	transition: opacity 200ms ease-in-out;
	position: absolute;
	width: 40%;
	height: 80%;}

.layer04.expanded{
	height: 700px;}

.layer04 img{
	position: absolute;
	float: left;
	left: 25%;
	width: 450px;
	top: 50%;
	transition: width 200ms ease-in-out;
	transform: translate(-50%, -50%);}

.layer04.expanded img{
	width: 550px;}

.layer04 .textbox{
	top: 46px;
	transition: top 300ms ease-out;}

.layer04.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer04 .textbox a{
	color: white;}

.layer04 .textbox h1{
	color: white;}

.layer04 .textbox p{
	color: white;}

/*========================== LAYER 5 ==========================*/

.layer05{
	background-color: #e6e7e8;
	height: 360px;}

.layer05.expanded{
	height: 680px;}

.layer05 .textbox{
	top: 80px;
	transition: top 300ms ease-out;
	height: 650px;}

.layer05.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer05 .textbox h1{
	font-size: 38px;}

.crm{
	position: absolute;
	padding: 0 0 0 0;
	top: 450px;
	transform: translateY(-50%);
	transition: top 800ms ease-in-out;
	left: 50%;
	float: right;
	width: 800px;}

.crm.slide{
	top: 350px;}

.layer05.expanded .crm{
	top: 50%;
	transform: translateY(-50%);}

@media screen and (max-width: 1050px){
	.crm{
		width: 600px;}

	.crm.slide{
		top: 300px;}}

/*========================== LAYER 6 ==========================*/

.layer06{
	background-color: #f47920;
	width: 100%;
	height: 300px;}

.layer06 .textbox{
	top: 40px;
	color: white;
	width: 400px;}

.layer06 .textbox h1{
	color: white;}

.layer06 .footprint{
	top: 50%;
	left: 25%;
	float: left;
	transform: translate(-50%, -50%);
	position: absolute;
	width: 250px;
	height: 250px;}

.footprint img{
	width: 250px;
	height: 250px;}

.footprint.leftfoot{
	opacity: 0;
	z-index: 1;
	animation-duration: 600ms;
	animation-delay: 0ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footprint.rightfoot{
	opacity: 0;
	z-index: 2;
	animation-duration: 600ms;
	animation-delay: 100ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footprint.heartleft{
	opacity: 0;
	z-index: 3;
	animation-duration: 600ms;
	animation-delay: 200ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footprint.heartright{
	opacity: 0;
	z-index: 4;
	animation-duration: 600ms;
	animation-delay: 300ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footanimation{
	animation-name: FootFrames;}

@keyframes FootFrames{
	0% {
		opacity: 0.0;}
	100% {
		opacity: 1.0;}}

/*========================== LAYER 7 ==========================*/

.layer07{
	background-image: url(../img/features/07_blackboard.png);
	background-color: black;
	background-position: 0 0;
	background-size: cover;
	background-attachment: fixed;
	transition:	height 200ms ease-in-out 100ms;
	height: 420px;
	text-align: center;}

.layer07 button{
	position: relative;
	display: block;
	clear: both;
	margin: 2rem auto 1rem auto;
	width: 400px;
	opacity: 0.0;
	transition: margin 200ms ease-in-out,
				opacity 300ms ease-in-out 150ms,}

	.layer07.expanded button{
		opacity: 1;
		transition: margin 200ms ease-in-out,
					opacity 300ms ease-in-out 150ms,}

.layer07 #handle{
	position: absolute;
	bottom: 30px;
	right: 5%;
	display: block;
	clear: both;
	transition: background-color 100ms ease-in-out;
	border: 2px solid #f47920;}

.layer07 #handle:hover{
	background-color: #f47920;
	color: white;}

.layer07 .textbox{
	color: white;
	left: 75%;
	transition:	left 400ms ease-in-out 200ms,
				transform 400ms ease-out 200ms;
	width: 400px;
	padding-bottom: 2rem;}

	.layer07.expanded .textbox.left{
		left: 50%;
		transition:	left 400ms ease-in-out,
					transform 400ms ease-out;
		transform: translate(-600px, 0%);}

.layer07 .textbox.left.desktop{
	transition-delay: 100ms;}

.layer07 .textbox.left.mobile{
	transition-delay: 0ms;}

	.layer07.expanded .textbox.left.mobile{
		transition-delay: 200ms;}

.layer07 .textbox h1,
.layer07 .textbox p,
.layer07 .textbox ul{
	text-align: left;
	color: white;}

.layer07 .meme{
	position: absolute;
	bottom: 0;
	left: 0;
	float: left;
	margin-top: -80px;
	height: 460px;
	overflow: hidden;
	transition:	left 300ms ease-in-out;}

.layer07.expanded .meme{
	transition:	left 300ms ease-in-out;
	left: -150px;}

.layer07 .meme img{
	height: 460px;}

@media screen and (max-width: 1680px){
	.layer07.expanded .meme{
		left: -200px;}}

@media screen and (max-width: 1440px){
	.layer07.expanded .meme{
		left: -400px;}}

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

	.layer07.expanded .textbox.left{
		transform: translate(-400px, 0%);}

	.layer07.expanded{
		height: 720px;}

	.layer07.expanded .mobile{
		padding-left: 400px;}

	.layer07 .meme{
		left: -100px;}

	.layer07.expanded .meme{
	left: -100px;}}

/*========================== LAYER 8 ==========================*/

.layer08{
	height: 400px;
	width: 100%;
	background-color: #e7e7e8;
	transition:	height 200ms ease-in-out 100ms;
	overflow: hidden;}

.layer08.expanded{
	height: 670px;
	transition:	height 200ms ease-in-out 100ms;}

.layer08 .textbox{
	top: 50px;
	transition: top 300ms ease-out;
	width: 500px;}

.layer08.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer08 .coin{
	z-index: 5;
	position: absolute;
	width: 130px;
	height: 105px;
	top: 0;
	right: 25%;
	transform: translateX(81px);
	float: right;}

.layer08 .coin img{
	top: 160px;
	position: absolute;
	width: 130px;}

.layer08.expanded .coin{
	height: 240px;
	transition: height 200ms ease-in-out 100ms;}

.layer08 .pig{
	position: absolute;
	width: 400px;
	float: right;
	top: 50%;
	right: 25%;
	transform: translate(50%, -50%);}



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

/*========================== GENERAL LAYERS ==========================*/

	.headerImage .rotation .textbox{
		padding: 0rem;}

	.textbox{
		padding: 2rem;}

	.textbox #handle{
		margin: 1rem 0 0 0;}

	.textbox.left{
	   	left: 0;
	    float: left;
	    transform: translateX(0%);}

	.textbox.right{
	    right: 0;
	    float: right;
	    transform: initial;}

	.textbox.center{
	    left: 0;
	    float: left;
	    transform: initial;
	    text-align: center;}

	.layers .textbox h1{
		font-size: 1.8rem;
		line-height: 2rem;}

	.layers .textbox h1{
		margin: 0;
		padding: 0;}

	.layers .textbox h2{
		margin: 0;
		padding: 1rem 0 1rem 0;}

	.layers .textbox p{
		margin: 0;
		padding: 1rem 0 0 0;}
/*
	.additional{
		display: none;}
*/
/*========================== LAYER 1 ==========================*/

   .layer01{
   		height: initial;
   		width: inherit;
    	background-color: white;
    	overflow: hidden;}

    .layer01.expanded{
    	height: initial;}

   .layer01 .textbox{
   		top: initial;
    	width: 80%;
    	transition: top 300ms ease-out;}

   .layer01 .textbox ul{
    	margin-bottom: 10px;}

   .layer01 img{
    	display: none;}

/*========================== LAYER 2 ==========================*/

	.layer02{
		height: initial;}

	.layer02.expanded{
		height: initial;}

	.layer02 .textbox.right{
		width: initial;
		top: initial;}

	.layer02 .grey{
		right: 0;
		transform: initial;
		width: 100%;}

	.layer02 img{
		display: none;}

/*========================== LAYER 3 ==========================*/

	.layer03{
		height: initial;}

	.layer03.expanded{
		height: initial;}

	.layer03 .textbox{
		top: 0;
		width: initial;}

	.layer03 .devices{
		display: none;}

	.layer03.expanded .devices{
		display: none;}

/*========================== LAYER 4 ==========================*/
	
	.layer04{
		height: initial;}

	.layer04.expanded{
		height: initial;}

	.layer04 img{
		display: none;}

	.layer04 .textbox{
		top: 0;
		width: initial;
		height: initial;}

/*========================== LAYER 5 ==========================*/

	.layer05{
		height: initial;}

	.layer05.expanded{
		height: initial;}

	.layer05 .textbox{
		top: initial;
		width: initial;
		height: initial;}

	.layer05.expanded .textbox{
		top: 0;
		transition: top 300ms ease-out;}

	.layer05 .textbox h1{
		font-size: ;}

	.crm{
		display: none;}

/*========================== LAYER 6 ==========================*/

	.layer06{
		height: initial;}

	.layer06 .textbox{
		top: 0;
		width: initial;}

	.layer06 .textbox h1{
		color: white;}

	.layer06 .footprint{
		display: none;}

/*========================== LAYER 7 ==========================*/

	.layer07{
		background-image: none;
		height: initial;}

	.layer07.expanded{
		height: initial;}

	.layer07.expanded button{
		display: block;
		position: relative;
		width: 80%;
		bottom: initial;
		margin: 0 auto 1rem auto;
		transform: translate(0,0);}

	.layer07 .textbox{
		left: 0;
		padding: 1rem 2rem 1rem 2rem;
		width: initial;}

		.layer07.expanded .textbox.left{
			left: 0;
			padding: 1rem 2rem 1rem 2rem;
			transform: translate(0, 0);}

	.layer07 #handle{
		position: relative;
		bottom: initial;
		right: initial;
		margin: 0 auto 1rem auto;}

	.layer07.expanded #handle{
		margin: 0 auto 1rem auto;}

	.layer07 .meme{
		display: none;}

/*========================== LAYER 8 ==========================*/

.layer08{
	height: initial;}

.layer08.expanded{
	height: initial;}

.layer08 .textbox{
	top: 0;
	width: initial;}

.layer08.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer08 .coin{
	display: none;}


.layer08 .pig{
	display: none;}

}