*:focus {
    outline: none;
}
body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	color:#231f20;
}
#yourBtn {
  position: relative;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
  margin:auto auto;
}
h1 {
	color: #231f20;
    font-size: 26px;
    margin-top: 25px;
}
.note {
	color:#666666;
	margin:0;
	margin-bottom:4px;
}
.uploadleft {
	float:left;
	width:30%;
}
.uploadright {
	float:left;
	width:70%;
	padding:5px;
	/*padding:7%;*/
	margin-top:25px;
	background-color:#f5f5f5;
	margin-top:0px;
}
.nastavtevelkost {
	font-size:18px;
}
#produktsirkalatky select {
	border:solid 1px #c6c5c5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width:100px;
	padding-top:7px;
	padding-bottom:7px;
	padding-left:20px;
	margin-left:18px;
}
.bezdph {
	font-weight:normal;
	font-size:12px;
}
.vyber {
	border:solid 1px #c6c5c5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding-top:7px;
	padding-bottom:7px;
	padding-left:20px;
	max-width:440px;
	width:100%;
}
#produktsirkalatky {
	float:left;

}
#produktsirkalatky2 {
	float:left;
}
#potvrditrozmery {
	background-color:#d6d6d6;
	color:#333333;
	border:0;
	padding:7px;
	font-size:12px;
	float:left;
	width:23%;
	margin-top:28px;
	cursor:pointer;
}
#potvrditrozmery:hover {
	background-color:#c0bebe;
}
#produktsirkalatky2 span {
	color:#959595;
	font-size:13px;
}
#produktsirkalatky2 input, #produktsirkalatky input {
	border:solid 1px #c6c5c5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width:100px;
	padding-top:7px;
	padding-bottom:7px;
	text-align:right;
	padding-right:10px;
	margin-bottom:8px;
	margin-top:10px;
}
.nastavtevelkost {
	font-size:18px;
}
#zistiteviacolatkach {
	font-size:13px;
	padding-bottom:17px;
}
#zistiteviacolatkach a {
	color:#231f20;
	text-decoration:underline;
}
#zistiteviacolatkach a:hover {
	color:#000;
	text-decoration:none;
}
#pocetkusov {
	width:230px;
	padding-top:5px;
	clear:both;
}
#pocetkusov2 {
	float:left;
	position:relative;
	top:3px;
}
.sp-quantity {
    width:100%;
    height:37px;
    font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
    width:27px;
    height:27px;
    border:1px solid #e1e1e1;
    float:right;
    text-align:center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
}
.sp-input {
    width:43px;
    height:30px;
    float:right;
	text-align:center;
	margin-left:12px;
	margin-right:12px;
}
.sp-plus {
    width:27px;
    height:27px;
    border:1px solid #e1e1e1;
    border-left:0px solid #e1e1e1;
    float:right;
	margin-top:1px;
    text-align:center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.sp-input input {
    width:43px;
    height:30px;
    text-align:center;
    font-family:"ProximaNova Bold", Helvetica, Arial;
    border: none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border:1px solid #e1e1e1;
}
.sp-input input:focus {
    border:1px solid #e1e1e1;
    border: none;
}
.sp-minus a, .sp-plus a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}
.ddd {
	color:#333333;
	display:block;
	height:27px;
	line-height:25px;
	cursor:pointer;
}
.checkboxtext {
	float:left;
	width:10%;
	background-color:#999933l
}
.checkboxtext2 {
	float:left;
	width:90%;
	background-color:#F7F7F7;
	font-size:12px;
	padding:5px;
}
#produktcena {
	margin-top:10px;
	margin-bottom:20px;
}
.produktcena2 {
	font-weight:bold;
	color:#231f20;
	font-size:25px;
	padding-top:7px;
	padding-bottom:20px;
	margin-top:15px;
}
.produktcena2 sup {
	font-size:15px;
}
#produktcena1 {
	float:left;
	width:50%;
	position:relative;
	top:-15px;
}
#produktcena1 p {
	margin-bottom:0;
	padding:0;
}
#produktcena2 {
	float:left;
	width:50%;
}
#button {
	background-color:#CC0000;
	border:1px solid #c6c5c5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:10px;
	background-color:#fff;
	color:#231f20;
	font-size:16px;
	font-weight:bold;
	margin-top:35px;
}
#button:hover {
	background-color:#f2f2f2;
	cursor:pointer;
	transition: 0.5s;
}



























#button {
font-weight:bold;
cursor:pointer;
}
.demoInputBox {
	position:relative;
	top:30px;
}
#button:hover {
	text-decoration:underline;
}
#val{
	max-width:100%;
	display:block;
	overflow:hidden;
	position:relative;
	margin-bottom:15px;
}
#uploadform img {
	max-height:90px;
	max-width:50%;
}
#uploadForm {padding:10px;}
#uploadForm label {margin:2px; font-size:1em; font-weight:bold;}
.demoInputBox{padding:5px; border:#F0F0F0 1px solid; border-radius:4px; background-color:#FFF;}
#progress-bar {background-color: #12CC1A;height:20px;color: #FFFFFF;width:0%;-webkit-transition: width .3s;-moz-transition: width .3s;transition: width .3s;}
.btnSubmit{background-color:#09f;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;margin-top:25px;}
.btnSubmit:hover { background-color:#077dcc; }
#progress-div {/*border:#0FA015 1px solid;padding:*/ 5px 0px;margin:30px 0px;border-radius:4px;text-align:center;}
#targetLayer{width:100%;text-align:center; display:none;}
input[type='file'] {
  opacity:0    
}













@media screen and (max-width: 900px)
{
#potvrditrozmery {
	font-size:9px;
}
.uploadleft {
	float:none;
	width:100%;
	text-align:center;
	background-color:#f5f5f5;
}
#uploadform {
	margin:auto auto;
	padding:0;
}
.uploadright {
	float:none;
	width:100%;
	padding-top:2px;
	margin-top:0px;
	background-color:#f5f5f5;
	padding-bottom:2px;
	margin-top:0px;
	text-align:center;
}

}




.container {        
    /*display: flex;
    align-items: center;
	height:100vh;*/
}
#uploadform {
	background-color:#f5f5f5;
	padding-top:40px;
	padding-bottom:40px;
	width:260px;
	/*margin:auto auto;*/
	text-align:center;
}
#novyvzor {
	text-align:right;
	margin-right:15px;
}
#novyvzor a {
	text-decoration:none;
	border:solid 1px #c6c5c5;
	color:#231f20;
	height:30px;
	line-height:30px;
	font-weight:bold;
	display:inline-block;
	text-decoration:none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding-left:12px;
	padding-right:12px;
}
#novyvzor a:hover {
	background-color:#F0F0F0;
	transition:0.3s;	
}







#horizontal {

}

#horizontal .ruler {
 position: relative;
 width: 100%;
 margin:0;
 height: 14px;
 margin-top:10px;

}
#horizontal .ruler .cm,
#horizontal .ruler .mm {
 position: absolute;
 border-left: 1px solid #555;
 height: 10px;
 width: 10%;
 bottom:0;
}
#horizontal .ruler .cm:after {
 position: absolute;
 bottom: 13px;
 left:-3px;
 font: 11px/1 sans-serif;
}
#horizontal .ruler .mm {
 height: 5px;
}
#horizontal .ruler .mm:nth-of-type(5) {
 height: 7px;
}









#horizontal .ruler .cm:nth-of-type(11) {
 left: 100%;
}






#horizontal .ruler .mm:nth-of-type(1) {
 left: 10%;
}
#horizontal .ruler .mm:nth-of-type(2) {
 left: 20%;
}
#horizontal .ruler .mm:nth-of-type(3) {
 left: 30%;
}
#horizontal .ruler .mm:nth-of-type(4) {
 left: 40%;
}
#horizontal .ruler .mm:nth-of-type(5) {
 left: 50%;
}
#horizontal .ruler .mm:nth-of-type(6) {
 left: 60%;
}
#horizontal .ruler .mm:nth-of-type(7) {
 left: 70%;
}
#horizontal .ruler .mm:nth-of-type(8) {
 left: 80%;
}
#horizontal .ruler .mm:nth-of-type(9) {
 left: 90%;
}
#horizontal .ruler .mm:nth-of-type(10) {
 left: 100%;
}









/*
#vertical {
    position: fixed;
    left: 70px;
    top: 25px;
}


#vertical .ruler .cm:after {
 position: absolute;
 bottom: -20px;
 left:-3px;
 font: 11px/1 sans-serif;
}






#vertical .ruler {
 -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0 0;
    background: green;
	width:600px;
	position:relative;
	right:0;
}
*/


#vertical {
	position:relative;
	left:-507px;
	top:459px;
	background-color:#CCCC99;
	display:none;
}



#vertical .ruler {
 position: relative;
 width: 100%;
 margin:0;
 height: 14px;
 margin-top:35px;
 background-color:#FF66FF;
 
 
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
 
}
#vertical .ruler .cm,
#vertical .ruler .mm {
 position: absolute;
 border-left: 1px solid #555;
 height: 14px;
 width: 10%;
 top:0;
}
#vertical .ruler .cm:after {
 position: absolute;
 bottom: -20px;
 left:-3px;
 font: 11px/1 sans-serif;
}
#vertical .ruler .mm {
 height: 5px;
}
#vertical .ruler .mm:nth-of-type(5) {
 height: 10px;
}
#vertical .ruler .cm:nth-of-type(1) {
 left: 0%;
}
#vertical .ruler .cm:nth-of-type(1):after {
 content: "0";
}
#vertical .ruler .cm:nth-of-type(2) {
 left: 10%;
}
#vertical .ruler .cm:nth-of-type(2):after {
 content: "2";
}
#vertical .ruler .cm:nth-of-type(3) {
 left: 20%;
}
#vertical .ruler .cm:nth-of-type(3):after {
 content: "4";
}
#vertical .ruler .cm:nth-of-type(4) {
 left: 30%;
}
#vertical .ruler .cm:nth-of-type(4):after {
 content: "6";
}
#vertical .ruler .cm:nth-of-type(5) {
 left: 40%;
}
#vertical .ruler .cm:nth-of-type(5):after {
 content: "8";
}
#vertical .ruler .cm:nth-of-type(6) {
 left: 50%;
}
#vertical .ruler .cm:nth-of-type(6):after {
 content: "10";
}
#vertical .ruler .cm:nth-of-type(7) {
 left: 60%;
}
#vertical .ruler .cm:nth-of-type(7):after {
 content: "12";
}
#vertical .ruler .cm:nth-of-type(8) {
 left: 70%;
}
#vertical .ruler .cm:nth-of-type(8):after {
 content: "14";
}
#vertical .ruler .cm:nth-of-type(9) {
 left: 80%;
}
#vertical .ruler .cm:nth-of-type(9):after {
 content: "8";
}
#vertical .ruler .cm:nth-of-type(10) {
 left: 90%;
}
#vertical .ruler .cm:nth-of-type(10):after {
 content: "9";
}
#vertical .ruler .cm:nth-of-type(11) {
 left: 100%;
}
#vertical .ruler .cm:nth-of-type(11):after {
 content: "10";
}
#vertical .ruler .mm:nth-of-type(1) {
 left: 10%;
}
#vertical .ruler .mm:nth-of-type(2) {
 left: 20%;
}
#vertical .ruler .mm:nth-of-type(3) {
 left: 30%;
}
#vertical .ruler .mm:nth-of-type(4) {
 left: 40%;
}
#vertical .ruler .mm:nth-of-type(5) {
 left: 50%;
}
#vertical .ruler .mm:nth-of-type(6) {
 left: 60%;
}
#vertical .ruler .mm:nth-of-type(7) {
 left: 70%;
}
#vertical .ruler .mm:nth-of-type(8) {
 left: 80%;
}
#vertical .ruler .mm:nth-of-type(9) {
 left: 90%;
}
#vertical .ruler .mm:nth-of-type(10) {
 left: 100%;
}































.konfiguratorobal {
	margin-left:5px;
	position:relative;
}
#pravitko {
	width: 58%;
	float:left;
	margin-right:2%;
}
#pravitkonahrada {
    width: 58%;
    float: left;
    margin-right: 2%;
    margin-top: 15px;

}
.konfigurator {
    height: 525px;
	position:relative;
	border:solid 1px #CCCCCC;
	
}
#rule {
	float:left;
	width:10%;
}
.ovladanie {
	float:left;
	width:40%;
}
.opakovanie {
	text-align:center;
	float:left;
	width:20%;
	font-size:13px;
}
#opakovanieaktivna img {
	border:solid 3px #000;
}
.opakovanie img {
	margin-bottom:7px;
	width:90%;
	border:solid 1px #CCCCCC;
}
.opakovanie:hover img {
	border:solid 1px #000000;
	cursor:pointer;
}
#velkost {
	text-align:center;
	margin-top:35px;
}
#velkost div {
	border:solid 1px #c6c5c5;
	color:#231f20;
	height:30px;
	line-height:30px;
	font-weight:bold;
	width:90px;
	display:block;
	display:inline-block;
	text-decoration:none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	margin-left:20px;
	margin-right:20px;
	
	
}
#velkost div:hover {
	background-color:#c6c5c5;
	transition:0.3s;
	cursor:pointer;
}



.reset {
	clear:both;
}







@media screen and (max-width:900px) 
{


#novyvzor {
	margin:0;
	margin-top:25px;
}
.konfiguratorobal {
	width: 95%;
	margin:auto auto;
	float:none;
}
.konfigurator {
    height: 525px;
	position:relative;
	border:solid 1px #CCCCCC;
}
#pravitko {
	width: 100%;
	float:left;
	margin-right:0%;
}
#pravitkonahrada {
	width: 100%;
	float:none;
    margin-right: 0%;
    margin-top: 15px;

}
.ovladanie {
	width: 98%;
	margin-left:1%;
	margin-right:1%;
	float:none;
	margin-top:100px;
}
.vyber {
	width:100%;
	max-width:none;
	margin:0;
}




}