#slideshowBody{
  margin: 0;
  padding: 0;
  height: calc(100vh - 5rem);
  margin-top: 0rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
}
.imgCont{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  /*background-color: rgb(144, 210, 236);*/
}
.textContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -20vh;
  background-color: #4447;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}
.fadeIn{
  animation: 1s  fade-in forwards;
}
.fadeOut{
  animation: 1s  fade-out forwards;
}
img{
  
  max-height: 100%;
  flex: auto;
}
@keyframes fade-in{
  from {
    translate: -100%;
    scale: 0 1;
    /*transform: rotate(-180deg);*/
    opacity: 0%;
  }
  to{
    translate: 0%;
    scale: 1 1;
    /*transform: rotate(0deg);*/
    opacity: 100%;
  }
}
@keyframes fade-out{
  from {
    translate: 0%;
    scale: 1 1;
    /*transform: rotate(0deg);*/
    opacity: 100%;
  }
  to{
    translate: 80%;
    scale: 0 1;
    /*transform: rotate(180deg);*/
    opacity: 0%;
  }
}
@media (min-width: 768px){
  #slideshowBody{
    height: calc(100vh - 7.5rem);
    margin-top: 7.5rem;
  }
  img{
    max-width: 100%;
  }
}