@charset "UTF-8";
/* CSS Document */

:root {
	  --background: #000;
	  --foreground: #ffffff;
	  --outline: #ccc;
	  --btngrad: linear-gradient(90deg,#FFE900 0%, #57D229 100%);
	  --btngrad1:#FFE900;
	  --btngrad2:#57D229;
	  --bggrad: linear-gradient(90deg,#CDFFD9 0%, #00857F 100%);
	  --bg0: #171717;
	  --colour1: #737373;
	  --colour2: #0A0A0A;
	  --colour3: #525252;
      --colour4: #D4D4D4;
	  --colour5: #404040;
	  --bg1: #F5F5F5;
	  --bg2: #E5E5E5;
	  --bg3: #A1A1A1;
	  --bg4: #FAFAFA;
	  --bg5: #BCBCBC;
	  --sitewidth: 1440px;
	  --bannerheight: 608px;
	  --bannerheightstd: 540px;
	  --headerheight: 96px;
	  --footerheight: 648px;
	  --scrim:rgba(0,0,0,0.4);
	}
	
	@font-face {
      font-family: 'HelveticaLT';
      src: url('fonts/HelveticaLTPro-BoldCond.otf') format('opentype');
      font-weight: 400 900;
      font-style: normal;
    }
	
	html,body {background-color:var(--background);}
	body {font-family: "Inter", sans-serif; font-size:16px; line-height:1.2em; color:var(--colour1); font-weight:400; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; font-smoothing:always;} 
	body, body * {box-sizing: border-box; margin:0; padding:0; }
	h1, h2 {text-transform: uppercase; font-weight:700; color:var(--colour2); font-family:"HelveticaLT", Gotham,  Helvetica, Arial, "sans-serif"; letter-spacing: -0.03em;}
	
	p {font-size:16px; line-height:24px; }
	
	a {color:var(--colour1); text-decoration: none;}
	a:hover {color:var(--colour2);}
	
	a.btn {width:90px; text-align: center; border-radius:20px; background:var(--btngrad); height:40px; color:var(--colour2); display:inline-grid; align-items:center; cursor:pointer; gap:1em; font-family: "IBM Plex Serif", serif;}
	a.btn.more {padding-left:15px; text-align: left; grid-template-columns: 1fr 40px; width: auto;}
	a.btn.more.btn-white {background:white;}
	a.btn.more span.btn-more {height:40px; width:40px; background: var(--colour2); border-radius:20px; display:block; background-image:url(more-arrow.svg); background-size:18px; background-position:center; background-repeat: no-repeat;}
	a.btn.btn-viewall {background: transparent; border:1px solid var(--colour4); }
	a.btn.btn-nav {width:40px;}
	a.btn.btn-nav span { display:block; width:40px; height:40px;  background-image:url(sub-arrow.svg); background-size:18px; background-position:center; background-repeat: no-repeat;}
	a.btn.btn-nav.btn-back span {transform: rotate(-180deg);}
	
	ul li {font-size:16px; line-height:24px;}
	
	span.strong {font-weight:700;}
	
	/* TEXT */
	.container.banner h1 {max-width:55%; font-size: 64px; line-height: 1em; font-stretch:condensed;}
	.container.banner h2 {font-size:1em; font-weight:400; line-height:24px; margin-top:20px; margin-bottom:20px; color:var(--colour3); font-family: "Inter", sans-serif; text-transform: none; letter-spacing: 0; max-width: 78%;}
	.container.banner a.btn.more {font-size:1em; font-weight:400; }
	
	.container.content h2 {text-transform: uppercase; font-weight:700; color:var(--colour2); font-stretch:condensed; font-size:40px;line-height:42px;}
	.container.content h3 {color:var(--colour2); font-size:24px; font-weight:400; margin-top:25px; margin-bottom:20px; line-height:32px;}
	.container.content p, .container.content li {color:var(--colour3);}
	.container.content li {margin-left:2em;}
	
	.container.content.dark h2 {color:white;}
	.container.content.dark h3, .container.content.dark h4 {color:white;}
	.container.content.dark p, .container.content.dark li {color:white;}
	
	/* MAIN GRID */
	#wrap {display:grid; grid-template-columns:1fr; justify-items: center; background-color: var(--background);}
	.container {width:100%; max-width: var(--sitewidth); background-color: var(--foreground); display:grid; grid-template-columns:repeat(12,1fr);}
	
	/* BLOCK ITEMS */
	#header {height:var(--headerheight); border-bottom:1px solid var(--outline); grid-template-areas:" logo logo menu menu menu menu menu menu menu menu menu menu "; position:relative;}
	#footer {background-color: var(--bg0); border:none;}
	
	.container.banner {height:var(--bannerheight); border-bottom:1px solid var(--outline); grid-template-areas:" . text text text text text image image image image image image ";}
	.container.content {min-height:200px; border-bottom:1px solid var(--outline); grid-template-areas:" . text text text text content content content content content content . "; padding-top: 4em; padding-bottom: 4em;}
	.page-home .container:nth-child(3) {padding-top:6em;}
	
	.container.content.dark {background-color: var(--colour2); color:white;}
	
	.container.content.overflowx.landscape {background-color:white; border:none;}
	.container.content.overflowx {min-height:200px; border-bottom:1px solid var(--outline); grid-template-columns:repeat(24,1fr); grid-template-areas:" . . text text text text text text text contentnav contentnav contentnav contentnav contentnav contentnav contentnav contentnav contentnav contentnav contentnav contentnav contentnav . . " " . . text text text text text text text content content content content content content content content content content content content content content content ";}
	.container.content.overflowy, .container.content.flowy {grid-template-columns:repeat(24,1fr); border-bottom:1px solid var(--outline); grid-template-areas:" . . text text text text text text text content content content content content content content content content content content content content . . ";}
	.container.content.flowy {height:auto; }
	.container.content.flowy.std {height:auto;}
	.container.content.flowy .content {padding-top:0;}
	
	.container.content .content-nav {display:grid; grid-template-columns: 1fr 92px 40px 40px; gap:5px;}
	.container.content .content-nav p {font-size:24px; color:var(--colour2); line-height: 40px; vertical-align: middle; font-weight:500;}
	
	/* GRID ELEMENTS */
	#header .logo {grid-area: logo; display:grid; align-items: center; justify-items:center; background-repeat: no-repeat; background-size: 150px ; background-position: 2em center; background-image: url('ACCR.png');}
	#header .mobilemenu {
		grid-area: menu;
		display: grid;
    	grid-template-columns: 1fr 1fr;
    	align-content: center;
		margin-right: 32px;
	}

	#header .mobilemenu .menu > ul > li .megamenu {
		grid-template-columns:1fr 1fr 2fr;
		gap:2em;
		background-color: var(--bg2);
		display:none;
		position:absolute;
		max-width:var(--sitewidth);
		width:100vw;
		left:0;
		padding:40px;
		z-index: 10;
		margin-top:36px;
		align-items: start;
		color:var(--colour2);
	}
	
	#header .mobilemenu .menu > ul > li .megamenu ul {
		display:grid;
		grid-template-columns:1fr;
    	align-items: start;
    	justify-items: left;
	}
	
	#header .mobilemenu .menu > ul > li .megamenu li {
		display: block;
		border-bottom: 1px solid var(--bg5);
		padding-bottom: 1em;
		padding-top: 0.45em;
		padding-left: 3em;
		margin-right: 2em;
		background-size: 36px;
		background-position: left top;
		background-repeat: no-repeat;
	}

	#header .mobilemenu .menu > ul > li .megamenu > div {
		display:grid;
		grid-template-columns:1fr;
    	align-items: center;
    	justify-items: left;
		background-color:white;
		padding:3em 2em;
		position:relative;
	}

	#header .mobilemenu .menu > ul > li .megamenu > div h3 {
		font-size:34px;
		margin-bottom:1.5rem;
	}

	#header .mobilemenu .menu > ul > li .megamenu > div p {
		font-size:24px;
		line-height:normal;
		max-width:70%;
		margin-bottom:1.5rem;
	}

	#header .mobilemenu .menu > ul > li .megamenu .image {
		position:absolute;
		width:40px;
		height:100%;
		background: var(--bggrad);
		top:0;
		right:0;
	}

	#header .mobilemenu .menu > ul > li .megamenu .image .image-overlay {
		height:100%;
	}

	#header .mobilemenu .menu > ul > li:hover > a {
		padding-bottom:50px;
	}

	#header .mobilemenu .menu > ul > li:hover .megamenu {
		display:grid;
	}

	#header .menuicon {grid-area: menuicon; display: none;}
	#header .menu {display:grid;}
	#header .menu ul {display: flex; align-items: center; justify-items: center; gap:32px;}
	#header .menu ul li {list-style: none; margin:0;}
	#header .search {display:flex; gap:16px; align-items: center; justify-items: center; justify-content: flex-end; right:2em;}
	
	#header .logo img {width:150px;}
	
	#header .search-input {display:grid; grid-template-columns:1fr; width:224px; background-color:var(--bg1); height:40px; border-radius:20px; position:relative;}
	#header .search-input input { border:none; background-color: transparent; padding-left:15px; border-bottom-left-radius:20px; border-top-left-radius:20px;}
	#header .search-input .search-input-icon {background-color:var(--bg3); height:40px; width:40px; border-radius:20px;  display:block; background-image:url(magnify.svg); background-size:18px;  background-position:center; background-repeat: no-repeat; position:absolute; right:0;}
	
	#header .mode-switch {display:grid; width:224px; background-color:var(--bg1); height:40px; width:24px; border-radius:12px; padding:2px; cursor:pointer;}
	#header .mode-switch .mode-switch-pos {width:20px; height:20px; background-color:white; border-radius:10px; background-image:url(sun.svg); background-size:14px;  background-position:center; background-repeat: no-repeat;}
	#header .mode-switch:hover {background-color:var(--colour5);}
	
	#header #megamenu {display:none;}

	.container.banner .text {grid-area: text; padding-top:4em;}
	.container.banner .image {grid-area: image; background-color:#ddd; background-image: url(bg1.jpg); background-size:cover; background-repeat: no-repeat; background-position: center; position: relative;}
	.container .image .image-overlay {background-image:url(shellover.svg); height:var(--bannerheight); background-repeat:no-repeat; background-position:bottom right;}
	
	.page-research .container.banner {height:var(--bannerheightstd);}
	.page-research .container.banner .image {
		background-image: url(research.jpg);
		background-position: center right;
		background-color: var(--bg0);
		background-size: contain;
		position: absolute;
		width: 100%;
		height: var(--bannerheightstd);
		max-width: var(--sitewidth);
	}

	.page-research .container .image .image-overlay {display:none;}
	.page-research .container.banner .text {
		position: relative;
		z-index: 2;
		padding: 0;
		align-self: end;
		margin-bottom: 3em;
	}

	.page-research .container.banner h1, .page-research .container.banner h2 {color:white;}
	
	
	.container.content .text {grid-area: text; max-width:330px;}
	.container.content .content-nav {grid-area: contentnav; padding-bottom:2em; border-bottom:1px solid var(--colour4);}
	.container.content .content {grid-area: content; padding-top:2em;}
	
	.container.content.page-list { background-repeat:no-repeat; background-position:top right; background-image:url(shellover-gry.svg); background-color:var(--bg4); grid-template-areas:" . text text text text text text text text text text . " " . content content content content content content content content content content . "; padding-bottom: 0;}
	.container.content.page-list > .text {max-width:470px;}
	
	.container.content.content-banner {grid-template-areas:" . banner banner banner banner banner banner banner banner banner banner . "; border:none;}
	.container.content.content-banner > div {background-repeat:no-repeat; background-position:top right; background-image:url(shellover.svg); background-image:url(shellover.svg), linear-gradient(0.25turn, #C6F8FF, #595CFF); grid-template-columns:1fr 1fr; grid-area:banner; padding:50px; display:grid; }
	.container.content.content-banner > div .text {width:100%; max-width:100%; grid-area:unset;}
	.container.content.content-banner > div > div:nth-child(2) { }
	
	.container.content.overflowx {background-color:var(--bg4);}
	.container.content.overflowx .scroll {overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none;}
	.container.content.overflowx .scroll::-webkit-scrollbar {dislay:none;}
	
	.container.content.overflowy .scroll {overflow-y: scroll; max-height:500px;}
	
	.container .subscribe {padding:8px; padding-left:28px; color:white; grid-column-start: 2; align-items: center; grid-column-end: 12; background-color:var(--bg0); height:56px; position: relative; margin-top: -28px; border-radius:28px; display:grid; grid-template-columns:1fr 130px;}
	.container .subscribe .btn {width:130px;}
	.container .subscribe .btn .btn-more {background-color:white; background-image:url(sub-arrow.svg);}
	
	#footer {grid-template-columns:repeat(24,1fr);  grid-template-areas: ". sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub ." " . text text text text text text content content content content content content content content content content content content content content content content . "; padding-top: 3em; column-gap: 0;
    row-gap: 3em;}
	#footer.container .subscribe {margin:0; background: var(--btngrad); color: var(--colour2); grid-area:sub;}
	#footer.container .subscribe .btn {background:white;}
	#footer.container .subscribe .btn .btn-more {background-image: url(more-arrow.svg); background-color: var(--colour2);}
	
	#footer .content {grid-area:content; padding:0; display:grid; grid-template-columns: 1fr 1fr 1fr;}
	#footer .content ul {padding:0; }
	#footer .content ul li {list-style: none; color:white; margin-left:0;}
	#footer .text {grid-area:text; color:white;}
	
	#footer .content h2 {color:white;}
	#footer .text h2 {color:white;}
	
	/* ITEMS */
	.items {display:flex;}
	.overflowx .items {flex-wrap: nowrap; gap:30px; width: fit-content;}
	.overflowy .items {height:fit-content; flex-wrap: wrap;}
	.overflowx .items .item {width:392px; height:510px; background-color:white;}
	
	.overflowx.landscape .item {display:grid; grid-template-columns: 1fr 390px; width:780px; height:auto;}
	.overflowx.landscape .items .item .item-head {order:2; height:auto;}
	.overflowx.landscape .items .item .item-body {order:1;    background-color: var(--bg1);}
	
	.overflowy .items .item {height:216px; width:100%; background-color: white; border-bottom:1px solid var(--outline);}
	
	.flowy .items {display:block;}
	.flowy .item {display:grid; grid-template-columns:2fr 3fr; border-bottom:1px solid var(--colour5); padding:20px 0;}
	.flowy.std .item {display:grid; grid-template-columns:3fr 2fr; padding-left:1em; padding-top:0; gap:40px;}
	.flowy .item:first-child {border-top:1px solid var(--colour5);}
	.flowy.std .item {border-top: 1px solid var(--outline); border-bottom:none;}
	.flowy .item h4 {font-size:24px;}
	.flowy.std .item > div:first-child {padding-top:20px;}
	.flowy.std .scroll > a:last-child {margin-top:20px;}
	.flowy.std .scroll {margin-bottom:2em;}
	
	.page-list .items {display:grid; grid-template-columns: 1fr;}
	.page-list .item {background-color:white; border-top:1px solid var(--colour4); display:grid; grid-template-columns: 1fr 1fr; margin-bottom: 4em;}
	.page-list .item > div {padding:20px 50px 50px 50px;}
	.page-list .item > div:nth-child(2) {background-repeat: no-repeat; background-position: center; background-size: cover; height:350px;}
	.page-list .item h3 {font-size:34px; font-weight:500;}
	.page-list .item h4 {font-size:24px; line-height:32px; font-weight:400; color:var(--colour2); margin-bottom:20px;}
	.page-list .item p, .page-list .item li {margin-bottom:20px;}
	
	.item .icon {background-repeat: no-repeat; background-position: center; background-size: contain; width:60px; height:60px; margin-top: 18px;}
	.item .item-head {height:220px; background-repeat: no-repeat; background-position: center; background-size: cover;}
	.item .item-body {padding:20px;}
	.item .item-sup {font-size:12px; color:var(--colour3);}
	.item .item-title {font-size:24px; line-height:32px; font-weight:600; color:var(--colour2);} 
	.item .item-content {color:var(--colour3); margin-bottom:8px; margin-top:16px;} 
	.item .item-image {height:160px; background-repeat: no-repeat; background-position: center; background-size: cover;}
	.item .readmore {color:var(--colour3); margin-top:8px; display:inline-grid; grid-template-columns: 1fr 24px; height:24px; gap:5px; align-items: center;} 
	.item .readmore .btn-more {background-image:url(sub-arrow-light.svg); background-size: 16px; background-repeat: no-repeat; background-position: center; display:block; height: 24px;}
	
	/* DARK MODE */
	.dark body, .dark h1, .dark h2, .dark .container.content p, .dark .container.content li, .dark a:not(.btn), .dark .container.banner h2, .dark .container.content h2, .dark .container.content h3, .dark .container.content h4, .dark .container.content p, .dark a.btn.btn-viewall {color:white;}
	
	.dark #header .logo {background-image: url('ACCR-white.png');}
	.dark .container .subscribe {background-color:white; color:var(--colour3);}
	.dark .container.content.overflowx, .dark .container {
		background-color: var(--bg0);
		color:white;
	}
	.dark .container.content.content-banner h2, .dark .container.content.content-banner h3 {color:var(--colour2);}
	.dark .overflowx .items .item, .dark .page-list .item, .dark .overflowx.landscape .items .item .item-body {background-color:var(--colour2);}
	.dark .page-list .item {border-color:var(--colour3);}
	.dark .container.content.page-list {background-color:var(--bg0);}
	.dark .item .readmore .btn-more {
    	background-image: url(more-arrow.svg);
	}
	.dark #header .mode-switch {
    	background-color: var(--colour5);
	}
	.dark #header .mode-switch:hover {
    	background-color: var(--bg3);
	}
	.dark #header .mode-switch .mode-switch-pos {
		background-color:var(--bg0);
		margin-top: 16px;
		background-image:url(moon.svg);
	}

	.icon-research {background-image:url('icon-research.png');}
	.icon-company {background-image:url('icon-company.png');}
	.icon-shareholder {background-image:url('icon-shareholder.png');}
	.icon-resource {background-image:url('icon-resource.png');}
	.icon-insights {background-image:url('icon-insights.png');}
	.icon-govern {background-image:url('icon-govern.png');}
	.icon-impact {background-image:url('icon-impact.png');}
	.icon-donate {background-image:url('icon-donate.png');}
	.icon-grants {background-image:url('icon-grants.png');}
	.icon-team {background-image:url('icon-team.png');}
	.icon-careers {background-image:url('icon-careers.png');}
	.icon-overview {background-image:url('icon-overview.png');}
	.icon-support {background-image:url('icon-support.png');}

	@media (max-width: 1439px) {
	  :root {
		  --sitewidth: 100%;
		}
		
		.container.banner {
			grid-template-areas: " . text text text text text text image image image image image ";
		}
		
		
		
	}
	
	@media (max-width: 1199px) {
		:root {
		  --bannerheight: 500px;
		}
		.container.banner h1, .container.banner h2 {
			max-width: 85%;
		}
		
		#header {
			grid-template-areas: " logo logo logo logo logo menu menu menu menu menu menu menuicon";
		}
		
		#header .mobilemenu {
			grid-template-columns: 1fr;
			margin:0;
		}
		
		body.menu-active #header {
			position:fixed;
			top:0;
			z-index: 100;
		}
		
		body #header .mobilemenu {
        	
        	top: 28px;
        	right: 48px;
        	position: absolute;

		}
		
		body.menu-active #wrap {
			margin-top:96px;
		}
		
		body.menu-active #header .mobilemenu {
			position:fixed;
			align-content: start;
        	width: 100%;
        	height: calc(100vh - 96px);
        	top: 96px;
        	background-color: var(--bg2);
			z-index:120;
			left: 0;
		}
		
		#header .search {
			position:relative;
			justify-self: right;
			order:1;
			right: 0;
		}
		
		body.menu-active  #header .search {
			top: -68px;
        	right: 48px;
		}
		
		#header .menu {
			position:relative;
			order:2;
		}
		
		body.menu-active #header .menu ul {
			display: grid;
    		grid-template-columns: 1fr;
			gap: 0;
			margin: 0 1em;
		}
		
		body.menu-active #header .menu ul li {
			padding: 0.5em;
    		border-bottom: 1px solid var(--bg3);
			width:100%;
		}
		
		body.menu-active #header .menu ul li:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}

		#header .menuicon {
			background-image:url('menu.svg');
			background-repeat:no-repeat;
			background-position:center right;
			background-size:20px;
			display:block;
			margin-right:15px;
			position: relative;
		}
		
		.dark #header .menuicon {background-image:url('menu-dark.svg');}
		
		#header .menu ul {
			display:none;
		}
		
		
		#footer {			
			
		}
		
		.dark body.menu-active #header .mobilemenu {
			background-color: var(--bg0);
		}
		
		.dark body.menu-active #header .menu ul li:hover {
			background-color: rgba(0, 0, 0, 0.8);
		}
		
	}
	
	@media (max-width: 999px) {
		.container.banner {
		grid-template-areas: " . text text text text text text text text image image image ";
		}
	}
	
	@media (max-width: 699px) {
		:root {
		  --bannerheight: 500px;
		  --headerheight: 50px;
		}
		
		#header {
			position:fixed;
			z-index: 10;
			top:0;
			grid-template-areas: " logo logo logo logo logo logo logo logo logo logo menuicon menuicon ";
		}
		
		body.menu-active #wrap {
			margin-top:0;
		}
		
		#header .logo {
			background-position: center left;
			margin-left: 1em;
			background-size: auto 30px;
		}
		
		body #header .mobilemenu {
			top:5px;
		}
		
		body.menu-active #header .mobilemenu {
			
        	height: calc(100vh - 50px);
        	top: 50px;
		}
		
		body.menu-active #header .menu {
			top:40px;
    	}
		
		body.menu-active #header .search-input {
			top: 60px;
			width: calc(100vw - 2em);
			position: absolute;
			right: -32px;
		}
		
		body.menu-active #header .search {
			top: -45px;
		}
		
		body:not(.menu-active) #header .search-input {
			display:none;
		}
		
		
		.page-home .container:nth-child(3) {
			padding-top: 4em;
		}
		
		.container.content{
			max-width: 100vw;
		}
		
		.container.content .text {
			max-width: 100vw;
			padding:0 1em;
			margin-bottom: 2em;
		}
		
		.container.content.content-banner {
			grid-template-areas:"banner";
			grid-template-columns:1fr;
			padding: 0;
		}
		
		.container.content.content-banner > div {
			padding-left:0;
			padding-right:0;
			grid-template-columns:1fr;
		}
		
		.container.banner {
			height:auto;
			position:relative;
			grid-template-areas: "text" "sub";
        	grid-template-columns: 1fr;
			margin-top: 50px;
		}
		
		.container.banner > div {
			/*grid-area:none !important;*/
		}
		
		.container.banner .image {
			position:absolute;
			width: 100%;
			z-index:0;
			order:1;
		}
		
		.container.banner .image .image-scrim {
			position:absolute;
			width: 100%;
			top:0;
			height:100%;
			background-color: var(--scrim);
		}
		
		.container.content .content-nav {
			padding:1em;
			border-top: 1px solid var(--colour4);
			margin-top: 1em;
		}
		
		.container.content.page-list {
			grid-template-areas:"text" "content";
			grid-template-columns:1fr;
		}
		
		.page-list .item {
			grid-template-columns: 1fr;
			        margin-bottom: 0;
		}
		
		.page-list .item > div {
			padding-left:1em;
			padding-right:1em;
			position:relative;
		}
		
		.page-list .item > div:first-child {
			order:2;
		}
		
		.page-list .item > div:nth-child(2) {
			order:1;
			height:220px;
		}
		
		.container.content.overflowx, .container.content.flowy.std {
			grid-template-columns: 1fr;
			grid-template-areas:
				" text "
				" contentnav "
				" content ";
		}
		
		.overflowx.landscape .items .item {
			grid-template-columns:1fr;
		}
		
		.overflowx.landscape .items .item .item-head {
			height: 220px;
			order:1;
		}
		
		.overflowx.landscape .items .item .item-b {
			order:2;
		}
		.container.content.flowy {
			grid-template-columns: 1fr;
			grid-template-areas: " text " " content ";
			padding-bottom: 0;
		}
		
		.flowy .item {
			grid-template-columns:1fr;
			
			padding: 2em 1em;
		}
		
		.flowy .item > div:first-child h4 {
			position:relative;
			order: 2;
			padding-left:1em;
		}
		
		.flowy .item > div:first-child .icon {
			position:relative;
			order: 1;
			width: 40px;
       		height: 40px;
        	margin: 0;
		}
		
		.flowy .item > div:first-child {
			display:grid;
			grid-template-columns: 40px 1fr;
			align-content: center;
			align-items: center;
			margin-bottom:1em;
		}6
		
		.flowy.std .item > div:first-child {
			grid-template-columns: 1fr;
			position:relative;
			order:2;
			padding: 1em;
			align-self:flex-start;
		}
		
		.dark .flowy.std .items .item {
			background-color:var(--colour2);
		}
		
		.flowy.std .item > div:nth-child(2) {
			height: 160px;
			position:relative;
			order:1;
		}
		
		.flowy.std .items {
			display:flex;
			flex-wrap: nowrap;
			gap: 30px;
			width: fit-content;
		}
		
		.container.content.overflowx .scroll, .container.content.flowy.std .scroll {
			width: 100vw;
			padding-left: 1em;
		}
		
		.container.content.flowy.std .scroll {
			
			overflow-x: scroll;
			
		}
		
		.flowy.std .items .item, .overflowx .items .item {
			max-width: calc(100vw - 2em);
			width: 392px;
			background-color: white;
			height: auto;
		}
		
		.flowy.std .items .item {
			gap: 0;
    		grid-template-columns: 1fr;
			padding: 0;
			height:auto;
			grid-template-rows: max-content;
		}
		
		.flowy.std .content > a.btn {margin-bottom:2em; margin-left:1em;}
		
		.flowy.std .item > div:first-child > * {
			position:relative;
		}

		.flowy.std .item > div:first-child .item-sup {
			order:1;
			padding-left:0;
		}
		
		.flowy.std .item > div:first-child .item-title {
			order:2;
			padding-left:0;
		}
		
		.flowy.std .item > div:first-child .item-content {
			order:3;
			padding-left:0;
		}
		
		.flowy.std .item > div:first-child .readmore {
			order:4;
			padding-left:0;
		}
		
		.container.banner .text {
			
			width: 100%;
			z-index:1;
		}
		
		.container.banner .text > h1 {
			width: 100%;
			z-index:1;
			margin-left:1rem;
			margin-bottom: 1em;
			color:white;
		}
		
		.container.banner h2 {
			max-width: 100%;
    	}
		
		.container.banner .text > div {
			width: 100%;
			z-index:1;
			padding-left:1em;
			padding-right:1em;
			background-color: white;
        	padding-top: 1em;
        	padding-bottom: 2em;
		}
		
		.dark .container.banner .text > div {
			background-color:var(--bg0);
		}
		
		.dark .container.banner .subscribe {
			background-color:var(--colour2);
			border:none;
			color:white;
		}
		
		.container.banner .subscribe {
			z-index:1;
			border-radius:0;
			order:2;
			grid-area: sub;
			height: auto;
        	padding: 2em 1em;
			margin-top:0;
			grid-template-columns: 1fr;
			gap: 1em;
			padding-bottom:2em;
		}
		
		.container.banner .subscribe > div {
			max-width:85%;
		}
		
		.container.banner .subscribe span.strong {font-size: 24px; margin-bottom:1em; display:block;}
		
		#footer {
			grid-template-columns: 1fr;
			/* grid-template-areas:none; */
			gap:0;
			
			grid-template-columns:1fr; 
			
			grid-template-areas: "text" "sub" "content"; 
		}
		
		#footer.container .content, #footer.container .subscribe {
			display:none;
		}
		
		#footer.container > div {
			/*grid-area:auto !important;*/
		}
		
		#footer.container .text {
			/*grid-area:none !important;*/
		}
		
	}