@charset "utf-8";

/* CSS Document */

body{

 font-family: "Museo Sans", Arial, sans-serif;

}


#center{

	margin: 0 auto;

	min-height: 600px;

	height: 900px;

	width: 1000px;

}



#progress{

	height: 60px;

	width: auto;

	border-bottom: none;

}



.step{

	width: 20%;

	height: 54px;

	float: left;

	font-size: 11pt;

	text-align: center;

	line-height: 25px;

	border-bottom: 6px solid #b96060;



}



	.step span{

		color: #888;

		font-size: 16pt;

		position:relative;

		left: 0;

		bottom: 0;

		width: auto;

		display: block;

	}



	.step img{

		height: 18px;

		width: 18px;

		position:relative;

		float: right;

		right: 1px;

		top: 18px;

		opacity: 0.2;

		display: inline-block;

	}





.step_completed{

	width: 20%;

	height: 54px;

	float: left;

	color: #CCC;

	font-size: 11pt;

	text-align: center;

	line-height: 25px;

	border-bottom: 6px solid #EEE;



}



	.step_completed span{

		color: #5d772b;

		font-size: 16pt;

		position:relative;

		left: 0;

		bottom: 0;

		width: auto;

		display: block;

	

	}



	.step_completed img{

		height: 18px;

		width: 18px;

		position:relative;

		float: right;

		right: 1px;

		top: 18px;

		opacity: 0.2;

		display: inline-block;

	}





.step_current{

	width: 20%;

	height: 54px;

	float: left;

	font-size: 11pt;

	text-align: center;

	line-height: 25px;

	border-bottom: 6px solid #9bb960;



}



	.step_current span{

		color: #000;

		font-size: 16pt;

		position:relative;

		left: 0;

		bottom: 0;

		width: auto;

		display: block;

	

	}



	.step_current img{

		height: 18px;

		width: 18px;

		position:relative;

		float: right;

		right: 1px;

		top: 18px;

		opacity: 0.2;

		display: inline-block;

	}













.calc_title{

	margin: 0 auto;

	margin-top: 50px;

	margin-bottom: 20px;

	width: auto;

	height: 40px;

	text-align: center;

	font-weight:normal;

	font-size: 24px;

	

}





.calc_variants{

	float: left;

	position: relative;

	left: 5%;

	margin-right: 1%;

	display: inline-block;

	height: 270px;

	width: 29%;

	border: 1px solid #DDD;

	border-radius: 0 0 6px 6px;

	overflow: hidden;

	opacity: 0.9;

	font-size: 17px;

	word-break:normal;

	text-align: center;

	color: #333;

	background-color: #EEE;

	

}



		.calc_variants img{

			height: 200px;

			width: 100%;

			box-shadow:2px 2px 10px 1px #999;

			margin: 0 0 20px 0;

			

		}



	.calc_variants:hover{

		opacity: 1;

		cursor:pointer;

		color: #111;

	}



	

		.calc_variants:{

		opacity: 1;

		cursor:pointer;

		color: #F00;

	}





#calc_navi{

	display: inline-block;

	position:relative;

	top: 0;

	height: 50px;

	width: 100%;

	background-color: #EEE;

}



.calc_button{

	float: left;

	width: 200px;

	height: 32px;

	background-color: #b0d4f7;

	padding-top: 16px;

	text-align: center;

	cursor: pointer;

	border: 1px solid #DDD;

	color: #111;

}

		.calc_button:hover{

			color: #222;

		}		







input[type=range] {

  height: 32px;

  -webkit-appearance: none;

  margin: 10px 0;

  width: 100%;

}

input[type=range]:focus {

  outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 16px;

  cursor: pointer;

  animate: 0.2s;

  box-shadow: 0px 0px 0px #000000;

  background: #EEE;

  border-radius: 25px;

  border: 1px solid #8A8A8A;

}

input[type=range]::-webkit-slider-thumb {

  box-shadow: 1px 1px 1px #828282;

  border: 1px solid #8A8A8A;

  height: 24px;

  width: 35px;

  border-radius: 6px;

  background: #DADADA;

  cursor: pointer;

  -webkit-appearance: none;

  margin-top: -5px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

  background: #B6B6B6;

}

input[type=range]::-moz-range-track {

  width: 100%;

  height: 16px;

  cursor: pointer;

  animate: 0.2s;

  box-shadow: 0px 0px 0px #000000;

  background: #B6B6B6;

  border-radius: 25px;

  border: 1px solid #8A8A8A;

}

input[type=range]::-moz-range-thumb {

  box-shadow: 1px 1px 1px #828282;

  border: 1px solid #8A8A8A;

  height: 24px;

  width: 35px;

  border-radius: 6px;

  background: #DADADA;

  cursor: pointer;

}

input[type=range]::-ms-track {

  width: 100%;

  height: 16px;

  cursor: pointer;

  animate: 0.2s;

  background: transparent;

  border-color: transparent;

  color: transparent;

}

input[type=range]::-ms-fill-lower {

  background: #B6B6B6;

  border: 1px solid #8A8A8A;

  border-radius: 50px;

  box-shadow: 0px 0px 0px #000000;

}

input[type=range]::-ms-fill-upper {

  background: #B6B6B6;

  border: 1px solid #8A8A8A;

  border-radius: 50px;

  box-shadow: 0px 0px 0px #000000;

}

input[type=range]::-ms-thumb {

  margin-top: 1px;

  box-shadow: 1px 1px 1px #828282;

  border: 1px solid #8A8A8A;

  height: 24px;

  width: 35px;

  border-radius: 6px;

  background: #DADADA;

  cursor: pointer;

}

input[type=range]:focus::-ms-fill-lower {

  background: #B6B6B6;

}

input[type=range]:focus::-ms-fill-upper {

  background: #B6B6B6;

}





.range_value{

	border: 2px solid #EEE;

	padding: 2px;

	font-size: 16pt;

}





.additional_variants{

	height: 26px;

	width: auto;

	padding: 16px 20px;

	border: 1px solid #DDD;

	display: block;

	font-size: 16pt;

}



	.additional_variants input[type="checkbox"]{

		display:none;

	}	



	



	.additional_variants input[type="checkbox"] + label span {

		display:inline-block;

		width:19px;

		height:19px;

		margin:-1px 14px 0 0;

		vertical-align:middle;

		background-color: #EEE;

		cursor:pointer;

	}





	.additional_variants input[type="checkbox"]:checked + label span {

   background-color: #c7e38c;

}





.finish{

	position:relative;

	left: 35%;

}




@media only screen and (max-width: 767px){
	
	#center{

		margin: 0 auto;

		min-height: 600px;

		height: 900px;

		width: 98vw;

    }
	
	.additional_variants label {
		font-size: 14px;
	}
	
	
	.step img, .step_completed img, .step_current img{

		display: none;

	}
	
	.calc_variants {
		width: 98%;
		left: 0px;
		margin-right: 0px;
		font-size: 16px;
		display: flex;
        flex-direction: column;
	}
	
	.calc_title {
		font-size: 16px;
		margin-bottom: 0px!important;
		margin-top: 20px!important;
	}
	
	.calc_button {
		width: 98%;
	}
	
	#step2, #step3, #step4, #step5,
	.step_current,
	.step {
		width: 50%!important;
		height: auto;
		font-size: 12px!important;
	}
	
	#step1 {
		width: 100%!important;
	}
	
	input[type=range] {
		width: 96%;
	}
	
	.range_value {
		width: 93%;
	}
	
	.step {
		height: auto!important;
		font-size: 12px!important;
	}
	
	.calc_variants {
		height: 210px!important;
	}
	
	.calc_variants img {
        height: 160px;
		object-fit: cover;
	}
	
	.additional_variants {
		width: 84%;
		margin-left: auto;
        margin-right: auto;
	}
	
}