@charset "UTF-8";


	/* 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)
	*/

/* VERSION CANARY */


@font-face {
    font-family: 'Neue Kabel Thin';
    src: url('../assets/NeueKabel/Neue Kabel W01 Thin.woff2');
}

@font-face {
    font-family: 'Neue Kabel Light';
    src: url('../assets/NeueKabel/Neue Kabel W01 Light.woff2');
}
@font-face {
    font-family: 'Neue Kabel Regular';
    src: url('../assets/NeueKabel/Neue Kabel W01 Regular.woff2');
}

@font-face {
    font-family: 'Neue Kabel Medium';
    src: url('../assets/NeueKabel/Neue Kabel W01 Medium.woff2');
}
@font-face {
    font-family: 'Neue Kabel Book';
    src: url('../assets/NeueKabel/Neue Kabel W01 Book.woff2');
}
@font-face {
    font-family: 'Neue Kabel Bold';
    src: url('../assets/NeueKabel/Neue Kabel Bold.woff2');
}
@font-face {
    font-family: 'Neue Kabel Extrabold';
    src: url('../assets/NeueKabel/Neue Kabel W01 ExtraBold.woff2');
}
@font-face {
    font-family: 'Neue Kabel Italic';
    src: url('../assets/NeueKabel/Neue Kabel W01 Italic.woff2');
}



/* GLOBAL STYLES */

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: 0;
	margin-bottom: 20px;
}

section {
	padding: 0;
} 
ul { margin: 0; }

strong {
		font-family: 'Neue Kabel Bold';
}



.big-to-do {
color: red;
text-align: center;
}

/* MARK: ALERTS 
-------------------------*/


/* 

There are 2 types of news: 
- Round stickers on the homepage, and 
- Slanty text just above the courses 

*/

.news-sticker {
		position: absolute;
		bottom: 0;
		left: 0;

		font-family: 'Neue Kabel Book';
		font-size: 10pt;
		background-color: #F7C411;

		z-index: 100;
		text-align: center;

		padding: 20px 10px 10px 10px;

		width: 130px;
		height: 130px;
		border-radius: 100px;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		transform: rotate(-10deg);
		opacity: 0.9;

		zoom: 1;
		scale: 0.9;
		/*display: none; /* ONLY SHOW WHEN NEEDED */
}
	.news-sticker span {
		font-family: 'Neue Kabel Extrabold';
		font-size: 10pt;
	}

	.news-sticker.second {
		background-color:  #8CD4AC;
		bottom: 40px;
		left: 70%;
		transform: rotate(20deg);
		opacity: 0.95;
		zoom: 0.8; 
		/*display: none; /* ONLY SHOW WHEN NEEDED */
	}

	.news-sticker.third {
		background-color: #F5A4C7;
		bottom: 140px;
		left: 60%;		
		transform: rotate(10deg);
		opacity: 0.95;
		zoom: 0.8;
		display: none; /* ONLY SHOW WHEN NEEDED */
	}
	@media (min-width: 992px) {
		.news-sticker {	zoom: 1.2; }
		.news-sticker.second {	zoom: 1; left: 70%;}
		.news-sticker.third {	zoom: 1; left: 70%;}
	} 


	#newsbox-above-courses {
		display: block; 
		margin: -20px auto 20px auto;
		height: 60px;
		line-height: 50px;
		width: 70lvw;
		max-width: 500px;
		padding: 5px 10px;
		text-align: center;
		font-family: 'Neue Kabel Medium';
		background-color: #ffd641;
		transform: rotate(2deg);
	}
	#newsbox-above-courses span {
		font-family: 'Neue Kabel Extrabold';
	}
	@media (max-width: 660px){
		#newsbox-above-courses {
			line-height: 25px;
		}

			
	}


/* end of ALERTS */

/* ----------------------------------------------
Mobile-first CSS, declaring all elements for small screens first and then for large screens
There is only 1 big breakpoint in the CSS.
---------------------------------------------*/

/* MARK: NAV GLOBAL
*/ 
	#homenav {
		position: absolute;
		left: 3lvw;
		top: 4lvw;
		padding: 5px;
		font-family: 'Neue Kabel Italic';
		font-size: 14pt;
		text-decoration: underline;
		text-decoration-thickness: 5px;
  		text-decoration-color: var(--global-UD);
		z-index: 101;
		background-color: #fff;
	}
	#homenav:before {
    	content: "\00BB";
    	margin-right: 6px;
		color: var(--global-UD);
		position: relative;
		display:inline-block;
		top: -3px;
		text-decoration: none !important;
	}

	#frontpage-login {
		position: absolute;
		right: 3lvw;
		top: 4lvw;
		padding: 5px;
		font-family: 'Neue Kabel Italic';
		font-size: 14pt;
		text-decoration: underline;
		text-decoration-thickness: 5px;
  		text-decoration-color: var(--global-UD);
		z-index: 101;
		background-color: #fff;
	}

	#frontpage-login:before {
    	content: "\00BB";
    	margin-right: 6px;
		color: var(--global-UD);
		position: relative;
		display:inline-block;
		top: -3px;
		text-decoration: none !important;
	}
@media (min-width: 992px) {
	
	#homenav {
		position: absolute;
		left: 2lvw;
		top: 2lvw;
		padding: 5px;
		font-family: 'Neue Kabel Italic';
		font-size: 18pt;
		text-decoration: underline;
		text-decoration-thickness: 5px;
  		text-decoration-color: var(--global-UD);
		z-index: 101;
		background-color: #fff;
	}
	#homenav:before {
    	content: "\00BB";
    	margin-right: 6px;
		color: var(--global-UD);
		position: relative;
		display:inline-block;
		top: -3px;
		text-decoration: none !important;
	}
	#frontpage-login {
		position: absolute;
		right: 2lvw;
		top: 2lvw;
		font-family: 'Neue Kabel Italic';
		font-size: 18pt;
		text-decoration: underline;
		text-decoration-thickness: 5px;
  		text-decoration-color: var(--global-UD);
	}
	#frontpage-login:before {
    	content: "\00BB";
    	margin-right: 6px;
		color: var(--global-UD);
		position: relative;
		display:inline-block;
		top: -3px;
		text-decoration: none !important;
	}
}











/* MARK: SM HOME 
--------------------------------*/

	#homepage {	
		min-height: 600px;	
		display: block; 
		position: relative; 
		padding-top: 60px;
	}



	#logotype-frontpage-img { 
		width: auto; 
		height: 80px; 
		position: relative;
		display: block;
		margin: 0px auto 40px auto;
		padding-top: 0px;
		user-select: none;
	}

	#carousel-container {
		width: 80lvw;
		display:flex;
		text-align: center;
		position: relative;
		margin: 0 auto;
		/*height: 300px;*/

	}



	#cuteCarousel {
		/*min-width: 260px;*/
		/*min-height: 300px;*/
		padding: 0px;
		/*display: inline-block;*/
		display: block;
		margin: 0 auto;
		position: relative;
		text-align: left;
	}

	#oscar-teaching-frontpage { 
		width: auto;
		height: auto;
		/*max-height: 40lvh; 
		max-width: 90lvw;*/
		display: block;
		margin: 0 auto;
		user-select: none;
	}

	.carouselTopImage {
		z-index: 50;
		position: absolute;
		width: auto;
		height: auto;
		/*max-height: 40lvh; 
		max-width: 90lvw;*/
		opacity: 0;
		transition: opacity 1s;
	}

		#cuteCarousel img {
			margin: 0;
			width: auto;
			display: block;
		}

		@media (min-width: 580px) {
			#cuteCarousel img {
				height: 360px;
			}
			#carousel-container {height: 360px;}
		}

		@media (max-width: 580px) {
			#cuteCarousel img {
				height: 340px;
			}
			#carousel-container {height: 340px;}

		}

		@media (max-width: 520px) {
			#cuteCarousel img {
				height: 320px;
			}
			#carousel-container {height: 320px;}

		}

		@media (max-width: 480px) {
			#cuteCarousel img {
				height: 260px;
			}
			#carousel-container {height: 260px;}

		}

		@media (max-width: 440px) {
			#cuteCarousel img {
				height: 220px;
			}
			#carousel-container {height: 220px;}

		}

		@media (max-width: 380px) {
			#cuteCarousel img {
				height: 200px;
			}
			#carousel-container {height: 200px;}

		}

		@media (max-width: 330px) {
			#cuteCarousel img {
				height: 160px;
			}
			#carousel-container {height: 160px;}

			.news-sticker {
				scale: 0.5
			}
		}

	#redCurtain-frontpage {
		height: 100%; 
		min-height: 100lvh;
		width: 150px;
		float: left;
		position: absolute;
		left: 20lvw;
		top: 0px;
		z-index: -5;
		background: var(--global-UD);
		/*background: linear-gradient(180deg,rgba(237, 28, 48, 1) 1%, rgba(237, 28, 48, 1) 92%, rgba(245, 164, 199, 1) 100%);*/
		background: #ED1C30;
	}

	#frontpage-learnToMake {
		position: relative; 
		display: block;
		width: 80lvw;
		max-width: 450px;
		margin: 0 auto 0 auto;
		font-family: 'Neue Kabel Light';
		font-size: 16pt;
		padding-top: 20px;
	}

#frontpage-learnToMake a {
		text-decoration: underline;
		text-decoration-thickness: 4px;
  		text-decoration-color: var(--global-UD);
				font-family: 'Neue Kabel Bold';


}

	#two-options-frontpage {
		display: flex;
		/*position: relative;*/
		/*width: 40lvw;*/
		width: 100%;
		max-width: 450px;
		margin: 0 auto;
		justify-content: flex-end;
		/*left: 45lvw;*/
		padding-bottom: 40px;
  		font: 16px/20px 'Neue Kabel Extrabold';
		font-size: 10pt;
		padding-top: 20px;
	}

	#two-options-frontpage > * {
		display: inline-block; 
		text-align: center;
	}

	#two-options-frontpage a {
		text-decoration: none;
	}

	#frontpage-squiggle {
		width: 30px; 
		height: 30px;
		margin: 0 10px;
		position: relative;
		top: 5px;
	}

/* -------------   PAGE 2 (CLASSROOM) SMALL SCREENS ----------------- */
/* MARK: SM CLASS 
*/
	#classroom {
		display: block; 
		position: relative; 
		overflow: hidden;
		/*max-width: 2000px;
		margin: 0 auto;*/
	}

	#classroom * {
		z-index: 5;
	}
	
	#logotype-classroom-img { 
		height: 80px;
		width: auto;
		position: relative;
		display: block;
		margin: 60px auto 40px auto;
		padding-top: 0px;
		user-select: none;
		left: -20px;
	}

.what-is-the-classroom {
		position: relative;
		z-index: 10;	
		font-family: 'Neue Kabel Light';
		font-size: 16pt;	
		width: 80lvw;
		max-width: 450px;
		margin-bottom: 0;
}

	.classroom-flex-container {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: top;
		gap: 20px;
	}
	
	#calendar {
		position: relative;
		display: block;
		margin: 0 auto;
		left: 0lvw;
		top: 0px;
		width: 200px;
		flex-grow: 1;
		padding-left: 20px;
		padding-right: 20px;
	}

	#classroom-images {
		width: calc(30lvw + 300px);
		height: 600px;
		top: 340px;
		margin-bottom: 20px;
		display: none;
	}
	
	#calendar h2 { /* NEXT EVENTS */
		position: relative;
		left: 0px;
		font-family: 'Neue Kabel Italic';
		font-size: 14pt;
	}
	
	#calendar ul {
		position: relative;
		left: 0px;
		width: 100%;
		padding: 0;
	}
	
	#calendar ul li {
		margin: 0px 0px 10px 0;
		padding: 0px;
		position: relative;
		background-color: #f6f6f6;
		border-left: solid 7px #F5A4C7;
		list-style: none;
		line-height: 20px;
		vertical-align: middle;
		font: 18px/20px 'Neue Kabel Light';
		width: 100%;
		border-radius: 5px;
	}

	#calendar ul li.social { border-color: #F7C411; }	
	#calendar ul li.workshop { border-color: #F5A4C7; }	
	#calendar ul li.longform { border-color: #8CD48C; }	
	#calendar ul .social:hover .short-info-container { background-color: #f9df82; }	
	#calendar ul .workshop:hover { background-color: #ffddec; }	
	#calendar ul .longform:hover { background-color: #c3f2c3; }	

	.agenda-card-link {
		text-decoration: none;
		height: 100%;
		width: 100%;
	}

	.short-info-container {
		display: flex;
		gap: 10px;
		height: 30px;
		cursor: pointer;
		user-select: none;
	}

	.agenda-date { 
		display: inline-block;
		white-space: nowrap;
		min-width: 60px;
		height: 100%;
  		font: 16px/30px 'Neue Kabel Italic';
		font-size: 12pt;
		flex-grow: 0;
		padding-left: 10px;
	}

	.agenda-title {
		display: inline-block;
		flex-grow: 1;
		height: 100%;
		font: 18px/30px 'Neue Kabel Bold';
	}

	.info-toggle {
		color: #aaaaaa;
		flex-grow: 0;
		font-size: 10pt;
		padding-right: 10px;
		font: 16px/30px 'Neue Kabel Regular';
	}

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

	.moreinfo-container {
		background: #fff;
		padding: 5px;
		display: none;
	}

	.agenda-type.social { color: #F7C411;}
	.agenda-type.workshop { color: #F5A4C7;}
	.agenda-type.longform { color: #8CD48C;}

	.agenda-description {
		display: block;
		height: 100%;
		width: 100%;
  		font: 16px/20px 'Neue Kabel Light';
		padding: 10px;
	}

	.agenda-description span {
		font-family: 'Neue Kabel Book';
		color: #F7C411;
	}

	.agenda-specifics {
		font-family: 'Neue Kabel Light';
		font-size: 12pt;
		padding: 10px;
	}
	.agenda-specifics span {
		font-family: 'Neue Kabel Book';
		font-size: 12pt;
		color: #F7C411;	
	}
	.agenda-specifics a {
		color: #F7C411;
		text-decoration-thickness: 3px;
		text-decoration-color: #F7C411;
		font-family: 'Neue Kabel Book';
	}

	li.social .agenda-description span, li.social .agenda-specifics span, li.social .agenda-specifics a { color: #F7C411; text-decoration-color: #F7C411;}	
	li.workshop .agenda-description span, li.workshop .agenda-specifics span, li.workshop .agenda-specifics a { color: #F5A4C7; text-decoration-color: #F5A4C7;}	
	li.longform .agenda-description span, li.longform .agenda-specifics span, li.longform .agenda-specifics a { color: #8CD48C; text-decoration-color: #8CD48C;}


	.agenda-description a:hover {
		text-decoration: underline;
	}

	.calendar-moreinfo {
		color: #aaa;
		text-decoration: none;
		font-family: 'Neue Kabel Italic';
		font-size: 12pt;
		display: inline-block;
		position: absolute;
		right: 0;
		bottom: 0px;
	}

	
	.at-la-vallee {   /* EVENTS TAKE PLACE AT LAVALLEE */
		position: relative;
		text-align: right;
		font-family: 'Neue Kabel Italic';
		font-size: 14pt;

	}
	

	
	#classroom-images img {
		width: 100%;
		height: auto;
		padding-bottom: 5px;
	}
	
	#redCurtain-classroom {
		height: 120%; 
		min-height: 100lvh;
		width: 150px;
		float: left;
		position: absolute;
		left: 20lvw;
		top: 0px;
		z-index: 1;
		/*background: #F5A4C7;*/
		background: linear-gradient(180deg,rgba(245, 164, 199,1) 1%, rgba(245, 164, 199, 1) 50%, rgba(255, 255, 255, 1) 80%);
		background: linear-gradient(180deg,rgba(237, 28, 48,1) 1%, rgba(237, 28, 48, 1) 30%, rgba(255, 255, 255, 1) 50%);
	}

/*-----------------MAILING LIST ------------------- */
/* MARK: SM MAIL
*/

	section#email-signup {
		
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
	}

	#mc_embed_signup {
		width: auto;
		display: block;
		margin: 0 auto;
		padding: 0px 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
	}
	#mc_embed_signup form {
		width: 100%;

	}
	#mc_embed_signup form div#mc_embed_signup_scroll {
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#mc_embed_signup form h2, #mc_embed_signup form div {
		display: inline-block;
	}
	#mc_embed_signup form h2 {
		font-family: 'Neue Kabel Bold';
		font-size: 12pt;
		margin: 0;
		padding: 0;
	}
	#mc_embed_signup form label {
		font-family: 'Neue Kabel Thinl';
		font-size: 12pt;
		color: #aaa;

	}
	#mce-EMAIL {
		vertical-align: middle;
		line-height: 30px;
		text-align: center;
		margin: 0;
		font-family: 'Neue Kabel Italic';
		font-size: 12pt;
		color: #fff;
		background-color: #fff;
		border: solid 1px #ff6b79;
		border-radius: 5px;
		border-radius: 50px;
		-webkit-text-fill-color: #ff6b79 !important;
		height: 40px;

	}

	#mc-embedded-subscribe {
		font-family: 'Neue Kabel Italic';
		cursor: pointer;
		font-size: 12pt;
		border: none;
		border-radius: 5px;
		background-color: #ed1c30;
		padding: 5px 20px;
		color: #fff;
		text-decoration: none;
		text-decoration-thickness: 3px;
		text-decoration-color: var(--global-UD);
		border-radius: 50px;
		height: 40px;
	}

	#mc-field-group:before {
    	content: "\00BB";
		color: var(--global-UD);
	}

	.arrow-for-mailing-list {
	height: 40px;
	line-height: 40px;
	margin: 0 0 0 0;
	}
	.arrow-for-mailing-list:after {
		content: "\21A7";    
		font-size: 20pt;
		color: #ed1c30;
		user-select: none;
	}

/* MARK: SM COURSES 
*/
/* -------------   PAGE 3 (COURSES) SMALL SCREENS ----------------- */


	.online-courses {
		min-height: 600px;	
		display: block; 
		position: relative; 
		padding-top: 60px;
		padding-bottom: 0px;
	}
	
	#logotype-courses-img { 
		display: block;
		margin: 0 auto 60px auto;
		padding: 0px;
		width: 70lvw;
		height: 80px;
		width: auto;
	}
	
	.online-courses h2 {
  		font: 30px/40px 'Neue Kabel Light';
		font-size: 16pt;
		display: block;
		margin: 0 auto;
		width: 70lvw;
		text-align: center;
		margin-bottom: 40px;
	}

	#redCurtain-courses1 {
		height: 100%; 
		min-height: 100lvh;
		width: 15px;
		position: absolute;
		left: -1px;
		top: 0px;
		z-index: -5;
		background: var(--global-UD);
		background: linear-gradient(180deg,rgba(255, 255, 255,1) 0%, rgba(237, 28, 48, 1) 2%, rgba(237, 28, 48, 1) 97%, rgba(255, 255, 255,1) 100%);
	}

	#redCurtain-courses2 {
		height: 100%; 
		min-height: 100lvh;
		width: 15px;
		position: absolute;
		right: -1px;
		top: 0px;
		z-index: -5;
		background: var(--global-UD);
		background: linear-gradient(180deg,rgba(255, 255, 255,1) 0%, rgba(237, 28, 48, 1) 2%, rgba(237, 28, 48, 1) 97%, rgba(255, 255, 255,1) 100%);
	}
	
	#filters-for-courses { 
		display: block; 
		text-align: center;
		margin: 0 auto 40px auto;
		width: 80lvw;
	}

	#filters-for-courses div {
		/*border: solid 3px black;*/
		border-radius: 5px;
		margin: 0 10px 10px 0;
		padding: 0 10px;
		display: inline-block;
  		font: 16px/40px 'Neue Kabel Medium';
	}
	
	#filters-for-courses div:hover {
		cursor: pointer;
		transition:all 0.1s;
	}
	
/* MARK: CARD
-----------------------------*/

.courses-list {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.courses-browser a {
	display: block;
	width: 160px;
	text-decoration: none;
	height: 220px;
	border-radius: 5px;
	text-align: center;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(#fff 0px 0px 0px);
	transition: all 0.2s;
	position: relative;
	top: 0px;
}

	.courses-browser a:hover {
		filter: drop-shadow(#fff 0px 2px 0px);
		top: -3px;
		cursor: pointer;
	}

.courseCard-inside {
overflow: hidden;
position: relative;
}


.courses-browser a img {
	max-width: 100%;
	border-radius: 0 0 5px 0;

	flex-grow: 0;
}

	.hiddenCard {
		display: none;
	}

	.course-title {
		padding: 0px 5px;
  		font: 16px/20px 'Neue Kabel Bold';
		height: 39px;
		margin-top: 39px;
		text-align: center;
		vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 0;
	}

	.course-description {
  		font: 14px/20px 'Neue Kabel Light';
		height: 58px;
		padding: 0 5px;
		flex-grow: 1;
		align-content: center;
	}

	#allCourseFilter { background-color: #EEEEEC; }
	#basicsFilter { background-color: #F5A4C7; }
	#stylesFilter { background-color: #F7C411; }
	#skillsFilter {	background-color: #8CD4AC; }

	#allCourseFilter:hover { background-color: rgb(226, 226, 226); }
	#basicsFilter:hover { background-color: #f8b9d4; }
	#stylesFilter:hover { background-color: #ffd641; }
	#skillsFilter:hover {	background-color: #bde7d0; }

	.basics { 
		background-color: #EEEEEC; 
		border-left: solid 10px #F5A4C7;
		position: relative;
	}
	.basics:hover { background-color: #f5d7e4; }
	.styles:hover { background-color: #ffe37d; }
	.skills:hover { background-color: #bde7d0; }

	.basics:after {
		content: 'basics';
		position: absolute;
		color: #F5A4C7; 
		top: 0px;
		right: 0px;
		width: 100%;
		display: inline-block;
		text-align: center;
  		font: 14px/40px 'Neue Kabel Medium';
		letter-spacing: 1px;
		writing-mode: horizontal-tb;
	}
	.styles { 
		background-color: #EEEEEC; 
		border-left: solid 10px #F7C411;
		position: relative;
	}
	.styles:after {
		content: 'styles';
		position: absolute;
		color: #F7C411; 
		top: 0px;
		right: 0px;
		width: 100%;
		display: inline-block;
		text-align: center;
  		font: 14px/40px 'Neue Kabel Medium';
		letter-spacing: 1px;
		writing-mode: horizontal-tb;
	}
	.skills { 
		background-color: #EEEEEC; 
		border-left: solid 10px #8CD4AC;
		position:relative;
	}
	.skills:after {
		content: 'skills';
		position: absolute;
		color: #8CD4AC; 
		top: 0px;
		right: 0px;
		width: 100%;
		display: inline-block;
		text-align: center;
  		font: 14px/40px 'Neue Kabel Medium';
		letter-spacing: 1px;
		writing-mode: horizontal-tb;
	}

	/* BANNER FOR NEW COURSES */
	.courseCard.new .courseCard-inside:before {
		content: 'NEW!';
		width: 200px;
		max-width: 300px;
		text-align: center;
		display: block;
		background-color: #ef4758;
		color: #fff;
		font-family: 'Neue Kabel Bold';
		font-size: 8pt;
		line-height: 16px;
		transform: rotate(40deg);
		position: absolute;
		top: 15px;
		right: -75px;
	}



/* MARK: SM ABOUT 
------------------------------------------------------------------- */

	section#about-underdog {
		font-family: 'Neue Kabel Medium';
		user-select:none;
	}

	section#about-underdog h1 {
		text-align: center;
		padding-top: 40px;
		font: 30px/40px 'Neue Kabel Extrabold';

	}

	#meet-the-team {
		text-align: center;
		margin-top: 40px;
  		font: 22px/40px 'Neue Kabel Bold';
	}

	#we-are-a-team-of-siblings {
		text-align: center;
  		font: 14px/20px 'Neue Kabel Light';
	}

	#underdog-team-list {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding-top: 40px;
	}
	#underdog-team-list * {
		display: block;
	}

	#underdog-team-list div {
		width: 30lvw;
		max-width: 140px;
	}

	#underdog-team-list div img {
		width: 30lvw;
		max-width: 140px;
		border-radius: 50%;
	}

	.staff-name {
		display: block;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
  		font: 20px/40px 'Neue Kabel Medium';
	}

	.staff-pronouns {
		display: block;
		text-align: center;
  		font: 14px/20px 'Neue Kabel Italic';


	}

	#underdog-values {
		margin-top: 60px;
		text-align: center;
		font-family: 'Neue Kabel Bold';
	}

	#underdog-values-list {
		display: flex;
		justify-content: center;
		gap: 5px;
		padding: 40px 10px 0 10px;
	}

/*
	@media (max-width: 600px) {
		#underdog-values-list {
		outline: solid 5px blue;
		flex-wrap: wrap;
		}
		#underdog-values-list div, #underdog-values-list img {
			width: 45%;
			display: block;
			margin: 0 auto;	
		}
	}*/


	#underdog-team-list * {
		display: block;
	}
	#underdog-values-list div img {
		width: 18lvw;
		max-width: 150px;
		min-width: 90px;
		border-radius: 50%;
	}

	#underdog-values-list div .about-paragraph {
		width: 18lvw;
		max-width: 140px;
		min-width: 80px;
		text-align: justify;
  		font: 12px/20px 'Neue Kabel Light';
		max-width: 200px;
	}

	.about-paragraph {
			font-family: 'Neue Kabel Light';
			font-size: 10pt;
			text-align: justify;
	}

	footer {
		margin-top: 50px;
		/*padding-bottom: 10px;*/
		text-align: center;
		font-family: 'Neue Kabel Italic';
		font-size: 10pt;
		color: #999;
		user-select: none;
	}

	footer a { text-decoration: none; cursor: pointer;}

.new-site-alert {
	background-color: #8CD48C;
	color: #000;
	line-height: 2;
	margin: 0;
	max-width: 100% !important;
	width: 100%;
}


/* There are only two sizes in this design, and the Large / Desktop design begins here
-----------------------------------------------------------------------------------------*/


/* MARK: XLXLXL
*/

@media (min-width: 992px) {
	
	/* ------------ HOMEPAGE LARGE ------------*/
	#homepage {	
		min-height: 1000px;	
		display: block; 
		position: relative; 
		padding-top: 60px;
	}
	
	#frontpage-login:before {
    	content: "\00BB";
    	margin-right: 6px;
		color: var(--global-UD);
		position: relative;
		display:inline-block;
		top: -3px;
		text-decoration: none !important;
	}
	
	#frontpage-login {
		position: absolute;
		right: 2lvw;
		top: 2lvw;
		font-family: 'Neue Kabel Italic';
		font-size: 18pt;
		text-decoration: underline;
		text-decoration-thickness: 5px;
  		text-decoration-color: var(--global-UD);
	}
	
	#logotype-frontpage-img { 
		width: 400px; 
		height: auto; 
		position: absolute;
		left: calc(30lvw - 239px);
		top: 144px;
    	content:url(../assets/optimized/ud-logo-baseline-nodot.png);
	}

	#carousel-container {
		/*width: 500px;
		height: 400px;*/
		width: auto;
		height: auto;
		text-align: center;
		margin-top: 220px;
		padding-left: calc(30lvw + 250px);
	}


	#oscar-teaching-frontpage { 
		/*max-height: 400px; */
		display: block;
		width: auto;
		/*float: left;
		position: relative; */
	}
	#cuteCarousel {
		padding: 0px;
		margin: 0;
	}

	#cuteCarousel img {
		max-height: 400px;
	}

	#frontpage-learnToMake {
		position: relative; 
		display: block;
		margin: 0;
		padding: 0;
		padding-top: 20px;
		left: calc(30lvw + 300px);
		width: 430px;
  		font: 30px/40px 'Neue Kabel Light';
	}
	#two-options-frontpage {
		position: relative;
		/*left: calc(50lvw + 160px);*/
		left: calc(30lvw + 300px);

		top: 0;
		padding-top: 40px;
		font-family: 'Neue Kabel Extrabold';
		font-size: 18pt;
		/*width: 440px;*/
		/*height: 120px;*/
		margin: 0;
		width: auto;
	}
	#two-options-frontpage > * {
		float: left; 
		text-align: center;
	}
	
	#frontpage-squiggle {
		width: 60px; height: 60px;
		margin: 0 10px;
		top: -10px;
	}
	#redCurtain-frontpage {
		height: 100%; 
		vertical-align: top;
		min-height: 1000px;
		width: 300px;
		float: left;
		position: absolute;
		left: 30lvw;
		top: 0px;
		z-index: -5;
	}
	
	/* -------------   PAGE TWO (CLASSROOM AGENDA), LARGE FORMAT ------------------- */
	/* MARK: XL CLASSROOM
	*/
	#classroom {
		display: block; 
		position: relative; 
		overflow: none;
		padding-top: 40px;
		max-width: 2000px;
	}
	
	#logotype-classroom-img { 
		display: block;
		position: relative;
		left: calc(30lvw - 239px);
		margin: 0px;
		width: auto;
		max-width: 800px;
		height: 100px;
		padding: 0px;
	}
	
.what-is-the-classroom {
		position: relative; 
		display: block;
		margin: 0;
		padding: 0;
		padding-top: 20px;
		left: calc(30lvw + 300px);
		width: 430px;
  		font: 30px/40px 'Neue Kabel Light';
}



	#calendar {
		position: relative;
		padding: 0px 40px 0px 0px;
		display: inline-block;
	}
	
	#calendar h2 { /* NEXT EVENTS */
		font: 30px/40px 'Neue Kabel Italic';
		text-align: left;

	}
	
	#calendar ul {
		left: 0px;
		width: 100%;
	}
	
	#calendar ul li {
		font: 18px/20px 'Neue Kabel Light';
		margin-bottom: 20px;
	}
	.agenda-date {
		font: 18px/40px 'Neue Kabel Light';
	}
	.agenda-title {
		font: 22px/40px 'Neue Kabel Bold';

	}
	.info-toggle {
		font: 16px/40px 'Neue Kabel Light';
	}
	.short-info-container {
		height: 40px;
	}

	.agenda-description {
		font-family: 'Neue Kabel Light';
	}
	
	.at-la-vallee {   /* EVENTS TAKE PLACE AT LAVALLEE */
		position: relative; 
		display: block;
		margin: 0;
		padding: 0;
		padding-top: 20px;
		left: calc(30lvw + 300px);
		width: 450px;
  		font: 30px/40px 'Neue Kabel Italic';
		text-align: left;
	}
	
	#classroom-images {
		height: auto;
		display: block;
		width: calc(30lvw + 50px);
		padding-left: 40px;
		flex-grow: 0;
		margin-top: 80px;
	}
	
	#classroom-images img {
		width: 100%;
		height: auto;
		display: block;
		padding-bottom: 20px;
		max-width: 800px;
		margin-left: auto;

	}
	
	#redCurtain-classroom {
		height: 100%;
		min-height: 100lvh;
		vertical-align: top;
		width: 300px;
		float: left;
		position: absolute;
		left: 30lvw;
		top: 0px;
		opacity: 1;
	}
	
/* MARK: XL MAIL
---------*/
	
	/* EMAIL SUBSCRIBE LARGE FORMAT */
	
	section#email-signup {
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#mc_embed_signup {
		width: auto;
		display: block;
		margin: 0 auto;
		padding: 5px 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15px;
	}
	#mc_embed_signup form {
		width: 100%;

	}
	#mc_embed_signup form div#mc_embed_signup_scroll {
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;

	}
	#mc_embed_signup form h2, #mc_embed_signup form div {
		display: inline-block;
	}
	#mc_embed_signup form h2 {
		font-family: 'Neue Kabel Bold';
		font-size: 16pt;
		margin: 0;
		padding: 0;
	}
	#mc_embed_signup form label {
		font-family: 'Neue Kabel Thin';
		font-size: 18pt;
	}
	#mce-EMAIL {
		vertical-align: middle;
		line-height: 30px;
		text-align: center;
		margin: 0 5px;
		font-family: 'Neue Kabel Italic';
		font-size: 16pt;
		border-radius: 50px;

	}
	#mc-embedded-subscribe {
		font-family: 'Neue Kabel Book';
		font-size: 16pt;
		padding: 5px 15px;
		border-radius: 50px;
	}

	.arrow-for-mailing-list:after {
		content: "\21A6";    
		font-size: 20pt;
		color: #ed1c30;
		margin-right: 5px;
		user-select: none;
	}
	
	/*     ------------------- COURSES PAGE     LARGE FORMAT             */
	/* MARK: XL COURSES
	*/

	.online-courses {
		min-height: 800px;	
		display: block; 
		position: relative; 
	}

	#logotype-courses-img { 
		display: block;
		margin: 0 auto 0 auto;
		padding-top: 0px;
		height: 100px;
		width: auto;
		max-width: 600px;
	}
	
	.online-courses h2 {
		font-family: 'Neue Kabel Light';
		font-size: 22pt;
		display: block;
		margin: 40px auto 0 auto;
		text-align: center;
		margin-bottom: 40px;
		max-width: 500px;
	}

	#redCurtain-courses1 {
		height: 100%; 
		vertical-align: top;
		min-height: 1000px;
		width: 30px;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -5;
	}
	#redCurtain-courses2 {
		height: 100%; 
		vertical-align: top;		
		width: 30px;
		min-height: 1000px;

		position: absolute;
		right: 0;
		top: 0px;
		z-index: -5;
	}
	
	#filters-for-courses { 
		display: block; 
		text-align: center;
		margin-bottom: 40px;
	}

	#filters-for-courses div {
		margin: 5px;
		padding: 5px 10px;
		display: inline-block;
		font-family: 'Neue Kabel Medium';
		font-size: 16pt;
	}
	
	#filters-for-courses div:hover {
		cursor: pointer;
	}

	.courses-browser a {
		width: 200px;
		height: 220px;
	}

	.course-title {
		padding-top: 20px;
  		font: 18px/20px 'Neue Kabel Bold';
		text-align: center;
		vertical-align:middle;
		height: 40px;
		margin-top: 0;
	}

	.course-description {
  		font: 14px/20px 'Neue Kabel Light';
		height: 80px;
	}
	
	/* FANCY BORDERS ON THE CARDS AT LARGER SIZES */

		.basics { 
			background-color: #EEEEEC; 
			border-left: solid 20px #F5A4C7;
			position: relative;
			z-index: 0;
		}
		.basics:after {
			content: 'BASICS';
			position: absolute;
			color: #fff; 
			top: 10px;
			left: -30px;
  			font: 18px/40px 'Neue Kabel Medium';
			letter-spacing: 1px;
			writing-mode: sideways-lr;
		}
		.styles { 
			background-color: #EEEEEC; 
			border-left: solid 20px #F7C411;
			position: relative;
		}
		.styles:after {
			content: 'STYLES';
			position: absolute;
			color: #fff; 
			top: 10px;
			left: -30px;
			font-family: 'Neue Kabel Medium';
			font-size: 14pt;
			letter-spacing: 1px;
			writing-mode: sideways-lr;
		}
		.skills { 
			background-color: #EEEEEC; 
			border-left: solid 20px #8CD4AC;
			position:relative;
		}
		.skills:after {
			content: 'SKILLS';
			position: absolute;
			color: #fff; 
			top: 10px;
			left: -30px;
			font-family: 'Neue Kabel Medium';
			font-size: 14pt;
			letter-spacing: 1px;
			writing-mode: sideways-lr;
		}

	.courses-list {
		gap: 20px;
	}

	.courses-list li img {
		width: calc(45lvw - 35px);
		max-width: 280px;
	}	

	/*.courseCard.new:before {
		font-family: 'Neue Kabel Bold';
		font-size: 8pt;
		line-height: 20px;
	}*/
	

/* MARK: XL ABOUT
*/

	#meet-the-team {
		font-size: 28px;
	}

	#we-are-a-team-of-siblings {
		text-align: center;
		font-size: 18px;
		font-family: 'Neue Kabel Light';
		padding-top: 20px;
	}

	#underdog-team-list {
		gap: 20px;
		padding-top: 20px;
	}

	#underdog-team-list div {
		width: 30lvw;
		max-width: 200px;
	}

	#underdog-team-list div img {
		width: 30lvw;
		max-width: 200px;
	}

	.staff-name {
		font-size: 18pt;
	}

	.staff-pronouns {
		font-family: 'Neue Kabel Italic';
		font-size: 12pt;
	}

	.about-paragraph {
			font-family: 'Neue Kabel Light';
			font-size: 12pt;
			width: 30lvw;
	}

	#underdog-values {
		margin-top: 50px;
		text-align: center;
		font-family: 'Neue Kabel Bold';
		font-size: 24pt;
	}

	#underdog-values-list {
		display: flex;
		justify-content: center;
		gap: 20px;
		padding-top: 30px;
	}

	#underdog-values-list div img {
		width: 18lvw;
		max-width: 200px;
	}

	#underdog-values-list div .about-paragraph {

		text-align: justify;
		font-size: 12pt;

	}

}

/* the end :) thank you for reading <3 */