@keyframes carte {
    0%   {background:#33BCA7;}
    100% {background:#fff;}
}
.active .map .rang:nth-child(1) .carte,
.active .map .rang:nth-child(1) .carte::before,
.active .map .rang:nth-child(1) .carte::after {
    animation-name: carte;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
.active .map .rang:nth-child(2) .carte,
.active .map .rang:nth-child(2) .carte::before,
.active .map .rang:nth-child(2) .carte::after {
    animation-name: carte;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.active .map .rang:nth-child(3) .carte,
.active .map .rang:nth-child(3) .carte::before,
.active .map .rang:nth-child(3) .carte::after {
    animation-name: carte;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
@keyframes postits {
    0%   {opacity:0;}
    100% {opacity:1;}
}
.active .postits:nth-child(1) .postit:nth-child(1),
.active .postits:nth-child(2) .postit:nth-child(3){
    animation-name: postits;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.active .postits:nth-child(1) .postit:nth-child(2){
    animation-name: postits;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.active .postits:nth-child(1) .postit:nth-child(3),
.active .postits:nth-child(2) .postit:nth-child(5){
    animation-name: postits;
    animation-delay: 1.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.active .postits:nth-child(1) .postit:nth-child(4),
.active .postits:nth-child(2) .postit:nth-child(4){
    animation-name: postits;
    animation-delay: 2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.active .postits:nth-child(2) .postit:nth-child(1){
    animation-name: postits;
    animation-delay: 2.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.active .postits:nth-child(2) .postit:nth-child(2){
    animation-name: postits;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.place .rang:nth-child(1) .carte {
    transform: rotate(-15deg);
    position: relative;
    margin-left: -52px;
    margin-top: -15px;
    transition: all 0.5s;
}
.active .place .rang:nth-child(1) .carte,
.active .place .rang:nth-child(2) .carte:nth-child(2),
.active .place .rang:nth-child(2) .carte:nth-child(1) {
    transform: rotate(0);
    margin-left:2px;
    margin-top:2px;
}
.place .rang:nth-child(2) .carte:nth-child(2) {
    transform: rotate(-15deg);
    position: relative;
    margin-left: 92px;
    margin-top: 10px;
    transition: all 0.5s;
}
.place .rang:nth-child(2) .carte:nth-child(1) {
    transform: rotate(-15deg);
    position: relative;
    margin-left: -2px;
    margin-top: -30px;
    transition: all 0.5s;
}
@keyframes boarding {
    0%   {opacity:0;}
    100% {opacity:1;}
}
.active .rang .board.pin:nth-child(1) i{
    animation-name: boarding;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.active .rang .board.pin:nth-child(2) i{
    animation-name: boarding;
    animation-delay: 1s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.active .rang .board.pin:nth-child(3) i{
    animation-name: boarding;
    animation-delay: 2s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes boarding_recette {
    0%   {margin-left:32px;}
    50% {margin-left:-50px;}
    100% {margin-left:-137px;}
}
#recette.active .each .rang{
    animation-name: boarding_recette;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes clic {
    0%   {background: #fff;}
    100% {background: yellow;color:#000;}
}
#dev.active .ecran:nth-child(1) .nav{
    animation-name: clic;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes clic_next {
    0%   {height:auto;}
    100% {height:0;}
}
#dev.active .ecran:nth-child(1) .rang:nth-child(1){
    animation-name: clic_next;
    animation-delay: 1s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(1) .rang:nth-child(2){
    animation-name: clic_next;
    animation-delay: 1.1s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(1) .rang:nth-child(3){
    animation-name: clic_next;
    animation-delay: 1.2s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(1) .rang:nth-child(4){
    animation-name: clic_next;
    animation-delay: 1.3s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
@keyframes clic_after {
    0%   {height:0;}
    100% {height:auto;}
}
#dev.active .ecran:nth-child(2) .rang:nth-child(1){
    animation-name: clic_after;
    animation-delay: 1.8s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(2) .rang:nth-child(2){
    animation-name: clic_after;
    animation-delay: 1.8s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(2) .rang:nth-child(3){
    animation-name: clic_after;
    animation-delay: 1.8s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(2) .rang:nth-child(4){
    animation-name: clic_after;
    animation-delay: 1.8s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
#dev.active .ecran:nth-child(2) .rang:nth-child(5){
    animation-name: clic_after;
    animation-delay: 1.8s;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}