@charset "UTF-8";

@import url(_Font.css);
@import url(_Reset.css);
@import url(_Preload.css);
@import url(_Clock.css);
@import url(_Nosey.css);
@import url(_Banana.css);
@import url(_Guide.css);
@import url(_GuideAnimation.css);
@import url(_Sky.css);

/* @kinslowdian simonkinslow.com */

div
{
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	
	user-select: none;
	touch-callout: none;
	
	pointer-events: none;
}

:root
{
	background: #d6ffcc;
}


html, body
{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

#wrapper
{
	position: relative;
	margin: 0 auto;
	padding: 0;
}

#fillFade
{
	min-width: 100%;
	min-height: 100%;
	
	max-width: 100%;
	max-height: 100%;
	
	background: rgb(255, 255, 255);
	
	position: fixed;
	
	left: 0;
	top: 0;
	
	z-index: 20;
	
	-webkit-transition	: opacity 1s ease;
	transition			: opacity 1s ease;

	overflow: hidden;
}

#content
{
	width:320px;
	height: 548px;
	
	text-rendering: optimizeLegibility;
	
	position: relative;
	
	margin: 0 auto;	
	
	overflow: hidden;
}

#stage
{
	width: 568px;
	height: 548px;

	margin: 0;

	background: url(../_img/color.png) repeat left top;
}

#scene_preload, #scene_clock, #scene_guide, #scene_shadow, #scene_sky, #scene_innerInteraction, #_SAFETY
{
	width: 568px;
	height: 548px;
	
	position: absolute;

	pointer-events: none;
}

#_SAFETY
{
	background: #959591;
	
	z-index: 6;
}

#scene_guide
{
	z-index: 5;
}

#scene_shadow
{
	opacity: 0;
	
	-webkit-transition	: opacity 0.4s ease; 
	transition			: opacity 0.4s ease; 
	
	z-index: 4;
}

#scene_innerInteraction
{
	z-index: 3;
}

#scene_preload
{
	z-index: 2;
	
	background: #959591;
	
	-webkit-transition	: -webkit-transform 1.5s ease;
	transition		 	: transform 1.5s ease; 	
}

#scene_clock
{
	-webkit-transition	: -webkit-transform 0.8s ease-in-out; 
	transition			: transform 0.8s ease-in-out; 
	
	z-index: 1;
}

#scene_sky
{
	z-index: 0;
}

#overlayShadow
{
	width: 568px;
	height: 548px;
	
	background: rgba(0, 0, 0, 0.6);
	
	position: absolute;
	
	left: 0;
	right: 0;
	
	z-index: 6;
}

/* Iphone 3 - 4 portrait */
@media all and (orientation:portrait) and (device-width:320px) and (device-height:480px)
{
	#wrapper
	{
		width:320px;
	}
	
	#content
	{
		width: 320px;
		height: 460px;
	}
	
	#stage
	{
		margin: 0 0 0 -124px;
	}
	
	#touchPlate #touchTrack
	{
		width: 260px;
	}
	
	#scene_sky #trees
	{
		visibility: hidden;
	}
}

/* Iphone 3 - 4 landscape */
@media all and (orientation:landscape) and (device-width:320px) and (device-height:480px)
{
	#wrapper
	{
		width:480px;
	}
	
	#content
	{
		width: 480px;
		height: 460px;
	}
	
	#stage
	{
		margin: 0 0 0 -44px;
	}
	
	#touchPlate #touchTrack
	{
		width: 420px;
	}
	
	#scene_sky #trees
	{
		visibility: visible;
	}
}

/* Iphone 5 portrait */
@media all and (orientation:portrait) and (device-width:320px) and (device-height:568px)
{
	#wrapper
	{
		width:320px;
	}
	
	#content
	{
		width: 320px;
		height: 548px;
	}
	
	#stage
	{
		margin: 0 0 0 -124px;
	}
	
	#touchPlate #touchTrack
	{
		width: 260px;
	}
	
	#scene_sky #trees
	{
		visibility: hidden;
	}
}

/* Iphone 5 landscape */
@media all and (orientation:landscape) and (device-width:320px) and (device-height:568px)
{
	#wrapper
	{
		width:568px;
	}
	
	#content
	{
		width: 568px;
		height: 548px;
	}
	
	#stage
	{
		margin: 0;
	}
	
	#touchPlate #touchTrack
	{
		width: 508px;
	}
	
	#scene_sky #trees
	{
		visibility: visible;
	}
}

@media all and (min-device-width:768px)
{
	#display
	{
		width: 608px;
		
		margin: 0 auto;
		
		position: relative;
		
		max-width: 100%;
		max-height: 100%;
	}
	
	
	#wrapper
	{
		width: 100%;
		
		position: relative;
		
		min-height: 100%;
		
		-webkit-transform	: translate(0, 30px);
		transform			: translate(0, 30px);
	}
	
	#content
	{
		width: 568px;
		
		-webkit-transform	: translate(0px, 20px);
		transform			: translate(0px, 20px);
		
		z-index: 2;
	}
	
	#desktopSpeech
	{
		width: 608px;
		height: 693px;
		
		background: url(../_img/_desktop/desktopContainer.png) no-repeat center center;
		background-size: 100% 100%;
		
		margin: 0 auto;
		
		
		-webkit-transform	: translate(0px, -548px);
		transform			: translate(0px, -548px);
		
		z-index: 1;
	}
	
	#details
	{
		display: block;
		
		color: #939393;
		
		-webkit-transform	: translate(0px, -478px);
		transform			: translate(0px, -478px);
		
		z-index: 2;
		
		pointer-events: all;
	}
	
	#details h1
	{
		margin: 0 0 20px 0;
		
		font-size: 0.8em;
		letter-spacing: 0.4em;
		
		display: inline-block;
	}
	
	#details ul
	{
		list-style: none;
		
		margin: 0 0 20px 0;
		
		display: block;
	
	}
	
	#details ul li
	{
		margin: 0 0 10px 0;
		
		font-size: 0.8em;
		letter-spacing: 0.4em;
	}
	
	#details #social
	{
		width: 110px;
		height: 110px;
		
		display: block;
		
		-webkit-transform	: translateX(234px);
		transform			: translateX(234px);
	}
	
	#details #social #social-FB, #details #social #social-TW
	{
		width: 50px;
		height: 110px;
		
		display: block;
		
		float: left;
		
		border: 0;
		
		pointer-events: all;
		
		cursor: pointer;
	}
	
	#details #social #social-FB
	{
		margin-right: 10px;
	}
	
	#details #social .social-BarCode
	{
		width: 50px;
		height: 50px;
		
		margin: 0 0 5px 0;
		
		background: url(../_img/_desktop/social.png) no-repeat left top;
		background-size: 110px 115px;
	}
	
	#details #social #social-speechFB, #details #social #social-speechTW
	{
		width: 50px;
		height: 55px;
		
		background: url(../_img/_desktop/social.png) no-repeat;
		background-size: 110px 115px;
		
		-webkit-transform-origin	: 50% 0%;
		transform-origin			: 50% 0%;
	}
	
	#details #social #social-speechFB
	{
		background-position: left bottom;
		
		-webkit-animation	: socialBounceFB 0.5s ease-in-out infinite;
		animation			: socialBounceFB 0.5s ease-in-out infinite;
	}
	
	#details #social #social-speechTW
	{
		background-position: right bottom;
		
		-webkit-animation	: socialBounceTW 0.5s ease-in-out infinite;
		animation			: socialBounceTW 0.5s ease-in-out infinite;
	}
	
	@-webkit-keyframes socialBounceFB
	{
		0%		{ -webkit-transform: scale(1);	 }
		50%		{ -webkit-transform: scale(0.9); }
		100%	{ -webkit-transform: scale(1);	 }
	}
	
	@-webkit-keyframes socialBounceTW
	{
		0%		{ -webkit-transform: scale(0.9);	 }
		50%		{ -webkit-transform: scale(1); }
		100%	{ -webkit-transform: scale(0.9);	 }
	}
	
	@keyframes socialBounceFB
	{
		0%		{ transform: scale(1);	 }
		50%		{ transform: scale(0.9); }
		100%	{ transform: scale(1);	 }
	}
	
	@keyframes socialBounceTW
	{
		0%		{ transform: scale(0.9);	 }
		50%		{ transform: scale(1); }
		100%	{ transform: scale(0.9);	 }
	}	
	
		
	#stage
	{
		margin: 0 0 0 0;
	}
	
	#touchPlate #touchTrack
	{
		width: 508px;
	}
	
	#scene_sky #trees
	{
		visibility: visible;
	}
}

.desktopMonkeyAwake
{
	background: url(../_img/_desktop/svgBlend.png) repeat-x center 975px, url(../_img/_desktop/desktopMonkeyAwake.svg) no-repeat center top;
	background-size: 400px 210px, 1410px 1185px;	
}
	
.desktopMonkeyAsleep
{
	background: url(../_img/_desktop/svgBlend.png) repeat-x center 975px, url(../_img/_desktop/desktopMonkeyAsleep.svg) no-repeat center top;
	background-size: 400px 210px, 1410px 1185px;
}