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; } body.night { background-color: #37474f; color: #d3d4d4; } body.night .audio-player { background: #546e7a; } body.night .author a { color: #039be5 !important; } blockquote { font-size: 22px; font-style: italic; color: #8a8989; } .btn-xlarge { width: 150px; height: 150px; } .btn-xlarge i { font-size: 9.6rem; line-height: 150px; } .home { padding-bottom: 50px; } .floating-menu { font-family: sans-serif; padding: 0px; width: 45px; z-index: 556; position: fixed; bottom: 0px; right: 0px; } .switch-btn { position: relative; display: inline-block; width: 40px; height: 22px; } .switch-btn input {display:none;} .slider-btn { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider-btn:before { position: absolute; content: ""; height: 15px; width: 15px; left: 4px; bottom: 4px; background-color: white; } input:checked + .slider-btn { background-color: #2196F3; } input:focus + .slider-btn { box-shadow: 0 0 1px #2196F3; } input:checked + .slider-btn:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); } /* Rounded sliders */ .slider-btn.round { border-radius: 34px; } .slider-btn.round:before { border-radius: 50%; } @media only screen and (max-device-width: 700px) { h2 { font-size: 2.56rem !important; } .parallax img { min-width: 200% !important; } .gallery-title > h2 { font-size: 3.7vw !important; } .parallax-container h2 { font-size: 4.2vw !important; } .audio-player h2 { font-size: 14px !important; } }