@font-face {
  font-family: "suisse";
  src: url("assets/SuisseIntl-Book.otf");
  font-weight: book;
  font-style: normal;
}

@font-face {
  font-family: "zara";
  src: url("assets/zarathustra-v01.otf");
  font-style: normal;
}

@font-face {
  font-family: "Bagias";
  src: url("assets/BAGIAS.TTF");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: zara;
}

body::-webkit-scrollbar {
  display: none;
}

html {
  font-size: 16px;
}

.prevent-select {
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

#page {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

#page-accueil {
  overflow-y: scroll;
  overflow: hidden;
  width: 100%;
  height: 20000%;
}

#titre-accueil {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-left: 15%;
  padding-right: 15%;
  background: #1b1b1b;
}

#halo-container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
}

#halo {
  transition: opacity 0.8s;
  opacity: 0%;
  background: radial-gradient(ellipse at center, #bbb 0%, transparent 60%);
  width: min(100vh, 100vw);
  height: min(100vh, 100vw);
}

#titre-container {
  width: 100%;
  max-height: 90%;
  flex-direction: column;
}

.accueil-titre-texte {
  transition: 0.5s cubic-bezier(0.48, 0.47, 0.32, 0.96);
  font-family: Bagias;
  text-align: center;
  font-size: 15vw;
  line-height: 1.1em;
  letter-spacing: 0.8rem;
  color: #e8e8e8;
}

#cursor {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  scale: 3;
  transition: scale 1s cubic-bezier(0.48, 0.47, 0.32, 0.96);
  transform-origin: center center;
  animation: rotateCursor 3s infinite linear;
}

@keyframes rotateCursor {
  0% {
      transform: rotate(0deg) scale(1);
  }
  100% {
      transform: rotate(360deg) scale(1);
  }
}

.cursor-rect {
  transition: fill 0.75s cubic-bezier(0.65, 0, 0.26, 1.01);
}


/* PARTIE BOITE */

#boite-anim-levitate {
  animation: boite-anim-levitate 6s infinite alternate forwards ease-in-out;
}

#boite-anim-rotate {
  animation: boite-anim-rotate 4s infinite alternate forwards ease-in-out;
}

.boite_anim {
  display: flex;
  position: fixed;
  transform-style: preserve-3d;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

  
.boite {
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(200deg) scale3d(0, 0, 0);
  transition: 1s cubic-bezier(0.47, 0, 0.06, 0.99);
}


.boite:hover {
  cursor: pointer;
}

.base,
.couvercle {
  position: absolute;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  transition: 0.75s cubic-bezier(0.65, 0, 0.26, 1.01);
}

.couvercle {
  transform-origin: bottom left;
}

.dessus,
.fond,
.side,
.noeud,
.noeud-ombre,
.gradient,
.feuille,
.feuille-gradient {
  position: absolute;
  transition: transform 1s cubic-bezier(0.65, 0, 0.26, 1.01),
    width 0.75s cubic-bezier(0.65, 0, 0.26, 1.01),
    height 0.75s cubic-bezier(0.65, 0, 0.26, 1.01),
    background 0.75s cubic-bezier(0.65, 0, 0.26, 1.01),
    opacity 0.75s cubic-bezier(0.65, 0, 0.26, 1.01);
}

.side {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
}

#macaron-image {
  /* background: url(assets/m_.png); */
  background-image: url(assets/m_bleu.png);
  background-size: cover;
  transform: translateY(-30%) translateX(-5%) skew(-55deg) rotateY(84deg)
    rotateX(70deg) scaleX(1);
  transform-style: preserve-3d;
}

.bande-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.couvercle {
  /* display: none; */
}

.side::-webkit-scrollbar {
  display: none;
}

.gradient {
  display: flex;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.radial {
  background: radial-gradient(rgb(255, 255, 255, 0.35), rgb(0, 0, 0, 0.35));
}

.linear {
  background: linear-gradient(rgb(255, 255, 255, 0.2), rgb(0, 0, 0, 0.15));
}

.dessus {
  display: flex;
  justify-content: center;
}

.bandeBoite {
  height: 100%;
  transition: 0.75s cubic-bezier(0.65, 0, 0.26, 1.01);
}

.noeud {
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 15%;
  transform: translateY(-100%);
}

.feuille,
.feuille-gradient {
  width: 30%;
  height: 100%;
}

.noeud-ombre {
  transform-style: preserve-3d;
  transform: translateY(0.1%);
  width: 100%;
  height: 100%;
  background: radial-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 25%);
}


/* COULEURS */

.white,
.themed,
.txt-white,
.txt-themed {
  transition: 0.75s cubic-bezier(0.65, 0, 0.26, 1.01);
}

.white {
  background: #e8e8e8;
}

.txt-white {
  color: #e8e8e8;
}

.page-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}


/* PARTIE ENTRE-SECTIONS */

.entre-sections {
  width: 100%;
  height: 20%;
}


/* PARTIE INGREDIENTS */

.slider-container {
  flex: 0.2;
  margin-top: 4px;
  display: flex;
}

.slider {
  height: 100%;
  flex: calc(9 / 11);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  outline: none;
}

:root {
  --thumbAngle: 0deg;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4.3rem;
  height: 4.3rem;
  transform: rotate(var(--thumbAngle));
  background: url(assets/star_white_small.svg);
  background-size: contain;
  cursor: pointer;
}

.slider-input::-moz-range-thumb {
  max-width: 2rem;
  max-height: 2rem;
  cursor: pointer;
}

.slider-quantity-box {
  flex: calc(1 / 11);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider-quantity-txt {
  text-align: center;
  font-size: 3.5rem;
  font-weight: medium;
}


/* COLONNES */

.columns-container {
  flex: 0.8;
  display: flex;
  flex-direction: row;
}

.column {
  flex: calc(1 / 11);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.column:hover {
  padding-bottom: 2%;
}

.column-badge {
  max-width: 0.8rem;
  margin: 45%;
  margin-bottom: 0px;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.26, 1.01);
  transform: scale(0);
}

.column-badge-checked {
  transform: scale(5) rotate(180deg);
}

.ingredient-quantity-box {
  width: 100%;
  flex: 0.25;
  display: flex;
  justify-content: center;
  margin-bottom: 30%;
}

.ingredient-label-box {
  width: 100%;
  flex: 0.75;
  display: flex;
  justify-content: center;
  margin-bottom: 20%;
}

.ingredient-quantity-txt {
  text-align: left;
  writing-mode: vertical-lr;
  rotate: 180deg;
  font-size: 3.5rem;
  font-weight: medium;
}

.ingredient-label-txt {
  text-align: left;
  writing-mode: vertical-lr;
  rotate: 180deg;
  font-size: 3.5rem;
  font-weight: regular;
}


/* PARTIE COQUILLE ET GANACHE*/
/* 
.iframe-container {
  width: 100%;
  height: 100%;
  z-index: 20;
} */

.txt-titre {
  font-size: 6.5rem;
  padding-top: 0.5%;
  font-family: bagias;
  letter-spacing: 0.4rem;
  font-weight: bold;
}

.page-recette {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  transition: top 1s cubic-bezier(0.65, 0, 0.26, 1.01);
}

.recette-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  flex: 0.2;
  margin-top: 4px;
  margin-bottom: 4px;
}

.recette-titre {
  text-align: center;
}

.recette-step {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 0.25;
}

.step-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  transition: padding-left 0.4s cubic-bezier(0.65, 0, 0.26, 1.01);
}

.step-box:hover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-left: 4%;
}

.step-text {
  text-align: left;
  margin-left: 9%;
  font-weight: medium;
  font-size: 3.5rem;
}

.step-badge {
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.26, 1.01);
  width: 0.8rem;
  transform: scale(0) rotate(0deg);
  margin-right: 9%;
}

.step-badge-checked {
  transform: scale(5) rotate(180deg);
}

.recette-big-container {
  width: 100%;
  flex: 0.8;
  display: flex;
  flex-direction: row;
}

.recette-steps-container {
  display: flex;
  flex-direction: column;
  flex: 0.5;
  height: 100%;
}

.recette-text-container {
  flex: 0.5;
  height: 100%;
  padding-top: 4%;
  padding-bottom: 0%;
}

.margin-right {
  margin-right: 2px;
}

.margin-left {
  margin-left: 2px;
}

.recette-txt {
  margin-left: 9%;
  padding-right: 9%;
  padding-bottom: 5%;
  font-size: 3rem;
  font-weight: book;
}

.quantity-span,
.image-span {
  font-weight: bold;
}


/* PARTIE HISTOIRE */

.histoire-big-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 400%;
}

.histoire-onglet {
  flex: calc(1/4);
  display: flex;
  overflow: hidden;
}

.histoire-header {
  display: flex;
  flex: calc(1/11);
  justify-content: center;
}

.histoire-header-text {
  font-size: 6.5rem;
  padding-top: 0.5%;
  font-family: bagias;
  letter-spacing: 0.4rem;
  font-weight: bold;
  writing-mode: vertical-lr;
  rotate: 180deg;
  text-align: center;
}

.histoire-text-container {
  z-index: 0;
  flex: calc(11/12);
  height: 100%;
  padding-top: 0%;
  padding-bottom: 0%;

}


.histoire-text {
  margin-left: 5%;
  padding-right: 9%;
  padding-bottom: 2%;
  font-size: 3rem;
  margin-right: calc(27.2727%);
  padding-top: 50px;
}


.o1-left {
  transform: translateY(-100%) translateX(calc(100% / 11));
}

.o1-right {
  transform: translateY(-100%) translateX(calc(800% / 11));
}

.o2-left {
  transform: translateY(-200%) translateX(calc(200% / 11));
}

.o2-right {
  transform: translateY(-200%) translateX(calc(900% / 11));
}

.o3-left {
  transform: translateY(-300%) translateX(calc(300% / 11));
}

.o3-right {
  transform: translateY(-300%) translateX(calc(1001% / 11));
}

@media (max-aspect-ratio: 100/9) {
  html {
      font-size: 1.4vh;
  }
  .step-box:hover {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      padding-left: 0%;
  }
  .column:hover {
      padding-bottom: 0%;
  }
  #titre-accueil {
      padding-left: 5%;
      padding-right: 5%;
  }
  .accueil-titre-texte {
      font-size: 20vw;
      line-height: 1.1em;
      letter-spacing: 0.8rem;
  }
}

@media (max-aspect-ratio: 50/9) {
  html {
      font-size: 1.4vh;
  }
  .step-box:hover {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      padding-left: 0%;
  }
  .column:hover {
      padding-bottom: 0%;
  }
  #titre-accueil {
      padding-left: 0%;
      padding-right: 0%;
  }
  .accueil-titre-texte {
      font-size: 11vw;
      line-height: 1.1em;
      letter-spacing: 0.8rem;
  }
}

@media (max-aspect-ratio: 24/9) {
  html {
      font-size: 1.5vh;
  }
  .step-box:hover {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      padding-left: 4%;
  }
  .column:hover {
      padding-bottom: 2%;
  }
  .histoire-header-text {
      font-size: 5.5rem;
      padding-top: 0.5%;
      font-family: bagias;
      letter-spacing: 0.4rem;
      font-weight: bold;
      writing-mode: vertical-lr;
      rotate: 180deg;
      text-align: center;
  }
}

@media (max-aspect-ratio: 12/9) {
  html {
      font-size: 1.3vh;
  }
  .histoire-header-text {
      font-size: 5rem;
      padding-top: 0.5%;
      font-family: bagias;
      letter-spacing: 0.4rem;
      font-weight: bold;
      writing-mode: vertical-lr;
      rotate: 180deg;
      text-align: center;
  }
  .histoire-text-container {
      flex: calc(11/12);
      height: 100%;
      padding-top: 5%;
      padding-bottom: 0%;
  }
  .histoire-text {
      margin-left: 5%;
      padding-right: 9%;
      padding-bottom: 3%;
      font-size: 3rem;
      font-weight: book;
      margin-right: calc(300%/11);
  }
}

@media (max-aspect-ratio: 9/9) {
  html {
      font-size: 2vh;
  }
  #titre-accueil {
      padding-left: 3%;
      padding-right: 0%;
  }
  .accueil-titre-texte {
      font-size: 19vw;
      line-height: 1.1em;
      letter-spacing: 0.8rem;
  }
  .page-section {
      display: flex;
      flex-direction: column;
      max-height: 100%;
      max-width: 100%;
  }
  /* PARTIE INGREDIENTS */
  .slider-container {
      width: 100%;
      margin-top: 0.15rem;
      margin-bottom: 0px;
      display: flex;
      flex: calc(1/12);
      flex-direction: row;
  }
  .slider {
      height: 100%;
      flex: calc(9 / 11);
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .slider-input {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 0.2rem;
      outline: none;
  }
   :root {
      --thumbAngle: 0deg;
  }
  .slider-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 2rem;
      height: 2rem;
      transform: rotate(var(--thumbAngle));
      background: url(assets/star_white_small.svg);
      background-size: contain;
      cursor: pointer;
  }
  .slider-input::-moz-range-thumb {
      max-width: 2rem;
      max-height: 2rem;
      cursor: pointer;
  }
  .slider-quantity-box {
      flex: calc(2 / 11);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .slider-quantity-txt {
      text-align: center;
      font-size: 1.4rem;
      font-weight: medium;
  }
  /* COLONNES */
  .columns-container {
      display: flex;
      flex-direction: column;
      flex: calc(11/12);
  }
  .column {
      display: flex;
      flex-direction: row-reverse;
      transition: 0.3s;
  }
  .column:hover {
      padding-bottom: 0%;
  }
  .column-badge {
      max-width: 0.35rem;
      margin: 0%;
      margin-right: calc(100%/15);
      transition: transform 0.5s cubic-bezier(0.65, 0, 0.26, 1.01);
      transform: scale(0);
  }
  .column-badge-checked {
      transform: scale(5) rotate(180deg);
  }
  .ingredient-quantity-box {
      width: 100%;
      flex: 0.3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 0%;
      margin-left: calc(100% / 20);
  }
  .ingredient-label-box {
      width: 100%;
      flex: 0.75;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 0%;
      margin-left: calc(100%/20);
  }
  .ingredient-quantity-txt {
      text-align: left;
      writing-mode: unset;
      rotate: 0deg;
      padding-top: 7%;
      font-size: 1.4rem;
      font-weight: medium;
  }
  .ingredient-label-txt {
      text-align: left;
      writing-mode: unset;
      rotate: 0deg;
      padding-top: 2%;
      font-size: 1.4rem;
      font-weight: regular;
  }
  /* PARTIE COQUILLE ET GANACHE*/
  .page-recette {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      transition: top 1s cubic-bezier(0.65, 0, 0.26, 1.01);
  }
  .recette-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      flex: calc(1/9);
      margin: 0px;
      margin-bottom: 0.15rem;
  }
  .txt-titre {
      padding-top: 2%;
      font-size: 2rem;
      font-weight: bold;
  }
  .recette-titre {
      text-align: center;
  }
  .recette-steps-container {
      display: flex;
      flex-direction: row;
      flex: calc(1/2);
      height: unset;
  }
  .recette-step {
      display: flex;
      flex-direction: column-reverse;
      width: 100%;
      flex: 0.25;
  }
  .step-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      height: 100%;
      transition: padding-left 0.4s cubic-bezier(0.65, 0, 0.26, 1.01);
  }
  .step-box:hover {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding-left: 0%;
  }
  .step-text {
      text-align: left;
      margin-left: 5%;
      margin-bottom: calc(100% / 3);
      font-weight: medium;
      font-size: 2rem;
      writing-mode: vertical-lr;
      rotate: 180deg;
  }
  .step-badge {
      transition: transform 0.5s cubic-bezier(0.65, 0, 0.26, 1.01);
      width: 0.35rem;
      transform: scale(0) rotate(0deg);
      margin-right: 0%;
      margin: 47.5%;
      margin-bottom: 0%;
  }
  .step-badge-checked {
      transform: scale(5) rotate(180deg);
  }
  .recette-big-container {
      width: 100%;
      height: unset;
      flex: calc(8/9);
      display: flex;
      flex-direction: column-reverse;
  }
  .recette-text-container {
      flex: calc(1/2);
      height: 100%;
      padding-top: 6%;
      padding-bottom: 0%;
  }
  .margin-right {
      margin-right: 0px;
      margin-top: 0.15rem;
  }
  .margin-left {
      margin-left: 0px;
  }
  .recette-txt {
      margin-left: 7%;
      padding-right: 7%;
      padding-bottom: 5%;
      font-size: 1.4rem;
      font-weight: book;
  }
  .quantity-span {
      font-weight: bold;
  }
  /* PARTIE HISTOIRE */
  .histoire-big-container {
      display: flex;
      flex-direction: row;
      overflow: hidden;
      width: 400%;
      height: 100%;
  }
  .histoire-onglet {
      flex: calc(1/4);
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }
  .histoire-header {
      display: flex;
      flex-direction: column;
      flex: calc(1/11);
      justify-content: center;
  }
  .histoire-header-text {
      font-size: 2.5rem;
      padding-top: 0.7%;
      font-family: bagias;
      letter-spacing: 0.25rem;
      font-weight: bold;
      writing-mode: unset;
      rotate: 0deg;
      text-align: center;
  }
  .histoire-text-container {
      flex: calc(11/12);
      height: 100%;
      padding-top: 5%;
      padding-bottom: 0%;
  }
  .histoire-text {
      margin-left: 5%;
      padding-right: 5%;
      padding-bottom: 5%;
      font-size: 1.6rem;
      font-weight: book;
      margin-right: 0%;
  }
  .o1-left {
      transform: translateX(-100%) translateY(calc(100% / 11));
  }
  .o1-right {
      transform: translateX(-100%) translateY(calc(800% / 11));
  }
  .o2-left {
      transform: translateX(-200%) translateY(calc(200% / 11));
  }
  .o2-right {
      transform: translateX(-200%) translateY(calc(900% / 11));
  }
  .o3-left {
      transform: translateX(-300%) translateY(calc(300% / 11));
  }
  .o3-right {
      transform: translateX(-300%) translateY(calc(1001% / 11));
  }
}

@media (max-aspect-ratio: 7/9) {
  html {
      font-size: 2vh;
  }
  #titre-accueil {
      padding-left: 3%;
      padding-right: 0%;
  }
  .accueil-titre-texte {
      font-size: 18vw;
      line-height: 1.1em;
      letter-spacing: 0.8rem;
  }
  .histoire-header-text {
      font-size: 2.3rem;
      padding-top: 0.7%;
      font-family: bagias;
      letter-spacing: 0.25rem;
      font-weight: bold;
      writing-mode: unset;
      rotate: 0deg;
      text-align: center;
  }
  .histoire-text-container {
      flex: calc(11/12);
      height: 100%;
      padding-top: 1%;
      padding-bottom: 0%;
  }
  .histoire-text {
      margin-left: 5%;
      padding-right: 5%;
      padding-bottom: 5%;
      font-size: 1.3rem;
      font-weight: book;
      margin-right: 0%;
  }
  #moyenage-imgs-container {

      width: 100%;
      height: 70%;

}

}

@media (max-aspect-ratio: 5/9) {
  html {
      font-size: 1.7vh;
  }
  #titre-accueil {
      padding-left: 2%;
      padding-right: 0%;
  }
  #titre-container {
      max-height: 100%;
  }
  .accueil-titre-texte {
      font-size: 19vw;
      line-height: 1.1em;
      letter-spacing: 0.3rem;
  }
  .txt-titre {
      font-size: 2.7rem;
      letter-spacing: 0.2rem;
  }
  #moyenage-imgs-container {
     
      width: 100%;
      height: 70%;

}}



#moyenage-imgs-container {
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 3;
  /* background-color: red; */
  position: absolute;
  opacity: 0%;
  background-image: url("");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
}



#renaissance-imgs-container {
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 3;
  /* background-color: red; */
  position: absolute;
  opacity: 0%;
  background-image: url("");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
}


#siecle-imgs-container {
  pointer-events: none;
  width: 50%;
  height: 100%;
  z-index: 3;
  /* background-color: red; */
  position: absolute;
  opacity: 0%;
  background-image: url("");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
}


@media (max-aspect-ratio: 50/9) {

  #siecle-imgs-container {
      pointer-events: none;
      width: 100%;
      height: 100%;
    
  }


}

#ajd-imgs-container {
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 3;
  /* background-color: red; */
  position: absolute;
  opacity: 0%;
  background-image: url("");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
}

.mot-important {
  text-decoration: underline;
}

.histoire-imgs-container {
  /* background-color: red; */
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  opacity: 0%;
  background-image: url("");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
}