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

@media (max-width: 1600px) {
	#videowrapper video {
		margin-top: 0;
	}
}
/*********************************************************************************/
/* Below 1500px                                                                   */
/*********************************************************************************/
@media (max-width: 1500px) { /* 1500px */

	div.wrap.promo1 h1,
	div.wrap.promo2 h1,
	div.wrap.promo3 h1 {
		font-size: 2.5rem;
		height: 8rem;
	}


}

/*********************************************************************************/
/* Below 1200px                                                                   */
/*********************************************************************************/
@media (max-width: 1200px) { /* 1200px */
	
	#header .navigation_left ul li,
	#header .navigation_right ul li {
		font-size: 1rem;
		letter-spacing: .25px;
	}
	
	#header #logo #logo_inner {
		width: 200px;
		height: 60px;
		background: url('../img/assets/logox136x120.png') center no-repeat;
		background-size: contain;
	}
	
	#header .navigation_left ul li a,
	#header .navigation_right ul li a {
		padding: 2rem 1rem;
	}
	
	.mainimage,
	.mainimageres {
		margin-top: 70px;
	}
	
	.wrapper {
		width: 96%;
		margin: 0 2%;
	}
	
	.fullwidthpromo .textblock h2 {
		font-size: 2rem;
	}
	.fullwidthpromo .textblock p {
		font-size: 1.25rem;
	}
	.testimonialwrapper,
	.gallerywrapper {
		width: 96%;
		padding: 1.5rem 2%;
	}
	
	.fullwidthpromo .textblock h2 {
		font-size: 1.75rem;
	}
	.fullwidthpromo .textblock p {
		font-size: 1.125rem;
	}
	.contentblock .text {
		width: 80%;
	}
	.contentblock .titledecorate h1 {
		margin-bottom: 1.5rem;
		height: 3rem;
	}

}
/*********************************************************************************/
/* Below 1024px                                                                   */
/*********************************************************************************/
@media (max-width: 1024px) { /* 1024px */


	#header {
		position: relative; /* Force to top for dropdown */
		width: 100%;
		background: #000000;
		background: rgba(0,0,0, .9);
		z-index: 900;
		color: #FFFFFF;
	}
	
	#header #logo {
		float: left;
		position: relative;
		width: 100%;
		text-align: center;
		left: auto;
		padding: .75rem 0 1rem 0;
		margin-left: 0;
	}
	#header #logo #logo_inner {
		width: 200px;
		height: 70px;
		margin: 0 auto;
	}

	#header .navigation_left,
	#header .navigation_right {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
		text-align: center;
	}
	
	div.wrap {
		height: 20rem;
		width: 100%;
		overflow: hidden;
		position: relative;
		float: left;
	}
	div.wrap.promo1 h1,
	div.wrap.promo2 h1,
	div.wrap.promo3 h1 {
		margin-top: 2rem;
		font-size: 1.5rem;
		height: 2rem;
	}
	div.wrap.promo1 .button,
	div.wrap.promo2 .button,
	div.wrap.promo3 .button {
		float: none;
		display: block;
		margin: 3rem auto 0 auto;
	}
	div.wrap.promo2 #scroll {
		display: none;
	}

	.mainimage, .mainimageres {
		margin-top: 0;
	}
	
	.fullwidthpromo .mapblock {
		width: 50%;
	}
	
	.fullwidthpromo .textmapblock {
		width: 40%;
	}
	
	.fullwidthpromo .textblock h2 {
		font-size: 1.5rem;
	}
	
	.contentwrapper .contentleft {
		width: 60%;
	}
	
	.contentwrapper .contentright {
		width: 35%;
	}
	.fullwidthmappromo {
		flex-wrap: wrap;
	}
	.fullwidthpromo .mapblock {
		width: 100%;
	}
	.fullwidthpromo .textmapblock {
		width: 90%;
		padding: 1rem 5%;
	}
	.projectgallery .image img,
	.projectgallery.reverse .image img {
		width: 75%;
		height: auto;
	}
	.projectgallery .image.width50,
	.projectgallery.reverse .image.width50 {
		width: 100%;
	}
	
	.contentform {
		margin: 2rem auto;
		max-width: 90%;
	}
	.contentform .formlayout {
		margin: 0;
		padding: 0;
	}
	.contentform .formlayout li.halfwidth.liselect {
		width: 100%;
		padding: 0;
	}
	.contentform .formlayout li.halfwidth {
		width: 100%;
	}
	.contentform h2,
	.gallerywrapper h2 {
		font-size: 1.25rem;
	}
	.contentform h3 {
		font-size: 1.125rem;
	}
	
	.fullwidthpromo .textblock h2 {
		font-size: 1.5rem;
	}
	.fullwidthpromo .textblock p {
		font-size: 1rem;
	}
	.formblock {
		width: 90%;
	}
	.projectmain {
		margin: 5rem 0;
	}
	.projectgallery .image,
	.projectgallery.reverse .image {
		width: 100%;
	}
	
	#footermenu ul li a {
		padding: .5rem 1rem;
	}
	#footer #creditswrapper #copyright,
	#footer #creditswrapper #webcredit {
		width: 98%;
		margin: 1em 1%;	
	}
	#footer {
		text-align: center;	
	}
	#footer #creditswrapper #webcredit {
		text-align: center; 	
	}

	#footer #address,
	#footer #social,
	#footer #logos,
	#footer #footerlogo {
		float: none;
		width: 100%;
		margin: .5em auto;
		text-align: center;
		display: inline-block;
	}
	#footer #address {
		display: inline-block;
	}
	
	#footer #social img,
	#footer #logos img {
		float: none;
		margin: .5em;
		display: inline-block;
	}

	

	

	
	.contentcentre {
		width: 100%;
	}
	.flexwrapper .contentblock {
		width: 47%;
	}
	.flexrow .halfwidth .wrap50 {
		width: 100%;
		margin: .5em 0;
	}
	.flexrow .halfwidth .wrap50 {
		width: 100%;
		margin: .5em 0;
	}
	.flexrow .flexrev,
	.flexwrapperrev {
		flex-wrap: wrap-reverse;
	}
	
	.contentsection.res50 .wrap50 {
		width: 100%;
	}
	.contentsection.res50 .marginleft {
		margin: 0;
	}
	


	

}

/*********************************************************************************/
/* Below 800px                                                                   */
/*********************************************************************************/
@media (max-width: 800px) {

	div.wrap {
		height: 15rem;
	}

	.contentwrapper h1,
	.contentwrapper h2 {
		margin: 0 0 1.5rem 0;
		font-size: 1.25rem;
	}
	.contentwrapper p.standfirst {
		font-size: 1.25rem;
	}
	.testimonialwrapper p {
		font-size: 1.5rem;
	}
	.fullwidthpromo .textblock h2 {
		font-size: 1.25rem;
	}
	.fullwidthpromo .textblock p {
		font-size: 1rem;
	}
	
	.contentwrapper p, .contentwrapper .contentlist li {
		font-size: .875rem;
	}
	
	.contentwrapper .articlewrapper .articlethumb {
		width: 25%;
	}
	.contentwrapper .articlewrapper .articleindextext {
		width: 65%;
	}
	
	#footer #twitter {
		float: none;
		display: block;
		margin: 0 auto;
	}


}
/*********************************************************************************/
/* Below 768px                                                                   */
/*********************************************************************************/
@media (max-width: 768px) {
	
	.fullwidthpromo,
	.contentblock,
	.projectpromo, 
	.projectgallery {
		flex-wrap: wrap;
	}
	.fullwidthpromo.promoleft {
		flex-direction: row-reverse;
	}
	.fullwidthpromo .imgblock, 
	.fullwidthpromo .mapblock, 
	.fullwidthpromo .subtitleblock, 
	.fullwidthpromo .moreblock {
		width: 100%;
	}
	.fullwidthpromo .textblock {
		width: 90%;
		padding: 2rem 5%;
	}
	.mainimagesplit .title h1 {
		font-size: 1.5rem;
		height: auto;
	}
	.contentblock .text,
	.projectpromo .text {
		width: 96%;
		margin: 0 0 3rem 0;
	}
	.contentblock .image,
	.contentblock.imagetop .image,
	.projectpromo .image {
		width: 90%;
		margin: 0 5%;
	}
	
	.pagewrapper .clientlogo {
		margin: 0 0 1rem 0;
	}
	.pagewrapper .clientlogo img {
		height: 50px;
		width: auto;
	}
	.testimonialwrapper p {
		font-size: 1.125rem;
		line-height: 150%;
	}
	.contentblock .image img, 
	.projectpromo .image img {
		width: 100%;
		height: auto;
	}
	.projectlink {
		width: 100%;
	}
	.projectlink .text {
		width: 86%;
	}
	.projectlink .text p {
		font-size: 1.125rem;
		text-align: right;
	}
	.projectlink .text h3 {
		font-size: 1.25rem;
		text-align: right;
	}
	
	.contentwrapper {
		padding: 1.5rem 0;
	}
	
	.contentwrapper .contentleft,
	.contentwrapper .contentright {
		width: 100%;
		margin: .5rem 0;
	}
	
	.content h2 {
		font-size: 1.5em;
	}
	.content h3 {
		font-size: 1.125em;
	}
	.content p,
	.content ul.contentlist li,
	.content ul.readmore li {
		font-size: 1em;
	}
	
	.gallerythumbwrapper .gallerythumbs li {
		flex-basis: 31%;
	}


}
/*********************************************************************************/
/* Below 550px                                                                   */
/*********************************************************************************/
@media (max-width:550px) {
	
	.fullwidthpromo {
		flex-wrap: wrap;
	}
	.fullwidthpromo .imgblock {
		width: 100%;
	}
	.fullwidthpromo .textblock {
		width: 90%;
		padding: 1rem 5%;
	}
	.projectpromo .text h1,
	.contentblock .text h1,
	.contentblock .text h2 {
		font-size: 1.5rem;
		height: auto;
	}
	.projectpromo, 
	.projectgallery, 
	.contentblock {
		margin: 2rem 0;
	}
	.contentblock .text p, 
	.contentblock .singleline li {
		font-size: 1.125rem;
	}

}