/*=============================================================================
  File:         readwritetools.com/css/landing.css
  Language:     CSS
  Copyright:    Read Write Tools © 2020
  License:      CC-BY-NC-ND 4.0
  Initial date: Jan 16, 2020
  Contents:     landing page panels: proclaim, express, announce, banger box
=============================================================================*/

.landing {
	--landing-height: 9rem;
}
.landing {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1rem;
	margin-right: -1rem;
	margin-top: 0;
	margin-bottom: 0;
	box-sizing: border-box;
	box-shadow: 0px 5px 8px var(--pure-black);
}
@media only screen and (max-width: 49rem) {
	.landing {
		margin-left: 0rem;
		margin-right: 0rem;
	}
}
.square {
	width: 38%;
	min-height: var(--landing-height);
	display: flex;
	align-content: center;
	justify-content: center;
	flex-grow: 1;
	border-top: 3px solid var(--pure-black);
	border-bottom: 1px solid var(--pure-black);
}
.rectangle {
	width: 62%;
	min-height: var(--landing-height);
	display: flex;
	align-content: center;
	justify-content: center;
	flex-grow: 1;
	border-top: 3px solid var(--pure-black);
	border-bottom: 1px solid var(--pure-black);
}
.across {
	display: flex;
	align-content: center;
	justify-content: center;
	flex-grow: 1;
	background-image: linear-gradient(to right, var(--form-gray), var(--medium-black));
	border-top: 1px solid var(--yellow);
	border-bottom: 2px solid var(--yellow);
}
.separator {
	margin-top: 6rem;
}
.blueright {
	background-image: linear-gradient(to left, var(--landing-gradient), var(--landing-blue));
}
.blueleft {
	background-image: linear-gradient(to right, var(--landing-gradient), var(--landing-blue));
}
.announce {
	font-family: var(--serif-font);
	font-size: 1.4rem;
	color: var(--pure-white);
	margin: auto !important; /* div#story p */
	text-align: center;
	padding: 1.5rem 2.5rem;
}
.proclaim {
	font-family: var(--serif-font);
	font-size: 1rem;
	color: var(--pure-black);
	margin: auto !important; /* div#story p */
	text-align: center;
	padding: 1.5rem 1.5rem;
	quotes: '“' '”'
}
.express .heavy {
	font-family: var(--sans-serif-font);
	font-weight: 900;
	color: var(--pure-white);
}
.announce .heavy {
	font-family: var(--sans-serif-font);
	font-weight: 900;
	font-size: 1.4rem;
	color: var(--pure-white);
}
.proclaim .heavy {
	font-family: var(--sans-serif-font);
	font-weight: 900;
	color: var(--pure-black);
}
.express .thin {
	font-family: var(--sans-serif-font);
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--pure-white);
}
.announce .thin {
	font-family: var(--sans-serif-font);
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: 1px;
	color: var(--pure-white);
}
.proclaim .thin {
	font-family: var(--sans-serif-font);
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--pure-black);
}
.express {
	font-family: var(--serif-font);
	font-size: 1rem;
	color: var(--white);
	margin: auto;
	text-align: center;
	padding: 1.5rem 1.5rem;
}
.triangle-topleft {
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 2rem solid var(--yellow);
	border-right: 2rem solid transparent;
	margin-left: 1px;
	margin-top: 3px;
}

/* ---------- side by side two across ----------- */
.sidebyside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	box-sizing: border-box;
	border-bottom: 6px solid var(--medium-black);
}
.sidebyside-box {
	min-width: 16rem;
    margin: 2rem 0 2rem 0;
    text-align: center;
}
.forward {
	flex-direction: row;
}
.reverse {
	flex-direction: row-reverse;
}

/* ---------- banger ----------- */
.banger-box {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	box-sizing: border-box;
}
.banger {
	--banger-height: 14rem;
	--banger-width: 18rem;
	--sidebar-width: 2rem;
	--container-width: calc(var(--banger-width) - var(--sidebar-width) - 2px);
}
.banger {
	position: relative;
	width: var(--banger-width);
	height: var(--banger-height);
	display: flex;
	align-content: center;
	justify-content: center;
	flex-grow: 0;
	margin: 1rem;
	border: 1px solid var(--pure-black);
	box-sizing: border-box;
	box-shadow: 0px 5px 8px var(--pure-black);
}
.banger .sidebar {
	position: absolute;
	top: 0;
	left: 0;
	height: calc(var(--banger-height) - 2px);
	width: var(--sidebar-width);
	margin: 0;
	background-color: var(--nav-black);
	border-right: 1px solid var(--pure-black);
	box-sizing: border-box;
}
.banger .caption {
	position: absolute;
	top: var(--banger-height);
	left: 0;
	height: var(--sidebar-width);
	width: var(--banger-height);
	margin: 0;
	padding-top: 0.4rem;
	color: var(--pure-white);
	font-family: var(--sans-serif-font);
	font-weight: 600;
	font-size: 1.2rem;
	white-space: nowrap;
	overflow: hidden;
	letter-spacing: 2px;
	line-height: 1 !important; /* div#story p */
	text-align: center;
	text-transform: uppercase;
	transform-origin: top left;
	transform-box: border-box;
	transform: rotate(-90deg); 
}
.banger .container {
	position: absolute;
	left: var(--sidebar-width);
	width: var(--container-width);
	height: calc(var(--banger-height) - 2px);
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: hidden;
	background-image: linear-gradient(to bottom, var(--form-gray), var(--medium-black));
}
.banger p {
	text-align: center;
	padding: 1rem;
	max-width: initial !important; 	/* #story p */
}