@charset "utf-8";
/* CSS Document */
html, body { -webkit-text-size-adjust: 100%;text-size-adjust: 100%; font-size:16px;}
body { font-family: "Roboto", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";  text-align: center; font-weight: 300; margin:2em; color: #333; background: #F8FAFC;}


.wrap { margin: 2.5rem;}

a { cursor: pointer;}

strong { font-weight: 600;}

.flex { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.flex form { width: 90%; width: calc(100% - 4rem); margin: auto;  max-width: 26rem; box-sizing: border-box; padding: 1px; background: #FFF; border-radius: 0.7rem; box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.03); text-align: center;}
.flex form p img { max-width:100%; max-height: 1.7rem; width: auto; height: auto;}
.flex form .buttons a { display: block;}
#loader { background: #FFF no-repeat center center url(../images/loader.gif); background-color: rgba(255,255,255,0.6); opacity: 0;  position: fixed; top: 0; left: 0; width: 100%; height:100%; z-index: 600;}
.flex form h1 { font-size: 120%; color: #00F; margin: 1.5rem;}


.content p + p.buttons { margin-top:2em;}
h2  + p.buttons { margin-top:2em;}
.buttons a { display: inline-block; text-decoration: none; transition: background-color 0.2s , color 0.2s; text-align: center; min-width: 3em; font-weight: 600; color: #FFF; background: #00F no-repeat right center; padding:0.9em 1.5em 0.8em 1.5em; border-radius: 0.5rem;font-size: 100%; background-size:auto 1.8em;}
.buttons a.grey { background-color: #EEE; color:#222; }
.buttons a:hover { background-color: #333; color: #FFF;}

.buttons a.arrow { background-image: url("../images/right-arrow.svg"); padding-right: 2.8em;}



.buttons a.arrow.disable { pointer-events: none; background-color: #E0E2E4;}


input.invisible { position:absolute; font-size:0; padding:0; left:-1000px;}



.champ:focus { outline: none !important; box-shadow: none !important; border-color: #999;}
.content .form-line label { position:absolute; left: 0; text-align: end; width:9em; line-height: 2.5em; top: 1px;  font-weight:400; font-size:80%; color:#333;}

.content .padder { padding: 1px; background: #FFF; border-radius: 0.8rem; margin:0 auto; box-shadow: 0 0.5rem 1.5rem 1px rgba(0,0,0,0.06); }


h2 { background: -webkit-linear-gradient(-45deg,#027c6c, #024139);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; }
h1 {font-weight:600; font-size:220%;}
h2 {font-weight:600; font-size:200%;	 }
h3 {font-weight:600; font-size:160%; }


.bar { height: 0.66em; width: 50%;  margin-top: -1rem; background: #F8FAFC; background: rgba(0,0,0,0.03); box-shadow: 0 0 0.25em rgba(0,0,0,0.08) inset; border-radius: 0.2em; position: relative;}

.bar div { position: absolute; height: 100%; width: 0;  border-radius: 0.2em; background: #00927F; }

h3 + .bar {  width: 100%; font-size:150%;  margin-top: -1.2rem; }





.hidden { display:	none;}

.form-group {
	position: relative;
	margin:1em 0;
   }
   
   
   form .columns .form-group {
	   margin:1em 0 0 0;	
   }
   
   .form-label {
	position: absolute;
	left: .9em;
	top: 1.2em;
	line-height:90%;
	color: #999;
	z-index: 10;
	font-weight:400;
	transition:top 0.1s, font-size 0.1s, color 0.1s, left 0.1s; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
	cursor:text;
   }
   
   .form-label em {
	   background:#FFF;font-style: normal; font-size: 70%; left:0; position: absolute; top: 100%; white-space: nowrap; padding: 0.3em 0.4em; margin:0.75em -0.4em; color:#C2C4C6; transition: all 0.2s;
   }
   
   .focused .form-label em {
	   opacity:0; 
	   font-size: 90%;
	   top:200%;
   }
   
   .focused .form-label , .readonly .form-label {
	font-size: 70%;
	top:0.9em;
	left: 1.4em;
	font-weight:400;
	color: #AFACA8;
	
   }
   
   .form-input , .champ {
	position: relative;
	padding: 1.2em .9em 0.5em .9em;
	width: 100%;
	outline: 0;
	border: 0;
	border:1px solid #AFACA8;
	border-radius:0.4em;
	background: #FFF no-repeat center right;
	background-size: contain;
	border-color:rgba(0,0,0,0.1);
	transition: border-color .2s ease-out; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
	font-size:100%; line-height:100%;
	box-sizing:border-box;
	font-family:'Roboto', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
   }
   
   .form-input.error , .champ.error {
		border-color:#f64f6466;
		background-color:#f64f6402;
   }

.error_form { font-weight: bold; color: #f64f64; margin: 0 0 1em 0 !important;}
select.champ { display: block; padding: 0 0.7em; height: 3.2em; -moz-appearance: none; -webkit-appearance: none;
	appearance: none; background-image: url(../images/down-arrow.svg); }



@media screen and (max-width: 960px) {

}

@media screen and (max-width: 600px) {
	body , html { font-size:14px;   }
	.wrap { margin: 2rem;}

}