
.indexAdviceServices {background: #f7f7f7; padding: 61px 0 65px 0; margin: 35px 0;}
	.indexAdviceServices > div {max-width: 820px;}
		.indexAdviceServices h2 {font-size: 23px; margin: 0 auto 59px auto; text-align: center;}
		.indexAdviceServices form {text-align: center;}
			.indexAdviceServices .divInput {display: flex; align-items: center; justify-content: center;}
				.indexAdviceServices .divInput input, #IIServices .nameElement {background: #fff; border: 1px solid #e4e4e4; border-radius: 100px;
					font-size: 15px; box-sizing: border-box; width: 243px; padding: 15px 24px 16px 24px; -webkit-appearance: none; transition: .15s ease;
				}
					.indexAdviceServices .divInput input:focus {border: 1px solid #fff; box-shadow: 0px 15px 20px rgba(0, 0, 0, .04);}
				
				.indexAdviceServices .divInput > input {margin: 0 40px 0 0; color: #121212;}
				.indexAdviceServices .divInput input:last-child {margin-right: 0;}

			.indexAdviceServices input[type='submit'] {text-align: center; max-width: 145px; margin: 60px auto 0 auto;
				padding: 16px;
			}
			
		.indexAdviceServices .personalInfo {margin: 44px 0 0 0; font-size: 15px;}
			.indexAdviceServices .personalInfo label {padding: 4px 0 0 33px; text-align: left;}
				.indexAdviceServices .personalInfo label:after {background: #fff; height: 21px; width: 21px;}
				.indexAdviceServices .personalInfo label.ckecked:after {line-height: 18px;}
				
				
#IIServices {color: #8D8D8D; border-radius: 100px; width: 243px; position: relative; box-sizing: border-box;
	font-size: 15px;
}
#IIServices.open {border-radius: 0; border-top-right-radius: 10px; border-top-left-radius: 10px; box-shadow: 0px 20px 45px rgba(0, 0, 0, .09);
	background: #fff;
}
#IIServices.open svg {transform: rotate(180deg);}
#IIServices.open .nameElement {border-color: #fff;}

	#IIServices svg {position: absolute; top: 23.5px; right: 22px; transition: transform .2s linear;}
	#IIServices .nameElement {cursor: pointer; overflow: hidden; text-align: left; text-overflow: ellipsis;
		padding: 15px 40px 16px 24px; white-space: nowrap;
	}
	#IIServices .nameElement.active {color: #121212;}
	
	#IIServicesModal {position: absolute; display: flex; flex-direction: column; background: #fff; width: 100%; left: 0; z-index: 2;
		box-shadow: 0px 20px 45px rgba(0, 0, 0, .09); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: left;
	}
		#IIServices.open #IIServicesModal p {cursor: pointer; display: block; padding: 13px 25px;}
		#IIServices.open #IIServicesModal p.active {color: #333;}
		#IIServicesModal p {display: none;}
		

.indexAdviceServices .divInput input::-webkit-input-placeholder {color: #8D8D8D;}
.indexAdviceServices .divInput input::-moz-placeholder          {color: #8D8D8D;}
.indexAdviceServices .divInput input:-moz-placeholder           {color: #8D8D8D;}
.indexAdviceServices .divInput input:-ms-input-placeholder      {color: #8D8D8D;}


@media all and (max-width: 850px){
	.indexAdviceServices .divInput {flex-wrap: wrap; align-items: flex-start;}
		.indexAdviceServices .divInput > input {width: 40%; margin: 0 5% 30px 0;}
		.indexAdviceServices .divInput > input:nth-child(2n) {margin-right: 0;}
		#IIServices {width: 40%;}
			#IIServices .nameElement {width: 100%;}
}


@media all and (max-width: 500px){
			.indexAdviceServices .divInput > input {width: 60%; margin: 0 0 30px 0;}
			#IIServices {width: 60%;}
			.indexAdviceServices .personalInfo label {width: 60%; text-align: left;}
}

@media all and (max-width: 400px){
	.indexAdviceServices .divInput > input {width: 70%; }
			#IIServices {width: 70%;}
			.indexAdviceServices .personalInfo label {width: 70%; text-align: left;}
}

@media all and (max-width: 350px){
	.indexAdviceServices .divInput > input {width: 80%;}
			#IIServices {width: 80%;}
			.indexAdviceServices .personalInfo label {width: 80%; text-align: left;}
}