/*! 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;
    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"; */
}

/*

header .container, main, footer .container {
	margin: 0 auto;
	max-width: 60em;
}
*/

main,
header,
footer {
	margin: 0 auto;
}

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

section {
	padding-top: 1em;
    padding-bottom: 5em;
    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,
nav#contents ul,
nav#contents > a.top-link,
nav#contents > button.print-button {
	font-size: .9em!important;
	letter-spacing: .01em;
}

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.5em;
}

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

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;
	max-width: 60em;
}

.fixedPosition {
	position: fixed;
}


/* --- Links --- */

a, a:link, a:hover {
	color: #004C81;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.1em;
}

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;
}

span.date-range {display: inline-block;}

span.date-range-dash {
    margin: 0 -0.15em 0 -0.15em;
    position: relative;
    top: -0.06em;
}

h2 {
    font-size: 2.2em;	
    letter-spacing: -.015em;
    margin: 2.6em 0 1em -.02em;
	line-height: 1.05;
	max-width: 16em;
}

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

h3,
#app-promo h2,
#updates-promo h2 {
	font-size: 1.8em;
	letter-spacing: -.01em;
    margin: 2.2em 0 .8em 0;
	line-height: 1.1;
	max-width: 18em;
}

h2 + h3 {
	margin-top: 2em;
}

h4,
#updates-promo h3 {
	font-size: 1.6em;
	letter-spacing: 0;
    margin: 2.6em 0 1em 0;
	line-height: 1.15;
	max-width: 20em;
}

h3 + h4 {
	margin-top: 2.2em;
}

h5 {
	font-size: 1.3em;
	letter-spacing: 0;
    margin: 2.2em 0 1em;
	line-height: 1.15;
	max-width: 20em;
}

h4 + h5 {
	margin-top: 2em;
}

h6 {
	font-size: 1em;
	letter-spacing: 0;
    margin: 2.4em 0 1.4em 0;
	max-width: 24em;
}


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

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

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


/* --- Boxtext --- */

.boxtext {
	background: #ddd;
    padding: 1.4em 1em;
    margin: 0 0 3em;
}

.boxtext,
.aim,
.involved-type-heading {
	max-width: 36em;
}

.boxtext h2 {
	font-size: 1.6em;
    max-width: 18em;
}

.boxtext p {
    max-width: 31em;
}

/* --- Stand first --- */

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


/* --- 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 h1 {
	color: white!important;
	line-height: 1.1;
	margin: 1em 0 2em 0;
}

#header-masthead {
	display: block;
	padding: 1em 0 18em;
	background-position: 50% 30%;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-image: url("../img/pruning-lo.webp");
}

.last-changed {
	color: white;
	margin: 0;
}


/* --- Banner --- */

#header-banner {
	background: #4f9d3a;
    padding: 1em 0 1.1em;
}

#header-banner p:before {
    content: "";
    display: block;
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    z-index: 10;
    background: url("../img/consultation.svg") 0 0 no-repeat;
    margin: -.1em 0 0 -1.9em;
}

#header-banner p {
	font-size: 1.15em;
	margin: 0;
	line-height: 1.15;
	padding-left: 1.85em;
}

#header-banner p,
#header-banner a,
#header-banner a:link,
#header-banner a:hover,
#header-banner a:visited {
	color: white;
}


/* --- Navigation --- */

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

nav#contents a:hover {
	text-decoration: underline;
}
	
nav#contents {
	margin-bottom: 4.5em;
	line-height: 1.15;
	max-width: 27em;
}

nav#contents h2 {
	font-size: 1.1em;
	padding-top: .2em;
	margin: 0 0 .7em!important;
}

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

nav#contents ul li {
    position: relative;
    margin-bottom: 0.4em;

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

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

nav#contents ul li:before,
li.embedded-list > div > ul > li:before {
	content: '';
    position: absolute;
    border-right: 0.1em solid #888;
    border-bottom: 0.1em solid #888;
    width: 0.4em;
    height: 0.4em;
    top: calc(0.9em - 0.35em);
    left: -0.95em;
    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;
}

/* Tidy embedded list */
nav#contents ul ul {
	font-size: 1em!important;
}

.print-button {
	margin-top: 1.5em;
	background: #999;
   	border: 0;
    padding: .4em .6em .5em 2em;
    color: white;
}	

.print-button:before {
    content: "";
    display: block;
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    z-index: 10;
    background: url(../img/print.svg) 0 0 no-repeat;
    margin: 0 0 0 -1.4em;
}

.print-button:hover {
    background: #777;
}
	
/* Hide 'top' link by default*/
.top-link {
	display: none;
}


/* --- Logo --- */

.home-logo {
	display: block;
	padding: 0;
	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: #4f9d3a;
    margin: -6em 0 3em;
    padding: 0.2em 1.5em 3em 1.5em;
    z-index: 100;
    max-width: 40em;
}

#intro p {
	max-width: 24em;
}

#intro,
#intro a,
#intro a:link,
#intro a:visited {
	color: white;
}

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


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

footer {
	position: relative;
    padding-top: 2em;
	padding-bottom: 3.5em;
    background: #ddd;
}

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 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 {
	margin: -.9em 0 1em;
	padding: 0;
}

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

#social-channels li a{
	display: block;
    width: 1.8em;
    height: 1.8em;
    background-position: 0 center;
    background-size: 1.8em 1.8em;
    background-repeat: no-repeat !important;
	padding-bottom: .5em;
	border-bottom: .2em solid white;
}

#social-channels li a:hover {
	border-bottom-color: #666;
}

#social-channels li a span {
	display: none;
}

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

#social-channels li:nth-child(2) a{
    background-image: url("../img/instagram.svg");
}

#social-channels li:nth-child(3) a{
    background-image: url("../img/x.svg");
}


/* --- Promos --- */

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

#app-promo {
	max-width: 34em;
	padding: 1em .6em 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: 14em;
}

#app-promo p,
#updates-promo p{
	max-width: 26em;
}

#hand-with-phone {
	display: block;
    margin-top: -4em;
	margin-left: -.6em;
    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 .6em 1.5em;
	background: white;
}


/* ====== WHY DEVELOPING STRATEGY ====== */

#why-we-are-developing-this-strategy h2::before {
	content: "";
    display: block;
    position: relative;
    width: 80%;
    max-width: 20em;
    aspect-ratio: 3 / 2;
    background: white;
    margin-bottom: 1em;
    z-index: 10;
    background: url("../img/chamber.webp") no-repeat;
	background-size: contain;
}


/* ====== VISION ====== */

#our-vision {
	background: #aad046;
	margin-bottom: 5em;
    padding-bottom: 3em;
}

#our-vision h2::before {
	content: "";
    display: block;
    position: relative;
    width: 80%;
    max-width: 20em;
    aspect-ratio: 3 / 2;
    background: white;
    margin-bottom: 1em;
    z-index: 10;
    background: url("../img/pizza.webp") no-repeat;
	background-size: contain;
}


/* ====== AIMS ====== */

.aim {
	padding: 5.6em 1em 0;
	position: relative;
	z-index: -1;
	margin: 6em 0 2.5em;
}

.aim:nth-of-type(1) {
	margin-top: 3.5em;
}

.aim::before {
	content: "";
    display: block;
    position: absolute;
    width: 3.5em;
    height: 3.5em;
    z-index: 10;
}

.aim:nth-of-type(1)::before {
	background: url(../img/aim-one.svg) 0 0 no-repeat;
	margin: -4em 0 0 -.5em;
}

.aim:nth-of-type(2)::before {
	background: url(../img/aim-two.svg) 0 0 no-repeat;
	margin: -4em 0 0 -0.1em;
}

.aim:nth-of-type(3)::before {
	background: url(../img/aim-three.svg) 0 0 no-repeat;
	margin: -4.1em 0 0 -.1em;
}

.aim:nth-of-type(4)::before {
	background: url(../img/aim-four.svg) 0 0 no-repeat;
	margin: -3.8em 0 0 -0.2em;
}

.aim:nth-of-type(5)::before {
	background: url(../img/aim-five.svg) 0 0 no-repeat;
	margin: -3.9em 0 0 -.2em;
}

.aim::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 2em);
    height: calc(100% - 4em);
    left: -1em;
    top: 0;
    z-index: -1;
}

.aim:nth-of-type(1)::after {
	background: #464da0;
}

.aim:nth-of-type(2)::after {
	background: #aa436c;
}

.aim:nth-of-type(3)::after {
	background: #775ca7;
}

.aim:nth-of-type(4)::after {
	background: #201c50;
}

.aim:nth-of-type(5)::after {
	background: #255127;
}

.aim h3:not(.action-plan h3),
.aim h4:not(.action-plan h4),
.aim p:not(.action-plan p),
.aim li:not(.action-plan li) {
	color: white;
}

.aim h3 {
	margin-top: 0;
	margin-bottom: 1.6em;
	max-width: 16em;
}


/* --- Action plans --- */

.action-plan {
    padding: 1em 1.2em 2em;
    max-width: 25em;
    aspect-ratio: 2 / 3;
	z-index: 2;
	position: relative;
	margin-top: 5em;
}

.action-plan::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
	height: 100%;
    left: 0;
	top: 0;
    background: #a7917b;
    z-index: -2;
    max-width: 33em;
    transform: rotate(-.5deg);
    -webkit-transform: rotate(-.5deg);
    -ms-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
}

.action-plan::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 1.3em);
    height: calc(100% - 2em);
    left: 0.5em;
    top: 0.7em;
    background: #ededed;
    z-index: -1;
    max-width: 33em;
    transform: rotate(-.9deg);
    -webkit-transform: rotate(-.9deg);
    -ms-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
}

.action-plan h4::before {
	content: "";
    display: block;
    position: absolute;
    width: 45%;
    height: 20vw;
    left: 27.5%;
    top: -8vw;
    background: url(../img/clip.svg) 0 0 no-repeat;
    z-index: 2;
    aspect-ratio: 2 / 3;
    transform: rotate(-.5deg);
    -webkit-transform: rotate(-.5deg);
    -ms-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
}

.action-plan h4::after {
    background: url(../img/squiggle.svg) 0 0 no-repeat;
    content: "";
    display: block;
    position: absolute;
    width: 5.8em;
    height: 1em;
    margin-top: 0.3em;
}

.action-plan h4 {
	margin-bottom: 2.2em;
}

.action-plan li {
  	list-style: none;
	text-indent: -1em;
}

.action-plan li:before {
  	content: "\2713\0020";
}


/* ====== GETTING INVOLVED ====== */

.involved-type-heading {
    padding: 0.5em 1em 1.4em;
    background: #aa436c;
    margin: 5em 0 3em;
}

.involved-type-heading h4,
.involved-type-heading p {
	color: white;
}

.involved-type-heading h3 + h4 {
	 margin-top: 1.4em;
}

.involved-type-heading::before {
	content: "";
	display: block;
	position: absolute;
	width: 3em;
	height: 3em;
	margin-top: .6em;
	z-index: 10;
}

.involved-type-heading:nth-of-type(1)::before {
	background: url(../img/time-low.svg) 0 0 no-repeat;
}

.involved-type-heading:nth-of-type(2)::before {
	background: url(../img/time-medium.svg) 0 0 no-repeat;
}

.involved-type-heading:nth-of-type(3)::before {
	background: url(../img/time-high.svg) 0 0 no-repeat;
}

.involved-type-heading::after {
	content: "";
	background: #aa436c;
    display: block;
    position: absolute;
    width: 2em;
    height: 2em;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    margin-left: 1em;
}


/* ====== HAVE YOUR VOICE HEARD ====== */

#have-your-voice-heard {
	padding-top: 5.6em;
	padding-bottom: 16em;
	background: #4f9d3a;
}

#have-your-voice-heard h2::before {
	content: "";
    display: block;
    position: absolute;
    width: 1.8em;
    height: 1.8em;
    z-index: 10;
    background: url(../img/voice.svg) 0 0 no-repeat;
    margin: -2em 0 0 -0.1em;
}

#have-your-voice-heard h2,
#have-your-voice-heard p,
#have-your-voice-heard a,
#have-your-voice-heard a:link,
#have-your-voice-heard a:visited {
	color: white;
}


/* ==========================================================================
   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 (max-width: 40em) {

	
	/* Negative margins for boxtext */
	
	.boxtext,
	.aim,
	.involved-type-heading,
	#updates-promo,
	#app-promo {
    	margin-left: -1em;
    	margin-right: -1em;
	}

}


@media only screen and (min-width: 40em) {
	
	
	/* ====== GENERAL AND SHARED STYLES ====== */
	
	html {
		font-size: 105%;
	}
	
	/* Margins */	
	.container {
    	padding-left: 1.5em;
		padding-right: 1.5em;
	}
	
	/* Reset margins for boxtext */
	.boxtext,
	.aim,
	.involved-type-heading,
	#updates-promo,
	#app-promo {
		padding-left: 1.2em;
		padding-right: 1.2em;
		margin-left: 0;
    	margin-right: 0;
	}

	
	/* ====== AIMS ====== */
		
	.aim::after {
		left: 0;
		width: 100%;
	}
		
	.action-plan {
		padding: 1.2em 1.5em 2em 1.5em;
	}
	
	.action-plan h4::before {
    	top: -1.9em;
	}
	

	/* ====== FOOTER ====== */
	
	#hand-with-phone {
		margin-left: -1.2em;
	}

}


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

	
	/* ====== GENERAL AND SHARED STYLES ====== */
	
	html {
		font-size: 110%;
	}
	
	main {
		padding-top: 5em;
	}
	
	.stand-first {
		font-size: 1.3em;
	}
		

	/* Switch to multi-column layout */
	
	main .container,
	footer .container {
		padding-left: 16em;
		max-width: 40em;
	}
	
	header .container {
		padding-right: 16em;
		max-width: 40em;
	}
	
	
	/* ====== HEADER ====== */
	
	header h1 {
		font-size: 2.2em;
	}
		
	#header-masthead {
		padding-bottom: 28em;
		background-image: url("../img/pruning-hi.webp");
	}
	
	#intro {
		margin-top: -12em;
	}
	
	
	/* ====== NAVIGATION ====== */
	
	nav#contents {
		position: absolute;
		z-index: 10;
	}
	
	nav#contents ul {
	    max-width: 13em;
	}


	/* --- Sticky nav --- */
	
	#contents.sticky-contents-active {
    	position: fixed;
    	top: 0;
    	left: 0;
    	padding: 1.2em 1.2em 1.6em;
    	background: white;
    	border-right: 0.1em solid #aaa;
		height: 100%;
    	/* box-shadow: 0 0.8em 0.8em 0 rgba(0, 0, 0, 0.08);*/
	}
	
	#contents.sticky-contents-active > div > ul > li > div > ul {
		margin-bottom: 0;
	}
	
	#contents.sticky-contents-active li {
		margin-bottom: .35em!important;
		margin-left: 1em;
		line-height: 1.12;
	}
		
	#contents.sticky-contents-active a {
		display: block;
	}
	
	#contents.sticky-contents-active ul ul {
    	margin-left: 0;
	}
	
	/* Show 'top' link hidden by default */
	#contents.sticky-contents-active .top-link {
		display: block;
		margin-top: 2em;
	}
	
	/* Compensate spacing */
	#contents.sticky-contents-active .print-button {
		margin-top: 0.7em;
	}

	/* Active colours */
	
	#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;
	}
	
	#contents.sticky-contents-active > div > ul > li > div > ul li:nth-child(3).active a {
    	color: #004C81;
		background-color: #FFDD00;
	}
	
		
	/* ====== AIMS ====== */	
	
	.action-plan {
		padding: 1.5em 2em 2em 2em;
	}

		
	/* ====== FOOTER ====== */
	
	footer {
		padding-bottom: 0;
	}
	
	footer nav {
    	margin-bottom: 10em;
	}
		
	#topBtn {
		display: none!important;
	}

}

@media only screen and (min-width: 90em) {
	
	
	/* ====== GENERAL AND SHARED STYLES ====== */
	
	html {
		font-size: 115%;
	}
	
	/* Adjust spacing of multi-column layout */
	
	main .container,
	footer .container {
		padding-left: 20em;
		max-width: 45em;
	}
	
	header .container {
		padding-right: 18em;
		max-width: 45em;
	}
	
	/* Hang bullets by default */
	li {
   	 	margin-left: 0;
	}
	
	/* Hang boxtext */
	
	.involved-type-heading,
	#updates-promo,
	#app-promo {
		margin-left: -1.2em;
	}
	
	.boxtext,
	.aim {
		padding-left: 1.6em;
		margin-left: -1.6em;
	}
	
	
	/* ====== NAVIGATION ====== */
	
	nav#contents ul li {
		margin-left: 0;
	}
	
	#contents.sticky-contents-active {
    	margin-left: -3em;
		left: auto;
		height: auto;
    	border-left: 0.1em solid #aaa;
		border-bottom: 0.1em solid #aaa;
	}
	
	nav#contents ul ul {
		margin-left: 1em;
	}	
	
	
	/* ====== AIMS ====== */	
	
	.action-plan {
		padding: 2em 2.5em;
	}
	
}

@media only screen and (min-width: 120em) {
	
	html {
		font-size: 120%;
	}
	
	header .container {
		padding-right: 22em;
	}

}

	

/* 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;
	}
	
}