:root{--packt-s: 1}@media(max-width:1400px){:root{--packt-s: .92}}@media(max-width:1200px){:root{--packt-s: .64}}@media(max-width:992px){:root{--packt-s: .5}}@media(max-width:768px){:root{--packt-s: .38}}@media(max-width:520px){:root{--packt-s: .26}}body{margin:0;padding:0;font-family:sans-serif;background:#000;overflow:hidden}.center{position:fixed;top:50%;left:50%;transform:skewY(15deg) scale(var(--packt-s));transition:.5s;transform-origin:0 0}.center:hover{transform:skewY(0) scale(var(--packt-s))}.center h1 span{position:absolute;top:0;left:0;transform:translate(-50%,-50%);margin:0;padding:0;text-transform:uppercase;font-size:12em;color:#fff;transform-style:preserve-3d;transition:.8s;white-space:nowrap}.center h1 span:nth-child(1){clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}.center h1 span:nth-child(2){color:#b00020;transform:translate(-50%,-50%) skew(-60deg);left:-38px;clip-path:polygon(0 45%,100% 45%,100% 55%,0 55%)}.center h1 span:nth-child(3){transform:translate(-50%,-50%) skewY(0);left:-76px;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}.center:hover h1 span:nth-child(2),.center:hover h1 span:nth-child(3){transform:translate(-50%,-50%) skew(0);left:0;color:#fff}.center h1 span:after{content:".";color:#fff;transition:color 1.25s ease}.center:hover h1 span:after{color:#b00020}.center.auto-fixed{transform:skewY(0) scale(var(--packt-s))}.center.auto-fixed h1 span:nth-child(2),.center.auto-fixed h1 span:nth-child(3){transform:translate(-50%,-50%) skew(0);left:0;color:#fff}.center.auto-fixed h1 span:after{color:#b00020}.center h1 span:after{content:"";display:inline-block;width:.15em;height:.15em;margin-left:.08em;background:#fff;border-radius:0;vertical-align:0em;transition:background-color 1.25s ease}.center:hover h1 span:after{background:#b00020}.center.auto-fixed h1 span:after{background:#b00020}