/*! normalize.css v8.0.1 */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
* {box-sizing: border-box;}
*:focus {outline:none;}

body{
	height: calc(var(--vh, 1vh) * 100);
	width:100vw;
	background-color:#000;
	color:#fff;
	position:relative;
	font-family: 'Montserrat', sans-serif;
}

.desktop{display:block;}
.mobile{display:none;}

.blankpixel{display:none;}

.header{
	width:100%;
	height:25vh;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.header .logo{
	width:600px;
}

.header .logo g{
	fill:#fff;
}

.header .logo.b g{
	fill:#000;
}


#desktop{
	width:100%;
	height:100vh;
	position:relative;
}

#desktop h1{
	display:block;
	width:100%;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
	margin:4rem 0;
	font-size:2rem;
	font-weight:500;
}

#desktop #qrcode{
	width:320px;
	margin:0 auto;
	display:block;
}	


.footer{
	text-align:center;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:8px 0;
}

.footer a{
	color:#fff;
	font-size:12px;
	display:inline-inlock;
	margin:0 10px;	
	text-decoration:none;
}

/* ANIMATION */
@keyframes opacity{0%{opacity:0;visibility:hidden;}to{opacity:1;visibility:visible;}}
@keyframes animationTop{0%{transform:translateY(-10px);opacity:0;visibility:hidden;}to{transform:translateY(0px);opacity:1;visibility:visible;}}
@keyframes animationBottom{0%{transform:translateY(10px);opacity:0;visibility:hidden;}to{transform:translateY(0px);opacity:1;visibility:visible;}}
@keyframes animationLeft{0%{transform:translateX(-10px);opacity:0;visibility:hidden;}to{transform:translateX(0px);opacity:1;visibility:visible;}}


/* STEP 1 */
#step-1.active .header{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
#step-1.active h3{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.25s;animation-fill-mode: both;}
#step-1.active .answers a:nth-child(1){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
#step-1.active .answers a:nth-child(2){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.4s;animation-fill-mode: both;}
#step-1.active .answers a:nth-child(3){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
#step-1.active .answers a:nth-child(4){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}


/* STEP 2 */
#step-2.active .header{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
#step-2.active h3{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.25s;animation-fill-mode: both;}
#step-2.active .answers a:nth-child(1){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
#step-2.active .answers a:nth-child(2){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.40s;animation-fill-mode: both;}
#step-2.active .answers a:nth-child(3){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
#step-2.active .answers a:nth-child(4){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}


/* STEP 3 */
#step-3.active .header{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
#step-3.active h3{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.25s;animation-fill-mode: both;}
#step-3.active .answers a:nth-child(1){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
#step-3.active .answers a:nth-child(2){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.40s;animation-fill-mode: both;}
#step-3.active .answers a:nth-child(3){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
#step-3.active .answers a:nth-child(4){animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}


/* STEP 4 */
#step-4.active .result.active .header{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
#step-4.active .result.active  p{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.25s;animation-fill-mode: both;}
#step-4.active .result.active  .logo-swy{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
#step-4.active .result.active  .logo-swy-svg{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
#step-4.active .result.active  .packshot{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.40s;animation-fill-mode: both;}
#step-4.active .result.active  .link-container{animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
#step-4.active .result.active  .intensity em{animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}
#step-4.active .result.active  .intensity span:nth-child(2){animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.55s;animation-fill-mode: both;}
#step-4.active .result.active  .intensity span:nth-child(3){animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.6s;animation-fill-mode: both;}
#step-4.active .result.active  .intensity span:nth-child(4){animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.65s;animation-fill-mode: both;}
#step-4.active .result.active  .intensity span:nth-child(5){animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.7s;animation-fill-mode: both;}



/* MOBILE */
#mobile{
	display:none;
	position:relative;
	width:100%;
	height: calc(var(--vh, 1vh) * 100);
}


#mobile .step{
	position:absolute;
	top:0px;
	left:0;
	opacity:0;
	visibility:hidden;
	width:100%;
	height:100%;
	transition:all 0.001s cubic-bezier(0.950, 0.050, 0.795, 0.035);
}

#mobile .step.active{
	opacity:1;
	visibility:visible;
	top:0;
	z-index:10;
}

#mobile h3{
	text-transform:uppercase;
	text-align:center;
	padding:1rem 0 1.5rem;
	width:100%;
	margin:0;
	font-size:22px;
}

#mobile h3 span{
	font-weight:400;
	display:block;
}

#mobile .answers{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	padding:0 5px;
}

#mobile .answers a{
	width:calc(50% - 20px);
	text-decoration:none;
	margin:10px;
}


#mobile .answers a img{
	display:block;
	width:100%;
}


#mobile .answers a span{
	display:block;
	text-align:center;
	background:#fff;
	color:#000;
	text-transform:uppercase;
	padding:12px 5px;
	margin-top:5px;
	font-weight:700;
	font-size:14px;
}


/* RESULT */
.result{
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	top:-40px;
	left:0;
	opacity:0;
	visibility:hidden;
	width:100%;
	height:100%;
	transition:all 0.3s ease-out;
}

.result.active{
	opacity:1;
	visibility:visible;
	top:0;
}

#result-only{background-image:url(img/bg-only.jpg);}
#result-edt{background-image:url(img/bg-edt.jpg);}
#result-intensely{background-image:url(img/bg-intensely.jpg);}
#result-absolutely{background-image:url(img/bg-absolutely.jpg);}

.result p{
	color:#000;
	text-transform:uppercase;
	display:block;
	margin:0 auto;
	text-align:center;
	font-size:18px;
	font-weight:400;
	margin:1rem 0;
}

#result-absolutely p{
	color:#fff;
}

.result .logo-swy{
	display:block;
	margin:0 auto 2rem;	
	width:260px;
}

.result .logo-swy-svg{
	display:block;
	margin:0.5rem auto 2rem;	
	width:140px;
}

.result .blank{
	width:100%;
	margin-bottom:1rem;
}

.result .packshot{
	width:80%;
	display:block;
	margin:0 auto;
	margin-bottom:1rem;
}

.result .link-container{
	display:block;
	margin:2% auto;
	width:100%;
	text-align:center;
}

.result .btn{
	background:#000;
	color:#FFF;
	padding:15px;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:700;
	font-size:15px;
	display:inline-block;
	margin:1% auto;
	transition:all 0.3 ease-out;
}

.result .btn:hover{
	background:#fff;
	color:#000;
}


#result-absolutely .btn{
	background:#fff;
	color:#000;
}

#result-absolutely  .btn:hover{
	background:#000;
	color:#fff;
}


.result .intensity{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
	font-size:15px;
	line-height:18px;
	margin-top:15px;
}

#result-absolutely .intensity{
	color:#fff;
}

.result .intensity em{
	line-height:18px;
	margin:0;
	font-style:normal;
	margin-right:5px;
}

.result .intensity span{
	width:18px;
	height:18px;
	border:solid 1px #000;
	border-radius:100%;
	margin:0 2px;
}

#result-absolutely span{
	border:solid 1px #fff;
}


.result .intensity span.full{background:#000;}
#result-absolutely span.full{background:#fff;}

.result .footer a{color:#000;}
#result-absolutely .footer a{color:#fff;}


/* BUY */
.buy{
	width:100%;
	height:100%;
	background-size:100%;
	background-position:center 0px;
	background-repeat:no-repeat;
	position:absolute;
	top:-40px;
	left:0;
	opacity:0;
	visibility:hidden;
	width:100%;
	height:100%;
	transition:all 0.3s ease-out;
}

.buy.active{
	opacity:1;
	visibility:visible;
	top:0;
}

#buy-only{background-image:url(img/bg-only.jpg);}
#buy-edt{background-image:url(img/bg-edt.jpg);}
#buy-intensely{background-image:url(img/bg-intensely.jpg);}
#buy-absolutely{background-image:url(img/bg-absolutely.jpg);}


.buy .logo-swy{
	display:block;
	margin:0 auto;	
	width:280px;
}

.buy .logo-swy-svg{
	display:block;
	margin:0rem auto 0.5rem;	
	width:140px;
}

.buy .blank{
	width:100%;
	margin-bottom:2rem;
}


.buy .packshot{
	width:80%;
	display:block;
	margin:0 auto;
	margin-bottom:1rem;
}

.buy .link-container{
	display:block;
	margin:2% auto;
	width:100%;
	text-align:center;
}

.buy .btn{
	background:#000;
	color:#FFF;
	padding:15px;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:700;
	font-size:15px;
	display:inline-block;
	margin:1% auto;
	transition:all 0.3 ease-out;
	min-width:160px;
}

.buy .btn:hover{
	background:#fff;
	color:#000;
}

.buy .footer a{color:#000;}


#buy-absolutely .btn{
	background:#fff;
	color:#000;
}

#buy-absolutely  .btn:hover{
	background:#000;
	color:#fff;
}

#buy-absolutely .footer a{color:#fff;}




/* LANG */
#lang{
	position:fixed;
	top:-100%;
	opacity:0;
	left:0;
	z-index:50000;
	width:100%;
	height: calc(var(--vh, 1vh) * 100);
	transition: all 0.3s ease-out;
	background:rgba(255,255,255,0.95);
}

#lang.active{		
	top:0;
	opacity:1;
}

#lang #lang-close{
	position:absolute;
	top:10px;
	right:10px;
	width:30px;
	height:30px;
	text-decoration:none;
	z-index:20;
}

#lang #lang-close span{
	width:30px;
	height:2px;
	background:#000;
	position:absolute;
	transform:rotate(45deg);
	top:15px;
	left:0;
}

#lang #lang-close span:nth-child(2){
	transform:rotate(-45deg);
}

#lang #lang-content{
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
} 


#lang #lang-content a{
	display:block;
	width:100%;
	text-decoration:none;
	text-transform:uppercase;
	text-align:center;
	padding:10px 0;
	font-weight:700;
	color:#000;
} 


#lang #lang-content a:hover{
	
	
} 


/* RESPONSIVE */
@media only screen and (max-width:1030px){
	#desktop h1{
		width:60%;
		margin-left:20%;
	}
}

@media only screen and (max-width:760px){
	.desktop{display:none !important;}
	.mobile{display:block !important;}
	
	.header{
		height:10vh;
	}

	.header .logo{
		max-width:70%;
	}
}

@media only screen and (max-width:371px){
	#mobile .answers a {
		width: calc(50% - 20px);
		margin:10px;
	}

	#mobile .answers a span{
		font-size:14px;
	}
	
	#mobile h3 {
		padding:0rem 10% 1rem;
	}
	
	.result p{
		font-size:16px;
		margin:0rem 0 1rem;	
	}
	
	.result .logo-swy{
		width:240px;
	    margin: 0 auto 0.5rem;
	}
	
	.result .logo-swy-svg{
		width:120px;
	    margin:1rem auto;
	}
	
	.result .blank{
		margin-bottom:2rem;
	}
	
	.buy .logo-swy{
		width:240px;
	    margin: 0 auto 0.5rem;
	}

	
	.buy p{
		font-size:16px;
		margin:0rem 0 1rem;	
	}
	
	.buy .logo-swy{
		width:130px;
	    margin: 0 auto 0.5rem;
	}
	
	.buy .logo-swy-svg{
		width:120px;
	    margin:0rem auto 1rem;
	}
	
		
	.buy .blank{
		margin:1rem auto 1.5rem;
	}
	
	.header {
		height: 8vh;
	}
	
	#lang #lang-content a {
		padding: 5px 0;
	}
}


@media only screen and (max-width:361px){
	#mobile h3 {
		padding: 0 5px 0.5rem;
		font-size: 18px;
	}
	
	#mobile .answers a {
		width: calc(50% - 10px);
		margin: 5px;
	}
	
	#mobile .answers a span {
		padding: 8px 2px;
		font-size:12px;
	}
	
	.result .blank {
		margin-bottom: 0;
	}
	
	.buy .blank {
		margin:0;
	}
}