/* CSS Document */

/**********************
	-	RESET	-
************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

 * {
/*	 -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
*/
}


html {
	overflow-x:hidden;
	padding: 0 !important;
	background-image:;
	margin:0px !important;
}

body { 
	margin: 0; padding: 0; border: 0; background-image:url(../images/otis-blue.png); background-repeat:repeat-x repeat-y;
	font-family:Arial, Helvetica, sans-serif;
	 }

* {
	margin: 0;
	padding: 0;
	
	-webkit-font-smoothing: antialiased;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img		{text-decoration:none; 
 		 border-width: 0; }

h1, h2, h3, h4, p {
	font-weight: 400;
	font-family:Arial, Helvetica, sans-serif;
}

	h1	{
		font-size: 24px;
		padding-bottom: 10px;
		text-align:center; }
		
	h2 {
    font-size: 20px;
    text-align: center;
    color: #FFF;
    text-shadow: 2px 2px 2px #999;
	font-weight:bold;
	}

	h3 {
		font-size: 20px;
		padding:15px 15px 10px 15px;
		text-align:left; }
	
		h4 {
		font-size: 20px;
		padding:15px 15px 10px 15px;
		text-align:center; }
	
	h5	{font-size: 18px;
	color: #FFF;
    text-shadow: 2px 2px 2px #999;
	font-weight:bold; text-align:center;				}	
	
	h6	{text-align:center;	color:#666666;	}
	
	b {
		font-weight: 500;
		font-size: 16px;
		
		color: #c3522f; }
	
p {
 padding:10px 0 10px 0; font-size:0.9em; color:#fff; font-family:Arial, Helvetica, sans-serif; line-height:1.8em; }	
 
strong		{text-align:center;			}

/***********************
	-	BASICS 	-
***********************/


ol, ul 		{ list-style: none;  }

a				{color:#0CF; text-decoration:none;}
a:hover			{color:#fff text-decoration:none;}

.clear 		{	clear:both;}
.space10	{	width:100%;height:10px;}
.space15	{	width:100%;height:15px;}
.space20	{	width:100%;height:20px;}
.space30	{	width:100%;height:30px;}
.space40	{	width:100%;height:40px;}

	
header, nav, section, article, aside, footer {
   width:100%; display:block;
}

.wrap {
	margin: 0 auto;
	max-width: 960px;
	position:relative;
}



header 				{ width:100%; float:left; clear:right; background-color:#FFFFFF; }

#logo 				{ max-width:100%; float:left; clear:right; padding-bottom:0.5em;  }

.logo-responsive	{ display:none;	}


.top-info			{ float:left; clear:both; width:39%; margin:-3.5em 0 0 0;  }
.top-info h2		{ text-align:center; color:#666; text-shadow:none; padding:0;	}
.top-info h3		{ text-align:center; font-size:13px; padding:0 0.5em; margin:0 auto;		}


.slider				{float:right; clear:right; max-width:52%; margin:0.5em 0.5em 0 0;	 }

nav					{ width:100%; float:left; clear:right; background-color:#666;		}

.currentLink { 
	background: -webkit-gradient(linear, center top, center bottom, from(#7cd1f6), to(#29aae2));
	background-image: linear-gradient(#7cd1f6, #29aae2);
	border-radius: 6px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.05);
	color: #222;
	}


.page-content				{ width:100%; float:left; clear:right; padding:1em; background-color:#239ED2;		}

.page-content p				{text-align:center;		}


.page-intumescent-banner	{padding-left:70px; 		}
.page-link-button		 	{width:22%; margin:15px 0 0 170px;	}


.left				{ width:65%; float:left; clear:right; margin:0.5em 0 0 0; padding:0.7em; background-color:#239ed2; min-height:540px;		}
.right				{ width:34%; float:right; clear:right;  margin:0.5em 0 0 0; padding:0.7em; background-color:#239ed2; height:auto;	}

.ral		 			{width:35%; margin:15px 0 0 170px;	}
.intumescent 			{width:35%; margin:15px 0 0 170px;	}
.intumescent-banner		{width:80%; margin-left: 5.7em;	}




#box-row {
padding: 10px 0 0 0px;
width:100%; float:left; clear:right;  }

.single-prod-first {
max-width:24%;
margin:0 0.5% 0 0;
float:left;
background-color:#666;
border:none;		}
	
.single-prod {
max-width:24%;
margin:0 0.5% 0 0.8%;
float:left;
background-color:#666;
border:none; }

.single-prod-end {
max-width:24%;
margin:0 0 0 0.5%;
float:right;
background-color:#666;
border:none; }

.single-prod-first .pic, .single-prod .pic, .single-prod-end .pic {
max-width:100%; padding:10px; text-align:center; }

.single-prod-first .description, .single-prod .description, .single-prod-end .description {
padding: 0 10px 0 10px; }

.description, .textlink  {color:#FFF; text-decoration:none; font-size:16px;  margin-top:22px; padding-left:8px; 	}

.description, .bigtext  {color:#000; text-decoration:none; font-size:14px; padding-top:14px;	}

.description		{height:300px;}

.textlink a				{color:#FFF;		}
.textlink a:hover		{color:#333;			}
#box-row .textlink 		{border-bottom: 1px solid #999; border-top: 1px solid #999; }
#box-row h3				{text-align:center;		}




footer				{float:left; clear:both; margin-top:25px; padding-bottom:10px; width:100%; clear:both; background-color:#666;		}
footer p			{ color:#fff; padding-top:20px; text-align:center;	}

.footer-text a				{color:#fff; font-size:12px;	}
.footer-text a:hover		{color:#999;	}



/* Forms */
#contactform		{width:100%; float:left; clear:right;  padding:0 0 0.6em 0;  }

#contactform p		{color:#000; font-size:0.6em; margin-bottom:0; padding-bottom:0px;		}

#contactform fieldset {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	text-transform: capitalize;
	width:100%;
	margin-right: auto;
	margin-left: auto;
	padding-left:1em;
	padding-right:1em;
}
#contactform fieldset p strong input	{ color: #fff;
	background-color:#666;
	padding:0 20px;	 }
	
#contactform fieldset legend {
	font-size: 20px;
	padding-top:5px;
	color: #fff;	}	

#submit			{margin-top:10px; height:40px; border-radius:8px; border: 1px solid #fff; margin-bottom:8px;	}
#submit:hover	{color:#000; background-color:#29AAE2; border: 1px solid #fff; cursor:pointer;     }

textarea 		{width:95%; height:6em; border:solid #CCC 2px; font-size:1em;}		
#name			{width:90%; height:1.9em; margin-bottom:5px; border:solid 1px #666666;}
#phone			{width:90%; height:1.9em; margin-bottom:5px; border:solid 1px #666666;}
#email			{width:90%; height:1.9em; margin-bottom:5px; border:solid 1px #666666;}

#name:focus	{background-color:#FFC;		}
select			{height:25px; line-height:1.5em; font-size:1em; border:solid #ccc 2px; color:#666; background-color:#fff;		}
input:focus 	{background-color:#FFC;} 
textarea:focus 	{background-color:#FFC;}
	
.contact-buttons			{ width:100%; display:none;	}

#field2		{display:none;			}

.back-button a					{font-size:14px; color:#FFF; font-weight:bold;		}
.back-button a:hover			{color:#333; 	}


/* Gallery */

.gallery				{ max-width:100%;		}
.gallery-box			{ width:30%; display: inline-block;	margin:0 0% 2% 2.3%;	}
.gallery-box h2			{ padding:0.5em;			}
.image-frame			{ width:100%; border:solid 2px #ffffff;	}

/* Contact */

.map					{max-width:100%; margin:0 0 0 2%;		}
.map iframe				{max-width:100%;			}



/* Thanks */
.thanks-img					{ width:75%; margin:0 0 0 13%;		}

/* Policy */
.policy-content ul li		{ padding:10px 0 10px 0; font-size:0.9em; color:#333; font-family:Arial, Helvetica, sans-serif; line-height:1.8em; margin-left:3%; list-style:disc;	}





@media only screen and (min-width: 318px) and (max-width: 568px) {

.single-prod-first, .single-prod   { min-width:98%; margin:1%; padding:0; 
}
.single-prod-end 				   { min-width:98%; margin:1%; padding:0;
}

.single-prod-first .pic, .single-prod .pic, .single-prod-end .pic {	
margin:0 auto; text-align:center; min-width:100%; height:auto;			}



#logo						{display:none;	}
.logo-responsive			{display:block; width:100%; float:left; clear:right; text-align:center;	}
.small-logo					{width:30%;	}

.top-info					{display:none;	}

#topnav 		{width:98%; margin:0.5em;	}

.slider			{ display:none;	}
.flexslider		{ display:none;	}

.contact-buttons 			{float:left; clear:right; display:inline;  }
.call-button				{float:left; clear:right; width:35%; }
.email-button				{float:right; clear:right; width:35%;}
.emailus					{width:85%;		}
.callus						{width:85%;		}



.left				{ width:98%; padding:1%; margin:1%; 		}
.right				{ width:98%; padding:1%; margin:1%;	}

.intumescent-banner			{width:98%; margin:0 1% 0 1%;	}
.page-link-button 			{width:55%; margin:0;	}


.gallery-box		{width:96%; display: inline-block;	margin:1%;	}


}


@media only screen and (min-width: 569px) and (max-width: 767px) {
.description				{height:370px;}

.contact-buttons 			{float:left; clear:right; display:inline; background-color:#CCC;  }
.call-button				{float:left; clear:right; width:30%; margin-left:12%; padding-top:0.3em;}
.email-button				{float:right; clear:right; width:30%; margin-right:10%; padding-top:0.3em;}
.emailus					{width:85%;		}
.callus						{width:85%;		}




.page-link-button 			{width:45%; margin:0 0 0 1em;	}

.left				{ width:98%; padding:1%; margin:1%; 		}
.right				{ width:98%; padding:1%; margin:1%;	}

.slider						{float:left; max-width:99%; margin:0 0.5% 0 0.5%; }
.flexslider .slides img 	{max-width:99%; }


#logo						{display:none;	}
.logo-responsive			{display:block; width:100%; text-align:center;	}

.top-info					{display:none;	}


.small-logo					{width:30%;	}

.single-prod-first, .single-prod   { max-width:49%; margin:0.5%; padding:0;
}
.single-prod-end 	{ max-width:49%; margin:0.5%; padding:0;
}

.gallery-box		{width:46%; display: inline-block;	margin:1%;	}


@media only screen and (min-width: 768px) and (max-width: 1024px) { 
.description		{height:430px;}

.left		{height:auto; 	}
.right		{height:auto; 	}

.top-info	{margin-left:1em;		}

}

@media only screen and (min-width: 1280px) {
	
}