@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

:root {
	--max-width: 1440px;
	--theme: #7CCABC;
	--active: #EF4023;
	--dark: #1D4A23;
	--shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
	--spacing: calc((100vw - var(--max-width)) / 2 + 100px);
}

::-moz-selection { color: #fff; background-color: var(--theme) }
::selection { color: #fff; background-color: var(--theme) }

* {
	padding: 0;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box;
	text-decoration: none;
	border: 0;
}

html { scroll-behavior: smooth; }

body:not(.fr) .fr-text { display: none }
body.fr .en-text { display: none }

.delay-half {
	transition-delay: 0.5s;
}

.wrapper {
	margin: 0 auto;
	width: 100%;
	padding: 0 calc(var(--spacing));
}

svg { overflow: visible; }

text {
	fill: #fff;
	font-weight: bold;
}

#ethnicity-by-district-council text {
	fill: #939598;
    font-size: 12px;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: white;
	height: 65px;
	z-index: 500;
	border-bottom: 2px solid var(--theme)
}

header .wrapper,
header .right,
.banner,
.banner .content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logged-in header {
	top: 32px;
}

header .menu-trigger,
header .right .btn {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

header .right .btn {
	background-color: #fff;
    border: 2px solid var(--theme);
    color: var(--theme);
    text-align: center;
    width: 39px;
    height: 33px;
    line-height: 33px;
    padding: 0 5px;
    margin: 0 2px;
    display: inline-block;
}

body:not(.fr) header .en { background-color: var(--theme); color: #fff }
body.fr header .fr { background-color: var(--theme); color: #fff; }

header .year-toggle {
	display: flex;
	flex-direction: row;
	margin-right: 35px;
	align-items: center;
	
	& span {
		font-weight: 600;
		font-size: 16px;
	}
	
	& button.year {
		background-color: transparent;
		border: none;
		appearance: none;
		cursor: pointer;
		font-weight: 700;
		font-size: 24px;
		vertical-align: middle;
		color: var(--theme);
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 7px;
		position: relative;
		
		&::after {
			content: '';
			border: 8px solid transparent;
			border-top-color: var(--theme);
			margin-left: 4px;
      		margin-bottom: -8px;
		}
		
		&:is(:focus, :hover, :focus-within) {
			&::after {
				margin-bottom: 0;
				margin-top: -8px;
				transform: rotate(180deg);
			}
		}
		
		& ul {
			padding: 8px;
			position: absolute;
			top: 100%;
			opacity: 0;
			pointer-events: none;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			gap: 10px;
			& li {
				list-style-type: none;
				& a {
					color: #fff;
					font-size: 14px;
					font-weight: 400;
					line-height: 1.5;
					text-align: center;
					padding: 8px 19px;
					background: var(--theme);
					&:is(:hover, :focus) {
						background-color: var(--active);
					}
				}
			}
		}
		
		&:is(:focus, :hover, :focus-within) ul {
			opacity: 1;
			pointer-events: auto;
		}
	}
}

header .menu-trigger {
	height: 63px;
	background-color: var(--theme);
	color: #fff;
	line-height: 63px;
	margin-left: 38px;
	padding: 0 13px 0 56px;
	position: relative;
	z-index: 10;
	transition: all linear 0.25s;
	border: 1px solid var(--theme);
}

header .menu-trigger.active {
    border: 1px solid currentColor;
}

header .menu-trigger span:before,
header .menu-trigger span:after {
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 25px;
    height: 2px;
    left: 15px;
    border-radius: 5px;
    background-color: #fff;
	transition: all linear 0.25s;
}

header .menu-trigger span:before {
	transform: translateY(-7px)
}

header .menu-trigger span:after {
	transform: translateY(7px);
	box-shadow: 0 -7px 0 #fff;	
}

header .menu-trigger.active span:after {
	box-shadow: 0 0 0 transparent;
	    transform: rotate(45deg);
} 

header .menu-trigger.active span:before {
	    transform: rotate(-45deg);
} 

header .menu {
	position: absolute;
	top: 0;
	right: 0;
	list-style-type: none;
	background-color: var(--theme);
	width: 100%;
	max-width: 527px;
	padding: 97px;
	height: 100vh;
	text-align: right;
	font-size: 32px;
	line-height: 1.1;
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	transition: all linear 0.25s;
	opacity: 0;
	pointer-events: none;
	transform: translateX(10px);
	overflow: auto;
} 

header .menu.active {
	opacity: 1;
	pointer-events: all;
	transform: translateX(0)
}

header .menu li { font: inherit; color: #fff; margin-bottom: 20px; width: 100%; }

header .menu li a {
	color: #fff;
	transition: all linear 0.25s;
}

header .menu li a:is(:hover, :focus, .active) {
	color: #231F20;
}

header .menu li a:is(:hover, :focus, .active) img {
	filter: brightness(0)
}

header .menu li img {
	width: 25px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	transition: all linear 0.25s;
}

main {
	padding-bottom: 113px;
}

.banner {
	background: #231F20;
	color: #fff;
	padding-top: 65px;
	overflow: hidden; 
}

.banner .tiles {
	width: 49.5%;
}

.banner .content {
	width: 50.5%;
	padding-top: 42px;
	flex-direction: column;
	text-align: left;
	align-items: unset;
	padding-left: var(--spacing);
	padding-right: 154px;
}

.fr .banner .content {
	padding-right: 100px;
	padding-top: 22px;
}

.banner p {
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 43px;
}

.fr .banner p {
	font-size: 49px;
	margin-bottom: 35px;
}

.banner p span:not(.bigger) {
	width: 178px;
}

.fr .banner p span:not(.bigger) {
	 width: 240px;
	margin-right: -5px;
}

.banner p small { 
	display: inline-block;
	float: left;
	margin: 0 5px 0 0;
}

.banner p small:first-child, .banner p small:first-child + small {
	font-size: 29px;
}

.banner p span {
	display: inline-block;
    vertical-align: super;
}

.fr .banner p span {
	vertical-align: middle;
}

.banner p .bigger {
	font-weight: 700;
	font-size: 92px;
	line-height: 95%;
	color: var(--active)
}

.banner h1 {
	font-size: min(64px, 18vw);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0em;
}

.banner a {
	padding: 8px 19px;
	width: 264px;
	height: 37px;
	background:  var(--theme);
	color: #fff;
	margin-top: 64px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.fr .banner a {
	width: 300px
}

.banner a:is(:hover, :focus) {
	background-color: var(--active)
}

.banner a :is(span, img) {
	display: inline-block;
    vertical-align: middle;
}

.banner a img {
	margin-left: 10px
}

.banner .tiles {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
}

.banner .tiles svg {
	width: 100%;
	display: block;
}

.banner .tile-3 {
	grid-column: 3 / 5;
    grid-row: 1 / 3;
}

.tile {
	margin: -0.5px;
}

.tile path {
	transition: fill linear 0.25s;
}

.tile-1.active path:last-of-type { fill: #FFD436; }
.tile-2.active path + path { fill: #F4F4F4; }
.tile-3.active path:not(:nth-child(2), :last-child, :nth-last-child(2)) { fill: #FFD436; }
.tile-3.active path:is(:last-child, :nth-last-child(2)) { fill : #7CCABC }
.tile-4.active path,
.tile-16.active path + path { fill: #FFD436 }
.tile-4.active path + path,
.tile-16.active path:first-of-type { fill: #F4F4F4 }
.tile-5.active :is(path:nth-child(2), path:nth-child(5)) { fill: #F4F4F4 }
.tile-5.active :is(path:nth-child(3), path:nth-child(4)) { fill: #EF4023 }
.tile-6.active path + path { fill: #F4F4F4 }
.tile-7.active path { fill: #F4F4F4 }
.tile-7.active path + path,
.tile-8.active path + path { fill: #231F20 }
.tile-9.active path:first-of-type,
.tile-10.active path:first-of-type,
.tile-15.active path:first-of-type { fill: #EF4023 }
.tile-10.active path + path,
.tile-15.active path + path { fill: #231F20 }
.tile-11.active path:first-of-type,
.tile-14.active path:first-of-type { fill: #7CCABC }
.tile-12.active path:first-of-type { fill: #F4F4F4 }
.tile-13.active path + path { fill: #7CCABC }
.tile-17.active :is(path:nth-child(2), path:nth-child(5)) { fill: #231F20 }
.tile-17.active :is(path:nth-child(3), path:nth-child(4)) { fill: #F4F4F4 }

.gallery { border-top: 12px solid var(--active);  width: 100%; position: relative; overflow: hidden; background-color: #000; }

.slider {
	display: flex;
	list-style-type: none; 
	margin-left: -57.3%;
	transition: all linear 0.25s;
}

.slider.no-anim {
	transition: none linear 0.25s;
}

.slider li {
	width: 100%;
	opacity: 0.25;
	transition: all linear 0.25s;
}

.slider li.fadeOut {
	opacity: 0;
}

.slider li.active {
	opacity: 1;
}

.slider li img {
    width: auto;
    display: block;
    height: 40.2vw;
}

.gallery span.arrow {
	position: absolute;
	top: 50%;
	width: 85px;
	height: 85px;
	margin-top: -45px;
	left: var(--spacing);
	z-index: 10;
	background-color: var(--theme);
	background-image: url(../img/white-arrow.svg);
    background-position: 50% 50%;
    background-size: 26px auto;
    background-repeat: no-repeat;
	cursor: pointer;
	transition: all linear 0.25s;
}

.gallery span.arrow:is(:hover, :focus) {
	background-color: var(--active)
}

.gallery span.arrow.right {
	left: auto;
	right: var(--spacing);
	transform: rotate(180deg)
}

.content-box {
	padding: 137px var(--spacing);
	display: flex;
}

.content-box .left {
	width: 36.5%;
}

.content-box .right {
	width: 63.5%;
}

.fr .content-box .left {
	width: 38%
}

.fr .content-box .right {
	width: 61%
}

.content-box h2 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.146;
	color: var(--theme);
}

.content-box p {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 24px
}

.content-box .right p:first-of-type {
	font-weight: bold;
	letter-spacing: -0.1px;
}

.cta {
    padding: 85px calc(var(--spacing) + 30px);
    background-color: #FFD436;
    background-image: url(../img/brand_icon.svg);
    background-size: 265px auto;
    background-position: 50% 50%;
	background-repeat: no-repeat;
    margin-top: 22px;
}

.fr .cta {
	padding-top: 40px;
	padding-bottom: 40px;
}

.cta .text {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

.cta .text p:not(:last-of-type) {
	margin-bottom: 37px;
}

.cta .text p:last-of-type {
    margin-top: -1px;
}

.graph-wrap {
	padding: 160px var(--spacing);
	padding-bottom: 0;
	display: grid;
    grid-template-columns: 49.3% 1fr;
	gap: 20px;
}

.graph-wrap .text {
    display: flex;
    align-content: center;
    align-self: end;
    flex-wrap: wrap;
    padding-bottom: 49px;
}

.graph-wrap .text div {
	width: 400px;
}

#gender.graph-wrap .text div {
	width: 420px;
}

#gender.graph-wrap .text em,
#income.graph-wrap .text em {
	font-style: normal;
	font-weight: normal;
	font-size: 68%;
	margin-top: -6px;
	display: block;
	margin-bottom: -5px;
}

.graph-wrap h3 {
	color: var(--active);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 30px;
}

.graph-wrap p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.graph-wrap p:not(:last-child) {
	margin-bottom: 24px
}

.graph-wrap :is(ol, ul) {
	list-style-type: none;
}

.graph-wrap li {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 7px;
	height: 33px;
	padding-left: 40px;
	position: relative;
	break-inside: avoid-column;
	display: flex;
	align-items: center;
}

.graph-wrap .legend {
	max-width: 390px;
	z-index: 200;
}

.graph-wrap .legend ul {
	column-count: 2;
}

.graph-wrap .legend ul.single {
	column-count: 1;
}

.fr .graph-wrap .legend {
	max-width: 440px
}

.graph-wrap li:before {
	content: '';
	vertical-align: top;
	display: inline-block;
	width: 33px;
	height: 33px;
	background-color: var(--box-color);
	position: absolute;
	left: 0;
	top: 0;
}

.graph-wrap li.pill:before {
	height: 14px;
	border-radius: 20px;
	top: 50%;
	margin-top: -7px;
}

.graph-wrap .chart {
	grid-area: 1 / 2 / 3 / 3;
	display: flex;
}

#increase_of_participants {
	display: flex;
}

#increase_of_participants .text {
	width: 36%;
	padding-bottom: 0;
	align-self: center;
}

#increase_of_participants .chart {
	overflow: auto
}

#increase_of_participants .text div {
	width: 395px;	
}

#increase_of_participants .chart {
	flex: 1
}

#increase_of_participants table {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-weight: bold;
}

#increase_of_participants tr :is(td, th):first-child {
	color: var(--theme);
	width: 178px;
	text-wrap: balance;
	padding-left: 10px;
	padding-right: 10px;
}

#increase_of_participants tr td + td {
	width: auto
}

#increase_of_participants th {
	font-weight: bold;
	color: var(--theme);
	font-size: 22px;
	padding-bottom: 10px;
}

#increase_of_participants th:last-of-type {
	color: var(--active);
}

#increase_of_participants td {
	padding: 24px 14.8px 34px 14.8px;
}

#increase_of_participants td.bottom-line,
#increase_of_participants td.side-line {
	position: relative;
}

#increase_of_participants td.side-line {
	font-weight: normal;
}

#increase_of_participants td.bottom-line {
	padding-bottom: 12px;
	padding-top: 23px;
}

#increase_of_participants td.bottom-line::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: black;
	opacity: 0.25;
	height: 1.5px;
}

#increase_of_participants td.bottom-line.gap-left::after {
	left: 14.8px;
}

#increase_of_participants td.bottom-line.gap-right::after {
	right: 14.8px;
}

#increase_of_participants td.side-line::after {
	content: '';
	position: absolute;
	width: 1.5px;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: black;
	opacity: 0.25;
}

#increase_of_participants td.side-line.gap-top::after {
	top: 14.8px;
}

#increase_of_participants td.side-line.gap-bottom::after {
	bottom: 14.8px;
}

#increase_of_participants .inside {
	color: #fff;
	font-weight: normal;
}

#increase_of_participants .inside.bold {
	font-weight: bold;
}

#increase_of_participants .tab1 {
	background-color: var(--theme);
}

#increase_of_participants .tab2 {
	background-color: var(--active);
}


#ethnicity li:before {
	margin-right: 7px;
}
#ethnicity .text {
	margin-top: 30px
}

@media (min-width: 1000px) {
	#ethnicity .chart {
		padding-left: 19px;
		padding-top: 8px;
	}
}

@media (max-height: 800px) {
	:is(#ethnicity, #ethnicity-by-district-council, #sexual-orientation) .chart svg {
		max-height: calc(88vh - 63px);
		display: block;
		margin: auto;
	}
}

:is(#ethnicity, #ethnicity-by-district-council, #sexual-orientation) .chart svg {
	width: 100%
}

:is(#ethnicity, #gender, #sexual-orientation) svg { opacity: 0; transition: opacity linear 2s 1s; }

:is(#ethnicity, #gender, #sexual-orientation) .play svg { opacity: 1; }

#ethnicity .chart.play .circle1 { animation: Ecircle1 1s linear forwards 1s; stroke: #7CCABC }
#ethnicity .chart.play .circle2 { animation: Ecircle2 1s linear forwards 1s; stroke: #EF4023 }

#ethnicity .chart.play .circle3 { animation: Ecircle3 1s linear forwards 1s; stroke: #fff; stroke-width: 51%;
	transform: scale(1.08) rotate(-58deg) translate(-123px, 83px);
}
#ethnicity .chart.play .circle4 { animation: Ecircle4 1s linear forwards 1s; stroke: #3A5829 }
#ethnicity .chart.play .circle5 { animation: Ecircle5 1s linear forwards 1s; stroke: #843E1C }
#ethnicity .chart.play .circle6 { animation: Ecircle6 1s linear forwards 1s; stroke: #FDBF11 }
#ethnicity .chart.play .circle7 { animation: Ecircle7 1s linear forwards 1s; stroke: #D390BF }
#ethnicity .chart.play .circle8 { animation: Ecircle8 1s linear forwards 1s; stroke: #8051A1 }
#ethnicity .chart.play .circle9 { animation: Ecircle9 1s linear forwards 1s; stroke: #A7A6A6 }

#ethnicity .chart.play .circle10 { animation: Ecircle10 1s linear forwards 1s; stroke: #fff; stroke-width: 51%;
	transform: scale(1.34) rotate(-58deg) translate(-89px, 60px);
}
#ethnicity .chart.play .circle11 { animation: Ecircle11 1s linear forwards 1s; stroke: #55833B }
#ethnicity .chart.play .circle12 { animation: Ecircle12 1s linear forwards 1s; stroke: #AAD18E }
#ethnicity .chart.play .circle13 { animation: Ecircle13 1s linear forwards 1s; stroke: #C6E0B4 }
#ethnicity .chart.play .circle14 { animation: Ecircle14 1s linear forwards 1s; stroke: #E2F0D9 }
#ethnicity .chart.play .circle15 { animation: Ecircle15 1s linear forwards 1s; stroke: #BDD7EE }
#ethnicity .chart.play .circle16 { animation: Ecircle16 1s linear forwards 1s; stroke: #DEEBF7 }
#ethnicity .chart.play .circle17 { animation: Ecircle17 1s linear forwards 1s; stroke: #9EC3E6 }
#ethnicity .chart.play .circle18 { animation: Ecircle18 1s linear forwards 1s; stroke: #C55C28 }
#ethnicity .chart.play .circle19 { animation: Ecircle19 1s linear forwards 1s; stroke: #F3B183 }
/*#ethnicity .chart.play .circle20 { stroke-dasharray: 1610 1600; stroke: #fff; stroke-width: 51%; }*/

@keyframes Ecircle1 { to { stroke-dasharray: 969 1200; } }
@keyframes Ecircle2 { to { stroke-dasharray: 1200 1200; } }

@keyframes Ecircle3 { to { stroke-dasharray: 976 1400; } }
@keyframes Ecircle4 { to { stroke-dasharray: 1087 1400; } }
@keyframes Ecircle5 { to { stroke-dasharray: 1115 1400; } }
@keyframes Ecircle6 { to { stroke-dasharray: 1149 1400; } }
@keyframes Ecircle7 { to { stroke-dasharray: 1180 1400; } }
@keyframes Ecircle8 { to { stroke-dasharray: 1193 1400; } }
@keyframes Ecircle9 { to { stroke-dasharray: 1200 1400; } }

@keyframes Ecircle10 { to { stroke-dasharray: 972 1600; } }
@keyframes Ecircle11 { to { stroke-dasharray: 1007 1600; } }
@keyframes Ecircle12 { to { stroke-dasharray: 1036 1600; } }
@keyframes Ecircle13 { to { stroke-dasharray: 1052 1600; } }
@keyframes Ecircle14 { to { stroke-dasharray: 1063 1600; } }
@keyframes Ecircle15 { to { stroke-dasharray: 1072 1600; } }
@keyframes Ecircle16 { to { stroke-dasharray: 1079 1600; } }
@keyframes Ecircle17 { to { stroke-dasharray: 1086 1600; } }
@keyframes Ecircle18 { to { stroke-dasharray: 1100 1600; } }
@keyframes Ecircle19 { to { stroke-dasharray: 1116 1600; } }

#ethnicity-by-district-council h3 {
	padding-right: 30px
}

#ethnicity-by-district-council .text {
	margin-top: -13px
}

#age {
	grid-template-columns: 1fr 44%;
	grid-template-rows: repeat(2, auto);
}

#gender {
	grid-template-columns: 52% 1fr;
}

:is(#gender, #age, #income) .chart {
	grid-area: auto;
}

#income .chart {
	display: flex;
  flex-direction: column;
}

#age .text {
    justify-content: flex-end;
    padding: 0;
    align-self: center;
}

:is(#gender, #age) .legend {
    column-count: auto;
    padding: 17px 0 17px 57px;
    max-width: 100%;
	margin-top: -17px;
}

#gender .legend {
	padding: 0;
	margin: 0;
	padding: 0;
    margin: 0;
    display: flex;
    align-content: center;
    align-items: center;
}

:is(#gender, #age) .legend  ul {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
}

#gender .legend ul {
	margin-top: -38px
}

#gender li.first-column {
	width: 24%
}

#gender li.second-column {
	width: 41%
}

#gender li:before {
    width: 27px;
    height: 26px;
	margin-right: 20px;
}

:is(#gender, #age) li {
	height: 26px;
	padding-left: 32px;
}

#gender .chart {
	display: flex;
    column-gap: 64px;
    width: 100%;
    justify-content: space-between;
    margin-top: 0;
    grid-column: 1/-1;
}

#gender .chart :is(.first-circle, .second-circle, .third-circle) {
	width: 26%
}

#gender .chart .text,
#income .chart .text {
	text-align: center;
	color: var(--active);
	padding-bottom: 8px;
}

#gender .chart .text p,
#income .chart .text p {
	font-weight: bold;
}

#gender .chart svg {
	width: 100%
}

#gender path {
	transform: translateY(8px);
}

#gender .chart .play .circle1 { animation: Gcircle1 1s linear forwards 1s; stroke: #7CCABC }
#gender .chart .play .circle2 { animation: Gcircle2 1s linear forwards 1s; stroke: #EF4023 }
#gender .chart .play .circle3 { animation: Gcircle3 1s linear forwards 1s; stroke: #9F5892 }
#gender .chart .play .circle4 { animation: Gcircle4 1s linear forwards 1s; stroke: #D1B3CC }
#gender .chart .play .circle5 { animation: Gcircle5 1s linear forwards 1s; stroke: #EF7294 }
#gender .chart .play .circle6 { animation: Gcircle6 1s linear forwards 1s; stroke: #FFD436 }

#gender .chart .play :is(.circle7, .circle10) { animation: Gcircle7 1s linear forwards 1s; stroke: #7CCABC }
#gender .chart .play :is(.circle8, .circle11) { animation: Gcircle8 1s linear forwards 1s; stroke: #EF4023 }
#gender .chart .play :is(.circle9, .circle12) { animation: Gcircle9 1s linear forwards 1s; stroke: #9D5891 }

#gender .chart .play .circle10 { animation-name: Gcircle10 }
#gender .chart .play .circle11 { animation-name: Gcircle11 }
#gender .chart .play .circle12 { animation-name: Gcircle12 }

.graph-wrap .shadow-text {
	text-shadow: 3px 3px 0px rgba(0,0,0,0.25)
}

.graph-wrap .nowrap {
	white-space: nowrap;
}

@keyframes Gcircle1 { to { stroke-dasharray: 235 529; } }
@keyframes Gcircle2 { to { stroke-dasharray: 458 529; } }
@keyframes Gcircle3 { to { stroke-dasharray: 534 529; } }
@keyframes Gcircle4 { to { stroke-dasharray: 540 529; } }
@keyframes Gcircle5 { to { stroke-dasharray: 530 529; } }
@keyframes Gcircle6 { to { stroke-dasharray: 526 529; } }

@keyframes Gcircle7 { to { stroke-dasharray: 272 529; } }
@keyframes Gcircle8 { to { stroke-dasharray: 517 529; } }
@keyframes Gcircle9 { to { stroke-dasharray: 529 529; } }

@keyframes Gcircle10 { to { stroke-dasharray: 286 529; } }
@keyframes Gcircle11 { to { stroke-dasharray: 503 529; } }
@keyframes Gcircle12 { to { stroke-dasharray: 512 529; } }

#age .legend {
	margin-top: 0;
	padding: 23px 0 17px 0px;
}

#age .legend ul {
	justify-content: center;
	column-gap: 90px;
}

#age li:before {
	width: 28px;
	height: 28px;
	    margin-right: 23px;
}

#sexual-orientation {
	grid-template-columns: 43.3% 1fr;
}

#sexual-orientation .legend {
	column-count: auto;
}

:is(#gender, #sexual-orientation, #ethnicity) .chart circle {
	fill: none;
    stroke-width: 50%;
    transform-origin: 50% 50%;
    transform: scale(0.94) rotate(20deg) translate(-34px, 12px);
	stroke-dasharray: 0 1018;
}

#sexual-orientation .chart circle {
	transform: scale(0.94) rotate(-1deg) translate(-34px, -3px);
}

#gender .chart circle {
	transform: scale(0.9) rotate(90deg) translateX(-23px);
	stroke-dasharray: 0 529;
}

#gender .chart .second-circle circle {
	transform: scale(0.94) rotate(78deg) translateX(-7px)
}

#gender .chart .third-circle circle {
	transform: scale(0.9) rotate(63deg) translateX(-23px)
}

.second-circle .text .fr-text {
	white-space: nowrap;
	width: auto;
	transform: translateX(-50%);
	left: 50%;
	position: relative;
}


#gender .chart .third-circle circle {
	transform: scale(0.97) rotate(63deg)
}

#ethnicity .chart circle {
	transform: scale(0.8) rotate(-57deg) translate(-154px, 105px);
	stroke-dasharray: 0 1200;
}

#ethnicity .chart circle.bigger {
	transform: scale(1.08) rotate(-57deg) translate(-123px, 83px);
	stroke-dasharray: 0 1400;
}

#ethnicity .chart circle.biggest {
	transform: scale(1.34) rotate(-57deg) translate(-89px, 60px);
	stroke-dasharray: 0 1600;
}

#sexual-orientation .chart.play .circle1 { animation: SOcircle1 1s linear forwards 1s; stroke: #7CCABC }
#sexual-orientation .chart.play .circle2 { animation: SOcircle2 1s linear forwards 1s; stroke: #EF4023 }
#sexual-orientation .chart.play .circle3 { animation: SOcircle3 1s linear forwards 1s; stroke: #FFD436 }
#sexual-orientation .chart.play .circle4 { animation: SOcircle4 1s linear forwards 1s; stroke: #9F5892 }
#sexual-orientation .chart.play .circle5 { animation: SOcircle5 1s linear forwards 1s; stroke: #D1D3D4 }

@keyframes SOcircle1 { to { stroke-dasharray: 832 1018; } }
@keyframes SOcircle2 { to { stroke-dasharray: 925 1018; } }
@keyframes SOcircle3 { to { stroke-dasharray: 996 1018; } }
@keyframes SOcircle4 { to { stroke-dasharray: 1001 1018; } }
@keyframes SOcircle5 { to { stroke-dasharray: 1018 1018; } }

#persons-with-disabilities {
	grid-template-columns: 39.7% 1fr;
}

#persons-with-disabilities .graph-wrap .chart {
	grid-area: 1/2;
}

:is(#persons-with-disabilities, #age) svg { width: 100%; height: 100% }

:is(#ethnicity, #sexual-orientation, #gender) path { opacity: 0; transition: opacity linear 0.25s }
:is(#ethnicity, #sexual-orientation, #gender) path.show { opacity: 1 }

#income .bar {
	padding: 8px 26px;
	display: flex;
	justify-content: space-between;
	color: #fff;
	background-color: var(--bg);
	font-weight: bold;
	font-size: 18px;
  	align-items: center;
}

#income .bar .bigger {
	font-size: 24px;
}

#income .chart .text {
	margin-bottom: 19px;
}

#income .chart div.table:nth-child(1) {
	margin-bottom: 52px;
}

#income .chart div {
	width: 100%;
	max-width: 464px;
}

#income .chart + .text div {
	width: 100%;
}

#income .chart + .text {
	align-self: center;
	max-width: 560px;
	margin-right: auto;
	padding-bottom: 94px;
	font-size: 24px;
	padding-left: 33px;
}

footer {
	background-color: #231F20;
	color: #fff;
	padding: 61px 0;
}

footer .logo {
	filter: brightness(0) invert(1)
}

footer address {
	float: right;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.334;
    text-align: right;
    font-style: normal;
}

footer address p {
	margin-bottom: 17px;
}

footer address a { color: #fff; }
footer address a:is(:hover, :focus) { color: var(--active); text-decoration: underline }

footer .copywrite {
    clear: both;
    text-align: center;
    padding-top: 83px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--active);
    padding-bottom: 12px;
}

@media (max-width: 1250px) {
	:root {
		--spacing: 30px
	}
}

@media (max-width: 1000px) {
	header .wrapper, footer .wrapper {
		padding-left: 0;
		padding-right: 0;
	}
	.logged-in header {
		top: 46px;
	}
	header .logo {
		position: absolute;
		top: 14px;
		left: 20px;
	}
	header .wrapper, header .right {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		width: 100%;
		flex-wrap: wrap;
	}
	header .right {
		justify-content: right;
	}
	header :is(.year-toggle, .lang) {
		width: 33.33%;
		margin: 0;
		align-items: center;
		text-align: center;
		justify-content: center;
		padding: 20px;
	}
	header .menu-trigger {
		width: 100%;
		display: block;
		margin: 0;
		text-align: center;
		padding: 0;
		height: 48px;
		line-height: 48px;
	}
	header .menu-trigger span {
		position: relative;
		padding: 0 11px 0 54px;
	}
	header .right .lang {
		padding: 13px 19px 19px 19px;
		text-align: right;
	}
	.banner {
		padding: 158px 0 0 0;
	}
	.banner .content {
		width: 100%;
		padding: 0 14px;
	}
	.banner p {
		font-size: min(28px, 7.1vw);
	}
	.banner p span:not(.bigger) {
		width: 39%;
	}
	.banner p .bigger {
		font-size: min(72px, 18vw);
		width: 58%;
	}
	.banner {
		flex-wrap: wrap;
	}
	.banner a {
		width: 100%;
		max-width: 300px;
		margin: 79px auto 57px auto
	}
	.banner .tiles {
		width: 100%
	}
	.banner .tiles {
		grid-template-columns: repeat(5, 1fr);
	}
	.tile { order: 20; }
	
	.tile-1 { order: 5;	}
	.tile-2 { order: 10;	}
	.banner .tile-3 {
		grid-column: 4/6;
    	grid-row: 3/5;
	}
	.tile-4 { order: 4;	}
	.tile-5 { order: 9;	}
	.tile-6 { order: 3;	}
	.tile-7 { order: 8;	}
	.tile-8 { order: 13; }
	.tile-9 { order: 16; }
	.tile-10 { order: 5 }
	.tile-11 { order: 1; }
	.tile-12 { order: 12 }
	.tile-13 { order: 15; }
	.tile-14 { order: 7; }
	.tile-15 { order: 2; }
	.tile-16 { order: 11 }
	.tile-17 { order: 14; }
	
	.tile-11, .tile-15, .tile-5, .tile-10, .tile-14 {
		transform: rotate(-90deg);
	}
	.tile-4, .tile-2, .tile-16, .tile-12, .tile-17, .tile-9, .banner .tile-3, .tile-7 {
		transform: rotate(90deg);
	}
	
	.graph-wrap .legend,
	.content-box .left, .content-box .right { width: 100% }
	.slider li img { height: 56vw }
	.slider { margin-left: -100vw; }
	.gallery { border-top: 0; }
	.gallery span.arrow { display: none; }
	
	:is(.en, .fr) .content-box :is(.left, .right) {
		width: 100%
	}
	.content-box {
		padding: 95px 21px 42px 21px;
		display: flex;
		flex-wrap: wrap;
	}
	.content-box h2 { 
		font-size: min(40px, 10.2vw);
		margin-bottom: 72px
	}
	.cta {
		padding: 15px 19px;
		background-image: none; 
	}
	.cta .text {
		font-size: min(16px, 4.05vw)
	}
	
	.cta .text p:last-of-type {
		font-size: min(16px, 2.03vw);
	}
	
	#income .chart + .text,
	.graph-wrap .text,
	#income .chart div,
	.graph-wrap p, .graph-wrap .text div, #gender.graph-wrap .text div { max-width: 100%; width: 100%; }
	
	#income .chart + .text { padding-left: 0;}
	
	.graph-wrap {
		padding: 85px 21px 72px 21px;
		display: flex;
		flex-wrap: wrap;
	}
	
	#increase_of_participants .text div,
	#increase_of_participants .text { width: 100% }
	
	.graph-wrap .text { order: 0; }
	:is(.en, .fr) .graph-wrap .legend {
		order: 2;
		padding: 46px 0 0 0;
		max-width: 100%;
		width: 100%;
	}
	.graph-wrap .chart { order: 1; width: 100%; }
	.graph-wrap li:before {
		width: 28px;
		height: 28px;
	}
	.graph-wrap li {
		font-size: min(2.8vw, 12px);
		margin-bottom: 9px
	}
	.graph-wrap svg {
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
		display: block; 
	}
	#ethnicity .text { margin: 0; }
	:is(#gender, #age) .text { padding-top: 0;}
	#gender .chart {
		display: block
	}
	#gender svg {
		margin-bottom: 40px
	}
	:is(#gender, #age) .legend {
		padding: 0; 
	}
	#age .legend {
		padding-top: 30px 
	}
	#gender li:before {
		width: 28px;
		height: 28px;
		margin-right: 13px;
	}
	#gender li {
		font-size: min(2.8vw, 12px);
		width: 100%;
		margin-bottom: 9px;
		padding-right: 20px;
	}
	#gender li.first-column, #gender li.second-column {
		width: 100%
	}
	#gender .legend {
		max-width: none;
		margin-top: 17px;
	}
	main {
		padding-bottom: 88px;
	}
	footer {
		padding: 30px 0
	}
	footer .logo, footer .logo img {
		display: block;
		margin: 0 auto;
	}
	footer address {
		float: none;
		text-align: center;
		padding: 31px 0 0 0;
	}
	footer .copywrite {
		padding: 12px 37px;
	}
	header .menu {
		top: 113px;
		max-height: calc(100vh - 113px);
		text-align: center;
		padding: 35px 0;
		font-size: min(6.2vw, 24px);
		align-content: space-around;
	}
	header .menu li {
		margin: 0;
		padding: 0;
	}
	header .menu li img {
		width: 23px
	}
	header .menu-trigger,
	header .menu-trigger.active {
		border: none
	}
	header .menu {
		transform: translateY(-10px);
	}
	
	#gender .legend ul {
		display: block;
		column-count: 2;
		margin-top: 0;
	}
	

	#gender path {
		transform: none;
	}
	#gender .chart svg, #gender .chart :is(.first-circle, .second-circle, .third-circle) {
		width: 100%
	}
	
}


@media (max-width: 700px) {
	header :is(.year-toggle, .lang) { width: auto }
	header .year-toggle {
		width: 100%;
		order: 1;
		padding: 0;
	}
	.banner {
		padding: 200px 0 0 0;
	}
}