#archiveIntro{
  position:fixed;
  inset:0;
  background:#1c1c1c;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:99999999;
  overflow:hidden;
}

.archive-title{
  color:#e0d2b7;
  font-size:12px;
  letter-spacing:.35em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:30px;
}

.archive-status{
  color:#e0d2b7;
  font-size:28px;
  font-weight:700;
  margin-bottom:40px;
  opacity:0;
  transform:translateY(20px);
}

.case-file{
  width:90px;
  height:65px;
  border:2px solid #e0d2b7;
  border-radius:8px;
  position:relative;
  opacity:0;
}

.case-file:before{
  content:"";
  position:absolute;
  top:-12px;
  left:10px;
  width:40px;
  height:12px;
  border:2px solid #e0d2b7;
  border-bottom:none;
  border-radius:6px 6px 0 0;
}

.archive-folder{
  width:130px;
  height:85px;
  border:2px solid #e0d2b7;
  border-radius:8px;
  position:absolute;
  opacity:0;
}

.archive-folder:before{
  content:"";
  position:absolute;
  top:-14px;
  left:14px;
  width:50px;
  height:14px;
  border:2px solid #e0d2b7;
  border-bottom:none;
  border-radius:6px 6px 0 0;
}

.archive-success{
  color:#e0d2b7;
  font-size:30px;
  font-weight:700;
  opacity:0;
  transform:scale(.8);
}

.archive-hide{
  opacity:0 !important;
  transition:.45s ease;
}

@keyframes statusIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fileIn{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes moveToArchive{
  from{
    transform:translateX(0) scale(1);
    opacity:1;
  }
  to{
    transform:translateX(180px) scale(.35);
    opacity:0;
  }
}

@keyframes archiveAppear{
  from{
    opacity:0;
    transform:scale(.9);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes successIn{
  from{
    opacity:0;
    transform:scale(.8);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@media(max-width:768px){

  .archive-status{
    font-size:22px;
    text-align:center;
    padding:0 25px;
  }

  .archive-success{
    font-size:24px;
    text-align:center;
    padding:0 25px;
  }

  @keyframes moveToArchive{
    from{
      transform:translateX(0) scale(1);
      opacity:1;
    }
    to{
      transform:translateX(110px) scale(.35);
      opacity:0;
    }
  }
}