@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Hind+Siliguri:wght@300;400&family=Outfit:wght@900&family=Poiret+One&family=Russo+One&display=swap');

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

a:link {
	color: #8c00ff;
	text-decoration: none;
}

a:visited {
	color: #8c00ff;
	text-decoration: none;
}

body {
	color: white;
	background-color: black; 
	margin: 0; 
	padding: 0; 
	border-width: 0;
}

#application-form {
	position: relative; 
	top: 170px; 
	line-height: 1.5;
	width: 700px;
}

#apply {
	position: relative; 
	font-family: 'Outfit', sans-serif; 
	font-size: 58px; 
	text-align: center; 
	top: 100px;
}

#bgheader {
	background-size: cover; 
	background-repeat: no-repeat; 
	opacity: 30%; 
	background-image: url('../img/bgheader.jpg'); 
	height: 100vh;
	width: 100vw;
}

#button1-text {
	position: relative; 
	top: 50%; 
	margin-top: -16px; 
	height: 36px;
	color: white;
}

#customhomebutton-wrapper {
	position: relative;
	top: -78px;
	left: 170px;
}

#edvheader {
	position: absolute;
	top: 0%;
	background-size: cover; 
	background-repeat: no-repeat; 
	opacity: 30%; 
	background-image: url('../img/edvheader.jpg'); 
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

#fifth-tile {
	position: absolute; 
	top: calc(100vh + 1685px + 980px); 
	width: 100%; 
	height: 1720px;
	justify-content: center;
	align-items: center;
}

#form-bg {
	position: absolute; 
	background-color: #260044; 
	height: 780px; 
	width: 100%; 
	top: calc(100vh + 1685px + 880px + 1720px + 800px);
}

#form-select {
	cursor: pointer; 
	width: 100%;
	color: grey;
}

#form-submit {
	float: left; 
	border-radius: 10px; 
	position: relative; 
	width: 180px; 
	height: 60px; 
	text-align: center; 
	background-color: #8c00ff; 
	font-family: 'Hind Siliguri', sans-serif; 
	font-weight: 900; 
	color: white; 
	font-size: 20px;
	border: none;
	outline: none;
	cursor: pointer;
	z-index: 100;
}

#fourth-tile {
	position: absolute; 
	height: 880px; 
	width: 100%; 
	top: calc(100vh + 1685px);
	justify-content: center;
	align-items: center;
}

#header1-text {
	position: relative;
	width: 90% !important;
	max-width: 830px !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	text-align: center !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: clamp(24px, 4vw, 42px) !important;
	top: 0 !important;
}

#header2-text {
	height: 162px; 
	text-align: center; 
	color: white; 
	position: absolute; 
	width: 540px; 
	margin-top: -139px; 
	top: 50%; 
	margin-left: 50%; 
	left: -270px; 
	font-family: 'Outfit', sans-serif; 
	font-size: 42px;
}

#homebutton-text {
	position: relative; 
	top: 25%;
	color: white;
}

#icon-bg {
	background-image: url('../img/daw-closeup.jpg'); 
	z-index: -1; 
	position: absolute; 
	width: 100%; 
	background-size: cover; 
	background-position: 50% 50%; 
	opacity: 30%; 
	height: 685px; 
	top: calc(100vh + 1000px);
}

#icon-wrap {
	position: relative !important;
	font-family: 'Hind Siliguri', sans-serif !important;
	font-weight: bold !important;
	text-align: center !important;
	width: 90% !important;
	height: auto !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	top: 60px;
}

#icon2 { top: 5px; }

#icon3 {
	height: 94px; 
	width: 94px; 
	top: 1px; 
}

#link1 { position: relative; float: right; }

#link2 { position: relative; }

#link3 { position: relative; }

#logo-text2 { 
	position: relative; 
	top: 165px;
}

.logo-wrap { 
	position: absolute;
	top: 47px; 
	left: 70px;
}

#logo-wrap3 {
	top: 100%;
	margin-top: -132px;
}

#meters2 { 
	position: relative; 
	top: 255px;
}

#percentages-bg {
	position: absolute; 
	background-size: cover; 
	background-repeat: no-repeat; 
	opacity: 75%; 
	background-position: 50% 50%; 
	background-image: url('../img/bg-desktop.png'); 
	height: 800px; 
	width: 100%; 
	top: calc(100vh + 1685px + 880px + 1720px);
}

#percentages-wrap{
	position: absolute !important;
	top: calc(100vh + 1685px + 880px + 1720px + 200px) !important;
	width: 100% !important;
	container-type: inline-size;
	align-content: center;
	justify-content: center;
	display: flex;
}

#rehearsal-form {
	position: relative; 
	top: 105px; 
	line-height: 1.5;
	width: 700px;
}

#resource-bg {
	position: absolute; 
	width: 100%; 
	z-index: -1; 
	background-image: url('../img/faders.jpg'); 
	background-size: cover; 
	background-position: 50% 50%; 
	opacity: 20%; 
	top: calc(100vh + 1685px + 880px); 
	height: 1720px;
}

#resource-header2 { text-align: right !important; }

#resource-text2 { text-align: right !important; }

#resource-wrap1 { top: 40px; }

#resource-wrap2 { top: 40px; }

#resource-wrap3 { top: 40px; }

#resource-writeup-wrap2 { 
	float: left;
}

#splashapplication-form {
	position: absolute; 
	line-height: 1.5;
	width: 700px;
	top: 50%;
	margin-top: 0;
	left: 50%;
	margin-left: -350px;
}

#splashapply {
	position: absolute; 
	font-family: 'Outfit', sans-serif; 
	font-size: 58px; 
	text-align: center;
	width: 900px;
	margin-left: -450px;
	left: 50%;
	top: 50%;
	margin-top: -100px;
}

#splashapply2 {
	position: absolute; 
	font-family: 'Outfit', sans-serif; 
	font-size: 58px; 
	text-align: center;
	width: 900px;
	margin-left: -450px;
	left: 50%;
	top: 50%;
	margin-top: -170px;
}

#splashform-bg {
	position: absolute; 
	background-color: #260044; 
	height: 100vh; 
	width: 100%; 
}

/* index.html specific centering */
#splashheader1-text {
	position: relative;
	width: 90% !important;
	max-width: 830px !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	text-align: center !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: clamp(24px, 4vw, 42px) !important;
	top: 0 !important;
}

#splashheader-subtext1 {
	position: relative;
	width: 90% !important;
	max-width: 800px !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	text-align: center !important;
	font-family: 'Hind Siliguri', sans-serif !important;
	font-size: clamp(16px, 2.5vw, 22px) !important;
	top: 0 !important;
}

#summary {
	position: absolute;
	top: 100vh;
	left: 50%;
	transform: translateX(-50%);
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: fit-content;
	height: 1000px;
	padding: 0;
	margin: 0;
}

#summary-text-bottom {
	font-weight: bold; 
	font-size: clamp(14px, 2vw, 20px); 
	font-family: 'Hind Siliguri', sans-serif;
}

#summary-text-break1 {
	height: 13px; 
	width: 1px;
}

#summary-text-break2 {
	height: 18px; 
	width: 1px;
}

#summary-text-middle {
	font-family: 'Outfit', sans-serif; 
	font-size: clamp(28px, 4vw, 42px);
}

#summary-text-top {
	font-weight: bold; 
	font-size: 24px; 
	font-family: 'Hind Siliguri', sans-serif; 
	letter-spacing: 8px;
}

#summary-textwrap {
	position: relative !important;
	float: none !important;
	width: 650px !important;
	margin: 0 !important;
	left: auto !important;
}

#textarea1 { height: 150px; }

#third-tile {
	position: absolute; 
	width: 100%; 
	top: calc(100vh + 1000px); 
	height: 685px;
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.tour-header { 
	position: relative; 
	text-align: center !important; 
	font-family: 'Outfit', sans-serif !important;
	font-size: clamp(20px, 4cqw + 0.5rem, 58px);
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	width: fit-content !important;
	width: -moz-fit-content !important;
}

#tour-header3 {
	position: relative; 
	font-family: 'Outfit', sans-serif; 
	font-size: 58px; 
	text-align: center; 
	top: 50px;
}

#tour-subheader3 { top: 70px; }

#tour-tile1 {
	position: relative; 
	height: 750px;
}


#tour-tile2 {
	position: relative; 
	height: 1880px;
}

#tour-tile3 {
	position: relative; 
	background-color: #260044;  
	height: 800px;
}

#tour-video-frame {
	position: relative; 
	width: 640; 
	height: 360px; 
	margin-left: 50%; 
	left: -400px; 
	top: 0;
}

#TRF-brochure1 {
	background-image: url('../img/TRF1.jpg'); 
	position: relative; 
	width: 1418px; 
	height: 979px; 
	left: -709px; 
	margin-left: 50%;
}

#TRF-brochure2 {
	background-image: url('../img/TRF2.jpg'); 
	position: relative; 
	width: 1418px; 
	height: 778px; 
	left: -709px; 
	margin-left: 50%;
}

#u67 {
	position: relative !important;
	float: none !important;
	background-image: url('../img/u67.png'); 
	background-position: center !important; 
	background-repeat: no-repeat !important; 
	background-size: contain !important; 
	height: 600px !important; 
	width: 214px !important;
	flex-shrink: 0;
}

#video-frame {
	position: relative !important;
	width: 800px !important;
	height: 600px !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	top: 200px !important;
}

.custombutton {
	border-radius: 10px; 
	position: relative !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	width: 180px !important; 
	height: 60px !important; 
	text-align: center !important;
	justify-content: center !important;
	align-items: center !important; 
	margin-top: 10px !important; 
	background-color: #8c00ff; 
	font-family: 'Hind Siliguri', sans-serif; 
	font-weight: 900; 
	font-size: 20px;
}

.customhomebutton {
	border-radius: 10px; 
	position: relative; 
	left: 90px; 
	width: 180px; 
	height: 60px; 
	text-align: center; 
	top: 50%; 
	margin-top: 182px; 
	background-color: #8c00ff; 
	font-family: 'Hind Siliguri', sans-serif; 
	font-weight: 900; 
	font-size: 20px;
	z-index: 10;
}

.form-radio {
	cursor: pointer; 
	float: left;
}

.form-radio-label {
	position: relative; 
	top: -6px; 
	float: left;
}

.form-radio-spacer {
	width: 5px; 
	height: 1px; 
	float: left;
}

.form-radio-spacer2 {
	float: left; 
	height: 1px; 
	width: 10px;
}

.header-subtext {
	margin-left: 50%; 
	left: -45%; 
	top: 50%; 
	margin-top: 80px; 
	text-align: center; 
	font-size: clamp(16px, 2.5vw, 22px); 
	width: 90%; 
	max-width: 476px; 
	height: auto; 
	position: absolute; 
	font-family: 'Hind Siliguri', sans-serif;
}

.header-text {
	height: auto; 
	text-align: center; 
	width: 90%; 
	max-width: 540px; 
	margin-left: 50%; 
	left: -45%; 
	font-family: 'Outfit', sans-serif; 
	font-size: clamp(28px, 4vw, 42px);
}

.icon {
	position: relative; 
	filter: invert(100%); 
	background-size: contain; 
	height: clamp(60px, 10vw, 100px); 
	width: clamp(60px, 10vw, 100px); 
	background-position: center; 
	background-repeat: no-repeat; 
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

.icon-box {
	position: relative; 
	float: left; 
	width: 33%;
	container-type: inline-size;
	display: inline-block;
}

.icon-break-bottom { height: 20px; }

.icon-break-top { height: 15px; }

.icon-text { font-size: clamp(8px, 2cqw + 0.5rem, 22px); }

.icon-title {
	font-size: 28px; 
	letter-spacing: 5px;
}

.logo-text {
	position: relative; 
	float: right;
	font-family: 'Outfit', sans-serif; 
	font-weight: 900; 
	font-size: 25px; 
	left: 20px; 
	top: -7px;
}

#splash-content {
	position: relative;
	height: 440px;
	width: 900px;
}

#about-content {
	position: relative;
	height: 280px;
	width: 900px;
}

#splash-wrap, #about-wrap {
	position: absolute;
	display: flex;
	align-items: center;       /* Centers the child vertically */
	justify-content: center;   /* Centers the child horizontally */
	top: 0vh;
	height: 100vh;
	width: 100vw;
}

.meters {
	position: relative; 
	float: left;
	background-image: url('../img/meters.png'); 
	background-size: cover; 
	background-repeat: no-repeat; 
	height: 83px; 
	width: 83px; 
}

.percentages-box {
	position: relative; 
	background-color: black; 
	height: 430px;  
	width: 30%; 
	margin-left: 5%;
	margin-right: 5%;
	float: left;
	text-align: center;
	container-type: inline-size;
	align-content: center;
	justify-content: center;
	display: block;
}

.percentages-button {
	border: 2px solid #8c00ff; 
	border-radius: 5px; 
	height: 55px; 
	width: 160px; 
	position: relative;
	margin-left: 50%; 
	left: -86px; 
	color: #8c00ff; 
	font-weight: bolder; 
	font-size: 18px; 
	font-family: 'Outfit', sans-serif; 
}

.percentages-button-text {
	position: relative; 
	top: 14px;
}

.percentages-header {
	font-weight: bolder; 
	font-family: 'Hind Siliguri', sans-serif; 
	font-size: clamp(20px, 3vw, 32px); 
	letter-spacing: 5px;
}

.percentages-number {
	font-weight: bolder; 
	font-family: 'Outfit', sans-serif; 
	font-size: clamp(36px, 5vw, 60px); 
	letter-spacing: 5px;
}

.percentages-spacer {
	height: 1px; 
	width: 50px; 
	float: left;
}

.percentages-text {
	padding: 30px; 
	padding-top: 20px; 
	font-weight: bolder; 
	font-family: 'Hind Siliguri', sans-serif; 
	font-size: clamp(8px, 2.5cqw + 0.5rem, 20px);
}

.percentages-text-break {
	width: 1px; 
	height: 10px;	
}

.percentages-v-align {
	position: relative; 
	top: 25px;
}

.question-block {
	text-align: left; 
	height: 65px; 
	color: grey; 
	background-color: white; 
	position: relative; 
	font-size: 16px;
}

.resource-break {
	width: 1px; 
	height: 100px;
	float: none !important;
}

.resource-header {
	font-family: 'Outfit', sans-serif;
	font-size: clamp(10px, 5cqw + 0.5rem, 36px);
	text-align: left !important;
}

.resource-image {
	float: left; 
	position: relative; 
	background-position: 100% 50%;
	background-size: contain;
	background-repeat: no-repeat; 
	height: 100%;
	width: 40%;
}

#resource-image2 {
	float: right;
}
.resource-image-link {
	position: relative; 
	height: 100%; 
	width: 100%; 
	z-index: 1;
}

.resource-spacer {
	float: left; 
	height: 1px; 
	width: 100px;
}

.resource-text {
	position: relative; 
	font-family: 'Hind Siliguri', sans-serif;
	text-align: left !important;	
	font-size: clamp(8px, 1.25cqw + 0.5rem, 20px);
}

.resource-text-break {
	position: relative; 
	height: 30px;
}

.resource-wrap {
	position: relative !important;
	top: 240px !important;
	height: 18%;
	width: 90% !important; 
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	font-size: clamp(8px, 1.75cqw + 0.5rem, 20px);
	container-type: inline-size;
	align-content: center;
	justify-content: center;
	display: block;
}

.resource-writeup-wrap {
	position: relative; 
	float: right;
	width: 46%;
	height: 90%;
	container-type: inline-size;
	align-content: center;
	justify-content: center;
	display: inline-block;
}

.splashbutton {
	position: relative;
	margin: 30px;
	margin-left: -100px;
	left: 50%;
	display: flex;
	border-radius: 10px; 
	width: 200px; 
	height: 70px; 
	justify-content: center;
	text-align: center; 
	background-color: #8c00ff; 
	font-family: 'Hind Siliguri', sans-serif; 
	font-weight: 900; 
	font-size: 20px;
}

#splashbutton1 {
	margin-top: 80px;
}

#custombutton1 {
	margin-top: 20px;
}

.splashbutton-text {
	position: relative; 
	top: 75%; 
	margin-top: -31px; 
	height: 36px;
	color: white;
	line-height: 1.2;
}

.splashheader-subtext {
	margin-left: 50%; 
	left: -45%; 
	top: 50%; 
	margin-top: 80px; 
	text-align: center; 
	font-size: clamp(16px, 2.5vw, 22px); 
	width: 90%; 
	max-width: 800px; 
	height: auto;  
	font-family: 'Hind Siliguri', sans-serif;
	font-style: italic;
}

.splashheader-text {
	height: auto; 
	text-align: center;  
	width: 90%; 
	max-width: 830px; 
	margin-left: 50%; 
	left: -45%; 
	font-family: 'Outfit', sans-serif; 
	font-size: 42px;
}

.tile-header {
	position: absolute !important;
	text-align: center !important; 
	font-family: 'Outfit', sans-serif !important;
	font-size: 58px !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	width: fit-content !important;
	width: -moz-fit-content !important;
	top: 100px !important;
}

#tile-header3 {
	margin-top: -75px !important;
}

.tour-subheader {
	font-family: 'Hind Siliguri', sans-serif; 
	font-size: 20px; 
	position: relative; 
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

@media screen and (max-device-width: 480px) {
	#TRF-brochure1 {
		background-image: url('../img/TRF1-long.jpg'); 
		background-size: cover;
		height: 2898px;
		width: 800px; 
		left: -400px;
	}
	#TRF-brochure2 {
		background-image: url('../img/TRF2-long.jpg');
		background-size: cover;
		height: 3503px; 
		width: 800px; 
		left: -400px;
	}
	#tour-tile2 { 
		height: 6515px;
	}
}

@media screen and (max-device-height: 480px) {
	#bgheader, #splash-wrap {
		height: 800px;
	}
	#about-content {
		margin-top: 70px;
	}
	#TRF-brochure1 {
		background-image: url('../img/TRF1-long.jpg'); 
		background-size: cover;
		height: 2898px;
		width: 800px; 
		left: -400px;
	}
	#TRF-brochure2 {
		background-image: url('../img/TRF2-long.jpg');
		background-size: cover;
		height: 3503px; 
		width: 800px; 
		left: -400px;
	}
	#tour-tile2 { 
		height: 6515px;
	}
}