:root {
	--gold: 			rgba(198, 162, 42, 1);
	--gold-alt: 		rgba(198, 162, 42, 0.75);
	--blue: 			rgba(33, 45, 76, 1);
	--blue-alt: 		rgba(33, 45, 76, 0.75);
	--white: 			rgba(245, 245, 245, 1);
	--white-alt: 		rgba(245, 245, 245, 0.75);
	--wide:				120rem;
	--medium:			96rem;
	--narrow:			80rem;
	--fade:				all 0.5s ease; 
	--text:				"League Spartan", sans-serif;
	--title:			"League Spartan", sans-serif;
	}
	

*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 62.5%; }
body { min-height: 100vh; background-color: var(--white); color: var(--blue); font-size: 1.8rem; line-height: 1.25; font-family: var(--text); font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; }

a { color: var(--gold); text-decoration: none; transition: var(--fade); }
a:focus, a:hover, a:active { color: var(--white); }
a span { transition: var(--fade); }

strong { font-weight: bold; }

img { width: 100%; height: auto; display: block; }

p { padding-bottom: 1.6rem;  }
p:last-of-type { padding-bottom: 0; }
p:first-of-type { padding-bottom: 1.6rem; }

ul { list-style: none; padding-bottom: 1.6rem; }
menu { list-style: none; }
li { list-style: none; }

select, textarea, input, button { font-family: inherit; background: var(--gold-alt); font-size: 2rem; width: 100%; padding: .8rem; margin-bottom: .8rem; }

button { transition: var(--fade); padding: 1.6rem; }

h1, h2, h3, h4, h5, h6 { font-family: var(--title); font-weight: bold; }
h1 { font-size: 3rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2rem; }

address { font-style: normal; }

@media screen and (max-width: 640px) {
	
}

/********************************************/

nav {
	width: 100%; position: sticky; top: 0; height: 6rem; border-bottom: 1px solid var(--gold); z-index: 100; background-color: var(--white); display: grid; place-items: center;
	
	div {
		width: 100%; max-width: var(--wide); margin: 0 auto; display: flex; flex-direction: row; gap: 1.6rem; justify-content: space-between; align-items: center; 
		
		a.nav-logo {
			
			img {
				height: 4.8rem; width: auto; padding: .4rem 1.6rem;
			}
		}

		
		ul {
			height: 4.8rem; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1.6rem; font-weight: bold; padding-bottom: 0; padding-right: 1.6rem;
			
			li {
				height: 100%; display: grid; place-items: center; 
				
			}
			a {
				display: grid; place-items: center; padding: .8rem; 
				
				span {
					border-bottom: 2px solid transparent;
				}
			}
			a:hover, a:active, a:focus { 
				color: var(--blue); 
				
				span {
					border-bottom: 2px solid var(--gold);
				}
			}
		}
	}
}

body.services a.nav-services, body.about a.nav-about, body.contact a.nav-contact { 
	color: var(--blue); 
	
	span {
		border-bottom: 2px solid var(--blue);
	}
}

@media screen and (max-width: 640px) {
	nav {
		
		div {
			
			a.nav-logo {
				img {
					height: 3.2rem; 
				}				
			}
			
			ul {
				gap: .8rem; font-size: 1.6rem;
				
				li {
					
					a {
						padding: .4rem; 
					}
				}
			}
		}
	}
}

/********************************************/

header {
	background-repeat: no-repeat; background-position: center center; background-size: cover; max-width: 100vw; height: calc(50vh - 6rem); background-color: var(--blue); color: var(--white);
	
	div {
		display: grid; align-items: center; height: 100%; width: 100%; background-color: var(--blue-alt);
		
		hgroup { 
			display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: 100%; gap: 2rem; 
			
			h1 {
				width: 100%; max-width: var(--wide); margin: 0 auto; padding: 1.6rem; font-size: 4rem; text-align: left;
				
				img {
					width: 24rem; height: auto; 
				}
			}
			p {
				font-size: 2.4rem; padding: 2rem; max-width: 40rem; 
			}
			p:last-of-type { 
				padding-bottom: 2rem;
			}
		}
	}
}



body.home header {
	height: 100vh; background-image: url('home.jpg'); 

	div {
		background-color: transparent;
		
		a {
			display: block; width: 100%; height: 100%; padding: 1.6rem;
		}
		hgroup {
			justify-content: space-between; width: 100%; max-width: 160rem; margin: 0 auto;
			
			h1 {
				width: 100%; max-width: 160rem;
				
				img {
					height: 24rem; width: auto;
				}
			}
			p {
				text-align: right; width: 100%; max-width: 160rem; color: var(--blue);
			}
		}
	
	}
}

@media screen and (max-width: 640px) {
	body.home header {
		div {
			hgroup {
				h1 { 
					img {
						height: 14rem; margin: 0 auto;
					}
				}
				p {
					font-size: 2rem; text-align: center;
					br {
						display: none;
					}
				}
			}
		}
	}
}

/********************************************/

aside {
	width: 100%; background: var(--gold); border-bottom: 1px solid var(--white); height: calc(50vh - 6rem); display: grid; place-items: center; gap: 2rem; 
	
	div {
		width: 100%; max-width: var(--narrow); padding: 0 1.6rem;
		
		p {
			/* display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; font-size: 2.4rem; margin: 0 auto; padding: 0 1.6rem; */
			width: 100%; font-size: 2.4rem; 
		}
	}
}

body.home {
	aside {
		height: auto; min-height: 100vh; padding-top: 6rem;

		div {
			display: flex; flex-direction: column; gap: 1.6rem; max-width: var(--medium);
			p {
				/* display: grid; grid-template-columns: 1fr 2fr; */
				font-size: 2.4rem; max-width: 64rem;
				
				strong {
					/* font-size: 4.8rem; padding-right: 1.6rem; border-right: 1px solid var(--blue); width: 100%; text-align: right; */
					font-size: 4.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--white); text-align: left; display: block;
				}
				em {
					/* padding-left: 1.6rem; text-align: left; text-wrap: balance; padding-bottom: 0; font-style: normal; color: var(--white);  */
					display: block; padding-top: 0.8rem; text-align: right; text-wrap: balance; padding-bottom: 0; font-style: normal; 
				}
			}
			p:nth-of-type(1) {
				margin: 0 auto 0 0;
			}
			p:nth-of-type(2) {
				margin: 0 auto;
			}
			p:nth-of-type(3) {
				margin: 0 0 0 auto;
			}
		}
	}
}

@media screen and (max-width: 640px) {
	aside {
		div {
			p {
				font-size: 2rem; 				
			}
		}
	}
	
	body.home {
		aside {
			div {
				p {
					/* grid-template-columns: 1fr 2fr;  */
					strong {
						font-size: 2.4rem;
					}
					em {
						font-size: 1.8rem; 
					}
				}
			}
		}
	}
}

/********************************************/

main {
	section {
		width: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; 
		
		h2 {
			background: var(--blue); color: var(--white); z-index: 50; width: 100%; display: grid; align-items: center; height: 6rem; position: sticky; top: 6rem; border-bottom: 1px solid var(--gold); 
			
			span {
				text-align: right; width: 100%; max-width: var(--wide); padding: 0 1.6rem; margin: 0 auto;
			}
		}
		div {
			display: grid; align-items: center; height: 100%; width: 100%; max-width: var(--wide); margin: 0 auto; font-size: 2.4rem; padding: 4rem 1.6rem; 
			
			p {
				width: 100%; max-width: var(--narrow); margin: 0 auto; text-align: justify;
			}
		}

	}
}

@media screen and (max-width: 640px) {
	main {
		section {
			h2 {
				font-size: 1.8rem;
			}
			div {
				font-size: 1.6rem;
			}
		}
	}
	
}

/********************************************/

ul.panels {
	display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4rem; padding: 4rem 0; 
	
	li {
		 display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 20rem); background-repeat: no-repeat; background-size: cover; background-position: center center; color: var(--white); background-color: var(--blue); padding: 0;
		
		a {
			display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 2rem; background: var(--blue-alt); 
		}
		a:hover, a:focus, a:active {
			color: var(--white);
		}
		
		hgroup {
			display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1;
			
			h3 {
				font-size: 2.8rem; text-align: right;
			}					
			p {
				font-weight: bold; border-bottom: 1px solid var(--gold); padding: 1rem 0; font-size: 2.4rem; color: var(--white); width: 100%; text-align: left;
			}
		}
		
		em {
			font-style: normal; font-size: 1.8rem; width: 100%; padding-top: 1rem; color: var(--white); 
		}
	}
}

@media screen and (max-width: 640px) {
	ul.panels {
		grid-template-columns: 1fr;
		
		li {
			min-height: 50vh;
			
			hgroup {
				
				h3 {
					font-size: 2.4rem;
				}
				p {
					font-size: 2.2rem;
				}
			}
		}
	}
}


/********************************************/
footer {
	padding: 1.6rem; margin-bottom: 0; background-color: var(--blue); color: var(--white); border-top: 1px solid var(--blue); border-bottom: 1px solid var(--gold); min-height: 20rem; display: grid; place-items: center;
	
	
	div {
		display: grid; grid-template-columns: 1fr 5fr; gap: 3.2rem; align-items: center; max-width: 120rem; margin: 0 auto; padding: 1.6rem;
		
		a {
			img {
				width: 12rem; height: auto; 
			}			
		}
		
		ul {
			display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3.2rem; padding-bottom: 0;
			
			li {
				text-align: right; 
				ul {
					display: flex; flex-direction: column; gap: 0; 
				}
			}

		}
		
		h4 { 
			border-bottom: 1px solid var(--white); padding-bottom: .4rem; margin-bottom: .8rem; text-align: left;
		}
		
		address {
			text-align: right; 
		}
	}
}

@media screen and (max-width: 640px) {
	footer {
		a {
			img {
				margin-left: auto;
			}
		}
		div {
			grid-template-columns: 1fr;
			
			ul {
				grid-template-columns: 1fr;
			}
		}
	}
}

/********************************************/


body.home {
	section {
		min-height: 100vh;
	}
}

body.home section#about {
	background-color: var(--blue); background-image: url(../about.jpg); background-position: center center; background-size: cover;
	
	h2 {
		
	}
	
	div {
		margin-bottom: 4rem; min-height: calc(100vh - 20rem); 
		
		a {
			color: var(--white); background-color: var(--blue-alt); height: 100%; padding: 1.6rem; display: grid; grid-template-columns: 1fr;
			
			hgroup {
				h3 {
					font-size: 2.8rem; text-align: right; color: var(--gold);
				}				
			}
			
			p {
				
				
				strong {
					
				}
				em {
					
				}
			}
		}
	}
}

body.home section#contact {
	min-height: calc(100vh - 30rem); justify-content: center;
	
	h2 {
		
	}
	
	div {
		
		a {
			display: grid; place-items: center; height: 100%; padding: 7rem 2rem;
		}
	}
}





/********************************************/

p.box-description {
	max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;
	
	strong {
		display: block; padding-bottom: 1.6rem; border-bottom: 1px solid var(--gold); font-size: 2.8rem; 
	}
	em {
		display: block; font-style: normal; max-width: 64rem; text-align: right;
		font-style: normal; padding-top: 1.6rem; font-size: 2rem; margin-left: auto; 
	}
}

/********************************************/

small.copyright {
	background-color: var(--white); display: block; width: 100%; text-align: center; padding: .8rem; height: 4rem; font-weight: bold;
	
	a:hover, a:active, a:focus {
		color: var(--blue);
	}
}
/********************************************/

body.contact {
	main {
		section {
			div {
				display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem;
				
				div {
					display: block; padding: 0;
					
					address {
						text-align: right; margin-bottom: 1.6rem;

						h3 {
							text-align: left; border-bottom: 1px solid var(--gold); padding-bottom: .8rem; margin-bottom: .8rem;
						}
					}
				}
				
				iframe {
					
				}
			}
		}
	}
}

@media screen and (max-width: 640px) {
	body.contact {
		main {
			section {
				div {
					display: grid; grid-template-columns: 1fr; border-bottom: 2px solid var(--blue); 
					
					div {
						padding-bottom: 3.2rem;
					}
				}
			}
		}
	}	
}

/********************************************/

ul.grid {
	display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 3.2rem; padding: 0; padding-bottom: 3.2rem;
	
	h3 {
		aspect-ratio: 1; background: var(--blue); color: var(--white); padding: 1.6rem;
	}
	
	li {
		padding: 0; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: end; background-color: var(--blue); color: var(--white); background-size: cover; background-repeat: no-repeat; background-position: center center; 
		
		span {
			display: grid; align-items: center; padding: 1rem 2rem; height: 50%; background: var(--blue-alt); text-align: right;
		}
	}	
}

@media screen and (max-width: 640px) {
	ul.grid {
		grid-template-columns: 1fr 1fr; 
	}
}

/********************************************/