/*
Theme Name: Cleveland Engineered Materials
Theme URI: http://danielcollinsdesign.com
Description: The 2017 Cleveland Engineered Materials  Website
Author: Nicholas Rhodes | Daniel Collins Design
Version: 1
*/
/*CSS Reset*/
html, body, div, span, applet, object, iframe,
p, pre, abbr, acronym, address, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
tt, var, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1, h2, h3{margin: 0; padding: 0; font-weight: normal;}

img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}
h1 a, h2 a, h3 a, h4 a{color: #0b3254}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover{color: #0b3254}
a{color: #9d5b25; text-decoration: none}
a:hover {color: #0b3254; text-decoration: none;}
a:hover, input#searchsubmit:hover{cursor: pointer;}

input[type="text"], input[type="email"], input[type="password"], input[type="submit"], textarea, select{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

p{
margin: 0 0 20px 0;
}

.imageright {
text-align: right;
}

img{max-width: 100%; height: auto}

.clear{clear: both}

/*End of Reset*/
html, body{padding: 0; margin: 0;}
body{font-size: 16px; line-height: 1.3em; background-color: #fff; font-family: "proxima-nova"; font-weight: 300}
.wrap{width: 92%; max-width: 1170px; margin: 0 auto; padding: 0 4%; position: relative; clear: both}

#hero{font-family: "alternate-gothic-no-2-d", helvetica, sans-serif; font-weight: 400}

#primary{list-style-type: none; margin: 0; padding: 55px 0 50px 0; position: absolute;  left: 4%;}
#primary li{display: inline-block}
#primary li a{color: #0b3254; font-size: 1.375em; text-transform: uppercase; display: block; border-bottom: 2px solid #fff; padding-bottom: 10px; margin: 0 8px}
#primary li:first-child a{margin-left: 0}
#primary li a:hover, #primary li.current-menu-item a{border-color: #9d5b25}

.logo{margin: 0 auto; width: 182px; overflow: hidden; padding: 20px 0 20px 0}


.utility{list-style-type: none; margin: 0; padding: 55px 0 50px 0; position: absolute;  right: 4%; top: 0;}
.utility li{display: inline-block; margin-right: 15px;}
.utility li:last-child{margin-right: 0}
.utility li a{color: #0b3254; font-size: 1.3em; text-transform: uppercase;}
.utility span.fa{color: #9d5b25; display: inline-block; margin-right: 10px;}
.utility li a:hover{color: #a6bbc3 }

.hero-image{background: transparent url('images/wire-background.jpg') top center no-repeat; background-size: cover; height: 270px}
.home .hero-image{height: 570px;}
.home h1{font-size: 10.625em; color: #fff; line-height: .875em; text-transform: uppercase; padding-top: 80px; text-shadow: 5px 5px 5px rgba(0, 0, 0, .7);}

#columns{background-color: #a6bbc3; padding: 75px 0px 60px 0px; overflow: hidden}
#columns .col-1{color: #627d87; font-size: 3.7em; text-transform: uppercase; font-weight: 900; line-height: 1em; width: 31%; float: left; margin-left: 8%}
#columns .col-2{color: #404040; font-size: 1.875em; line-height: 1.3em; width: 40%; float: right; margin-right: 8%;}
#columns .col-2 h3{color: #0b3254; text-transform: uppercase; font-family: "alternate-gothic-no-2-d", helvetica, sans-serif;}

.columns{padding: 85px 0; background-color: #d2dde1;}
.columns .wrap{overflow: hidden}
.columns header{width: 36%; float: left; margin-left: 8%;}
.columns header h1{color: #0b3254; font-size: 2.625em; line-height: 1.2em; font-weight: 300}
.columns .content{color: #404040; font-size: 1.25em; line-height: 1.3em; width: 42%; float: right; margin-right: 6%;}


.full-width{padding: 85px 0 70px 0;background-color: #d2dde1;}
.full-width h1{font-size: 2.625em; color: #0b3254; line-height: 1.3em; font-weight: 300; margin-bottom: 10px;}
.full-width p{color: #404040; font-size: 1.25em; line-height: 1.3em}
.full-width h2{font-size: 1.563em; color: #0b3254; font-weight: 600; margin: 40px 0 20px 0}
.full-width .wrap{max-width: 970px}

#image-grid{padding-top: 50px; clear: both}
#image-grid ul{list-style-type: none; margin: 0; overflow: hidden; padding: 0}
#image-grid ul li{width: 31%; float: left; background-color: #fff; border-radius: 7px;text-align: center;}
#image-grid ul li:nth-child(2){margin: 0 3%}
#image-grid .image{margin: 20px 40px 10px 40px}
#image-grid h3{margin: 0 40px; color: #0b3254; font-size: 1.25em}
#image-grid .description{margin: 0 40px; color: #0b3254; font-size: .938em; padding-bottom: 10px;}




#industries-served{background: #0b3254 url('images/pattern.jpg') top center repeat; font-family: "alternate-gothic-no-2-d", helvetica, sans-serif; text-transform: uppercase;}
#industries-served ul{list-style-type: none; margin: 0; padding: 0; color: #fff; text-align: center; padding: 60px 0;}
#industries-served li{display: inline-block; font-size: 1.375em; width: 19%}
#industries-served img{height: 90px; display: block; margin: 0 auto; margin-bottom: 20px}

#full-width-form{padding: 75px 0}
#full-width-form h3{font-size: 1.875em; text-transform: uppercase; text-align: center; color: #0b3254; font-family: "alternate-gothic-no-2-d", helvetica, sans-serif;}


#footer-image{line-height: 0; font-size: 0; overflow: hidden; position: relative}
#footer-image div{width: 33%; margin: 0 auto; height: 100%;}
#footer-image div:nth-child(1){position: absolute; top: 0; left: 0}
#footer-image div:nth-child(3){position: absolute; top: 0; right: 0}
#footer-image img{width: 100%; height: 100%}

footer{background-color: #9d5b25; color: #fff; padding-top: 75px;}
footer .wrap{padding-bottom: 75px; overflow: hidden}
footer .copy{font-size: 1.25em; line-height: 1.3em; width: 40%; float: left; margin-right: 10%; border-right: 1px solid #fff; padding-right: 10%; padding-top: 25px; padding-bottom: 25px;}
footer .copyright{background-color: #0b3254; color: #a6bbc3}
footer .copyright .wrap{padding-bottom: 20px; padding-top: 20px; font-size: 1.125em}

footer .menu{width: 17%; float: left; padding-top: 25px;}
footer .menu ul{list-style-type: none; margin: 0; padding: 0;}
footer .menu ul li{padding-bottom: 25px}
footer .menu ul li a{color: #fff; font-family: "alternate-gothic-no-2-d", helvetica, sans-serif; font-size: 1.375em; text-transform: uppercase; border-bottom: 2px solid #9d5b25}
footer .menu ul li a:hover{border-color: #fff}

footer .contact{width: 20%; float: left; padding-top: 25px;}
footer .contact img{margin-bottom: 20px}
footer .contact a{clear: both; margin-top: 23px; border-bottom: 2px solid #9d5b25; color: #fff; text-transform: uppercase; font-family: "alternate-gothic-no-2-d", helvetica, sans-serif; font-size: 1.375em; display: block; float: left;}
footer .contact span.fa{display: inline-block; width: 30px;}
footer .contact a:hover{color: #a6bbc3;}

.nf-after-form-content{clear: both}
.nf-form-fields-required{display: none}
nf-fields-wrap{width: 100%; background: red;}
nf-field{float: left; width: 49%}
nf-field:nth-child(2n+1){clear: both}
nf-field:nth-child(2n+2){float: right}
nf-field:nth-child(5){width: 100%}
nf-field:nth-child(6){clear: both;width: 100%;}
.nf-form-wrap{padding-top: 50px; max-width: 970px; margin: 0 auto; overflow: hidden}
input[type="text"], input[type="email"], input[type="tel"], textarea{font-size: 1.125em; color: #404040; font-family: 'proxima-nova'; 
  border: 1px solid #d3e1e6; background-color: #eff5f7; width: 47%; margin: 15px 0; padding: 30px 0; padding-left: 4%; border-radius: 5px 5px 5px 5px;-webkit-appearance: none;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px; font-weight: 300}

input[type="text"]:nth-child(2n+2){float: right; margin-right: 0}

textarea{width: 98%; height: 150px; resize: none}
input[type="button"]{display: block; border: 1px solid #9d5b25; color: #9d5b25; background-color: #fff; font-size: 1.375em; width: 270px !important; padding: 25px 0; margin: 0 auto !important; margin-top: 45px; text-transform: uppercase; display: block; border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px; font-family: "alternate-gothic-no-2-d", helvetica, sans-serif; -webkit-appearance: none;}
input[type="button"]:hover{cursor: pointer; background-color: #9d5b25; color: #fff}


@media only screen and (max-width: 1130px){

  #columns .col-1{margin-left: 0%; font-size: 3.8em;}
  #columns .col-2{font-size: 1.675em;}
  
  
  .columns header{margin-left: 0%; width: 45%}
  .columns header h1{font-size: 2.225em;}

}

@media only screen and (max-width: 960px){
  .home .hero-image{height: 380px;}
  .home h1{font-size: 5.625em;}
	
  #columns .col-1{margin-left: 0%; font-size: 3em;}
  #columns .col-2{font-size: 1.438em;}
	
  #industries-served li{display: inline-block; font-size: 1.375em; width: 24%; margin-bottom: 50px;}
	
  .columns .content{color: #404040; font-size: 1.15em; width: 46%; margin-right: 0%;}
  
  
  #primary li{display: inline-block}
  #primary li a{font-size: 1.175em; margin: 0 5px}
  .utility li a{font-size: 1.175em; }
	
	
#industries-served ul {
    padding: 60px 0 20px 0;
}

}

@media only screen and (max-width: 850px){	
	
  #columns{padding: 50px 0;}
  #columns .col-1{font-size: 2.5em;  margin-left: 0%}
	
  #industries-served li{ font-size: 1.375em; width: 32%;}
  #industries-served li span.fa{height: 90px;}
	
	
  .columns header h1{font-size: 1.8em;}
  .columns .content{font-size: 1.15em;}
	
	 
  #image-grid{padding-top: 50px; clear: both}
  #image-grid ul li{width: 47%; margin-bottom: 30px;}
  #image-grid ul li:nth-child(2){margin: 0}
  #image-grid ul li:nth-child(2n+2){float: right}
  #image-grid ul li:nth-child(2n+1){clear: both}
  #image-grid h3{ font-size: 1em}
  #image-grid .description{color: #0b3254; font-size: .938em;}

  #hero{position: relative; padding-bottom: 55px}
  nav .wrap{position: static}
  .utility{position: absolute; bottom: 0; top: auto; left: 0; padding: 0 4%; padding-top: 17px; padding-bottom: 17px; background: #fff; width: 92%;background-color: #eff5f7;border-color: #eff5f7;}
  .utility li a{font-size: 1.063em}

  #mobile{display: block; width: 25px; height: 25px; z-index: 101; background: transparent url('images/mobile-icons.png') 0 2px no-repeat; position: absolute; top: 0; right: 4%; top: 55px}
  #mobile.active{background-position: 0 -81px}
  
  #primary{display: none; position: absolute; top: 0; left: 0; z-index: 100; padding: 60px 0 0 0; background-color: #fff; width: 100%; -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);}
  #primary li{display: block; text-align: center; padding-bottom: 25px;}
  #primary li a{display: inline-block; font-size: 1.375em;}
  .utility li a{font-size: 1.375em;}
}

@media only screen and (max-width: 620px){

  #columns .col-1{font-size: 2.063em; width: 100%; float: none; margin-left: 0%}
  #columns .col-2{width: 100%; float: none; margin-right: 0%;}
	
  .columns{padding: 50px 0}
  .columns header{width: 100%}
  .columns header h1{font-size: 2.063em;}
  .columns .content{font-size: 1.25em; width: 100%; float: none; margin-right: 0%;}
	
  #industries-served li{ font-size: 1.375em; width: 49%;}
	
	

}

@media only screen and (max-width: 520px){
	
  .hero-image{height: 105px}
  .home .hero-image{height: 210px;}
  .home h1{font-size: 3.75em; padding-top: 30px}
  
  .logo{width: 125px; padding-bottom: 10px;}
  #mobile{top: 45px;}
  

  .full-width{padding: 50px 0}
  .full-width h1{font-size: 2em;}
  .full-width p{font-size: 1.063em;}
  .full-width h2{font-size: 1.563em;}
	
  #footer-image div{width: 100%; margin: 0 auto; margin-bottom: 5px}
  #footer-image div:nth-child(1){position: relative; top: auto; left: auto}
  #footer-image div:nth-child(3){position: relative; top: auto; right: auto}
  #footer-image img{width: 100%;}

	
	footer{padding-top: 50px;}
	footer .wrap{padding-bottom: 20px;}
	footer .copy{font-size: 1.063em; width: 100%; float: none; margin-right: 0; border: 0; padding: 0; padding-bottom: 10px; border-bottom: 1px solid #fff}
	footer .copyright .wrap{font-size: .938em}

	footer .menu{width: 100%; float: none; padding-top: 30px;}
		
	footer .contact{width: 100%; float: left; padding-top: 25px;}
	footer .contact a{display: block;}
	footer .contact span.fa{display: inline-block; width: 30px;}

	
  nf-fields-wrap{width: 100%; background: red;}
  nf-field{float: none; width: 96%}
  nf-field:nth-child(2n+1){clear: both}
  nf-field:nth-child(2n+2){float: none}
  nf-field:nth-child(5){width: 100%}
  nf-field:nth-child(6){clear: both; width: 100%;}
  
	form{padding-top: 50px;}
	form label{display: none}
	input[type="text"], input[type="tel"], input[type="email"], textarea{font-size: 1.063em; width: 96%; margin: 10px 0; padding: 15px 0; padding-left: 2%;}
	input[type="text"]:nth-child(2n+2){float: none; margin-right: 0}
	textarea{width: 96%; height: 150px; resize: none}
	input[type="button"]{max-width: 98%; margin: 0 !important}
  
  .utility li a{font-size: 1.175em;}

}

@media only screen and (max-width: 420px){
	#image-grid .image{padding-top: 20px}
	#image-grid img{width: 100%}
  #image-grid ul li{width: 100%; float: none; margin: 0}
  #image-grid ul li:nth-child(2), #image-grid ul li:nth-child(2n+2){margin: 0; float: none}
  #image-grid h3{margin: 0 40px; color: #0b3254; font-size: 1.25em}
  #image-grid .description{margin: 0 40px; color: #0b3254; font-size: .938em; padding-bottom: 10px;}
}