.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-right {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}
.animation-element.slide-left.in-view, .animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}



.card {
	position: relative;
	width: max(60vw, 350px - 3vw);
	height: 60vmin;
  margin-top: 30px;
	background: #ececec9d;
	border: 1px solid #433f0e;
	box-shadow: 15px 15px 37px -10px #7e7e7e;
 	overflow: hidden;
}
.card:hover {cursor: pointer;}

.text-holder {
	width: 60%;
	margin: clamp(1rem, 6%, 3rem);
}
.h1_card, .p_card {
	margin-bottom: clamp(.5rem, 2%, 1rem);
	transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}
.h1_card {
	font-size: clamp(1.5rem, 5vw, 2.5rem);
}
.p_card {
	font-size: clamp(1rem, 1vw, 1.5rem);
}

.toggled .p_card, .toggled .h1_card {
	transform: translateY(100px);
	opacity: 0;
}

.image-holder {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	width: 30%;
	height: 90%;
	background-size: cover;
  background-position: center top;
	border-radius: 3px;
	box-shadow: 3px 3px 10px 0 rgba(0 0 0 / 0.7);
	transition: all .4s ease-in-out .075s;
}

.image-holder:hover {
  width: 35%;
}

.toggled .image-holder {
	right: 0;
	height: 100%;
	width: 100%;
}