@font-face {
  font-family: 'DIN-Regular';
  src: url('/index.html') format('woff'),
       url('/index.html') format('truetype'),
       url('/index.html#DIN-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DIN-Regular';
  src: url('/index.html');
  src: url('/index.html#iefix') format('embedded-opentype'),
       url('/index.html') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINPro-Light';
  src: url('/fonts/DINPro-Light.eot');
  src: url('/fonts/DINPro-Light.eot#iefix') format('embedded-opentype'),
       url('/fonts/DINPro-Light.woff2') format('woff2'),
       url('/fonts/DINPro-Light.woff') format('woff'),
       url('/fonts/DINPro-Light.ttf') format('truetype'),
       url('/fonts/DINPro-Light.svg#DINPro-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
body
{
  height: 100%;
  min-height: 100%;
}

.container-fullsize { -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; }

#supersized-loader { display: none; }

/* ------------------------------------------------------------ *\
	Container
\* ------------------------------------------------------------ */

/* UPDATE ALED CRAVER HOP STUDIOS 2016-03-16 */
/* PURPOSE REMOVE BACKGROUND COLOUR SO WE CNA DISPLAY A BACKGGROUND IMAGE */
/* .container-primary { background: #000; padding-left: 6px; } */
.container-primary {  padding-left: 6px; }
.container-primary:after { content: ''; line-height: 0; display: table; clear: both; }

.container-primary * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container-primary .container-inner { width: 1170px; }
.container-primary .container-inner:after { content: ''; line-height: 0; display: table; clear: both; }

/* ------------------------------------------------------------ *\
	Section Primary
\* ------------------------------------------------------------ */

.section-primary { width: 700px; float: left; padding-top: 50px; padding-left: 8px; margin-right: -1px; }
/* UPDATE ALED CARVER HOP STUDIOS 2016-03-15 */
/* PURPOSE MAKING HEADER THE SAME SIZE AS ON CATEGORY/PROJECT OVERVIEW */
/* .section-primary .section-head { background: #fc2623; padding: 9px 10px 16px; margin-bottom: 28px; } */
/* .section-primary .section-head { width: 199px; height: 57px; background-color: #f00; padding: 10px 0 0 10px; color: #fff; margin-bottom: 23px; }	    */
.section-primary .section-head {  margin-bottom: 23px; color: #fff;  }

/* UPDATE ALED CARVER HOP STUDIOS 2016-03-15 */
/* PURPOSE MAKING HEADER THE SAME SIZE AS ON CATEGORY/PROJECT OVERVIEW */
/* .section-primary .section-head h1 { font-size: 50px; font-family: 'DINPro-Light', sans-serif; color: #fff; line-height: 0.7; letter-spacing: -0.0625em; margin-top: 11px; } */
.section-primary .section-head h1 { font-family: 'DINPro-Light', sans-serif; text-transform: uppercase; font-size: 1.35em; font-weight: 200; width: 100%; height: 67px; background-color: #f00; padding: 10px 0 0 10px; }
/* UPDATE PIXEL ALIGNMENT ALED CARVER 11/03/2016 */
/* .section-primary .section-content { height: 330px; background: #f00; color: #fff; padding: 22px 35px 72px 17px; font-family: 'DINPro-Light', sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.2; } */
.section-primary .section-content { height: 330px; background: #f00; color: #fff; padding: 22px 35px 72px 12px; font-family: 'DINPro-Light', sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.2; }
.section-primary .section-inner { height: 330px; background: #f00; color: #fff; padding: 43px 22px 25px; line-height: 1.3; }
.section-primary .section-inner:after { content: ''; line-height: 0; display: table; clear: both; }

/* ------------------------------------------------------------ *\
	Slider
\* ------------------------------------------------------------ */

.slider { height: 100vh; width: 100%; overflow: hidden; position: relative; border: 0; margin: 0; }
.slider img { max-width: 100%; }
.slider img.hidden { display: none; }

.slider .slides { list-style: none; height: 100%; }
.slider .slide { position: relative; height: 100vh; }
.slider .slide-image { height: 100vh; position: absolute; width: 100%; top: 0; bottom: 0; left: 0; }
.slider .slide-inner { padding-top: 50px; position: relative; z-index: 1; }
.slider .slide-content { background: #000; max-width: 650px; padding: 20px 20px 30px; color: #fff; font-size: 0.8em; line-height: 1.3em; opacity: 0; -webkit-transition: opacity .3s .5s; -o-transition: opacity .3s .5s; transition: opacity .3s .5s; }
.slider .flex-active-slide .slide-content { opacity: 1; }
.slider .slide-content { max-width: 395px; width: 395px; }

/* UPDATE FONT AS PER REQUESTS 10/02/2016 */
/*.slider .slide-content h2 { margin-bottom: 5px; text-transform: uppercase; font-family: 'DINPro-Light', sans-serif; font-size: 1.15em; line-height: 1.2; } */
/* UPDATE PIXEL ALIGNMENT WITH LOGO ALED CARVER HOP STUDIOS 11/03/2016 */
/* .slider .slide-content h2 { margin-bottom: 5px; text-transform: uppercase; font-family: DINWeb, sans-serif; font-size: 1.15em; line-height: 1.2; } */
.slider .slide-content h2 { margin-bottom: 5px; text-transform: uppercase; font-family: DINWeb, sans-serif; font-size: 1.15em; line-height: 1.2; margin-left: 5px;  }
.slider .slide-content h2:last-child { margin-bottom: 0; }
.slider .slide-content h2 .link-more { margin-top: 0; }
.slider .slide-content a { color: #fff; }
.slider .slide-content a:hover { text-decoration: underline; }

.slider .flex-direction-nav { position: fixed; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }

.slider .flex-prev { display: none; }

.slider .flex-next { opacity: .8; height: 25px; width: 100px; z-index: 1999; -webkit-transition: opacity .4s ease; transition: opacity .4s ease; background: none; font-size: 0; line-height: 0; text-indent: -4004px; right: auto; margin: 0; position: static; }
.slider .flex-next:before { margin-left: -44px; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: rotate(26deg); transform: rotate(26deg); }
.slider .flex-next:after { margin-left: -6px; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotate(-26deg); transform: rotate(-26deg); }

.slider .flex-direction-nav .flex-next:before,
.slider .flex-next:after { content: ''; width: 50px; height: 3px; display: block; position: absolute; top: 0; left: 50%; background-color: #fff; border-radius: 3px; }

.flexslider .slides img.edit_this { width: inherit; display: inline; }

/* ------------------------------------------------------------ *\
	Lists
\* ------------------------------------------------------------ */

/*  List Links  */

/* UPDATE PIXEL ALIGNMENT WITH LOGO ALED CARVER HOP STUDIOS 11/03/2016 */
/* .list-links { position: fixed; top: 220px; left: 20px; } */
.list-links { position: fixed; top: 220px; left: 25px; }
.list-links li { line-height: 1.5; }
.list-links a { color: #fff; text-transform: uppercase; font-size: 69px; font-family: 'DINPro-Light', sans-serif; }
.list-links a:hover { color: #f00; }

/*  List Numbers  */

.list-numbers { width: 50%; float: left; padding-right: 21px; }
.list-numbers li { position: relative; padding-left: 40px; margin-bottom: 40px; font-size: 13px; line-height: 1.35;  min-height: 108px; }
.list-numbers li:last-child { margin-bottom: 0; }
.list-numbers span { position: absolute; top: 0px; left: 0; font-family: 'DINPro-Light', sans-serif; font-size: 36px; line-height: 1.2; }

/* ------------------------------------------------------------ *\
	Post
\* ------------------------------------------------------------ */
/* UPDATE REMOVE GRAY SECTION 1 - 4, REPLACE WITH POSTS ALED CARVER HOP STUDIOS (11/03/2016) */
/* .posts { padding-top: 149px; padding-bottom: 20px; } */
.posts { width: 710px; padding-top: 0px; padding-bottom: 20px; margin-left: 14px; }
.posts:after { content: ''; line-height: 0; display: table; clear: both; }

.posts .project-box {
	width: 220px; height: 165px; margin: 0 13px 6px 0; float:left; background: #000; color: rgb(204, 204, 204);
}

.posts .project-box .project-image
{
	width: 220px;
}

.posts .project-box .project-image a {
	display: block;
	height: 125px;
	width: 220px;
}
.posts .project-box .project-box-text
{
	width: 220px;
	height: 32px;
}

.post-image { float: left; width: 220px; height: 161px; margin-left: 8px; margin-bottom: 8px; position: relative; }
.post-image img { max-width: 100%; }

/* UPDATE CHANGE SPAN COLOR ALED CARVER HOP STUDIOS (11/03/2016) */
/* .post-image span { display: block; position: absolute; width: 100%; bottom: 0; left: 0; background: #d1d1d1; color: #000; text-transform: uppercase; height: 36px; padding: 3px 10px; line-height: 1.1; font-family: DINWeb, sans-serif; font-size: 12px } */
.post-image span { display: block; position: absolute; width: 100%; bottom: 0; left: 0; background: #000; color: #d1d1d1; text-transform: uppercase; height: 36px; padding: 3px 10px; line-height: 1.1; font-family: DINWeb, sans-serif; font-size: 12px }

/* ------------------------------------------------------------ *\
	Links
\* ------------------------------------------------------------ */

/*  Link More  */

.link-more { display: inline-block; margin-top: 15px; }

/* ------------------------------------------------------------ *\
	Filtered work list
\* ------------------------------------------------------------ */

/*.project-listings .project-list .project { background: #000;  }
.project-listings .project-list .project-title a { color: rgb(204, 204, 204); }
.project-listings .project .project-title-text { display: block; }
.project-listings .project .project-categories { display: block; font-family: 'DINPro-Light', sans-serif; text-transform: capitalize; }*/

.project-box {
	width: 209px; height: 148px; margin: 0 6px 6px 0; float:left; background: #000; color: rgb(204, 204, 204);
}


.project-box.exhibition, .project-box.brand, .project-box.interiors, .project-box.architecture, .project-box.wayfinding {
	background: #000; color: rgb(204, 204, 204);
}
.project-box .project-image a {
	display: block;
	height: 114px;
}
.project-box .project-image .project-image-color {
	display: none;
}
.project-box:hover .project-image .project-image-color {
	display: block;
}
.project-box:hover .project-image .project-image-gray {
	display: none;
}
.project-box .project-box-text {
	height: 27px;
	overflow: hidden;
	padding-left: 8px;
	padding-top: 6px;
}
.project-box .project-box-title {
	font-family: DINWeb, sans-serif;
	/* color: #000;*/
	color: rgb(204, 204, 204);
	font-size: 12px;
	line-height: 12px;
	text-transform: uppercase;
	display: block;
}
.project-box.exhibition .project-box-title, .project-box.brand .project-box-title, .project-box.interiors .project-box-title, .project-box.architecture .project-box-title, .project-box.wayfinding .project-box-title {
	color: rgb(204, 204, 204);
}
.project-box .project-box-title:hover {
	font-family: DINWeb, sans-serif;
	color: #000;
}
.project-box.exhibition .project-box-title:hover, .project-box.brand .project-box-title:hover, .project-box.interiors .project-box-title:hover, .project-box.architecture .project-box-title:hover, .project-box.wayfinding .project-box-title:hover {
	color: rgb(204, 204, 204);
}
.project-box .project-box-categories {
	font-size: 12px;
	margin-top: -1px;
	font-family: DINWeb, sans-serif; font-size: 11px;
}
.project-box .project-box-categories a, .project-box .project-box-categories a:hover {
	/* 	color: rgb(204, 204, 204); */
	color: #999999;
}
.project-box .thumb-data {
	display: none;
}
/* ------------------------------------------------------------ *\
	News page
\* ------------------------------------------------------------ */

body.body-news {
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
#news-nav {
    overflow: hidden;
    clear: left;
    margin-bottom: 23px;
    color: #fff;
}
#news-nav h1 {
    float: left;
    width: 199px;
    height: 57px;
    /* background-color: #f00; */
    padding: 10px 0 0 10px;
}
.news-listings {
    min-width: 696px;
    margin-left: 15px;
}

.news-box {
	width: 418px; height: 296px; margin: 0 6px 20px 0; float:left; background: #000; color: #f00;
}


.news-box.exhibition, .news-box.brand, .news-box.interiors, .news-box.architecture, .news-box.wayfinding {
	background: #000; color: rgb(204, 204, 204);
}
.news-box .news-image  {
    filter: grayscale(100%);
	background-repeat: no-repeat;
    background-size: cover;
}
.news-box a .news-image:hover {
    filter: grayscale(0%);
}
.news-box .news-image .news-image-color {
	display: none;
}
.news-box:hover .news-image .news-image-color {
	display: block;
}
.news-box:hover .news-image .news-image-gray {
	display: none;
}
.news-box .news-box-text {
	height: 48px;
	overflow: hidden;
	padding-left: 2px;
	padding-top: 6px;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 15px;
}
.news-box .news-box-title {
	font-family: DINWeb, sans-serif;
	color: rgb(204, 204, 204);
}
.news-box.exhibition .news-box-title, .news-box.brand .news-box-title, .news-box.interiors .news-box-title, .news-box.architecture .news-box-title, .news-box.wayfinding .news-box-title {
	color: #f00;
}
.news-box a.news-box-title:hover {
	font-family: DINWeb, sans-serif;
	color: #f00;
}
.news-box.exhibition .news-box-title:hover, .news-box.brand .news-box-title:hover, .news-box.interiors .news-box-title:hover, .news-box.architecture .news-box-title:hover, .news-box.wayfinding .news-box-title:hover {
	color: #f00;
}
.news-box .news-box-categories {
	font-size: 12px;
	margin-top: -1px;
	font-family: DINWeb, sans-serif; font-size: 11px;
}
.news-box .news-box-categories a, .news-box .news-box-categories a:hover {
	/* 	color: rgb(204, 204, 204); */
	color: #999999;
}
.news-box .thumb-data {
	display: none;
}
/* ------------------------------------------------------------ *\
	Responsive
\* ------------------------------------------------------------ */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
	.slider .slide-image {
		height: 1024px;
	}
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
	.slider .slide-image {
		height: 768px;
	}
}

@media(max-height: 600px){
	.list-links a { font-size: 40px; }
}

@media(max-width: 767px){
	.slider { height: auto; overflow: scroll; }
	.slider .slide-inner { top: auto; bottom: 0; position: absolute; left: 0; width: 100%; }
	.slider .slide-content { padding-bottom: 50px; }
	.slider .slide-content h2 { font-size: 12px; }
	.slider .flex-direction-nav { bottom: 15px; }
	.slider .flex-next { -webkit-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); }

	.list-links { position: absolute; top: 50px; }
	.list-links a { font-size: 30px; /* pointer-events: none;  cursor: default; */ } /* don't disable the links */

	.link-more { font-size: 12px; }


	.entry-content-wrapper { position: absolute; background-color: #000; font-size: 1em; bottom: 0px; }
	.entry-content-wrapper { max-width: 100% !important; width: 96% !important; margin: 0 !important; padding: 2% !important; } /*!IMPORTANT USED TO PREVENT JS ALTERATION*/
	.entry-content-wrapper h2 { font-size: 1em; }
	.redback { background-color: #000 !important; bottom: 0% !important; } /*!IMPORTANT USED TO PREVENT JS ALTERATION*/
	/*.slide-content { padding-bottom: 30px !important; }*/

	.container-primary .container-inner
	{
		width: 96%;
	}
	.section-primary
	{
		width: 100%;
	}
	.section-primary .section-head
	{
		margin-bottom: 18px;
	}
	.section-primary .section-content
	{
		height: auto;
		font-size: 1.1em;
		margin-bottom: 18px;
	}
	.posts
	{
		width: 92%;
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		background-color: transparent;
	}
	.posts .project-box, .posts .project-box .project-image, .posts .project-box .project-image a, .posts .project-box .project-image img, .posts .project-box .project-box-text
	{
		width: 100%;
		height: auto;
	}
	.posts .project, .posts .project-box
	{
		clear: both;
		margin-bottom: 10px;
	}

	.project-list
	{
		width: 100%;
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		background-color: transparent;
	}
	.project-list .project-box, .project-list .project-box .project-image, .project-list .project-box .project-image a, .project-list .project-box .project-image img, .project-list .project-box .project-box-text
	{
		width: 100%;
		height: auto;
	}
	.project-list .project, .project-list .project-box
	{
		clear: both;
		margin-bottom: 10px;
	}
	.news-list
	{
		width: 100%;
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		background-color: transparent;
	}
	.news-list .news-box, .news-list .news-box .news-image a, .news-list .news-box .news-image img {
		width: 100%;
		height: auto;
	}
	.news-list .news, .news-list .news-box{
		width: 90vw;
	}
	.news-list .news-box .news-image {
	    width: 100% !important;
    	height: 320px !important;
	}
}

#public-socialmedia li.facebook {
		background: #000 url(/_assets/img/facebook.png) 0 0 no-repeat;
		background-size: contain;
	}
		#public-socialmedia li.facebook:hover {
			bopacity: 0.6;
		}

		#public-socialmedia li.twitter {
		background: #000 url(/_assets/img/twitter.png) 0 0 no-repeat;
		background-size: contain;
	}
		#public-socialmedia li.twitter:hover {
			opacity: 0.6;
		}

		#public-socialmedia li.instagram {
		background: #000 url(/_assets/img/INSTAGRAM.png) 0 0 no-repeat;
		background-size: contain;
	}
		#public-socialmedia li.instagram:hover {
			opacity: 0.6;
		}

	#public-socialmedia li.linkedin {
		background: #000 url(/_assets/img/sm-linkedin.gif) 0 0 no-repeat;
		background-size: contain;
	}
		#public-socialmedia li.linkedin:hover {
			background-position-y: -16px;
		}


#project-images-mobile iframe {
    width: 100%;
}