styles.css

/*Every Page*/
html,body{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body{
	font-family: 'Gowun Dodum', sans-serif;
	padding: 0;
	margin: 0;
}

div, h1, h2, h3, h4,input[type=button] {
  font-family: 'Gowun Dodum', monospace;
}
.location > h3, .message > h3, .phone > h3{
	padding-left: 50px;
}

h4.credits{
	margin: 0;
	padding: 0;
	padding-left: 35px;
}

hr{
	margin: 0;
}


/*BUTTONS*/
.button1 {
	color: black;
	border-color: black;
	background-color: white;
}
.button6{
	color: black;
	border-color: gray;
	background-color: lightgray;
}
.button2{
	background: #379e97;
	border-color: #379e97;
	color: white;
}

.button1, .button2, .button6{
	border-radius: 20px;
	padding: 15px;
	padding-right: 30px;	
	padding-left: 30px;
	font-size: 16px;
	width: auto;
	border-style: solid;
  border-width: 1px;
}

.button1:hover{
	background-color: #379e97;
	border-color: #379e97;
	color: white;
	cursor: pointer;
}

.button2:hover{
	color: black;
	border-color: black;
	background-color: white;
	cursor: pointer;
}

.button3{
	background-color: #C3EDEA;
	color: black;
	border-color: black;
}

.button3, .button4, .button5{
	padding: 15px;	
	font-size: 16px;
	border-radius: 25px;
	border-style: solid;
  border-width: 1px;
}

 .button4, .button5{
	background-color: black;
	color: white;
	border-color: black;
}

.button3:hover, .button4:hover, .button5:hover {
	background-color: #b06161;
	color: white;
	cursor: pointer;
}

#clickable-text:hover{
	color: #379e97;
}

/*HEADER*/
.main-header{
	display: grid;
	grid-template-columns: auto auto;
	padding-left: 10%;
	padding-right: 10%;
	background-color: white;
	padding-bottom: 0;
	margin-bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 4px 6px 0 rgba(34, 60, 80, .16);
	position: absolute;
}

#left-header{
	display: grid;
	grid-template-columns: 40% 60%;
	text-align: left;
	
}
#clickable-title{
	color:  #379e97;
}
#sub-left-header{
	display: grid;
	grid-template-columns: 40% 60%;
	padding-top: 1.5%;
}

@media screen
 and (max-width: 1400px) 
 and (min-width: 480px)
{
	#sub-left-header{
		display: block;
	}
	.header-left2{
		display: none;
	}
	#left-header{
		grid-template-columns: 50% 50%;
	}
}

@media screen
 and (max-width: 1200px) 
 and (min-width: 480px)
{
	.header-left2, .header-left1{
		display: none;
	}
	#left-header{
		display: block;
	}
}

#right-header{
	display: grid;
	grid-template-columns: 65% 35%;
	align-items: center;
	text-align: right;
	padding-bottom: 0;
	margin-bottom: 0;
	position: relative;
}
#right-header-menu{
	display: none;
	height: 30px;
  width: 30px;
  margin-left: 0;
  margin-right: 0;
  text-align: right;
  padding-right: 10px;
}
#button-container{
	padding-left: 50px;
}
#clickable-text:hover, #clickable-title:hover, .dropdown-text{
	cursor: pointer; 
}


/*SERVICES DROPDOWN*/

#services-dropdown{
	padding-top: 30px;
	display: none;
	background-color: white;
	left: 0;
	right: 0;
	text-align: center;
	bottom: 0px;
	height: 90px;
	position: absolute;
}

#service-icons{
	height: 30px;
  width: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 0;

}

.dropdown-text{
	margin-top: 0;
	padding-top: 0;
}

@media screen
 and (max-width: 900px) 
 and (min-width: 480px)
{
	.main-header{
		align-items: center;
		padding-right: 0;
		padding-left: 0;
		margin-bottom: 0;
		grid-template-columns: 90% 10%;

	}
	#clickable-title{
		text-align: left;
		padding-left:  15px;
	}
	#right-header{
		display: none;
		text-align: center;
	}
	#left-header{
		display: block;
		text-align: center;
	}
	#right-header-menu{
		display: block;
	}
}



/*I N D E X*/
.greeting{
	background-image: url("images/mirror.jpg");
	background-size: cover;
	text-align: left;
	padding-top: 180px;
	padding-bottom: 270px;
	padding-left: 50px;
	color: #379e97;
}

.residential, .commercial{
	display: grid;
	grid-template-columns: 50% 50%;
	padding-bottom: 0;
}

.commercial{
	background-color: #faf8f5;
}

#res-image, #com-image{
	max-width: 80%;
	max-height: 90%;
	padding: 0;
	margin: 0;
}
#res-image-container{
	text-align: center;
	padding:  100px;
	padding-left: 10%;
	padding-bottom: 40px;
	margin-right: 0;
}
#com-image-container{
	text-align: center;
	padding:  100px;
	padding-right: 10%;
	padding-bottom: 40px;
	margin-left: 0;
}
#com-top{
	text-align: right;
}
#res-text{
	padding:  100px;
	padding-right: 10%;
	padding-top: 200px;
	padding-left: 0;
	margin-left: 0;
}
#com-text{
	padding:  100px;
	padding-left: 10%;
	padding-top: 200px;
	padding-right: 0;
	margin-right: 0;
}
#res-list-head{
	padding-left: 20px;
}
#com-list-head{
	padding-right: 20px;
}
#res-list, #com-list{
	list-style-type: circle;
}
#res-info{
	display: grid;
	grid-template-columns: 40% 60%;
	padding-left: 0;
}
#com-info{
	display: grid;
	grid-template-columns: 60% 40%;
	padding-right: 0;
	text-align: right;
}
.section-title{
	padding: 0;
	margin: 0;
}
#res-text-container, #com-text-container{
	padding-top: 50px;
	border-top: solid;
	border-bottom: solid;
	padding-bottom: 40px;
}

.team{
	padding: 100px;
	background-color: #f7e9e9;
}
#team-text{
	text-align: center;
	justify-content: center;
	margin-top: -30%;
	margin-left: 28%;
	padding-bottom: 8%;
}
#team-title{
	font-size: 60pt;
}
#team-text-sub{
	padding-bottom: 1%;
}
#team-image{
	max-width: 30%;
	max-height: 50%;
	padding-left: 20%;
}

@media screen
 and (max-width: 1200px) 
 and (min-width: 480px){
 	.residential, .commercial{
		display: block;
	}
	.residential{
		padding-left: 10%;
	}
	.commercial{
		padding-right: 10%;
	}
	#res-image-container, #com-image-container{
		display: none;
	}
	.team{
		padding-left: 0;
	}
 }

@media screen
 and (max-width: 900px) 
 and (min-width: 480px){
 	#team-image-container{
 		display: none;
 	}
}




/*R E S I D E N T I A L  ++ C O M M E R C I A L*/
.res-page-intro, .com-page-intro{
	background-size: cover;
	padding: 100px;
	padding-top: 250px;
	padding-bottom: 250px;
	text-align: right;
	
	margin-bottom: 0;
}
.res-page-intro{
	background-image: url("images/kitchen.jpg");
	color: #f2dddc;
}
.com-page-intro{
	background-image: url("images/comm.jpg");
	color: #C3EDEA;
}
#res-page-intro-button-container, #com-page-intro-button-container{
	padding-right: 175px;
}

#hidden-break{
	display: none;
}
.res-page-section1{
	background-color: #f2dddc;
	margin-top: -21px;
	padding: 100px;
}

#res-page-section1-top-alt{
	display: none;
	text-align: center;
}

#res-page-section1-overlap{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	position: relative;
}

#res-page-section1-image{
	max-width: 100%;
	display: block;
}
#res-page-section1-image-box{
	grid-column: 1 / span 8;
	grid-row: 1;
}
#res-page-section1-text-box{
	grid-column: 7/ -1;
	grid-row: 1;
	padding-top: 20%;
	z-index: 1;
}
#section1-bg-fix{
	background-color: #F1D3D2;
	padding: 10%;
}

#res-page-section1-list{
	text-align: left;
	list-style-type: circle;
}




.res-page-section2{
	margin-top: -21px;
	padding: 150px;
}
#res-page-section2-bg-fix{
	background-color: #FCF3F0;
}

#res-page-section2-top-alt{
	display: none;
}
#res-page-section2-bottom{
	text-align: center;
	padding-bottom: 3%;
	padding-top: 3%;
}
#res-page-section2-services-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-left: 10%;
}
/*INSPO:  https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle/19613616*/
#res-page-section2-services{
	border-radius: 50%;
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 2px solid;
    text-align: center;
}


@media screen
 and (max-width: 1200px) 
 and (min-width: 480px)
{
	#res-page-section2-services-grid{
		grid-template-columns: repeat(2, 1fr);
		padding-left: 20%;
	}
	#res-page-section2-services{
		margin-bottom: 10%;
	}
}


@media screen
 and (max-width: 900px) 
 and (min-width: 480px){
 	#res-page-section1-top-alt, #res-page-section2-top-alt{
 		display: block;
 	}
 	#res-page-section1-top, #res-page-section2-top{
 		display: none;
 	}
 	.res-page-section1, .res-page-section2{
		padding: 50px;
	}
	#res-page-section1-overlap{
		display: block;
		padding-bottom: 10%;
	}
	#res-page-section1-image-box{
		display: none;
	}
	#res-page-section1-text-box{
		padding-top: 5%;
	}
	#res-page-section2-services-grid{
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10%;
	}
	
}

@media screen
 and (max-width: 900px) 
 and (min-width: 480px){
 	#res-page-section2-services-grid{
		padding-left: 5%;
	}
 }






/*COMMERCIAL*/
.com-page-section1{
	padding: 100px;
	background-color: #e9f2ee;
}
#com-page-section1-special{
	display: grid;
	grid-template-columns: 60% 40%;
	padding-top: 50px;
}
#com-page-section1-overlap{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	padding: 0;
	margin: 0;
}
#com-page-section1-image1, #com-page-section1-image2{
	max-width: 70%;
	display: block;
}
#com-page-section1-image1-box{
	grid-column: 1 / span 8;
	grid-row: 1;
	padding-top: 20%;
}
#com-page-section1-image2-box{
	grid-column: 4/ -1;
	grid-row: 1;
	z-index: 1;
}
#com-page-section1-text-box{
	padding-top: 20%;
	padding-left: 0;
	position: relative;
	margin-left: -100px;
}
#com-section1-bg-fix{
	background-color: #D4EEE3;
	padding: 50px;
}

#com-page-section2-bg-fix{
	background-color: #f5faf8;
}

@media screen
 and (max-width: 1200px) 
 and (min-width: 480px)
{
	.com-page-section1{
		padding: 14%;
	}
	#com-page-section1-top{
		padding-bottom: 0;
	}
	#com-page-section1-special{
		display: block;
	}
	#com-page-section1-overlap{
		display: none;
	}
	#com-page-section1-text-box{
		padding-top: 0;
		margin: 0;
		padding-left: 0;
	}
}




/*CONTACT*/
input[type=text], input[type=email]{
	border: none;
	border-bottom: solid;
	padding-right: 30%;
}

.contact-form{
	display: grid;
	grid-template-columns: 50% 50%;
	padding-top: 100px;
}

.contact-image{
	max-width: 67%;
	max-height: 67%;
	height: auto;
	width: auto;
}

.contact-image-container{
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.contact-text{
	display: grid;
	grid-template-columns: 50% 50%;
	padding-top: 10%;
	padding-left: 5%;
	padding-bottom: 10%;
	border-top: solid;
	border-left: solid;
}
.contact-topics{
	padding-bottom: 0;
	margin-bottom: 0;
}

.contact-sub-topics{
	padding-top: 5px;
	margin-top: 5px;
}

.button5{
	width:  300px;
	align-items: center;
	margin-left: -5%;
}

.contact-button{
	padding-top: 60px;
	padding-left: 5px;
	padding-bottom: 60px;
}

.contact-social-media{
	padding-top: 60px;
}

#Message, #Email, #Name{
	outline: none;
}

#footer-partition{
	margin-top: 60px;
}

@media screen
 and (max-width: 1400px) 
 and (min-width: 480px)
{
	
	.button5{
		width: 260px;
	}
	input[type=text], input[type=email]{
		padding-right: 20%;
	}
}

@media screen
 and (max-width: 1200px) 
 and (min-width: 480px)
{
	.contact-image-container{
		display: none;
	}
	.contact-form{
		display: block;
		padding: 10%;
		padding-right: 0;
		padding-left: 20%;
	}
	.home-services-head{
 		padding-top: 10%;
 	}
}

@media screen
 and (max-width: 900px) 
 and (min-width: 480px){
 	.contact-text{
 		display: block;
 		padding-left: 15%;
 	}
}


/*A B O U T*/

.ceo{
	padding-top: 400px;
}
.crew{
	padding: 10%;
	background-color: #d5d3e0;
}
#ceo-top, #crew-top{
	text-align: center;
}
#ceo-top{
	padding-top: 5%;
}

#crew-names, #crew-images{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}


#crew-name{
	text-align: center;
	padding-right: 20%;
	padding-bottom: 30%;
}

#crew-image{
	padding-left: 10%;
	max-width: 60%;
	border-radius: 50%;
}
#ceo-image{
	margin-top: 3%;
	margin-left: 20%;
	padding-left: 10%;
	max-width: 40%;
	border-radius: 50%;
}
.ceo-text-pic{
	margin-left: 48%;
	width: 40px;
	height: 40px;
}



/*QUIZ*/
.quiz{
	text-align: center;
	background-color: #d1edeb;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 60px;
	padding-top: 10px;
}

#quiz-container{
	border: solid 1px #a5c4c2;
	width: 800px;
	height: 500px;
	border-radius: 5px;
	text-align: center;
	padding-top: 5px;
	margin-top: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#quiz-title{
	text-align: center;
}
#page-zero, #page-one, #page-two, #page-three, #page-four{
  background-color: white;
  height: 100%;
  width: 850px;
  box-shadow: 0 4px 6px 0 rgba(34, 60, 80, .16);
  border-radius: 5px;
  position: relative;
  left: 100px;
}

#page-four{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 100px;
}
#contact-info-buttons, #service-type-buttons{
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
#quiz-contact1, #quiz-contact2, #quiz-contact3{
	resize: none;
	padding: 5px 100px 5px 100px;
	border-radius: 5px;
}
#quiz-request{
	resize: none;
	padding: 100px 150px 100px 150px;
	border-radius: 5px;
}
#service-type-box1, #service-type-box2{
	border: solid 2px #DFDEDC;
	margin: 20px 0;
	padding: 20px;
}
#service-type-box1{
	margin-left: 160px;
}
#service-type-box2{
	margin-right: 160px;
}
/*FIXES JS INTERFERENCE !important:  
https://stackoverflow.com/questions/14071652/css-hover-event-not-working-after-using-javascript*/
#service-type-box1:hover, #service-type-box2:hover, #service-term1:hover, #service-term2:hover, #service-term3:hover, #service-term4:hover{ /*ADD permanent change with js*/
	background-color: #82bab6 !important; 
	border-color: #82bab6 !important;
	color: white !important;
	cursor: pointer !important;
}
#service-type-img{
	width: 80px;
	height: 80px;
	margin: 0;
	padding: 0;
}

#service-term-buttons{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
#service-term1, #service-term2, #service-term3, #service-term4{
	border: solid 2px #DFDEDC;
	margin: 50px 20px 20px 20px;
	padding: 20px 10px 10px 10px
}
#service-term-img{
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
}

#service-request{
	text-align: center;
}
#Request{
	padding: 5%;
	padding-left: 15%;
	padding-right: 15%;
}
#page-four{
	text-align: center;
}

#page-one, #page-two, #page-three, #page-four{
	display: none;
}

#quiz-next, #quiz-prev, #quiz-submit{
	margin: 10px;
	z-index: 3;
}


/*FAQ*/
.faq-page-intro{
	background-size: cover;
	padding: 100px;
	padding-top: 250px;
	padding-bottom: 250px;
	text-align: right;
	margin-bottom: 0;
	background-image: url("images/glass.jpg");
}
.faq{
	padding-top: 5%;
}
#faq-box{
	background-color: #f7f2ed;
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 5%;
	padding-bottom: 5%;
}
#q-a{
	padding-left: 10%;
}
#question{
	color: #c7ab97;
}
#answer{
	color:#95a376;
}





/*CAREERS*/
.car-page-intro{
	background-size:100% 100%;
	padding: 100px;
	padding-top: 250px;
	padding-bottom: 250px;
	text-align: center;
	margin-bottom: 0;
	background-image: url("images/work.jpg");
}
.careers{
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 3%;
	padding-bottom: 3%;
	background-color: #f6f6f6;
	margin-bottom: 0;
}
#careers-head{
	text-align: center;
	padding: 3%;
	border-top: solid 1px #8d9394;
	border-bottom: solid 1px #8d9394;
	margin-top: 1;
	margin-bottom: 0;
}
#cleaner, #cleaner-seasonal, #driver{
	border: solid 1px #8d9394;
	padding: 3%;
	margin-bottom: 5%;
	background-color: white;
}




/*FOOTER*/
.footer{
	padding-left: 3%;
}
.footer-sub{
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}
.footer-about{
	padding-left: 13%;
}

.footer-top{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding-top: 0;
	grid-column: 4/-1;
}
.footer

#footer-title{
	color:  #379e97;
}

.footer-heading{
	color:  #379e97;
}

.footer-address{
	display: grid;
	grid-template-columns: 15% 85%;
	grid-column: 1/span 3;
}
.location-image, .phone-image, .email-image{
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 10%;
}
#footer-address-texts{
	margin-top: -0.9%;
	padding-top: 0;
}

.footer-image{
		width: 40px;
		height: 40px;
    padding:  5%;
    margin-bottom: 10%;
    margin-right: 20%;
    border: solid 2px;
    border-radius: 50%;
}

.footer-credits{
	background-color: #f5f2f2;
	text-align: left;
	margin-left: -3%;
}

.footer-topics:hover, .footer-image:hover{
	cursor: pointer; 
	color:  #379e97;
}

.social-media, .contact-social-media{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.social-media{
	padding-top: 5%;
}

@media screen
 and (max-width: 1200px) 
 and (min-width: 480px){
 	.footer-sub{
 		display: block;
 	}
 	#footer-title{
 		text-align: center;
 	}
 	.social-media{
 		padding-left: 30%;
 		padding-right: 30%;
 	}
 	.footer-top{
 		padding-left: 5%;
 	}
 }

@media screen
 and (max-width: 1200px) 
 and (min-width: 600px){
	 	.footer-address{
	 		padding-left: 30%;
	 		padding-right: 20%;
	 	}
 }

@media screen
 and (max-width: 600px) 
 and (min-width: 480px){
 	.footer-address{
 		padding-left: 15%;
 		padding-right: 0;
 	}
 	.social-media{
 		padding-left: 20%;
 		padding-right: 20%;
 	}.footer-sub{
 		display: block;
 	}
 	.footer-top{
 		padding-left: 6%;
 		grid-template-columns: repeat(2, 1fr);
 	}
 	.footer-about, .footer-info{
 		padding-left: 15%;
 	}
 	
}

/*NEW QUIZ CSS*/
.quiz-selected{
	background-color: #82bab6;
}