body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } .parallax-container { height: 800px; min-height: 250px; margin-bottom: 20px; background-color: rgba(0, 0, 0, .4); } .parallax-container h1 { font-weight: 600; font-size: 5.5vw; text-transform: uppercase; } .parallax-container h2 { font-weight: normal; font-style: italic; font-size: 2.2vw; } .parallax-tittle { text-align: center; width: 100%; } .caption { position: relative; overflow: hidden; } .caption__media { display: block; min-width: 100%; max-width: 100%; height: auto; } .caption__overlay { background-color: rgba(0, 0, 0, .4); position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: white; transform: translateY(101%); transition: transform .35s ease-out; } .caption:hover .caption__overlay { transform: translateY(0); } .caption__overlay h5 { padding-left: 10px; } .caption .card-panel { margin: 0; padding: 1px; text-align: center; } .bordered-picture img { height: 77%; width: 77%; margin-left: 11.5%; margin-right: 11.5%; } .bordered-picture .caption__overlay { margin-left: 11.5%; margin-right: 11.5%; } .small-card { height: 400px; } .chip .tag { position: absolute; left: -3px; font-size: 22px; line-height: 34px; } .image { position: relative; } .card-action .right { margin-top: -5px; } .author { padding-top: 7em; } .fixed-action-btn.horizontal ul { top: 22%; } .card .card-image .card-title { background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; } .bordered-picture video, .picture video { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: auto; } .bordered-picture video { width: 77%; margin-left: 11.5%; margin-right: 11.5%; } div#bg-section { padding: 1px 0px; } .pictures-group .row { margin-top: 20px } video.fillWidth { position: absolute; z-index: 0; bottom: 0; width: 100%; } #slow-notice { width:300px; position: absolute; top:0; left:50%; margin-left: -160px; background-color: #F0DE7D; text-align: center; z-index: 999; padding: 10px; font-family: sans-serif; font-size: 12px; } #slow-notice a, #slow-notice .dismiss { color: #000; text-decoration: underline; cursor:pointer; } #slow-notice .dismiss-container { text-align:right; padding-top:10px; font-size: 10px; } .bordered-picture img { height: 77%; width: 77%; margin-left: 11.5%; margin-right: 11.5%; } .pictures-line { display: flex; margin-bottom: 0.5em; } .pictures-line .picture img { width: 100%; } .pictures-line .separator { min-width: 0.5em; } @media only screen and (max-device-width : 992px) { .pictures-line { display: inherit; } } span.left { padding: 0 1.5em 1em 0; top: 0.25em; } span.right { padding: 0 0 1em 1.5em; top: 0.25em; } .clear { clear: both; } .staticrypt-hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .staticrypt-page { width: 360px; padding: 8% 0 0; margin: auto; box-sizing: border-box; } .staticrypt-form { position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .staticrypt-form input { outline: 0; background: #292525; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; } .staticrypt-form .staticrypt-decrypt-button { text-transform: uppercase; outline: 0; background: #91C25F; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; cursor: pointer; } .staticrypt-html { height: 100%; } .staticrypt-body { background: #37474f; /* fallback for old browsers */ font-family: "Arial", sans-serif; } .staticrypt-instructions { margin-top: -1em; margin-bottom: 1em; } .staticrypt-title { font-size: 1.5em; }