@charset "UTF-8";

body {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	color:#000;
}

#wrapper {
	width:100%;
	min-width:320px;
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}

img {
	max-width:100%;
	margin:0;
}

p {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size:12px;
}

h1 {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size:18px;
	line-height:30px;
}

h2 {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:700;
	font-size:15px;
}

h3 {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size:15px;
}

h4 {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:400;
	font-size:18px;
}

a {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:400;
	color:#000;
	text-decoration:none;
	font-size:inherit;
}

a:hover, a:focus {
	color:#66cc33;
}

/*Header*/

#navcontainer {
	display:none;
}

#logocontainer {
	width:80%;
	float:left;
}

#menuicon {
	width:10%;
	float:right;
}

body#about a.footerabout, body#work a.footerwork, body#blog a.footerblog {
		background:#555;
	}

#header {
	width:100%;
	min-width:320px;
	height:60px;
	top:0;
	left:0;
	z-index:100;
	background:#fff;
	padding-top:30px;
}

#headerinner {
	width:90%;
	min-width:300px;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
}

/*Main content*/

#content {
	width:90%;
	min-width:300px;
	margin-left:auto;
	margin-right:auto;

}

#main_title {
	text-align:center;
	padding-top:50px;
}

#main_title h1, #main_title_privacy h1 {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size:30px;
	text-transform:uppercase;
	margin:0;
}

#intro, #aboutintro, .services, .blogintro, #privacyintro {
	width:100%;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

.blogtitle {
	width:100%;
	margin:0 auto;
	padding:50px 0 0 0;
	text-align:center;
}

#intro h1, #aboutintro h1, .services h1, #privacyintro h1 {
	font-weight:300;
	font-size:18px;
}

.blogintro h1, .blogtitle h1 {
	font-weight:700;
	font-size:18px;
}

.item, .blog, .projects, .serviceslist {
	width:100%;
	list-style:none;
	position:relative;
	margin:0;
	padding:0;
	text-align:center;
}

.item li, .blog li, .projects li, .serviceslist li {
	display:block;
	overflow:hidden;
}

.featuredproject, .project2, .project3, .project4, .project5, .blog1, .blog2, .blog3, .blog4, .blog5, .blog6, .blog7, .blog8, .blog9, .jobfeatured, .job1, .job2, .job3, .job4, .job5, .job6, .job7, .job8, .job9,  .job10,  .job11,  .job12, .job13, .job14, .job15 .blogfeature, .blogmainimage {
	width:100%;
	height:302px;
	margin-bottom:7px;
	position:relative;
	overflow:hidden;
}

.featuredproject {
	background:url(../images/work_fhyw_thumb_sml.jpg) top center no-repeat;
	background-size: cover;
}

.project2 {
	background:url(../images/work_tml_thumb_sml.jpg) top center no-repeat;
	background-size: cover;
}

.project3 {
	background:url(../images/work_tgs_thumb_sml.jpg) top center no-repeat;
	background-size: cover;
}

.project4 {
	background:url(../images/work_hkms_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.project5 {
	background:url(../images/work_osm_thumb_sml.jpg) top center no-repeat;
	background-size: cover;
}

.blog4, .blog5, .blog6, .blog7, .blog8, .blog9 {
		margin-top:7px;
	}

.caption, .blogcaption {
	background:#fff;
	height:80px;
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	opacity:0.9;
}

.blogcaption {
	opacity:1;
	height:60px;
}

.blogcaption .title {
	margin:20px 0 0 0;
}

.imglink {
	display:block;
	width:100%;
	height:302px;
}

.imgholder, .imgholderj {
	height:302px;
	position:relative;
}

.title {
	color:#000;
	text-transform:uppercase;
	margin: 15px 0 0 0;
}

.subtitle {
	font-size:12px;
	color:#000;
	margin:3px 0;
}

.title a {
	font-weight:700;
}

.linkbox, .navlinks {
	width:100%;
	margin:40px 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:center;
	height:50px;
}

.linktext {
	text-transform:uppercase;
	font-size:14px;
}

/*Footer*/

#footer {
	background:#000;
	color:#fff;
	width:100%;
	max-width:1200px;
	min-width:305px;
}

#footercontainer {
	width:88%;
	padding:25px 0 45px 0;
	margin-left:auto;
	margin-right:auto;
}

#footercontainer a {
	color:#fff;
	font-size:inherit;
}

#footercontainer a:focus, #footercontainer a:hover {
	text-decoration:underline;
}

#footercontainer p {
	font-size:14px;
}

#footerdetails {
	width:100%;
	text-align:center;
	padding-top:5px;
}

#footercontainer #copy p {
	font-size:12px;
}

#footermenu, #copy {
	width:100%;
	text-align:center;
	margin-top:45px;
	border-top:1px solid #999;
	padding-top:45px;
	color:#999;
}

#footermenu ul, #footerdetails ul {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:400;
	font-size:14px;
	padding:0;
}

#footermenu ul li, #footerdetails ul li {
	list-style-type:none;
	display:block;
}

#footermenu ul li a {
	display:block;
	padding:10px;	
}

#footerdetails ul li {
	display:block;
	padding:10px 0;	
}

/*WORK PAGE */

.job1 {
	background:url(../images/work_fhyw_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job2 {
	background:url(../images/work_tml_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job3 {
	background:url(../images/work_tgs_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job4 {
	background:url(../images/work_hkms_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job5 {
	background:url(../images/work_osm_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job6 {
	background:url(../images/work_fs_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job7 {
	background:url(../images/work_rise_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job8 {
	background:url(../images/work_hkmh_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job9 {
	background:url(../images/work_ep_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job10 {
	background:url(../images/work_bj_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job11 {
	background:url(../images/work_hkmb_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job12 {
	background:url(../images/work_nft_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job13 {
	background:url(../images/work_met_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job14 {
	background:url(../images/work_trp_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

.job15 {
	background:url(../images/work_evap_thumb_sml.jpg) top center no-repeat;
	background-size:cover;
}

/*ABOUT PAGE*/

#aboutimage {
	width:100%;
	background:#ddd;
	height:302px;
	margin-bottom:50px;
	overflow:hidden;
}

.services {
	padding:30px 0;
	
}

.services p.large {
	margin:50px 0;
}

.serviceslist {
	padding:30px 0;
}

.serviceslist li {
	background:none;
}

.servicetitle {
	font-size:20px;
	margin-bottom:15px;
}

.listcontainer {
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:30px 0;
}

.listcontainer .title {
	margin-bottom:50px;
}



/*BLOG PAGE*/

.blogfeature {
	height:auto;
	padding-top:50px;
}

body#blog .blogfeature .imglink {
	height:auto;
}

.bloglist {
	list-style:none;
	padding-left:0
}

.bloglist li {
	margin-top:1.1em;
}

/*INDIVIDUAL PROJECT PAGE*/

.left {
	float:left;
	width:49%;
}

.right {
	float:right;
	width:49%;
}

.left .linktext {
	text-align:left;
}

.right .linktext {
	text-align:right;
}

.info {
	text-align:center;
	margin:20px 0 80px 0;
}

#signoff {
	text-align:center;
	margin:50px auto 0 auto;
}

.pic_1col, .pic_2coll, .pic_2colr {
	width:100%;
	text-align:center;
	margin-top:30px;
}

video {
	width:100% !important;
	height:auto !important;
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:0;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.imgcontainer {
	width:85%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

/*Privacy page*/

#privacyintro {
	text-align:left;
}
.privacylist {
	font-size:14px;
}

body#privacy #privacyintro p {
	font-size:14px !important;
}

#main_title_privacy {
	text-align:center;
	padding-top:50px;
}



/*Utilities*/

.group:after {  /*Self clear floats*/
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

*:first-child+html .group { /*IE*/
	zoom:1;
}

.shadow {
	-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.25);
	box-shadow: 0 8px 6px -6px rgba(0,0,0,0.25);
	-o-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.25);
	-ms-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.25);
	z-index:999999;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.grey {
	color:#999;
}

.large {
	font-size:18px;
	line-height:30px;
}

.uppercase {
	text-transform:uppercase;
}


@media only screen and (min-width: 568px) and (max-width: 599px) {
	#menuicon {
		width:8%;
	}
	
	#logocontainer {
		width:75%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
	
	#headerinner {
		width:580px;
	}
	
	#menuicon {
		width:8%;
	}
	
	#logocontainer {
		width:75%;
	}
	
	#content {
		width:580px;
	}
	
	#intro, .blogintro, #aboutintro, #signoff, .blogtitle {
		width:90%;
	}
	
	.featuredproject {
		width:100%;
		height:293px;
		float:left;
		margin-bottom:7px;
		position:relative;
		background:url(../images/fhyw_ad_f_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project2 {
		height:293px;
		float:left;
		width:39.396551724138%;
		position:relative;
		background:url(../images/tmlewin_p2_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project3 {
		height:293px;
		float:right;
		width:59.396551724138%;
		position:relative;
		background:url(../images/tgs_p3_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project4 {
		height:293px;
		float:left;
		width:59.396551724138%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/hunkemoller_sexyshapes_showreel_5.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.project5 {
		height:293px;
		float:right;
		width:39.396551724138%;
		position:relative;
		margin-bottom:0;
		background:url(../images/osm_p5_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.blog1, .blog2, .blog4, .blog5, .blog7, .blog8 {
		height:243px;
		float:left;
		width:32.528735632184%;
		margin-right:7px;
		margin-bottom:0;
	}
	
	.blog3, .blog6, .blog9 {
		height:243px;
		float:right;
		width:32.528735632184%;
		margin-bottom:0px;
	}
	
	.linkbox {
		clear:both;
		margin:40px 0;
	}
	
	.imglink {
		height:213px;
	}
	
	.blog .imglink {
		height:183px;
	}
	
	.imgholder {
		height:293px;
	}
	
	/*ABOUT PAGE*/
	
	.services1, .services2 {
		float:left;
		margin:0 7px 7px 0;
	}
	
	.services3 {
		float:left;
		margin:0 0 7px 0;
	}
	
	.serviceslist {
		text-align:left;
		padding-left:13px;
		line-height:2em;
		font-size:14px;
	}
	
	.listcontainer {
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#about .job1, #about .job2 {
		height:258px;
		float:left;
		width:32.528735632184%;
		margin:0 7px 7px 0;
	}
	
	#about .job3 {
		height:258px;
		float:right;
		width:32.528735632184%;
		margin:0 0 7px 0;
	}
	
	#about .imgholderj {
		height:258px;
	}
	
	#about .caption .title {
		font-size:13px;
	}
	
	/*WORK PAGE*/
	
	.job1, .job3, .job5, .job7, .job9, .job11, .job13, .job15 {
		height:286px;
		float:left;
		width:49.396551724138%;
		margin:0 7px 7px 0;
	}
	
	.job2, .job4, .job6, .job8, .job10, .job12, .job14 {
		height:286px;
		float:right;
		width:49.396551724138%;
		margin:0 0 7px 0;
	}
	
	.job1 {
		background:url(../images/work_fhyw_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job2 {
		background:url(../images/work_tml_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job3 {
		background:url(../images/work_tgs_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job4 {
		background:url(../images/work_hkms_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job5 {
		background:url(../images/work_osm_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job6 {
		background:url(../images/work_fs_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job7 {
		background:url(../images/work_rise_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job8 {
		background:url(../images/work_hkmh_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job9 {
		background:url(../images/work_ep_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job10 {
		background:url(../images/work_bj_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job11 {
		background:url(../images/work_hkmb_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job12 {
		background:url(../images/work_nft_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job13 {
		background:url(../images/work_met_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job14 {
		background:url(../images/work_trp_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job15 {
		background:url(../images/work_evap_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.imgholderj {
		height:286px;
		position:relative;
		z-index:10;
	}
	
	/*INDIVIDUAL PROJECT PAGE*/

	.jobmainimage, .blogmainimage {
		/*height:243px;*/
	}
	
	.pic_2coll {
		float:left;
		width:47.413793103448%;
		margin-right:30px;
		text-align:right;
		position:relative;
		margin-bottom:20px;
		margin-top:5px;
	}
	
	.pic_2colr {
		float:right;
		width:47.413793103448%;
		text-align:left;
		position:relative;
		margin-bottom:20px;
		margin-top:5px;
	}
	
	.info {
		width:100%;
		margin:20px 0 100px 0;
		clear:both;
	}
	
	body#hkms .pic_2coll {
		margin-right:0;
	}
	
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	
	#header {
		height:80px;
		position:fixed;
	}
	
	#headerinner {
		max-width:700px;
		width:700px;
	}
	
	#logocontainer {
		width:35%;
	}
	
	#navcontainer {
		display:block;
		margin-top:21px;
	}
	
	#navcontainer {
		width:50%;
		float:right;
	}
	
	#navcontainer .menu {
		font-family:"Open Sans", Helvetica, Arial, sans-serif;
		font-weight:400;
		font-size: 12px;
		float:right;
		margin-top:5px;
		padding:0;
	}
	
	#navcontainer .menu li {
		list-style-type:none;
		display:inline;
	}
	
	#navcontainer .menu li a {
		display:inline;
		font-size:13px;
		text-decoration:none;
		color:#333;
		text-transform:uppercase;
		margin:0 7px;
		padding:0 0 7px 2px;
		letter-spacing:0.3em;
		text-align:center;
	}
	
	.menu li a:hover, .menu li a:focus {
		border-bottom: 2px solid #000;
	}
	
	body#about a.navabout, body#work a.navwork, body#blog a.navblog {
		border-bottom: 2px solid #000;
	}

	#menuicon {
		display:none;
	}
	
	#content {
		width:700px;
		max-width:700px;
		margin-top:110px;
	}
	
	#intro, .blogintro, #aboutintro, #signoff, .blogtitle {
		width:90%;
	}
	
	.featuredproject {
		width:100%;
		height:356px;
		float:left;
		margin-bottom:7px;
		position:relative;
		background:url(../images/fhyw_ad_f_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project2 {
		height:356px;
		float:left;
		width:39.5%;
		position:relative;
		background:url(../images/tmlewin_p2_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project3 {
		height:356px;
		float:right;
		width:59.5%;
		position:relative;
		background:url(../images/tgs_p3_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project4 {
		height:356px;
		float:left;
		width:59.5%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/hunkemoller_sexyshapes_showreel_5.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.project5 {
		height:356px;
		float:right;
		width:39.5%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/osm_p5_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.linkbox {
		clear:both;
		margin:50px 0;
	}
	
	.blog1, .blog2, .blog4, .blog5, .blog7, .blog8 {
		height:256px;
		float:left;
		width:32.66666666667%;
		margin-right:7px;
		margin-bottom:0px;
	}
	
	.blog3, .blog6, .blog9 {
		height:256px;
		float:right;
		width:32.66666666667%;
		margin-bottom:0px;
	}
	
	#footer {
		float:left;
		margin-top:0;
	}
	
	#footermenu {
		display:none;
	}
	
	#footerdetails ul li {
		display:inline-block;
		margin-right:15px;
		text-decoration:none;
		color:#fff;
	}
	
	#copy {
		clear:both;
		border-top:none;
		margin-top:15px;
		padding:0;
	}
	
	.imglink {
		height:266px;
	}
	
	.blog .imglink {
		height:196px;
	}
	
	#blog .imgholder {
		height:190px;
	}
	
	.imgholder {
		height:356px;
		position:relative;
		z-index:10;
	}
	
	.caption, .blogcaption {
		height:68px;
	}
	
	/*ABOUT PAGE*/
	
	.services1, .services2 {
		float:left;
		margin:0 50px 7px 0;
	}
	
	.services3 {
		float:left;
		margin:0 0 7px 0;
	}
	
	.serviceslist {
		text-align:left;
		padding-left:10px;
		line-height:2em;
	}
	
	.listcontainer {
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#about .job1, #about .job2 {
		height:258px;
		float:left;
		width:32.666666666667%;
		margin:0 7px 7px 0;
	}
	
	#about .job3 {
		height:258px;
		float:right;
		width:32.666666666667%;
		margin:0 0 7px 0;
	}
	
	#about .imgholderj {
		height:258px;
	}
	
	#about .caption .title {
		font-size:14px;
	}
	
	
	
	/*WORK PAGE*/
	
	.job1, .job3, .job5, .job7, .job9, .job11, .job13, .job15 {
		height:318px;
		float:left;
		width:49.5%;
		margin:0 7px 7px 0;
	}
	
	.job2, .job4, .job6, .job8, .job10, .job12, .job14 {
		height:318px;
		float:right;
		width:49.5%;
		margin:0 0 7px 0;
	}
	
	.job1 {
		background:url(../images/work_fhyw_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job2 {
		background:url(../images/work_tml_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job3 {
		background:url(../images/work_tgs_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job4 {
		background:url(../images/work_hkms_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job5 {
		background:url(../images/work_osm_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job6 {
		background:url(../images/work_fs_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job7 {
		background:url(../images/work_rise_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job8 {
		background:url(../images/work_hkmh_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job9 {
		background:url(../images/work_ep_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job10 {
		background:url(../images/work_bj_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job11 {
		background:url(../images/work_hkmb_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job12 {
		background:url(../images/work_nft_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job13 {
		background:url(../images/work_met_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job14 {
		background:url(../images/work_trp_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job15 {
		background:url(../images/work_evap_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.imgholderj {
		height:318px;
		position:relative;
		z-index:10;
	}
	
	/*BLOG PAGE*/
	
	.blogfeature {
		height:276px;
		padding-top:0;
	}
	
	/*INDIVIDUAL PROJECT PAGE*/
	
	.pic_2coll {
		float:left;
		width:47.142857142857%;
		margin-right:0;
		text-align:right;
		position:relative;
		margin-bottom:20px;
		margin-top:5px;
	}
	
	.pic_2colr {
		float:right;
		width:47.142857142857%;
		text-align:left;
		position:relative;
		margin-bottom:20px;
		margin-top:5px;
	}
	
	.info {
		width:100%;
		margin:20px 0 100px 0;
		position:relative;
		clear:both;
	}
	
	body.hkms .pic_2coll {
		margin-right:0;
	}
	
	#main_title {
		display:none;
	}
	
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
		
	#header {
		height:80px;
		position:fixed;
	}
	
	#headerinner {
		max-width:960px;
		width:960px;
	}
	
	#logocontainer {
		width:45%;
	}
	
	#navcontainer {
		display:block;
		margin-top:25px;
		width:50%;
		float:right;
	}
	
	#navcontainer .menu {
		font-family:"Open Sans", Helvetica, Arial, sans-serif;
		font-weight:400;
		font-size: 12px;
		float:right;
		margin-top:5px;
	}
	
	#navcontainer .menu li {
		list-style-type:none;
		display:inline;
	}
	
	#navcontainer .menu li a {
		display:inline;
		font-size:14px;
		text-decoration:none;
		color:#333;
		text-transform:uppercase;
		margin:0 7px;
		padding:0 0 7px 2px;
		letter-spacing:0.3em;
	}
	
	.menu li a:hover, .menu li a:focus {
		border-bottom: 2px solid #000;
	}
	
	body#about a.navabout, body#work a.navwork, body#blog a.navblog {
		border-bottom: 2px solid #000;
	}
	
	#menuicon {
		display:none;
	}
	
	#content {
		max-width:960px;
		width:960px;
		margin-top:110px;
	}
	
	#intro, .blogintro, #aboutintro, #signoff, .blogtitle {
		width:80%;
	}
	
	.featuredproject {
		width:100%;
		height:372px;
		float:left;
		margin-bottom:7px;
		position:relative;
		background:url(../images/fhyw_ad_f_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project2 {
		height:372px;
		float:left;
		width:39.635416666667%;
		position:relative;
		background:url(../images/tmlewin_p2_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project3 {
		height:372px;
		float:right;
		width:59.635416666667%;
		position:relative;
		background:url(../images/tgs_p3_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project4 {
		height:372px;
		float:left;
		width:59.635416666667%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/hunkemoller_sexyshapes_showreel_5.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.project5 {
		height:372px;
		float:right;
		width:39.635416666667%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/osm_p5_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.blog1, .blog2, .blog4, .blog5, .blog7, .blog8 {
		height:301px;
		float:left;
		width:32.847222222222%;
		margin-right:7px;
		margin-bottom:0px;
	}
	
	.blog3, .blog6, .blog9 {
		height:301px;
		float:right;
		width:32.847222222222%;
		margin-bottom:0px;
	}
	
	.linkbox {
		clear:both;
		margin:50px 0;
	}
	
	#footer {
		float:left;
		margin-top:0;
	}
	
	#footermenu {
		display:none;
	}
	
	#footerdetails ul li {
		display:inline-block;
		margin-right:15px;
	}
	
	#copy {
		clear:both;
		border-top:none;
		margin-top:15px;
		padding:0;
	}
	
	.imglink {
		height:321px;
	}
	
	.blog .imglink {
		height:233px;
	}
	
	#blog .imgholder {
		height:233px;
	}
	
	.imgholder {
		height:372px;
		position:relative;
		z-index:10;
	}
	
	.caption, .blogcaption {
		height:70px;
	}
	
	/*ABOUT PAGE*/
	
	.services1, .services2 {
		float:left;
		margin:0 50px 7px 0;
	}
	
	.services3 {
		float:left;
		margin:0 0 7px 0;
	}
	
	.serviceslist {
		text-align:left;
		padding-left:10px;
		line-height:2em;
	}
	
	.listcontainer {
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/*WORK PAGE*/
	
	.job1, .job2, .job4, .job5, .job7, .job8, .job10, .job11, .job13, .job14 {
		height:291px;
		float:left;
		width:32.847222222222%;
		margin:0 7px 7px 0;
	}
	
	.job3, .job6, .job9, .job12, .job15 {
		height:291px;
		float:right;
		width:32.847222222222%;
		margin:0 0 7px 0;
	}
	
	.job1 {
		background:url(../images/work_fhyw_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job2 {
		background:url(../images/work_tml_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job3 {
		background:url(../images/work_tgs_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job4 {
		background:url(../images/work_hkms_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job5 {
		background:url(../images/work_osm_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job6 {
		background:url(../images/work_fs_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job7 {
		background:url(../images/work_rise_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job8 {
		background:url(../images/work_hkmh_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job9 {
		background:url(../images/work_ep_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job10 {
		background:url(../images/work_bj_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job11 {
		background:url(../images/work_hkmb_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job12 {
		background:url(../images/work_nft_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job13 {
		background:url(../images/work_met_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job14 {
		background:url(../images/work_trp_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job15 {
		background:url(../images/work_evap_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.imgholderj {
		height:291px;
		position:relative;
		z-index:10;
	}
	
	/*BLOG PAGE*/
	
	.blogfeature {
		height:321px;
		padding-top:0;
	}
	
	
	/*INDIVIDUAL PROJECT PAGE*/
	
	.pic_2coll {
		float:left;
		width:47.395833333333%;
		margin-right:50px;
		text-align:right;
		position:relative;
		margin-bottom:20px;
		margin-top:20px;
	}
	
	.pic_2colr {
		float:right;
		width:47.395833333333%;
		text-align:left;
		position:relative;
		margin-bottom:20px;
		margin-top:20px;
	}
	
	body.hkms .pic_2coll {
		margin-right:0;
	}
	
	.info {
		width:100%;
		margin:20px 0 100px 0;
		clear:both;
	}
	
	#main_title {
		display:none;
	}
	
	
}

@media only screen and (min-width: 1200px) {
	/*Touch*/
	
	#header {
		height:80px;
		position:fixed;
	}
	
	#headerinner {
		max-width:1176px;
		width:1176px;
	}
	
	#logocontainer {
		width:45%;
	}
	
	#navcontainer {
		display:block;
		margin-top:25px;
		width:50%;
		float:right;
	}
	
	#navcontainer .menu {
		font-family:"Open Sans", Helvetica, Arial, sans-serif;
		font-weight:400;
		font-size: 12px;
		float:right;
		margin-top:5px;
	}
	
	#navcontainer .menu li {
		list-style-type:none;
		display:inline;
	}
	
	#navcontainer .menu li a {
		display:inline;
		font-size:14px;
		text-decoration:none;
		color:#333;
		text-transform:uppercase;
		margin:0 7px;
		padding:0 0 7px 2px;
		letter-spacing:0.3em;
	}
	
	.menu li a:hover, .menu li a:focus {
		border-bottom: 2px solid #000;
	}
	
	body#about a.navabout, body#work a.navwork, body#blog a.navblog {
		border-bottom: 2px solid #000;
	}
	
	#menuicon {
		display:none;
	}
	
	#content {
		max-width:1176px;
		width:1176px;
		margin-top:110px;
	}
	
	#intro, .blogintro, #aboutintro, .services, #signoff, .blogtitle, #privacyintro {
		width:70%;
	}
	
	.featuredproject {
		width:100%;
		height:456px;
		float:left;
		margin-bottom:7px;
		position:relative;
		background:url(../images/fhyw_ad_f_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project2 {
		height:456px;
		float:left;
		width:39.702380952381%;
		position:relative;
		background:url(../images/tmlewin_p2_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project3 {
		height:456px;
		float:right;
		width:59.702380952381%;
		position:relative;
		background:url(../images/tgs_p3_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.project4 {
		height:456px;
		float:left;
		width:59.702380952381%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/hunkemoller_sexyshapes_showreel_5.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.project5 {
		height:456px;
		float:right;
		width:39.702380952381%;
		position:relative;
		margin-bottom:0px;
		background:url(../images/osm_p5_5.jpg) top center no-repeat;
		background-size: cover;
	}
	
	.blog1, .blog2, .blog4, .blog5, .blog7, .blog8 {
		height:361px;
		float:left;
		width:32.936507936508%;
		margin-right:7px;
		margin-bottom:0px;
	}
	
	.blog3, .blog6, .blog9 {
		height:361px;
		float:right;
		width:32.936507936508%;
		margin-bottom:0px;
	}
	
	.linkbox {
		clear:both;
		margin:50px 0;
	}
	
	#footer {
		float:left;
		margin-top:0;
	}
	
	#footermenu {
		display:none;
	}
	
	#footerdetails ul li {
		display:inline-block;
		margin-right:15px;
	}
	
	#copy {
		clear:both;
		border-top:none;
		margin-top:15px;
		padding:0;
	}
	
	.imglink {
		height:376px;
	}
	
	.blog .imglink {
		height:301px;
	}
	
	#blog .imgholder {
		height:302px;
	}
	
	.imgholder {
		height:456px;
		position:relative;
		z-index:10;
	}
	
	/*ABOUT PAGE*/
	
	.services1, .services2 {
		float:left;
		margin:0 50px 7px 0;
	}
	
	.services3 {
		float:left;
		margin:0 0 7px 0;
	}
	
	.serviceslist {
		text-align:left;
		padding-left:10px;
		line-height:2em;
	}
	
	.servicetitle {
		font-size:25px;
	}
	
	.listcontainer {
		width:80%;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	/*WORK PAGE*/
	
	.job1, .job2, .job4, .job5, .job7, .job8, .job10, .job11, .job13, .job14 {
		height:356px;
		float:left;
		width:32.936507936508%;
		margin:0 7px 7px 0;
	}
	
	.job3, .job6, .job9, .job12, .job15 {
		height:356px;
		float:right;
		width:32.936507936508%;
		margin:0 0 7px 0;
	}
	
	.job1 {
		background:url(../images/work_fhyw_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job2 {
		background:url(../images/work_tml_thumb_lg.jpg) 0 0 no-repeat;
		background-size:cover;
	}
	
	.job3 {
		background:url(../images/work_tgs_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job4 {
		background:url(../images/work_hkms_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job5 {
		background:url(../images/work_osm_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job6 {
		background:url(../images/work_fs_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job7 {
		background:url(../images/work_rise_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job8 {
		background:url(../images/work_hkmh_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job9 {
		background:url(../images/work_ep_thumb_lg.jpg) 0 0 no-repeat;
	}
	
	.job10 {
		background:url(../images/work_bj_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job11 {
		background:url(../images/work_hkmb_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job12 {
		background:url(../images/work_nft_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job13 {
		background:url(../images/work_met_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job14 {
		background:url(../images/work_trp_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.job15 {
		background:url(../images/work_evap_thumb_lg.jpg) top center no-repeat;
		background-size:cover;
	}
	
	.imgholderj {
		height:356px;
		position:relative;
		z-index:10;
	}
	
	/*BLOG PAGE*/
	
	.blogfeature {
	padding-top:0;
}
	
	/*INDIVIDUAL PROJECT PAGE*/
	
	.pic_2coll {
		float:left;
		width:47.874149659864%;
		margin-right:50px;
		text-align:right;
		position:relative;
		margin-bottom:20px;
		margin-top:20px;
	}
	
	.pic_2colr {
		float:right;
		width:47.874149659864%;
		text-align:left;
		position:relative;
		margin-bottom:20px;
		margin-top:20px;
	}
	
	.info {
		width:100%;
		margin:20px 0 100px 0;
		position:relative;
		clear:both;
	}
	
	body.tml .info {
		float:none;
		clear:both;
	}
	
	.pic_1col {
		margin-top:30px;
	}
	
	body.hkms .pic_2coll, body.hkmh .pic_2coll, body.hkmb .pic_2coll {
		margin-right:0;
	}
	
	
	/*INDIVIDUAL BLOG PAGE*/
	
	.blogsubtitle {
		color:#000;
		text-transform:uppercase;
		margin: 30px 0;
		width:100%;
		float:left;
		text-align:center;
	}
	
	.pic_2coll p, .pic_2colr p {
		font-size:14px;
		line-height:24px;
	}
	
	#blogsignoff {
		text-align:center;
		margin-top:50px;
		clear:both;
		width:60%;
		margin: 50px auto 0 auto;
	}
	
	#main_title {
		display:none;
	}
	
}

/****************************IE STYLES****************************/
/*IE 8*/
		
.lt-ie9 #header {
	height:80px;
	position:fixed;
}

.lt-ie9 #headerinner {
	max-width:960px;
	width:960px;
}

.lt-ie9 #logocontainer {
	width:432px;
}

.lt-ie9 #navcontainer {
	display:block;
	margin-top:25px;
	width:50%;
	float:right;
}

.lt-ie9 #navcontainer .menu {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:400;
	font-size: 12px;
	float:right;
	margin-top:5px;
}

.lt-ie9 #navcontainer .menu li {
	list-style-type:none;
	display:inline;
}

.lt-ie9 #navcontainer .menu li a {
	display:inline;
	font-size:14px;
	text-decoration:none;
	color:#333;
	text-transform:uppercase;
	margin:0 7px;
	padding:0 0 7px 2px;
	letter-spacing:0.3em;
}

.lt-ie9 .menu li a:hover, .menu li a:focus {
	border-bottom: 2px solid #000;
}

.lt-ie9 body#about a.navabout, .lt-ie9 body#work a.navwork, .lt-ie9 body#blog a.navblog {
		border-bottom: 2px solid #000;
	}

.lt-ie9 #menuicon {
	display:none;
}

.lt-ie9 #content {
	width:960px;
	margin-top:110px;
}

.lt-ie9 #intro {
	width:576px;
}

.lt-ie9 .featuredproject {
	width:960px;
	height:401px;
	float:left;
	margin-bottom:7px;
	position:relative;
	background:url(../images/fhyw_960x401ie.jpg) top center no-repeat;
}

.lt-ie9 .project2 {
	height:401px;
	float:left;
	width:381px;
	position:relative;
	background:url(../images/tmlewin_381x401ie.jpg) top center no-repeat;
}

.lt-ie9 .project3 {
	height:401px;
	float:right;
	width:572px;
	position:relative;
	background:url(../images/tgs_572x401ie.jpg) top center no-repeat;
}

.lt-ie9 .project4 {
	height:401px;
	float:left;
	width:572px;
	position:relative;
	margin-bottom:0px;
	background:url(../images/hunkemoller_ss_showreel_572x401ie.jpg) top center no-repeat;
}

.lt-ie9 .project5 {
	height:401px;
	float:right;
	width:381px;
	position:relative;
	margin-bottom:0px;
	background:url(../images/osm_381x401ie.jpg) top center no-repeat;
}

.lt-ie9 .blog1, .lt-ie9 .blog2 {
	height:301px;
	float:left;
	width:315px;
	margin-right:7px;
	margin-bottom:0px;
}

.lt-ie9 .blog3 {
	height:301px;
	float:right;
	width:315px;
	margin-bottom:0px;
}

.lt-ie9 .linkbox {
	clear:both;
	margin:50px 0;
}

.lt-ie9 #footer {
	float:left;
	margin-top:0;
}

.lt-ie9 #footermenu {
	display:none;
}

.lt-ie9 #footerdetails ul li {
	display:inline-block;
	margin-right:15px;
}

.lt-ie9 #copy {
	clear:both;
	border-top:none;
	margin-top:15px;
	padding:0;
}

.lt-ie9 .imglink {
	height:321px;
}

.lt-ie9 .blog .imglink {
	height:301px;
}

.lt-ie9 .imgholder {
	height:401px;
}

.lt-ie9 .job1, .lt-ie9 .job2, .lt-ie9 .job4, .lt-ie9 .job5, .lt-ie9 .job7, .lt-ie9 .job8, .lt-ie9 .job10, .lt-ie9 .job11, .lt-ie9 .job13, .lt-ie9 .job14 {
	height:291px;
	float:left;
	width:32.847222222222%;
	margin:0 7px 7px 0;
}
	
.lt-ie9 .job3, .lt-ie9 .job6, .lt-ie9 .job9, .lt-ie9 .job12, .lt-ie9 .job15 {
	height:291px;
	float:right;
	width:32.847222222222%;
	margin:0 0 7px 0;
}

.lt-ie9 .blog1, .lt-ie9 .blog2, .lt-ie9 .blog4, .lt-ie9 .blog5, .lt-ie9 .blog7, .lt-ie9 .blog8 {
	height:301px;
	float:left;
	width:32.847222222222%;
	margin-right:7px;
	margin-bottom:0px;
}

.lt-ie9 .blog3, .lt-ie9 .blog6, .lt-ie9 .blog9 {
	height:301px;
	float:right;
	width:32.847222222222%;
	margin-bottom:0px;
}

.lt-ie9 #main_title {
	display:none;
}

.lt-ie9 .services1, .lt-ie9 .services2 {
	float:left;
	margin:0 50px 7px 0;
}

.lt-ie9 .services3 {
	float:left;
	margin:0 0 7px 0;
}

.lt-ie9 .serviceslist {
	text-align:left;
	padding-left:10px;
	line-height:2em;
}

.lt-ie9 .listcontainer {
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

.lt-ie9 .caption, .lt-ie9 .blogcaption {
	filter: alpha(opacity=90);
}