/* Responsive */

/* Mobile Styles */

@media only screen and (max-width: 350px) {
  em.col.three {display: none;}
  h1.col.thirteen {float: left; padding-top: 10px; padding-left: 255px; font-size: 170%; }
  hr { display: none;}
  p.date.col.one {display: none;}
  p#gallery-count.col.one {display: none;}
  .parent {float: left; padding-left: 25px; margin-top: -50px; }
  div#navigation { padding: 5px 0px 5px 10px; clear: both; }
  div#menu {
	  padding-left: 0px; 
	  margin: 80px 0px 0px -15px; 
	  padding-bottom: 70px;
	  -webkit-transform: scale(1.1);
	  -moz-transform: scale(1.1);
	  -ms-transform: scale(1.1); 
	  transform: scale(1.1); 
	  width: 380px; 
	  }
  div#navigation ul {padding: 0px;}
  div#content1 { padding-left: 20px; width: 400px; padding-bottom: 50px;}
  div#content { padding-left: 20px; width: 400px; padding-bottom: 50px;}
  p#footer1 { color: white; zoom: 0.3; width: 150px; }
  p#footer { color: white; zoom: 0.1; width: 2000px; }
  div#container {
	  width: 400px; 
	  display: inline-block; 
	  -webkit-transform: matrix(1, 0, 0, 1, -55, 0);
	  -moz-transform: matrix(1, 0, 0, 1, -55, 0);
	  -ms-transform: matrix(1, 0, 0, 1, -55, 0);
	  transform: matrix(1, 0, 0, 1, -55, 0);
	  }
  body { zoom: 0.7; }
  p.date.col.fourtheen {display: none; }
  p {font-size: 140%; } 
  h2.col.six {display: none;}
  p#gallery-count.col.one {font-size: 130%; width:360px; padding-top: 10px;}
  #gallery-navigation.col.three { display: none; }
  div.description.col.six { 
	  -webkit-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63); 
	  -moz-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  -ms-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  font-size: 120%;
	  }
  div.col.four { display: none;}
  p#project-count.col.one {display: none;}
  div#content1 { height: 340px; }
  div#content { height: 340px; }
  div#image-wrapper {margin: -80px 0px 0px -130px;}
  div#media1 {
	    -webkit-transform:scale(0.7) matrix(1, 0, 0, 1, 26, -63); 
    	-moz-transform:scale(0.7) matrix(1, 0, 0, 1, 26, -63); 
    	-ms-transform:scale(0.7) matrix(1, 0, 0, 1, 26, -63); 
		transform:scale(0.7) matrix(1, 0, 0, 1, 26, -63); 
		width: 300px;
		}
	div#media {
	    -webkit-transform:scale(0.7) matrix(1, 0, 0, 1, 15, -83); 
    	-moz-transform:scale(0.7) matrix(1, 0, 0, 1, 15, -83); 
		-ms-transform:scale(0.7) matrix(1, 0, 0, 1, 15, -83); 
		transform:scale(0.7) matrix(1, 0, 0, 1, 15, -83); 
		margin: -37px 0px 0px -50px;
		width: 300px;
		}
		.clear {clear: both;}
}
@media only screen and (max-width: 401px) and (min-width: 351px) {
  em.col.three {display: none;}
  h1.col.thirteen {float: left; padding-top: 10px; padding-left: 255px; font-size: 170%;}
  hr { display: none;}
  p.date.col.one {display: none;}
  p#gallery-count.col.one {display: none;}
  .parent {float: left; padding-left: 22px; margin-top: -50px; }
  div#navigation { padding: 5px 5px 5px 10px; clear: both; }
  div#menu {
	  padding-left: 0px; 
	  margin: 80px 0px 0px 10px; 
	  padding-bottom: 70px; 
	  -webkit-transform: scale(1.3);
	  -moz-transform: scale(1.3);
	  -ms-transform: scale(1.3); 
	  transform: scale(1.3);  
	  width: 332px; 
	  }
  div#navigation ul {padding: 0px;}
  div#content1 { padding-left: 20px; width: 400px; padding-bottom: 50px;}
  div#content { padding-left: 20px; width: 400px; padding-bottom: 50px;}
  p#footer1 { color: white; zoom: 0.3; width: 150px; }
  p#footer { color: white; zoom: 0.1; width: 2000px; }
  div#container {
	  width: 400px; 
	  display: inline-block; 
	  -webkit-transform: matrix(1, 0, 0, 1, -55, 0);
	  -moz-transform: matrix(1, 0, 0, 1, -55, 0);
	  -ms-transform: matrix(1, 0, 0, 1, -55, 0);
	  transform: matrix(1, 0, 0, 1, -55, 0);
	  }
  body { zoom: 0.8; }
  p.date.col.fourtheen {display: none; }
  p {font-size: 140%; } 
  h2.col.six {display: none;}
  p#gallery-count.col.one {font-size: 130%; width:360px; padding-top: 10px;}
  #gallery-navigation.col.three { display: none; }
  div.description.col.six { 
	  -webkit-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63); 
	  -moz-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  -ms-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  font-size: 120%;
	  }
  div.col.four { display: none;}
  p#project-count.col.one {display: none;}
  div#content1 { height: 340px; }
  div#content { height: 340px; }
  div#image-wrapper {margin: -80px 0px 0px -130px; }
  div#media1 {
	    -webkit-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
    	-moz-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		-ms-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		transform:scale(0.7) matrix(1, 0, 0, 1, 26, -63); 
		width: 300px;
		}
	div#media {
	    -webkit-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
    	-moz-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		-ms-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		transform:scale(0.7) matrix(1, 0, 0, 1, 15, -83); 
		margin: -37px 0px 0px -50px;
		width: 300px;
		}
	.clear {clear: both;}
}

    @media only screen and (min-width: 400px) and (max-width: 645px) {
  em.col.three {display: none;}
  h1.col.thirteen {float: left; padding-top: 10px; padding-left: 255px; font-size: 170%;}
  hr { display: none;}
  p.date.col.one {display: none;}
  p#gallery-count.col.one {display: none;}
  .parent {float: left; padding-left: 27px; margin-top: -50px; }
  div#navigation {width: 350px; padding: 5px; clear: both; }
  div#menu {
	  padding-left: 0px; 
	  margin: 80px 0px 0px 10px; 
	  padding-bottom: 70px; 
	  -webkit-transform: scale(1.3);
	  -moz-transform: scale(1.3);
	  -ms-transform: scale(1.3); 
	  transform: scale(1.3);  
	  width: 332px; 
	  }
  div#navigation ul {padding: 0px;}
  div#content1 { padding-left: 20px; width: 400px; padding-bottom: 50px;}
  div#content { padding-left: 20px; width: 400px; padding-bottom: 50px;}
  p#footer1 { color: white; zoom: 0.3; width: 150px; }
  p#footer { color: white; zoom: 0.1; width: 2000px; }
  div#container {
	  width: 400px; 
	  display: inline-block; 
	  -webkit-transform: matrix(1, 0, 0, 1, -55, 0);
	  -moz-transform: matrix(1, 0, 0, 1, -55, 0);
	  -ms-transform: matrix(1, 0, 0, 1, -55, 0);
	  transform: matrix(1, 0, 0, 1, -55, 0);
	  }
  body { zoom: 0.9; }
  p.date.col.fourtheen {display: none; }
  p {font-size: 140%; } 
  h2.col.six {display: none;}
  p#gallery-count.col.one {font-size: 130%; width:360px; padding-top: 10px;}
  #gallery-navigation.col.three { display: none; }
    div.description.col.six { 
	  -webkit-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63); 
	  -moz-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  -ms-transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  transform:scale(0.75) matrix(1, 0, 0, 1, -59, -63);
	  font-size: 120%;
	  }
  div.col.four { display: none;}
  p#project-count.col.one {display: none;}
  div#content1 { height: 340px; }
  div#content { height: 340px; }
  div#image-wrapper {margin: -80px 0px 0px -130px; }
  div#media1 {
	    -webkit-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
    	-moz-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		-ms-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		transform:scale(0.7) matrix(1, 0, 0, 1, 26, -63); 
		width: 300px;
		}
	div#media {
	    -webkit-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
    	-moz-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		-ms-transform:scale(0.7) matrix(1, 0, 0, 1, -23, -63);
		transform:scale(0.7) matrix(1, 0, 0, 1, 15, -83); 
		margin: -37px 0px 0px -50px;
		width: 300px;
		}
	.clear {clear: both;}
  }
 
  @media only screen and (min-width: 791px) and (max-width: 960px) {
  em.col.three {display: none;}
  h1.col.thirteen {float: right; padding-right: 10px;}
  .parent {float: left; padding-left: 45px; margin-top: -50px; }
  div#navigation {width: 540px; padding-top: 5px;}
  div#menu {padding-left: 126px; margin-top: -50px; padding-bottom: 100px;}
  div#navigation ul {padding: 0px;}
  div#content1 { padding-left: 20px;}
  div#content { padding-left: 20px;}
  p#footer1 { float: right; padding-right: 5px; font-size: 100%;}
  p#footer { float: right; padding-right: 5px; font-size: 100%; }
  div#container {width: 680px; display: inline-block; }
  body {zoom: 1.1; }
  p {font-size: 110%;}
  }
 
  @media only screen and (min-width: 720px) and (max-width: 790px) {
  em.col.three {display: none;}
  h1.col.thirteen {float: right; padding-right: 10px; font-size: 170%; }
  .parent {float: left; padding-left: 35px; margin-top: -50px; }
  div#navigation {width: 540px; padding-top: 5px;}
  div#menu {
	  padding-left: 150px; 
	  margin-top: -50px; 
	  padding-bottom: 100px; 
	  -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
	  -ms-transform: scale(1.2); 
	  transform: scale(1.2);   
	  }
  div#navigation ul {padding: 0px;}
  div#content1 { padding-left: 20px;}
  div#content { padding-left: 20px;}
  p#footer1 { float: right; padding-right: 5px; font-size: 110%; width: 30%; color: white; }
  p#footer { float: right; padding-right: 10px; font-size: 110%; width: 35%; color: white; }
  div#container {width: 680px; display: inline-block; }
  p.date.col.one {font-size: 130%; }
  h2.col.six {font-size: 140%; }
  p#gallery-count.col.one {font-size: 130%;}
  div#gallery-navigation.col.three {font-size: 90%;}
  div.col.four {font-size: 90%;}
  p {font-size: 140%;} 
  }
  
  @media only screen and (min-width: 646px) and (max-width: 719px) {
  em.col.three {display: none;}
  h1.col.thirteen {float: right; padding-right: 10px; font-size: 170%;}
  .parent {float: left; padding-left: 30px; margin-top: -50px; }
  div#navigation {width: 540px; padding-top: 5px; }
  div#menu {
	  padding-left: 160px; 
	  margin-top: -50px; 
	  padding-bottom: 100px; 
	   -webkit-transform: scale(1.3);
	  -moz-transform: scale(1.3);
	  -ms-transform: scale(1.3); 
	  transform: scale(1.3);  
	  }
  div#navigation ul {padding: 0px;}
  div#content1 { padding-left: 20px;}
  div#content { padding-left: 20px;}
  #footer1 { float: left; padding-right: 5px; font-size: 130%; width: 42%; color: white; }
  #footer { float: left; padding-right: 5px; font-size: 130%; width: 40%; color: white; }
  div#container {width: 680px; display: inline-block; }
  body { zoom: 0.9; }
  p.date.col.one {font-size: 130%; }
  p {font-size: 140%; } 
  h2.col.six {font-size: 140%; }
  p#gallery-count.col.one {font-size: 130%;}
  #gallery-navigation.col.three { display: none; }
  div.col.four { display: none;}
  p#project-count.col.one {display: none;}
  div#content1 { height: 533px; }
  div#media1 {
	    -webkit-transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63);
    	-moz-transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63);
		-ms-transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63);
		transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63); 
		}
  }
  
/* Desktop Styles */
@media only screen and (max-height: 810px) and (min-width: 961px) {
  #gallery-navigation.col.three { display: none; }
  div.col.four { display: none;}
  p#project-count.col.one {display: none;}
  div#content1 { height: 533px;}
  div#media1 {
	    -webkit-transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63);
    	-moz-transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63);
		-ms-transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63);
		transform:scale(0.9) matrix(1, 0, 0, 1, -23, -63); 
		}
 } 
 @media only screen and (min-height: 900px) and (min-width: 1100px) {
   body { zoom: 1.4;}
 } 

 
/* Colours */

em { color: #999;}

/* Typography */

body { font-family: Verdana, sans-serif; font-size: 60%; }
ul li, p, em { font-style: normal; }
h1, h2 { font-size: 10px; font-weight: normal; }
a:link { text-decoration: none; color: #666; }
a:active { text-decoration: none; outline: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: none; background-color: #000; color: #fff; }
a.one:hover {background-color: #fff; color: #fff;}

/* Layout */

body { padding: 0px; text-align: center; width: auto; height: auto; }
div#container { margin: 0px auto; padding: 20px 0px 20px 0px; text-align: left; /*background: url('/images/grid-bg.gif') 20px 0px;*/ }


.col { float: left; margin: 0px 0px 0px 20px; padding: 0px; }
.col .col { margin: 0px; }
.clear {display: inline-block; }


.one { width: 50px; padding-right: 10px;}
.two { width: 140px; }
.three { width: 220px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 535px; }
.seven { width: 540px; }
.eight { width: 620px; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }
.thirteen { width: 200px; padding-left: 300px; }
.fourtheen {width: 30px;}
.fifteen {width: 190px; margin-left: 320px; clear: both;}

p, h2 { margin: 0px 0px 5px; }

hr { clear: both; margin: 0px 0px 40px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
.col hr { margin: 0px 0px 10px; }
.col h2 {font-size: 11px; text-decoration: none; color: #000; width: auto;}

em.three { margin: 0px 0px 0px 0px; }
em.col.three { padding-left: 100px;}

div#logo {margin: -30px 0px 0px -30px; padding: 13px 0px 13px 0px; width: 150px; margin-top: -44px; }
div#navigation { margin: -10px 0px 0px 80px; }
div#navigation ul { list-style: none; padding: 0px 20px 0px 0px; margin: 0px; }
div#navigation ul li { margin: 0px 0px 8px; line-height: 0.7em; }
div#navigation ul li.selected { color: #000; text-indent: -1.17em; }
div#navigation ul li.selected a { border: 0px; color: #000; cursor: default; text-decoration: none;}
div#navigation ul li.selected a:hover { background-color: #fff;}
div#navigation ul li em { display: block; margin: 25px 0px 0px; }
div#arrow {display: inline; }

div#content { margin: -5px 0px 0px 20px; }
div#content1 { margin: -5px 0px 0px 20px; }

div#media { clear: both; padding: 20px 0px 0px 60px; }
div.media { margin: 0px 0px 10px; }
div.home div#media { padding: 0px 0px 0px 20px; }
div.description div#media { padding: 0px 0px 0px 0px; }
div#media1 { clear: both; padding: 20px 0px 0px 60px; }
div.media1 { margin: 0px 0px 10px; }
div.home div#media1 { padding: 0px 0px 0px 20px; }
div.description div#media1 { padding: 0px 0px 0px 0px; }
p#gallery-count, div#gallery-navigation { display: none; }

div#image-wrapper { overflow: hidden; width: 580px; }
div#image-wrapper div#image-holder { width: 100000000px; }
div#image-wrapper div#image-holder div.image { float: left; width: 780px; overflow: hidden; }

#footer { display: inline; padding-top: 10px; padding-bottom: 20px; }
p#footer em { display: block; }
#footer1 { display: inline; padding-top: 50px; padding-bottom: 20px;}
p#footer1 em { display: block; }

/* Javascript-enabled styles */
body.js-enabled p#gallery-count, body.js-enabled div#gallery-navigation { display: block; }
body.js-enabled p#project-count { display: none; }
body.js-enabled div#media div.image { display: none; padding-top: 10px; }
body.js-enabled div#media div.image:first-child { display: block; }