@import 'structure.css';
@import 'font-awesome.min.css';
@import url('https://fonts.googleapis.com/css?family=Bad+Script|Lato:300,300i,400|Satisfy');

/* ==============================================
   Robert Kirkland of Blyth CSS
   Author: Hyper Hedgehog
   Website: http://hyperhedgehog.uk

   Contents
   -------------------------------

   1. Function classes
   2. Layout / Structure override
   3. Home
   4. Services
   5. About
   6. Contact
   7.
   8.
   9.
   X. Media Queries
================================================== */


/* 1. Function classes
-------------------------------------------------- */

	.center {
		float:none;
		margin:0 auto;
		}

	.nopad {padding:0!important;}
	.nw {white-space:nowrap;}



/* 2. Layout / Structure override
-------------------------------------------------- */
html {}
	body {margin:0 auto;}

	#wrapper { /* aka #wrapper - All content goes inside to keep the margins on the left and right of the content when scaling down. */
		max-width:100%;
		margin:0 0px; /* page gutters L + R */
		padding:20px;
		}


	header {
		position:relative; z-index:5;
		margin:0;
		padding:0 0 20px 0;
		background:rgba(255,255,255, 0.25);
		background:#07526e;
		}
		header h1#logo {margin-top:-2px; margin-left:0;}
		header h1#logo img {margin-top:-4px; width:150px;}
		header h1 a {margin-bottom:1px; text-decoration:none; border:none;}
	
			header.e2e {
                display:block;
                position:absolute; top:0; left:0;
			    min-width:100%; /*width:100vw;*/ height:50px;
			    }
                #header-content {
                    position:relative;
                    max-width:1096px;
                    margin-left:auto; margin-right:auto;
                    padding:20px 30px 8px;
                    }

		/* basic nav styling */
			nav {position:absolute; top:0; right:30px;}
			nav ul {margin:0; padding:16px 0 4px;} /* nav ul {padding:0.5em 20px;} /* Enable L+R 20px gutters */
			nav ul li {
				display:inline-block;
                font-size:1.15em;
				list-style:none;
                border-right:0px solid #aaa;
                border-left:1px solid #109bce;
				}
                nav ul li:first-child {border-left:0;}
			nav ul li a {
                display:block;
                position:relative;
                margin:0; padding:.5em 1.8em .6em;
                color:#dadada;
                font-weight:bold;
                text-decoration:none;
                text-shadow:0 2px 0 rgba(0,0,0, 0.5);
                background:rgba(255,255,255, 0);
                border:none!important;
                }
                nav ul li:last-child a {padding-right:0;}

                nav ul li a:hover {border:none; color:#109bce; color:#fff;}
                nav ul li a:focus,
                nav ul li a:active {top:1px; text-shadow:0 1px 0 rgba(0,0,0, 0.5); border:none; color:rgba(255,255,255,0.6); color:#109bce;}

			/* inline nav */
				nav.il ul li {display:inline-block;}

			/* upper R */
				nav.ur li {margin:0 0 0 .25em;}
				nav.ur li:first-child {margin-left:0;}

				nav ul li.logo {margin:0 10px 10px 0;}
				nav ul li.logo .fa {font-size:2em;}
				
				nav ul li.mob-nav-btn a {
					font-size:2em;
					color:#666;
					}
					nav.show ul li.mob-nav-btn a {color:#000;}
	   
			/* responsive burger nav */
			   #burger {display:none;}

	  
		
	#content {padding-top:50px;} /* push down page content by same fixed margin as header height */

		/* touch contact links */
		   .mob-only {display:none;}
			  ul#touch-contact {margin-left:0; list-style:none;}

		#pano {
			max-height:250px;
			padding:.5em 0 1em;
			background:rgba(255,255,255, 0.15);
			}



	footer {
		position:absolute; left:0; 
		display:block;
		width:100%;
		margin:0 auto!important; padding:.5em 0;
		background:#07526e;
		overflow:hidden;
		}
		footer .row {margin:0 auto; padding:20px; background:rgba(255,255,255, 0);}
		footer h5, footer h6 {color:#fff;}
		footer address, 
		footer p {color:#ccc; color:rgba(255,255,255, 0.5);}

		#project-update {}
			#pu-request {
				margin-top:0;
				margin-left:-.75em;
				padding:0em;
				text-align:center;
				background:rgba(255,255,255, 0);
				}
			#pu-request p {margin-left:.75em; text-align:left;}
			#pu-request label {display:none;}
			form#pu-request #pu-org,
			form#pu-request #pu-email {
				width:84%;
				height:26px;
				margin:0 auto 10px; padding:3px 7px;
				font-size:1em;
				background:#fff;
				border:1px solid #eee;
				border-radius:0;
				opacity:0.8;
				}
			form#pu-request #pu-email {margin-bottom:1em;}
				form#pu-request #pu-org:hover,
				form#pu-request #pu-email:hover,
				form#pu-request #pu-org:focus,
				form#pu-request #pu-email:focus,
				form#pu-request #pu-org:active,
				form#pu-request #pu-email:active {opacity:1;}
			 
			 #pu-submit {width:90.7%!important; margin-top:.75em!important; padding:.62em 0.68em; font-size:1.1em; font-weight:bold; border:transparent!important; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 6px 0px 0px rgba(0,0,0, 0.2)!important;}
			 #pu-submit:active {box-shadow:inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px rgba(0,0,0, 0.2)!important;}

			.pu-request_success {display:none; padding-top:1em;}
			.pu-request_success strong {font-weight:normal; font-style:italic;}

		footer #testimonial {}
			footer #testimonial h5 {margin-top:0em;}
			footer #test-block-link {text-decoration:none; color:#777!important;}
			footer #testimonial-container {
				position:relative;
				margin:0 0 1em;
				padding:.25em 1em;
				}
				q {quotes:"“" "”" "‘" "’"; color:rgba(255,255,255, 0.5); font-family:'Satisfy', cursive;}
				q p {
					z-index:2;
					margin-bottom:.5em;
					font-size:1.1em;
					font-weight:400;
					font-family:'Lato', cursive;
					color:rgba(255,255,255, 0.75);
					line-height:1.4em;
					}
				q:before {
					z-index:0;
					content:open-quote;
					position:absolute; top:40px; left:-22px;
					font-size:11em;
					color:rgba(0,0,0, 0.1);
					}
				q:after {
					z-index:0;
					content:close-quote;
					position:absolute; bottom:-170px; right:-15px;
					font-size:28em;
					color:rgba(0,0,0, 0.1);
					}

			footer #testimonial-author {position:relative; z-index:5; text-align:right; font-size:.8em; font-family:'Lato', cursive; text-transform:uppercase;}
					p.author-name {z-index:5;}
						span.author-position {display:block;}
						span.author-position a {color:#fff; text-decoration:none!important; border-bottom-color:#fff;}


				.test-more {margin-right:.5em;}
				.test-more a {text-decoration:none!important; border-bottom:none;}



		/* Typography */

			h2 {margin-bottom:1.4em; line-height:1.4em; color:#07526e;}
				h2.top-pad {margin-top:.75em;}
			h3 {color:#07526e;}
			h4 {margin-bottom:1.2em; color:#555;}
			h5 {margin-bottom:1em;}

			p {margin-bottom:1.25em; color:#555; line-height:1.5em;}
			ul, li {color:#555;}


		/* Link Styling */

			a {color:#109bce; text-decoration:none!important; border-bottom:1px dotted #109bce;}
			a:hover, a:active {color:#07526e; border-color:#07526e;}


		/* Button Styling */

            a.btn,
            input.btn {
                position:relative;
                cursor:pointer;
                display:inline-block;
                padding:.5em 1em;
                color:#fafafa;
                color:rgba(255,255,255, 0.9);
                text-align:center;
                text-decoration:none;
                text-shadow:1px 2px 1px #07526e;
                border:none;
                background:#109bce;
                background-image:linear-gradient(to bottom, rgb(14,137,182) 20%, rgb(22,179,236) 100%);
                border-radius:5px;
                box-shadow:inset 0px 1px 0px #2ab7ec, 0px 6px 0px 0px #07526e, 0px 10px 5px #999;
                transition:background-image .15s ease-in;
                }
            a.btn:hover, a.btn:focus,
            input.btn:hover, input.btn:focus {
            	color:#fff;
            	background-image:linear-gradient(to bottom, rgb(14,137,182) 2%, rgb(22,179,236) 70%);
                box-shadow:inset 0px 1px 10px #2ab7ec, 0px 6px 0px 0px #07526e, 0px 10px 5px #999;
                transition:background-image .15s ease-in;
            	}
            a.btn:active, 
            input.btn:active {
                top:3px;
                text-shadow:1px 1px 2px #07526e;
                box-shadow:inset 0px 30px 40px #2ab7ec, 0px 1px 0px 0px #07526e, 0px 3px 5px #aaa;
                }
            a.btn:active:before,
            input.btn:active:before {
                top:7px;
                font-size:50px;
                text-shadow:0px 3px 0px #07526e, 0px 5px 1px #07526e, 3px 0px 1px #07526e, 3px 3px 1px #07526e,
                -2px 0px 1px #68cff2;
                }





/* 3. Homepage
-------------------------------------------------- */

  #service-list-container {margin:0;}
  #service-list-container h4:last-child {margin-top:8em;}

	#service-list {margin:0 -1%; padding:0;}
	#service-list li {
		position:relative;
		display:inline-block;
		height:175px;
		min-width:40%;
		margin:1%;
		list-style:none;
		overflow:hidden;
		/*background:rgba(255,255,255, 0.2);
		background:#111;*/
		}
		#service-list li a {display:block; }
		#service-list li img {opacity:0.5;}
		#service-list li h4 {position:absolute; bottom:35%; left:0;}
		#service-list li h4,
		#services-list li h4 {
			display:block;
			width:100%;
			margin-bottom:0; padding:.3em 0em .4em;
			color:#07526e;
			font-size:1.6em;
			font-weight:bolder;
			text-align:center;
			/*  -webkit-text-stroke: 1px #fff;
				-webkit-text-fill-color: #109bce;  */
			text-shadow: 
				 2px   0  0   #fff, 
				-2px   0  0   #fff, 
				 0    2px 0   #fff, 
				 0   -2px 0   #fff, 
				 1px  1px 0   #fff, 
				-1px -1px 0   #fff, 
				 1px -1px 0   #fff, 
				-1px  1px 0   #fff,
				 1px  1px 5px #fff;
				/*background:rgba(255,255,255, 0.25);
				border-top:1px solid rgba(255,255,255, 0.8);
				border-bottom:1px solid rgba(255,255,255, 0.8);*/
			}

			/* hover styles */
				#service-list li a:hover img {opacity:.85}



  #secondary {}
	#intro h4 {font-weight:normal; font-size:1.3em;}
	
	hr {margin:2em 0;}
	
	#contact-info {
		margin:.2em 0 2.2em;
		list-style:none;
		font-size:1.4em;
		font-weight:bold;
		}
		#contact-info li {display:inline-block;}
		#contact-info li a {
			margin:0 .7em;
			text-decoration:none;
			border:none;
			}
			#contact-info li .btn{
				padding:.45em 1.1em .48em .95em;
				border-radius:4px;
				}
			#contact-info:last-child li {margin-top:3px;}
		#contact-info li tel {padding-left:48px; font-size:1.1em; color:#07526e!important;}
		#contact-info li i {
			position:relative;
			top:32px; left:0;
			display:block;
			margin-top:-15px;
			font-size:1.85em;
			color:#07526e;
			}


	.recent-project {margin-bottom:2.5em;}
		.recent-project a {text-decoration:none;}
			#gallery-container {margin:.75em auto 1em;}
				.recent-project img {
					margin:.5em 0 1.2em; padding:0;
					background:#fff;
					box-sizing:border-box;
					}
			.recent-project h4 {margin-bottom:0}
			.recent-project p.location {margin-bottom:.75em;}
			.recent-project p:last-child {display:inline; color:#109bce; border-bottom:1px dotted #109bce;}
			.recent-project p:last-child:hover {color:#07526e; border-color:#07526e;}



	ul.accreditations {margin-left:0; list-style:none;}
	ul.accreditations li {display:inline-block; width:19%; margin:0 0% 1.5em; vertical-align:middle;}
		ul.accreditations li:first-child {margin-left:0;}
		ul.accreditations li:nth-child(3),
		ul.accreditations li:last-child {margin-right:0;}

		.home ul.accreditations {margin-bottom:0em;}





/* 4. Services
-------------------------------------------------- */

	#services-content {}
		#services-container {}

			#services-list {margin:0 2em 0;}

			#services-list .srv-service {
				height:auto; overflow:visible;
				min-height:700px;
				margin-bottom:4em;
				padding:1.5em 1.5em 2em;
				text-align:justify;
				background:#f0f0f0;
				}
				#services-list .srv-service img {width:100%; margin-bottom:.5em;}
				#services-list .srv-service h4 {
					display:inline-block;
					position:relative;
					margin:0 0 .3em;
					padding: .3em 0em .5em;
					color: #07526e;
					font-size: 1.6em;
					font-weight: bolder;
					text-align:center;
					text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 5px #fff;
					}
				#services-list .srv-service p {padding:0 2px; text-align:center;}
				
				#services-list .srv-service ul {
					margin:0 4px; padding-left:16px;
					list-style:circle;
					}
					#services-list .srv-service ul li {
						display:block;
						height:auto;
						margin-bottom:.25em;
						list-style:circle;
						color:#555;
						line-height:1.4em;
						text-align:left;
						}

				#srv-extra {margin-bottom:1em;}
				#srv-extra ul, #srv-extra li {list-style:none!important;}





/* 5. About
-------------------------------------------------- */

	#about-content .w-70 p:first-child {margin:1.2em 0 2.2em!important;}
	#company-info-container {
		padding-top:2.2em;
		}
		#company-info-container ul {
			margin:0 0 3em; padding:0;
			list-style:none;
			text-align:center;
			}
			#company-info-container ul:last-child {margin-bottom:0;}
			#company-info-container li {margin:1em;}

			#company-info {}
				#company-info h5 {margin-bottom:0; font-weight:normal;}
				#company-info h4 {font-size:120%;}
				#company-info li:nth-child(2) {margin-bottom:0;}
					#company-info img {width:60%; max-width:70px; margin-top:.5em; opacity:.5; transform:rotate(0deg);}
				#company-info li:nth-child(3) {margin-top:.5em;}

			#staff-container {}
				#directors {
					margin:1em auto 0; padding:0;
					list-style:none;
					}
					#directors li {
						display:inline-block;
						text-align:center;
						}
						#directors h5 {font-weight:normal;}
						#directors h4 {margin-bottom:.2em; font-size:1em;}
						#directors h5 {font-size:.9em;}
						#directors img {display:block; max-width:200px; margin:0 auto 1.2em; background:#ddd;}





/* 6. Contact
-------------------------------------------------- */

	#contact-details-container {padding:0 2em;}

		#sidebar {text-align:right;}

		.contact #contact-info {
			margin-top:2em;
			text-align:right;
			}

		#office-hours-container {
			list-style:none;
			text-align:right;
			}
			#office-hours-container h5, #more-container h5 {font-size:1.1em;}			
			#office-hours-container li:first-child {padding-right:4px;}
			#office-hours li,
			#office-hours li:first-child,
			#office-hours-container li:first-child ul li {list-style:none; padding-right:0;}

			li#address {margin-bottom:4em;}
			li#address h5,
			li#address address {display:inline!important;}
			li#address img {filter:grayscale(100%); margin-top:1.5em;}



	#contact-form-container {margin-top:4em; margin-bottom:4em;}
		#contact-form {
			min-height:200px;
			margin-top:2em; margin-left:3em;
			padding:1.6em 2em 1.5em 1.5em; /*padding-top:1.52em*/
			background:#e5e5e5;
			box-sizing:border-box;
			}
			#form-l, #form-r {
				display:inline-block;
				background:rgba(255,255,255, 0);
				}
				#contact-form label {display:none;}
				#contact-form input[type=text],
				#contact-form input[type=email],
				#contact-form textarea {
					display:block;
					min-width:80%;
					margin:0 0 10px 0; padding:8px 7px;
					font:1.1em Arial, "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
					background:#fff;
					border:1px solid #eee;
					border-radius:0;
					}
					textarea {
						width:95%; min-height:150px;
						margin-bottom:12px;
						}
					#form-r {text-align:right!important}
					#form-r input[type=submit] {
						min-width:50%;
						margin:.5em -3px .75em 0;
						padding:.6em 1.1em .65em .95em;
						float:right;
						font-size:1.1em;
						font-weight:bold;
						border:none!important;
						}

	    /* successful send confirmation */
	        .uf_fadeout {
	        	visibility: hidden;
	        	opacity: 0;
	        	transition: visibility 0s 2s, opacity 2s linear;
	        	}
	        .uf_success {
		        max-width:35%;
		        margin:-15em auto 4em auto; padding:2em 0 .8em 0;
		        font-size:1.1em;
		        background:rgba(255,255,255, 0.0);
		        visibility:hidden;
		        opacity:0;
		        transition: visibility 0s 2s, opacity 2s linear;
		        }
		        .uf_success h4 {margin-bottom:1.4em; color:#109bce; line-height:1.3em;}



	.accreditations-band {display:block; margin:1.5em auto 4em; width:60%;}
	.accreditations-band ul li {width:16%; padding:0 1.5%; opacity:.8}

	#map {
		/*width:100%;*/
		height:400px;
		background-color:#ddd;
		}

	#more-container {margin:6em auto 1em; text-align:center;}






/* --------------------------------------------------
   X. Media Queries
-------------------------------------------------- */

   /* Desktop Large
   -------------------------------------------------- */
	  @media only screen and (min-width: 1401px) {
		body {max-width:1300px; background:#8389AA; background:#fafafa; font-size:100%} /*purple*/
		 .page {margin:0 0px; padding:20px;}

		 	header.e2e {height:58px;}
	            #header-content {max-width:1298px; padding:20px 0 8px;}
	            header h1#logo img {width:176px; margin-top:-3px;}
	            nav {right:0;}
	            nav ul li a {font-size:1.1em;}

			#pano {max-height:275px; margin-bottom:2em;}

            footer {padding:1.5em 0 2em;}
			footer .row {max-width:1300px;}
			#pu-request input {height:29px;}
			#pu-submit {width:89%!important; height:auto!important; padding-bottom:9px; font-size:.95em;}

	            #contact-info {text-align:center; font-size:1.4em;}
	            .home #contact-info {font-size:1.2em;}
		            #contact-info li .btn {padding-left:1.4em; padding-right:1.5em;}
		            #contact-info li a {margin-right:3em;}
		            #contact-info li a:first-child {margin-left:0;}
		            #contact-info li i {top:33px; font-size:2em;}
		            #contact-info li tel {padding-left:53px;}

				#project-update {padding-right:5em;}
		        #testimonial {padding-left:0;}

			
			/* Services */

				#services-list .srv-service {min-height:700px; margin-bottom:4em; padding:1.75em 1.75em 2.25em;}
				#services-list .srv-service:nth-child(4) {margin-left:0;}
				#services-list .srv-service img {height:auto;}


			/* Contact */

				#sidebar #contact-info li i {font-size:1.5em;}

				#contact-form-container {width:85%;}
				#contact-form {min-height:285px; margin-left:2em;}
					#form-r textarea {height:169px;}
					#form-r input[type="submit"] {min-width:40%; margin-top:.4em; margin-right:1px; padding:11px 0 9px 0!important;}
					.uf_success {margin:-15.5em auto 4em auto;}

		        #office-hours-container li#address h5 {display:inline!important;}
		       	#office-hours-container li#address address {display:inline!important;}

		       	.accreditations-band {margin-bottom:5em}

		       	#map {margin:0 26px;}
            

	  }





   /* Desktop
   -------------------------------------------------- */
	  @media only screen and (min-width: 1026px) and (max-width: 1400px) {
		body {max-width:1100px; background:#71B7EA; background:#fafafa;} /*blue*/

			
			footer .row {max-width:1100px;}
				#contact-info {text-align:center;}
		        #contact-info li a:first-child {margin-left:0;}
				#project-update {padding-right:4em;}
				#testimonial {}


			/* Services */

				#services-list .srv-service:nth-child(3),
				#services-list .srv-service:nth-child(5) {margin-left:0;}


			/* Contact */

				#contact-form-container {width:80%;}
		       	#map {margin:0 26px;}


	  }





   /* Tablet Landscape
   -------------------------------------------------- */
	  @media only screen and (min-width: 770px) and (max-width: 1025px) {
		body {background:#7EAC88; background:#fafafa;} /*green*/


				#header-content {padding:20px 30px 8px;}
					nav ul li a {padding:.5em 1em .6em; font-size:.95em;}

				footer {padding:0;}
				footer .row {max-width:1025px;}
				footer p {font-size:1.1em; line-height:1.4em;}
				footer #pu-submit {padding:.55em 1.1em .65em .95em;}

				/* Typography */

				h2 {font-size:1.8em;}
				h2.top-pad {margin-top:.6em; line-height:1.3em;}
				h3 {font-size:1.55em;}
				h4 {margin-bottom:1.35em; font-size:1.4em; line-height:1.5em}
				h5 {font-size:1.1em;}

				p, li {font-size:1.15em;}


			#content {padding-top:40px}
          

			#intro h2 {margin-bottom:1.2em;}
			#intro h4 {font-size:1.25em;}
			#service-list li {height:142px;}
            #contact-info {margin-bottom:1.8em;}
            #contact-info li {margin:0 auto; text-align:center;}
	        #contact-info li:first-child {}	            
	        #contact-info li:last-child {padding:0; vertical-align:middle;}
            #contact-info li a {margin:0 auto; font-size:.9em; text-align:center;}
            #contact-info li .btn {padding-left:.75em; padding-right:.75em; font-size:.9em;}
            #contact-info li i {position:relative; top:3px; left:auto; display:inline; padding:0; font-size:1.2em;}


            #contact-info li tel {display:inline-block; padding-left:0; font-size:1.05em; color:#07526e!important;}

            	.home #contact-info li:first-child {margin-right:1em;}
            	.home #contact-info li i {display:block; margin:0 auto .25em;}

			ul.accreditations {margin-left:0; list-style:none;}
				ul.accreditations li {display:inline-block; width:29.5%; margin:0 2% 1.5em; vertical-align:middle;}
				ul.accreditations li:first-child {margin-left:0;}
				ul.accreditations li:nth-child(3), ul.accreditations li:last-child {margin-right:0;}

				.home ul.accreditations {margin-bottom:1em;}
				.home ul.accreditations li {margin:0 1.5%;}
				.home ul.accreditations li:first-child {margin:0 1%;}


			/* Services */

			#services-list .srv-service {min-height:820px!important; padding:1em 1em 1.5em;}
			#services-list .srv-service p, li {font-size:1.05em}
			#services-list .srv-service:nth-child(3),
			#services-list .srv-service:nth-child(5) {margin-left:0;}


			/* About */

			#about-content, #history {}
			#company-info-container {padding-top:.8em;}
			#company-info-container h5 {font-size:1em;}


			/* Contact */

			li#address img {margin-top:2.35em;}

			#contact-form-container {margin-top:5em;}
			#contact-form {margin-left:0; padding:1em 1.7em 1em 1em;}
				#message {min-height:151px;}
				#form-r input[type=submit] {margin-right:-4px;}
				.uf_success {max-width:50%; margin:-17em auto 4em auto; font-size:.9em;}
			#sidebar #contact-info {margin-top:3.5em;}
			#sidebar #contact-info li i {top:1px; margin-right:.35em;}

			#map-container {text-align:center;}
			
			.accreditations-band {width:100%;width: 80%; margin:2em auto 6em !important;}
				ul.accreditations {margin:2em auto 6em; display:block;}
				ul.accreditations li,
				ul.accreditations li:first-child {width:15%; margin:0 2.5%; padding:0;}


	  }





   /* Tablet Portrait
   -------------------------------------------------- */
		@media only screen and (min-width: 670px) and (max-width: 769px) {
		 body {background:#F2EA9C; background:#fafafa;} /*yellow*/


            	#header-content {padding:20px 25px 8px;}
            		nav {right:25px;}
            		nav ul li a {padding:.5em 1.2em .6em; font-size:.9em;}

				footer .row {max-width:769px;}
				#pu-submit {width:92%!important; margin-top:0;}
				q p {font-size:.9em}


			/* Typography */

				h2 {margin-bottom:1.4em; line-height:1.3em; font-size:1.4em;}
					h2.top-pad {margin-top:.5em;}
				h4 {margin-bottom:1em; font-size:.9em;}
				h3 {font-size:1.3em;}
				h5 {margin-bottom:1em;}



			#pano {height:165px; padding-bottom:0;}
          	#content {padding-top:36px}
          	#touch-container {margin-bottom:0!important;}
            
            	#intro h4 {font-size:1.2em;}
            	
            	#service-list-container h4 {}
          		#service-list li {height:128px;}

	            #contact-info {margin-bottom:0;}
		            #contact-info li {display:block; margin:0 auto 1em; text-align:right;}
		            #contact-info li a {max-width:50%; margin-left:auto; margin-right:auto; }
		            #contact-info li .btn {margin-bottom:.5em; padding:.35em 1.05em .35em 1em;}
		            #contact-info li:last-child {margin-top:0em;}
		            #contact-info li i {position:relative; top:3px; font-size:1.6em; left:auto; display:inline;}
		            #contact-info li tel {display:inline-block; padding-left:8px; color:#07526e!important;}

		         	.home #contact-info li {text-align:center;}

		        .recent-project {}

				.home ul.accreditations {width:100%;}



		    /* Services */

		    #services-list li.w-50 {min-height:680px;}
		    #services-list li.w-50:nth-child(3),
			#services-list li.w-50:nth-child(5) {margin-left:0;}


			/* Contact */

			.contact #contact-info {margin-top:1em;}
				li#address img {margin:1.4em 0 .5em 0;}
				li#address address {font-size: 1.15em;}

			#contact-form-container {margin-top:5em; margin-bottom:2em;}
				#contact-form {margin-left:0; padding:1.2em 1.2em 0!important;}
				#form-l input {width:93.5%; padding-right:8px;}
				#form-r textarea {width:93.25%;}
				#form-r {margin-bottom:0;}
				#form-r input[type=submit] {margin-bottom:1.4em; margin-right:6px; padding:.55em 1.1em .6em .95em;}
				.uf_success {max-width:70%; margin:-15em auto 0 auto; font-size:1em;}
				.uf_success h4 {font-size:1.1em;}

			.accreditations-band {display:inline-block; width:100%; margin:0 auto 2em;}
			.accreditations-band .accreditations {margin-bottom:7em;}
				ul.accreditations {width:80%; margin-left:auto; margin-right:auto; list-style:none;}
					ul.accreditations li {display:inline-block; width:16.2%; margin:0 auto 1.5em; vertical-align:middle;}
				  	ul.accreditations li:first-child {margin-left:0;}
				  	ul.accreditations li:nth-child(3), ul.accreditations li:last-child {margin-right:0;}

			#map-container {clear:both; text-align:center;}

			#more-container {margin:4em auto 1em;}




		}





/* Mobile Portrait
-------------------------------------------------- */
   @media only screen and (min-width: 200px) and (max-width: 669px) {
	  body {text-align:center; background:#EE949B; background:#fafafa;} /*red*/
	  #wrapper {margin:0; padding:0 10px; overflow:hidden!important;} /* remove margin to remove gutter */


		header {margin:0 auto; margin-bottom:0; padding:5px 0 0;}
        header.e2e {left:0; width:100vw; height:50px;}
	       	#header-content {padding:3px 0; text-align:left;}
	       	#header-content a, #touch-contact a {border:none; text-decoration:none;}
	            header h1#logo {margin-top:7px; margin-left:0; background:none!important;}
	            header h1#logo a {margin-left:.65em;}
	            header h1#logo img {width:120px;}


	  .mob-only {display:block;}

	  /* mobile navigation */
		 #burger {display:inline-block; z-index:120; position:absolute; top:8px; right:15px; font-size:2.2em; color:#dadada;}
		 #burger:hover {color:#fff;}
		 #burger:active {color:#109bce;}

		 #burger-nav {display:none; position:absolute; top:50px; right:0; z-index:100; width:100%; margin:0 0 2em; padding:0; background:#07526e;}
		 #burger-nav ul {display:block; position:relative; top:0; right:0; width:100%; margin:0 auto; padding:0 0 .3em; background:rgba(0,0,0, 0.4);}
		 #burger-nav ul li {display:block; float:none; margin-left:0; border-left:none; margin-bottom:2px;}
		 #burger-nav ul li a {display:block; height:23px; margin:0; padding:14px 1em 10px; color:#ccc; font-size:1.1em; background:rgba(255,255,255, 0.05); border-left:0;}
		 #burger-nav ul li a:focus,
		 #burger-nav ul li a:active {color:#109bce;}

		 #wrapper {position:relative; z-index:0}

		 /* Show the menu when animating or visible */
			.animating #burger-nav, .menu-visible #burger-nav { 
			  display: block;
			}
		/* If the animating class is present then apply the CSS transition to #wrapper over 250ms */    
			.animating #wrapper {
			  transition:                 transform .25s ease-in-out;
			}
		 /* If the down class is present then transform the #wrapper element 45px to down */   
			.animating.down #wrapper {
			  transform:                  translate3d( 0, 0px, 0 );
			}
		 /* If the right class is present then transform the #wrapper element 45px to the up */
			.animating.up #wrapper {
			  transform:                  translate3d( 0, 0px, 0 );
			}
		 /* If the menu-visible class is present then shift the #wrapper 45px up
			via position: absolute to keep it in the open position. When .animating,
			.down and .up classes are not present the CSS transform does not apply to #wrapper */
			.menu-visible #wrapper {      top: 0!important; }

		 /* minimize the flickering */
			#wrapper, #burger-nav {
			}

		ul {margin-left:1em;}
		ul ul {margin-left:1em;}

		#touch-contact {margin:1.2em auto 0; padding-top:12px;}
			ul#touch-contact li {display:inline-block; width:80px; margin:0 auto; font-size:1em;}
			ul#touch-contact li:first-child {margin-right:1em;}
			ul#touch-contact li a {display:block; padding:.5em 0 1em; text-align:center; color:#07526e; font-weight:bold;}
			ul#touch-contact li a i {display:block; margin:0 auto 0.15em auto; font-size:2.2em; color:#109bce;}
			ul#touch-contact li:last-child a {border:none; text-decoration:none;}


		footer {padding-top:1em; line-height:1.4em}
		
		footer div.row {max-width:669px; padding:16px 20px 20px;}
		footer div div {padding:0; text-align:center;}
		footer #project-update, footer #testimonial {margin-bottom:3em!important;}

			footer h5 {font-size:1.25em;}
			footer h6 {font-size:.9em; margin-top:1.4em; margin-bottom:0.5em; color:rgba(255,255,255,0.8);}
			footer address {font-size:1.15em;}
			footer p {margin:1.25em 0; line-height:1.4em}
			footer a {text-decoration:none;}
			
			footer #project-update {margin-top:3em!important;}
			footer #pu-request {width:94%; margin:2em auto 1em auto;}
			footer #pu-request input#pu-org,
			footer #pu-request input#pu-email {padding:5px 7px; font-size:1.1em}
			footer #pu-submit {width:90%!important; margin-top:0; padding:.8em 0 .95em; font-size:1.1em}

			footer #testimonial h5 {margin-bottom:0;}
				footer q p {font-size:1.15em}
					q::before {left:0; top:50px;}
					q::after {right:20px; bottom:-120px; font-size:22em;}
					.testimonial-author {text-align:center!important;}
		

	/* Typography */

		h1,h2,h3,h4,h5,h6 {background:rgba(0,0,0, 0);}
		
		h2 {margin-bottom:.75em;}
		h2, h3 {padding:0 10px;}
		h3 {font-size:1.25em;}
		h4 {padding:0 15px; font-size:1.2em;}

		p {font-size:1.15em;}

		#pano {margin-bottom:1.6em; padding:0; height:auto;}


	/* Homepage */

		#service-list-container {}
		#service-list-container h4 {}
		#service-list-container p:last-child {margin-bottom:4em;}

		#service-list-container {margin:0 -20px;}
		#service-list-container h4 {margin:3.75em auto 1em auto; font-size:1.25em; line-height:1.4em;}
		#service-list li {height:100px; margin:1% 1% 1.4em 1.12%;}
		#service-list li a {border-bottom:none;}
		#service-list li h4 {font-size:1.5em; line-height:1.1em;}
		#service-list li:nth-child(4) h4 {margin-bottom:-.6em;}
		
		h2.top-pad {margin-top:0; margin-bottom:2.35em; line-height:1.3em;}

		#contact-info {text-align:left;}
		#contact-info li {width:48%; text-align:center;}
		#contact-info li a {margin-right:.5em;}
		#contact-info li a.btn {margin:0 auto; font-size:.9em;}
		#contact-info li i {display:inline; position:relative; top:2px; left:10px; padding:0; font-size:1.3em;}
		#contact-info li tel {padding-left:2px; font-size:.9em;}

		.home #contact-info {margin-bottom:0;}
		.home #contact-info li {vertical-align:top; text-align:center!important;}
		.home #contact-info li i {display:block; margin: 0 auto .25em!important; left:0;}

		.recent-project a h4 {margin-bottom:.75em; font-size:1.1em; line-height:1.3em;}
		.recent-project img {padding:.15em;}

			#recent-project-highlight,
			#accreditations {
				display:inline-block;
				min-height:290px;
				margin-bottom:0;
				vertical-align:top;
				}
			#recent-project-highlight p,
			#accreditations p {font-size:1em;}
			#recent-project-highlight h4 {padding:0;}

		#accreditations p {padding:6px 8px; line-height:1.35em; margin-bottom:1em;}
		
		.home ul.accreditations {margin-left:auto; margin-right:auto; margin-bottom:.5em; padding-left:7px; list-style:none;}
		.home ul.accreditations li {margin-bottom:0;}
		ul.accreditations li {display:inline-block; width:32.5%; margin:0 auto 1.5em; vertical-align:middle;}

		#secondary { }


	/* Services */

		#services-list {margin:0 .5em;}
		#services-list .srv-service {min-height:300px!important; margin-bottom:4em!important;}
		#services-list .srv-service h4 {padding-top:.3em; padding-bottom:0; font-size:1.85em;}
		#services-list .srv-service p, #services-list .srv-service li, #srv-extra li {font-size:1.1em;}
		#services-list .srv-service ul {margin-top:.5em;}
		#srv-extra h5 {font-size:1.1em;}
		#services-list .srv-service {padding: 1em 1em 1.5em;}
		#services-list .srv-service ul {padding:0 8px 8px;}
		#services-list .srv-service ul li {margin-bottom:.5em;}


	/* About */

		#company-info-container {margin:0em auto 3em!important;}
		#directors {margin:1em auto 2em;}
		#directors li:first-child {margin-bottom:2.5em!important;}
		#directors li:nth-child(2) {margin-left:0;}
		#history {margin-bottom:4em;}


	/* Contact */

		#contact-details-container {padding:0 1.2em;}
		#contact-form-container {margin-bottom:3em;}

		#contact-form {width:94%!important; max-width:300px; margin:1.25em auto 0; padding:4% 3.25% 0; font-size:1.1em; text-align:center; border-radius:3px;}
			#form-r {text-align:center!important;}
			  	#contact-form input[type=text],
			  	#contact-form input[type=email],
				#contact-form textarea {width:90.5%; margin:0 auto .5em; padding:10px 9px 7px; text-align:left; background:#fff; border:1px solid #eee; border-radius:2px;}
					#contact-form input#tel {margin-top:1.5em;}
					#contact-form textarea {margin:1.1em auto 1.6em; text-align:left;}
			  	#contact-form #submit {
			  		width:96.5%;
			  		float:none;
			  		margin:0 0 1.5em; 
			  		font-size:1.15em;
			  		}
				.uf_success {max-width:80%;}
				
		#sidebar {text-align:center;}
		  	#sidebar #contact-info {width:100%; text-align:center;}
		  	#sidebar #contact-info li {width:100%; text-align:center;}
		  	#sidebar #contact-info tel {font-size:1.2em; padding-left:0;}
		  	#sidebar #contact-info li i {left:0; display:block; width:auto; margin:0 auto .3em; font-size:1.85em;}
		  	#sidebar ul {width:100%; margin-left:0; margin-right:0;}
		  	
		  	#office-hours-container {margin:0 0 4em 0; text-align:center;}
		  	#office-hours-container li:first-child {font-size:1.15em;}
		  		ul#office-hours {margin-bottom:2.5em; font-size:1.15em;}
		  	#office-hours-container li ul li:first-child {font-size:1em;}
		  	#office-hours-container h5 {font-size:1.15em;}

		  	#address img {margin-top:.5em; margin-bottom:1em;}

		  	#accreditations {min-height:0!important; margin-bottom:1.5em;}
				.accreditations {width:100%; margin-bottom:3.45em;}
				.accreditations li {width:16.5%!important; padding:0;}
				ul.accreditations li {padding:0;}
				
		#map-container {padding:0 .5em;}
		#map {margin:1em -9px 3.5em; height:600px!important;}
		.mapouter, .gmap_canvas, iframe {height:600px!important;}

		#more-container {margin-top:5em;}



   }