body { padding: 0; margin: 0; background: #fff; } .header { content: ""; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; height: 100%; } .overlay { position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.6); } /* description */ .description { left: 50%; position: absolute; top: 45%; transform: translate(-50%, -55%); text-align: center; } .description h1 { color: var(--light); } .description p { color: #fff; font-size: 1.3rem; line-height: 1.5; } .description button { border: 1px var(--secondary); background:var(--primary); border-radius: 0.5em; color:#fff; } .description button:hover { border: 1px var(--secondary); background: var(--secondary); color:#fff; } /* features */ .features { margin: 4em auto; padding: 1em; position: relative; } .feature-title { font-size: 1.7rem; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; } .features img { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); margin-bottom: 16px; } .features .form-control, .features input { border-radius: 0; } .features .btn { background-color: var(--primary); border: 1px solid var(--primary); color: #fff; margin-top: 20px; } .features .btn:hover { background-color: #333; border: 1px solid #333; }