/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Body - General Layout Structure	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font: 14px/20px 'Montserrat', Verdana, Arial, geneva, sans-serif;
	font-weight: 400; 
	font-style: normal; 
	text-align: left;
	color: #333333;
	overflow: hidden;
	}

	img {
		border: 0;
		padding: 0;
		border-style: none;
		}
	
	a { font: 14px/24px 'Montserrat', Verdana, Arial, geneva, sans-serif; font-weight: normal; font-style: normal; }
	a:link { color: #333333; text-decoration: none; }
	a:active { color: #333333; text-decoration: none; outline: none; }
	a:visited { color: #333333; text-decoration: none; }
	a:hover { color: #666666; text-decoration: none; }
	a:focus { outline: none; }

	.tweenAll_025 {
		-webkit-transition: all 0.25s cubic-bezier(0.25,1,0.25,1);
		   -moz-transition: all 0.25s cubic-bezier(0.25,1,0.25,1);
			-ms-transition: all 0.25s cubic-bezier(0.25,1,0.25,1);
			 -o-transition: all 0.25s cubic-bezier(0.25,1,0.25,1);
				transition: all 0.25s cubic-bezier(0.25,1,0.25,1);
		}
	.tweenAll_05 {
		-webkit-transition: all 0.5s cubic-bezier(0.25,1,0.25,1);
		   -moz-transition: all 0.5s cubic-bezier(0.25,1,0.25,1);
			-ms-transition: all 0.5s cubic-bezier(0.25,1,0.25,1);
			 -o-transition: all 0.5s cubic-bezier(0.25,1,0.25,1);
				transition: all 0.5s cubic-bezier(0.25,1,0.25,1);
		}
	.tweenAll_75 {
		-webkit-transition: all 0.75s cubic-bezier(0.25,1,0.25,1);
		   -moz-transition: all 0.75s cubic-bezier(0.25,1,0.25,1);
			-ms-transition: all 0.75s cubic-bezier(0.25,1,0.25,1);
			 -o-transition: all 0.75s cubic-bezier(0.25,1,0.25,1);
				transition: all 0.75s cubic-bezier(0.25,1,0.25,1);
		}
	.tweenAll_1 {
		-webkit-transition: all 1s cubic-bezier(0.25,1,0.25,1);
		   -moz-transition: all 1s cubic-bezier(0.25,1,0.25,1);
			-ms-transition: all 1s cubic-bezier(0.25,1,0.25,1);
			 -o-transition: all 1s cubic-bezier(0.25,1,0.25,1);
				transition: all 1s cubic-bezier(0.25,1,0.25,1);
		}

	h1 {
		position: relative;
		width: 100%;
		font: 24px/34px 'Montserrat', Verdana, Arial, sans-serif;
		font-weight: 700; 
		font-style: normal; 
		color: #333333;
    	margin: auto;
		text-transform: uppercase;
		}
		.h1-extra {
			display: block;
			position: relative;
			font: 12px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
			font-weight: 700; 
			font-style: normal; 
			color: #a1a1a1;
			text-transform: uppercase;
			}

	h2 {
		position: relative;
		width: 100%;
		font: 18px/20px 'Montserrat', Verdana, Arial, sans-serif;
		font-weight: 500; 
		font-style: normal; 
		color: #333333;
    	margin: 20px 0 0 0;
		margin: 0;
		text-transform: uppercase;
		}
	h3 {
		position: relative;
		width: 100%;
		font: 24px/24px 'Montserrat', Verdana, Arial, sans-serif;
		font-weight: 700; 
		font-style: normal; 
		color: #333333;
		margin: 25px 0 0 0;
		text-transform: uppercase;
		}
		
		.underline {
			border-bottom: 2px solid #FFFFFF;
    		display: inline-block;
			}

		p {
			font: 14px/20px 'Montserrat', Verdana, Arial, geneva, sans-serif;
			font-weight: 400; 
			font-style: normal;
			margin: 0 0 25px 0;
		}
	

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GENERIC STUFF
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	#app {
		/*opacity: 0;*/
	}

	#cover {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		z-index: 100;
		}
	#wrapper {
		display: block;
		position: relative;
		width: 100%;
		}
		#header {
			display: block;
			position: relative;
			height: 70px;
			margin: 0 auto 0 auto;
			z-index: 12;
			/*transform: translate3d(0px, 0, 5px);*/
			}
			#logo-trends {
				position: absolute;
				top: 10px;
				left: 50%;
				width: 300px;
				margin: 0 0 0 -150px;
				overflow: hidden;
				}
				#logo-trends img {
					width: 100%;
					height: auto;
					}
			#navigation {
				position: absolute;
				top: 70px;
				left: 0;
				width: 100%;
				/*height: 70px;*/
				list-style-type: none;
				text-align: center;
				}
				#nav-shadow {
					position: absolute;
					width: 100%;
					height: 70px;
					margin: 0;
					padding: 0;
					background-image: url(../img/navigation_shadow.png);
					background-repeat: no-repeat;
					background-position: top center;
					pointer-events: none;
					}

					#nav-links {
						position: relative;
						list-style-type: none;
						margin: 30px 0 0 0;
						padding: 0;
						width: 100%;
						}
					#nav-links li {
						display: inline-block;
						margin: 0 10px 0 10px;
						vertical-align: text-top;
						}
					#nav-links li a {
						position: relative;
						font: 16px/24px 'Montserrat', Verdana, Arial, sans-serif;
						font-weight: 700; 
						font-style: normal; 
						color: #FFFFFF;
						text-transform: uppercase;
						text-align: center;
						}
					.homepage #nav-links li a {
						color: #000000;
						}

					#navigation.active #nav-links li a {
						/*text-decoration: underline;*/
						background-image: linear-gradient( to top, #333333, #333333 2px, transparent 2px);
						}

					
			#behrdotcom {
				display: inline-block;
				position: absolute;
				top: 25px;
				left: 20px;
				font: 16px/20px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
				text-transform: uppercase;
				}

			#shopping-cart {
				display: none;
				position: absolute;
				top: 25px;
				right: 135px;
				}
				#shopping-cart img {
					display: block;
					width: 20px;
					height: 20px;
					margin-top: -1px;
					}

			#language {
				display: block;
				position: absolute;
				top: 25px;
				right: 20px;
				font: 16px/20px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
				text-transform: uppercase;
				text-align: right;
				}
			#language-select {
				display: inline-block;
				position: absolute;
				top: 0px;
				right: 10px;
				font: 16px/20px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
				font-weight: 400; 
				font-style: normal; 
				color: #333333;
				text-transform: uppercase;
				background-color: #fff;
				border-radius: 10px;
				padding: 10px 10px 10px 10px;
				text-align: left;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				display: none;
				z-index: 55;
				}
				a.language-header {
					display: block;
					font: 16px/20px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
					font-weight: 400; 
					font-style: normal;
					text-align: right;
					color: #000;
					}
				.language-row {
					display: block;
					margin: 10px 0 0 0;
					}
				.language-category {
					display: inline-block;
					width: 60px;
					}
				.flag {
					width: 31px;
					height: 20px;
					vertical-align: text-bottom;
					margin: 0 10px 0 0;
					}
					#language .flag {
						margin: 0 0 0 10px;
						}
					.language-row .flag {
						margin: -3px 10px 0 0;
						}
					.language-row a {
						margin: 0 0 0 20px;
						font: 16px/20px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
						}

			.social {
				display: inline-block;
				position: relative;
				text-align: center;
				width: 100%;
				margin-top: 10px;
				}
				.social-title {
					font: 12px/16px 'Montserrat', Verdana, Arial, geneva, sans-serif;
					font-weight: 400; 
					font-style: normal; 
					color: #ffffff;
					}
				.social-icon {
					display: inline-block;
					margin: 5px 0 0 5px;
					}
					.social-icon img {
						width: 30px;
						height: 30px;
						}
				#homepage-header .social-title {
					color: #000;
				}

			.section {
				display: inline-block;
				position: relative;
				width: 100%;
				margin: 0 0 75px 0;
				padding: 0;
				text-align: center;
				}
				.section.last {
					margin: 0 0 0 0;
					}
				.overflow {
					overflow: hidden;
					}
				.section-inner {
					position: relative;
					width: 100%;
					max-width: 1600px;
					margin: 0 auto 0 auto;
					}

				.section.animate-sides {
					overflow: hidden;
					margin: 0;
					}

				#coty .section-inner,
				#color_trends .section-inner,
				.section_howto .section-inner {
					margin: 50px auto 50px auto;
					}



					.inner-wide {
						margin: 0 auto;
						padding: 0 20px 0 20px;
						text-align: center;
						-moz-box-sizing: border-box;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						}
						.inner-wide.thin {
							max-width: 700px;
							}
						.inner-wide p.thin {
							max-width: 900px;
							margin-right: auto;
							margin-left: auto;
							}
						.inner-wide.video {
							max-width: 800px;
							}
					.inner-left {
						position: absolute;
						top: 0;
						right: 50%;
						width: 48%;
						}
					.inner-right {
						position: absolute;
						top: 0;
						left: 50%;
						width: 48%;
						}
						.inner-content {
							position: relative;
							margin: 15% 25px 0 25px;
							max-width: 450px;
							}
							.inner-content h1 {
								margin-bottom: 40px;
								}
							.inner-content h2 {
								color: #fb7e7b;
								margin-bottom: 40px;
								}
							.inner-content a.textlink {
								font-size: 18px;
								/*text-decoration: underline;*/
								color: #999;
								}

						.inner-visuals {
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							height: 700px;
							-webkit-perspective: 1000;
							}
							.inner-left .inner-visuals {
								left: auto;
								right: 0;
								}

							.inner-visuals .content-img {
								position: absolute;
								top: 0;
								width: auto;
								height: 700px;
								}
							.inner-left .inner-visuals .content-img {
								right: 0;
								}
							.inner-right .inner-visuals .content-img {
								left: 0;
								}

				.feature-image {
					display: block;
					position: relative;
					width: 100%;
					height: auto;
					margin: 0 0 30px 0;
					border-radius: 10px;
					overflow: hidden;
					-webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
					-moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
					box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
					}
					.feature-image img {
						display: block;
						position: relative;
						width: 100%;
						height: auto;
						}

				.detail {
					display: inline-block;
					position: relative;
					width: 40%;
					margin: 0 0.5% 0 0.5%;
					padding: 0;
					text-align: center;
					vertical-align: top;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					}

					.detail:first-child {
						margin: 0 0.5% 0 ;
						}
					.detail:last-child {
						margin: 0 0 0 0.5%;
						}
					.detail-inner {
						display: block;
						position: relative;
						width: 100%;
						height: auto;
						max-width: 600px;
						margin: 0 auto 20px auto;
						border-radius: 10px;
						overflow: hidden;
						-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0);
						-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0);
						box-shadow: 0 0 30px 0 rgba(0,0,0,0);
						transition: box-shadow 0.5s;
						}
						body.isDesktop .detail-inner:hover {
							-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							}
						.detail-inner img {
							display: block;
							position: relative;
							width: 100%;
							height: auto;
							}
				.detail.column3 {
					width: 31%;
					}

			#homepage-header {
				display: inline-block;
				position: relative;
				width: 100%;
				margin: 0 0 75px 0;
				padding: 0;
				text-align: center;
				background-image: url(../img/backgrounds/homepage.png);
				background-repeat: repeat-x;
				background-position: center top;
				}
				#homepage-header .inner-wide {
					padding: 0;
					}

				#homepage-header .links {
					display: block;
					position: relative;
					width: 100%;
					}
					#logo_2020,
					#logo_2020_color_trends {
						display: block;
						position: relative;
						width: 100%;
						max-width: 700px;
						margin: 75px auto 0 auto;
						opacity: 0;
						}

					@media screen and (max-width: 750px) {
						#logo_2020,
						#logo_2020_color_trends {
							width: 95%;
							}
					}

					#logo_2020_color_trends {
						margin: 0 auto;
						}

						#logo_2020 img,
						#logo_2020_color_trends img {
							width: 100%;
							height: auto;
							}
							.crossfade {
								position: absolute;
								top: 0;
								left: 0;
							}
							#crossfade1,
							#crossfade2,
							#crossfade3,
							#crossfade4,
							#crossfade5 {
								opacity: 0;
							}

					#names_2020 {
						display: block;
						position: relative;
						width: 100%;
						height: 125px;
						margin: 0 auto 0 auto;
						text-align: center;
						overflow: hidden;
						}
						#names_2020 .holder {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 6000px;
							text-align: center;
							transform: translate(-50%, -50%);
							}
							#names_2020 .holder .name {
								display: inline-block;
								font: 36px/36px 'Montserrat', Verdana, Arial, sans-serif;
								font-weight: 800; 
								font-style: normal;
								text-transform: uppercase;
								color: #CCCCCC;
								margin: 0 10px;
								}
						#names_2020 .fade {
							display: block;
							position: absolute;
							width: 100%;
							height: 100%;
							background-image: -webkit-linear-gradient(to right, white, rgba(255,255,255,0), white);
							background-image: -o-linear-gradient(to right, white, rgba(255,255,255,0), white);
							background-image: linear-gradient(to right, white, rgba(255,255,255,0), white);
							}


						#names_2020 .selected {
							display: inline-block;
							text-align: center;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							padding: 0 50px;
							
							background-image: -webkit-linear-gradient(to right, rgba(255,255,255,0) 0%, white 10%, white 90%, rgba(255,255,255,0) 100%);
							background-image: -o-linear-gradient(to right, rgba(255,255,255,0) 0%, white 10%, white 90%, rgba(255,255,255,0) 100%);
							background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, white 10%, white 90%, rgba(255,255,255,0) 100%);
							}
						#names_2020 .fade,
						#names_2020 .selected {
							pointer-events: none;
							-webkit-touch-callout: none;
							-webkit-user-select: none;
							-khtml-user-select: none;
							-moz-user-select: none;
							-ms-user-select: none;
							-o-user-select: none;
							user-select: none;
							}
							#names_2020 .selected div {
								display: none;
								font: 48px/36px 'Montserrat', Verdana, Arial, sans-serif;
								font-weight: 800; 
								font-style: normal;
								text-transform: uppercase;
								vertical-align: text-bottom;
								}
							#names_2020 .selected div.active {
								display: inline-block;
								}


							@media screen and (max-width: 600px) {
								#names_2020 .fade {
									background-image: none;
									}
							}


					#homepage-header .social {
						position: relative;
						color: #333333;
						text-align: center;
						margin-top: 20px;
						}
						#homepage-header .social .social-icon {
							display: inline-block;
							margin: 5px 5px 0 5px;
							}




				#coty {
					max-height: 925px;
					background-image: url(../img/backgrounds/homepage_coty.jpg);
					background-repeat: repeat-x;
					background-position: center top;
					background-size: cover;
					}
					#coty h1 {
						font: 100px/80px 'Montserrat', Verdana, Arial, sans-serif;
						font-weight: 700; 
						color: #FFFFFF;
						}
						#coty h1 span {
							font-weight: 400;
							}
						#coty h1 span.coty_mini_title {
							display: block;
							font: 30px/50px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 200;
							font-style: normal;
							}

					#coty h2 {
						font: 60px/60px 'Montserrat', Verdana, Arial, sans-serif;
						font-weight: 200; 
						color: #FFFFFF;
						opacity: 0.5;
						}

					#coty .feature-image {
						display: block;
						position: relative;
						width: 100%;
						max-width: 1400px;
						height: auto;
						margin: 0 auto;
						border-radius: 10px;
						overflow: hidden;
						-webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
						-moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
						box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
						}
					@media screen and (max-width: 1400px) {
						#coty h1 {
							font: 60px/60px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 700;
							}
						#coty h2 {
							font: 40px/40px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 200; 
							}
					}
					@media screen and (max-width: 900px) {
						#coty h1 {
							font: 40px/40px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 700;
							}
						#coty h2 {
							font: 24px/24px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 200; 
							}
					}



				#chips {
					position: relative;
					display: block;
					margin: 0 auto;
					max-width: 1400px;
					}

					a.chip,
					.chip {
						display: inline-block;
						position: relative;
						width: 200px;
						height: 170px;
						margin: 20px;
						padding: 0;
						font: 10px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
						font-weight: 400; 
						color: #ffffff;
						text-transform: uppercase;
						}
						.chip-inner {
							display: block;
							position: relative;
							width: 100%;
							height: 100%;
							margin: 0;
							padding: 0;
							}
						.chip-description {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							width: 90%;
							transform: translate(-50%, -50%);
							/*transform: translate3d(-50%, -50%, -1px);*/
							font: 18px/24px 'Montserrat', Verdana, Arial, geneva, sans-serif;
							font-weight: 700;
							}

						body.isMobile .chip-description {
							display: none;
							}

				@media screen and (max-width: 600px) {
					#chips a.chip,
					#chips .chip {
						margin: 5px;
						}

						body.isMobile #chips a.chip,
						body.isMobile #chips .chip {
							/*
							width: 100px;
							height: 85px;
							*/
							width: 150px;
							height: 128px;
							}
				}


						.chip-text {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							width: 100%;
							transform: translate(-50%, -50%);
							/*transform: translate3d(-50%, -50%, 1px);*/
							}

							.chip-text strong {
								font: 12px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
								font-weight: 700; 
								}
							.chip svg {
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: auto;
								}

								.bg_cider_spice { background-color: #AE8168; }
								.bg_red_pepper { background-color: #7A3F39; }
								.bg_bubble_shell { background-color: #D3A39B; }
								.bg_dusty_lilac { background-color: #D2C9CF; }
								.bg_dragonfly { background-color: #72908E; }
								.bg_rumba_orange { background-color: #C87A43; }
								.bg_creamy_mushroom { background-color: #CABDAF; color: #636466; }
								.bg_bluebird { background-color: #89B1D8; }
								.bg_battleship_gray { background-color: #98958E; }
								.bg_back_to_nature { background-color: #BDB990; }
								.bg_charismatic { background-color: #E7C181; }
								.bg_secret_meadow { background-color: #72754F; }
								.bg_graphic_charcoal { background-color: #5C5E60; }
								.bg_light_drizzle { background-color: #C9D3D8; color: #636466; }
								.bg_painters_white { background-color: #E5E1DC; color: #636466; }
								.bg_polar_bear { background-color: #F5F3ED; color: #636466; }
								.bg_ultra_pure_white { background-color: #F8F8F4; color: #636466; }


								a.chip_charismatic,
								a.chip_creamy_mushroom,
								a.chip_dusty_lilac,
								a.chip_light_drizzle,
								a.chip_painters_white,
								a.chip_polar_bear,
								a.chip_ultra_pure_white {
									color: #636466 !important;
								}
								.chip_cider_spice .chip-base { fill: #AE8168; }
								.chip_red_pepper .chip-base { fill: #7A3F39; }
								.chip_bubble_shell .chip-base { fill: #D3A39B; }
								.chip_dusty_lilac .chip-base { fill: #D2C9CF; }
								.chip_dragonfly .chip-base { fill: #72908E; }
								.chip_rumba_orange .chip-base { fill: #C87A43; }
								.chip_creamy_mushroom .chip-base { fill: #CABDAF; }
								.chip_bluebird .chip-base { fill: #89B1D8; }
								.chip_battleship_gray .chip-base { fill: #98958E; }
								.chip_back_to_nature .chip-base { fill: #BDB990; }
								.chip_charismatic .chip-base { fill: #E7C181; }
								.chip_secret_meadow .chip-base { fill: #72754F; }
								.chip_graphic_charcoal .chip-base { fill: #5C5E60; }
								.chip_light_drizzle .chip-base { fill: #C9D3D8; }
								.chip_painters_white .chip-base { fill: #E5E1DC; }
								.chip_polar_bear .chip-base { fill: #F5F3ED; }
								.chip_ultra_pure_white .chip-base { fill: #F8F8F4; }

								.color_cider_spice { color: #AE8168; }
								.color_red_pepper { color: #7A3F39; }
								.color_bubble_shell { color: #D3A39B; }
								.color_dusty_lilac { color: #D2C9CF; }
								.color_dragonfly { color: #72908E; }
								.color_rumba_orange { color: #C87A43; }
								.color_creamy_mushroom { color: #CABDAF; }
								.color_bluebird { color: #89B1D8; }
								.color_battleship_gray { color: #98958E; }
								.color_back_to_nature { color: #BDB990; }
								.color_charismatic { color: #E7C181; }
								.color_secret_meadow { color: #72754F; }
								.color_graphic_charcoal { color: #5C5E60; }
								.color_light_drizzle { color: #C9D3D8; }
								.color_painters_white { color: #E5E1DC; }
								.color_polar_bear { color: #F5F3ED; }
								.color_ultra_pure_white { color: #F8F8F4; }

							.chip-details {
								display: block;
								position: absolute;
								top: 50%;
								left: 0;
								transform: translate(-50%, -50%);
								font: 12px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
								font-weight: 400; 
								font-style: normal; 
								color: #333333;
								margin: 0;
								text-transform: uppercase;

								}
								.chip-details strong {
									margin: 0;
									font-weight: 700; 
									}


				#chips-mini {
					position: relative;
					display: block;
					width: 95%;
					margin: 0 auto 0 auto;
					}
					#chips-mini .chip,
					#chips-mini a.chip {
						display: inline-block;
						position: relative;
						width: 66px;
						height: 70px;
						margin: 0 8px 40px 8px;
						padding: 0;    
    					vertical-align: text-top;
						}
						#chips-mini .chip-text {
							display: none;
							top: 70px;
							width: 150px;
							color: #333333;
							transform: translate(-50%, 0%);
							}
							#chips-mini .chip svg {
								display: block;
								position: relative;
								top: auto;
								left: auto;
								width: 100%;
								height: auto;
								}
							#chips-mini .chip .chip-shadow {
								display: block;
								position: absolute;
								top: 4px;
								left: 0;
								width: 66px;
								height: 48px;
								background-color: #ffffff;
								-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
								-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
								box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
								opacity: 0;
								}



					.chip-checkmark {
						stroke: #FFFFFF;
						fill: none;
						stroke-width: 3;
						display: none;
						}
					.chip-outline {
						/*fill: #707070 !important;*/
						fill: #333333 !important;
						display: none;
						}

					.chip_secret_meadow .chip-outline,
					.chip_graphic_charcoal .chip-outline {
						fill: #333333 !important;
						}


				.section-compare {
					min-height: 750px;
					}
				#compare-gallery {
					display: block;
					position: relative;
					width: 100%;
					height: auto;
					margin: 0 auto 0 auto;
					border-radius: 10px;
					overflow: hidden;
					max-width: 600px;
					max-height: 600px;
					-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
					-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
					box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
					
					transform: translateX(50%) translateX(-60px);
					z-index: 55;
					}
					#compare-gallery .option {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: auto;
						display: none;
						}

					#compare-gallery .option_base {
						display: block;
						position: relative;
						top: auto;
						left: auto;
						}

						#compare-gallery .option img {
							display: block;
							position: relative;
							width: 100%;
							height: auto;
							}

				#compare-column {
					display: block;
					width: 500px;
					position: absolute;
					left: 50%;
					top: 100px;
   					transform: translateX(-100%) translateX(-60px);
					}
					#compare-column p {
						margin-bottom: 15px;
						}
					#compare-special {
						display: block;
						width: 500px;
						background-color: #f2f2f2;
						padding: 25px 0;
						border-radius: 10px 0 0 10px;
						}



					#compare-chips {
						position: relative;
						display: block;
						width: 95%;
						margin: 10px auto 0 auto;
						}
						#compare-chips .chip,
						#compare-chips a.chip {
							display: inline-block;
							position: relative;
							width: 66px;
							height: 70px;
							margin: 0 8px 0 8px;
							padding: 0;    
							vertical-align: text-top;
							}
							#compare-chips .chip svg {
								display: block;
								position: relative;
								top: auto;
								left: auto;
								width: 100%;
								height: auto;
								}
							#compare-chips .chip .chip-shadow {
								display: block;
								position: absolute;
								top: 4px;
								left: 0;
								width: 66px;
								height: 48px;
								background-color: #ffffff;
								-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
								-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
								box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
								}
							#compare-chips .chip-wide .chip-text {
								text-align: center;
								}


			@media screen and (max-width: 1200px) {
				#compare-gallery {
					transform: none;
					z-index: auto;
					}
						#compare-column {
							width: 100%;
							position: relative;
							left: auto;
							top: auto;
							margin-top: 25px;
							transform: translateX(-100%) translateX(-60px);
							transform: none;
							}
						#compare-special {
							width: 100%;
							background-color: transparent;
							padding: 0;
							border-radius: 0;
							}
			}


				#compare-selected {
					text-align: center;
					}

					a.chip-wide,
					.chip-wide {
						display: inline-block;
						position: relative;
						text-align: left;
						width: 100%;
						height: 70px;
						max-width: 400px;
						border-radius: 10px;
						margin: 0 0 10px 0;
						font: 10px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
						font-weight: 400;
						color: #ffffff;
						text-transform: uppercase;
						}
						.chip-wide .chip-text {
							width: 95%;
						}

						#compare-extras {
							margin: 25px;
							}

						#compare-extras p {
							margin-bottom: 0;
							}




				.section-explore {
					margin-top: 0;
					}
					.section-explore .section-inner {
						min-height: 750px;
						max-width: 1400px;
						}
				.section-explore-nav {
					margin-bottom: 50px;
					}
					.section-explore-nav .section-inner {
						max-width: none;
						}
					.section-explore-nav .inner-wide {
						margin: 0;
						padding: 0;
						}




					#explore-nav {
						display: block;
						position: relative;
						width: 100%;
						height: 330px;
						margin: 0 auto 0 auto;
						text-align: center;
						overflow: hidden;
						}
						#explore-nav .dots {
							display: block;
							position: absolute;
							bottom: 0;
							left: 50%;
							width: 3000px;
							text-align: center;
							transform: translate(-50%, 0%);
							font-size: 0;
							}
							#explore-nav .dots div {
								display: inline-block;
								position: relative;
								width: 8px;
								height: 8px;
								margin: 0 5px;
								padding: 0;
								-moz-box-sizing: border-box;
								-webkit-box-sizing: border-box;
								box-sizing: border-box;
								border-radius: 10px;
								background-color: #d4d4d4;
								overflow: hidden;
								transition: background-color 0.5s;
								}
							#explore-nav .dots .active {
								background-color: #6f6f6f;
								}

						#explore-nav .holder {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 3000px;
							text-align: center;
							transform: translate(-50%, -50%);
							}
							#explore-nav .holder div {
								display: inline-block;
								position: relative;
								width: 300px;
								height: 200px;
								margin: 0 5px;
								padding: 0;
								-moz-box-sizing: border-box;
								-webkit-box-sizing: border-box;
								box-sizing: border-box;
								border-radius: 10px;
								overflow: hidden;
								}
						#explore-nav .selected {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 400px;
							height: 260px;
							-moz-box-sizing: border-box;
							-webkit-box-sizing: border-box;
							box-sizing: border-box;
							border-radius: 10px;
							overflow: hidden;
							transform: translate(-50%, -50%);
							background-color: #000000;
							-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
							-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
							box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
							}
							#explore-nav .selected div {
								position: absolute;
								top: 0;
								left: 0;
								width: 400px;
								height: 260px;
								margin: 0;
								padding: 0;
								}

								#explore-nav .holder img,
								#explore-nav .selected img {
									display: block;
									position: relative;
									width: 100%;
									height: auto;
									}


						#scrollme {
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translate(-50%, 100%);
							}
							#scrollme img {
								display: block;
								position: relative;
								width: 26px;
								height: auto;
							}


							.explore-arrow { 
								position: absolute;
								top: 50%;
								left: 50%;
								width: 25px;
								height: 25px;
								transform: translate(-50%, -50%);
								background-color: rgba(0,0,0,0.35);
								border-radius: 25px;
								}

							#explore-arrow-left {
								margin-left: -175px;
								}

							#explore-arrow-right {
								margin-left: 175px;
								}

							#explore-gallery-arrow-left {
								transform: translate(0%, 0%);
								left: 25px
								}

							#explore-gallery-arrow-right {
								transform: translate(0%, 0%);
								left: auto;
								right: 25px;
								}



			@media screen and (max-width: 600px) {
						#explore-nav .selected {
							display: none;
							}
							#explore-arrow-left {
								margin-left: -125px;
								}

							#explore-arrow-right {
								margin-left: 125px;
								}
			}




				#explore-title {
					display: block;
					position: absolute;
					left: 20px;
					top: 25px;
					width: 300px;
					text-align: center;
					font: 18px/22px 'Montserrat', Verdana, Arial, geneva, sans-serif;
					font-weight: 700; 
					font-style: normal; 
					}
					#explore-title div {
						display: none;
						}
						#explore-title div.active {
							display: block;
							}

				#explore-gallery {
					display: block;
					position: absolute;
					top: 0;
					left: 320px;
					right: 20px;
					margin: 0 auto 0 auto;
					border-radius: 10px;
					overflow: hidden;
					-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
					-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
					box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
					z-index: 55;
					}
					#explore-gallery div {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: auto;
						opacity: 0;
						}
						#explore-gallery div img {
							display: block;
							position: relative;
							width: 100%;
							height: auto;
							}

					#explore-gallery .base {
						display: block;
						position: relative;
						top: auto;
						left: auto;
						}


				#explore-column {
					display: block;
					width: 300px;
					position: absolute;
					left: 20px;
					top: 60px;
					}
					#explore-column p {
						margin-bottom: 15px;
						}

						#explore-extras {
							margin: 25px 0 0 0;
							}
						#explore-extras p {
							margin: 20px;
							}
						#explore-extras .btn {
							margin: 0 0 15px;
							}

				#explore-selected  {
					margin-bottom: 25px;
					}
					#explore-selected .chip-wide {
						border-radius: 10px 0 0 10px;
						display: none;
						}
						#explore-selected .chip-wide .chip-text {
							width: 90%;
							}
						#explore-selected .chip-wide.active {
							display: block;
							}



			@media screen and (max-width: 1200px) {
				#explore-title {
					width: 250px;
					}
				#explore-gallery {
					left: 270px;
					}
				#explore-column {
					width: 250px;
					}

				#explore-selected  {
					margin-bottom: 0;
					}
			}

			@media screen and (max-width: 1050px) {
				#explore-title {
					display: block;
					position: relative;
					left: auto;
					top: auto;
					width: 100%;
					}
				#explore-gallery {
					transform: none;
					z-index: auto;
					position: relative;
					left: auto;
					right: auto;
					top: auto;
					width: 100%;
					margin: 25px auto 0 auto;
					}
					#explore-column {
						width: 100%;
						position: relative;
						left: auto;
						top: auto;
						margin-top: 35px;
						transform: translateX(-100%) translateX(-60px);
						transform: none;
    					text-align: left;
						}
				#explore-extras,
				#explore-selected {
					display: inline-block;
					width: 48%;
					margin: 0;
					vertical-align: text-top;
					}
					#explore-extras{
    					text-align: center;
						}
					#explore-selected .chip-wide {
						border-radius: 10px;
						}
				
				
			}
			@media screen and (max-width: 600px) {
				#explore-extras,
				#explore-selected {
					width: 100%;
    				text-align: center;
					}
				#explore-extras {
					margin-top: 25px;
					}
				#explore-selected .chip-wide.active {
					margin: 10px auto 10px auto;
					}
					#explore-column {
						margin-top: 25px;
						}
			}




				#inspire {
					height: 600px;
					background-image: url(../img/backgrounds/homepage_inspire.jpg);
					background-repeat: repeat-x;
					background-position: center top;
					background-size: cover;
					}
					#inspire h1 {
						color: #ffffff;
						margin-top: 100px;
						}

				#projects {
					position: relative;
					display: block;
					margin: 0 0 50px 0;
					}
					.project {
						display: inline-block;
						position: relative;
						width: 18%;
						margin: 0 0.5% 0 0.5%;
						padding: 0;
						text-align: center;
						font-size: 16px;
						vertical-align: top;
						-moz-box-sizing: border-box;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						border-radius: 10px;
						overflow: hidden;
						-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0);
						-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0);
						box-shadow: 0 0 30px 0 rgba(0,0,0,0);
						transition: box-shadow 0.5s;
						}
						body.isDesktop a.project:hover {
							-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							}
						.project-header {
							display: block;
							position: absolute;
							width: 100%;
							height: 130px;
							top: 0;
							left: 0;
							color: #ffffff;
							-webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
							-moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
							box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
							}
							.project-header div {
								display: block;
								position: absolute;
								top: 50%;
								left: 50%;
								width: 80%;
								font: 18px/22px 'Montserrat', Verdana, Arial, geneva, sans-serif;
								font-weight: 700; 
								font-style: normal; 
								margin: 0;
								text-transform: uppercase;
								transform: translate(-50%, -50%);
								}
						.project-header.light {
							color: #000000;
							}
						.project-image {
							display: block;
							position: relative;
							width: 100%;
							height: auto;
							}

						.project-image.mobile {
							display: none;
							}
						.project .btn {
							display: block;
							position: absolute;
							left: 50%;
							bottom: 30px;
							width: 60%;
							margin: 0;
							transform: translateX(-50%);
							}

					@media screen and (max-width: 1200px) {
						/*
						.project-header {
							height: 100px;
							}
						*/
							.project-header div {
								font: 14px/18px 'Montserrat', Verdana, Arial, geneva, sans-serif;
								font-weight: 700; 
								font-style: normal; 
								}
							
							.project .btn {
								font-size: 12px;
								min-width: inherit;
								width: auto;
								}
					}

					@media screen and (max-width: 800px) {
						.project {
							display: block;
							position: relative;
							width: 100%;
							height: 200px;
							margin: 0 0 30px 0;
							}
							.project-header {
								width: 40%;
								height: 200px;
								}
								.project-header div {
									font: 18px/22px 'Montserrat', Verdana, Arial, geneva, sans-serif;
									font-weight: 700; 
									font-style: normal;
									}

								.project2 .project-header,
								.project4 .project-header {
									position: absolute;
									top: 0;
									left: auto;
									right: 0;
									}

							.project-image {
								display: none;
								}
							.project-image.mobile {
								display: block;
								position: absolute;
								top: 0;
								right: 0;
								width: auto;
								height: 200px;
								}

								.project2 .project-image.mobile,
								.project4 .project-image.mobile {
									position: absolute;
									top: 0;
									right: auto;
									left: 0;
									}

							.project .btn {
								display: none;
								}
					}


				.homepage .howto p {
					font: 18px/22px 'Montserrat', Verdana, Arial, geneva, sans-serif;
					font-weight: 700; 
					font-style: normal;
					text-transform: uppercase;
					}
					.homepage .howto span {
						font: 12px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
						font-weight: 400; 
						font-style: normal;
						text-transform: uppercase;
						}




			#subpage-header {
				display: inline-block;
				position: relative;
				width: 100%;
				/*min-height: 300px;*/
				margin: 0;
				padding: 0;
				text-align: center;
				overflow: hidden;
				}
				#subpage-header h1 {
					width: 100%;
					font: 85px/85px 'Montserrat', Verdana, Arial, sans-serif;
					font-weight: 700; 
					font-style: normal; 
					color: #FFFFFF;
					text-transform: uppercase;
					text-align: center;
					margin: 140px 0 10px 0;
					}
					#subpage-header h1 span {
						font: 85px/85px 'Montserrat', Verdana, Arial, sans-serif;
						font-weight: 400;
						font-style: normal;
						white-space: nowrap;
						}
						#subpage-header h1 span.coty_mini_title {
							display: block;
							font: 30px/50px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 200;
							font-style: normal;
							}
				#subpage-header h3 {
					width: 100%;
					font: 24px/34px 'Montserrat', Verdana, Arial, sans-serif;
					font-weight: 700; 
					font-style: normal; 
					color: #333333;
					text-transform: uppercase;
					text-align: center;
					}

					/*
					#subpage-header .link-back {
						position: absolute;
						bottom: 45px;
						left: 20px;
						font: 12px/12px 'Montserrat', Verdana, Arial, geneva, sans-serif;
						font-weight: 700; 
						font-style: normal; 
						color: #fff;
						text-transform: uppercase;
						}
					*/

					#navigation .social {
						display: inline-block;
						position: absolute;
						top: 0;
						right: 20px;
						width: 150px;
						text-align: right;
						}
						#navigation .social .social-icon {
							display: inline-block;
							margin: 5px px 0 10px;
							}


		#end {
			display: block;
			position: relative;
			width: 100%;
			height: 200px;
			margin: 25px 0 0 0;
			padding: 0;
			text-align: center;
			background-image: url(../img/backgrounds/footer.jpg);
			background-repeat: repeat-x;
			background-position: center top;
			}

		#footer {
			display: block;
			position: relative;
			width: 100%;
			margin: 0 0 50px 0;
			padding: 0;
			text-align: center;
			font: 11px/16px 'Montserrat', Verdana, Arial, geneva, sans-serif;
			font-weight: 400; 
			font-style: normal; 
			color: #000000;
			}
			#footer p {
				margin: 0;
				}

			#legal {
				display: block;
				position: absolute;
				top: 10px;
				left: 20px;
				text-align: left;
				}
				#logo-footer img {
					width: 200px;
					height: auto;
					}
					#footer a.footer-link {
						display: inline-block;
						position: relative;
						font: 10px/16px 'Montserrat', "alternate-gothic-no-3-d", Verdana, Arial, geneva, sans-serif;
						font-weight: 700;
						font-style: normal;
						margin: 5px 10px 0 0;
						color: #333333;
						}

			#homedepot {
				display: block;
				position: absolute;
				top: 0;
				right: 20px;
				}
				#homedepot img {
					display: block;
					position: relative;
					width: 60px;
					height: auto;
					}



	.btn {
		display: inline-block;
		border-radius: 50px;
		height: 50px;
		margin: 20px 2px 0 2px;
		padding: 0 20px;
		font-size: 14px;
		font-weight: 700; 
		line-height: 50px;
		color: #333333;
		background-color: #ffffff;
		text-align: center;
		cursor: pointer;
		text-transform: uppercase;
		overflow: hidden;
		border: 1px solid #333333;
		min-width: 100px;
		}
		a.btn {
			color: #333333;
			}
		a.btn.download img {
			width: 25px;
			height: 25px;
			vertical-align: middle;
			margin: 0 10px 0 0;
			}



	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%;
		/*padding-top: 25px;*/
		height: 0;
		margin-top: 20px;
		border-radius: 10px;
		background-color: #fff;
	}
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255, 0.85);
		z-index: 1012;
		overflow:scroll;
		}
		.modal-inner {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			max-width: 570px;
			max-height: 650px;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 0;
			padding: 0;
			overflow: hidden;
			transform: translate(-50%, -50%);
			-webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			-moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			}

			body.isMobile .modal-inner {
				top: 0;
				left: 0;
				margin: 0;
				padding: 0;
				max-width: none;
				max-height: none;
				border-radius: 0;
				transform: translate(0%, 0%);
				}

			#modal-color-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			#modal-room-bg {
				display: block;
				position: relative;
				width: 100%;
				height: 300px;
				background-color: #000000;
				background-position: center center;
				background-size: cover;
				text-align: center;
				}
				#modal-room-chosen {
					display: block;
					position: relative;
					text-align: center;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					clear: both;
					margin: 10px auto 0 auto;
					width: 90%;
					}

				#modal-room .modal-content {
					margin-top: 0;
					}

				#modal-room .modal-content p {
					margin: 10px 0 0 0;
					}
				#modal-room .modal-content .social-title {
					color: #000;
					}


				#modal-order .modal-content p a {
					text-decoration: underline;
					}


			.modal-content {
				display: block;
				position: relative;
				text-align: center;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				clear: both;
				margin: 25px 25px 0 25px;
				}
				.modal-content.left {
					text-align: left;
					}
				.modal-content.slim {
					margin-top: 10px;
					}
				.modal-content p {
					margin-bottom: 10px;
					}
				#order-instructions {
					display: block;	
					}
				#order-max {
					display: none;	
					margin-bottom: 10px;
					}
				#modal-color-name {
					font: 24px/24px 'Montserrat', Verdana, Arial, sans-serif;
					font-weight: 700; 
					font-style: normal;
					color: #ffffff;
					text-transform: uppercase;
					text-align: center;
					}
					#modal-color-name span {
						font: 14px/16px 'Montserrat', Verdana, Arial, sans-serif;
						font-weight: 400; 
						font-style: normal; 
						text-transform: uppercase;
						}

					#modal-color-name.charismatic,
					#modal-color-name.creamy_mushroom,
					#modal-color-name.dusty_lilac,
					#modal-color-name.light_drizzle,
					#modal-color-name.painters_white,
					#modal-color-name.polar_bear,
					#modal-color-name.ultra_pure_white {
						color: #636466;
					}

			#modal-color-description {
				position: absolute;
				bottom: 25px;
				left: 5%;
				width: 90%;
				font: 14px/20px 'Montserrat', Verdana, Arial, sans-serif;
				font-weight: 400; 
				font-style: normal; 
				color: #ffffff;
				text-align: center;
				}
					#modal-color-description.charismatic p,
					#modal-color-description.creamy_mushroom p,
					#modal-color-description.dusty_lilac p,
					#modal-color-description.light_drizzle p,
					#modal-color-description.painters_white p,
					#modal-color-description.polar_bear p,
					#modal-color-description.ultra_pure_white p {
						color: #636466;
					}

			#modal-chips {
				position: relative;
				background-image: url(../img/backgrounds/modal_order.jpg);
				background-repeat: repeat-x;
				background-position: center top;
				background-size: cover;
				text-align: center;
				padding: 5px 0;
				}
				#modal-chips-chosen {
					display: block;
					position: relative;
					text-align: left;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					clear: both;
					margin: 5px auto 0 auto;
					max-width: 400px;
					}
				#order-next {
					margin-top: 0;
					}
				.chip-group {
					display: block;
					width: 100%;
					margin: 15px auto 0 auto;
					max-width: 450px;
					}

					#modal-chips .chip,
					#modal-chips a.chip {
						display: inline-block;
						position: relative;
						width: 66px;
						height: 70px;
						margin: 0 8px 0 8px;
						padding: 0;    
						vertical-align: text-top;
						}
						#modal-chips .chip svg {
							display: block;
							position: relative;
							top: auto;
							left: auto;
							width: 100%;
							height: auto;
							}
						#modal-chips .chip .chip-shadow {
							display: block;
							position: absolute;
							top: 4px;
							left: 0;
							width: 66px;
							height: 48px;
							background-color: #ffffff;
							-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
							}




				.modal-divider {
					display: block;
					width: 100%;
					height: 1px;
					}
				.swatch-mini {
					display: inline-block;
					font: 10px/20px 'Montserrat', Verdana, Arial, sans-serif;
					font-weight: 700; 
					font-style: normal;
					color: #333333;
					text-transform: uppercase;
					text-align: left;
					margin: 5px 15px 0 0;
					overflow: hidden;
					}

					#modal-chips-chosen .swatch-mini {
						margin: 5px 0 0 0;
						width: 190px;
					}

					.swatch-mini-circle {
						position: relative;
						display: inline-block;
						height: 16px;
						width: 16px;
						margin: 2px 5px 2px 0;
						border-radius: 20px;
						vertical-align: top;
						}
					.swatch-mini-title {
						position: relative;
						display: inline-block;
						}
						.swatch-mini-title span {
							font-weight: 400;
							}

			.modal-close {
				position: absolute;
				top: 0;
				right: 0;
				width: 80px;
				height: 80px;
				}
				.modal-close-bg {
					display: block;
					width: 80px;
					height: 80px;
					}
				.modal-close-x {
					display: block;
					position: absolute;
					top: 6px;
					right: 6px;
					width: 34px;
					height: 34px;
					}

				@media screen and (max-width: 500px) {
						.swatch {
							width: 60px;
							height: 60px;
							margin: 5px;
							}
						.swatch-check {
							width: 30px;
							height: 30px;
							bottom: -10px;
							right: -10px;
							}
				}

					#hamburger {
						display: none;
						position: absolute;
						top: 20px;
						left: 20px;
						width: 30px;
						height: 20px;
						}
						.bar {
							position: absolute;
							top: 0;
							left: 0;
							background-color: #999999;
							width: 100%;
							height: 4px;
							border-radius: 2px;
							}
							#bar2 {
								top: 8px
								}
							#bar3 {
								top: 16px
								}

					#menu {
						display: block;
						position: fixed;
						top: 0;
						left: 0;
						width: 0;
						height: 100%;
						background-color: #111111;
						z-index: 1255;
						overflow: hidden;
						}
						#menu-inner {
							position: relative;
							margin: 20px;
							min-width: 380px;
							overflow: hidden;
							}
							#logo-trends-mobile {
								display: block;
								position: relative;
								width: 300px;
								height: 50px;
								margin: 0 0 50px 0;
								overflow: hidden;
								}
								#logo-trends-mobile img {
									width: 100%;
									height: auto;
									}
						a.menu-link {
							display: block;
							position: relative;
							font: 18px/20px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 700; 
							font-style: normal; 
							color: #999999;
							text-transform: uppercase;
							margin: 0;
							}
						.menu-divider {
							display: block;
							position: relative;
							width: 100%;
							height: 1px;
							background-color: #333333;
							margin: 10px 0 10px 0;
							opacity: 0;
							}
						#menu-extras {
							display: block;
							position: relative;
							width: 100%;
							margin: 50px 0 0 0;
							}
							a.footer-link {
								display: block; 
								color: #999999;
								text-transform: uppercase;
								}
							
						#menu .social {
							display: block;
							text-align: left;
							width: 100%;
							margin-top: 10px;
							}
							#menu .social-title {
								color: #ffffff;
								}
							#menu .social-icon {
								display: inline-block;
								margin: 5px 5px 0 0;
								}



				.grid {
					display: inline-block;
					position: relative;
					padding: 0;
					width: 48.9%;
					
					margin: 0 0.5% 50px 0.5%;
					vertical-align: top;
					text-align: left;

					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					}

					.grid-40 {
						width: 35.5%;
						}
					.grid-60 {
						width: 58%;
						}
					.grid-100 {
						width: 94.5%;
						}

					.grid-inner {
						display: block;
						position: relative;
						width: 100%;
						height: auto;
						margin: 0 auto 0 auto;
						border-radius: 10px;
						overflow: hidden;
						}
						.grid .swatch-mini {
							margin-left: 0;
							}
						.grid-inner img {
							display: block;
							position: relative;
							width: 100%;
							height: auto;
							}

						.compare {
							display: inline-block;
							position: relative;
							width: 29%;
							max-width: 540px;
							overflow: hidden;
							text-align: left;
							margin: 0 1% 0 1%;
							}
							.compare .slider {
								display: block;
								border-radius: 10px;
								}
							.compare .slider img {
								width: 100%;
								height: auto;
								}
							.compare .swatch-mini {
								font: 10px/20px 'Montserrat', Verdana, Arial, sans-serif;
								font-weight: 700;
								margin: 5px 10px 0 0;
								width: auto;
								}
							.compare .swatches {
								display: block;
								min-height: 75px;
								}




					.article {
						position: relative;
						display: block;
						margin: 0;
						text-align: left;
						}
						.article-left {
							width: auto;
							margin: 0 420px 0 0;
							}
							.step {
								display: block;
								position: relative;
								width: 100%;
								height: auto;
								overflow: auto;
								margin: 0 0 20px 0;
								}
								.step h3 {
									margin: 0;
									}
								.step h3 span {
									font-weight: 400; 
									font-style: normal;
									}
								.step-image {
									display: block;
									position: relative;
									float: left;
									width: 200px;
									height: auto;
									border-radius: 10px;
									margin: 0 10px 0 0;
									overflow: hidden;
									}
									.step-image img {
										display: block;
										position: relative;
										width: 100%;
										height: auto;
										}
								.tip {
									position: relative;
									margin: 15px 0 15px 220px;
									padding: 20px;
									background-color: #f2f2f2;
									border-radius: 10px;
									-moz-box-sizing: border-box;
									-webkit-box-sizing: border-box;
									box-sizing: border-box;
									}
						.article-right {
							display: block;
							position: absolute;
							top: 0;
							right: 0;
							width: 400px;
							margin: 0;
								border-radius: 10px;
								background-color: #FFFFFF;
							}
							.extra {
								display: block;
								position: relative;
								width: 400px;
								margin: 0;
								padding: 20px;
								text-align: left;
								-moz-box-sizing: border-box;
								-webkit-box-sizing: border-box;
								box-sizing: border-box;
								}

								.article h3,
								.extra h3 {
									margin: 0;
									}
								.extra-chips {
									text-align: center;
									margin: 0 auto;
									}
									.extra-chips .chip {
										text-align: left;
										width: 100%;
										height: 70px;
										max-width: none;
										border-radius: 10px;
										margin: 10px 0 0 0;
										}
									.extra-chips .chip-text {
										width: 90%;
										}



								.extra ul {
									margin: 0 0 0 15px;
									padding: 0;
									}
								.extra-image {
									display: block;
									position: relative;
									width: 100%;
									height: auto;
									border-radius: 10px;
									margin: 0 0 0 0;
									overflow: hidden;
									}
									.extra-image img {
										display: block;
										position: relative;
										width: 100%;
										height: auto;
										}

							.divider {
								position: relative;
								width: 100%;
								height: 1px;
								background: #c4c4c4;
								margin: 5px 0 5px 0;
								}

			.html_text {
				display: inline-block;
			}

			body.subpage {
				background-repeat: repeat-x;
				background-position: center 70px;
				}
			#homepage .section_howto {
				background-color: #f2f2f2;
				}

			#subpage-coty {
				background-image: url("../img/backgrounds/coty.jpg");
				}

			#subpage-explore {
				background-image: url("../img/backgrounds/explore.jpg");
				}

			#subpage-projects {
				background-image: url("../img/backgrounds/projects.jpg");
				}

				#subpage-focalpoint {
					background-image: url("../img/backgrounds/project_focalpoint.jpg");
					}
				#subpage-reclaim {
					background-image: url("../img/backgrounds/project_reclaim.jpg");
					}
					#subpage-reclaim .section_howto {
						background-image: url("../img/projects/reclaim_howto.jpg");
						background-position: center center;
						background-size: cover;
						}

				#subpage-showcase {
					background-image: url("../img/backgrounds/project_showcase.jpg");
					}
				#subpage-smallspace {
					background-image: url("../img/backgrounds/project_smallspace.jpg");
					}
					#subpage-smallspace .section_howto {
						background-image: url("../img/projects/chilling_howto.jpg");
						background-position: center center;
						background-size: cover;
						}
				#subpage-walls {
					background-image: url("../img/backgrounds/project_walls.jpg");
					}
					#subpage-walls .section_howto {
						background-image: url("../img/projects/walls_howto.jpg");
						background-position: center center;
						background-size: cover;
						}

			#subpage-howto-chalk {
				background-image: url("../img/backgrounds/howto_chalk.jpg");
				}
			#subpage-howto-makeover {
				background-image: url("../img/backgrounds/howto_makeover.jpg");
				}
			#subpage-howto-wainscoting {
				background-image: url("../img/backgrounds/howto_wainscoting.jpg");
				}



			#subpage-coty #nav_coty,
			#subpage-explore #nav_explore,
			#subpage-projects #nav_projects,
			#subpage-focalpoint #nav_projects,
			#subpage-reclaim #nav_projects,
			#subpage-showcase #nav_projects,
			#subpage-smallspace #nav_projects,
			#subpage-walls #nav_projects,
			#subpage-howto-chalk #nav_projects,
			#subpage-howto-makeover #nav_projects,
			#subpage-howto-wainscoting #nav_projects {
				background-image: linear-gradient( to top, #FFFFFF, #FFFFFF 2px, transparent 2px);
				}


/**********************************************************************************
HOVERS AND STUFF
				.nav-item a:hover{
**********************************************************************************/

	body.isDesktop a.btn,
	body.isDesktop #footer a,
	body.isDesktop #language,
	body.isDesktop #behrdotcom,
	body.isDesktop #language-select a,
	body.isDesktop #homepage-header .links a,
	body.isDesktop a.menu-link,
	body.isDesktop #menu a.footer-link,
	body.isDesktop #nav-links a {
		
		-webkit-transition: color 1s cubic-bezier(0.25,1,0.25,1), background-color 1s cubic-bezier(0.25,1,0.25,1);
		   -moz-transition: color 1s cubic-bezier(0.25,1,0.25,1), background-color 1s cubic-bezier(0.25,1,0.25,1);
			-ms-transition: color 1s cubic-bezier(0.25,1,0.25,1), background-color 1s cubic-bezier(0.25,1,0.25,1);
			 -o-transition: color 1s cubic-bezier(0.25,1,0.25,1), background-color 1s cubic-bezier(0.25,1,0.25,1);
				transition: color 1s cubic-bezier(0.25,1,0.25,1), background-color 1s cubic-bezier(0.25,1,0.25,1);
		
		} 
	body.isDesktop a.footer-link:hover,
	body.isDesktop #homepage-header .links a:hover,
	body.isDesktop #nav-links a:hover {
		color: #666666;
		}

	body.isDesktop a.btn:hover {
		color: #999999;
		}

	body.isDesktop a.menu-link:hover,
	body.isDesktop #menu a.footer-link:hover {
		color: #FFFFFF;
		}


	body.isDesktop .nav-item a:hover{
		/*text-decoration: underline;*/
		/*background-image: linear-gradient( to top, #FFFFFF, #FFFFFF 2px, transparent 2px);*/
		}

/**********************************************************************************
QUERIES
**********************************************************************************/

	@media screen and (max-width: 1800px) {
	}
	
	@media screen and (min-width: 800px) and (max-width: 1200px) {
	}

	@media screen and (max-width: 1200px) {
		#subpage-header h1 {
			margin-top: 100px;
			}
			#subpage-header h1 span {
				display: block;
				}
					.detail.column3,
					.detail.column3:first-child,
					.detail.column3:last-child {
						width: 40%;
						margin: 0 0.5% 0 0.5%;
						}
	}


	@media screen and (max-width: 1100px) {
		.social-icon {
			margin: 5px 2.5px 0 2.5px;
			}
					#navigation .social {
						display: none;
						}
	}


	@media screen and (max-width: 900px) {
								.step-image {
									width: 100px;
									}
								.tip {
									margin-left: 120px;
									}
		
						.compare {
							width: 47%;
							}
	}

	@media screen and (max-width: 800px) {
			#legal {
				display: inline-block;
				position: relative;
				bottom: auto;
				left: auto;
				text-align: center;
				width: 100%;
				margin-top: 10px;
				}

		
			#homedepot {
				display: inline-block;
				position: relative;
				top: auto;
				right: auto;
				text-align: center;
				margin: 20px auto 10px auto;
				}
				#homedepot img {
					display: block;
					position: relative;
					width: 60px;
					height: auto;
					}
						.article-left {
							margin: 0;
							}
						.article-right {
							display: block;
							position: relative;
							top: auto;
							right: auto;
							width: 100%;
							text-align: center;
							}
							.extra {
								display: inline-block;
								vertical-align: top;
								padding: 20px 0;
								width: 100%;
								}
	}


	@media screen and (max-width: 700px) {
			body.subpage {
				background-position: center 60px;
				}
		
			#subpage-coty {
				background-size: 1800px 1200px;
				background-size: 1500px 1000px;
				}
		
		#header {
			height: 60px;
			}
			#nav-links,
			#behrdotcom,
			#language span {
				display: none;
			}

			#hamburger {
				display: block;
				}
			#shopping-cart {
				top: 20px;
				right: 65px;
				}
			#logo-trends {
				width: 200px;
				margin: 5px 0 0 -100px;
				}
			#navigation {
				top: 60px;
				height: 60px;
				}
				#nav-shadow {
					height: 60px;
					}
		
			#language {
				top: 20px;
				right: 10px;
				}
			#language-select {
				right: 0;
				}
		
				#subpage-header h1 {
					font: 48px/48px 'Montserrat', Verdana, Arial, sans-serif;
					font-weight: 700; 
					font-style: normal;
					margin-top: 50px;
					}
					#subpage-header h1 span {
						font: 48px/48px 'Montserrat', Verdana, Arial, sans-serif;
						font-weight: 400;
						font-style: normal;
						}
						#subpage-header h1 span.coty_mini_title {
							display: block;
							font: 20px/30px 'Montserrat', Verdana, Arial, sans-serif;
							font-weight: 200;
							font-style: normal;
							}
		.section {
			margin: 0 0 50px 0;
			}
				.detail {
					width: 100%;
					margin: 0 0 50px 0;
					}
				.detail:first-child,
				.detail:last-child {
					margin-bottom: 50px;
					}
				.detail.column3,
				.detail.column3:first-child,
				.detail.column3:last-child {
					width: 100%;
					margin: 0 0.5% 0 0.5%;
					}
								.tip {
									margin-left: 170px;
									}

				.grid {
					display: block;
					width: 100%;
					margin: 0 0 20px 0;
					}

					.grid-40 {
						width: 100%;
						}
					.grid-60 {
						width: 100%;
						}
		
		
	}

		


	@media screen and (max-width: 500px) {
			#subpage-header .link-back {
				bottom: 30px;
				}
	
			.modal-column {
				display: block;
				position: relative;
				text-align: center;
				padding: 0;
				width: 100%;
				margin: 0 0.5% 0 0.5%;
				float: none;
				}
			#language {
				font: 14px/18px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
				}
			#language-select {
				font: 14px/18px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
				}
				a.language-header {
					font: 14px/18px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
					}
		
				.language-row a {
					font: 14px/18px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
					}
						.compare {
							width: 100%;
							}
		
	}







	
/**********************************************************************************
GLOBAL MOBILE
**********************************************************************************/
	/*
	body.isMobile #nav-links a:hover,
	body.isMobile #nav-links a.active {
		color: #FFF;
	}
	*/
/**********************************************************************************
TABLET
**********************************************************************************/
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		
	}

/**********************************************************************************
MOBILE
	@media screen and (max-device-width: 480px) and (orientation:landscape) {
**********************************************************************************/
	@media screen and (max-device-width: 480px) {
		
	}