﻿/* Global */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
a, em, img, strong, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, embed,  footer, header, hgroup, 
menu, nav, output,  section, summary,
time, mark, audio, video
 {
	margin: 0;
	padding: 0;F
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {	content: ''; content: none;
}
table {border-collapse: collapse; border-spacing: 0; width:100%;
}
strong	{font-weight:500;
}
#phone-text a{color:#fff; text-decoration:none;
}
img	{vertical-align:bottom;
}
i	{font-style:italic;
}
/*--reset--*/

html { }
body {margin: 0 !important; padding: 0 !important; background-color:#fff;
}
a:link	{text-decoration:none; color:#177051; font-weight:400;
}
a:visited	{text-decoration:none; color:red;
}
a:hover	{color:#1d6f69;
}
a:active	{color:red;
}
a.x:link	{text-decoration:none; color:#000;
}
a.x:visited	{text-decoration:none; color:#000;
}
a.x:hover	{color:#1d6f69;
}
a.x:active	{color:red;
}
a.y:link	{text-decoration:none; color:#fff; font-weight:600;
}
a.y:visited	{text-decoration:none; color:#fff;
}
a.y:hover	{text-decoration:none; color:#fff;
}
a.y:active	{text-decoration:none; color:#fff;
}
a.bl:link	{text-decoration:none; color:#0013b9;
}
a.bl:visited	{text-decoration:none; color:blue;
}
a.t:link	{text-decoration:none; color:#0013b9;
}
a.t:visited	{text-decoration:none; color:blue;
}
a.t:hover	{text-decoration:none; color:red;
}
a.t:active	{text-decoration:none; color:#0013b9;
}
a.w:link	{text-decoration:none; color:#fff;
}
a.w:visited	{text-decoration:none; color:#fff;
}
a.w:hover	{text-decoration:none; color:#fff;
}
a.w:active	{text-decoration:none; color:#fff;
}
#phone-text a	{color:#fff; text-decoration:none;
}
.wrapper	{max-width:1920px; width:100%; margin:0 auto; position:relative;
}
.header		{width:100%; float:left; background:url('manchester.jpg'); background-size:cover;
}
.title		{width:96%; float:left; margin:4% 0 1% 4%;
}
.title h2	{font-family: "Prosto One", sans-serif; font-weight:400; font-style: normal; color:#fff; font-size:180%; padding:0; margin:0;
			text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000,
             1px 1px #000, -1px -1px #fff, 1px -1px #000, -1px 1px #000;
}
.header-2	{width:100%; float:left; position:relative;
}
.logox	{width:12%; float:left; margin:1% 0 0 4%; 
}
.logo-2	{width:12%; position:absolute; left:4%; top:4%;
}
.menu-outer	{width:100%; float:left;  background:linear-gradient(to right, #506673, #afc3cf); border-top:1px red solid; border-bottom: 1px red solid;
}
.ac-100		{width:100%; float:left;
}
.col-100	{width:100%; float:left; background:#506673;
}
.col-100-70	{width:70%; float:left; margin:1% 15%; text-align:center;
}
.grey-100	{width:100%; float:left; background:#f0f0f0;
}
.rep-100	{width:100%; float:left; background:url('sq2.jpg');  background-repeat:repeat;
}
.sci-100	{width:100%; float:left; background:url('science-roofing.jpg');  background-position:left; height:130px;
}
.sci-in	{width:70%; float:left; margin:50px 0 30px 140px;
}
.sci-in h1	{font-family: "Prosto One", sans-serif; font-weight:400; font-style:normal; color:#fff; font-size:200%;
}
.aut	{width:1200px; margin:2% auto; background:#e3e3e3; border-left:3px red solid; padding:2% 0 2% 4%;
}
.aut-2	{width:1280px; margin:2% auto;
} 
.aut-3	{width:1220px; margin:6% auto; background:#f0f0f0; border:1px #c8c8c8 solid; padding:1%; height:760px;
}
.quart	{width:20.8%; float:left; border:1px #000 solid; margin:2% 2% 2% 2%;
}
.quart-in	{width:96%; float:left; background:#000; padding:2%;
}
.quart-in p	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; color:#fff; line-height:120%; padding:0; text-align:center;
}
.a3-L	{width:64%; float:left; margin:0; text-align:justify;
}
.a3-L2	{width:60%; float:left; margin-top:2%; background:#f8f8f8; padding:2%;
}
.a3-R	{width:32%; float:right;
}
.ac-96	{width:96%; float:left; margin:4% 2% 2% 2%;
}
.ac-70	{width:70%; float:left; margin:2% 15%;
}
.ac-60	{width:60%; float:left; margin:2% 20%
}
.ac-65	{width:50%; float:left; margin:4% 23% 2% 25%; padding:2%; border:2px #c8c8c8 solid; background:#f0f0f0;
}
.ac-65 h4	{font-family: "Roboto", sans-serif; font-weight:600; font-style: normal; font-size:140%; color:#000; line-height:130%; margin-bottom:2%;
}
.ac-65 p	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; color:#000; line-height:140%; padding-bottom:2%;
}
.ac-50L	{width:47.5%; float:left; margin:2% 2% 2% 0; border:1px #000 solid;
}
.ac-50R	{width:47.5%; float:left; margin:2% 0 2% 2%; border:1px #000 solid;
}
.ac-50-in	{width:98%; float:left; padding:1%; background:#9e0000;
}
.ac-50L p	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; color:#fff; line-height:130%; padding:0;
}
.ac-50R p	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; color:#fff; line-height:130%; padding:0;
}
.tel	{width:100%; float:left; background:#8a8a8a; border-top:1px #000 solid; border-bottom:1px #000 solid; 
}
.tel-in	{width: 240px; margin:4px auto; text-align:center;
}
.tel-in p	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:18px; color:#fff; line-height:130%; padding:0;
}
.just	{width:100%; text-align:justify;
}
.pad	{width: 96%; float:left; margin:2% 2% 0 2%;
}
.footer	{width:100%; background:#1e2d36; float:left; padding-bottom:1%;
}
.f-1	{width:140px; float:left; margin: 14px 20px 0 40px;
}
.f-2	{width:310px; float:left; margin:1.8% 0 0 20px; text-align:left;
}
.f-2 p	{font-family: "Prosto One", sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size:18px;
}
.f-3	{width:160px; float:left; margin:1.8% 3.3% 0 20px; 
}
.f-3 p	{font-family: 'Roboto', sans-serif; font-size:18px; font-weight:300; color:#fff; margin:0;
}
.f-4	{width:290px; float:left; margin:1.8% 3.3% 0 20px; 
}
.f-4 p	{font-family: 'Roboto', sans-serif; font-size:18px; font-weight:300; color:#fff; margin:0;
}
.clear	{clear:both;
}

.spacer	{width:100%; height:5px; margin:2% 0; float:left;
}
.spacer-sp	{width:100%; height:5px; margin:4% 0; float:left;
}
.spacer-sm	{width:100%; height:5px; margin:1% 0; float:left;
}
.spacer-adjust	{width:100%; height:15px; margin:6%; display:none;
}
.spacer-2	{width:100%; height:15px; margin:3% 0; float:left;
}
.cent	{width:100%; float:left; text-align:center;
}
.line	{width:100%; float:left; height:1px; background:#c8c8c8; margin:2% 0;
}
.line-w	{width:100%; float:left; height:1px; background:#fff; margin:2% 0;
}
.but	{float:left;  border-radius:4px; border:1px #000 solid; padding:3px 6px; background:#37889a; margin:0 0 10px 10px;
}
.but:hover	{border:1px red solid;
}
.but p	{font-family: 'Raleway', sans-serif; color:#fff; font-size:115%; font-weight:300; line-height:100%; margin:0; padding:0; 
}
.butt-2	{float:left;  border-radius:4px; border:1px #000 solid; padding:3px 6px; background:#fff; margin:0 0 10px 10px;
}

.cred	{width:90%; float:left; margin:0 0 1% 6%;
}
.cred p	{font-family:'Arial', sans-serif; font-size:80%; color:#e3e3e3; margin:0; padding:0;
}
.sitemap	{width:26%; float:left; margin:2% 0 2% 4%;
}
p.site	{font-family: "Raleway", sans-serif; font-size:100%; color:#000; line-height:110%; margin:2% 0 0 0;
}
.line-sitemap	{width:100%; float:left; background:#cccccc; height:1px; margin:0;
}
.splash	{width:16%; float:left; margin:1% 0 0 4%;
}
.vid	{width:32%; float:left; margin:1% 0 0 6%
}
.vidyt	{width:30%; margin:4% 35%; float:left; background:aqua; height:50px;
		  position: relative;
		  overflow: hidden;
		  width: 100%;
		  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.butL	{width:180px; float:left; margin:0 0 0 20px;
}
.butR	{width:600px; float:left; border:1px #353535 solid; margin:25px 0 20px 40px; padding:12px;
}
.butR:hover	{border:1px yellow solid;
}
.table {font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; line-height:140%; padding-bottom:2%;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;
}

tr:hover {background-color: #ddd;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4a74a2;
  color: #fff;
  }
.scrollToTop{
    width:5%; 
    height:auto;
    padding:1%; 
   position:fixed;
    top:85%;
    right:2%;
    display:none;
    z-index:1500;
}
.scrollToTop:hover	{text-decoration:none;
}
.container-70	{width:70%; float:left;  margin:3% 15%; display:flex; align-items:center;
}
.container-cent, .container-cent-2	{width:100%; float:left; display:flex; align-items:center;
}
.container-port-3	{width:100%; padding:2% 0; float:left; border-bottom:2px #adbfbf solid; border-top:2px #adbfbf solid;
				background:linear-gradient(to right, rgba(173,191,191,1),  rgba(173,191,191,0.1),  rgba(173,191,191,1)); 
}
.container	{width:100%; float:left; display:flex; align-items:center;
}
.container-stretch-70	{width:70%; float:left; display:flex; align-items:stretch; margin:0 15%;
}
.portfolio	{width:80%; margin:3% 0 3% 10%; float:left;
}
.build-50	{width:28%; margin:0 0 0 10%; float:left;
}
.build-60	{width:40%; margin-left:8%; float:left;
}
.build-80	{width:70%; margin-left:2%; float:left;
}
.build-20	{width:20%; margin:2% 0 0 2%; float:left;
}
.build-40	{width:35%; margin:2% 0 0 2%; float:left;
}
.third-port	{width:24%; margin:1% 0 1% 1%; float:left;
}
.mail	{width:59%; margin:1% 0 3% 20%; border:1px #000 solid; border-radius:3px; background:lime; text-align:center; 
		float:left; padding-top:1%;
}
#contact-area textarea {
	height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}
#contact-area input.submit-button {
	width: 100px;
	float: right;
}
label {
	float: left;
	text-align: left;
	margin-right: 15px;
	width: 10%;
	padding-top: 5px;
	font-size: 100%;
}


form {width:90%; float:left; margin:4% 5%;
} 
label	 {font-family: "Roboto", sans-serif; font-size:100%; font-weight: 300; font-style: normal; color:#000; line-height:130%; margin:2% 0 1% 0;
}
input, textarea {
width: 90%;
padding: 5px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size:100%;
}
button {
background-color: #28a745;
color: white;
padding: 10px;
margin:20px 0 20px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover { background-color: #218838; 
}
#contactForm	{font-family: "Roboto", sans-serif; font-size:100%; font-weight: 400; font-style: normal; color:#000; line-height:120%; margin-bottom:0;
}
#contactForm textarea{font-family: "Roboto", sans-serif; font-size:100%; font-weight: 400; font-style: normal; color:#000; line-height:120%; margin-bottom:0;
}

h1	{font-family: "Prosto One", sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size:400%;
}
h2	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:170%; color:#fff; padding-bottom:1%; line-height:130%;
}
h2.m	{font-family: "Roboto", sans-serif; font-weight:400; font-style:italic; font-size:160%; color:#35557b; line-height:120%; padding-bottom:2%;
}
h2.marko	{font-family: "Marko One", serif; font-weight:400; font-style: italic; color:#000; font-size:300%; padding-bottom:4%;
}
h3	{font-family: "Prosto One", sans-serif; font-weight: 400; font-style: normal; font-size:160%; color:#4a4a4a; line-height:120%; padding-bottom:0;
}
h4	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:140%; color:#000; line-height:130%; margin-bottom:2%;
}
h4.b	{font-family: "Roboto", sans-serif; font-weight:600; font-style: normal; font-size:140%; color:#000; line-height:130%; margin-bottom:2%;
}
h5	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:140%; color:#304f72; padding-bottom:1%;
}
h6	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:120%; color:#333333; line-height:140%; padding-bottom:3%;
}
h6.s	{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:120%; color:#fff; line-height:140%; padding-bottom:2%;
}
h6.list	{font-family: "Roboto", sans-serif; font-weight:300; font-style: normal; font-size:120%; color:#2d4969; line-height:110%; padding-bottom:0.5%;
}
p		{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; color:#4a4c40; line-height:140%; padding-bottom:2%;
}
p.m	{font-family: "Roboto", sans-serif; font-weight:300; font-style:normal; font-size:100%; color:#2d4969; line-height:130%; padding-bottom:2%;
}
p.m9	{font-family: "Roboto", sans-serif; font-weight:300; font-style:normal; font-size:90%; color:#2d4969; line-height:130%; padding-bottom:2%;
}
p.w		{font-family: "Roboto", sans-serif; font-weight:400; font-style: normal; font-size:100%; color:#fff; line-height:140%; padding:0;
}
.img-100	{width:100%; height:auto; float:left;
}
.img-R	{width:40%; float:right; margin-left:2%;
}
.img-L1	{width:20%; float:left; margin-right:20px;
}
.img-L2	{width:80px; float:left; margin-right:20px;
}
.img-L3	{width:12%; float:left; margin-right:20px;
}
.img-Lsm	{width:80px; float:left; margin-right:10px;
}
.img-p1	{width:24%; height:auto; margin:5px 3px 5px 0; 
}
.img-p2	{width:31%; height:auto; margin:5px 3px 5px 0; 
}
.img-P2a, .img-P2b	{width:32%; height:auto; margin:5px 2px 5px 3px; 
}
.img-P3	{width:23.8%; height:auto; margin:5px 2px 5px 3px; 
}
.img-P4, .img-P4c	{width:47%; height:auto; margin:5px 3px 5px 3px; 
}
.img-P5	{width:57%; height:auto; margin:5px 3px 5px 3px; 
}
.img-P6	{width:42.2%; height:auto; margin:5px 3px 5px 3px; 
}
.img-p6a	{width:48%; height:auto; margin:5px 3px 5px 3px; 
}
.img-mid	{width:70%; margin:0 15%;
}
.img-fxd	{width:120px; margin:10px 0;
}
.img-fxd-2	{width:120px; margin:10px 0 30px 0;
}
.thumb	{width:10%; float:left; margin:2%;
}
.apple-img	{width:15%; float:left; margin:2% 0 2% 34%;
}
.micro-img	{width:10%; float:left; margin:5px 10px 0 0;
}
@media screen and (max-width: 1440px) {
	
}
@media screen and (max-width: 1366px) {
	
	
}
@media screen and (max-width: 1350px) {

	.aut	{width:900px;
}
	.aut-2	{width:960px;
}
	.aut-3	{width:920px;
}
	.quart-in	{height:40px;
}
	.quart	{width:20.4%; 
}
}
@media screen and (max-width: 1280px) {
	
	.logox	{width:16%; float:left; margin:1% 0 0 4%;
}
}
@media screen and (max-width: 1200px) {

	.title h2	{font-size:140%;
}
	.logo-2	{width:16%; position:absolute; left:4%; top:4%;
}
	.ac-70	{width:90%; float:left; margin:2% 5%;
}
}
@media screen and (max-width: 1190px) {
	
	.f-1	{width:140px; float:left; margin: 10px 20px 0 40px;
}
	.f-2	{width:310px; float:left; margin:1.8% 480px 0 20px; text-align:left;
}
	.f-2 p	{font-family: "Prosto One", sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size:18px;
}
	.f-3	{width:160px; float:left; margin:1.8% 3.3% 0 20px; 
}
	.f-3 p	{font-family: 'Roboto', sans-serif; font-size:18px; font-weight:300; color:#fff; margin:0;
}
	.f-4	{width:290px; float:left; margin:1.8% 3.3% 0 20px; 
}
	.f-4 p	{font-family: 'Roboto', sans-serif; font-size:18px; font-weight:300; color:#fff; margin:0;
}
}
@media screen and (max-width: 1024px) {
	
#contact-area {
	width: 96%;
	margin-top: 25px;
}
	#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 90%;
	font-family: Helvetica, sans-serif;
	font-size: 100%;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	
}
	label {
	float: left;
	text-align:left;
	margin-right: 15px;
	width: 30%;
	padding-top: 5px;
	font-size: 100%;
}
	.scrollToTop{
    width:10%; 
    height:auto;
    padding:1%; 
   position:fixed;
    top:85%;
    right:2%;
   
    z-index:1500;
}
}
@media screen and (max-width: 1010px) {

	.logox	{width:22%; float:left; margin:1% 0 0 4%;
}	
	.aut	{width:700px;
}
	.aut-2	{width:740px;
}
	.aut-3	{width: 740px; height:820px;
}
	h4	{font-size:110%;
}
	h1	{font-size:280%;
}
	h2	{font-size:140%;
}
	.sci-in h1	{ font-size:160%;
}
	.sci-in	{width:70%; float:left; margin:50px 0 30px 100px;
}
.ac-65	{width:60%; float:left; margin:4% 22% 2% 15%; 
}
}
@media screen and (max-width: 800px) {

	.header	{height:210px;
}
	.a3-L	{width:95%; float:left; margin:0 5%; text-align:justify;
}
	.a3-L2	{width:95%; float:left; margin:2% 5%; background:#f8f8f8; padding:2%;
}
	.a3-R	{width:60%; float:left; margin:6% 20%;
}
	.aut-3	{width:90%; border:none; float:left; height:auto;
}
	.logo-2	{width:22%; position:absolute; left:4%; top:8%;
}
	.sci-100	{width:100%; float:left; background:url('science-roofing-sm.jpg');  background-position:left; height:100px;
}
	.sci-in h1	{ font-size:140%;
}
	.sci-in	{width:70%; float:left; margin:30px 0 30px 70px;
}
}
@media screen and (max-width: 790px) {

	.col-100-70	{width:90%; float:left; margin:1% 5%; text-align:center;
}
	.aut	{width:360px;
}
	.aut-2	{width:100%; float:left; margin:2% 0;
}
	.quart-in	{height:60px;
}
	.ac-60	{width:80%; margin:2% 10%;
}
	.ac-65	{width:80%; float:left; margin:4% 0 2% 8%; padding:2%;
}
	h4	{font-size:100%;
}
	.img-R	{width:100%; margin:2% 0;
}
	.img-L1	{width:40%;
}
}
@media screen and (max-width: 600px) {

	.micro-img	{width:20%; float:left; margin:5px 10px 0 0;
}
	.logox	{width:26%; float:left; margin:1% 0 0 4%;
}
	.a3-R	{width:90%; float:left; margin:6% 5%;
}
	.quart	{width:44.8%; margin:2% 2% 2% 2%;
}
	.quart-in	{height:40px;
}
	.ac-96	{margin:8% 2% 2% 2%;
}
	.ac-50L, .ac-50R	{width:90%; margin:2% 0 1% 5%;
}
	.f-1	{width:30%; float:left; margin: 2% 35%;
}
	.f-2	{width:90%; float:left; margin:2% 5; text-align:center;
}
	.f-2 p	{font-family: "Prosto One", sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size:18px;
}
	.f-3	{width:90%; float:left; margin:2% 5%; text-align:center;
}
	.f-3 p	{font-family: 'Roboto', sans-serif; font-size:18px; font-weight:300; color:#fff; margin:0;
}
	.f-4	{width:90%; float:left; margin:2% 5%; text-align:center;
}
	.f-4 p	{ font-size:18px; font-weight:300;
}
	.sci-in h1	{ font-size:120%;
}
	.sci-in	{width:80%; float:left; margin:30px 0 30px 50px;
}
	.ac-65	{width:80%; float:left; margin:4% 0 2% 8%; 
}
	h1	{font-size:200%;
}
	h2	{font-size:120%;
}
	h3	{font-family: "Prosto One", sans-serif; font-weight: 400; font-style: normal; font-size:120%;
}
@media screen and (max-width: 400px) {
	
	.aut	{width:96%; padding:2%; margin:0; border:none;
}
	.title		{width:96%; float:left; margin:10% 0 2% 1%;
}
	.logox	{width:30%; float:left; margin:1% 0 0 1%;
}
	.ac-60	{width:90%; margin:2% 5%; text-align:justify;
}
	.img-L1	{width:100%; margin:2% 0;
}
}
@media screen and (max-width: 370px) {

	.quart	{width:80%; margin:2% 10%;
}
	.quart-in	{height:auto;
}
	.f-2 p	{font-size:16px;
}	
	
@media screen and (max-width: 330px) {
	
	
}
