/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #004C81;
    text-shadow: none;
}

::selection {
    background: #004C81;
    text-shadow: none;
}

/* A better looking default horizontal rule */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ddd;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* ====== GENERAL AND SHARED STYLES ====== */

html {
  min-height: 100%;
}

body, html {
	-webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    margin: 0 auto;
    color: #333;
    background: white;
	line-height: 1.25;
	scroll-snap-type: y mandatory;
	
	/* Attempt at type standardisation */
	-moz-font-feature-settings:"liga" 1; 
    -ms-font-feature-settings:"liga" 1; 
    -o-font-feature-settings:"liga" 1; 
    -webkit-font-feature-settings:"liga" 1; 
	-webkit-font-feature-settings:"kern" 1; 
    font-feature-settings:"liga" 1;
	text-rendering: optimizeLegibility!important;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased!important;
	-moz-osx-font-smoothing: grayscale!important;
	
	 overflow-y: scroll;
    -moz-font-feature-settings: "ss01";
    -ms-font-feature-settings: "ss01";
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
	
    -webkit-font-variant-ligatures: common-ligatures;
    -moz-font-variant-ligatures: common-ligatures;
    font-variant-ligatures: common-ligatures;
    -webkit-font-kerning: normal;
    -moz-font-kerning: normal;
    font-kerning: normal;	
	
	/* Disabled proportional numbering
	font-variant-numeric: proportional-nums;
  	-moz-font-feature-settings: "pnum";
  	-webkit-font-feature-settings: "pnum";
  	font-feature-settings: "pnum"; */
}

body {
	font-family: 'GillSansNova-Book', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1.15em;
	overflow: hidden!important;
}

section {
	padding-bottom: 8em;
	scroll-snap-align: start;
}

/* IE hack for correct SVGs */
img[src$=".svg"] {width: 100%;}

/* Smaller text */
small,
figcaption,
.stats,
.big-numbers,
.extra-big-numbers,
#breadcrumb a,
.last-changed {
	font-size: .9em!important;
	letter-spacing: .025em;
}

figcaption {
	max-width: 24em;
}

main {
	/* Force footer to bottom of window*/
	min-height: calc(100vh - 30em);
	
	/* Clear header background image */
	position: relative;
	z-index: 1;
}

p, ol, ul {
	margin-bottom: 1.2em;
}

main p,
main ul {
	max-width: 32em;
}

main h2,
main h3 {
	max-width: 20em;
}

abbr {
    -moz-font-feature-settings:"smcp" 1, "c2sc" 1; 
    -ms-font-feature-settings:"smcp" 1, "c2sc" 1; 
    -o-font-feature-settings:"smcp" 1, "c2sc" 1; 
    -webkit-font-feature-settings:"smcp" 1, "c2sc" 1; 
    font-feature-settings:"smcp" 1, "c2sc" 1;
    letter-spacing: .1em;
}

i {
    -moz-font-feature-settings: "ital" 1;
    -ms-font-feature-settings: "ital" 1;
    -o-font-feature-settings: "ital" 1;
    -webkit-font-feature-settings: "ital" 1;
}

strong {
	font-family: 'GillSansNova-Semibold', sans-serif;
	font-weight: normal;
	font-style: normal;
}

.container {
    padding-left: 1em;
	padding-right: 1em;
	margin: 0 auto;
}

.fixedPosition {
	position: fixed;
}


/* --- Links --- */

a, a:link, a:hover {
	color: #004C81;
}

a:visited {
	color: #004d84;
}

a:active {
    background-color: #ffbf47;
	outline: .2em solid #ffbf47;
	text-decoration-thickness: .2em;
}

/* Don't include top navigation */
main a:active,
footer a:active {
	color: #333!important;
}

a:link:focus,
a:focus {
    outline: .2em solid #ffbf47;
}


/* --- Lists --- */

ul {
	padding-left: 0
}

ul > li > ul {
	margin-top: .5em;
}

ol {
	padding-left: 1em;
}

/* Reset for navigation */
nav#local ul > li > ul {
	margin-top: 0!important;
	padding-left: 0!important;
}

li {
	margin-left: 1em;
	margin-bottom: .4em;
}


/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
	font-family: 'GillSansNova-Semibold', sans-serif;
	font-weight: normal;
	font-weight: 400;
	font-style: normal;
	color: #333;
}

h1 {
    font-size: 2em;
    letter-spacing: -.015em;
    margin: 0 0 1em -.03em;
	line-height: 1;
}

h2,
.priority h3 {
    font-size: 2em;	
    letter-spacing: -.015em;
    margin: 1.5em 0 1em -.02em;
	line-height: 1.2;
	max-width: 20em;
}

section h2:first-of-type {
    margin-top: 0;
}

h3,
.priority h4,
#app-promo h2,
#updates-promo h2 {
	font-size: 1.5em;
	letter-spacing: -.01em;
    margin: 1.5em 0 .5em 0;
	line-height: 1.2;
}

h4,
.priority h5,
#priorities h3,
#updates-promo h3 {
	font-size: 1.3em;
	letter-spacing: 0;
    margin: 1.5em 0 0 0;
	line-height: 1.2;
	max-width: 20em;
}

h5,
.priority h6 {
	font-size: 1.1em;
	letter-spacing: 0;
    margin: 1.5em 0 0 0;
	line-height: 1.2;
	max-width: 20em;
}


/* --- Selection colour --- */

::-moz-selection {
    color: white;
    background: #004C81;
}

::selection {
    color: white;
	background: #004C81;
}


/* --- Stand first and pullouts --- */

.stand-first {
	font-size: 1.2em;
	line-height: 1.2;
	max-width: 24em;
}

.pullout {
	display: block;
    font-size: 1.2em;
    padding: .5em .6em .6em;
    margin: 1.3em 1em 1.5em 0;
    border-left: .15em solid #333;
    color: #333;
    max-width: 22em;
}

.pullout blockquote {
	margin: 0;
}


/* --- Big hero images --- */

.hero {
	max-width: 100%;
	margin-bottom: 1.85em;
	height: 66vw;
	max-height: 28em; 
	overflow: hidden;
	z-index: 100; 
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.priority .hero {
	 margin-bottom: 0;
}

#vision-values .hero {
	background-image: url("../img/crops.jpg");
}

#plans .hero {
	background-image: url("../img/hero.jpg");
}

#priorities .hero {
	background-image: url("../img/cranbrook-park.jpg");
}

#priority-one .hero {
	background-image: url("../img/minerva-redhayes.jpg");
}

#priority-two .hero {
	background-image: url("../img/great-trees.jpg");
}

#priority-three .hero {
	background-image: url("../img/folk-festival.jpg");
}

#financial-stability .hero {	
	margin-top: 6em;	
	background-image: url("../img/electric-van.jpg");
}

#about .hero {
	background-image: url("../img/staff.jpg");
}


/* --- Lists with big numbers --- */

ul.extra-big-numbers {
	margin: 1em 0 1em!important;
}

ul.big-numbers:nth-of-type(2n) {
    padding: .8em 0 0 0!important;
	border-top: .15em solid #555;
	margin-bottom: 3em;
}

ul.big-numbers li span,
ul.extra-big-numbers span,
ul.extra-big-numbers li {
	font-family: 'GillSansNova-Semibold', sans-serif;
}

ul.big-numbers li span,
ul.extra-big-numbers span {
    display: block;
    line-height: 1;
}

ul.big-numbers li span {
	font-size: 2em;
    letter-spacing: -.03em;
    line-height: 1;
	margin-left: -.02em
}

ul.extra-big-numbers li {
	font-size: 1.15em;
	padding: 4.3em 0 0 0!important;
	background-size: 4em 4em!important;
}

ul.extra-big-numbers li span {
	font-size: 3em;
    letter-spacing: -.03em;
    line-height: .9;
	margin-left: -.05em
}

/* --- Lists with stats --- */

ul.stats {
	display: flex;
	display: -webkit-flex; 
	flex-wrap: wrap;
	margin: 2em 0 1em;
	padding: 0;	
	max-width: 60em;
	list-style: none;
}

.stats li {
	width: 8em;
	flex-direction: column;	
	-webkit-flex-direction: column; 
	margin: 0 2em 1.4em 0;
	padding: 5em 0 0 0;
	list-style-type: none;
	line-height: 1.25;
	background-size: 5em 5em;
	background-repeat: no-repeat;
}


/* Graphics for stats */

.stats > li {
	background-repeat: no-repeat!important;
	/*background: cover!important;	*/
	background-size: 5em 5em;
}

.stats > .bin {
	background-image: url(../img/graphics/bins.svg);
	background-position: 0 .7em;	
}

.stats > .homes {
	background-image: url(../img/graphics/homes.svg);
	background-position: 0 1.3em;	
}

.stats > .play-areas {
	background-image: url(../img/graphics/play-areas.svg);
	background-position: 0 0;	
}

.stats > .science-park {
	background-image: url(../img/graphics/science-park.svg);
	background-position: 0 .4em;	
}

.stats > .schools {
	background-image: url(../img/graphics/school.svg);
	background-position: 0 1.4em;	
}

.stats > .repairs {
	background-image: url(../img/graphics/repairs.svg);
	background-position: 0 1.1em;	
}

.stats > .investment {
	background-image: url("../img/graphics/investment.svg");
	background-position: 0 1.4em;	
}

.stats > .transport {
	background-image: url(../img/graphics/transport.svg);
	background-position: 0 2.5em;	
}

.stats > .household-waste {
	background-image: url(../img/graphics/household-waste.svg);
	background-position: 0 1em;	
}

.stats > .green-waste{
	background-image: url(../img/graphics/green-waste.svg);
	background-position: 0 .2em;	
}

.stats > .aonb {
	background-image: url(../img/graphics/aonb.svg);
	background-position: 0 .6em;	
}

.stats > .award {
	background-image: url(../img/graphics/award.svg);
	background-position: 0 .6em;	
}

.stats > .co2 {
	background-image: url(../img/graphics/co2.svg);
	background-position: 0 1.1em;	
}

.stats > .homes-built {
	background-image: url(../img/graphics/homes-built.svg);
	background-position: 0 1.6em;	
}

.stats > .homes-affordable {
	background-image: url(../img/graphics/homes-affordable.svg);
	background-position: 0 1.2em;	
}

.stats > .homes-owner{
	background-image: url(../img/graphics/homes-owner.svg);
	background-position: 0 1.3em;	
}

.stats > .homes-average-price {
	background-image: url(../img/graphics/homes-price.svg);
	background-position: 0 1.2em;	
}

.stats > .planning{
	background-image: url(../img/graphics/planning-applications.svg);
	background-position: 0 .5em;	
}

.stats > .safe{
	background-image: url(../img/graphics/safe-district.svg);
	background-position: 0 .9em;	
}

.stats > .businesses{
	background-image: url(../img/graphics/businesses.svg);
	background-position: 0 1.4em;	
}

.stats > .business-closure-rate{
	background-image: url(../img/graphics/business-closure-rate.svg);
	background-position: 0 1.1em;	
}

.stats > .staff{
	background-image: url(../img/graphics/staff.svg);
	background-position: 0 1.75em;	
}

.stats > .gcse{
	background-image: url(../img/graphics/gcse.svg);
	background-position: 0 1.4em;	
}

.stats > .degrees{
	background-image: url(../img/graphics/degrees.svg);
	background-position: 0 1.4em;	
}

.stats > .invoices-paid{
	background-image: url(../img/graphics/invoices-paid.svg);
	background-position: 0 1.1em;	
}

.stats > .foi{
	background-image: url(../img/graphics/foi.svg);
	background-position: 0 1.5em;	
}

.stats > .website-visits{
	background-image: url(../img/graphics/website-visits.svg);
	background-position: 0 3.1em;	
}

.stats > .app-downloads{
	background-image: url(../img/graphics/app-downloads.svg);
	background-position: 0 .8em;	
}

.stats > .councillors{
	background-image: url(../img/graphics/councillors.svg);
	background-position: 0 .4em;	
}

.stats > .wards{
	background-image: url(../img/graphics/wards.svg);
	background-position: 0 2em;	
}

.stats > .parishes {
	background-image: url(../img/graphics/parishes.svg);
	background-position: 0 1.7em;	
}

.stats > .iip{
	background-image: url(../img/graphics/iip.svg);
	background-position: 0 .9em;	
}

.stats > .csc-calls{
	background-image: url(../img/graphics/csc-calls.svg);
	background-position: 0 1.5em;	
}

.stats > .parking{
	background-image: url(../img/graphics/parking.svg);
	background-position: 0 1.7em;	
}

.stats > .food-hygiene{
	background-image: url(../img/graphics/food-hygiene.svg);
	background-position: 0 1.2em;	
}

.stats > .pest-control{
	background-image: url(../img/graphics/pest-control.svg);
	background-position: 0 2.5em;	
}

.stats > .families-housed{
	background-image: url(../img/graphics/families-housed.svg);
	background-position: 0 .8em;	
}


/* --- Images --- */

.inset {
	padding: 0;
	margin: 2.5em 0;
	max-width: 25em;
}

.inset img {
	object-fit: contain;
  	width: 100%;
	height: 100%;
}

.inset figcaption {
		margin-top: .8em;
}


/* ====== HEADER ====== */

header{
	margin-bottom: 8em;
}

header h1 {
	color: white!important;
	line-height: 1.1;
	margin: 1em 0 2em 0;
}

header h1 span {
	top: -.07em;
    position: relative;
}

#header-masthead {
	display: block;
	background-color: #366170;
	padding: 1em 0 10em;
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-image: url("../img/masthead-exmouth-beach.jpg");
}

.last-changed {
	font-size: 1.2em;
	color: white;
	margin: 0;
}


/* --- 'About us' preview --- */

#about-preview {
	background: #dedede;
	padding: 1.2em 0 2em;
}

#about-preview h2 {
	font-size: 1.4em;
	margin: 0 0 1.4em 0;
	max-width: 24em;
}

#about-preview p {
	max-width: 22em;
}


/* --- Navigation --- */

nav#contents a,
nav#contents a:link,
nav#contents a:visited,
nav#sticky-contents a,
nav#sticky-contents a:link,
nav#sticky-contents a:visited {
	color: #004C81;
	text-decoration: none;
}

nav#contents a:hover,
nav#sticky-contents a:hover {
	text-decoration: underline;
}
	
nav#contents,
nav#sticky-contents {
	margin-bottom: 4.5em;
}

nav#contents h2,
nav#sticky-contents h2 {
	font-size: 1.2em;
	padding-top: .2em;
	margin: 0 0 1em!important;
}

nav#contents ul,
nav#sticky-contents ul {
	margin: 0;
	list-style: none;
}

nav#contents ul li,
nav#sticky-contents ul li {
    position: relative;
	margin-bottom: .6em;

	/* Don't hang list */
	margin-left: 1em;
}

.embedded-list:before {
	display: none;
}

nav#contents ul li:before,
nav#sticky-contents ul li:before,
li.embedded-list > div > ul > li:before {
   content: '';
   position: absolute;
   border-right:2px solid #888;
   border-bottom:2px solid #888;
   width: .6em;
   height: .6em;
   top: calc(.9em - .2em);
   left: -1.3em;
   transform: translateY(-50%) rotate(-45deg);
}

/* Override to compensate for link padding*/
nav#sticky-contents ul li:before {
    top: calc(1.1em - .2em);
    left: -1.05em;
}

nav#contents div,
nav#sticky-contents div {
	padding: 0;
}

/* Remove by default */
#sticky-contents {
	display: none;
}
	

/* --- Logo --- */

.home-logo {
	display: block;
	padding: 0;
	margin-bottom: 2.5em;
	width: 6em;
	height: 5.2em;
}

.home-logo svg {
	width:100%;
}

.home-logo a,
.home-logo svg {
	padding: 0;
	margin: 0;
}


/* --- Breadcrumb --- */

#breadcrumb {
	padding: .1em .4em .5em .7em;
    background: #366170;
    display: inline-block;
}

#breadcrumb li,
#breadcrumb a,
#breadcrumb a:link,
#breadcrumb a:visited {
	color: white;
}

#breadcrumb h2 {
	margin: 0;
	font-size: 1em;
}

#breadcrumb ol {
	margin: 0;
	padding: 0;
}

#breadcrumb li {
	display: inline-block;
	margin: 0 .5em 0 0;
}

#breadcrumb .chevron::before {
	content: "\2039";
	font-family: 'GillSansNova-Semibold', sans-serif;
	font-size: 1.4em;	
	width: .5em;
}

#breadcrumb a:active {
    color: #333;
}


/* --- Intro --- */

#intro {
	background: #366170;
    margin: -6em 0 3em;
    padding: .2em 4em 3em 1em;
	width: fit-content;
    z-index: 100;
}

#intro .stand-first,
#intro .stand-first a,
#intro .stand-first a:link,
#intro .stand-first a:visited {
	color: white;
}

#intro .stand-first a:active {
    color: #333;
}


/* ====== FOOTER ====== */

footer {
	position: relative;
    padding-top: 2em;
	padding-bottom: 3.5em;
    background: #ccc;
	border-top: .15em solid white;
}

footer, 
footer a, 
footer a:link, 
footer a:visited,
footer a:hover {
	color: #333!important;
}
	
footer p {
	padding-right: 3em;
	max-width: 30em;
}

footer nav#home {
	margin-bottom: 6.5em;
}

footer .tagline {
	font-family: 'GillSansNova-Semibold', sans-serif;
	font-size: 1.25em;
    color: #555;
}

footer .home-logo {
	width: 4em;
	height: 3.46em;
	margin-bottom: 1em;
}


/* --- Top button --- */

#topBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border: none;
    outline: none;
    padding: .8em 0 1.1em 0;
    z-index: 10;
	border-top: .15em solid white;
	background: #f3f2f1!important;
	margin: 0 auto;
	/*Hide by default*/
	display: none;
}

#topBtn a,
#topBtn a:link,
#topBtn a:visited {
	color: #004C81;
	font-size: 1em;
	text-decoration: none;
}

#topBtn a:hover {
	text-decoration: underline;
}


/* --- Social media --- */

#social-channels {
	display: block;
	margin: .8em 0 0 0;
	padding: 0;
}

#social-channels li{
	display: block;
	list-style: none;
	vertical-align: middle;
	position: relative;
	margin: 0 0 .2em 0;
	padding: 0;
}

#social-channels li a{
	display: block;
    padding: .2em 0 0 2em;
    background-position: 0 0;
    background-size: 1.6em 1.6em;
    background-repeat: no-repeat!important;
}

#social-channels li:nth-child(1) a{
    background-image: url("../img/facebook.svg");
	width: 2.5em;
	height: 2em;
}

#social-channels li:nth-child(2) a{
    background-image: url("../img/twitter.svg");
	width: 1.2em;
	height: 2.4em;
}


/* --- Promos --- */

#app-promo,
#updates-promo {
	display: block;
}

#app-promo {
	max-width: 34em;
	padding: 1em 1em 1.5em;
	margin: 0 0 3em;
	background: #CD1719;
}

#app-promo,
#app-promo a,
#app-promo a:link,
#app-promo a:visited,
#app-promo h2 {
	color: white!important;
}

#app-promo h2,
#updates-promo h2{
	margin-top: 0;
	max-width: 18em;
}

#hand-with-phone {
	display: block;
    margin-top: -4em;
	margin-left: -1em;
    width: 10em;
    height: 10em;
    background: url(../img/app.png) no-repeat;
    background-size: 10em 10em;
    background-position: 0 0;
}

#updates-promo {
	max-width: 34em;
	padding: 1.5em 1em 1.5em;
	background: white;
}


/* ====== MESSAGE FROM THE LEADER ====== */

/* Adjust spacing from clearfix */
#message-leader {
    margin: 0 0 0;
}

#byline {
	margin: 0 0 2em;
}

#byline figure {
	margin: 0;
	padding: 0;
}

#byline figure img {
	width: 6em;
    height: 9em;	
	margin-bottom:.5em;
}

#byline figcaption {
	line-height: 1.2;
}

#byline figcaption span {
	display: block;
	font-family: 'GillSansNova-Semibold', sans-serif;
}


/* ====== PLANS ====== */
	
#plans h3 {
	margin-top: 3em;
}

#plan-chart {
	margin-top: 3em;
}

#plan-chart h4 {
	/*border-top: .1em solid;*/
    margin-bottom: 1.25em;
	max-width: 26.8em;
    padding-top: 1em;
    background: white;
}

#plan-chart ol {
	display: block;
	margin: 0;
	padding: 0;
}

#plan-chart li {
	display: inline-flex;
	width: 11em;
	height: 5.6em;
	z-index: 100;	
	word-wrap: break-word;
	line-height: 1.2;
	margin: 0 1.6em 2em 0;
	padding: 5.5em .8em 1.8em;
	font-size: .85em;
	letter-spacing: .02em;
	color: white;
	background-size: 5em 5em;
	background-repeat: no-repeat;
}

#plan-chart a,
#plan-chart a:link,
#plan-chart a:visited {
	color: white;
}

#plan-chart li:hover {
	-webkit-transition: all 200ms ease-in; 
    -ms-transition: all 200ms ease-in;    
    -moz-transition: all 200ms ease-in;    
    transition: all 200ms ease-in; 
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);   
    -moz-transform: scale(1.08);
    transform: scale(1.08);
	box-shadow: 0em .4em .6em rgba(0,0,0,0.1);
}



/* --- Chart colours --- */

#plan-chart ol:nth-child(1) li {
	background-color: #9A1917;
}

#plan-chart ol:nth-child(3) li {
	background-color: #004C81;
}

#plan-chart ol:nth-child(5) li {
	background-color: #457A2E;
}

#plan-chart ol:nth-child(6) li {
	background-color: #457A2E;
}

	
/* --- Chart graphics ---*/

#plan-chart > ol > .staff,
#plan-chart > ol > li > ol > .staff {
	background-image: url(../img/graphics/staff-rev.svg);
	background-position: .8em 2.45em;	
}

#plan-chart > ol > .document,
#plan-chart > ol > li > ol > .document{
	background-image: url(../img/graphics/document-rev.svg);
	background-position: .8em 1.75em;	
}

#plan-chart > ol > .councillors,
#plan-chart > ol > li > ol > .councillors{
	background-image: url(../img/graphics/councillors-rev.svg);
	background-position: .7em .7em;	
}


/* --- Chart heading colours --- */

#plan-chart h4:nth-of-type(1) {
	color: #004C81;
	border-color: #004C81;
}

#plan-chart h4:nth-of-type(2) {
	color: #457A2E;
	border-color: #457A2E;
}


/* --- Chart keylines --- */

#plan-chart h4::before,
#plan-chart ol:nth-child(7)::before,
#plan-chart > ol:nth-child(5) > li:nth-child(3) > ol:nth-child(2)::before {
	border-left: solid #ffd700;
	border-right: solid #B7BC00;
	background: #F7FF82;
	content: "";
    display: block;
	position: absolute;
	z-index: -1;
	border-left-width: .25em;
	border-right-width: .25em;
	width: .2em;
	height: 4em;
}


/* --- Chart headings --- */

#plan-chart h4::before {
	margin-top: -5em;
	margin-left: 2.2em;
}

#plan-chart h4:nth-of-type(1) {
	 margin-top: 5.5em;
}


/* --- Chart specifics --- */

#plan-chart > ol:nth-child(5) > li:nth-child(3) > ol:nth-child(2)::before {
	margin-top: -6em;
    margin-left: 4.6em;
    border-left-width: .33em;
    border-right-width: .33em;
    width: .26em;
	height: 10em;
}

/* Clearance for group of plans*/
#plan-chart ol:nth-child(3) {
	margin-bottom: 5em;
}

#plan-chart ol:nth-child(2)::before,
#plan-chart ol:nth-child(3)::before,
#plan-chart ol:nth-child(4)::before {
	margin-left: 2.7em;
}

#plan-chart ol:nth-child(2)
li:nth-child(1)::before,
#plan-chart ol:nth-child(3)
li:nth-child(1)::before {
	margin-left: 7.5em;
	width: 3em;
}

/* Highlight Council Plan*/
#plan-chart > ol:nth-child(1) > li.document {
	font-family: 'GillSansNova-Semibold', sans-serif;
}

/* For 'Council Plan' text */
#plan-chart ol li span {
	display: block;
	font-size: 1.2em;
    margin-top:  .05em;
}


/* --- Chart Council Plan priorities --- */

#plan-chart > ol:nth-child(1) > li:nth-child(2) > ul > li {
	background: none;
	border: 0;
	height: auto;
	width: auto;
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 1.15em;
	font-family: 'GillSansNova-Semibold', sans-serif;
	color: #9A1917;
	list-style-type: disc;
   	display: list-item;
}

#plan-chart > ol:nth-child(1) > li:nth-child(2) {
	background: none;
	padding: 0 0 0 1em;
	border: 0;
	height: auto;
	width: auto;
	display: block;
	margin: 0 0 1em 0;
}

#plan-chart > ol:nth-child(1) > li:nth-child(2) a,
#plan-chart > ol:nth-child(1) > li:nth-child(2) a:link,
#plan-chart > ol:nth-child(1) > li:nth-child(2) a:visited {
	color: #9A1917;
}

#plan-chart > ol:nth-child(1) > li:nth-child(2):hover,
#plan-chart > ol:nth-child(1) > li:nth-child(2) > ul > li:hover {
	-webkit-transition: none; 
    -ms-transition: none;    
   	-moz-transition: none;    
  	transition: none; 
   	-webkit-transform: none;
   	-ms-transform: none;   
   	-moz-transform: none;
   	transform: none;
	box-shadow: none;
}


/* --- Chart council committees --- */

#plan-chart > ol:nth-child(5) > li:nth-child(2) > div > ul {
	margin-top: .4em;
    padding-left: 0;
}

#plan-chart > ol:nth-child(5) > li:nth-child(2) > div > ul > li{
	font-size: 1em;
	background: none;
	padding: 0;
	border: 0;
	height: auto;
	width: auto;
	list-style-type: disc;
    display: list-item;
	margin: .2em 0 .2em 1em;
}

/* Override hovers */
#plan-chart > ol:nth-child(5) > li:nth-child(2) > div > ul > li:hover,
#plan-chart > ol:nth-child(5) > li:nth-child(3){
	-webkit-transition: none; 
    -ms-transition: none;    
    -moz-transition: none;    
   	 transition: none; 
    -webkit-transform: none;
    -ms-transform: none;   
    -moz-transform: none;
    transform: none;
	box-shadow: none;
}

#plan-chart > ol:nth-child(2) > li:nth-child(1)::before {
	margin-top: 4.1em!important;
}


/* --- Chart performance reviews --- */
	
#plan-chart > ol:nth-child(5) > li:nth-child(3) > ol:nth-child(1) > li {
	display: flex;
}

#plan-chart > ol:nth-child(5) > li:nth-child(3) > ol:nth-child(2) > li {
	display: flex;
	margin-top: 5em;
}
	
#plan-chart > ol:nth-child(5) > li:nth-child(3) {
	display: block;
    width: auto;
    height: auto;
    background: none;
	margin: 0;
    padding: 0;
	font-size: 1em;
}


/* ====== PRIORITIES ====== */

#priorities ul {
    margin: 0;
    padding: 0;
    max-width: 100%;
    list-style: none;
}

#priorities ul li {
    margin: 4em 0 4em 0;
    padding: 9em 0 0 0;
    list-style-type: none;
    line-height: 1.25;
    background-size: 14em 8em;
    background-size: 14em 9em;
    background-repeat: no-repeat;
	background-position: 1.3em 0;
}

#priorities ul li:nth-child(1) {
	background-image: url("../img/minerva-redhayes.jpg");
}

#priorities ul li:nth-child(2) {
	background-image: url("../img/great-trees.jpg");
}

#priorities ul li:nth-child(3) {
	background-image: url("../img/folk-festival.jpg");
	margin-right: 0;
}

#priorities ul li h3{
	margin: 0 0 .8em 0;
    max-width: 26em;
}

#priorities ul li h3 a{
    padding: .38em .45em .52em;
    max-width: 30em;
    display: block;
}

#priorities ul li p {
	margin: 0;
    max-width: 26em;
}
    
#priorities ul li h3 a,
#priorities ul li h3 a:link,
#priorities ul li h3 a:visited {
	text-decoration: none;
	color: white;
}

#priorities ul li:nth-child(3) h3 a,
#priorities ul li:nth-child(3) h3 a:link,
#priorities ul li:nth-child(3) h3 a:visited {
	text-decoration: none;
	color: #6B5E15;
}

#priorities ul li:nth-child(1) h3 {
	background-color: #CD1719;
}

#priorities ul li:nth-child(2) h3 {
	background-color: #457A2E;
}

#priorities ul li:nth-child(3) h3 {
	background-color: #FFDD00;
}

/*
#priorities ul li:nth-child(1) a,
#priorities ul li:nth-child(1) a:link,
#priorities ul li:nth-child(1) a:visited {
	color: #CD1719;
}

#priorities ul li:nth-child(2) h3 a,
#priorities ul li:nth-child(2) h3 a:link,
#priorities ul li:nth-child(2) h3 a:visited {
	color: #457A2E;
}

#priorities ul li:nth-child(3) h3 a,
#priorities ul li:nth-child(3) h3 a:link,
#priorities ul li:nth-child(3) h3 a:visited {
	color: #80701B;
}
*/



/* Specific priorities */

.priority .hero {border-bottom: 1em solid;}

.priority-actions {
	padding: 0 0 0 .7em; 
	margin: 4em 0 0 0;
	border-left: .3em solid;
}

.priority-actions h4 {
	margin-top: .5em;
}

/* Never hang bullets */
.priority-actions ul li {
	margin-left: 1em!important;
}

.priority h3 {
	margin-top: -1.8em;
	position: relative;
	z-index: 2;
	padding: 2.2em .8em 1em .53em;
	color: white;
	line-height: 1.1;
	margin-bottom: 1.2em;
	max-width: 14em;
}

.priority h3 span {
	font-size: .76em;
	display: block;
	margin-bottom: .4em;
	letter-spacing: .01em;
}


/* Priority one */

#priority-one {
	background-color: #F6D7CA;
}

#priority-one h3 {
	background-color: #CD1719;
}

#priority-one .priority-actions {
	border-color: #CD1719;
}

#priority-one .priority-actions h4{
	color: #CD1719;
}

#priority-one .hero {
	border-color: #CD1719;
}


/* Priority two */

#priority-two {
	background-color: #E6F0DA;
}

#priority-two h3 {
	background-color: #457A2E;
}

#priority-two .priority-actions {
	border-color: #457A2E;
}

#priority-two .priority-actions h4{
	color: #457A2E;
}

#priority-two .hero {
	border-color: #457A2E;
}


/* Priority three */

#priority-three {
	background-color: #FFF8DA;
}

#priority-three h3 {
	color: #6B5E15;
	background-color: #FFDD00;
}

#priority-three .priority-actions {
	border-color: #FFDD00;
}

#priority-three .priority-actions h4{
	color: #80701B;
}

#priority-three .hero {
	border-color: #FFDD00;
}


/* ====== ABOUT US ====== */

#about {
	background: #dedede;
	padding-bottom: 16em;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {display: none !important;}

.print-wrapper {display: none !important;}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {visibility: hidden;}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {clear: both;}


/* ==========================================================================
   Responsive adjustments
   ========================================================================== */


@media only screen and (min-width: 40em) {
	
	
	/* ====== GENERAL AND SHARED STYLES ====== */
	
	html {
		font-size: 110%
	}
	
	/* Margins */
	.container {
    	padding-left: 1.5em;
		padding-right: 1.5em;
		max-width: 50em;
	}
	
	/* Optimise lists with graphics */
	.stats li {
		width: 8em;
		margin: 0 3em 1em 0;
	}
	
	
	/* ====== PLANS ====== */
	
	/* Council Plan row only */
	#plan-chart > ol:nth-child(1) {
		display: -webkit-flex; 
		display: flex;
  		-webkit-flex-direction: row; 
  		flex-direction: row; 
	}
			
	#plan-chart h4:nth-of-type(1) {
	 	margin-top: 2em;
	}
	
	
	/* ====== PRIORITIES ====== */

	.priority-actions {
		max-width: 32em;
	}

	.priority-actions h4 {
		margin-top: .5em;
	}

}


@media only screen and (min-width: 60em) {

	
	/* ====== GENERAL AND SHARED STYLES ====== */

	/* Hang bullets by default */
	li {
   	 	margin-left: 0;
	}
	
	/* ====== HEADER ====== */
	
	header h1 {
		font-size: 2.2em;
	}

	
	/* ====== MESSAGE FROM THE LEADER ====== */

	#byline figure img {
		width: 8em;
		height: 12em;	
		margin-bottom: .8em;
	}
	
	#byline {
		float: left;
		width: 25%;
		margin-top: 1.6em;
	}
	
	#message {
		margin-left: 5%;
		float: left;
		width: 68%
	}
	
	
	/* ====== PLANS ====== */

	/* Highlight Council Plan */
	#plan-chart > ol:nth-child(1) > li.document {
		font-size: 1em;
	}
	
	#plan-chart ol {
		display: -webkit-flex; 
		display: flex;
  		-webkit-flex-direction: row; 
  		flex-direction: row; 
	}
	
	#plan-chart ol:nth-child(6) li {
		margin-top: 0;
	}
	
	#plan-chart ol:nth-child(1) li:nth-child(1) {
		margin-right: 1.3em;
	}
	
	#plan-chart > ol:nth-child(5) > li:nth-child(3) > ol:nth-child(2) > li {
		margin-top: 3em;
	}
	
	
	/*====== PRIORITIES ====== */
	
	#priorities ul li {
		padding: 0 0 0 15.5em;
		min-height: 9em;
		background-position: 0 0;
	}
	
	#priorities ul li h3 {
    	margin: 0 0 .6em 0;
    	max-width: 100%;
	}
	
	.priority-actions {
		padding-left: 1.2em; 
	}

}

@media only screen and (min-width: 80em) {
		
	
	/* ====== GENERAL AND SHARED STYLES ====== */
		
	html {
		font-size: 115%;
	}
	
	.stand-first {
		font-size: 1.3em;
	}
		
	.pullout {
		font-size: 1.3em;
		margin-top: 3em;
		margin-bottom: 2.75em;
		max-width: 36em;
	}
		
	.pullout {
		float: right;
		font-size: 1.2em;
		margin: 1.5em;
		width: 15em;
		line-height: 1.2;
	}
	
	#message-leader .pullout {
		margin-right: -2em;
		width: 13em;
	}
	
	
	/* ====== HEADER ====== */
	
	#header-masthead {
		padding-bottom: 20em
	}
	
	#intro {
		margin-top: -16em;
	}
	
	
	/* ====== MESSAGE FROM THE LEADER ====== */
	
	#byline {
		margin-top: 0;
		float: left;
	}	
	
	#byline li {
		display: block;
		margin-bottom: 2em;
	}
	
	
	/* ====== PRIORITIES ====== */

	.priority h2 {
		max-width: 12em;
		padding: .75em;
	}
	
	.priority h3 {
		font-size: 1.9em;
	}
	
}
	
@media only screen and (min-width: 96em) {
	
	
	/* ====== GENERAL AND SHARED STYLES ====== */
	
	/* Hang in margin */
	.pullout {
		margin: 1.5em -3em 1.5em 1.5em;
	}
		
	
	/* ====== NAVIGATION ====== */

	/* Margins compensate for sticky nav */
	
	.container {
		padding-right: 17em;
	}
	
	
	/* Sticky nav */
	
	#sticky-contents > div.container {
		padding: 0;
	}

	#sticky-contents.sticky-contents-active {
		display: block;
		position: fixed;
		height: 100%;
		top: 0;
		right: 0;
		padding: 5vh 1.5em 1.5em;
		margin: 0;
		width: 14em;
		font-size: .9em;
		letter-spacing: .02em;	
		/*mix-blend-mode: difference;*/
		border-left: .15em solid #999;
		z-index: 100;
		overflow: auto;
	}
	
	#sticky-contents.sticky-contents-active::before {
		content: "";
		display: block;
		position: absolute; 
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		background: white;
		opacity: .93;
	}
	
	#sticky-contents.sticky-contents-active ul {
		margin-bottom: 2em;
	}
	
	#sticky-contents.sticky-contents-active > div > ul > li > div > ul {
		margin-bottom: 0;
	}
	
	#sticky-contents.sticky-contents-active li {
		margin-bottom: .35em!important;
	}
	
		
	#sticky-contents.sticky-contents-active a {
		display: block;
		padding: .25em .3em .4em;
	}
	
	
	/* Active colours */
	
	#sticky-contents.sticky-contents-active li.active a {
    	color: white;
		background-color: #004C81;
	}
	
	#sticky-contents.sticky-contents-active > div > ul > li > div > ul li:nth-child(1).active a {
    	color: white;
		background-color: #CD1719;
	}
	
	#sticky-contents.sticky-contents-active > div > ul > li > div > ul li:nth-child(2).active a {
    	color: white;
		background-color: #457A2E;
	}
	
	#sticky-contents.sticky-contents-active > div > ul > li > div > ul li:nth-child(3).active a {
    	color: #004C81;
		background-color: #FFDD00;
	}
	
	
	/* ====== FOOTER ====== */
	
	#topBtn {
		display: none!important;
	}
		
}

	

/* Style adjustments for high resolution devices */    
@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
}
    


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        /* background: transparent !important; */
        /* color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited 
		{text-decoration: underline;}

    a[href]:after 
		{content: " (" attr(href) ")";}

    abbr[title]:after 
		{content: " (" attr(title) ")";}

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after 
		{content: "";}

    pre,
    blockquote {
        /* border: 1px solid #999; */
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {display: table-header-group;}

    tr,
    img 
		{page-break-inside: avoid;}

    img 
		{max-width: 100% !important;}

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3,
	h4,
	h5,
	h6
		{page-break-after: avoid;}
	
	
	/* ====== CUSTOM STYLES ====== */
	
	/* Universal size */
	html {
		font-size: 100%;
	}
	
	/* Print backgrounds */
	* {
    	-webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */
    	color-adjust: exact !important; /*Firefox*/
	}
	
	/* Content only for print */
	.print-wrapper {
		display: block!important;
	}
	
	/* Hide nav elements */
	#topBtn,
	#sticky-contents,
	footer nav {
		display: none!important;
	}
	
	/* Don't print URLs */
	a[href].home-logo:after, 
	#plan-chart a[href]:after 
		{content: none!important;}
	
	/* Don't break content */
	img,
	li,
	.hero,
	#plan-chart h4,
	#app-promo,
	#updates-promo {
		page-break-before: avoid!important;
		page-break-after: avoid!important;
		page-break-inside: avoid!important;
	}
	
	/* Avoid break in Council Plan row of plans chart */
	#plan-chart > ol:nth-child(1) {
		display: -webkit-flex; 
		display: flex;
  		-webkit-flex-direction: row; 
  		flex-direction: row; 
	}	
	
	#plan-chart h4:nth-of-type(1) {
	 	margin-top: 2em;
	}
	
	/* Compensate for background image with negative margin */
	#cta {
		padding-top: 4em!important;
	}
	
	/* Size adjustment */
	.hero {
		height: 20em!important;
	}
	
	/* Reduce space before footer */
	#about {
    	padding-bottom: 10em;
	}
	
	/* Remove footer background */
	footer {
		background: white;
	}
	
}