@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

 	*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}

	body{
		margin: 0px;
		padding: 0px;
		font-family: Roboto, sans-serif;
		box-sizing: border-box;
		font-weight: 300;
		font-size: 18px;
	}
	
	header{
		margin-top: 50px;
	}
	
	a{
		text-decoration: none;
	}
	
	#openNav{
		font-size: 23px;
		color: gray;
	}
	
	.error{
		padding: 14px;
		color: red;
	}

	.wrapper{
		margin-left: auto;
		margin-right: auto;
		max-width: 1200px;
		padding: 2px 15px 2px 15px;
	}

	.button{
		padding: 15px 100px;
		font-size: 18px;
		background-color: #6B798F;
		border: 1px solid #6B798F;
		border-radius: 5px;
		color: white;
		width: 100%;
		margin-bottom: 1rem;
	}

	/* Top */ 
	#top{
		position: absolute;
		position: fixed;
		top:0;
		left:0;
		z-index: 2;
		background-color: white;
		width: 100%;
	}
	
	#top img{
		width: 150px;
	}
  
	#top #options{
		float: right;
		margin-top:30px;
		text-align: right;
		font-family: Roboto, sans-serif;
		font-weight: 400;
		color: black;
	}
	
	#top #options a{
		text-decoration: none;
		margin-left: 10px; 
		color: black;
	}
	
	#top #options a#activeNav{
		padding: 10px 20px;
		background-color: #6B798F;
		border-radius: 20px;
		color: white;
		font-weight: 700;
	}
  
	/* Nav */
	#nav{
		display: none;
		padding: 20px;
		box-sizing: border-box;
		background-color: #6B798F;
		width: 60%;
		height: 100vh;
		z-index: 3;
		position: fixed;
		top: 0;
		right: 0;
		color: white;
		font-family: 'Bebas Neue', cursive;
		font-size: 28px;
	}
  
	#nav a{
		text-decoration: none;
		color: white;
	}
	
	#nav hr{
		color:white;
		border: .5px solid white;
		margin: 3px 0px 3px 0px;
	}
  
	#nonMobileNav{
		display: none;
	}
	
	#mobileNav{
		display: inline-block;
	}
  
	/* Push */
	#pushTopHome{
		margin-top: 20px;
	}
	
	#pushTopNormal{
		margin-top: 83.25px;
		border-top: 1px solid orange;
		padding-top: 50px;
	}
	
	h1{
		font-family: Roboto, sans-serif;
		font-weight: 200;
		font-size: 35px;
		margin: 2.5px 0px 10px 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	
	h2{
		font-family: Roboto, sans-serif;
		font-weight: 200;
		font-size: 25px;
		margin: 2.5px 0px 10px 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	
	h3{
		font-family: Roboto, sans-serif;
		font-weight: 200;
		font-size: 18px;
		margin: 2.5px 0px 10px 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	
	.smallFont{
		font-size: 13px;
		color: gray;
		margin-top: 0px;
		padding-top: 0px;
	}
	
	input:focus,
	select:focus,
	textarea:focus,
	button:focus {
		outline: none;
	}
	
	input,
	select,
	textarea,
	button {
		border: 1px solid #6B798F;
		margin-bottom: 10px;
	}
	
	input{
		padding: 14px;
		width: 100%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	select{
		padding: 14px;
		width: 100%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	textarea{
		padding: 14px;
		width: 100%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	input[type="checkbox"]:checked {
	  color:green;
	}
	
	input[type="checkbox"] {
	   padding: 0px;
	   margin:0px;
	   width: auto;
	   font-size: 20px;
	   border-radius: 5px;
	}
	
	/* Pricing */
	.priceBoxContainer{
	  padding: 30px;
	}
	
	.fa-duotone{
	  font-size: 55px;
	  padding: 30px 0 0 0;
	  box-sizing: border-box;
	}
	
	//---------------------------
	//About::
	//---------------------------
	
	#about hr{
	  margin: 25px 0 25px 0;
	}
	
	#about{
	  width:100%;
	  height:auto;
	  background-color:#F7DF70;
	  padding: 0px 0px 50px 0px;
	  box-sizing: border-box;
	}
	
	#about .sectionHeader{
	  color: black;
	  font-size: 40px;
	}
	
	#about p{
	  padding: 0 2px 20px 2px;
	}
	
	#about h2.price{
	  margin: 25px 0 25px 0;
	  color: #6B798F;
	  color: gray;
	  font-weight: 100;
	}
	
	//---------------------------
	//Services::
	//---------------------------
	
	#services hr{
	  margin: 25px 0 25px 0;
	}
	
	#services{
	  width:100%;
	  height:auto;
	  background-color:#9BC7E5;
	  padding: 50px 0px 50px 0px;
	  box-sizing: border-box;
	}
	
	.priceBox{
	  min-width: 30%;
	  height: auto;
	  background-color: white;
	  margin-bottom: 20px;
	  box-sizing: border-box;
	  border-radius: 5px;
	}
	
	.priceBoxHeader{
	  width: 100%;
	  height: 40px;
	  border-radius: 5px 5px 0px 0px;
	  box-sizing: border-box;
	  padding: 10px;
	  text-align: center;
	}
	
	#grantsScholarships .priceBoxHeader{
	  background-color: #6B798F;
	  color: black;
	}
	
	#payAsYouLearn .priceBoxHeader{
	  background-color: #6B798F;
	  color: white;
	}
	
	#services .sectionHeader{
	  color: white;
	  font-size: 40px;
	}
	
	#services p{
	  padding: 0 2px 20px 2px;
	}
	
	#services h2.price{
	  margin: 25px 0 25px 0;
	  color: #6B798F;
	  color: gray;
	  font-weight: 100;
	}
	
	#learningForSchools .priceBoxHeader{
	  background-color: #6B798F;
	  color: white;
	}
	
	#price{
	  margin-bottom: 100px;
	}
	
	/* Learning Programs */ 
	.learningProgramsBox{
	  max-width: 100%;
	  height: auto;
	  background-color: white;
	  box-sizing: border-box;
	  border-radius: 5px;
	  margin-bottom: 20px;
	  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	 
	}
	
	.learningProgramsBoxHeader{
	  width: 100%;
	  height: 40px;
	  border-radius: 5px 5px 0px 0px;
	  box-sizing: border-box;
	  padding: 10px;
	  background-color: #6B798F;
	  color: white;
	}
	
	.learningProgramsBoxContainer{
	  padding: 30px;
	}
	
	/* Contact Us */
	#contactUs{
	  width: 100%;
	  height: auto;
	  background-color: white;
	  box-sizing: border-box;
	  padding: 30px 0 50px 0;
	}
	
	#contact{
	  margin-top: 50px;
	}
	
	#contactUs #box2 #address{
		margin-bottom: 30px;
	}
	#contactUs #box2 #phone{
		margin-bottom: 30px;
	}
	
	#contactUs .fa-brands{
		font-size: 35px;
		color: gray;
		margin-right: 10px;
	}
	
	/* Enroll */
	#enroll{
		margin: 0 0 50px 0;
	}
	
	#enroll h2{
		margin-top: 50px;
	}
	
	#enroll .optionBox h2{
		margin-top: 0px;
	}
	
	#enroll h3{
		margin: 20px 0 15px 0;
	}
	
	#enroll .optionBox{
		margin: 20px 0 0 0;
		border: 1px solid #6B798F;
		border-radius: 5px;
		padding: 20px;
		box-sizing: border-box;
	}
	
	#studentType{
		
	}
	
	#learningProgram{
		display: none;
	}
	
	#learningPlan{
		display: none;
	}
	
	#adultInformation{
		display: none;
	}
	
	#parentsInformation{
		display: none;
	}
	
	#studentInformation{
		display: none;
	}
	
	#paymentInformation{
		display: none;
	}
	
	#accountInformation{
		display: none;
	}
	
	#agreement{
		display: none;
	}
	
	#completeEnrollmentButton{
		display: none;
	}
	
	.msgInfo{
		width: 100%;
		height: auto;
		background-color:#F7DF70;
		padding: 30px;
		color: black;
		box-sizing: border-box;
		font-weight: 400;
		text-align: center;
		position: fixed;
		top:0;
		left:0;
		z-index: 5;
	}
	
	.msgError{
		width: 100%;
		height: auto;
		background-color:red;
		padding: 30px;
		color: white;
		box-sizing: border-box;
		font-weight: 400;
		text-align: center;
		position: fixed;
		top:0;
		left:0;
		z-index: 5;
	}
	
@media screen and (min-width: 780px) {
	
	header{
		margin-top: 50px;
	}

	.button{
		padding: 15px 100px;
		font-size: 18px;
		background-color: #6B798F;
		border: 1px solid #6B798F;
		border-radius: 5px;
		color: white;
		width: auto;
	}
	
	/* Nav */
	#nonMobileNav{
		display: inline-block;
	}
	
	#mobileNav{
		display: none;
	}
	
	input{
		padding: 14px;
		width: 40%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	select{
		padding: 14px;
		width: 100%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	textarea{
		padding: 14px;
		width: 40%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	/* Pricing */
	#price{
	  display: flex;
	  justify-content: space-around;
	  align-items:flex-start;
	  margin-bottom: 100px;
	}
	
	.priceBox{
	  max-width: 30%;
	  height: auto;
	  background-color: white;
	  box-sizing: border-box;
	  border-radius: 5px;
	  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	}
	
	.priceBoxHeader{
	  width: 100%;
	  height: 40px;
	  border-radius: 5px 5px 0px 0px;
	  box-sizing: border-box;
	  padding: 10px;
	  text-align: center;
	}
	
	#grantsScholarships .priceBoxHeader{
	  background-color: #6B798F;
	  color: black;
	}
	
	#payAsYouLearn .priceBoxHeader{
	  background-color: #6B798F;
	  color: black;
	}
	
	#learningForSchools .priceBoxHeader{
	  background-color: #6B798F;
	  color: black;
	}
	
	//---------------------------
	//About::
	//---------------------------
	
	#about .sectionHeader{
	  color: white;
	  font-size: 70px;
	}
	
	#about p{
	  padding: 30px;
	}
	
	//---------------------------
	//Services::
	//---------------------------
	
	#services .sectionHeader{
	  color: white;
	  font-size: 70px;
	}
	
	#services p{
	  padding: 30px;
	}
	
	/* Contact Us */
	#contact{
		display: flex;
		margin-top: 50px;
		justify-content: space-between;
	}
	
	#contactUs .contactBox{
		width: 100%;
	}
	
	.contactBox#box1{
		width: 65%;
	}
	
	.contactBox#box2{
		width: 30%;
	}
	
	#contactUs input{
		padding: 14px;
		width: 100%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	#contactUs textarea{
		padding: 14px;
		width: 100%;
		font-size: 14px;
		border-radius: 5px;
	}
	
	#contactUs .button{
		width: 100%;
	}
	
	#contactUs #box2 #address{
		margin-bottom: 30px;
	}
	#contactUs #box2 #phone{
		margin-bottom: 30px;
	}
	
}