@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color:#F0f0f0  ;/*pale grey*/
	margin: 0;
	padding: 0;
	color: #666;
}



/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
/* ~~ this bordertop contains the telephone number ~~ */	
.bordertop {
	background-color:#8DBBC1 ; /*pale green*/
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 1px;
	padding-top: 0;
}
.bordertop h2{
	text-align:right;
	padding: 5px;
	color: #000;
}


/* ~~ this borderbigtop contains logo and links ~~ */
.borderbigtop {
	padding-left: 5px;
	padding-bottom: 15px;
	padding-right: 10px;
	padding-top: 5px;
	text-align: right;
}


/* ~~ this header contains pipes image and strapline ~~ */
.header {
	border: thin solid #000;
	border-radius: 25px;
	background-color: #000;
	background-image: url(../costa019headernew.jpg) ;
	background-position: left;
	width: 99%;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	background-repeat: no-repeat;
}
.header h2 {
	color: #FFF;
	width: 99%;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;}

/* ~~ this is the link from the home page image to Arkema Kynar data sheet ~~ */
.contentpdf {
	padding-top: 30px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
	}
.contentpdf h1 {
	color: #999;
	text-align:center;
	margin-top: 0;
	margin-bottom: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
}

.contentpdf a:link {
	color: #666; /* dark grey */
	text-decoration: underline;	
	
}
.contentpdf a:visited {
	color: #4E5869;/* darker grey */
	
}
.contentpdf a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: underline;
	color: #8DBBC1; /* pale green */
}

	/* ~~ The Content is the main body text ~~ 
*/
.content {
	padding-top: 30px;
	padding-right: 12%;
	padding-bottom: 30px;
	padding-left: 12%;
	}
.content h1 {
	color: #999;
	text-align:center;
	margin-top: 0;
	margin-bottom: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
}
.content h2 {
	color: #999;
	text-align:center;
	margin-top: 0;
	margin-bottom: 0;
}
.content h3 {
	text-align:center;
	margin-top: 0;
	margin-bottom: 0;		
}
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
.content a:link {
	color: #666; /* dark grey */
	text-decoration: underline;	
	
}
.content a:visited {
	color: #4E5869;/* darker grey */
	
}
.content a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: underline;
	color: #8DBBC1; /* pale green */
}


/* The Headings are the headings at top of page, eg Applicators */
.headings { 
	padding-top: 0px;
	padding-right:0%;
	padding-bottom: 0px;
	padding-left: 0%;
	}
.headings h1 {
	color: #999 ;
	text-align: center;
	margin-top: 0;
}
.headings h2 {
	color: #999;
	text-align:center;
	margin-top: 0;	
}


.contentcoatings {
	padding-top: 30px;
	padding-right: 20%;
	padding-bottom: 30px;
	padding-left: 20%;
	}
.contentcoatings h2 {
	color: #999;
	text-align:center;
	margin-top: 0;
	margin-bottom: 0;
}

/* The boxes, and box links - just on the home page*/
#boxes{
	text-align: center;
	color: #FFF;
	padding-top: 30px;
	padding-right: 12%;
	padding-bottom: 30px;
	padding-left: 12%;
}
#boxes a:link {
	color: #666; /* dark grey */
	text-decoration: underline;	
}
#boxes a:visited {
	color: #4E5869;/* darker grey */
}
#boxes a:hover, a:active, a:focus { 
	color: #FFF; /* white */
}
.box1 {
	width: 24%;
	height: 260px;
	margin-right: 4%;
	margin-left: 4%;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1%;
	float: left;
	background-color: #999;
}
.box2 {
	height: 260px;
	width: 24%;
	margin-right: 4%;
	margin-left: 4%;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1%;
	float: left;
	background-color: #999;
	}
.box3 {
	height: 260px;
	width: 24%;
	margin-right: 2%;
	margin-left: 4%;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1%;
	float: right;
	background-color: #999;
}


/* The one Column under boxes on homepage */
.onecol {
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1%;
}


		
/* The Two Columns on most pages */
.twocolleft {
	height: 100%;
	width: 48%;
	text-align: center;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1%;
	float: left;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #333;
}
.twocolright {
	height: 100%;
	width: 47%;
	text-align: center;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 1%;
	float: right;
}



/* ~~ The white background section with black border~~ */
.borderbigbottom {
	border: thin solid #000;
	border-radius: 25px;
	width: 99%;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	text-align: center;
	background-color: #Fff;
}
/*
.borderbigbottom img {
width: 50%;
}*/

.borderbigbottom p {
	padding: 5px;
}

/* ~~ this is the footer area~~ */	
.footer {
	background-color: #8DBBC1; /*pale green*/
	padding-left: 0;
	padding-bottom: 0;
	padding-right:1px;
	padding-top:0;
}
.footer h2{
	text-align:right;
	padding: 5px;
	color:#FFF;
}
.footer p{ 

	size: 40%;
	padding: 10px;
	color: #FFF;
	font-size: 80%;
}


hr {
	clear: both;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	background-color: #CCC;
}



/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. padding: 0;
	margin: 0;*/
	
}


h4, h5, h6 {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 25%;
	padding-left: 25%; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ OTHER LINKS ~~ */
a:link {
	color: #666;
	text-decoration: underline;
}
a:visited {
	color: #4E5869;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
	color: #006;
}

/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.transparent
{
	-moz-opacity: .0.2;
	filter: alpha(opacity=0.2);
	text-align: center;
}


 /*CSS for NEW LINKS */
/* nav toggle */
.nav-toggle {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	background-color: #000000;
	height: 2rem;
	position: relative;
	width: 3.6rem;
	
}
  .nav-toggle:hover {
    opacity: 0.8; }
  .nav-toggle .nav-toggle-bar,
  .nav-toggle .nav-toggle-bar::after,
  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: white;
    content: '';
    height: 0.4rem;
    width: 100%; }
  .nav-toggle .nav-toggle-bar {
    margin-top: 0; }
  .nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; }
  .nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; }
  .nav-toggle.expanded .nav-toggle-bar {
    background: transparent; }
  .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: white;
    margin-top: 0; }
  .nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

 .nav {
	-webkit-transition: left 0.5s ease;
	-moz-transition: left 0.5s ease;
	-ms-transition: left 0.5s ease;
	-o-transition: left 0.5s ease;
	transition: left 0.5s ease;
	color: red;
	cursor: pointer;
	font-size: 2rem;
	height: 100vh;
	left: -20rem;
	position: relative;
	top: 0;
	width: 20rem;
	padding-top: 6;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 0px;
}
  .nav.expanded {
    left: 0; }
  .nav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0; }

nav select {
	display: none;
	font-size: 90%;
	color: #000;
	background-color: #FFF;
	border: thin solid #fff;
	text-decoration: none;
	padding: 5px;
	float: right;	
}
.license {
	padding-left: 50px;
}p img {
	background-color: #CCC;
}


















/* the auto margins (in conjunction with a width) center the page
@media only screen and (max-width: 900px) {
.container {
	margin: 0 auto; 
	padding: 0px;
	font: 98% Verdana, Arial, Helvetica, sans-serif;
	min-width: 300px;

}} */
/* the auto margins (in conjunction with a width) center the page*/
@media only screen and (max-width: 768px) {
.container {
	margin: 0 auto; 
	padding: 0px;
	width: 100%;

}} 

@media only screen and (max-width: 420px) {
.container {
	margin: 0 auto; /*the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	/* font: 95% Verdana, Arial, Helvetica, sans-serif;*/

}}


@media only screen and (max-width: 540px) {
.content {
	padding-top: 20px;
	padding-right: 0%;
	padding-bottom: 20px;
	padding-left: 0%;
	}}
	
@media only screen and (max-width: 540px) {
.content table  {
	width: 100%;
	overflow: visible;
	}}	
	
@media only screen and (max-width: 540px) {
	
.content ul, .content ol {
	padding-top: 0;
	padding-right: 2px;
	padding-bottom: 15px;
	padding-left: 4px;
}}

@media only screen and (max-width: 768px) {
.content img{
	size: 50%;
}}

@media only screen and (max-width: 300px) {
.content img{
	size: 50%;
}}

@media only screen and (max-width: 768px) {
.bordertop h2 {
	text-align:right;
	padding: 2px;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
}}

@media only screen and (max-width: 300px) {
.bordertop h2 {
	text-align:right;
	padding: 2px;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	

}}
.newpaint {
	font-weight: 800;
	float: left;
	height: 20%;
	width: 214px;
	clear:both;
		    }

@media only screen and (max-width: 900px) {
.header {
	border: thin solid #000;
	border-radius: 25px;
	background-color: #000;
		background-image: url(../costa019headernew.jpg) ;
	background-position: left;
	width: 99%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0;
	padding-right: 0;
	background-repeat: no-repeat;
	clear: both;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}}

@media only screen and (max-width: 768px) {
.header {
	border: thin solid #000;
	border-radius: 25px;
	background-color: #000;
		background-image: url(../costa019headernew.jpg) ;
	background-position: left;
	width: 99%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	background-repeat: no-repeat;
}}
@media only screen and (max-width: 900px) {
.header h2 {
	color: #FFF;
	width: 99%;
	padding-left: 0;
	padding-right: 0;
		margin: 0 auto;
	/*	font-size:110%*/
}}

@media only screen and (max-width: 768px) {
.header h2 {
	color: #FFF;
	width: 99%;
	padding-left: 0;
	padding-right: 0;
		margin: 0 auto;
	/*	font-size:100%*/
}}


@media only screen and (max-width: 768px) {
.contentpdf {
	padding-top: 2%;
	padding-right: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
	}}
	
@media only screen and (max-width: 768px) {
.contentpdf h1 {
	color: #999;
	text-align:center;
	margin-top: 0;
	margin-bottom: 0;	} /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
}

@media only screen and (max-width: 768px) {
.content img {
	size:50%}
}
@media only screen and (max-width: 340px) {
.contentcoatings {
	padding-top: 5px;
	padding-right: 2%;
	padding-bottom: 5px;
	padding-left: 2%;
	}}

/*  
@media only screen and (max-width: 900px) {
   h1 {
        font-size: 125%;
		margin-top: 0px;
		    }
}
@media only screen and (max-width: 768px) {
   h1 {
        font-size: 120%;
		margin-top: 0px;
		    }
}	

@media only screen and (max-width: 460px) {
   h1 {
        font-size: 115%;
		margin-top: 0px;
		    }
}
@media only screen and (max-width: 320px) {
   h1 {
        font-size: 100%;
		margin-top: 0px;
		    }
}
@media only screen and (max-width: 900px) {
   h2 {
        font-size: 120%;
		margin-top: 0px;
		    }
}
@media only screen and (max-width: 768px) {
   h2 {
        font-size: 115%;
		margin-top: 0px;
		    }
}	

@media only screen and (max-width: 460px) {
   h2 {
        font-size: 112%;
		margin-top: 0px;
		    }
}
@media only screen and (max-width: 768px) {
   h3 {
        font-size: 115%;
		margin-top: 0px;	
		font-weight:100;
		
		    }
}
@media only screen and (max-width: 768px) {
   h3 {
        font-size: 112%;
		margin-top: 0px;	
		font-weight:100;
		
		    }
}	*/

@media only screen and (max-width: 460px) {
   h3 {
        font-size: 110%;
		margin-top: 0px;
		font-weight: 100;
		    }
}		



@media only screen and (max-width: 900px) {
 .box1, .box2, .box3{
	height: 160px;
	font-size: 80%;
		
		    }
}	
@media only screen and (max-width: 768px) {
 .box1, .box2, .box3{
	height: 160px;
	font-size: 90%;
		
		    }
}	
@media only screen and (max-width: 600px) {
 .box1, .box2, .box3{
	height: 0px;
	display: none;
		
		    }
}

@media only screen and (max-width: 768px) {
 #boxes{
	padding-top: 0px;
	padding-right: 1%;
	padding-bottom: 0px;
	padding-left: 1%;
}
		
		    }
@media only screen and (max-width: 500px) {
 .borderbigbottom img{
	size: 100%;
		
		    }
}	
@media only screen and (max-width: 600px) {
 .borderbigbottom {
	 width: 50%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: transparent;
	border: hidden;
		
		    }
}	
@media (max-width: 600px) {
nav p { display: none; }
nav select { display: inline-block; }

}

@media (max-width: 600px) {
.navbar p 	{ display: none; }
nav select {display: inline-block;}
}




	@media (max-width: 600px) {
p img {
	width: 50%;
	height: 50%;
}}


p img {
	width: 30%;
	height: 30%;
}}
	
	
/*new css	


@media (max-width: 320px) {
.twocolleft {
	height: 100%;
	width:  320px;
	padding: 0;
	clear: both;
	float: left;
	display: block;
	margin: 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow:auto;

}}

@media (max-width: 320px) {
.twocolright {
	height: 100%;
	width: 100%;
	padding: 0;
	clear: both;
	float: left;
	display: block;
	margin: 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: auto;

}}*/

@media only screen and (max-width: 320px) {
.header {
	border: thin solid #000;
	border-radius: 25px;
	background-color: #000;
		background-image: url(../costa019headernew.jpg) ;
	background-position: left;
	width: 100%;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	background-repeat: no-repeat;
	clear: both;
}}

@media only screen and (max-width: 320px) {
.header h2 {
	color: #FFF;
	width: 80%;
	
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	font-size:80%
	}
}
@media only screen and (max-width: 320px) {
.headings { 
	padding-top: 0px;
	padding-right:0%;
	padding-bottom: 0px;
	padding-left: 0%;
	}}

@media only screen and (max-width: 320px) {
.headings h1 {
	color: #999;
	text-align: center;
	margin-top: 0;
	font-size: 140%;
	clear: both;
}}

@media only screen and (max-width: 320px) {
.headings h2 {
	color: #999;
	text-align: center;
	margin-top: 0;
	font-size: 135%;
	clear: both;
}}

@media only screen and (max-width: 320px) {
.contentcoatings h2{
	margin-top: 0;
	font-size: 135%;
	clear: both;
	}}
	
	@media only screen and (max-width: 320px) {
.borderbigbottom h2{
	margin-top: 0;
	font-size: 135%;
	clear: both;
	}}


@media only screen and (max-width: 320px) {
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 50%;
	min-width:320px;
	margin: 0 auto; 
}}

@media only screen and (max-width: 320px) {
.newpaint {
	font-weight: 800;
	float: left;
	font-size:90%;
	height: 20%;
	width: 214px;
	clear:both;
		    }}
			
@media only screen and (max-width: 320px) {
 .borderbigbottom {
	 width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: transparent;
	border: hidden;
		
		    }
}	

@media only screen and (max-width: 320px) {
 .borderbigbottom img{
	clear: both;
	float: none;
	height: 80%;
	width: 80%;
	text-align: center;
		    }
}	

@media only screen and (max-width: 320px) {
 .borderbigbottom p{
	font-size: 100%;
	clear: both;
	float: left;
	width: 100%;
		    }
}

@media only screen and (max-width: 320px) {
 .borderbigbottom h1{
	font-size: 135%;
	clear: both;
	float: left;
	width: 100%;		
		    }
}