/* COLOURS FOR COURSES PAGE 
		UD red #ED1C30 rgba(237, 28, B48)
		UD pink #F5A4C7 rgba(245, 164, 199,1)
		UD blue #074AE1 rgba(7, 74, 225)
		UD yellow #F7C411 rgba(247, 196, 17)
		UD green #8CD4AC rgba(140, 212, 172)
		UD white #EEEEEC rgba(238, 238, 236)
		UD black #090909 rgba(9, 9, 9)
	*/

	/** { border: solid 1px black;}*/

	body {
		font: 16px/20px 'Neue Kabel Light';
		vertical-align: middle;
		text-align: justify;
	}


	@media (min-width: 992px) {
		body {
			font: 18px/20px 'Neue Kabel Regular';
		}
	}

	h1,
	h2,
	h3,
	h4 {
		font: 40px/40px 'Neue Kabel Extrabold';
		text-align: center;
		margin: 20px 0;

	}

	h1 {
		font: 40px/40px 'Neue Kabel Extrabold';
		margin: 20px 0;
	}

	h2 {
		font: 30px/40px 'Neue Kabel Extrabold';
	}

	h3 {
		font: 25px/40px 'Neue Kabel Book';
	}

	p {
		margin-bottom: 20px;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	section {
		padding: 0 10px;
		position: relative;
	}

	@media (min-width: 600px) {
		section {
			padding: 0 20px;
		}
	}

	section>p {
		display: block;
		text-align: justify;
		max-width: 600px;
		margin: 0 auto 20px auto;
	}


	.wrap {
		display: block;
		max-width: 900px;
		margin: 0 auto;
	}

	.bg-yellow {
		background-color: #F7C411;
	}

	.bg-light-yellow {
		background-color: rgb(252, 227, 134);
	}

	.bg-pink {
		background-color: #F5A4C7;
	}

	.bg-lightpink {
		background-color: #f8c6dc;
	}

	.bg-green {
		background-color: #8CD4AC;
	}

	.bg-lightgreen {
		background-color: #cef5df;
	}

	img {
		width: 100%;
	}


	/* Courses frontpage. MARK: Course frontpage
---------------*/


		section#courses-frontpage {
			padding-top: 40px;
		}


	#courses-frontpage #redCurtain-frontpage {
		height: 120%;
		min-height: 100lvh;
		width: 150px;
		float: left;
		position: absolute;
		left: 20lvw;
		top: 0px;
		z-index: -5;
		background: #ed1C30;
		background: linear-gradient(180deg, rgba(237, 28, 48, 1) 1%, rgba(237, 28, 48, 1) 55%, rgba(255, 255, 255, 1) 70%);
	}

	@media (min-width: 992px) {
		#courses-frontpage #redCurtain-frontpage {
			width: 300px;
			left: 30lvw;
			background: linear-gradient(180deg, rgba(237, 28, 48, 1) 1%, rgba(237, 28, 48, 1) 75%, rgba(255, 255, 255, 1) 90%);

		}
	}

	.buy-button {
		width: 180px;
		height: 40px;
		margin: 0 20px 20px 0;
		border-radius: 50px;
		background-color: #ed1C30;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font: 16px/20px 'Neue Kabel Book';
		outline: solid 1px white;
	}

	.hero-description {
		padding-bottom: 20px;
		text-align: center;
		font: 20px/20px 'Neue Kabel Bold';
	}

	.hero-trailer-wrapper {
		/*border: solid 20px red;*/
		min-height: 220px;
	}

	.hero-trailer {
		width: 355px;
		height: auto;
		aspect-ratio: 16 / 9;
		border: none;
		display: block;
		margin: 0 auto;
	}

	.course-frontpage-course-summary-with-CTA {
		font: 15px/20px 'Neue Kabel Regular';
		max-width: 600px;
		margin: 0 auto;
	}

	.CTA-container {
		display: flex;
		justify-content: center;
		align-items: start;
		flex-wrap: nowrap;
		text-align: center;
		margin: 40px 0 20px 0;
	}

	.course-frontpage-teacher {
		font: 15px/20px 'Neue Kabel Italic';
		color: #000;
		display: flex;
		max-width: 600px;
		margin: 0 auto;
	}

	@media (min-width: 992px) {
		.course-frontpage-teacher {
			font: 15px/20px 'Neue Kabel Italic';
			color: #999;
			display: flex;
		}
	}


	.inline-image-left {
		/*float: left;*/
		width: 120px;
		height: 120px;
		margin: 0 20px 20px 0;
		clear: both;
		border-radius: 50%;
		user-select: none;
	}

	.badges {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
		width: auto;
		max-width: 600px;
		margin: 0 auto;
	}

	.singlebadge {
		margin: 20px 0 0 0;
		width: calc(50lvw - 30px);
		max-width: 290px;
	}

	.badges div img {
		border-radius: 50%;
		height: 60px;
		width: 60px;
		display: block;
		margin: 0 auto;
		user-select: none;
	}

	.badge-title {
		font: 16px/40px 'Neue Kabel Bold';
		text-align: center;
	}

	.badge-paragraph {
		font: 15px/20px 'Neue Kabel Regular';

	}

	@media (min-width: 992px) {

		/* XL RESPONSIVE */
		section#courses-frontpage {
			display: flex;
			justify-content: flex-start;
			align-items: start;
			flex-wrap: nowrap;
			padding-bottom: 100px;
			padding-top: 40px;
		}

		.courses-frontpage-lefthalf {
			width: calc(30lvw + 265px);
			padding-top: 40px;
			flex-grow: 0;
			flex-shrink: 0;
			margin-left: 20px;
			padding-left: 200px;
			padding-right: 40px;
		}

		.courses-frontpage-righthalf {
			/* this works if the title is 2 lines lone */
			flex-grow: 1;
			margin-right: 100px;
			margin-top: 300px;
			max-width: 800px;
		}

		.courses-frontpage-righthalf.higher {
			margin-top: 220px;

		}

		#courses-frontpage h1 {
			/* hugetitle */
			font: 70px/80px 'Neue Kabel Extrabold';
			text-align: left;
			user-select: none;

		}

		.hero-description {
			font: 20px/40px 'Neue Kabel Bold';
			user-select: none;
			text-align: left;

		}

		.hero-trailer {
			width: 100%;
			max-width: calc(30lvw + 150px);
			text-align: left;
			margin: 0;
		}

		.course-frontpage-righthalf-innerstructure {
			display: flex;
			justify-content: center;
			align-items: start;
			/*gap: 20px;*/
		}

		.course-frontpage-course-summary-with-CTA {
			width: calc(50% - 30px);
			flex-shrink: 0;
			flex-grow: 0;
		}

		.CTA-container {
			justify-content: flex-start;
		}

		.course-frontpage-teacher {
			width: calc(50% - 30px);
			flex-shrink: 0;
			flex-grow: 0;
			display: block;
		}

		.course-frontpage-teacher p {
			/*max-width: 75%;*/
		}

		.inline-image-left {
			display: block;
			height: 140px;
			width: 140px;
		}

		.badges {
			padding-top: 40px;
			gap: 20px;
			width: calc(100% - 40px);
			margin: 0 auto;
		}

		.singlebadge {
			width: calc(25% - 15px);
			max-width: 25%;
		}
	}



















	/* MARK: Course outline
*/

	section#courses-contentsummary {}

	.centeredvideos {
		display: block;
		margin: 0 auto;
		max-width: 400px;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.surcofriendship p {
		text-align: center !important;
	}

	.curriculum-card {
		background-color: #EEEEEC;
		border-left: solid 5px #F7C411;
		border-radius: 5px;
		margin: 20px auto 0 auto;
		overflow: auto;
		user-select: none;
		transition: all 200ms ease-in-out;
		max-width: 600px;
	}

	.curriculum-card.pink {
		border-color: #F5A4C7;
		--cardColor: #F5A4C7;
	}

	.curriculum-card.yellow {
		border-color: #F7C411;
		--cardColor: #F7C411;
	}

	.curriculum-card.green {
		border-color: #8CD4AC;
		--cardColor: #8CD4AC;
	}

	.curriculum-card.red {
		border-color: #ED1C30;
		--cardColor: #ED1C30;
	}


	.curriculum-card:hover {
		cursor: pointer;
	}

	.curriculum-card.pink {}

	.curriculum-card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all 200ms ease-in-out;

	}

	.curriculum-card.selected-card .curriculum-card-header {
		background-color: var(--cardColor);
	}

	.curriculum-card-header h3 {
		margin: 10px 0;
		display: block;
		padding-left: 10px;
		text-align: left;
	}

	.info-toggle {
		color: #aaaaaa;
		flex-grow: 0;
		font-size: 10pt;
	}

	.info-toggle span {
		font-size: 8pt;
	}

	.info-toggle span {
		display: inline-block;
		position: relative;
		transition: all 200ms ease-in-out;
		top: 0px;
		/*transform: rotate(180deg);*/
	}

	.selected-card .info-toggle {
		color: black;
	}

	.selected-card .info-toggle span {
		/* when card is selected, roate the More Info arrow */
		transform: rotate(180deg);
		top: -2px;
	}

	.curriculum-card-content {
		display: block;
	}

	.curriculum-card-content.selected-card {
		display: block;
		visibility: visible;
		background-color: #F7C411;
		opacity: 1;
		height: auto;
	}

	.curriculum-card .info-toggle {
		display: block;
		flex-grow: 0;
		padding-right: 10px;
	}


	.curriculum-card h3 {
		font: 16px/20px 'Neue Kabel Bold';
	}

	.curriculum-card-img {
		width: 100%;
		/*max-width: 350px;*/
		/* TRYING MAKING THIS OFF */
		display: block;
		margin: 0 auto;
	}

	.curriculum-card-content p {
		padding: 10px;
		margin: 0;
	}

	@media (min-width: 640px) {
		section#courses-contentsummary {
			max-width: 900px;
			margin: 80px auto 0 auto;
			padding-bottom: 40px;
		}

		.curriculum-card-img {
			float: left;
			margin-right: 10px;
		}

	}



	/* MARK: LAYOUT
*/

	.layout-LR-50 {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: start;
		gap: 20px;
		margin-bottom: 20px;
		width: 100%;
	}

.layout-LR-50.narrow {
		max-width: 600px;
		margin: 0 auto;		
}

	.layout-LR-50-L,
	.layout-LR-50-R {
		flex-grow: 1;
		width: 50%;
	}

.layout-LR-50-L.lefticon {
		flex-grow: 0;
		width: 40px;
}


	.layout-LR-50 h3 {
		margin-top: 0;
		margin-bottom: 20px;
		text-align: center;
	}
	.layout-LR-50 h3.nomargin {
		margin-bottom: 0px;
	}

	.layout-LR-50 .flex-grow {
		flex-grow: 1;
		flex-basis: 50%;
	}

	.layout-LR-50 img.ratio16-9 {
		height: 180px;
		width: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		margin: 0;
	}



	.max50 {
		max-width: 50%;
	}

	.layout-LR-50 li {
		text-align: left;
	}


	@media (min-width: 650px) {

		.layout-LR-50 {
			flex-wrap: nowrap;
		}

		.layout-LR-50 h3 {
			text-align: left;
		}
	}

	.layout-singlecolumn {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px 0;
	}


	.squiggle-as-an-ornament {
		display: block;
		width: 60px;
		margin: 20px auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* MARK: Testimonials
*/

	section#courses-testimonials {
		margin: 40px auto;
		padding: 40px 0;
	}

	.testimonials {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
	}

	.singletestimonial {
		margin: 0px 0 0 0;
		width: calc(50lvw - 30px);
		max-width: 300px;
	}

	.testimonials div img {
		border-radius: 50%;
		height: 120px;
		width: 120px;
		display: block;
		margin: 0 auto;
		user-select: none;
	}

	.testimonial-name {
		font: 16px/40px 'Neue Kabel Bold';
		text-align: center;
	}

	.testimonial-paragraph {}

	@media (min-width: 992px) {
		section#courses-testimonials {
			max-width: 900px;
			margin: 0 auto;
		}
	}

	/* MARK: Resources
*/
	section#courses-posters-and-multimedia {
		background-color: #F7C411;
		/*background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(247, 196, 17) 5%, rgba(247, 196, 17) 95%, rgba(255, 255, 255, 1) 100%);*/

		border-radius: 0;
		margin: 0;
		padding: 10px 20px;
	}

	#courses-posters-and-multimedia p {
		text-align: justify;
	}

	.simple-gallery {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
	}

	.simple-gallery img {
		width: 45%;
		max-width: 200px;
	}

	.resourcesIMG.samplepack {
		width: 100%;
		margin-top: 20px;
	}

	.smallerposter {
		width: auto;
		margin: 0 auto;
		display: block;
		max-height: 400px;
	}

	@media (min-width: 992px) {
		section#courses-posters-and-multimedia {
			margin: 0 auto;
			padding: 20px 0 40px 0;
		}

		.resources-flexwrapper {
			display: flex;
			justify-content: center;
			gap: 20px;
		}

		.resources-lefthalf,
		.resources-righthalf {
			width: calc(50% - 10px);
			flex-grow: 0;
			flex-shrink: 0;
		}

		.smallerposter {
			margin: 0 auto;
			display: block;
		}

	}


	/* MARK: FAQ
--------------------------*/

	#courses-FAQsection {
		max-width: 900px;
		display: block;
		margin: 0 auto;
	}

	#what-is-foundations {
		max-width: 900px;
		display: block;
		margin: 40px auto;
		padding: 60px 0;
	}



	#more-courses {
		padding: 20px 0 40px 0;
		margin: 40px 0;
		text-align: center;
	}

	#more-courses h2 {
		margin-top: 0;

	}

	#more-courses p {
		max-width: 600px;
		text-align: justify;
		margin: 0 auto;
		display: block;
		margin-bottom: 20px;
	}

	#more-courses ol {
		max-width: 600px;
		text-align: left;
		margin: 0 auto;
		display: block;
		margin-bottom: 20px;
	}

	#more-courses ol li {
		margin-bottom: 20px;
	}

	/* MARK: maybe try classroom?
--------------------------*/


	section#or-maybe-try-the-classroom {
		background-color: #F7C411;
		border-radius: 5px;
		margin: 40px;
		margin-top: 80px;
		padding: 20px 20px;
	}

	@media (min-width: 992px) {
		section#or-maybe-try-the-classroom {
			max-width: 900px;
			margin: 40px auto 0 auto;
		}
	}













	/* MARK: Navbar
----------------------*/


	nav {
		position: fixed;
		top: 0px;
		translate: 0 -60px;
		z-index: 50;
		opacity: 0;

		background-color: #ed1C30;
		height: 60px;
		padding: 10px 0px;
		width: 100%;
		font: 16px/20px 'Neue Kabel Bold';
		text-align: center;

		transition: all 500ms ease-in-out;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav.shown {
		background-color: #fff;
		top: 60px;
		opacity: 1;
	}

	#nav-home {
		flex-grow: 0;
		padding-left: 20px;
		font: 16px/40px 'Neue Kabel Italic';
	}

	#nav-pagetitle {
		flex-grow: 1;
		padding: 0px 20px;
	}

	#nav-login {
		flex-grow: 0;
		padding-right: 20px;
		font: 16px/40px 'Neue Kabel Italic';
	}



	/* MARK: Nav XL
---------------------*/

	@media (min-width: 992px) {
		nav {
			font: 30px/40px 'Neue Kabel Bold';

		}

	}