.mainpage-shadowbox { 	color: white; 	background: rgb(16,16,16); 	background: rgba(0,0,0,0.3); 	border-radius: 4px; } .mainpage-shadowbox h2, .mainpage-shadowbox h3 { 	color: white; 	border:none; 	font-family: sans-serif; 	line-height: 1.2em; 	margin:0; 	padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */ } .mainpage-shadowbox a { 	color: white; 	font-weight: bold; }  .banner-image {     position: relative;     max-width: 1125px;      height: auto;     margin-bottom: .6em; } .banner-image img {     max-width: 100%;     height: auto;     /* width: auto\9; */ /* ie8 */ } .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  { text-align: left; } .banner-box-right { text-align: right; } .banner-box-2 {     position: absolute;     z-index: 2;     min-width: 20em; }  @media screen and ( min-width: 720px ) { /* greater than or equal to */ 	.banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */ 	.banner-image span[typeof~='mw:File/Frameless'].nolink { display: none; } 	.mainpage-shadowbox h2 { 		font-size: 190%; 	} 	.mainpage-shadowbox h3 { 		font-size: 150%; 	} 	.banner-image { 		overflow: hidden; 	} 	.banner-box-left { 		left: 3%; 	} 	.banner-box-right { 		right: 3%; 	} 	.banner-box-2 { 		margin-top: 2em; 	} 	.banner-box-2 .quote { 	    font-size: 80%; 	    line-height: 1.2em; 	} } @media screen and ( max-width: 720px ) { 	.banner-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */ 	.banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */ 	.banner-image span[typeof~='mw:File/Frameless']:not(.nolink) { display: none; } 	.banner-image > .mainpage-shadowbox { 		width: inherit !important; 		min-height: 100%; 		margin-left: -150%; 		margin-right: 150%; 		opacity: 0; 		background: black; 	} 	.mainpage-shadowbox .quote > a:after { 		content: '\ATap to learn more.'; 		white-space: pre; /* needed to make content work. if content is disabled, this can be, too */ 	} 	.jcarousel-item:hover .mainpage-shadowbox { 		margin: unset; 		opacity: 1; 		transition: margin 0.5s; /* without this, problem with tap on image still activating links - speed may matter here */ 		bottom: 50%; /* relative vertical position; change to top to lower, negative percentages do not work as naively expected */ 	} 	.jcarousel-control-prev, .jcarousel-control-next { 		display: none; 		/* hide the carousel arrows */ 		/* a kludge resulting from gadgets not working on mobile */ 		/* unforunately also targets very narrow desktops, but there can't be too many of those */ 		/* and besides, the number buttons still work */ 	} 	img.interactiveIcon, /* can be removed when backward compat is no longer needed */ 	.interactiveIcon img { 		position: absolute; 		opacity: 0.4; 		height: 75% !important; 		width: auto; 		bottom: 0; 		right: 0; 	} }