@charset "UTF-8";

/* FONTS */

.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}


@font-face {
    font-family: 'OpenSansCondensedLight';
    src: url('fonts/OpenSans-CondLight-webfont.eot');
    src: url('fonts/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondLight-webfont.woff') format('woff'),
         url('fonts/OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-CondLight-webfont.svg#OpenSansCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* CSS Document */

*{
	margin:0;
	padding:0;
	}
body{
	background-image:url(images/bkg_swatch.png);
	}
#header{
	background-image:url(images/header-tile-new.png);
	height:145px;
	}
	#header h1{
		/*z-index:-1;*/
		color:#000;
		font-family:helvetica, arial, sans-serif;
		font-style:italic;
		font-weight:100;
		text-transform:uppercase;
		font-size:16px;
		width:900px;
		margin:0 auto;
		position:relative;
		left:122px;
		top:36px;
		letter-spacing:3px;
		}
	#header #header-wrapper{
		padding:10px 0;
		width:900px;
		margin:0 auto;
		}
		#header-wrapper img{
			display:block;
			float:left;
			width:384px;
			border:0;
			outline:0;
			}
#content-wrapper{
	width:940px;
	margin:0 auto;
	font-family:arial, helvetica, sans-serif;
	}
	#content-wrapper #top-nav{
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		width:900px;
		height:105px;
		margin:0 auto;
		padding:25px 0;
		background-image:url(images/wood-texture.jpg);
		background-repeat:no-repeat;
		color:white;
		}
		#top-nav ul{
			width:850px;
			margin:0 auto;
			list-style-type:none;
			background-color:rgba(255, 255, 255, 0.85);
			border-radius:8px;
			}
			#top-nav ul li{
				float:left;
				position:relative;
				}
				#top-nav ul li a{
					display:block;
					padding:15px 26px 13px 26px;
					text-decoration:none;
					color:#000;
					font-size:15px;
					font-weight:bold;
					}
				#top-nav ul li:hover a{
					
					}
					#top-nav ul li:hover ul{
						display:block;
						}
					#top-nav ul li ul{
						display:none;
						position:absolute;
						left:10px;
						width:170px;
						border-bottom-left-radius:8px;
						border-bottom-right-radius:8px;
						padding:0 1px 1px px;
						}
						#top-nav ul li ul li{
							float:none;
							text-align:center;
							}
							#top-nav ul li ul li a{
								font-size:13px;
								padding:10px 0;
								background-color:#fff;
								border-bottom:1px solid #eee;
								background-color:#777;
								color:#fff;
								}
							#top-nav ul li ul li:hover a{
								padding:10px 0;
								background-color:#ddd;
								color:#000;
								}
	#content-wrapper #mobile-nav {
		display:none;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		height:65px;
		margin:0 auto;
		padding:15px 0;
		background-image:url(images/wood-texture.jpg);
		background-repeat:no-repeat;
		color:white;
		}
	#content-wrapper #tag{
		margin:0 auto;
		color:#FFFFFF;
		background-color:#e01f2f;
		padding:15px 40px 15px 0;
		font-style:italic;
		font-size:24px;
		text-align:right;
		border-radius:9px;
		}
	#content-wrapper #home-content{
		width:900px;
		margin:0 auto;
		padding:55px 0;
		background-image:url(images/home-content-bkg.png);
		background-repeat:no-repeat;
		display:flex;
		justify-content:center;
		}
		#home-content  #tag-w-pic{
			display:block;
			/*width:476px;*/
			width:536px;
			/*margin:0 0 0 40px;*/
			float:left;
			}
			#tag-w-pic h2{
				font-style:italic; 
				font-size:22px; 
				background-color:#171796; 
				padding:6px 6%; 
				color:#fff; 
				}
			#tag-w-pic img {
				height:258px;
				width:536px;
				}	
		#home-content #home-nav{
			/*width:310px;*/
			width:250px;
			/*margin:0 40px 0 0;*/
			float:right;
			background:rgba(255,255,255,0.7);
			}
			#home-nav ul{
				list-style-type:none;
				text-align:center;
				}
				#home-nav ul li{
					border-bottom:2px solid #777;
					position:relative;
					}
				#home-nav ul li:last-child{
					border-bottom:none;
					padding-bottom:2px
					}
					#home-nav > ul > li > a{
						display:block;
						text-decoration:none;
						color:black;
						font-style:italic;
						font-weight:bold;
						/*font-size:18px;*/
						font-size:16px;
						/*padding:35px 0;*/
						padding:30px 0;
						}
					#home-nav > ul > li:first-child > a {
						/*padding:25px 0 23px;*/
						}
					#home-nav > ul> li:last-child > a {
						/*padding:23px 0 24px;*/
						}
				#home-nav ul li ul{
					display:none;
					position:absolute;
					left:250px;
					top:5px;
					background-color:#777;
					width:210px;
					z-index:1;
					}
				#home-nav ul li:hover ul{
					display:block;
					}
					#home-nav ul li ul li{
						margin:0px;
						padding:0px;
						}
						#home-nav ul li ul li a{
							font-size:14px;
							margin:0px;
							padding:8px;
							color:#fff;
							border-bottom:1px solid #fff;
							}
						#home-nav > ul > li > ul > li > a{
						  display:block;
						  text-decoration:none;
						  font-style:italic;
						  font-weight:bold;
						  /*font-size:18px;*/
						  font-size:16px;
						  /*padding:35px 0;*/
						  padding:15px 0;
						  }
						#home-nav ul li ul li:last-child a{
							border-bottom:0px;
							margin:0px 0px 0px 0px;
							}
						#home-nav ul li ul li:hover a{
							background-color:#ddd;
							color:#000;
							}
		
		#content-wrapper #main-content{
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		width:900px;
		margin:0 auto;
		padding:45px 20px;
		background-color:#fff;
			}
			#main-content h2{
				font-family: 'Scada', sans-serif;
				font-weight:700;
				font-style:italic;
				}
			#main-content .product{
				margin-top:30px;
				border-bottom:1px solid #aaa;
				padding-bottom:30px;
				}
			#main-content .product:last-child{
				border-bottom:0px;
				padding-bottom:0px;
				}
			#main-content .product img{
				display:block;
				float:left;
				}
			#main-content .product .product-info{
				width:325px;
				float:left;
				margin:0 18px;
				}
				.product h3{
					margin-bottom:5px;
					font-family: 'Scada', sans-serif;
					font-weight:700;
					font-size:19px;
					}
				.product-info h4{
					font-weight:400;
					font-style:italic;
					font-size:14px;
					margin-bottom:5px;
					}
				.product-info p{
					font-size:14px;
					}
			.product .product-chart{
				float:left;
				}
				.product-chart table{
					font-size:15px;
					border:1px solid #aaa;
					font-family:'OpenSansCondensedLight';
					border-collapse:collapse;
					padding-left:2px;
					}
				.product-chart table tr:first-child{
					background-color:#ffd990;
					}
						.product-chart table th{
							text-align:left;
							font-size:12px;
							background-color:#ffd990;
							padding-top:5px;
							margin:0 3px;
							}
						.product-chart table tr{
							display:block;
							border-bottom:1px solid #aaa;
							padding:0px 3px;
							}
						.product-chart table tr:last-child{
							border-bottom:none;
							}
							.product-chart table tr td{
								text-align:left;
								padding-top:5px;
								letter-spacing:-.3px
								}
		#main-content .product .industrial-product-info{
				width:390px;
				float:left;
				margin:10px 20px;
				}
				.industrial-product-info h3{
					margin-bottom:5px;
					}
		#main-content p.history{
			margin-top:20px;
			}
			
		#main-content #guide #left-sidebar{
			width:200px;
			float:left;
			}
			#left-sidebar ul{
				list-style-type:none;
				}
				#left-sidebar ul li{
					border-bottom:1px solid #000;
					}
				#left-sidebar ul li:last-child{
					border-bottom:0;
					}
					#left-sidebar ul li a{
						display:block;
						padding:15px 0;
						text-decoration:none;
						color:black;
						font-size:14px;
						font-weight:bold;
						}
					#left-sidebar ul li:first-child a{
						padding:0 0 15px 0;
						}
		#main-content #guide-content{
			width:610px;
			margin-right:20px;
			float:right;
			
			}
			#main-content #guide-content h3{
				font-size:20px;
				margin-top:20px;
				font-family:'Scada', sans-serif;
				}
			#main-content #guide-content h3:first-child{
				margin-top:0px;
				}
			#main-content #guide-content p, ol{
				margin-top:20px;
				}
				#guide-content h4{
					margin:20px 0 5px 0;
					}	
				#guide-content ol li{
					margin-left:20px;
					padding:2px 4px;
					}		
		#main-content.legacy-products h2 {
			padding-top:25px
			}	
		#main-content.legacy-products h2:first-child {
			padding-top:0
			}
		#content-wrapper #footer{
		background-color:#e01f2f;
		padding:40px;
		color:#FFF;
		}
		#footer #savogran-info{
			line-height:29px;
			width:280px;
			float:left;
			}
		#footer #savogran-emblem{
			width:280px;
			margin:0 10px;
			float:left;
			text-align:center;
			}
		#footer #footer-nav{
			width:240px;
			padding-left:40px;
			float:left;
			text-align:right;
			line-height:32px;
			}
			#footer-nav ul{
				list-style-type:none;
				}
				#footer-nav ul li{
					border-bottom:1px solid #fff;
					position:relative;
					}
					
				#footer-nav ul li:last-child{
					border-bottom:none;
					}
					#footer-nav ul li a{
						display:block;
						color:white;
						text-decoration:none;
						padding:7px 0;
						}
					#footer-nav ul li ul{
						display:none;
						width:175px;
						position:absolute;
						bottom:10px;
						left:-175px;
						
						}
					#footer-nav ul li .arrow-right{
						display:none;
						border-top:9px solid transparent;
						border-bottom:9px solid transparent;
						border-left:9px solid #777;
						position:absolute;
						top:15px;
						left:0px;
						}
					#footer-nav ul li:hover ul{
						display:block;
						}
					#footer-nav ul li:hover .arrow-right{
						display:block;
						}
						#footer-nav ul li ul li{
							border-bottom:1px solid #888;
							/*background-color:#ddd*/
							}
							#footer-nav ul li ul li a{
								font-size:12px;
								line-height:16px;
								padding:5px 10px;
								text-align:center;
								background-color:#777;
								
								}
							#footer-nav ul li ul li a:hover{
								color:#000;
								background-color:#ddd;
								font-weight:bold;
								}
/*  GOVERNMENT WARNING  */

#content-wrapper #main-content.has-warning {padding-bottom:22px;}

#gov-warnings {margin-top:20px; background-color:#eee;padding:24px 24px 0 24px; border-radius:6px}
#gov-warnings .warning {padding-bottom:24px}
#gov-warnings .warning p:first-child {padding-bottom:8px}
#gov-warnings p {font-size:14px;}
#gov-warnings p strong {display:inline-block;}
			
/*General Classes*/
.clear{
	float:none;
	clear:both;
	}
.starred{
	font-size:10px;
	padding:4px 0;
	}
.info-sheet{
	font-size:12px;
	padding:5px 0;
	text-align:right;
	line-height:18px;
	}
	.info-sheet a{
		color:#000;
		}
	.info-sheet a:hover{
		color:blue;
		}
.col-alpha{
	}
.col-zero{
	width:50px;
	}
.col-one{
	width:50px;
	}
.col-two{
	width:60px;
	}
.col-three{
	width:95px;
	}
.col-four{
	width:55px;
	}
.indicia{
	font-size:12px;
	position:relative;
	top:-5px;
	left:1px;
	}
.red{
	color:#e01f2f;
	}
p.next{
	text-align:right;
	text-decoration:none;
	}

.industrial-product-set{
	clear:both;
	}
	
/*    ====    RESPONSIVE    ====    */

/*  TABLET  */
@media only screen and (min-width : 768px) and (max-width : 1024px)  {
	
	#header h1 {width:50%; display:inline-block; left:182px}
	
	#top-nav{display:none}
	#content-wrapper #mobile-nav {display:block; margin:0 auto}
	#mobile-nav-inner {width:75%; margin:0 auto; background-color:rgba(0,0,0,.8); position:relative; z-index:1000;  border-radius:4px}
	
	#mobile-nav-inner #label {text-align:center; display:block; color:#fff; padding:8px 0 8px; position:relative; text-transform:uppercase; cursor:pointer}
	#mobile-nav-inner #label::before {content:"#"; width:30px; display:inline-block; position:absolute; top:0; left:0; padding:8px 0 8px 10px; background-image:url(images/hamburger-0k.png); background-repeat:no-repeat;background-position:center;color:transparent}
	
	#mobile-nav-inner ul{list-style-type:none;}
	#mobile-nav-inner > ul {display:none; opacity:0; transition:opacity .5s; padding:0 10px}
	#mobile-nav-inner ul.visible {display:block; opacity:1}
	
	#mobile-nav-inner li {border-top:1px solid #fff;}
	#mobile-nav-inner li a {padding:7px 0; display:block; color:#fff; text-decoration:none; font-size:14px}
	
	#mobile-nav-inner ul li ul li a{padding-left:20px}
	
	#home-content #home-nav {display:none}
	
	}
	
	
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation:portrait) {
	
	#header h1 {left:122px}
	#header #header-wrapper {width:100%}
	#content-wrapper {width:100%}
	
	#content-wrapper #top-nav {width:100%}
	#top-nav{display:none}
	
	#content-wrapper #mobile-nav {display:block}
	#mobile-nav-inner {width:75%; margin:0 auto; background-color:rgba(0,0,0,.8); position:relative; z-index:1000;  border-radius:4px}
	
	#mobile-nav-inner #label {text-align:center; display:block; color:#fff; padding:8px 0 8px; position:relative; text-transform:uppercase; cursor:pointer}
	#mobile-nav-inner #label::before {content:"#"; width:30px; display:inline-block; position:absolute; top:0; left:0; padding:8px 0 8px 10px; background-image:url(images/hamburger-0k.png); background-repeat:no-repeat;background-position:center;color:transparent}
	
	#mobile-nav-inner ul{list-style-type:none;}
	#mobile-nav-inner > ul {display:none; opacity:0; transition:opacity .5s; padding:0 10px}
	#mobile-nav-inner ul.visible {display:block; opacity:1}
	
	#mobile-nav-inner li {border-top:1px solid #fff;}
	#mobile-nav-inner li a {padding:7px 0; display:block; color:#fff; text-decoration:none; font-size:14px}
	
	#mobile-nav-inner ul li ul li a{padding-left:20px}
	
	#content-wrapper #tag {border-radius:0}
	
	#content-wrapper #home-content {width:100%}
	#home-content img {float:none; margin:0 auto}
	
	#home-content #home-nav {display:none}
	
	#content-wrapper #main-content {width:100%}
	#main-content .product img {width:20%}
	#main-content .product .product-info {width:33%}
	#main-content .product img {width:20%}
	.product .product-chart {width:42%}
	.product-chart table {font-size:14px}
	
	#footer #savogran-info, #footer #savogran-emblem, #footer #footer-nav {width:30%}
	#footer #savogran-emblem {margin:0 5%}
	#footer #savogran-emblem img {margin:0; width:75%}
	#footer #footer-nav {float:right; padding-left:0}
	
	#main-content .product .industrial-product-info {width:44%; margin:10px 3%}
	#main-content #guide #left-sidebar {width:25%}
	#main-content #guide-content {width:70%; margin-right:0}
		
	}


/*  iPHONE  */
@media only screen and (min-width : 315px) and (max-width : 667px) {
	
	#header {height:115px}
	
	#header h1 {width:auto; left:95px; font-size:11px; top:30px; display:inline-block}
	#header #header-wrapper {width:100%;}
	#header-wrapper img {width:283px; padding:0 10px}
	
	#content-wrapper #top-nav {width:100%}
	#top-nav{display:none}
	
	#content-wrapper #mobile-nav {display:block}
	#mobile-nav-inner {width:75%; margin:0 auto; background-color:rgba(0,0,0,.8); position:relative; z-index:1000;  border-radius:4px}
	
	#mobile-nav-inner #label {text-align:center; display:block; color:#fff; padding:8px 0 8px; position:relative; text-transform:uppercase; cursor:pointer}
	#mobile-nav-inner #label::before {content:"#"; width:30px; display:inline-block; position:absolute; top:0; left:0; padding:8px 0 8px 10px; background-image:url(images/hamburger-0k.png); background-repeat:no-repeat;background-position:center;color:transparent}
	
	#mobile-nav-inner ul{list-style-type:none;}
	#mobile-nav-inner > ul {display:none; opacity:0; transition:opacity .5s; padding:0 10px}
	#mobile-nav-inner ul.visible {display:block; opacity:1}
	
	#mobile-nav-inner li {border-top:1px solid #fff;}
	#mobile-nav-inner li a {padding:7px 0; display:block; color:#fff; text-decoration:none; font-size:14px}
	
	#mobile-nav-inner ul li ul li a{padding-left:20px}
	
	#content-wrapper #footer {padding:15px}
	#footer #savogran-info, #footer #savogran-emblem, #footer #footer-nav {width:100%; float;none}
	
	#footer #savogran-emblem {margin:0; padding:20px 0}
	#savogran-emblem img {width:75%; margin:0 auto; display:block}
	
	#footer #footer-nav {padding:0}
	#footer #footer-nav li {text-align:left}
	#footer #footer-nav {display:none;}
	
	/*  HOME  */
	#content-wrapper #home-content {width:100%}
	#home-content img{float:none; width:90%; margin:0 auto;}
	#home-nav {display:none}
	
	#content-wrapper #tag {border-radius:0; font-size:20px}
	
	#home-content #home-inner {width:100%; padding:0 5%;}
	#home-content  #tag-w-pic {width:100%}
	#home-content  #tag-w-pic h2 {text-align:center; font-size:18px}
	#home-content  #tag-w-pic img{height:auto; width:100%;}
	
	
	/*  HEAVY DUTY CLEANERS  */
	#content-wrapper {width:100%}
	
	#content-wrapper #main-content {width:100%}
	
	#main-content .product img {float:none; margin:0 auto}
	
	#main-content .product .product-info {float:none; width:100%; margin:0; padding-top:15px}
	#main-content .product .product-chart{padding-top:15px}
	.product-chart table {font-size:14px}
	
	#info-sheet p a {font-size:12px}
	
	/*  INDUSTRIAL COATING REMOVERS  */
	#main-content .product .industrial-product-info {width:100%; float:none; margin:10px 0}
	
	#main-content #guide #left-sidebar {display:none}
	#main-content #guide-content {float:none; width:100%; margin:0}
	
	}