/* Google Font Link */

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');



.slider-container {

  position: relative;

  overflow: hidden;

  width: 100vw;

  height: 60vh;

}



.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;

  margin-top: -30px;

}



.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;

}



button:hover {

  color: #222;

}



button:focus {

  outline: none;

}



.slider-container .action-buttons button {

  position: absolute;

  left: 35%;

  top: 50%;

  z-index: 100;

}



.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-right-radius: 5px;

  border-bottom-right-radius: 5px;

}