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

 body {
	 margin:0px;
	 padding:0px;
	 font-family:Arial, Helvetica, sans-serif;
	 font-size:14px;
	 color:#415564;
 }
 
h1 {
	font-size: 325%;
	line-height: 1.05;
	color: #ed1c2f;
	margin: 18px 0px 0px;
	padding: 0px;
	font-weight: bold;
}

h1 span {
	color: #415465;
}

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

		@media(min-width: 1600px){
					h1 {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 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^="cardcopyback"] {
	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;
				bottom: 0px;
				right: 10%;
			}

			div[class^="cardcopyfront"], div[class^="cardcopyback"] {
				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: 80%;
	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;
							}
					
					}

					@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: 12px 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^="cardflip"], div.details, div[class^="cardcopyback"] {
	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^="cardcopyback"] {
							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: 35% 64%;
								grid-template-columns: 35% 64%;
								min-height: 70%;
							}
														
							div.content, div.products {
								position:relative;
								font-size: 75%;
							}

							div.products {
								white-space: nowrap;
							}
							
							div[class^="cardflip"], div.details, div[class^="cardcopyback"] {
								text-align: right;
							}

					}

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

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


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

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 {
			max-width: 420px;
		}

		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: top;
	transform: translate(-10%, 25%);
}

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

				div[class^="cardcopyback"] 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"] {
							position: absolute;
							top: 10%;
							left: 10%;
							width: 90%;
							border-radius: 0px;
						}
						
						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^="cardcopyback"] {
							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;
}

/* -------------------- 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;	
}

			@media(min-width: 768px){

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

			}

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;
	}
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 h2 {
	color: #ffffff;
	font-size: 70%;
	transform: translateY(-50%);
	margin: 0px 0px 0px;
	position: absolute;
	top: 65%;
	line-height: 1.0;
	width: 70%;
}

	@media(min-width: 640px){
		.tagline h2 {
			top: 50%;
			width: 40%;
		}
	}

.tagline h2 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 7.5%;
}

			@media(min-width: 768px){

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

					div.menu {
						text-align: left;
						position: absolute;
						right: 5%;
						top: 32px;
						min-height: inherit;
					}
				
					div.header div.logo img {
						max-width: 180px;
						width: auto;
						padding: 0px 0px;
					}
					
			}


			@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, div[class^="cardcopyback"] 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 0% 32px 10%;
}

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

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

.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: 200px;
			cursor: pointer;
		}
		
			@media(min-width: 768px){

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

		div[class^="copyblock_prod"] h2 {
			color: #ed1c2f;
			font-size:250%;
			padding-left: 10%;
			padding-right: 10%;
		}
		
		div[class^="copyblock_prod"] h3 {
			color: #415465;
			font-size: 200%;
			border-top: 1px solid #787878;
			margin-left: 10%;
			margin-right: 10%;
			padding-top: 18px;
		}

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

		div[class^="copyblock_prod"] p {
			color: #415465;
			font-size:195;
			padding-left: 10%;
			padding-right: 10%;
			text-align: left;
		}

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

			@media(min-width: 1024px){

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

				span[class^="formulation"] {
					background: #ed1c2f;
					color: #ffffff;
					text-decoration: none;
					padding: 12px 24px;
					border-radius: 6px;
					display: table;
					margin: 0px auto 24px;
					text-transform: uppercase;
					letter-spacing: 0.1em;
					font-size: 125%;
					cursor:pointer;
					text-align: center;
				}


			@media(max-width: 1024px){

				.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;
			}

			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^="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: 90%;
	max-height: 90%;
	margin: 0px auto 0px;
	display: block;
	transform: translateY(5%);
}

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: 16%;
			}
		}

/*	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;
}

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"] img {
	width: 100%;
	height: auto;
	border-top: 12px solid #425365;
	border-left: 12px solid #425365;
	border-right: 12px solid #425365;
	border-bottom: 0px solid #425365;
	box-sizing: border-box;
	transition: all 0.2s ease-out;
}

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: 7.8%;
	height: 5.2%;
	min-width: 26.6%;
	/* background: rgba(0,0,0,0.15); */
}

div.link:hover {
	cursor: pointer;
}

.pdf_4473_1 {top: 23.2%;}
.pdf_4473_2 {top: 28.8%;}
.pdf_4473_3 {top: 46.0%;}

.pdf_4476_1 {top: 12.2%;}
.pdf_4476_2 {top: 18.8%;}
.pdf_4476_3 {top: 26.0%;}

.pdf_4477_1 {top: 19.2%;}
.pdf_4477_2 {top: 26.2%;}
.pdf_4477_3 {top: 46.1%; height: 8.5%;}

.pdf_4478_1 {top: 17.4%;}
.pdf_4478_2 {top: 36.0%;}

.pdf_4479_1 {top: 16.8%;}
.pdf_4479_2 {top: 22.8%;}
.pdf_4479_3 {top: 44.0%;}
.pdf_4479_4 {top: 49.4%;}

.pdf_4507_1 {top: 11.2%;}
.pdf_4507_2 {top: 26.8%;}
.pdf_4507_3 {top: 32.0%;}
.pdf_4507_4 {top: 37.0%;}
.pdf_4507_5 {top: 42.4%;}
.pdf_4507_6 {top: 57.6%;}


p.chat {
	display: inline-block;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	max-width: 360px;
	position: absolute;
	z-index: 50;
	margin: 0px auto;
	left: 50.5%;
}

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% 64px;
	position: relative;
}


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

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

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


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

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

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

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

.bkgrnd_brown {background: #55413c;}
.bkgrnd_yellow {background: #feba17;}
.bkgrnd_grey {background: #979799;}

.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 0px;
}

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



/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #ed1c2f;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #ffffff;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
	position: absolute;
	right: -2000%;
	width: 400px;
	margin: -60px -10px 0 0px;
	padding: 80px 50px 50px;
	opacity: 0;
	background: #ededed;
	list-style-type: none;
/*	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(125%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
display: none;
*/}
#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
transform: none;
opacity: 1;
display: block;
	right: 0%;
}