/* FORM AMBULATORI VETERINARI */

form.wpcf7-form, form.wpcf7-form input, form.wpcf7-form select {
    text-transform:none !important;
}
#msform {
	position: relative;
	width:768px;
	height:560px; /* altezza iniziale - primo step */
	margin:50px auto;
	transition:height 0.1s ease;
	/*transition-delay:1s;*/
}
#radiostrut { width: 100%; }
#msform .fieldset { position: absolute; width:100%; height:100%; top:0; left:0; }
#msform .fieldset:not(:first-of-type), #veterinario { display: none; }
#msform .field-1 { text-align:center; }
#msform .field-1 { height:560px; }
#msform .field-2 { height:440px; }
#msform .field-3 { height:500px; }
#msform .field-4 { height:440px; }

#msform input[type="radio"], #msform input[type="checkbox"],
#msform .wpcf7-radio label, #msform .wpcf7-checkbox label,
#msform option { cursor:pointer !important; }

#msform .field-1 [type="radio"]:checked,
#msform .field-1 [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
#msform #radiostrut div { display:inline-block; vertical-align:top; margin:0 10px 50px; }
#msform #radiostrut label { margin:0 25px; }

#msform .field-1 [type="radio"]:checked + label,
#msform .field-1 [type="radio"]:not(:checked) + label {
    width:180px;
    height:180px;
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    transition:all 0.3s ease;
    color:#444;
    opacity:1;
    position:relative;
}
#msform .field-1 .radioicon {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	height:100%;
	width:100%;
	display:inline-block;
	background-size:100% 100%;
}
#msform .field-1 .radioicon1 { opacity:1; }
#msform .field-1 .radiolabel {
	position:absolute;
	top:105%;
	left:50%;
	transform:translateX(-50%);
	font-weight:bold;
	width:100%;
}
#msform .field-1 [type="radio"]:not(:checked) + label:hover {
	color:#0971ce;
	opacity:1;
}
#msform .field-1 [type="radio"]:checked + label:hover {
	color:#0971ce;
	opacity:1;
}
#msform .field-1 [type="radio"]:checked + label {
	color:#0971ce;
	opacity:1;
}
#msform .field-1 [type="radio"]:checked + label .radioicon2, #msform .field-1 [type="radio"]:not(:checked) + label .radioicon1 {
	opacity:0;
}


#msform .who .item_id select, #msform .who .item_id option { text-align:center !important; }
#msform .who .field-f { margin-bottom:0; }
#msform .who p { display:inline-block; margin-bottom:0; }
#msform .who h3 { color:#0971ce; text-transform:none; font-size:20px }
.wpcf7 p { margin-bottom:20px; text-transform:none !important; }
.field-l { width:49%; float:left; }
.field-r { width:49%; float:right; }
.field-f { width:100%; margin-bottom:20px; }
.wpcf7 .wpcf7-select,
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-number,
.wpcf7 option {
	background:#f2f2f2;
	padding:15px 50px 15px 15px;
	font-size:16px;
	text-transform:none;
	margin-top:-13px;
	color:#303030;
}
.wpcf7 .wpcf7-email { text-transform:none !important; }
.wpcf7 .selection-box::before { border-top-color:#0971ce; top:-13px }
.wpcf7 input.action-button, .wpcf7 textarea { background-color:#f2f2f2; font-size:18px; font-weight:300; }
.wpcf7 .field-r input.action-button { float:right; }
.wpcf7 textarea { height:120px; border:0 none; margin:-10px 0 0px !important; }
.wpcf7 input.wpcf7-submit { width:200px !important; float:right; margin-top:10px !important; }
.wpcf7 input.action-button:hover { background-color:#0971ce; }
.wpcf7 input.wpcf7-submit, .wpcf7 input.action-button { color:#0971ce !important; }
.wpcf7 input.wpcf7-submit:hover, .wpcf7 input.action-button:hover { color:#fff !important; }
.wpcf7 input[type=radio] { vertical-align:baseline; margin-right:5px; }
.wpcf7 input[type=number]::-webkit-inner-spin-button, 
.wpcf7 input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.wpcf7 input[type=number] { -moz-appearance: textfield; }
.form-arrow { color:#0971ce; display:inline-block; font-weight:bold; padding:0 20px; font-size:20px; }
.form-req { color:red; }
.wpcf7-submit:disabled, .next:disabled { opacity:0.5; cursor:not-allowed !important; }

.wpcf7 .acpt {
	display:inline-block;
	width:100%;
	margin-top:0;
	margin-bottom:0;
}
.wpcf7 .acpt input { width:auto !important; height:auto !important; margin-right:5px; }
.wpcf7 .acpt span { width:auto !important; display:inline-block; }
.wpcf7-form .wpcf7-not-valid { border-width:1px; border-style:solid; }

.wpcf7 .commercial .first, .wpcf7 .acpt .first { margin-left:0; }
.wpcf7 .commercial .wpcf7-list-item-label { margin-left:5px; }

#expand-commercial { cursor:pointer; transition:all 0.3s ease; font-size:13px; }
#expand-commercial:hover { color:#0971ce; }

#commercial-extra { margin-top:-15px; font-size:13px; display:none; }

.wpcf7-form .wpcf7-not-valid { border-width:1px; border-style:solid; }

.wpcf7-form .wpcf7-not-valid-tip { display:inline-block !important; }

.wpcf7-form div.wpcf7-validation-errors, .wpcf7-form div.wpcf7-mail-sent-ok {
	float:none !important;
	width:768px !important;
	text-align:center;
	margin:2em 0 4em -384px !important;
	left:50%;
	top:40px;
}

/*progressbar*/
#progressbar {
	text-align: center;
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
	padding:0 100px;
}
#progressbar li {
	list-style-type: none;
	color: #ddd;
	text-transform: uppercase;
	font-size: 16px;
	font-weight:bold;
	width:25%;
	float: left;
	position: relative;
}
#progressbar li.active { color:#0971ce; }
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width:30px;
	line-height:30px;
	display: block;
	font-size: 16px;
	color: #fff;
	background: #ddd;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: #ddd;
	position: absolute;
	left: -50%;
	top: 14px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #0971ce;
	color: #fff;
}

.who.spec-step1 .wpcf7-select {
	text-align:center !important;
}
.field-2 #button-call { float:right; margin-right:0; margin-top:0 !important; margin-bottom:20px; }
.field-third { width:66%; float:left; }
.field-wide { width:85%; float:left; }
.field-third-last { width:32%; float:right; }
.field-short { width:15%; float:right; }

#button-step1 { float:none; }
#button-step2 { background-color:#59b359; color:#fff !important; }
#button-step2:hover { background-color:#0971ce;  }

#specorari, .how-detail { display:none; }
.spec-detail, .space { margin-bottom: 20px; }

.reg1 { padding-top:80px; padding-bottom:50px; margin-bottom:30px; }


@media screen and (max-width:1024px){
	#progressbar {
		padding: 0;
	}
}

@media screen and (max-width:768px){
	.reg1 { padding-top:30px; padding-bottom:0px; margin-bottom:20px; }
	.reg1 .wpb_single_image, .reg1 .wpb_text_column h2 { text-align:center !important; }

	#msform {
		width:100%;
		height: 560px;
	}
	#msform .field-1 [type="radio"]:checked + label, #msform .field-1 [type="radio"]:not(:checked) + label {
		width: 140px;
		height: 140px;
	}
	#msform #radiostrut label { margin:0 20px; }
	#msform .field-1 .radiolabel { line-height:1.2; }
}

@media screen and (max-height:640px) {
	#msform #radiostrut label { margin:0 10px; }
}

@media screen and (max-width:567px) {
 .field-l, .field-r, .field-third, .field-third-last, .field-wide, .field-short { width:100%; }
 .field-r { margin-left:0; }
 input.wpcf7-submit { margin-top:20px !important; }

 	#msform { height:1000px; }
 	#msform .field-2 { height: 700px; }

 	#msform #radiostrut div {
		display: inline-block;
		vertical-align: top;
		margin: 0 10px 0px;
	}
 	#msform .field-1 [type="radio"]:checked + label, #msform .field-1 [type="radio"]:not(:checked) + label {
		width: 140px;
		height:180px;
	}
	
	#msform .field-1 .radiolabel {
		top:auto;
		bottom:10px;
		width:96vw;
	}

	#progressbar li {
		font-size:10px;
		line-height:1.2;
	}

	#msform { height:auto; }
	#msform .fieldset {
		position:relative;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	#radiostrut { 
		display:inline-block !important;
		text-align:center !important;
	}

	#radiostrut > div {
		display:inline-block;
		margin-bottom:20px;
	}
	#radiostrut label {
		display: inline-block;
		width: 40vw !important;
		position: relative;
		height: 54vw !important;
		margin:0 !important;
	}
	#radiostrut .radiolabel {
		position:relative;
		width:33vw !important;
	}

	.wpcf7 input.wpcf7-submit, .action-button { width:100% !important; }
}