/*********************************************************************************************

x. Basic Setup 

********************************************************************************************/
@media only screen and (max-width:600px) {

	h1 {
		font: 300 30px/40px 'Raleway', Arial, Helvetica, sans-serif;
	}
	
	h2 {
		font: 300 25px/30px 'Raleway', Arial, Helvetica, sans-serif;
	}

	h1, h2, h3, h4 {
		padding: 0 0 15px 0;
	}

}

@media only screen and (max-width:400px) {
	
	html, body {
		font: 400 13px 'Open Sans', Arial, Helvetica, sans-serif;
	}
	
	h1 {
		font: 300 25px/30px 'Raleway', Arial, Helvetica, sans-serif;
	}
	
	h2 {
		font: 300 20px/25px 'Raleway', Arial, Helvetica, sans-serif;
	}
	
	h3 {
		font: 400 20px/25px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 0 0 20px 0;
	}

}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	
	#header {
		width: 100%;
		position: relative;
	}
	
	.popped #header, .slideshow #header {
		position: fixed;
	}
	
	#header .logo.black {
		background: none;
		background-image: url(../img/logo-2x.png);
		background-position: left top;
		background-size: 86px 50px;
		background-repeat: no-repeat;
	}
	
	#header .logo.white {
		background: none;
		background-image: url(../img/logo-2x.png);
		background-position: left bottom;
		background-size: 86px 50px;
		background-repeat: no-repeat;
	}
	
	.popped #header .button, .slideshow.popped #header .button {
		background: none;
		background-image: url(../img/close-2x.png);
		background-position: center center;
		background-size: 20px 20px;
		background-repeat: no-repeat;
	}
	
	.popped.lightbox #header {
		width: auto;
	}
	
}

@media only screen and (max-width:600px) {
	
	#header {
		height: 60px;
	}
	
	#header .button {
		width: 60px; height: 60px;
	}
	
	#header .logo {
		left: 15px;
	}
	
	.popped.lightbox #header {
		right: 60px;
	}
	
}

/********************************************************************************************* 

x. Pop-up

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	
	.pop-up .overlay {
		background: #181818;
	}

}

/********************************************************************************************* 

x. Pop-up: Menu

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	#menu .navigation {
		width: auto;
		margin-left: 0 !important;
		padding: 0 40px;
		left: 0;
	}
	
	#menu .navigation a {
		font: 400 40px/40px 'Raleway', Arial, Helvetica, sans-serif;
		text-align: center;
		width: auto;
		padding: 20px 0 10px 0;
		white-space: nowrap;
	}
	
	#menu .navigation li {
		height: auto;
	}
	
	#menu .navigation li .sub-menu {
		text-align: center;
		width: auto;
		border-left: none;
		margin: 0 !important;
		padding: 0;
		position: relative;
		top: 0;
		visibility: visible !important;
	}
	
	#menu .navigation li .sub-menu a {
		font: 500 14px/25px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 0 10px 0 0;
		display: inline;
	}
	
	#menu .navigation li .sub-menu li {
		display: inline;
	}
	
}

@media only screen and (max-width:600px) {
	
	#menu .navigation {
		width: 100%;
		padding: 0;
	}
	
	#menu .navigation a {
		font: 300 40px/50px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 0 5px;
	}
	
	#menu .navigation li .sub-menu {
		display: none;
	}

}

@media only screen and (max-height:800px) and (min-width:900px) {
	
	#menu .navigation a {
		font: 200 60px/80px 'Raleway', Arial, Helvetica, sans-serif;
	}
	
	#menu .navigation li {
		height: 80px;
	}
	
	#menu .navigation li .sub-menu a {
		font: 600 13px/13px 'Raleway', Arial, Helvetica, sans-serif;
	}
	
}

@media only screen and (max-height:700px){
	
	#menu .navigation {
		width: 100%;
		margin-left: 0 !important;
		padding: 0;
		left: 0;
	}
	
	#menu .navigation a {
		font: 300 40px/50px 'Raleway', Arial, Helvetica, sans-serif;
		text-align: center;
		width: auto;
		padding: 0 5px;
	}
	
	#menu .navigation li {
		height: auto;
	}
	
	#menu .navigation li .sub-menu {
		display: none;
	}

}

@media only screen and (max-height:500px){
	
	#menu .navigation a {
		font: 300 30px/40px 'Raleway', Arial, Helvetica, sans-serif;
	}

}

/********************************************************************************************* 

x. Pop-up: Follow

*********************************************************************************************/
@media only screen and (max-width:700px) {
	
	#follow .navigation {
		height: 60px;
	}

	#follow .navigation a {
		font-size: 60px;
	}
	
	#follow .navigation li {
		padding: 0 20px;
	}

}

@media only screen and (max-width:500px) {
	
	#follow .navigation {
		height: auto;
	}
	
	#follow .navigation a {
		font-size: 40px;
	}
	
	#follow .navigation li {
		padding: 10px;
		display: block;
	}
	
}

/********************************************************************************************* 

x. Pop-up: Share

*********************************************************************************************/
@media only screen and (max-width:700px) {
	
	#share .navigation {
		height: 60px;
	}

	#share .navigation a {
		font-size: 60px;
	}
	
	#share .navigation li {
		padding: 0 20px;
	}

}

@media only screen and (max-width:500px) {
	
	#share .navigation {
		height: auto;
	}
	
	#share .navigation a {
		font-size: 40px;
	}
	
	#share .navigation li {
		padding: 10px;
		display: block;
	}
	
}

/********************************************************************************************* 

x. Layout: General

*********************************************************************************************/
@media only screen and (max-width:1230px) {
	
	.section {
		width: auto;
		padding-right: 40px;
	}
	
	.section .column.left {
		width: auto;
		padding: 30px 0;
		float: none;
	}
	
	.section .column.right {
		width: auto;
		float: none;
	}
	
	.section .image.main, .section .video.main {
		margin: 0;
	}
	
	.section .inside {
		width: auto;
	}
	
}

@media only screen and (max-width:1000px) {
	
	#main {
		padding: 30px 0 50px 0;
	}
	
	#main.no-padding-bottom {
		padding: 30px 0 0 0;
	}
	
}

@media only screen and (max-width:900px) {
	
	#main, #main.no-padding-bottom {
		padding: 0;
	}
	
	.section {
		margin: 0 0 20px 0;
		padding-right: 0;
	}
	
	.section .column.left {
		padding: 30px 30px 0 30px;
	}
	
	.section .content {
		padding: 30px 30px 0 30px;
	}
	
	.section .content.no-padding {
		padding: 0;
	}
	
	.section .content.no-padding-top {
		padding: 0 30px;
	}
	
	.section .image .maximize {
		background: none;
		background-color: #000;
		background-image: url(../img/maximize-2x.png);
		background-position: left center;
		background-size: 64px 32px;
		background-repeat: no-repeat;
	}
	
	.section .image .maximize:hover {
		background: none;
		background-color: #000;
		background-image: url(../img/maximize-2x.png);
		background-position: right center;
		background-size: 64px 32px;
		background-repeat: no-repeat;
	}
	
	.section .inside {
		padding: 0;
	}
	
	.section .video.description {
		padding: 0 30px;
	}
	
}

@media only screen and (max-width:600px) {
	
	.section {
		margin: 0;
	}

	.section .column.left {
		padding: 15px 15px 0 15px;
	}
	
	.section .content {
		padding: 15px 15px 0 15px;
	}
	
	.section .content.no-padding-top {
		padding: 0 15px;
	}
	
	.section .content ol, .section .content ul, .section .content.forced-styles ol, .section .content.forced-styles u, .section .content.forced-styles p, .section p {
		padding: 0 0 15px 0 !important;
	}
	
	.section .image, .section .video {
		margin: 0 0 15px 0;
	}
	
	.section .image .maximize {
		display: none;
	}
	
	.section .video.description {
		padding: 0 15px;
	}
	
}

@media only screen and (max-height:700px) and (min-width:1000px) {
	
	#main {
		padding: 100px 0 50px 0;
	}
	
	#main.no-padding-bottom {
		padding: 100px 0 0 0;
	}
	
}

/********************************************************************************************* 

x. Layout: Anchors

*********************************************************************************************/
@media only screen and (max-width:1230px) {
	
	#anchors {
		overflow: hidden;
		padding: 30px 0 15px 0;
	}
	
	#anchors.stuck {
		width: auto;
		position: relative;
		top: 0 !important;
	}
	
	#anchors a {
		color: #fff;
		font: 600 12px/40px 'Raleway', Arial, Helvetica, sans-serif;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		width: auto; height: 40px;
		background: #c2c2c1;
		padding: 0 20px;
		display: block;
	}
	
	#anchors li {
		width: auto;
		padding: 0 15px 15px 0;
		float: left;
	}
	
	#anchors li.active a {
		background: #c2c2c1;
	}
	
}

@media only screen and (max-width:600px) {
	
	#anchors {
		padding: 15px 0 5px 0;
	}
	
	#anchors a {
		letter-spacing: normal;
	}
	
	#anchors li {
		padding: 0 10px 10px 0;
	}

}

@media only screen and (max-width:500px) { 
	
	#anchors {
		padding: 15px 0 0 0;
	}
	
	#anchors li {
		display: none;
	}
	
}

@media only screen and (max-width:400px) {
	
	#anchors a {
		font: 600 12px/30px 'Raleway', Arial, Helvetica, sans-serif;
		height: 30px;
		padding: 0 10px;
	}

}

/********************************************************************************************* 

x. Layout: Buttons

*********************************************************************************************/
@media only screen and (max-width:1230px) {

	#buttons a {
		width: auto;
		padding: 0 20px;
	}

}

@media only screen and (max-width:900px) {

	#buttons {
		margin: 0 30px;
		padding: 30px 0;
	}

}

@media only screen and (max-width:600px) {

	#buttons {
		margin: 0 15px;
		padding: 15px 0;
	}
	
	#buttons a {
		letter-spacing: normal;
	}
	
	#buttons li {
		padding: 0 10px 0 0;
	}
	
	#buttons li.last {
		padding: 0;
	}

}

@media only screen and (max-width:400px) {
	
	#buttons a {
		font: 600 12px/30px 'Raleway', Arial, Helvetica, sans-serif;
		height: 30px;
		padding: 0 10px;
	}

}

/********************************************************************************************* 

x. Layout: Cross Links

*********************************************************************************************/
@media only screen and (max-width:1230px) {
	
	.section .links a {
		text-align: left;
	}
	
}

/********************************************************************************************* 

x. Layout: Block Quotes

*********************************************************************************************/
@media only screen and (max-width:600px) {
	
	.section blockquote p {
		padding: 10px !important;
	}

}

/********************************************************************************************* 

x. Layout: Table (class table)

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	table.table {
		width: 100%; height: auto;
		padding: 0 30px 20px 30px;
	}
	
	table.table th.sort-down span.arrow {
		background: none;
		background-image: url(../img/sort-down-2x.png);
		background-position: center center;
		background-size: 11px 6px;
		background-repeat: no-repeat;
	}
	
	table.table th.sort-up span.arrow {
		background: none;
		background-image: url(../img/sort-up-2x.png);
		background-position: center center;
		background-size: 11px 6px;
		background-repeat: no-repeat;
	}

}

@media only screen and (max-width:800px) {
	
	#architectural-associations-table td.year, #architectural-associations-table th.year {
		display: none;
	}
	
	#speaking-engagements-table td.location, #speaking-engagements-table th.location {
		display: none;
	}
	
}

@media only screen and (max-width:700px) {
	
	#architectural-associations-table td.role, #architectural-associations-table th.role {
		display: none;
	}
	
	#design-build-table td.year, #design-build-table th.year {
		display: none;
	}
	
	#press-mentions-table td.date, #press-mentions-table th.date {
		display: none;
	}
	
	#projects-table td.type, #projects-table th.type {
		display: none;
	}
	
	#speaking-engagements-table td.year, #speaking-engagements-table th.year {
		display: none;
	}
	
}

@media only screen and (max-width:600px) {
	
	#architectural-associations-table td.location, #architectural-associations-table th.location {
		display: none;
	}
	
	#awards-table td.year, #awards-table th.year {
		display: none;
	}
	
	#design-build-table td.location, #design-build-table th.location {
		display: none;
	}
	
	#press-materials-table td.date, #press-materials-table th.date {
		display: none;
	}
	
	#press-mentions-table td.publication, #press-mentions-table th.publication {
		display: none;
	}
	
	#projects-table td.date, #projects-table th.date {
		display: none;
	}
	
	#speaking-engagements-table td.speaker, #speaking-engagements-table th.speaker {
		display: none;
	}
	
	table.table {
		padding: 0 15px 15px 15px;
	}
	
	table.table td {
		padding: 10px;
	}
	
	table.table th {
		padding: 10px 10px 30px 10px;
	}
	
	#projects-table td.type, #projects-table th.type {
		display: none;
	}

}

@media only screen and (max-width:350px) {
	
	#speaking-engagements-table td.presentation, #speaking-engagements-table th.presentation {
		display: none;
	}
	
	table.table td {
		font-size: 12px;
	}
	
}

/********************************************************************************************* 

x. Sidebar: Navigation

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	
	#sidebar {
		position: absolute;
		top: 100px;
	}
	
}

@media only screen and (max-width:900px) {
	
	#sidebar {
		width: auto;
		background: #f1f1f1;
		border-top: 1px solid #ddd;
		padding: 30px;
		position: relative;
		top: 0; left: 0;
	}
	
	#sidebar .navigation {
		font-size: 0;
		margin: 0 0 0 -10px;
	}
	
	#sidebar .navigation a {
		font: 500 25px/25px 'Raleway', Arial, Helvetica, sans-serif;
		text-transform: none;
		padding: 0 10px 10px 10px;
	}
	
	#sidebar .navigation li {
		padding: 0;
		display: inline;
	}
	
	#sidebar .navigation li .sub-menu {
		border-top: none;
	}
	
	#sidebar .navigation li .sub-menu a {
		font: 600 13px/13px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 10px;
		display: inline-block;
		zoom: 1; 
		*display: inline;
	}
	
	#sidebar .navigation li .sub-menu li {
		border-bottom: none;
	}
	
	/*
	#sidebar .navigation li .sub-menu li.current-menu-item.menu-item-has-children > a::after, #sidebar .navigation li .sub-menu li.current-menu-parent > a::after {
		content: ":";
	}
	*/
	
	#sidebar .navigation li .sub-menu li.current-menu-item .sub-menu, #sidebar .navigation li .sub-menu li.current-menu-parent .sub-menu {
		display: inline;
	}
	
	#sidebar .navigation li .sub-menu li .sub-menu {
		border-top: none;
		margin-top: 0;
		padding-top: 0;
	}
	
	#sidebar .navigation li .sub-menu li .sub-menu a {
		font: 600 13px/13px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 10px;
	}
	
	#sidebar .navigation li .sub-menu li .sub-menu li.current-menu-item a {
		color: #fff;
		background: #000;
	}
	
	#sidebar .navigation.categories a {
		padding: 0 10px 10px 10px;
	}
	
	#sidebar .navigation.categories li .sub-menu a {
		padding: 10px;
	}
	
	#sidebar .navigation.categories li .sub-menu li.current-menu-item a, #sidebar .navigation.categories li .sub-menu li.current-menu-parent a {
		padding: 10px;
	}
	
	#sidebar .navigation.categories li .sub-menu li.divider {
		border-bottom: none;
	}
	
	#sidebar .navigation.categories.single li .sub-menu li.all, #sidebar .navigation.categories.single li .sub-menu li.current-menu-parent {
		display: inline;
	}
	
	#sidebar .navigation.categories.single li .sub-menu li.current-menu-parent a {
		padding: 10px;
	}
	
	#sidebar .navigation.categories.single li .sub-menu li.current-menu-parent a:after {
		content: "";
	}

}

@media only screen and (max-width:600px) {
	
	#sidebar {
		padding: 15px;
	}
	
	#sidebar .navigation {
		margin: 0 0 0 -5px;
	}
	
	#sidebar .navigation a {
		font: 400 25px/25px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 0 5px 10px 5px;
	}
	
	#sidebar .navigation li .sub-menu a {
		font: 600 12px/12px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 5px;
	}
	
	#sidebar .navigation li .sub-menu li .sub-menu a {
		font: 600 12px/12px 'Raleway', Arial, Helvetica, sans-serif;
		padding: 5px;
	}
	
	#sidebar .navigation li .sub-menu li .sub-menu li.current-menu-item a {
		color: #ddd;
	}
	
	#sidebar .navigation.categories a {
		padding: 0 5px 10px 5px;
	}
	
	#sidebar .navigation.categories li .sub-menu a {
		padding: 5px;
	}
	
	#sidebar .navigation.categories li .sub-menu li.current-menu-item a, #sidebar .navigation.categories li .sub-menu li.current-menu-parent a {
		padding: 5px;
	}
	
	#sidebar .navigation.categories.single li .sub-menu li.current-menu-parent a {
		padding: 5px;
	}
	
}

@media only screen and (max-height:700px) and (min-width:900px) {
	
	#sidebar {
		position: absolute;
		top: 100px;
	}
	
}

/********************************************************************************************* 

x. Sidebar: Search

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	#search {
		position: relative;
	}
	
	#search .button {
		width: 40px; height: 40px;
		background: none;
		background-image: url(../img/news/search-2x.png);
		background-position: center center;
		background-size: 15px 16px;
		background-repeat: no-repeat;
		border-left: none;
		float: none;
		position: absolute;
		top: 0; right: 0;
	}
	
	#search .button:hover {
		background: none;
		background-color: #f7f6f5;
		background-image: url(../img/news/search-2x.png);
		background-position: center center;
		background-size: 15px 16px;
		background-repeat: no-repeat;
	}

	#search .textfield {
		width: 100%; height: 40px;
		background: #fff;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 10px;
		float: none;
	}

}

@media only screen and (max-width:600px) {
	
	#search {
		margin: 15px 0 0 0;
	}

}



/********************************************************************************************* 

x. Related

*********************************************************************************************/
@media only screen and (max-width:900px) {

	#related {
		margin: 10px 0 -10px 0;
	}
	
	#related p.excerpt {
		display: none;
	}
	
	#related p.title {
		padding: 0 !important;
	}
	
	#related .inside {
		width: auto;
		padding: 30px;
	}

}

@media only screen and (max-width:600px) {

	#related {
		margin: 0;
	}
	
	#related .grid .item {
		width: 50%; height: auto;
	}
	
	#related .inside {
		width: auto;
		padding: 15px;
	}

}


/********************************************************************************************* 

x. Relevant

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	#relevant-wrapper {
		border-top: none;
		padding: 0 0 30px 0;
	}
	
	#relevant .case-study-project a {
		top: 25px; left: 25px;
	}

}

@media only screen and (max-width:800px) {
	
	#relevant .case-study-project-wrapper, #relevant .news {
		width: 100%; height: auto !important;
	}
	
}

@media only screen and (max-width:600px) {
	
	#relevant-wrapper {
		padding: 0 0 15px 0;
	}
	
	#relevant .case-study-project a {
		width: auto;
		top: 15px;
		left: 15px; right: 15px;	
	}
	
	#relevant .news .inside {
		padding: 15px;
	}
	
}

/********************************************************************************************* 

x. Home

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	
	#home {
		width: 500px; height: auto;
		margin: -72px 0 0 -250px;
	}
	
	#home .logo {
		width: 500px; height: 145px;
		background: none;
		background-image: url(../img/home/logo.png);
		background-size: 500px 145px;
		background-repeat: no-repeat;
	}
	
}

@media only screen and (max-width:900px) {
	
	#home {
		width: 400px; height: auto;
		margin: -58px 0 0 -200px;
	}
	
	#home .caption a {
		font: 400 25px/30px 'Open Sans', Arial, Helvetica, sans-serif;
	}
	
	#home .logo {
		width: 400px; height: 116px;
		background-size: 400px 116px;
	}
	
}

@media only screen and (max-width:600px) {
	
	#home {
		width: 300px; height: auto;
		margin: -43px 0 0 -150px;
	}
	
	#home .caption a {
		font: 400 20px/25px 'Open Sans', Arial, Helvetica, sans-serif;
		text-align: center;
		background: none;
		padding: 0;
	}
	
	#home .logo {
		width: 300px; height: 87px;
		background-size: 300px 87px;
	}
	
}

@media only screen and (max-width:500px) {
	
	#home {
		width: 250px; height: auto;
		margin: -29px 0 0 -125px;
	}
	
	#home .caption a {
		font: 400 17px/20px 'Open Sans', Arial, Helvetica, sans-serif;
	}
	
	#home .logo {
		width: 200px; height: 58px;
		background-size: 200px 58px;
		margin: 0 auto 15px auto;
	}

}

@media only screen and (max-width:400px) {
	
	#home {
		width: 200px; height: auto;
		margin: -22px 0 0 -100px;
	}
	
	#home .caption a {
		font: 400 14px/18px 'Open Sans', Arial, Helvetica, sans-serif;
	}
	
	#home .logo {
		width: 150px; height: 44px;
		background-size: 150px 44px;
		margin: 0 auto 15px auto;
	}

}

@media only screen and (max-height:600px) {
	
	#home {
		width: 250px; height: auto;
		margin: -29px 0 0 -125px;
	}
	
	#home .caption a {
		font: 400 17px/20px 'Open Sans', Arial, Helvetica, sans-serif;
		text-align: center;
		background: none;
		padding: 0;
	}
	
	#home .logo {
		width: 200px; height: 58px;
		background-size: 200px 58px;
		margin: 0 auto 15px auto;
	}
	
}

/********************************************************************************************* 

x. About

*********************************************************************************************/
@media only screen and (max-width:600px) {
	
	#about .grid li {
		width: 50%;
	}

}

/********************************************************************************************* 

x. Projects

*********************************************************************************************/
@media only screen and (max-width:2300px) { 
	
	#projects .section.no-width .grid li {
		width: 16.66%; height: auto;
	}
	
	#projects .section.no-width li.featured {
		width: 33.33%; height: auto;
	}

}

@media only screen and (max-width:1800px) { 
	
	#projects .section.no-width .grid li {
		width: 20%; height: auto;
	}
	
	#projects .section.no-width li.featured {
		width: 40%; height: auto;
	}
	
}

@media only screen and (max-width:1400px) { 
	
	#projects .section.no-width .grid li {
		width: 25%; height: auto;
	}
	
	#projects .section.no-width li.featured {
		width: 50%; height: auto;
	}
	
}

@media only screen and (max-width:1300px) { 
	
	#projects .section.no-width .grid {
		padding: 0 3px 0 0;
	}
	
}

@media only screen and (max-width:1230px) { 
	
	#projects .section.no-width .grid {
		padding: 0;
	}
	
}

@media only screen and (max-width:900px) { 
	
	#projects .section.no-width .grid li, #projects .section.no-width li.featured {
		width: 25%;
	}
	
	#projects .section.no-width li.featured img {
		height: auto !important;
	}
	
	#projects .grid .image-size-medium {
		display: none;
	}
	
	#projects .grid .image-size-small {
		display: block;
	}
	
	#projects #map {
		width: auto; height: 600px;
		margin: 0 30px 20px 30px;
	}
	
	#projects #map #refresh {
	    background: none;
		background-image: url(../img/refresh-2x.png);
		background-position: center center;
		background-size: 58px 58px;
		background-repeat: no-repeat;
	}
	
}

@media only screen and (max-width:800px) { 
	
	#projects .section.no-width .grid li, #projects .section.no-width li.featured {
		width: 33.33%;
	}
	
}

@media only screen and (max-width:600px) { 
	
	#projects .column.left p.small {
		padding: 0 !important;
	}
	
	#projects .column.left p.small.padding {
		padding: 0 0 15px 0 !important;
	}
	
	#projects .section.no-width .grid li, #projects .section.no-width li.featured {
		width: 50%;
	}
	
	#projects #map {
		height: 400px;
		margin: 0 15px 15px 15px;
	}
	
	#projects #map .label p {
		padding: 0 !important;
	}
	
}

@media only screen and (max-width:500px) {
	
	#projects #map {
		height: 300px;
	}
	
}

/********************************************************************************************* 

x. Research

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	#research .column.left p.share a {
		background: none;
		background-image: url(../img/research/share-2x.png);
		background-position: right top;
		background-size: 19px 26px;
		background-repeat: no-repeat;
	}
	
	#research .column.left p.share a:hover {
		background: none;
		background-image: url(../img/research/share-2x.png);
		background-position: right top;
		background-size: 19px 26px;
		background-repeat: no-repeat;
	}
	
	#research .grid {
		border-top: none;
		padding: 10px 0 0 0;
	}
	
	#research .grid .inside {
		margin: 0 3px 3px 0;
	}
	
	#research #relevant-wrapper {
		margin-bottom: -8px;
		padding-bottom: 0;
	}
	
}


@media only screen and (max-width:600px) {
	
	#research .column.left p.share {
		padding: 10px 0 !important;
	}
	
	#research .grid {
		padding: 0;
	}
	
	#research .grid li {
		width: 50%; height: auto;
	}
	
	#research .grid p {
	    padding: 10px 0 0 0 !important;
	}
	
	#research #relevant-wrapper {
		margin-bottom: 1px;
	}

}

/********************************************************************************************* 

x. News

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	#news #main {
		padding: 30px 0 0 0;
	}
	
	.post {
		width: auto;
	}
	
	.post .share {
		background: none;
		background-image: url(../img/news/share-2x.png);
		background-position: right top;
		background-size: 19px 26px;
		background-repeat: no-repeat;
	}
	
	.post .share:hover {
		background: none;
		background-image: url(../img/news/share-2x.png);
		background-position: right top;
		background-size: 19px 26px;
		background-repeat: no-repeat;
	}
	
	.post table {
		padding: 0 30px;
	}
	
	.posts-links {
		width: auto;
		padding: 0 30px 10px 30px;
	}
	
	.posts-loader {
		width: auto !important;
	}
	
	#results {
		width: auto;
		margin: 0 0 30px 0;
		padding: 0 30px 10px 30px;
	}

}

@media only screen and (max-width:600px) {
	
	#news #main {
		padding: 15px 0 0 0;
	}
	
	.post {
		margin: 0 0 15px 0;
	}
	
	.post table {
		padding: 0 15px;
	}
	
	.post table td {
		display: block;
	}
	
	.post table td.image {
		width: 100%;
		padding: 0;
	}
	
	.post table td.image img {
		width: auto; height: auto;
		margin: 0;
	}

	.posts-links {
		padding: 0 15px 5px 15px;
	}
	
	.posts-links li.next, .posts-links li.previous {
		text-align: left;
		width: 100% !important;
		padding: 0 0 5px 0;
		float: none;
	}
	
	#results {
		width: auto;
		margin: 0 0 15px 0;
		padding: 0 15px;
	}

}

@media only screen and (max-width:400px) {
	
	.post table td.image img {
		width: 100%;
	}
	
}

/********************************************************************************************* 

x. Contact

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	
	#contact-methods {
		padding: 0;
	}
	
	#contact-methods li {
		width: 250px;
		margin: 0 0 20px 0;
		padding: 0 0 0 20px;
	}
	
	#contact-methods li.phone {
		border-right: none;
	}
	
	#contact-methods li.email {
		padding: 0;
		clear: both;
	}
	
	#icons li {
		width: auto;
		margin: 0;
	}
	
}

@media only screen and (max-width:900px) {
	
	#contact .grid {
		padding: 0 30px 27px 30px;
	}
	
	#contact-methods {
		padding: 30px 30px 10px 30px;
	}
	
	#contact #map {
		width: auto; height: 500px;
		margin: 0 30px 30px 30px;
	}
	
	#contact #map #refresh {
	    background: none;
		background-image: url(../img/refresh-2x.png);
		background-position: center center;
		background-size: 58px 58px;
		background-repeat: no-repeat;
	}
	
}

@media only screen and (max-width:600px) {
	
	#contact .grid {
		padding: 0 15px 12px 15px;
	}
	
	#contact-methods {
		padding: 15px 15px 0 15px;
	}
	
	#contact-methods li {
		width: auto;
		border-right: none;
		margin: 0;
		padding: 0 0 15px 0 !important;
		display: block;
		float: none;
	}
	
	#contact-methods p {
		padding: 0 !important;
	}
	
	#contact #map {
		height: 400px;
		margin: 0 15px 15px 15px;
	}
	
	#contact #map .label p {
		padding: 0 !important;
	}
	
	#icons li {
		padding: 0 15px 0 0 !important;
		float: left;
	}
	
}

@media only screen and (max-width:500px) {
	
	#contact #map {
		height: 300px;
	}
	
}

/********************************************************************************************* 

x. Footer

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	
	#footer {
		position: relative;
	}

	.popped #footer, .slideshow #footer {
		position: fixed;
	}
	
}

@media only screen and (max-width:900px) { 
	
	#footer {
		margin: 10px 0 0 0;
	}
	
	#footer .navigation li.share a {
		background: none;
		background-image: url(../img/share-footer-2x.png);
		background-position: left top;
		background-size: 19px 120px;
		background-repeat: no-repeat;
	}
	
	#footer .navigation li.share a:hover {
		background: none;
		background-image: url(../img/share-footer-2x.png);
		background-position: left center;
		background-size: 19px 120px;
		background-repeat: no-repeat;
	}
	
	.popped #footer .navigation li.share a, .slideshow #footer .navigation li.share a {
		background: none;
		background-image: url(../img/share-footer-2x.png);
		background-position: left bottom;
		background-size: 19px 120px;
		background-repeat: no-repeat;
	}
	
	.popped #footer, .slideshow #footer {
		margin: 0;
	}
	
	
}

@media only screen and (max-width:600px) { 
	
	#footer {
		margin: 0;
	}
	
	.popped #footer .navigation .menu-item, .slideshow #footer .navigation  .menu-item {
		display: none;
	}
	
}

@media only screen and (max-width:400px) {
	
	#footer {
		height: auto;
	}
	
	#footer .navigation {
		text-align: center;
		float: none;
	}
	
	#footer .navigation li {
		margin: 0;
		padding: 0 10px;
		display: inline-block;
		zoom: 1; 
		*display: inline;
		vertical-align: middle;
		float: none;
	}
	
	#footer p {
		text-align: center;
		float: none;
	}
	
	.popped #footer .navigation, .slideshow #footer .navigation {
		float: right;
	}
	
	.popped #footer .navigation li, .slideshow #footer .navigation li {
		display: block;
		padding: 0;
		float: left;
	}
	
	.popped #footer p, .slideshow #footer p {
		float: left;
	}

}

/********************************************************************************************* 

x. TN3 Gallery

*********************************************************************************************/
@media only screen and (max-width:1230px) {
	
	.tn3-gallery {
		margin: 0;
	}
	
}

@media only screen and (max-width:900px) {
		
	.tn3-next {
	    background: none;
		background-image: url(../js/tn3-gallery/skins/tn3/arrows-image-2x.png);
		background-position: right center;
		background-size: 100px 80px;
		background-repeat: no-repeat;
	}
	
	.tn3-prev {
		background: none;
		background-image: url(../js/tn3-gallery/skins/tn3/arrows-image-2x.png);
		background-position: left center;
		background-size: 100px 80px;
		background-repeat: no-repeat;
	}

	.tn3-next-page {
	    background: none;
		background-color: #f6f6f6;
		background-image: url(../js/tn3-gallery/skins/tn3/arrows-page-2x.png);
		background-position: right center;
		background-size: 50px 60px;
		background-repeat: no-repeat;
	}

	.tn3-prev-page {
		background: none;
		background-color: #f6f6f6;
		background-image: url(../js/tn3-gallery/skins/tn3/arrows-page-2x.png);
		background-position: left center;
		background-size: 50px 60px;
		background-repeat: no-repeat;
	}
	
	.tn3-maximize {
	   	background: none;
		background-color: #000;
		background-image: url(../js/tn3-gallery/skins/tn3/maximize-2x.png);
		background-position: left center;
		background-size: 64px 32px;
		background-repeat: no-repeat;
	   
	}
	
	.tn3-maximize:hover {
		background: none;
		background-color: #000;
		background-image: url(../js/tn3-gallery/skins/tn3/maximize-2x.png);
		background-position: right center;
		background-size: 64px 32px;
		background-repeat: no-repeat;
	}
	
	.tn3-thumb .tn3-play-overlay {
		background: none;
		background-image: url(../js/tn3-gallery/skins/tn3/play-2x.png);
		background-position: right center;
		background-size: 60px 60px;
		background-repeat: no-repeat;
	}
	
}

@media only screen and (max-width:600px) {
	
	.tn3-next, .tn3-prev {
		width: 30px; height: 48px;
		background-size: 60px 48px;
		background-repeat: no-repeat;
	    margin: -24px 0 0 0;
	}
	
	.tn3-maximize {
		display: none;
	}

}

/********************************************************************************************* 

x. Nivo Lightbox

*********************************************************************************************/
@media only screen and (max-width:1230px) {
	
	.nivo-lightbox-theme-default .nivo-lightbox-next {
		background: none !important;
		background-image: url(../js/nivo-lightbox/themes/default/arrows-2x.png) !important;
		background-position: right top !important;
		background-size: 140px 115px !important;
		background-repeat: no-repeat !important; 
		right: 30px;
	}
	
	.nivo-lightbox-theme-default .nivo-lightbox-prev {
		background: none !important;
		background-image: url(../js/nivo-lightbox/themes/default/arrows-2x.png) !important;
		background-position: left top !important;
		background-size: 140px 115px !important;
		background-repeat: no-repeat !important;
		left: 30px; 
	}
	
}

@media only screen and (max-width:1000px) {
	
	.nivo-lightbox-theme-default.nivo-lightbox-overlay { 
		background: #181818;
	}

}

@media only screen and (max-width:900px) { 
	
	.nivo-lightbox-theme-default .nivo-lightbox-close {
		background: none;
		background-image: url(../js/nivo-lightbox/themes/default/close-2x.png);
		background-position: center center;
		background-size: 20px 20px;
		background-repeat: no-repeat;
	}

}

/********************************************************************************************* 

x. BxSlider

*********************************************************************************************/
@media only screen and (max-width:600px) {
	
	.case-study-project-wrapper .bx-wrapper .bx-next,
	.case-study-project-wrapper .bx-wrapper .bx-prev {
		margin: 0 !important;
		top: auto !important;
		bottom: 10px;
	}
	
}

/********************************************************************************************* 

x. Supersized

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	#next{
		background: none !important;
		background-image: url(../js/supersized/arrows-2x.png) !important;
		background-position: right top !important;
		background-size: 140px 115px !important;
		background-repeat: no-repeat !important;
	}
	
	#previous {
		background: none !important;
		background-image: url(../js/supersized/arrows-2x.png) !important;
		background-position: left top !important;
		background-size: 140px 115px !important;
		background-repeat: no-repeat !important;
	}
	
}

@media only screen and (max-width:600px) {
	
	#previous, #next{
		width: 40px !important; height: 66px !important; 
		margin: 0 !important;
	}
	
	#next, #previous {
		background-size: 80px 66px !important;
	}
	
}

@media only screen and (max-height:600px) {
	
	#next{
		background: none !important;
		background-image: url(../js/supersized/arrows-2x.png) !important;
		background-position: right top !important;
		background-size: 140px 115px !important;
		background-repeat: no-repeat !important;
	}
	
	#previous {
		background: none !important;
		background-image: url(../js/supersized/arrows-2x.png) !important;
		background-position: left top !important;
		background-size: 140px 115px !important;
		background-repeat: no-repeat !important;
	}
	
	#previous, #next{
		width: 40px !important; height: 66px !important; 
		margin: 0 !important;
	}
	
	#next, #previous {
		background-size: 80px 66px !important;
	}
	
}