/*
	Fractal by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Form */

	input[type="submit"] {
		font-family: "Font Awesome 5 Free", Arial, Helvetica, sans-serif;
		content: "\f234";
		font-weight: 600;
	}

	#error-success-info-checkbox {
		display: none;
	}

	#error-success-info-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		min-height: 60px;
		background-color: #fc0;
		color: #828282;
		font-weight: bold;
		text-align: center;
		padding: 12px 24px;
		display: block;
		opacity: 0;
		z-index: -2;
		transition: all ease .3s;
	}

	#error-success-info-box-close {
		position: fixed;
		right: 20px;
		top: 20px;
		width: 40px;
		height: 40px;
		z-index: 0;
	}

	#error-success-info-box-close i {
		display: block;
		font-family: "Font Awesome 5 Free", Arial, Helvetica, sans-serif;
		font-style: normal;
		font-size: 40px;
		z-index: -1;
		transition: all ease .3s;
		transform: rotate(0deg);
	}

	#error-success-info-box-close i {
		color: #828282;
	}

	#error-success-info-box-close:hover i,
	#error-success-info-box-close i:hover {
		color: #d00;
		transform: rotate(450deg) scale(1.1);
	}

	#error-success-info-checkbox:checked ~ #error-success-info-box,
	#error-success-info-checkbox:checked ~ #error-success-info-box-close i {
		z-index: 99998;
		opacity: 1;
	}

	#waiting_for_a_call {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;/**/
	}

	#waiting_for_a_call.waiting-for-a-call {
		display: flex;
		opacity: 1;
		transition: opacity .3s;
	}

	#countdown {
		display: inline-block;
		margin: 10px;
		height: 160px;
		width: 160px;
	}
	
	svg circle#c2 {
		stroke-dasharray: 113px;
		stroke-dashoffset: 0px;
		stroke: #198051;
		animation: countdown 120s linear forwards;
	}
	
	svg circle#c3 {
		stroke: #198051;
		opacity: .3;
	}
	
	circle#c1 {
		stroke: #lime;
		fill: white;
		animation: rotate 120s linear forwards;
	}
	
	#countdown.paused circle#c1,
	#countdown.paused circle#c2,
	#countdown.paused text {
		animation-play-state: paused;
	}

	svg text {
		content: '20';
		font-family: sans-serif;
		fill: #ff5051;
		font-weight: bold;
		dominant-baseline: middle;
		text-anchor: middle;
		font-size: 12px;
		animation: countdown_text 120s linear;
	}
	
	@keyframes countdown {
		0% {
			stroke: #39ff00;
			stroke-dashoffset: 0px;
		}
		50% {
			stroke: #ffff28;
			stroke-dashoffset: 56px;
		}
		100% {
			stroke: #ff5051;
			stroke-dashoffset: 113px;
		}
	}
	
	@keyframes countdown_text {
		0% {fill: #39ff00;}
		50% {fill: #ffff28;}
		100% {fill: #ff5051;}
	}
	
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(-360deg);
		}
	}
	#ringing-bell {
		display:inline-block;
		position: relative;
		color: #39ff00;
	}
	#ringing-bell.animated {
		-webkit-animation: ring 2s ease infinite;
		animation: ring 2s ease infinite;
		transform-origin-x: 50%;
		transform-origin-y: 0px;
		transform-origin-z: initial;
	}
	@-webkit-keyframes ring {
		0%{-webkit-transform: rotate(-15deg); transform: rotate(-15deg)}
		2%{-webkit-transform: rotate(15deg); transform: rotate(15deg)}
		4%{-webkit-transform: rotate(-18deg); transform: rotate(-18deg)}
		6%{-webkit-transform: rotate(18deg); transform: rotate(18deg)}
		8%{-webkit-transform: rotate(-22deg); transform: rotate(-22deg)}
		10%{-webkit-transform: rotate(22deg); transform: rotate(22deg)}
		12%{-webkit-transform: rotate(-18deg); transform: rotate(-18deg)}
		14%{-webkit-transform: rotate(18deg); transform: rotate(18deg)}
		16%{-webkit-transform: rotate(-12deg); transform: rotate(-12deg)}
		18%{-webkit-transform: rotate(12deg); transform: rotate(12deg)}
		20%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}
	}
	@keyframes ring {
		0%{-webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg)}
		2%{-webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg)}
		4%{-webkit-transform: rotate(-18deg); -ms-transform: rotate(-18deg); transform: rotate(-18deg)}
		6%{-webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg)}
		8%{-webkit-transform: rotate(-22deg); -ms-transform: rotate(-22deg); transform: rotate(-22deg)}
		10%{-webkit-transform: rotate(22deg); -ms-transform: rotate(22deg); transform: rotate(22deg)}
		12%{-webkit-transform: rotate(-18deg); -ms-transform: rotate(-18deg); transform: rotate(-18deg)}
		14%{-webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg)}
		16%{-webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg)}
		18%{-webkit-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg)}
		20%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg)}
	}
	
	input[name="age"]:first-child:checked + label {color:#f00; font-weight:bold;}
	.age_under_14 {display:none;}
	.teenagers_only {display:none !important;}
	div:has(input[name="age"]:first-child:checked) ~ .age_under_14 {display:inline-block;}
	div:has(input[name="age"]:first-child:checked) ~ div:not(.age_under_14) {display:none !important;}
	div:has(input[name="age"]:first-child + label + input:checked) ~ .above_18_only {display:none !important;}
	div:has(input[name="age"]:first-child + label + input:checked) ~ * .above_18_only {display:none !important;}
	div:has(input[name="age"]:first-child + label + input:checked) ~ * .teenagers_only {display:inline-block !important;}

	div:has(input[name="gender"]:first-child:checked) ~ * .female-only {display:none !important;}
	div:has(input[name="gender"]:first-child:checked) ~ .female-only {display:none !important;}
	div:has(input[name="gender"]:first-child + label + input:checked) ~ * .male-only {display:none !important;}
	div:has(input[name="gender"]:first-child + label + input:checked) ~ .male-only {display:none !important;}

	form div *[id^="part_of_id_"],
	form div label[for^="part_of_id_"] {
		display:none;
	}

	form div input[id^="fill_part_id_"]:checked,
	form div input[id^="fill_part_id_"]:checked + label[for^="fill_part_id_"].temporary-question {
		display:none;
	}
/**/

	form div input[id^="fill_part_id_"]:checked + label[for^="fill_part_id_"],
	form div input[id^="fill_part_id_"]:checked + label[for^="fill_part_id_"] + *[id^="part_of_id_"],
	form div input[id^="fill_part_id_"]:checked + *[id^="part_of_id_"] {
		display:inline-block;
	}
	form div.showhide-sub-next:has(input[id^="fill_part_id_"]:checked) + *[id^="part_of_id_"] {
		display:inline-block;
	}