/* 

09/2020
If you are reading this, you must be curious about how
we coded this site. If you like to code and know CraftCMS
then you should get in touch: careers@sparkadvocacy.ca

*/

/* General Definitions */
	html { font-size: 62.5%; } /* =10px */
	body,input,li,p,label,textarea,button { font-size: 1.8rem } /* =18px */
	html,body {
		padding: 0;
		margin: 0;
	}
	body {
		overflow-x: hidden;
	}
	a {
		color: var(--var-blue-dark);
	}
	a:hover,
	a:focus,
	a.active {
		color: var(--var-blue);
		text-decoration: none;
	}
	img {
		width: 100%;
		height: auto;
	}
	.shadow {
		box-shadow: var(--var-shadow) !important;
	}
	video {
		width: 100%;
		display: block;
	}
	/* Remove the HTML5 shadow overlay in webkit */
	video::-webkit-media-controls-panel {
		background-image: linear-gradient(transparent, transparent) !important; //Transparent for your case
	}
	.col-inner-wrapper {
		width: 100%;
	}

/* Navigation */
	.nav {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.nav a {
		display: block;
	}


/* Navigation - Toggle */
	.nav-toggle {
		width: 40px;
		height: 40px;
		padding-top: 18px;
		transition: var(--var-transition);
	}
	.nav-toggle div {
		width: 40px;
		height: 5px;
		position: absolute;
		background: var(--var-blue-dark);
		transform-origin: center center;
		transition: var(--var-transition);
	}
	.nav-toggle div.top {
		transform: translateY(-10px);
	}
	.nav-toggle div.bottom {
		transform: translateY(10px);
	}
	/* Open State */
	.open .nav-toggle {
		transform: rotate(90deg);
	}
	.open .nav-toggle div {
		background: var(--var-white);
	}
	.open .nav-toggle div {
		width: 40px;
	}


/* Breadcrumbs */
	.home .breadcrumbs {
		display: none;
	}
	.breadcrumbs {
		position: absolute;
		top: 120px;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
	}
	.breadcrumbs .divider {
		margin: 0 10px;
		height: 20px;
		border-left: 1px solid;
		opacity: .6;
		transform: rotate(15deg);
	}
	.breadcrumbs li {
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1.3rem;
	}



/* Utility Classes */
	.shadow-box {
		background: #fff;
		padding: 40px;
		box-shadow: var(--var-shadow);
	}
	.block {
		/* Set the starting position and opacity for our custom scroll reveal */
		opacity: 0;
		transform: translateY(150px);
	}
	.image.circle img {
		border-radius: 50%;
	}

	
/* SiteWrapper */
	.site-wrapper {
	}
	.open .site-wrapper {
		pointer-events: none;
	}


	/* Branding */
	.brand {
		display:block;
		width: 200px;
	}
	/* .logo {
		transition: var(--var-transition);
		transform-origin: left center;
	}
	.open .logo .advocacy {
		fill: #fff;
	} */


/* Members */
.members {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.member {
	display: block;
}


	  
/* Custom Content */
.pagehead {
	margin-top: 100px;
}
.home .pagehead {
	*min-height: 80vh;
}
.pagehead > div {
	/* display: flex;
	align-items: center; */
}

.four-issues {
	display: grid;
	grid-gap: 20px;
	position: relative;
}
.four-issues > div {
	padding: 40px;
	height: 100%;
	background: var(--var-white);
	box-shadow: var(--var-shadow);
}
.four-issues .box1 {
}
.four-issues .box2 {
}
.four-issues .box3 {
}
.four-issues .box4 {
}


/* Release Page */
.release-page {
	margin-top: 100px;
}

/* Sidebar */
.sidebar * {
}


/* BLOCKS */
.code {
}
.code .twitter-tweet {
	margin-left: auto;
	margin-right: auto;
}


/* News Items */
.news {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.news li {
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	padding: 50px;
	text-align: center;
	align-items: center;
}
.not-home .news li {
	padding: 30px;
	margin-bottom: 20px;
}
.news a {
	margin-bottom: 20px;
}
.news h2 {
	font-size: 2.8rem;
	width: 100%;
	text-align: center;
}
.news li p {
	width: 100%;
	text-transform: uppercase;
	font-size: 1.2rem;
}
	
	
/* Forms */
	.select-css {
		color: var(--var-blue-dark);
		display: block;
		line-height: normal;
		/* color: var(--var-white); */
		padding: 10px 15px;
		width: 100%;
		max-width: 100%;
		margin: 0;
		border: none;
		border-left: 2px solid var(--var-blue-dark);
		box-shadow: none;
		border-radius: 0;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background-image: url('/libraries/fa/svgs/regular/chevron-down.svg');
		background-repeat: no-repeat, repeat;
		/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
		background-position: right .7em top 50%, 0 0;
		/* icon size, then gradient */
		background-size: .65em auto;
	}
	/* Hide arrow icon in IE browsers */
	.select-css::-ms-expand {
		display: none;
	}
	/* Focus style */
	.select-css:focus {
		outline: none;
	}
	/* Set options to normal weight */
	.select-css option {
		font-weight:normal;
	}
	/* Disabled styles */
	.select-css:disabled, .select-css[aria-disabled=true] {
		color: graytext;
		background-image: url('/libraries/fa/svg/regular/chevron-down.svg');
	}
	.select-css:disabled:hover, .select-css[aria-disabled=true] {
	}
	.g-recaptcha {
		display: none !important;
	}
	.ctct-form-success {
    	margin: 20px;
        border-radius: 10px;
        color: var(--var-blue-dark) !important;
        padding: 20px;
        background: #fff;
        box-shadow: var(--var-shadow);
	}