@charset "UTF-8";
/* CSS Document */

main h1 {
	padding-top: 50px;
	margin-bottom: 25px;
}
main .lead {

}
main .lead p {
	font-size: 1.3rem;
	line-height: 1.4;
}


main form[name="registration"] {
}
.form .form-elements .form-element .form-value input[type="text"] {}
.form .form-elements .form-element .form-value input[type="email"] {}
.form .form-elements .form-element .form-value input[type="tel"] {}
.form .form-elements .form-element .form-value textarea {}

.form .form-element .form-value i {
	background-color: white;
}
main form[name="registration"] .form .form-elements .form-element .form-value select {
	line-height: 1.2;
	background-image: url("../../images/icon/common/50-arrow-line-down.svg");
	background-size: 15px;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px), 50%;
}
main form[name="registration"] .form .form-elements .form-element .form-value select:focus {
	font-size: 1.0rem;
}

		/* desktop */	@media screen and (min-width:960px){
		}
		/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
		}
		/* mobile */	@media screen and (max-width:699px){
			main .mirror { width: calc(100% - 80px); }
		}

/*
.conditional-contents .conditional-content { display: none; }

.conditional-contents[data-template="form"     ] .conditional-content[data-label="form"     ],
.conditional-contents[data-template="progress" ] .conditional-content[data-label="progress" ],
.conditional-contents[data-template="succeeded"] .conditional-content[data-label="succeeded"],
.conditional-contents[data-template="failed"   ] .conditional-content[data-label="failed"   ] {
	display: block;
}
*/

.form-element .form-warning {
	font-family: NunitoSans;
	font-size: 1.2rem;
	line-height: 1.2;
}
.form-element .form-warning {
	opacity: 0;
	transition:opacity 1s ease; 
}
.form-element.warning-visible .form-warning {
	opacity: 1;
}

.form-element[data-label="confirmation"] .form-warning:before { content:"Please check this for confirmation!"; }
.form-element[data-label="first_name"  ] .form-warning:before { content:"Please enter your name!"; }
.form-element[data-label="last_name"   ] .form-warning:before { content:"Please enter your name!"; }
.form-element[data-label="email"       ] .form-warning:before { content:"Please enter your e-mail!"; }










	/* multiple templates */
	
		.multiple-templates { position: relative; }
		.multiple-templates[data-template="form"]       {}
		.multiple-templates[data-template="processing"] {}
		.multiple-templates[data-template="succeeded"]  {}
		.multiple-templates[data-template="failed"]     {}

		.multiple-templates .template-item {
			visibility: hidden;
			pointer-events: none;
			opacity: 0;
			margin-top: 15px;
			transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease .6s;
		}

		.multiple-templates .template-item[data-label="form"]       { position:relative; }
		.multiple-templates .template-item[data-label="processing"],
		.multiple-templates .template-item[data-label="succeeded"],
		.multiple-templates .template-item[data-label="failed"] {
			position:absolute;
			left: 0; top: 0; right: 0; bottom: 0;
		}

		.multiple-templates[data-template="form"]       .template-item[data-label="form"]       { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}
		.multiple-templates[data-template="processing"] .template-item[data-label="processing"] { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}
		.multiple-templates[data-template="succeeded"]  .template-item[data-label="succeeded"]  { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}
		.multiple-templates[data-template="failed"]     .template-item[data-label="failed"]     { visibility: visible; opacity:1; margin-top:0; pointer-events:all; transition:opacity .6s ease, margin-top 0.6s ease, visibility 0s ease 0s;}

		@media screen and (min-width: 580px) and (max-width: 699px) { .multiple-templates[data-template="form"] .template-item { margin-bottom:80px; } }
		@media screen and (min-width: 310px) and (max-width: 579px) { .multiple-templates[data-template="form"] .template-item { margin-bottom:80px; } }

		.multiple-templates[data-template="processing"] h3,
		.multiple-templates[data-template="succeeded"] h3,
		.multiple-templates[data-template="failed"] h3 { 
			text-wrap:none;
			margin-bottom: 10px;
		}

		.multiple-templates[data-template="form"]       .template-item[data-label="form"]       h3 > i:before { content:"\e95b"; }
		.multiple-templates[data-template="processing"] .template-item[data-label="processing"] h3 > i:before { content:"\e963"; }
		.multiple-templates[data-template="succeeded"]  .template-item[data-label="succeeded"]  h3 > i:before { content:"\e92e"; }
		.multiple-templates[data-template="failed"]     .template-item[data-label="failed"]     h3 > i:before { content:"\e937"; }

		.multiple-templates .template-item h3 > i {
			display: block;
			width:       30px;
			height:      30px;
			font-size:   30px;
			line-height: 30px;
			margin-bottom: -30px;
		}
		.multiple-templates[data-template="processing"] .template-item[data-label="processing"] i:before {
			display: block;
			width:       inherit;
			height:      inherit;
			font-size:   inherit;
			line-height: inherit;
			animation: processing 1s infinite;
			animation-timing-function:linear;
		}
		@keyframes processing {
			from { transform:rotate(0deg); }
			to   { transform:rotate(360deg); }
		}
		
		.multiple-templates .template-item .cta-button i {
			display: block;
			position: relative;
			width:          25px;
			height:         25px;
			font-size:      25px;
			line-height:    25px;
			margin-bottom: -25px;
			top: -3px;
			float: right;
		}
		.multiple-templates .template-item em {
			display: block;
			position: relative;
			margin: 0 0 0 35px;
		}
		.multiple-templates .template-item .cta-button i:empty ~ em { margin-left: 0; }

		.multiple-templates .template-item .cta-button i:before    { content:"\e955"; }
		.multiple-templates .template-item .signin-button em,
		.multiple-templates .template-item .cta-button em {
			display: block;
			position: relative;
			margin: 0 0 0 25px;
		}
		.multiple-templates .template-item .cta-button em {
			margin: 0 25px 0 0;
		}

		/* ERROR MESSAGES */
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message { color:#D40000; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"]                                .error-message { display: none; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] #registrarion-form[data-errors="1"] .error-message { display: block; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message i { display: inline-block; position: relative; width: 30px; height: 30px; margin-bottom: -30px; font-size: 30px; line-height: 30px; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message em { display: inline-block; margin-left: 10px; font-size: 1.6rem; line-height: 30px; font-style: italic; }
		.multiple-templates[data-template="form"] .template-item[data-label="form"] .error-message i:before { content:"\e910";}



		/* desktop */	@media screen and (min-width:960px){
		}
		/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
		}
		/* mobile */	@media screen and (max-width:699px){
			main .mirror { width: calc(100% - 80px); }
		}