@charset "utf-8";

/*########################*/


/*########################*/


/*  MARINA ZINDY s V0.1   */


/*######   ANIMS   #######*/


/*########################*/


/*########################*/

*:hover {
 transition: 0.5s ease;
}

.animArtiste {
 animation-name: animArtiste;
 animation-duration: 14s;
  animation-iteration-count:infinite;
 animation-timing-function: ease-in-out;
}

.animArtiste2 {
 animation-name: animArtiste2;
 animation-duration: 30s;
  
 /*animation-delay:2s;*/
 animation-timing-function: ease-in-out;
}

@keyframes animArtiste {
 0% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  left: 23vw;
 }
 30% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  left: 23vw;
 }
 40% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  left: 23vw;
 }
 100% {
  width: 0.1vw;
  color: rgba(255, 255, 255, 0);
  font-size: 0.5vw;
  bottom: 3vw;
  left: 23.5vw;
  opacity: 1;
 }
}

@keyframes animArtiste2 {
 0% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  left: 23vw;
 }
  
  
 5% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  left: 23vw;
 }
 100% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  left: 23vw;
 }
 
}


.animGalerie {
 animation-name: animGalerie;
 animation-duration: 14s;
 animation-delay: 2s;
 animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
}

.animGalerie2 {
 animation-name: animGalerie2;
 animation-duration: 30s;
 animation-timing-function: ease-in-out;
}

@keyframes animGalerie {
 0% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  bottom: -12.5vw;
  left: 27.5vw;
 }
 30% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  bottom: -12.5vw;
  left: 27.5vw;
 }
 40% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  bottom: -12.5vw;
  left: 27.5vw;
 }
 100% {
  width: 0.1vw;
  color: rgba(255, 255, 255, 0);
  font-size: 0.5vw;
  bottom: 1vw;
  left: 27.8vw;
  opacity: 1;
 }
}


@keyframes animGalerie2 {
 0% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  bottom: -12.5vw;
  left: 27.5vw;
 }
 5% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  bottom: -12.5vw;
  left: 27.5vw;
 }
 100% {
  bottom: -11vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  bottom: -12.5vw;
  left: 27.5vw;
 }
}


.animProjets {
 animation-name: animProjets;
 animation-duration: 14s;
 animation-timing-function: ease-in-out;
 animation-delay: 1s;
    animation-iteration-count:infinite;

}

.animProjets2 {
 animation-name: animProjets2;
 animation-duration: 30s;
 animation-timing-function: ease-in-out;
}

@keyframes animProjets {
 0% {
  bottom: -12.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  left: 33.3vw;
 }
 30% {
  bottom: -12.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
 }
 40% {
  bottom: -12.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  left: 33.3vw;
 }
 100% {
  width: 0.1vw;
  color: rgba(255, 255, 255, 0);
  font-size: 0.5vw;
  bottom: 1vw;
  left: 33.8vw;
  opacity: 1;
 }
}



@keyframes animProjets2 {
 0% {
  bottom: -12.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  left: 33.3vw;
 }
 5% {
  bottom: -12.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
 }
 100% {
  bottom: -12.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
 }
}

.animCommande {
 animation-name: animCommande;
 animation-duration: 14s;
 animation-timing-function: ease-in-out;
 animation-delay: 3s;
    animation-iteration-count:infinite;

}

.animCommande2 {
 animation-name: animCommande2;
 animation-duration: 30s;
 animation-timing-function: ease-in-out;
}

@keyframes animCommande {
 0% {
  bottom: -7.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  left: 39vw;
 }
 30% {
  bottom: -7.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
 }
 40% {
  bottom: -7.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
  left: 39vw;
 }
 100% {
  width: 0.1vw;
  color: rgba(255, 255, 255, 0);
  font-size: 0.5vw;
  bottom: 3vw;
  left: 39.3vw;
  opacity: 1;
 }
}




@keyframes animCommande2 {
 0% {
  bottom: -7.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 0;
  font-size: 1.5vw;
  left: 39vw;
     animation-iteration-count:infinite;

 }
 5% {
  bottom: -7.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
 }
 100% {
  bottom: -7.5vw;
  color: rgba(255, 255, 255, 0);
  width: 1vw;
  opacity: 1;
  font-size: 1.5vw;
 }
}

/*########################*/


/*########################*/


/*       RESPONSIVE       */


/*########################*/


/*########################*/

@media screen and (max-width: 768px) {
 .animArtiste {
  animation-name: xxx;
 }
 .animArtiste2 {
  animation-name: xxx;
 }
 .animGalerie {
  animation-name: xxx;
 }
 .animGalerie2 {
  animation-name: xxx;
 }
 .animProjets {
  animation-name: xxx;
 }
 .animProjets2 {
  animation-name: xxx;
 }
 .animCommande {
  animation-name: xxx;
 }
 .animCommande2 {
  animation-name: xxx;
 }
}