* { margin: 0; padding: 0; box-sizing: border-box; } body { } .container { width: 100vw; height: 100vh; } /* .webp-container { position: absolute; top: 0; bottom: 0; width: 100vw; height: 100%; overflow: hidden; z-index: -1; } .webp-container .webp { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } */ .wrap-step { display:none; position: fixed; top:0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .wrap-step:first-child { display: block; } .step { width: 75%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } h2, .handle { text-transform: uppercase; font-weight: 800; color:#d9349f; text-shadow: #fff 1px 0 10px; } p { font-size: 1.25rem; font-weight:600; text-shadow: #000 1px 0 10px; margin: 0 15px 1em; color:#fff; } .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; color: #fff; border-radius: 0.3rem; border: none; cursor: pointer; } .btn-success { background-color: #28a745; margin-right: 7px; } .btn-danger { background-color: #dc3545; } a.mainlink { text-decoration: none; } .wrap-step:last-child .step h2 { margin-bottom: 20px; }