.opener{height:17px;position:absolute;top:8px;right:10px;cursor:pointer;padding:20px}.opener:before{content:"";border-top:1px solid #000;height:3px;width:25px;position:absolute;top:9px;left:50%;margin-left:-11px;z-index:1}.opener:after{content:"";border-top:1px solid #000;border-bottom:1px solid #000;height:7px;top:15px;width:25px;position:absolute;left:50%;margin-left:-11px}.opener:before,.opener:after{transition:transform 500ms ease,border-color 50ms ease,height 500ms ease}.opener.active:before{top:17px;transform:rotate(45deg)}.opener.active:after{top:16px;height:1px;border-top-color:#fff;transform:rotate(-45deg)}