* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  /* Panels. */
  .splitview {
    position: relative;
    width: 100%;
    min-height: 45vw;
    overflow: hidden;
  }
  
  .panel {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    overflow: hidden;
  }
  
  .panel .content {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    color: #fff;
  }
  
  .panel .description {
    width: 25%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
  
  .panel img {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
    width: 35%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bottom {
    background-color: #E80F88;
    z-index: 1;
  }
  
  .bottom .description {
    right: 5%;
  }
  
  .top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
  
    /*-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
      clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
  }
  
  .top .description {
    left: 5%;
  }
  
  /* Handle. */
  .handle {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(253, 171, 0);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
  }
  
  /* Skewed. */
  .skewed .handle {
    top: 50%;
    transform: rotate(30deg) translateY(-50%);
    height: 200%;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
  }
  
  .skewed .top {
    transform: skew(-30deg);
    margin-left: -1000px;
    width: calc(50vw + 1000px);
  }
  
  .skewed .top .content {
    transform: skew(30deg);
    margin-left: 1000px;
  }
  
  /* Responsive. */
  @media (max-width: 900px) {
   
  }