
/* firetruck left */
#firetruck-left {
	position:relative;
	width: 578px; 
	height: 297px; 
	z-index: 10;
	margin:0 auto;
}
.firetruck-left img {
  position:absolute;
  left:0;
  -webkit-transition: opacity .4s ease 2.2s;
  -moz-transition: opacity .4s ease 2.2s;
  -o-transition: opacity .4s ease 2.2s;
  transition: opacity .4s ease 2.2s;
}

div.firetruck-left { 
	position: absolute;  
	bottom: 378px; 
	left: 228px; 
	z-index: 2;
	-webkit-transition: 2s ease-out 4s; 
	-moz-transition: 2s ease-out 4s; 
	-o-transition: 2s ease-out 4s; 
	transition: 2s ease-out 4s; 
	} 
div.firetruck-left div { 
	width: 578px; 
	height: 297px; 
	-webkit-transition: 5s ease-in 4s; 
	-moz-transition: 5s ease-in 4s; 
	-o-transition: 5s ease-in 4s; 
	transition: 5s ease-in 4s; 
	}
div.white-firetruck-left { 
	z-index: 2;
	-webkit-transition: 3s ease-in; 
	-moz-transition: 3s ease-in; 
	-o-transition: 3s ease-in; 
	transition: 3s ease-in; 
	} 
	
div.white-firetruck-left div { 
	-webkit-transition: 2s ease-in-out 2s; 
	-moz-transition: 2s ease-in-out 2s; 
	-o-transition: 2s ease-in-out 2s; 
	transition: 2s ease-in-out 2s; 
	}
	
#outerspace:hover div.firetruck-left { 
	-webkit-transform: translate(-840px,10px); 
	-moz-transform: translate(-840px,10px); 
	-o-transform: translate(-840px,10px); 
	-ms-transform: translate(-840px,10px); 
	transform: translate(-840px,10px); 
	} 
#outerspace:hover div.firetruck-left div {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg); 
	} 
#outerspace:hover div.firetruck-left div div.crane-left {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
	} 
	
/* crane left */	
div.firetruck-left div div.crane-left { 
	position: absolute;  
	bottom: 0px; 
	left: 0px; 
	z-index: 2;
	opacity:0;
  -webkit-transition: opacity .4s ease 2.2s;
  -moz-transition: opacity .4s ease 2.2s;
  -o-transition: opacity .4s ease 2.2s;
  transition: opacity .4s ease 2.2s;
	} 
div.crane-left div { 
	width: 578px; 
	height: 297px; 
	background: url(img/crane-left.png) no-repeat; 
	-webkit-transition: .5s ease-in-out 3.8s; 
	-moz-transition: .5s ease-in-out 3.8s; 
	-o-transition: .5s ease-in-out 3.8s; 
	transition: .5s ease-in-out 3.8s; 
	}
#outerspace:hover div.firetruck-left div div.crane-left {
	opacity: 1; 
	} 
#outerspace:hover div.firetruck-left div div.crane-left div {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg); 
	} 
/* einde crane-left */
/* einde firetruck left */	
	

/* firetruck right */
#firetruck-right {
	position:relative;
	width: 578px; 
	height: 297px; 
	z-index: 10;
	margin:0 auto;
}
.firetruck-right img {
  position:absolute;
  right:0;
  -webkit-transition: opacity .4s ease 2.2s;
  -moz-transition: opacity .4s ease 2.2s;
  -o-transition: opacity .4s ease 2.2s;
  transition: opacity .4s ease 2.2s;
}

div.firetruck-right { 
	position: absolute;  
	bottom: 378px; 
	right: 228px; 
	z-index: 2;
	-webkit-transition: 2s ease-out 4s; 
	-moz-transition: 2s ease-out 4s; 
	-o-transition: 2s ease-out 4s; 
	transition: 2s ease-out 4s; 
	} 
div.firetruck-right div { 
	width: 578px; 
	height: 297px; 
	-webkit-transition: 5s ease-in 4s; 
	-moz-transition: 5s ease-in 4s; 
	-o-transition: 5s ease-in 4s; 
	transition: 5s ease-in 4s; 
	}
div.white-firetruck-right { 
	z-index: 2;
	-webkit-transition: 3s ease-in; 
	-moz-transition: 3s ease-in; 
	-o-transition: 3s ease-in; 
	transition: 3s ease-in; 
	} 
	
div.white-firetruck-right div { 
	-webkit-transition: 2s ease-in-out 2s; 
	-moz-transition: 2s ease-in-out 2s; 
	-o-transition: 2s ease-in-out 2s; 
	transition: 2s ease-in-out 2s; 
	}
	
#outerspace:hover div.firetruck-right { 
	-webkit-transform: translate(840px,10px); 
	-moz-transform: translate(840px,10px); 
	-o-transform: translate(840px,10px); 
	-ms-transform: translate(840px,10px); 
	transform: translate(840px,10px); 
	} 
#outerspace:hover div.firetruck-right div {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg); 
	} 
#outerspace:hover div.firetruck-right div div.crane-right {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
	} 
	
/* crane right */	
div.firetruck-right div div.crane-right { 
	position: absolute;  
	bottom: 0px; 
	right: 0px; 
	z-index: 2;
	opacity:0;
  -webkit-transition: opacity .4s ease 2.2s;
  -moz-transition: opacity .4s ease 2.2s;
  -o-transition: opacity .4s ease 2.2s;
  transition: opacity .4s ease 2.2s;
	} 
div.crane-right div { 
	width: 578px; 
	height: 297px; 
	background: url(img/crane-right.png) no-repeat; 
	-webkit-transition: .5s ease-in-out 3.8s; 
	-moz-transition: .5s ease-in-out 3.8s; 
	-o-transition: .5s ease-in-out 3.8s; 
	transition: .5s ease-in-out 3.8s; 
	}
#outerspace:hover div.firetruck-right div div.crane-right {
	opacity: 1; 
	} 
#outerspace:hover div.firetruck-right div div.crane-right div {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg); 
	} 
/* einde crane-right */
/* einde firetruck right */	