#custom {
	box-sizing: content-box;
	margin: 0;
}

	#custom .section-inner {
		transition: background-color 0.5s;
	}

		#custom_top {
			position: relative;
			padding: 0 50px 25px 0;
			text-align: right;

			padding: 0 100px 25px 0;
			}
			#custom-room-header {
				display: block;
				position: absolute;
				top: 45px;
				left: 50px;
				width: calc(100% - 550px);
				text-align: left;
				pointer-events: none;

				transition: color 0.5s;
				left: 100px;
			}

			#custom-room-header h2 {
				font-size: 48px;
				line-height: 50px;
				font-weight: 300;
				letter-spacing: 0;

			}

			#custom-room-header h2,
			#custom-room-header p {
				color: inherit !important;
				margin: 0;
			}
		
			#custom-room-header p {
				margin-top: 10px;
			}

			.custom-block {
				position: relative;
				display: inline-block;
				width: 100%;
				max-width: 850px;
				}

			#custom-room-options {
				text-align: right;
				margin: 35px 0 10px 0;
				transition: color 0.5s;
				}
				#custom-room-options p {
					font: 16px/24px proxima-nova, sans-serif;
					font-weight: 400; 
					font-style: normal;
					margin: 0 0 5px 0;
				}

				#custom-change-room {
					display: inline-block;
					margin-right: 10px !important;
				}

				.custom_thumb {
					display: inline-block;
					width: 130px;
					height: 100px;
					margin-top: 20px;
				}

				.custom_thumb img {
					width: 100%;
					height: auto;
				}

				.custom_thumb.active {
					display: none;
				}

			#custom-room {
				overflow: hidden;
				vertical-align: top;
			}

				#custom-canvas {
					display: block;
					position: relative;
					width: 100%;
					height: auto;
					max-width: 850px;
					background-color: #FFF;
					}
					
					#custom-canvas canvas {
						display: block;
						position: relative;
					}

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

				#custom-coverup .lds-ellipsis {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 25px;
					height: 25px;
					width: 80px;
					height: 80px;
					transform: translate(-50%,-50%);
				}
				
				.lds-ellipsis div {
					position: absolute;
					top: 33px;
					width: 13px;
					height: 13px;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.25);
					animation-timing-function: cubic-bezier(0, 1, 1, 0);
				}
				.lds-ellipsis div:nth-child(1) {
				  left: 8px;
				  animation: lds-ellipsis1 0.6s infinite;
				}
				.lds-ellipsis div:nth-child(2) {
				  left: 8px;
				  animation: lds-ellipsis2 0.6s infinite;
				}
				.lds-ellipsis div:nth-child(3) {
				  left: 32px;
				  animation: lds-ellipsis2 0.6s infinite;
				}
				.lds-ellipsis div:nth-child(4) {
				  left: 56px;
				  animation: lds-ellipsis3 0.6s infinite;
				}
				@keyframes lds-ellipsis1 {
				  0% {
					transform: scale(0);
				  }
				  100% {
					transform: scale(1);
				  }
				}
				@keyframes lds-ellipsis3 {
				  0% {
					transform: scale(1);
				  }
				  100% {
					transform: scale(0);
				  }
				}
				@keyframes lds-ellipsis2 {
				  0% {
					transform: translate(0, 0);
				  }
				  100% {
					transform: translate(24px, 0);
				  }
				}

			#custom-palette {
				overflow: hidden;
				vertical-align: top;
				text-align: left;
				}

				.custom-palette-inner {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					text-align: right;
					margin: 0;
					}
				
					.custom-swatch {
						box-sizing: border-box;
						height: 130px;
						margin: 0 2px 0 2px;
						vertical-align: top;
						flex: 1;
						transition: box-shadow 0.5s;
						cursor: pointer;
						height: 70px;
						}

					.custom-swatch.active {
						box-shadow: inset 0 -70px 70px -70px rgba(0, 0, 0, 0.5);
						}

		#custom-details {
			display: block;
			position: absolute;
			top: 180px;
			left: 50px;
			width: calc(100% - 1000px);
			text-align: left;
			/* color: #FFF; */
			height: 725px;
			margin: 0;
			padding: 0;
			transition: color 0.5s;

			left: 100px;
			width: calc(100% - 1100px);
			}

			#custom-name {
				margin: 0;
				font: 32px/32px proxima-nova, sans-serif;
				font-weight: 400; 
				font-style: normal;
				color: inherit;
				text-transform: uppercase;
			}

			#custom-sku {
				font: 22px/22px proxima-nova, sans-serif;
				font-weight: 500;
				margin: 10px 0 35px 0;
			}

			#custom-description {
				font: 18px/22px proxima-nova, sans-serif;
				font-weight: 400; 
				font-style: normal; 
			}

			#custom-buy {
				display: block;
				width: auto;
				font: 14px/24px proxima-nova, sans-serif;
				font-weight: 700; 
				font-style: normal;
				margin: 50px auto 0 auto;
				margin: 50px 0 0 0;
				padding: 10px 0;
				text-align: center;
				cursor: pointer;
				min-width: 170px;
				text-transform: none;
				border-radius: 25px;
			}

			#custom-chip-selected {
				display: block;
				position: absolute;
				bottom: 10%;
				left: 50%;
				transform: translate(-50%, 50%);
				width: 300px;
				height: auto;
				filter: drop-shadow(0 0 30px rgba(0,0,0,0.25));
				z-index: 55;
			}
			
    		/* NOT USED TO CHANGE COLORS ANYMORE */
			/* 
			.bg_mocha_ice #custom-room-header,
			.bg_blank_canvas #custom-room-header,
			.bg_wheat_bread #custom-room-header,
			.bg_dainty_lace #custom-room-header,
			.bg_swatch_beehive #custom-room-header,
			.bg_urban_nature #custom-room-header,
			.bg_iced_copper #custom-room-header,

			.bg_mocha_ice #custom-room-options,
			.bg_blank_canvas #custom-room-options,
			.bg_wheat_bread #custom-room-options,
			.bg_dainty_lace #custom-room-options,
			.bg_swatch_beehive #custom-options,
			.bg_urban_nature #custom-options,
			.bg_iced_copper #custom-room-options,
			
			.bg_mocha_ice #custom-details,
			.bg_blank_canvas #custom-details,
			.bg_wheat_bread #custom-details,
			.bg_dainty_lace #custom-details,
			.bg_swatch_beehive #custom-details,
			.bg_urban_nature #custom-details,
			.bg_iced_copper #custom-details { 
				color: #000000 !important;
			}
 			*/
		#custom_bottom {
			min-height: 450px;
			padding: 0 50px;
			text-align: right;
			background-color: #FFFFFF;
			color: #000;
			padding: 0 100px;
			}

			#custom-swatches-used {
				text-align: right;
				color: #FFF;
				text-align: left;
				opacity: 0;
				}

				#custom-swatches-used h3 {
					margin: 20px 0 10px 0;
					color: #2D2D2D;
					font-weight: 400;
					text-transform: none;
				}

				.custom-chip-container {
					display: none;
					width: 100%;
					max-width: 260px;
					margin: 0 auto 15px auto;
					opacity: 0;
					text-align: left;
					}

					.custom-chip {
						display: inline-block;
						position: relative;
						width: 36px;
						height: 36px;
						margin: 0 5px 0 0;
						vertical-align: top;
						border: 1px solid #FFFFFF !important;
						overflow: hidden;
						cursor: pointer;
						}

						.custom-chip svg {
							display: block;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 80%;
							height: auto;
							transform: translate(-50%, -50%);
							transition: opacity 0.25s;
							opacity: 0;
						}

						body.isDesktop .custom-chip:hover svg {
							opacity: 0.75;
						}

						.custom-chip svg .chip_empty {
							fill: none;
						}

						.minus {
							opacity: 0.5;
							pointer-events: visible;
						}

						.minus circle,
						.minus line {
							stroke: #FFFFFF;
							fill: none;
							stroke-width: 2;
						}

						#custom-swatches-used .bg_mocha_ice .minus circle,
						#custom-swatches-used .bg_iced_copper .minus circle,
						#custom-swatches-used .bg_wheat_bread .minus circle,

						#custom-swatches-used .bg_blank_canvas .minus circle,
						#custom-swatches-used .bg_dainty_lace .minus circle,
						#custom-swatches-used .bg_swatch_beehive .minus circle,
						#custom-swatches-used .bg_urban_nature .minus circle,

						#custom-swatches-used .bg_mocha_ice .minus line,
						#custom-swatches-used .bg_iced_copper .minus line,
						#custom-swatches-used .bg_wheat_bread .minus line,

						#custom-swatches-used .bg_blank_canvas .minus line,
						#custom-swatches-used .bg_dainty_lace .minus line,
						#custom-swatches-used .bg_swatch_beehive .minus line,
						#custom-swatches-used .bg_urban_nature .minus line {
							stroke: #000;
						}

					.custom-chip-details {
						display: inline-block;
						position: relative;
						letter-spacing: 1.2px;
						color: #2D2D2D;
						margin: 0;
						text-align: left;
						}
						.custom-chip-details strong {
							margin: 0;
							font-weight: 700;
							text-transform: uppercase;
						}

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

				#custom-buy,
				#custom-options .btn {
					max-width: 250px;
				}

				
				#custom-options .btn {
					background-color: #4F5152; /* REPLACE - cracked_pepper */
					border: none;
					color: white;
				}

				#start_over {
					display: none;
				}

				#custom-instructions {
					margin: 20px 0 10px 0;
					}

				#custom-instructions-mobile {
					display: none;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 50%;
					text-align: left;
					max-width: 240px;
				}

				#custom-palette-inner-mobile,
				#custom-palette-inner-mobile2 {
					display: none;
				}

				#custom-palette-inner-mobile .custom-swatch,
				#custom-palette-inner-mobile2 .custom-swatch {
					position: relative;
				}

				.custom-swatch:after  {
					content: '';
					position: absolute;
					bottom: -5px;
					left: 0px;
					width: 100%;
					height: 5px;
					background-color: white;
				}
				.custom-swatch.active::after  {
					background-color: rgba(75, 75, 75, 1);
				}
				
				.custom-palette-inner {
					margin-bottom: 6px;
					box-sizing: border-box;
				}

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

	@media screen and (max-width: 1400px) {
		#custom_top {
			padding: 0 20px 20px 0;
		}

		#custom_bottom {
			padding: 0 20px;
		}
		
		#custom-room-header {
			left: 20px;
			width: calc(100% - 450px);
		}

		#custom-details {
			left: 20px;
			width: calc(100% - 910px);
		}

		#custom-chip-selected {
			display: block;
			position: relative;
			bottom: auto;
			left: auto;
			transform: none;
			width: 85%;
			margin: 50px auto 0 auto;
		}
	}

	@media screen and (max-width: 1200px) {
		#custom-details {
			width: 30%;
		}

		#custom-canvas {
			display: inline-block;
			vertical-align: top;
		}

		#custom-name {
			font-size: 24px;
			line-height: 28px; 
		}

		#custom-sku {
			font-size: 16px;
			line-height: 24px; 
		}

		#custom-description {
			font: 14px/18px proxima-nova, sans-serif;
			font-style: normal; 
		}
	}


	@media screen and (max-width: 1000px) {
		#custom-room-options p {
			font: 15px/18px proxima-nova, sans-serif;
			font-weight: 400; 
			font-style: normal;
			margin-right: 5px;
		}
		
		#custom-change-room {
			display: block;
			margin-right: 0 !important;
		}

		.custom_thumb {
			margin-top: 0;
		}
	}

	@media screen and (max-width: 850px) {
		#custom-name {
			font-size: 32px;
			line-height: 34px; 
		}

		#custom-sku {
			font-size: 22px;
			line-height: 28px; 
		}

		#custom-description {
			font: 16px/24px proxima-nova, sans-serif;
			font-weight: 500; 
			font-style: normal; 
		}
		
		#custom-room-header {
			display: block;
			position: relative;
			width: auto;
			max-width: none;
			left: auto;
			top: auto;
			padding: 20px 20px 0 20px;
		}

        #custom-room-header h2 {
			font-size: 32px;
			line-height: 40px;
			text-transform: uppercase;
            }

		#custom_top,
		#custom_bottom {
			padding: 0;
		}

		#custom-room-options {
			position: relative;
			margin: 20px 10px 5px 20px;
			width: auto;
		}

		.custom-block {
			display: block;
			max-width: none;
		}

		#custom-canvas {
			display: block;
			max-width: none;
		}
		
		#custom-details {
			position: relative;
			top: auto;
			left: auto;
			width: 100%;
			height: auto;
			min-width: auto;
			margin: 0;
			padding: 20px;
		}

		#custom-swatches-used h3 {
			margin: 0 0 20px 0;
		}
		
		#custom-chip-selected {
			display: none;
		}

		.custom-swatch {
			margin: 0;
			height: auto;
			aspect-ratio: 1 / 1;
		}

		#custom-swatches-used {
			display: block;
			position: relative;
			width: auto;
			margin: 0;
			padding: 20px;
		}

		#custom_bottom {
			min-height: 100px;
			}
		
		#custom-instructions {
			display: none;
			}

		#custom-instructions-mobile {
			display: block;
		}

		#custom-palette-inner {
			display: none;
		}

		#custom-palette-inner-mobile,
		#custom-palette-inner-mobile2 {
			display: flex;
		}
		
		#custom-palette-inner-mobile2 {
			padding-bottom: 6px;
		}

		#custom-mobile-swatch-wrapper {
			background-color: white;
		}

		#custom-buy {
			margin: 25px 0 0 0;
			margin: 25px auto 0 auto;
		}
			
		.custom_thumb {
			width: 100px;
			height: auto;
		}
	}

	@media screen and (max-width: 650px) {
		.custom_thumb {
			width: 70px;
			height: auto;
		}
			#custom-options .btn {
				margin: 0 auto;
			}

		#custom-change-room {
			width: 150px;
			text-align: left;
			padding-left: calc(100% - 145px);
		}
	}