:root{
		--mainBrown:		rgba(145, 82, 43, 1);
		--mainBlue:			rgba(1, 84, 144, 1);
		--mainGreen:		rgba(99, 180, 68, 1);
		--mainGreenNeon:	rgba(99, 180, 68, 1);
		--mainBlack:		rgba(30, 31, 30, 1);
		--mainBlackLight:	rgba(30, 31, 30, .85);
		--mainGray:			#d1d1d1;
		
		--rounded: 15px;
	}
	
	/* basic Tags */
	body			{font-family: 'Quicksand', sans-serif; font-size:1.2rem;  padding:0px; margin:0px;
						display:flex; justify-content:center; }
	a 				{text-decoration:none; color:var(--mainGreen);}
	p				{margin-top:10px; margin-bottom:10px; line-height:150%;}
	p.firstText		{margin:0rem auto 2rem auto; text-align:center}
	ul, ol				{margin-bottom:5px; margin-top:5px}
	li 				{line-height:180%;}
	li span 		{font-weight:bold; color:var(--mainBrown);}
	h1				{margin:0px 0px; color:var(--mainGreen); padding-top:20px; margin-bottom: 1rem}
	h2				{color:var(--mainBlue); margin-top:5px; margin-bottom:10px}

	
	/* Navigation */
	#sideNav		{height:100%; width:0; position: fixed; z-index:1; top:0; right:0; padding-left:5px;
						  background-color: var(--mainBlackLight); overflow-x: hidden; padding-top: 60px;  transition: 0.5s;}
	#sideNav a 		{padding: 8px 8px 8px 32px; text-decoration: none; font-size:25px; display: block; transition: 0.3s;}
	#sideNav a:hover {color: #f1f1f1;}
	
	#topNavigation		{width:100%; background-color:#000000; display:flex; flex-direction:row;
							justify-content:space-between; color:#ffffff;}
	#topNavigation > div {padding:5px 5px}
	#topNavigation	a 	{font-size:1rem; }
	
	#mainNavigation	{display:flex; flex-direction:row; gap:1.5rem; background-color:#ffffff;																padding:1rem; align-items:center; justify-content: center;}
	#mainNavigation a {color:var(--mainGreen); font-size:1.25rem;}
	
	.navSelected	{text-decoration: underline}
	
	/* Request Quote inline form */
	#quoteRequest	{display:flex; gap:1rem; flex-direction:row; flex-wrap:wrap; align-items:center;justify-content: center;
		
	}
	#quoteRequestCase	{background-color:rgba(1, 84, 144, .81); padding:10px 5px 30px 5px; text-align:center;}
	.frontInput			{padding:1rem; font-size:1rem; background-color:#ffffff; color:var(--mainBlack);
							border:0px; border-radius:var(--rounded); width:200px; gap:1rem;}
	.requestTitle		{font-size:clamp(2rem, 4vw, 3rem); font-weight:bold; color:#ffffff; text-align:center; margin-bottom:1rem}
	#quoteIntro		{margin-bottom:1rem; color:#ffffff; text-align:center}
	#quoteError		{text-align:left; line-height:150%; font-size:1.1rem; color:var(--mainBrown); border:5px solid var(--mainBlue); 
						width:90%; max-width:400px; margin:15px auto; background-color:#ffffff; border-radius:var(--rounded); 
						transition-property:opacity,height,padding,border-width; transition-duration:600ms; transition-delay:0ms;
						height:0px; padding:0px; opacity:0; border-width:0px
					}
	#quoteStatus	{padding-bottom:1.2rem; color:yellow; font-size:1.3rem; text-align:center; display:none;}
	.closeQuote		{opacity:0; height:0px; padding:0rem;}
	.openQuote		{opacity:1; height:auto; padding:1rem;}
	
	#quoteActionCase	{position:relative; text-align:center; width:208px; margin:0px auto; padding-bottom:4rem;}
	#quoteSubmitButton	{margin:1rem; text-align:center; position:absolute; top:0px; left:20px; z-index:2; transition:opacity 400ms;}
	#quoteLoading		{position:absolute; top:24px; opacity:0; z-index:1; transition:opacity 400ms; text-align:center}
	
	
	
	
	
	
	
	
	
	
	
	/* Footer */
	#footer			{background-color:#000000; display:flex; flex-direction:row; gap:2rem; color:#ffffff; 
						font-size:.85rem; padding:20px 20px; justify-content:space-between; flex-wrap:wrap;}
	#footer > div	{flex:0 0 170px}
	#footer > div:nth-child(1)
					{flex:0 0 260px; margin-bottom:2rem}
	
	/* Email signup in the footer */				
	#emailCase		{position:relative;}
	#emailForm		{display:flex; flex-direction:column; gap:1rem; position:absolute; top:0px; left:0px;
						transition:opacity 400ms; opacity:1; z-index:1;
	}
	
	#emailSignUpButton	{z-index:1; transition:opacity 400ms;}
	#emailSignUpLoading	{z-index:-1; transition:opacity 400ms;}
	
	#emailThankYou		{background-color:var(--mainPurpleLight); gap:1rem;}
	#emailSignUpError	{background-color:var(--mainOrange); gap:0.5rem;}
	#emailProcessing	{background-color:var(--mainBlue); gap:0.5rem;}
	.emailSignUpMessage	{ border-radius:var(--rounded); padding:1.25rem;
						display:flex; flex-direction: column; justify-content: center; align-items: center;
						 position:absolute; top:0px; left:0px;
						transition:opacity 400ms; opacity:0; z-index:-1;
	}
	
	.footerInput	{padding:10px; font-size:1rem; background-color:#fffffff; color:var(--mainBlack);
						border:0px; border-radius:var(--rounded);}
	#footerSubmit	{position:relative;
						> div {position:absolute; top:0px; left:0px; transition:opacity 400ms}
						> div:nth-child(2) 	{opacity:0}
	}
	#footerSocial	{display:flex; flex-direction:row; gap:1rem; justify-content:flex-start; align-items: center;
						> div  img {width:25px; height:25px}
	}

	
	#copyright		{background-color:var(--mainPurple); padding:2rem; color:#ffffff; text-align: center;}
	.footerTitle	{color:#ffffff; font-size:1.2rem; margin-bottom:10px}
	#mainLogoWhite	{width:150px; height:auto;  padding:1rem;}
	.footerNav		{display:flex; flex-direction:column; gap:1rem; font-size:1rem;}
	.navDivide		{padding-right:20px; padding-left:10px; color:var(--mainGray); font-size:2rem}
	.mapIcons		{font-size:1.65rem; color:var(--mainBlue);}
	#menuButton		{display:none; position:absolute; top:2rem; font-size:2rem; right:2rem; z-index:5;
						> a {color:var(--mainGreen);}
	}
	#closebtn 		{position: absolute; top: -45px; left: 100px; font-size: 46px; margin-left: 50px;}
	
	@media (max-width:580px){
		#midNavigationCase		{display:none;}
		#menuButton			{display:block;}
		#quoteRequest		{flex-direction:column;}
		#footer > div:nth-child(1) {margin-bottom:2.5px;}
	}
	/* Buttons  and Content */
	.button			{font-size:1.2rem; font-weight:800; padding:10px 20px; border-radius:25px; border:0px; cursor:pointer;}
	.green			{background-color:var(--mainGreen); color:#ffffff; transition-property:background-color,color; transition-duration:400ms;}
	.green:hover		{background-color:var(--mainBlack); color:var(--mainGreen)}
	
	
	.purpleButton	{background-color:var(--mainPurple); color:#ffffff; transition-property:background-color,color; transition-duration:400ms;}
	.purpleButton:hover		{background-color:var(--mainBlue); color:var(--mainPurple)}
	
	.contentTitle	{font-size:1.5rem; font-weight:800; color:var(--mainBlue); margin-top:10px}
	.signUpInput	{font-size:1.2rem; padding:10px 20px; border-radius:var(--rounded); min-width:15ch; width:90%; max-width:45ch}
	
	#successMessage	{background-color:var(--mainBlue); border:5px solid var(--mainBlue); color:#ffffff; display:inline-block;
				.title	{color:var(--mainPurple);}
	}
	#errorMessage	{background-color:var(--mainOrange); border:5px solid var(--mainOrange); color:#ffffff;}
	.errorTextPage	{padding:1rem; border-radius:var(--rounded); margin-top:1rem;
		.title	{font-size:1.5rem; font-weight:bold; text-align:center; margin-bottom:10px}
	}
	
	/* Modal Content */
	#modal				{padding:20px; border-radius:10px; box-sizing: border-box; border:5px solid #ffffff;
							background-color:var(--mainBlack); color:#ffffff; position:relative;
	}
	.modalClose			{font-size:1.5rem; color:#ffffff; position:absolute; top:3px; right:3px; text-align:center;
							border-radius:50%; border:3px solid var(--mainBlue); width:30px; height:30px; padding-bottom:3px;
							> a {text-decoration:none; color:var(--mainBlue);}
	}
	.modal::backdrop	{background-color:rgba(54, 0, 79,1); opacity:.55;}
	.modalTitleText		{margin-bottom:10px; font-size:1.25rem}
	.modalContent		{display:flex; flex-direction:column; gap:1rem}
	
	#siteMap		{display:flex; flex-direction:column; gap:1rem;}
	.siteNavSub		{margin-left:2.5rem;}
	
	
	
	#serviceImages	{display:flex; flex-direction:row; gap:1.5rem; flex-wrap:wrap; font-size:1.25rem; padding:20px;
						justify-content: center; line-height:180%}
	.serviceImages {border-radius:var(--rounded); width:180px; height:150px; border:0px solid var(--mainBlack);}