@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*{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 .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 .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}