.configurator-intro{
	width: 75%; margin: 10px auto;
}

#configurator{
	widht: 100%;
	max-width: 400px;
	position: relative;
	margin: 0 auto;
}

#configurator:before{
	display: block;
    content: "";
    width: 100%;
    padding-top: 137.797619048%;
}

#configurator #background{
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background: url(../images/configBackground_01.png) no-repeat;
	background-size: 100% 100%;
	z-index: 100;
}

#configurator #scanner{
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background: url(../images/configBackground_01.png) no-repeat;
	background-size: 100% 100%;
	z-index: 101;
}

#configurator #scanner.xl{ background-image: url(../images/configScannerXL_01.png); }
#configurator #scanner.l{ background-image: url(../images/configScannerL_01.png); }
#configurator #scanner.m{ background-image: url(../images/configScannerM_01.png); }
#configurator #scanner.s{ background-image: url(../images/configScannerS_01.png); }
#configurator #scanner.xs{ background-image: url(../images/configScannerXS_01.png); }

#configurator #scannerLabel{
	left: 8%;
    top: 7%;
    width: 80%;
	position: absolute;
	height: 20px;
	z-index: 102;
	font-size: 16px;
	color: #20a4c6;
	text-align: center;
	-webkit-transform: rotate(-10deg) skewX(-10deg);
	-ms-transform: rotate(-10deg) skewX(-10deg);
	transform: rotate(-10deg) skewX(-10deg);
}

#configurator #scannerLabel:hover{
	text-decoration: underline;
}
#configurator #scannerLabel:active{
	text-decoration: underline;
	border: none;
}
#configurator #scannerLabel:focus{
	text-decoration: underline;
	border: none;
	outline: none;
}

.labelContainer{
	height: 24px;
    position: absolute;
    text-align: right;
    width: 20%;
    z-index: 105;
}

#labelWidthContainer{
	left: 30%;
    top: 88.5%;
}
#labelHeightContainer{
	left: 0;
    top: 70%;
}
#labelDepthContainer{
	left: 78%;
    top: 85.5%;
}

#configurator input[type="text"], #configurator input[type="number"]{
	border: 1px solid #eee;
    color: #000;
    font-size: 16px;
    height: 24px;
    padding: 3px 0px;
    position: absolute;
    right: 24px;
    width: 54px;
}

#configurator input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
    padding-left: 5px;
}

#configurator #labelDistance{
	position: absolute;
	border: medium none;
    left: 35%;
    top: 38%;
    width: 14%;
	height: 20px;
	color: #20a4c6;
}

#configurator input[type="text"]:after, #configurator input[type="number"]:after{
	content: "mm";
}

#configurator #labelHeight{
    text-align: right;
}
#configurator #labelWidth{
    text-align: right;
    /*-webkit-transform: rotate(22deg) skewX(-36deg);
    -ms-transform: rotate(22deg) skewX(-36deg);
    transform: rotate(22deg) skewX(-36deg);*/
}
#configurator #labelDepth{
    text-align: right;
    /*-webkit-transform: rotate(-43deg) skewX(25deg);
    -ms-transform: rotate(-43deg) skewX(25deg);
    transform: rotate(-43deg) skewX(25deg);*/
}

@media screen and (min-width: 701px) and (max-width: 955px) {
	#configurator input[type="text"], #configurator input[type="number"]{
		font-size: 14px;
	}

	#configurator #scannerLabel{
		top: 5.5%;
	}
}

@media screen and (max-width: 500px) {
	.configurator-intro{
		width: 90%;
	}

	#configurator input[type="text"], #configurator input[type="number"]{
		font-size: 13px;
	}

	#configurator #scannerLabel{
	    left: 9%;
	    top: 4.5%;
	    width: 80%;
	}

	// #configurator #labelWidth{
	// 	left: 26%;
	//     top: 87.5%;
	//     width: 25%;
	// }

	// #configurator #labelHeight{
	// 	left: 0;
	//     top: 70%;
	//     width: 20%;
	// }

	// #configurator #labelDepth{
	// 	left: 69%;
	//     top: 85.5%;
	//     width: 25%;
	// }
}

//prepojenie s kontakt formom
.configurator-container #field_1-3{
	display: none;
}

.cpp_form .hidden{
	display: none;
}

@-webkit-keyframes bluepulse {
  from { -webkit-box-shadow: 0 0 3px #0d96cf; }
  50% { -webkit-box-shadow: 0 0 10px #0fb7ff; }
  to { -webkit-box-shadow: 0 0 3px #0d96cf; }
}
@-moz-keyframes bluepulse {
  from { box-shadow: 0 0 3px #0d96cf; }
  50% { box-shadow: 0 0 10px #0fb7ff; }
  to { box-shadow: 0 0 3px #0d96cf; }
}
@-o-keyframes bluepulse {
  from { -o-box-shadow: 0 0 3px #0d96cf; }
  50% { -o-box-shadow: 0 0 10px #0fb7ff; }
  to { -o-box-shadow: 0 0 3px #0d96cf; }
}

.blueGlow, #configurator input[type='text'], #configurator input[type='number']{
	-webkit-animation: bluepulse 1s infinite ease;
	-moz-animation: bluepulse 1s infinite ease;
	-o-animation: bluepulse 1s infinite ease;
}