.pagedetails {
	position: relative;
	overflow: visible;
	z-index: 1;
	height: 300px;
	margin-top: 200px;
	background-color: #33465c
}

.pagedetails::before {
	content: "";
	position: absolute;
	height: 458px;
	bottom: -10px;
	width: 100%;
	background: url('/images/jeunes-educateurs/jeunes-et-adolescents/clouds-footer-xs.png');
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	overflow: hidden;
	z-index: -1;
}

#wb-invo .gc-main-footer {
	z-index: 2;
}

main .stars {
	background: url("/images/jeunes-educateurs/jeunes-et-adolescents/stars-xs.png") repeat-x transparent;
	background-position: left bottom 175px;
}

main {
	background: url("/images/jeunes-educateurs/jeunes-et-adolescents/bg-xs.jpg") no-repeat #000 top center;
}

#content {
	margin-top: 200px;
}

@media (max-width: 767px) {
	h1 {
		transform: scale(.8);
		margin-left: 15px !important;
	}

	#content-header>div.pull-left {
		margin: 0;
		padding: 0;
	}

	#content-header-container .container {
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	h1 {
		margin-left: 60px;
	}

	main .stars {
		background: url("/images/jeunes-educateurs/jeunes-et-adolescents/stars-sm.png") repeat-x transparent;
		background-position: left bottom 0;
	}

	main {
		background: url("/images/jeunes-educateurs/jeunes-et-adolescents/bg-sm.jpg") no-repeat #000 top center;
	}

	.pagedetails::before {
		background: url('/images/jeunes-educateurs/jeunes-et-adolescents/clouds-footer-sm.png');
		height: 501px;
		bottom: -73px;
	}

	#content {
		margin-top: 300px;
	}
}

@media (min-width: 992px) {
	main .stars {
		background: url("/images/jeunes-educateurs/jeunes-et-adolescents/stars-md.png") repeat-x transparent;
		background-position: left bottom 0;
	}

	main {
		background: url("/images/jeunes-educateurs/jeunes-et-adolescents/bg-md.jpg") no-repeat #000 top center;
	}

	.pagedetails::before {
		background: url('/images/jeunes-educateurs/jeunes-et-adolescents/clouds-footer-md.png') no-repeat;
		height: 715px;
		bottom: -179px;
	}

	#content {
		margin-top: 400px;
	}
}

@media (min-width: 1200px) {
	main .stars {
		background: url("/images/jeunes-educateurs/jeunes-et-adolescents/stars-lg.png") repeat-x transparent;
		background-position: left bottom 0;
	}

	main {
		background: url("/images/jeunes-educateurs/jeunes-et-adolescents/bg-lg.jpg") no-repeat #000 top center;
	}

	.pagedetails::before {
		background: url('/images/jeunes-educateurs/jeunes-et-adolescents/clouds-footer-lg.png') no-repeat;
		height: 1050px;
		bottom: -200px;
	}

	#content {
		margin-top: 550px;
		padding-bottom: 450px;
	}
}

main {
	font-family: 'Noto Sans', sans-serif;
}

main * {
	font-family: 'Noto Sans', sans-serif;
}

h1 {
	border: 0 !important;
	margin-top: .2em;
	color: #fff;
	padding-top: .2em;
	font-size: 1.75em;
	text-transform: uppercase;
	position: relative;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

h1::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/logo.png');
	background-size: contain;
	background-repeat: no-repeat;
}


main #content h2 {
	color: #fff !important;
}

@media(min-width: 992px) {
	main #content h2 {
		margin-left: 45px;
	}
}

main #content .tile h3 {
	text-align: center;
	color: #fff;
	border: solid 1px #fff;
	padding: 18px 5px;
	margin: 10px 0;
	width: 100%;
	font-weight: 400;
	border-radius: 4px;
	vertical-align: middle;
	font-size: 1.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

main #content .tile .card::before {
	content: "";
	display: block;
	background-size: cover;
	background-position: center;
	margin: 10px auto;
	width: 150px;
	height: 150px;
}

.tile .card a {
	color: #fff;
	text-decoration: none;
}

.tile .card a:hover,
.tile .card a:focus {
	text-decoration: underline;
}

main #content .tile.book .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/space-book.png');
}

main #content .tile.indigenous-stories .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/indigenous-stories.png');
}

main #content .tile.careers .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/space-careers.png');
}

main #content .tile.explore-earth .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/explore-earth.png');
}

main #content .tile.space-benefits .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/space-benefits.png');
}

main #content .tile.toolkits .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/toolkits.png');
}


main #content .tile.digital-games .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/digital-games.png');
}

main #content .tile.space-activities .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/space-activities.png');
}

main #content .tile.night-sky .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/night-sky.png');
}

main #content .tile.iss .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/iss.png');
}

main #content .tile.colouring .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/colouring.png');
}

.tile.decorate-your-room {
	padding-top: 0 !important;
}

main #content .tile.decorate-your-room .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/decorate-your-room.png');
	height: 175px !important;
	margin-top: 0;
}

main #content .tile.build-things .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/build-things.png');
}

main #content .tile.videos .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/videos.png');
}

main #content .tile.musical-playlists .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/musical-playlists.png');
}

main #content .tile.northern-lights .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/northern-lights.png');
}

main #content .tile.virtual-tour .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/virtual-tour.png');
}

main #content .tile.space-exhibitions .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/space-exhibitions.png');
}

main #content .tile.events .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/events.png');
}

main #content .tile.social-media .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/social-media.png');
}

main #content .tile.blog .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/blog.png');
}

main #content .tile.news-and-updates .card::before {
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/news-and-updates.png');
}

main .tile {
	background-blend-mode: overlay;
	border-radius: 15px;
	width: 100%;
	padding: 15px;
	box-shadow:
		inset 0 3px 3px rgba(255, 255, 255, .6),
		inset 0 -3px 3px rgba(0, 0, 0, .6),
		0 0 15px 15px rgba(105, 62, 185, 0.35);
}

main .read-and-learn .tile {
	background: linear-gradient(to bottom, #6e40bd, #262366),
		url("data:image/svg+xml;utf8,\
					<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
					<filter id='noise' x='0%' y='0%' width='100%' height='100%'>\
					<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
					<feColorMatrix type='saturate' values='0'/>\
					<feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer>\
					</filter>\
					<rect width='100%' height='100%' filter='url(%23noise)'/>\
					</svg>");
}

main .play-and-experiment .tile {
	background: linear-gradient(to bottom, #2d2b6b, #1b3e7e),
		url("data:image/svg+xml;utf8,\
					<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
					<filter id='noise' x='0%' y='0%' width='100%' height='100%'>\
					<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
					<feColorMatrix type='saturate' values='0'/>\
					<feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer>\
					</filter>\
					<rect width='100%' height='100%' filter='url(%23noise)'/>\
					</svg>");
}

main .create .tile {
	background: linear-gradient(to bottom, #264485, #044c63),
		url("data:image/svg+xml;utf8,\
					<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
					<filter id='noise' x='0%' y='0%' width='100%' height='100%'>\
					<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
					<feColorMatrix type='saturate' values='0'/>\
					<feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer>\
					</filter>\
					<rect width='100%' height='100%' filter='url(%23noise)'/>\
					</svg>");
}

main .watch-and-listen .tile {
	background: linear-gradient(to bottom, #044c66, #065d55),
		url("data:image/svg+xml;utf8,\
					<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
					<filter id='noise' x='0%' y='0%' width='100%' height='100%'>\
					<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
					<feColorMatrix type='saturate' values='0'/>\
					<feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer>\
					</filter>\
					<rect width='100%' height='100%' filter='url(%23noise)'/>\
					</svg>");
}

main .visit .tile {
	background: linear-gradient(to bottom, #1a6269, #413791),
		url("data:image/svg+xml;utf8,\
					<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
					<filter id='noise' x='0%' y='0%' width='100%' height='100%'>\
					<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
					<feColorMatrix type='saturate' values='0'/>\
					<feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer>\
					</filter>\
					<rect width='100%' height='100%' filter='url(%23noise)'/>\
					</svg>");
}

main .stay-connected .tile {
	background: linear-gradient(to bottom, #433994, #8f149a),
		url("data:image/svg+xml;utf8,\
					<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
					<filter id='noise' x='0%' y='0%' width='100%' height='100%'>\
					<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
					<feColorMatrix type='saturate' values='0'/>\
					<feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer>\
					</filter>\
					<rect width='100%' height='100%' filter='url(%23noise)'/>\
					</svg>");
}


#content>section {
	margin-bottom: 50px;
}

.read-and-learn .line {
	background: linear-gradient(to bottom,
			transparent 0%,
			transparent 19.9%,
			rgba(98, 83, 174, .32) 20%,
			rgba(56, 47, 147, .32) 80%,
			transparent 80.1%,
			transparent 100%);
}

.play-and-experiment .line {
	background: linear-gradient(to bottom,
			transparent 0%,
			transparent 19.9%,
			rgba(35, 39, 102, .32) 20%,
			rgba(33, 64, 129, .32) 80%,
			transparent 80.1%,
			transparent 100%);
}

.create .line {
	background: linear-gradient(to bottom,
			transparent 0%,
			transparent 19.9%,
			rgba(32, 70, 132, .11) 20%,
			rgba(42, 141, 177, .11) 80%,
			transparent 80.1%,
			transparent 100%);
}

.watch-and-listen .line {
	background: linear-gradient(to bottom,
			transparent 0%,
			transparent 19.9%,
			rgba(101, 165, 174, .28) 20%,
			rgba(41, 187, 158, .28) 80%,
			transparent 80.1%,
			transparent 100%);
}

.visit .line {
	background: linear-gradient(to bottom,
			transparent 0%,
			transparent 19.9%,
			rgba(37, 110, 112, .3) 20%,
			rgba(80, 73, 188, .3) 80%,
			transparent 80.1%,
			transparent 100%);
}

.stay-connected .line {
	background: linear-gradient(to bottom,
			transparent 0%,
			transparent 19.9%,
			rgba(89, 72, 155, .26) 20%,
			rgba(130, 46, 155, .26) 80%,
			transparent 80.1%,
			transparent 100%);
}

#MobileMenuButton {
	color: #fff;
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	background: transparent;
}

.header-bar h1 {
	margin: 0;
	font-size: 1.75em;
	line-height: 1;
	margin-left: 60px;
}

h1::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-image: url('/images/jeunes-educateurs/jeunes-et-adolescents/logo.png');
	background-size: contain;
	background-repeat: no-repeat;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.menu li {
	margin: 0;
	display: inline-block;
}

.menu a {
	display: inline-block;
	margin-top: 2px;
	padding: 2px 4px;
	line-height: 1.6180em;
	text-decoration: none;
	color: #fff;
	font-size: 70%;
}

.menu-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: #fff !important;
}

.menu-button:focus {
	color: #fff !important;
}

.mobile-menu {
	display: none;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #000;
	position: absolute;
	right: 0;
	z-index: 100100;
}

.mobile-menu a {
	display: block;
	padding: 0.6rem 0;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}

@media (min-width: 962px) {
	.menu {
		display: flex;
	}

	.menu-button {
		display: none;
	}

	.mobile-menu {
		display: none !important;
	}
}

.mobile-menu.open {
	display: flex;
}

.menu-wrapper {
	max-width: 70vw;
	overflow-x: auto;
}

.nav-group {
	position: relative;
}

button[aria-expanded="true"] .button-icon::before {
	content: "✕";
}

button[aria-expanded="false"] .button-icon::before {
	content: "☰";
}

nav#mobileMenu ul {
	list-style: none;
	padding-left: 0;
}

nav#mobileMenu ul li {
	white-space: nowrap;
}

@media (min-width: 992px) {

	#content-header-container {
		position: relative;
		background: linear-gradient(to bottom,
				rgba(0, 0, 0, 0.75) 0px,
				rgba(0, 0, 0, 0.75) 75px,
				rgba(0, 0, 0, 0) 200px);
		background-repeat: no-repeat;
		background-size: 100% 200px;
		min-height: 200px;
	}
}

@media (max-width: 991px) {
	.menu {
		display: none;
	}

	#content h2 {
		text-align: center;
	}

}

@media (max-width: 991px) {


	.menu-button {
		margin-left: auto;
		margin-right: 5px;
	}

	.menu-button:focus,
	.menu-button:hover {
		text-decoration: none !important;
	}

	ul#mobileMenu button {
		color: #fff;
	}

	ul#mobileMenu {
		padding-left: 0;
		margin-bottom: 0;
		box-shadow: -7px 7px 7px rgba(69, 81, 214, 0.5);
	}


	ul#mobileMenu li {
		display: block;
	}

	ul#mobileMenu li a {
		display: block;
		padding: 20px;
		color: #fff;
		text-decoration: none;
	}

	ul#mobileMenu li.read-and-learn {
		background: linear-gradient(to bottom, rgba(98, 83, 174, .64), rgba(56, 47, 147, .64));

	}

	ul#mobileMenu li.play-and-experiment {
		background: linear-gradient(to bottom, rgba(35, 39, 102, .64), rgba(33, 64, 129, .64));
	}

	ul#mobileMenu li.create {
		background: linear-gradient(to bottom, rgba(32, 70, 132, .64), rgba(42, 141, 177, .64));

	}

	ul#mobileMenu li.watch-and-listen {
		background: linear-gradient(to bottom, rgba(101, 165, 174, .56), rgba(41, 187, 158, .56));

	}

	ul#mobileMenu li.visit {
		background: linear-gradient(to bottom, rgba(37, 110, 112, .6), rgba(80, 73, 188, .6));

	}

	ul#mobileMenu li.stay-connected {
		background: linear-gradient(to bottom, rgba(89, 72, 155, .52), rgba(130, 46, 155, .52));

	}
}

.splide__slide {
	padding: 30px 30px !important;
	text-align: center !important;
	font-family: sans-serif !important;
	font-size: 1.2rem !important;
	color: #222 !important;
}

.splide__arrow {
	background-color: #262161 !important;
	color: #fff !important;
	border: none !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	border-radius: 50% !important;
	opacity: 0.8 !important;
	transition: opacity 0.3s !important;
}

.splide__arrow--prev {
	left: -2rem !important;
}

.splide__arrow--next {
	right: -2rem !important;
}

.splide__arrow:hover,
.splide__arrow:focus {
	outline: 2px solid #fff !important;
	opacity: 1 !important;
}

.splide__track {
	padding: 1rem 0 !important;
}

.gc-followus {
	margin-top: 0;
	text-align: center;
}

@media(min-width: 768px) {
	.gc-followus {
		margin-top: 0;

	}
}

@media(min-width: 992px) {
	.gc-followus {
		margin-top: -100px;
		margin-left: 45px;
		text-align: left;
	}

	.gc-followus a,
	.gc-followus ul .facebook::before,
	.gc-followus ul .instagram::before,
	.gc-followus ul .linkedin::before,
	.gc-followus ul .twitter::before,
	.gc-followus ul .x-social::before,
	.gc-followus ul .youtube::before,
	.gc-followus ul .rss::before {
		height: 81px !important;
		width: 81px !important;
		min-width: 81px;
	}

	.gc-followus li:first-of-type a {
		margin-left: 0 !important;
	}

	.gc-followus li:last-of-type a {
		margin-right: 0;
	}
}

@media(min-width: 1200px) {
	.gc-followus {
		margin-top: -220px;
	}
}

.gc-followus a {
	margin-left: 10px;
	margin-right: 10px;
}


.gc-followus h2 {
	font-size: 36px !important;
}