/*Formatting toolbar at the very top with spacing */
html, body{
	margin: 0;
	padding: 0;
	color: #4C4E52;
}
*{
	box-sizing: border-box;
	font-family: 'Open Sans', 'Roboto', sans-serif;
	


	/*background: #8D8741; */
}


h1{
	margin:0;
	padding:0;
	font-size: 40px;
}
h4{
	margin:0;
	padding-top:1rem;
	font-size: 25px;
}

em{
	font-style: normal;
	font-size: 1.2rem;
} /*customizes the font size for Joyce S. Lee, CPA on header*/

a{
	text-decoration: none;
}



/*HEADER BEGINS--------------------------------------------------*/
.MainSiteHeader{
	align-items: center;
	/*background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); */
	background-color: white;
	/*background: #28282B; we put on the outside because we are making a rule for padding, background, and width for the entire navigation bar */
	margin:0;
	padding: 20;
	/*min-width: 60rem;*/
	
	top:0;
	left:0;
	width: 100%;
	display: flex;
	font-weight: bold;
	font-family: 'Roboto', 'sans-serif';
	justify-content: space-between; /*push as far apart as possible*/
	height: 10rem;

	position: fixed;

	
	}
	
	
	.empty1{
		flex: 1 0 0;
	}
	.BrandName { 
		font-size: 2.2rem; /*this customizes the label part of Lee Acctg services */
		flex: 2 0 0;
		padding-left:1.5rem;
		display: inline-block;
		/*text-decoration: underline;*/
		color: white;
	}
	
	.navbarLinks{
		flex: 1 0 0;
		background-color: white;
		/*text-transform: uppercase;*/
	}
	
	.navbarLinks ul{ /* formats links on right of unordered list (ul)*/
		margin: 0;
		padding: 10;
		display: flex; /*puts in line */
		font-family: calibri, montserrat;
		font-size: 1.1rem;
	}	
	
	.navbarLinks li{
		list-style-type: none; /*no bullet points*/
	}
	
	/*coloring the links white */
	.BrandName a {
		text-decoration: none;
		color: #4C4E52;
		/*color: white;*/
		}
		
		
	.navbarLinks li a {
		text-decoration: none;
		color: #4C4E52;
		/*color: white;*/
		padding: 1rem; /*provides space to each link */
		display: block;
		

		}
		
	.ContactMeHomeButton a{
			color: white;

		}
	.ContactMeHomeButton{
		padding: .75rem;
	}
		
	/* hover over to change background in navigation links*/
	.navbarLinks li a:hover{
		background: #ABB0B8; /*re-activated on 5/5/24*/		
	}



	.navbarLinks .ContactMeHomeButton:hover{
		background-color: #D21404;

	}
	

	
	
	/*DROPDOWN MENU CUSTOMIZATION -------------------------*/
	
	
	.navbarLinks .servicesdropdown .dropdown{
		width: auto;
		background: rgb(32, 38, 57);
		position: absolute;
		z-index:999;
		/*top: calc(100% + .25rem);*/
		padding: .75rem;
		border-radius: .25rem;
		box-shadow: 0 2px 5px;
		font-size: 16px;
		/*opacity: .5;
		transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; */

	}
	
/*
	.navbarLinks .servicesdropdown a:hover{ /*color for hovering over individual links
		background: #8B9EB7;
	}
	
	
/*	
	.navbarLinks .servicesdropdown:hover .dropdown{
		display: none; /*physically displays block when hovering over */
		/*DISABLED THE SERVICES UNTIL MORE CONTENT AVAILABLE-----
	}
	*/


	.navbarLinks .servicesdropdown .dropdown {
		display:none;
		position: absolute;
		min-width: 160px;
		z-index:1;

	}
	
	.navbarLinks .servicesdropdown .dropdown a{
		display: block;
		padding: 10px 16px;
	}
			
	
	/* ADDING HAMBURGER MENU ------------------------ */
	.toggle-button {
		position: absolute; /*put at very right of website without affecting flow/text or functionality */
		top: 2.2rem;
		right: 2rem;
		display: none; /*does not display by default because we don't want in larger screen, only smaller screen. refer to below to show that it only shows when window is smaller but does not show when window is normal sized */
		flex-direction: column; /*put one line on top of each other vertically aligned*/
		justify-content: space-between; /*put enough space in between each other for */
		width: 30px;
		height: 1.5rem;

	}
	
	.toggle-button .bar { /*gives physical presence of hamburger menu*/
		height: .35rem;
		width: 100%;
		background-color: #4C4E52;
		border-radius: 15px;
	}
	
	.navbarLinks .ContactMeHomeButton {
		background-color: #D21404;
		border-radius: 1.75rem;
		text-transform: uppercase;
		white-space: nowrap;
		font-size:1.1rem;
		margin: auto;
		margin-left: 1rem;
		border-style: none;
	}
	
	/*CONTACT ME HOME BUTTON----------------------------------*/
		
		/*media query means that this code activates only when certain conditions of code is met*/
		/*HAMBURGER MENU ACTIVATION---------------------------*/
	@media (max-width: 70em){ 
		.toggle-button {
			display: flex; 
		}		/*show hamburger menu*/
		.navbarLinks{
			display: none; 
			width:100%; /*actual items spanning 100% of width */
		}/*make links disappear when hamburger menu present */
		.MainSiteHeader{
			flex-direction: column;
			align-items: flex-start;
		}
		.navbarLinks ul{
			flex-direction: column;
			text-align: center;
			width: 100%;
		}
		.navbarLinks {
			.ContactMeHomeButton{
				margin: auto;
			}
			li{
				text-align: center; /*center the actual text of the links inside */
			}
		}
		
		.navbarLinks li a{
			padding: .5rem 1rem; /*adjust padding in between the links when 
			window is too small */
		}
		
		.navbarLinks.active {
			display: flex; /*Active class will determine whether links should be displayed or not. The rest of the work will happen with JavaScript */
		}
		
		
		.Wrapper .areasofpractice {
			display: none;
			border-left: 0px;
		}
		
		
		.container .empty1{
			display: none;
		}
		
		.container .back{
			padding-left: 1rem;
			padding-right: 1rem;
		}

 /* Make border line in between disappear https://stackoverflow.com/questions/41631136/add-dividing-line-between-flex-items-with-equal-space-distribution*/
	}
	
	
	
.SpaceForFixedHeader{
	height: 7.1rem;
}
	
/*HEADER ENDS ---------------------------------------------*/

/*HOME PAGE BEGINS-------------------------------------*/


/*
.ProblemStatement {
	text-align: center;
	padding-top: 2rem;
	background-image: linear-gradient(#3551b5, rgba(0,0,0,0.3)), url("../Images/CoverImage(5).jpg");
	height: 600px;
	background-size: cover;
	width: 100%;
	color: white;
	padding-top: 5rem;
	background-position: center center;
	display: flex;
}
.ProblemStatement .ProblemStatementText{
	flex: 2 0 0;
}

.ProblemStatement .empty1 {
	flex: 1 0 0;
}
*/



/*
.Solution {
	button{
		font-size: 15px;
		background-color: #D21404;
		border-radius: 15px;
		padding-top: .5rem;
		padding-bottom: .5rem;
		padding-left: 1rem;
		padding-right: 1rem;
		text-transform: uppercase;
	}
	a {
		text-decoration: none;
		color: white;
	}
	color: white;
	text-align: center;
	height: 35rem;
	padding-top: 10rem;
	
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%), url("../Images/Wood.jpg");
	display: flex;
	
	
	.empty1 {
		flex: 1 0 0;
	}
	
	.SolutionStatement{
		flex:2 0 0;
	}
}
*/
	

.MainMessage {
	/*text-align: center;*/
	background-image: url("../Images/CoverImage.png");
	height: 50rem;
	width: 100%;
	background-position: center center;
	background-size: 100%;
	/*padding-top: 10rem;*/
	background-repeat: no-repeat;
	align-items:center;
	display: flex;
	color: black;

	
	.HeroStatement{

		flex: 1.5 0 0;
	}
	
	.empty1{
		flex: 1 0 0;
	}
	
	
	h1{
	text-transform: uppercase;
	font-size: 3.5rem;
	}
	
	h2{
		font-size: 1.5rem;
	}

	button{
		font-size: 1rem;
		background-color: #1434A4;
		border-radius: 15px;
		padding-top: .5rem;
		padding-bottom: .5rem;
		padding-left: 1rem;
		padding-right: 1rem;
		text-transform: uppercase;
	}
	
	button a{
		color: white;
	}
}

.NewInsight{
	display: flex;
	height: 30rem;
	align-items: center;
	background-color: #D3D3D3;
	text-align: center;
	.empty1{
		flex: 1 0 0;
	}
	.NewInsightText{
		flex: 2.5 0 0;
	}
}


.ThreeHighlights {
	text-align: center;
	padding: 1rem;
	padding-top: 5rem;
	color: #4C4E52;

}

.ThreeHighlights .ThreeHighlightPhotos{
	display: flex;
	/*flex-direction: row wrap;*/
	flex-flow: row wrap;

	justify-content: center;
	padding: 0;
	margin: 0;
	list-style: none;
}
.ThreeHighlights .ThreeHighlightPhotos .MainPhotoItem{
	padding: 2rem;
	margin-top: 0;
	line-height: 1.5rem;
	display: flex;
	flex-direction: column;
	width: 20rem;
	button{
		font-size: 15px;
		background-color: #002D62;
		border-radius: 10px;
		padding-top: .5rem;
		padding-bottom: .5rem;
		padding-left: 1rem;
		padding-right: 1rem;
		text-transform: uppercase;
	}
	button a {
		text-decoration: none;
		color: white;
	}
}
/*HOME PAGE ENDS ------------------------------------*/


/*"SERVICES PAGE" BEGINS--------------------------------*/

.ServicesIntroduction {

	display: flex;
	flex-direction: row;
	line-height: 1.5;



	.ServicesIntroductionText{
		font-size: 30px;
		flex: 2.5 0 0;
	}

	.empty1{
		flex: 1 0 0;
	}

}

	
.ServicePageMenu {
	display: flex;
	flex-direction: row;
}
	
.ServicePageMenu .ListofAccountingServices {

	list-style: none;
	padding-left: 1rem;

}

.ServicePageMenu .ListofAccountingServices li{
	margin: .5rem;
	font-size: 1.5rem;
}

.ServicePageMenu .ListofAccountingServices li:before{
		 content: "\2714\0020";
	}/*CHECKMARK*/

.ServicePageMenu .ListofAccountingServices li{
	padding-left:1rem;
	padding-right: 0rem;
	
}

.ServicePageMenu .ListofTaxServices {
	background-color: none;
	}
.ServicePageMenu .ListofTaxServices li{
	font-size: 1.5rem;
	list-style: none;
	padding-left: 1.4rem;
	padding-right: 2.5rem;
	margin: .25rem;
}
.ServicePageMenu .ListofTaxServices li:before{
		 content: "\2714\0020";
	}/*CHECKMARK*/

.ServicePageMenu h2 {
	margin: 0;
	padding-top: 0;
	padding-left: .5rem;
	font-size: 1.5rem;
	padding-bottom:0;
}


.ServicePageMenu h3 {
	margin: 0;
	padding-top: 0;
	padding-left: .5rem;
}

.ServicePageMenu .ListofAccountingServices + .ListofTaxServices { /*ADDING A BORDER IN BETWEEN AREAS OF PRACTICES AND ABOUT US*/
	border-left: solid 1px #9D8D8F;
	border-radius: 0rem;
	padding-left: 5rem;
}




/*"SERVICES PAGE" ENDS --------------------------------*/




/*ABOUT PAGE BEGINS -----------------------------------*/
.Wrapper {
	display: flex;
	flex-direction: row wrap;
	text-align: none;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 25px;
	
}

/*.Wrapper>*{
	padding-right: 10px;
	padding-left: 10px;
	margin: 10px;
	flex: 1 1000%;
	border-radius: 10px;
}*/

/*FLEXBOX SPACING BEGIN FOR "ABOUT PAGE"--------------------*/
.Wrapper .empty1{
	flex: 2 0 0;
}

.Wrapper .areasofpractice{
	flex: 1 0 0;
	align-items: center;
	padding-right: 2rem;
	padding-left: 1.5rem;
	
}

.Wrapper .areasofpractice li{
	margin-bottom: .35rem;
}
  
  
.Wrapper .BioSection{
	flex: 2.5 0 0;
	margin: auto;
	padding-right: 2.5rem;
	align-items: center;
	font-size: 1.5rem;
}/*More on Flexbox Spacing https://stackoverflow.com/questions/45202838/flexbox-make-one-item-4x-bigger-than-other-items*/
/*FLEXBOX SPACING END--------------------*/


.Wrapper .areasofpractice + .BioSection { /*ADDING A BORDER IN BETWEEN AREAS OF PRACTICES AND ABOUT US*/
	border-left: solid 1px #9D8D8F;
	border-radius: 0rem;
	padding-left: 80px;
	padding-right: 10 px;
}


/*WHAT WE DO PAGE ENDS -----------------------------*/


/*CONTACT PAGE BEGINS--------------------------------*/

.Inquiry{
	/*max-height: 400px;*/
	text-align: left;
	font-size: 1.5rem;	
	padding-top: 2rem; /*padding is better because it is dynamic when changing window size rather than having a fixed height */

	color:black;
	background-repeat: none;
	background-position: center;
	background-size: cover;
	background-image: linear-gradient(rgba(0,0,0,0.3), #5A5A5A), url(../Images/Vegas.jpg); 
	/*the ../Images/Calculator gets out of the Notepad file location folder by 1 folder up, then it hones back into the Images folder which will then identify the calculator JPG*/
	
	display: flex;
	height: 60rem;

	
	.empty1{
		flex: 1 0 0;
	}

	.ContactInfoOnPage{
		flex: 1 0 0;
		background: white;
		padding: 1.5rem;
		margin-bottom: 5rem;
		border-radius: 1rem;
	}


	

	/*INPUT CAPTCHA*/



}



/*
.Inquiry .ConsultationText + .TextBoxInquiry { 
	border-left: solid 0px #9D8D8F;
	border-radius: 0rem;
	padding-left: 80px;
	padding-right: 10 px;
}*/

/*CONTACT PAGE ENDS---------------------------------*/

/*SENT MESSAGE CONFIRMED PAGE BEGINS ---------------------------*/
.container{
	display: flex;
	padding-top: 2rem;

	.empty1{
		flex: 1 0 0;
	}
	.back{
		flex: 2.5 0 0;
	}
	
	p{
		font-size: 2rem;
	}
	
	a{
		text-decoration: underline;
		color: blue;
	}
	
}





/*SENT MESSAGE CONFIRMED PAGE ENDS ---------------------------*/

/*FOOTER BEGINS ------------------------------------------*/
footer{
	padding-top: 2rem;
	.footerContainer{
		/*align-items: center;*/
		/*background: #EEE2DC; /*we put on the outside because we are making a rule for padding, background, and width for the entire navigation bar */
		/*background-color: #28282B;*/
		background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); 

		/*min-width: 60rem;*/
		width: 100%;
		height: 10rem;
		display: flex;
		font-size: 18px;
		justify-content: space-between; /*as much space in between as possible*/
		}
		
	/*SPACING FOR FOOTER USING FLEXBOXES BEGIN--------------------*/	
	.footerContainer .empty1{
		flex: 1 0 0;
	}	
	.footerContainer .contactus{
		flex: 2 0 0;
	}
	.footerContainer .footerLinks{
		flex: 1 0 0;
	}
	/*spacing for footer using flexboxes END--------------------*/
	
	
	
	
	/*LINK FORMATTING--------------------*/
	.footerContainer .footerLinks ul{ /* formats links on right of unordered list (ul)*/
			margin: 0;
			padding-top: 1rem;
			color: white;
			/*display: flex; /*puts in line */
		}	
		
	.footerContainer .footerLinks li{
			list-style-type: none; /*no bullet points*/
			padding: 2;
		}
		
		/*coloring the links white */
	.footerContainer a {
			text-decoration: none;
			color: white;
			}
	.footerContainer .contactus {
		color: white;
		text-decoration: none;
		
	}
	
	.footerContainer .contactus li{
		list-style-type: none;

	}/*LINK FORMATTING ENDS--------------------*/
}
/*FOOTER ENDS --------------------------------------------*/

/*DYNAMIC PROGRAMMING MAKE FLEXBOX DISAPPEAR AFTER CERTAIN WIDTH---------------------------------------------------*/


/*TABLET--------------------------------------------------*/
@media (max-width: 110em){ 
	.Wrapper .empty1{
		display: none;
	}
	.MainSiteHeader .empty1{
		display: none;
	}
	.footerContainer .empty1{
		display: none;
	}
	.ServicesIntroduction .empty1{
		display: none;
	}
	.ServicesIntroduction {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.ProblemStatement .empty1{
		display: none;
	}
	
	.ProblemStatement {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.Solution .empty1{
		display: none;
	}
	.Solution {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.MainMessage .HeroStatement{
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.ServicePageMenu .ListofTaxServices{
		padding-top:.35rem;
		
	}
	.ServicePageMenu .ListofAccountingServices + .ListofTaxServices { /*ADDING A BORDER IN BETWEEN AREAS OF PRACTICES AND ABOUT US*/
		border-left: solid 1px #9D8D8F;
		border-radius: 0rem;
		padding-left: 1rem;
}

}


/*PHONE COMPATIBILITY-----------------------------------------------------------*/
@media(max-width: 60rem){
	.MainSiteHeader .BrandName{
		font-size: 2.75rem; /*was 20px on 5/5/24*/

	}
	em{
		font-size: 1.5rem;/*changed from 15px on 5/5/24*/
	}
	.MainMessage {
		height: 28rem;/*changed from 25rem on 5/5/24*/
		background-position: top;
		padding-bottom: 2rem;
		padding-left: 0.75rem;
		padding-top: 0rem; /*added on 5/5/24*/
		.empty1{
			display: none;
		}
	}
		.HeroStatement {

			h1{
				font-size: 3.25rem; /*changed from 2rem on 5/5/24*/
			}
		
			h2{
				font-size: 1.5rem; 
			}
		
			p{
				font-size: 1rem; /*changed from 0.75rem on 5/5/24*/
			}
			button{
				font-size: 1rem;/*changed from 0.55rem on 5/5/24*/
			}
	
		}
	
	.NewInsight{
		.empty1{
			display: none;
		}
		
		padding-left: .5rem;
		padding-right: .5rem;
		
		
		h1{
			font-size: 2.75rem; /*changed from 1.75rem on 5/5/24*/
		}
		h3{
			font-size: 1.5rem;
		}
	}
	
	
	.ThreeHighlights h1{
		font-size: 30px;
	}
	.ThreeHighlights .ThreeHighlightPhotos .MainPhotoItem{
		width:20rem;
	}
	
	.ServicesIntroduction{
		padding-top: 5.5rem; /*added on 5/5/24*/
	}
	
	.ServicesIntroduction .ServicesIntroductionText{
		font-size: 1.5rem;/*added on 5/5/24*/
	}
	.ServicePageMenu .ListofAccountingServices h1{
		font-size: 20px;
	}
	.ServicePageMenu .ListofAccountingServices h2{
		font-size: 15px;
	}
	.ServicePageMenu .ListofAccountingServices li{
		font-size: 15px;
	}
	.ServicePageMenu .ListofTaxServices{
		padding-top: 0;
		padding-bottom: 0;
	}
	.ServicePageMenu .ListofTaxServices li{
		font-size: 15px;
	}
	.ServicePageMenu .ListofTaxServices h1{
		font-size: 20px;
	}
	.ServicePageMenu .ListofTaxServices h2{
		font-size: 15px;

	}
	.ServicePageMenu .ListofTaxServices ul{
		padding-left: 0rem;
		padding-right: 0rem;
	}
	.Wrapper .BioSection h1{
		font-size: 20px;
	}
	.Wrapper .BioSection {
		font-size: 16px;
		padding-right: 1rem;
		padding-left: 0rem;
		
	}
	.Wrapper .areasofpractice + .BioSection { /*ADDING A BORDER IN BETWEEN AREAS OF PRACTICES AND ABOUT US*/
	border-left: none;
	border-radius: 0rem;
	padding-left: 1rem;
	padding-top: 5.5rem; /*added on 5/5/24*/
	}
		
	.footerContainer .contactus{
		font-size: 1.25rem;/*changed from 15px on 5/5/24*/
		
	}
	.footerContainer .footerLinks{
		font-size: 1.25rem;
	}
	
	.ThreeHighlights .ThreeHighlightPhotos{
		display: flex;
		/*flex-direction: row wrap;*/
		flex-flow: row wrap;

		justify-content: center;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.ThreeHighlights .ThreeHighlightPhotos .MainPhotoItem{
		padding: 2rem;
		margin-top: 0;
		line-height: 1.5rem;
		display: flex;
		flex-direction: column;
		width: 20rem;
		button{
			font-size: 10px;
			background-color: #002D62;
			border-radius: 10px;
			padding-top: .5rem;
			padding-bottom: .5rem;
			padding-left: 1rem;
			padding-right: 1rem;
			text-transform: uppercase;
		}
		button a {
			text-decoration: none;
			color: white;
		}
	}
	
	.Inquiry {
		
		font-family: sans-serif;
		padding-top: 5.5rem; /*added on 5/5/24*/
		.empty1{
			flex: .25 0 0;
		}
		


		
		h1{
			font-size: 1.5rem;
		}
		font-size: 1rem;
		
	}

}