/*---------------------------------------------------------------------------------*/
/*	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, strong, 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,
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*---------------------------------------------------------------------------------*/
/*	General
/*---------------------------------------------------------------------------------*/
@font-face {
	font-family:	'starck';
	src:	url('starck.woff?version=01/September/2018/13:07:17') format('woff');
}

::selection {
	background: #FFFFFF;
}

::-moz-selection {
	background: #FFFFFF;
}

::-webkit-scrollbar { 
	display: none; 
}

html {
	font-size: 1vw;
	font-family: 'starck';
	overflow-x: hidden;
}

body {
	background-color: hsl(0, 0%, 70%); 	
}

a,
textarea,
select,
input,
.cards {
	text-decoration: none;
	color: hsla(0,0%,0%,0.8);
	text-shadow: 0.3rem 0.3rem hsl(0,0%,72.5%);
	font-size: 5rem;
}

/*---------------------------------------------------------------------------------*/
/*	Cards
/*---------------------------------------------------------------------------------*/
.cards h1,
.cards h2{
	font-size: 9rem;
	text-decoration: none;
	position: absolute;
	width: 77rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.cards h1:nth-of-type(1),
.cards h2:nth-of-type(1){
	top: 3rem;
	left: 20rem;
}

.cards h2 {
	color: hsla(0,0%,0%,0);
	text-shadow: 0.3rem 0.3rem 0 hsla(0,0%,8%,0);
}
	
.cards h1:nth-of-type(2){
	bottom: 3rem;
	right: 20rem;
	text-shadow: -0.3rem -0.3rem hsl(0,0%,72.5%);
	-webkit-transform:	rotateZ(180deg);
	transform:			rotateZ(180deg);
}

.cards ul li div,
.cards ul li nav a{
	position: absolute;
	width: 80rem;
	height: 115rem;
	background-color: hsl(0,0%,92%);
	border-radius: 5rem;
	box-shadow:	0 0 15rem rgba(30,30,30,0.2);
	display: none;
	padding: 22rem 10rem 13rem 10rem;
	overflow: hidden;
}

.cards ul li div{
	z-index: -1;
}

.cards ul li nav a{
	z-index: 1;
}

.cards img{
	width: calc(100% - 1rem);
	border: 0.5rem inset #FFF;
	border-style: inset;	
}

.cards ul li nav a:nth-child(2){
	top: 20rem;
}
.cards ul li nav a:nth-child(3){
	top: 40rem;
}
.cards ul li nav a:nth-child(4){
	top: 60rem;
}
.cards ul li nav a:nth-child(5){
	top: 80rem;
}
.cards ul li nav a:nth-child(6){
	top: 100rem;
}
.cards ul li nav a:nth-child(7){
	top: 120rem;
}
.cards ul li nav a:nth-child(8){
	top: 140rem;
}
.cards ul li nav a:nth-child(9){
	top: 160rem;
}
.cards ul li nav a:nth-child(10){
	top: 180rem;
}
.cards ul li nav a:nth-child(11){
	top: 200rem;
}

.cards ul li:last-child div,
.cards ul li:target div,
.cards ul li:target nav a{
	display: inline;
}

/*.cards ul li:last-child div {
	z-index:-1; Fallback
}*/

.cards ul li:target ~:last-child div{
	display: none;
}

.icon:nth-of-type(1){
	display: inline;
}
.icon:nth-of-type(2){
	display: none;
}
.cards ul li:first-child:target ~li .icon:nth-of-type(1){
	display: none;
}
.cards ul li:first-child:target ~li .icon:nth-of-type(2){
	display: inline;
}

.icon{
	z-index:100;
	position: absolute;
	width: 20rem;
	height: 20rem;
}

.icon h1:nth-of-type(1),
.cards ul li div:before,
.cards ul li nav a:before{
	font-size: 15rem;
	width: 15rem;
	text-align: center;
	position: absolute;
	top: 5rem;
	left: 3rem;
}

.cards ul li nav a:last-child:not(:first-child):after{
	font-size: 15rem;
	width: 15rem;
	text-align: center;
	position: absolute;
	bottom: 5rem;
	right: 3rem;
	text-shadow: 0.3rem -0.3rem hsl(0,0%,72.5%);
	-webkit-transform:	rotateX(180deg);
	transform:			rotateX(180deg);
}

.front h1:nth-of-type(2):before {
	text-shadow: -0.3rem -0.3rem hsl(0,0%,72.5%);
	font-size: 15rem;
	width: 15rem;
	text-align: center;
	position: absolute;
	bottom: 0rem;
	left: -17rem;
}

.front h1:nth-of-type(2):before,
.cards ul li nav a:nth-child(4n+5):before,
.cards ul li nav a:nth-child(4n+5):last-child:after{
	content:'♠';
}
.cards ul li nav a:nth-child(4n+2):before,
.cards ul li nav a:nth-child(4n+2):last-child:after{
	content:'♥';
}
.cards ul li nav a:nth-child(4n+3):before,
.cards ul li nav a:nth-child(4n+3):last-child:after{
	content:'♦';
}
.cards ul li nav a:nth-child(4n+4):before,
.cards ul li nav a:nth-child(4n+4):last-child:after{
	content:'♣';
}

.navigation{
	position: absolute;
	line-height: 150rem;
	font-size: 18rem;
	top: 0rem;
}

.navigation:nth-of-type(1){
	left: 0;
}

.navigation:nth-of-type(2){
	right: 0;
}

.front svg {
	margin-top: 40rem;
	width: 100%;
	height: 27.21rem;
	border: none;
}

.ribbon {
	z-index: 50;
	font-size: 4rem;
	text-shadow: 0.3rem 0.3rem rgba(128,0,0,1);
	text-align: center;
	-webkit-transform:	rotate(-45deg);
	transform:			rotate(-45deg);
	position: absolute;
	padding: 3rem 0;
	left: -18rem;
	top: 2rem;
	width: 50rem;
	background-color: #FFFFFF;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#3C3C3C)); 
	background-image: -webkit-linear-gradient(top, #282828, #3C3C3C); 
	background-image:    -moz-linear-gradient(top, #282828, #3C3C3C); 
	background-image:     -ms-linear-gradient(top, #282828, #3C3C3C); 
	background-image:      -o-linear-gradient(top, #282828, #3C3C3C); 
	box-shadow:	5rem 5rem 5rem rgba(0,0,0,0.3);
}

.copyright {
	text-align: center;
    width: 100%;
    margin: 0;
	font-size: 2rem;
	position: absolute;
	left: 0;
	bottom: 3rem;
	background-color: hsl(0,0%,75%);
	color: transparent;
	text-shadow: 1rem 1rem 1rem hsl(0,0%,72.5%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}

textarea,
select,
input{
	background-color: hsl(0,0%,82%);
	width: 80rem;
	border: none;
	font-family: 'starck';
	margin: 0;
	padding: 0;
	margin-bottom: 5rem;
}

textarea{
	resize: none;
	height: 100rem;
}

input[type='submit'] {
	cursor: pointer;
}
/*---------------------------------------------------------------------------------*/
/*	svg
/*---------------------------------------------------------------------------------*/
.s0{
	fill:#141414;
	font-size:75px;
	letter-spacing:0;
	line-height:200;
	text-align:end;
	text-anchor:end;
	word-spacing:0;
}
.s1{fill:#141414;}
/*---------------------------------------------------------------------------------*/
/*	Animation
/*---------------------------------------------------------------------------------*/
@-webkit-keyframes type{
	0%		{visibility: hidden;}
	100%	{visibility: visible;}
}
@keyframes type{
	0%		{visibility: hidden;}
	100%	{visibility: visible;}
}

@-webkit-keyframes roll{
	5%, 40%		{color: hsla(0,0%,0%,0.8);; text-shadow: 0.3rem 0.3rem hsla(0,0%,72.5%,1);}
	50%, 100%	{color: hsla(0,0%,0%,0);; text-shadow: 0.3rem 0.3rem hsla(0,0%,72.5%,0);}
}
@keyframes roll{
	5%, 40%		{color: hsla(0,0%,0%,0.8);; text-shadow: 0.3rem 0.3rem hsla(0,0%,72.5%,1);}
	50%, 100%	{color: hsla(0,0%,0%,0);; text-shadow: 0.3rem 0.3rem hsla(0,0%,72.5%,0);}
}

@-webkit-keyframes roll2{
	5%, 40%		{color: rgba(0,0,0,0.2); text-shadow: 0.3rem 0.3rem 0 rgba(60,60,60,1);}
	50%, 100%	{color: rgba(0,0,0,0); text-shadow: 0.3rem 0.3rem 15rem rgba(60,60,60,0);}
}
@keyframes roll2{
	5%, 45%		{color: rgba(0,0,0,0.2); text-shadow: 0.3rem 0.3rem 0 rgba(60,60,60,1);}
	50%, 100%	{color: rgba(0,0,0,0); text-shadow: 0.3rem 0.3rem 15rem rgba(60,60,60,0);}
}

@-webkit-keyframes blur{
	20%, 30%	{color: hsla(0,0%,0%,0.8);; text-shadow: 0.3rem 0.3rem 0 hsla(0,0%,72.5%,1);}
	50%, 100%	{color: hsla(0,0%,0%,0);; text-shadow: 0.3rem 0.3rem 15rem hsla(0,0%,0%,0);}
}
@keyframes blur{
	20%, 30%	{color: hsla(0,0%,0%,0.8);; text-shadow: 0.3rem 0.3rem 0 hsla(0,0%,72.5%,1);}
	50%, 100%	{color: hsla(0,0%,0%,0);; text-shadow: 0.3rem 0.3rem 15rem hsla(0,0%,0%,0);}
}

@-webkit-keyframes icon{
	5%, 45%		{-webkit-transform: rotateY(0deg) rotateX(0deg);}
	50%, 100%	{-webkit-transform: rotateY(-90deg) rotateX(-90deg);}
}
@keyframes icon{
	5%, 45%		{-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
	50%, 100%	{-webkit-transform: rotateY(-90deg) rotateX(-90deg);transform: rotateY(-90deg) rotateX(-90deg);}
}

@-webkit-keyframes glow{
	0%, 100%	{-webkit-transform: scale(1);transform: scale(1);}
	50%			{-webkit-transform: scale(0.75);transform: scale(0.75);}
}
@keyframes glow{
	0%, 100%	{-webkit-transform: scale(1);transform: scale(1);}
	50%			{-webkit-transform: scale(0.75);transform: scale(0.75);}
}

@-webkit-keyframes shuffle{
	0%		{-webkit-transform: rotateY(0deg); z-index: -5; visibility: visible;} 
	50%		{-webkit-transform: rotateY(0deg) translate(120rem, 0rem); z-index: -5;}
	51%		{z-index: 8;}
	100%	{-webkit-transform: rotateY(0deg) translate(0rem, 0rem); z-index: 8;}
}
@keyframes shuffle{
	0%		{-webkit-transform: rotateY(0deg);transform: rotateY(0deg); z-index: -5; visibility: visible;} 
	50%		{-webkit-transform: rotateY(0deg) translate(120rem, 0rem);transform: rotateY(0deg) translate(120rem, 0rem); z-index: -5;}
	51%		{z-index: 8;}
	100%	{-webkit-transform: rotateY(0deg) translate(0rem, 0rem);transform: rotateY(0deg) translate(0rem, 0rem); z-index: 8;}
}
/*---------------------------------------------------------------------------------*/
/*	Jetons
/*---------------------------------------------------------------------------------*/

.basis,
.jetons ul li a{
	display: none;
}

@media (min-aspect-ratio: 1/1) {
.jetons {
	position: absolute;
	top: calc(50% + 45rem);
	left: calc(50% + 70rem);
}

.jetons ul li a{
	position: fixed; /*Fix for IE, which creates mysteriously a huge space under jetons when using absolute*/ 
	background-color: hsl(0,0%,92.5%);
	width: 50rem;
	height: 50rem;
	border-radius: 50rem;
	box-shadow:	0 2rem 0 hsl(0,0%,92.5%);
	text-shadow: none;
	z-index:-100;
	display: inline;
}

.jetons ul li:nth-child(1) a{
	-webkit-transform:	translate(0rem, 0rem);
	transform:			translate(0rem, 0rem);
}

.jetons ul li:nth-child(2) a{
	-webkit-transform:	translate(-48rem, -3rem);
	transform:			translate(-48rem, -3rem);
}

.jetons ul li:nth-child(3) a{
	-webkit-transform:	translate(-22rem, -43rem);
	transform:			translate(-22rem, -43rem);
}

.jetons svg {
	width: 100%;
	height: 100%;
}

.jetons a:not(:hover) .sponsor{
	fill: #282828;
	-webkit-transition: all 5s;
	transition: all 5s;
}
}
/*---------------------------------------------------------------------------------*/
/*	Destkop
/*---------------------------------------------------------------------------------*/
@media (min-aspect-ratio: 1/1) {
	html {
		font-size: 0.25vw;
		overflow-y: hidden;
	}
	/*.icon {
		border-radius: 10rem;
		box-shadow: inset 0 0 5rem rgba(128,0,0,1);
		animation: glow 10s infinite;
	}*/
	.icon h1{
		display: none;
	}

	.cards {
		position: absolute;
		top: calc(50% - 85rem);
		left: calc(50% - 50rem);
	}

	.cards ul li:last-child div{
		display: inline;
		visibility: visible;
	}

	.cards ul li:target ~:last-child div{
		display: inline;
		visibility: hidden;
	}

	.cards ul li div {
		display: inline;
		visibility: hidden;
		-webkit-transition: z-index 0s linear 0.65s,
					visibility 0s linear 0.65s;
		transition: z-index 0s linear 0.65s,
					visibility 0s linear 0.65s;
	}

	.cards ul li:target div{
		z-index: 5;
		visibility: visible;
		-webkit-animation:	shuffle 0.65s ease 1 0s;
		animation:			shuffle 0.65s ease 1 0s;
	}

	.cards ul li nav a {
		top: 0rem !important;
		display: inline;
		z-index: -10;
		opacity: 0;
		visibility: hidden; /*Fallback*/
		-webkit-transform:	translate(0rem, 0rem) rotateZ(0deg);
		-webkit-transition: opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					z-index 0s linear 0.65s,
					-webkit-transform 0.65s ease 0s;
		transition: opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					z-index 0s linear 0.65s,
					-webkit-transform 0.65s ease 0s;
		transition: transform 0.65s ease 0s,
					opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					z-index 0s linear 0.65s;
		transition: transform 0.65s ease 0s,
					opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					z-index 0s linear 0.65s,
					-webkit-transform 0.65s ease 0s;
	}

	.cards ul li:target nav a{
		z-index: 1;
		opacity: 1;
		visibility: visible; /*Fallback*/
		-webkit-transition: opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					-webkit-transform 0.65s ease 0.65s,
					margin-left 0.5s;
		transition: opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					-webkit-transform 0.65s ease 0.65s,
					margin-left 0.5s;
		transition: transform 0.65s ease 0.65s,
					opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					margin-left 0.5s;
		transition: transform 0.65s ease 0.65s,
					opacity 0s linear 0.65s,
					visibility 0s linear 0.65s,
					-webkit-transform 0.65s ease 0.65s,
					margin-left 0.5s;
	}

	.cards ul li nav a:first-child:before,
	.cards ul li nav a:first-child:after{
		-webkit-transform: rotateY(0deg) rotateX(0deg);
		        transform: rotateY(0deg) rotateX(0deg);
	}

	.cards ul li nav a:first-child:after{
		content: '';
	}

	.cards ul li:nth-last-child(4n+1) div:before,
	.cards ul li nav a:nth-child(4n+1):before,
	.cards ul li nav a:nth-child(4n+1):last-child:after{
		content:'♠';
	}

	.cards ul li:nth-last-child(4n+2) div:before{
		content:'♥';
	}

	.cards ul li:nth-last-child(4n+3) div:before{
		content:'♦';
	}

	.cards ul li:nth-last-child(4n+4) div:before{
		content:'♣';
	}

	.cards ul li div:before,
	.cards ul li nav a:last-child:first-child:before,
	.cards ul li nav a:nth-last-child(2):nth-child(2):before,
	.cards ul li nav a:nth-last-child(3):nth-child(3):before,
	.cards ul li nav a:nth-last-child(4):nth-child(4):before,
	.cards ul li nav a:nth-last-child(4):nth-child(6):before,
	.cards ul li nav a:nth-last-child(5):nth-child(7):before,
	.cards ul li nav a:nth-last-child(2):nth-child(3):before,
	.cards ul li nav a:nth-last-child(3):nth-child(4):before,
	.cards ul li nav a:nth-last-child(4):nth-child(5):before,
	.cards ul li nav a:nth-last-child(5):nth-child(6):before{
		-webkit-animation:	blur 6s linear infinite -4s;
		animation:			blur 6s linear infinite -4s;
	}

	.cards ul li div:after,
	.cards ul li nav a:last-child:first-child:after,
	.cards ul li nav a:nth-last-child(2):nth-child(2):after,
	.cards ul li nav a:nth-last-child(3):nth-child(3):after,
	.cards ul li nav a:nth-last-child(4):nth-child(4):after,
	.cards ul li nav a:nth-last-child(4):nth-child(6):after,
	.cards ul li nav a:nth-last-child(5):nth-child(7):after,
	.cards ul li nav a:nth-last-child(2):nth-child(3):after,
	.cards ul li nav a:nth-last-child(3):nth-child(4):after,
	.cards ul li nav a:nth-last-child(4):nth-child(5):after,
	.cards ul li nav a:nth-last-child(5):nth-child(6):after{
		content:'\2630';
		width: 15rem;
		text-align: center;
		position: absolute;
		font-size: 15rem;
		top: 5rem;
		left: 3rem;
		-webkit-animation:	blur 6s linear infinite -1s;
		animation:			blur 6s linear infinite -1s;
	}

	.cards ul li:first-child:target > nav a:last-child:first-child:after,
	.cards ul li:first-child:target > nav a:nth-last-child(2):nth-child(2):after,
	.cards ul li:first-child:target > nav a:nth-last-child(3):nth-child(3):after,
	.cards ul li:first-child:target > nav a:nth-last-child(4):nth-child(4):after,
	.cards ul li:first-child:target > nav a:nth-last-child(4):nth-child(6):after,
	.cards ul li:first-child:target > nav a:nth-last-child(5):nth-child(7):after,
	.cards ul li:first-child:target > nav a:nth-last-child(2):nth-child(3):after,
	.cards ul li:first-child:target > nav a:nth-last-child(3):nth-child(4):after,
	.cards ul li:first-child:target > nav a:nth-last-child(4):nth-child(5):after,
	.cards ul li:first-child:target > nav a:nth-last-child(5):nth-child(6):after{
		content:'\2715';
	}

	.cards ul li:target nav a:nth-last-child(11):first-child{
		-webkit-transform:	translate(-115rem, 18rem) rotateZ(-39deg);
		transform:			translate(-115rem, 18rem) rotateZ(-39deg);
	}

	.cards ul li:target nav a:nth-last-child(9):first-child,
	.cards ul li:target nav a:nth-last-child(10):nth-child(2),
	.cards ul li:target nav a:nth-last-child(10):first-child{
		-webkit-transform:	translate(-98rem, 10rem) rotateZ(-33deg);
		transform:			translate(-98rem, 10rem) rotateZ(-33deg);
	}

	.cards ul li:target nav a:nth-last-child(8):nth-child(2),
	.cards ul li:target nav a:nth-last-child(9):nth-child(3),
	.cards ul li:target nav a:nth-last-child(8):first-child,
	.cards ul li:target nav a:nth-last-child(9):nth-child(2){
		-webkit-transform:	translate(-79rem, 4rem) rotateZ(-27deg);
		transform:			translate(-79rem, 4rem) rotateZ(-27deg);
	}

	.cards ul li:target nav a:nth-last-child(7):first-child,
	.cards ul li:target nav a:nth-last-child(7):nth-child(3),
	.cards ul li:target nav a:nth-last-child(8):nth-child(4),
	.cards ul li:target nav a:nth-last-child(6):first-child,
	.cards ul li:target nav a:nth-last-child(7):nth-child(2),
	.cards ul li:target nav a:nth-last-child(8):nth-child(3){
		-webkit-transform:	translate(-60rem, 0rem) rotateZ(-21deg);
		transform:			translate(-60rem, 0rem) rotateZ(-21deg);
	}

	.cards ul li:target nav a:nth-last-child(5):first-child,
	.cards ul li:target nav a:nth-last-child(6):nth-child(2),
	.cards ul li:target nav a:nth-last-child(6):nth-child(4),
	.cards ul li:target nav a:nth-last-child(7):nth-child(5),
	.cards ul li:target nav a:nth-last-child(4):first-child,
	.cards ul li:target nav a:nth-last-child(5):nth-child(2),
	.cards ul li:target nav a:nth-last-child(6):nth-child(3),
	.cards ul li:target nav a:nth-last-child(7):nth-child(4){
		-webkit-transform:	translate(-40rem, -2rem) rotateZ(-15deg);
		transform:			translate(-40rem, -2rem) rotateZ(-15deg);
	}

	.cards ul li:target nav a:nth-last-child(3):first-child,
	.cards ul li:target nav a:nth-last-child(4):nth-child(2),
	.cards ul li:target nav a:nth-last-child(5):nth-child(3),
	.cards ul li:target nav a:nth-last-child(5):nth-child(5),
	.cards ul li:target nav a:nth-last-child(6):nth-child(6),
	.cards ul li:target nav a:nth-last-child(3):nth-child(2),
	.cards ul li:target nav a:nth-last-child(4):nth-child(3),
	.cards ul li:target nav a:nth-last-child(5):nth-child(4),
	.cards ul li:target nav a:nth-last-child(6):nth-child(5){
		-webkit-transform:	translate(-20rem, -2rem) rotateZ(-9deg);
		transform:			translate(-20rem, -2rem) rotateZ(-9deg);
	}

	.cards ul li:target ~li .icon,
	.cards ul li:target nav a:last-child:first-child,
	.cards ul li:target nav a:nth-last-child(2):nth-child(2),
	.cards ul li:target nav a:nth-last-child(3):nth-child(3),
	.cards ul li:target nav a:nth-last-child(4):nth-child(4),
	.cards ul li:target nav a:nth-last-child(4):nth-child(6),
	.cards ul li:target nav a:nth-last-child(5):nth-child(7),
	.cards ul li:target nav a:nth-last-child(2):first-child,
	.cards ul li:target nav a:nth-last-child(2):nth-child(3),
	.cards ul li:target nav a:nth-last-child(3):nth-child(4),
	.cards ul li:target nav a:nth-last-child(4):nth-child(5),
	.cards ul li:target nav a:nth-last-child(5):nth-child(6){
		-webkit-transform:	rotateZ(-3deg);
		transform:			rotateZ(-3deg);
	}

	.cards ul li:target nav a:last-child:nth-child(3),
	.cards ul li:target nav a:nth-last-child(2):nth-child(4),
	.cards ul li:target nav a:nth-last-child(3):nth-child(5),
	.cards ul li:target nav a:nth-last-child(3):nth-child(7),
	.cards ul li:target nav a:nth-last-child(4):nth-child(8),
	.cards ul li:target nav a:last-child:nth-child(2),
	.cards ul li:target nav a:last-child:nth-child(4),
	.cards ul li:target nav a:nth-last-child(2):nth-child(5),
	.cards ul li:target nav a:nth-last-child(3):nth-child(6),
	.cards ul li:target nav a:nth-last-child(4):nth-child(7){
		-webkit-transform:	translate(20rem, 4rem) rotateZ(3deg);
		transform:			translate(20rem, 4rem) rotateZ(3deg);
	}

	.cards ul li:target nav a:last-child:nth-child(5),
	.cards ul li:target nav a:nth-last-child(2):nth-child(6),
	.cards ul li:target nav a:nth-last-child(2):nth-child(8),
	.cards ul li:target nav a:nth-last-child(3):nth-child(9),
	.cards ul li:target nav a:last-child:nth-child(6),
	.cards ul li:target nav a:nth-last-child(2):nth-child(7),
	.cards ul li:target nav a:nth-last-child(3):nth-child(8){
		-webkit-transform:	translate(40rem, 10.5rem) rotateZ(9deg);
		transform:			translate(40rem, 10.5rem) rotateZ(9deg);
	}

	.cards ul li:target nav a:last-child:nth-child(7),
	.cards ul li:target nav a:last-child:nth-child(9),
	.cards ul li:target nav a:nth-last-child(2):nth-child(10),	
	.cards ul li:target nav a:last-child:nth-child(8),
	.cards ul li:target nav a:nth-last-child(2):nth-child(9){
		-webkit-transform:	translate(60rem, 19rem) rotateZ(15deg);
		transform:			translate(60rem, 19rem) rotateZ(15deg);
	}

	.cards ul li:target nav a:last-child:nth-child(11),
	.cards ul li:target nav a:last-child:nth-child(10){
		-webkit-transform:	translate(79rem, 29.5rem) rotateZ(21deg);
		transform:			translate(79rem, 29.5rem) rotateZ(21deg);
	}
/*
	input[type='submit']:hover,
	.navigation:hover,
	.cards ul li nav a:hover:before	{
		text-shadow: 0.3rem 0.3rem rgba(128,0,0,1);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}

	.cards ul li nav a:hover:last-child:after	{
		text-shadow: 0.3rem -0.3rem rgba(128,0,0,1);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}
*/
	.cards ul li nav a:hover ~ a {
		margin-left: 60rem;
		-webkit-transition:	margin-left 0.5s;
		transition:			margin-left 0.5s;
	}

	.navigation,
	.cards ul li nav a:before,
	.cards ul li nav a:after	{
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}

	.cards ul li nav a:hover .ribbon{
		opacity: 0;
		-webkit-transition: all 0.8s;
		transition: all 0.8s;
	}

	.ribbon{
		-webkit-transition: all 0.8s;
		transition: all 0.8s;
	}

	.cards ul li nav a h1:nth-of-type(1){
		text-shadow: -0.3rem 0.3rem hsl(0,0%,72.5%);
		-webkit-transform:	rotateZ(-90deg);
		transform:			rotateZ(-90deg);
		width: 130rem;
		text-align: right;
		top: 82rem;
		left: -55rem;
	}

	.type span{
		visibility: hidden;
	}

	.type span:nth-child(1) {
		animation: type 1s ease 2.2s infinite;
	}

	.type span:nth-child(2) {
		animation: type 1s ease 2.4s infinite;
	}

	.type span:nth-child(3) {
		animation: type 1s ease 2.6s infinite;
	}

	.type span:nth-child(4) {
		animation: type 1s ease 2.8s infinite;
	}

	.type span:nth-child(5) {
		animation: type 1s ease 3s infinite;
	}

	.type span:nth-child(6) {
		animation: type 1s ease 3.2s infinite;
	}

	.type span:nth-child(7) {
		animation: type 1s ease 3.4s infinite;
	}

	.type span:nth-child(8) {
		animation: type 1s ease 3.6s infinite;
	}

	.type span:nth-child(9) {
		animation: type 1s ease 3.8s infinite;
	}

	.type span:nth-child(10) {
		animation: type 1s ease 4s infinite;
	}
	
	h1.roll span:nth-child(1) {
		animation: roll 14s ease 2.2s infinite;
	}

	h1.roll span:nth-child(2) {
		animation: roll 14s ease 2.4s infinite;
	}

	h1.roll span:nth-child(3) {
		animation: roll 14s ease 2.6s infinite;
	}

	h1.roll span:nth-child(4) {
		animation: roll 14s ease 2.8s infinite;
	}

	h1.roll span:nth-child(5) {
		animation: roll 14s ease 3s infinite;
	}

	h1.roll span:nth-child(6) {
		animation: roll 14s ease 3.2s infinite;
	}

	h1.roll span:nth-child(7) {
		animation: roll 14s ease 3.4s infinite;
	}

	h1.roll span:nth-child(8) {
		animation: roll 14s ease 3.6s infinite;
	}

	h1.roll span:nth-child(9) {
		animation: roll 14s ease 3.8s infinite;
	}

	h1.roll span:nth-child(10) {
		animation: roll 14s ease 4s infinite;
	}

	h1.roll span:nth-child(11) {
		animation: roll 14s ease 4.2s infinite;
	}

	h1.roll span:nth-child(12) {
		animation: roll 14s ease 4.4s infinite;
	}

	h1.roll span:nth-child(13) {
		animation: roll 14s ease 4.6s infinite;
	}

	h1.roll span:nth-child(14) {
		animation: roll 14s ease 4.8s infinite;
	}

	h1.roll span:nth-child(15) {
		animation: roll 14s ease 5s infinite;
	}
		
	h2.roll span:nth-child(1) {
		animation: roll 14s ease 9.2s infinite;
	}

	h2.roll span:nth-child(2) {
		animation: roll 14s ease 9.4s infinite;
	}

	h2.roll span:nth-child(3) {
		animation: roll 14s ease 9.6s infinite;
	}

	h2.roll span:nth-child(4) {
		animation: roll 14s ease 9.8s infinite;
	}

	h2.roll span:nth-child(5) {
		animation: roll 14s ease 10s infinite;
	}

	h2.roll span:nth-child(6) {
		animation: roll 14s ease 10.2s infinite;
	}

	h2.roll span:nth-child(7) {
		animation: roll 14s ease 10.4s infinite;
	}

	h2.roll span:nth-child(8) {
		animation: roll 14s ease 10.6s infinite;
	}

	h2.roll span:nth-child(9) {
		animation: roll 14s ease 10.8s infinite;
	}

	h2.roll span:nth-child(10) {
		animation: roll 14s ease 11s infinite;
	}

	h2.roll span:nth-child(11) {
		animation: roll 14s ease 11.2s infinite;
	}

	h2.roll span:nth-child(12) {
		animation: roll 14s ease 11.4s infinite;
	}

	h2.roll span:nth-child(13) {
		animation: roll 14s ease 11.6s infinite;
	}

	h2.roll span:nth-child(14) {
		animation: roll 14s ease 11.8s infinite;
	}

	h2.roll span:nth-child(15) {
		animation: roll 14s ease 12s infinite;
	}
	
	h2.roll span:nth-child(16) {
		animation: roll 14s ease 12.2s infinite;
	}

	h2.roll span:nth-child(17) {
		animation: roll 14s ease 12.4s infinite;
	}

	h2.roll span:nth-child(18) {
		animation: roll 14s ease 12.6s infinite;
	}

	h2.roll span:nth-child(19) {
		animation: roll 14s ease 12.8s infinite;
	}

	h2.roll span:nth-child(20) {
		animation: roll 14s ease 13s infinite;
	}
	.cards ul li:target ~li .icon{
		top: 2.5rem;
		left: -3rem;
	}
}
@media (min-aspect-ratio: 18/10) {
	html {
		font-size: 0.5vh;
	}
}