@import url('https://fonts.googleapis.com/css?family=Open+Sans%27');

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

body{
  font-family:'Open Sans', sans-serif;
  height:100vh;
}

.slider-container{
  position:relative;
  overflow:hidden;
  width:100vw;
  height:100vh;
}

.left-slide{
  height:100%;
  width:35%;
  position:absolute;
  top:0;
  left:0;
  transition:transform 0.5s ease-in-out;
}

.left-slide > div{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.left-slide h1{
  font-size:40px;
  margin-bottom:10px;
}

.right-slide{
  height:100%;
  position:absolute;
  top:0;
  left:35%;
  width:65%;
  transition:transform 0.5s ease-in-out;
}
.right-slide > div{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
}

button{
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

.slider-container .action-buttons button{
  z-index: 100;
  position: absolute;
  left: 35%;
  top: 50%;
}
.slider-container .action-buttons .down-button{
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.slider-container .action-buttons .up-button{
  transform: translateY(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}