body{font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:1.6;margin:0;padding:0}#wrapper{min-height:55vw;overflow:hidden;position:relative;width:100%}.layer{overflow:hidden}.layer,.layer .content-wrap{min-height:55vw;position:absolute;width:100vw}.layer .content-body{color:#fff;position:absolute;text-align:center;top:50%;transform:translateY(-50%);width:25%}.layer img{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:35%}.layer h1{font-size:2em}.bottom{background:#222;z-index:1}.bottom .content-body{right:5%}.bottom h1{color:#f3ac66}.top{background:#eee;color:#222;width:50vw;z-index:2}.top .content-body{color:#222;left:5%}.handle{background-color:#f3ac66;display:block;height:100%;left:50%;position:absolute;top:0;width:5px;z-index:3}.skewed .handle{height:200%;top:50%;transform:rotate(30deg) translateY(-50%);transform-origin:top}.skewed .top{margin-left:-1000px;transform:skew(-30deg);width:calc(50vw + 1000px)}.skewed .top .content-wrap{margin-left:1000px;transform:skew(30deg)}@media(max-width:768px){body{font-size:75%}}