body { display: flex; min-height: 100vh; flex-direction: column; background-image: url('../img/overlay.png'), linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -ms-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-image: url('../img/overlay.png'), -o-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg'); background-size: cover; background-attachment: fixed; color: rgba(255,255,255,0.7); } a { color: white; text-decoration: none; font-weight: 600; transition: color 0.25s ease-in-out; } a figcaption { font-size: 14pt; text-decoration: none; transition: color 0.25s ease-in-out; } a:hover, .item a:hover, .medium a:hover, a:hover figcaption { color: #d64760; text-decoration: underline; transition: color 0.25s ease-in-out; } #wrapper { flex: 1; } #message { padding: 1em 2em; background: lightyellow url('../img/overlay.png'); color: #d64760; font-size: 1.5em; position:relative; top: 80px; z-index: 5; } #header { margin: 40px 80px 40px; } .reel { list-style: none; display: block; margin: 80px 80px 0; padding: 4em 0 4em; text-align: center; } .item, .medium { color: rgba(0,0,0,0.7); display: inline-block; position: relative; background: rgba(255,255,255,0.8) url('../img/overlay.png'); border: 10px solid white; padding-top: 0; padding-left: 0; vertical-align: middle; } .item { height: 300px; width: 400px; margin-right: -14px; margin-bottom: -10px; } .item a { padding: 20px; display: inline-block; width: 100%; height: 100%; } .subheader { background: rgba(214, 71, 96, 0.7) url('../img/overlay.png'); display: inline-flex; flex-direction: column; } .subheader > h1 { flex: 1; top: 50%; margin: 0; display: block; width: 100%; } .subheader > * { padding: 20px; } .subheader a { flex: 1; display: inline; padding: 0; line-height: 50px; } .subheader a:hover { color: white; } .subheader p { font-size: 14pt; display: block; height: 150px; } .column { margin: 0 40px 0; } .column > div { width: 100% } .medium { margin: 0px auto -10px; padding: 20px; } .image { text-align: center; padding: 5%; } .item a, .medium a { color: black; transition: color 0.25s ease-in-out; } .item img { max-height: 230px; } figure { position: relative; top: 50%; transform: translateY(-50%); } figure img { display: block; margin: 0 auto; } figcaption { text-align: center; font-weight: bold; } img { max-width: 100%; max-height: 100%; } nav { width: 100%; padding: 1em 2em; background: #d64760 url('../img/overlay.png'); position: fixed; z-index: 6; } nav li { display: inline-block; } footer { padding: 1em 2em; } #search { padding-top: 5px; } .left { float: left; } .right { float: right; } ul, ol { text-align: left; } @media (max-width: 755px) { #main { margin-top: 120px; } #message { top: 120px; } } @media (max-width: 480px) { .reel { margin: 80px 0 0; } .item, .medium { border: 1px solid white; } .item { margin-bottom: -1px; margin-right: 0; width: auto; max-width: 400px; } }