#invoice-POS { box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); padding: 2mm; margin: 0 auto; width: 44mm; background: #fff; ::selection { background: #f31544; color: #fff; } ::moz-selection { background: #f31544; color: #fff; } h1 { font-size: 1.5em; color: #222; } h2 { font-size: 0.9em; } h3 { font-size: 1.2em; font-weight: 300; line-height: 2em; } p { font-size: 0.7em; color: #666; line-height: 1.2em; } #top, #mid, #bot { /* Targets all id with 'col-' */ border-bottom: 1px solid #eee; } #top { min-height: 100px; } #mid { min-height: 80px; } #bot { min-height: 50px; } #top .logo { height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/logo1.png) no-repeat; background-size: 60px 60px; } .clientlogo { float: left; height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/client.jpg) no-repeat; background-size: 60px 60px; border-radius: 50px; } .info { display: block; margin-left: 0; } .title { float: right; } .title p { text-align: right; } table { width: 100%; border-collapse: collapse; } .tabletitle { font-size: 0.5em; background: #eee; } .service { border-bottom: 1px solid #eee; } .item { width: 24mm; } .itemtext { font-size: 0.5em; } #legalcopy { margin-top: 5mm; } } .btn-4 { border: 1px solid; overflow: hidden; position: relative; span { z-index: 20; } &:after { background: #fff; content: ""; height: 155px; left: -75px; opacity: .2; position: absolute; top: -50px; transform: rotate(35deg); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); width: 50px; z-index: -10; } } .btn-4:hover { &:after { left: 120%; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); } }