:root {
	--bg-color-1: #0d001d;
	--bg-color-2: #fae8ff;
	--bg-color-topbar: #fff5f5;
	--bg-navbar: #0000004d;
	
	--ac-color: #b100e2;
	
	--link-color: var(--ac-color);
	
	--space-small: 1vw;
	--space-medium: calc(10px + 1vw);
	--space-large: calc(20px + 2vw);
	
	--f-size-copyright1: 2.5vw;
	--f-size-copyright2: 1rem;
	--f-size-copyright: 1rem;
	--f-size-small: 1.5rem;
	--f-size-medium: 2rem;
	--f-size-large: 3rem;
	--f-size-extralarge: 4rem;
	
	--f-family-header: "Cairo", Helvetica, sans-serif;
	--f-family-body: "Montserrat", Helvetica, sans-serif;
	
	--border-radius: 5px;
	--border-radius-large: 1vw;
	
	/*Calculated, need to be updated with style updates*/
	--footer-height: calc(min(var(--f-size-copyright1), var(--f-size-copyright2)) + (2 * var(--space-small)));
	--header-height: calc(var(--f-size-medium) + (2 * var(--space-medium)));
}

@-webkit-keyframes spaceboots {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	10% { transform: translate(-51%, -52%) rotate(-1deg); }
	20% { transform: translate(-53%, -50%) rotate(1deg); }
	30% { transform: translate(-50%, -48%) rotate(0deg); }
	40% { transform: translate(-49%, -51%) rotate(1deg); }
	50% { transform: translate(-51%, -48%) rotate(-1deg); }
	60% { transform: translate(-53%, -49%) rotate(0deg); }
	70% { transform: translate(-48%, -49%) rotate(-1deg); }
	80% { transform: translate(-51%, -51%) rotate(1deg); }
	90% { transform: translate(-48%, -48%) rotate(0deg); }
	100% { transform: translate(-49%, -52%) rotate(-1deg); }
}

/*.multbg-top-to-bottom {
	border-left: 5px solid var(--ac-color);
    background-image: -webkit-gradient(to right, linear, 0 0, 0 100%, from(var(--ac-color)), to(transparent));
    background-image: -webkit-linear-gradient(to right, var(--ac-color), transparent);
    background-image:
        -moz-linear-gradient(to right, var(--ac-color), transparent),
        -moz-linear-gradient(to right, var(--ac-color), transparent)
    ;
    background-image:
        -o-linear-gradient(to right, var(--ac-color), transparent),
        -o-linear-gradient(to right, var(--ac-color), transparent)
    ;
    background-image: 
        linear-gradient(to right, var(--ac-color), transparent),
        linear-gradient(to right, var(--ac-color), transparent)
    ;
    -moz-background-size:100% 5px ;
    background-size:100% 5px ;
    background-position:0 0, 100% 100%;
    background-repeat:no-repeat;
}*/

.multbg-top-to-bottom {
	border-left: 5px solid white;
    background-image: -webkit-gradient(to right, linear, 0 0, 0 100%, from(white), to(transparent));
    background-image: -webkit-linear-gradient(to right, white, transparent);
    background-image:
        -moz-linear-gradient(to right, white, transparent),
        -moz-linear-gradient(to right, white, transparent)
    ;
    background-image:
        -o-linear-gradient(to right, white, transparent),
        -o-linear-gradient(to right, white, transparent)
    ;
    background-image: 
        linear-gradient(to right, white, transparent),
        linear-gradient(to right, white, transparent)
    ;
    -moz-background-size:100% 5px ;
    background-size:100% 5px ;
    background-position:0 0, 100% 100%;
    background-repeat:no-repeat;
}

.flexBreak {
	flex-basis: 100% !IMPORTANT;
    height: 0 !IMPORTANT;
    min-height: 0 !IMPORTANT;
    transition: none ! IMPORTANT;
    margin: 0 !IMPORTANT;
    width: 0 !IMPORTANT;
    min-width: 0 !IMPORTANT;
    border: none ! IMPORTANT;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

h1 {
	font-family: var(--f-family-header);
	line-height: 100%;
	font-size: var(--f-size-large);
}

.linkButton {
	font-family: var(--f-family-header);
	line-height: 100%;
	display: table;
	border: 2px solid var(--ac-color);
	border-radius: var(--border-radius);
	padding: var(--space-small);
	margin-top: var(--space-large);
	text-align: center;
}

ul, li {
	margin:0;
	padding:0;
	list-style:none;
	width: 100vw;
}

img {
	max-width: 100vw;
	max-height: 100vh;
    margin: auto;
    display: table;
}

html {
	/*overflow: hidden;*/
	scroll-behavior: smooth;
}

body {
	background-color: var(--bg-color-1);
	margin: 0;
	/*overflow: hidden;*/
	font-family: var(--f-family-body);
}

#scrollBody {
	overflow-x: hidden;
	position: relative;

	/*overflow-y: scroll;
    height: 100vh;
    position: relative;
    scroll-snap-type: y proximity;*/
}

#homeBody {
	/*overflow: hidden;*/
	background-color: var(--bg-color-2);
}

#mainSection {
	padding-top: calc(var(--f-size-medium) + (2 * var(--space-medium)));
}

#mobileHamburgerBlocker {
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    content: '';
    background: hsla(0, 100%, 100%, 0.5);
	display: none;
}

#barHeader, #indexBarHeader {
    position: fixed;
    top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	background: var(--bg-color-topbar);
	padding: var(--space-medium);
	display: grid;
    grid-gap: var(--space-medium);
    white-space: nowrap;
    box-sizing: border-box;
    font-size: var(--f-size-medium);
    font-family: var(--f-family-header);
	line-height: 100%;
	grid-template-columns: repeat(3, max-content);
	justify-content: end;
	align-items: center;
}

#barHeader > a, #indexBarHeader > a {
	color: black;
	text-align: center;
}

#indexBarHeader {
	background-color: hsla(0, 0%, 0%, 0.5);
	box-shadow: 0px 10px 10px 10px hsla(0, 0%, 0%, 0.5);
}

#indexBarHeader > a {
	color: white;
}

#hamburgerHeader {
	display: none;
    position: absolute;
    justify-items: end;
    height: 100vh;
    top: 0;
    right: 0;
    grid-template-rows: min-content;
    z-index: 90;
}

section {
	font-size: var(--f-size-small);
	min-height: calc((100% - (var(--f-size-medium) + (2 * var(--space-medium)))) + 1px);
	scroll-snap-align: start;
}

.refPoint {
	content: "";
    position: absolute;
    width: 50px;
    height: 50px;
	z-index: -99;
	margin-top: calc((-1 * (var(--f-size-medium) + (2 * var(--space-medium)))) + 1px);
}

#logo, #indexLogo {
	position: absolute;
    top: 0px;
    left: var(--space-medium);
    z-index: 1;
	width: calc(5vw + 5vh);
	height: 100%;
	/*padding: 1vw;*/
	filter: invert(1);
}

#logo > img, #indexLogo > img {
	height: 100%;
	margin-top: 2;
}

#indexLogo {
	filter: none;
}

#logoM {
	display: none;
	position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
	width: calc(5vw + 5vh);
	padding: 1vw;
}

#logoM > img {
	width: 100%;
}

#topNav {
	width: 100%;
	scroll-snap-align: start;
	display: grid;
    grid-template-columns: 1fr min-content;
	align-items: start;
}

.logo {
	max-width: calc(50px + 7vw);
    margin-left: 0;
}

.hamburger {
	padding: 1vw !IMPORTANT;
	z-index: 1;
}

.is-active .hamburger-inner, .is-active .hamburger-inner::before, .is-active .hamburger-inner::after {
	background-color: black !IMPORTANT;
	outline: 2px solid white !IMPORTANT;
}

.hamburger:hover {
	opacity: 1 !IMPORTANT;
}

.hamburger-box {
	width: calc(27px + 3vw) !IMPORTANT;
	height: calc(27px + 3vw) !IMPORTANT;
	overflow: visible !IMPORTANT;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: calc(25px + 3vw) !IMPORTANT;
    height: calc(5px + 0.4vw) !IMPORTANT;
	background-color: white !IMPORTANT;
	outline: 2px solid black !IMPORTANT;
    border-radius: 0px !IMPORTANT;
}

.hamburger-inner::before {
	top: calc(-1vw - 8px) !IMPORTANT;
}

.is-active .hamburger-inner::before {
	top: 0px !IMPORTANT;
}

.hamburger-inner::after {
	bottom: calc(-1vw - 8px) !IMPORTANT;
}

.is-active .hamburger-inner::after {
	bottom: 0px !IMPORTANT;
}

#sideNav, #indexSideNav {
    top: 0px;
    right: 0px;
	bottom: 0;
    /*background-color: var(--bg-color-2);*/
	background-color: rgba(21, 21, 21, 0.9);
    width: min-content;
	display: none;
	position: absolute;
}

#sideNav a, #indexSideNav a {
	color: white !IMPORTANT;
}

#sideNav > div, #indexSideNav > div {
	display: grid;
    grid-gap: 15px;
    grid-auto-rows: min-content;
    white-space: nowrap;
    box-sizing: border-box;
    padding: var(--space-large);
    font-size: var(--f-size-medium);
    font-family: var(--f-family-header);
    line-height: 100%;
}

#homeMainSection {
	display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
}

#homeLogo {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 0% 0%, rgb(255, 173, 87) 0%, rgb(140, 82, 255) 50%, rgb(255, 82, 217) 100%) 0px 0px / 100% 100%;
	display: flex;
}

#homeLogo > img {
	max-width: 100%;
	max-height: 50vh;
}

#homeContent {
	display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;
}

#homeContentTitle {
	color: var(--ac-color);
    font-size: var(--f-size-extralarge);
    font-weight: bold;
    font-family: var(--f-family-header);
    letter-spacing: 2;
    margin: 0 var(--space-large);
}

#homeContentSubtitle {
    letter-spacing: 3;
    font-weight: bold;
    margin: 0 var(--space-large) calc(var(--space-large) * 3) var(--space-large);
	font-family: var(--f-family-header);
	font-size: var(--f-size-small);
}

#homeContentBlurb {
	font-size: var(--f-size-small);
	letter-spacing: 1;
	line-height: 150%;
}

#carouselSection {
	/*min-height: 0px;*/
	box-sizing: border-box;
	position: relative;
	/*height: calc(100% - (var(--f-size-medium) + (2 * var(--space-medium))));*/
}

#leftArrow {
	position: absolute;
	top: 50%;
	left: 2vw;
	transform: translate(0, -50%);
	z-index: 99;
}

#rightArrow {
	position: absolute;
	top: 50%;
	right: 2vw;
	transform: translate(0, -50%);
	z-index: 99;
}

#carousel {
	/*margin-top: calc(var(--f-size-medium) + (2 * var(--space-medium)));*/
	/*height: 100%;*/
	display: flex;
	/*position: relative;*/
	overflow-x: hidden;
}

.carouselButtons {
	font-size: calc(30px + 3vw);
    width: calc(30px + 3vw);
    height: calc(30px + 3vw);
    line-height: 100%;
    border: 0px;
    background-color: transparent;
    color: white;
	-webkit-text-stroke-width: 0.2vw;
    -webkit-text-stroke-color: black;
	font-family: impact;
}

.carouselButtons:focus {
	outline: none;
	border: 1px solid white;
}

#carousel > * {
	position: absolute;
    width: 100%;
	height: 100%;
	object-fit: contain;
	/* object-fit: contain; */
    left: 150%;
    top: 50%;
	transform: translate(-50%, -50%);
}

.lSSlideOuter {
	margin: auto;
}

/* Dots on the bottom */
.lSPager {
	display: none;
}

#columns {
	background-color: var(--bg-color-2);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: var(--space-large);
	/*text-align: justify;*/
}

#leftColumn {
	padding: 0 0 var(--space-large) var(--space-large);

	font-size: var(--f-size-medium);
}

#rightColumn {
	padding: var(--space-large) var(--space-large) var(--space-large) 0;
}

#rightColumn > h1 {
	margin-top: 0px;
	margin-bottom: var(--space-large);
}

#stickyContent {
	position: sticky;
	top: var(--space-large);
	padding: var(--space-large) 0 0 0;
	text-align: right;
}

#stickyContent > img {
	width: 100%;
	background: var(--bg-color-topbar);
	border-radius: var(--border-radius);
	margin-top: var(--space-medium);
	border: 2px solid var(--ac-color);
}

#tiles {
	background-color: var(--bg-color-1);
	display: grid;
    grid-template-rows: min-content auto min-content;
}

#tiles > h1 {
	text-align: center;
	color: white;
	margin: 0px;
	padding: var(--space-large) 0 0 0;
}

#tilesGrid {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	align-content: start;
}

#tilesGrid > div {
	width: calc(100vw / 5);
	min-width: 200px;
    height: calc(((100vw / 5) * 9) / 16);
	min-height: calc((200px * 9) / 16);
    background: white;
    margin: var(--space-large);
	position: relative;
	border-radius: var(--border-radius);
	border: 2px solid var(--ac-color);
	font-family: var(--f-family-header);
	font-size: 2.7vw;
	line-height: 100%;
	
	transition: all .2s ease-in-out;
}

#tilesGrid > div:hover {
	transform: scale(1.1);
}

#tilesGrid > div img {
	width: 100%;
}

#tilesGrid > div > a {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	color: white;
	align-items: center;
	justify-content: center;
}

#achievementsTile {
	background: rgb(255,222,0);
	background: linear-gradient(0deg, rgba(255,222,0,1) 0%, rgba(253,167,45,1) 40%, rgba(253,163,45,1) 50%, rgba(253,167,45,1) 60%, rgba(255,222,0,1) 100%);
}

.videoTile::after {
	content: '';
	background: url("../images/components/play.svg");
	width: calc(100vw / 20);
	min-width: 50px;
    height: calc(100vw / 20);
	min-height: 50px;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.videoTile:hover::after {
	animation-name: spaceboots;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

footer {
	background-color: var(--bg-color-2);
	padding: var(--space-small);
    display: grid;
    grid-template-columns: auto;
	place-items: center;
	scroll-snap-align: start;
	grid-gap: var(--space-large);
	text-align: center;
	font-size: min(var(--f-size-copyright1), var(--f-size-copyright2));
}

footer > p {
	margin: 0px;
}

/*Mobile*/
@media (max-width: 1350px) { /* 1220 */
	:root {
		--f-size-small: 1rem;
		--f-size-medium: 1.5rem;
		--f-size-large: 2rem;
		--f-size-extralarge: 3rem;
		
		/*Calculated, need to be updated with style updates*/
		--header-height: calc(5vw + 5vh + 1vw);
	}

	#barHeader, #indexBarHeader {
		display: none;
	}

	#hamburgerHeader {
		display: grid;
	}

	#logoM {
		display: block;
	}
	
	section {
		min-height: 100%;
	}
	
	section:first-child {
		min-height: calc(100% - (var(--f-size-medium) + (2 * var(--space-medium))));
	}
	
	#homeMainSection {
		grid-template-columns: auto;
		grid-template-rows: min-content 1fr;
	}
	
	#homeContentTitle {
		display: none;
	}

	#carouselSection {
		margin-top: 0px;
		min-height: 100%;
		height: auto;
	}

	#carousel {
		margin-top: 0px;
	}
	
	#columns {
		grid-template-columns: auto;
	}
	
	#leftColumn {
		padding: 0 var(--space-large) 0 var(--space-large);
	}
	
	#stickyContent {
		text-align: center;
	}
	
	#rightColumn {
		padding: var(--space-large) var(--space-large) var(--space-large) var(--space-large);
	}
	
	#tilesGrid > div {
		font-size: 20pt;
	}
}