:root {
	--c_1 : #f0f0ea;
	--c_2 : #dadad5;
	--c_3 : #646260;
	--c_4 : #77808b;
	--c_5 : #85b4f9;
	--c_6 : #010101;
	--c_7 : #a2a9b0;
	--c_8 : #5996f7;
	--c_9 : #30b39f;
	--c_9a: rgba(48,179,159,0.8);
	--r_1 : 15px;
	--r_2 : 10px;
}
* {
	box-sizing:border-box;
}
html{
	background:var(--c_1);
}
body {
	background:transparent url(bg.vive.png) no-repeat right bottom contain;
}
html,body {
	min-height:100vh;
	font-family:Arial;
}
html,body,h1,h2,p {
	margin:0;
	padding:0;
}
nav {
	padding:80px 50px 0;
}
nav img {
	max-width:350px;
	width:100%;
}
main {
	width:calc( 100% - 50px);
	margin:0 auto;
	max-width:640px;
}
main header {
	padding-top:50px;
	padding-bottom:35px;
}
main header h1 {
	padding-bottom:15px;
	font-weight:normal;
	font-style:italic;
	font-size:32px;
	line-height:36px;
	/*tmp */
	font-weight:600;
	font-family:"Times New Roman";
}

@media all and (min-width:820px) {
	main header h1 {
		font-size:40px;
		line-height:40px;
	}
}
main header p,
footer p {
	color:var(--c_6);
	font-size:20px;
	line-height:28px;
}
@media all and (min-width:820px) {
	main header p,
	footer p {
		font-size:20px;
		line-height:26px;
	}
}
footer p {
	color:var(--c_3);
	text-align:center;
	padding:50px 50px 20px;
}
.join-group {
	background:var(--c_2);
	-webkit-border-radius:var(--r_1);
	border-radius:var(--r_1);
	padding:40px 30px 25px;
}
@media all and (min-width:820px) {
	.join-group {
		padding:30px 70px 30px;
	}
}
.join-group h2 {
	padding-bottom:30px;
	text-align:center;
	font-size:36px;
}
@media all and (min-width:820px) {
	.join-group h2 {
		font-size:30px;
	}
}
.field {
	padding-bottom:20px;
}
@media all and (min-width:820px) {
	.field {
		padding-bottom:25px;
	}
}
.field .label,
.field .group-label {
	display:block;
	color:var(--c_4);
	font-size:22px;
	padding-bottom:10px;
}
.field .group-label {
	padding-bottom:40px;
}

@media all and (min-width:820px) {
	.field .group-label {
		width: 75%;
		font-size: 24px;
	}
}
@media all and (min-width:820px) {
	.field .label,
	.field .group-label {
		font-size:20px;
		padding-bottom:10px;
	}
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
	display:block;
	background:white;
	-webkit-border-radius:var(--r_2);
	border-radius:var(--r_2);
	outline: none;
	width: 100%;
	border: 0;
	height:50px;
	padding: 0 20px;
	font-family:Arial;
	color:var(--c_3);
	font-size:22px;
}
@media all and (min-width:820px) {
	.field input[type="text"],
	.field input[type="email"],
	.field textarea {
		font-size: 18px;
		height: 50px;
	}
}
.field textarea {
	min-height:120px;
	padding:20px;
	line-height:28px;
}
@media all and (min-width:820px) {
	.field textarea {
		line-height:26px;
	}
}
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
	color:var(--c_7);
	-webkit-opacity:1;
	opacity:1;
}
input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
textarea::-moz-placeholder{
	color:var(--c_7);
	-webkit-opacity:1;
	opacity:1;
}
input[type="text"]:-ms-placeholder,
input[type="email"]:-ms-placeholder,
textarea:-ms-placeholder{
	color:var(--c_7);
	-webkit-opacity:1;
	opacity:1;
}

.field input[type="text"]:active,
.field input[type="text"]:focus,
.field input[type="email"]:active,
.field input[type="email"]:focus,
.field textarea:active,
.field textarea:focus {
	outline-width:2px;
}

.field.error input[type="text"],
.field input[type="text"]:invalid,
.field.error input[type="email"],
.field input[type="email"]:invalid,
.field.error textarea,
.field textarea:invalid {
	outline-color:#ffaaaa;
	outline-width:2px;
}
.field-btn {
	display:flex;
	flex-direction:column;
	padding-top:25px;
}
@media all and (min-width:820px) {
	.field-btn {
		flex-direction:row;
	}
}
.field-btn .field {
	padding-bottom:0;
}
@media all and (min-width:820px) {
	.field-btn .field {
		width:75%;
	}
}
.radio-group {
	display:flex;
	flex-wrap: wrap;
	flex-direction: column;
}
@media all and (min-width:820px) {
	.radio-group {
		flex-direction: row;
	}
}
.radio-group label {
	position:relative;
	overflow:hidden;
	width:100%;
	cursor:pointer;
}
@media all and (min-width:820px) {
	.radio-group label {
		width:50%;
	}
}
.radio-group input {
	position:absolute;
	left:-5000%;
	top:0;
}
.radio-group .label {
	padding-left:24px;
	position:relative;
	font-size:18px;
	color:white;
	padding-bottom:8px;
}
.radio-group .label::before {
	display:inline-block;
	content:"";
	height:13px;
	width:13px;
	border-radius:6.5px;
	box-shadow:0 0 0 2px var(--c_9) inset;
	position:absolute;
	left:0;
	top:4px;
}
.radio-group input:checked ~ .label::after {
	display:inline-block;
	content:"";
	height:9.5px;
	width:9.5px;
	border-radius:9.5px;
	background:var(--c_9);
	position:absolute;
	left:2px;
	top:6px;
}
.button-container {
	width:100%;
	padding-top:25px;
}
@media all and (min-width:820px) {
	.button-container {
		width:32%;
		padding-top:118px;
	}
}
.btn-primary {
	background:var(--c_9);
	color:white;
	height:45px;
	text-align:center;
	border:0;
	padding:0;
	line-height:34px;
	font-size:18px;
	display:block;
	-webkit-border-radius:var(--r_2);
	border-radius:var(--r_2);
	width:100px;
	cursor:pointer;
	margin:0 auto;
}
@media all and (min-width:820px) {
	.btn-primary {
		float:right;
		margin:0;
	}
}
.no-radios .button-container {
	width:100%;
	padding-top:20px;
}
.no-radios .btn-primary {
	float:none;
	margin:0 auto;
}
.btn-primary:hover {
	background:var(--c_9a);
}
.spinny {
	background:url(icon.vive.png);
	background-size:32px 32px;
	background-repeat:no-repeat;
	background-position:center center;
	height:32px;
	width:32px;
	display:none;
	margin:0 auto;
	animation: rotate 2.5s infinite linear;
}
.icon {
	background:url(icon.tick.png);
	background-size:32px 32px;
	background-repeat:no-repeat;
	background-position:center center;
	height:90px;
	width:32px;
	display:none;
	margin:0 auto;
	font-size:30px;
}
.submitting .spinny {
	display:block;
}
.submitting .btn-text {
	display:none;
}
.tick .spinny {
	display:none;
}
.tick .btn-text {
	display:none;
}
.tick .icon {
	display:inline-block;
	line-height:90px;
}
#validation-message:empty {
	display:none;
}
#validation-message:not(:empty) {
	font-size: 24px;
	padding: 50px 0;
	text-align: left;
	line-height: 30px;
	color: var(--c_9);
}
.sub-footer {
	text-align:center;
	display:flex;
	padding-bottom:100px;
	gap:20px;
	margin:0 auto;
	justify-content:space-between;
	max-width:420px;
}
.sub-footer a {
	color:var(--c_3);
	font-size:12px;
	text-decoration:none;
}
.sub-footer a:hover {
	text-decoration:underline;
}

.long-content h2 {
	font-size:32px;
	line-height:32px;
	padding-bottom:15px;
	margin:0;
}
.long-content h3 {
	font-size:30px;
	line-height:30px;
	padding-bottom:15px;
	margin:0;
}
.long-content h4 {
	font-size:28px;
	line-height:28px;
	padding-bottom:15px;
	margin:0;
}
.long-content h5 {
	font-size:26px;
	line-height:26px;
	padding-bottom:15px;
	margin:0;
}
.long-content p {
	font-size:16px;
	line-height:1.5em;
	padding-bottom:15px;
	margin:0;
}
.long-content li {
	padding-bottom:10px;
	line-height:1.5em;
	font-size:16px;
}
.long-content address {
	line-height:1.5em;
	font-size:16px;
	padding-bottom:10px;
	font-style:normal;
}
.long-content .sigs {
	display:flex;
	gap:20px;
	padding-bottom:20px;
	font-size:16px;
	line-height:20px;
}
.long-content .sig {
	width:50%;
}
@keyframes rotate {
	0% {
		transform: rotate( 0deg ) scale( 1 );
	}
	100% {
		transform: rotate( 360deg ) scale( 1 );
	}
}