/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Body - General Layout Structure	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
	margin: 0;
	padding: 0;
	font: 14px/20px proxima-nova, sans-serif;
	font-weight: 400; 
	font-style: normal; 
	text-align: left;
	color: #333333;
	overflow: hidden;
	}

    html,
    body,
    body a {
        -webkit-tap-highlight-color: transparent;
    }

	img {
		border: 0;
		padding: 0;
		border-style: none;
		}
	
	a { 
        font: 14px/24px proxima-nova, 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; }

    .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
           -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Old versions of Firefox */
              -ms-user-select: none; /* Internet Explorer/Edge */
                  user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Opera and Firefox */
    }

	h1 {
		position: relative;
		width: 100%;
		font: 40px/40px proxima-nova, sans-serif;
		letter-spacing: 1.2px;
		font-weight: 300; 
		color: #333333;
    	margin: auto;
        text-transform: uppercase;
		}

		h1 span {
			font-weight: 300;
		}

	h2 {
		position: relative;
		width: 100%;
		font: 26px/42px proxima-nova, sans-serif;
		letter-spacing: 0.15em;
		font-weight: 600;
		color: #333333;
    	margin: 20px 0 20px 0;
		text-transform: uppercase;
		}
		h2 span {
			font-weight: 300;
		}

	h3 {
		position: relative;
		width: 100%;
		font: 18px/24px proxima-nova, sans-serif;
		letter-spacing: 1.2px;
		font-weight: 600;
		color: #333333;
		margin: 25px 0 25px 0;
		text-transform: uppercase;
		}

	p {
		font: 14px/18px proxima-nova, sans-serif;
		font-weight: 400;
		font-style: normal;
		margin: 0 0 25px 0;
		}

        p.center {
            text-align: center;
        }

        .disclaimer,
        .disclaimer a {
            font: 12px/18px proxima-nova, sans-serif;
            font-weight: 400; 
            font-style: normal;
        }
        .disclaimer a {
            text-decoration: underline;
        }

        body.isDesktop .disclaimer a:hover { color: #666666; text-decoration: underline; }

        h1 sup {
            font-size: 24px;
            top: -1em;
        }

        sup.special {
            font-size: 12px;
            top: -1em;
        }
        sup.special_sku {
            font-size: 8px;
            top: -0.5em;
        }
        sup.special_p {
            font-size: 8px;
            top: -0.75em;
        }

        #modal-color-name sup {
            font-size: 12px;
            top: -1.25em;
        }

    @media screen and (max-width: 1100px) {
        h2 {
			font-size: 26px;
			line-height: 36px;
            }
    }

    @media screen and (max-width: 800px) {
        h2 {
			font-size: 20px;
			line-height: 28px;
            margin: 10px 0;
            }
        h3 {
            font: 14px/20px proxima-nova, sans-serif;
            font-weight: 500;
            margin: 15px 0;
            }
            
        .disclaimer,
        .disclaimer a {
            font: 10px/14px proxima-nova, sans-serif;
            font-weight: 400; 
            font-style: normal;
        }
    }

    .overflow {
        overflow: hidden;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
BUTTONS AND HOVERS
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .btn,
    a.btn {
        display: block;
        width: auto;
        font: 14px/24px proxima-nova, sans-serif;
        border-radius: 25px;
        font-weight: 700; 
        font-style: normal;
        margin: 10px 0;
        padding: 10px 0;
        text-align: center;
        background-color: white;
        border: 1px solid #333333;
        color: #465058;
        cursor: pointer;
        text-transform: none;
        border-radius: 25px;
        }

        body.isDesktop a.btn {
            transition: color 1s cubic-bezier(0.25,1,0.25,1), border-color 1s cubic-bezier(0.25,1,0.25,1);
            }
 
            #btn-view-cart {
                display: block;
                position: relative;
                font: 14px/18px proxima-nova, sans-serif;
                font-weight: 700;
                margin: 0 0 20px 0;
                text-align: left;
                color: #bd483c;
                cursor: pointer;
                }
                        
            #btn-save,
            #btn-view,
            #btn-view2,
            #btn-order,
            #btn-order2,
			#btn-learnmore,
            #btn-order-special,
            #btn-sweepstakes {
                display: block;
                width: auto;
                font: 14px/24px proxima-nova, sans-serif;
                border-radius: 25px;
                font-weight: 700; 
                font-style: normal;
                margin: 10px 0;
                padding: 10px 0;
                text-align: center;
                background-color: white;
                border: 1px solid #333333;
                color: #333333;
                cursor: pointer;
                text-transform: none;
                border-radius: 25px;
				max-width: 300px;
                margin: 10px auto;
                }

            #btn-order,
            #btn-order2,
			#btn-learnmore,
            #btn-order-special {
                color: #FFF;
                border: none;
                background-color: #4F5152; /* REPLACE - cracked_pepper */
                }
            
                #btn-sweepstakes {
                    display: block;
                    margin: 0 auto;
                    max-width: 200px;
                }
	body.isDesktop a:hover { color: #666666; text-decoration: none; }

	#btn_ordersamples {
		background-color: #4F5152; /* REPLACE - cracked_pepper */
		border: none;
		color: white;
	}


/**********************************************************************************
COLORS
**********************************************************************************/

	.bg_coty_rumors { background-color: #744245; }	/* REPLACE - coty_rumors */
    .bg_nutmeg_frost { background-color: #ECD9CA; }
    .bg_blank_canvas { background-color: #F1EDE1; }
    .bg_even_better_beige { background-color: #D4CABA; }
    .bg_frosted_jade { background-color: #C2D1C4; }
    .bg_rock_crystal { background-color: #CECBCB; }
    .bg_swatch_jackfruit { background-color: #F7C680; }
    .bg_oxford_street { background-color: #BDA07F; }
    .bg_wild_truffle { background-color: #8B7F76; }
    .bg_swatch_boreal { background-color: #717E73; }
    .bg_aerial_view { background-color: #A0B2C8; }
    .bg_colorful_leaves { background-color: #AA5C43; }
    .bg_gardeners_soil { background-color: #5C534D; }
    .bg_amazon_jungle { background-color: #686747; }
    .bg_black_sapphire { background-color: #434555; }
    .bg_cracked_pepper { background-color: #4F5152; }
    
    /* TURN TEXT WHITE FOR DARK COLORS*/
	.bg_coty_rumors,
    .bg_oxford_street,
    .bg_wild_truffle,
    .bg_swatch_boreal,
    .bg_colorful_leaves,
    .bg_gardeners_soil,
    .bg_amazon_jungle,
    .bg_black_sapphire,
    .bg_cracked_pepper { 
        color: #FFF;
    }
    
    .chip_coty_rumors .chip-base { fill: #744245; }	/* REPLACE - coty_rumors */
    .chip_nutmeg_frost .chip-base { fill: #ECD9CA; }
    .chip_blank_canvas .chip-base { fill: #F1EDE1; }
    .chip_even_better_beige .chip-base { fill: #D4CABA; }
    .chip_frosted_jade .chip-base { fill: #C2D1C4; }
    .chip_rock_crystal .chip-base { fill: #CECBCB; }
    .chip_swatch_jackfruit .chip-base { fill: #F7C680; }
    .chip_oxford_street .chip-base { fill: #BDA07F; }
    .chip_wild_truffle .chip-base { fill: #8B7F76; }
    .chip_swatch_boreal .chip-base { fill: #717E73; }
    .chip_aerial_view .chip-base { fill: #A0B2C8; }
    .chip_colorful_leaves .chip-base { fill: #AA5C43; }
    .chip_gardeners_soil .chip-base { fill: #5C534D; }
    .chip_amazon_jungle .chip-base { fill: #686747; }
    .chip_black_sapphire .chip-base { fill: #434555; }
    .chip_cracked_pepper .chip-base { fill: #4F5152; }

    /* LEGACY COLOR SLOTS */
    .bg_open_color_slot_1 { background-color: #FF0000; }
    .bg_open_color_slot_2 { background-color: #FF0000; }
    .chip_open_color_slot_1 .chip-base { fill: #FF0000; }
    .chip_open_color_slot_2 .chip-base { fill: #FF0000; }

	/* SPECIAL THINGS - Existed in 2024 site */
    .bg_spray_champagne_gold { background-image: url("../img/office/bg_gold.jpg"); }
    .bg_stain_white_wash_pickling { background-image: url("../img/office/bg_wood.jpg"); }
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GENERIC STUFF
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	#cover {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F6F5F0;
		z-index: 100;
		}
	#wrapper {
		display: block;
		position: relative;
		width: 100%;
		margin: 0 auto;
		background-color: #FFFFFF;
		}

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

            .section-inner {
                position: relative;
                width: 100%;
                max-width: 1600px;
                margin: 0 auto 0 auto;
                }
                .inner-wide {
                    margin: 0 auto;
                    padding: 0 20px 0 20px;
                    text-align: center;
                    box-sizing: border-box;
                    }
                .inner-content {
                    position: relative;
                    margin: 15% 25px 0 25px;
                    max-width: 800px;
                    }
        .streamlined {
            max-width: 1600px;
            }
        .thin {
            max-width: 800px;
            }
            
    @media screen and (max-width: 700px) {
        .section {
            margin: 0 0 50px 0;
            }
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HEADER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #header {
        display: block;
        position: relative;
        margin: 0 auto 0 auto;
        z-index: 12;
        }

        #header .inner-wide {
            background-color: #877B73;
            height: 70px;
        }

        #logo {
            position: absolute;
            top: 16px;
            left: 20px;
            width: 141px;
            height: 37px;
        }

			.logo {
				display: block;
				position: relative;
				width: 141px;
				height: 37px;
				margin: 10px auto 10px auto;
			}

			svg.logo {
				fill: #FFF;
				stroke: none;
			}

			#logo .logo {
				margin: 0;
			}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
LANGUAGE SELECT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    #hamburger {
        display: block;
        position: absolute;
        top: 25px;
        right: 20px;
        width: 30px;
        height: 20px;
        }
        .hamburger-bar {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #FFFFFF;
            width: 100%;
            height: 4px;
            border-radius: 2px;
            }
            #hamburger-bar2 {
                top: 8px
                }
            #hamburger-bar3 {
                top: 16px
                }
                
    #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;
        color: #FFF;
        }

    #language-select {
        display: inline-block;
        position: absolute;
        top: 15px;
        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;
        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;
                }
        
            @media screen and (max-width: 500px) {
                #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;
                        }
            }
        

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FEATURE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

	#pin {
		margin-bottom: 10px;
	}

    #feature {
        display: block;
		height: 800px;
        margin: 0;
        color: #333333;
        overflow: hidden;
        }

		body.isMobile #feature {
			height: 600px;
			}
			
        #feature .section-inner {
			overflow: hidden;
			height: 100%;
        }
        
        #feature .inner-wide {
			overflow: hidden;
        }

			#feature-bg {
				position: absolute;
				left: 50%;
				bottom: -2px;
				width: 100%;
				height: auto;
				width: 1600px;
				transform-origin: bottom center;
				transform: translateX(-50%);
			}

				#feature-bg img {
					display: block;
					width: 100%;
					height: auto;
					transform-origin: top center;
					opacity: 0;
				}

			#announcement {
				display: block;
				position: absolute;
				top: 75px;
				left: 50%;
				width: 95%;
				height: auto;
				max-width: 600px;
				transform: translateX(-50%);

				top: 50%;
				transform: translate(-50%,-50%);
				text-align: center;
			}

			#announcement .animate {
				visibility: hidden;
				opacity: 0;
			}

			#announcement h1 {
				display: block;
				font: 70px/70px proxima-nova, sans-serif;
				font-weight: 100;
				color: white;
			}

			#announcement h1 span {
				font-weight: 700;
			}

			#announcement p {
				font: 18px/18px proxima-nova, sans-serif;
				color: white;
				text-transform: uppercase;
				font-weight: 600;
				margin: 15px 5px 0 5px;
                letter-spacing: 3px;
			}

            #announcement .subtitle {
				font: 18px/30px proxima-nova, sans-serif;
                margin-top: 125px;
            }

			#threed-cta {
				display: block;
				box-sizing: border-box;
				position: absolute;
				bottom: 50px;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
				max-width: 350px;
				height: auto;
				background-color: #877B73;
				background-color: rgba(135, 123, 115, 0.6);
				border-radius: 30px;
				padding: 10px;

				visibility: hidden;
			}

				#threed-cta p {
					font: 18px/18px proxima-nova, sans-serif;
					color: white;
					margin: 20px auto 10px auto;
				}

				#threed-room {
					display: block;
					position: relative;
					box-sizing: border-box;
					width: 100%;
					height: 200px;
					height: 175px;
					background-image: url("../img/header/3d.png");
					background-position: center center;
					background-size: contain;
					background-repeat: no-repeat;
				}

				#threed-room .btn {
					display: block;
					position: absolute;
					width: 260px;
					width: 100%;
					max-width: 260px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
        
    @media screen and (max-width: 600px) {
		#pin {
			margin-bottom: 0;
		}

		#feature {
			height: 800px;
			}
		
		#feature-bg {
			width: 1000px;
		}

			#announcement h1 {
				font: 40px/40px proxima-nova, sans-serif;
			}

				#threed-cta p {
					font: 14px/18px proxima-nova, sans-serif;
				}

				#threed-room {
					height: 150px;
				}
    }
 
/**********************************************************************************
SWEEPSTAKES SECTION
**********************************************************************************/
#sweepstakes {
    margin: 0;
    color: #FFF;
    }

    #sweepstakes .section-inner {
        background-image: url("../img/sweepstakes/bg_sweepstakes.jpg");
        background-position: left center;
        background-position: center center;
        background-size: cover;
    }
        
		#sweepstakes .inner-wide {
			display: block;
			padding: 100px 20px;
		}

		#sweepstakes h3 {
			font: 30px/30px proxima-nova, sans-serif;
			font-weight: 300;
			letter-spacing: 0.15em;
			margin: 20px auto 20px auto;
			color: #FFF;
		}

		#sweepstakes h2 {
			font-size: 60px;
			line-height: 60px;
			letter-spacing: 0.30em;
			margin: 20px auto 0 auto;
			color: #FFF;
		}

		#sweepstakes p {
			font: 33px/40px proxima-nova, sans-serif;
			font-weight: 400;
			color: #FFF;
			margin: 40px auto;
		}
		
		#sweepstakes p.description a {
			font: 33px/40px proxima-nova, sans-serif;
			font-weight: 700;
			color: #FFF;
		}

		#sweepstakes p.disclaimer {
			font: 12px/14px proxima-nova, sans-serif;
			font-weight: 400; 
			font-style: normal;
			margin: 75px auto 0 auto;
			max-width: 500px;
			text-align: center;
			color: #CCC;
		}

		#sweepstakes p.disclaimer a {
			font-weight: 700; 
			color: #FFF;
		}

    @media screen and (max-width: 800px) {
        #sweepstakes .section-inner {
            background-image: url("../img/sweepstakes/bg_sweepstakes_mobile.jpg");
			background-position: center bottom;
        }

		#sweepstakes .inner-wide {
			display: block;
			padding: 50px 20px;
		}

		#sweepstakes h3 {
			font-size: 20px;
			line-height: 30px;
		}

		#sweepstakes h2 {
			font-size: 26px;
			line-height: 32px;
			letter-spacing: 0.3em;
		}

		#sweepstakes p {
			font-size: 18px;
			line-height: 20px;
			max-width: 400px;
		}
		
		#sweepstakes p.description a {
			font-size: 18px;
			line-height: 20px;
		}

		#sweepstakes p.disclaimer {
			font-size: 12px;
			line-height: 14px;
			max-width: 400px;
			margin-bottom: 50px;
		}
    }


/**********************************************************************************
OFFICE
**********************************************************************************/

#office {
	margin: 0 0 10px 0;
	}
	
	#office .inner-wide {
        background-image: url("../img/office/office.jpg");
        background-position: center center;
        background-size: cover;
		height: 850px;
		padding: 50px 0;
	}

		#office h2 {
			color: #FFF;
		}

		#hotspot-office1 {
			left: 50%;
			top: 35%;
			transform: translate(-225px);
		}

		#hotspot-office2 {
			left: 50%;
			top: 56%;
			transform: translate(125px);
		}

		#hotspot-office3 {
			left: 50%;
			top: 79%;
			transform: translate(-300px);
		}

		#btn_office {
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			width: 200px;
		}

		@media screen and (max-width: 800px) {
			#office .inner-wide {
				height: 700px;
			}
			#hotspot-office1 {
				left: 50%;
				top: 35%;
				transform: translate(-150px);
			}
	
			#hotspot-office2 {
				left: 50%;
				top: 56%;
				transform: translate(100px);
			}
	
			#hotspot-office3 {
				left: 50%;
				top: 79%;
				transform: translate(-150px);
			}
		}

/**********************************************************************************
SHEEN
**********************************************************************************/

#sheen {
	margin: 0;
	}

	#swatch {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		user-select: none;
	}
	
	#sheen .inner-wide {
		background-color: #CEC4B7;
		min-height: 500px;
		padding: 25px 0 75px 0;
		text-align: center;
	}

		#sheen h2 {
			font-size: 32px;
			line-height: 46px;
			color: #242424;
		}

		#sheen strong {
			font-weight: 700;
		}

		.sheen_column {
			position: relative;
			display: inline-block;
			width: 48%;
			text-align: center;
			vertical-align: top;
			font: 14px/18px proxima-nova, sans-serif;
			font-weight: 400;

			min-height: 450px;
		}

			.sheen_left,
			.sheen_right {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 25%;
				max-width: 100px;
				height: 125px;
				transform: translate(-50%, -50%) translateX(-185px);
			}

			.sheen_right {
				transform: translate(-50%, -50%) translateX(185px);
			}

			.sheen_left strong,
			.sheen_right strong {
				text-transform: uppercase;
				margin-bottom: 15px;
			}

			.sheen_column.left strong {
				display: block;
			}

				.sheen_room {
					position: relative;
					display: inline-block;
					width: 80%;
					text-align: left;
					margin-top: 50px;

					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: 0;
					transform: translate(-50%,-50%);
					left: 0;
					transform: translateY(-50%);
					width: 80%;

					max-width: 600px;
					max-width: 654px;
					width: 90%;
				}

					.sheen_room img {
						width: 100%;
						height: auto;
						margin-bottom: 5px;
					}

				#sheen .location {
					display: inline-block;
					margin: 0 20px 0 0;
					color: #000000;
					font: 12px/18px proxima-nova, sans-serif;
					font-weight: 400; 
				}

			#sheen-panel {
				transform-origin: 50% 50%;
				perspective-origin: 50% 50%;
				perspective: 700px;
				}
				#sheen-panel img {
					transform-origin: 50% 50%;
					transform-style: preserve-3d;
					}
					.easecubic {
						transition: all 1s cubic-bezier(0.25,1,0.25,1);
						}
					.easelinear {
						transition: all linear;
						}


			.sheen_left,
			.sheen_right,
			#swatch,
			#swatch_interactive,
			#swatch_interactive canvas {
				pointer-events: none;
			}

				@media screen and (max-width: 1300px) {
					.sheen_room {
						position: relative;
						display: inline-block;
						width: 80%;
						text-align: left;
						margin-top: 50px;
	
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: 0;
						transform: translate(-50%,-50%);
					}
				}






				@media screen and (max-width: 1000px) {
					
					.sheen_column {
						display: block;
						width: 100%;
						text-align: center;
						min-height: 300px;
					}

					.sheen_column.left {
						margin-bottom: 25px;
					}
					.sheen_column.right {
						min-height: auto;
					}

					.sheen_room {
						max-width: none;
					}

						.sheen_img {
							display: none;
						}

						.sheen_room {
							display: block;
							width: 100%;

							position: relative;
							top: auto;
							left: auto;
							transform: none;
							text-align: left;
						}
						
						.sheen_locations {
							text-align: center;
						}

						.location {
							margin: 0 10px;
						}

						#sheen .inner-wide {
							padding-bottom: 10px;
						}

						#sheen {
							margin-bottom: 10px;
						}

						#swatch {
							position: relative;
							display: inline-block;
							top: auto;
							left: auto;
							transform: none;
						}
				}

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

					#sheen h2 {
						font-size: 18px;
						line-height: 22px;
						letter-spacing: 0.3em;
						width: 90%;
						margin: 40px auto 0 auto;
					}

					.sheen_left,
					.sheen_right {
						left: 2%;
						transform: translateY(-50%);
					}

					.sheen_right {
						left: auto;
						right: 2%;
					}
				}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DESCRIPTIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #description1 {
            margin: 0;
        }

        #description1 .section-inner {
            padding: 60px 0;
        }

        #description1 h2 {
            color: #FFF;
			margin: 0;
        }


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

        #description1 .section-inner {
            padding: 30px 0;
        }
		}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GALLERIES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .gallery {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        height: 600px;
        margin: 0;
        padding: 0;
    }

        .gallery-40 {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 40%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        .gallery-60 {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: calc(60% - 10px);
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
		/* 
        .gallery-20 {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 20%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
 		*/
        .gallery-25 {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 25%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
		
        .gallery-50 {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: calc(50% - 10px);
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
     
        #gallery1,
        #gallery2,
        #gallery3,
        #gallery4 {
            margin: 10px 0;
        }

        .slide1 {
            left: 0;
            right: auto;
        }

        .slide2,
        .slide3 {
            left: auto;
            right: 0;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: transform 1s;
            background-position: center center;
            background-size: cover;
            cursor: pointer;
        }

        #gallery1_1 { background-image: url("../img/gallery/gallery1_1.jpg"); }
        #gallery1_2 { background-image: url("../img/gallery/gallery1_2.jpg"); }

        #gallery2_1 { background-image: url("../img/gallery/gallery2_1.jpg"); }
        #gallery2_2 { background-image: url("../img/gallery/gallery2_2.jpg"); }
        #gallery2_3 { background-image: url("../img/gallery/gallery2_3.jpg"); }

        #gallery3_1 { background-image: url("../img/gallery/gallery3_1.jpg"); }
        #gallery3_2 { background-image: url("../img/gallery/gallery3_2.jpg"); }

        #gallery4_1 { background-image: url("../img/gallery/gallery4_1.jpg"); }
        #gallery4_2 { background-image: url("../img/gallery/gallery4_2.jpg"); }
        #gallery4_3 { background-image: url("../img/gallery/gallery4_3.jpg"); }

        #pro #gallery1_1 { background-image: url("../img/gallery_pro/gallery1_1.jpg"); }
        #pro #gallery1_2 { background-image: url("../img/gallery_pro/gallery1_2.jpg"); }

        #pro #gallery2_1 { background-image: url("../img/gallery_pro/gallery2_1.jpg"); }
        #pro #gallery2_2 { background-image: url("../img/gallery_pro/gallery2_2.jpg"); }
        #pro #gallery2_3 {  background-image: url("../img/gallery_pro/gallery2_3.jpg"); }

        body.isDesktop .gallery .slide:hover,
        body.isDesktop .gallery .slide:focus,
        body.isMobile .gallery .slide:active,
        body.isMobile .gallery .slide:focus { 
            transform: scale(1.05);
        }

		#categories h2 {
			margin: 25px 0 75px 0;
		}

        #gallery2 .slide2,
        #gallery4 .slide2 {
            left: 50%;
            width: calc(50% - 20px);
            transform: translateX(-50%);
        }
    #categories .inner-wide {
        margin: 0;
        padding: 0;
    }
        .category {
            display: inline-block;
            position: relative;
            width: 48%;
            height: auto;
            margin: 0 0.5% 10px 0.5%;
            overflow: hidden;
            text-align: left;
            vertical-align: top;
            text-transform: uppercase;
            margin-bottom: 20px;
            overflow: hidden;
            }

            .category-zoom {
                display: block;
                margin-bottom: 5px;
                overflow: hidden;
                cursor: pointer;
            }

                .category-zoom img {
                    display: block;
                    width: 100%;
                    height: auto;
                    transition: transform 1s;
                }

				body.isDesktop .category-zoom img:hover,
				body.isDesktop .category-zoom img:focus,
                body.isMobile .category-zoom img:active,
                body.isMobile .category-zoom img:focus { 
                    transform: scale(1.05);
                }
			.category span {
				margin-left: 10px;
			}

        @media screen and (max-width: 800px) {
            .gallery {
                height: auto;
            }

			#gallery1,
			#gallery2,
			#gallery3,
			#gallery4 {
				margin: 0;
			}

			.gallery-40,
			.gallery-60,
			.gallery-25,
			.gallery-50,
			#gallery2 .slide2,
			#gallery4 .slide2 {
				display: block;
				position: relative;
				width: 100%;
				top: auto;
				left: auto;
				right: auto;
				bottom: auto;
				height: 350px;
				margin-bottom: 10px;
				transform: none;
			}

			.gallery-25,
			.gallery-40 {
				height: 700px;
			}

			.category span {
				margin-left: 0;
			}

			/* 
            .gallery {
                height: 350px;
            }
                .gallery-40 {
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 40%;
                    height: 100%;
                    margin: 0;
                    overflow: hidden;
                }

                .gallery-60 {
                    width: calc(60% - 5px);
                }

                #gallery1,
                #gallery2,
                #gallery3,
                #gallery4 {
                    margin: 5px 0;
                }
				
				#gallery2 .gallery,
				#gallery4 .gallery {
                    height: 700px;
                }
                
                #gallery2 .slide1,
                #gallery4 .slide1 {
                    display: block;
                    position: relative;
                    left: auto;
                    top: auto;
                    width: calc(50% - 2.5px);
                    height: 350px;
                }

                #gallery2 .slide3,
                #gallery4 .slide3 {
                    width: calc(50% - 2.5px);
                    height: 350px;
                }

                #gallery2 .slide2,
                #gallery4 .slide2 {
                    display: block;
                    width: 100%;
                    height: 350px;
                    left: auto;
                    top: auto;
                    transform: none;
                    margin-top: 5px;
                }
 
                #gallery2 .slide2,
                #gallery4 .slide2 {
                    left: auto;
                    right: 0;
                }
				
                #gallery3 .slide2 {
                    left: auto;
                    right: 0;
                }
				*/
        }
		
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HOTSPOTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
      
.hotspot {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	cursor: pointer;
}
	.hotspot-dot {
		display: block;
		position: relative;
		border-radius: 50%;
		background-color: rgba(255,255,255,0.5);
	}
	.hotspot .outer {
		width: 100%;
		height: 100%;
		transition: transform 1s cubic-bezier(0.25,1,0.25,1);
	}

	.hotspot .inner {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50%;
		height: 50%;
		transform: translate(-50%,-50%);
	}
	
	.hotspot .pulse {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	body.isDesktop .hotspot:hover .outer,
	body.isDesktop .hotspot:focus .outer { 
		transform: scale(0.8);
	}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DISCOVER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#discover {
	margin: 0 auto;
	padding: 75px 0 0 0;
	max-width: 1600px;
	overflow: hidden;
	}

	#discover-background {
		position: absolute;
		top: 0;
		left: 50%;
		overflow: hidden;
		transform: translateX(-50%);
	}

		#discover-video {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
		}

		@media screen and (max-width: 800px) {
			#discover {
				padding: 0;
				}

			#discover-background {
				position: relative;
				top: auto;
				left: auto;
				transform: none;
			}
		}
		#discover-gradient {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 100%);
		}
	
	#discover-title {
		box-sizing: border-box;
		font: 32px/46px proxima-nova, sans-serif;
		font-weight: 600;
		letter-spacing: 1.2px;
		font-style: normal; 
		margin: 20px auto 20px auto;
		color: #FFF;
		position: absolute;
		top: 60px;
		left: 0;
		padding: 0px 50px;
	}

    @media screen and (max-width: 600px) {
		#discover-title {
			font: 18px/22px proxima-nova, sans-serif;
			margin: 40px auto 0 auto;
			top: 40px;
			left: 10%;
			width: 80%;
		}
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PALETTE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #trends {
		margin: 0 auto;
		padding: 125px 0 75px 0;
		max-width: 1600px;
		overflow: hidden;
        }

		#trends-wrapper {
			display: block;
			width: 100%;
			height: auto;
		}

        #trends .section-inner {
            max-width: 1200px;
			padding: 0;
        }

		#trends .header {
			display: block;
			position: relative;
			background-color: rgba(255, 255, 255, 0.5);
			margin: 20px 0 20px 0;
			padding: 20px;
		}

			#trends h2 {
				font: 64px/64px proxima-nova, sans-serif;
				letter-spacing: 1.2px;
				font-weight: 400;
				margin-bottom: 25px;
				color: #4F5152;
				margin: 0;
				padding: 0;
			}

			#trends p {
				font: 22px/28px proxima-nova, sans-serif;
				font-weight: 400;
				font-style: normal;
				max-width: 1000px;
				margin: 0 auto;
				margin-top: 20px;
			}

        .chip-holder {
            position: relative;
            display: block;
            margin: 0px auto 0 auto;
            max-width: 1400px;
            }

            .chip {
                display: inline-block;
                position: relative;
                margin: 0 10px 20px 10px;
                padding: 0;
                font: 12px/18px proxima-nova, sans-serif;
                font-weight: 400; 
                color: #4F5152; /* REPLACE - cracked_pepper */
                overflow: hidden;
                cursor: pointer;
                }
                
                .chip-inner {
                    display: block;
                    position: relative;
                    width: 200px;
                    height: 200px;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                    border-radius: 4px;
                    }
                    .chip-detail {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 0%;
                        height: 100%;
                        background-position: top left;
                        background-size: cover;
                        overflow: hidden;
                        }
                        .shadow {
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 30px;
                            height: 165px;
                            opacity: 0.5;
                            }
                            
                    .chip-text {
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        text-transform: uppercase;
                        padding: 10px 0;
                        background-color: rgba(0,0,0,0.1);
                        opacity: 0;
                        }
                        .chip-text strong {
                            font: 14px/18px proxima-nova, sans-serif;
                            font-weight: 700; 
                            }

                    .chip-buy {
                        display: block;
                        margin-top: -25px;
                        visibility: hidden;
                        opacity: 0;
                    }

                    .chip-buy .btn {
                        margin-top: 0;
                    }

                    .chip-description {
                        display: block;
                        font: 14px/30px proxima-nova, sans-serif;
                        display: none;
                        }

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

                        .chip-text {
                            background: none;
                            opacity: 1 !important;
                            visibility: visible !important;
                        }

                        .chip {
                            font: 10px/16px proxima-nova, sans-serif;
                            margin: 0 5px 10px 5px;
                            margin: 0 0 10px 5px;
                        }
                        .chip-inner {
                            width: 100px;
                            height: 100px;
                            }
                            .chip-text {
                                display: none;
                            }
                            .chip-text strong {
                                font: 12px/16px proxima-nova, sans-serif;
                                font-weight: 700; 
                                }

						#trends h2 {
							font-size: 41px;
							line-height: 51px;
						}
                    }

					

		.chip-holder-coty {
            position: relative;
            display: block;
            margin: 50px auto 0 auto;
            max-width: 1400px;
			text-align: center;
		}

		.chip-holder-coty .chip {
			display: inline-block;
		}

		.chip-holder-coty .chip-inner {
			width: 1090px;
		}

		@media screen and (max-width: 1172px) {
			.chip-holder-coty .chip-inner {
				width: 870px;
			}
		}

		@media screen and (max-width: 948px) {
			.chip-holder-coty .chip-inner {
				width: 100%;
				width: 650px;
			}
		}

		@media screen and (max-width: 725px) {
			.chip-holder-coty .chip-inner {
				width: 100%;
				width: 430px;
			}
		}

		@media screen and (max-width: 600px) {
			.chip {
				margin-left: 0;
			}
			.chip-holder-coty .chip-inner {
				width: 310px;
			}
		}



		
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PALETTE - Grid Version
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

		.grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-column-gap: 10px;
			grid-row-gap: 10px;
		}

		.grid-swatch {
			grid-area: auto;
			aspect-ratio: 1;
			border-radius: 4px;
			cursor: pointer;
		}

		#grid-coty {
			grid-area: 1 / 1 / 4 / 2;
			aspect-ratio: 0;
		}

		@media screen and (max-width: 800px) {
			.grid {
				grid-template-columns: repeat(3, 1fr);
			}
			
			.grid-swatch {
				grid-area: auto;
			}

			#grid-coty {
				  grid-column: 1 / -1;
				aspect-ratio: 3 / 1;
			}
		}

		@media screen and (max-width: 500px) {
			.grid {
				grid-column-gap: 5px;
				grid-row-gap: 5px;
			}
		}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
MODALS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	.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;
		overflow: hidden;
		}

        .modal-closer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

		.modal-inner {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			max-width: 450px;
			background: #FFFFFF;
			margin: 0;
			padding: 0;
			overflow: hidden;
			box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			background: #C6BCB0;
			}

			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-close {
				position: absolute;
				top: 0;
				right: 0;
				width: 50px;
				height: 50px;
                cursor: pointer;
				text-align: center;
				}
				.modal-close-x {
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					width: 40px;
					height: 40px;
                    font: 24px/40px proxima-nova, sans-serif;
                    font-weight: 600; 
					color: #FFFFFF;
					text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
					}

					#modal-room .modal-close-x {
						color: #000000;
						}

            #modal-color-bg {
                display: block;
                height: 250px;
                }

                #modal-close-color {
                    z-index: 2;
                }

                #modal-color-content {
                    position: relative;
                    font: 14px/20px proxima-nova, sans-serif;
                    font-weight: 400; 
                    font-style: normal; 
					color: #000;

                    padding: 5%;
                    overflow-y: auto;
                    height: calc(100% - 300px);
                    }

                    #modal-color-name {
                        display: block;
                        position: relative;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        clear: both;
                        margin: 0 0 10px 0;
                        font: 18px/18px proxima-nova, sans-serif;
                        font-weight: 700; 
                        font-style: normal;
                        text-transform: uppercase;
                        text-align: center;
						color: #000;
                        }
    
                        #modal-color-name span {
                            font-weight: 400; 
                            font-style: normal; 
                            text-transform: uppercase;
                            }

						#modal-color-description {
							text-align: center;
							margin-bottom: 20px;
						}

                        #attributes {
                            display: block;
                            margin-bottom: 25px;
							display: none;
                        }

                        #disclaimers {
                            display: block;
                            margin-top: 15px;
                            }
                        
                            .attribute,
                            #disclaimers .disclaimer {
                                display: flex;
                                margin-bottom: 5px;
                            }

                                .attribute img {
                                    width: 22px;
                                    height: 25px;
                                    margin: 0 10px 0 0;
                                    vertical-align: top;
                                }

                                .attribute div {
                                    font: 14px/25px proxima-nova, sans-serif;
                                    font-weight: 400; 
                                    font-style: normal;
                                    text-align: left;
                                    vertical-align: top;
                                }
                            
                                #disclaimers .disclaimer img {
                                    width: 16px;
                                    height: 18px;
                                    margin: 1px 10px 0 0;
                                    vertical-align: top;
                                }

                                #disclaimers .disclaimer div {
                                    font: 10px/14px proxima-nova, sans-serif;
                                    font-weight: 400; 
                                    font-style: normal;
                                    vertical-align: top;
                                }

                            #modal-color-visualize {
								margin: 25px 0 0 0;
							}

			#modal-room-bg {
				display: block;
				position: relative;
				width: 100%;
				height: 300px;
				background-color: #000000;
				background-position: center center;
				background-size: cover;
				text-align: center;

				display: none;
				}
				#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: 25px 0 0 0;
					}
				#modal-room .modal-content .social-title {
					color: #000;
					}

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

							#modal-color .modal-content {
								margin: 0;
							}
							.modal-content .social {
								display: inline-block;
								position: relative;
								text-align: center;
								width: 100%;
								margin-top: 10px;
								}
                            .modal-content .social-title {
                                font: 12px/16px proxima-nova, sans-serif;
                                font-weight: 400; 
                                font-style: normal; 
                                color: #ffffff;
                                }
								.modal-content .social-icon {
                                display: inline-block;
                                margin: 5px 0 0 5px;
                                }
								.modal-content .social-icon img {
                                    width: 30px;
                                    height: 30px;
                                    }

                    .swatch-mini {
                        display: inline-block;
                        font: 10px/20px proxima-nova, sans-serif;
                        font-weight: 700; 
                        font-style: normal;
                        color: #333333;
                        text-transform: uppercase;
                        text-align: left;
                        margin: 5px 15px 0 0;
                        overflow: hidden;
                        }
                        .swatch-mini-color {
                            position: relative;
                            display: inline-block;
                            height: 16px;
                            width: 16px;
                            margin: 2px 5px 2px 0;
                            border-radius: 2px;
                            vertical-align: top;
                            }
                        .swatch-mini-title {
                            position: relative;
                            display: inline-block;
                            }
                            .swatch-mini-title span {
                                font-weight: 400;
                                }


				/* Use with the Mega Modal implementation */
				#modal-room-chosen {
					text-align: left;
					margin-top: 40px;
					margin: 40px 25px 25px 25px;
					width: 100%;
					width: auto;
					}	
					.swatch-mega {
						display: block;
						font: 16px/24px proxima-nova, sans-serif;
						font-weight: 700; 
						font-style: normal;
						color: #333333;
						text-transform: uppercase;
						text-align: left;
						margin: 0;
						overflow: hidden;
						}

						.swatch-mega-color {
							position: relative;
							display: inline-block;
							height: 24px;
							width: 24px;
							margin: 0 10px 0 0;
							border-radius: 2px;
							vertical-align: top;
							}
						.swatch-mega-title {
							position: relative;
							display: inline-block;
							}
							.swatch-mega-title span {
								font-weight: 400;
								}
						.swatch-mega-description {
							margin: 5px 0 20px 0;
						}

						#modal-content {
							position: relative;
							font: 14px/20px proxima-nova, sans-serif;
							font-weight: 400; 
							font-style: normal; 
							color: #000;
		
							padding: 5%;
							overflow-y: auto;
							height: calc(100% - 300px);
							}


			#modal-special .special-row {
				display: block;
				position: relative;

				min-height: 60px;
			}
			
			#modal-special .special-row-inner {
				display: block;
				min-height: 60px;
			}

			#modal-special .special-row-inner.text {
				margin: 10px 10px 0 100px;
				font: 16px/22px proxima-nova, sans-serif;
				text-transform: uppercase;
			}

			#modal-special .special-row img {
				position: absolute;
				left: 10px;
				top: 50%;
				height: 80%;
				transform: translateY(-50%);
				width: auto;
			}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PANO
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #pano {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
		z-index: 1255;
        }

        #interactive {
            cursor: grab;
        }

        #interactive.isMouseDown {
            cursor: grabbing;
        }

        #pano-nav {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 100%;
            font: 12px/15px Verdana, Helvetica, Arial, sans-serif;
            text-transform: uppercase;
            pointer-events: auto;
            font-size: 0;
            text-align: left;
            }

            #pano-nav a {
                display: inline-block;
                padding: 3px 3px;
                font: 10px/35px Verdana, Helvetica, Arial, sans-serif;
                transition: color 0.5s ease;
                margin: 0 10px 0 10px;
                color: white;
            }
            body.isDesktop #pano-nav a:hover {
                color: #FFFFFF;
                }
            #pano-nav a.active {
                color: #FFFFFF;
                }
            body.isDesktop #pano-nav a.active:hover {
                color: #FFFFFF;
                }

            #vr-toggle {
                display: none;
            }

        #pano-preloader {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            }
            #pano-preloader-inner {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50px;
                height: 50px;
                margin: 0;
                text-align: center;
                transform: translate(-50%, -50%);
                opacity: 0;
                }
                #pano-preloader-circle {
                    display: block;
                    position: relative;
                    width: 50px;
                    height: 50px;
                    margin: 0 auto 0 auto;
                    }
                    .pano-circle-grey {
                        stroke: #232323;
                    }
                    .pano-circle-color {
                        stroke: #FFF;
                    }
                    #pano-preloader-percent {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font: 10px/14px 'DIN_Bold', Verdana, Arial, geneva, sans-serif;
                        color: #FFFFFF;
                        text-align: center;
                    }

                    .noselect {
                        -webkit-touch-callout: none; /* iOS Safari */
                            -webkit-user-select: none; /* Safari */
                            -khtml-user-select: none; /* Konqueror HTML */
                            -moz-user-select: none; /* Old versions of Firefox */
                                -ms-user-select: none; /* Internet Explorer/Edge */
                                    user-select: none; /* Non-prefixed version, currently
                                                        supported by Chrome, Opera and Firefox */
                        }

				#gyroscope-toggle {
					position: relative;
					width: 40px;
					height: 40px;
					padding: 0 !important;
					margin: 5px 0 0 5px !important;
				}
 
				#pano-icon-phone {
					/* display: none; */
					visibility: hidden;
				}
				/* 
				#pano-icon-swipe {
					display: block;
				}
 				*/
				.pano-icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					fill: #FFFFFF;
				}

				#modal-close-pano .modal-close-x {
					top: 5px;
					right: 5px;
				}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FOOTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer {
    display: block;
    position: relative;
    font: 12px/24px proxima-nova, sans-serif;
    font-style: normal;
    color: #FFFFFF;
    margin: 0;
    }
    #footer .inner-wide {
        display: block;
        position: relative;
        padding: 30px 0 0 0;
        text-align: center;
        height: 250px;
    }

    .logo-footer {
        display: block;
        position: relative;
        width: 141px;
        height: 37px;
        margin: 10px auto 10px auto;
        fill: #FFF;
        stroke: none;
    }

    #legal {
        display: block;
        position: relative;
    }

    #social {
        display: block;
        margin: 10px 0;
		text-align: center;
    }

    #social .social-icon {
        display: inline-block;
        margin: 5px 0 0 5px;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        }
		
        .social-icon.instagram {
            background-image: url(../img/icons/icon_footer_instagram.png);
        }
        body.isDesktop #social .social-icon.instagram:hover {
            background-image: url(../img/icons/icon_footer_instagram2.png);
        }
        .social-icon.tiktok {
            background-image: url(../img/icons/icon_footer_tiktok.png);
        }
        body.isDesktop #social .social-icon.tiktok:hover {
            background-image: url(../img/icons/icon_footer_tiktok2.png);
        }
        .social-icon.twitter {
            background-image: url(../img/icons/icon_footer_twitter.png);
        }
        body.isDesktop #social .social-icon.twitter:hover {
            background-image: url(../img/icons/icon_footer_twitter2.png);
        }
        .social-icon.facebook {
            background-image: url(../img/icons/icon_footer_facebook.png);
        }
        body.isDesktop #social .social-icon.facebook:hover {
            background-image: url(../img/icons/icon_footer_facebook2.png);
        }

        #social p {
            font: 12px/24px proxima-nova, sans-serif;
            font-style: normal;
            margin: 0;
        }

        #legal a {
            font: 12px/24px proxima-nova, sans-serif;
            font-style: normal;
            color: #FFF;
            margin: 0 10px;
        }

    #copyright {
        display: block;
        position: relative;
    }

@media screen and (max-width: 600px) {
    #footer {
        font: 11px/24px proxima-nova, sans-serif;
    }
        #footer .inner-wide {
            padding: 10px 0 0 0;
            margin-top: 0;
        }
            #legal a {
                font: 11px/24px proxima-nova, sans-serif;
                margin: 0 5px;
            }
            #transparency {
                display: block;
            }
}
    
/**********************************************************************************
COOKIES
**********************************************************************************/

    .cmp-revoke-consent {
        position: relative;
        font: 12px/24px proxima-nova, sans-serif;
        font-style: normal;
        color: #FFF;
        margin: 0 10px;
        bottom: auto;
        left: auto;
        padding: 0;
        cursor: pointer;
    }

    .cmp-save-btn {
        text-transform: uppercase !important;
    }