@font-face {
	font-family: 'Lato Bold Italic';
	font-style: italic;
	font-weight: 700;
	src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/HkF_qI1x_noxlxhrhMQYED8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
	}
@font-face {
	font-family: 'Lato Black';
	font-style: normal;
	font-weight: 900;
	src: local('Lato Black'), local('Lato-Black'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/BVtM30trf7q_jfqYeHfjtA.woff) format('woff');
	}
@font-face {
	font-family: 'Lato Italic';
	font-style: italic;
	font-weight: 400;
	src: local('Lato Italic'), local('Lato-Italic'),
	url(http://themes.googleusercontent.com/static/fonts/lato/v6/oUan5VrEkpzIazlUe5ieaA.woff) format('woff');
	}
*{
	margin:0;
	padding:0;
	}
html{
	max-width:100%;
	height:100%;
	overflow-x:hidden;
	}
body{
	max-width:100%;
	height:100%;
	}
h1,h2{
	font-family:'Lato Black', sans-serif;
	}
h1{
	text-align:center;
	padding-top:80px;
	font-size:3em;
	color:#ed7c39;
	}
h2{
	color:#262626;
	font-size:1.6em;
	}
iframe{
	width:100%;
	height:100%;
	}
img{
	border:0;
	}
.catch-line{
	text-align:center;
	display:block;
	font-family:Georgia, serif;
	font-style:italic;
	color:#6b6b6b;
	font-size:1.7em;
	}
p{
	font-family:Arial;
	line-height:26px;
	color:#262626;
	margin-bottom:26px;
	}
.limit{
	max-width:980px;
	margin:0 auto;
	}
#header{	
	height:100%;
	background:url('img/projects-bg.jpg') repeat-y center #d3d4d6;
	text-align:center;
	position:relative;
	}
#header-content{
	/*background:url('img/header-bg.png') no-repeat center;*/
	height:100%;
	top:10%;
	width:1200px;
	left:50%;
	margin-left:-600px;
	overflow:hidden;
	position:absolute;
	}
#header-web-design,
#header-mobile-apps,
#header-seo,
#header-corporate,
#header-social,
#header-media,
#header-connectivity,
#header-girls,
#header-boys,
#header-mas,
#header-hook{
	position:relative;
	}
#header-web-design{
	top:0px;
	left:50px;
	}
#header-mobile-apps{
	top:30px;
	left:300px;
	}
#header-seo{
	top:250px;
	left:-200px;
	}
#header-corporate{
	top:0px;
	left:0px
	}
#header-social{
	top:80px;
	left:0px;
	}
#header-media{
	left:-220px;
	top:-320px;
	}
#header-connectivity{
	top:0px;
	left:80px;
	}
#header-girls{
	top:-480px;
	left:400px;
	}
#header-boys{
	top:-340px;
	left:-40px;
	}
#header-mas{
	top:-390px;
	left:-240px;
	}
#header-hook{
	top:-370px;
	}
#menu{
	height:99px;
	background: #262626;
	width:100%;
	z-index:100;
	position:fixed;
	bottom:0;
	border-top:1px solid #eee;
	border-bottom:1px solid #ed7c39;
	background:url('img/menu-logo.png') left no-repeat #262626;
	}
a.header{
	width:155px;
	height:99px;
	display:none;
	background:url('img/logo-small.png') left no-repeat;
	}
#menu ul{
	float:right;
	z-index:150;
	}
#menu li{
	display:inline;
	display:inline-block;
	width:120px;
	line-height:99px;
	text-align:center;
	transition:background 1s;
	}
#menu li a{
	font-family: 'Lato Black', sans-serif;
	color:#fff;
	text-decoration:none;
	width:100%;
	height:100%;
	display:block;
	transition:color 1s;
	}
#menu a:focus{
	outline-color:#ed7c39;
	}
#menu a:active{	
	outline-style:none;
	}
#menu li:hover{
	background:#444;
	}
#menu li a:hover {
	color:#ed7c39;
	}
#menu li.selected{
	background:#ed7c39;;
	}
#menu li.selected a{
	color:#000 !important;
	}
#logo{
	margin-left:-230px;
	height:99px;
	padding:0;
	}
#services,
#introduction{
	min-height:754px;
	margin-top:99px;
	width:100%;
	}
#introduction p{
	margin:0 20px 36px 20px;
}
#services{
	background:#eee;
}
#services .catch-line{
	margin-bottom:40px;
	}
.service{	
	width:46%;
	float:left;
	min-width:240px;
	}
.service h2{
	display:block;
	margin:40px 0px;
	line-height:40px;
	}
.service img{
	vertical-align:middle;
	float:left;
	margin:20px 20px 20px 0px;
	}
#service-www,
#service-seo{
	text-align:right;
	margin-right:4%;
	margin-left:2%;
	}
#service-www img,
#service-seo img{
	float:right;
	margin:20px 0px 20px 20px;
	}
#approach{
	min-height:754px;
	background:#f9f9f9;
	width:100%;
	}
.approaches{
	margin-top:60px;
	width:31%;
	float:left;
	position:relative;
	text-align:center;
	min-width:240px;
	}
.approaches h2{
	margin:30px 0px;
	}
#approach-idea,
#approach-create{
	margin-right:3.3%;
	}
#projects{
	min-height:754px;
	background:url('img/projects-bg.jpg') repeat-y center #d3d4d6;
	overflow: hidden;
	width:100%;
	padding-bottom:30px;
	}
#projects .catch-line{
	margin-bottom:60px;
	}
#projects img{
	box-shadow:0px 5px 7px #333;
	margin-top:10px;
	}
.projects{
	height:170px;
	position:relative;
	}
.project-1 img,
.project-3 img,
.project-5 img{
	float:left;
	margin-right:30px;
	vertical-align:middle;
	}
.project-2 img,
.project-4 img,
.project-6 img{
	float:right;
	margin-left:30px;
	vertical-align:middle;
	}
#projects p{
	padding-top:40px;
	width:60%;
	float:left;
	font-family:'Lato Italic', sans-serif;
	font-size:1.1em;
	}
.project-2 p,
.project-4 p,
.project-6 p{
	float:right !important;
	text-align:right;
	}
#company{
	min-height:754px;
	background:#ed7c39;
	width:100%;
	}
#company h1{
	color:#fff;
	}
#company .catch-line{
	color:#f7c5a8;
	margin-bottom:60px;
	}
#company p{
	width:580px;
	color:#fff;
	}
#company p.large{
	font-size:1.3em;
	margin-bottom:30px;
	text-align:justify;
	}
#company p.small{
	width:270px;
	float:left;
	margin-right:40px;
	text-align:justify;
	position:relative;
	}
#team{
	float:right;
	width:350px;
	padding-top:30px;
	}
#team img{
	float:left;
	margin-left:200px;
	height:101px;
	width:151px;
	margin-top:-30px;
	}
#team img.left{
	float:left;
	margin-left:0;
	}
#contact{
	min-height:854px;
	overflow:hidden;
	width:100%;
	}
#contact .catch-line{
	margin-bottom:60px;
	}
#contact p{
	width:470px;
	color:#222;
	font-size:1.05em;
	}
#contact-details a{
	text-decoration:none;
	color:#222;
	}
#contact-details a:hover{
	text-decoration:underline;
	}
#address,
#contact-details{
	float:right;
	width:220px;
	font-family:Arial;
	line-height:26px;
	}
#contact-details{	
	margin-left:20px;
	}
#contact h3{
	font-family:'Lato Bold Italic';
	color:#ed7c39;
	font-size:1em;
	}
#map{
	border-top:1px solid #ed7c39;
	margin-top:60px;
	background:url('img/map.jpg') center no-repeat;
	width:100%;
	height:500px;
	overflow:hidden;
	}
#directions{
	width:240px;
	height:150px;
	background:#ed7c39;
	float:right;
	margin-top:100px;
	padding:30px;
	}
#directions h2{
	color:#fff;
	}
#directions p{
	color:#fff;
	line-height:20px;
	margin-top:10px;
	margin-bottom:20px;
	}
#directions a{
	background:#fff;
	color:#222;
	font-family:'Lato Black';
	text-decoration:none;
	padding:7px;
	display:block;
	text-align:center;
	border-radius:7px;
	width:140px;
	transition:color,background 1s;
	}
#directions a:hover{
	color:#444;
	background:#ccc;
	}
#footer{
	height:100px;
	line-height:100px;
	background:#000;
	color:#eee;
	font-family:'Lato Black';
	font-size:0.75em;
	border-top:1px solid #fff;
	}
#footer a{
	color:#eee;
	}
#footer a:hover{
	text-decoration:none;
	color:#ed7c39;
	transition:color 1s;
	}
.clear{
	clear:both;
	}
@media only screen and (max-width: 1230px), only screen and (max-device-width: 1230px) {
	#menu{
		height:99px;
		background: #262626;
		width:100%;
		z-index:100;
		position:fixed;
		bottom:0;
		border-top:1px solid #eee;
		border-bottom:1px solid #ed7c39;
		background:#262626;
		}
	a.header{
		width:155px;
		height:99px;
		display:inline-block;
		background:url('img/logo-small.png') left no-repeat;
		}
	}
@media only screen and (max-width: 892px), only screen and (max-device-width: 892px) {
	a.header{
		display:none;
		}
	}
@media only screen and (max-width: 737px), only screen and (max-device-width: 737px) {
	#menu{
		height:100px;
		top:0px;
		bottom:auto;
		background-image:none;
		}
	#menu ul{
		float:none;
		}
	#menu li{
		line-height:50px;
		width:33%;
		padding:0;
		}
	}
@media only screen and (max-width: 595px), only screen and (max-device-width: 595px) {
	#introduction{
	}
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	
	#header-web-design,
	#header-mobile-apps,
	#header-seo,
	#header-corporate,
	#header-social,
	#header-media,
	#header-girls,
	#header-boys,
	#header-hook{
		display:none;
		}
	#header{	
		overflow:hidden;
		}
	#header-mas,
	#header-connectivity{
		position:absolute;
		top:30px;
		left:50%;
		margin-left:-161px;
		}
	#header-connectivity{
		top:50%;
		margin-left:-110px;
		}
	.catch-line{
		font-size:1.2em;
		margin:10px !important;
		}
	#services .catch-line,
	#approach .catch-line,
	#company .catch-line{
		margin-bottom:30px !important;
		}
	#logo{
		display:none;
		}
	#services,
	#approach,
	#projects,
	#company{
		overflow:auto;
		}
	.service{	
		text-align:center !important;
		margin:0% 5%;
		}
	.service img{
		float:none !important;
		margin:0 !important;
		}
	.service h2{
		margin:10px;
		}
	.service,
	.approaches,
	.projects{
		width:90% !important;
		margin:0 5% !important;
		float:none;
		}
	#projects{
		background-image:none;
		text-align:center;
		padding-bottom:30px;
		}
	.service p,
	#projects p{
		width:90%;
		margin:0 5%;
		text-align:center !important;
		padding:0;
		}
	.project-left img,
	.project-right img{
		margin:20px 10px;
		}
	#company{
		padding-bottom:30px;
		}
	#company p{
		width:90% !important;
		margin:0 5% !important;
		float:none !important;
		}
	#team{
		display:none;
		}
	#address,
	#contact-details{
		float:left;
		margin:15px;
		}
	#contact p{
		width:90%;
		margin:0 5%;
		clear:both;
		}
	#directions{
		float:none;
		margin:5px auto;
		}
	#footer{	
		text-align:center;
		}
	#footer a{
		color:#222;
		}
	}