/* CSS Document */

:root {
	--bgc1: #FFF;
	--bgc2: #575756;
	--bgc3: #e4e3dc;
	--fc1: #575756;
	--fc2: #e4e3dc;
	--fc3: #FFF;
	--green: #99ab89;
}

* {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: "eb-garamond", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	text-align: center;
	line-height: 28px;
	color: var(--fc1);
	-webkit-transition: background-color 500ms cubic-bezier(.6,0,.4,1) 0ms;
	transition: background-color 500ms cubic-bezier(.6,0,.4,1) 0ms;
}

body.standard {
	background-color: var(--bgc3);
}

div {
	display: block;
	margin: 0;
	padding: 0;
}


a {
	text-decoration: none;
	color: inherit;
}
a:hover {
	cursor: pointer;
}


h1, h2 {
	font-weight: 400;
	color: var(--green);
}
h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 45px;
}


.cta_wrapper {
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: 5vh;
	width: 100%;
	padding: 0 20px;
}

a.main {
	display: inline-block;
	padding: 11px 10px 8px;
	
	
	font-family: 'Neutra Cond';
	font-size: 18px;
	line-height: 22px;
	text-align: center;
	text-transform: uppercase;
	
	letter-spacing: 0.1em;
	color: var(--green);
	background-color: #FFF;
	border: 1px solid var(--green);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


a.main.full {	width: 100%;	}
a.main.part {	width: calc(100% - 82px);	}
a.main.back {	width: 62px;	}


.location_pin {
	display: inline-block;
	margin: 0 5px 0 0;
	width: 18px;
	height: 18px;
	background-image: url(../sources/location.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translate(0px, 2px);
}

a.main.active {
	transform: translateX(0px) translateY(2px);
	box-shadow: 0px 0px 0px #222;
}

a.main.back {
	width: 62px;
}

.app_wrapper {
	display: block;
	max-width: 100vw;
	overflow: hidden;
}

.standard .app_wrapper {
    position: relative;
    max-width: 500px;
    margin: 50px auto 0;
    background-color: var(--bgc1);
}


.content_wrapper {
	position: relative;
	display: flex;
	width: 500%;
	transition: left 500ms cubic-bezier(.6,0,.4,1) 0ms;
}

.content_wrapper.c1 {		left: 0%;			}
.content_wrapper.c2 {		left: -100%;		}
.content_wrapper.c3 {		left: -200%;		}
.content_wrapper.c4 {		left: -300%;		}
.content_wrapper.c5 {		left: -400%;		}


.content_wrapper section {
	position: relative;
	width: 100%;
	height: 90vh;
}
.smartphone .content_wrapper section {
	width: 100vw;
}

.text_content {
	margin: 0 20px;
	text-align: center;
	font-weight: 400;
}

.smartphone .text_content.tc2 {
	margin-top: 30px;
}


/* ++++++++++++++++++++++++++++++++

		TITLE

++++++++++++++++++++++++++++++++ */

.title_wrapper {
    position: absolute;
    top: 5vh;
    left: 0;
    width: 100%;
    height: 65vh;
}


.header, 
.logo, 
.event_title,
.event_date,
.sponsors {
    position: absolute;
}

.header {
	left: 20px;
	right: 20px;
	height: 40%;
	background-size: 200%;
	background-position: center;
	background-image: url(../sources/header.jpg);
}

.logo {
    top: 30%;
    width: 100%;
    height: 130px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../sources/logo.svg);
}

.event_title,
.head_label {
	width: 100%;
	top: 63%;
	font-family: 'Neutra Cond';
	font-weight: 700;
	font-style: normal;
	font-size: 35px;
	text-transform: uppercase;
	color: var(--green);
}

.event_date {
	width: 100%;
	top: 70%;
	font-style: normal;
	font-size: 22px;
	text-transform: uppercase;
	color: var(--green);
}



.sponsors {
	left: 20px;
	right: 20px;
	height: 50px;
	bottom: 0;
	background-size: contain;
	background-image: url(../sources/partner.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
}


/* ++++++++++++++++++++++++++++++++

		HEAD LABELS

++++++++++++++++++++++++++++++++ */

.head_label {
	margin: 20px 0 0;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
}




/* ++++++++++++++++++++++++++++++++

		FACTS

++++++++++++++++++++++++++++++++ */




.facts_wrapper {
	max-width: 100%;
	margin-top: 0px;
}
.standard .facts_wrapper {
	padding: 15px;
}

.facts {
	display: flex;
	position: relative;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.standard .facts {
	flex-wrap: wrap;
}

.smartphone .facts::-webkit-scrollbar  {
	display: none;
	height: 0;
	width: 0;
}



.fact {
	margin: 0 10px;
	background-color: var(--green);
	color: #fff;
	scroll-snap-align: center;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.standard .fact {
	margin: 5px 5px;
	padding: 5px 0;
	width: calc(50% - 10px);
}
.smartphone .fact {
	min-width: 70%;
}




.smartphone .fact:first-child {	
	margin-left: 20px;
}

.smartphone .fact:last-child {	
	margin-right: 20px;
}




.smartphone .fact_inner {
	display: flex;
    flex-direction: column;
    height: 110px;
    justify-content: center;
}

.fact_inner p {
	line-height: 23px;
	margin-top: 5px;
	margin-bottom: 0;
}

.fact_inner span {
    font-size: 18px;
    line-height: 18px;
    margin-top: 5px;
    opacity: 0.7;
}






/* ++++++++++++++++++++++++++++++++

		FORMS

++++++++++++++++++++++++++++++++ */

input, textarea {
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-style: normal;
	font-size: 15px;
}

.input_wrapper {
	margin: 0 0 20px;
	min-height: 40px;
	background-color: #FFF;
	-webkit-transition: background-color 250ms ease-in-out 0ms;
	transition: background-color 250ms ease-in-out 0ms;
	border: 1px solid var(--green);
}
.input_wrapper.err {
	background-color: #FF8D8D;
}







.input_wrapper input[type="text"],
.input_wrapper input[type="email"] {
	display: block;
	width: 100%;
    padding: 12px 15px;
    border: 0;
    outline: 0;
	background-color: transparent;
}


input[type="radio"] {
	margin: 0 5px 0 0;
	padding: 0;
	
	width: 16px;
	height: 16px;
	
	background-color: #FFF;
	border: 2px solid #EEE;
	border-radius: 15px;
	transform: translateY(3px);
	
	-webkit-appearance: none;
	appearance: none;
}
input[type="radio"]:checked {
	border: 2px solid #222;
	background-color: #222;
}



.input_wrapper .label {
    display: block;
    width: 100%;
    margin: 2px 0 0 0;
    padding: 12px 15px 0 15px;
    text-align: left;
    font-size: 12px;
}


.input_wrapper.radio div {
    padding: 10px 15px 12px;
	text-align: left;
}

.input_wrapper.radio div label {
	margin: 0 20px 0 0;
}




.input_wrapper textarea {
	padding: 10px 15px 12px;
    border: none;
    outline: none;
    width: 100%;
    min-height: 110px;
    max-height: 110px;
}



input[type="date"] {
	display: block;
    padding: 12px 15px;
    border: 0;
    outline: 0;
	text-align: left;
	background-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	color: #222;
}







/* ++++++++++++++++++++++++++++++++

		FINISH

++++++++++++++++++++++++++++++++ */


#finish {
	position: relative;
}

#finish .whoop {
	position: absolute;
	
	top: 170px; 
	left: 50vw;
	width: 250px;
	height: 180px;

	background-image: url(../sources/labels/whoop.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	-webkit-transition: opacity 1000ms cubic-bezier(.6,0,.4,1) 200ms;
	transition: opacity 1000ms cubic-bezier(.6,0,.4,1) 200ms;
		
	animation: whoop_animation 4s cubic-bezier(.6,0,.4,1) infinite;
	transform-origin: left;
}

@keyframes whoop_animation {
	0% {	transform: scale(0.8) rotate(2deg) translateX(-125px);		}
	10% {	transform: scale(1.2) rotate(-2deg) translateX(-125px);		}
	20% {	transform: scale(0.8) rotate(2deg) translateX(-125px);		}
	30% {	transform: scale(1.2) rotate(-2deg) translateX(-125px);		}
	100% {	transform: scale(0.8) rotate(2deg) translateX(-125px);		}
}

#finish .head_label,
#finish .text_content {
	position: absolute;
	margin: 0;
	width: 100%;
	z-index: 1000;
}

#finish .head_label {
	top: 260px;
}
#finish .text_content {
	top: 350px;
}