@import url(reset.css);
@import url(slideshow.css);

/* -----------------------------------------
   Global
----------------------------------------- */
* {
	margin:0;
	padding:0;
}

body {
	font-family:"Helvetica Neue";
	background: #000;
	height: 100%;
	-webkit-backface-visibility: hidden;
}

img {
	border:none;
	display: block;
}

.no-image {
	background: #333;
}

.container {
	width: 100%;
}

html {
	overflow-y: scroll;
}

/* -----------------------------------------
   Navigation
----------------------------------------- */

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}



/* -----------------------------------------
   Typography
----------------------------------------- */
p {
	margin-bottom: 09px;
	font-size: 16px;
	line-height: 19px;
}

p strong {
	text-decoration: underline;
}

p a {
	text-decoration: underline;
}

a {
	color: rgb(170, 168, 168);;
	transition: color .45s ease-in-out;
	-moz-transition: color .45s ease-in-out;
	-webkit-transition: color .45s ease-in-out;
}

a:active {
    outline: none;
}

:focus {
    -moz-outline-style: none;
}

a:hover {
	color: #FFF;
}

.subtitle {
	font-size: 10px;
	line-height: 11px;
}


/* -----------------------------------------
   Logo
----------------------------------------- */
#logo {
	font-size: 15px;
	margin-bottom: 1px;
	display: inline-block;
}




/* -----------------------------------------
   Search / Social
----------------------------------------- */
div#search {
	position: absolute;
	top: 18px;
	right: 152px;
}

ul.social {
	float: left;
}

ul.social li {
	display: inline-block;
	margin-right: 02px;
}

ul.social li:last-child {
	margin-right: 0px;
}

ul.social li a {
	height: 23px;
	width: 23px;
	display: block;
	opacity: 1;
	transition: -webkit-filter .65s ease-in-out;
	-moz-transition: -webkit-filter .65s ease-in-out;
	-webkit-transition: -webkit-filter .65s ease-in-out;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

ul.social li a:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(0%);
}

ul.social li a.facebook {
	background: url(image/social-facebook.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 23px 23px;
}

ul.social li a.twitter {
	background: url(image/social-twitter.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 23px 23px;
}

ul.social li span {
	display: none;
}

#search form {
	float: left;
}

#search form input[type='text'] {
	disaply: block;
	height: 22px;
	float: left;
	font-size: 13px;
	color: rgb(170, 168, 168);
	font-family:"Helvetica Neue";
	background: none;
	border: none;
	border-bottom: 1px solid #666;
}

#search .submit {
	float: left;
}

#search .submit button {
	display: block;
}

#search .submit .fake-button {
	cursor: pointer;
	height: 23px;
	width: 23px;
	background: url(image/search_off.png) no-repeat top left;
	border: none;
	margin-left: 6px;
	margin-right: 6px;
	display: none;
	transition: background .45s ease-in-out;
	-moz-transition: background .45s ease-in-out;
	-webkit-transition: background .45s ease-in-out;
}

#search button {
	cursor: pointer;
	height: 23px;
	width: 23px;
	background: url(image/search_off.png) no-repeat top left;
	border: none;
	margin-left: 6px;
	margin-right: 6px;
	display: block;
	transition: background .45s ease-in-out;
	-moz-transition: background .45s ease-in-out;
	-webkit-transition: background .45s ease-in-out;
}

#search .submit button:hover, #search  .submit .fake-button:hover {
	background: url(image/search_on.png) no-repeat top left;
}

#search form input[type='text']:focus, #search form input[type='button']:focus {
	outline: none;
}

body#search #search form input {
	display: block !important;
}

body#search #search .submit .fake-button {
	display: none !important;
}

body#search #search .submit button {
	display: block !important;
}

body#search .panel.about p {
	padding-left: 355px;
}


/* -----------------------------------------
   Masthead
----------------------------------------- */
.masthead {
	/*width: 100%;*/
	position: fixed;
	/*position: absolute;*/
	left: 0px;
	padding-top: 16px;
	padding-left: 29px;
}


/* -----------------------------------------
   Draggable
----------------------------------------- */
#home .draggable {
	display: none;
   position: absolute;
   color: #FFF;
   padding: 10px;
   padding-left: 16px;
   padding-right: 05px;
   width: 326px;
   height: 243px;
   background: rgba(0, 0, 0, 0.7);
   cursor: move;
}

#home .draggable .social {
	position: absolute;
	top: 143px;
}


/* -----------------------------------------
   Group 1
----------------------------------------- */
#home .group-1.draggable-0 {
	left: 1.4%;
	bottom: 37.5%;
}

#home .group-1.draggable-1 {
	right: 1.8%;
	bottom: 45.9%;
}

#home .group-1.draggable-2 {
	left: 23.8%;
	bottom: 9.8%;
}

#home .group-1.draggable-3 {
	left: 25.8%;
	bottom: 10%;
}

#home .group-1.draggable-4 {
	left: 45%;
	bottom: 25%;
}


/* -----------------------------------------
   Group 2
----------------------------------------- */
#home .group-2.draggable-0 {
  left: 1.4%;
	bottom: 19.7%;
}

#home .group-2.draggable-1 {
	bottom: 36.7%;
	right: 26%;
}

#home .group-2.draggable-2 {
	bottom: 8%;
  right: 1.8%;
}


#home .group-2.draggable-3 {
	left: 25.8%;
	bottom: 10%;
}

#home .group-2.draggable-4 {
	left: 45%;
	bottom: 25%;
}

/* -----------------------------------------
   Group 3
----------------------------------------- */
#home .group-3.draggable-0 {
  bottom: 34%;
  right: 2%;
}

#home .group-3.draggable-1 {
	top: 46.5%;
	left: 1.5%;
}

#home .group-3.draggable-2 {
	bottom: 07%;
  right: 25%;
}

#home .group-3.draggable-3 {
	left: 25.8%;
	bottom: 10%;
}

#home .group-3.draggable-4 {
	left: 45%;
	bottom: 25%;
}


#home .draggable-1 {
	background: rgba(153, 153, 153, 0.8);
}

#home .draggable-3 {
	background: rgba(153, 153, 153, 0.8);
	
}	#home .draggable-2 {
	background: rgba(213, 234, 7, 0.8);
}
#home .draggable-1 h2 a {
	transition: color .90s ease-in-out;
	-moz-transition: color .90s ease-in-out;
	-webkit-transition: color .90s ease-in-out;
}

#home .draggable-2 h2 a {
	transition: color .90s ease-in-out;
	-moz-transition: color .90s ease-in-out;
	-webkit-transition: color .90s ease-in-out;
}

#home .draggable-3 h2 a {
	transition: color .90s ease-in-out;
	-moz-transition: color .90s ease-in-out;
	-webkit-transition: color .90s ease-in-out;
}


#home .draggable h3 {
	font-size: 12px;
	line-height: 14px;
}

#home .draggable h2 {
	padding-right: 10px;
	margin-top: 02px;
	font-size: 15px;
	line-height: 16px;
	text-decoration: underline;
	color: rgb(170, 168, 168);;
}

#home .draggable-1 a {
	color: #000;
}

#home .draggable-2 a {
	color: #000;
	
	}

#home .draggable-3 a {
	color: #000;
}




#home .draggable-1 a:hover {
	color: #FFF;
}

#home .draggable-2 a:hover {
	color: #FFF;
}

#home .draggable-3 a:hover {
	color: #FFF;
}



#home .draggable-1 h2 a:hover {
	color: #FFF;
}

#home .draggable-3 h2 a:hover {
	color: #FFF;
}

#home .draggable-1 p {
	color: #000 !important;
}

#home .draggable-2 p {
	color: #000 !important;
}

#home .draggable-3 p {
	color: #000 !important;
}


#home .draggable p {
	padding-right: 35px;
	margin-top: 15px;
	font-size: 13px;
	line-height: 15px;
	color: rgb(170, 168, 168);;
}

#home .draggable a {
	text-decoration: none;
}

#home .draggable img {
	bottom: 10px;
	right: 10px;
	position: absolute;
	width: 165px;
}

#home .draggable .close {
	margin-top: -5px;
	margin-right: -1px;
}

.icon-featured {
	cursor: pointer;
	display: none;
	transition: opacity .45s ease-in-out;
	-moz-transition: opacity .45s ease-in-out;
	-webkit-transition: opacity .45s ease-in-out;
	background: url(../img/screen.png) top left no-repeat;
	height: 17px;
	width: 17px;
	position: absolute;
	left: 1.5%;
	bottom: 29px;
	opacity: 0.6;
}

.icon-featured:hover {
	opacity: 1;
}

.draggable .close {
	background: url(../image/closebutton.png) no-repeat top left;
	cursor: pointer;
	float: right;
	display: block;
	height: 12px;
	width: 12px;
	opacity: 0.6;
	transition: opacity .45s ease-in-out;
	-moz-transition: opacity .45s ease-in-out;
	-webkit-transition: opacity .45s ease-in-out;
}

#home .draggable .close:hover, #project .draggable .close:hover {
	opacity: 1;
}

#project .draggable {
   display: none;
   position: absolute;
   bottom: 29px;
   /*top: 0px;*/
   left: 188px;
   color: rgb(170, 168, 168);;
   padding: 10px;
   width: 693px;
   height: 600px;
   background: rgba(0, 0, 0, 0.7);
   cursor: move;
   z-index: 9000;
}

#project .draggable .close {
	position: absolute;
	right: 07px;
	z-index: 9000;
}

#project .draggable p {
	padding-top: 07px;
	padding-bottom: 0px;
	font-size: 14px;
	line-height: 16px;
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 0px;
}

#project .draggable .wrap {
	height: 600px;
	position: relative;
}

#project .draggable .inner {
	position: absolute;
	bottom: 0px;
	padding-bottom: 3px;
}

#project .draggable ul.social li {
	margin-right: 0px;
}

@media only screen and (max-width: 1090px) {
	/*#project #masthead {
		position: absolute;
	}*/
}

/* -----------------------------------------
   Panel
----------------------------------------- */
div.panel {
	color: rgb(170, 168, 168);;
	font-size: 15px;
	line-height: 17px;
	padding-top: 22px;
	padding-left: 167px;
	padding-right: 20px;
	padding-bottom: 60px;
	width: 696px;
	background: rgba(0, 0, 0, 0.7);
	float: right;
	margin-top: 201px;
	margin-right: 22px;
	/*margin-bottom: 22px;*/
	min-height: 500px;
}

div.panel.profile {
	margin-bottom: 0px !important;
}

.panel h1 {
	font-size: 13px;
	line-height: 16px;
}

div.panel.about {
	margin-bottom: 0px;
}

div.panel.about h3:first-child {
	margin-top: 0px;
	margin-bottom: 09px;
}

div.panel.about h3 {
	font-size: 16px;
	line-heght: 18px;
	margin-top: 25px;
	margin-bottom: 09px;
}

div.panel.about blockquote {
	text-decoration: underline;
}


/* -----------------------------------------
   People
----------------------------------------- */
div.panel.people {
	padding-top: 10px;
}

div.panel.people h2 {
	font-size: 13px;
	margin-top: 25px;
	padding-bottom: 04px;
	border-bottom: 1px solid #999;
}

div.panel.people .person .thumb, .projects .thumb {
	background: rgb(27, 24, 24);
	display: block;
}

div.panel.people .person:hover h3 {
	transition: color .30s ease-in-out;
	-moz-transition: color .30s ease-in-out;
	-webkit-transition: color .30s ease-in-out;
}

div.panel.people .person:hover h3 {
	color: #FFF;
	text-decoration: underline;
}

div.panel.people .person {
	width: 170px;
	height: 170px;
	float: left;
	margin-right: 10px;
}

div.panel.people .person img, div.panel.people .person .no-image {
	width: 100%;
	opacity: 0.4;
	margin-bottom: 03px;
	transition: opacity .30s ease-in-out;
	-moz-transition: opacity .30s ease-in-out;
	-webkit-transition: opacity .30s ease-in-out;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

div.panel.people .person .no-image {
	height: 110px;
}

.person .linkedin {
	margin-top: 4px;
}

div.panel.people .person h3 a, div.panel.people .person .subtitle, div.panel.people .person .email a {
	transition: color .45s ease-in-out;
	-moz-transition: color .45s ease-in-out;
	-webkit-transition: color .45s ease-in-out;
}

div.panel.people .person .subtitle {
	margin-top: -1px;
}

div.panel.people .person .subtitle, div.panel.people .person .email {
	font-size: 11px;
	line-height: 11px;
}

div.panel.people .person .email a:hover {
	text-decoration: underline;
}

div.panel.people .person:hover h3 a {
	color: #FFF;
	text-decoration: underline;
}

div.panel.people .person:hover .subtitle, div.panel.people .person:hover .email a {
	color: #FFF;
}

div.panel.people .person:hover img, div.panel.people .person:hover .no-image, div.panel.people .person:hover .linkedin a, div.panel.projects .col img:hover {
	opacity: 1;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(0%);
}

/*
div.person.col-12 .thumb, div.person.col-12 h3, div.person.col-12 .subtitle {
	display: none !important;
}
*/


/* -----------------------------------------
   Casestudy
----------------------------------------- */
.panel.case-study {
	margin-top: 97px;
	margin-bottom: 0px;
	padding-top: 135px;
	padding-left: 225px;
	width: 499px;
	padding-bottom: 60px;
	min-height: 1050px;
}

/* iPhone */
.iphone .panel.case-study br {
	display: none !important;
}

.iphone .panel.case-study {
	min-height: 1350px !important;
}

.panel.case-study.david-adjaye {
	min-height: 1085px;
}

.david-adjaye .info {
	bottom: 1.8% !important;
}

.panel.case-study.lucy-tilley .info {
	bottom: 2% !important;
}

.panel.case-study.lucy-tilley .col-1 {
	/*height: 985px !important;*/
}

.panel.alice-asafu-adjaye .info {
	bottom: 2% !important;
}

.panel.case-study.alice-asafu-adjaye .col-1 {
	/*height: 1030px !important;*/
}

.panel.mansour-el-khawad .info {
	bottom: 0.5% !important;
}

.panel.case-study.david-adjaye .col-1 {
	/*height: 1030px !important;*/
}

.panel.case-study .col-1, .panel.case-study .col-2 {
	float: left;
}

.panel.case-study .col-1 {
	width: 123px;
	position: relative;
	margin-right: 15px;
}

.panel.case-study .col-2 {
	width: 330px;
}

.panel.case-study.david-adjaye {
	background: rgba(0, 0, 0, 0.75);
}

/* Yohannes */
/*.panel.case-study.yohannes-bereket {
	min-height: 100%;
}*/

.panel.case-study.joe-franchina {
	min-height: 650px;
}

.panel.case-study.joe-franchina .info {
	bottom: 1% !important;
}

/*.panel.case-study.joe-franchina .col-1 {
	min-height: 625px;
}*/

.panel.case-study.yohannes-bereket {
	min-height: 1030px !important;
}

.panel.case-study.yohannes-bereket .col-1 {
	/*min-height: 980px !important;*/
}

.panel.yohannes-bereket .info {
	bottom: 2% !important;
}

/*.joe-franchina .col-2, .yohannes-bereket .col-2 {
	position: relative;
	min-height: 610px;
}*/

/*.joe-franchina .col-2 .inner, .yohannes-bereket .col-2 .inner {
	position: fixed;
	bottom: 4% !important;
	width: 330px;
}*/

/*.joe-franchina .col-2 .inner {
	position: fixed;
	bottom: 4% !important;
	width: 330px;
}

.joe-franchina .col-1 .info {
	bottom: 4.5% !important;
}*/

/*.joe-franchina .col-1 .info, .yohannes-bereket .col-1 .info {
	bottom: 4.5% !important;
}*/

@media only screen and (max-width: 1181px) and (max-height: 900px) {
	/*.joe-franchina.case-study, .yohannes-bereket.case-study {
		min-height: 510px !important;
	}

	.joe-franchina .col-2 , .yohannes-bereket .col-2 {
		position: static !important;
	}

	.joe-franchina .col-2 .inner, .yohannes-bereket .col-2 .inner {
		position: static !important;
		width: 330px;
	}*/

	/*.joe-franchina.case-study {
		min-height: 510px !important;
	}

	.joe-franchina .col-2 {
		position: static !important;
	}

	.joe-franchina .col-2 .inner {
		position: static !important;
		width: 330px;
	}*/
}

.panel.case-study .subtitle {
	font-size: 11px;
	margin-bottom: 07px;
}

.panel.case-study .col-1 .info {
	width: 120px;
	padding-right: 10px;
	position: absolute;
	bottom: 3.2%;
}

.panel.case-study .col-1 .info, .panel.case-study .col-1 .info h3 {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	line-height: 13px;
}

.panel.case-study .col-1 .info h3 {
	text-decoration: underline;
}

.panel.case-study ul {
	margin-bottom: 05px;
}

.panel.case-study ul li:before {
	content: "– ";
	margin-left: -09px;
}

.panel.case-study .linkedin {
	margin-bottom: 10px;
}

.panel.case-study p {
	font-size: 14px;
	line-height: 15px;
}

.featured-container {
	width: 1080px;
	float: right;
}


@media only screen and (max-width: 768px) {
	div#bodycopy {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
	}

	div.panel {
		float: left;
		padding: 25px;
		position: static;
		width: 100%;
		marign-left: 15px !important;
	}
}

@media only screen and (max-width: 1136px) {
	div.panel.projects {
		float: left;
		margin-left: 22px;
	}
}

@media only screen and (max-width: 784px) {
	div.panel.projects {
		margin-left: 12px;
	}
}

@media only screen and (max-width: 931px) {
	.panel.clients {
		float: left;
		margin-left: 22px;
	}
}

@media only screen and (max-width: 1134px) {
	.panel.people {
		float: left;
		margin-left: 22px;
	}
}


/* -----------------------------------------
   Clients / Collaborators
----------------------------------------- */
.panel.clients {
	padding-top: 25px;
	padding-left: 310px;
	padding-right: 20px;
	width: 563px;
	min-height: 750px;
	margin-bottom: 0px;
}

/*#collaborators .panel.clients {
	padding-left: 380px;
	width: 483px;
}*/

#clients .panel.clients {
	min-height: 1050px !important;
}

.panel.clients h3 {
	font-size: 13px;
	line-height: 10px;
	margin-bottom: 03px;
}

.panel.clients .col {
	float: left;
	width: 180px;
}

.panel.clients .col.listing-1, .panel.clients .col.listing-2 {
	width: 270px;
	margin-right: 10px;
}

.panel.clients .col.listing-2 {
	margin-top: 13px;
	margin-bottom: 20px;
}

.collaborators {
	/*margin-top: 20px;*/
}

/*#collaborators .col.listing-1 {
	width: 200px;
}*/

.panel.clients .col:nth-child(2) {
	/*margin-right: 40px !important;*/
}

.panel.clients ul li {
	font-size: 16px;
	line-height: 18px;
}

.panel.clients ul li span.location {
	font-family:'Helvetica Neue';
}

/*.panel.clients ul li ul {
	display: none;
}*/

.panel.clients ul li.hover:hover {
	color: #FFF;
	cursor: pointer;
}

.panel.clients ul li.hover:hover span.title {
	color: #FFF;
	text-decoration: underline;
}

.panel.clients ul li div:last-child {
}

.panel.clients ul li div {
	padding-left: 15px;
	margin-left: 15px;
	font-size: 13px;
}

.panel.clients ul li div.two-lines {
	height: 38px;
}

.panel.clients ul li div:before {
	content: "– ";
	margin-left: -09px;
	color: #666;
}

.panel.clients ul li div:hover:before {
	color: #FFF;
}


/* -----------------------------------------
   Projects
----------------------------------------- */
.panel.projects, .panel.people {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-left: 14px;
	padding-right: 0px;
	width: 1080px;
}

.panel.people {
	margin-top: 123px;
}

.panel.projects:first-child {
	margin-top: 123px;
}

.panel.projects:last-child {
	/*margin-bottom: 22px;*/
}

.panel.projects .line, .panel.people .line {
	height: 1px;
	border-top: 1px solid #999;
	margin-bottom: 08px;
	margin-right: 16px;
}

.panel.people .line {
	margin-right: 12px;
}

.panel.projects h1 {
	color: #FFF;
}

.panel.projects h3 {
	font-size: 13px;
	line-height: 13px;
}

div.panel.projects .person h3, div.panel.projects .col .subtitle {
	transition: color .45s ease-in-out;
	-moz-transition: color .45s ease-in-out;
	-webkit-transition: color .45s ease-in-out;
}

.panel.projects img, .panel.projects .no-image {
	width: 100%;
	opacity: 0.4;
	margin-bottom: 06px;
	transition: opacity .30s ease-in-out;
	-moz-transition: opacity .30s ease-in-out;
	-webkit-transition: opacity .30s ease-in-out;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.panel.projects .no-image {
	height: 115px;
}

.panel.projects .description {
	float: left;
	width: 257px;
	padding-right: 96px;
}

.panel.people .description {
	float: left;
	width: 262px;
	padding-right: 96px;
}

.panel.projects .description p, .panel.people .description p {
	font-size: 13px;
	line-height: 15px;
}

.panel.projects .grid {
	margin-top: 03px;
	float: left;
	width: 715px;
}

.panel.people .grid {
	margin-top: 03px;
	float: left;
	width: 720px;
}

.panel.projects .col {
	width: 170px;
	height: 175px;
	float: left;
	margin-right: 10px;
}

.panel.projects .col-0 h3 {
	margin-top: 7px;
}
/*
.panel.projects .col-0, .panel.projects .col-large, .panel.people .col-0, .panel.people .col-10, .panel.people .col-20, .panel.people .col-31, .panel.people .col-20, .panel.people .col-43, .panel.people .col-49 {
	width: 350px !important;
	height: 310px !important;
}
*/

.panel.projects .col-0, .panel.projects .col-large, .panel.people .hero {
	width: 350px !important;
	height: 310px !important;
}

/*
.panel.people .col-20, .panel.people .col-43 {
	margin-top: -118px;
}
*/

.panel.projects .col-0 .no-image {
	height: 211px;
}
/*
.panel.people .col-32 {
	margin-top: 170px;
}
*/

.panel.projects .col-1 {
	margin-right: 0px;
}

/*
.panel.people .col-12 {
	margin-right: 10px !important;
}
*/

.panel.projects .col:hover h3 a {
}

.panel.projects .col:hover h3 a {
	text-decoration: underline;
}

.panel.projects .col:hover h3 a, .panel.projects .col:hover .subtitle {
	color: #FFF;
}

.panel.projects .col:nth-child(4n+5) {
	margin-right: 0px;
}

.panel.projects .subtitle {
	transition: color .45s ease-in-out;
	-moz-transition: color .45s ease-in-out;
	-webkit-transition: color .45s ease-in-out;
	margin-top: 02px;
	font-size: 11px;
	line-height: 11px;
}

.project-info {
	padding-top: 3px;
	padding-bottom: 08px;
	font-family:"Helvetica Neue";
	color: #FFF;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	margin-top: 57px;
	cursor: pointer;
}

.project-info:hover {
	text-decoration: underline;
}

a.lightbox {
	background: url(../img/expand_button.png);
	transition: opacity .45s ease-in-out;
	-moz-transition: opacity .45s ease-in-out;
	-webkit-transition: opacity .45s ease-in-out;
	opacity: 0.5;
	display: block;
	height: 13px;
	width: 13px;
	position: absolute;
	margin-left: 686px;
	margin-top: 10px;
}

a.lightbox:hover {
	opacity: 1;
}

@media only screen and (max-width: 1090px) {
	a.lightbox {
		margin-left: 606px;
	}
}


/* -----------------------------------------
   Project
----------------------------------------- */
.panel.project {
	margin-top: 123px;
	width: 100%;
	float: left;
	padding: 0px;
}

.panel.project h1 {
	/*margin-top: 11px;*/
	margin-top: -3px;
	text-decoration: underline;
	font-size: 16px;
	line-height: 17px;
}

.panel.project .description {
	width: 137px;
	margin-top: 98px;
}

.panel.project .description, .panel.project .description h3 {
	font-size: 11px;
	line-height: 13px;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

.description h3 {
	text-decoration: underline;
}

.panel.project .description ul {
	margin-bottom: 08px;
}

.panel.project .description ul li:before {
	content: "– ";
	margin-left: -09px;
}

.panel.project .col-1 {
	margin-left: 27px;
	float: left;
}

.panel.project .col-1 .subtitle {
	font-size: 12px;
	line-height: 14px;
}

.panel.project .col-2 {
	margin-right: 15px;
	width: 706px;
	position: absolute;
	right: 0px;
	bottom: 15px;
}

.panel.project .facebook {
	margin-top: 10px;
}

.no-thumbs {
	margin-top: 130px;
}

@media only screen and (min-width: 1281px) and (min-height: 900px) {
	.panel.project .col-2 {
		position: absolute;
		right: 0px;
		bottom: 15px;
	}
}

@media only screen and (min-height: 1281px) {
	body#project {
	}
}

@media only screen and (max-width: 1280px) {
	/*#project #search {
	display: none;
	}*/

	.panel.project .col-1 {
		margin-top: 107px;
	}

	.panel.project {
		/*width: 1100px !important;*/
		margin-top: 16px;
		margin-right: 15px;
	}

	.no-thumbs {
		margin-top: 0px !important;
	}
}

@media only screen and (max-width: 1090px) {
	#main {
		height: 445px;
	}
	.panel.project {
		width: 100% !important;
	}

	.panel.project .col-2 {
		float: none;
		position: absolute;
		bottom: 10px;
		right: 0px;
		width: 626px;
	}
}


/* -----------------------------------------
   Social
----------------------------------------- */
.linkedin a {
	opacity: 1;
	display: block;
	height: 22px;
	width: 23px;
	background: url(../img/social-linkedin.png);
	background-repeat: none;
	background-position: top left;
	background-size: 23px 22px;
	transition: -webkit-filter .65s ease-in-out;
	-moz-transition: -webkit-filter .65s ease-in-out;
	-webkit-transition: -webkit-filter .65s ease-in-out;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.linkedin:hover a {
	opacity: 1;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(0%);
}


/* -----------------------------------------
   News
----------------------------------------- */
.news-nav {
	position: fixed;
	top: 120px;
	left: 0px;
	padding-left: 27px;
}

.news-nav ul li {
	font-size: 14px;
	color: rgb(170, 168, 168);
}

.panel.news {
	width: 706px;
	padding-top: 26px;
	padding-left: 168px;
	margin-top: 123px;
	min-height: 1000px;
}

.panel.news h1 {
	padding-bottom: 03px;
	margin-bottom: 11px;
	border-bottom: 1px solid #999;
}

.panel.news h1 {
	font-size: 13px;
	color: #FFF;
}

.panel.news h3 a {
	font-size: 16px;
	color: #FFF;
}

.panel.news h3 {
	width: 450px;
}

#article .panel.news h3 {
	/*padding-right: 200px;*/
	float: left;
	transition: text-decoration .30s ease-in-out;
	-moz-transition: opacity .30s ease-in-out;
	-webkit-transition: opacity .30s ease-in-out;
}

#article .panel.news .facebook {
	float: right;
}

.panel.news a.date {
	color: #FFF;
	display: inline-block;
	margin-top: 03px;
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 14px;
}

.panel.news h3:hover {
	text-decoration: underline;
}

.panel.news p {
	font-size: 16px;
	margin-bottom: 20px;
	padding-right: 45px;
}

.panel.news p.summary {
	margin-bottom: 15px;
}

.panel.news article {
	padding-bottom: 40px;
	margin-bottom: 08px;
	border-bottom: 1px solid #999;
}

.panel.news article.no-url {
	padding-bottom: 68px;
}

.panel.news article p img {
	float: left;
	margin-top: 08px;
	margin-bottom: 10px;
	margin-right: 10px;
}

.panel.news article img.thumbnail {
	width: 170px;
	float: left;
	margin-right: 10px;
}

.panel.news a.external-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
}

#article .panel.news a.external-link {
	display: block;
	float: left;
}

.panel a.plus {
	font-size: 15px;
	text-decoration: none;
}

.panel.article {
	/*min-height: 1465px;*/
}

.panel.article p {
	margin-bottom: 9px;
}

.panel.article p img {
	float: left;
}


/* -----------------------------------------
   Contact
----------------------------------------- */
.panel.contact {
	width: 358px;
	padding-top: 20px;
	padding-left: 510px;
	min-height: 600px;
}

.panel.contact .intro p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 17px;
}

.panel.contact a {
	text-decoration: none;
}

.panel.contact .col {
	float: left;
	width: 175px;
	margin-top: 10px;
	margin-right: 22px;
	font-size: 13px;
	line-height: 15px;
}

.panel.contact p.enquiries {
	margin-top: 10px;
	margin-bottom: 0px;
	font-size: 13px;
	line-height: 15px;
}

.panel.contact .email {
	marign-top: 1px;
}

.panel.contact .email, .panel.contact .subtitle {
	font-size: 13px;
	line-height: 14px;
}


.panel.contact .col h3 {
	font-size: 13px;
}

.panel.contact .col:nth-child(4n+4) {
	margin-right: 0px;
}

.panel.contact .row {
	margin-bottom: 50px;
}

.panel.contact h2 {
	color: #FFF;
	font-size: 13px;
	line-height: 16px;
	padding-bottom: 05px;
	border-bottom: 1px solid #999;
}

.panel.contact .linkedin a {
	margin-top: 08px;
}

.panel.contact p {
	font-size: 13px;
	line-height: 15px;
}

.panel.credits p a {
	color: #FFF;
	text-decoration: none;
}

.panel.credits p a:hover {
	text-decoration: underline;
}

.panel.contact .person .name:hover h3 a {
	text-decoration: underline;
	color: #FFF;
}

.panel.contact .person .name:hover .subtitle {
	color: #FFF;
}

.panel.contact .person .name:hover .subtitle {
	transition: color .30s ease-in-out;
	-moz-transition: color .30s ease-in-out;
	-webkit-transition: color .30s ease-in-out;
	color: #FFF;
	text-decoration: none;
}

.panel.contact .intro a {
	color: #FFF;
}

.panel.contact .intro a:hover {
	text-decoration: underline;
}


/* -----------------------------------------
   Pagination
----------------------------------------- */
.MarkupPagerNav li {
	display: inline-block;
}


/* -----------------------------------------
   Credits
----------------------------------------- */
.panel.credits {
	width: 348px;
	padding-top: 19px;
	padding-left: 525px;
}

.panel.credits h4 {
	padding-top: 10px;
	font-size: 11px;
	line-height: 12px;
}

.panel.credits p {
	font-size: 15px;
	line-height: 17px;
}

.panel.credits .copyright {
	position: fixed;
	bottom: 30px;
}

.panel.credits .copyright p {
	font-size: 11px;
	line-height: 12px;
}


/* -----------------------------------------
   Edit Page
----------------------------------------- */
#editpage {
	font-family: "Helvetica Neue", sans-serif;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px 6px;
	background: #333;
	color: #fff;
	display: none;
	font-size: 14px;
	font-weight: bold;
}

#editpage:hover {
	background: #666;
}


/* -----------------------------------------
   Clear
----------------------------------------- */
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clear {
	/*display: inline-block;*/
}