/* general */
body{background:url('../img/bg5.png');overflow:hidden;position:static;}
html{position:static;}
html, html a{-webkit-font-smoothing:antialiased;}

.wrapper{
	background-color:red;
	padding:0 20px;
	max-width:1140px;
	min-height:1em;
	margin:0 auto;
}

h1{
	font-family:'chunkfiveroman';
	color:#3A6166;
	font-weight: normal;
}

/* home */
.home-text{
	width:65%;
	display:block;
	position:absolute;
	top:13.5%;
	left:17.5%;
	z-index:10;
	
	img{
		width:100%;
	}
	h1{
		transform:rotate(-3.5deg);
		-ms-transform:rotate(-3.5deg);
		-webkit-transform:rotate(-3.5deg);
		-moz-transform:rotate(-3.5deg);
		text-align:center;
		font-size:2.3em;
		margin-bottom:0;
		line-height:2.1em;
		span{
			font-size:3.4em;
		}
	}
}

.workstuff{
	width:16%;
	height:auto;
	position:absolute;
	bottom:-10px;
	right:25%;
}

.clouds{
	position:relative;
	width:100%;
	height:100%;
}
.cloud {
	width: 25%; height: 120px;
	background:url('../img/cloud.svg') no-repeat;
	background-size:100% 100%;
}

.x1 {
	position: absolute;
	top:75%;
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

.x2 {
	// left: 200px;
	position: absolute;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	
	-webkit-animation: moveclouds 70s linear infinite;
	-moz-animation: moveclouds 70s linear infinite;
	-o-animation: moveclouds 70s linear infinite;
}

@font-face {
    font-family: 'chunkfiveroman';
    src: url('../fonts/chunkfive-webfont.eot');
    src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/chunkfive-webfont.woff') format('woff'),
         url('../fonts/chunkfive-webfont.ttf') format('truetype'),
         url('../fonts/chunkfive-webfont.svg#chunkfiveroman') format('svg');
    font-weight: normal;
    font-style: normal;
}


.bigentrance{
	animation-name: bigentrance;
	-webkit-animation-name: bigentrance;
	-moz-animation-name: bigentrance;

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;
	-moz-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;	

	visibility: visible !important;			
}

@-webkit-keyframes fadein {
  	0%   { opacity: 0; }
  	100% { opacity: 1; }		
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


@-webkit-keyframes moveclouds {
	0% {right:0px}
	100% {right:100%;}
}
@-moz-keyframes moveclouds {
	0% {right:0px}
	100% {right:100%;}
}
@-o-keyframes moveclouds {
	0% {right:0px}
	100% {right:100%;}
}