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

/* --------------------- */

#overlay {
   z-index: 35;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   pointer-events: none;
}

#savePrompt {
   /* position: absolute;
   left: 50%;
   bottom: 22vh;
   transform: translateX(-50%);
   max-width: 80vw;

   font-family: sans-serif;
   font-weight: bold;
   font-size: 6vmin;
   color: black;
   text-align: center;

   background-color: white;
   padding: 2vmin;
   border-radius: 10px; */
}

#actionButton {
   /* change color of action button */
   background-color: #007aff !important;
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
   .recorder-container {
      /* move recorder button to side in landscape on mobile */
      left: unset !important;
      transform: unset !important;
      right: 3vw !important;
   }
}

/* --------------------- */
.photo #closeButton {
   display: block;
}

/* .header {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
}

.header > img {
   width: 100%;
   z-index: 10;
} */

.instructivo {
   position: absolute;
   top: 12%;
   left: 0;
   z-index: 10;
   display: flex;
   justify-content: center;
}

.instructivo > img {
   width: 90%;
}

.instrucMicroondas {
   position: absolute;
   top: 20%;
   left: 0;
   z-index: 12;
   /* display: flex; */
   display: none;
   justify-content: center;
}

.instrucMicroondas > img {
   width: 60%;
}

.instrucLicuadora {
   position: absolute;
   top: 20%;
   left: 0;
   z-index: 12;
   /* display: flex; */
   display: none;
   justify-content: center;
}

.instrucLicuadora > img {
   width: 60%;
}

.instrucCafetera {
   position: absolute;
   top: 20%;
   left: 0;
   z-index: 12;
   /* display: flex; */
   display: none;
   justify-content: center;
}

.instrucCafetera > img {
   width: 60%;
}

.fadeOut {
   animation: fade-out 1s forwards;
   transition: 0;
   will-change: opacity;
}

@keyframes fade-out {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

.fadeIn {
   animation: fade-in 1s forwards;
   transition: 0;
   will-change: opacity;
}

@keyframes fade-in {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

#btn {
   position: absolute;
   bottom: 8%;
   left: 0;
   background-color: transparent;
   border: none;
   outline: none;
   z-index: 10;
}

#btn > img {
   width: 100%;
   background-color: transparent;
   border: none;
}

/* .footer {
   position: absolute;
   bottom: -2px;
   right: 0;
   z-index: 10;
}

.footer > img {
   width: 100%;
} */