/* banner */
.banner {
	margin: 1.5em 0 .214286em;
	position: relative;
}
.banner > figcaption { position: absolute; }

/* content location */
.banner .topLft {
	top: 6%;
	left: 3%;
} 
.banner .topRgt {
	top: 6%;
	right: 3%;
} 
.banner .btmLft {
	bottom: 6%;
	left: 3%;
} 
.banner .btmRgt {
	bottom: 6%;
	right: 3%;
} 

.banner p {
	margin: 0;
	text-align: center;	
	font-size: 1.05rem; 
	font-weight: 700;
	color: #FFF;
	border-width: 3px;   
	border-style: solid;
}
.banner p > span {
	display: block;
	padding: 0 .35em;  
}
.banner p > span > b { 
	position: relative;
	font-weight: inherit; 
}
.banner .num {
	line-height: 1;
	padding-bottom: .2em;
	letter-spacing: -.025em;
	border-bottom-width: 3px;  
	border-bottom-style: solid;
}
.banner .num > b { bottom: -.3em; }
.banner .txt {
	padding-top: .1em;
	padding-bottom: .35em;
	font-size: 65%;  
	line-height: 1.25;
	text-transform: uppercase;
}

/* custom banner content styling */ 
.banner p.bdrBlue { border-color: #0f3367; }
.banner p.bdrBlue .num { border-bottom-color: #0f3367; }
.banner p.bdrLtBlue { border-color: #006fb9; }
.banner p.bdrLtBlue .num { border-bottom-color: #006fb9; }
.banner p.bdrRed { border-color: #d2232a; }
.banner p.bdrRed .num { border-bottom-color: #d2232a; }
.banner.one p > span { 
	background-color: #A2A7C7; 
	background-color: rgba(162,167,199,.75);
}
.banner.two p { border-color: #722C85; }
.banner.two p > span { 
	background-color: #B595BC; 
	background-color: rgba(181,149,188,.75);
}
.banner.two .num { border-bottom-color: #722C85; }
.banner.three p > span { 
	background-color: #7b90bd; 
	background-color: rgba(123,144,189,.75);
}
.banner.four p { border-color: #af1e2d; }
.banner.four p > span { 
	background-color: #d03f24; 
	background-color: rgba(208,63,36,.75);
}
.banner.four .num { border-bottom-color: #af1e2d; }
.banner.five p { border-color: #00adef; }
.banner.five .num { border-bottom-color: #00adef; }
.banner.six p { border-color: #ffcb05; }
.banner.six .num { border-bottom-color: #ffcb05; }
.banner.seven p > span { 
	background-color: #e57c5e; 
	background-color: rgba(229,124,94,.75);
}
.banner.eight p > span { 
	background-color: #3d6c9a; 
	background-color: rgba(61,108,154,.75);
}
.banner.eight .txt::first-line { line-height: 100% !important; }
.banner.eight .txt > em {
	display: inline-block;
	padding-bottom: .25em;
	font-style: normal;
	text-decoration: underline;
}
.banner.ten p > span { 
	background-color: #54767f; 
	background-color: rgba(84,118,127,.75);
}
.banner.eleven p > span { 
	background-color: #6876a7; 
	background-color: rgba(104,118,167,.75);
}
.banner.twelve p { border-color: #e6c08f; }
.banner.twelve .num { border-bottom-color: #e6c08f; }
.banner.thirteen p > span { 
	background-color: #5897ca; 
	background-color: rgba(88,151,202,.75);
}
.banner.fourteen p > span { 
	background-color: #eaa085; 
	background-color: rgba(234,160,133,.75);
}
.banner.fifthteen p > span { 
	background-color: #5897ca; 
	background-color: rgba(88,151,202,.75);
}
.banner.sixteen p > span { 
	background-color: #878fb4; 
	background-color: rgba(135,143,180,.4);
}
.banner.seventeen p > span { 
	background-color: #3079be; 
	background-color: rgba(48,121,190,.75);
}
.banner.eighteen p { border-color: #1475bc; }
.banner.eighteen p > span { 
	background-color: #000619; 
	background-color: rgba(0,6,25,.75);
}
.banner.eighteen .num { border-bottom-color: #1475bc; }
.banner.nineteen p > span { 
	background-color: #377c9b; 
	background-color: rgba(55,124,155,.75);
}
.banner.twenty p { border-color: #6fccdd; }
.banner.twenty p > span { 
	background-color: #1c2d72; 
	background-color: rgba(28,45,114,.4);
}
.banner.twenty .num { border-bottom-color: #6fccdd; }

/* increase text size */
@media (min-width: 360px){ .banner p { font-size: 1.2rem; } }
@media (min-width: 480px){ 		
	.banner p { 
		font-size: 1.5rem; 		
		border-width: 4px;
	}
	.banner .num { border-bottom-width: 4px; }
	.banner .txt { font-size: 60%; }
}
@media (min-width: 600px){ 		
	.banner p { 
		font-size: calc(1.8rem + .20vw);
		border-width: 6px;
	}
	.banner .num { border-bottom-width: 6px; }
	.banner .txt { font-size: 55%; }
}
@media (min-width: 760px){ .banner p { font-size: calc(2.1rem + .20vw); } }