.banner-image { position: relative; overflow: hidden; max-width: 1125px; height: auto; margin-bottom: .6em; } .banner-image img { max-width: 100%; height: auto; } .banner-box { position: absolute; z-index: 2; margin-top: 2.5em; color: white; width: 50%; min-width: 20em; text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em; /* Text size will be 1% of page width */ font-size: 1vw; /* Line height will be 2.4% of page width */ line-height: 2.4vw; } .banner-box-wide { width: 80% } .banner-box-left, .banner-box-right { padding: 8px 7px; background: rgb(16,16,16); background: rgba(0,0,0,0.3); border-radius: 4px; } .skin-vector .banner-box-left, .skin-vector .banner-box-right { width: 40%; } .banner-box-left { left: 3%; text-align: left; } .banner-box-right { right: 3%; text-align: right; } .banner-box-right .name, .banner-box-right .type, .banner-box-right .quote { float: none; } .banner-box a { color: white !important; font-weight: bold; } .banner-box .name, .mobile-banner-box .name { font-size: 2.5em; white-space: nowrap; line-height: 1.2em; margin: 0; padding: 0; } .banner-box .type { font-size: 2em; margin: 0; padding: 0; } .banner-box .quote { line-height: 1.2em; } .banner-image-largescreen { display: block; } .mobile-banner-box { display: none; } @media (max-width: 720px) { .banner-image-largescreen { display: none; } .mobile-banner-box { display: block; } }