Template:Banner Nonvoyage/styles.css

.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;
	width: 40%;
}
.banner-box-left {
	left: 3%;
	text-align: left;
}
.banner-box-right {
	right: 3%;
	text-align: right;
}
.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;
}
.banner-box .type {
	font-size: 2em;
}
.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; }
}