/* RESET */
:root { interpolate-size: allow-keywords; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, 
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; 
	background: transparent; 
}
body { font-size: 1em; }
strong { font-weight: bold; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
.checkbox:focus { outline: 2px solid #FFF7E5; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
small { font-size: 0.8em; color: #666; }
.center { text-align: center; }


/* Global */

body { 
	font-family: 'Proxima Nova', sans-serif; font-weight: 300; background: #FFF; color: #333; 
	-webkit-text-size-adjust: none; 
	
	--dark: #231f20;
	--brand-red: #c9243f;
	--brand-red-light: #f2d0c7;
	--brand-blue: #0e5296;
	--brand-blue-light: #c8cce3;
	--brand-green: #25b570;
	--brand-green-light: #b1dcbf;
	--brand-cyan-dark: #004359;
	--brand-cyan: #00907c;
	--brand-cyan-light: #c7eafc;
	
}
body.show-nav { height: 100%; overflow: hidden; }


/* Elements and helpers */

h2, h3, h4, h5, h6 { text-wrap: balance; }
h2 { font-size: 48px; font-weight: 800; margin-bottom: 20px; }
h2 b { font-size: 48px; font-weight: 800; }
h3 { font-size: 28px; font-weight: 300; margin-bottom: 30px; }
h4 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
h5 { font-size: 20px; font-weight: 300; margin-bottom: 10px; }

p { line-height: 1.3em; margin-bottom: 1em; }
p a, li a { color: var(--brand-blue); }

.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
img.align-center { display: block; margin: 20px auto 20px; }

.float-left { float: left; margin: 10px 20px 20px 0; }
.float-right { float: right; margin: 10px 0 20px 20px; }
.clear { clear: both; }
.no-margin { margin: 0; }
.smaller { font-size: 0.9em !important; }

img.icon-50 { width: 50px; }
img.icon-25 { width: 25px; }
img.icon-25.float-left { margin: 0 10px 10px 0; }

img.rounded { margin-bottom: 20px; border-radius: 256px; }

.img-fluid { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

ul.circles li { 
	list-style-image: url("../images/ul_circles.png"); list-style-position: inside; margin-bottom: 10px;
	padding-left: 20px; text-indent: -20px; 
}
ul.circles li a { color: #333; }
ul.circles li a:hover { color: var(--brand-blue); }

@media all and (max-width: 640px) {
	h2 { font-size: 2.8em; }
	h3 { margin-bottom: 15px; }
}
@media all and (max-width: 480px) {
	h2 { font-size: 2.2em; }
}

.bg-inline {
	display: inline;
	padding: 0.5rem 1rem;
	padding-left:0px;
	line-height: 2em;
	background-color: #666;
	color: #FFF !important;
	font-weight: bold;
	white-space: pre-wrap;
	box-decoration-break: clone;
	box-shadow: -1rem 0 0 #666;
}
.bg-inline.bg-inline-blue { background-color: var(--brand-blue); box-shadow: -1rem 0 0 var(--brand-blue); }
.bg-inline.bg-inline-red { background-color: var(--brand-red); box-shadow: -1rem 0 0 var(--brand-red); }
.bg-inline.bg-inline-green { background-color: var(--brand-green); box-shadow: -1rem 0 0 var(--brand-green); }
.bg-inline.bg-inline-cyan, .bg-inline .bg-inline-teal { background-color: var(--brand-cyan); box-shadow: -1rem 0 0 var(--brand-cyan); }
.bg-inline.bg-inline-dark { background-color: var(--dark); box-shadow: -1rem 0 0 var(--dark); }
/* Put .bg-inline-contain on .bg-inline's outer element to make the inline background line up with the surroungin text. */
.bg-inline-contain { margin-left: 1em; margin-right: 1em; }

/* Buttons and tabs */

.button { 
	border: none; background: #EEE; font-size: 16px; padding: 8px 12px;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.5); color: #666; cursor: pointer; display: inline-block; margin: 0 8px 0 0; 
}
.button.rounded { border-radius: 256px; }
.button:hover { margin-top: -1px; margin-bottom: 1px; box-shadow: 3px 3px 0 rgba(0,0,0,0.2); }
.button.blue { background: var(--brand-blue); color: #FFF !important; }
.button.red { background: var(--brand-red); color: #FFF !important; }
.button.green { background: var(--brand-green); color: #FFF !important; }
.button.teal { background: var(--brand-cyan); color: #FFF !important; }
.button.light-grey { background: #E5E5E5; color: #333; }
.button.grey { background: #777; color: #FFF; }

.button.small { font-size: 14px; padding: 5px 12px; }
.button.large { padding: 12px 20px; font-size: 20px; font-weight: bold; }

.tabs { text-align: center; }
.tabs a.tab { 
	margin: 0 8px; padding: 8px 12px; border: none; background: #EEE; box-shadow: 0 2px 0 rgba(0,0,0,0.2); 
	color: #333; cursor: pointer; display: inline-block; font-size: 16px; font-weight: normal; white-space: nowrap; 
	background: #777; color: #FFF; box-shadow: 0 2px 0 #555; 
}
.tabs a.tab.active { background: var(--brand-blue); color: #FFF; box-shadow: 0 2px 0 #0a7691; font-weight: bold; }

.video { aspect-ratio: 16 / 9; width: 100% !important; border-radius: 8px; }


/* Layout */

.container { max-width: 1260px; width: 100%; margin: 0 auto; padding: 50px 30px 80px; box-sizing: border-box; }

.column-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px; }
.column-container > .column { flex: 1 0 280px; box-sizing: border-box; }


#wrapper { width: 100%; transition: margin .3s; }

@media all and (max-height: 1024px) and (max-width: 1024px) {
	/* section .container, #header-nav, footer .container { max-width: 900px; } */
}
@media all and (max-width: 1023px) {
	/* section .container, #header-nav, footer .container { max-width: 580px; } */
}
@media all and (max-width: 640px) {
	.column-container { margin-bottom: 0; flex-direction: column; align-items: center; }
	.column-container { margin-top: 0; }
	/* section .container { max-width: 400px; padding: 50px 0; margin: 0 auto; } */
	section .container { padding: 50px 20px 50px; margin: 0 auto; }
	#wrapper { position: relative; }
	#wrapper.hidden { left: -240px; }
	.mobile-block { display: block; padding: 10px; }
}
@media all and (max-width: 480px) {
	/* section .container, 
	footer .container, 
	#cover .container { max-width: 90%; } */
	
	.table-container { overflow: scroll; }
	.table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; }
	.table-container::-webkit-scrollbar-thumb { 
		border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); 
	}
}

/* Modern way to do columns */
.columns-2 { columns: 2; gap: 40px; }
.columns-3 { columns: 3; gap: 40px; }
:is(.columns-2, .columns-3) > :is(li, blockquote) { break-inside: avoid; }

@media all and (max-width: 1023px) {
	.columns-3 { columns: 2; }
}
@media all and (max-width: 640px) {
	.columns-2, .columns-3 { columns: auto; }
}
@media all and (max-width: 480px) {
	.columns-3 { columns: auto; }
}

.white-box { background: #FFF; padding: 20px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }

#loading-overlay { 
	position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: var(--brand-cyan);
	background: rgba(255,255,255,0.9); font-weight: bold; font-size: 1.8rem; text-transform: uppercase;
	display: flex; flex-direction: column; align-items: center; justify-content: center; 
}


/* Header and navigation */

#main-header { 
	position: fixed; z-index: 10; width: 100%; box-shadow: inset 0 3px 0 rgba(0,0,0,0.1); 
	background: #fff; transition: all .3s; 
}
	
#header-nav { 
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 0; padding-bottom: 0; position: relative; transition: background .3s; 
}

#header-nav ul { display: flex; align-items: center; justify-content: flex-end; }
#header-nav ul li { line-height: 1em; }
#header-nav ul li a { padding: 50px 20px; display: block; color: #333; transition: all .3s; }
#header-nav ul li a:hover, #header-nav ul li.current a { box-shadow: inset 0 3px 0 var(--brand-cyan); }
#header-nav ul li a:hover { color: var(--brand-cyan); }
#header-nav ul li.current a { color: var(--brand-cyan); font-weight: bold; }

#header-nav .logo  { padding: 5px 0; margin: 0; width: auto; transition: all .3s; }
#header-nav .logo.img { width: 190px; }
#header-nav .logo a { color: inherit; }
#header-nav .logo img { max-width: 100%; display: block; }
#header-nav .logo.img a { display: block; }
#header-nav ul li.logo a:hover { background: none; box-shadow: none; }

#main-header.compact { background: rgba(255,255,255,1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
#main-header.compact #header-nav ul li a { padding: 25px 20px; }
#main-header.compact #header-nav .logo.img { width: 130px; }

#nav-trigger { 
	display: none; transition: top .3s; 
}
#main-header.compact #nav-trigger { top: 15px; }
.show-nav #wrapper { margin-left: -240px; }
.show-nav #header-nav-container { margin-right: 240px; }

a.logo { font-size: 48px; color: #333; display: block; padding: 45px 10px; }

.header-cta { 
	display: flex; align-items: center; justify-content: center; gap: 20px;	background-color: var(--brand-red); 
	color: #fff; padding: 10px 15px; text-align: center; font-size: 1.2em; text-transform: uppercase; 
	font-weight: bold; transition: all .3s; box-shadow: 0 1px 2px rgba(0,0,0,.2); overflow: hidden;
}
.header-cta p { 
	text-wrap: balance; margin: 0; padding: 0;
}
.header-cta a { 
	padding: 4px 8px; margin-left: 8px; font-size: 0.9em; font-weight: bold; text-decoration: none; 
	background-color: #fff; color: var(--brand-cyan-dark); border-radius: 3px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
#main-header.compact .header-cta { 
	height: 0px; padding-top: 0; padding-bottom: 0; opacity: 0; box-shadow: none;
}
@media all and (max-width: 640px) {
	.header-cta { 
		flex-direction: column; font-size: 1em; gap: 8px;	
	}
}
/* Mobile menu */
@media all and (max-width: 820px) {
	#nav-trigger { 
		display: block; top: calc(50% - 12px); right: 30px; position: absolute; width: 24px; height: 24px; 
		text-indent: -9999px; background: url('../images/icon_sandwich.png') no-repeat center center; 
		background-size: 24px;
	}
	#header-nav .logo.img { width: 150px; }
	
	#header-nav-container { 
		background: var(--brand-cyan-dark); position: fixed; right: -240px; top:0; height: 100%; width: 200px;
		padding: 20px; box-shadow: inset 2px 0 1px rgba(0,0,0,1); overflow: scroll; transition: margin .3s; 
	}
	#header-nav ul { flex-direction: column; width: 100%; align-items: stretch; padding-bottom: 50px; }
	#header-nav ul li { display: block; float: none; }
	#header-nav ul li a { 
		color: var(--brand-cyan-light); padding: 15px 5px; 
		box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.2); 
	}
	#main-header.compact #header-nav ul li a { padding: 15px 5px; }
	#header-nav ul li:last-child a { border: none; }
	#header-nav ul li.current a, #header-nav ul li a:hover { 
		background: none; box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.2); 
		font-weight: bold; color: #FFF; 
	}
	#header-nav .more { 
		position: absolute; top: 0; left: -60px; background-image: url("../images/nav_more_m.png");
		background-size: 16px; height: 32px; width: 32px; 
	}
}
@media all and (max-width: 640px) {
	#main-header .logo { color: #333; text-align: left; margin: 0; }
	#main-header, #main-header nav a, #main-header .logo { transition: none; }
		
	#header-nav .logo.img { width: 95px; }
	#header-nav .logo a { color: inherit; }
	#header-nav .logo.img a { display: block; }
	
	#main-header { background: rgba(255,255,255,1); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
	#main-header #header-nav { height: 56px; }
}


/* Sections: General */

section { box-shadow: 0 -3px 0 rgba(0,0,0,0.1); position: relative; background: #EEE; }



/* Sections backs */

.back-diagonals { background: url("../images/patt_diagonals.png"); }
.back-hexagons { background: url("../images/patt_hexagons.png"); }
.back-crosses { background: url("../images/patt_crosses.png"); }
.back-ticksanddots { background: url("../images/patt_ticksanddots.png"); }



/* Section: Cover / Hero */

#cover { 
	background: url("../images/cover_bg_solid.png") center top repeat-x; font-size: 1.3em; color: #fff; 
	transition: all .3s;
}
#cover .wrap { 
	background: url("../images/2025/bg-federal-2025-2.jpg") center no-repeat; background-size: cover; 
}
#cover .container { 
	display: flex; flex-direction: column; padding: 40px calc(30px + 1rem) 40px; min-height: 453px; align-items: stretch; 
	justify-content: center; gap: 0; box-sizing: border-box;
}
#cover .mask { 
	margin: 0; padding: 20px; max-width: 50%; background: var(--brand-green); color: #fff;
}
	
#cover h2 { margin: 0 0 0.5em 0; font-size: 48px; line-height: 1.5; text-transform: uppercase; font-weight: bold; }
#cover h2 .bg-inline { line-height: 1.1; }
#cover h3 { margin: 0 0 0.5em 0; font-size: 37px; line-height: 1.5; text-transform: uppercase; font-weight: bold; }
#cover h3 .bg-inline { line-height: 1.1; }
#cover h4 { margin: 0; font-size: 32px; }
#cover p { margin: 1em 0 0 0; font-size: 1.1rem; max-width: 50%; }
#cover > :last-child { margin-bottom: 0; }

@media all and (max-width: 1023px) {
	#cover { font-size: 1.1em; }
	#cover .container { min-height: 320px; }
	#cover .mask { padding: 15px 20px; }
	#cover h2 { font-size: 32px; }
	#cover h3 { font-size: 25px; }
}
@media all and (max-width: 640px) {
	#cover { background-position: left bottom; font-size: 1em; }
	#cover .mask { max-width: 380px; padding: 10px; }
	#cover .container { max-width: 400px; text-align: left; min-height: 0px; }
	#cover h2, #cover h3, #cover p { text-align: center; }
	#cover h2 { font-size: 36px; }
	#cover h3 { font-size: 28px; }
	#cover p { font-size: 16px; max-width: 380px; }
}
@media all and (max-width: 480px) {
	#cover .mask { max-width: 100%; padding: 10px; }
	#cover h2 { font-size: 32px; }
	#cover h3 { font-size: 25px; }
	#cover p { max-width: 100%; }
}



/* Section: Take action / petition */
#cover.rail .wrap { 
	background-image: url("../images/cover_bg_rail.jpg"); background-size: cover; 
	background-position: center center; background-repeat: no-repeat; 
}
#cover.rail .mask { padding: 20px; width: 80%; margin: 0 auto; }
#cover.rail .container { min-height: 0px; }
#cover.rail h2 { margin: 0; }
#cover.rail p { margin: 0.3em 0; }

.papers { 
	position: relative; padding: 50px 40px 40px 40px; width: calc(100% - 80px); margin: 0 auto; 
	background-color: white; color: #333; box-sizing: border-box;
	box-shadow: 	1px 1px 0 rgba(0, 0, 0, 0.100), 
					3px 3px 0 rgba(255, 255, 255, 1.0), 
					4px 4px 0 rgba(0, 0, 0, 0.125), 
					6px 6px 0 rgba(255, 255, 255, 1.0), 
					7px 7px 0 rgba(0, 0, 0, 0.150), 
					9px 9px 0 rgba(255, 255, 255, 1.0), 
					10px 10px 0 rgba(0, 0, 0, 0.175),
					0px 10px 20px rgba(0, 0, 0, 0.4);
	background-image: linear-gradient(
		45deg,
		var(--brand-red),
		var(--brand-red) 10px,
		#fff 10px,
		#fff 20px,
		var(--brand-blue) 20px,
		var(--brand-blue) 30px,
		#fff 30px,
		#fff 40px,
		var(--brand-red) 40px,
		var(--brand-red) 50px

	);
	background-size: 55px 10px;
	background-repeat: repeat-x;
	
	
}
.papers.with-stamp:after { 
	position: absolute; content: ""; top: 30px; right: 20px; width: 60px; height: 60px; 
	background: #fff url('../images/icon_stamp.png') no-repeat; 
}
.papers h5 { line-height: 1.6em; }
.papers .column.one-fourth { clear: left; width: 25%; padding-right: 0; }
.papers .column.three-fourths { width: 75%; padding-right: 0; }
.papers textarea { 
	height: auto; font-size: 0.9em; padding: 0 22px 22px 0; box-sizing: border-box; 
	transition: padding .3s; 
}
.papers textarea:hover { background: #FFFaEe; }
.papers textarea:focus { border: 1px solid #EDEC7B; background: #FFF7E5; padding: 10px; }
.hint { font-size: 0.8em; color: #666; font-weight: normal; line-height: 1;  }
#name-placeholder { font-weight: bold; }
.general-info.special div.papers h3 { color: var(--brand-cyan-dark) !important; } 
.general-info.special div.papers p.intro { color: var(--brand-cyan) !important; margin-right: 60px; } 

@media all and (max-width: 1023px) {
	.papers { width: 90%; }
}
@media all and (max-width: 640px) {
	.papers { width: 100%; }
	.papers .column.one-fourth, .papers .column.three-fourths { width: 100%; padding-right: 0; }
	.papers .column-container { gap: 0;  }
	.papers .column.last { margin-bottom: 30px;  }
	.papers.with-stamp:after { content: none; display: none; }
	.general-info.special div.papers > :is(h3, p) { text-align: center; } 
	.general-info.special div.papers p.intro { margin-right: 0; } 

}

.share { margin-top: 40px; text-align: center; }
.share .intro { text-wrap: balance; }
.share code { 
	background: rgba(0, 0, 0, 0.5); padding: 10px 20px; margin: 10px 0; display: inline-block; 
	font-size: 1.2em; font-weight: bold; text-align: center; border-radius: 8px; word-break: break-all;
}
.share-actions { 
	display: flex; align-items: center; justify-content: center; gap: 20px; margin: 20px 0 0 0; padding: 0; 
	list-style: none; 
}
.share-actions .button { 
	display: flex; align-items: center; gap: 8px; font-weight: bold; text-transform: uppercase; font-size: 24px; 
}
share-actions [role='alert'] {
	display: inline-block;
	padding: 0.5em 1em;
	margin: 20px auto 0;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
	background: var(--brand-green);
	color: #fff;
	border-radius: 8px;
}
share-actions [role='alert']:empty { display: none; }
@media all and (max-width: 640px) {
	.share-actions { 
		flex-direction: column; gap: 10px; 
	}
}

/* Section: General info */

.general-info p.intro { font-size: 1.1em; font-weight: bold;  }
.general-info h3 { padding-bottom: 0.3em; margin-bottom: 0; }
.general-info h3 span { color: var(--brand-cyan-light); }
.general-info.special { background: #ccc; }
.general-info.special.teal { background: #00907c; color: #fff !important; }
.general-info.special.teal p.intro { color: #A7E7DE !important; }
.general-info.special.teal h3 span { color: #62F3DF; }
.general-info.special.teal-dark { background: var(--brand-cyan-dark); color: #fff !important; }
.general-info.special.teal-dark p.intro { color: #A7E7DE !important; }
.general-info.special.teal-dark h3 span { color: #62F3DF; }
.general-info.special.teal-light { background: #37bbae; color: #fff !important; }
.general-info.special.green { background: var(--brand-green); color: #fff !important; }
.general-info.special.green h3 span { color: #fdb813; }
.general-info.special.green-light { background: var(--brand-green-light); }
.general-info.special.yellow { background: var(--brand-cyan-light); color: #fff !important; }
.general-info.special.blue { background: var(--brand-blue-light); color: #fff !important; }
.general-info.special.blue-dark { background: var(--brand-blue-dark); color: #fff !important; }
.general-info .container { padding-top: 50px; padding-bottom: 50px; }
.general-info .column-container { margin: 0; }
.general-info .column { padding-bottom: 0; }
.general-info .column p, .general-info .formatted { font-size: 1em; line-height: 1.6em; }

@media all and (max-width: 1023px) {
	.general-info .column.one-third { width: 300px; }
	.general-info .column.one-third:nth-child(odd) { padding-right: 40px; }
}
@media all and (max-width: 640px) {
	.general-info .column.one-third { width: 100%; }
}

.logo-strip { 
	background: #FFF; padding: 20px 0; text-align: center; 
}
.logo-strip img { width: 100%; max-width: 100%; }


/* Section: Features */

#features { background: var(--brand-cyan); color: #FFF; }
#features h4.with-icon, #features p.with-icon { margin-left: 70px; }

.feature-thumb { 
	margin-bottom: 1rem; border-radius: 1000px; width: 200px; max-width: 100%; box-sizing: border-box; 
	transition: all .3s;
}
a:hover .feature-thumb { 
	box-shadow: 0 10px 20px rgba(0,0,0,0.5); transform: scale(1.2); border-width: 22px; 
}


.border-dark-blue { border: 20px solid var(--brand-blue-dark); }
.border-red { border: 20px solid var(--brand-red); }
.border-green { border: 20px solid var(--brand-green); }
.border-orange { border: 20px solid var(--brand-orange); }
.border-blue { border: 20px solid var(--brand-blue); }
.border-purple { border: 20px solid var(--brand-purple); }


@media all and (max-width: 1023px) {
	#features { text-align: center; }
	#features .column { max-width: 260px; }
}



/* Section: Map & Parallax */

#map, #parallax { 
	height: 350px; 
	background-color: #fff;
	background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%), url("../images/map_region_2025.jpg");
	background-size: cover; 
	background-attachment: fixed; 
	background-position: center center; 
	background-repeat: no-repeat; 
}
#parallax { 
	background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%), url("../images/2025/boulevard-estate.jpg");
}
@media all and (max-width: 480px) {
	#map, #parallax { 
		height: 240px; background-attachment: scroll; background-size: 100% auto; 
	}
}



/* Section: Team */

#team { background: #37bbae; }
#team img { width: 100%; }

@media all and (max-width: 1023px) {
	#team .column.one-fourth { width: 130px; padding-right: 40px; }
	#team .column.one-fourth.last { padding-right: 0; }
}
@media all and (max-width: 640px) {
	#team .column.one-fourth { width: 180px; padding-right: 40px; }
	#team .column.one-fourth:nth-child(even){ padding-right: 0; }
}
@media all and (max-width: 480px) {
	#team .column.one-fourth { width: 125px; padding-right: 10px; }
}



/* Section: Campaign */

#campaign { background: var(--brand-cyan-light); }

.column img.img, .columns-2 img.img, .columns-3 img.img { max-width: 100%; margin-top: 25px; }
.column img.img.no-margin, .column img.img:first-child, 
.columns-2 img.img.no-margin, .columns-2 img.img:first-child, 
.columns-3 img.img.no-margin, .columns-3 img.img:first-child { margin-top: 0; }

.img-circle { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }


/* Section Projects */

big { font-size: 1.3em; font-weight: bold; }
#campaign big { color: #00907c; } 

#projects { overflow: hidden; }

#projects-container { position: relative; margin: 40px 0 0 0; }
#projects-container > li { display: none; }
#projects-container > li.current { display: block; }

#projects-nav { overflow: hidden; }
#projects-nav ul li { margin: 5px 10px 5px 0; }
#projects-nav ul li a { 
	display: block; background: #ccc; font-size: 22px; border-radius: 256px; text-wrap: balance;
	text-align: center; padding: 13px 2rem; color: #fff; opacity: 0.5; transition: opacity .5s; font-weight: bold;
}
#projects-nav ul li.dark-teal a { background: #214555; }
#projects-nav ul li.teal a { background: #00907c; }
#projects-nav ul li.light-teal a { background: #37bbae; }
#projects-nav ul li.green a { background: var(--brand-green); }
#projects-nav ul li.yellow a { background: var(--brand-cyan-light); }
#projects-nav ul li.blue a { background: var(--brand-blue); }
#projects-nav ul li.red a { background: var(--brand-red); }

#projects-nav ul li.current a, #projects-nav ul li a:hover { opacity: 1; }

#projects-container > li ol { list-style-type: upper-roman; }
#projects-container > li ul { list-style-type: square; padding-bottom: 1em; }
#projects-container > li li { margin: 0 0 1em 2em; line-height: 1.5; } 

#projects-container > li h3 { font-size: 24px; padding-bottom: 0.3em; border-bottom: 1px solid #777; }
#projects-container > li h3.dark-teal { border-color: #214555; }
#projects-container > li h3.teal { border-color: #00907c; }
#projects-container > li h3.light-teal { border-color: #37bbae; }
#projects-container > li h3.green { border-color: var(--brand-green); }
#projects-container > li h3.yellow { border-color: var(--brand-cyan-light); }
#projects-container > li h3.blue { border-color: var(--brand-blue); }
#projects-container > li h3.red { border-color: var(--brand-red); }
#projects-container > li h5 { font-size: 16px; }
#projects-container > li h3, 
#projects-container > li h5 { margin: 0.8em 0 0.5em 0; text-transform: uppercase; }
#projects-container > li h3:first-child, 
#projects-container > li h5:first-child { margin-top: 0; }
#projects-container > li h4 { text-transform: uppercase; }
#projects-container > li p { font-size: 1em; line-height: 1.6; }
#projects-container > li p.muted { font-size: 0.9em; color: #999; }
#projects-container > li p.intro { font-size: 1.1em; font-weight: bold; color: #666; }
#projects-container > li li p { line-height: 1.5; }

.projects-banner { position: relative; margin-bottom: 1rem; overflow: hidden; }
.projects-banner img { display: block; width: 100%; max-width: 100%; }
.projects-banner .box { 
	position: absolute; bottom: 0; left: 0; margin: 0; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25); 
}


.dark-teal { color: #214555 !important; }
.teal { color: #00907c !important; }
.light-teal { color: #37bbae !important; }
.green { color: var(--brand-green) !important; }
.yellow { color: var(--brand-cyan-light) !important; }
.blue { color: var(--brand-blue) !important; }
.red { color: var(--brand-red) !important; }

.box { 
	display: inline-block; margin-bottom: 20px; padding: 10px 20% 10px 20px; color: #666 !important; 
	background: #eee; 
}
.box h4 { margin-top: 0.5em; color: #37bbae !important; }
.box h5 { display: inline; font-weight: bold; }
.box.dark-teal { background: #214555; color: #fff !important; }
.box.teal { background: #00907c; color: #fff !important; }
.box.light-teal { background: #37bbae; color: #fff !important; }
.box.green { background: var(--brand-green-light); color: var(--brand-green) !important; }
.box.yellow { background: var(--brand-cyan-light); color: #fff !important; }
.box.blue { background: var(--brand-blue-light); color: var(--brand-blue) !important; }
.box.red { background: var(--brand-red-light); color: var(--brand-red) !important; }
.box.full { display: block; padding: 10px 20px; }
.box.expanded { margin-left: -20px; margin-right: -20px; }

blockquote { margin-bottom: 1.5rem; }
blockquote p { 
	display: inline; padding: 0.6rem 0.8rem; line-height: 1.75 !important; box-decoration-break: clone; 
	font-weight: bold; background-color: var(--dark); color: #fff; 
}
blockquote.blue p { background-color: var(--brand-blue); color: #fff; }
blockquote.red p { background-color: var(--brand-red); color: #fff; }
blockquote.green p { background-color: var(--brand-green); color: #fff; }

/* Circular span containing a single character with background colour and white text. */
.red-dot {
	display: inline-block; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; 
	border-radius: 100%; background: var(--brand-red); color: #fff; font-weight: bold; 
}
.blue-dot {
	display: inline-block; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; 
	border-radius: 100%; background: var(--brand-blue); color: #fff; font-weight: bold; 
}
.green-dot {
	display: inline-block; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; 
	border-radius: 100%; background: var(--brand-green); color: #fff; font-weight: bold; 
}

/* .next-project is a button with some middle-aligned next to it. */
.next-project { 
	display: flex; justify-content: center; align-items: center; gap: 3rem; margin-top: 2rem; font-size: 22px; 
	color: #666; font-weight: bold; text-align: center; 
}
.next-project a {
	background: var(--brand-cyan); border-radius: 256px; text-align: center; 
	padding: 13px 2rem; color: #fff !important; vertical-align: middle;
}
.next-project a.green { background: var(--brand-green); }
.next-project a.yellow { background: var(--brand-cyan-light); }
.next-project a.blue { background: var(--brand-blue); }
.next-project a.red { background: var(--brand-red); }

@media all and (max-width: 1023px) {
	.next-project { gap: 1rem; }
}

@media all and (max-width: 480px) {
	.next-project { flex-direction: column; gap: 1rem; }
}

table { width: 100%; margin-bottom: 2em; }
table tr td { padding: 0.4em 0.2em 0 0.2em; text-align: center; }
table tr th { padding: 0.5em 0.3em; text-align: center; }
table thead tr.primary th { 
	background: #37bbae; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; 
}
table thead tr.secondary th { background: #7ed3cb; color: #fff; font-weight: bold; }
table tbody th { color: #37bbae; font-weight: bold; font-size: 1.2em; border-bottom: 1px solid #37bbae; }
table tbody th.middle { border-top: 1px solid #37bbae; }

@media all and (max-width: 640px) {
	#projects-container { margin: 30px 0 20px; }
	#projects-container blockquote { width: auto; padding: 0; margin: 0 0 15px; }
	#projects-container blockquote:before { display: none; }
	#projects-container p.author { font-size: 1.1em; padding: 15px 0 0; }
	#projects-container p.author strong { display: block; }
	#projects-container p.author:before { display: none; }
	#projects-nav ul li a { font-size: 20px;  }
}
@media all and (max-width: 480px) {
	/* #projects-nav ul li a { font-size: 14px; padding: 7px 0; width: 35px; font-weight: bold; } */
	#projects-nav ul li a { font-size: 18px;  }
	#projects-nav .slide-nav { text-align: center; }
}



/* Section: Download */

.fact-sheet { margin-bottom: 1.5em; }
.fact-sheet h4 { font-size: 1.3em; }
.fact-sheet h4 span { color: var(--brand-blue-light); }
.fact-sheet .img-thumbnail { margin-bottom: 1em; box-shadow: 0 8px 8px rgba(0,0,0,0.5); border-radius: 8px; }




/* Section: Subscribe */

#subscribe { 
	background-color: #666; background-image: linear-gradient(rgba(200,200,200,0.4) 0%, rgba(10,10,10,1) 100%);
	background-size: cover; background-attachment: fixed; background-position: center center; color: #FFF; 
	padding: 40px 0; 
}
#subscribe .container { padding: 50px 0; }
#subscribe-form { width: 600px; margin: 20px auto; overflow: hidden; }
#subscribe-form p { width: 430px; float: left; margin-bottom: 0; }
#subscribe-form p.submit { width: auto; float: right; }
#subscribe-form p.submit button { padding: 11px 12px; }

@media all and (max-width: 640px) {
	#subscribe-form { width: auto; }
	#subscribe-form p { width: 100%; float: none; }
	#subscribe-form p.submit { width: auto; float: none; margin-top: 10px; }
	#subscribe-form p.submit button { padding: 11px 12px; }
}



/* Section: Contacts */

form.styled { position: relative; }
form.styled * { box-sizing: border-box; }
form.styled label em {
	padding-left: 5px; font-size: 1.2em; color: var(--brand-red); font-weight: bold; font-style: normal; 
}

/* .papers has a white background so we need to re-colour some elements */
input, textarea { 
	margin: 0 0 10px 0; padding: 10px; border: 1px solid #ddd; font-family: 'Proxima Nova', sans-serif; 
	background-color: #f9f9f9; font-size: 18px; width: 100%; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
	border-radius: 8px;
}
input:not([type="checkbox"], [type="radio"]):focus, textarea:focus { 
	border: 1px solid var(--brand-cyan); background-color: #fff; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.5); 
}

input[type="checkbox"], input[type="radio"], input.checkbox { 
	width: auto; margin-left: 5px; margin-right: 10px; padding: inherit; vertical-align: middle; box-shadow: none;
}
label { padding-right: 20px; font-weight: bold; line-height: 1.6em; }

label.pill { 
	display: inline-flex; align-items: center; padding: 5px 20px; margin: 10px 0 0 0; 
	border-radius: 100px; background: var(--brand-cyan-dark); color: #fff; font-weight: bold; 
}
label.pill.pill-blue { background: var(--brand-blue); }
label.pill.pill-red { background: var(--brand-red); }
label.pill.pill-green { background: var(--brand-green); }
label.pill.pill-teal { background: var(--brand-cyan); }
label.pill input[type="checkbox"], input[type="radio"], input.checkbox { 
	margin: 0 10px 0 0; padding: 0; box-shadow: 0px 0px 0px 2px #fff;
}

form.styled textarea { height: 119px; }

.hide-until-needed { display: none; }

.form-success-message { 
	display: none; padding: 20px; background-color: var(--brand-green); color: #fff; 
}
.form-success-message strong { 
	font-family: 'Proxima Nova'; font-size: 1.4em; margin-bottom: 10px; display: block;
	text-transform: uppercase; 
}
.form-success-message p:last-child { margin-bottom: 0; }
form.styled .invalid { 
	animation: shake .25s; background-color: #fee; color: var(--brand-red); border-color: var(--brand-red); 
}
.checkbox-group { transition: all .3s; }
.checkbox-group.invalid {
	background-color: var(--brand-red-light);
	border: 1px dashed var(--brand-red);
	padding: 8px;
	border-radius: 8px;
}
form.styled.sent *, 
form.sent .hide-when-sent, 
form .show-when-sent { display: none; }
form.styled.sent .form-success-message, 
form.styled.sent .form-success-message *, 
form.sent .show-when-sent { display: block; }
form.styled.standby { opacity: 0.5; }

#action-rail-form .show-for-option { display: none; }
#action-rail-form .show-for-option.default { display: block; }

#support-bypass-form label { font-weight: normal; }

.collection-notice { font-style: italic; font-size: 0.8em; color: #666; margin-top: 20px; line-height: 1.2; }


/* Footer */

footer { background: #333; color: #999; }
footer .container { padding-top: 20px; padding-bottom: 20px; overflow: hidden; }
footer .container p { margin: 0; padding: 0; }

p#footer-copyright { float: left; width: auto; }

ul#footer-socials { float: right; margin: -5px 0 0; overflow: hidden; }
ul#footer-socials li { float: left; margin: 0; }
ul#footer-socials a { 
	display: block; text-indent: -9999px; color: #333; width: 28px; height: 28px; 
	background-size: 32px; opacity: 0.5; 
}
ul#footer-socials a:hover { opacity: 1; }
a#icon-fb { background: url("../images/social_fb.png") no-repeat center center; }
a#icon-twi { background: url("../images/social_twi.png") no-repeat center center; }
a#icon-in { background: url("../images/social_in.png") no-repeat center center; }

@media all and (max-width: 640px) {
	footer .container { max-width: 400px; margin: 0 auto; }
}
@media all and (max-width: 480px) {
	footer .container { text-align: center; }
	p#footer-copyright { float: none; margin: 0; }
	ul#footer-socials { float: none; text-align: center; }
	ul#footer-socials li { display: inline-block; float: none; margin: 15px 0 5px; }
}


/* Animations */

@keyframes shake {
	0%		{ margin-left: 0; }
	12% 	{ margin-left: -5px; }
	25%		{ margin-left: 0; }
	37% 	{ margin-left: 5px; }
	50% 	{ margin-left: 0; }
	62% 	{ margin-left: -5px; }
	74%		{ margin-left: 0; }
	86% 	{ margin-left: 5px; }
	100% 	{ margin-left: 0; }
}
@-webkit-keyframes shake {
	0%		{ margin-left: 0; }
	12% 	{ margin-left: -5px; }
	25%		{ margin-left: 0; }
	37% 	{ margin-left: 5px; }
	50% 	{ margin-left: 0; }
	62% 	{ margin-left: -5px; }
	74%		{ margin-left: 0; }
	86% 	{ margin-left: 5px; }
	100% 	{ margin-left: 0; }
}
@keyframes fadeOutIn {
	0%		{ opacity: 1; }
	5% 	{ opacity: 0; }
	95%		{ opacity: 0; }
	100% 	{ opacity: 1; }
}
@-webkit-keyframes fadeOutIn {
	0%		{ opacity: 1; }
	5% 	{ opacity: 0; }
	95%		{ opacity: 0; }
	100% 	{ opacity: 1; }
}
@keyframes fadeInOut {
	0%		{ opacity: 0; }
	15% 	{ opacity: 1; }
	85%		{ opacity: 1; }
	100% 	{ opacity: 0; }
}
@-webkit-keyframes fadeInOut {
	0%		{ opacity: 0; }
	15% 	{ opacity: 1; }
	85%		{ opacity: 1; }
	100% 	{ opacity: 0; }
}