* { -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 0; margin: 0; } #notfound { position: relative; height: 100vh; } #notfound .notfound-bg { position: absolute; width: 100%; height: 100%; background: #a20e00; } #notfound .notfound { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .notfound { max-width: 910px; width: 100%; line-height: 1.4; text-align: center; } .notfound .notfound-404 { position: relative; height: 200px; } .notfound .notfound-404 h1 { font-family: 'Roboto', sans-serif; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 200px; font-weight: 900; margin: 0px; color: #fff; text-transform: uppercase; letter-spacing: 0px; } .notfound h2 { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; text-transform: uppercase; color: #fff; margin-top: 20px; margin-bottom: 30px; } .notfound .home-btn, .notfound .contact-btn { font-family: 'Roboto', sans-serif; display: inline-block; font-weight: 600; text-decoration: none; background-color: transparent; border: 2px solid transparent; text-transform: uppercase; padding: 13px 25px; font-size: 18px; border-radius: 10px; margin: 7px; -webkit-transition: 0.2s all; transition: 0.2s all; } .notfound .home-btn:hover { background: #333; color: #fff; cursor: pointer; } .notfound .home-btn:focus { background: #333; color: #fff; cursor: pointer; border: 0px; } .notfound .home-btn { color: #a20e00; background: #fff; } @media only screen and (max-width: 767px) { .notfound .notfound-404 h1 { font-size: 182px; } } @media only screen and (max-width: 480px) { .notfound .notfound-404 { height: 146px; } .notfound .notfound-404 h1 { font-size: 146px; } .notfound h2 { font-size: 16px; } .notfound .home-btn, .notfound .contact-btn { font-size: 14px; } }