#section_custom {
	box-sizing: content-box;
    margin-bottom: 0;
}
#section_custom .section-inner {
	max-width: 1400px;
}

	#custom h2 {
		font: 28px/36px 'Montserrat', Verdana, Arial, sans-serif;
		font-weight: 700;
		margin: 0;
		}
		#custom h2 span {
			font-weight: 200;
		}

#custom {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
    min-height: 800px;
	}

	.custom-column {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		text-align: left;
		color: #333333;
		}

	#custom p {
		font: 12px/18px 'Montserrat', Verdana, Arial, geneva, sans-serif;
		font-weight: 400; 
		font-style: normal;
		margin: 0 0 10px 0;
		}

	.custom-left {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 300px;
		}
		.custom-swatch {
			display: inline-block;
			width: 80px;
			height: 80px;
			border-radius: 4px;
			margin: 5px 5px 5px 0;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0);
			-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0);
			box-shadow: 0 0 30px 0 rgba(0,0,0,0);
			transition: box-shadow 0.5s;

            width: 60px;
            height: 60px;
			}
		.custom-swatch.active {
			-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
			-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
			box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);
			border: 1px solid #FFFFFF !important;
			}

	.custom-middle {
		display: block;
		position: relative;
		margin: 50px 240px 50px 300px;
		text-align: left;
		}
		.custom-middle-holder {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			max-width: 850px;
    		margin: 0 auto;
			padding: 0;
			border-radius: 10px;
			overflow: hidden;

			-webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			-moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);
			}
			.custom-middle-holder img {
				display: block;
				position: relative;
				width: 100%;
				height: auto;
				}
			#custom-room {
				display: block;
				position: relative;
				width: 850px;
				height: 650px;
				}

	.custom-right {
		position: absolute;
		right: 0;
		top: 0;
		width: 220px;
		}

		.minus {
			opacity: 0.5;
			cursor: pointer;
			pointer-events:  visible;
			}
			.minus circle,
			.minus line {
				stroke: #FFFFFF;
				fill: none;
				stroke-width: 2;
				}

		.custom-options {
			display: none;
			width: 100%;
			text-align: center;
			opacity: 0;
			}

		.custom-chip {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			margin: 0px auto 5px auto;
			border-radius: 4px;
			overflow: hidden;
			}
			.custom-chip svg {
				display: block;
				position: relative;
				width: 100%;
				height: auto;
				}

		.custom-details {
			display: block;
			position: relative;
			font: 12px/14px 'Montserrat', Verdana, Arial, geneva, sans-serif;
			font-weight: 400; 
			font-style: normal; 
			color: #333333;
			margin: 0;
			text-transform: uppercase;
			}
			.custom-details strong {
				margin: 0;
				font-weight: 700; 
				}

		.custom-palettes {
			width: 100%;
			max-width: 250px;
			margin: 0 auto 15px auto;
			opacity: 0;
			text-align: center;
			
			display: none;
			}

		.custom-gradient {
			background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
			}

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

	.custom_chip_whisper_white { fill: #F4F2EC; }
	.custom_chip_sunwashed_brick { fill: #E3C1B4; }
	.custom_chip_breezeway { fill: #CCD8D0; }
	.custom_chip_etched_glass { fill: #DDE1E3; }
	.custom_chip_lunar_surface { fill: #B6B9B7; }
	.custom_chip_nightingale_gray { fill: #B9AEA4; }
	.custom_chip_studio_clay { fill: #D9CCBA; }
	.custom_chip_corn_stalk { fill: #FBDBA7; }
	.custom_chip_wave_top { fill: #AFD9D5; }
	.custom_chip_after_rain { fill: #C1DAEB; }
	.custom_chip_perfect_penny { fill: #A06957; }
	.custom_chip_basswood { fill: #C9B197; }
	.custom_chip_sustainable { fill: #A7A07F; }
	.custom_chip_explorer_blue { fill: #57A3B4; }
	.custom_chip_dark_cobalt_blue { fill: #32578B; }
	.custom_chip_lingonberry_punch { fill: #A95658; }
	.custom_chip_wild_mustang { fill: #8F705D; }
	.custom_chip_laurel_tree { fill: #87977A; }
	.custom_chip_ocean_abyss { fill: #2A565B; }
	.custom_chip_cracked_pepper { fill: #4F5152; }

	.custom-swatch.bg_whisper_white {
		border: 1px solid #CCCCCC;
	}
	.custom-chip.light .minus circle,
	.custom-chip.light .minus line {
		stroke: #999999;
	}
	.custom-chip.light {
		border: 1px solid #CCCCCC;
	}

	.chip_empty {
		fill: rgb(255,255,255);
		stroke: #cccccc;
		stroke-width: 1;
	}


    #custom-change-room {
        display: block;
        text-align: center;
        margin-top: 10px;
    }

    #custom-coverup {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


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

	@media screen and (min-width: 800px) and (max-width: 1200px) {
		.custom-left {
			width: 220px;
			}
			.custom-swatch {
				display: inline-block;
				width: 45px;
				height: 45px;
				}
		.custom-middle {
			margin: 50px 240px 50px 240px;
			}

		#custom {
			min-height: 700px;
			}
	}


	@media screen and (max-width: 900px) {
		.custom-left {
			display: block;
			position: relative;
			left: auto;
			top: auto;
			width: 100%;
			}
			.custom-left a  {
				vertical-align: middle;
			}
			.custom-swatch {
				display: inline-block;
				width: 50px;
				height: 50px;
				}
		.custom-left {
			margin-top: 20px;
			}
		.custom-middle {
			display: block;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
			margin: 20px 0 20px 0;
			}
		.custom-right {
			display: block;
			position: relative;
			right: auto;
			left: auto;
			top: auto;
			width: 100%;
			margin: 0 0 50px 0;
			}
			.custom-palettes {
				width: 48%;
				height: auto;
				margin: 0 0.75%;
				}
	}