body {
	color:white;
	font-family: 'Fredoka One', cursive;
	margin: 0px;
	background-color: #0099e5;
}

#gradient {
   position:fixed;
    width:100%;
    height:100%;
background-color:#0099e5;
       font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(to top right, #0099e5,#9900e5);
}


#motif {
    width:100%;
    height:100%;
   padding:0px;
	background-image: url("img/fondindex3.png");
position:absolute;
opacity:0.05;
}
#gradientfin {
   position:fixed;
    width:100%;
    height:100%;
  background-image: linear-gradient(to top right, #0099e5,#9900e5);
display:none;
  animation:gradientfin 1s 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
opacity:0;
}
#motiffin {
    width:100%;
    height:100%;
   padding:0px;
	background-image: url("img/fondindex3.png");
position:absolute;
opacity:0;
display:none;
  animation:motiffin 1s 1;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}


img.valignmiddle {vertical-align: middle;}

textecredit			{font-family: 'Arial', Helvetica, sans-serif;font-size: 17px;color:#808080;}
a.textecredit		{font-family: 'Arial', Helvetica, sans-serif;font-size: 20px;color:#606060;text-decoration: none;}
a.textecredit:hover	{font-family: 'Arial', Helvetica, sans-serif;font-size: 20px;color:#606060;text-decoration: underline;}

titrexl {font-size: 12vw;}
titrel {font-size: 10vw;}
titrem {font-size: 8vw;}
titres {font-size: 4.5vw;}
titrexs {font-size: 3vw;}
titrexxs {font-size: 2vw;}
a.titre {color:#ffffff;text-decoration: none;}
a.titre:hover {color:#ffffff;text-decoration: none;}
answerxl {font-size: 4.5vw;}
answerl {font-size: 3.7vw;}
answerm {font-size: 3vw;}
answers {font-size: 2.2vw;}
answerxs {font-size: 1.5vw;}


#main {
z-index:1;
    position:fixed;
    width:100%;
    height:100%;
    padding:0px;
    min-width: 650px;
min-height:600px;
    display:flex;
    flex-flow:column nowrap;
    border:0px solid yellow;
top:0px;
}
#parenthaut {
z-index:2;
    width:100%;
    padding:0px;
    min-width: 650px;
    display:flex;
    flex-flow:row nowrap;
    border:0px solid blue;
position : absolute;
}
#kidhautleft {
    margin:0px;
    width:150px;
    padding:0px;
    flex-grow: 0;
    text-align: left;
    border:0px solid green;
}
#settings { 
display:none;
opacity:0.3;
z-index:10;
padding:0px;
border:0px solid white;
}
#logo2 {display:block;
border:0px solid grey;
z-index:10;
}
#logofin {
	display:none;
	z-index:5;
	position:absolute;
	top:235px;
	right:-600px;
    width:350px;
	border:0px solid blue;
	opacity:1;
	animation:logofin 2s 1;
	animation-fill-mode: forwards;
	animation-delay: 4s;
	text-align:right;
}

#kidhautcenter {
margin:0px;
flex-grow: 5;
text-align: center;
border:0px solid pink;
}
#kidhautright {
margin:0px;
padding:10px;
box-sizing: border-box;
flex-grow: 0;
text-align: right;
border:0px solid green;
}

#parentmilieu {
z-index:3;
position:relative;
margin:0px;
padding:0px;
width:100%;
min-height:200px;
min-width: 650px;
flex-grow: 1;
border:0px solid green;
display: flex;
    justify-content: center;
    align-items: center;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #000000;
}
#kidmilieu {
position:absolute;
border:0px solid green;
text-align:center;
}
#demo0{
border:0px solid blue;
	opacity:0;
    text-align: center;
  animation:letitre 0.5s 1;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
text-shadow: 2px 2px 4px #000000;
}
#demo1{
display:none;
border:0px solid blue;
	opacity:0;
  animation:laquestion 1s 1;
  animation-fill-mode: forwards;
  animation-delay: 0s;
text-shadow: 1px 1px 2px #000000;
}

#parentbas {
z-index:3;
margin:0px;
padding:0px 0px 0px 0px;
width:100%;
min-height:33%;
min-width: 650px;
display:flex;
flex-flow:row nowrap;
border:0px solid green;
}

.kidbasquart {
    margin:10px;
    flex-grow: 1;
    border:0px solid pink;
position: relative;
text-shadow: 1px 1px 2px #000000;
}

.kidbasquart0 {
    margin:0px;
    flex-grow: 1;
border:0px solid yellow;
position:relative;
}

.kidbasquart1 {
    margin:0px;
    flex-grow: 2;
    border:0px solid red;
}

#arrow0 {
z-index:3;
position:absolute;
top:43px;
right:-30px;
height:110px;
width:112.5px;
border-radius: 50%;
    border:1px solid blue;
opacity:0;
  box-shadow: 0px 0px 10px 0px #c0c0c0;
  animation:arrow 2s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
	background-color: #0f78be;
}

#arrow {
z-index:3;
position:absolute;
top:35px;
right:-60px;
    border:0px solid blue;
opacity:0;
  animation:arrow 2s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

#homefin {
z-index:5;
position:absolute;
top:235px;
right:-60px;
border-radius:50%;
  border 1px solid black;
  box-shadow: 0px 0px 5px 0px #c0c0c0;
opacity:0;
display:none;
background:#ffffff;
  animation:homefin 7s 1;
  animation-fill-mode: forwards;
}

#bravo {
  border: 0px solid pink;
display:none;
position:absolute;
top:10%;
left:0px;
  animation:bravo 4.5s 1;
  animation-fill-mode: forwards;
}

#box1 {
	background: #9DCEFF;
	width: 100%;
	height: 100%;
display:none;
	overflow: hidden;
    position: absolute;
border-radius: 15px 15px 15px 15px;
border:0px solid green;
padding: 10px;
box-sizing: border-box;
text-align: center;
color:#ffffff;
        box-shadow: 2px 2px 8px #303030;
  animation:vershaut 2s 1;
flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
min-height:150px;
}

#box2 {
	background: #9DCEFF;
	width: 100%;
	height: 100%;
display:none;
	overflow: hidden;
    position: absolute;
border-radius: 15px 15px 15px 15px;
border:0px solid #303030;
padding: 20px;
box-sizing: border-box;
text-align: center;
color:#ffffff;
        box-shadow: 2px 2px 8px #303030;
  animation:vershaut2 2s  1;
flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
min-height:150px;
}
#box3 {
	background: #9DCEFF;
	width: 100%;
	height: 100%;
display:none;
	overflow: hidden;
    position: absolute;
bottom:0px;
border-radius: 15px 15px 15px 15px;
border:0px solid #303030;
padding: 20px;
box-sizing: border-box;
text-align: center;
color:#ffffff;
        box-shadow: 2px 2px 8px #303030;
  animation:vershaut3 2s  1;
flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
min-height:150px;
}
#box4 {
	background: #9DCEFF;
	width: 100%;
	height: 100%;
display:none;
	overflow: hidden;
    position: absolute;
bottom:0px;
border-radius: 15px 15px 15px 15px;
border:0px solid #303030;
padding: 20px;
box-sizing: border-box;
text-align: center;
color:#ffffff;
        box-shadow: 2px 2px 8px #303030;
  animation:vershaut4 2s  1;
flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
min-height:150px;
}
#box11 {
        position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
border-radius: 15px 15px 15px 15px;
border:0px solid yellow;
padding: 20px;
box-sizing: border-box;
display: none;
  animation: border 0.3s 1s 5;
}

#box22 {
        position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
border-radius: 15px 15px 15px 15px;
border:0px solid #303030;
padding: 20px;
box-sizing: border-box;
display: none;
  animation: border 0.3s 1s 5;
}
#box33 {
        position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
border-radius: 15px 15px 15px 15px;
border:0px solid #303030;
padding: 20px;
box-sizing: border-box;
display: none;
  animation: border 0.3s 1s 5;
}
#box44 {
        position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
border-radius: 15px 15px 15px 15px;
border:0px solid #303030;
padding: 20px;
box-sizing: border-box;
display: none;
  animation:  border 0.3s 1s 5;
}


@keyframes vershaut{
  0%{
    transform:scale(1)  rotate(180deg); bottom:-955px;
  }
  90%{
    transform:scale(1)  rotate(-20deg);  bottom:-955px;
  }
  100%{
    transform:scale(1);  bottom:0px;
  }
}
@keyframes vershaut2{
  0%{
    transform:scale(1)  rotate(810deg); bottom:-955px;
  }
  75%{
    transform:scale(1)  rotate(-40deg);  bottom:-955px;
  }
  100%{
    transform:scale(1);  bottom:0px;
  }
}
@keyframes vershaut3{
  0%{
    transform:scale(1)  rotate(-360deg); bottom:-955px;
  }
  65%{
    transform:scale(1)  rotate(-240deg);  bottom:-955px;
  }
  100%{
    transform:scale(1)  rotate(0deg);  bottom:0px;
  }
}
@keyframes vershaut4{
  0%{
    transform:scale(1)  rotate(-570deg); bottom:-955px;
  }
  95%{
    transform:scale(1)  rotate(30deg);  bottom:-955px;
  }
  100%{
    transform:scale(1)  rotate(0deg);  bottom:0px;
  }
}


@keyframes border{
  0%{
    transform: border-width:1pt;border-color:#303030;
  }
  50%{
    transform: opacity:1;border-width:4pt;border-color: #505030;
  }
  100%{
    transform: border-width:1pt;border-color:#303030;
  }
}

@keyframes arrow{
  0%{
    transform: scale(0);opacity:0;
  }
  100%{
    transform: scale(1);opacity:0.9;transition-timing-function: ease-in;right:-60px;
  }
}

@keyframes letitre{
  0%{
    transform: scale(20) rotate(-3deg);opacity:0;
  }
  100%{
    transform: scale(1) rotate(-3deg); opacity:1;transition-timing-function: ease-in;
  }
}
@keyframes laquestion {
  0%{
    transform: scale(1) rotate(-100deg);opacity:1;
  }
  50%{
    transform: scale(1.2) rotate(10deg);opacity:1;transition-timing-function: ease-in;
  }
  100%{
    transform: scale(1) rotate(-3deg); opacity:1;transition-timing-function: ease-in;
  }
}

@keyframes bravo{
  0%{
    transform: scale(0) rotate(0deg);opacity:0;
  }
  20%{
    transform: scale(1) rotate(740deg);opacity:1; 
  }
  75%{
    transform: scale(1) rotate(710deg);opacity:1;
  }
  80%{
    transform: scale(1) rotate(710deg);opacity:1;
  }
  100%{
    transform: scale(1) rotate(710deg);opacity:0;
  }
}
@keyframes logofin{
  0%{
    transform: scale(1);opacity:0;
  }
  100%{
    transform: scale(1);opacity:1;transition-timing-function: ease-in;right:100px;
  }
}
@keyframes homefin{
  0%{
    transform: scale(0);opacity:0.3;
  }
  80%{
    transform: scale(0);opacity:0.3;
  }
  100%{
    transform: scale(1);opacity:1;transition-timing-function: ease-in;right:-60px;
  }
}
@keyframes motiffin{
  0%{
    opacity:0;
  }
  100%{
    opacity:0.05;
  }
}
@keyframes gradientfin{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}






.initial-snow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.initial-snow > * {
	font-size: 30px;
	color: white;
	position: absolute;
	top: -5vh;
}

@keyframes snowfall {
	0% {
		transform: translate3d(var(--left-ini), 0, 0);
	}

	100% {
		transform: translate3d(var(--left-end), 110vh, 0);
	}
}

.snow:nth-child(2n) {
	filter: blur(1px);
	font-size: 40px;
}

.snow:nth-child(6n) {
	filter: blur(2px);
	font-size: 30px;
}

.snow:nth-child(10n) {
	filter: blur(5px);
	font-size: 30px;
}

.snow:nth-child(1) {
	--size: 0.8vw;
	--left-ini: 0vw;
	--left-end: -1vw;
	left: 70vw;
	animation: snowfall 9s linear infinite;
	animation-delay: -1s;
}

.snow:nth-child(2) {
	--size: 0.2vw;
	--left-ini: -7vw;
	--left-end: 10vw;
	left: 65vw;
	animation: snowfall 15s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(3) {
	--size: 1vw;
	--left-ini: 6vw;
	--left-end: 6vw;
	left: 1vw;
	animation: snowfall 9s linear infinite;
	animation-delay: -7s;
}

.snow:nth-child(4) {
	--size: 0.2vw;
	--left-ini: -3vw;
	--left-end: 9vw;
	left: 88vw;
	animation: snowfall 14s linear infinite;
	animation-delay: -5s;
}

.snow:nth-child(5) {
	--size: 0.4vw;
	--left-ini: -2vw;
	--left-end: -9vw;
	left: 74vw;
	animation: snowfall 6s linear infinite;
	animation-delay: -4s;
}

.snow:nth-child(6) {
	--size: 0.2vw;
	--left-ini: 5vw;
	--left-end: 1vw;
	left: 35vw;
	animation: snowfall 6s linear infinite;
	animation-delay: -7s;
}

.snow:nth-child(7) {
	--size: 0.4vw;
	--left-ini: -2vw;
	--left-end: -1vw;
	left: 27vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(8) {
	--size: 1vw;
	--left-ini: -9vw;
	--left-end: -2vw;
	left: 69vw;
	animation: snowfall 8s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(9) {
	--size: 0.2vw;
	--left-ini: -1vw;
	--left-end: -5vw;
	left: 84vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -6s;
}

.snow:nth-child(10) {
	--size: 0.2vw;
	--left-ini: 7vw;
	--left-end: -9vw;
	left: 82vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -3s;
}

.snow:nth-child(11) {
	--size: 0.6vw;
	--left-ini: -2vw;
	--left-end: -1vw;
	left: 48vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -1s;
}

.snow:nth-child(12) {
	--size: 0.2vw;
	--left-ini: 5vw;
	--left-end: 6vw;
	left: 39vw;
	animation: snowfall 15s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(13) {
	--size: 0.2vw;
	--left-ini: 6vw;
	--left-end: 5vw;
	left: 3vw;
	animation: snowfall 9s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(14) {
	--size: 0.8vw;
	--left-ini: -5vw;
	--left-end: -2vw;
	left: 49vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(15) {
	--size: 0.6vw;
	--left-ini: 10vw;
	--left-end: 4vw;
	left: 77vw;
	animation: snowfall 7s linear infinite;
	animation-delay: -4s;
}

.snow:nth-child(16) {
	--size: 0.8vw;
	--left-ini: -3vw;
	--left-end: 1vw;
	left: 86vw;
	animation: snowfall 14s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(17) {
	--size: 1vw;
	--left-ini: 6vw;
	--left-end: -7vw;
	left: 18vw;
	animation: snowfall 9s linear infinite;
	animation-delay: -6s;
}

.snow:nth-child(18) {
	--size: 1vw;
	--left-ini: -9vw;
	--left-end: 4vw;
	left: 64vw;
	animation: snowfall 13s linear infinite;
	animation-delay: -7s;
}

.snow:nth-child(19) {
	--size: 1vw;
	--left-ini: 2vw;
	--left-end: -7vw;
	left: 52vw;
	animation: snowfall 15s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(20) {
	--size: 0.4vw;
	--left-ini: 0vw;
	--left-end: 8vw;
	left: 5vw;
	animation: snowfall 8s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(21) {
	--size: 0.6vw;
	--left-ini: -9vw;
	--left-end: -2vw;
	left: 10vw;
	animation: snowfall 12s linear infinite;
	animation-delay: -3s;
}

.snow:nth-child(22) {
	--size: 0.8vw;
	--left-ini: -3vw;
	--left-end: -8vw;
	left: 54vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(23) {
	--size: 0.6vw;
	--left-ini: -7vw;
	--left-end: -8vw;
	left: 20vw;
	animation: snowfall 6s linear infinite;
	animation-delay: -3s;
}

.snow:nth-child(24) {
	--size: 0.4vw;
	--left-ini: 10vw;
	--left-end: -4vw;
	left: 68vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -8s;
}

.snow:nth-child(25) {
	--size: 1vw;
	--left-ini: 3vw;
	--left-end: 5vw;
	left: 90vw;
	animation: snowfall 7s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(26) {
	--size: 1vw;
	--left-ini: -7vw;
	--left-end: 5vw;
	left: 71vw;
	animation: snowfall 13s linear infinite;
	animation-delay: -2s;
}

.snow:nth-child(27) {
	--size: 0.6vw;
	--left-ini: 9vw;
	--left-end: 4vw;
	left: 2vw;
	animation: snowfall 15s linear infinite;
	animation-delay: -5s;
}

.snow:nth-child(28) {
	--size: 1vw;
	--left-ini: -5vw;
	--left-end: 3vw;
	left: 23vw;
	animation: snowfall 12s linear infinite;
	animation-delay: -1s;
}

.snow:nth-child(29) {
	--size: 0.4vw;
	--left-ini: -2vw;
	--left-end: -1vw;
	left: 39vw;
	animation: snowfall 14s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(30) {
	--size: 0.6vw;
	--left-ini: -9vw;
	--left-end: -5vw;
	left: 76vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -5s;
}

.snow:nth-child(31) {
	--size: 0.4vw;
	--left-ini: -5vw;
	--left-end: 3vw;
	left: 14vw;
	animation: snowfall 8s linear infinite;
	animation-delay: -5s;
}

.snow:nth-child(32) {
	--size: 0.2vw;
	--left-ini: 5vw;
	--left-end: -1vw;
	left: 86vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(33) {
	--size: 0.4vw;
	--left-ini: -3vw;
	--left-end: 10vw;
	left: 66vw;
	animation: snowfall 6s linear infinite;
	animation-delay: -6s;
}

.snow:nth-child(34) {
	--size: 1vw;
	--left-ini: -3vw;
	--left-end: 6vw;
	left: 75vw;
	animation: snowfall 14s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(35) {
	--size: 1vw;
	--left-ini: -6vw;
	--left-end: 7vw;
	left: 22vw;
	animation: snowfall 7s linear infinite;
	animation-delay: -5s;
}

.snow:nth-child(36) {
	--size: 1vw;
	--left-ini: 3vw;
	--left-end: 4vw;
	left: 10vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -10s;
}

.snow:nth-child(37) {
	--size: 0.6vw;
	--left-ini: 2vw;
	--left-end: 10vw;
	left: 95vw;
	animation: snowfall 13s linear infinite;
	animation-delay: -6s;
}

.snow:nth-child(38) {
	--size: 0.8vw;
	--left-ini: 5vw;
	--left-end: 8vw;
	left: 34vw;
	animation: snowfall 9s linear infinite;
	animation-delay: -10s;
}

.snow:nth-child(39) {
	--size: 0.8vw;
	--left-ini: 4vw;
	--left-end: 0vw;
	left: 80vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -2s;
}

.snow:nth-child(40) {
	--size: 0.8vw;
	--left-ini: 1vw;
	--left-end: -7vw;
	left: 45vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -4s;
}

.snow:nth-child(41) {
	--size: 0.2vw;
	--left-ini: 9vw;
	--left-end: 10vw;
	left: 82vw;
	animation: snowfall 8s linear infinite;
	animation-delay: -2s;
}

.snow:nth-child(42) {
	--size: 1vw;
	--left-ini: 9vw;
	--left-end: -9vw;
	left: 22vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -6s;
}

.snow:nth-child(43) {
	--size: 0.6vw;
	--left-ini: 5vw;
	--left-end: 8vw;
	left: 66vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -1s;
}

.snow:nth-child(44) {
	--size: 0.6vw;
	--left-ini: -5vw;
	--left-end: -2vw;
	left: 75vw;
	animation: snowfall 12s linear infinite;
	animation-delay: -4s;
}

.snow:nth-child(45) {
	--size: 0.2vw;
	--left-ini: 0vw;
	--left-end: 3vw;
	left: 2vw;
	animation: snowfall 7s linear infinite;
	animation-delay: -5s;
}

.snow:nth-child(46) {
	--size: 0.2vw;
	--left-ini: 8vw;
	--left-end: -3vw;
	left: 94vw;
	animation: snowfall 8s linear infinite;
	animation-delay: -9s;
}

.snow:nth-child(47) {
	--size: 0.6vw;
	--left-ini: -6vw;
	--left-end: -9vw;
	left: 95vw;
	animation: snowfall 11s linear infinite;
	animation-delay: -4s;
}

.snow:nth-child(48) {
	--size: 0.2vw;
	--left-ini: -5vw;
	--left-end: 6vw;
	left: 34vw;
	animation: snowfall 10s linear infinite;
	animation-delay: -6s;
}

.snow:nth-child(49) {
	--size: 0.8vw;
	--left-ini: 4vw;
	--left-end: 8vw;
	left: 22vw;
	animation: snowfall 12s linear infinite;
	animation-delay: -10s;
}

.snow:nth-child(50) {
	--size: 0.2vw;
	--left-ini: -4vw;
	--left-end: 4vw;
	left: 100vw;
	animation: snowfall 14s linear infinite;
	animation-delay: -9s;
}