/********************************************
				RESET
*********************************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
}

input, textarea, select{
	outline: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
}
input[type="submit"],
input[type="reset"],
select,
option{
	cursor: pointer;
}
input[type="submit"],
input[type="reset"]{
	min-width: 160px;
}


/*****************************************************
					GENERAL STYLES
*****************************************************/

*{
	box-sizing: border-box;
}

body{
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #EAEAEA;
	color: #004895;
    font-family: "OS-Font";
	overflow: hidden;
}


/* Portrait */

#portrait {
  background-image: url('../images/portrait.png');
  background-color: rgba(0, 0, 0, 0.9);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;

}

#portrait p {
    position: absolute;
    top: 65%;
    width: 100%;
    color: white;
    font-size: -webkit-xxx-large;
    line-height: 100%;
    padding: 0 4%;
    text-align: center;
}


@media only screen and (orientation: portrait) {
  #portrait {
    display: block;
  }
}

@media only screen and (orientation: landscape) {
  #portrait {
    display: none;
  }
}

/** End portrait **/


/*****************************************************
					FONTs & GENERAL STYLES
*****************************************************/

h1, h2, h3, h4, h5, h6, p, span{
	color: #004895;
    font-family: "OS-Font";
}


.clearfix::after{
	content: '';
	display: block;
	height: 0;
	clear: both;
}

.left{
	float: left;
}

.right{
	float: right;
}

.width10{width: 10%;}
.width20{width: 20%;}
.width25{width: 25%;}
.width30{width: 30%;}
.width33{width: 33%;}
.width40{width: 40%;}
.width50{width: 50%;}
.width60{width: 60%;}
.width66{width: 66%;}
.width70{width: 70%;}
.width75{width: 75%;}
.width80{width: 80%;}
.width90{width: 90%;}
.width100{width: 100%;}

div#main_frame{
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.text_container{
	position: absolute;
}

.button{
	padding: 10px 20px;
	color: #fff;
	font-size: 1.3em;
	background-color: #FF6600;
}

#hoffman_logo{
	position: absolute;
    top: 90px;
    left: 2%;
    width: 150px;
    height: 50px;
    background-image: url(../images/logo.svg);
    background-size: 95%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 990;
}

#hoffman_logo a{
	display: block;
	width: 100%;
	height: 100%;
}



#recycle_logo{
	position: absolute;
	bottom: 2%;
	right: 2%;
	width: 80px;
	height: 80px;
	background-image: url(../images/recyclesforever.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 999;
}


#back_to_start{
	position: absolute;
	top: 3%;
	right: 3%;
	width: 40px;
	height: 40px;
	z-index: 999;
}

#full_screen{
    position: absolute;
    top: 3%;
    left: 230px;
    width: 190px;
    height: 130px;
    background-image: url(../images/fullscreen.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 999;
    max-width: 20%;
    cursor: pointer;
    display: none;
}

#full_screen.shown{
	display: block;
}

#full_screen.shown:hover{
	animation: springish_soft .8s linear .1s 1 forwards;
	-webkit-animation: springish_soft .8s linear .1s 1 forwards;
}

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#hoffman_logo{
		top: 80px;
	}

}

/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){

	#hoffman_logo{
		top: 80px;
	}

	#full_screen{
		top: 20%;
    	left: 2%;
    	width: 170px;
	}
}


/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){

	#hoffman_logo{
		top: 34px;
    	left: 1%;
    	width: 80px;
    	height: 40px;
	}

	#recycle_logo{
		bottom: 1%;
		right: 1%;
		-webkit-transform: scale(.65);
		transform: scale(.65);
	}

	#back_to_start{
		width: 25px;
		height: 25px;
	}

	#full_screen{
		top: 3%;
	    left: 15%;
	    width: 100px;
	    height: 70px;
	}

}


/*****************************************************
					ANIMATIONS
*****************************************************/


/*		fade in 	*/
@keyframes fadeIn{
	0%{
		visibility: hidden;
		opacity: 0;
	}1%{
		visibility: visible;
		opacity: 0;
	}100%{
		visibility: visible;
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn{
	0%{
		visibility: hidden;
		opacity: 0;
	}1%{
		visibility: visible;
		opacity: 0;
	}100%{
		visibility: visible;
		opacity: 1;
	}
}

.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}



/*		fade out 	*/
@keyframes fadeOut{
	0%{
		visibility: visible;
		opacity: 1;
	}99%{
		visibility: visible;
		opacity: 0;
	}100%{
		visibility: hidden;
		opacity: 0;
	}
}

@-webkit-keyframes fadeOut{
	0%{
		visibility: visible;
		opacity: 1;
	}99%{
		visibility: visible;
		opacity: 0;
	}100%{
		visibility: hidden;
		opacity: 0;
	}
}

.fadeOut{
	animation-name: fadeOut;
	-webkit-animation-name: fadeOut;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


/* 		shrink 		*/
@keyframes fall{
	from{
		transform: scale(1) rotateZ(0deg);
	}
	to{
		transform: scale(.1) rotateZ(1080deg);
	}
}

@-webkit-keyframes fall{
	from{
		-webkit-transform: scale(1) rotateZ(0deg);
	}
	to{
		-webkit-transform: scale(.1) rotateZ(1080deg);
	}
}


/*		Shake 	*/

@-webkit-keyframes shake {
	0%, 20%, 80%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		-webkit-transform: translate3d(-10px, 0, 0);
	}
	40%, 60%{
		-webkit-transform: translate3d(10px, 0, 0);
	}
}

@keyframes shake {
	0%, 20%, 80%, 100% {
		transform: translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		transform: translate3d(-10px, 0, 0);
	}
	40%, 60%{
		transform: translate3d(10px, 0, 0);
	}
}


/*		Shake Down	*/

@-webkit-keyframes shakeDown {
	0%, 20%, 80%, 100% {
		-webkit-transform: rotateZ(90deg) translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		-webkit-transform: rotateZ(90deg) translate3d(-10px, 0, 0);
	}
	40%, 60%{
		-webkit-transform: rotateZ(90deg) translate3d(10px, 0, 0);
	}
}

@keyframes shakeDown {
	0%, 20%, 80%, 100% {
		transform: rotateZ(90deg) translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		transform: rotateZ(90deg) translate3d(-10px, 0, 0);
	}
	40%, 60%{
		transform: rotateZ(90deg) translate3d(10px, 0, 0);
	}
}

/*		Shake Reverse	*/

@-webkit-keyframes shakeReverse {
	0%, 20%, 80%, 100% {
		-webkit-transform: rotateZ(180deg) translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		-webkit-transform: rotateZ(180deg) translate3d(-10px, 0, 0);
	}
	40%, 60%{
		-webkit-transform: rotateZ(180deg) translate3d(10px, 0, 0);
	}
}

@keyframes shakeReverse {
	0%, 20%, 80%, 100% {
		transform: rotateZ(180deg) translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		transform: rotateZ(180deg) translate3d(-10px, 0, 0);
	}
	40%, 60%{
		transform: rotateZ(180deg) translate3d(10px, 0, 0);
	}
}

/*		ShakeReverse White 		*/

@-webkit-keyframes shakeReverseWhite {
	0%, 20%, 80%, 100% {
		-webkit-transform: rotateZ(90deg) translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		-webkit-transform: rotateZ(90deg) translate3d(0,-10px, 0);
	}
	40%, 60%{
		-webkit-transform: rotateZ(90deg) translate3d(0, 10px, 0);
	}
}

@keyframes shakeReverseWhite {
	0%, 20%, 80%, 100% {
		transform: rotateZ(90deg) translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		transform: rotateZ(90deg) translate3d(0, -10px, 0);
	}
	40%, 60%{
		transform: rotateZ(90deg) translate3d(0, 10px, 0);
	}
}

/* 		Shake white 		*/

@-webkit-keyframes shakeWhite {
	0%, 20%, 80%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		-webkit-transform: translate3d(0, -10px, 0);
	}
	40%, 60%{
		-webkit-transform: translate3d(0, 10px, 0);
	}
}

@keyframes shakeWhite {
	0%, 20%, 80%, 100% {
		transform: translate3d(0, 0, 0);
	}
	30%, 50%, 70%{
		transform: translate3d(0, -10px, 0);
	}
	40%, 60%{
		transform: translate3d(0, 10px, 0);
	}
}




/*		dash filling animation 		*/
@keyframes dash{
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash{
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dashLiquid{
	0%{
		stroke-dashoffset: 350;
	}
	50%{
		stroke-dashoffset: 0;
	}
	100%{
		stroke-dashoffset: -350;
	}
}

@-webkit-keyframes dashLiquid{
	0%{
		stroke-dashoffset: 350;
	}
	50%{
		stroke-dashoffset: 0;
	}
	100%{
		stroke-dashoffset: -350;
	}
}


/*			translate_wagon_X 		*/
@keyframes translate_wagon_X{

	60%{transform: translateX(80%);}
	85%{
		transform: translateX(100%);
		visibility: visible;
		opacity: 1;
	}
	95%{
		visibility: visible;
		opacity: 1;
	}
	100%{
		transform: translateX(100%);
		visibility: hidden;
		opacity: 0;
	}
}

@-webkit-keyframes translate_wagon_X{

	60%{-webkit-transform: translateX(80%);}
	85%{
		-webkit-transform: translateX(100%);
		visibility: visible;
		opacity: 1;
	}
	95%{
		visibility: visible;
		opacity: 1;
	}
	100%{
		-webkit-transform: translateX(100%);
		visibility: hidden;
		opacity: 0;
	}
}


/*			RotateWagon 		*/
@keyframes rotateWagon{
	0%{transform: rotateZ(0deg);}
	8%{transform: rotateZ(0deg);}
	40%{transform: rotateZ(55deg);}
	50%{transform: rotateZ(60deg);}
	75%{transform: rotateZ(0deg);}
	100%{transform: rotateZ(0deg);}
}


@-webkit-keyframes rotateWagon{
	0%{-webkit-transform: rotateZ(0deg);}
	8%{-webkit-transform: rotateZ(0deg);}
	40%{-webkit-transform: rotateZ(55deg);}
	50%{-webkit-transform: rotateZ(60deg);}
	75%{-webkit-transform: rotateZ(0deg);}
	100%{-webkit-transform: rotateZ(0deg);}
}


/*			Clouds animation 		*/
@keyframes animateClouds{
	100%{transform: translateX(1000%);}
}

@-webkit-keyframes animateClouds{
	100%{-webkit-transform: translateX(1000%);}
}


/*			Rotate boiler 			*/
@keyframes rotateBoiler{
	100%{transform: rotateZ(90deg);}
}

@-webkit-keyframes rotateBoiler{
	100%{-webkit-transform: rotateZ(90deg);}
}

.rotated{
	animation: rotateBoiler .8s ease-in .1s 1 forwards;
	-webkit-animation: rotateBoiler .8s ease-in .1s 1 forwards;
}




/*			slideInLeft 		*/
@-webkit-keyframes slideInLeft {
	0% {
		-webkit-transform: translateX(-100%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateX(0);
	}
}
@keyframes slideInLeft {
	0% {
		transform: translateX(-100%);
		visibility: visible;
	}
	100% {
		transform: translateX(0);
	}
}

/*			slideInRight 		*/
@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translateX(100%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateX(0);
	}
}
@keyframes slideInRight {
	0% {
		transform: translateX(100%);
		visibility: visible;
	}
	100% {
		transform: translateX(0);
	}
}

/*			slideInDown 		*/
@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translateY(-100%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@keyframes slideInDown {
	0% {
		transform: translateY(-100%);
		visibility: visible;
	}
	100% {
		transform: translateX(0);
	}
}

/*			slideInUp 		*/
@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translateY(100%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@keyframes slideInDown {
	0% {
		transform: translateY(100%);
		visibility: visible;
	}
	100% {
		transform: translateX(0);
	}
}

/*			Animate Gallery Items 			*/

@keyframes animateFirstGalleryItem{
	5%{
		/*-webkit-transform: translate(120%, -50%);*/
		opacity: 1;
	}
	18%{
		opacity: 1;
	}
	38%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	52%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	68%{
		opacity: 0;
	}
	85%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	
	}
}

@-webkit-keyframes animateFirstGalleryItem{
	5%{
		/*-webkit-transform: translate(120%, -50%);*/
		opacity: 1;
	}
	18%{
		opacity: 1;
	}
	38%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	52%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	68%{
		opacity: 0;
	}
	85%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	
	}

}


@keyframes animateSecondGalleryItem{
	5%{
		/*-webkit-transform: translate(120%, -50%);*/
		opacity: 0;
	}
	18%{
		opacity: 0;
	}
	40%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 1;
	}
	52%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 1;
	}
	68%{
		opacity: 0;
	}
	85%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	
	}
}

@-webkit-keyframes animateSecondGalleryItem{
	5%{
		/*-webkit-transform: translate(120%, -50%);*/
		opacity: 0;
	}
	18%{
		opacity: 0;
	}
	40%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 1;
	}
	52%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 1;
	}
	68%{
		opacity: 0;
	}
	85%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	
	}

}


@keyframes animateThirdGalleryItem{
	5%{
		/*-webkit-transform: translate(120%, -50%);*/
		opacity: 0;
	}
	18%{
		opacity: 0;
	}
	38%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	52%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	70%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	
	}

}


@-webkit-keyframes animateThirdGalleryItem{
	5%{
		/*-webkit-transform: translate(120%, -50%);*/
		opacity: 0;
	}
	18%{
		opacity: 0;
	}
	38%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	52%{
		/*-webkit-transform: translate(-50%, -50%);*/
		opacity: 0;
	}
	70%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	
	}

}


/*				Bounce In 			*/

@-webkit-keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100% {
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
	opacity: 0;
	-webkit-transform: scale3d(.3, .3, .3);
	transform: scale3d(.3, .3, .3);
	}
	20% {
	-webkit-transform: scale3d(1.1, 1.1, 1.1);
	transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
	-webkit-transform: scale3d(.9, .9, .9);
	transform: scale3d(.9, .9, .9);
	}
	60% {
	opacity: 1;
	-webkit-transform: scale3d(1.03, 1.03, 1.03);
	transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
	-webkit-transform: scale3d(.97, .97, .97);
	transform: scale3d(.97, .97, .97);
	}
	100% {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	}
}

@keyframes bounceIn {
	0%, 20%, 40%, 60%, 80%, 100% {
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
	opacity: 0;
	-webkit-transform: scale3d(.3, .3, .3);
	transform: scale3d(.3, .3, .3);
	}
	20% {
	-webkit-transform: scale3d(1.1, 1.1, 1.1);
	transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
	-webkit-transform: scale3d(.9, .9, .9);
	transform: scale3d(.9, .9, .9);
	}
	60% {
	opacity: 1;
	-webkit-transform: scale3d(1.03, 1.03, 1.03);
	transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
	-webkit-transform: scale3d(.97, .97, .97);
	transform: scale3d(.97, .97, .97);
	}
	100% {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	}
}




/*			spring 			*/

@keyframes springish {
  0.00% {transform: translate3d( 0, 100.00%, 0) scale(0); opacity: 0;}
  10.16% {transform: translate3d( 0, -41.06%, 0) scale(1.4106); opacity: 1;}
  21.39% {transform: translate3d( 0, 16.09%, 0) scale(0.8391);}
  32.62% {transform: translate3d( 0, -6.31%, 0) scale(1.0631);}
  43.85% {transform: translate3d( 0, 2.47%, 0) scale(0.9753);}
  55.08% {transform: translate3d( 0, -0.97%, 0) scale(1.0097);}
  66.31% {transform: translate3d( 0, 0.38%, 0) scale(0.9962);}
  77.54% {transform: translate3d( 0, -0.15%, 0) scale(1.0015);}
  88.77% {transform: translate3d( 0, 0.06%, 0) scale(0.9994);}
  100.00% {transform: translate3d( 0, 0%, 0) scale(1); opacity: 1;}
}


@-webkit-keyframes springish {
  0.00% {-webkit-transform: translate3d( 0, 100.00%, 0) scale(0); opacity: 0;}
  10.16% {-webkit-transform: translate3d( 0, -41.06%, 0) scale(1.4106); opacity: 1;}
  21.39% {-webkit-transform: translate3d( 0, 16.09%, 0) scale(0.8391);}
  32.62% {-webkit-transform: translate3d( 0, -6.31%, 0) scale(1.0631);}
  43.85% {-webkit-transform: translate3d( 0, 2.47%, 0) scale(0.9753);}
  55.08% {-webkit-transform: translate3d( 0, -0.97%, 0) scale(1.0097);}
  66.31% {-webkit-transform: translate3d( 0, 0.38%, 0) scale(0.9962);}
  77.54% {-webkit-transform: translate3d( 0, -0.15%, 0) scale(1.0015);}
  88.77% {-webkit-transform: translate3d( 0, 0.06%, 0) scale(0.9994);}
  100.00% {-webkit-transform: translate3d( 0, 0%, 0) scale(1); opacity: 1;}
}

.springish {
  -webkit-animation: springish; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
  animation: springish; 
  animation-iteration-count: 1;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
}

@-webkit-keyframes springish_soft {
  0% {-webkit-transform: scale(1);}
  20% {-webkit-transform: scale(1.2);}
  40% {-webkit-transform: scale(0.8391);}
  60% {-webkit-transform: scale(1.0631);}
  80% {-webkit-transform: scale(0.9753);}
  100% {-webkit-transform: scale(1);}
}

@keyframes springish_soft {
  0% {transform: scale(1);}
  20% {transform: scale(1.2);}
  40% {transform: scale(0.8391);}
  60% {transform: scale(1.0631);}
  80% {transform: scale(0.9753);}
  100% {transform: scale(1);}
}


/*		Acceleration to cruising function 	*/
@keyframes accelerateToCruising{
	0%{
		background-position-x: 100%;
	}100%{
		background-position-x: 0%; 
	}
}

@-webkit-keyframes accelerateToCruising{
	0%{
		background-position-x: 100%;
	}100%{
		background-position-x: 0%; 
	}
}


/*		Acceleration to cruising reverse function 	*/
@keyframes accelerateToCruisingReverse{
	to{
		background-position-x: 200%; 
	}
}

@-webkit-keyframes accelerateToCruisingReverse{
	to{
		background-position-x: 200%; 
	}
}


/*		Road passing by 	*/
@keyframes cruising{
	0%{
		background-position-x: 0%;
	}100%{
		background-position-x: -1000%; 
	}
}

@-webkit-keyframes cruising{
	0%{
		background-position-x: 0%;
	}100%{
		background-position-x: -1000%; 
	}
}


/*		Trees passing by 	*/
@keyframes cruisingReverse{
	0%{
		background-position-x: 200%;
	}100%{
		background-position-x: 1000%; 
	}
}

@-webkit-keyframes cruisingReverse{
	0%{
		background-position-x: 200%;
	}100%{
		background-position-x: 1000%; 
	}
}


/*Spin animation*/
@keyframes spin{
  to{
      transform: rotateZ(-3600deg);
  }
}

@-webkit-keyframes spin{
  to{
      -webkit-transform: rotateZ(-3600deg);
  }
}

/*Spin fast*/
.spinFast{
  animation: spin 5s ease-in-out infinite alternate;
  -webkit-animation: spin 5s ease-in-out infinite alternate;
}

/*Spin at medium speed*/
.spinMedium{
  animation: spin 10s ease-in-out infinite alternate;
  -webkit-animation: spin 10s ease-in-out infinite alternate;
}

/*Spin slowly*/
.spinSlow{
  animation: spin 15s ease-in-out infinite alternate;
  -webkit-animation: spin 15s ease-in-out infinite alternate;
}


/*Blow animations*/
@keyframes blow1{
  0%{
    transform: translate(0, 0);
  }
  25%{
    transform: translate(70vw, -35vh);
  }
  50%{
    transform: translate(80vw, -50vh);
  }
  100%{
    transform: translate(100vw, -150vh);
  }
}

@-webkit-keyframes blow1{
  0%{
    -webkit-transform: translate(0, 0);
  }
  25%{
    -webkit-transform: translate(70vw, -35vh);
  }
  50%{
    -webkit-transform: translate(80vw, -50vh);
  }
  100%{
    -webkit-transform: translate(100vw, -150vh);
  }
}

.blow1{
  animation: blow1 5s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow1 5s cubic-bezier(.35,.93,.49,.51) forwards;
}


@keyframes blow2{
  0%{
    transform: translate(0, 0);
  }
  25%{
    transform: translate(65vw, -40vh);
  }
  50%{
  	transform: translate(75vw, -65vh);
  }
  100%{
    transform: translate(100vw, -150vh);
  }
}

@-webkit-keyframes blow2{
  0%{
    -webkit-transform: translate(0, 0);
  }
  25%{
    -webkit-transform: translate(65vw, -40vh);
  }
  50%{
  	-webkit-transform: translate(75vw, -65vh);
  }
  100%{
    -webkit-transform: translate(100vw, -150vh);
  }
}

.blow2{
  animation: blow2 5s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow2 5s cubic-bezier(.35,.93,.49,.51) forwards;
}


@keyframes blow3{
  0%{
    transform: translate(0, 0);
  }
  25%{
    transform: translate(75vw, -45vh);
  }
  50%{
  	transform: translate(80vw, -60vh);
  }
  100%{
    transform: translate(100vw, -150vh);
  }
}

@-webkit-keyframes blow3{
  0%{
    -webkit-transform: translate(0, 0);
  }
  25%{
    -webkit-transform: translate(75vw, -45vh);
  }
  50%{
  	-webkit-transform: translate(80vw, -60vh);
  }
  100%{
    -webkit-transform: translate(100vw, -150vh);
  }
}

.blow3{
  animation: blow3 5s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow3 5s cubic-bezier(.35,.93,.49,.51) forwards;
}


@keyframes blow4{
  0%{
    transform: translate(0, 0);
  }
  25%{
    transform: translate(60vw, -30vh);
  }
  50%{
  	transform: translate(75vw, -45vh);
  }
  100%{
    transform: translate(100vw, -150vh);
  }
}

@-webkit-keyframes blow4{
  0%{
    -webkit-transform: translate(0, 0);
  }
  25%{
    -webkit-transform: translate(60vw, -30vh);
  }
  50%{
  	-webkit-transform: translate(75vw, -45vh);
  }
  100%{
    -webkit-transform: translate(100vw, -150vh);
  }
}

.blow4{
  animation: blow4 5s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow4 5s cubic-bezier(.35,.93,.49,.51) forwards;
}

.blow5{
  animation: blow1 4.8s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow1 4.8s cubic-bezier(.35,.93,.49,.51) forwards;
}

.blow6{
  animation: blow2 5.2s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow2 5.2s cubic-bezier(.35,.93,.49,.51) forwards;
}

.blow7{
  animation: blow3 4.9s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow3 4.9s cubic-bezier(.35,.93,.49,.51) forwards;
}

.blow8{
  animation: blow4 5.1s cubic-bezier(.35,.93,.49,.51) forwards;
  -webkit-animation: blow4 5.1s cubic-bezier(.35,.93,.49,.51) forwards;
}




/************************************************************************
*************************************************************************
							SCENES FRAME
*************************************************************************
*************************************************************************/


div#scenes_container {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.scene{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #EAEAEA;
	/*overflow: hidden;*/

	/*Scene transition speed formula*/
	transition: transform 2s ease-in-out;
}

.scene-inner{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/******************  Scene transitions ***********************/

.fromRight:not(.active){transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
.fromLeft:not(.active){transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);}
.fromDown:not(.active){transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);}
.fromUp:not(.active){transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);}

.active.toRight{transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
.active.toLeft{transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);}
.active.toDown{transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);}
.active.toUp{transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);}


#scenes_container .scene.active.current{
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}




/***************************************************************
								SCENE 1
****************************************************************/

#scene1 {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#85baf6+0,eef2f5+100 */
	background: rgb(133,186,246); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(133,186,246,1) 0%, rgba(238,242,245,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(133,186,246,1) 0%,rgba(238,242,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(133,186,246,1) 0%,rgba(238,242,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85baf6', endColorstr='#eef2f5',GradientType=0 ); /* IE6-9 */


	z-index: 100;
}

/************* landscape ******************/

#scene1 .landscape{
	position: absolute;
}

.landscape.background{
	width: 100%;
    height: 30%;
    bottom: 0;
    left: 0;
    background-image: url(../images/landscape.svg);
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: 55% 0%;
    z-index: 101;
}

.landscape.mountain{
	background-image: url(../images/mountain.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center bottom;
    bottom: 0;

    /*For the animation*/
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
}

#mountain1{
	width: 25%;
    height: 50%;
    right: -8%;
    z-index: 106;
}

#mountain2{
	width: 15%;
    height: 40%;
    right: 11%;
    z-index: 105;
}

.landscape.tree{
	width: 29%;
    height: 100%;
    background-image: url(../images/tree.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center bottom;
    bottom: 0;
    left: -14%;
    z-index: 107;

    /*For the animation*/
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.pine_tree{
	background-image: url(../images/pinetree.svg);
	background-repeat: no-repeat;
    background-size: 90%;
    background-position: center bottom;
    opacity: 0;
}

#pine1{
	width: 5%;
    height: 30%;
    bottom: 10%;
    left: 23%;
    z-index: 102;
}

#pine2{
	width: 4.5%;
    height: 30%;
    bottom: 6%;
    left: 6%;
    z-index: 103;
}

#pine3{
	width: 8%;
    height: 40%;
    bottom: -2%;
    left: 13%;
    z-index: 104;
}

.gallery_cloud{
	background-image: url(../images/gallery_cloud.svg);
    background-repeat: no-repeat;
    background-size: 88%;
    background-position: center top;
    width: 50%;
    height: 90%;
    top: -13%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

	/*For the animation*/
	opacity: 0;
}


.gallery_cloud-inner{
	position: relative;
	overflow: hidden;
	width: 60%;
	height: 70%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

.gallery_cloud-inner img{
	position: absolute;
    top: 57%;
    left: 50%;
    height: 50%;
    width: auto;
    transform: translate(120%, -50%);
    -webkit-transform: translate(120%, -50%);
}



/********************** Animating landscape elements *****************/

#scene1.active .tree{
	animation: slideInLeft .6s linear 0s 1 forwards;
	-webkit-animation: slideInLeft .6s linear 0s 1 forwards;
}

#scene1.active #mountain1{
	animation: slideInDown .5s ease .2s 1 forwards;
	-webkit-animation: slideInDown .5s ease .2s 1 forwards;
}

#scene1.active #mountain2{
	animation: slideInDown .5s ease 0s 1 forwards;
	-webkit-animation: slideInDown .5s ease 0s 1 forwards;
}


#scene1.active #pine2{
	animation: springish 1.2s linear .2s 1 forwards;
	-webkit-animation: springish 1.2s linear .2s 1 forwards;
  	animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
  	-webkit-animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
}

#scene1.active #pine1{
	animation: springish 1.2s linear .4s 1 forwards;
	-webkit-animation: springish 1.2s linear .4s 1 forwards;
  	animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
  	-webkit-animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
}

#scene1.active #pine3{
	animation: springish 1.2s linear .6s 1 forwards;
	-webkit-animation: springish 1.2s linear .6s 1 forwards;
  	animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
  	-webkit-animation-timing-function: cubic-bezier(0.445,  0.050, 0.550, 0.950);
}

/* 		Gallery Cloud Img's 		*/

#scene1.active .gallery_cloud{
	animation: fadeIn 2s linear 2.5s 1 forwards;
	-webkit-animation: fadeIn 2s linear 2.5s 1 forwards;
}


.scene.active .gallery_cloud-inner img:first-child{
	animation: animateFirstGalleryItem 12s linear 4s infinite;
	-webkit-animation: animateFirstGalleryItem 12s linear 4s infinite;
}
.scene.active .gallery_cloud-inner img:nth-child(2){
	animation: animateSecondGalleryItem 12s linear 4s infinite;
	-webkit-animation: animateSecondGalleryItem 12s linear 4s infinite;
}
.scene.active .gallery_cloud-inner img:last-child{
	animation: animateThirdGalleryItem 12s linear 4s infinite;
	-webkit-animation: animateThirdGalleryItem 12s linear 4s infinite;
}


/********************** Info text *************************/

#scene1 .text_container{
	position: absolute;
    color: #7A7A7A;
    max-width: 26%;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    font-size: 1em;

    z-index: 110;
}

#scene1 #text1{
	top: 39%;
	left: 14%;
}


#scene1 #text1 h1{
	font-weight: bold;
    font-size: 2em;
    margin-bottom: .5em;
    text-align: center;
    /*For animation*/
    opacity: 0;
}

#scene1 .text_container p{
	font-size: 1.5em;
	margin-bottom: 1em;
	/*For animation*/
    opacity: 0;
}


/********************** Animating text elements *****************/

#scene1.active #text1 h1{
	animation: fadeIn 1.5s linear 1.2s 1 forwards;
	-webkit-animation: fadeIn 1.5s linear 1.2s 1 forwards;
}

#scene1.active #text1 p:first-of-type{
	animation: fadeIn 1.5s linear 1.6s 1 forwards;
	-webkit-animation: fadeIn 1.5s linear 1.6s 1 forwards;
}

#scene1.active #text1 p:last-of-type{
	animation: fadeIn 1.5s linear 2s 1 forwards;
	-webkit-animation: fadeIn 1.5s linear 2s 1 forwards;
}

/********************** ../images ************************/

.img_container{
	position: absolute;
	opacity: 0;
}

.img_container#tin1{
	bottom: 4%;
    left: 52%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 28%;
    height: auto;
    z-index: 111;
}

.img_container#tin1 img{
	width: 100%;
	height: auto;
}


#scene1.active .img_container#tin1{
	animation: fadeIn 1.5s linear 2s 1 forwards;
	-webkit-animation: fadeIn 1.5s linear 2s 1 forwards;
}

/***************  buttons ****************/

#scene1 #buttons_container{
	position: absolute;
    top: 48%;
    right: 13%;
    z-index: 199;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 110%;
}

#scene1 #buttons_container ul{

}

#scene1 #buttons_container ul li{
	display: inline-block;
    width: 140px;
    height: 130px;
    vertical-align: top;
    cursor: pointer;
    background-color: #004895;
    border-radius: 20px;
    text-align: center;
    margin-left: 20px;
    opacity: 0;
}

#scene1 #buttons_container ul li a{
	display: block;
    width: 100%;
    height: 100%;
}


#scene1 #buttons_container ul li div.icon_container{
	width: 100%;
	height: 60%;
	background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#scene1 #buttons_container ul li#contact_button div.icon_container{background-image: url('../images/contact_icon.svg');}
#scene1 #buttons_container ul li#play_button div.icon_container{background-image: url('../images/start_icon.svg');}
#scene1 #buttons_container ul li#win_a_tin_button div.icon_container{background-image: url('../images/tin_icon.svg');}

#scene1 #buttons_container ul li span{
	display: block;
    width: 100%;
    /*height: 40%;*/
    text-align: center;
    padding: 0 10px;
    color: white;
}

#scene1 #buttons_container ul li#win_a_tin_button span {
    margin-top: 7%;
}



/*				Animating buttons 			*/

#scene1.active #buttons_container ul li:first-child{
	-webkit-animation: fadeIn 1.5s linear 3.2s 1 forwards;
	animation: fadeIn 1.5s linear 3.2s 1 forwards;
}

#scene1.active #buttons_container ul li:nth-child(2){
		-webkit-animation: fadeIn 1.5s linear 3.4s 1 forwards;
	animation: fadeIn 1.5s linear 3.4s 1 forwards;
}

#scene1.active #buttons_container ul li:last-child{
		-webkit-animation: fadeIn 1.5s linear 3.6s 1 forwards;
	animation: fadeIn 1.5s linear 3.6s 1 forwards;
}


/*					Responsive 					*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene1 .text_container{font-size: .7em;}
	/*#scene1 #buttons_container{font-size: .7em;}*/
	#scene1 #buttons_container ul li{width:100px;/*height: 90px;*/}
	#scene1 #text1{top: 35%;}
}

/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#scene1 .text_container{font-size: .7em;}
	#scene1 #text1{top: 35%;}

	#scene1 #buttons_container{
		font-size: .6em;
		/*top: 48%;
		right: 11%;*/
		top: 35%;
    	right: 5%;

	}
	#scene1 #buttons_container ul li{width:90px;height: 80px;}

	.gallery_cloud{width: 70%;}

	.img_container#tin1{
		left: 55%;
		width: 40%;
	}
}

/*Mobile*/
/*
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	.img_container#tin1{
		bottom: 2%;
	}
	.gallery_cloud{
		width: 50%;
	}

	#scene1 #text1{top: 26%;}

	#scene1 #buttons_container{
		font-size: 0.3em;
	    top: 46%;
	    right: 11%;
	}
	#scene1 #buttons_container ul li{
		width: 57px;
		height: 54px;
		border-radius: 13px;
		margin-left: 13px;
	}

	#scene1 .text_container p {
    	line-height: 110%;
	}
*/
	/*
	.handler.nextScene.first_scene_arrow{
		top: 70% !important;
	}
	*/
/*
	#scene1 .text_container{
		font-size: .4em;
	}
}*/


/***************************************************************
								SCENE 2
****************************************************************/


#scene2 {
	background-color: #EAEAEA;
	z-index: 200;
}

/*Defines the size of the cycle svg canvas*/
.cycle_frame{
	position: absolute;
    width: 70%;
    height: 80%;
    left: 40%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.cycle_inner_frame{
	position: relative;
	width: 100%;
	height: 100%;
}

/*			For IE/ Edge only 		*/

.cycle_inner_frame img.arrows{
	position: absolute;
	display: block;
	width: 42%;
	height: auto;
	top: 12%;
	left: 19%;
}

.svg_cycle{
	position: absolute;
    height: 100%;
    width: 100%;
	top: 0;
	left: 0;
}

#cycle_arrows{
	height: 72%;
    top: 48%;
    left: -10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 201;
}

#cycle_icons{
	z-index: 202;
}

#cycle_icons g{
	/*For the animation*/
   	opacity: 0;
}

#cycle_texts{
	z-index: 203;
    height: 80%;
    top: 1%;
    left: -8%;
	z-index: 203;
}


.cycle_path{
	fill: none;
    stroke: #e26408;
    stroke-miterlimit: 10;
    stroke-width: 8px;
}


.animated_path{
    stroke-dasharray: 388;
    stroke-dashoffset: 400;
    stroke-linecap: round;
}

/*		for IE only 	*/
.ie_path{
	stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke-width: 8px;
    stroke: #e26408 !important;
    /*For the animation*/
   	opacity: 0;
}


/*		Icons colors 	*/

.fill_black{fill:#262626;}
.fill_grey{fill:#979797;}

.fill_blue{fill:#004895;}

.fill_purple{fill:#323387;}
.fill_white{fill:#fff;}
.fill_yellow1{fill:#c4a718;}
.fill_orange1{fill:#d16913;}
.fill_orange2{fill:#8c4613;}
.fill_dark_brown{fill:#2d2d2d;}
.fill_light_brown{fill:#b7ab79;}
.fill_brown{fill:#ad6b28;}
.fill_light_yellow{fill:#ffe706;}
.fill_light_blue{fill:#0d66d1;}


/*				Text 			*/

.svg_text{
	fill: #004895;
    font-family: "OS-Font";
	font-weight: 400;
	
	/*For the animation*/
	opacity: 0;
}

.svg_text_bold{
        font-family: "OS-Font";
	/*font-weight :700;*/
}


.svg_text.svg_text_style_1{
	font-size: 1em;
}

.svg_text.svg_text_style_2{
	font-size: 1em
}

.svg_text.svg_text_style_3{
	font-size: 1em;
}

/*
.svg_text.svg_text_style_1{
	font-size:15.54px;
}

.svg_text.svg_text_style_2{
	font-size:18.2px;
}

.svg_text.svg_text_style_3{
	font-size:16.08px;
}
*/


/************************ Cycle animation *********************************************/

/*			Step 1			*/

#scene2.active .svg_text1{
	animation: fadeIn 1s linear 2s forwards;
	-webkit-animation: fadeIn 1s linear 2s forwards;
}

#scene2.active #cycle_icons g.step1_icons{
	animation: fadeIn 1s linear 2.2s forwards;
	-webkit-animation: fadeIn 1s linear 2.2s forwards;
}

#scene2.active .arrow1 .animated_path{
	animation: dash 1s linear 2.2s forwards;
	-webkit-animation: dash 1s linear 2.2s forwards;
}

/*			For IE				*/
#scene2.active .arrow1 .ie_path{
	animation: fadeIn 1s linear 2.5s forwards;
	-webkit-animation: fadeIn 1s linear 2.5s forwards;
}


/*			Step 2			*/

#scene2.active .svg_text2{
	animation: fadeIn 1s linear 3s forwards;
	-webkit-animation: fadeIn 1s linear 3s forwards;
}

#scene2.active #cycle_icons g.step2_icons{
	animation: fadeIn 1s linear 3.2s forwards;
	-webkit-animation: fadeIn 1s linear 3.2s forwards;
}

#scene2.active .arrow2 .animated_path{
	animation: dash 1s linear 3.2s forwards;
	-webkit-animation: dash 1s linear 3.2s forwards;
}

/*			For IE				*/
#scene2.active .arrow2 .ie_path{
	animation: fadeIn 1s linear 3.5s forwards;
	-webkit-animation: fadeIn 1s linear 3.5s forwards;
}



/*			Step 3			*/

#scene2.active .svg_text3, #scene2.active .svg_text3 .svg_text_bold{
	animation: fadeIn 1s linear 4s forwards;
	-webkit-animation: fadeIn 1s linear 4s forwards;
}

#scene2.active #cycle_icons g.step3_icons{
	animation: fadeIn 1s linear 4.2s forwards;
	-webkit-animation: fadeIn 1s linear 4.2s forwards;
}

#scene2.active .arrow3 .animated_path, #scene2.active .arrow4 .animated_path{
	animation: dash 1s linear 4.2s forwards;
	-webkit-animation: dash 1s linear 4.2s forwards;
}

/*			For IE				*/
#scene2.active .arrow3 .ie_path, #scene2.active .arrow4 .ie_path{
	animation: fadeIn 1s linear 4.5s forwards;
	-webkit-animation: fadeIn 1s linear 4.5s forwards;
}



/*			Step 4			*/

#scene2.active .svg_text4, #scene2.active .svg_text4_bis{
	animation: fadeIn 1s linear 5s forwards;
	-webkit-animation: fadeIn 1s linear 5s forwards;
}

#scene2.active #cycle_icons g.step4_icons{
	animation: fadeIn 1s linear 5.2s forwards;
	-webkit-animation: fadeIn 1s linear 5.2s forwards;
}

#scene2.active .arrow5 .animated_path{
	animation: dash 1s linear 5.2s forwards;
	-webkit-animation: dash 1s linear 5.2s forwards;
}

/*			For IE				*/
#scene2.active .arrow5 .ie_path{
	animation: fadeIn 1s linear 5.5s forwards;
	-webkit-animation: fadeIn 1s linear 5.5s forwards;
}



/*			Step 5			*/

#scene2.active .svg_text5{
	animation: fadeIn 1s linear 6s forwards;
	-webkit-animation: fadeIn 1s linear 6s forwards;
}

#scene2.active #cycle_icons g.step5_icons{
	animation: fadeIn 1s linear 6.2s forwards;
	-webkit-animation: fadeIn 1s linear 6.2s forwards;
}

#scene2.active .arrow6 .animated_path{
	animation: dash 1s linear 6.2s forwards;
	-webkit-animation: dash 1s linear 6.2s forwards;
}

/*			For IE				*/
#scene2.active .arrow6 .ie_path{
	animation: fadeIn 1s linear 6.5s forwards;
	-webkit-animation: fadeIn 1s linear 6.5s forwards;
}


/*			Step 6			*/

#scene2.active .svg_text6{
	animation: fadeIn 1s linear 7s forwards;
	-webkit-animation: fadeIn 1s linear 7s forwards;
}


#scene2.active #cycle_icons g.step6_icons{
	animation: fadeIn 1s linear 7.2s forwards;
	-webkit-animation: fadeIn 1s linear 7.2s forwards;
}


#scene2.active .arrow7 .animated_path{
	animation: dash 1s linear 7.2s forwards;
	-webkit-animation: dash 1s linear 7.2s forwards;
}

/*			For IE				*/
#scene2.active .arrow7 .ie_path{
	animation: fadeIn 1s linear 7.5s forwards;
	-webkit-animation: fadeIn 1s linear 7.5s forwards;
}



/*			Step 7			*/

#scene2.active .svg_text7{
	animation: fadeIn 1s linear 8s forwards;
	-webkit-animation: fadeIn 1s linear 8s forwards;
}


/***************** wagon ***********************/

.wagon_container_X{
    width: 15%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 5%;

    -webkit-transform: translateX(500%);
    transform: translateX(500%);

	visibility: hidden;
    opacity: 0;

    z-index: 400;
}


.wagon_container_X.fadeIn{
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-delay: 7s;
	-webkit-animation-delay: 7s;
}

.wagon_container_X.fadeIn.travelling{
	visibility: visible;
	opacity: 1;
}

.wagon_container_X.travelling{
    animation: translate_wagon_X 4s ease-in-out 1s forwards;
    -webkit-animation: translate_wagon_X 4s ease-in-out 1s forwards;
}



.wagon_container_X-inner, .wagon_container_Y-inner{
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
}

.wagon_container_Y{
	width: 100%;
    height: 20%;
    top: 12%;
    overflow: hidden;
    position: absolute;

    -webkit-transform: translateY(0%);
    transform: translateY(0%);

	transition-property: transform;
    transition-duration: 1.6s;
    transition-timing-function: cubic-bezier(.55,.02,.25,.98);
    transition-delay: 2.6s;
}

.wagon_container_X.travelling .wagon_container_Y{
    -webkit-transform: translateY(250%);
	transform: translateY(250%);
}



.wagon{
	width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 60%;
    background-image: url(../images/wagon.svg);
    position: absolute;

}

.wagon_container_X.travelling .wagon{
	animation: rotateWagon 1.7s ease-in-out 2.4s 1 forwards;
    -webkit-animation: rotateWagon 1.7s ease-in-out 2.4s 1 forwards;
}


/*					Responsive 				*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	.cycle_frame{
		left: 44%;
	}
}

/*Tablets & iPads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	.cycle_frame{
		width: 80%;
		height: 68%;
	}

	.cycle_inner_frame img.arrows{
		width: 40%;
		height: auto;
		top: 6%;
		left: 20%;
	}
}

/*Mobile
*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	.cycle_frame{
		width: 80%;
		height: 80%;
		left: 48%;
	}

	.cycle_inner_frame img.arrows{
		width: 55%;
		height: auto;
		top: 13%;
		left: 11%;
	}

}


/***************************************************************
								SCENE 3
****************************************************************/

#scene3 {
	background-color: #EAEAEA;
	z-index: 300;
	transition: transform 2s ease-out;
}

#scene3.active:not(.current){
	transition: transform 3s ease-out;
}

#scene3 .scene-inner{
	-webkit-transform: translateY(11%);
	transform: translateY(11%);

	height: 300%;
}

#scene3.active .scene-inner{
	-webkit-transform: translateY(0%);
	transform: translateY(0%);

	transition: transform 1.5s ease-in-out 2.1s;
}

#scene3.second_step.active .scene-inner{
	-webkit-transform: translateY(-30%);
	transform: translateY(-30%);

	transition: transform 2s ease-in-out .2s;
}

#scene3.third_step.active .scene-inner{
	-webkit-transform: translateY(-66%);
	transform: translateY(-66%);

	transition: transform 2s ease-in-out .2s;
}

.clouds_container {
    width: 100%;
    height: 18%;
    position: absolute;
}

.clouds_container-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.cloud{
	position: absolute;
	background-image: url('../images/cloud.svg');
	background-position: center center;
    background-repeat: no-repeat;
    background-size: 95%;

    -webkit-transform: translateX(-500%);
    transform: translateX(-500%);
}

#cloud1{
	width: 14%;
    height: 40%;
    top: 8%;
    background-image: url('../images/cloudreverse.svg');

	z-index: 303;
}

#cloud2{
	width: 20%;
	height: 15%;
	width: 10%;
    height: 28%;
    top: 25%;

    z-index: 302;
}

#cloud3{
	width: 7%;
    height: 20%;
    bottom: 0;
    left: 28%;

    z-index: 301;
}

/*	Animating clouds when active 	*/
#scene3.active #cloud1{
	animation: animateClouds 15s linear 0s infinite reverse;
	-webkit-animation: animateClouds 15s linear 0s infinite reverse;
}

#scene3.active #cloud2{
    animation: animateClouds 118s linear 0s infinite;
	-webkit-animation: animateClouds 18s linear 0s infinite;
}

#scene3.active #cloud3{
	animation: animateClouds 22s linear 1.5s infinite;
	-webkit-animation: animateClouds 22s linear 1.5s infinite;
}

/****************  TEXTS ***********************/

#scene3 .text_container.text_step1{
    left: 50%;
    top: 14%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 40%;
    font-size: 1em;
}

#scene3 .text_container.text_step1 h1{
	font-size: 4em;
}

#scene3 .text_container.text_step1 h1 span{
	display: block;
    font-weight: bold;
    letter-spacing: 0.3em;
}

#scene3 .text_container.text_step1 p{
	padding: 3%;
    font-size: 2em;
}


#scene3 .text_container.text_step2{
	left: 10%;
    max-width: 20%;
    top: 36%;
    font-size: 1em;
}

#scene3 .text_container.text_step2 h1{
	font-size: 2em;
    margin-bottom: 1.2em;
    font-weight: bold;
}

#scene3 .text_container.text_step2 p{
	font-size: 1.5em;
    margin-bottom: 1.2em;
}



/****************               *****************/


#video_container1.video_container{
	width: 32%;
	height: 12%;
	position: absolute;
	left: 50%;
	top: 41%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


.video_container video{
	width: 100%;
	height: auto;
}

.video{
	cursor: pointer;
}

.metal_roll_container{
	position: absolute;
	width: 10%;
	height: 10%;
	max-width: 150px;
	max-height: 100px;

	left: 50%;
	top: 53%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	background-image: url('../images/metalroll.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	/*For animation*/
	visibility: hidden;
	opacity: 0;
}

#scene3.second_step.active .metal_roll_container{
	animation: fadeIn 1s linear 2s forwards;
	-webkit-animation: fadeIn 1s linear 2s forwards;
}

#scene3.third_step.active .metal_roll_container{
	visibility: visible;
	opacity: 1;
}


/*************** overlayed wagon ***************/

.fixed_wagon_container{
	position: absolute;
    width: 15%;
    height: 10%;
    left: 5%;
    top: 1%;
    -webkit-transform: translate(100%, 70%);
    transform: translate(100%, 70%);
}

#scene3 .wagon{
	opacity: 0;
}

#scene3.active .wagon{
	animation: fadeIn .1s linear 1.8s 1 forwards;
	-webkit-animation: fadeIn .1s linear 1.8s 1 forwards;
}


/***************** step 2 ******************/

.boiler_system {
    position: absolute;
    width: 15%;
    max-width: 200px;
    height: 500px;
    top: 22%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.boiler_container{
	position: absolute;
    width: 70%;
    height: 35%;
    top: 0;
    left: 0;
}

.boiler, .boiler_arm{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.boiler{
	background-image: url('../images/boiler.svg');
}

.boiler_arm{
	background-image: url('../images/boiler_arm.svg');
}

.melted_metal_svg{
	position: absolute;
    width: 100%;
    height: 100%;
}

.melted_metal_path{
	fill: none;
	stroke: #e26408;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 22px;
}

.melted_metal_animated_path{
	stroke-dasharray: 350;
    stroke-dashoffset: 351;
}

.melted_metal_animated_path.poured{
	animation: dashLiquid 3s linear .9s forwards;
	-webkit-animation: dashLiquid 3s linear .9s forwards;
}


/*				For IE/ Edge only 			*/

img.melted_metal_img{
	position: absolute;
	display: block;
	visibility: hidden;
	opacity: 0;
	height: 500px;
	width: auto;
	top: 15%;
	left: 54%;
}

#scene3.second_step img.melted_metal_img{
	animation: fadeIn 1s linear .9s forwards;
	-webkit-animation: fadeIn 1s linear .9s forwards;
}




/************		third step 	***********************/

.landscapeGreen{
	position: absolute;
	width: 100%;
	height: 48%;
	bottom: 0;
	left: 0;

	background-image: url('../images/landscapegreen.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}

#scene3 .landscapeGreen-inner{
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
}

#scene3 .text_container.text_step3{
	left: 60%;
    bottom: 5%;
    width: 50%;
    height: 50%;

    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.text_container.text_step3 .width50.left{
	height: 55%;
	position: relative;
}

.text_container.text_step3 .width100.left {
    height: 45%;
}

.text_container.text_step3 .width100.left div{
	width: 80%;
}

.text_container.text_step3 div h1{
	font-size: 2em;
    font-weight: bold;
    margin-bottom: .5em;
}

.text_container.text_step3 div p{
	font-size: 1.5em;
    text-align: justify;
    line-height: 130%;
}



.industry_logo{
	width: 100%;
	height: 100%;
	background-image: url('../images/industry_logo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom left;
}


div#video_container2{
	position: absolute;
	bottom: 0;
}


/*Responsive font resize*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene3 .text_container.text_step1 h1{
		font-size: 3em;
	}

	#scene3 .text_container.text_step2{
		font-size: .8em;
		top: 38%;
	}

	#scene3 .text_container.text_step3 div h1{
		font-size: 2em;
	}

	#scene3 .text_container.text_step3 div p{
		font-size: 1.1em;
	}

	.boiler_system{
		height: 490px;
	}
}

/* Ipads */
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#scene3 .text_container.text_step1 h1{
		font-size: 2.3em;
	}

	#scene3 .text_container.text_step1 p{
	    padding: 3% 10%;
    	font-size: 1.4em;
	}

	#scene3 .text_container.text_step2{
		font-size: .8em;
	}

	#scene3 .text_container.text_step2 h1{
		font-size: 2.3em;
	}

	#scene3 .text_container.text_step3 div h1{
		font-size: 2em;
	}

	#scene3 .text_container.text_step3 div p{
		font-size: 1.1em;
	}

	img.melted_metal_img{
		height: 300px;
	}


}

@media screen and (min-width: 700px) and (max-width: 1099px){
	#scene3 .text_container.text_step1 h1{
		font-size: 2em;
	}

	#scene3 .text_container.text_step1 p{
    	font-size: 1em;
	}

	#scene3 .text_container.text_step3 .width100.left div{
		width: 80%;
	}

	#scene3 .text_container.text_step3 div h1{
		font-size: 2em;
	}

	#scene3 .text_container.text_step3 div p{
		font-size: 1.1em;
	}
}


/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	
	#scene3 .text_container.text_step1{
		font-size: .3em;
	}

	#scene3 .text_container.text_step1 p{
	    line-height: 150%;
	}


	#scene3 .text_container.text_step2{
	    font-size: 0.4em;
    	top: 38%;
    	line-height: 210%;
	}

	#scene3 .text_container.text_step2 h1{
		font-size: 1.8em;
	}

	.text_container.text_step3 .width100.left{
		height: 62%;
	}

	#scene3 .text_container.text_step3{
		bottom: 12%;
		font-size: .5em;
	}

	.text_container.text_step3 div h1{
		font-size: 1.8em;
	}

	#scene3 .text_container.text_step3 .width100.left div{
		width: 90%;
	}

	.boiler_system{
		height: 300px;
	}

	.melted_metal_svg{
		height: 83%;
	}
}



/***************************************************************
								SCENE 4
****************************************************************/

/*					For Bea & Alex 			*/

#scene4{
	z-index: 400;
	transition: transform 3s ease-out
}


/* scene4-left */
.scene4-left {
	/*display:none;*/
	position: absolute;
	text-align: center;
	width: 40vw;
	height: 40vw;
	top: 0;
	left: 0;	
	z-index: 401;
	
	-webkit-transform: translate(-200%, -200%);
	-ms-transform: translate(-200%, -200%);
	transform: translate(-200%, -200%);
	
}


#scene4.active .scene4-left {
	-webkit-transform: translate(0%);
	-ms-transform: translate(0%);
	transform: translate(0%);
	transition: transform 2s ease-out 1s;
}


/*
#scene4.active .scene4-left{
	animation: slideInLeft 1s linear 2s forwards;
	-webkit-animation: slideInLeft 1s linear 2s forwards;
}
*/

.scene4-left ul{
	width: 100%;
	height: 100%;
	overflow: hidden;
    position: relative;
}

.scene4-left ul li{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.scene4-left ul li.selected{
	display: block;
}

.scene4-left ul li.selected img{
	width: 110%;
}

/*mascara-triangulo*/
.scene4-left ul:after{
	content: '';
    position: absolute;
    bottom: 0%;
    right: 0%;
    z-index: 402;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../images/3Dscreen/triangulo.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.scene4-left .container2 img{
	max-width: 500px;
}


/* scene4-center */
.scene4-center{
 	/*display:none;*/
	position: absolute;
	text-align: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 402;
}

.scene4-center .text{
	margin-bottom: 30px!important;
	 color:#004895!important;
	 font-size: 1em;
	 margin-top: 4%;
}
.scene4-center .text *{
 color:#004895!important;
 line-height:100%;
}
.scene4-center .text h3{
	font-size: 2em!important;
	 margin-bottom:0.25em!important;
}
.scene4-center .text h2{
	margin: 10px 0!important;
	font-size: 5em!important;
	margin-bottom:0.25em!important;
}
.scene4-center .text h4{
	font-size: 1.5em!important;
	margin-bottom:0.25em!important;
}
.scene4-center .text h4 span{
	display: block!important;
}

.scene4-center ul{
    position: relative;
}
.scene4-center ul li{
    width: 80%;
    height: 60vh;
    position: absolute;
    top: 0;
    left: 10%;
    display: none;
}

.scene4-center ul li.selected{
	display: block;
}

.scene4-center .container2 img{
	max-width: 350px;
}

.iframe_container.container2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* scene4-right */
.scene4-right{
	/*display:none;*/
	position: absolute;
	text-align: center;
	top: 29.5%;
	right: 5%;
	z-index: 403;
	font-size: 1em;
	
	-webkit-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
	
}

#scene4.active .scene4-right{
	animation: slideInRight 1s linear 2s forwards;
	-webkit-animation: slideInRight 1s linear 2s forwards;
}

.scene4-right >p{
	font-size: 1.3em;
	font-weight: 900;
	color:#004895!important;
}
.scene4-right ul{
	margin-top: 30px;
}
.scene4-right ul li{
	width: 100%;
	margin: 5px 0;
	padding: 10px 18px;
	display: table;
	text-align: left;
	font-weight: 500;
	border-radius: 5px;
	background-color: transparent;
}
.scene4-right ul li >*{
	display: table-cell;
	vertical-align: middle;
}

.scene4-right ul span{
	padding-right: 20px;
	display: inline-block;
		
}
.scene4-right ul span svg{
	width: 25px;
	height: 20px;
}

.scene4-right ul p{
	font-size: 1em;
	display: inline-block;
	color:#004895!important;
	margin-bottom:0px!important;
}

.scene4-right ul li:hover,
.scene4-right ul li.selected{
	background-color: #E36308;
	cursor: pointer;
}
.scene4-right ul li:hover p,
.scene4-right ul li.selected p{
	color:#ffffff!important;
}
.scene4-right ul li span svg.fill_blue *{
	fill: #004895;
}
.scene4-right ul li:hover span svg.fill_blue *,
.scene4-right ul li.selected span svg.fill_blue *{
	fill: #fff;
}


/*portatil*/
@media screen and (min-width: 700px) and (max-width: 1100px){
	.scene4-center .container2 img{
		max-width: 300px;
	}

	/* scene4-right */
	.scene4-right{
		font-size: .8em;
	}
}

/*Mobile*/

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	.scene4-center .container2 img{
		max-width: 300px;
	}

	/* scene4-right */
	.scene4-right{
		font-size: .5em;
		top: 13%;
	}

	.scene4-right ul li{
		margin: 5px 0;
		padding: 5px 8px;
	}

	.scene4-right ul li p{
		font-size: .8em;
	}

	.scene4-right ul span svg{
		width: 10px;
		height: 6px;
	}

	.scene4-center{
		font-size: .4em;
	}
}




/***************** Tin animation ******************/

.tin_container{
	position: absolute;
	z-index: 999;
	left: 50%;
	bottom: 15%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	visibility: hidden;
}

.tin_container.falling{
	visibility: visible;
	animation: fadeOut .4s linear 1s forwards;
	-webkit-animation: fadeOut .4s linear 1s forwards;
}

.tin{
	width: 155px;
	height: 90px;
	background-image: url('../images/tin1.png');
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center;
}

.tin_container.falling .tin{
	animation: fall 2s linear;
	-webkit-animation: fall 2s linear;
}

.tin_container.falling2{
	bottom: auto;
	left: 51%;
	top: 37%;
	visibility: visible;
	animation: fadeOut .4s linear 2.6s forwards;
	-webkit-animation: fadeOut .4s linear 2.6s forwards;
}

.tin_container.falling2 .tin{
	animation: fall 3.5s linear;
	-webkit-animation: fall 3.5s linear;
}

/***************************************************************
								SCENE 5
****************************************************************/

#scene5 {
	background-color: #EAEAEA;
	z-index: 500;
	transition: transform 3s ease-out
}


.road_container, .trees_container{
	width: 100%;
    height: 100%;
    overflow: hidden;
    /*For the z-index*/
    /*position: fixed;*/
    position: absolute;
}

.trees_far, .trees_close{
	background-image: url('../images/tree.png');
	
	position: absolute;
	background-repeat: repeat-x;
	width: 100%;
    height: 100%;
    transition: transform 2s ease-in-out;
}

.trees_far{
    background-position: 64% 44%;
    background-size: 36%;
}

.trees_far.cruising{
	animation: accelerateToCruisingReverse 8s ease-in forwards, cruisingReverse 32s linear 8s infinite forwards;
	-webkit-animation: accelerateToCruisingReverse 8s ease-in forwards, cruisingReverse 32s linear 8s infinite forwards;
}

.trees_close{
    background-position: 52% 32%;
    background-size: 55%;
}

.trees_close.cruising{
	animation: accelerateToCruisingReverse 5s ease-in forwards, cruisingReverse 20s linear 5s infinite forwards;
	-webkit-animation: accelerateToCruisingReverse 5s ease-in forwards, cruisingReverse 20s linear 5s infinite forwards;
}


.road{
	background-image: url('../images/road.png');

	width: 100%;
    height: 100%;
    background-position: 100% 64%;
    background-size: 180% 55%;
    background-repeat: repeat-x;
    transition: transform 2s ease-in-out;
}


.road.cruising{
	animation: accelerateToCruising 5s ease-in forwards, cruising 50s linear 2.3s infinite forwards;
	-webkit-animation: accelerateToCruising 5s ease-in forwards, cruising 50s linear 2.3s infinite forwards;
}


.truck_container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*For the z-index*/
    /*position: fixed;*/
    position: absolute;
}

.truck{
	width: 100%;
    height: 100%;
    background-position: 52% center;
    background-repeat: no-repeat;
    background-size: 15%;

	/*Scene transition speed formula*/
    transition: transform 2s ease-in-out;
}

#truck1{background-image: url('../images/truck01.png');}


/*****************		Texts 		*****************/

#scene5 .text_container{
	width: 33%;
    top: 25%;
    right: 5%;
    font-size: 1em;
}

#scene5 .text_container h1{
	font-size: 3em;
    margin-bottom: 0.8em;

    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

#scene5 .text_container p{
	font-size: 1.5em;
    margin-bottom: 0.5em;

    /*For animation*/
    opacity: 0;
    visibility: hidden;
}


#scene5.active.current .text_container h1{
	animation: fadeIn 1s linear 1.5s forwards;
	-webkit-animation: fadeIn 1s linear 1.5s forwards;
}


#scene5.active.current .text_container p:first-of-type{
	animation: fadeIn 1s linear 2s forwards;
	-webkit-animation: fadeIn 1s linear 2s forwards;
}

#scene5.active.current .text_container p:last-child{
	animation: fadeIn 1s linear 2.4s forwards;
	-webkit-animation: fadeIn 1s linear 2.4s forwards;
}


/*						Responsive 						*/
/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene5 .text_container{
		width: 30%;
	    top: 21%;
	    right: 8%;
	    font-size: 1.1em;
	}

	#scene5 .text_container h1{
		font-size: 2em;
	    margin-bottom: 0.8em;
	}

	#scene5 .text_container p{
		font-size: 1.1em;
	    margin-bottom: 8em;
	}
}


/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){

	#scene5 .text_container {
		top: 16%;
		font-size: 1.2em;
		width: 30%;
		right: 8%;
	}

	#scene5 .text_container h1{
		font-size: 2em;
	    margin-bottom: 1.1em;
	}

	#scene5 .text_container p{
		font-size: 1.2em;
    	margin-bottom: 4.5em;
	}


	.trees_far{
	    background-position: 64% 49%;
	}

	.trees_close {
	    background-position: 52% 44%;
	}

}


/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene5 .text_container{
		top: 12%;
    	font-size: .4em;
    	width: 30%;
	}

	#scene5 .text_container p{
		margin-bottom: 4em;
	}

	#scene5 .text_container p:first-of-type{
		margin-bottom: 10em;
	}

	.trees_close {
    	background-position: 52% 32%;
	}
}


/***************************************************************
							SCENE 6
****************************************************************/

/******************  First step **************************/

#scene6 {
	background-color: #FF6600;
	z-index: 600;

	transition: transform 3s ease-in-out;
}

#scene6.current {
	transition: transform 5.3s linear;
}

#scene6 .step_container{
	position: absolute;
	transition: transform 4s ease-in-out;
}

#scene6 .first_step_container{
	width: 100%;
    height: 100%;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}


#scene6 .second_step_container{
	width: 100%;
    height: 100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

#scene6 .third_step_container{
	width: 100%;
    height: 100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}


#scene6.second_step .first_step_container, #scene6.third_step .first_step_container, #scene6.third_step .second_step_container{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

#scene6.second_step .second_step_container, #scene6.third_step .third_step_container{
    -webkit-transform: translateX(0%);
	transform: translateX(0%);
}



#scene6 .road{
	background-image: url('../images/road.png');
	background-position: 0% 64%;
	background-size: 280% 55%;
}

#scene6 .road_container{
	width: 58%;
    right: 0;
}


#truck2{
	background-image: url('../images/truck02.png');
	transition: transform 5.3s linear;
}

#scene6.current div#truck2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


.first_step_container .house_container{
	position: absolute;
	height: 100%;
    width: 45%;
}

.house_container .house{
	position: absolute;
    width: 40%;
    height: 40%;
    background-image: url(../images/house.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    right: 0;
    top: 45%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}



.first_step_container .text_container{
	height: 100%;
	width: 40%;
	left: 50%;

    -webkit-transform: translateX(-50%);
	transform: translateX(-50%);

    color: white;
}


/*				Texts 				*/

.first_step_container .text_container div{
	position: absolute;
	bottom: 7%;
}

.first_step_container .text_container h1{
	color: white;
    font-size: 2.8em;
    margin-top: 16%;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

.first_step_container .text_container div p{
	color: white;
    margin-bottom: 3%;
    font-size: 1.5em;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}


/*		Animate first_step texts 		*/

#scene6.first_step .first_step_container .text_container h1{
	animation: fadeIn 1s linear 5s forwards;
	-webkit-animation: fadeIn 1s linear 5s forwards;
}


#scene6.first_step .first_step_container .text_container div p{
	animation: fadeIn 1s linear 5.5s forwards;
	-webkit-animation: fadeIn 1s linear 5.5s forwards;
}

#scene6.second_step .first_step_container .text_container h1, 
#scene6.second_step .first_step_container .text_container div p{
	opacity: 1;
	visibility: visible;
}



/* 		Responsive text 			*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){

	.house_container .house{
		top: 46%;
		width: 37%;
		right: 1%;
	}
	
	.first_step_container .text_container h1{
		font-size: 2em;
	}

	.first_step_container .text_container div{
		bottom: 5%;
	}

	.first_step_container .text_container div p{
	    font-size: 1em;
	    line-height: 120%;
	}
}


/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	
	.first_step_container .text_container{
		width: 56%;
		left: 55%;
	}

	.house_container .house{
		top: 50%;
		width: 45%;
		right: 1%;
	}


	.first_step_container .text_container h1{
		font-size: 2.5em;
	}

	.first_step_container .text_container div{
		bottom: 3%;
		font-size: 1.3em
	}

	.first_step_container .text_container div p{
	    font-size: 1em;
	}
}

/*Mobile*/

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){

	.first_step_container .text_container{
		width: 50%;
		left: 53%;
		font-size: .6em;
	}

	.first_step_container .text_container h1{
		margin-top: 12%;
		font-size: 1.7em;
	}

	.first_step_container .text_container div{
		bottom: 1%;
    	font-size: 0.8em;
	}

	.first_step_container .text_container div p{
		font-size: 1.1em;
		line-height: 140%;
	}

	.house_container .house{
		top: 49%;
	    width: 38%;
	    right: 1%;
	}

}

/******************  Second step **************************/

.second_step_container .info_container{
	position: absolute;
    height: 60%;
    width: 40%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.second_step_container .info_container .cans_container{
	width: 100%;
    height: 60%;
    background-image: url(../images/cans.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

#scene6 .second_step_container .text_container{
	position: static;
    height: 40%;
    width: 70%;
    margin: 0 auto;
    left: 0;
    font-size: 1em;
}

.second_step_container .text_container p{
	color: white;
    text-align: center;
    margin-top: 8%;
    font-size: 2em;
    line-height: 120%;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

.second_step_container .text_container p:last-child{
	color: white;
    text-align: center;
    margin-top: 1%;
    font-size: 4em;
}

.second_step_container .text_container p span{
	color: white;
    font-size: 1em;
}


/*		Animate second_step texts 		*/

#scene6.second_step .second_step_container .cans_container{
	animation: fadeIn 1s linear 2s forwards;
	-webkit-animation: fadeIn 1s linear 2s forwards;
}

#scene6.second_step .second_step_container .text_container p:first-of-type{
	animation: fadeIn 1s linear 2.5s forwards;
	-webkit-animation: fadeIn 1s linear 2.5s forwards;
}

#scene6.second_step .second_step_container .text_container p:last-of-type{
	animation: fadeIn 1s linear 2.8s forwards;
	-webkit-animation: fadeIn 1s linear 2.8s forwards;
}

#scene6.third_step .second_step_container .cans_container, 
#scene6.third_step .second_step_container .text_container p{
	opacity: 1;
	visibility: visible;
}


/* 			Responsive text 			*/

@media screen and (min-width: 1300px) and (max-width: 1650px){
	#scene6 .second_step_container .text_container{font-size: 0.8em;}
}


@media screen and (min-width: 700px) and (max-width: 1299px){
	#scene6 .second_step_container .text_container{font-size: 0.6em;}
}

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene6 .second_step_container .text_container{
		font-size: 0.4em;
	}
}


/******************  Third step **************************/

.third_step_container .text_container{
	height: 100%;
	width: 40%;
	left: 50%;
	text-align: center;
	font-size: 1em;

	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.third_step_container .text_container p{
	color: white;
    text-align: center;
    margin-top: 2%;
    font-weight: lighter;
    font-size: 1.5em;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

.third_step_container .text_container h1{
	color: white;
    font-size: 7em;
    margin-bottom: 12%;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}
.third_step_container .text_container h2{
	color: white;
    font-size: 5em;
    margin: 6% 0;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

.third_step_container .text_container h2 span{
	color: white;
    font-size: 1em;
}

.third_step_container .text_container h3{
	color: white;
    margin-top: 14%;
    font-size: 3em;
    /*For animation*/
    opacity: 0;
    visibility: hidden;
}

.third_step_container .text_container .clearfix p{
	color: white;
    font-size: 3em;
    padding: 0 10%;
}

.third_step_container .text_container .clearfix p span{
	color: white;
    font-size: 1em;
}


/*		Animate third_step texts 		*/

#scene6.third_step .third_step_container .text_container h3, 
#scene6.third_step .third_step_container .text_container h1{
	animation: fadeIn 1s linear 2s forwards;
	-webkit-animation: fadeIn 1s linear 2s forwards;
}

#scene6.third_step .third_step_container .text_container > p{
	animation: fadeIn 1s linear 2.5s forwards;
	-webkit-animation: fadeIn 1s linear 2.5s forwards;
}

#scene6.third_step .third_step_container .text_container > h2{
	animation: fadeIn 1s linear 3s forwards;
	-webkit-animation: fadeIn 1s linear 3s forwards;
}

#scene6.third_step .third_step_container .text_container .clearfix p{
	animation: fadeIn 1s linear 3.4s forwards;
	-webkit-animation: fadeIn 1s linear 3.4s forwards;
}



/* 			Responsive text 			*/
/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene6 .third_step_container .text_container{
		font-size: 0.8em;
	}
}

/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#scene6 .third_step_container .text_container{
		font-size: 0.8em;
		top: 10%;
	}
}

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene6 .third_step_container .text_container{
		font-size: 0.4em;
    	top: 0;
	}

}


/*********************** PAPER DOLL *************************/


.doll_container{
	position: absolute;
    width: 15%;
    height: 40%;
    top: 46%;
    z-index: 999;
    left: 13%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    /*For animation*/
    visibility: hidden;
    opacity: 0;
}


.doll{
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}



/*			First step  		*/
#scene6.first_step .doll_container{
	animation: fadeIn 1s linear 6s forwards;
	-webkit-animation: fadeIn 1s linear 6s forwards;
}

#scene6.first_step .doll_container .doll{
	background-image: url(../images/doll1.svg);
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}



#scene6.second_step .doll_container, #scene6.third_step .doll_container{
	visibility: visible;
    opacity: 1;
}


/*			Second step  		*/


#scene6.second_step .doll_container{
	left: 65%;
	transition: left 4s ease-in-out;
}

#scene6.second_step .doll_container .doll{
	background-image: url(../images/doll1.svg);
}

/*			Second step  		*/

#scene6.third_step .doll_container{
	left: 65%;
}

#scene6.third_step .doll_container .doll{
	background-image: url(../images/doll1.svg);
}


#scene6.third_step .doll_container.throwing{
	left: 45%;
	transition: left 2s ease-in-out;
}


#scene6.third_step .doll_container.throwing .doll{
	background-image: url(../images/doll2.svg);
	transition: background-image .2s linear 2s;
}

/*				Responsive 			*/

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	.doll_container{
		height: 50%;
	}

	.doll{
		background-size: 75%;
	}
}


/***************************************************************
							SCENE 7
****************************************************************/


/*******************	Recycle SVG path **********************/

#scene7{
	background-color: #EAEAEA;
	z-index: 700;

	transition: transform 3s ease-in-out;
}


.recycle_frame{
	position: absolute;
    width: 80%;
    height: 68%;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}



.recycle_path{
	fill: none;
	stroke: #d6f2b1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 43px;
}

/*		For IE only 		*/
.ie_recycle_path{
	stroke-dasharray: 0;
    stroke-dashoffset: 0;

    /*For the animation*/
   	opacity: 0;
}


path.recycle_animated_path{
	stroke-dasharray: 2599;
	stroke-dashoffset: 2600;
}

line.recycle_animated_path{
	stroke-dasharray: 120;
    stroke-dashoffset: 121;
}


/*				Animate the cycle 			*/

#scene7.active path.recycle_animated_path{
	animation: dash 1.8s linear 2.5s forwards;
	-webkit-animation: dash 1.8s linear 2.5s forwards;
}

#scene7.active line.recycle_animated_path{
	animation: dash .5s linear 4.2s forwards;
	-webkit-animation: dash .5s linear 4.2s forwards;
}

/*		For IE only 		*/
#scene7.active line.ie_recycle_path, #scene7.active path.ie_recycle_path{
	animation: fadeIn .5s linear 3s forwards;
	-webkit-animation: fadeIn .5s linear 3s forwards;
}


/*					Texts & Content 				*/


#scene7 .info_container{
	position: absolute;
	height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

#scene7 .info_container .top_container{
	height: 80%;
	font-size: 1em;
}


.info_container .bin_container{
	background-image: url(../images/greyrecyclebin.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center center;
}

.info_container .top_container p{
	font-size: 2em;
	width: 100%;
}


.top_container .width33{
	height: 100%;
	text-align: center;
}

.top_container .width33:first-child, .top_container .width33:last-child, .top_container .width33:nth-child(2) .bottom{
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	align-items: center;
}


.top_container .width33:first-child p > span{
	font-size: 3em;
	display: block;
}


.top_container .width33:nth-child(2){
	font-size: 1.5em;
}

.top_container .width33:nth-child(2) .top{height: 30%;}
.top_container .width33:nth-child(2) .middle{height: 50%;}
.top_container .width33:nth-child(2) .bottom{height: 20%;}



.top_container .width33:nth-child(2) .top p:nth-child(2){
	font-size: 2.8em;
	font-weight: bold;
}


.top_container .width33:last-child div{
	width: 100%;
}

.top_container .width33:last-child p > span{
	font-weight: bold;
	font-size: 1.8em;
}



#scene7 .info_container .bottom_container{
	height: 20%;
	font-size: 1em;
	/*For animation*/
	opacity: 0;
	visibility: hidden;
}

.bottom_container.width100 .width50 {
    text-align: center;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom_container.width100 span {
    font-size: 2em;
    display: inline-block;
    border: solid 2px;
    padding: 0.3em;
    width: 75%;
    text-align: center;
    cursor: pointer;
}


/* 			Animating text & Elements			*/
	
	/*For animation*/
.top, .middle, .bottom, .top_container .width33:first-child, .top_container .width33:last-child{
	visibility: hidden;
	opacity: 0;
}

#scene7.active .middle{
	animation: fadeIn 1s linear 1.8s forwards;
	-webkit-animation: fadeIn 1s linear 1.8s forwards;
}

#scene7.active .top{
	animation: fadeIn 1s linear 2s forwards;
	-webkit-animation: fadeIn 1s linear 2s forwards;
}

#scene7.active .top_container .width33:first-child, #scene7.active .top_container .width33:last-child{
	animation: fadeIn 1s linear 3s forwards;
	-webkit-animation: fadeIn 1s linear 3s forwards;
}

#scene7.active .bottom, #scene7.active .info_container .bottom_container{
	animation: fadeIn 1s linear 3.5s forwards;
	-webkit-animation: fadeIn 1s linear 3.5s forwards;
}



/* 			Responsive text 			*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene7 .info_container .top_container{font-size: .8em;}

	.top_container .width33:nth-child(2){font-size: 1.3em;}

	#scene7 .info_container .bottom_container{font-size: .7em}
}


/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#scene7 .info_container .top_container{font-size: .7em;}
	.top_container .width33:nth-child(2) {font-size: 1.2em;}
	#scene7 .info_container .bottom_container{font-size: .7em;}
}


/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene7 .info_container .top_container{font-size: .3em;}
	#scene7 .info_container .bottom_container{font-size: .4em;}
}


/***************************************************************
							SCENE 8
****************************************************************/

#scene8{
	background-color: #EAEAEA;
	z-index: 800;

	background-image: url('../images/background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	transition: transform 3s ease-in-out;
}

#scene8 .info_container{
	margin: 3% auto;
	height: 30%;
}

#scene8 .info_container .width50{
	height: 100%;
}

#scene8 .info_container .width50:first-child{
	font-size: 1em;
}

#scene8 .info_container .width50:first-child h1{text-align: center;font-size: 3em;margin-bottom: 2%;}

#scene8 .info_container .width50:first-child h1 span{
	display: block;
	font-size: 2em;
	letter-spacing: 0.1em;
}

#scene8 .info_container .width50:first-child p{font-size: 1.2em;margin-bottom: 2%;padding: 0 2%;}


#scene8 .info_container .width50:last-child{
	position: relative;
	height: 100%;
}

#scene8 #video_container3{
	position: absolute;
	right: 0;
	height: 100%;
}

#scene8 #video_container3 video{
	height: 90%;
	width: auto;
}

#scene8 #video_footer{
    text-align: right;
    padding-right: 5px;
}

.conditions{
	color: white !important;
	margin-top: 30px;
	width: 60%;
}


.conditions a{
	color: white;
	font-style: italic;
	text-decoration: underline;
}


/*					Responsive 				*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene8 .info_container{height: 27%;}
	#scene8 .info_container .width50:first-child{font-size: .8em;}
	#scene8 .info_container .width50:first-child h1{font-size: 2em;}
	.conditions{margin-top: 20px;}
}

/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#scene8 .info_container{height: 35%;}
	#scene8 #video_container3 video{width: 100%; height: auto;}
	#scene8 .info_container .width50:first-child{font-size: 1em;}
	#scene8 .info_container .width50:first-child h1{font-size: 2em;}
	.conditions{margin-top: 10px; width: 50%;}
}

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene8 .info_container{height: 35%;}
	#scene8 #video_container3 video{height: 100%; width: auto;}
	#scene8 .info_container .width50:first-child{font-size: 1em;}
	#scene8 .info_container .width50:first-child h1{font-size: 2em;}

	.conditions{
		margin-top: 10px; width: 60%;
	}

	.conditions .checkbox::before{
		top: 65%;
		width: 20px;
		height: 20px;
	}

	.conditions span {
	    font-size: 0.7em;
	    margin-left: 4px;
	}
}

/***************************************************************
							SCENE 9
****************************************************************/

#scene9{
	background-color: #EAEAEA;
	z-index: 900;
	text-align: center;
}

#scene9 .scene9-top{
	position: absolute;
	left: 50%;
	top: 10%;
	z-index: 901;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
#scene9 .scene9-top h3{
	margin-bottom: 20px;
	font-size: 2.5em;
}
#scene9 .scene9-top h2{
	width: 700px;
    margin: 0 auto;
	font-size: 3em;
}

#scene9 .scene9-top, #scene9 .scene9-bottom{
	font-size: 1em;
}


#scene9 .scene9-bottom{
	width: 60%;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	bottom: 5%;
	z-index: 902;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
#scene9 .scene9-bottom a{
	padding: 15px 20px;
	display: block;
}


#scene9 .scene9-bottom >div{
	font-size: 1em;
}

#scene9 .scene9-bottom >div:first-child >*{
	margin-bottom: 4%;
	font-size: 1.6em;
}

#scene9 .scene9-bottom a.button{
	font-size: 2em;
	color: #fff !important;
	display: inline-block;
	width: 30%;
}

#scene9 .scene9-bottom >div:last-child ul li{
	margin: 1.66%;
	color: #004895;
	border: 2px solid #004895;
	background-color: transparent;
	position: relative;
}

#scene9 .scene9-bottom >div:last-child ul li span{
	position: absolute;
    width: 160%;
    height: 140%;
    display: none;
    top: -170%;
    right: -60%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#scene9 .scene9-bottom >div:last-child ul li:first-child span{background-image: url('../images/mouseovers/empac.svg');}
#scene9 .scene9-bottom >div:last-child ul li:nth-child(2) span{background-image: url('../images/mouseovers/hoffmann.svg');}
#scene9 .scene9-bottom >div:last-child ul li:nth-child(3) span{background-image: url('../images/mouseovers/why_metal.svg');}
#scene9 .scene9-bottom >div:last-child ul li:nth-child(4) span{background-image: url('../images/mouseovers/apeal.svg');}
#scene9 .scene9-bottom >div:last-child ul li:nth-child(5) span{background-image: url('../images/mouseovers/metal_packaging_europe.svg');}
#scene9 .scene9-bottom >div:last-child ul li:last-child span{background-image: url('../images/mouseovers/recyclesmark.svg');}



#scene9 .scene9-bottom >div:last-child ul li:hover{
	border-color: #979797;
}

#scene9 .scene9-bottom >div:last-child ul li:hover span{
	display: block;
}

#scene9 .scene9-bottom >div:last-child ul li a{
	font-size: 1.3em;
	color: #004895;
}

#scene9 .scene9-bottom >div:last-child ul li a:hover{
	color: #fff !important;
	background-color: #979797;
	cursor: pointer;
}

#scene9 .scene9-bottom >div:last-child ul li.hoff_button a{
	color: #fff !important;
	background-color: #004895;
}


#scene9 .scene9-bottom >div:last-child ul li.hoff_button a:hover{
	color: white !important;
	background-color: #979797;
}


/*				Responsive 						*/

/*Laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#scene9 .scene9-top, #scene9 .scene9-bottom{
		font-size: .8em;
	}
}


/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#scene9 .scene9-top, #scene9 .scene9-bottom{
		font-size: .7em;
	}

	#scene9 .scene9-bottom a {
	    padding: 15px 8px;
	    display: block;
	}
}

/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene9 .scene9-bottom{
		font-size: .6em;
	}

	#scene9 .scene9-top{
		font-size: .4em;
	}

	#scene9 .scene9-top h3{
		margin-bottom: 10px;
    	font-size: 2.5em;
	}


	#scene9 .scene9-top h2{
		width: 400px;
    	margin: 0 auto;
    	font-size: 2em;
	}

	#scene9 .scene9-bottom a {
	    padding: 8px 8px;
	    display: block;
	}

	#scene9 .scene9-bottom >div{
		font-size: .7em;
	}

	#scene9 .scene9-bottom >div:first-child >*{
		margin-bottom: 4%;
    	font-size: 2.2em;
	}

	#scene9 .scene9-bottom >div:last-child ul li a{
		font-size: 1em;
	}
}




/***************************************************************
						Rewind Loading Screen
****************************************************************/

#loadRewindScene{
	background-color: #EAEAEA;
	z-index: 1000;
	visibility: hidden;
	transition: transform 3s ease-in-out;
}

#loadRewindScene.active{
	visibility: visible;
}


/*				Text 			*/

#loadRewindScene .width20.text_container{
	height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1em;

    /*For animation*/
    opacity: 0;
    visibility: hidden;

}

.width20.text_container p {
    font-size: 2em;
    text-align: center;
}

.width20.text_container p > span {
    font-size: 2.2em;
    display: block;
}

/*				Animating text 			*/



#loadRewindScene.active:not(.current) .width20.text_container{
	visibility: visible;
	opacity: 1;
}

#loadRewindScene.active.current .width20.text_container{
	animation: fadeIn 1s linear 3s forwards;
	-webkit-animation: fadeIn 1s linear 3s forwards;
}


/*				Confetti particles 			*/

.confetti_container{
	height: 100%;
	position: absolute;
}

.confetti_container-inner{
	width: 100%;
	height: 100%;
	position: relative;
}

.particleWrap{
	position: absolute;
}

.particle{
	position: absolute;
	width: 15px;
	height: 15px;
	background-color: #FF6600;
}

#particle1{
	bottom: -1%;
	left: 4%;
}
#particle2{
	bottom: -3%;
	left: 2%;
}
#particle3{
	bottom: -1%;
	left: 5%;
}
#particle4{
	bottom: -4%;
	left: 1%;
}
#particle5{
	bottom: -2%;
	left: 1%;
}
#particle6{
	bottom: -5%;
	left: 2%;
}
#particle7{
	bottom: -1%;
	left: 3%;
}
#particle8{
	bottom: -4%;
	left: 1%;
}
#particle9{
	bottom: -2%;
	left: 4%;
}
#particle10{
	bottom: -3%;
	left: 4%;
}
#particle11{
	bottom: -4%;
	left: 4%;
}
#particle12{
	bottom: -5%;
	left: 5%;
}
#particle13{
	bottom: -8%;
	left: 3%;
}
#particle14{
	bottom: -7%;
	left: 6%;
}
#particle15{
	bottom: -2%;
	left: 6%;
}
#particle16{
	bottom: -6%;
	left: 4%;
}
#particle17{
	bottom: -7%;
	left: 2%;
}
#particle18{
	bottom: -7%;
	left: 5%;
}
#particle19{
	bottom: -6%;
	left: 3%;
}
#particle20{
	bottom: -1%;
	left: 6%;
}


/*					Responsive						*/
@media screen and (max-width: 1600px){
	#loadRewindScene .width20.text_container{
		width: 40% !important; 
	}
}


/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1349px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1000px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1000px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1000px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1000px) and (orientation: landscape){
	#loadRewindScene .width20.text_container{
		width: 40% !important; 
	}
}


/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#loadRewindScene .width20.text_container{
		width: 40% !important;
		font-size: .6em;
	}
}

/************************************************************
							FORMULARIO
*************************************************************/

/*estilos generales*/
.dTable{
	width: 100%;
	/*height: 100%;*/
	margin: 0 auto;
	/*display: table;*/
}
.dTable >*{
	display: table-cell;
	vertical-align: middle;
}

.formElement{
	width: 100%;
	padding: 6px;
}

.select {
 	/*min-width: 140px;*/
 	overflow: hidden;
 	position: relative;
}
.select select {
	padding-right: 8%; 
	border: none;
	box-shadow: none;
	appearance: none;
}
.select:before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    bottom: 5px;
    right: 10px;
    z-index: 904;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: #9c9c9c transparent transparent transparent;
    pointer-events: none;
}

.button{
	padding: 10px 20px;
	color: #fff;
	font-size: 1.3em;
	background-color: #FF6600;
}
/* end estilos generales*/


/*estilos dado desde js*/
#formWrap.showForm{
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	opacity: 1;
}
/*end estilos dado desde js*/

#formWrap{
	width: 60%;
    height: 55%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    background-color: #004895;

    -webkit-transform: translate(-200%,-200%);
	transform: translate(-200%,-200%);
	opacity: 0;
	transition: all 1s ease-out;
}

#veil{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 998;
	visibility: hidden;
	opacity: 0;
	background-color: rgba(0, 0, 0, .5);
}

#veil.shown{
	display: block;
	opacity: 1;
	visibility: visible;

	transition: all .3s;
}

#formInnerWrap{
    width: 100%;
    height: 100%;
    position: relative;
}

#formClose{
	position: absolute;
    color: white;
    font-size: 1.5em;
    right: -2%;
    top: -4%;
    font-weight: bold;
    border: 2px solid white;
    border-radius: 50%;
    background-color: black;
    padding: 1% 1.4%;
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#formContainer{
    width: 100%;
    padding: 0 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);  
}

#formContainer .text{
	/*margin: -20px auto 0;
	margin: -1.5% auto 0;
	padding-bottom: 2.5%;*/
	font-size: 1em;
}


/*text*/
#formContainer .text >div:first-child{
	width: 85%;
	padding-right: 5%;
}
#formContainer .text >div:last-child{
	width: 15%;
	padding: 2%;
}

#formContainer .text h2,
#formContainer .text p,
#formContainer .form span{
	color: #fff;
}
#formContainer .text h2{
	/*margin-bottom: 30px;*/
	margin-bottom: 2%;
    font-size: 3em;
}
#formContainer .text p{
	font-size: 1em;
    line-height: 140%;
    margin-bottom: 10px;
}

#formContainer .text svg{
	text-align: right;
}


/*form*/
#formContainer form fieldset:not(:last-child){
	margin-bottom: 1.4%;
}
#formContainer form fieldset span{
	margin-bottom: .5%;
	display: block;
}

#formContainer form .name >*{
	width: 32%;
	margin-right: 2%;
}

#formContainer form .name div:last-child {
    margin-right: 0;
}

#formContainer form .button{
	margin-top: 10px;
}
#formContainer form .button:hover{
	color: #004895;
	background-color: #fff;
}

#formContainer form .button:disabled{
	color: #333;
	background-color: #777;
	cursor: auto;
}


#formContainer #spbts_fields{
	display: none;
}


/*button - ver form*/
#buttonShowForm{
    width: 150px;
    height: 60px;
    padding: 20px 0;
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 902;
    background-color: #004895;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}

#buttonShowForm p{
    position: absolute;
    top: 50%;
    left: 40%;
    z-index: 903;
    color: #fff;
	font-size: 1.15em; 

    -webkit-transform: translate(-40%,-50%);
    -moz-transform: translate(-40%,-50%);
    -ms-transform: translate(-40%,-50%);
    transform: translate(-40%,-50%);
}


#buttonShowForm span{
	width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 904;
}

/*	Terms & conditions 		*/

.conditions span{
	margin-left: 8px;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.checkbox {
    position: relative;
    padding: 0px 0px 0px 30px;
    color: #777;
    font-weight: 500;
    cursor: pointer;
    margin: 2%;
}


.checkbox::before {
    position: absolute;
    top: 50%;
    left: 0px;
    display: block;
    width: 25px;
    height: 25px;
    margin-top: -13px;
    border: #ccc 1px solid;
    box-shadow: inset rgba(0,0,0,0.1) 1px 1px 4px;
    content: "";
}

.checkbox.checked::after {
    position: absolute;
    top: -8px;
    left: 0;
    width: 30px;
    height: 38px;
    /* margin-top: -9px; */
    background-size: 30px 30px;
    background-image: url(../images/check.png);
    background-repeat: no-repeat;
    content: "";
}

.checkbox input {
    display: none;
}

.checkbox p
{
color: #ababab;
font-weight: 500;
letter-spacing: 0.5px;
}



/*mas*/
#buttonShowForm span:after {
    width: 10px;
    height: 10px;
    content: '+';
    display: block;
    position: absolute;
    bottom: 18px;
    right: 9px;
    color: #004895;
    font-size: 1.7em;
    font-weight: 900;
}
/*triangulo*/
#buttonShowForm span:before{
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background-image: url(../images/triangulo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
    position: absolute;
    top: 0;
}


/**form validation alex**/
#formContainer form fieldset
{
	position: relative;
}
label.error {
    /*position: absolute;*/
    top: 50%;
    left: 8px;
    color: #e25700;
    text-align: left;
    width: 42%;
    display: inline-block;
}
#messagearea {
    display: none;
}
#messagearea.visible {
    display: block;
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 999;
}

body.home #messagearea.visible {
    position: absolute;
    height: 100px;
    margin: 0 auto;
    padding: 1%;
}

body.home #messagearea div{
	display:none;
	color:#fff;
	text-align:center;
}

#innerMessagearea {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding: 14% 4%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#innerMessagearea div {
    display: none;
    font-weight: 400;
    width: 100%;
    text-align: center;
    font-size: 3em;
    line-height: 130%;
    color:#fff;
}

#innerMessagearea div span
{
display:block;
width:160px;
height:160px;
margin:0 auto;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
}

#innerMessagearea div.success span{
    background-image: url("../images/bea/tick.svg");
}
#innerMessagearea div.error span{
    background-image: url("../images/bea/x.svg");
}

/*			Responsive 			*/


/*laptop*/
@media screen and (min-width: 1025px) and (max-width: 1800px){
	#formWrap{
		height: 60%;
	}
	#formContainer .text h2{
	    font-size: 2em;
	}
	#formContainer .text p{
		font-size: .9em;
		line-height: 100%;
	}
	#formContainer form .button{
		margin-top: 0;
		font-size: 1em;
	}

	.formElement{
		padding: 3px;
	}
	.select:before {
	    bottom: 2px;
	}

	#formContainer form fieldset:not(:last-child){
		margin-bottom: 1.2%;
	}

}

/*Ipads*/
@media screen and (min-width: 700px) and (max-width: 1024px)
, only screen and (min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (min--moz-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape)
, only screen and (-o-min-device-pixel-ratio: 2.0) and (min-device-width: 1024px) and (orientation: landscape){
	#formWrap{
		height: 60%;
		width: 70%;
	}
	#formContainer .text h2{
	    font-size: 1.5em;
	}
	#formContainer .text p{
		font-size: 1em;
	}

	#formContainer form fieldset span{
		font-size: 1em;
	}

	#formContainer{
		font-size: 1em;
		padding: 0 50px;
	}
	.button{
		font-size: 1em;
	}
}


/*Mobile*/
@media screen and (max-width: 699px)
, only screen and (min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 699px)
, only screen and (-o-min-device-pixel-ratio: 1.5) and (max-device-width: 699px){
	#scene8 .info_container{
		width: 80% !important;
	}

	#scene8 #video_container3 video{
		height: 100%;
		width: auto;
	}
	
	.select:before {
	    top: 18px;
	    right: 1px;
	}

	#scene8 .info_container .width50:first-child{
		font-size: .5em;
	}

	#formWrap.showForm{
		height: 96%;
		width: 80%;
	}

	#formContainer{
		padding: 0 40px;
		transform: translate(-50%,-50%);
	}

	#formContainer .text{
		font-size: .7em;
	}

	#formContainer .text >div:last-child{
		width: 10%;
	}

	#formContainer .text h2{
		font-size: 1.3em;
	}

	#formContainer form fieldset span{
		font-size: .5em;
		margin-bottom: 0;
	}

	.formElement{
		padding: 0px;
	}

	#buttonShowForm{
		top: 2%;
    	left: 1%;
		width: 80px;
		height: 30px;
		padding: 10px 0;
	}

	#buttonShowForm span{
		width: 30px;
		height: 30px;
	}

	#buttonShowForm span:after{
		bottom: 13px;
		right: 7px;
	}

	#buttonShowForm p{
		font-size: .6em;
		left: 30%;
	}

	#formContainer form .button{
		margin-top:	10px;
	    font-size: 0.6em;
	    padding: 0.5em;
	}

}



/************************************************************
							HANDLERS
*************************************************************/


.dev_handler{
	position: absolute;
	top: 50%;
	left: 3%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	color: #4cc5ff;
	font-size: 100px;
	z-index: 900;
	cursor: pointer;
}

.handler{
	position: absolute;
	width: 10%;
	height: 8%;
	background-image: url('../images/arrow.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	cursor: pointer;
	/*For animation*/
	visibility: hidden;
	opacity: 0;
	z-index: 900;
	transition: opacity 1.5s linear;
}

.white_handler{
	background-image: url('../images/whitearrow.svg');
}


.handler.nextScene.first_scene_arrow {
    top: 60%;
    right: 17%;
    z-index: 199;
	transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}


.active.current .handler.nextScene.first_scene_arrow{
	/*
	delay 5s
	*/
	animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 5s 1 forwards;
	-webkit-animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 5s 1 forwards;
}

.handler.nextScene.second_scene_arrow{
	top: 20%;
    right: 18%;
    z-index: 299;
}

.active.current .handler.nextScene.second_scene_arrow{
	/*
	delay 7s;
	*/
	animation: shake 2s linear infinite, fadeIn 1.5s linear 7s 1 forwards;
	-webkit-animation: shake 2s linear infinite, fadeIn 1.5s linear 7s 1 forwards;
}

.active.current .handler.nextScene.second_scene_arrow.fadeOut{
	animation: fadeOut 1s ease 0s forwards;
	-webkit-animation: fadeOut 1s ease 0s forwards;
}


.handler.third_scene_arrow{
	width: 5%;
    height: 3%;
    z-index: 399;
    bottom: 5%;
    left: 20%;
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}

.handler.third_scene_arrow.first_step{
	top: 24%;
    right: 35%;
    left: auto;
}

.handler.third_scene_arrow.second_step{
    top: 58%;
    left: 47%;
}

.active.current.first_step .handler.nextStep.third_scene_arrow.first_step{
    animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
	-webkit-animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
}

.active.current.second_step .handler.nextStep.third_scene_arrow.second_step{
    animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
	-webkit-animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
}

.active.current.third_step .handler.nextScene.third_scene_arrow{
    animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 1.5s 1 forwards;
	-webkit-animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 1.5s 1 forwards;
}


.active.current .handler.nextStep.fadeOut{
	animation: fadeOut .5s linear 0s 1 forwards;
    -webkit-animation: fadeOut .5s linear 0s 1 forwards;
}


.handler.nextScene.forth_scene_arrow{
	bottom: 5%;
    left: 45%;
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}

.active.current .handler.nextScene.forth_scene_arrow{
	animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 1.5s 1 forwards;
	-webkit-animation: shakeDown 2s linear infinite, fadeIn 1.5s linear 1.5s 1 forwards;
}


.handler.nextScene.fifth_scene_arrow{
	top: 10%;
    left: 47%;
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}

.active.current .handler.nextScene.fifth_scene_arrow{
    animation: shakeReverse 2s linear infinite, fadeIn 1.5s linear 1.5s 1 forwards;
	-webkit-animation: shakeReverse 2s linear infinite, fadeIn 1.5s linear 1.5s 1 forwards;
}


.handler.sixth_scene_arrow.first_step, .handler.sixth_scene_arrow.second_step{
	top: 13%;
    left: 20%;
    width: 6%;
    height: 8%;
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);	
}

.handler.nextScene.sixth_scene_arrow{
	left: 15%;
    bottom: 26%;
    height: 12%;
}


.active.current.first_step .handler.sixth_scene_arrow.first_step{
    animation: shakeReverseWhite 2s linear infinite, fadeIn 1.5s linear 5s 1 forwards;
	-webkit-animation: shakeReverseWhite 2s linear infinite, fadeIn 1.5s linear 5s 1 forwards;
}

.active.current.second_step .handler.sixth_scene_arrow.second_step{
    animation: shakeReverseWhite 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
	-webkit-animation: shakeReverseWhite 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
}


.active.current.third_step .handler.nextScene.sixth_scene_arrow{
    animation: shakeWhite 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
	-webkit-animation: shakeWhite 2s linear infinite, fadeIn 1.5s linear 3s 1 forwards;
}


.handler.seventh_scene_arrow{
	bottom: 5%;
    right: 30%;
}

.handler.nextScene.seventh_scene_arrow{
	left: 30%;
	transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}

.active.current .handler.seventh_scene_arrow{
	animation: shake 2s linear infinite, fadeIn 1s linear 3.5s 1 forwards;
	-webkit-animation: shake 2s linear infinite, fadeIn 1s linear 3.5s 1 forwards;
}

.active.current .handler.nextScene.seventh_scene_arrow{
	animation: shakeDown 2s linear infinite, fadeIn 1s linear 3.5s 1 forwards;
	-webkit-animation: shakeDown 2s linear infinite, fadeIn 1s linear 3.5s 1 forwards;	
}

.handler.fadeOut{
	animation: fadeOut 1s ease 0s forwards;
	-webkit-animation: fadeOut 1s ease 0s forwards;
}