/*
Theme Name: Mosca
Template: Divi
Description: Mosca's Divi Child Theme
Author: Bourgianni
Author URI: https://bourgianni.fr/
*/

/* Menu de navgation principale Version Mobile - Sous-Menu */
ul.et_mobile_menu > li.menu-item-has-children > a:after {
    content: " \25be";
}
ul.et_mobile_menu > li.menu-item-has-children > ul.sub-menu {
    display: block;
}

/* MOUCHES ANIMÉES */
/* --------------- */
.mouche-wrapper {
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}
.mouche {
    display: none;
    position: absolute;
    z-index: 999;
    width: 40px;
    height: 40px;
    background-image: url('img/mouche.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
@media (min-width: 992px) { /* Large devices (desktops, 992px and up) */
    .mouche {
        display: block;
    }
}

/* MOUCHES ANIMÉES - MOUCHE 1 */
/* -------------------------- */
.mouche-1 {
  left: 48%;
  bottom: -10%;
  animation-name:  mouche-1-animation;
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;      
}
@keyframes mouche-1-animation {
  1% {
    transform: rotate(-50deg);
  }
  2%,
  3% {
    left: 48%;
    bottom: 5%;
    transform: rotate(-50deg);
  }
  4% {
    transform: rotate(-100deg);
  }
  5%,
  6% {
    left: 44%;
    bottom: 20%;
    transform: rotate(-100deg);
  }
  8% {
    left: 40%;
    bottom: 40%;
    transform: rotate(-80deg);
  }
  9% {
    transform: rotate(-130deg);
  }
  10% {
    left: 40%;
    bottom: 40%;
    transform: rotate(-80deg);
  }
  12%,
  13% {
    left: 40%;
    bottom: 40%;
    transform: rotate(-130deg);
  }
  15% {
    left: 35%;
    bottom: 37%;
    transform: rotate(-180deg);
  }
  16% {
    transform: rotate(-100deg);
  }
  17%,
  18% {
    left: 35%;
    bottom: 37%;
    transform: rotate(-100deg);
  }
  20% {
    left: 30%;
    bottom: 45%;
    transform: rotate(-100deg);
  }
  21% {
    left: 30%;
    bottom: 45%;
    transform: rotate(-120deg);
  }
  22% {
    left: 27%;
    bottom: 50%;
    transform: rotate(-120deg);
  }
  23%,
  24% {
    left: 25%;
    bottom: 60%;
    transform: rotate(-100deg);
  }
  26%,
  27% {
    left: 25%;
    bottom: 60%;
    transform: rotate(-140deg);
  }
  30%,
  31% {
    left: 20%;
    bottom: 50%;
    transform: rotate(-180deg);
  }
  32%,
  33% {
    left: 15%;
    bottom: 40%;
    transform: rotate(-160deg);
  }
  35%,
  36% {
    left: 10%;
    bottom: 25%;
    transform: rotate(-200deg);
  }
  38% {
    transform: rotate(-100deg);
  }
  40% {
    left: 5%;
    bottom: 30%;
    transform: rotate(-100deg);
  }
  41% {
    transform: rotate(-120deg);
  }
  42% {
    left: 1%;
    bottom: 40%;
    transform: rotate(-120deg);
  }
  43%,
  45% {
    left: 1%;
    bottom: 40%;
    transform: rotate(-140deg);
  }
  48% {
    left: -10%;
    bottom: 40%;
    transform: rotate(-140deg);
  }
  49% {
    transform: rotate(-0deg);
  }
  50% {
    left: -10%;
    bottom: -10%;
    transform: rotate(0deg);
  }
}

/* MOUCHES ANIMÉES - MOUCHE 2 */
/* -------------------------- */
.mouche-2 {
  right: -10%;
  bottom: 95%;
  animation-name:  mouche-2-animation;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 12s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;      
}
@keyframes mouche-2-animation {
  1% {
    right: -1%;
    bottom: 90%;
    transform: rotate(180deg);
  }
  5%,
  10% {
    right: 5%;
    bottom: 65%;
    transform: rotate(180deg);
  }
  15%,
  20% {
    right: 10%;
    bottom: 40%;
    transform: rotate(160deg);
  }
  21%,
  22% {
    right: 10%;
    bottom: 40%;
    transform: rotate(260deg);
  }
  25% {
    right: 18%;
    bottom: 55%;
    transform: rotate(260deg);
  }
  26% {
    right: 18%;
    bottom: 55%;
    transform: rotate(270deg);
  }
  30%,
  31% {
    right: 25%;
    bottom: 75%;
    transform: rotate(260deg);
  }
  34% {
    right: 30%;
    bottom: 85%;
    transform: rotate(260deg);
  }
  35%,
  36% {
    right: 30%;
    bottom: 85%;
    transform: rotate(200deg);
  }
  38%,
  39% {
    right: 30%;
    bottom: 85%;
    transform: rotate(150deg);
  }
  41% {
    right: 35%;
    bottom: 70%;
    transform: rotate(150deg);
  }
  42%,
  43% {
    right: 35%;
    bottom: 70%;
    transform: rotate(120deg);
  }
  46%,
  47% {
    right: 32%;
    bottom: 40%;
    transform: rotate(150deg);
  }
  50%,
  51% {
    right: 35%;
    bottom: 15%;
    transform: rotate(150deg);
  }  
  54%,
  55% {
    right: 35%;
    bottom: 15%;
    transform: rotate(150deg);
  }  
  60% {
    right: 35%;
    bottom: -10%;
    transform: rotate(150deg);
  }
  65% {
    right: -10%;
    bottom: -10%;
    transform: rotate(180deg);
  }
  70% {
    right: -10%;
    bottom: 10%;
    transform: rotate(180deg);
  }
}

/* ICONE BOURGIANNI */
/* ---------------- */
a .footer-logo-bourgianni {
  display: inline-block;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  vertical-align: top;
  background-image: url('img/bourgianni-logo-footer.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
a:hover .footer-logo-bourgianni {
  background-image: url('img/bourgianni-logo-footer-hover.svg');
}