.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;     width: 100%;     height: 300px;     max-width: 1125px;     overflow: hidden;     margin-bottom: .6em; }   .banner-image img {     width: 100%;     height: 100%;     object-fit: cover;     position: absolute;     top: 0;     left: 0;     /* 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;     min-height: 200px; }  @media screen and ( min-width: 720px ) { /* greater than or equal to */ 	.banner-image img.nolink { display: none; } 	.mainpage-shadowbox h2 { 		font-size: 160%; 	} 	.mainpage-shadowbox h3 { 		font-size: 130%; 	} 	.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: 75%; 	    line-height: 1.2em; 	} } @media screen and ( max-width: 720px ) { 	.banner-image img: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 */ 	} 	.interactiveIcon { 		position: absolute; 		opacity: 0.4; 		height: 75% !important; 		width: auto; 		bottom: 0; 		right: 0; 	} 	.jcarousel-item img {     	width: 100%;     	height: 300px;     	object-fit: cover;     	position: absolute; 		top: 0;     	left: 0; 	}  }