#wrapper-canvas canvas{
    max-width: 100%;
    max-height: 100%;
}

#overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out; /* Smooth overlay fade-in/out */
}

#overlay.active {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.2s ease-in-out;
}


#modal {
    position: fixed;
    top: -100%; 
    left: 50%;
    transform: translateX(-50%) scale(0); 
    transition: top 0.2s ease-in-out, transform 0.3s ease-in-out; 
}

#modal.active {
    top: 50%;
    transform: translate(-50%, -50%) scale(1); 
}


#modal > .flex {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#modal.active > .flex {
    opacity: 1;
}


#modal {
    position: fixed;
    top: -100%; 
    left: 50%;
    transform: translateX(-50%) scale(0); 
    transition: top 0.3s ease-in-out, transform 0.3s ease-in-out; 
}




/* CLOSE BUTTON EFFECT */
.outer {
    position: relative;
    width: 30px;
    margin-top: 0px;
    cursor: pointer;
    
  }
  
  .inner {
    width: inherit;
    text-align: center;
  }
  
  label { 
    font-size: .9em; 
    line-height: 2.5em;
    text-transform: uppercase;
    color: #fff;
    transition: all .2s ease-in;
    opacity: 0;
    cursor: pointer;
  }
  
  .inner:before, .inner:after {
    position: absolute;
    content: '';
    height: 2.5px;
    width: inherit;
    background: #e71313;
    left: 0;
    transition: all .2s ease-in;
  }
  
  .inner:before {
    top: 50%; 
    transform: rotate(45deg);  
  }
  
  .inner:after {  
    bottom: 50%;
    transform: rotate(-45deg);  
  }
  
  .outer:hover label {
    opacity: 1;
  }
  
  .outer:hover .inner:before,
  .outer:hover .inner:after {
    transform: rotate(0);
  }
  
  .outer:hover .inner:before {
    top: 0;
  }
  
  .outer:hover .inner:after {
    bottom: 0;
  }


/* FOOTER */