:root{
	--s1Color: "100, 40, 250"; 
	--textAlign: left;
	--primaryColor: #ae234b; /* rgb(174, 35, 75) */
	--nestTest: 174, 35, 75; 
	--primaryBtnTextColor: #ffffff;
	--secondaryColor: #4f1428;
	--tertiaryColor: #fab500;
	
	/*** Interace Builder ***/
	
	--headerBgColor:#222;
	
	/*** Interace Builder ***/
	--testMarginLeft: 5%;
	--testWidth: calc(90%);
	--testOverflow: visible;
	--interfaceBuilderBtnLabelFontSize: 11px;
	--interfaceBuilderBtnLabelFontWeight: 500;
	--interfaceBuilderTestTopPadding: 30px;
	--interfaceBuilderBtnBorderRadius: 6px;
	--interfaceBuilderBtnBoxShadow: 0;
	--interfaceBuilderBtnBorderColor: 0;
	--interfaceBuilderQuestionFontSize: 24px;
	--interfaceBuilderQuestionMarginTop: 40px;
	--interfaceBuilderQuestionMarginBottom: 15px;
	--interfaceBuilderQuestionTextColor: #fff;
	--interfaceBuilderQuestionLabelColor: var(--primaryColor);
	--interfaceBuilderBtnBackgroundColor: #ffffff;
	--interfaceBuilderBtnFlexJustify: flex-start;
	--interfaceBuilderButtonWidth: 47%;
	--interfaceBuilderRadioButtonHeight: 120px;
	--interfaceBuilderMarginBottom: 0;
	--interfaceBuilderInputMargin: 30px 0;
	--interfaceBuilderInputBottomBorder: 1px solid #000;
	--interfaceBuilderInputFontSize: 16px;
	--interfaceBuilderPriceInputHeight: 30px;
	--interfaceBuilderQuestionCntHeight: auto;
	--interfaceBuilderQuestionSelectWidth: 100%;
	--interfaceBuilderQuestionSelectPadding: 20px 17px;
	--interfaceBuilderQuestionSelectMargin: 0;
	--interfaceBuilderQuestionSelectFontSize: 16px;
	--interfaceBuilderSelectArrowLeft: calc(50% - 30px);
	--interfaceBuilderSelectArrowTop: 18px;
	--interfaceBuilderNextBtnDisplay: none;
	--validationMessagePadding: 8px;
	--validationMessageMargin: 30px 0 0px 60px;
	--validationMessageBorderRadius: 0;
	--validationMessageWidth: 100%;
		
	/*** Breadcrumb bar ***/
	--breadcrumbBGColor:linear-gradient(to right, rgba(174,35,75,0.5) 8%,rgba(250,68,29,0.5) 21%,rgba(250,68,29,0.5) 51%,rgba(250,181,0,0.5) 86%); 
	--breadcrumbColor: rgba(0,0,0,0.4);
	--breadcrumbBGHoverColor: var(--primaryColor);
	
	/*** Backgrounds ***/
	--bodyBackground: #efefef;
	--bgMotionCanvasOpacity: .45;
	--PatternOverlayBackgroundSize: 2px;
	--PatternOverlayOpacity: 1;
	--backgroundDisplay: none;
	
	/*** Preview Area dynamic frame controls ***/
	--dynamicControlsBorderRadius: 6px;
	--dynamicControlsBackgroundColor: rgba(0,0,0,0.7);
	--dynamicControlsActiveBackgroundColor: var(--primaryColor);
	--dynamicControlsBorderRight: 1px solid #000;
	--dynamicControlsTextColor: #fff;
	--dynamicControlsFontSize: 14px;
	
	/*** Preview Area Info cnt ***/
	--previewCanvasMainColor: #777;
	--previewCanvasInfoCntH2Color: var(--previewCanvasMainColor);
	--previewCanvasInfoCntH2FontWeight: 900;
	--previewCanvasInfoCntH2FontSize: 14px;
	--previewCanvasBtnSize: 30px;
	--previewCanvasBtnBackground: transparent;
	--previewCanvasBtnBorderRadius: 4px;
	--previewCanvasBtnBorder: 1px solid var(--previewCanvasMainColor); 
	--previewCanvasSvgIconFillColor: var(--previewCanvasMainColor);
	
	/***Procontrols***/
	--procontrolsBackground: rgba(0,0,0,0.35);
	--procontrolsBoxShadow: 0 5px 5px rgba(0,0,0,0.5);
	--procontrolsH2Background: rgba(0,0,0,0.3);
	--procontrolsH2Color: #fff;
	--procontrolsH2FontSize: 21px;
	--procontrolsH2FontWeight: 500;
	--procontrolsH3Color: #efefef;
	--procontrolsH4Color: #efefef;
	--procontrolsH4FontWeight: #efefef;
	--procontrolsH3FontSize: 14px;
	--procontrolsH3FontWeight: 600;
	--procontrolsPColor: #999;
	--procontrolsPFontSize: 13px;
	--procontrolsPFontWeight: 400;
	--procontrolsBottomBorder: 1px solid #555;
	--procontrolsH2SvgIconFillColor: #ffffff;
	--procontrolsH2SvgIconBorderColor: #ffffff;
	--procontrolsH3SvgIconFillColor: #ffffff;
	--procontrolsH3SvgIconBorderColor: #ffffff;
	--procontrolsH5Height: 80px;
	--procontrolsH5FontWeight: 100;
	--procontrolsH5Background: var(--primaryColor);
	--procontrolsH5BackgroundSelected: var(--secondaryColor);
	--procontrolsH5FontSize: 10px;
	--procontrolsH5Color: var(--primaryBtnTextColor);
	--procontrolsH5BorderRadius: 4px;
	--proControlsSingleCheckboxBackgroundColor: var(--primaryColor);
	--proControlsBtnBoxShadow: inset 0px -6px 0px rgba(0,0,0,0.5);
}


@media screen and (min-width: 768px){
	:root{
		--bodyBackground: #333;
		--bgMotionCanvasBackground: url("../images/adam-smigielski-535730-unsplash.jpg");
		--PatternOverlayBackground:url("../images/bg-pattern-black-8.png");
		--testWidth: calc(100vw - 3%);
		--testOverflow: hidden;
		--interfaceBuilderTestTopPadding: 0;
		--interfaceBuilderQuestionFontSize: 6.5vw;
		--interfaceBuilderBtnLabelFontWeight: 700;
		--interfaceBuilderPaddingLeft: 67px;
		--interfaceBuilderQuestionCntHeight: calc(100vh - var(--headerHeight));
		--interfaceBuilderQuestionMarginTop: 0;
		--interfaceBuilderQuestionMarginBottom: 30px;
		--interfaceBuilderInputMargin: 20px 0 0 var(--interfaceBuilderPaddingLeft);
		--interfaceBuilderInputFontSize: 3vw;
		--interfaceBuilderInputBottomBorder: 0;
		--interfaceBuilderPriceInputHeight: 200px;
		--interfaceBuilderNextBtnDisplay: block;
		--interfaceBuilderQuestionSelectWidth: 60%;
		--interfaceBuilderBtnLabelFontSize: 24px;
		--interfaceBuilderQuestionSelectFontSize: 24px;
		--interfaceBuilderQuestionSelectPadding: 30px 17px;
		--interfaceBuilderQuestionSelectMargin: 0 0 0 var(--interfaceBuilderPaddingLeft);
		--interfaceBuilderSelectArrowTop: 36px;
		--interfaceBuilderSelectArrowLeft: 10%;
		--validationMessagePadding: 20px;
		--validationMessageMargin: 0 auto;
		--validationMessageBorderRadius: 6px;
		--validationMessageWidth: 80vw;
		--backgroundDisplay: block;
		--interfaceBuilderBtnBoxShadow: 0px 0px 40px rgba(0,0,0,0.5), inset 0px -6px 0px rgba(0,0,0,0.5);;
		--interfaceBuilderButtonWidth: 40%;
		--interfaceBuilderBtnFlexJustify: flex-start;
		--interfaceBuilderRadioButtonHeight: 180px;
		--interfaceBuilderMarginBottom: 15px;
		--interfaceBuilderRadioButtonHeight: 300px;
		--textAlign: left;
		--testMarginLeft: 1.5%;
		
	}
	#test fieldset label{
		text-align: var(--textAlign);
		}

}

body {
	background: var(--bodyBackground);
	}
		
#header .logoCnt {
	order: 2;
	}
	
#header .logo {
	border-radius: 0;
	border: 0;
	display: block;
	}
#bgMotionCanvas{
	width: 100vw;
	height: 100vh;
	z-index: 0;
	opacity: var(--bgMotionCanvasOpacity);
	background: var(--bgMotionCanvasBackground);
	background-size: cover;
	filter: blur(10px);
	display: var(--backgroundDisplay);
	background-blend-mode: multiply;
	}
.rotate{
	animation: rotatePath 1.5s ease;
	transform-origin: 0% 0%;
}	
@keyframes rotatePath{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(359deg);}	
		
}
#bgMotionCanvas.animateBG{
	animation: animateBG 1.5s ease;
	}
@keyframes animateBG{
	0% {filter: blur(10px);}
	50% {filter: blur(0px);}
	100% {filter: blur(10px);}	
		
}
#bgMotionCanvasPatternOverlay{
	display: var(--backgroundDisplay);
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--PatternOverlayBackground);
	background-size: 2.5px;
	z-index: 0;
	opacity: 0.1;
}

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){		
	#bgMotionCanvasPatternOverlay{
		opacity: var(--PatternOverlayOpacity);
		background-size: var(--PatternOverlayBackgroundSize);
		}	
	}
	
#test {
	margin-top: var(--headerHeight);
	height: calc(100vh - var(--headerHeight));
	overflow: var(--testOverflow);
	width: var(--testWidth);
	margin-left: var(--testMarginLeft);
	z-index: 1;
	position: relative;
	padding-top: var(--interfaceBuilderTestTopPadding);
	}
	
#test fieldset .dndCnt {
	height: calc(50vh - var(--headerHeight));
	flex-direction: column;
	}

	
#test fieldset .dndCnt svg {
	width: 120px;
	height: 120px;
	display: block;
	margin-bottom: 30px;
	}

#test fieldset .dndCnt svg path{
	fill: #fff;
	}
		
#test fieldset label, #test .questioncnt p{
	font-size: 21px;
	line-height: 1.4;
	color: #fff;
	width: auto;
	letter-spacing: 1px;
	padding-left: var(--interfaceBuilderPaddingLeft);	
	}
	
#test .checkboxCnt label{
	padding-left: 0;
	color: var(--primaryColor);
	text-align: center;
	font-size: 13px;
	}	
	
#test fieldset .dndCnt label{	
	color: #fff;
	}
	
.dndCnt label:before {
	display: none;
	/*background: url(../images/load_existing-white.svg) no-repeat;
	min-width: 150px;
	min-height: 150px;*/
	}	
	
.questioncnt{
	text-align: var(--textAlign);
	margin-bottom: var(--interfaceBuilderQuestionMarginBottom);
	font-size: var(--interfaceBuilderQuestionFontSize);
	
}
.finished-screen.screen .questioncnt{
	text-align: center;
}
.questioncnt h2{
	margin-top: calc(0px);
	font-weight: 200;
	color: var(--interfaceBuilderQuestionTextColor);
	font-size: var(--interfaceBuilderQuestionFontSize);
	padding-left: var(--interfaceBuilderPaddingLeft);
}

.questioncnt p{
	font-size: 16px;
	color: var(--interfaceBuilderQuestionTextColor);
	}

.btns label, .checkboxCnt label, label.singleCheckBoxCnt  {
	background: var(--interfaceBuilderBtnBackgroundColor);
	border: var(--interfaceBuilderBtnBorderColor);
    box-sizing: border-box;
    color: var(--interfaceBuilderQuestionLabelColor);
    cursor: pointer;
    
    display: flex;
    text-transform: capitalize;
	flex-direction: column-reverse;
    font-size: var(--interfaceBuilderBtnLabelFontSize);
    font-weight: var(--interfaceBuilderBtnLabelFontWeight);
    height: var(--interfaceBuilderRadioButtonHeight);
    margin: 20px 6% 20px 0;
    max-height: 300px;
    max-width: 300px;
    padding: 10px 5px;
    opacity: 1;
    transition: all .5s ease-in-out;
    vertical-align: top;
    text-align: center; 
    width: var(--interfaceBuilderButtonWidth);
    border-radius: var(--interfaceBuilderBtnBorderRadius);
    box-shadow: var(--interfaceBuilderBtnBoxShadow);  
	}
	
.checkboxCnt label {
	max-width: 200px;
	margin: 20px 5% 20px 0;
	}	
	
.checkboxCnt label{
	height: auto;
	}

.nextBtn, #startBtn, .btn-primary-link, #downloadFinishedImageBtn{
	border-radius: 4px;
	padding: 20px 50px 25px;
	background: var(--primaryBtnColor);
	outline: 0;
	border: 0;
	color: var(--primaryBtnTextColor);
	font-size: 30px;
	margin: 60px 0 0 var(--interfaceBuilderPaddingLeft);
	position: relative;
	display: var(--interfaceBuilderNextBtnDisplay);
	max-height: unset;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 1px;
	}
#projectStep-image_gallery .nextBtn{
	margin: 60px 0 60px 0;
	}

#downloadFinishedImageBtn, .btn-primary-link{
	margin-left: 0;

}

.btn-primary-link{
	display: inline-block;
	}

.nextBtn, #load-btn, .make-png, #startBtn, .btn-primary-link, #downloadFinishedImageBtn{	
	box-shadow: inset 0px -5px 0px rgba(0,0,0,0.2);
	transform: scale(1);
	transition: transform 0.25s ease, background 0.25s ease;
	}
	
#load-btn{	
	box-shadow: inset 0px -3px 0px rgba(0,0,0,0.2);
	top: 11px;
	height: 39px;
	}
	
.validationMessageCnt~.nextBtn{
	margin: 30px 0 0 60px;
	}
	
.nextBtn:hover, #load-btn:hover, .make-png:hover, #startBtn:hover, .btn-primary-link:hover, #downloadFinishedImageBtn:hover{
	transform: scale(0.95);
	}
		
.nextBtn:hover, .btn-primary-link:hover{
	background: var(--secondaryColor);
	}	
	
@media screen and (min-width:375px){
	:root{
	--interfaceBuilderBtnLabelFontSize: 13px;
	}
}	

.btns label.push, .checkboxCnt label.push {
	animation: push 0.3s linear 0.3;
	}
	
.btns label:last-of-type, .checkboxCnt label:last-of-type{
	margin-right: 0;
	}

.btns label span, .checkboxCntlabel span{
	position: relative;
	}
	
.screen .btns, .checkboxCnt{
	flex-direction: row;
	justify-content: var(--interfaceBuilderBtnFlexJustify);
	display: flex;
	flex-wrap: wrap;
	padding-left: var(--interfaceBuilderPaddingLeft);
	}

#proControls .checkboxCnt{
	padding-left: 0;
}
	
.callback-question.screen:after{
	display: block;
	content: 'Answer the questions above first to load more';
	width: 100%;
	font-size: 13px;
	color: #ccc;
	height: 40px;
	margin: 20px 0px;
	border-top: 1px solid #eee;
	padding-top: 20px;
	text-align: center;
	}

.callback-question.screen.answered:after{
	display: none;
	}
	
@media screen and (min-width:414px){
	.callback-question.screen:after{
		display: none;
	}
}	
	
#test .checkboxCnt{
	width: auto;
	}

#test .checkboxCnt label{	
	width: 10%;
	}
	
.validationMessageCnt{
	background: red;
	width: var(--validationMessageWidth);
	text-align: center;
	color: white;
	margin: var(--validationMessageMargin);
	padding: var(--validationMessagePadding) 20px;
	box-sizing: border-box;	
	border-radius: var(--validationMessageBorderRadius);
	}		

.btns label span:before, .checkboxCnt label span:before{
	background: #eee;
	content: '';
	display: block;
	height: calc(var(--interfaceBuilderRadioButtonHeight) - 40px);
	margin-bottom: var(--interfaceBuilderMarginBottom);
	position: relative;
	width: 100%;
	} 
	
.screen {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	height: var(--interfaceBuilderQuestionCntHeight);
	justify-content: center;
	margin-top: var(--interfaceBuilderQuestionMarginTop);
	}	

.screen .btns label{
	margin-top: 0;
	}
	
.screen#projectStep-0, .screen#projectStep-1{
	/*height: calc(100vh - var(--headerHeight, 100px));*/
	justify-content: center;
	/*padding: 0 20px;*/
	}
	
#projectStep-1 .btns label input ~ span:before{
	background-size: cover;
	}

.screen#projectStep-0 .responseCnt, .screen#projectStep-1 .responseCnt{
	border-bottom:  0
	}
	
.screen#projectStep-final .responseCnt fieldset{
	display: flex;
	flex-direction: row;
	justify-content: center;
	}

.checkboxCnt label:hover, .checkboxCnt label:focus, label.singleCheckBoxCnt:hover, label.singleCheckBoxCnt:active, .checkboxCnt label:active, .btns label:hover, .btns label:focus, .btns label:active{
	animation: sink 0.3s linear forwards;
	border: 0;
	}
.btns label.push{
	animation: push 0.3s linear forwards;
	border: 0;
	}
.checkboxCnt label.push{
	animation: pushBtn 0.3s linear forwards;
}
@keyframes pulse{
  25%  {transform: scale(0.9);}
  75%  {transform: scale(1.1);}
	}

@keyframes sink{
	25%  {transform: scale(1.03);}
	75%  {transform: scale(0.8);}
	100%  {transform: scale(0.95);}
	}
	
@keyframes pop-small{
	50%  {transform: scale(1.1);}
	}
	
@keyframes push{
	0%  {transform: scale(0.95);}
	50%  {transform: scale(1.2); opacity: 1;}
	100% {transform: scale(1.5); opacity: 0;}
	}
@keyframes pushBtn{
	0%  {transform: scale(0.95);}
	50%  {transform: scale(1.3);}
	100% {transform: scale(1);}
	}

input[type="radio"] {
	height: 0;
    opacity: 0;
    width: 0;
	}

input[type="radio"]:active ~ label {
	opacity: 1;
	}

input[type="radio"]:checked ~ label {
	border: 1px solid rgba(0,0,150, 1);
	opacity: 1;
	}

input[type="text"]{
	background: #fff;
	border: none;
	border-bottom: var(--interfaceBuilderInputBottomBorder);
	font-size: var(--interfaceBuilderInputFontSize);
	height: var(--interfaceBuilderPriceInputHeight);
	padding: 0 2vw;
	text-align: left;
	width: 90vw;
	margin: var(--interfaceBuilderInputMargin);
	border-radius: 6px;
	}
	
input[type="text"].digits {
	background: repeating-linear-gradient(90deg, #fff 0, #fff 8vw, transparent 0, transparent 12vw) 0 100%/100% 2px no-repeat;
	border: none;
	font-size: 6vw;
	font: monospace;
	height: var(--interfaceBuilderPriceInputHeight);
	letter-spacing: 8.3vw;	
	text-align: left;
	width: 60vw;
	text-transform: uppercase;
	border-radius: 6px;
	margin: 20px 0 20px var(--interfaceBuilderPaddingLeft);
	}
	
input[type="text"].digits:before {
	content: '';
	width: 2vw;
	display: inline-block;
	position: relative;
	}	
	
input[type="text"]:focus {
	outline: none;
  	color: var(--primaryColor);
	}
	
input[type="text"].digits:focus, input[type="text"].digits {
	color: var(--interfaceBuilderQuestionTextColor);
	}
#test .checkboxCnt label {
	display: flex;
	flex-wrap: wrap;
	}

.checkboxCnt label input[type="checkbox"] {
	height: 0;
	opacity: 0;
	width: 0;
	}

#proControls .checkboxCnt h4 {
	width: 100%;
}

#proControls .checkboxCnt label {
	color: var(--primaryColor);
	}
	
.checkboxCnt label input[type="checkbox"]~ span:before{
	border: 1px solid #efefef;
	content: '';
	background: #fafafa;
	display: block;
	height: 50px;
	margin: 0 auto 15px;
	width: 50px;
	border-radius: 50%;
	}	
	
#proControls .checkboxCnt label input[type="checkbox"]~ span:before,{
	height: 25px;
	margin: 0 auto 10px;
	width: 25px;
	}

#proControls label.singleCheckBoxCnt input[type="checkbox"]~ span:before{
	background: #fafafa;
	border: 1px solid #efefef;
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: 25px;
	margin: 0 10px -7px 0;
	width: 25px;
	}

#proControls label.singleCheckBoxCnt{
	color: var(--procontrolsH2Color);
	display:flex;
	height: auto;
	width: 100%;
	}
	
#proControls .checkboxCnt label {
	display: flex;
	max-width: 100px;
	min-height: 100px;
	justify-content: center;
	
}

label.singleCheckBoxCnt {
	background: var(--proControlsSingleCheckboxBackgroundColor);
	color: var(--primaryColor);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding: 10px 10px 22px 10px;
}

.singleCheckBoxCnt label span{
	
	}

.singleCheckBoxCnt input{
	height: 0;
	opacity: 0;
	width: 0;
}

.checkboxCnt label input[type="checkbox"]:checked ~ span:before, #proControls label.singleCheckBoxCnt input[type="checkbox"]:checked  ~ span:before{
	background: url('../images/tick-color.svg') center center no-repeat;
	background-size: cover;
	border: 1px solid #efefef;
	content: '';
	display: block;
	}	
#proControls label.singleCheckBoxCnt input[type="checkbox"]:checked ~ span:before{
	display: inline-block;
	background-color: #fff;
}

.interface-builder-breadcrumb-bar{
	align-items: center;
	background: var(--breadcrumbBGColor);
	background-blend-mode: multiply;
	display: flex;
	}
.interface-builder-breadcrumb-bar div:hover{
	background: var(--breadcrumbBGHoverColor)
	}
	
.interface-builder-breadcrumb-bar div{
	background: var(--breadcrumbColor);
	background-blend-mode: multiply;
	border: 1px solid #fff;
	color: var(--primaryBtnTextColor);
	}
	
select {
	appearance: none;
    background: var(--interfaceBuilderBtnBackgroundColor);
    border: 1px solid #cccc;
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--primaryColor);
    cursor: pointer;
    display: block;	
    font-size: var(--interfaceBuilderQuestionSelectFontSize);
    margin: var(--interfaceBuilderQuestionSelectMargin);
    padding: var(--interfaceBuilderQuestionSelectPadding);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--interfaceBuilderQuestionSelectWidth);
    }
    
.screen .image_gallery .image_cnt .overflowWrap img {
	border-radius: 6px;
	/*box-shadow: var(--interfaceBuilderBtnBoxShadow);*/
	}
	
.gallery-question.screen h5{		
	color: var(--interfaceBuilderQuestionTextColor);
	padding-left: 67px;
	}
	
.gallery-question.screen .questioncnt{
	padding: 50px 0px 50px 0px;
	}
    
select::-ms-expand {
    display: none;
    }

select:hover, .select select:focus {
    background: var(--interfaceBuilderBtnBackgroundColor);
    color: var(--primaryColor);
    }
        
select:disabled {
    opacity: 0.5;
    pointer-events: none;
    }
    
.select_arrow {
	border: solid;
	border-color: var(--primaryColor);
	border-width: 0 5px 5px 0;
	display: inline-block;
	height: 5px;
	left: var(--interfaceBuilderSelectArrowLeft);
	margin-left: 50%;
	padding: 3px;
	position: absolute;
	top: var(--interfaceBuilderSelectArrowTop);
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 5px;
	}
	
#proControls .select_arrow {
	left: 0;
	margin-left: calc(100% - 50px);
	position: relative;
	top: -39px;
	}
	
select:hover ~ .select_arrow,
select:focus ~ .select_arrow {
    border-color: var(--primaryColor);
	}
	
select:disabled ~ .select_arrow {
    border-top-color: #CCCCCC;
	}
	
	
/******** Preview Area ***************/

.dynamicControls ul{
	border: 0;
	margin: 0 auto 5px auto;
	padding-left: 0;
	width: calc(100% - 40px);
	border-radius: var(--dynamicControlsBorderRadius);
	font-size: var(--dynamicControlsFontSize);	
	}

	
.dynamicControls li{
	background: var(--dynamicControlsBackgroundColor);
	border-right: var(--dynamicControlsBorderRight);
	color: var(--interfaceBuilderBtnBackgroundColor);
	}
	
.dynamicControls li.active{
	background: var(--dynamicControlsActiveBackgroundColor) ;
	color: var(--dynamicControlsTextColor:);
	}

.preview-canvas-cnt{
	border: 0.5pt solid #292929;
}
.preview-canvas-cnt:nth-of-type(1), .preview-canvas-cnt:nth-of-type(2){
	border-top: 0;
	padding-top: 116px;
	margin-top: -100px;
	}
	
.preview-canvas-cnt:nth-child(odd){
	border-right: 0;
	}
	
.preview-canvas-cnt:nth-child(even){
	border-left: 0;
	}


#previewArea h2, #previewArea h3{
	font-size:var(--previewCanvasInfoCntH2FontSize);
	color: var(--previewCanvasInfoCntH2Color);
	font-weight:var(--previewCanvasInfoCntH2FontWeight);
	transition: color 0.25s ease,
	}

#previewArea .preview-canvas-cnt:hover .preview-canvas-info-cnt h2{
	color: #fff;
	}
.preview-canvas-cnt:hover {
	background: rgba(0,0,0,0.3);
	}

#previewArea .preview-canvas-cnt:hover .preview-canvas-info-cnt .btn-cnt div svg path{
	fill: #fff;
	}

#previewArea .preview-canvas-cnt:hover .preview-canvas-info-cnt .btn-cnt div{
	border-color:#fff;
	}
	
#previewArea .preview-canvas-cnt .preview-canvas-info-cnt .btn-cnt div:hover{
	background: var(--primaryColor);
	cursor: pointer;
	}
#previewArea .preview-canvas-cnt .preview-canvas-info-cnt .btn-cnt div.unlocked{
	background: var(--secondaryColor);
	cursor: pointer;
	}
	
#previewArea .preview-canvas-cnt .preview-canvas-info-cnt .btn-cnt div:hover svg path{
	fill: var(--primaryBtnTextColor);
	}

#previewArea .preview-canvas-cnt .preview-canvas-info-cnt .btn-cnt div.unlocked svg path{
	fill: var(--primaryBtnTextColor);
	cursor: pointer;
	}

#previewArea .preview-canvas-info-cnt .btn-cnt{	
	display: flex;
	}
	
#previewArea .preview-canvas-info-cnt .btn-cnt svg{
	width: 24px;
	height: 24px;
	}
	
#previewArea .preview-canvas-info-cnt .btn-cnt svg path{
	transition: fill 0.25s ease;
	}
	
#previewArea .preview-canvas-info-cnt .lock, #previewArea .preview-canvas-info-cnt .refresh {
	width: var(--previewCanvasBtnSize);
	height: var(--previewCanvasBtnSize);
	background: var(--previewCanvasBtnBackground);
	border-radius: var(--previewCanvasBtnBorderRadius);
	border: var(--previewCanvasBtnBorder);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, border 0.25s ease;
	}
	
.preview-canvas-cnt .msgCnt{
	height: 12px;
	color: #666;
	font-size: 13px;
	background: #ddd;
	padding: 6px 30px 12px;
	border-radius: 20px;
	font-weight: 500;
	}

#previewArea{
	
}

#previewArea #previewAreaOverlay .text{
	color: #fff;
}

/******* Procontrols **************/
#proControlsWrap {
	background: var(--procontrolsBackground);
	box-shadow: var(--procontrolsBoxShadow) 0 5px 5px rgba(0,0,0,0.5);
	}

#procontrolsList h2{
	background: var(--procontrolsH2Background);
	font-size:var(--procontrolsH2FontSize);
	color: var(--procontrolsH2Color);
	font-weight:var(--procontrolsH2FontWeight);
	}

#procontrolsList h3{
	font-size:var(--procontrolsH3FontSize);
	color: var(--procontrolsH3Color);
	font-weight:var(--procontrolsH3FontWeight);
	text-transform: uppercase;
	letter-spacing: 2px;
	}
	
#procontrolsList h5{	
	height: var(--procontrolsH5Height);
	background: var(--procontrolsH5Background);
	color: var(--procontrolsH5Color);
	padding: 2% 2% 4% 2%;
	font-size:  var(--procontrolsH5FontSize);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30%;
	margin-right: 2%;
	border-radius: var(--interfaceBuilderBtnBorderRadius);
	box-shadow: var(--proControlsBtnBoxShadow);
	font-weight: var(--procontrolsH5FontWeight);
	box-sizing: border-box;
	position: relative;
	flex-direction: column;
	}
#procontrolsList h5.open{
	background: var(--procontrolsH5BackgroundSelected);
}
	
#proControls h5.hidable-control svg {
	width: 60px;
	height: 60px;
	border: 0;
	position: relative;
	right: auto;
	padding: 0;
	top: 0;
	margin-right: 0;
	border-radius: 0;
	}

#proControls h5.hidable-control svg path, #proControls h5.hidable-control svg circle {
	fill: var(--procontrolsH5Color);
	}
	
#procontrolsList p{
	font-size:var(--procontrolsPFontSize);
	color: var(--procontrolsPColor);
	font-weight:var(--procontrolsPFontWeight);
	
	}

#proControls h4,  #proControls fieldset label{
	margin-top: 20px;
	font-weight: var(--procontrolsH4FontWeight);
	color: var(--procontrolsH4Color);
	font-size: var(--procontrolsH4FontSize);
	}
#proControls h4+fieldset label{
	font-size: 13px;
	margin-top: -20px;
}

#proControls fieldset label{	
	margin-bottom: 20px;
	}
	
#procontrolsList p:empty{
	margin: 0;
	}

#proControls ul li{
	border-bottom: var(--procontrolsBottomBorder);
	}
	
#proControls ul li .fieldset {
	display: flex;
	flex-wrap: wrap;
	border: 0;
    padding: 10px 0 10px 10px;
	}
#proControls ul li .fieldset fieldset{
	padding-left: 0;
}

#proControls .scalableImageSelector h4{
	margin-top: 0;
}
#proControls .scalableImageSelector .hidable{
	order: 10;
	}
	
#proControls input[type="text"] {
	border-radius: 4px;
	border: 1px solid #ddd;
	font-size: 16px;
	height: auto;
	padding: 15px;
	text-transform: uppercase;
	font-weight: bold;
	background: #fafafa;
	margin-top: 0;
	}

#proControls .psdDownloadBtn{
	background: var(--primaryColor);
	top: 30px;
	}
	
#proControls .dndCnt svg{
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	margin-top: 40px;
	}
	
#proControls .dndCnt svg path{
	fill: var(--procontrolsH2SvgIconFillColor);
	}
	
#proControls .dndCnt .dndCnt__input{
	color: var(--primaryColor);
	}
	
#proControls .dndCnt.has-advanced-upload {
	outline-color: var(--procontrolsH2SvgIconFillColor);
	flex-direction: column;
	}	
#proControls select{	
	width: calc(100% - 20px);
	font-size: 18px;
	cursor: auto;
	margin: 0;
	padding: 15px 10px;
	}
	

	
#proControls .previewImageHolder .previewImage{
	border-radius: 8px;
	overflow: hidden;
	}

#previewArea .svgIcon path{
	fill: var(--previewCanvasSvgIconFillColor);
	border: 1px solid var(--previewAreaSvgIconBorderColor);
	}

#proControls .hidable-control h3~svg{
	border: 1px solid var(--procontrolsH3SvgIconBorderColor);
	fill: var(--procontrolsH3SvgIconFillColor);
	}

#proControls .hidable-control h2~svg{
	border: 1px solid var(--procontrolsH2SvgIconBorderColor);
	fill: var(--procontrolsH2SvgIconFillColor);
	}