.foldOpen {
  animation: foldopen 0.5s forwards ease-in;
}

@keyframes foldopen {
  from {
    max-width: 1px;
  }
  to {
    max-width: 33.33vw;
  }
}


.foldClose {
  flex: 0;
  animation: foldclose 0.5s forwards ease-in;
}

@keyframes foldclose {
  100% {
    max-width: 1px;
    padding: 0px;
  }
}

#content.col-md-12 {
  min-width: 75%;
  width: 100%;
  max-width: none!important;
  flex: none!important;
}

.foldEnlarge {
  transition: 0.5s ease-in;
  margin-left: 0em!important;
  width: 100%!important;
  max-width: 100%!important;
  flex: none!important;
}


.foldShrink {
  transition: 0.5s ease-in;
  transition-property: margin-left, width, max-width;
  margin-left: 25%!important;
  width: 75%!important;
  max-width: 75%!important;
  flex: none!important;
}

.textShrink {
  transition: 0.5s cubic-bezier(0,0,1,0);
  transform: translateX(-45vw);
}

.textEnlarge {
  transition: 0.5s cubic-bezier(0,0,0,1);
}

.fade-in {
  animation: fade-in 0.5s forwards ease-in-out;
  animation-delay: 1s;
  animation-play-state: running;
}

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