.media{width:-webkit-max-content;width:-moz-max-content;width:max-content}.media__control{top:47%;left:49%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);align-items:center;justify-content:center;flex-direction:row}.media__control__shape{width:15px;height:27px;background:#cbcbcb;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out}.media__control__shape--one{-webkit-clip-path:polygon(45% 15%,95% 15%,95% 85%,45% 85%);clip-path:polygon(45% 15%,95% 15%,95% 85%,45% 85%)}.media__control__shape--one,.media__control__shape--two{transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0)}.media__control__shape--two{-webkit-clip-path:polygon(25% 15%,75% 15%,75% 85%,25% 85%);clip-path:polygon(25% 15%,75% 15%,75% 85%,25% 85%)}.media__control.js--active .media__control__shape{background:#f0c95f}.media__control.js--active .media__control__shape--one{height:40px;-webkit-clip-path:polygon(0 0,100% 25%,100% 75%,0 100%);clip-path:polygon(0 0,100% 25%,100% 75%,0 100%);transform:translateX(5px);-webkit-transform:translateX(5px);-moz-transform:translateX(5px);-ms-transform:translateX(5px);-o-transform:translateX(5px)}.media__control.js--active .media__control__shape--two{height:45px;-webkit-clip-path:polygon(0 25%,100% 50%,100% 50%,0 75%);clip-path:polygon(0 25%,100% 50%,100% 50%,0 75%);transform:translateX(3.5px);-webkit-transform:translateX(3.5px);-moz-transform:translateX(3.5px);-ms-transform:translateX(3.5px);-o-transform:translateX(3.5px)}