#fd {
	position: fixed;
    bottom: min(-80px, -7.25vw, -7.25vw);
    right: 0;
    z-index: 12;
	transform: rotate(-10deg);
	cursor: pointer;
    --main-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#fd img {
	pointer-events: none;
}

#fd a:focus {
    outline: none;
}

#fd .close {
	position: absolute;
    bottom: clamp(135px, 15vw, 500px);
    right: 0;
	color: #FFF;
    font-size: 35px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: none;
    opacity: 1;
    z-index: 12;
	cursor: pointer;
    pointer-events: auto;
	transform: rotate(10deg);
	transition: var(--main-transition);
}

#fd:hover .close,
#fd .close.hover {
    bottom: clamp(200px, 18vw, 500px);
    right: -5%;
}
	
#fd .close:hover {
	color:#AAAAAA;
}

#fd .fd-front {
    position: absolute;
    width: clamp(170px, 15vw, 625px);
    aspect-ratio: 625 / 700;
    right: 0;
    bottom: 0;
    transition: var(--main-transition);
}

#fd:hover .fd-front,
#fd .fd-front.hover {
    bottom: clamp(60px, 6vw, 200px);
 	transition: var(--main-transition);
}

#fd .fd-back {
    position: absolute;
    width: clamp(170px, 15vw, 625px);
    aspect-ratio: 625 / 700;
    right: 0;
    bottom: 0;
    transition: var(--main-transition);
}

#fd:hover .fd-back,
#fd .fd-back.hover {
    bottom: clamp(60px, 6vw, 200px);
    transition: var(--main-transition);
}

#fd .fd-container {
    position: relative;
    width: clamp(170px, 15vw, 625px);
    height: auto;
    aspect-ratio: 625 / 700;
}

#fd .pain {
    position: absolute;
    width: clamp(170px, 15vw, 625px);
    aspect-ratio: 625 / 700;
    right: 0;
    bottom: 0;
    transition: var(--main-transition);
}

#fd:hover .pain,
#fd .pain.hover {
    bottom: clamp(60px, 7vw, 170px);
    transform: rotate(-5deg);
    right: 3%;
	transition: var(--main-transition);
}

#fd .tartine {
    position: absolute;
    width: clamp(170px, 15vw, 625px);
    aspect-ratio: 625 / 700;
    right: 0;
    bottom: 0;
    transition: var(--main-transition);
}

#fd:hover .tartine,
#fd .tartine.hover {
	bottom: clamp(60px, 7vw, 170px);
    transform: rotate(-2deg);
	right: 1%;
	transition: var(--main-transition);
}

#fd .baguette {
    position: absolute;
    width: clamp(170px, 15vw, 625px);
    aspect-ratio: 625 / 700;
    right: 0;
    bottom: 0;
    transition: var(--main-transition);
}

#fd:hover .baguette,
#fd .baguette.hover {
	bottom: clamp(60px, 8vw, 170px);
    right: -2%;	
    transform: rotate(4deg);
	transition: var(--main-transition);
}

#fd .croissant {
    position: absolute;
    width: clamp(170px, 15vw, 625px);
    aspect-ratio: 625 / 700;
    right: 0;
    bottom: 0;
    transition: var(--main-transition);
}

#fd:hover .croissant,
#fd .croissant.hover {
	bottom: clamp(60px, 7vw, 170px);
    transform: rotate(-2deg);
	right: -3%;
	transition: var(--main-transition);
}

#fd .fd-front.active,
#fd .fd-back.active {
    bottom: -30%;
	transition: var(--main-transition);
}

#fd .close.active,
#fd .pain.active,
#fd .tartine.active,
#fd .baguette.active,
#fd .croissant.active {
    bottom: -70%;
	transition: var(--main-transition);
}

@media (hover: none) {

  #fd .close       { animation: closeAnim 8s ease-in-out 2 both; }
  #fd .fd-front    { animation: frontAnim 8s ease-in-out 2 both; }
  #fd .fd-back     { animation: backAnim 8s ease-in-out 2 both; }
  #fd .pain        { animation: painAnim 8s ease-in-out 2 both; }
  #fd .tartine     { animation: tartineAnim 8s ease-in-out 2 both; }
  #fd .baguette    { animation: baguetteAnim 8s ease-in-out 2 both; }
  #fd .croissant   { animation: croissantAnim 8s ease-in-out 2 both; }
  #fd div.txt      { animation: txtAnim 8s ease-in-out 2 both; }

  @keyframes closeAnim {
    0% {
      bottom: clamp(135px, 15vw, 500px);
      right: 0;
    }
    10% {
      bottom: clamp(200px, 18vw, 500px);
      right: -5%;
    }
    60% {
      bottom: clamp(200px, 18vw, 500px);
      right: -5%;
    }
    70% {
      bottom: clamp(135px, 15vw, 500px);
      right: 0;
    }
    100% {
      bottom: clamp(135px, 15vw, 500px);
      right: 0;
    }
  }

  @keyframes frontAnim {
    0% {
      bottom: 0;
    }
    10% {
      bottom: clamp(60px, 6vw, 200px);
    }
    60% {
      bottom: clamp(60px, 6vw, 200px);
    }
    70% {
      bottom: 0;
    }
    100% {
      bottom: 0;
    }
  }

  @keyframes backAnim {
    0% {
      bottom: 0;
    }
    10% {
      bottom: clamp(60px, 6vw, 200px);
    }
    60% {
      bottom: clamp(60px, 6vw, 200px);
    }
    70% {
      bottom: 0;
    }
    100% {
      bottom: 0;
    }
  }

  @keyframes painAnim {
    0% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    10% {
      bottom: clamp(60px, 7vw, 170px);
      transform: rotate(-5deg);
      right: 3%;
    }
    60% {
      bottom: clamp(60px, 7vw, 170px);
      transform: rotate(-5deg);
      right: 3%;
    }
    70% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    100% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
  }

  @keyframes tartineAnim {
    0% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    10% {
      bottom: clamp(60px, 7vw, 170px);
      transform: rotate(-2deg);
      right: 1%;
    }
    60% {
      bottom: clamp(60px, 7vw, 170px);
      transform: rotate(-2deg);
      right: 1%;
    }
    70% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    100% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
  }

  @keyframes baguetteAnim {
    0% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    10% {
      bottom: clamp(60px, 8vw, 170px);
      transform: rotate(4deg);
      right: -2%;
    }
    60% {
      bottom: clamp(60px, 8vw, 170px);
      transform: rotate(4deg);
      right: -2%;
    }
    70% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    100% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
  }

  @keyframes croissantAnim {
    0% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    10% {
      bottom: clamp(60px, 7vw, 170px);
      transform: rotate(-2deg);
      right: -3%;
    }
    60% {
      bottom: clamp(60px, 7vw, 170px);
      transform: rotate(-2deg);
      right: -3%;
    }
    70% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
    100% {
      bottom: 0;
      transform: rotate(0);
      right: 0;
    }
  }
}