/*	

	Developed by Denis Fernandez Gridchin, http://gridchin.com/
	
*/

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
	p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
	img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
	dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figure, figcaption, hgroup, 
	menu, footer, header, nav, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
	}
	
	article, aside, canvas, figure, figure img, figcaption, hgroup,
	footer, header, nav, section, audio, video {
		display: block;
	}
	
	ul {
		list-style-type: none;
	}
	
	p,
	dl,
	hr,
	h1,
	h4,
	h5,
	h6,
	ol,
	ul,
	pre,
	table,
	address,
	fieldset,
	figure {
		margin-bottom: 22px;
	}
	
	::selection {
	background-color: transparent;
	}
	
	::-moz-selection{ 
	background-color: transparent; 
	}
	

/* 	Global 
	------  */
	
	html, body{
		width: 100%;
		height: 100%;
	}
	
	body {
		font: 13px/1.5 'Domine',Georgia,serif;
		color: #666;
		background-color: #ffd5a8;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		min-height: 960px;
		-webkit-text-size-adjust: 100%; 
		-webkit-tap-highlight-color: rgb(255,255,0);
	}
	
	::selection 	 	{background: transparent;}
	::-moz-selection 	{background: transparent;}
	img::selection 		{background: transparent;}
	img::-moz-selection {background: transparent;}
	
	a {
		text-decoration: none;
		color: #08c;
		pointer-events: auto;
		-webkit-transition: all 0.5s ease-in-out; 
		   -moz-transition: all 0.5s ease-in-out; 
			 -o-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
	}
	
	a img{
		-webkit-transition: all 0.5s ease-in-out; 
		   -moz-transition: all 0.5s ease-in-out; 
			 -o-transition: all 0.5s ease-in-out; 
				transition: all 0.5s ease-in-out;
	}
	
	a:hover {
		color:#666;
		border-bottom: dashed 1px #08c;
	}

	ul li{
		list-style-type: none;
	}


/* 	Loading 
	-------  */

	.loading{
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -88px 0 0 -148px;
		width: 297px;
		height: 175px;
		background: transparent url('../files/logo.png') no-repeat center;
	}


/* 	Parallax 
	--------  */
	
	.scene,
	.layer{
		opacity: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		pointer-events: none;
	}


/* 	Main Content
	------------  */

	.logo{
		width: 297px;
		height: 175px;
		text-indent: -999em;
		background: transparent url('../files/logo.png') no-repeat center;
		display: block;
		position: absolute;
		top: 20%;
		left: 50%;
		margin: -88px 0 0 -148px;
		z-index: 6;
	}

	.hi{
		font-size: 40px;
		color: #fff;
		position: absolute;
		top: 28%;
		left: 50%;
		margin-left: -150px;
		z-index: 5;
	}

	.intro{
		width: 440px;
		height: 266px;
		background: transparent url('../files/bubble.png') no-repeat 0 0;
		padding: 35px 40px 0 75px;
		position: absolute;
		top: 35%;
		left: 50%;
		z-index: 4;
		margin-left: -220px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}

		.intro span{
			color: #9f9f9f;
			display: block;
		}

	.plain{
		position: absolute;
		top: 41%;
		left: 50%;
		margin-left: -360px;
		width: 123px;
		height: 77px;
		background: transparent url('../files/plain.png') no-repeat center;
	}


/* 	Clouds 
	------  */
	
	.cloud-blue{
		position: absolute;
		z-index: 1;
		left: 50%;
	}

		.cloud-blue.a{
			top: 430px;
			margin-left: -910px;
			width: 636px;
			height: 217px;
			background: transparent url('../files/cloud-blue-a.png') no-repeat center;
		}
		
		.cloud-blue.b{
			top: 10px;
			margin-left: -559px;
			width: 642px;
			height: 190px;
			background: transparent url('../files/cloud-blue-b.png') no-repeat center;
		}
		
		.cloud-blue.c{
			top: 300px;
			margin-left: 430px;
			width: 456px;
			height: 299px;
			background: transparent url('../files/cloud-blue-c.png') no-repeat center;
		}
		
	.cloud-white{
		position: absolute;
		z-index: 3;
		left: 50%;
	}

		.cloud-white.a{
			top: 180px;
			margin-left: -960px;
			width: 543px;
			height: 317px;
			background: transparent url('../files/cloud-white-a.png') no-repeat center;
		}
		
		.cloud-white.b{
			top: 95px;
			margin-left: 216px;
			width: 359px;
			height: 581px;
			background: transparent url('../files/cloud-white-b.png') no-repeat center;
		}
		
		.cloud-white.c{
			top: 160px;
			margin-left: 680px;
			width: 263px;
			height: 117px;
			background: transparent url('../files/cloud-white-c.png') no-repeat center;
		}
		
		
/* 	Sun 
	---  */
	
	.sun-cont{
		width: 100%;
		height: 710px;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.sun{
		opacity: 0;
		width: 1423px;
		height: 1423px;
		overflow: hidden;
		position: absolute;
		top: 15px;
		left: 50%;
		margin-left: -711px;
		background: transparent url('../files/sun.png') no-repeat center top;
		-webkit-animation: sun 120s infinite linear;
		   -moz-animation: sun 120s infinite linear;
				animation: sun 120s infinite linear;
	}
	
		@-webkit-keyframes sun {
			from {
				-webkit-transform: rotate(0deg);
			}
			to { 
				-webkit-transform: rotate(360deg);
			}
		}
		
		@-moz-keyframes sun {
			from {
				-moz-transform: rotate(0deg);
			}
			to { 
				-moz-transform: rotate(360deg);
			}
		}
		
		@keyframes sun {
			from {
				transform: rotate(0deg);
			}
			to { 
				transform: rotate(360deg);
			}
		}
	
	
/* 	Sea 
	---  */
	
	[class^="sea"]{
		position: fixed;
	}
	
	.sea-bg{
		top: 690px;
		left: 50%;
		margin-left: -1000px;
		width: 1999px;
		height: 205px;
		background: transparent url('../files/sea-bg.png') repeat center;
	}
	
	.sea{
		top: 715px;
		left: 50%;
		margin-left: -1001px;
		width: 2002px;
		height: 164px;
		background: transparent url('../files/sea.png') repeat center;
	}
	
	
/* 	Sand 
	----  */
	
	.sand{
		position: fixed;
		top: 880px;
		left: 50%;
		margin-left: -947px;
		width: 1894px;
		height: 70px;
		background: transparent url('../files/sand.png') repeat center;
	}
	
	
/* 	Island 
	------  */
	
	.island{
		position: absolute;
		top: 670px;
		left: 50%;
		margin-left: -75px;
		width: 109px;
		height: 62px;
		background: transparent url('../files/island.png') repeat center;
	}
	

/* 	Noise 
	-----  */
	
	.noise{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		background: transparent url('../files/noise.png') repeat center;
		pointer-events: none;
	}


/* 	Responsive stuff 
	----------------  */
	
@media all and (max-width: 767px) {
	
	.logo{
		top: 150px;
	}
	
	.intro{
		top: 300px;
		width: 100%;
		height: auto;
		padding: 25px 5%;
		margin-left: 0;
		left: 0;
		text-align: center;
		background-color: rgba(255,255,255,.5);
		background-image: none;
	}
	
		.intro p{
			margin-bottom: 0;
		}
	
	.hi,
	.plain,
	.cloud-blue,
	.cloud-white{
		display: none;
	}
	
}
	

/* 	The end 
	-------  */