@media screen and (prefers-reduced-motion:reduce){[class*=" svg-"],[class^=svg-]{transition:none}}.h-90{height:90px}.page-template-color-planner .content-panel{padding:2px 0}.page-template-color-planner .color-planner-section .nav-tabs-pills .nav-pills .nav-item .nav-link{height:68px}@media (max-width:1600px){.page-template-color-planner .content-panel{padding:2px 0}.page-template-color-planner .color-planner-section .nav-tabs-pills .nav-pills .nav-item .nav-link{height:47px}}@media (max-width:767px){.page-template-color-planner .color-planner-section .nav-tabs-pills .nav-pills .nav-item{display:flex;flex-basis:0;flex-grow:1;max-width:100%}.page-template-color-planner .color-planner-section .nav-tabs-pills .nav-pills .nav-item .nav-link{width:100%;height:auto}.page-template-color-planner .color-planner-section .nav-tabs-pills .nav-pills .nav-item .nav-link.active:before{display:none}}.page-template-color-planner .color-planner-section .persist-header{border-bottom:1px solid #ccd4dc}.page-template-color-planner .color-planner-section .persist-header.sticky{border-bottom:0}.page-template-color-planner .color-planner-section .persist-header .nav{max-width:992px}.page-template-color-planner .color-planner-section .persist-area.sticky .persist-header{border-bottom:0}.page-template-color-planner .color-planner-section .nav-tabs-pills .persist-header .nav-pills{display:flex}.page-template-color-planner .color-planner-section .color-planner-cnt{border-top:0;max-width:70%;margin-left:3%;margin-right:auto;}.page-template-color-planner .color-planner-section .color-img-wrapper{display:flex;justify-content:center;align-items:center;margin-top:50px;position:relative}@media (max-width:1600px){.page-template-color-planner .color-planner-section .color-img-wrapper{margin-top:15px;margin-left:auto;margin-right:auto}}.page-template-color-planner .color-planner-section .selected-color-box{box-shadow:0 0 10px #000 0d;border:1px solid #e3e3e3;transform:skewX(-20deg);margin-left:auto;margin-right:-30px;display:inline-block;padding:8px 30px 8px 20px;font-family:Quantico-Regular;text-transform:uppercase;font-size:16px;font-weight:700;color:#282221}.page-template-color-planner .color-planner-section .selected-color-box .inner-item{transform:skewX(20deg);display:flex;align-items:center}.page-template-color-planner .color-planner-section .selected-color-box .inner-item img{margin-right:20px}.page-template-color-planner .color-planner-section .color-pattel{height:78px;display:flex;align-items:center;background:#f5f7f9;margin-left:-15px;margin-right:-15px;justify-content:space-between}@media (max-width:1600px){.page-template-color-planner .color-planner-section .selected-color-box{font-size:15px}.page-template-color-planner .color-planner-section .selected-color-box .inner-item img{max-width:37px}.page-template-color-planner .color-planner-section .color-pattel{height:60px}}@media (max-width:767px){.page-template-color-planner .color-planner-section .color-img-wrapper{margin-top:22px}.page-template-color-planner .color-planner-section .selected-color-box{font-size:14px;margin-top:10px}.page-template-color-planner .color-planner-section .selected-color-box .inner-item img{max-width:30px}.page-template-color-planner .color-planner-section .color-pattel{height:auto;align-items:stretch;margin-top:20px;padding-left:15px;padding-right:15px}}.page-template-color-planner .color-planner-section .fill-color-box{width:88px;display:flex;align-items:center;justify-content:center;background:#d12029;height:100%}@media (max-width:991px){.page-template-color-planner .color-planner-section .fill-color-box{width:70px;margin-right:15px}}@media (max-width:767px){.page-template-color-planner .color-planner-section .fill-color-box{height:inherit;margin-right:15px;display:none}}.page-template-color-planner .color-planner-section .color-list-item{position:relative;padding:0;margin:0;margin-right:15px}.page-template-color-planner .color-planner-section .color-list-item li{display:inline-block;cursor:pointer}.page-template-color-planner .color-planner-section .color-list-item li.active img{border:2px solid #d12029;padding:2px}.page-template-color-planner .color-planner-section .color-list-item li img{width:42px;height:42px;padding:0;border:2px solid transparent;transition:all .1s ease-in}.page-template-color-planner .color-planner-section .color-list-item li:before{content:attr(title)}@media (max-width:991px){.page-template-color-planner .color-planner-section .color-list-item{margin-right:0;display:flex;flex-wrap:wrap}.page-template-color-planner .color-planner-section .color-list-item li img{width:38px;height:38px}}.page-template-color-planner .color-planner-section .bottom-wrapper{margin-top:40px;margin-bottom:30px}@media (max-width:1600px){.page-template-color-planner .color-planner-section .bottom-wrapper{margin-top:15px;margin-bottom:15px}}@media (max-width:767px){.page-template-color-planner .color-planner-section .bottom-wrapper{margin-top:30px;margin-bottom:20px}}.page-template-color-planner .color-planner-section .img-roof,.page-template-color-planner .color-planner-section .img-side,.page-template-color-planner .color-planner-section .img-trim,.page-template-color-planner .color-planner-section .img-wainscot{position:absolute;top:0;left:0%;width: 100%;}.page-template-color-planner .color-planner-loader{height:500px;position:relative}.page-template-color-planner .color-planner-loader:before{content:"Loading...";position:absolute;left:0;right:0;top:0;bottom:0;background:#f5f7f9;z-index:2;color:#4b4747;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.color-img-wrapper .nav-link {
	color: #000;
	font-weight: 700;
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 4px 8px;
	font-size: 12px;
	white-space: nowrap;
	flex-direction: column;
}
span.icon {
	width: 280px;
}
.color_plater{margin: 0px -9px 1px 0px;}
.color-img-wrapper .nav-link:nth-child(1) {
	top: -23%;
	left: 59%;
}
.color-img-wrapper .nav-link:nth-child(2) {
	top: -7%;
	left: 85%;
}
.color-img-wrapper .nav-link:nth-child(3) {
	bottom: 50%;
	left: 101%;
}
.color-img-wrapper .nav-link:nth-child(4) {
	bottom: 0%;
	left: 92%;
}
.color-img-wrapper .nav-link:nth-child(5) {
	left: 65%;
	bottom: -20%;
}
.color_pos {
	position: absolute;
	transform: translateY(-36%);
	width: 240px;
	opacity: 1;
}
.color_pos.bottom_sec {
    transform: translateY(-75%);
}
.buildingType li {
    display: table-cell;
    font-size: 15px;
    font-weight: 600;
    vertical-align: middle;
}
.rangBox {
    width: 100px;
    height: 12px;
    background: #eaeaea;
    border: 0;
    margin: 0 1px;
    border: 1px solid rgba(0,0,0,.09);
}
@media (min-width: 1200px){
	.color-img-wrapper .nav-link {
		font-size: 15px;
	}
}
.line-dashed {
	position: absolute;
	width: 100%;
	left: 0;
}
.line-dashed:before, .line-dashed:after {
	content: "";
	position: absolute;
	display: inline-block;
}
.line-dashed:after {
	border-left: 2px dashed #000;
	left: 8%;
	top: 105px;
	height: 75px;
}

.color-img-wrapper  .nav-link:nth-child(4) .line-dashed:before {
	border-top: 2px dashed #000;
	top: 0;
	width: 35px;
	left: -50%;
}
.color-img-wrapper  .nav-link:nth-child(5) .line-dashed:before {
	border-top: 2px dashed #000;
	top: 0;
	width: 35px;
	left: -50%;
}
.color-img-wrapper .nav-link:nth-child(3) .line-dashed:after {
	content: " ";
	border-left: none;
}
.color-img-wrapper .nav-link:nth-child(3) .line-dashed:before {
	border-top: 2px dashed #000;
	top: 15px;
	width: 23px;
	left: -8%;
}
@media (min-width: 992px){
	.color-img-wrapper .nav-link:nth-child(4) .line-dashed:before {
		left: -11%;    top: 15px;
	}
	.color-img-wrapper .nav-link:nth-child(4) .line-dashed:after {
		left: -11%;    top: -60px;
	}
	.color-img-wrapper .nav-link:nth-child(5) .line-dashed:before {
		left: -13%; top: 11px;
	}
	.color-img-wrapper .nav-link:nth-child(5) .line-dashed:after {
		left: -13%; top: -64px;
	}
}

@media (max-width: 1600px){
	.color_pos {
		display: none;
	}

}


@media (max-width: 992px){

	.page-template-color-planner .color-planner-section .color-planner-cnt{
		max-width:100%
	}
	a.nav-item.nav-link {
		position: initial;
	}
	.page-template-color-planner .color-planner-section .img-roof, .page-template-color-planner .color-planner-section .img-side, .page-template-color-planner .color-planner-section .img-trim, .page-template-color-planner .color-planner-section .img-wainscot {
		position: absolute;left:auto;top:auto;
		width: 89%;
	}
	.line-dashed{display:none;}
	.page-template-color-planner .color-planner-section .color-img-wrapper {
		display: flex;
		justify-content: center;
		margin-top: 50px;
		position: relative;
		display: contents;
		flex-direction: column;
	}
}