.container {
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;
  }
  
  .box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
  }
  
  .box > img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover; 
    transition: .5s;
  }
  
  .box > span {
    font-size: 3.8vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
  }
  
  .box:hover { flex: 1 1 50%; }
  .box:hover > img {
    width: 100%;
    height: 100%;
  }



 * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
		-webkit-tap-highlight-color: transparent;
}

button {
	width: 75px;
	height: 75px;
	cursor: pointer;
	background-color: #5de6de;
	background-image: linear-gradient(315deg, #5de6de 0%, #b58ecc 74%);
	border: none;
	border-radius: 50%;
	transition: 200ms;
}

button svg {
	fill: white;
	width: 30px;
	height: 30px;
	position: absolute;
	transform: translateX(-50%) translateY(-50%);
}

button:before {
	content: '';
	position: absolute;
	transform: translateX(-50%) translateY(45px);
	font-size: 15px;
	transition: 200ms;
	color: transparent;
	font-weight: bold;
}

button {
	box-shadow: 0 1px 5px rgba(0,0,0,0.2);
	width: 80px;
	height: 80px;
}

button::before {
	color: #fff;
}

button svg {
		animation: bounce 2s infinite linear;
}

@keyframes bounce {
	0% {transform: translateX(-50%) translateY(-50%)}
	25% {transform: translateX(-50%) translateY(-65%)}
	50% {transform: translateX(-50%) translateY(-50%)}
	75% {transform: translateX(-50%) translateY(-35%)}
	100% {transform: translateX(-50%) translateY(-50%)}
}

button:focus {
	outline: none;
}