.home-grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
  background-color: #fff;
  color: #444;
}

.home-grid-cell {
  background-color: rgb(255,218,185);
  color: #000000;
  border-radius: 15px;
  padding: 20px;
}

.animated_card_box {

  transform: translateX(-50%);
  display: flex!important;
  left: 50%;
  flex-grow:1;
  flex-direction: column;
  background-color:transparent;
  margin-top:20px;
  margin-bottom:20px;
  border:1px solid transparent;
}

.animated_card {

  position:relative;
  width:100%;
  height:100%;
  background: #000000;
}

.animate_in {
  position: absolute;
  animation-name: moveIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  display: flex;
  flex-grow: 1;
}

.animate_out {
  position: absolute;
  animation-name: moveOut;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  display: flex;
  flex-grow: 1;
}

@keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {

    opacity: 0.8;
  }
}

@keyframes moveOut {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

.button_red {
  color: red;
}

.button_white {
  color: white;
}