/* ------------ STYLES INITIAUX ------------ */

@font-face {
    font-family: "Montserrat-XLight";
    src: url('Typos/Montserrat-ExtraLight.ttf');}
@font-face {
    font-family: "Montserrat";
    src: url('Typos/Montserrat-Regular.ttf');}
@font-face {
    font-family: "Montserrat-Bold";
    src: url('Typos/Montserrat-Bold.ttf');}
@font-face {
    font-family: "Cinzel";
    src: url('Typos/Cinzel-Regular.ttf');}
@font-face {
    font-family: "Cinzel-Bold";
    src: url('Typos/Cinzel-Bold.ttf');}

.MontserratBold {
	font-family: 'Montserrat-Bold';
}

body{
	margin : 0;
	padding : 0;
	background-color : #000;
	width : 100%;
	perspective: 1px;
	-webkit-perspective: 1px;
}

h1, h2, h3{
	margin-block-start: 0;
    margin-block-end: 0;
    font-weight: normal;
}

::-webkit-scrollbar {
   width: 3px;
   background-color : black;
}

::-webkit-scrollbar-thumb {
	background-color: #4d7a6e;
}

html, body {
	height : 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.content {
	position : relative;
	width: 100%;
	height : 100%;
}

.nuages1, .nuages2, .vagues, .logo, 
.foudre1, .foudre2, .pluie, .pluie1, .pluie2, 
.pluie3, .pluie4, .pluie5, .pluie6, .pluie7, .bateau,
.falaise, .RunesZ2-1, .RunesZ2-2, .RunesZ2-3, .RunesZ2-4 {
	pointer-events: none;
	position : absolute;
}

/* ------------ LOADER ------------ */

.loader {
	opacity: 1;
	position : absolute;
	z-index : 9999;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: wait;
	background-image: radial-gradient(circle, #171c1a, #283832);
}

.loading {
	overflow: hidden;
}

.chargement {
	color: white;
	font-family: 'Cinzel', sans-serif;
	font-size: 35px;
	position: absolute;
	left: 50%;
	top: 54%;
	transform: translate(-50%,-50%);
	opacity: .7;
}

.lds-ripple {
  width: 64px;
  height: 64px;
  transform: translate(-50%,-50%);
}

.lds-ripple div {
  position: fixed;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  margin-top: 50vh;
  margin-left: 50vw;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

/* --------------------------------------------------- HEADER --------------------------------------------------- */

header {
	width: 100vw;
	height: 60%;
}

.ciel1 {
	background: linear-gradient(#ff7044, #161413);
}

.ciel2 {
	background: linear-gradient(#125624, #bfbc99);
}

.ciel3 {
	background: linear-gradient(#52fff7, #ffd4a7);
}

.ciel4 {
	background: url(Images/Etoiles.png), linear-gradient(#7d86c5, #1a1421);
	background-size: 30%;
}

.ciel5 {
	background: linear-gradient(#e8e8e8, #192d27);
}

.langage {
	position: absolute;
	right : 20px;
	top : 20px;
	cursor : pointer;
	color: #fff;
	text-decoration: none;
	transition: .1s;
	font-family: 'Montserrat-Bold', sans-serif;
}

.langage:hover {
	text-shadow: #fff 0 0 30px;
}

.nuages1 {
	background: url(Images/Nuages1.png);
	background-size : cover;
	opacity: .8;
	width: 100vw;
	height : 300px;
	animation : NuagesUn 90s linear infinite;
}

.nuages2 {
	background: url(Images/Nuages2.png);
	background-size : cover;
	opacity: .8;
	width: 100vw;
	height : 490px;
	animation : NuagesDeux 180s linear infinite;
}

.vagues {
	height: 150px;
	bottom: 40%;
	width: 100vw;
	background: url(Images/Vagues.png);
	background-size : cover;
	animation : Vagues 42s linear infinite;
}

.logo {
	transform: translateZ(-.3px) translate(-50%, -50%);
	-webkit-transform: translateZ(-.3px) translate(-50%, -50%);
	height: 450px;
	left: 50%;
	top : 25%;
}

.falaise {
	transform: translateY(-100%);
	top: 60%;
	left: 0;
	height: 50%;
	transition: 1s;
}

.bateau {
	transform: translateY(-100%);
	top: 65%;
	height: 80%;
	right: 50px;
	transition: 1s;
}

.bateauload {
	right: 53px;
}

.foudre1{
	height: 60%;
	width: 100%;
	animation : foudre 25s ease-out 13.75s both infinite normal;
}

.foudre2 {
	height: 60%;
	width: 100%;
	animation: foudre 28s ease-out 15s both infinite normal;
}

.pluie {
	background: url(Images/Pluie.png) no-repeat;
	height: 60vh;
	width: 100vw;
}

.pluie1 {
	animation : PluieUn 10s linear both infinite;
}

.pluie2 {
	animation : PluieUn 12s linear 2s both infinite;
}

.pluie3 {
	background: url(Images/Pluie2.png) no-repeat;
	animation : PluieUn 9s linear 1s both infinite;
}

.pluie4 {
	animation : PluieDeux 13s linear 3s both infinite;
}

.pluie5 {
	animation : PluieDeux 11s linear 6s both infinite;
}

.pluie6 {
	animation : PluieDeux 15s linear 12s both infinite;
}

.pluie7 {
	background: url(Images/Pluie2.png) no-repeat;
	animation : PluieUn 9s linear 9s both infinite;
}

/* --------------------------------------------------- NAVIGATION --------------------------------------------------- */

nav {
	position: sticky;
	margin-top: -40vh;
	width: 100%;
	height: 50px;
	background: rgba(0,0,0,.7);
	top: 0;
	transition: .3s;
}

nav ul {
	text-align: center;
	padding: 0;
	margin-top: -1em;
	cursor: pointer;
}

nav ul li {
	list-style: none;
	display: inline-block;
	margin-top: 15px;
}

nav ul li a {
	font-size: 1.1em;
	font-family: 'Montserrat-XLight', sans-serif;
	text-align: center;
	padding: 2vw;
	color: #ffad65;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	transition: .25s;
}

nav ul li a:hover , .NavNaglfar:hover {
	color: #fff;
	text-shadow: #fff 0 0 30px;
}

.NavNaglfar {
	position: sticky;
	padding: 7px;
	color: white;
	top: 8px;
	left: 53px;
	font-size: 1.1em;
	font-family: 'Montserrat-Bold', sans-serif;
	text-decoration: none;
	transition: .25s;
}

/* --------------------------------------------------- ZONE 1 --------------------------------------------------- */

.Zone1 {
	position : absolute;
	background-image : url(Images/Zone1.jpg);
	width: 100vw;
	height: 1556px;
}

.Serpent {
	position : absolute;
	width: 100vw;
	background-image : url(Images/Zone1_Serpent.jpg);
	height: 1556px;
	animation : serpent 25s ease-out 13.75s both infinite normal;
}

.Bienvenue {
	position: fixed;
	margin: 0;
	width: 45vw;
	transform: translateX(-50%);
	margin-left: 50vw;
	bottom: 5vh;
}

.Texte1 {
	position: relative;
	color: white;
	width: 45vw;
	opacity: .8;
	margin-top: 40vh;
	margin-left: 27.5vw;
	font-size: 1.3em;
	border-radius: 7px;
	padding: 15px;
	background-color : rgba(255,255,255,.03);
	text-indent: 20px;
	text-align: center;
	font-family: 'Montserrat-XLight', sans-serif;
}

#death {
	padding-top: 15px;
}

.Death {
	position: relative;
	transform: translateX(-50%);
	margin: 0;
	width: 55vw;
	left: 50vw;
	margin-top: 65px;
}

.DeathBis {
	position: relative;
	margin: 0;
	color: #ffad65;
	font-size: 1.7em;
	margin-top: 120px;
	left: 10vw;
	width: 80vw;
	text-align: center;
	font-weight: inherit;
	text-transform: uppercase;
	font-family: 'Montserrat-XLight', sans-serif;
}

.Texte2 {
	text-indent: 20px;
	font-size: 1.3em;
	font-family: 'Montserrat-XLight', sans-serif;
	color: #fff;
	width: 50vw;
	position: relative;
	transform: translateX(-50%);
	text-align: center;
	margin-left: 50vw;
	top: 15px;
	border-radius: 3px;
}

.Algues {
	position: absolute;
	width: 100vw;
	bottom: 0;
	left: 0;
}


/* --------------------------------------------------- ZONE 2 --------------------------------------------------- */

.Zone2{
	position : relative;
	margin-top: 1546px;
	background-color: #fff;
	width: 100vw;
	height: 100vh;
}

.RunesZ2-1, .RunesZ2-2, .RunesZ2-3, .RunesZ2-4 {
	height: 200px;
}

.RunesZ2-1 {
	left: 5%;
	top: 9%;
}

.RunesZ2-2 {
	right: 5%;
	top: 9%;
	transform: scaleX(-1);
}

.RunesZ2-3 {
	left: 5%;
	bottom: 5%;
	transform: rotate(-90deg);
}

.RunesZ2-4 {
	right: 5%;
	bottom: 5%;
	transform: scaleX(-1) rotate(-90deg);
}

.histoire {
	position: relative;
	margin: 0;
	color: #141e1d;
	width: 100vw;
	top: 70px;
	text-align: center;
	font-size: 80px;
	font-weight: inherit;
	font-family: 'Cinzel', sans-serif;
}

.texte3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	color: black;
	width: 40vw;
	position: relative;
	left: 50%;
	top: 60px;
	transform : translateX(-50%);
}

.icone-sq {
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
	bottom: 15%;
	width: 15%;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 850px;
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  bottom: 6%;
  margin: auto;
  transition: 1s;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 15%;
  transform: translateY(-50%);
  height: 50%;
  transition: 0.6s ease;
  border-radius: 0 50% 50% 0;
  user-select: none;
}

.prev {
	background: url(Images/FlecheGauche.png) no-repeat;
	background-position: 5% 50%;
}

/* Position the "next button" to the right */
.next {
	background: url(Images/FlecheDroite.png) no-repeat;
	background-position: 95% 50%;
	right: 0;
	border-radius: 50% 0 0 50%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(250,250,250,0.1);
}

.prev:hover {
	background-position: 20% 50%;
}

.next:hover {
	background-position: 80% 50%;
}

.dotzone {
	cursor: default;
	margin-top: -25px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  margin-top: 5px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.4s ease;
}

.active {
  background-color: #42afa5;
}

.dot:hover {
  background-color: #2eecdb;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* --------------------------------------------------- ZONE 3 --------------------------------------------------- */

.zone3{
	position: relative;
	background : url(Images/Zone3.jpg);
	width: 100vw;
	height: 130vh;
}

.grotte {
	background-image: url(Images/Grotte.png);
	background-size: contain;
	background-repeat: repeat-x;
	width: 100vw;
	height: 25vh;
}

.team {
	position: relative;
	margin: 0;
	color: #fff;
	width: 100vw;
	top: -15vh;
	text-align: center;
	font-size: 80px;
	font-weight: inherit;
	font-family: 'Cinzel', sans-serif;
	text-shadow:0 0 10px #344b7c;
}

/* ------------ CARTES DES PERSOS ------------ */

.fullteam {
  position: relative;
  top: -10%;
  width: 100vw;
  padding: 0;
  text-align: center;
  user-select: none;
}

img {
  user-select: none;
}

.perso {
  position: relative;
  display: inline-block;
  width: 250px;
  border-radius: 4px;
  margin-left: 10px;
  height: 402px;
  background-size: contain;
  cursor: pointer;
  transition: .3s;
  user-select: none;
}

.color, .dark {
  position: absolute;
  width: 250px; /* = Largeur de .perso */
  border-radius: 4px;
  margin-left: -50%;
  transition: .4s;
  user-select: none;
}

.falkodark, .falkocolor, 
.marekdark,.marekcolor, 
.kellydark, .kellycolor, 
.matthieudark, .matthieucolor,
.matthisdark, .matthiscolor {
  opacity: 1;
}

.falkodark--OFF, .falkocolor--OFF, 
.marekdark--OFF,.marekcolor--OFF, 
.kellydark--OFF, .kellycolor--OFF,
.matthieudark--OFF, .matthieucolor--OFF,
.matthisdark--OFF, .matthiscolor--OFF {
  opacity: 0;
  transform: scale(.80);
}

.falkoscale, .marekscale, .kellyscale, .matthieuscale, .matthisscale {
  transform: scale(.97);
}

.color:hover {
  opacity: 0;
}

.nom {
  position: absolute;
  bottom: 0;
  display: inline-block;
  color: white;
  font-family: 'Cinzel', sans-serif;
  margin-left: -125px; /* = Largeur de .perso/2 */
  padding-right: 20px;
  font-size: 1.6em;
  transform: translateX(-50%);
  transition: .7s ease-in-out;
  pointer-events: none;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}

.falkonom--ON, .mareknom--ON, .kellynom--ON, 
.matthieunom--ON, .matthisnom--ON {
  opacity: 0;
}

.falko {
  background-image: url(Images/BGFalko.jpg);
  margin-left: 0;
}

.marek {
  background-image: url(Images/BGMarek.jpg);
}
/*
.kelly {
  background-image: url(Images/BGKelly.jpg);
}*/

.matthieu {
  background-image: url(Images/BGMatthieu.jpg);
}
/*
.matthis {
  background-image: url(Images/BGMatthis.jpg);
}*/

.perso:hover {
  transform: scale(.97);
}

/* ------------ PARTIE STATS ------------ */

.zonestats {
  width : 100vw;
  margin-top: -105px;
  pointer-events: none;
}

.falkostats, .marekstats, .kellystats, .matthieustats, .matthisstats {
  position: absolute;
  width: 100vw;
  opacity: 0;
  transition: 1s;
  animation: stats--OFF 1s forwards;
}

.falkostats--ON, .marekstats--ON, .kellystats--ON, 
.matthieustats--ON, .matthisstats--ON {
  animation: stats--ON 1s forwards;
}

.nom-famille, .statut, .prenom, .classe, .classeType, .roles, .Skill-Name {
  color: white;
  font-family: 'Cinzel', sans-serif;
  text-align : center;
  user-select: none;
  transform: translateX(-50%);
}

.prenom {
  position: absolute;
  left: 50vw;
  margin-top: -30px;
  font-size: 2.8em;
  opacity: 0;
  transition: .7s ease-in-out;
  letter-spacing: 5px
}

.prenom--ON {
  margin-top: -3px;
  opacity: 1;
  letter-spacing: 1px
}

.nom-famille {
  margin-top: 30px;
  font-family: 'Cinzel-Bold', sans-serif;
  font-size: 3.4em;
  margin-left: 50%;
}

.statut {
  margin-top : -10px;
  font-size: 1.3em;
  margin-left: 50%;
}

.trait {
  position : absolute;
  width: 25%;
  height: 2px;
  border-radius:  : 20px;
  background-color : #fff;
  top: 45px;
  left: 15%;
}

.trait-droite {
  left: auto;
  right: 15%;
}

/* ------------ Partie RPG ------------ */

.classe, .classeType {
  margin-top: -15px;
  margin-left: 12%;
  transform: none;
  text-align: left;
  font-size: 1.3em;
}

.classeType {
  margin-top: -30px;
  font-size: 2.2em;
}

.statsIcon, .iconHalo {
  transform: translateX(-50%);
  display: block;
  margin-left: 14%;
  margin-top: 20px;
}

.iconHalo {
  position: absolute;
}

.coeur {
  margin-top: -22px;
}
.haloCoeur {
  margin-top: -37px;
  left: -37px;
  animation: HaloCoeur 1.5s linear infinite;
}
.haloEndu {
  margin-top: 17px;
  left: -31px;
  animation: HaloEndu 1s linear infinite;
}
.haloMana {
  margin-top: 92px;
  left: -38px;
  animation: HaloMana 10s linear infinite;
}

/* ------------ JAUGES ------------ */

.zoneJauges {
  position: absolute;
  top: 196px;
  left: 17%;
  width: 20%;
  height: 145px;
}

.barreVie, .barreEndu, .barreMana {
  width: 100%;
  height: 9px;
  position: absolute;
  border-radius: 5px;
}

.barreVie {
  background-color: #462b2b;
}
.barreEndu {
  transform: translateY(-50%);
  top: 50%;
  background-color: #484234;
}
.barreMana {
  background-color: #352e46;
  bottom: 0;
}

.txtJauge {
  position: absolute;
  font-size: 1.1em;
  top: -5px;
  right: 0;
  color: white;
  font-family: 'Cinzel', sans-serif;
  user-select: none;
}

.vie, .endu, .mana {
  height: 100%;
  transition: .9s ease-in-out;
  border-radius: 5px;
}

.vie {
  background-color : #e64849;
}
.endu {
  background-color : #f8ce4a;
}
.mana {
  background-color : #8451f7;
}

/* ------------ Animation des jauges ------------ */

.vieFalko--ON {
  animation: 2s Falko-Vie ease-in-out forwards;
}
.enduFalko--ON {
  animation: 2s Falko-Endu ease-in-out forwards;
}
.manaFalko--ON {
  animation: 2s Falko-Mana ease-in-out forwards;
}

.vieMarek--ON {
  animation: 2s Marek-Vie ease-in-out forwards;
}
.enduMarek--ON {
  animation: 2s Marek-Endu ease-in-out forwards;
}
.manaMarek--ON {
  animation: 2s Marek-Mana ease-in-out forwards;
}
/*
.vieKelly--ON {
  animation: 2s Kelly-Vie ease-in-out forwards;
}
.enduKelly--ON {
  animation: 2s Kelly-Endu ease-in-out forwards;
}
.manaKelly--ON {
  animation: 2s Kelly-Mana ease-in-out forwards;
}*/

.vieMatthieu--ON {
  animation: 2s Matthieu-Vie ease-in-out forwards;
}
.enduMatthieu--ON {
  animation: 2s Matthieu-Endu ease-in-out forwards;
}
.manaMatthieu--ON {
  animation: 2s Matthieu-Mana ease-in-out forwards;
}
/*
.vieMatthis--ON {
  animation: 2s Matthis-Vie ease-in-out forwards;
}
.enduMatthis--ON {
  animation: 2s Matthis-Endu ease-in-out forwards;
}
.manaMatthis--ON {
  animation: 2s Matthis-Mana ease-in-out forwards;
}*/

/* ------------ COURTE DESCRIPTION ------------ */

.description {
  font-family: 'Montserrat', sans-serif;
  transform: translateX(-50%);
  transition: .9s ease-in-out;
  letter-spacing: 5px;
  position: absolute;
  text-align: center;
  user-select: none;
  color: #fff;
  opacity: 0;
  width: 20%;
  left: 50%;
  top: 60%;
}

.description--ON {
  top: 50%;
  opacity: 1;
  letter-spacing: 0;
}

b {
  font-family: 'Montserrat-Bold', sans-serif;
}

/* ------------ RÔLES/COMPÉTENCES ------------ */

.roles {
  position: absolute;
  top: 25%;
  right: 12%;
  transform: none;
  text-align: right;
  font-size: 2.2em;
}

.zoneRoles {
  position: absolute;
  top: 90px;
  right: 13%;
  width: 24%;
  height: 258px;
  pointer-events: none;
}

.SkillGroup {
  position: absolute;
}

.Skill-Name {
  position: absolute;
  margin-top: -2px;
  left: 50%;
  width: 140%;
}

.Skill-Icon {
  max-width: 96px;
  width: 100%;
  pointer-events: auto;
  transition: .3s;
  animation: Rotation 5s ease-in-out infinite alternate;
}

/* ------------ Falko ------------ */

.FalkoSkill-1 {
  top: 0;
  left: 0;
  animation: Float-Horizontal 3s ease-in-out infinite alternate;
}
.FalkoSkill-2 {
  top: 10%;
  left: 50%;
  animation: Float-Vertical 3s ease-in-out 1s infinite alternate;
}
.FalkoSkill-3 {
  bottom: 5%;
  left: 20%;
  animation: Float-Vertical 4s ease-in-out infinite alternate;
}
.FalkoSkill-4 {
  bottom: -5%;
  right: 0;
  animation: Float-Horizontal 2.5s ease-in-out 2s infinite alternate;
}

/* ------------ Marek ------------ */

.MarekSkill-1 {
  top: 0;
  left: 0;
  animation: Float-Horizontal 3s ease-in-out infinite alternate;
}
.MarekSkill-2 {
  top: 10%;
  left: 50%;
  animation: Float-Vertical 3s ease-in-out 1s infinite alternate;
}
.MarekSkill-3 {
  bottom: -5%;
  left: 20%;
  animation: Float-Horizontal 4s ease-in-out infinite alternate;
}
.MarekSkill-4 {
  bottom: -5%;
  right: 0;
  animation: Float-Horizontal 2.5s ease-in-out 2s infinite alternate;
}

/* ------------ Kelly ------------ */
/*
.KellySkill-1 {
  top: 10%;
  left: 10%;
  animation: Float-Horizontal 3s ease-in-out infinite alternate;
}
.KellySkill-2 {
  top: 30%;
  left: 50%;
  animation: Float-Vertical 3s ease-in-out 1s infinite alternate;
}*/

/* ------------ Matthieu ------------ */

.MatthieuSkill-1 {
  top: 25%;
  left: 25%;
  animation: Float-Vertical 3s ease-in-out infinite alternate;
}

/* ------------ Matthis ------------ */
/*
.MatthisSkill-1 {
  top: 25%;
  left: 25%;
  animation: Float-Vertical 3s ease-in-out infinite alternate;
}*/

/* --------------------------------------------------- ZONE 4 --------------------------------------------------- */

.zone4{
	position: relative;
	background : #000;
	width: 100vw;
	height: 60vh;
}

.helpus {
	position: absolute;
	color: #fff;
	font-family: 'Cinzel', sans-serif;
	text-align: center;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	font-size: 70px;
	font-style: italic;
}

/* --------------------------------------------------- AUDIO --------------------------------------------------- */

.audio {
	position: sticky;
	margin-top: -99vh;
	width : 24px;
	height : 24px;
	left : 20px;
	top : 14px;
	background-image : url(Images/Audio.png);
	cursor : pointer;
}

.audio--on {
	background-position : 0px 24px;
}

/* ---------------------------------------- ANIMATION ---------------------------------------- */

@keyframes NuagesUn {
	0%{background-position : 0px;}
	100% {background-position : 4315px;}}

@keyframes NuagesUnMobileVertical {
	0%{background-position : 0px;}
	100% {background-position : 1870px;}}

@keyframes NuagesUnMobileHorizontal {
	0%{background-position : 0px;}
	100% {background-position : 1007px;}}

@keyframes NuagesDeux {
	0%{background-position : 0px;}
	100% {background-position : -5187px;}}

@keyframes NuagesDeuxMobileVertical {
	0%{background-position : 0px;}
	100% {background-position : -3018px;}}

@keyframes NuagesDeuxMobileHorizontal {
	0%{background-position : 0px;}
	100% {background-position : -1415px;}}

@keyframes Vagues {
	0%{background-position : 0px;}
	100% {background-position : -2714px;}}

@keyframes VaguesMobileVertical {
	0%{background-position : 0px;}
	100% {background-position : -2171px;}}

@keyframes VaguesMobileHorizontal {
	0%{background-position : 0px;}
	100% {background-position : -1629px;}}

@keyframes foudre {
	0%{opacity: 0;}
	44.5% {opacity: 0;}
	45% {opacity: 1;}
	53% {opacity: 0;}
	100% {opacity: 0;}}

@keyframes PluieUn {
	0%{background-position : 1500px -1500px;}
	100% {background-position : -1500px 1500px;}}

@keyframes PluieDeux {
	0%{background-position : 500px -1500px;}
	100% {background-position : -1500px 500px;}}

@keyframes serpent {
	0%{opacity: 0;}
	44.5% {opacity: 0;}
	45% {opacity: 1;}
	56.5% {opacity: 0;}
	100% {opacity: 0;}}

/* ------------ APPARITION/DISPARITION DE LA ZONE DE STATS ------------ */

@keyframes stats--ON {
	0%{opacity : 0;}
	100% {opacity : 1;}}

@keyframes stats--OFF {
	0%{opacity : 1;}
	100% {opacity : 0;}}

/* ------------ HALOS ------------ */

@keyframes HaloCoeur {
	0%{transform : scale(1);}
	25%{transform : scale(1);}
	30%{transform : scale(1.1);}
	35%{transform : scale(1);}
	40%{transform : scale(1.1);}
	45%{transform : scale(1);}
	100% {transform : scale(1);}}

@keyframes HaloEndu {
	0%{transform : scale(.5);}
	5%{transform : scale(1.05);}
	50%{opacity : 0;}
	100% {transform : scale(.5);}}

@keyframes HaloMana {
	0%{transform : rotate(0deg); opacity: 1;}
	20%{opacity: .5;}
	30%{opacity: .8;}
	45%{opacity: .4;}
	75%{opacity: .9;}
	90%{opacity: .6;}
	100% {transform : rotate(360deg); opacity: 1;}}

/* ------------ ANIMATIONS DES BARRES DE SKILL ------------ */

@keyframes Falko-Vie {
	0%{width : 0%;}
	100% {width : 81%;}}
@keyframes Falko-Endu {
	0%{width : 0%;}
	100% {width : 17%;}}
@keyframes Falko-Mana {
	0%{width : 0%;}
	100% {width : 93%;}}

@keyframes Marek-Vie {
	0%{width : 0%;}
	100% {width : 55%;}}
@keyframes Marek-Endu {
	0%{width : 0%;}
	100% {width : 45%;}}
@keyframes Marek-Mana {
	0%{width : 0%;}
	100% {width : 80%;}}
/*
@keyframes Kelly-Vie {
	0%{width : 0%;}
	100% {width : 90%;}}
@keyframes Kelly-Endu {
	0%{width : 0%;}
	100% {width : 10%;}}
@keyframes Kelly-Mana {
	0%{width : 0%;}
	100% {width : 80%;}}*/

@keyframes Matthieu-Vie {
	0%{width : 0%;}
	100% {width : 60%;}}
@keyframes Matthieu-Endu {
	0%{width : 0%;}
	100% {width : 88%;}}
@keyframes Matthieu-Mana {
	0%{width : 0%;}
	100% {width : 30%;}}
/*
@keyframes Matthis-Vie {
	0%{width : 0%;}
	100% {width : 35%;}}
@keyframes Matthis-Endu {
	0%{width : 0%;}
	100% {width : 92%;}}
@keyframes Matthis-Mana {
	0%{width : 0%;}
	100% {width : 12%;}}*/

/* ------------ ANIMATIONS SKILL GROUPS ------------ */

@keyframes Float-Horizontal {
	0%{transform : translateX(-4px) rotate(-4deg);}
	100%{transform : translateX(4px) rotate(4deg);}}

@keyframes Float-Vertical {
	0%{transform : translateY(-4px) rotate(-4deg);}
	100%{transform : translateY(4px) rotate(4deg);}}

@keyframes Rotation {
	0%{transform : rotate(-8deg);}
	100%{transform : rotate(8deg);}}

/* ---------------------------------------- RESPONSIVE ---------------------------------------- */
/* ------------------------ WIDTH ------------------------ */

@media (max-width : 1690px) {
	.slideshow-container {
	max-width: 800px;
	bottom: 15%;
	}

	.trait {
	width: 20%;
	}
}

@media (max-width : 1550px) {
	.bateau {
	right: -10%;
	}

	.Skill-Icon {
  	max-width: 80px;
	}
}

@media (max-width : 1400px) {
	.Bienvenue {
	width: 65vw;
	}

	.slideshow-container {
	max-width: 650px;
	bottom: 20%;
	}

	.perso {
  	width: 180px;
  	height: 289.44px;
	}

	.color, .dark {
  	width: 180px; /* = Largeur de .perso */
	}

	.nom {
  	bottom: 0;
  	margin-left: -90px; /* = Largeur de .perso/2 */
  	padding-right: 20px;
  	font-size: 1.3em;
	}
}

@media (max-width : 1250px) {
	.bateau {
	right: -12%;
	height: 65%;
	}

	.description {
  	font-size: .85em;
	}
}

@media (max-width : 1110px) {
	.slideshow-container {
	max-width: 75%;
	bottom: 7%;
	right: 12.5%;
	}

	.death {
	width: 90vw;
	font-size: 100px;
	}

	.Texte2 {
	width: 86vw;
	top: 15px;
	}

	.classe {
  	font-size: 1.1em;
	}

	.classeType {
  	font-size: 1.7em;
	}

	.roles {
  	font-size: 1.7em;
	}

	.zoneJauges {
	height: 100px;
	}

	.barreVie, .barreEndu, .barreMana {
	height: 7px;
	}

	.txtJauges {
	font-size: .8em;
	}

	.statsIcon {
	height: 38px;
	margin-top: 12px;
	}
	.coeur {
	height: 31px;
	margin-top: 22px;	
	}
	.haloCoeur {
	height: 55px;
	margin-top: -13px;
	left: -30px;
	}
	.haloEndu {
	height: 70px;
	margin-top: 28px;
	left: -25px;
	}
	.haloMana {
	height: 55px;
	margin-top: 85px;
	left: -30px;
	}

	.zoneRoles {
	height: 200px;
	width: 20%;
	right: 17%;
	top: 110px;
	}

	.Skill-Icon {
	max-width: 65px;
	}
	.Skill-Name {
	font-size: .9em;
	}
}

@media (max-width : 1000px) {
	.bateau {
	right: -15%;
	height: 55%;
	}

	.Bienvenue {
	width: 80vw;
	bottom: 10vh;
	}

	.death {
	font-size: 90px;
	line-height: 70px;
	margin-top: 50px;
	}

	.DeathBis {
	font-size: 20px;
	margin-top: 10px;
	}

	.slideshow-container {
	bottom: 9%;
	}

	.Texte1 {
	width: 60%;
	margin-left: 20%;
	}
}

@media (max-width : 850px) {
	.bateau {
	right: -18%;
	height: 50%;
	}

	.Texte1 {
	font-size: 17px;
	}

	.slideshow-container {
	max-width: 90%;
	bottom: 7%;
	right: 5%;
	}

	nav ul li a {
	font-size: 14px;
	padding: 10px;
	}
}

@media (max-width : 650px) {
	nav {
	display: none;
	}

	.slideshow-container {
	bottom: 12%;
	}

	.bateau {
	right: -21%;
	height: 45%;
	}

	.falaise {
	height: 40%;
	}
}

@media (max-width : 520px) {
	.death {
	font-size: 80px;
	line-height: 70px;
	margin-top: 50px;
	}

	.slideshow-container {
	bottom: 9%;
	max-width: 100%;
	right: 0;
	}

	.bateau {
	right: -45%;
	height: 55%;
	}

	.falaise {
	height: 40%;
	left: -5%;
	}
}

@media (max-width : 450px) {
	.nuages1 {
	height : 130px;
	animation : NuagesUnMobileVertical 90s linear infinite;
	}

	.nuages2 {
	height : 320px;
	animation : NuagesDeuxMobileVertical 180s linear infinite;
	}

	.ciel4 {
	background-size: 130%;
	}

	.logo {
	height: 310px;
	top : 22%;
	}

	.foudre1{
	width: 200%;
	left: -20%;
	}

	.foudre2 {
	width: 200%;
	}

	.Bienvenue {
	bottom: 29vh;
	}

	.Texte1 {
	margin-top: 10vh;
	width: 80%;
	margin-left: 10%;
	font-size: .9em;
	}

	.Death {
    width: 80vw;
    margin-top: 40px;
	}

	.DeathBis {
	font-size: 1em;
	margin-top: 25px;
	}

	.Texte2 {
	width: 70%;
	top: 10px;
	font-size: 1em;
	text-align: left;
	}

	.chargement {
	top: 58%;
	}

	.bateau {
	right: -85px;
	height: 40%;
	top: 60%;
	}

	.falaise {
	height: 35%;
	left: -5%;
	}

	.vagues {
	height: 120px;
	animation : VaguesMobileVertical 42s linear infinite;
	}

	.Zone1, .Serpent {
	width: 100vw;
	height: 900px;
	}

	.Algues {
	width: 200vw;
	}

	.Zone2{
	margin-top: 898px;
	}

	.RunesZ2-1, .RunesZ2-2, .RunesZ2-3, .RunesZ2-4 {
	height: 100px;
	}

	.histoire {
	font-size: 40px;
	margin-top: 95px;
	}

	.texte3 {
	font-size: 15px;
	width: 60vw;
	top: 5px;
	}

	.icone-sq {
	bottom: 5%;
	}

	.slideshow-container {
	position: relative;
	right: 0;
	bottom: auto;
	top: 30px;
	}

	.prev, .next {
	background-size: 40%;
	}

	.audio {
	position: relative;	
	}

	.NavNaglfar {
	position: relative;	
	top: -8px;
	}
}

/* ------------------------ HEIGHT ------------------------ */

@media (max-height : 450px) {
	.nuages1 {
	height : 70px;
	animation : NuagesUnMobileHorizontal 90s linear infinite;
	}

	.nuages2 {
	height : 150px;
	animation : NuagesDeuxMobileHorizontal 180s linear infinite;
	}

	.ciel4 {
	background-size: 130%;
	}

	.logo {
	height: 210px;
	top : 22%;
	}

	.foudre1{
	width: 200%;
	left: -20%;
	}

	.foudre2 {
	width: 200%;
	}

	nav {
	display: none;
	}

	.Texte1 {
	width: 60%;
	margin-left: 20%;
	font-size: 15px;
	}

	.death {
	width: 90%;
	font-size: 70px;
	left: 5%;
	margin-top: 20px;
	line-height: .8;
	}

	.DeathBis {
	font-size: 15px;
	margin-top: 0px;
	}

	.Texte2 {
	transform: translateX(-50%);
	width: 70%;
	left: 50%;
	top: 10px;
	}

	.chargement {
	top: 58%;
	}

	.bateau {
	right: 5px;
	height: 60%;
	top: 60%;
	}

	.falaise {
	height: 50%;
	left: 0;
	}

	.vagues {
		height: 90px;
		animation : VaguesMobileHorizontal 42s linear infinite;
	}

	.RunesZ2-1, .RunesZ2-2, .RunesZ2-3, .RunesZ2-4 {
	height: 100px;
	}

	.histoire {
	font-size: 45px;
	margin-top: 10px;
	}

	.texte3 {
	font-size: 15px;
	width: 60vw;
	top: 5px;
	}

	.icone-sq {
	display: none;
	}
}

@media (min-height : 1370px) {
	.nuages1 {
	height : 340px;
	animation : nuages 40s linear both infinite alternate;
	}

	.nuages2 {
	height : 570px;
	animation : nuages 200s linear both infinite alternate;
	}
}