@font-face {
font-family: Palatino;
src: url("fonts/pala.ttf");
}
@font-face {
font-family: Palatino;
src: url("fonts/palab.ttf");
font-weight: bold;
}

body {
width: 100%;
height: 100%;
margin:0;
padding:0;
font-family: Palatino;
overflow: hidden;
}

a {
text-decoration: none;
}


h1 {
font-size: 0;
}

* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.wrapper {
flex-flow: column;
display: flex;
height: 100%;
}

.top {
flex: 1 1 auto;
background-image: url('img/bg.jpg');
background-size: cover;
background-position-y: 60%;
background-position-x: center;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
transition: 1s;
}

.table {
width: 100%;
height: 100%;
translate: 50% 70%;
transition: 1s;
}

.slots {
position: fixed;
transition: 1s;
}

.slot {
position: fixed;
width: 20em;
height: 45em;
transform: translate(-50%);
transition: 0.3s;
transform-origin: left top;
}

.slot:hover {
transform: translate(-50%,-60%) rotate(0deg);
rotate: none !important;	
}

.slot.s1 {
translate: -25em 3em;
rotate: -10deg;
}

.slot.s2 {
translate: -15em 1em;
rotate: -6deg;	
}

.slot.s3 {
translate: -5em;
rotate: -2deg;
}

.slot.s4 {
translate: 5em;
rotate: 2deg;		
}

.slot.s5 {
translate: 15em 1em;	
rotate: 6deg;	
}

.slot.s6 {
translate: 25em 3em;
rotate: 10deg;	
}

.card {
position: fixed;
display: block;
width: 20em;
height: 30em;
background-size: contain;
border-radius: 0.8em;
background-repeat: no-repeat;
cursor: pointer;
box-shadow: -0.5em 1em 0.5em rgba(0,0,0,0.5);
transition: 0.3s;
}

.slot:hover .card {
box-shadow: -0.5em 26em 1em rgba(0,0,0,0.5);
}

.card.localisation {
background-image: url('img/card_localisation.jpg');
}

.card.email {
background-image: url('img/card_email.jpg');
}

.card.fbpage {
background-image: url('img/card_fbpage.jpg');
}

.card.fbgroup {
background-image: url('img/card_fbgroup.jpg');
}

.card.discord {
background-image: url('img/card_discord.jpg');
}

.card.about {
background-image: url('img/card_about.jpg');
}

.card .text {
position: fixed;
color: black;
font-size: 0.8em;
}

.card .title {
transform: translate(2em,1.7em);
font-weight: bold;
font-size: 1em;
width: 15em;
}

.card .num {
transform: translate(21.9em,2.35em);
font-weight: bold;
width: 1em;
}

.card .short {
transform: translate(2em,19em);
font-weight: bold;
font-size: 0.9em;
width: 15em;
}

.card .desc {
transform: translate(2.8em,23em);
width: 19.5em;
}

.card .copy {
transform: translate(11em,34.5em);
color: rgba(255,255,255,0.8);
width: 13em;
}

.content {
flex: 0 1 30%;
background-image: url('img/bg_white.jpg');
background-size: cover;
background-position: top center;
margin: 0;

box-shadow: 0 -1em 2em rgba(0,0,0,0.7);
z-index: 1;
transition: 1s;
}

.buttons {
text-align: center;
margin: 1em 0;
transition: 1s;
white-space: nowrap;
}

.logo {
background-size: contain;
background-repeat: no-repeat;
background-image: url('img/logo.png');
display: block;
width: 14em;
height: 7em;
margin: 1em auto;
transition: 1s;
}

.bt {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 5em;
height: 5em;
margin: 0.5em 0.5em 1.5em 0.5em;
transition: 1s;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

.bt:hover {
animation-name: bounce;
}

.bt.localisation {
background-image: url('img/icon_loc.png');
}

.bt.email {
background-image: url('img/icon_email.png');
}

.bt.fbpage {
background-image: url('img/icon_page.png');
}

.bt.fbgroup {
background-image: url('img/icon_group.png');
}

.bt.discord {
background-image: url('img/icon_discord.png');
}

.bt.about {
background-image: url('img/icon_about.png');
}

.buttons a:hover::after {
content: attr(alt);
position: absolute;
translate: -92% 7em;
width: 8em;
text-align: center;
background-color: rgba(0,0,0,0.8);
color: white;
padding: 0.4em 1em 0.5em 1em;
border-radius: 1em;
font-size: 0.8em;
pointer-events: none;
z-index:10;
white-space: break-spaces;
}

.details {
font-size: 0.9em;
text-align: center;
margin: -1em 1em;
}

.footer {
margin: auto;
display: block;
width: 100%;
text-align: center;
font-size: 0.8em;
color: rgba(0,0,0,0.5);
position: fixed;
bottom: 0;
}

@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
	transform: translateY(0);
	}
	40% {
	transform: translateY(-30px);
	}
	60% {
	transform: translateY(-15px);
	}
}

/* Large */
@media screen and (max-width: 1100px), screen and (max-height: 800px) {
	.top { min-height: 400px; }
	.slots { scale: 80%; }
}

/* Medium */
@media screen and (max-width: 900px), screen and (max-height: 700px) {
	.top { min-height: 300px; }
	.slots { scale: 60%; }
}

/* Small */
@media screen and (max-width: 700px), screen and (max-height: 600px) {
	.top { min-height: 180px; height: 50%; }
	.slots { scale: 40%; }
}

/* Landscape */
@media screen and (orientation: landscape) {
	.details { scale: 0; }
}

/* Portrait */
@media screen and (max-width: 900px) and (orientation: portrait) {
	.content { flex: 0 1 50%; }
	
	.logo { width:8em; height: 4em; }
	.bt { width: 2.5em; height: 2.5em; }
	.buttons { margin: 0 0; } 
	.buttons a:hover::after { translate: -80% 4.5em; }
	.footer { font-size: 0.6em; }
}