.slider {
    width:100%;
    /*height:250px;*/
    display:flex;
    overflow:hidden;
    position:relative;
    /*margin:20px 0;*/
  }
  .slider:nth-child(2) {
    width:100%;
    /*height:40vw;*/
  }
  .slider:before,
  .slider:after {
    content:url(chevron.png);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    font-size:200%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#555;
  }
  .slider:before {
    transform:rotate(180deg);
  }
  .slider:after {
    left:auto;
    right:0;
  }
  .slider > div {
    flex: 0 0 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    font-size:200%;
    transition:margin-left .3s;
  }