@charset "UTF-8";
/*  RESET
	========================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ol,ul{list-style:none;}li{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}b,strong{font-weight:bold;}textarea{overflow:auto;vertical-align:top;}html{font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.25em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}pre{overflow:auto;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}legend{border:0;padding:0;}optgroup{font-weight:bold;}td,th{padding:0;}a{background:transparent;text-decoration:none;}a:active,a:hover,a:focus{border:none;outline:0;text-decoration:none;}::selection{background:#6a6a6a;color:#f5f5f5;text-shadow:1px 1px 1px #060606;}::-moz-selection{background:#6a6a6a;color:#f5f5f5;text-shadow:1px 1px 1px #060606;}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}::-webkit-input-placeholder{color:inherit;opacity:0.5;font-family:inherit;}:-moz-placeholder{color:inherit;opacity:0.5;font-family:inherit;}::-moz-placeholder{color:inherit;opacity:0.5;font-family:inherit;}:-ms-input-placeholder{color:inherit;opacity:0.5;font-family:inherit;}button,.btn:hover{cursor:pointer;}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}


/*  DEFAULT & BASIC STYLES
	========================================================================== */
html,
body {
	font: bold 62.5%/1 'Archivo Narrow', sans-serif;
}
body {
	background: url('../images/bg-body.jpg') no-repeat center center fixed #f9ceca;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	color: #000;
	font-size: 100%;
	letter-spacing: 2px;
	letter-spacing: 0.2em;
	padding-top: 3vh;
}

main,
header,
section,
footer,
nav,
.container,
a {
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

.container:before,
.container:after,
nav:before,
nav:after,
main:before,
main:after,
header:before,
header:after,
section:before,
section:after,
footer:before,
footer:after,
.cf:before,
.cf:after {
	display: table;
	content: " ";
}
.container:after,
nav:after,
main:after,
header:after,
section:after,
footer:after,
.cf:after {
	clear: both;
}

.container {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

img {
	display: inline-block;
	height: auto !important;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
}


	


/*  ==========================================================================
	CONTENT 
	========================================================================== */

.main {
	min-height: 100%;
}


	.steps {
		text-align: center;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		position: relative;
		overflow: hidden;
	}
		.steps footer,
		.steps header {
			-ms-flex-item-align: start;
			align-self: flex-start;
			width: 100%;
		}
		.steps footer {
			-ms-flex-item-align: end;
			align-self: flex-end;
		}

		.step {
			-webkit-transition: visibility 1s ease-out, opacity 1s ease-out, zIndex 0.25s ease-out, position 0.1s ease-out, -webkit-filter 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
			transition: visibility 1s ease-out, opacity 1s ease-out, zIndex 0.25s ease-out, position 0.1s ease-out, -webkit-filter 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
			-o-transition: visibility 1s ease-out, opacity 1s ease-out, filter 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), transform 1s cubic-bezier(0.19, 1, 0.22, 1), zIndex 0.25s ease-out, position 0.1s ease-out;
			transition: visibility 1s ease-out, opacity 1s ease-out, filter 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), transform 1s cubic-bezier(0.19, 1, 0.22, 1), zIndex 0.25s ease-out, position 0.1s ease-out;
			transition: visibility 1s ease-out, opacity 1s ease-out, filter 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), transform 1s cubic-bezier(0.19, 1, 0.22, 1), zIndex 0.25s ease-out, position 0.1s ease-out, -webkit-filter 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			opacity: 0;
			visibility: hidden;
			position: absolute;
			-webkit-filter: grayscale(1) blur(5px);
			filter: grayscale(1) blur(5px);
			-webkit-transform: translate(150%,150%);
			-ms-transform: translate(150%,150%);
			transform: translate(150%,150%);
		}
		.step.active {
			opacity: 1;
			visibility: visible;
			position: static;
			z-index: 1;
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-webkit-filter: grayscale(0) blur(0);
			filter: grayscale(0) blur(0);
		}

		.step.done,
		.step.active.done {
			opacity: 0;
			position: absolute !important;
			visibility: hidden;
			-webkit-filter: grayscale(1) blur(5px);
			filter: grayscale(1) blur(5px);
			-webkit-transform: rotate3d(1,1,0,90deg);
			transform: rotate3d(1,1,0,-90deg);
		}


		
		.title {
			font-size: 1.9em;
			margin-bottom: 1em;
		}
			.title .timer {
				display: inline-block;
			}


		.step p {
			font-size: 1.9em;
			font-weight: normal;
			line-height: 1.23;
			margin-bottom: 1em;
			letter-spacing: 0;
		}
		.step p:last-child {
			margin-bottom: 0;
		}
		.secure,
		.title,
		.step p {
			pointer-events: none;
		}
		.secure,
		.btn,
		.title,
		.step p {
			-webkit-touch-callout:none !important;-webkit-user-select:none !important;-khtml-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;
		}

		.timer,
		.memberResults,
		.userCity {
			color: #f00;
		}
		.userCity {
			display: inline-block;
		}

		.secure img {
			max-width: 100%;
			width: 240px;
		}


.hl {
	color: #3ccc2f;
}
.hl-2 {
	color: #f62e2e;
}








/*  BUTTONS 
	========================================================================== */
.buttons {
	display: flex;
	margin: 0 auto 2em;
	justify-content: space-between;
	align-content: stretch;
	flex-flow: row wrap;
}
	.btn {
		background: #008000;
		color: #fff;
		display: inline-block;
		line-height: 1;
		font-size: 2.4em;
		margin: 0 0.5em 0.5em;
		padding: 1.38em 0.75em;
		position: relative;
		letter-spacing: 0.6px;
		letter-spacing: 0.06em;
		z-index: 1;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		flex: 1 1 auto;
	}
	.btn.btnR {
		font-weight: normal;
	}
		.buttons .btn.btnF1 {
			margin-left: 0;
			margin-right: 0;
			max-width: 38%;
		}
		.buttons .btn.btnF2 {
			margin-left: 0;
			margin-right: 0;
			max-width: 60%;
		}
		.buttonsG {
			max-width: 615px;
		}
		.buttonsG .btn {
			margin-bottom: 0.5em;
		}
		.btn.btnMd {
			font-size: 3.6em;
			padding: 0.53em 0.4em;
		}
		.btn.btnLg {
			font-size: 6em;
			padding: 0.25em 0.25em;
		}
	
	.btnNo {
		background: #c6c6c6;
	}
		.btn::before {
			display: block;
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: rgba(255,255,255,0.33);
		  z-index: -1;
		  opacity: 0;
		  -webkit-transform: scale3d(0.35, 1, 1);
		  transform: scale3d(0.35, 1, 1);
		  -webkit-transition: -webkit-transform 0.4s, opacity .4s;
		  transition: transform 0.4s, opacity .4s;
		  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		}
		.btn:hover::before {
		  opacity: 1;
		  -webkit-transform: translate3d(0, 0, 0);
		  transform: translate3d(0, 0, 0);
		}
		.btn:active {
		  -webkit-transition: transform 0.1s linear;
		  -moz-transition: transform 0.1s linear;
		  -ms-transition: transform 0.1s linear;
		  -o-transition: transform 0.1s linear;
		  transition: transform 0.1s linear;
			-webkit-transform: translateY(1px);
			-ms-transform: translateY(1px);
			-o-transform: translateY(1px);
			transform: translateY(1px);
		}







/*  SELECTS 
	========================================================================== */
.selects {
  clear: both;
  margin: 0 auto 2em;
  text-align: center;
}
  select {
    background: url("../images/icon-select.png") no-repeat 98% 56% transparent;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    border: none;
    border-bottom: 2px solid #000;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #000;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    font-size: 4.8em;
    line-height: 1.5;
    height: 1.5em;
    margin: 0;
    padding: 0 1em 0 0;
  }
  select:active,
  select:focus {
  	outline: none;
  }
  select + select {
    margin-left: 2em;
    margin-left: 4vw;
  }
  .selects > span {
		display: inline-block;
		font-size: 2.4em;
		line-height: 3;
		margin: 0 1em;
		vertical-align: middle;
  }



/*  CHECKBOXES 
  ========================================================================== */

.checkboxes {
  clear: both;
  margin: 0 auto;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	max-width: 400px;
	margin: 0 auto 1em;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}
	.checkboxes label {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		font-size: 2.8em;
		font-weight: normal;
	  position: relative;
	  width: 45%;
	  height: auto;
	  padding: 0;
	  line-height: 1;
	  border: none;
	  margin: 0 auto 0.5em;
	}
  .checkboxes label input {
    display: none;
  }
  .checkboxes label input + span {
    position: relative;
    display: block;
    vertical-align: middle;
    text-align: left;
    -webkit-touch-callout:none !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;
  }
  .checkboxes label input + span::before {
    position: relative;
    content: '';
    display: inline-block;
    background: transparent;
    border: 0.11em solid #000;
    margin-right: 0.25em;
    height: 0.8em;
    vertical-align: middle;
    width: 0.8em;
    position: relative;
    top: -0.1em;
  }
  .checkboxes label input:checked + span::before {
    background: url('../images/icon-tick.png') no-repeat center center transparent;
    background-size: 80% 80%;
  }





/*  RESULTS 
	========================================================================== */
.results {
	display: none;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	-webkit-filter: grayscale(1) blur(5px);
	filter: grayscale(1) blur(5px);
	margin: 5vh auto 0;
}
	.results.active {
		display: block;
		visibility: visible;
		opacity: 1;
		-webkit-filter: grayscale(0) blur(0);
		filter: grayscale(0) blur(0);
	}


	.rules {
		margin: 0 auto 2em;
		max-width: 600px;
		display: inline-block;
		text-align: left;
	}
		.rules li {
			display: block;
			font-size: 1.8em;
			line-height: 1.5;
			margin-bottom: 0.5em;
		}
			.dib {
				display: inline-block;
			}

	.forms {
		margin: 0 auto 1em;
		max-width: 485px;
	}
		.formRow {
			margin: 0 auto 2em;
			position: relative;
		}
			.forms label {
				display: block;
				font-size: 1.9em;
				line-height: 1.95em;
				text-align: left;
			}
			.forms input {
				display: block;
				border: 1px solid #000;
				background: #fff;
				font-size: 2.4em;
				line-height: 2.67;
				height: 2.67em;
				margin: 0 auto;
				padding: 0 1em;
				-webkit-transition: all 0.15s ease-out;
				-moz-transition: all 0.15s ease-out;
				-ms-transition: all 0.15s ease-out;
				-o-transition: all 0.15s ease-out;
				transition: all 0.15s ease-out;
				display: block;
				width: 100%;
			}
			.forms input:focus {
			  -webkit-box-shadow: 0 0 10px rgba(0, 128, 0, 0.3);
			  box-shadow: 0 0 10px rgba(0, 128, 0, 0.3);
			  border-color: #008000;
			  outline: none;
			  -webkit-transform: scale(1.025);
			  -moz-transform: scale(1.025);
			  -ms-transform: scale(1.025);
			  -o-transform: scale(1.025);
			  transform: scale(1.025);
			}

			.forms input.error {
				border-color: #f00;
			}
			.forms input.valid {
				border-color: #00b300;
			}
			.forms span.error {
			  background: #c00;
			  color: #fff;
			  font-size: 1.5em;
			  padding: 0.2em 0.33em;
			  position: absolute;
			  right: 0;
			  bottom: 0;
			  letter-spacing: 0;
			}

			.forms button.btn {
				border: none;
				cursor: pointer;
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: 100%;
			}
			.forms button.btn:active,
			.forms button.btn:focus {
				outline: none;
			}




.previews {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 2%;
}
	.preview {
		flex: 0 1 auto;
		max-width: 48%;
		margin: 0 1%;
	}
		.preview figcaption,
		.preview img {
			margin: 0 auto;
			display: block;
		}
		.preview figcaption {
			font-size: 1.9em;
			margin: 0.5em auto;
			font-weight: bold;
		}





/*  ==========================================================================
	MEDIA QUERIES 
	========================================================================== */

@-ms-viewport { width: device-width; }



@media all and (min-width:1024px){
	.title {
	  font-size: 4.5em;
	  margin-bottom: 0.3em;
	}
	.preview figcaption,
	.step p {
		font-size: 2.5em;
	}
}
@media all and (min-width:1200px){
	.title {
	  font-size: 6em;
	  margin-bottom: 0.3em;
	}
	.preview figcaption,
	.step p {
		font-size: 3.3em;
	}
}
@media all and (max-width:1023px){
	.container {
		width: 740px;
	}	
	.title {
		font-size: 3.2em;
		margin-bottom: 0.5em;
	}
	.steps {
		/* font-size: 0.9em; */
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
	.preview figcaption,
	.steps p {
		font-size: 2.9em;
	}
}
@media all and (max-width:767px){
	body {
		padding-top: 0;
	}
	.main {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}
	.main > .container {
		flex: 0 1 auto;
		margin-top: auto;
		margin-bottom: auto;
	}

	.container {
		width: 460px;
	}
	.steps {
		font-size: 0.95em;
	}
	.title {
		font-size: 3em;
	}
	.step:not(.step-final) .title {
		font-size: 3.8em;
	}
	.preview figcaption,
	.step p {
		font-size: 3em;
	}

}
@media all and (max-width:479px){
	.container {
		width: 96%;
	}
	.steps {
		font-size: 0.85em;
	}
	.title {
		font-size: 2.8em;
	}
	.results {
		margin-top: 0.5em;
	}
	.results .title {
		font-size: 2.6em;
	}
	.preview figcaption,
	.step p {
		font-size: 2.8em;
	}
	.forms {
		max-width: 290px;
	}
	.btn {
		margin-left: 0.25em;
		margin-right: 0.25em;
	}
	.btn.btnMd {
		font-size: 2.9em;
	}
	.rules li {
	  font-size: 2em;
	  line-height: 1.5;
	  margin-bottom: 0.5em;
	  letter-spacing: 0.04em;
	}
	.step5 .forms {
		font-size: 0.966em;
	}
}
@media all and (max-width:379px){
	.step:not(.step-final) .title {
		font-size: 3.3em;
	}
}
@media all and (max-width:379px) and (max-height:749px){
	.step5 .forms {
		font-size: 0.9em;
	}
}
@media all and (max-width:379px) and (max-height:679px){
	.title {
		margin-bottom: 0.7em;
	}
	.step {
		letter-spacing: 0;
	}
	.preview figcaption,
	.step p {
		font-size: 3em;
	}
	.step5 {
		font-size: 0.875em;
	}
}
@media all and (max-width:379px) and (max-height:579px){
	.step1 .buttons {
		font-size: 0.9em;
	}
	.steps {
		font-size: 0.9em;
	}
	.step5 {
		font-size: 0.85em;
	}
	.step5 .forms {
		font-size: 0.85em;
	}

	.rules li {
	  font-size: 2em;
	  letter-spacing: 0.01em;
	}

	.title {
		margin-bottom: 0.6em;
	}
	.preview figcaption,
	.step p {
		font-size: 2.6em;
	}
	.step.step3 .preview img {
		max-width: 130px;
	}
	.preview figcaption,
	.step.step3 p {
		font-size: 2.2em;
		line-height: 1.18;
	}
	.preview figcaption {
		margin: 0.25em auto;
	}
	.step.step3 .checkboxes {
		font-size: 0.875em;
	}
}
@media all and (max-width:379px) and (max-height:499px){
	.title {
		margin-bottom: 0.5em;
	}
	.steps p {
		line-height: 1;
	}
	.checkboxes {
		margin-bottom: 0;
	}

	.buttonsG .btn {
		margin-bottom: 0.5em;
		padding: 0.75em 0.5em;
	}
}