@charset "UTF-8";
body, html {
	width: 100%;
}

 body {
	 margin:0px;
	 padding:0px;
	 font-family:Arial, Helvetica, sans-serif;
	 font-size:14px;
	 color:#415564;
	 overflow-x: hidden;
 }

h1, h2 {
	font-size: 225%;
	line-height: 1.05;
	color: #ed1c2f;
	margin: 18px 0px 20px;
	padding: 0px;
	font-weight: bold;
}

h2 span {
	color: #415465;
}

		@media(min-width: 768px){
					h1, h2 {font-size: 325%;}
		}

		@media(min-width: 1600px){
					h1, h2 {font-size: 305%;}
		}
		
 h4 {
	font-size: 125%;
	color: #ed1c2f;
	margin: 0px 0px 0px;
}

ul {
	font-size: 110%;
	font-weight: 300;
	margin: 0px 0px 18px;
}

div.content p {
	font-size: 180%;
	line-height: 1.35;
}

div.content ul.home {
	font-size: 100%;
	line-height: 1.35;
	column-count: 1;
}
	@media(min-width: 768px){
				div.content ul.home {column-count: 2;}
	}

div.content ul.home li {
	font-size: 180%;
	line-height: 1.35;
	width: 95%;
}

	/*@media(min-width: 768px){
		div.content ul.home li {
			display: inline-block;
			width: 45%;
		}
	}*/


div.content p.instruct {
	font-weight: bold;
	font-size: 155%;
	padding-top: 12px;
	padding-bottom: 16px;
}

div.content p.instruct img {
	float: left;
	margin: 0px 18px 0px 0px;
	max-width: 52px;
	padding-bottom: 54px;
}

	@media(min-width: 640px){
		div.content p.instruct img {
			padding-bottom: 0px;
		}
	}

a {
	text-decoration: none;
}

 a.btn.btn-default {
	color: #ffffff;
	text-decoration: none;
	padding: 12px 24px;
	background: #000;
	border-radius: 6px;
	text-align: center;
	display: inline-block;
	margin: 12px 24px;
}

picture {
	line-height: 0;
}

div.control {
	display:table;
	}
	
a.flip1 {color: #ffffff; text-decoration:none;margin: 20px;}

.nobr {white-space:nowrap;}

iframe {
	width: 100%;
	height: 100%;
	display: block;
}

div[class*="cardflip"] {
	position: inherit;
	text-align: right;
}

div[class^="cardcopyfront"], div[class^="cardcopyfront"] {
	position: initial;
	width: 100%;
	box-sizing: border-box;
	text-align: right;
}

		div[class^="cardcopyfront"] {
			text-align: left;
		}

div.details {
	position: inherit;
	text-align: right;
}

	@media(min-width: 768px){

			div.details {
				position: absolute;
				top: 70px;
				right: 10%;
			}

			div[class^="cardcopyfront"], div[class^="cardcopyfront"] {
				position: absolute;
				top: 10%;
				left: 5%;
				width: 50%;
				box-sizing: border-box;
				text-align: left;
			}
				
			div[class*="cardflip"] {
				position: absolute;
				top: 0px;
				right: 10%;
			}

	}

	@media(min-width: 1024px){

			div.details {
				top:  auto;
				bottom: 0px;
				right: 10%;
			}

	}

div.main {
	position: relative;
	display: block;
}

div.content {
	padding: 32px 0%;
	font-size: 70%;
}

div.content, div.products {
	display: block;
	position: inherit;
	font-size: 120%;
}

		@media(min-width: 768px){

					div.content, div.products {
						font-size: 80%;
					}

		}

div.products {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	min-height: 750px;
	margin: 0px auto;
}

		@media(min-width: 1024px){

					div.products {
						min-height: 0px;
					}

		}


div[class*="cardflip"], div.details, div[class^="cardcopyfront"] {
	text-transform: uppercase;
	font-size: 80%;
	vertical-align: middle;
	font-weight: 600;
	text-align: right;
	margin: 32px 0px;
}

					@media(min-width: 768px){

						div[class*="cardflip"], div.details, div[class^="cardcopyfront"] {
							text-align: right;
						}


					}
					
					@media(min-width: 980px){
													
							div.products {
								height: 80%;
							}
					
					}

					@media(min-width: 1024px){

							div.main {
								display: -ms-grid;
								display:grid;
								-ms-grid-columns: 50% 45%;
								grid-template-columns: 50% 45%;
								min-height: 80%;
							}
														
							div.content, div.products {
								position:relative;
								font-size: 75%;
							}

							div.products {
								padding-top: 0px;
							}
						
							div[class*="cardflip"], div.details, div[class^="cardcopyfront"] {
								text-align: right;
								font-size:55%;
							}

					}

					@media(min-width: 1200px){
													
							div.main {
								-ms-grid-columns: 50% 45%;
								grid-template-columns: 50% 45%;
							}
														
							div.products {
								height: 90%;
								transform: translateY(-48px);
								white-space: nowrap;
								max-width: 90%;
							}
					
					}

					@media(min-width: 1400px){
													
							div.main {
								-ms-grid-columns: 55% 40%;
								grid-template-columns: 55% 40%;
							}
														
							div.content, div.products {
								font-size: 80%;
							}
							
							div.products {
								height: 100%;
								transform: translateY(-24px);
							}

							div[class*="cardflip"], div.details, div[class^="cardcopyfront"] {
								font-size:70%;
							}
					
					}

					@media(min-width: 1600px){
													
							div.content, div.products {
								font-size: 100%;
							}
					
					}

img[class^="icon_product"] {
	position: relative;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
	transition: all 0.2s ease-out;
	padding: 24px 38% 0%;
	max-width: 48px;
	display: block;
}

					@media(min-width: 1024px){
													
/*							img[class^="icon_product"] {
								padding: 90% 38% 60%;
								bottom: 5%;
							}
						
							img[class^="icon_product5"], img[class^="icon_product6"] {
								padding: 20% 38% 42%;
								bottom: 2%;
							}
*/					}

div[class^="copyblock_prod"] {
	/*background: #dfdfe3;
	text-align: center;*/
	padding: 36px 0px 24px;
	opacity: 0;
	-webkit-animation: fadein 1.5s;
	animation: fadein 1.5s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
	position: relative;
	top: 5%;
	left: 0%;
	width: 100%;
	font-size: 90%;
	border-radius: 16px;
}

		div[class^="copyblock_prod"] img, div[class^="copyblock_prod"] video {
			max-width: 420px;
			max-height: 540px;
			/*width: 100%;*/
			margin: 0px 0px;
		}

		div[class^="copyblock_prod"] p.tip {
			background: #f1a91d;
			color: #fff;
			text-transform: uppercase;
			padding: 8px 12px;
			margin: 0px 10% 0px;
			text-align: left;
			font-weight: bold;
			display: inline;
			font-size: 130%;
		}

div[class^="selectprod"] {
	background-size: auto 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
	position: relative;
	height: 100%;
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	border: none;
	padding: 0px;
	margin: 0px;
	outline: none;
	transition: all 0.2s ease-out;
}

div[class^="formulation"], div[class^="application"] {
	position: absolute;
	top: 10%;
	left: 0%;
	width: 100%;
	height: auto;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 100%;
	grid-template-columns: 100%;
	padding: 0px 5%;
	box-sizing: border-box;
}

div[class^="application"] {
	top: 5%;
	left: 0%;
	width: 100%;
	height: 80%;
	display: block;
	padding: 0px 5%;
	box-sizing: border-box;
}

		@media(min-width: 768px){

				div[class^="formulation"], div[class^="application"] {
					top: 5%;
				}
		}
		
div[class^="cardcopyfront"] {
	top: 0%;
}

				span.details span, span.details img, span.download span {
					display: inline-block;
				}
				
				span.details span, span.download span {
					max-width: 50%;
					vertical-align: middle;
				}

				div[class*="cardflip"], div.details, div[class^="cardcopyfront"] {
					margin: 0px 0px;
				}

				div[class^="cardcopyfront"] div, div[class^="links"] div {
					margin: 18px 0px;
				}

		@media(max-width: 768px){

		}



					@media(min-width: 1024px){

						/*img[class^="icon_product"] {
							position: absolute;
						}*/
						
						div[class^="copyblock_prod"] {
							width: 95%;
							border-radius: 0px;
							margin: 32px 0% 32px 5%;
							display: -ms-grid;
							display: grid;
							-ms-grid-columns: 47.5% auto;
							grid-template-columns: 47.5% auto;
						}
						
						div[class^="formulation"] {
							min-height: 75%;
							display: -ms-grid !important;
							display: grid !important;
							-ms-grid-columns: 20% 80%;
							grid-template-columns: 20% 80%;
						}

						div[class^="application"] {
							display: block;
						}
						
						div[class^="application"] div.application_video {
							height:100%;
							width:100%;
							display:block;
						}

						div[class^="cardcopyfront"], div[class^="cardcopyfront"] {
							position: absolute;
							top: 25%;
							left: 5%;
							width: 85%;
						}
						

					}

.card_copy {
	padding: 48px 10% 18px 24px;
	text-align: left;
	color: #ffffff;
	font-size: 135%;
	position: relative;
}


			@-moz-document url-prefix() {
				.card_copy {
					height: auto;
				}
			}

			@media(min-width: 1024px){

					.card_copy {
						padding: 160px 10% 18px 24px;
						font-size: 165%;
					}

			}


div.popups {
	background: #979799;
	box-sizing: border-box;
	padding: 5% 0% 5% 5%;
}

div.inline {
	display: inline-block;
	vertical-align: top;
	width: 40%;
	margin: 0px 4.5%;
	box-sizing: border-box;
	border: none;
}

	div.copyblock_main div.inline {	width: 100%; margin: 0px 0%;}

			@media(min-width: 768px){
				div.copyblock_main div.inline {	width: 80%;	margin: 0px 4.5%;}	
			}

			@media(min-width: 1024px){

				div.copyblock_main div.inline {
					width: 40%;
				}

			}


/* -------------------- Mobile Card Layout  -------------------- 



		/* -------------------- Layout  -------------------- */

div.header, div.header_sub {
	background: #415465;
	height:auto;
	vertical-align: middle;
	position:relative;
	opacity: 0;
	-webkit-animation: fadein 0.5s; 
	animation: fadein 0.5s; 
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	transition: all 0.75s ease-out;	
	z-index: 500;
}

div.header img.background{
	width: 120%;
	height: auto;
}

			@media(min-width: 768px){

					div.header img.background{
						width: 100%;
					}

			}

div.header.min {
	height:145px;
}

div.header div.tagline, div.header div.logo, div.header_sub div.logo {
	/*display: inline-block;*/
	vertical-align: middle;
	height: 100%;
	box-sizing: border-box;
}
	div.header_sub div.logo {
		padding: 18px;
		width: 50%;
	}
div.header div.tagline {
	padding: 0px 0px 0px 5.25%;
	width: 100%;
	transition: all 0.75s ease-out;
	font-family: Georgia, serif;
	color: #ffffff;
	font-size: 360%;
	font-weight: 600;
	vertical-align: middle;
}

					@media(min-width: 768px){
						div.header div.tagline {font-size: 440%;}
					}

					@media(min-width: 980px){
						div.header div.tagline {font-size: 540%;}
					}

					@media(min-width: 1200px){
						div.header div.tagline {font-size: 720%;}
					}


.tagline h1 {
	color: #ffffff;
	font-size: 65%;
	transform: translateY(-50%);
	margin: 0px 0px 0px;
	position: absolute;
	top: 40%;
	line-height: 1.0;
	width: 100%;
}

	@media(min-width: 640px){
		.tagline h1 {
			font-size: 70%;
			top: 40%;
			width: 40%;
		}
	}

	@media(min-width: 1200px){
		.tagline h1 {
			top: 45%;
		}
	}

.tagline h1 span {
/*	color: #ed1c2f;
	font-family: Georgia, serif;
*/	display: block;
}


			@media(min-width: 768px){
					div.header div.tagline {
						width: 50%;
					}
			}

			@media(min-width: 980px){
					div.header div.tagline {
						width: 60%;
					}
			}

div.header div.tagline img {
	height: 100%;
	max-width: 90%;
	max-height: 50px;
	padding: 38px 0px 38px 26px;
}

div.tagline {
	cursor:pointer;
}

div.header div.logo {
	text-align: center;
	position: inherit;
}

div.header div.logo img, div.header_sub div.logo img {
	max-width: 50%;
	width: auto;
	padding: 28px 0px;
	transition: all 0.75s ease-out;
}

div.header_sub div.logo img {
	max-width: 180px;
	padding: 28px 0px 28px 17.5%;
}


					div.header div.logo {
						text-align: left;
						position: absolute;
						left: 5%;
						top: 32px;
						min-height: inherit;
						z-index: 5
					}

					div.menu {
						text-align: left;
						position: absolute;
						right: 10%;
						top: 0%;
						min-height: inherit;
					}

					div.header div.logo img {
						max-width: 180px;
						width: auto;
						padding: 0px 0px;
					}
					
			@media(min-width: 768px){
			}


			@media(min-width: 1024px){

					div.header div.logo img {
						top: 25%;
					}
				
				div.header.min div.logo img {
					max-width: 40%;
				}

			}
			

		/* -------------------- Flipping Transition -------------------- */


.scene {
	width: 100%;
	height: 100%;
	border: 0px solid #CCC;
	margin: 0px 0;
	perspective: 1200px;
}

div[class*="cardflip"] {
	cursor:pointer;
}

.card, .card2, .card3, .card4, .card5 {
  width: 100%;
  height: auto;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped, .card2.is-flipped, .card3.is-flipped, .card4.is-flipped, .card5.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: auto;
  line-height: 12px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front, .card__face--front2, .card__face--front3, .card__face--front4, .card__face--front5 {
  /*background: #ffffff;*/
}

.card__face--back, .card__face--back2, .card__face--back3, .card__face--back4, .card__face--back5 {
  /*background: #ffffff;*/
  transform: rotateY(180deg);
}

div[class^="cardcopyfront"] a, div[class^="cardcopyfront"] a {
	text-decoration: none;
	color: #ffffff;
}

		/* -------------------- Animation Transition -------------------- */

img[class^="product"] {
	position:relative;
	animation-fill-mode: forwards;
	animation-delay: 0s;
	transition: all 0.2s ease-out;	
	width: 100%;
}

img[class^="product"]:hover {
	opacity: 0.65;
	cursor:pointer;
}

div[class^="selectprod"] img:hover {
	filter: grayscale(1.0);
}

div[class^="selectprod"]:hover {
	cursor: pointer;
}

div.copyblock_main {
}

div.copyblock_main_block {
display: block;
	width: 100%;
	padding: 32px 5% 32px 10%;
	box-sizing: border-box;
}

	@media(min-width: 800px){
		div.copyblock_main_block {
			width: 75%;
		}
	}

	@media(min-width: 1200px){
		div.copyblock_main_block {
			width: 75%;
		}
	}

.headlinefade {
	opacity: 0;
	-webkit-animation: headline 1.5s;
	animation: headline 1.5s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

.card_copy, .card_formulation {
	display: block;
	padding: 24px 0px 0px;
	min-height: 225px;
}

div.card_copy {
	width: 100%;
	display: -ms-grid;
	display:grid;
	-ms-grid-columns: 50% 50% ;
	grid-template-columns: 50% 50% ;
}

			@media(min-width: 768px){

			div.card_copy {
				width: 100%;
				display: block;
			}

			}
			
.card__face img {
	width: 100%;
	box-shadow: 4px 4px 16px 0 rgba(0,0,0,0.65);
	border-radius: 16px;
}

		/*div[class^="copyblock_prod"] img {
			width: 100%;
			height: auto;
		}

		div[class^="copyblock_prod"] div.back {
			text-align: left;
			width: 100%;
			padding-right: 5%;
			box-sizing: border-box;
		}*/

			div[class^="copyblock_prod"] img.details_back {
				max-width: 48px;
				cursor: pointer;
			}
		
			@media(min-width: 768px){

				div[class^="copyblock_prod"] img.details_back {
					max-width: 200px;
					transform: translateY(-36px);
				}
		
			}

		div[class^="copyblock_prod"] h1 {
			color: #ed1c2f;
			font-size: 320%;
			padding: 0% 0%;
			margin: 0px 0px 4px;
		}
		
		div[class^="copyblock_prod"] h2 {
			color: #415465;
			font-size: 210%;
			border-top: 0px solid #787878;
			margin: 0% 0% 54px;
			padding-top: 0px;
		}

				div[class^="copyblock_prod"] h2 span {
					font-size: 70%;
					display: block;
				}

		div[class^="copyblock_prod"] p {
			color: #415465;
			font-size:195%;
			padding: 0% 0%;
			line-height: 150%;
		}

	@media(min-width: 768px){
		div[class^="copyblock_prod"] h1  {padding: 0px 10%;}
		div[class^="copyblock_prod"] h2 {margin: 0% 10% 54px;}
		div[class^="copyblock_prod"] p {padding: 0% 10%;}
	}

		div[class^="copyblock_prod"] .inline p {
			text-align: center;
			font-size: 115%;
		}

			@media(min-width: 1024px){

					div[class^="copyblock_prod"] p {
						font-size:150%;
					}
		
			}

.prod_copy {
	position: relative;
	z-index: 50;
}

.prod_image {
	position: relative;
	z-index: 20;
}

			@media(min-width: 800px){

				.prod_copy {
					display: inline-block;
					max-width: 60%;
					vertical-align: top;
				}
				
				.prod_image {
					display: inline-block;
					max-width: 30%;
					vertical-align: bottom;
					padding-bottom: 48px;
				}
				
			}
		
					@media(min-width: 1024px){
		
						.prod_copy, .prod_image {
							display: block;
							max-width: 100%;
							padding-bottom: 8px;
						}
										
					}


			span[class^="formulation"] {
				color: #ffffff;
				text-decoration: none;
				border-radius: 6px;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				cursor: pointer;
				text-align: center;
				font-size: 65%;
			}

			span[class^="application"] {
				color: #ffffff;
				text-decoration: none;
				border-radius: 6px;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				cursor: pointer;
				text-align: center;
			}

			span[class^="formulation"], span[class^="application"] {
				font-size: 65%;
			}

				@media(min-width: 800px){
					span[class^="formulation"], span[class^="application"] {font-size: 85%;}
				}

				@media(min-width: 1024px){
					span[class^="formulation"], span[class^="application"] {font-size: 100%;}
				}

			span[class^="application"] img, span[class^="formulation"] img {
				width: 100%;
				padding-bottom: 18px;
			}

		@media(min-width: 768px){

					/*span[class^="formulation"] {
						font-size: 90%;
					}*/

		}

div[class^="cardcopyfront"], div[class^="cardcopyfront"] {
	display: block;
	padding: 0% 0% 0% 0%;
}

		div[class^="cardcopyfront"] div, div[class^="cardcopyfront"] div {
			margin: 18px 0px;
		}

div[class*="cardflip"] img, div.details img, div[class^="cardcopyfront"] img {
	vertical-align: middle;
	padding: 0px 0px 0px 12px;
	max-width: 48px;
}

			@media(min-width: 640px){

				div[class*="cardflip"] img, div.details img, div[class^="cardcopyfront"] img {
					max-width: 64px;
				}

			}

		div.selectprod1 {

}

				img.icon_product1 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 2.0s;
						animation-fill-mode: forwards;
				}
				
		div.selectprod2 {

}
		
		div.selectprod2.off {

}
		
				img.icon_product2 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 2.5s;
						animation-fill-mode: forwards;
				}

		div.selectprod3 {

}
		
				img.icon_product3 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 3.0s;
						animation-fill-mode: forwards;
				}


div.selectprod4 {

}
		
				img.icon_product4 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 3.5s;
						animation-fill-mode: forwards;
				}


		div.selectprod5 {

}
		
				img.icon_product5 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 4.0s;
						animation-fill-mode: forwards;
				}

		
		div.selectprod6 {

}
		
				img.icon_product6 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 4.5s;
						animation-fill-mode: forwards;
				}

		
		div.selectprod7 {

}
		
				img.icon_product7 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 5s;
						animation-fill-mode: forwards;
				}

		div.selectprod8 {

}
		
				img.icon_product8 {
						/* -webkit-animation: fadein 0.5s; */
						/* animation: fadein 0.5s; */
						animation-delay: 5.5s;
						animation-fill-mode: forwards;
				}


		img[class^="icon_product"].active, img[class^="icon_product"]:hover  {
			transition: all 0.2s ease-out;
			filter: grayscale(1.0);
		}


		

		/* -------------------- Keyframe Formatting -------------------- */

				@-webkit-keyframes mover {
					0% { transform: translateY(-1000px); opacity: 0; }
					50% { opacity: 0; }
					100% { transform: translateY(0px); opacity: 1; }
				}
				@keyframes mover {
					0% { transform: translateY(-1000px); opacity: 0; }
					50% { opacity: 0; }
					100% { transform: translateY(0px); opacity: 1; }
				}

				@-webkit-keyframes headline {
					0% { transform: translateX(100px); opacity: 0; }
					50% { opacity: 0; }
					100% { transform: translateX(0px); opacity: 1; }
				}
				@keyframes headline {
					0% { transform: translateX(100px); opacity: 0; }
					50% { opacity: 0; }
					100% { transform: translateX(0px); opacity: 1; }
				}

				@-webkit-keyframes fadein {
					  0%   { opacity: 0; }
					  100% { opacity: 1; }
				}
				@keyframes fadein {
					  0%   { opacity: 0; }
					  100% { opacity: 1; }
				}
		



				@-webkit-keyframes key_visual {
					0% { transform: rotateY(90deg); opacity: 0; }
					100% { transform: rotateY(0deg); opacity: 1; }
				}
				@keyframes key_visual {
					0% { transform: rotateY(90deg); opacity: 0; }
					100% { transform: rotateY(0deg); opacity: 1; }
				}


		/* -------------------- Lightbox Formatting -------------------- */


div.mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	cursor: pointer;
}

span.featherlight-close {
	cursor:pointer;
}

div.close {
	position: absolute;
	top: 10%;
	right: 5%;
	z-index: 100;
	background: #333333;
	padding: 38px;
	color: #fff;
	border-radius: 96px;
	font-size: 300%;
	line-height: 100%;
	cursor: pointer;
}



			@media all {
				.lightbox { display: none; }
				.fl-page h1,
				.fl-page h3,
				.fl-page h4 {
					font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
					font-weight: 100;
					letter-spacing: 1px;
				}
				.fl-page h1 { font-size: 110px; margin-bottom: 0.5em; }
				.fl-page h1 i { font-style: normal; color: #ddd; }
				.fl-page h1 span { font-size: 30px; color: #333;}
				.fl-page h3 { text-align: right; }
				.fl-page h3 { font-size: 15px; }
				.fl-page h4 { font-size: 2em; }
				.fl-page .jumbotron { margin-top: 2em; }
				.fl-page .doc { margin: 2em 0;}
				.fl-page .btn-download { float: right; }
				.fl-page .btn-default { vertical-align: bottom; }

				.fl-page .btn-lg span { font-size: 0.7em; }
				.fl-page .footer { margin-top: 3em; color: #aaa; font-size: 0.9em;}
				.fl-page .footer a { color: #999; text-decoration: none; margin-right: 0.75em;}
				.fl-page .github { margin: 2em 0; }
				.fl-page .github a { vertical-align: top; }
				.fl-page .marketing a { color: #999; }

				/* override default feather style... */
				.fixwidth {
					background: rgba(256,256,256, 0.8);
				}
				.fixwidth .featherlight-content {
					width: 500px;
					padding: 25px;
					color: #fff;
					background: #111;
				}
				.fixwidth .featherlight-close {
					color: #fff;
					background: #333;
				}

			}
			@media(max-width: 768px){
				.fl-page h1 span { display: block; }
				.fl-page .btn-download { float: none; margin-bottom: 1em; }
			}

div.video, video {
	width: 100%;
	max-height: 90%;
	margin: 0px auto 0px;
	display: block;
	transform: translateY(5%);
}

body.application div.video, body.application video {
	width: auto;
	max-height: 90vh;
	margin: 0px auto 0px;
	display: block;
}

div.card_copy_ie {
	display:none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 
	 body {overflow-x: hidden}
	 
	 div[class^="formulation"], div.contents, div.main, div.products, div.card_copy {
		 display: block;
	 }

	 div[class^="formulation"], div.main, div.products, div.card_copy {
		 position: inherit;
	 }

div.products {
	min-height: inherit;
	height:auto;
	display:block;
}

div[class^="selectprod"] {
	width: 25%;
	display: inline-block;
	min-height:640px;
}

img[class^="icon_product"] {
	opacity: 1;
}

div[class^="copyblock_prod"] {
	position: relative;
	display:table;
}

div.header {height:auto;}

/*div.header.min {
	height:auto;
}*/

div.header div.tagline img {
	height: 65%;
	max-width: 100%;
	padding:4% 0% 0%;
}

div.card_copy_ie div span a {
	text-transform: uppercase;
	font-size: 80%;
	font-weight: 600;
	text-align: right;
	color:#333333;
	text-decoration:none;
}

div.card_copy_ie div span a img {
	width: 48px;
	height:auto;
	display:inline-block;
	vertical-align:middle;
	padding: 0px 0px 8px 12px;
}


div.card_formulation, div.card_copy {display:none;}

div.card_copy_ie {
	display:block;
}

div.card_front, div.card_back {
	padding:12px 0px 36px;
}

div.card_front img, div.card_back img {
	max-width: 100%;
	height:auto;
	-webkit-box-shadow: 2px 4px 18px 0 #333333;
	box-shadow: 2px 4px 18px 0 #333333;
}

div.details {
	right:0%;
	padding-bottom: 24px;
	position: relative;
}

				div.header.min div.logo img {
					max-width: 100%;
					/*top:20%;*/
				}

div.header div.logo img {
	width: 180px;
	height: 60px;
}

}

footer {
	height:32px; 
	width:100%;
	position:absolute;
	bottom:0px;
	left: 0px;
	z-index:150;
	background: #bb1212;
}



/*New Positioning for Trends Lab */

.base {
	width: 100%;
	height: 100%;
}

.base img {
	width: 100%;
	height: auto;
	z-index: 0;
}

div[class*="position"] {
	display: block;
	width: 100%;
}
		@media(min-width: 800px){
			div[class*="position"] {
				display: inline-block;
				width: 48%;
			}
		}

		@media(min-width: 1024px){
			div[class*="position"] {
				width: 32%;
			}
		}

		@media(min-width: 1200px){
			div[class*="position"] {
				width: 12.5%;
			}
		}

/*	Intro Build Formatting  */

div.intro {
	max-width: 80%;
	margin: 0px auto;
}

div.intro header, div.intro div.main, div.intro div.footer {
	display: block;
	width: 100%;
	height: auto;
}

div.intro header img {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

div.intro div.main {
	background: #425365;
	position: relative;
}

	@media(min-width: 768px){

			div.grid_4column {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 25% 25% 25% 25%;
				grid-template-columns: 25% 25% 25% 25%;
				column-gap: 0%;
				min-height: 80%;
				margin: 0px auto;
				padding: 12px 0px 18px;

			}

			div.grid_3column {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 25% 50% 25%;
				grid-template-columns: 25% 50% 25%;
				column-gap: 0%;
				min-height: 80%;
				max-width: 1400px;
				margin: 0px auto;
				padding: 12px 0px 18px;
			}

			div.grid_2column {
				display: -ms-grid;
				display:grid;
				-ms-grid-columns: 50% 50%;
				grid-template-columns: 50% 50%;
				column-gap: 0%;
				min-height: 80%;
			}

	}

		
div[class*="column"] div {
	padding: 0%;
}

div[class*="column"] div div {
	vertical-align: middle;
	display: flex;
	width: 100%;
	text-align: center;
	align-items: center;
}

	@media(min-width: 768px){
		div[class*="column"] div div {
			min-height: 144px;
		}
	}



div[class*="column"] img {
	width: 55%;
	height: auto;
	box-sizing: border-box;
	transition: all 0.2s ease-out;
	margin: 18px auto;
	display: block;
}

div[class*="column"] div h3 {
	padding: 0.0% 10%;
	font-size: 190%;
	width: 100%;
}

div[class*="column"] p {
	margin: 0px;
	padding: 0px;
}

div.intro .footer {
	text-align: center;
	margin: 0px auto;
	position: relative;
	z-index: 10;
	transform: translateY(-50%);
    max-width: 1400px;
}

div.intro .footer img {
	max-width: 45%;
	border-radius: 12px;
}

@-webkit-keyframes fade {
	  0%   { opacity: 0; }
	  100% { opacity: 1; }
}
@keyframes fade {
	  0%   { opacity: 0; }
	  100% { opacity: 1; }
}
		

img[class*="fadein"] {
	opacity: 1;
	/* -webkit-animation: fadein 0.5s; */
	/* animation: fadein 0.5s; */
	animation-fill-mode: forwards;
}

.fadein01 {animation-delay: 0.75s !important;}
.fadein02 {animation-delay: 1.0s !important;}
.fadein03 {animation-delay: 1.25s !important;}
.fadein04 {animation-delay: 1.5s !important;}
.fadein05 {animation-delay: 1.75s !important;}
.fadein06 {animation-delay: 2.0s !important;}
.fadein07 {animation-delay: 2.25s !important;}
.fadein08 {animation-delay: 2.5s !important;}
.fadein09 {animation-delay: 2.75s !important;}
.fadein10 {animation-delay: 3.0s !important;}
.fadein11 {animation-delay: 3.25s !important;}
.fadein12 {animation-delay: 3.5s !important;}

.click {
	width: 48px;
	position: absolute;
	z-index: 20;
	left: 50%;
	top: 50%;
}

.click img.activate {
	opacity: 0;
	-webkit-animation: clicked 1.25s;
	animation: clicked 1.25s;
	animation-fill-mode: forwards;
	animation-delay: 5.25s !important;
}

@-webkit-keyframes clicked {
	0%   {opacity: 0; transform: translate(-48px, 24px);}
	20%  {opacity: 1; transform: translate(0px, 0px);}
	50%	 {opacity: 1; transform: scale(100%);}
	55%	 {opacity: 1; transform: scale(75%);}
	60%	 {opacity: 1; transform: scale(100%);}
	100% {opacity: 1; transform: scale(100%);}
}
@keyframes clicked {
	0%   {opacity: 0; transform: translate(-48px, 24px);}
	20%  {opacity: 1; transform: translate(0px, 0px);}
	50%	 {opacity: 1; transform: scale(100%);}
	55%	 {opacity: 1; transform: scale(75%);}
	60%	 {opacity: 1; transform: scale(100%);}
	100% {opacity: 1; transform: scale(100%);}
}

/*	Formulation Link Formatting 	*/
.link {
	position: absolute;
	z-index: 50;
	display: block;
	top: 0%;
	left: 9%;
	height: 2.6%;
	min-width: 41%;
	/*background: rgba(0,0,0,0.15);*/
}

div.link:hover {
	cursor: pointer;
}

		.pdf_4592_1 {top: 27.0%;}
		.pdf_4592_2 {top: 37.1%;}
		.pdf_4592_3 {top: 42.1%;}

		.pdf_4591_1 {top: 25.8%;}
		.pdf_4591_2 {top: 30.4%;}
		.pdf_4591_3 {top: 26.0%;}

		.pdf_4536_1 {
			top: 25.1%;
			height: 3.5%;
			left: 7.7%;
			min-width: 26%;
		}
		.pdf_4536_2 {
			top: 28.7%;
			height: 4.5%;
			left: 7.7%;
			min-width: 26%;
		}
		.pdf_4536_3 {
			top: 44.1%;
			height: 3.5%;
			left: 7.7%;
			min-width: 26%;
		}

		.pdf_4569_4570_1 {top: 19.6%;	height: 3.8%;	left: 7.7%;	min-width: 25%;}
		.pdf_4569_4570_2 {top: 23.6%;	height: 3.8%;	left: 7.7%;	min-width: 25%;}
		.pdf_4569_4570_3 {top: 35.2%;	height: 3.8%;	left: 7.7%;	min-width: 25%;}
		.pdf_4569_4570_4 {top: 39.0%;	height: 3.8%;	left: 7.7%;	min-width: 25%;}

		.pdf_4589_1 {
			top: 34.9%;
			left: 7.7%;
			min-width: 25%;
			height: 3%;
		}

		.pdf_4644_1 {
			top: 36.8%;
			left: 7.7%;
			min-width: 25%;
			height: 3%;
		}
		.pdf_4644_2 {top: 26.8%;}
		.pdf_4644_3 {top: 32.0%;}
		.pdf_4644_4 {top: 37.0%;}
		.pdf_4644_5 {top: 42.4%;}
		.pdf_4644_6 {top: 57.6%;}


p.chat {
	display: block;
	box-sizing: border-box;
	max-width: 360px;
	margin: 0px auto 0px;
	width: 100%;
	padding: 36px 0px 0px;
}

p.chat img {
	width: 100%;
}

h1.secondary {
	font-size: 280%;
	line-height: 1;
	clear: both;
}

.carrot {
	display: inline-block;
	max-height: 20px !important;
	padding: 0px 0px 0px 6px !important;
}

p.instruct + div {
	clear: both;
	vertical-align: middle;
}

div[class^="copyblock_prod"] .inline h1.secondary + p, div[class^="copyblock_prod"] p.chat {
	font-size: 185%;
	text-align: left;
	padding: 0px 0px;
	line-height: 1.35;
}

div[class^="copyblock_prod"] p.chat {
	padding: 0px 5% 0px 10%;
}





.block {
	padding: 0px 5% 4px;
	position: relative;
}


div.content.bottom_padding {
	padding-bottom: 2%;
}

	@media(min-width: 1024px){
		div.content.bottom_padding {padding-bottom: 2%;}
	}

	@media(min-width: 1400px){
		div.content.bottom_padding {padding-bottom: 1%;}
	}


div.content.top_padding {
	padding-top: 2%;
}

	@media(min-width: 1024px){
		div.content.top_padding {padding-top: 2%;}
	}

	@media(min-width: 1400px){
		div.content.top_padding {padding-top: 2%;}
	}

.background {
	width: 100%;
	height: auto;
}

.bkgrnd_brown {background: #55413c;}
.bkgrnd_yellow {background: #feba17;}
.bkgrnd_yellow_dark {background: #CB9201;}
.bkgrnd_grey {background: #5E514D;}
.bkgrnd_teal {background: #00B2A9;}
.bkgrnd_blue {background: #193F5E;}

.bkgrnd_brown p, .bkgrnd_grey p {color: #ffffff;}


.left {text-align: left;}
.center {text-align: center;}

h1 a:link, h1 a:visited, h1 a {color: #ed1c2f;}

p.subhead {
	color: #ed1c2f;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 125%;
	line-height: 150%;
}

.footer {
	padding: 32px 5%;
}

.padding_null_bottom {padding-bottom: 0px !important;}




div[class^="copyblock_prod"] p.footnote, .footnote {
	font-size: 90%;
}

		h3.askexpert {
			color: #ed1c2f;
			font-size: 320%;
			padding: 0% 10%;
			margin: 0px 0px 4px;
		}

/* - - - - - - - - - - - ADA Contrast for Contact an Expert - - - - - - - - - - - */

	h3.askexpert, h3.askexpert a:link, h3.askexpert a:visited, h3.askexpert + p.subhead {color: #415364;}


/* - - - - - - - - - - - - - - ADA Header background - - - - - - - - - - - - - - */
	.bkgrnd_ada {
		display: none;
	}

			@media(min-width: 1200px){
				.bkgrnd_ada {
					display: block;
					position: absolute;
					top: 0%;
					left: 0%;
					width: 100%;
					height: 130px;
					background: #415465dd;
					z-index: 1;

				}
			}



/* - - - - - - - - - - - - - - Call to Action Buttons - - - - - - - - - - - - - - */

p span[class^="formulation"].button, p span[class^="application"].button {
	font-size: 12px;
	padding: 12px 18px;
	background: #e80033;
	border-radius: 6px;
	letter-spacing: 0.15rem;
	font-weight: bold;
}

	@media(min-width: 768px){
		p span[class^="formulation"].button, p span[class^="application"].button {
			padding: 16px 32px;
			font-size: 65%;
			white-space: nowrap;
			display: inline-block;
		}
	}

/* - - - - - - - - - - - - - - Horizontal Navigation - - - - - - - - - - - - - - */

.navigation {
	font-size: 110%;
	padding: 18px 32px;
	background: #fcfcfc;
	text-transform: uppercase;
	border-bottom: 1px solid #ccc;
}

	@media(min-width: 1024px){
		.navigation {
			border-bottom: 0px solid #ccc;
		}
	}

.navigation ul {
	margin: 0px;
	padding: 0px;
	font-size: 110%;
}

.navigation li {
	line-height: 2;
	padding: 0px;
	list-style: none;
}

.navigation a {
	color: #e80033;
	padding: 0px 0px 0px;
}
		
.home.subpage .navigation a {
	color: #e80033;
}

.navigation a:hover {text-decoration: underline;}

	@media(min-width: 1200px){

/*		.home .navigation a {
			color: #ffffff;
		}
*/
		.navigation {
			position: absolute;
			z-index: 25;
			top: 47px;
			right: 16%;
			font-size: 105%;
			padding: 0px 0px;
			background: transparent;
			color: #fff;
		}

			.header_sub.home .navigation {
				top: 40px;
			}
		
		.header_sub.home .navigation.translated, .navigation.translated {
			top: 48px;
			right: 280px;
			font-size: 75%;
		}

		.home .navigation {
			color: #ffffff;
		}
		
		.navigation a {
			color: #ffffff;
			padding: 0px 18px;
		}

		.navigation li {
			display: inline;
			border-right: 1px solid;
		}

		.navigation li:last-child {
			border-right: none;
		}

	}




	@media(min-width: 1440px){
		.header_sub.home .navigation.translated, .navigation.translated {
			top: 46px;
			right: 325px;
			font-size: 85%;
		}
		
		.navigation {
			right: 14%;
		}
}


/* - - - -  - - -  - - - - - - - - - Formulation Table Formatting - - - -  - - -  - - - - - - - - - */

div[class^="copyblock"] {
	width: 100%;
	border-radius: 0px;
	padding: 32px 5% 32px 5%;
	box-sizing: border-box;
}
	@media(min-width: 768px){
		
		div[class^="copyblock"] {
			padding: 32px 5% 32px 5%;
		}
		
	}

table.formulation {
	vertical-align: top;
	overflow: visible;
	padding: 0px;
	margin: 12px 0px 0px;
	max-width: 1440px;
	border: 1px solid #333;
}
	
table.formulation tr td.axis {
	background: #E0E0E3;
	text-align: center;
}

table.formulation tr td.axis.dark {
	background: #acacac;
}

table.formulation tr td {
	padding: 4px 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
}

table.formulation tr td:last-child {
	border-right: 0px solid #333;
}

table.formulation tr:first-child td {
	border-top: 0px solid #333;
}


table.formulation tr td p{
	margin: 0px 0px;
	padding: 0px 0px;
}

table.formulation tr:first-child td {
	background: #415465;
	color: #ffffff;
	vertical-align: middle;
}
	
table.formulation a, table.formulation a:link {
	font-weight: bold;
	color: #00B2AD;
}

.txt_dow_red {color:#e80033;}
.txt_white {color:#ffffff;}

.txt_dow_red a:link, .txt_dow_red a:visited {color:#e80033;}


.copyblock.alignment {
	padding: 8px 10% 32px 10%;
}

	@media(min-width: 1024px){
		.copyblock.alignment {
			padding: 8px 14% 32px 14%;
		}
	}


table + h4 {
	margin-top: 18px;
}






div[class^="copyblock_prod"] div.back {
	text-align: left;
	box-sizing: border-box;
	position: absolute;
	top: -1%;
	right: 2%;
	z-index: 100;
}

div[class^="copyblock_prod"] p.callout {
	font-size: 205%;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	margin: 32px 0px 0px;
	font-weight: 400;
}

.main_image {padding: 0px 5%;}

	@media(min-width: 768px){
		.main_image {padding: 0px 10%;}
		div[class^="copyblock_prod"] div.back {
			top: 5%;
			right: 10%;
		}
	}

div[class^="copyblock_prod"] .main_image img {
	max-width: 100%;
	max-height: initial;
	/* width: 100%; */
	margin: 0px 0px;
}

picture.mobile {display: block;}
video.desktop {display: none;}

picture > img {
	width: 100%;
}

		@media(min-width: 768px){
			picture.mobile {display: none;}
			video.desktop {display: block;}
		}