Template:SBS SH 112144/banner.css

/* Banner */

#banner { padding: 8em 0 9em 0; background-image: url(); background-size: cover; background-position: bottom; background-attachment: fixed; background-repeat: no-repeat; text-align: center; position: relative; }

#banner:before { content: ; background: rgba(75, 75, 93, 0.85); position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

#banner .inner { border-top: 2px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 10005; padding-top: 8em; }

#banner h1 { font-size: 3.5em; font-weight: 400; color: #fff; line-height: 1em; margin: 0 0 1em 0; padding: 0; }

#banner h3 { font-weight: 400; color: #fff; margin: 0; font-size: 1.5em; }

#banner .icon { color: #6cc091; font-size: 2em; }

#banner p { font-size: 1em; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.75em; }

#banner .flex { -ms-flex-pack: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; text-align: center; margin: 0 auto 4em auto; }

#banner .flex div { border-right: 2px solid rgba(255, 255, 255, 0.2); padding: 0 8em; }

#banner .flex div:last-child { border: none; padding-right: 0; }

#banner .flex div:first-child { padding-left: 0; }

#banner .flex div p { margin: 0; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

#banner { background-attachment: scroll; }

}

@media screen and (max-width: 1680px) {

#banner .flex div { padding: 0 6em; }

}

@media screen and (max-width: 1280px) {

#banner { padding: 7em 0 6em 0; }

#banner .inner { padding-top: 6em; }

#banner h1 { font-size: 3em; }

#banner h3 { font-size: 1.25em; }

#banner .flex div { padding: 0 3em; }

}

@media screen and (max-width: 980px) {

#banner { background-attachment: scroll; padding: 5em 0 4em 0; }

#banner .inner { padding-top: 4em; }

#banner h1 { font-size: 2.5em; }

#banner h3 { font-size: 1.25em; }

#banner .flex div { font-size: .85em; padding: 0 1.5em; }

}

@media screen and (max-width: 736px) {

#banner { padding: 4em 0 3em 0; }

#banner .inner { padding-top: 3em; }

#banner h1 { font-size: 2em; }

#banner h3 { font-size: 1.25em; }

#banner .flex { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0 auto 2em auto; }

#banner .flex div { font-size: .85em; padding: 0; border: none; margin-bottom: 1em; }

}

@media screen and (max-width: 480px) {

#banner h1 { font-size: 1.5em; }

}