.bg-color{
	-webkit-animation-name:taustakuva;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:normal;
	-webkit-animation-delay:1s;
	-webkit-animation-play-state:running;
	-webkit-animation-fill-mode:forwards;
	-webkit-backface-visibility:hidden;
		-webkit-backface-visibility: hidden;
	
	-moz-animation-name:taustakuva;
	-moz-animation-duration:2s;
	-moz-animation-timing-function:ease-out;
	-moz-animation-iteration-count:1;
	-moz-animation-direction:normal;
	-moz-animation-delay:1s;
	-moz-animation-play-state:running;
	-moz-animation-fill-mode:forwards;
	
	-o-animation-name:taustakuva;
	-o-animation-duration:2s;
	-o-animation-timing-function:ease-out;
	-o-animation-iteration-count:1;
	-o-animation-direction:normal;
	-o-animation-delay:1s;
	-o-animation-play-state:running;
	-o-animation-fill-mode:forwards;
	
	animation-name:taustakuva;
	animation-duration:2s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:1s;
	animation-play-state:running;
	animation-fill-mode:forwards
}
	
	@-webkit-keyframes taustakuva{
		0%{opacity:1}
		50%{opacity:1;-webkit-transform:scale(1)}
		99.9%{opacity:0;-webkit-transform:scale(2)}
		100%{opacity:0;-webkit-transform:scale(0);z-index:0!important}
	}
	@-moz-keyframes taustakuva{
		0%{opacity:1}
		50%{opacity:1;-moz-transform:scale(1)}
		99.9%{opacity:0;-moz-transform:scale(2)}
		100%{opacity:0;-moz-transform:scale(0);z-index:0!important}
	}
	@-o-keyframes taustakuva{
		0%{opacity:1}
		50%{opacity:1;-o-transform:scale(1)}
		99.9%{opacity:0;-o-transform:scale(2)}
		100%{opacity:0;-o-transform:scale(0);z-index:0!important}
	}
	@keyframes {
		0%{opacity:1}
		50%{opacity:1;transform:scale(1)}
		99.9%{opacity:0;transform:scale(2)}
		100%{opacity:0;transform:scale(0);z-index:0!important}
	}
	
h1.page-title{
		opacity:0;
		
		-webkit-animation-name:otsikko;
		-webkit-animation-duration:0.5s;
		-webkit-animation-timing-function:ease-taustakuvaout;
		-webkit-animation-iteration-count:1;
		-webkit-animation-direction:normal;
		-webkit-animation-delay:2.3s;
		-webkit-animation-play-state:running;
		-webkit-animation-fill-mode:forwards;
			-webkit-backface-visibility: hidden;
		
		-moz-animation-name:otsikko;
		-moz-animation-duration:0.5s;
		-moz-animation-timing-function:ease-out;
		-moz-animation-iteration-count:1;
		-moz-animation-direction:normal;
		-moz-animation-delay:2.3s;
		-moz-animation-play-state:running;
		-moz-animation-fill-mode:forwards;
		
		-o-animation-name:otsikko;
		-o-animation-duration:0.5s;
		-o-animation-timing-function:ease-out;
		-o-animation-iteration-count:1;
		-o-animation-direction:normal;
		-o-animation-delay:2.3s;
		-o-animation-play-state:running;
		-o-animation-fill-mode:forwards;
		
		animation-name:otsikko;
		animation-duration:0.5s;
		animation-timing-function:ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-delay:2.3s;
		animation-play-state:running;
		animation-fill-mode:forwards}
	
	@-webkit-keyframes otsikko{
			0%{opacity:0;-webkit-transform:scale(0.97)}
			100%{opacity:1;-webkit-transform:scale(1)}
		}
	@-moz-keyframes otsikko{
			0%{opacity:0;-moz-transform:scale(0.97)}
			100%{opacity:1;-moz-transform:scale(1)}
		}
	@-o-keyframes otsikko{
			0%{opacity:0;-o-transform:scale(0.97)}
			100%{opacity:1;-o-transform:scale(1)}
		}
	@keyframes otsikko{
			0%{opacity:0;transform:scale(0.97)}
			100%{opacity:1;transform:scale(1)}
		}
		
p.zilla-caption{
			opacity:0;
			
			-webkit-animation-name:copy;
			-webkit-animation-duration:1s;
			-webkit-animation-timing-function:ease-out;
			-webkit-animation-iteration-count:1;
			-webkit-animation-direction:normal;
			-webkit-animation-delay:2.5s;
			-webkit-animation-play-state:running;
			-webkit-animation-fill-mode:forwards;
				-webkit-backface-visibility: hidden;
			
			-moz-animation-name:copy;
			-moz-animation-duration:1s;
			-moz-animation-timing-function:ease-out;
			-moz-animation-iteration-count:1;
			-moz-animation-direction:normal;
			-moz-animation-delay:2.5s;
			-moz-animation-play-state:running;
			-moz-animation-fill-mode:forwards;
			
			-o-animation-name:copy;
			-o-animation-duration:1s;
			-o-animation-timing-function:ease-out;
			-o-animation-iteration-count:1;
			-o-animation-direction:normal;
			-o-animation-delay:2.5s;
			-o-animation-play-state:running;
			-o-animation-fill-mode:forwards;
			
			animation-name:copy;
			animation-duration:1s;
			animation-timing-function:ease-out;
			animation-iteration-count:1;
			animation-direction:normal;
			animation-delay:2.5s;
			animation-play-state:running;
			animation-fill-mode:forwards}
	
	@-webkit-keyframes copy{
				0%{opacity:0;-webkit-transform:scale(0.97)}
				100%{opacity:1;-webkit-transform:scale(1)}
			}
	@-moz-keyframes copy{
				0%{opacity:0;-moz-transform:scale(0.97)}
				100%{opacity:1;-moz-transform:scale(1)}
			}
	@-o-keyframes copy{
				0%{opacity:0;-o-transform:scale(0.97)}
				100%{opacity:1;-o-transform:scale(1)}
			}
	@keyframes copy{
				0%{opacity:0;transform:scale(0.97)}
				100%{opacity:1;transform:scale(1)}
			}
			
.link-case-home{
				opacity:0;
				
				-webkit-animation-name:button;
				-webkit-animation-duration:1s;
				-webkit-animation-timing-function:ease-out;
				-webkit-animation-iteration-count:1;
				-webkit-animation-direction:normal;
				-webkit-animation-delay:2.8s;
				-webkit-animation-play-state:running;
				-webkit-animation-fill-mode:forwards;
					-webkit-backface-visibility: hidden;
				
				-moz-animation-name:button;
				-moz-animation-duration:1s;
				-moz-animation-timing-function:ease-out;
				-moz-animation-iteration-count:1;
				-moz-animation-direction:normal;
				-moz-animation-delay:2.8s;
				-moz-animation-play-state:running;
				-moz-animation-fill-mode:forwards;
				
				-o-animation-name:button;
				-o-animation-duration:1s;
				-o-animation-timing-function:ease-out;
				-o-animation-iteration-count:1;
				-o-animation-direction:normal;
				-o-animation-delay:2.8s;
				-o-animation-play-state:running;
				-o-animation-fill-mode:forwards;
				
				animation-name:button;
				animation-duration:1s;
				animation-timing-function:ease-out;
				animation-iteration-count:1;
				animation-direction:normal;
				animation-delay:2.8s;
				animation-play-state:running;
				animation-fill-mode:forwards
				}
	
	@-webkit-keyframes button{
					0%{opacity:0;-webkit-transform:scale(0.97)}
					100%{opacity:1;-webkit-transform:scale(1)}
				}
	@-moz-keyframes button{
					0%{opacity:0;-moz-transform:scale(0.97)}
					100%{opacity:1;-moz-transform:scale(1)}
				}
	@-o-keyframes button{
					0%{opacity:0;-o-transform:scale(0.97)}
					100%{opacity:1;-o-transform:scale(1)}
				}
	@keyframes button{
					0%{opacity:0;transform:scale(0.97)}
					100%{opacity:1;transform:scale(1)}
				}
				
				
#logo{
				-webkit-animation-name:logo;
				-webkit-animation-duration:700ms;
				-webkit-animation-timing-function:ease-in;
				-webkit-animation-iteration-count:1;
				-webkit-animation-direction:normal;
				-webkit-animation-delay:3.2s;
				-webkit-animation-play-state:running;
				-webkit-animation-fill-mode:forwards;
					-webkit-backface-visibility: hidden;
				
				opacity:0;
				
				-moz-animation-name:logo;
				-moz-animation-duration:700ms;
				-moz-animation-timing-function:ease-in;
				-moz-animation-iteration-count:1;
				-moz-animation-direction:normal;
				-moz-animation-delay:3.2s;
				-moz-animation-play-state:running;
				-moz-animation-fill-mode:forwards;
				
				-o-animation-name:logo;
				-o-animation-duration:700ms;
				-o-animation-timing-function:ease-in;
				-o-animation-iteration-count:1;
				-o-animation-direction:normal;
				-o-animation-delay:3.2s;
				-o-animation-play-state:running;
				-o-animation-fill-mode:forwards;
				
				animation-name:logo;
				animation-duration:700ms;
				animation-timing-function:ease-in;
				animation-iteration-count:1;
				animation-direction:normal;
				animation-delay:3.2s;
				animation-play-state:running;
				animation-fill-mode:forwards
			}

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

#primary-nav{
				-webkit-animation-name:nav;
				-webkit-animation-duration:700ms;
				-webkit-animation-timing-function:ease-in;
				-webkit-animation-iteration-count:1;
				-webkit-animation-direction:normal;
				-webkit-animation-delay:3.5s;
				-webkit-animation-play-state:running;
				-webkit-animation-fill-mode:forwards;
					-webkit-backface-visibility: hidden;
				
				opacity:0;
				
				-moz-animation-name:nav;
				-moz-animation-duration:700ms;
				-moz-animation-timing-function:ease-in;
				-moz-animation-iteration-count:1;
				-moz-animation-direction:normal;
				-moz-animation-delay:3.5s;
				-moz-animation-play-state:running;
				-moz-animation-fill-mode:forwards;
				
				-o-animation-name:nav;
				-o-animation-duration:700ms;
				-o-animation-timing-function:ease-in;
				-o-animation-iteration-count:1;
				-o-animation-direction:normal;
				-o-animation-delay:3.5s;
				-o-animation-play-state:running;
				-o-animation-fill-mode:forwards;
				
				animation-name:nav;
				animation-duration:700ms;
				animation-timing-function:ease-in;
				animation-iteration-count:1;
				animation-direction:normal;
				animation-delay:3.5s;
				animation-play-state:running;
				animation-fill-mode:forwards
			}

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

.page-title {
	font-size: 100px;
	font-weight: bold;
	letter-spacing: -0.07em;
	line-height: 100px;
	color: #FFF;
	width: 750px;
	margin: 0 auto 40px;
	z-index: 92;
}

h2.entry-title { margin-top: -60px; }

#header {
	margin: 0 auto 30px;
	width: 100%;
}

.page-header {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:405px;
	width:70%;
	text-align: center;
}

#primary-nav .sf-menu a {
	padding: 0 22px 10px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

	#primary-nav .sf-menu a:hover, #primary-nav .sf-menu li.sfHover > a { color: #fff; text-decoration: none; }
	
		#primary-nav .sf-menu li.current_page_item > a, #primary-nav .sf-menu li.current-menu-item > a { color: #000; }


@media only screen and (max-width: 1140px) {

body { background: none!important; }
	
	.header-outer {
		/* background:url(../../../uploads/2013/08/bg-color.jpg) no-repeat -100px 0px; */
		background-size: cover;
		background-attachment: scroll;
		position: relative;
		height: 100%;
		z-index: 1;
	}

	h1.page-title { width: 92.5%; max-width: 650px; font-size: 80px; line-height: 80px; margin-bottom: 30px; }

	.zilla-caption { text-align: center; width: 92.5%; max-width: 550px; font-size: 16px; line-height: 24px; }
	
	.page-header {height: 330px; width: 650px;}
	
	.link-case-home a { margin: 35px 0 0 0;}
	
	#post-831, #post-79, #post-78, #post-11, #post-77, #post-10, #post-1585 {
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: scroll!important;
	}

		#post-77 { background-position:  top right; }
		
		#post-831, #post-79, #post-78, #post-11, #post-10 { background-position: top center; }
	
	h2.entry-title { font-size: 80px; line-height: 80px;}
	
	.testimonial {	width: 92.5%; max-width: 680px; top: -10px; font-size: 18px; line-height: 28px;}
	
	p.name.home { margin: 20px 0 70px!important;}
	
	
	.macbook.worldvision { height: 521px; width: 900px; background-size: 900px 521px; }
	
		.macbook.worldvision img { width: 679px; height: 425px; left: 110px; top: 29px; }
		
		
	.iphoneworldvision { float: right; position: relative; margin: -380px 50px 0 0; z-index: 0;}
	
	
	.macbook.huoneistoketju { width: 954px; height: 552px; background-size: 954px 552px; }
	
		.macbook.huoneistoketju img { width: 720px; height: 450px; left: 116px; top: 31px; }
		
	
	.display { width: 881px; height: 711px; background-size: 881px 711px; }
	
		.display img { width: 807px; height: 455px; left: 37px; top: 38px; }	
	
		
	.macbook.seamlessplanet { width: 954px; height: 552px; background-size: 954px 552px; }
	
		.macbook.seamlessplanet img { width: 720px; height: 450px; left: 116px; top: 31px; }
		
		.ipad { margin-left: 10px!important; }
		
	
	.link-case.worldvision { margin: 60px -200px -50px 0; }
	
	.link-case.gopro { margin: -30px 0 -50px; }
	
	.link-case.huoneistoketju { margin: 50px 20px -50px 0;}
	
	.link-case.allright { margin: -100px 57px -65px 0;}
	
	.link-case.seamlessplanet { margin: 50px 55px -50px 0; }
	
		.link-case a { float: none!important; }
		
	
	.post-831 img { width: 80%; max-width: 390px;}
		
	.entry-content {max-width: 100%!important;}

}

@media only screen and (max-width: 768px) {
	
	.header-outer {
		/* background: url(../../../uploads/2013/08/bg-color.jpg) no-repeat -800px 0px; */
		background-size: cover;
		background-attachment: scroll;
		position: relative;
		height: 100%;
		z-index: 1;
	}
	
	.page-header { width: 90%; }
	
	.entry-content { max-width: 90%!important; margin: 80px auto 0!important;}
	
	.page-template-template-portfolio-php .hentry-inner { width: 99%;}
	
	.iphoneworldvision { float: left!important; margin: -380px 0 0 -30px !important;}
	
		.link-case.worldvision { margin: 50px 0 -50px 0; }
		
	.display { width: 703px; height: 567px; background-size: 703px 567px; left: -15px;}
	
		.display img { width: 644px; height: 363px; left: 30px; top: 30px; }
		
		.link-case.allright { margin: -90px 0px -50px 0; }	

	
}

@media only screen and (max-width: 640px) {

	
	.header-outer { background: url(../../../uploads/2013/08/bg-color.jpg) no-repeat 0px 0; background-size: cover; background-attachment: scroll; position: relative; height: 100%; z-index: 1; }
	
	h1.page-title { text-align: center; font-size: 49px !important; line-height: 52px !important; width: 80% !important; letter-spacing: -0.05em; }
	
	p.zilla-caption { display: none; }
	
	
	.link-case-home a { display: none; }
	
		.link-case a { line-height: 44px; }
	
	
	
	.page-header { width: 100%; height: 190px!important; }
	
	h2.entry-title { font-size: 42px; line-height: 48px; margin-top: -80px;}
	
	.testimonial { width: 95%; max-width: 680px; top: -30px; font-size: 16px; line-height: 24px; }
	
	p.name.home { margin: 0px 0 40px!important; }
	
	.rwd-break2 {display: block; }
	
	
	
	.testimonial.gopro {margin-bottom: 15px;}
	
	.entry-content { max-width: 90%!important; margin: 80px auto 0!important;}
	
	.page-template-template-portfolio-php .hentry-inner { width: 99%;}
	
	
	.macbook.worldvision { display: none; }
	
		.iphoneworldvision { margin: 0 auto!important; width: 100%; z-index: auto;}
		
			.iphoneworldvision img { width: 100%; max-width: 300px; display: block; margin: 0 auto; z-index: auto;}
	
		.link-case.worldvision { margin: 0px 0 -50px; text-align: center!important; float: none!important; }
		
		
		
	.display { width: 404px; height: 326px; background-size: 404px 326px; left: 0px; z-index: auto; }
	
		.display img { width: 370px; height: 208px; left: 17px; top: 17px; z-index: auto; }
		
		.link-case.allright { margin: 20px 0 -50px; text-align: center!important; float: none!important; }	
		
		
		
	.post-831 img { width: 95%; max-width: 300px; }	
	
		.link-case.gopro { margin: -15px 0 -50px; }
		
		
		
	.macbook.seamlessplanet {display: none;}

		.ipad { margin: 0 auto!important; width: 100%; z-index: auto; }
		
			.ipad img { width: 100%; max-width: 300px; display: block; margin: 0 auto 20px; z-index: auto;}
		
		.link-case.seamlessplanet { margin: 0px 0 -50px; text-align: center!important; float: none!important; clear: both; }	
		
		
	.macbook.huoneistoketju { width: 461px; height: 267px; background-size: 461px 267px; right: -150px;}
	
		.macbook.huoneistoketju img { width: 348px; height: 218px; left: 56px; top: 15px; }
		
		.link-case.huoneistoketju { margin: 40px 0 -50px; text-align: center!important; float: none!important; }
		
		.link-case.microsoft { position: relative!important; margin: 40px 0 -50px;text-align: center!important;
}
		
		
	.footer-outer { padding-top: 80px!important; }	
	
	#logo, #logo a { margin: 7px 0 0 8px; height: 46px!important; width: 35px!important; }
	






}

@media only screen and (max-width: 320px) {

	
	.header-outer { background: url(../../../uploads/2013/08/bg-color.jpg) no-repeat 0 0; background-size: cover; background-attachment: scroll; position: relative; height: 100%; z-index: 1; }
	
	h1.page-title { text-align: center; font-size: 49px !important; line-height: 52px !important; width: 69% !important; letter-spacing: -0.05em; }
	
	p.zilla-caption { display: none; }
	
	
	.link-case-home a { display: none; }
	
		.link-case a { line-height: 44px; }
	
	
	
	.page-header { width: 100%; height: 350px!important; }
	
	h2.entry-title { font-size: 42px; line-height: 48px; margin-top: -80px;}
	
	.testimonial { width: 95%; max-width: 680px; top: -30px; font-size: 16px; line-height: 24px; }
	
	p.name.home { margin: 0px 0 40px!important; }
	
	.rwd-break2 {display: block; }
	
	
	
	.testimonial.gopro {margin-bottom: 15px;}
	
	.entry-content { max-width: 90%!important; margin: 80px auto 0!important;}
	
	.page-template-template-portfolio-php .hentry-inner { width: 99%;}
	
	
	.macbook.worldvision { display: none; }
	
		.iphoneworldvision { margin: 0 auto!important; width: 100%;}
		
			.iphoneworldvision img { width: 100%;}
	
		.link-case.worldvision { margin: 0px 0 -50px; text-align: center!important; float: none!important; }
		
		
		
	.display { width: 404px; height: 326px; background-size: 404px 326px; left: 20px;}
	
		.display img { width: 370px; height: 208px; left: 17px; top: 17px; }
		
		.link-case.allright { margin: 20px 0 -50px; text-align: center!important; float: none!important; }	
		
		
		
	.post-831 img { width: 95%; }	
	
		.link-case.gopro { margin: -15px 0 -50px; }
		
		
		
	.macbook.seamlessplanet {display: none;}

		.ipad {margin-top: 0!important; margin-left: 0!important; margin-bottom: 20px;}
		
		.link-case.seamlessplanet { margin: 0px 0 -50px; text-align: center!important; float: none!important; }	
		
		
	.macbook.huoneistoketju { width: 461px; height: 267px; background-size: 461px 267px; right: -150px;}
	
		.macbook.huoneistoketju img { width: 348px; height: 218px; left: 56px; top: 15px; }
		
		.link-case.huoneistoketju { margin: 40px 0 -50px; text-align: center!important; float: none!important; }
		
		
	.footer-outer { padding-top: 80px!important; }	
	
	






}