/* *** SECTIONS: 							*** */
/* *** BREAK POINT INDICATORS 				*** */
/* *** MAIN STRUCTURES AND COMMON ELEMENTS	*** */
/* *** NAV ITEMS 							*** */
	/* TOP NAV							*/
	/* SKIP, TOP, PREVIOUS, NEXT 		*/
/* *** SELECTIONS 							*** */
/* *** INTRO 								*** */
/* *** STEP ONE 							*** */
/* *** STEP TWO 							*** */
/* *** STEP THREE 							*** */
/* *** STEP FOUR 							*** */
/* *** PRINT VIEW							*** */
/* *** SCREEN READER 							*** */


/* *** BREAK POINT INDICATORS START *** */

/*
.bpi{ background-color: #91FB9D; }
.bpi .bpit:after { content: '< 481'; }
@media (min-width: 481px) {
	.bpi { background-color: #B2B2F5; }
	.bpi .bpit:after { content: '481-639'; }
}
@media (min-width: 640px) {
	.bpi { background-color: #FBF78D; }
	.bpi .bpit:after { content: '640-768'; }
}
@media (min-width: 769px) {
	.bpi { background-color: #FFA3F8; }
	.bpi .bpit:after { content: '769-895'; }
}
@media (min-width: 896px) {
	.bpi { background-color: #9CFAFF; }
	.bpi .bpit:after { content: '896+'; }
}
*/

/* *** BREAK POINT INDICATORS END *** */



/* *** MAIN STRUCTURES AND COMMON ELEMENTS START	*** */

html,button,input,select,textarea { color: #222; }
html {
	font-size: 1em;
	line-height: 1.4;
}
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
:focus {
	outline: 3px solid orange !important;
	outline-style:auto;
}
select {
	padding: 5px;
	border: 2px solid #444;
	border-radius: 0;
	background-color: #fff;
	color: #444;
	/* Remove default styling */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/* CoV CSS */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }

.cov-select {
	position: relative;
	width: auto;
	float: left;
	max-width: 100%;
	border-radius: 0px;
	background-color: #fff;
}

.cov-select:after {
    content: " ";
    position: absolute;
    top: 40%;
    margin-top: -2px;
    right: 8px;
    width: 0;
    height: 0;
  	border: solid black;
  	border-width: 0 3px 3px 0;
  	display: inline-block;
  	padding: 3px;
  	transform: rotate(45deg);
  	-webkit-transform: rotate(45deg);
	pointer-events: none;
}

.fa-solid.text-primary {
	color: #0279b1 !important;
}

#ctrlsmobile {
	display: inline-grid;
	width: 95%;
}

#ctrlsmobile > * label {
	display: block;
	text-align: left;
}


#ctrlsmobile > .filter-box select,
#ctrlsmobile > .sort-box-dd select {
	width: 100%;
}

#ctrlsmobile > .cov-select:after {
	right: 12px;
	top: 70%;
}

#ctrlsmobile > * .exit-search {
	display: block;
	margin-top: 15px;
	margin-left: 0;
}

#ctrlswide > * label {
	display: inline-block;
}

#ctrlswide .search-box {
	width: 54%;
	display: inline-flex !important;
}

.searchfield {
	font-size: 16px;
}

/* 137352 */
.search-results-message {    
    color: #333;
    font-weight: bold;
    font-size: 18px;
	margin-top: 20px;
}

.exit-search {
	min-width: 125px;
}

.search-click {
	min-width: 70px;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
audio,canvas,img,video { vertical-align: middle; }
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea { resize: vertical; }
.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}
body {
	overflow-x: hidden;
	font: 16px/26px "Helvetica", "Helvetica Neue", "Arial";
}
.outer-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.inner-wrap {
	position: relative;
	width: 100%;
	left: 0;
}
.wrapper {
	width: auto;
	max-width: 960px;
	margin: 0 auto;
}
.wrapper-category {
	width: auto;
	max-width: 960px;
	margin: 0 auto;
    padding-left: 0.5em;
    display: block;
}
.main { padding: 30px 0; }
.main article h1 { font-size: 2em; }
.footer-container footer {
	color: white;
	padding: 20px 0;
}
@media (max-width: 767px) {
	.footer-container footer {
		padding: 20px 8px;
	}

}
.footer-container footer.hidden {
	visibility: visible;
	display: block !important;
}
.ie7 .title { padding-top: 20px; }
::-webkit-input-placeholder { color: #222; }
:-moz-placeholder {
	color: #222;
	opacity: 1;
}
::-moz-placeholder {
	color: #222;
	opacity: 1;
}
:-ms-input-placeholder { color: #222; }
.header-container {
	position: relative;
	z-index: 50;
	background: #92278F url(../img/intro_banner_m.png) center bottom no-repeat;
    background-size: 100% 100%;
}
.header-container.interior {
    /*background: rgba(230,0,81,1);
    background: -moz-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(207,18,141,1) 80%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(230,0,81,1)), color-stop(33%, rgba(207,18,141,1)), color-stop(80%, rgba(207,18,141,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(207,18,141,1) 80%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(207,18,141,1) 80%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(207,18,141,1) 80%, rgba(255,255,255,1) 100%);
    background: linear-gradient(135deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(207,18,141,1) 80%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60051', endColorstr='#e60051', GradientType=1 );*/
	background: linear-gradient(90deg, #92278F 30.69%, #FFF 100%);
}
.footer-container { background: #333; }
.masthead.wrapper {
	position: relative;
	width: auto;
	max-width: 960px;
	height: 74px;
}
#headtop {
    display: block;
    display: -ms-flexbox;
}
.title {
	width: 145px;
	height: 60px;
	background: transparent url(../img/logo_home_mobile.png) left top no-repeat;
	background-size: 100%;
	margin: 10px auto 0;
	text-indent: -9999px;
	cursor: pointer;
}
.title.interior {
	margin: 11px 0 0 5px;
	background-image: url(../img/logo_home_int.png);
}
.main-container {
	position: relative;
	top: 0;
	z-index: auto;
	-webkit-transition: margin-top 0.2s ease-in-out;
	-moz-transition: margin-top 0.2s ease-in-out;
	-ms-transition: margin-top 0.2s ease-in-out;
	-o-transition: margin-top 0.2s ease-in-out;
	transition: margin-top 0.2s ease-in-out;
}
.main-container.lowered { margin-top: 375px; }
.main section {
	position: relative;
	padding: 0 0.5em 5em;
}
.main section.social h2 {
	padding-left: 0;	
}
.main section h2 {
	position: relative;
	margin-bottom: 1.25em;
	padding-left: 1.5em;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 1.2;
}
.main section h2 span {
	position: absolute;
	top: 0;
	left: 0;
	color: #92278F;
	border: solid 2px;
	padding: 0.125em 0.35em;
	border-radius: 12em;
	line-height: 1
}
.intro-separator {
	height: 20px;
	margin-top: 2em;
	background: #fff url(../img/light_diagonal.png) left top repeat-x;
}
.spinner {
	width: 58px;
	height: 58px;
	margin: 5em auto;
}
.footer-container { padding-bottom: 6em; }
footer { position: relative; }
footer p {
	padding: 7em 0 0 0.5em;
	font-size: 0.75em;
	font-weight: normal;
	background: transparent url(../img/cov_logo.png) left top no-repeat;
	text-align: left;
	background-size: 280px;
}
footer .bottom-nav {
	padding-left: 0;
	text-align: left;
}
footer .bottom-nav li {
	display: inline-block;
	padding-left: 0.5em;
	list-style-type: none;
	font-size: 0.75em;
	line-height: 1;
	border-left: solid 1px white;
}
footer .bottom-nav li:first-child { border-left: none; }
.bottom-nav a {
	color: white;
	text-decoration: none;
}
.bottom-nav a:hover { text-decoration: underline; }

@media (min-width: 360px) {
    .title.interior {
        margin: 11px 0 0 15px;
    }
}

@media (min-width: 481px) {
	.masthead.wrapper { height: 125px; }
	.main section h2 {
		font-size: 2.25em;
		font-weight: bold;
	}
	.main section h2 span { top: -0.125em; }
	.title {
		margin: 45px auto 0;
	}
}

@media (min-width: 640px) {
	.title.interior {
		width: 198px;
		height: 66px;
		margin: 0.5em 0 0 0.5em;
		background-image: url(../img/logo_home_int.png);
	}
}

@media (min-width: 769px) {
	.main article {
		float: left;
		width: 57%;
	}
	.main section { padding-bottom: 4em; }
	.header-container { background: #92278F url(../img/intro_banner.png) center top no-repeat; }
	.header-container.interior {
    /*    background: rgba(230,0,81,1);
        background: -moz-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(255,255,255,1) 66%, rgba(230,0,81,1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(230,0,81,1)), color-stop(33%, rgba(207,18,141,1)), color-stop(66%, rgba(255,255,255,1)), color-stop(100%, rgba(230,0,81,1)));
        background: -webkit-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(255,255,255,1) 66%, rgba(230,0,81,1) 100%);
        background: -o-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(255,255,255,1) 66%, rgba(230,0,81,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(255,255,255,1) 66%, rgba(230,0,81,1) 100%);
        background: linear-gradient(135deg, rgba(230,0,81,1) 0%, rgba(207,18,141,1) 33%, rgba(255,255,255,1) 66%, rgba(230,0,81,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60051', endColorstr='#e60051', GradientType=1 );*/
		background: linear-gradient(90deg, #92278F 30.69%, #FFF 100%);
 }
	.masthead.wrapper { height: 150px; }
	.title {
		width: 312px;
		height: 104px;
		margin: 30px auto 0;
		background-image: url(../img/logo_home.png);
	}
        .title.interior {
            margin: 34px 0 0 8px;
            font-size: 1.75em;
            display: -webkit-inline-box;
        }
	.footer-container footer.hidden {
		visibility: hidden;
		display: none !important;
	}
	footer p {
		background: transparent url(../img/cov_logo.png) left top no-repeat;
		text-align: left;
    	background-size: 280px;
	}
	footer .bottom-nav {
		position: absolute;
		top: 1em;
		right: 3em;
		padding-left: 40px;
	}
}

@media (min-width: 769px) {
	.wrapper-category { display: none; }
}

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}
.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}
.hidden {
	display: none !important;
	visibility: hidden;
}
.visuallyhidden, .intro-right.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* *** MAIN STRUCTURES AND COMMON ELEMENTS END	*** */



/* *** NAV ITEMS START			*** */

/* TOP NAV START					*/

nav {
    width: 205px;
    position: absolute;
    bottom: 0;
    right: -20px;
    z-index: 50;
}

nav ul {
    margin: 0;
    padding: 0;
    height: 19px;
    text-align: right;
}

nav ul li {
    width: 65px;
    display: inline-block;
    margin-left: -23px;
    height: 19px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav a {
    position: relative;
    top: -5px;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 2px;
    width: 64px;
    height: 19px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.875em;
    line-height: 1;
    color: #fff;
    background: transparent url(../img/navlink_red_m.png) left top no-repeat;
    background-size: 96% 100%;
}

nav a.active,
nav a:hover {
    background-image: url(../img/navlink_tablet_white.png);
    color: #92278F;
}

nav a:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
    .masthead.wrapper.interior {
        height: 125px;
    }

    nav {
        width: 298px;
        right: -38px;
    }

    nav ul {
        height: auto;
        text-align: left;
    }

    nav ul li {
        position: relative;
        bottom: -5px;
        height: 37px;
        margin-left: -3px;
    }

    nav a {
        /* 137353 */
        width: 102px;
        height: 37px;
        font-size: 1.5em;
        text-align: left;
        padding-left: 40px;
        padding-top: 8px;
        background-image: url(../img/navlink_tablet_red.png);
    }
}

@media (min-width: 481px) {	
	nav {
		width: 298px;
		right: -38px;
	}
	nav ul {
		height: auto;
		text-align: left;
	}
	nav ul li {
		position: relative;
		display: inline-block;
		bottom: -5px;
		height: 37px;
		margin-left: -3px;
	}
	nav a {
		width: 102px;
		height: 37px;
		font-size: 1.5em;
		text-align: left;
		padding-left: 40px;
		padding-top: 8px;
		background: transparent url(../img/navlink_tablet_red.png) left top no-repeat;
        background-size: 96% 100%;
	}
	nav a.active { background-image: url(../img/navlink_tablet_white.png); }
	nav a:hover { background-image: url(../img/navlink_tablet_white.png); }
}

@media only screen and (min-width: 481px) {
	nav li:first-child a { margin-left: 0; }
	nav li:last-child a { margin-right: 0; }
	.oldie nav a { margin: 0 0.7%; }
}

@media (min-width: 640px) {
    .progress .toggle {
        position: absolute;
        bottom: 1.25em;
        left: auto;
        right: 1em;
    }
    .progress div.toggleButton {
        left: 60px;
    }
	nav {
		width: 213px;
		left: 153px;
	}
	nav ul li { margin-left: -24px; }
	nav a {
		width: 81px;
		text-align: center;
		padding-left: 0;
		background: transparent url(../img/navlink_640_red.png) left top no-repeat;
        background-size: 96% 100%;
	}
	nav a.active { background-image: url(../img/navlink_640_white.png); }
	nav a:hover { background-image: url(../img/navlink_640_white.png); }
}

@media (min-width: 769px) {
	nav {
		width: 390px;
		left: 100px;
	}
	nav ul li {
		height: auto;
		bottom: 0;
		margin-left: 20px;
	}
	nav a {
		top: 0;
		width: 124px;
		height: 37px;
		padding-top: 0;
		font-size: 0.875em;
		line-height: 2.6;
		background: transparent url(../img/navlink.png) left top no-repeat;
		background-size: 100%;
	}
	nav a.active { background-image: url(../img/navlink_white.png); }
	nav a:hover { background-image: url(../img/navlink_white.png); }
}
nav a span { display: none; }
@media (min-width: 769px) {
	nav a span { display: inline; }
}

/* 137353 nav zoom */
@media (max-width: 349px) {
    nav a {
        width: 75px;
        padding-left: 0;
        text-align: center;
        box-sizing: border-box;
        background-size: 100% 100%;
    }
    nav ul li {
        width: 50px;
    }

    nav {
        right: -92px;
    }
}

/* TOP NAV END						*/




/* SKIP, TOP, PREVIOUS, NEXT START	*/

#skip {
	position:absolute;
	left: 170px;
    display: none;
}
#skip a {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
	font-size: 10px !important;
}
#skip a:focus{
	position:static;
	width:auto;
	height:auto;
	padding: 2px;
	background-color: #000;
	color: #fff;
}
@media (min-width: 481px) { 
    #skip a { font-size: 16px !important; }
    #skip {
        display: block;
    }
}
@media (min-width: 640px) { #skip { left: 240px; } }
@media (min-width: 769px) { #skip { left: 0px; } }

.back-to-top-link {
	display: block;
	margin-top: 2em;
}
.back-to-top-link a {
    padding: 5px;
    margin: 0 0 0 0.375em;
    color: #92278F;
    text-decoration: none;
    font-weight: bold;
}
.back-to-top-link a:hover { text-decoration: underline; }

.go-back, .next-step {
	width: 132px;
	height: 51px; /*new 201806 DS*/
	position: absolute;
	bottom: 0em;
	font-size: 1em;
	color: #fff;
	text-decoration: none;
	text-align: left;
	margin-top: 37px;
	padding-top: 0.75em;	
	display: inline-block;
    box-sizing: border-box;
}
.go-back span, .next-step span {
	position: absolute;
	top: 0.65em;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 0.5em;
	vertical-align: middle;
}
.next-step {
	right: 0em;
	padding-left: 1em;
	background: url(../img/button-160.png) no-repeat;
	background-size: 132px 51px;
}

.go-back span {
    left: 2.5em;
}


.go-back {
    color: #92278F;
    padding-left: 5em;
    background: url(../img/button-160-back.png) no-repeat;    
    background-size: 132px 51px;
}

.next-step:hover {
    color: #92278F;
    background: url(../img/button-160-2.png) no-repeat;
    background-size: 132px 51px;
} 

.go-back:hover {
    color: #fff;
    background: url(../img/button-160-back-hover.png) no-repeat;
    background-size: 132px 51px;
} 

.next-step span {
	background: transparent url(../img/icon-chevron-right-white.png) left top no-repeat;
    background-size: 30px 30px;
    top: 0.5em;
    left: 4em;
}

.go-back span {
    background: transparent url(../img/icon-chevron-left.png) left top no-repeat;
	background-size: 30px 30px;
	top: 0.5em;
	left: 2.5em;
}


.next-step:hover span {
    background: transparent url(../img/icon-chevron-right.png) left top no-repeat;
    background-size: 30px 30px;
}

.go-back:hover span {
    background: transparent url(../img/icon-chevron-left-white.png) left top no-repeat;
    background-size: 30px 30px;
}

.next-step-links {
	margin-top: -10px;
	padding-right: 10px;
	position: relative;
	float: right;
	width: 240px;
}

@media (max-width: 481px) {
	.back-to-top-link a { padding: 0; margin-left: 0.5em;}
	.next-step-links { padding-right: 50px; }
}

@media (min-width: 769px) {
	.go-back, .next-step {
		width: 160px;
		padding-left: 0;
		font-size: 1.5em;
		background-size: 160px 64px;
		padding-top: 0.75em;
        height: 64px;
	}
    .go-back:hover, .next-step:hover {background-size: 160px 64px;}
	.go-back span, .next-step span { position: absolute; background-size: 30px 30px; }
	.next-step span {left: 3.25em; top: 0.75em;}
    .go-back span {top: 0.75em; left: 2em;}
	.next-step { padding-right: 0; left: auto; padding-left: 0.75em; }
	.go-back {padding-left: 3.75em;}
	.next-step-links {
		padding-top: 12px;
		padding-right: 50px;
	}
}

/* SKIP, TOP, PREVIOUS, NEXT END	*/



/* *** NAV ITEMS END			*** */



/* *** SELECTIONS START			*** */

.progress {
	position: absolute;
	height: 50px;
	top: 0;
	right: 100px;
	z-index: 50;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0.5em 1em 0 0;
	cursor: pointer;
}
    .progress.dark li, .progress.dark .toggletext {
        color: white;
        background-position: left -310px;
    }
.progress.dark li.councillor { background-position: left -350px; }
.progress.dark li.park { background-position: left -390px; }
.progress.dark li.school { background-position: left -430px; }
    .progress.dark .bar-inner, .progress:hover .bar-inner {
        background-color: white;
    }
    .progress.dark .choices, .progress:hover ul li {
        color: white;
    }
.progress.dark .toggle { background-image: url(../img/icon-chevron-up-white.png); }
.progress.dark .toggle.mobile { background-image: url(../img/icon-chevron-right-white.png); }
.progress ul {
	padding: 0;
	margin: 0;
}
    .progress .single-categories, a.toggle.desktop {
        display: none;
    }
.progress .all-categories {
	display: none;
	width: 100%;
}
.progress li {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 30%;
	list-style-type: none;
	line-height: 1.5;
	clear: both;
}
.progress li.complete { background-position: left -150px; }
.progress li.councillor { background-position: left -41px; }
.progress li.councillor.complete { background-position: left -191px; }
.progress li.park { background-position: left -82px; }
.progress li.park.complete { background-position: left -232px; }
.progress li.school { background-position: left -120px; }
.progress li.school.complete { background-position: left -270px; }
.progress .toggle {
	display: inline-block;
	width: 26px;
	height: 26px;
	background: transparent url(../img/icon-chevron-down.png) left top no-repeat;
	background-size: cover;
	text-decoration: none;
}
    
    .progress .toggle:focus {
        outline: none !important;
    }
.progress .toggle.mobile {
	width: 26px;
	background-image: url(../img/icon-chevron-left-white.png);
}
.progress .toggle span {
	position: relative;
	top: 2px;
}
.progress .toggle span.el-icon-chevron-up { top: 1px; }
.progress .toggle span.el-icon-chevron-down { display: none; }
.progress .toggle span.el-icon-chevron-left { display: inline; }
.progress .toggle.active { background-position: left top; }
span.toggletext {
    margin-left: 2.5em;
    font-size: .875em;
    font-weight: bold;
    display: none;
}

    span.toggletext:focus {
        outline: none !important;
    }

span.toggletext-mobile {
    font-size: .8em;
    font-weight: bold;
    color: #222;
    position: relative;
    top: -10px;
}
.bar, .bar-inner {
	display: block;
	border-radius: 2px;
	height: 3px;
}
.bar {
    width: 100%;
    margin: 0 0 0.5em 0;
    background-color: #92278F;
}
.plan-candidates .bar {
	background-color: #D9D9D9;
}
.selection .bar {
	float: none;
	width: 95%;
	height: 3px;
}
.selection .bar-inner { height: 3px; }
.bar-inner {
	width: 0;
	background-color: #92278F;
}
.bar-inner.width-10 { width: 10%; }
.bar-inner.width-20 { width: 20%; }
.bar-inner.width-30 { width: 30%; }
.bar-inner.width-40 { width: 40%; }
.bar-inner.width-50 { width: 50%; }
.bar-inner.width-60 { width: 60%; }
.bar-inner.width-70 { width: 70%; }
.bar-inner.width-80 { width: 80%; }
.bar-inner.width-90 { width: 90%; }
.bar-inner.width-100 { width: 100%; }
.choices {
    position: relative;
    top: 2px;
    font-weight: bold;
    color: white;
    float: right;
}
.progress .single-categories {
    font-size: .65em;
    font-weight: bold;
}
.selections-wrapper {
	position: absolute;
	top: 125px;
	left: 0;
	width: 100%;
	z-index: 50;
	background-color: #333;
	padding: 10px;
	color: #fff;
	overflow: hidden;
}

.selections-wrapper .flyout .ballot {
	color: #6DC8BF;
	font-size: 0.88em;
	font-weight: 500;
	line-height: 20px;
}

.selections-wrapper.closed { left: 100%; }
.selections {
	max-width: 960px;
	margin: auto;
}
.selections-info {
	display: flex;
	margin: 10px 30px 10px 0;
	padding: 10px 0;
	justify-content: space-between;
}
.reset-btn {
	background: none;
	border: none;
	text-decoration: none;
	font-size: 14px;
	color: #c3c3c3;
}
.reset-btn:hover {
	text-decoration: underline;
	color: #fff;
}
.selection {
	overflow: hidden;
}
.selection h2 {
	font-weight: 700;
	font-size: 20px;
}
@media (max-width: 768px) {
    .selections-info {
        display: block;
    }

    .selections-info .reset-btn {
        display: block;
        margin-top: 10px;
        margin-left: auto;
    }
}

@media (min-width: 481px) {
	.bar { background-color: #e6e6e6; }
   	.bar-inner {
        	background-color: #92278F;
	}
	.choices {
		right: -2px;
		top: -2px;
		color: white;
	}
}

@media (max-device-width: 568px) {
	.choices {
		color: white;
	}
}

@media (min-width: 640px) {
	.progress {
		display: block;
		right: -330px;
		width: 100%;
		height: 125px;
		padding: 12px 4em 0.5em 3.5em;
		background: transparent url(../img/progress_bg.png) left bottom no-repeat;
	}
	.progress:hover { background-image: url(../img/progress_bg_hover.png); }
	.progress:hover li.mayor { background-position: left -310px; }
	.progress:hover li.councillor { background-position: left -350px; }
	.progress:hover li.park { background-position: left -390px; }
	.progress:hover li.school { background-position: left -430px; }
	.progress.dark { background-image: url(../img/progress_bg_hover.png); }
	.progress.dark .bar, .progress:hover .bar { background-color: #999; }
	.progress ul { margin-left: 40px; }
        .progress .single-categories, a.toggle.desktop, span.toggletext {
            display: block;
        }
        .progress .all-categories, span.toggletext-mobile, .progress .toggle.mobile {
            display: none;
        }
	.progress li {
		line-height: 1.1;
		padding-left: 2em;
        width: 38%;
	}

        .progress .toggle {
            bottom: 0.1em;
            right: auto;
            line-height: 1;
        }
        .progress:hover .toggle {
            background: url(../img/icon-chevron-down-white.png);
            background-size: 25px;
			background-repeat: no-repeat;
        }

        .progress.dark:hover .toggle {
            background: url(../img/icon-chevron-up-white.png);
            background-size: 25px;
			background-repeat: no-repeat;
        }
	.progress .toggle span.el-icon-chevron-down { display: inline; }
    .progress .toggle span.el-icon-chevron-left { display: none; }
    .choices {
        color: #92278F;
    }
	.selcol1, .selcol2 {
		width: 47%;
		float: left;
	}
	.selcol1 { margin-right: 30px; }
}
.progress div.toggleButton {
    width: max-content;
    color: #92278F;
    position: relative;
    left: 100px;
}
.progress:hover div.toggleButton, .progress:hover .choices {
    color: white;
}
.progress div.toggleButton:active {
    outline: 3px solid orange;
}
@media (min-width: 667px) {
    .progress {
        right: -380px;
    }
    .progress li {
        width: 35%;
    }
    .progress div.toggleButton {
        left: 60px;
    }
    nav {
        left: 202px;
    }
}
@media (min-width: 731px) {
    .progress {
        right: -440px;
    }
    nav {
        left: 265px;
    }
    .progress li {
        width: 30%;
    }
}
@media (min-width: 750px) {
    .progress {
        right: -441px;
    }
}
@media (min-width: 769px) {
	.progress {
		right: -450px;
		height: 150px;
		padding: 12px 4em 0.5em 6em;
	}
        .progress:hover {
            background-image: url(../img/progress_bg_hover.png);
            cursor: default;
            color: white;
        }
	.progress:hover li.mayor { background-position: left -214px; }
	.progress:hover li.councillor { background-position: left -238px; }
	.progress:hover li.park { background-position: left -263px; }
	.progress:hover li.school { background-position: left -286px; }
	.progress.dark li { background-position: left -214px; }
	.progress.dark li.councillor { background-position: left -238px; }
	.progress.dark li.park { background-position: left -263px; }
	.progress.dark li.school { background-position: left -286px; }
        .progress div.toggleButton {
            left: 50px;
            display: -ms-inline-flexbox;
        }
        
        .progress div.toggleButton:hover {
            cursor: pointer;
        }
        
        .progress ul {
            margin-left: 30px;
        }
	.progress li {
		line-height: 1.5;
	}
	.progress li.complete { background-position: left -99px; }
	.progress li.councillor { background-position: left -23px; }
	.progress li.councillor.complete { background-position: left -123px; }
	.progress li.park { background-position: left -48px; }
	.progress li.park.complete { background-position: left -148px; }
	.progress li.school { background-position: left -70px; }
	.progress li.school.complete { background-position: left -172px; }

	.progress .toggle.desktop {
		display: inline-block;
		width: 25px;
		height: 25px;
	}
	.progress .toggle.mobile { display: none; }

    .choices {
        top: 0;
        color: #92278F;
    }

	.selections-wrapper.closed {
		left: 0;
		top: -270px;
	}
}
@media (min-width: 800px) {
    .progress {
        right: -450px;
    }

    nav {
        /* right: 305px; */
    }
}
@media (min-width: 840px) {
    .progress {
        right: -455px;
    }
    .progress .single-categories {
        font-size: .76em;
    }
}
@media (min-width: 896px) {
	.selcol1, .selcol2 {
		width: 50%;
	}
	.selcol1 { margin-right: 0; }
	.selection {
		width: 46%;
		float: left;
	}
	.selection.mayor, .selection.park {
		margin-right: 4%;
	}
}


/* common candidate thumbnail properties (affects selections, step 4, and print) */

.candidate-thumb {
	overflow: hidden;
	margin-bottom: 23px;
}

.candidate-thumb-inner {
	overflow: hidden;
}
.candidate-thumb-pic {
	float: left;
	background: #1a1a1a url(../img/selection_cross.png) center center no-repeat;
	border-radius: 12em;
}
.candidate-thumb .add-select {
	display: block;
	position: absolute;
	width: 185px;
	color: #444;
	background-color: #fff;
	text-decoration: none;
	padding: 2px 4px;
}
.candidate-thumb .photo {
	display: block;
	width: 85px;
	height: 85px;
	border-radius: 12em;
	background-size: contain;
}
.candidate-thumb .flyout {
	padding: 5px 0 0 0;
}
.candidate-thumb .flyout .name, .candidate-thumb .flyout .org {
	margin: 0;
	font-size: 1em;
	line-height: 1.3;
}
.candidate-thumb .flyout .org {
	font-size: 0.875em;
	line-height: 1.6;
}
.candidate-thumb .flyout .lname {
	font-size: 1.125em;
	font-weight: bold;
	line-height: 1.6;
	text-transform: uppercase;
}

.candidate-thumb .flyout .fname	{
	font-size: 1em;
	line-height: 1.6;
}
div.rbtn {
	margin-left: 3px;
	margin-top: 8px;
}
.rbtn .rbtn {
	color: #C3C3C3;
	text-decoration: none;
}

.selections-info .fa-xmark, 
.add-select .fa-plus,
.rbtn .rbtn .fa-xmark {
	font-size: 0.75em;
}

.rbtn .rbtn:hover {
	color: #fff;
	text-decoration: underline;
}
.candidate-thumb .add-select:hover {
	text-decoration: underline;
}
/* *** SELECTIONS END			*** */



/* *** INTRO START				*** */

.main .intro { padding: 2em 0 0; }
.main .intro h2 {
	font-size: 3.5em;
	border-bottom: none;
	padding-left: 0;
	width: 75%;
	margin: 0 auto;
	color: #92278F;
	text-align: center;
	line-height: 1.2;
}
.main .intro h3 {
	margin: 0 auto 0em;
	line-height: 1.3;
}
.intro h3, .intro p:first-of-type {
	text-align: center;
	font-weight: normal;
	font-size: 1.5em;
}
.intro h4 {
	text-align: center;
	text-transform: uppercase;
	color: #92278F;
	font-size: 1.25em;
}
.intro .intro-tips {
	margin-bottom: 0;
	padding-left: 1em;
	text-align: left;
}
.intro .intro-tips li {
	display: list-item;
	float: none;
	width: auto;
	margin: 0 0 2em 0;
	padding: 0 0 0 3em;
	text-align: left;
}
@media (max-width: 768px) {
    .intro .intro-tips li {
        padding-right: 3em;
    }
}
.intro .intro-tips span {
	left: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	background-size: cover;
}
.main .redirect h2 {
	width: 80%;
	margin: 0 auto;
	padding: 2em 0 0 0;
	text-align: center;
	text-transform: uppercase;
	color: #92278F;
}
.main .redirect p {
	width: 60%;
	margin: 2em auto 0;
	text-align: center;
	color: #666;
}
.main .redirect a {
	color: black;
	text-decoration: none;
}
.main .redirect a:hover { text-decoration: underline; }
.intro-tips,.intro-steps {
	margin: 0 0 3em;
	padding: 0;
	overflow: auto;
}
.intro-tips li,.intro-steps li {
	list-style-type: none;
	display: block;
	position: relative;
	margin-bottom: 2em;
	padding-top: 2em;
	vertical-align: top;
	text-align: center;
	color: #666;
}
.intro-tips li:first-child,.intro-steps li:first-child { margin-left: 0; }
.intro-steps span {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 0.5em;
	background-color: #92278F;
	color: white;
	border-radius: 1em;
}
 .intro-tips span {
    position: absolute;
	top: 0;
	left: 50%;
	padding: 0 0.25em 0.5em 0.25em;
	background-color: #fff;
	color: #92278F;
	border-radius: 20px;
	border-color: #92278F;
	border: 3px solid #92278F;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
}
.intro-steps { margin-top: 0; }
.intro-steps li { padding-top: 0; }
.intro-steps .counter {
	margin-bottom: 0;
	font-weight: bold;
	font-size: 3em;
	color: white;
}
.intro-left,.intro-right {
	margin-bottom: 3em;
	border-bottom: solid 1px #e6e6e6;
	text-align: center;
}
.intro-left img,.intro-right img { 
	max-width: 50%;
    min-width: 250px;	
}
.intro-right {
	width: 90%;
	overflow: auto;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 2em;
	padding-bottom: 5em;
	border-bottom: none;
	text-align: center;
}
.intro-right .intro-right-img {
	display: none;
	float: right;
	width: 200px;
	margin-right: 20px;
}
.intro-right span {
	display: none;
	position: absolute;
	right: 120px;
	font-size: 0.875em;
	color: #666;
}
.intro-right span.candidates {
	margin-top: 4em;
	top: 340px;
}
.intro-right span.capital-plan {
	margin-top: 1.5em;
	top: 340px;    
}
.intro-right span.details {
	margin-top: 0.75em;
	top: 301px;
}
.intro-right span.checklist {
	margin-top: 0.75em;
	top: 270px;
}
.intro-right .legend {
	position: absolute;
	right: 210px;
	top: 50px;
	width: 75px;
	height: 339px;
	background: transparent url(../img/plan_legend.png) left top no-repeat;
}
.intro-center {
    clear: both;
}
.intro-bottom {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding-bottom: 3em;
	background-color: #333;
	border-bottom: solid 1px #666;
}
.intro-bottom h3 {
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;
	padding-top: 2em;
	font-size: 1.25em;
	line-height: 1.4;
	color: white;
}
.intro-bottom h4 {
	width: 60%;
	margin: 1.33em auto;
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.25em;
	line-height: 1.4;
	color: white;
}
.intro-bottom p {
	width: 90%;
	margin: 0 auto;
	color: #ccc;
	line-height: 1.8;
}
.dark-diagonal {
	visibility: hidden;
	position: relative;
	top: 115px;
	left: 50%;
	width: 75%;
	height: 12px;
	margin-left: -37.5%;
	background: #333 url(../img/dark_diagonal.png) left top repeat-x;
}
.reassurance {
	text-align: center;
	text-transform: uppercase;
	color: #666;
	font-size: 0.875em;
}
.reassurance.bottom { margin-top: 1em; }
.main .intro p.note {
	width: calc(95% - 8%);
	font-size: 0.8em;
	margin: 0;
	padding: 0 8%;
	color: #666;
}

@media (min-width: 481px) {
	.main .intro h2 { width: 70%; }
	.main .intro h3 { width: 78%; }
	.intro-left,.intro-right {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		margin-bottom: 0;
		border-bottom: none;
	}
	.intro-bottom h3 {
		width: 60%;
		margin: 0 auto;
		font-size: 2em;
	}
	.intro-bottom h4 { font-size: 1.5em; }
	.intro-bottom p {
		width: 60%;
		font-size: 1.325em;
		line-height: 1.3;
	}
	.selections-wrapper {
		top: 125px;
	}
}

@media (min-width: 980px) {
	.intro-right .intro-right-img {
		width: auto;
		display: inline;
		float: left;
		max-width: 260px;
		margin-right: 0;
	}
	.intro-right .intro-right-legend-img { display: none;}
	.intro-right span {
		display: block;
		position: static;
		margin-left: 270px;
		padding-left: 2em;
		font-size: 1.25em;
		background: transparent url(../img/intro_pointer.png) left center no-repeat;
		background-size: 20px 22px;
	}
}
@media (min-width: 769px) {
	.main .intro { padding: 0em 0 0; }
	.intro h2 {
		padding-top: 1.25em;
		font-size: 3em;
	}
	.intro .intro-tips {
		margin-bottom: 1em;
		padding-left: 0;
	}
	.intro-tips li,.intro-steps li {
		float: left;
		width: 28%;
		margin-bottom: 0;
		margin-left: 7%;
	}
	.intro-steps .counter {
		margin-bottom: 1em;
		font-size: 2em
	}
	.intro-left,.intro-right {
		width: 40%;
		padding-right: 2em;
	}
	.intro-left img,.intro-right img {
		max-width: 70%;
		margin-left: 0;
	}
	.intro-right {
		width: 59%;
		padding-bottom: 0;
		border-left: solid 1px #e6e6e6;
		text-align: left;
	}

	.intro-right .legend { display: none; }
	.intro-bottom { border-bottom: none; }
	.intro-bottom h3 {
		width: 100%;
		font-size: 2em;
	}
	.intro-bottom h4 {
		width: 100%;
		font-size: 1.25em;
	}
	.intro-bottom p {
		width: 100%;
		font-size: 1em;
		line-height: 1.4;
	}
	.dark-diagonal { visibility: visible; }
	.reassurance { font-size: 1em; }
}

/* buttons */ 
.to-election-site {
	position: relative;
	display: block;
	width: 30em;
	margin: 1.5em auto 0;
	font-size: 1em;
	text-align: center;
	max-width: 88%;
}
.to-election-site a {
	color: #0279B1;
	display: block;
}
.to-election-site span {
	display: inline-block;
	margin: 0 0 0 0.5em;
	padding: 0.25em 0.25em;
	width: 26px;
	height: 26px;
	background: transparent url(../img/icon-chevron-right.png) left top no-repeat;
	background-size: 100%;
	vertical-align: middle;
}
.get-started {
    display: block;
	clear: both;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 350px;
    margin: 0 auto 2.5em;
    padding: 0;
    font-size: 22px;
    color: white;
    text-align: center;
    text-decoration: none;
    background: url(../img/get-started.png) no-repeat;
    background-size: contain;
    height: 54px;
    letter-spacing: 2px;
}
.get-started span.text {
    display: inline-block;
    padding-top: 13px;
    margin-right: 10px;
}
.get-started span.el-icon-chevron-right {
    position: absolute;
    width: 23px;
    height: 23px;
    margin-top: 15px;
    background: transparent url(../img/icon-chevron-right-white.png) left top no-repeat;
    background-size: 23px 23px;
}
.get-started:hover {
    color: #92278F; 
    background: url(../img/get-started-hover.png) no-repeat;
    background-size: contain;
}

.get-started:hover span.el-icon-chevron-right {
    background: transparent url(../img/icon-chevron-right.png) left top no-repeat;
    background-size: 23px 23px;
}
@media (max-width: 349px) {
	.get-started {
		width: 320px;
	}
}
@media (min-width: 640px) {
	.get-started {
		width: 434px;
		font-size: 24px;
        letter-spacing: 2px;
        height: 67px;
	}
	.get-started span.text {
		padding-top: 20px;
		margin-right: 20px;
	}
	.get-started span.el-icon-chevron-right, .get-started:hover span.el-icon-chevron-right {
		width: 30px;
		height: 30px;
		margin-top: 18px;
        background-size: 30px 30px;
	}
}
/*
@media (min-width: 769px) {
	.get-started {
		width: 45.4167%;
		font-size: 1.125em;
	}
	.get-started span.el-icon-chevron-right {
		right: 20%;
	}
	.to-election-site { font-size: 1em; }
}

@media (min-width: 896px) {
	.get-started {
		font-size: 1.5em;
	}

}
*/

/* *** INTRO END				*** */



/* *** STEP ONE START			*** */

/* FILTER, SEARCH, AND SORT START */

/* borders */
.searchfield, .filter-box select, .sort-box-dd select, .sort-box a {
	border: 2px solid #444;
	border-radius: 0;
}
.exit-search {
	text-decoration: none !important;
	border: 2px solid #92278F !important;
}

/* fonts */
.search-box, .filter-box, .sort-box-dd, .sort-box, .sort-box a { font-size: 18px; color: #333; }
.search-box a, .sort-box a:hover, .sort-box a.active, .sort-box a:focus  { color: #fff; }
.filter-box label, .sort-box-dd label, .search-box a, .sort-box { font-weight: bold; }
.sort-box a { font-weight: normal; }

/* mobile */
.searchfield {
	width: 224px;
	height: 29px;
	background: transparent url(../img/search.png) 4px 5px no-repeat;
	background-size: 16px;
	text-indent: 1.5em;
    display: inline-block;
    padding: 0;
}
.search-box a {
	display: inline-block;
	background-color: #92278F;
	height: 30px;
	padding-top: 3px;
	vertical-align: top;
	text-decoration: none;
	text-align: center;
}
.search-box a:hover, .search-box a:focus { background-color: #333; }
.search-box a.exit-search:hover, .search-box a.exit-search:focus {
	background-color: #92278F !important;
	color: #fff !important;
}
.search-click { width: 73px; }
.exit-search {
	background-color: #fff !important;
	color: #92278F !important;
}
.exit-search {
	height: 26px !important;
	width: 120px;
	margin-left: 177px;
	margin-top: 15px;
}
.filter-box, .sort-box-dd {
	margin-top: 20px;
}
.filter-box label, .sort-box-dd label {
	display: inline-block;
	width: 92px;
	height: 33px;
	margin-right: 14px;
	text-align: right;
}
.filter-box select, .sort-box-dd select {
	width: 190px;
	height: 33px;
}

/* 481+ */
@media (min-width: 481px) {
	.exit-search {
		margin-left: 20px;
		margin-top: 0;
	}
}

/* 640+ */
@media (min-width: 640px) {
	.exit-search {
		margin-left: 30px;
	}
}

/*	769+ (handled by #controls-wide and .sort-box selectors, no media queries required) */
#ctrlswide .filter-box, #ctrlswide .search-box {
	display: inline-block;
}
#ctrlswide .filter-box {
	margin-top: 0;
	margin-right: 20px;
}
#ctrlswide .filter-box label {
	display: inline;
	width: auto;
	margin-right: 10px;
	text-align: left;
}
    #ctrlswide .filter-box select {
        height: 46px;
    }

#ctrlswide .searchfield {
    height: 42px;
	width: 70%
}
#ctrlswide .searchfield {
	background: transparent url(../img/search.png) 4px 12px no-repeat;
	background-size: 16px;
}
#ctrlswide .search-box a, .sort-box a {
	height: 36px;
	padding-top: 10px;
}
#ctrlswide .exit-search {
	height: 32px !important;
}
.sort-box a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 20px;
}
.sort-box a:hover, .sort-box a.active, .sort-box a:focus { background-color: #333; }

/*	896+ */
@media (min-width: 896px) {
	#ctrlswide .filter-box select {
		width: 250px;
	}
	#ctrlswide .searchfield {
		width: 290px;
        height: 42px;
	}
	.sort-box a {
		padding-left: 23px;
		padding-right: 23px;
	}
}

/* *** FILTER, SEARCH, AND SORT END *** */

.reset-all {
	position: absolute;
	top: -45px;
	right: 10px;
	color: #92278F;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.75em;
}
.reset-all span {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: transparent url(../img/icon-reset.png) left top no-repeat;
	background-size: cover;
	vertical-align: middle;
}
.reset-all:hover { text-decoration: underline; }
.candidates { overflow: auto; }

.candidates h3 {
	padding: 0.75em 0 0.75em 0.375em;
	color: #4d4d4d;
	font-weight: bold;
	font-size: 1.25em;
	text-transform: uppercase;
}
.candidates h3 span {
	display: none;
	font-size: 0.75em;
}
.candidates h3:focus {
	box-shadow: 0 0 0 3px #f5a623 inset;
	outline: none !important;
}
.candidates.councillor h3 { background-position: left -70px;}
.candidates.park h3 { background-position: left -145px; }
.candidates.school h3 { background-position: left -220px; }
.candidates .candidate {
	display: block;
	padding-top: 1em;
}
.candidates .add-candidate:hover .image img, .candidates .add-candidate:focus .image img {
	-webkit-filter: none;
	filter: none;
}
a.add-candidate:hover {
	outline: 3px solid orange !important;
	outline-style:auto;
}
.candidates .candidate.chosen img {
	border-radius: 12em;
	-webkit-filter: grayscale(0%) brightness(80%);
	filter: grayscale(0%) brightness(80%);
}
.candidates .candidate.chosen .add-candidate .image .img-circle {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 5px solid #92278F;
    border-radius: 12em;
    position: absolute;
    z-index: 30;
    width: 100%;
    padding-top: 100%;
    padding-top: calc(100% - 6px);
    cursor: default;
}

.image .cancheck {
	background-image:url('../img/icon-check-eb0033.png');
	background-repeat:no-repeat;
	background-size: 100% 100%;
	width: 35%;
	padding-top: 35%;
	position: absolute;
	z-index: 40;
	left: 65%;
	top: 46%;
}
.candidates .candidate.w2 {
	width: 97%;
}
.candidates .candidate.w2 a.add-candidate {
	padding: 0;
	border: 0;
}
.candidates .candidate.w2 .img-circle {
	border: none !important;
}
.candidates .candidate.w2 img {
	-webkit-filter: none !important;
	filter: none !important;
	border: 0;
	border-radius: 0;
}
.candidates .candidate.w2 .image p { visibility: hidden; }
.candidates .candidate .close {
	position: absolute;
	right: 1em;
	top: 1em;
	display: block;
	width: 17px;
	height: 17px;
	background: transparent url(../img/candidate-close.png) left top no-repeat;
	text-indent: -9999px;
}
.candidates .candidate.w2 a:hover, .candidates .candidate.w2 img:hover {
    cursor: default;
}
.candidates .candidate .info {
	position: relative;
	display: none;
	border: solid #ccc;
	border-width: 0 1px 1px 1px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	overflow: visible;
	z-index: 45;
	background: linear-gradient(to top, #fff 95%, rgb(255, 255, 255, 0));
}
.candidates .candidate .info h4 {
	margin-bottom: 0;
	margin-top: 0;
	padding-top: 1.33em;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: #92278F;
}

/* bc 2026 */
.candidate-border {
	display: flex;
	flex-direction: column-reverse;
	border: 2px solid #cccccc;
	box-sizing: border-box;
	background-color: #fff;
}

.candidate-border .image {
	display: none;
}

@media (max-width: 400px) {
.candidates .candidate .info h4 {
font-size: 0.88em;
}
}

.candidates .candidate .idnum-large {
    position: absolute;
    float: left;
    display: block;
    margin-left: 0.75em;
}

.candidates .candidate .info h4 span { text-transform: uppercase; }
.candidates .candidate .info header p {
	padding: 0.5em 0;
	font-size: 0.875em;
	line-height: 1.5;
	letter-spacing: 2px;
	color: #666;
	text-align: center;
}
.candidates .candidate .info .bio-content {
	padding-bottom: 2em;
	overflow: auto;
}

.candidates .candidate .bio-content {
	display: none;
}

.candidates .candidate .info .bio-content h5 {
    font-size: 1em;
    margin: 1em 0 0 0;
    color: #92278F;
    padding-left: 1.3em;
}
.candidates .candidate .info .bio-content p {
	padding: 0.5em 1.5em;
	font-size: 0.875em;
	color: #666;
	line-height: 1.4;
}
.candidates .candidate .info .contact {
	margin: 1.5em 0 0 1.5em;
	margin-bottom: 1.75em;
	line-height: 1.6;
	font-size: 0.75em;
	color: #666;
}
.candidates .candidate .bio-content .contact td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.candidates .candidate .info .contact th {
	padding-right: 2em;
	text-align: left;
	color: #92278F;
}
.candidates .candidate .info .contact a { color: #666; }
.candidates .candidate .info .contact .lastrow th,.candidates .candidate .info .contact .lastrow td { padding-bottom: 1.75em; }
.candidates .candidate .info .bio-cover {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	background: transparent url(../img/bio_hider.png) left bottom repeat-x;
	border-radius: 12px;
}

/* BC 2026 */
.candidates .candidate-border .selector  {
    display: flex;
    flex-direction: column;
}


.candidate.selected .candidate-border {
  background-color: rgba(146, 39, 143, 0.05);
  border-color: #92278F !important;
  border-width: 1px 1px 1px 4px; border-style: solid;
}


/* End BC 2026 */

.candidates .candidate .info .selector {
	position: absolute;
	right: 0;
	top: -350px;
	width: 152px;
	height: 43px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 0.6875em;
	background: transparent url(../img/select_for_bg.png) left bottom no-repeat;
	background-size: cover;
	z-index: 40;
}
.candidates .candidate .info .selector p {
	padding-right: 41px;
	padding-top: 8px;
	color: white;
	text-align: right;
	font-size: 14px;
}
.add-alert, .rem-alert {
	position: absolute;
	top: -504px; /* overridden by jQuery calculation */
	right: 0px;
	width: 104px;
	font-size: 10px;
	font-weight: bold;
	background-color: #92278F;
	color: #fff;
	text-align: right;
    padding-right: 5px;
}
.add-alert p, .rem-alert p {
	margin: 0;
	padding: 0;
	text-align: right;
}
.candidates .candidate .info .select-button {
	position: absolute;
	right: 0.325em;
	top: 6px;
	display: inline-block;
	width: 31px;
	height: 31px;
	background: transparent url(../img/icon-plus-white.png) left top no-repeat;
	background-size: cover;
}
.candidates .candidate .info .select-button.remove { background-image: url(../img/icon-minus.png); }
.candidates .candidate .info .select-button.remove:hover, .candidates .candidate .info .select-button.remove:focus {
	background-image: url(../img/icon-minus.png);
}
.candidates .candidate.w2 .info { display: block; }
.candidates .add-candidate {
	display: block;
	text-decoration: none;
	padding: 5px;
}
.candidates .candidate-main { 	
	width: calc(100% - 2px);
    background-size: 100%;
	position: absolute;
	top: 20px;
	box-sizing: border-box;
	padding: 16px
}
.candidate-main .id, .candidate-main .party {
	font-size: 14px
}
.candidate-main .lastname, .candidate-main .firstname {
	font-size: 20px
}
.candidate-main .lastname {
	font-weight: 600;
}
.candidate-main .party em {
	display: block;
}
.flyout .org em {
	display: block;
}
.candidates button {
	background-color: transparent;	
	border: none;
	border-top: 1px solid #ccc;
	font-size: 14px;
}

.candidates button:active, .candidates button:focus {
	box-shadow: 0 0 0 3px #f5a623 inset;
	outline: none !important;
}
.view-details {
	height: 28px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 14px;
}

.select-button {
	height: 36px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-weight: 600;
}	
.select-button:hover {
	text-decoration: underline;
}
.select-button:active, .select-button:focus,
.view-details.selected + .select-button:hover, .view-details.selected + .select-button:active, .view-details.selected + .select-button:focus,
.select-button.remove,
.view-details.selected + .select-button.remove,
.select-button:hover {
	background-color: #92278F;
	color: #fff;
}


.bio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-bottom: 16px;
}

button.detail-close {
	border: none;
	font-size: 24px;
	position: absolute;
	top: 10px;
	right: 10px;
}

.candidates p {
	position: relative;
	margin: 0;
	padding-left: 0.5em;
}

.candidates-grid {
	padding-left: 4px;
	padding-bottom: 4px;
}

.candidates .candidate .info .bio-content {
	display: none;
}

.bio-title {
	font-size: 16px;
	font-weight: 600;
}
.bio-content {
	position: absolute;
	top: 18px;
	background-color: #FAF5FA;
	height: calc(100% - 85px);
	padding:  16px;
	box-sizing: border-box;
	width: calc(100% - 4px);
	font-size: 14px;
}

.candidate.selected .bio-content {
	width: calc(100% - 5px);
}

.view-details:hover, .candidate-border:hover .bio-content {
	background-color: #FAF5FA;
}
.view-details.selected + .select-button {
	background-color: #FAF5FA;
}
.view-details:hover, .view-details:focus, .view-details.selected {
	background-color: #333;
	color: #fff;
}
.view-details:hover {
	text-decoration: underline;
}
.contact th i {
    margin-right: 10px;
    font-size: 1.25em;
}

.candidates .candidate .info .bio-content a { color: #0279B1; cursor: pointer; }
.candidates .candidate .info .bio-content ol, .candidates .candidate .info .bio-content ul {
	font-size: 0.875em;
	color: #666;
	line-height: 1.4;
}
.image {
	position: relative;
	color: #000;
	overflow: hidden;
	cursor: pointer;
}
.image img {
	-webkit-filter: grayscale(100%) brightness(125%);
	filter: grayscale(100%)  brightness(125%);
	filter: gray; /* IE6-9 */
}
.image.open {
	border-top-left-radius: 12px;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border: solid #ccc;
	border-width: 1px 1px 0px 1px;
}
.image.open img {
	-webkit-filter: none;
	filter: none;
}
    .image.open .cancheck {
        background-image: none;
        cursor: default;
    }
.image p {
	padding-left: 0;
	padding-top: 10px;
	font-size: 18px;
	text-align: center;
	line-height: 1.3;
	cursor: pointer;
	color: #0279B1;
}

.idnum {
    font-size: 14px;
    font-weight: 600;
}

.idnum-large {
   font-size: 0.875em
}



.add-candidate:hover p, .add-candidate:focus p { text-decoration: underline; }
.image p .lastname {
	display: block;
	text-transform: uppercase;
	font-weight: bold;
}
.image p .party {
	display: block;
	font-size: 12px;
}

.candidates .candidate .info .profile-closer {
	display: block;
	position: absolute;
	left: 0em;
	top: -345px;
	width: 46px;
	height: 46px;
	background: transparent url(../img/icon-plus-white-round.png) left top no-repeat;
	background-size: 100%;
	cursor: pointer;
	border:0;
}

@media (min-width: 321px) {
	.image p { font-size: 1em; }
}

@media (min-width: 481px) {
    .reset-all {
        right: 30px;
        font-size: .7em;
    }
	.candidates h3 { font-size: 1.5em; }
	.candidates .candidate .info h4 {
		font-size: 1.44em;
		font-weight: bold;
	}
	.candidates .candidate .info header p { font-size: 1.13em; }
	.candidates .candidate .info header p.pronouns { font-size: 1em; padding-top: 0px; }
	.candidates .candidate .info .bio-content { height: auto; }
	.candidates .candidate .info .bio-content p { font-size: 1em; }
	.candidates .candidate .info .contact { font-size: 0.875em; }
	.candidates .candidate .info .bio-content ol, .candidates .candidate .info .bio-content ul {
		font-size: 1em;
	}
	.image p { font-size: 0.875em; }
}


/* Candidate grid */
.candidates-grid,
.candidates-grid > .grid-sizer,
.candidates-grid > .candidate {
    box-sizing: border-box;
}

.candidates-grid {
    width: 100%;
    padding-left: 4px;
    padding-bottom: 4px;
    overflow: hidden;
}

.candidates-grid > .candidate {
    display: block;
    min-height: 240px;
}


.candidate-border {
	height: 280px
}

.candidate-border:hover, .bio-content:hover, .candidate.selected .bio-content {
	background-color: #FAF5FA;
	box-shadow: 0px 4px 4px 0px #00000040;
}

.candidates .candidate .bio-content .contact td {
    max-width: 140px;
}	

@media (max-width:640px) {
	.candidates .candidate .bio-content .contact td {
		max-width: 100px;
	}
	.bio-title {
		max-width: calc(100% - 32px);
	}
}
.contact {width: 100%;}
.contact th {width: 24px;} 
.contact td {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

/**Ballot number**/
.idnum {
    background-color: #6DC8BF;
	color: #444;
    border-radius: 999px;
    display: block;
    width: fit-content;
    text-align: center;
    padding: 0 10px;
    margin: 0 0 10px 0;
}

/* 3 column grid - tablet */
@media (max-width: 927px) {
	.bio-title {
		font-size: 14px;
	}
    .candidate-border {
        height: 280px;
    }

}
/* 2 column grid - mobile */
@media (max-width: 767px) {
    .candidate-border {
		height: 280px;
		min-width: 160px;
    }
	.bio-content {	
		top: 10px;
		height: calc(100% - 76px);
		width: calc(100% - 5px);
		padding: 8px;
	}

	.candidates .candidate-main { 	
		top: 10px;
		padding: 8px;
	}
}

/* 1 column grid - zoom and small mobile */
@media (max-width: 349px) {
		.candidates .candidate-main { 	
		top: 20px;
		padding: 16px
	}
	.bio-content {
        top: 20px;
        height: calc(100% - 86px);
	}
}


/* fix for sort order */
/*@media (max-width: 639px) {
#step-one .candidates .candidate {
	min-height: 350px !important;
}
}

@media (max-width: 550px) {
#step-one .candidates .candidate {
	min-height: 326px !important;
}
}

@media (max-width: 450px) {
#step-one .candidates .candidate {
	min-height: 284px !important;	
}
}

@media (max-width: 350px) {
#step-one .candidates .candidate {
	min-height: 238px !important;	
}
}*/


@media (min-width: 769px) {
	.reset-all { right: 45px; }
	.candidates h3 { font-size: 1.5em; }
	.candidates h3 span { display: inline; }
	.candidates .candidate.w2 {
		width: 60%;
		margin: 0 20%;
	}
	.candidates .candidate .info .bio-content { height: 225px; }
	.candidates .candidate .info .bio-content p { font-size: 0.875em; }
	.candidates .candidate .info .contact { font-size: 0.75em; }
	.candidates .candidate .info .bio-content ol, .candidates .candidate .info .bio-content ul {
		font-size: 0.875em;
	}
	.image p { font-size: 18px; }
}

@media (min-width: 478px) and (max-width: 583px) {
	.candidates .candidate .info h4 {
		font-size: 1.2em;
	}
	.candidates .candidate .info header p {
		font-size: 1.05em;
	}
}

@media (min-width: 769px) and (max-width: 940px) {
	.candidates .candidate.w2 {
		width: 76%;
		margin: 0 12%;
	}
}

/* *** STEP ONE END				*** */



/* *** STEP TWO START			*** */

section.step-two table { margin-bottom: 10px; width: 100%; }
section.step-two table, section.step-two tr, section.step-two td,section.step-two th {
	border: 1px solid #d9d9d5;
	border-collapse: collapse;
}
section.step-two td,section.step-two th {
	padding: 10px;
	text-align: left;
	vertical-align: top;
}
section.step-two table p, section.step-two table ul, section.step-two table ol {
	padding-top: 0;
	margin-top: 0;
}
.qcol1 { width: 30% !important; font-weight: normal !important; }
.qcol3 { width: 20% !important; text-align: right !important; }
.qrad, .qrad legend {
	border: 2px solid #92278F;
	padding: 5px 10px;
}
.qrad { margin-bottom: 60px; }
.qrad legend {
	margin-bottom: 5px;
	background-color: #92278F;
	color: #fff;
	font-weight: bold;
}
.qrad label { margin-right: 10px; font-size: 1.125em; }

/**social media icons**/
th[scope="row"] i[class*="fa"],
th[scope="row"] i[class*="fa-"] {
	color: #767676;
}

/**social media link colour**/
td > a {
  color: #0279B1;
}

td > a:hover {
  color: #015982;
}

.step-two h3 {
	font-size: 1.25em;
}
.step-two h4 {
	font-size: 1.1em;
}

@media (min-width: 481px) {
	.step-two h3 {
		font-size: 1.5em;
	}
	.step-two h4 {
		font-size: 1.25em;
	}
}


/* *** STEP TWO END				*** */



/* *** STEP THREE START			*** */
section.step-three .wrapper a, .skip-map a {
	color: #0279B1;
}
section.step-three h2 {
/*	remove line under title
    padding-bottom: 1em;
	border-bottom: solid 1px #666; */
}
section.step-three .when,section.step-three .where {
	position: relative;
	padding-bottom: 37px;
}
section.step-three .when h3,section.step-three .where h3 {
	height: 40px;
	padding-left: 50px;
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1.2;
	letter-spacing: 1px;
	/* text-transform: uppercase; */
	color: #333;
	background: transparent url(../img/calendar.png) left top no-repeat;
	background-size: 36px;
}
/*
section.step-three .when h3, section.step-three .where h3 {
	line-height: 40px !important;
}*/
/* fix for centering text */
@media (min-width: 469px) and (max-width: 768px) {
	section.step-three .when h3, section.step-three .where h3 {
		line-height: 40px;
	}
}
@media (min-width: 873px) and (max-width: 1024px) {
	section.step-three .when h3, section.step-three .where h3 {
		line-height: 40px !important;
	}
}
section.step-three .where>div { position: relative; }
section.step-three .where h3 {
	padding-left: 40px;
	background-image: url(../img/pin.png);
	background-size: 26px 36px;
}
#postal-code {
	display: inline-block;
	width: 100%;
	height: 42px;
	/* background: #fff url(../img/search.png) 12px center no-repeat; */
	/* background-size: 16px; */
	border: 2px solid #444;
	padding: 0;
	text-indent: 2.5em;
	border-radius: 0;
}
.postal-code-go {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: -3px;
	display: inline-block;
	width: 64px;
	height: 45px;
	line-height: 45px;
	background-color: #92278F;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
}
.postal-code-go:hover {
	background-color: #333;
}
#postal-code-img {
	height: 20px;
	width: auto;
	position: absolute;
	top: 12px;
	left: 10px;
}
@media screen and (max-width: 450px) {
    #postal-code {
		height: 29px;
    }

	.postal-code-go {
		height: 32px;
		line-height: 32px;
	}

	#postal-code-img {
		top: 6px;
	}
}

.location-map { padding-bottom: 3em; }
#pnlMap {
	clear: both;
	height: 400px;
	margin-bottom: 70px;
}
.gm-style div:first-child div:nth-child(3) div:nth-child(4)>div { border-radius: 10px; }
.gm-style-iw { overflow: visible; }
.gm-style-iw div,.gm-style-iw div div { overflow: visible !important; }
.gm-style-iw-chr { height: 15px; padding: 3px; }
.gm-style-iw-chr button { width: 18px !important; height: 18px !important; }
.gm-style-iw-chr button span{ width: 16px !important; height: 16px !important; margin: 0 !important; }
.gm-style .gm-style-iw-d { padding-right: 10px; }
.gm-style .gm-style-iw-c { padding: 0px 0px 0px 12px !important; }
.locationInfo {
	position: relative;
	color: #3e3e3e;
	overflow: visible;
}
.locationInfo {
	min-width: 175px;
	min-height:55px;
}
.locationInfo>div {
	overflow: visible;
	font-size: 0.75em;
}
.locationInfo>b {
	color: black;
	font-size: 0.875em;
}
.locationInfo div+div { color: #92278F; }
.locationInfo .add-location-note {
	position: absolute;
	right: -31px;
	bottom: -8px;
	background: transparent url(../img/add_location_note.png) right 4px no-repeat;
	color: white;
	overflow: hidden;
	width: 158px;
	height: 41px;
	padding-left: 36px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1;
	padding-top: 8px;
	font-size: 0.875em;
	background-size: 100%;
}
.locationInfo .add-location {
	position: absolute;
	/* right: 5px;
	bottom: 5px; */
	right: 32px;
	bottom: 10px;
	width: 25px;
	height: 25px;
}

.marker-link {
	width: 25px;
	height: 25px;
}

.date-picker {
	width: 100%;
	font-size: 16px;
	height: 46px;	
	padding-right: 200px;
}
@media screen and (max-width: 450px) {
    .date-picker {
        height: 29px;
		padding: 0 0 0 5px;
    }
}
#skipMap a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
#skipMap a:focus {
    position:static;
    width:auto;
    height:auto;
}
.mapLocations table, .mapLocations table tr {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 25px;
}
.mapLocations table thead tr.abb {
	border-bottom: 2px solid #000;
}
.mapLocations th, .mapLocations td {
    text-align: left;
    padding: 8px;
    vertical-align: top;
}
.mapLocations table tr.selectedRow {
    background-color: #ddd;
    border: 2px solid #000;
}
.frow.selectedRow {
    border-top: none;
}

#votRes td > p {
    margin-top: 0;
}

#votRes ul {
    padding: 0 0 0 20px;
    margin: 0;
}

#votRes li {
    padding-bottom: 4px;
}

.mapLocations th {
    background-color: #92278F;
    color: white;
}

@media (max-width: 450px) {
    .mapLocations {
        overflow-x: auto;
    }

    .mapLocations table {
        width: auto;
        min-width: 100%;
    }
} 

@media (min-width: 769px) {
	section.step-three .when,section.step-three .where {
		width: 50%;
		float: left;
		padding-bottom: 37px;
	}
	section.step-three .where h3 {
		line-height: 1.8;
        font-size: 1.5em;
	}
	section.step-three .when h3  {
		line-height: 1.8;
        font-size: 1.5em;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
    section.step-three .when h3, section.step-three .where h3 {
        font-size: 1.17em;
    }
}

.errorWarning::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background: transparent url(../img/icon-note.png) left top no-repeat;
	background-size: cover;
	cursor: pointer;
    margin-right: 10px;
    vertical-align: top;
}

.errorWarning {
margin-bottom: 37px;
}

@media (min-width: 769px) {
    .errorWarning {
        padding-left: 50%;
    }
}

/* *** STEP THREE END			*** */



/* *** STEP FOUR START			*** */

/* Ash */
.step-four .plan-details {
	background-color:#92278F;
	padding: 8px 16px;
}
.step-four .plan-details h3 {
	color: #fff;
	background: transparent url(../img/calendar-white.png) left top no-repeat;
	background-size: 30px;
	height: auto;
	padding-left: 40px;
	line-height: 1.5em;
}
.step-four .details-table th,
.step-four .details-table td {
	color: #fff;
}

.step-four .details-table tr:nth-child(3) th {
	background: transparent url(../img/pin-white.png) left top no-repeat;
	background-size: 15px;
	height: 40px;
	padding-left: 25px;
}

.step-four { position: relative; }
.step-four h3 {
	font-size: 1.25em;
	font-weight: normal;
	text-transform: uppercase;
}

.step-four .plan-summary-question {
	margin-left: -15px;
	font-weight: bold;
	color: #4d4d4d;
}

.plan-final-left {
	/*border-bottom: none;*/
	border: 1px solid #92278F;
	background-color: #92278F10;
	padding: 18px;
}

.step-four h4 {
	font-weight: normal;
}
.light-diagonal {
	height: 12px;
	background: transparent url(../img/light_diagonal.png) left top repeat-x;
}
.plan-candidate {
	margin-bottom: 30px;
}
.plan-candidates-heading { overflow: auto; }
.plan-candidates-heading img { display: none; }
.plan-candidates ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.plan-candidates .bar {
	float: none;
	width: 100%;
}
.plan-candidates h4 {
	margin: 0 0 15px 0;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: normal;
	color: #444;
}
.plan-candidates .category-number {
	display: inline;
	text-transform: lowercase;
}
.plan-candidates ol {
	margin: 0;
	padding: 0;
}
.plan-candidates ol li {
	list-style-type: none;
	display: inline-block;
	margin-right: 10px;
	overflow: visible;
}

/* 136518 */
.plan-candidates ol li a.rbtn {
	color: #767676;
	font-size: 14px;
}

.plan-candidates ol li a.rbtn:hover {
	color: #333;
}

.plan-questions h4 {
	font-size: 1.1em;
}

@media (min-width: 481px) {
	.plan-questions h4 {
		font-size: 1.25em;
	}
}

/* adjustments to candidates  (overrides candidate properties in "SELECTIONS") */
.plan-candidates .candidate-thumb-pic, .plan-candidates .candidate-thumb .photo {
	float: none;
	width: 140px;
	height: 140px;
}

.candidate-thumb .add-select.hidden + .candidate-thumb-inner .photo {	
    border-radius: 100%;	
    border: 2px solid #e6e6e6;	
}	
.plan-candidates .candidate-thumb .add-select.hidden + .candidate-thumb-inner .photo {	
    box-sizing: border-box;	
}	
.plan-candidates .candidate-thumb-pic {	
    background: none;	
}

.plan-candidates div.rbtn {
	width: 200px;
}
.plan-candidates .candidate-thumb .flyout {
	padding: 10px 0 0 0;
}
.plan-candidates .candidate-thumb .flyout p.name, .plan-candidates .candidate-thumb .flyout p.org {
	color: #333;
}
.plan-candidates .candidate-thumb .flyout p.name {
	font-size: 18px;
}
.plan-candidates .candidate-thumb .flyout p.org {
	text-transform: none;
	font-size: 14px;
}

.social-link {
	display: inline-block;
	margin: 5px;
}
.social-icon {
	height: 30px;
	width: auto;
}
.social-icon:hover {
	filter: brightness(0) saturate(100%) invert(19%) sepia(24%) saturate(3550%) hue-rotate(267deg) brightness(95%) contrast(100%);
}

/* end section */
.plan-final {
	padding: 2em 0 3em;
	overflow: auto;
}
.plan-final>div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.plan-final>div>p { color: #666; }
.plan-final-left a {color: #666;}
.plan-final-left { margin-bottom: 20px; }
.plan-final-left ul {
	padding-left: 0;
}
.plan-final-left li {
	display: flex;
	align-items: center;
    list-style-type: none;
    font-size: 0.875em;
    line-height: 2;
    color: #666;
}
.plan-final-left > #checklist-block {
	margin-bottom: 20px;
}
.plan-final-left li .el-icon-ok {
	display: inline-block;
	min-width: 35px;
	height: 35px;
	margin-right: 0.75em;
	background: transparent url(../img/checkmark.png) left top no-repeat;
	background-size: 32px 31px;
}
.plan-final-left .checklist-text{
	font-size: 15px;
	line-height: 18px;
	margin-right: 10px;
}
.plan-final-left .checklist-header {
	font-size: 16px;
	font-weight: bold;
}
.plan-final-right {
	padding-left: 2em;
	/*border-left: solid 1px #e6e6e6;*/
	border: 1px solid gray;
	padding: 15px;
}
.plan-questions li { margin-bottom: 10px; }
.save-options{ padding: 0 30px; }
.save-options ul {
	margin-top: 1em;
	list-style-type: none;
}
.save-options li {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	min-height: 3em;
	padding-top: 0.25em;
	/*font-size: 0.875em;*/
	font-size: 16px;
	color: #4d4d4d;
	line-height: 1.3;
	margin-bottom: 20px;
	padding-bottom: 15px;
}
.save-options span {
	display: inline-block;
	position: absolute;
	top: 0;
	left: -3em;
	width: 33px;
	height: 32px;
	background: transparent url(../img/icon-circle.png) left top no-repeat;
	background-size: cover;
	cursor: pointer;
}
.save-options input[type=email] {
    width: 96%;
    height: 2.5em;
    margin-top: -0.5em;
    background-color: #e6e6e6;
    border: none;
    font-size: 0.75em;
    padding-left: 10px;
}
/* fix for email checkbox */
@media (max-width: 914px) {
	.save-options input[type=email] {
		position: absolute;
		margin-left: 5px;
	}	
	.tcheckbox .email_description {
		margin-bottom:0px;
	}
}

@media (min-width: 1024px) {
	.tcheckbox .email_description {
		margin-bottom: -20px;
	}
}
.details-table th,.details-table td { vertical-align: top; }
.details-table th {
	width: 7em;
	text-align: left;
	font-size: 16px;
	color: #92278F;
}
.details-table th a {
	color:#fff;
	font-weight: 400;
}
.details-table td {
	padding-bottom: 1em;
	/*font-size: 1.5em;*/
}
.tcheckbox input[type="checkbox"] {
	opacity: 0;
	margin-left: -20px;
}
.tcheckbox label::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: -3em;
	width: 33px;
	height: 32px;
	/*background: transparent url(../img/icon-circle-red.png) left top no-repeat;*/
	background: transparent url(../img/icon-square-grey.png) left top no-repeat;
	background-size: cover;
	cursor: pointer;
}
.tcheckbox label::after {
	content: "";
	display: inline-block;
	height: 6px;
	width: 9px;
}
.tcheckbox .email_description {
	font-size: 1em;
	padding-bottom: 10px;
	/*margin-bottom: -20px;*/
	/*margin-top: -20px;*/
}
.tcheckbox label::before, .tcheckbox label::after { position: absolute; }
/*Outer-box*/
.tcheckbox label::before { top: 3px; }
/*Checkmark*/
.tcheckbox label::after {
	left: 4px;
	top: 7px;
}

#email_in {
    max-width: 350px;
	background-color: #fff;
	border: 2px solid #444;
	height: 42px;
	border-radius: 0;
}
@media screen and (max-width: 450px) {
    #email_in {
        max-width: 200px;
		height: 29px;
    }
}

/*Hide the checkmark by default*/
.tcheckbox input[type="checkbox"] + label::after {
	content: none;
}
/*Unhide the checkmark on the checked state*/
.tcheckbox input[type="checkbox"]:checked + label::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 11px;
	left: -2.675em;
	width: 21px;
	height: 16px;
	background: transparent url(../img/icon-check-hollow.png) left top no-repeat;
	background-size: cover;
	cursor: pointer
}
/*Adding focus styles on the outer-box of the fake checkbox*/
.tcheckbox input[type="checkbox"]:focus + label::before {
	outline: 1px solid orange !important;
	box-shadow: 3px 3px orange !important;
	outline-style: auto;
}

#emaildisc {
	width: calc(100% - 30px);
display: flex;	
}

#emaildisc img {
width: 25px; 
height: 25px;
	margin-right: 10px;
}

    @media (min-width: 769px) {
        .step-four h3 {
            font-size: 1.5em;
        }

        .plan-final > div {
            width: 46%;
            float: left;
			margin: 10px;
        }

        .plan-final-left {
            /*border-bottom: none;*/
			border: 1px solid #92278F;
			background-color: #92278F10;
			padding: 18px;
        }

            .plan-final-left li {
                font-size: 1em;
                line-height: 2;
            }
		
		.plan-final-left > #checklist-block {
			margin-bottom: 50px;
		}

        /*.save-options li {
            font-size: 1.14em;
        }*/

        .save-options span {
            left: -2em;
        }
    }

    .lets-do-this {
        display: inline-block;
        background: transparent url(../img/lets_do_this.png) left top no-repeat;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 270px;
        margin: 0 auto;
        padding: 0.75em 1em;
        font-size: 1em;
        color: white;
        text-decoration: none;
        background-size: contain;
        height: 54px;
        letter-spacing: 2px;
    }

        .lets-do-this span {
            display: inline-block;
            background: transparent url(../img/icon-chevron-right-white.png) left top no-repeat;
            background-size: contain;
            vertical-align: middle;
            margin-left: 0.5em;
            width: 30px;
            height: 30px;
			top: 0.5em;
        }

        .lets-do-this:hover {
            background: transparent url(../img/lets-do-this-hover.png) left top no-repeat;
            color: #92278F;
            background-size: contain;
            height: 54px
        }

            .lets-do-this:hover span {
                background: transparent url(../img/icon-chevron-right.png) left top no-repeat;
                background-size: 23px 23px;
            }

    @media (min-width: 481px) {
        .lets-do-this {
            background: transparent url(../img/lets_do_this.png) left top no-repeat;
            display: inline-block;
            margin-bottom: 2em;
            padding: 0.6em 0 0 1em;
            font-size: 1em;
            letter-spacing: 1px;
            width: 240px;
            height: 51px;
			background-size: 240px 51px;
        }

            .lets-do-this:hover {
                background: transparent url(../img/lets-do-this-hover.png) left top no-repeat;
                color: #92278F;
                height: 51px;
				background-size: 240px 51px;
            }

                .lets-do-this span, .lets-do-this:hover span {
                    margin-left: 0.5em;
				width: 30px;
				height: 30px;
				background-size: 30px 30px;
                }
    }

    @media (min-width: 769px) {
        	.lets-do-this {
				position: absolute;
				right: 0;
				padding: 0.75em 0 0 1em;
				background: transparent url(../img/lets_do_this.png) right top no-repeat;
				background-size: 316px 64px; 
				font-size: 1.5em;
				text-align: left;
				height: 64px;
				width: 316px;        	
			}

            .lets-do-this:hover {
                background: transparent url(../img/lets-do-this-hover.png) right top no-repeat;
                color: #92278F;
				background-size: 316px 64px;   
				height: 64px;
				width: 316px;
			}

            .lets-do-this span {
                margin-left: 0.5em;
                width: 30px;
                height: 30px;
            }
    }

    .social h2 {
        color: #92278F;
        text-align: center;
    }

    .social p, .social ul {
        color: #666;
    }

        .social p.voting-info {
            width: 80%;
            margin: 0 auto 3em;
            color: #222;
			text-align: center;
        }

        .social p.disclaimer {
            margin-top: 0;
            text-transform: uppercase;
        }

    .social .social-bottom {
        display: table;
    }

    .social .social-left, .social .social-right {
        display: table-cell;
        width: 50%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 2em;
    }

        .social .social-left h3, .social .social-right h3 {
            text-transform: uppercase;
            font-weight: normal;
            font-size: 1.5em;
        }

    .social .social-right {
        border-left: solid 1px #4d4d4d;
    }

        .social .social-right h3 {
            margin-bottom: 0.25em;
        }

    .social-left a {
        color: #0279b1;
    }

        .social-left a:hover {
            text-decoration: underline;
        }

#warningMsg {
    color: #92278F;
    border: 2px solid #92278F;
    border-radius: 5px;
    padding: 5px;
    width: 80%;
}

    @media screen and (max-width: 480px) {
        .social .social-bottom {
            display: block;
        }

        .social .social-left, .social .social-right {
            display: inline-block;
            width: 100%;
        }

		.next-step {
			margin-bottom: 4.5em;
			right: auto;
		}

		.back-to-top-link {
			margin-bottom: 3.5em;
		}

        /*.social .social-right, .plan-final .plan-final-right {
            border-left: none;
        }*/
    }

    /* *** STEP FOUR END			*** */
    @media (min-width: 1024px) {
        .progress {
            right: -605px;
        }

        nav {
            left: 249px;
        }
    }

    @media (min-width: 1200px) {
        nav {
            width: 390px;
            left: 348px;
        }

        .progress {
            right: -703px;
        }

        .reset-all {
            right: -60px;
        }
    }
    /* *** PRINT VIEW START			*** */

    .print-view {
        display: none;
    }
    
    @media print {
        @page {
            margin: 0.5cm;
        }

        .inner-wrap {
            display: none;
        }

        .print-view {
            display: block;
        }

        .pBreak {
            page-break-before: always;
        }

        .print-h1 {
            border: 1px solid #fff;
            ;
        }

            .print-h1 img {
                display: block;
                float: left;
                margin-top: 15px;
                margin-right: 20px;
            }

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 20px;
        }

        h3 {
            font-size: 18px;
        }

        p, table, tr, th, td {
            font-size: 15px;
        }

	p span.fname-print {
	    font-size: 14px;
        }

        .party-print {
            font-size: 11px;
        }

        .candidate-print p {
            margin-left: 20px;
            line-height: 14px;
        }

		.candidate-print .party-print em {
			display: block;
		}

        h1, h2, .lname-print, .party-print, .pqp h3 {
            text-transform: uppercase;
        }

        .candidate-print.chosen-print {
            font-weight: bold;
        }

        .count-print {
            font-weight: normal;
        }
        
        h2.pBreak {
           margin-top: 5px;
           margin-bottom: 5px;
        }

        h3 {
            margin-top: 10px;
            margin-bottom: 8px;
        }

        p {
            margin-top: 0px;
            margin-bottom: 8px;
        }

        th {
            white-space: nowrap;
            text-align: left;
            padding-right: 20px;
            padding-bottom: 10px;
        }

        td {
            padding-bottom: 10px;
        }

        .candidates-print {
            overflow: hidden;
        }

        /*.col-print {
            width: 23.5%;
            float: left;
        }*/

        .candidates-print .col-print:nth-of-type(1), .candidates-print .col-print:nth-of-type(2), .candidates-print .col-print:nth-of-type(3) {
            border-right: 1px solid;
        }

        .candidate-print img {
            display: block;
            float: left;
            width: 15px;
        }
        
        .candidates-print .col-print:has(.chosen-print) > :last-child {
		    display: none;
	}

        hr {
            border-top: 1px solid #000;
        }

            hr.big {
                border-top: 2px solid #000;
            }
    }

	/* OCT 20, 2022 */
	/* Backlogged - hide all candidates except selected ones */
	/* .candidate-print {
		display: none;
	}

	.chosen-print {
		display: block;
	} */

    /* *** PRINT VIEW END			*** */

    /* *** SCREEN READER 			*** */
.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    color: transparent;
}
    /* *** SCREEN READER END			*** */

    /* ---------- progress / nav ---------- */

    @media (min-width: 769px) {
        nav {
            left: 100px;
        }
    }

    @media (min-width: 900px) and (max-width: 1023px) {
        nav {
            left: 175px;
        }

        .progress {
            right: -525px;
        }
    }

    @media (min-width: 1024px) {
        nav {
            left: 250px;
        }

        #warningMsg {
            width: calc(100% - 30px);
        }
    }

    @media (min-width: 1024px) {
        nav {
            left: 250px;
        }
    }

    @media (min-width: 1200px) {
        nav {
            left: 350px;
        }
    }

    @media (max-width: 1024px) {
        /* Customize the scrolling bar on iOS */
        ::-webkit-scrollbar {
            width: 3px;
            height: 10px;
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #C3C3C3;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,.5);
			box-shadow: inset 0 0 1px rgba(255,255,255,.5);
        }
    }

