.blurred-container { position: relative; width: 100%; min-height: 35vh; height: 350px; top: 0; left: 0; } .blurred-container .motto { color: #fff; font-size: 76px; font-weight: 600; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, .33); text-transform: uppercase; top: 7.5vh; z-index: 3; display: block; margin: 0 auto; position: relative; width: 60%; height: 0 } .motto h1 { background: #0000007d; } .blurred-container .img-src { position: fixed; width: 100%; min-height: 35vh; height: 350px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .blur { opacity: 0; } main { position: relative; background-color: #fff; } /* Gives me greater control over fonts */ .font-serif { font-family: Georgia, "Times New Roman", Times, serif; } .font-sans { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .font-mono { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } .font-small-caps { font-variant-caps: small-caps; } .strikethrough { text-decoration: line-through; } .sfTable { margin: 0 auto; } .text-align-left { text-align: left } .text-align-right { text-align: right; } .float-left { float: left; } .float-right { float: right; } .media-object { max-height: 100%; max-width: 100%; } @media (min-width: 768px) { .pull-left { max-width: 25%; } } h1 small { font-size: 60%; color: #9a9a9a; font-weight: 300; line-height: 1.5; } h1 { font-weight: 400; margin: 30px 0 15px; } .dogear { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); }