/* custom styles for campaign pages */
html, body, div, h1, h2, h3 {

}

html {
	font-size: 18px;
}

body {
	text-align: left;
}

/* set colors */
.fgwhite {color: #ffffff;}
.fgblack {color: #000000;}
.fggrey {color: #53565a;}
.bgwhite {background-color: #ffffff;}
.bgblack {background-color: #000000;}
.bggrey {background-color: #53565a;}
.bgdrkred {background-color: #75160D;}

/* set alignment */
.tleft {text-align: left;}
.tright {text-align: right;}
.tcenter {text-align: center;}

/* set float */
.fleft {float: left;}
.fright {float: right;}

/* clear fix */
clearfix {overflow: auto;}
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

#header .container-fluid {background: rgba(255, 255, 255, 1)}

@media screen and (min-width: 320px) {
	html {
		font-size: calc(16px + 6 * ((100vw - 320px) / 680));
	}
}

@media screen and (min-width: 1000px) {
	html {
		font-size: 20px;
	}
}



.closebtn {
	font-size: 24px;
	color: #ffffff;
	float: right;
}

.closebtn::before {
	content: 'Close ';
	font-size: 16px;
}

.closebtn:hover {
	cursor: pointer;
}

.closebtn img {
	width: 21px;
	height: 21px;
}

h2.mblreg {
	font-size: 30px;
	color: #ffffff;
	margin: 0px 0px 10px;
	text-align: left;
}

h3.mblsub {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 0px;
	line-height: 1.5;
}

.mblarrow {
	width: 55px;
	height: 38px;
	float: right;
	margin: 50px 24px 0px 24px;
}

.mcrule {
	width: 100%;
	height: 10px;
	margin-top: 25px;
}

h1 {
	font-size: 3em;
	color: #ffffff;
	line-height: 1.25em;
}

h2 {
	font-size: 2.5em;
	color: #000000;
	line-height: 1.25em;
}

h3 {
	font-size: 1.5em;
	color: #000000;
	line-height: 1.25em;
	padding-bottom: 24px;
	margin: 0px;
}

.cntryname {
	font-size: 24px;
	color: #ffffff;
	/*margin-bottom: 15px;*/
}

.regionname {
	font-size: 40px;
	color: #ffffff;
}

.regsub {
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 0px;
	line-height: 1.5;
}

p.tidbits {
	font-size: 16px;
	line-height: 1.667;
}

.rwundr {
	margin: 0px;
	padding-top: 25px;
}

p {
	font-size: 1.25em;
	color: #53565a;
	line-height: 1.67em;
}

#mainbanner {
	padding-top: 8%;
	padding-bottom: 2.75em;
	background-color: #c01818;
}

#sectiontwo {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
	background-color: #ffffff;
}

#mapoverlay {
	z-index: 12;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
	padding-top: 3em;
	text-align: center;
	top: 0;
	left: 0;
}

.popreg {
	display: none;
	background-color: #53565a;
	width: 90%;
	padding: 40px;
	color: #ffffff;
	margin: 0 auto;
	text-align: left;
}

#mapoverlay h1, #mapoverlay h2, #mapoverlay h3, #mapoverlay p, .collapse p {
	color: #ffffff;
}

/*#mapoverlay h2 {padding-bottom: 0.75em;}*/

@media screen and (min-width: 901px) {
	
	.mobile {
		display: none;
	}
	
	.desktop {
		display: block;
	}
	
	.gutter {
		padding-left: 4.25em;
		padding-right: 4.25em;
	}
	
	.guttersmvert {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	
	.guttermdvert {
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
}

@media screen and (max-width: 900px) {
	
	.mobile {
		display: block;
	}
	
	.desktop {
		display: none;
	}
	
	.gutter {
		padding-left: 1.75em;
		padding-right: 1.75em;
	}
	
	.guttersmvert {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	
	.guttermdvert {
		padding-top: 2em;
		padding-bottom: 2em;
	}
}

.svgcontainer {
	width: 100%;
	height: 0;
	padding-top: 57.5%;
	position: relative;
}

svg {
	position: absolute;
	top: 0;
	left: 0;
}

.pdl0 {
	padding-left: 0px;
}

.pdb0 {
	padding-bottom: 0px;
}

.mblcollapse {
	width: 100%;
	background-color: #3b3b3b;
	padding: 24px;
	text-align: left;
    border-bottom: 1px solid #ffffff;
}

.collapsebox {
	background-color: #53565a;
	color: #ffffff;
	padding: 24px;
}

#header .container-fluid {background: rgba(255, 255, 255, 1)}

@media screen and (min-width: 320px) {
	html {
		font-size: calc(16px + 6 * ((100vw - 320px) / 680));
	}
}

@media screen and (min-width: 1000px) {
	html {
		font-size: 20px;
	}
}

@media screen and (min-width: 1023px) {
		.hero h1 {
		padding-right: 0;
		padding-left: 0
	}
	 .hero p {
		color: #fff;
	}

}
.hero p {
		font-size: 15px;
		
	}

	.wrap-section.bg-red h3 {
				padding-bottom: 15px
			}
			.wrap-section.bg-red p {
				color: #fff;
			}
			
.tidbits a:link,
.tidbits a:visited,
.rwundr a:link,
.rwundr a:visited,
.card-body a:link,
.card-body  a:visited {
			color: #fff;
			text-decoration: underline;
		}