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 .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%; } .pictures-line { min-width: 77%; width: 77%; margin-left: 11.5%; margin-right: 11.5%; display: flex; margin-bottom: 0.5em; } .pictures-line .picture img { width: 100%; height: 100%; } .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 }