@charset "UTF-8";
/* CSS Document */

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

}

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

}


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

}


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

}


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

}



/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html,
body {
  height: 100%;
  font-family: 'din_regular', Helvetica, sans-serif;
  
}

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }




.light {
	font-family: 'din_light', Helvetica, sans-serif !important;	
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #333;	
}
body {
	background-color: #FFF;
	font-size: 62.5%;	
}

h1 { font-size: 3.6em; } 
h2 { font-size: 3.6em; }
h4 { font-size: 3.6em; line-height: 1em; }
p { font-size: 1.4em; }

#identity h2 { text-transform: uppercase; }
#identity h2 a { color: #666; }
#identity h2 a:hover { color: #F06; }

/* --------------------------- header --------------------------- */


header {
	background-color: #FFF;
	font-family: 'din_bold', Helvetica, sans-serif;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
.header_box {
	width: 90%; 
	max-width: 1410px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;	
}

header h1 {
	float: left;	
}

#identity_section {
	background-color: #F5F5F5;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #666;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
#identity {
	width: 90%; 
	max-width: 1410px;
	margin: 10px auto 0px auto;
	padding: 0px 0px 0px 0px;	
}
.client {
	/*font-family: 'din_bold', Helvetica, sans-serif;	*/
	color: #0CF;
}





/* --------------------------- new navigation --------------------------- */


#nav {
	font-family: 'din_light', Helvetica, sans-serif;
	font-size: 3.6em;
	background-color: #FFF;
	text-transform: uppercase;
	list-style: none;	
	background-color: ;	
}

#nav ul li a {
	color: #000;
	text-decoration: none;	
}
#nav ul li a:hover {
	color: #F06;	
}



#nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  
}

#nav li {
  display: inline-block;
}

.js #nav {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#nav.opened {
  max-height: 9999px;
}

#nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 60px;
  height: 30px;
  float: left;
  text-indent: -9999px;
  overflow: hidden;
  background:  url("../images/grip.png") no-repeat -0px -0px;
  margin-top: 10px;
}



@media screen and (min-width: 1100px) {
	
#nav {
	font-family: 'din_light', Helvetica, sans-serif;
	font-size: 1.4em;
	background-color: #FFF;
	text-transform: uppercase;		
}
#nav ul {
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  margin: 23px auto 0px 36px;
}

  .js #nav {
    position: relative;
  }
  .js #nav.closed {
    max-height: none;
  }
  #nav-toggle {
    display: none;
  }

}








/* --------------------------- navigation --------------------------- */
/*
nav {
	font-family: 'din_light', Helvetica, sans-serif;
	font-size: 1.4em;
	background-color: #FFF;
	text-transform: uppercase;		
}
nav ul {
	float: left;
	margin: 23px auto 0px 36px;	
}
nav ul li {
	float: left;	
}
nav ul li a {
	color: #000;	
}
nav ul li a:hover {
	color: #F06;	
}

*/
.sections {
	font-family: 'din_light', Helvetica, sans-serif;
	color: #F06;	
}

.filters {
	font-family: 'din_light', Helvetica, sans-serif;
	padding: 5px 0px 5px 0px;
	margin: 1px 0px 0px 0px;	
	color: #666;
	font-size: 3.6em;
	text-transform: uppercase;
}
.filters a {
	color: #666;	
}
.filters a:hover {
	color: #000;	
}
.filters li a.selected {
	color: #0CF;	
}
.filters_box {
	width: 90%;
	max-width: 1410px;
	margin: 10px auto 0px auto;	
}
.filters ul li {
	display: inline-block;
}





/* --------------------------- main --------------------------- */


#container_section {
	background-color: #FFF;
	width: 100%;
	padding: 10px 0px 0px 0px;
	background-color: #F5F5F5;		
}
#container {
	width: 91%;
	max-width: 1410px;
	margin: 0px auto 0px auto;
	padding: 10px 0px 40px 0px;	
}

#container_images {
	width: 78%;
	float: left;
	max-width: 1410px;
	margin: 0px 2% 0px 0px;
	padding: 10px 0px 40px 0px;	
}
#container_text {
	font-family: 'din_light', Helvetica, sans-serif;
	width: 20%;
	float: right;
	max-width: 1410px;
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 40px 0px;	
}
.projectimage_big {
	/*background-color: #FFF;*/
	padding: 0px;
	margin-bottom: 0px;	
}
.projectimage_big img {
	width: 100%;
	height: auto;	
}
.projectimage_norm {
	
}
.projectimage_norm img {
	float: left;
	margin: 1% 1% 1% 1%;	
}
.border img {
	border: 1px solid #FFF;	
}
.border_thick img {
	border: 3px solid #FFF;	
}
.border_grey img {
	border: 1px solid #CCC;
	/*max-width: 800px;*/	
}
.blue {
	color: #3CF;
	padding: 0px 5px 0px 5px;	
}
.backgrey {
	background-color: #666;	
}
.backlightgrey {
	background-color: #b9b9b9;	
}
.backwhite {
	background-color: #FFF;
}


/* --------------------------- home --------------------------- */


#home1_section {
	background-color: #F36;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #FFF;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
#home1 {
	/*font-size: 3.6em;*/
	width: 90%; 
	max-width: 1410px;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;	
}
#home2_section {
	background-color: #333;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #FFF;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
#home2 {
	/*font-size: 3.6em;*/
	width: 90%; 
	max-width: 1410px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;	
}
#home_slider {
	width: 100%;
	float: none;
	max-width: 1410px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}
#home3_section {
	background-color: #0CF;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #FFF;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
#home3 {
	/*font-size: 3.6em;*/
	width: 90%; 
	max-width: 1410px;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;	
}
#home4_section {
	background-color: #999;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #FFF;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
#home4 {
	/*font-size: 3.6em;*/
	width: 90%; 
	max-width: 1410px;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;	
}
#home5_section {
	background-color: #CCC;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #333;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}
#home5 {
	/*font-size: 1.4em;*/
	width: 90%; 
	max-width: 1410px;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;	
}
#homeblack_section {
	background-color: #000;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #F36;	
	width: 100%;
	padding: 5px 0px 5px 0px;
}
#homeblack {
	/*font-size: 1.4em;*/
	width: 90%; 
	max-width: 1410px;
	margin: 10px auto 10px auto;
	padding: 0px 0px 0px 0px;	
}
.homelinks {
	color: #FFF;
	text-decoration: underline;	
}
.homelinks:hover {
	color: #000;	
}


/* --------------------------- main thumbs --------------------------- */

.medium {
	width: 458px;
	margin: 5px;
	float: left;	
	position: relative;	
	line-height: 16px;
	background-color: #FFF;
	border: 1px solid #F5F5F5;
}
.medium:hover {
	background-color: #FFF;
	border: 1px solid #E6E6E6;
}
.small {
	width: 225px;
	margin: 5px;
	float: left;	
	position: relative;	
	line-height: 16px;
	background-color: #FFF;
}	
.small:hover {
	background-color: #FFF;
}

.projectimage {
	/*background-color: #FFF;*/
	padding: 12px;
	margin-bottom: 0px;	
}
.projecttext {
	/*background-color: #FFF;*/
	padding: 0px 12px 12px 12px;	
	font-size: 1.4em;
	margin-top: -5px;
	text-transform: capitalize;
}
.projectimage img {
	width: 100%;
	height: auto;	
}
.kind {
	color: #0CF;	
}
.design {
	color: #000;	
}

.name {
	font-family: 'din_medium', Helvetica, sans-serif;	
}

.back {
	font-family: 'din_light', Helvetica, sans-serif;
	font-size: 3.6em !important;	
	padding: 10px 0px 0px 0px;
}
.back a {
	color: #999;	
}
.back a:hover {
	color: #F06;	
}
#container_text a { font-family: 'din_regular', Helvetica, sans-serif; color: #F06; }
#container_text a:hover { color: #000; }

/* --------------------------- footer --------------------------- */

footer {
	/*font-size: 1.4em;*/
	background-color: #FFF;
	width: 100%;
	padding: 10px 0px 30px 0px;
	background-color: #FFF;
		
}
.footer_box {
	width: 90%; 
	max-width: 1410px;
	margin: 0px auto 0px auto;
	padding: 20px 0px 20px 0px;
	
	/*background-color: #CCC;*/	
}
.footer_column {
	width: 215px;
	padding: 10px;
	float: left;
	color: #999;
	/*border-top: 1px solid #CCC;*/
	/*background-color: #CCC;*/	
}
.footer_column a {
	color: #999;	
}
.footer_column a:hover {
	color: #F06;	
}
.footer_column a img  {
	zoom: 1;
	filter: alpha(opacity=25);
	opacity: 0.25;
	margin: 6px 5px 0px 0px;
}
.footer_column a img:hover {
	zoom: 1;
	filter: alpha(opacity=100);
	opacity: 1;
}
.space {
	height: 30px;	
}
.footernav li {
	text-transform: capitalize;	
	font-size: 1.4em;	
}
.footernav li a {
	text-transform: uppercase;		
}
.footernav li a:hover {
	color: #F06;		
}
.slashes {
	display: none;	
}




/* ------------------------------- MOBILENAV ------------------------------- */

.slide-trigger {
  display: none; /* need this */
  /*border: 1px solid #CCCCCC;*/
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px 10px 10px 10px;
  text-align: right;
  background-color: #FFF;
  color: #666;
}

.slide-trigger span {
  background-image: url("../images/grip.png");
  background-position: 0 0px;
  display: block;
  float: right;
  margin: 0px 0px 0px -7px;
  height: 22px;
  width: 48px;
}




/* ------------------------------- MEDIA QUERIES ------------------------------- */


/* TABLET */
@media screen and (max-width: 1100px) {
	
/* header */
header {
	background-color: #FFF;
	font-family: 'din_bold', Helvetica, sans-serif;	
	width: 100%;
	padding: 10px 0px 10px 0px;
}
header h1 {
	float: none;	
}


/* nav 
.slide-trigger { display: block; float: left; }
.no-js .slide-trigger { display: none; }
.navigation { display: none; }
.no-js .navigation { display: block; }
.navigation { }ss
.navigation li { float: none; }
.navigation li a { border-bottom: none; }

nav {
	font-size: 3.6em;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase; 	
}
nav ul {
	float: none;

	margin: 23px auto 0px 0px;
	clear: both;
		
}
nav li {
	float: none;
}
*/

/* main */
#container {
	width: 92%;
}
.medium {
	width: 100%;
	margin: 5px 0px 40px 0px;
}
.small {
	margin: 5px 5px 5px 5px;
}
#container_images {
	width: 100%;
	float: none;
	max-width: 1410px;
	margin: 10px 2% 50px 0px;
	padding: 10px 0px 0px 0px;	
}
#container_text {
	width: 100%;
	float: none;
	max-width: 1410px;
	margin: -50px 0px 0px 0px;
	padding: 10px 0px 20px 0px;	
}
.projectimage_big {
	/*background-color: #FFF;*/
	padding: 0px;
	margin-bottom: 0px;	
}
.projectimage_norm img {
	float: none;
	margin: 0 0 5% 0;	
	width: 100%;
	height: auto;
}

/* footer */
.footer_column {
	width: 100%;
	padding: 10px 0px 10px 0px;
	margin: 0px 0px 0px 0px;
	float: none;
	color: #999;
	border-top: 1px solid #CCC;
	/*background-color: #CCC;*/	
}
footer {
	padding: 35px 0px 30px 0px;	
}
.footernav li {
	display: inline-block;
	text-transform: capitalize;	
}
.slashes {
	display: inline;	
}

}





/* MOBILE */
@media screen and (max-width: 568px) {
	
	
#nav-toggle {
  float: left;
}
	
h1 { font-size: 2.4em; } 
h2 { font-size: 2.4em; }
p { font-size: 1.2em; }
#nav { font-size: 2.4em; }	
h4 { font-size: 1.6em; }

#homeblack p { font-size: 12px; }
	
.medium {
	width: 100%;
	margin: 5px 0px 5px 0px;
}
.small {
	width: 100%;
	margin: 5px 0px 5px 0px;
}
#container {
	width: 90%;
}
#identity_section {
	background-color: #F06;
	font-family: 'din_light', Helvetica, sans-serif;
	color: #FFF;	
	width: 100%;
	padding: 15px 0px 20px 0px;
}

#identity h2 {
	font-size: 1.6em;	
}
#identity h2 a { color: #0CF; }
#identity h2 a:hover { color: #000; }
.client { color: #FFF; }

.filters {	
	font-size: 1.6em;
}

#home1, #home3, #home4, #home5 {
	margin: 5px auto 5px auto;	
}
#home2_section {
	padding: 0px 0px 0px 0px;
}
.footer_box {
	padding: 0px 0px 0px 0px;
	
	/*background-color: #CCC;*/	
}
	
}








/**** Isotope ****/

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}


/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}


/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }









#home_slider {
  width: 100%;
  color: #000;
  /*background-color: red;*/
}
.coloredBlock {
  padding: 12px;
  background: rgba(255,0,0,0.6);
  color: #FFF;
   width: 200px;
   left: 20%;
   top: 30%;
}
.infoBlock {
  position: absolute;
  top: 30px;
  right: 30px;
  left: auto;
  max-width: 40%;
  padding-bottom: 0;
  /*background: #FFF;*/
  /*background: rgba(255, 255, 255, 0.8);*/
  overflow: hidden;
  padding: 15px;
}
.infoBlockLeftBlack {
  color: #F06;
  /*background: #000;*/
  background: rgba(255,255,255,.90);
  left: 30px;
  right: auto;
  margin-top: 25%;
}
.infoBlockRightBlack {
  color: #F06;
  /*background: #000;*/
  background: rgba(255,255,255,.90);
  right: 30px;
  margin-top: 150px;
}
.infoBlock h4 {
  font-family: 'din_regular', Helvetica, sans-serif;
  margin: 0;
  padding-bottom: 3px;
  letter-spacing: 0px;
}
.infoBlock p {
font-family: 'din_regular', Helvetica, sans-serif;		
  /*font-size: 14px;*/
  margin: 4px 0 0;
  padding-bottom: 10px;
}
.infoBlock a {
  color: #FFF;
  text-decoration: underline;
}
.fullWidth {
  max-width: 1400px;
  margin: 0 auto 24px;
}

@media screen and (min-width:960px) and (min-height:660px) {
  .heroSlider .rsOverflow,
  .royalSlider.heroSlider {
      height: 520px !important;
  }
}

@media screen and (min-width:960px) and (min-height:1000px) {
    .heroSlider .rsOverflow,
    .royalSlider.heroSlider {
        height: 660px !important;
    }
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  .royalSlider.heroSlider,
  .royalSlider.heroSlider .rsOverflow {
    height: 300px !important;
  }
  .infoBlock {
    padding: 10px;
    height: auto;
    max-height: 100%;
    min-width: 40%;
    left: 5px;
    top: 5px;
    right: auto;
    /*font-size: 12px;*/
  }
  .infoBlock h3 {
     /*font-size: 14px;
     line-height: 17px;*/
  }
}