/*GENERAL*/
*{
	margin: 0;
	padding: 0;
}

body{
	font-family: verdana, tahoma, sans-serif;
	width: 100%;
}

/*PRE-LOAD IMAGES TO PREVENT FLICKER*/
body:after {
	content: url(img/fblogo_col.png) url(img/iglogo_col.png) url(img/kc_headshot.jpg);
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
}

main{
	padding: 0 auto;
}

/*Anchor Tags*/
a{
	color: #000;
	text-decoration: none; /*Removes underline from all hyperlink text*/
}

/*HEADER*/
/*Primary Logo*/
.header-primary-logo{
	width: 100%;
	height: 40vh;
	background-image: url(img/mtm_logo.png);
	background-repeat: no-repeat; /*Ensures only 1 copy of image is shown*/
	background-size: contain; /*Ensures image fits in Primary Logo div*/
	background-position: center; /*Centers Primary Logo in div*/
}

/*Main Navigation for Website(Icon Logo, Navbar, SM Icons)*/
.header-main-nav{
	width: 100%;
	height: 7.5vh; /*Sets height for Main Navigation*/
	display: flex; /*Displays Main Navigation items horizontally next to each other*/
	justify-content: space-between; /*Puts space between Main Navigation items*/
}

.header-icon-logo{
	width: fit-content; /*Set width of Icon Logo div to fit all items( Icon logo & Navbar)*/
	height: 100%;
	display: flex; /*Displays Icon Logo div items horizontally next to each other */
}

.header-icon-logo img{
	height: 100%; /*Set height of Icon Logo image to height of Icon Logo div*/
}


.header-navbar{
	width: fit-content; /*Set width of Main Navbar div to width needed for all Navbar items*/
}

.header-navbar ul{
	list-style: none; /*Removes bullet points from Main Navbar items*/
	margin-left: 0.934rem; /*puts space between icon logo and entire navbar on left side*/
}

.header-navbar ul li{
	display: inline; /*Places Main Navbar items horizontally next to each other*/
	float: left; /*Further ensures Min Navbar items are next to each other; stops pointer cursor from disapperaring btw items*/
	position: relative; /*Allows one to add 'posiiton:absolute' inside dropdown*/
}


.header-navbar ul li a{
	padding: 0rem 0.625rem; /*Puts space between Main Navbar items; link spacing in btw text as well(good for acessibility)*/
	line-height: 7.5vh; /*Centers Main Navbar links since height is same as Main Navbar div*/
	display: block; /*Ensures link also activates in space below hyperlink text since hyperlink is now a block*/
}

.header-navbar ul li a:hover{
	color: #f8e115; /*Makes hyperlink text of Main Navbar links change to ProMaker Yellow-#f8e115 on hover*/
	transition: all 0.3s; /*Sets time for hover effects on Main Navbar links*/
}

.header-navbar ul li ul{
	display: none; /*Hides dropdown in Main Navbar*/
	position: absolute; /*Sets position of dropdown relative to its parent element(i.e.Main Navbar li)*/
	background-color: #fff;
	padding: 0.625rem; /*Ensures background colour of dropdown is not on edges of dropdoown container*/
	border-radius: 0rem 0rem 0.25rem 0.25rem; /*Creates curved corners on for bottom corners of dropdown container*/
}

.header-navbar ul li:hover ul{
	display: block; /*Shows dropdown on hover*/
}

.header-navbar ul li ul li a{	
	white-space: nowrap; /*Ensures text doesn't wrap to next line; may remove this*/
}

.header-navbar ul li ul li a:hover{
	color: #f8e115; /*Makes hyperlink text of Dropdown links change to ProMaker Yellow-#f8e115 on hover*/
	background-color: #f3f3f3; /*Set background colour of dropdown to Very Light Grey- #f3f3f3*/
}

.selected{
	text-decoration: underline 2px; /*Gives selected link in Main Navbar an underline*/
}

/*Social Media Icons*/
.header-sm{
	width: 5vw; /*Set width for SM Icons container*/
	height: 100%; /*Set height for SM Icons container*/
	display: flex; /*Places contents of SM Icons container next to each other horizontally*/
	column-gap: 20%; /*Establishes space between the 2 SM logo images*/
}

/*Facebook(FB)*/
.header-sm-fb{
	width: 20px;
	height: 20px;
	background-image: url(img/fblogo_bw.png);
	background-repeat: no-repeat; /*Ensures FB logo image will not be repeated*/
	background-size: cover; /*Rezize FB logo image to cover entire container*/
}

/*Instagram(IG)*/
.header-sm-ig{
	width: 20px;
	height: 20px;
	background-image: url(img/iglogo_bw.png);
	background-repeat: no-repeat; /*Ensures IG logo image will not be repeated*/
	background-size: cover; /*Rezize IG logo image to cover entire container*/
}

.header-sm-fb:hover{
	background-image: url(img/fblogo_col.png); /*FB logo image changes to coloured version on hover*/
}

.header-sm-ig:hover{
	background-image: url(img/iglogo_col.png); /*IG logo image changes to coloured version on hover*/
}

/*Mobile Menu(Sidebar)*/
.sidebar{
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 100%;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
	display: none;
	flex-direction: column;
}


.sidebar li{
	width: 100% ; /*Ensure link extends to full width of mobile menu*/
	height: calc(100%/4);
}

.sidebar li a{
	width: 100%;/*Further ensure link extends to full width of mobile menu*/
	font-size: 1.5rem;
}

.sidebar-open{
	margin-left: 10px;
	font-size: 1.5rem;
	font-weight: 500;
	background-color: #fff;
	border: none;
	line-height: 7.5vh;
	display: none;
}

.sidebar-close{
	margin-left: 10px;
	font-size: 1.5rem;
	font-weight: 500;
	background-color: #fff;
	border: none;
	line-height: 7.5vh;
}

/*HERO SECTION*/
/*Container for Hero Section(Background Image, Welcome Text and Link)*/
.index-main{
	width: 100%;
	height: 100vh;
	background-image: url(img/mtm_collage.png);
	background-size: contain; /*Ensures size of Hero Section image will be restricted to fit in container*/
	background-repeat: no-repeat; /*Ensures Hero Section image will not be repeated*/
	background-position: center; /*Centers Hero Section image*/
	display: flex; /*Adds flexbox properties to item in container(i.e the text)*/
	justify-content: center; /*Centers text in Hero Section*/
	align-items: start; /*Ensures text is aligned from beginning of container*/
}

/*Container for Welcome Text and Link*/
.main-intro{
	margin: auto; /*Centers text in container*/
	text-align: center; /*Aligns text in center block style*/
}

.main-intro h1{
	color: #fff; /*Set colour of Hero Section header to White- #fff*/
	font-weight: 600;
	font-size: 2.25rem;
	-webkit-text-fill-color: #fff;
	-webkit-text-stroke: 1px #000; /*Add black outline to text*/
	text-transform: uppercase;
}

.main-intro p{
	color: #fff; /*Set colour of Hero Section paragraph to White- #fff*/
	font-weight: 300;
	font-size: 1.5rem;
}

.main-intro a {
	color: #fff; /*Set colour of Link to White- #fff*/
	font-weight: 300;
	font-size: 1.2rem;
	display: block; /*Displays Link as a box*/
	text-align: center; /*Centers Link text in box*/
	margin: 0 auto;
	background-color: #f8e115; /*Set background colour of Link to ProMaker Yellow- #f8e115*/
	padding: 0.625rem 1.25rem; /*Set padding around Link text in box*/
	width: fit-content; /*Set width of Link box to fit width of text*/
	border-radius: 0.25rem; /*Creates curved corners for Link box*/
	
}

.main-intro a:hover{
	color: #ed1c24; /*Set hover colour for Link to Red(pigment)-*#ed1c24*/
	transition: all 0.3s; /*Sets time for hover effects on Main Intro link*/
}

/*FOOTER*/
/*Styling for Footer container*/
.footer-main{
	width: 100%;
	color: #fff; /*Change colour of text to White- #fff*(doesn't apply to hyperlinks)*/
	background-color: #1d1d1d; /*Change background colour to Eerie Black- #1d1d1d*/
	display: flex; /*Apply flexbox so lists can be in columns*/
	justify-content: space-around;
	margin-top: 0.625rem; /*Put space between top of Footer & bottom of Hero Section*/
	padding: 3.75rem 0 6.25rem; /*Put space between Footer text and edges of container*/
}

.footer-main ul{
	list-style: none; /*Remove bullet points from links in Footer*/
}

/*Place horizontal line on left side of Footer text*/
.footer-main ul:nth-child(1){
	border-left: 0.25rem solid #f8e115; /*Make border ProMarker Yellow- #f8e115*/
	padding-left: 1.25rem;/*Put space between border and 1st column of Footer*/
}

/*Increase line spacing in Footer: Site Map(Col 1, nth-child 1) and Social Media(Col 2- nth-child 2)*/
.footer-main ul:nth-child(1),
.footer-main ul:nth-child(2){
	line-height: 2rem;
}

/*Increase line spacing in Footer: Address(Col 3, nth-child 3)*/
.footer-main ul:nth-child(3){
	line-height: 1.5rem;
}

/*Styling for Footer hyperlinks*/
.footer-main ul li a{
	color: #fff; /*Change colour of Footer hyperlinks to White- #fff*/
}

.footer-main ul li a:hover{
	color: #f8e115; /*Change text colour on hover to ProMarker Yellow- #f8e115*/
	transition: all 0.3s; /*Sets time for hover effects on Footer links*/
}

/*OUR METHOD*/
/*Main Tag*/
.our-method-main{
	padding: 0 0.625rem;
}

/*Table of Contents*/
.table-of-contents{
	float: right; /*place ToC on left of Method Details*/
	width: 40vw;
	position: sticky; /*make ToC stay at top of page on scroll*/
	top: 0.625rem; /*required coordinate for 'position:sticky'; will stick 0.625rem(10px) from top on scroll*/
	padding: 0.625rem;
	margin-left: 1.25rem;
	display: flex;
	justify-content: center; /*center ul(ToC) in div*/
}

.table-of-contents ul{
	list-style: none; /*removes bullet points from list items*/
}

.table-of-contents ul li{
	margin-bottom: 0.625rem; /*creates space below each item in ToC*/
}

.table-of-contents ul li a:hover{
	color: #1e90ff; /*#1e90ff:Dodger Blue*/
	transition: all 0.3s;
}

/*Styling for Method Details*/
.method-details{
	width: 60vw;
}

/*Styling for links in Method Details*/
.method-details a:hover{
	color: #1e90ff; /*#1e90ff:Dodger Blue*/
	transition: all 0.3s;
}

/*PROSPECTIVE PARTICIPANTS*/
.prospective-participants-main{
	padding: 0 0.625rem;
}

/*Page with Quiz*/
/*Styling for Prospective Participant Quiz container*/
.quiz-box{
	width: 50vw;
	height: 100%;
	padding: 0.625rem;
	margin: 0.625rem auto;
	background-color: #defedf; /*#defedf: Tara*/
	border: 2px solid #000;
	border-radius: 0.5rem;
}

/*Styling for Prospective Participant Quiz heading */
.quiz-box h1 {
	padding-bottom: 0.625rem; /*create space between quiz title and bottom border*/
	margin-bottom: 1.25rem; /*create space between quiz title and questions below it*/
	border-bottom: 1px solid #000; /*place border below quiz title*/
}

/*Styling for Prospective Participant Quiz submit button*/
#quiz-submit {
	width: 4rem;
	height: 1.562rem;
	font-size: 1rem;
	font-weight: 300;
	cursor: pointer;
}

#quiz-submit:hover {
	background-color: #f8e115; /*#f8e115- ProMarker Yellow*/;
}

/*Page with Unsuccessful Quiz Reults*/
/*Styling for Link to Home Page*/
.back a {
	text-decoration: underline;
}

/*Styling for Link to Home Page on hover*/
.back a:hover {
	color: #f8e115; /*#f8e115- ProMarker Yellow*/
}

/*THANK YOU- Page after completing Prospective Participant Form*/
.thank-you-main{
  text-align: center;
}

.thank-you-box{
display: inline-block;
  line-height: 5vh;
  vertical-align: middle;
  width: 50%;
  height: 50%;
}

/*PROGRESS TRACKER*/
/*Main*/
.main-tracker{
	padding: 0 0.625rem;
}

/*Put space between h1 and paragraph below*/
.main-tracker h1{
	margin-bottom: 0.312rem;
}

/*Collapse borders and Center table*/
.main-tracker table{
	border-collapse: collapse;
	margin-left: auto;
  	margin-right: auto;
  	/*Add shadow to table cells (Silver-#c0c0c0) and set background colour to White (#fff)*/
  	box-shadow: 0 0.312rem 0.625rem #c0c0c0;
  	background-color: #fff;
}

/*Put box shadow around header of table(Silver-#c0c0c0)*/
.main-tracker table thead{
	box-shadow: 0 0.312rem 0.625rem #c0c0c0;
}

/*Put padding in table header (<th>)*/
.main-tracker table th{
	padding: 0.312rem;
}

/*Put padding around in each table to cell (<td>)*/
.main-tracker table td{
	padding: 0.625rem;
}

/*Alternate background colur of row to #defedf, a light tint of Emerald Green(#046307)*/
.main-tracker table tr:nth-child(even){
	background-color: #defedf;
}

/*Create styling of 'Status' buttons in table
Border radius for rounded corners, background colour Very Light Gray(#d3d3d3) and padding 5px*/
.status{
	border-radius: 0.25rem;
	background-color: #d3d3d3;
	padding: 0.312rem;
	text-align: center;
}

/*Set 'To be Done' status text colour to Fire Brick(#b22222), background to Light Salmon Pink(#ff9999 )
	and bold text*/
	.status.to_be_done{
		color: #b22222;
		background-color: #ff9999;
		font-weight: bold;
	}

/*Set 'In Progress' status text colour to Bronze(#cd7f32), background to Unmellow Yellow(#ffff66) 
and bold text*/
	.status.in_progress{
		color: #cd7f32;
		background-color: #ffff66;
		font-weight: bold;
	}

	/*Set 'Completed' status text colour to Green(#008000), background to Pale Green(#98fb98)
	and bold text*/
	.status.completed{
		color: #008000;
		background-color: #98fb98;
		font-weight: bold;	
	}

.table-update{
	font-size: 0.75rem;
	text-align: center;
}

/*PROJECT TEAM*/
/*Ensure all text in Project Team memeber div is seen*/
.project-team-main{
	padding: 0 0.625rem;
	margin-bottom: 1.25rem;
}

/*Set size of Project Team members' headshots*/
.project-team-main img{
	height: 30vh;
	width: 10vw;
	padding: 0.312rem;
	float: left;
}

/*Get text to wrap around image*/
.team-1{
	width: 50vw;
	height: auto;
	padding: 0.312rem;
}

/*CONTACT US*/
/*Create space below Main section and Footer section*/
.contact-us-main{
    padding: 0 0.625rem;
    margin-bottom: 0.625rem;
}

.contact-us-details{
	display: flex;
	column-gap: 10vw;
}

/*Styling for Contact Form*/
.contact-div-2 form{
	width: 28vw;
	padding: 0.625rem;
	background-color: #defedf;
	border: 1px solid #000;
	border-radius: 10px;
}


/*MOBILE VERSION*/
@media only screen and (max-width: 768px) and (orientation: portrait) {
	/*HEADER*/
.hideOnMobile{
		display: none;
	}

	.sidebar-open{
		display: block;
	}

	.header-navbar ul li:nth-child(4) {
	margin-top: 100px;
}

	.header-navbar ul li ul {
		display: block;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
	}

    /*HEADER*/
    /*Social Media Icons*/
.header-sm{
	width: 12vw; /*Set width for SM Icons container*/
	column-gap: 10%; /*Establishes space between the 2 SM logo images*/
}

	/*HERO SECTION*/
	.index-main{
		max-height: 25vh; /*Reduced Hero Section height by half*/
	}

	.main-intro h1{
	font-size: 1.2rem; /*Reduced size of Hero Section header text*/
}

.main-intro p{
	font-size: 1rem; /*Reduced size of Hero Section paragraph text*/
}

.main-intro a {
	font-size: 1rem; /*Reduced size of Hero Section hyperlink text*/
}

/*FOOTER*/
/*Styling for Footer Container*/
.footer-main{
	flex-direction: column;
	align-items: center;
	margin-top: 0.3rem; /*Reduce space between top of Footer & bottom of Hero Section*/
	padding: 1.87rem 0 3.12rem; /*Reduced space between Footer text and edges of container*/
}

/*Styling for Footer- Site Map*/
.footer-main ul:nth-child(1){
	border-left: none; /*Removed border from Site Map(Col 1, nth-child 1)*/
	padding-left: 0rem; /*Removed padding for previous border*/
}

/*Styling for Footer Site Map & Social Media Columns*/
.footer-main ul:nth-child(1),
.footer-main ul:nth-child(2){
	padding-bottom: 1rem; /*Place space between each block in Footer*/
	text-align: center;
}

/*Styling for Footer Address Column*/
.footer-main ul:nth-child(3){
	text-align: center;
}

/*OUR METHOD*/
/*Table of Contents(ToC)*/
.table-of-contents{
	display: none;
}

/*Styling for Method Details*/
.method-details{
	width: 100vw;
}

/*PROSPECTIVE PARTICIPANTS*/
/*Styling for Prospective Participant Quiz container*/
.quiz-box{
	width: 80vw;
}

 /*Page with Unsuccessful Quiz Reults*/
 /*No addtional styling needed*/

 /*Page with Successful Quiz Reults*/
 /*No addtional styling needed*/

/*THANK YOU- Page after completing Prospective Participant Form*/
/*No addtional styling needed*/

/*PROGRESS TRACKER*/
/*No addtional styling needed*/

/*PROJECT TEAM*/
/*Set size of Project Team members' headshots*/
.project-team-main img{
    height: 30vh;
    width: 40vw;
}

/*Get text to wrap around image*/
.team-1{
    width: 85vw;
}


/*CONTACT US*/
/*Create space below Main section and Footer section*/
.contact-us-details{
	flex-direction: column;
    row-gap: 5vh;
}

/*Styling for Contact Form*/
.contact-div-2 form{
	width: 85vw;
}
}


@media only screen and (max-width: 900px) and (orientation: landscape) {
	/*HEADER*/
.hideOnMobile{
		display: none;
	}

	.sidebar-open{
		display: block;
	}

.header-navbar ul li:nth-child(4) {
	margin-top: 100px;
}

.header-navbar ul li ul {
		display: block;
		background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	}

    /*HEADER*/
    /*Social Media Icons*/
.header-sm{
	width: 12vw; /*Set width for SM Icons container*/
	column-gap: 10%; /*Establishes space between the 2 SM logo images*/
}

/*HERO SECTION*/
/*Container for Hero Section(Background Image, Welcome Text and Link)*/
.index-main{
	height: 75vh;
	background-size: 100%; /*Ensures size of Hero Section image fits in Hero Section container*/
}

.main-intro h1{
	font-size: 1.2rem; /*Reduced size of Hero Section header text*/
} 

.main-intro p{
	font-size: 1.1rem; /*Reduced size of Hero Section paragraph text*/
}

.main-intro a {
	font-size: 1.1rem; /*Reduced size of Hero Section hyperlink text*/
}

/*FOOTER*/
/*Styling for Footer Container*/
.footer-main{
	font-size: 0.80rem;
	margin-top: 0.3rem; /*Reduce space between top of Footer & bottom of Hero Section*/
	padding: 1.87rem 0 3.12rem; /*Reduced space between Footer text and edges of container*/
}

/*Styling for Footer- Site Map*/
.footer-main ul:nth-child(1){
	border-left: none; /*Removed border from Site Map(Col 1, nth-child 1)*/
	padding-left: 0.75rem; /*Removed padding for previous border*/
}
/*OUR METHOD*/
/*Table of Contents(ToC)*/
.table-of-contents{
	display: none;
}

/*Method Details*/
.method-details{
	width: 100vw;
}

/*PROSPECTIVE PARTICIPANTS*/
/*Page with Quiz*/

/*Styling for Prospective Participant Quiz container*/
.quiz-box{
	width: 80vw;
}
/*Page with Unsuccessful Quiz Reults*/
 /*No addtional styling needed*/

 /*Page with Successful Quiz Reults*/
 /*No addtional styling needed*/

 /*THANK YOU- Page after completing Prospective Participant Form*/
/*No addtional styling needed*/

/*PROGRESS TRACKER*/
/*No addtional styling needed*/

/*PROJECT TEAM*/
/*Set size of Project Team members' headshots*/
.project-team-main img{
    height: 45vh;
    width: 25vw;
}

/*Get text to wrap around image*/
.team-1{
    width: 85vw;
}

/*CONTACT US*/
/*Create space below Main section and Footer section*/
.contact-us-details{
	flex-direction: column;
    row-gap: 10vh;
}

/*Styling for Contact Form*/
.contact-div-2 form{
	width: 85vw;
}
}