/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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;
    /*
	background-color: #FFF;
	background-image: url(../img/background.png);
	background-repeat: repeat-y;
	background-position: top center;
    */
	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: 28px/42px proxima-nova, sans-serif;
		letter-spacing: 1.2px;
		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;
		}

	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: 28px/35px proxima-nova, sans-serif;
            font-weight: 700;
            }

            h2 span {
                font-weight: 300;
            }
    }

    @media screen and (max-width: 800px) {
        h2 {
            font: 20px/28px proxima-nova, sans-serif;
            font-weight: 700;
            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);
            }
            
        /* 
        body.isDesktop a.btn:hover {
            color: #bd483c;
            border-bottom: 3px solid #bd483c;
            }
            */
            #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-sweepstakes,
            #btn-slider1,
            #btn-slider2,
            #btn-slider3 {
                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;
                }

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


/**********************************************************************************
COLORS
**********************************************************************************/
    .bg_whipped_cream { background-color: #F6F5EF; }
    .bg_weathered_white { background-color: #E6E3D9; }
    .bg_even_better_beige { background-color: #D4CABA; }
    .bg_swatch_malted { background-color: #DBC8C0; }
    .bg_tranquil_gray { background-color: #D0CBC0; }
    .bg_chic_taupe { background-color: #AA9788; }
    .bg_amber_brew { background-color: #D7A361; }
    .bg_riviera_beach { background-color: #C0AE96; }
    .bg_orange_flambe { background-color: #A96F55; }
    .bg_offshore_mist { background-color: #CAD8D8; }
    .bg_provence_blue { background-color: #8A9C99; }
    .bg_swatch_rumors { background-color: #744245; }
    .bg_laguna_blue { background-color: #5A7490; }
    .bg_mountain_olive { background-color: #64634F; }
    .bg_cracked_pepper { background-color: #4F5152; }
    
    /* TURN TEXT WHITE FOR DARK COLORS*/
    .bg_chic_taupe,
    .bg_amber_brew,
    .bg_riviera_beach,
    .bg_orange_flambe,
    .bg_provence_blue,
    .bg_swatch_rumors,
    .bg_laguna_blue,
    .bg_mountain_olive,
    .bg_cracked_pepper { 
        color: #FFF;
    }
    
    .chip_whipped_cream .chip-base { fill: #F6F5EF; }
    .chip_weathered_white .chip-base { fill: #E6E3D9; }
    .chip_even_better_beige .chip-base { fill: #D4CABA; }
    .chip_swatch_malted .chip-base { fill: #DBC8C0; }
    .chip_tranquil_gray .chip-base { fill: #D0CBC0; }
    .chip_chic_taupe .chip-base { fill: #AA9788; }
    .chip_amber_brew .chip-base { fill: #D7A361; }
    .chip_riviera_beach .chip-base { fill: #C0AE96; }
    .chip_orange_flambe .chip-base { fill: #A96F55; }
    .chip_offshore_mist .chip-base { fill: #CAD8D8; }
    .chip_provence_blue .chip-base { fill: #8A9C99; }
    .chip_swatch_rumors .chip-base { fill: #744245; }
    .chip_laguna_blue .chip-base { fill: #5A7490; }
    .chip_mountain_olive .chip-base { fill: #64634F; }
    .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; }
    .bg_open_color_slot_3 { background-color: #FF0000; }

    .chip_open_color_slot_1 .chip-base { fill: #FF0000; }
    .chip_open_color_slot_2 .chip-base { fill: #FF0000; }
    .chip_open_color_slot_3 .chip-base { fill: #FF0000; }


    .swatch-mini-color {
        background-position: center center;
        background-size: cover;
        }

    .bg_spray_gold_metallic { background-image: url("../img/threed/bg_gold.jpg"); }
    .bg_stain_dark_walnut { background-image: url("../img/threed/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: #4F5152; /* REPLACE - cracked_pepper */
            height: 70px;
        }
        #logo {
            position: absolute;
            top: 16px;
            left: 20px;
            width: 141px;
            height: 37px;
            fill: #FFF;
            stroke: none;
        }
        #logo img {
            width: auto;
            height: 37px;
            }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #feature {
        display: block;
        height: 600px;
        margin: 0;
        color: #333333;
        overflow: hidden;
        }
        
        #feature .inner-wide {
            background-image: url("../img/header/header.jpg");
            background-position: center center;
            background-size: cover;
            min-height: 600px;
        }

            #feature img {
                display: block;
                position: absolute;
                top: 40px;
                left: 50%;
                width: 95%;
                height: auto;
                max-width: 600px;
                transform: translateX(-50%);
            }
        
    @media screen and (max-width: 600px) {
        #feature .inner-wide {
            background-image: url("../img/header/header_mobile.jpg");
        }

            #feature img {
                top: 8%;
                margin: 0 10px;
                margin: 0;
            }
    }


/**********************************************************************************
SPACER SECTION
**********************************************************************************/
    #spacer {
        margin: 0;
        }
        #spacer .inner-wide {
            height: 150px;
        }
        @media screen and (max-width: 600px) {
            #spacer .inner-wide {
                height: 75px;
            }
        }

        
/**********************************************************************************
SWEEPSTAKES SECTION
**********************************************************************************/
#sweepstakes {
    margin: 0;
    color: #FFF;
    }
    #sweepstakes .section-inner {
        background-image: url("../img/sweepstakes/bg_sweepstakes.jpg");
        background-position: left center;
        background-size: cover;
        height: 520px;
    }
        
    #sweepstakes .inner-wide {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 95%;
        max-width: 800px;
        transform: translate(-50%, -50%);
        padding: 0 20px;
    }

    #sweepstakes .inner-wide h2 {
        font: 64px/70px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
        font-weight: 400; 
        font-style: normal; 
        margin: 0 auto 0 auto;

        color: #FFF;
    }

    #sweepstakes .inner-wide p {
        font: 16px/22px proxima-nova, sans-serif;
        font-weight: 400; 
        font-style: normal;
        color: #FFF;
    }

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

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

    @media screen and (max-width: 600px) {
        #sweepstakes .section-inner {
            background-image: url("../img/sweepstakes/bg_sweepstakes_mobile.jpg");
        }
        
        #sweepstakes .inner-wide h2 {
            font: 48px/60px "alternate-gothic-no-3-d", Verdana, Arial, sans-serif;
            font-weight: 400; 
            font-style: normal;
        }

        #sweepstakes .inner-wide p {
            font: 12px/18px proxima-nova, sans-serif;
            font-weight: 400; 
            font-style: normal;
        }

        #sweepstakes p.disclaimer {
            margin: 25px auto 0 auto;
        }
    }


/**********************************************************************************
ZOOM SECTION
**********************************************************************************/
    #zoom {
        margin: 0;
        }
        
        #zoom .inner-wide {
            height: 800px;
        }

            #zoom h2 {
                display: block;
                position: absolute;
                top: 10%;
                left: 50%;
                width: 95%;
                max-width: 700px;
                transform: translate(-50%, -50%);
                letter-spacing: 6px;
                font-weight: 500;
                color: #FFF;

                opacity: 0;
            }

            #zoom .subtitle {
                font: 32px/40px proxima-nova, sans-serif;
            }

            #zoom .disclaimer {
                margin: 0 auto;
                max-width: 350px;
                text-align: center;
            }

            #zoom-tips,
            #zoom-upload {
                display: block;
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                max-width: 450px;
                border-radius: 30px;
                transform: translate(-50%, -50%);
                background-color: rgba(228,228,228,0.80);
                padding: 30px 30px 30px 30px;
                backdrop-filter: blur(2px);
                opacity: 0;
                }

                #zoom-upload .btn {
                    max-width: 250px;
                    margin: 20px auto;
                }

            #zoom-tips {
                display: none;
                top: 55%;
                background-color: rgba(58,58,58,0.90);
                padding: 60px 30px 30px 30px;
                color: #FFF;
            }

                #zoom-open-tips {
                    margin-top: 15px;
                    cursor: pointer;
                    font-weight: 700;
                    text-decoration: underline;
                }

                #zoom-tips ul {
                    padding-inline-start: 20px;
                    text-align: left;
                }

                #zoom-tips li {
                    margin-top: 20px;
                }

                #zoom-tips li.indented {
                    margin-top: 0;
                }

                #zoom-tips li::marker {
                    font-size: 0.6em;
                }

                #zoom-tips .disclaimer,
                #zoom-tips .disclaimer a {
                    color: #FFF;
                }
                body.isDesktop #zoom-tips .disclaimer a:hover { color: #FFF; text-decoration: underline; }

                #zoom-tips .subtitle {
                    font: 16px/24px proxima-nova, sans-serif;
                    letter-spacing: 1.2px;
                    font-weight: 500;
                    color: #FFF;
                    text-transform: uppercase;
                    text-align: left;
                }

                #zoom-tips .btn {
                    max-width: 250px;
                    margin: 40px auto;
                }

                #zoom-close-tips {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    width: 50px;
                    height: 50px;
                    cursor: pointer;
                }
                #zoom-close-tips svg {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

        #zoom-sequence-holder {
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            width: 1600px;
            height: 800px;
            transform: translateX(-50%);
            background-image: url("../img/zoom/desktop/zoom_00000.jpg");
            background-position: center center;
            background-size: cover;
            }
            #zoom-sequence {
                display: block;
                position: absolute;
                top: 0;
                left:  0;
                width: 1600px;
                height: 800px;
            }

            body.isMobile #zoom-sequence-holder {
                background-image: url("../img/zoom/mobile/zoom_00000.jpg");
                width: 1024px;
                }
                body.isMobile #zoom-sequence {
                    width: 1024px;
                }

                #coty-loading {
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-weight: 700;
                    font-size: 18px;
                    width: 300px;
                    color: #333333;
                }
        
                @media screen and (max-width: 800px) {

                    #zoom-tips,
                    #zoom-upload {
                        width: 90%;
                    }

                    #zoom-upload .subtitle {
                        font: 24px/36px proxima-nova, sans-serif;
                    }
                    #zoom-tips ul {
                        font: 12px/18px proxima-nova, sans-serif;
                        font-weight: 400;
                        font-style: normal;
                    }

                    #zoom-tips li {
                        margin-top: 10px;
                    }
                }
                
                /* SHANE - NO MODAL ZOOM ROOM HEIGHT FIX - REMOVE WHEN MODAL IS BACK IN */

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

                    #zoom .inner-wide {
                        background-color: #4F5152;
                        height: 500px;
                    }
                    #zoom-sequence-holder {
                        width: 1000px !important;
                        height: 500px !important;
                        }
                    #zoom-sequence {
                        width: 1000px !important;
                        height: 500px !important;
                    }
                    
                        body.isMobile #zoom-sequence-holder {
                            width: 640px !important;
                            }
                        body.isMobile #zoom-sequence {
                            width: 640px !important;
                        }

                    #zoom h2 {
                        top: 12%;
                    }
                }
                @media screen and (max-width: 500px) {
                    #zoom .inner-wide {
                        background-color: #4F5152;
                        height: 400px;
                    }
                    #zoom-sequence-holder {
                        width: 800px !important;
                        height: 400px !important;
                        }
                    #zoom-sequence {
                        width: 800px !important;
                        height: 400px !important;
                    }
                        
                        body.isMobile #zoom-sequence-holder {
                            width: 512px !important;
                            }
                        body.isMobile #zoom-sequence {
                            width: 512px !important;
                        }
                }

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

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

        #description1 h2 {
            color: #FFF;
        }

        #description2 .section-inner {
            padding: 100px 0;
            max-width: 600px;
        }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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;
        }
                
        #gallery1,
        #gallery2,
        #gallery3,
        #gallery4 {
            margin: 10px 0;
        }

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

        .slide2,
        .slide3 {
            left: auto;
            right: 0;
        }
        
        #gallery2 .slide2 {
            left: 50%;
            width: calc(60% - 20px);
            transform: translateX(-50%);
        }

        .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"); }
        
        #gallery5_1 { background-image: url("../img/gallery/gallery5_1.jpg"); }
        #gallery5_2 { background-image: url("../img/gallery/gallery5_2.jpg"); }

        #gallery5 {
            margin-bottom: 10px;
        }


        #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"); }

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

        body.isDesktop .gallery .slide:hover,
        body.isDesktop .gallery .slide:focus { 
            transform: scale(1.05);
        }
        #categories {
            margin-top: 20px;
        }

    #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 { 
                    transform: scale(1.05);
                }

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

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

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

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


                #gallery2 .gallery {
                    height: 610px;
                }
                
                #gallery2 .slide1 {
                    display: block;
                    position: relative;
                    left: auto;
                    top: auto;
                    width: calc(50% - 2.5px);
                    height: 350px;

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

                #gallery2 .slide2 {
                    display: block;
                    width: 100%;
                    height: 250px;
                    left: auto;
                    top: auto;
                    transform: none;
                    margin-top: 5px;
                }

                #gallery1,
                #gallery2,
                #gallery3,
                #gallery4 {
                    margin: 5px 0;
                }
                
                
                #gallery3 .slide2,                
                #gallery4 .slide2 {
                    left: auto;
                    right: 0;
                }

                #gallery5 {
                    margin-bottom: 5px;
                }
        }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
COMPARE SLIDER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #compare {
        margin: 10px 0;
        overflow: hidden;
    }
        
        #compare-wrapper {
            display: inline-block;
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
            text-align: center;
            margin: 0;
            }

            #compare-wrapper img {
                width: 100%;
                height: auto;
                }

                /* HACK SO IT DOESN"T JUMP */
                #compare-wrapper img:nth-child(2) {
                    position: absolute;
                    top: 0;
                }

        #compare_left,
        #compare_right {
            position: absolute;
            font: 24px/30px proxima-nova, sans-serif;
            font-weight: 600;
            text-transform: uppercase;
            color: #FFF;
            text-shadow: rgba(0,0,0,0.5) 1px 0 15px;
        }

        #compare_left {
            top: 75px;
            right: 60%;
            text-align: right;
        }

        #compare_right {
            bottom: 75px;
            left: 60%;
            text-align: left;
        }

        .twentytwenty-wrapper {
            overflow: hidden;
        }

        .compare-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 21;
            pointer-events: none;
        }

        @media screen and (max-width: 800px) {
            #compare {
                margin: 5px 0;
            }
            #compare_left {
                top: 25px;
                top: auto;
                bottom: 25px;
                left: 5%;
                text-align: left;
            }
    
            #compare_right {
                bottom: 25px;
                left: 55%;
                right: 5%;
                text-align: right;
            }
            
        #compare_left,
        #compare_right {
            font: 16px/24px proxima-nova, sans-serif;
            font-weight: 600;
            text-transform: uppercase;
        }
        }
        

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
THREED 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#threed .inner-wide {
    height: 800px;
    padding: 0;
}
    #threed .column {
        display: block;
        width: 50%;
        height: 100%;
        background-position: center center;
        background-size: cover;
        overflow: hidden;
    }

    #threed_left {
        position: relative;
        overflow: hidden;
        user-select: none;
    }

    #threed_right {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #FFF;
    }

        #interactive {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            user-select: none;
        }

        #threed .row {
            display: block;
            position: relative;
            width: 100%;
            height: 50%;
            background-position: center center;
            background-size: cover;
            overflow: hidden;
        }

            #threed .content {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 80%;
                transform: translate(-50%, -50%);
                margin: 0 auto;
            }

                #threed .content h3 {
                    margin-top: 0;
                }

                #threed .content img {
                    display: inline-block;
                    width: 100%;
                    max-width: 160px;
                    height: auto;
                    margin: 0 auto;
                }

                #threed .content .btn {
                    display: inline-block;
                    width: 200px;
                }
            
            #threed #threed_row2 .column:nth-child(1) {
                background-image: url("../img/threed/bg_wood.jpg");
            }
            
            #threed #threed_row2 .column:nth-child(2) {
                position: absolute;
                top: 0;
                right: 0;
                background-image: url("../img/threed/bg_gold.jpg");
            }

            #threed #slider_row1 {
                background-position: left top;
                background-image: url("../img/threed/room.jpg");
                overflow: hidden;
            }
            
            #threed #threed_row1,
            #threed #slider_row1 {
                height: 56%;
            }

            #threed #threed_row2,
            #threed #slider_row2 {
                height: 44%;
            }

        .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: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                transform: translate(-50%,-50%);
            }

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

            #hotspot-3d1 {
                top: 20px;
                left: 20px;
            }

            #hotspot-3d2 {
                bottom: 20px;
                left: 20px;
            }

            #hotspot-3d3 {
                bottom: 20px;
                right: 20px;
            }

            #hotspot-slider1 {
                top: 20px;
                left: 20%;
            }

            #hotspot-slider2 {
                bottom: 20px;
                right: 30%;
            }

            #hotspot-slider3 {
                top: 40%;
                right: 40px;
                transform: translateY(-50%);
            }

            #threed_swiper {
                display: block;
                height: 800px;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

                .swiper-pagination-bullet {
                    background: #4F5152 !important;  /* cracked_pepper */
                    opacity: 0.25;
                }
                .swiper-pagination-bullet-active {
                    background: #4F5152 !important;  /* cracked_pepper */
                    opacity: 0.50 !important;
                }

                .swiper-button-next,
                .swiper-button-prev {
                    color: #4F5152 !important;  /* cracked_pepper */
                    transform: scale(0.5);
                }

    @media screen and (max-width: 800px) {
        #threed .inner-wide {
            height: auto;
            margin: 0;
            padding: 0;
        }
        
        #threed .row {
            display: block;
            position: relative;
            width: 50%;
            height: 100%;
            background-position: center center;
            background-size: cover;
        }

        #threed_left .row {
            width: 100%;
            height: 50%;
        }

            #threed .column {
                display: block;
                position: relative;
                top: auto;
                right: auto;
                left: auto;
                width: 100%;
                height: 600px;
            }

            #threed_left .column,
            #threed_wood,
            #threed_gold {
                width: 50%;
                height: 100%;
            }

            #threed #threed_right {
                height: 350px;
            }
            
            #threed #slider_row1 {
                height: 100%;
            }

            #threed #slider_row2 {
                height: 100%;
            }
        
        #threed #slider_row2 {
            position: absolute;
            top: 0;
            right: 0;
        }
        
        .hotspot {
            width: 35px;
            height: 35px;
        }
        #threed #slider_row1 {
            background-position: left center;
            background-image: url("../img/threed/room_portrait.jpg");
        }

        #hotspot-slider1 {
            top: 50px;
        }
        #hotspot-slider2 {
            bottom: 50px;
            right: auto;
            left: 20%;
        }
        #hotspot-slider3 {
            top: 50%;
            right: 20px;
        }
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PALETTE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #trends {
        margin-top: 0;
        padding-top: 25px;
        }

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

        #trends h1 {
            color: #4F5152; /* REPLACE - cracked_pepper */
            margin-bottom: 25px;
        }
        #trends p {
            font: 18px/24px proxima-nova, sans-serif;
            font-weight: 400;
            font-style: normal;
            max-width: 1000px;
            margin: 0 auto;
        }

        .chip-holder {
            position: relative;
            display: block;
            margin: 50px 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) {

                        #trends h1,
                        #trends p {
                            text-align: left;
                        }

                        .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: 150px;
                            height: 150px;
                            width: 100px;
                            height: 100px;
                            }
                            .chip-text {
                                display: none;
                            }
                            .chip-text strong {
                                font: 12px/16px proxima-nova, sans-serif;
                                font-weight: 700; 
                                }
                    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			max-width: 450px;
			max-height: 650px;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 0;
			padding: 0;
			overflow: hidden;
			transform: translate(-50%, -50%);
			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-close {
				position: absolute;
				top: 0;
				right: 0;
				width: 80px;
				height: 80px;
                cursor: pointer;
				}
				.modal-close-bg {
					display: block;
					width: 80px;
					height: 80px;
                    opacity: 0.6;
					}
				.modal-close-x {
					display: block;
					position: absolute;
					top: 6px;
					right: 6px;
					width: 34px;
					height: 34px;
					}

            #modal-color .modal-inner {
                left: auto;
                right: 0;
                transform: none;
                top: 0;
                max-height: none;
                border-radius: unset;
                }

            #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: #4F5152; /* REPLACE - cracked_pepper */

                    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: 24px/24px proxima-nova, sans-serif;
                        font-weight: 700; 
                        font-style: normal;
                        text-transform: uppercase;
                        text-align: left;
                        color: #4F5152; /* REPLACE - cracked_pepper */
                        }
    
                        #modal-color-name span {
                            font: 14px/16px proxima-nova, sans-serif;
                            font-weight: 400; 
                            font-style: normal; 
                            text-transform: uppercase;
                            }

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

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


        @media screen and (min-width: 800px) {
            /* SPECIAL COLOR MODAL - SIDE VERSION */
            /* 
            body.isDesktop #modal-color .modal-inner {
                left: auto;
                right: 0;
                transform: none;
                top: 0;
                max-height: none;
                border-radius: unset;
                }
                body.isDesktop #modal-color-bg {
                    height: 300px;
                }
                
                body.isDesktop #modal-color-content {
                    top: 325px;
                }

                */


            /* SPECIAL ROOM MODAL - DESKTOP WIDER */
            body.isDesktop #modal-room .modal-inner {
                max-width: 800px;
                max-height: 800px;
                }
                body.isDesktop #modal-room .modal-content a {
                    max-width: 300px;
                    margin: 10px auto;
                }
                body.isDesktop #modal-room #modal-room-bg {
                    height: 450px;
                }

                #modal-room
    
            /* SPECIAL ROOM MODAL - DESKTOP ALT LAYOUT */
            body.isDesktop #modal-room.alt_layout .modal-inner {
                max-width: 750px;
                }
                
                body.isDesktop #modal-room.alt_layout #modal-room-bg {
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 50%;
                    height: 100%;
                    }
    
                body.isDesktop #modal-room.alt_layout #modal-room-chosen,
                body.isDesktop #modal-room.alt_layout .modal-content {
                    text-align: left;
                    margin: 100px 5% 0 55%;
                    width: 40%;
                }
    
                body.isDesktop #modal-room.alt_layout .modal-content {
                    margin-top: 10px;
                }
    
                body.isDesktop #modal-room.alt_layout #btn-order2 {
                    margin-top: 25px;
                }
    
                body.isDesktop #modal-room.alt_layout .modal-content p {
                    margin: 50px auto 10px auto;
                    text-align: center;
                }
        }


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

    #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;
            color: #FFFFFF;
            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;
    }