/* CSS Document */
/*
This applies only to index.html to style the background, hero text, boxes, and about us.
It also handles responsive styling based on screen width.
*/
h1 {
	font-size: 100%;
}

#PageContent {
	position: relative;
	width: inherit;
	background: transparent;
	border: solid;
	border-color:#000;
	border-width: 0px;
	padding: 0;
	top: 0px;
}

/*Background image*/
.backgroundContainer {
	width: 100%;
	height: 100vw;
	background-color: white;
	background: linear-gradient(
			to bottom, /*From top to bottom*/
			rgba(255,255,255, .65) 0%, /*Put white layer over full image at 65% opacity*/
			rgba(255, 255, 255, .75) 25%, /*Start gradient*/
			rgba(255, 255, 255, 1) 30%, /*Reach full opacity*/
			white 100%), url("../images/temp-background2.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
}
/*Upper section*/
.upperInfo { /*This holds the mantra and the membership button*/
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	margin: auto;
	min-height: 20.125rem;
	height: auto;
}
		
/*Contains full mantra (heroTitle+heroText) and membership button, makes vertical space between each element even*/
.mantra {
	display: flex;
	flex-direction: column;
	max-width: 930px;
	margin: auto;
	min-height: 14.375rem;
	height: auto;
	justify-content: space-between;
	text-align: center;
}

/*Slogan text*/
#heroTitle p {
	font-size: 125%;
	font-weight: bold;
	color: #223c45;
	text-shadow: 1px 1px 4px white; /*White shadow increases contrast, makes this more readable on multicolored background*/
	padding-bottom: 5px;
}

/*Longer description of services*/
#heroText p {
	height: auto;
	font-size: 100%;
	font-weight: bold;
	color: #223c45;
	text-shadow: 1px 1px 4px white; /*White shadow increases contrast, makes this more readable on multicolored background*/
}

/*Info Blocks*/
/*The blocks are based on opendental.com/index.html*/
#blockContainer {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

/*An individual block*/
.indexContentBlock {
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #244743;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	height: 30rem;
	width: 17.8125rem;
	margin: 0 7px 7px 7px;
	padding: 7px 0px;
}

.subSection ul {
	list-style: none;
	margin-left: 15px;
	margin-bottom: 7px;
}

.subSection li {
	margin-top: 6px;
	margin-left: 10px;
	line-height: 14pt;
}

.subSection h1 {
	margin-left: 15px;
}

.subSection p {
	margin: 0 15px 7px 15px;
}

.subSection #protocol{
	list-style: circle;
}

.subSection img {
	display: block;
	border: 1px solid #000;
	border-radius: 4px;
	margin: 7px auto;
	width: 85%;
}

/*AboutUs*/
/*Holds title text for the section and AboutUsGrid*/
#AboutUsContainer {
	position: relative;
	width: 100%;
	margin: 14px auto;
	justify-content: center;
	background-color: #FFFFFF;
	border: 1px solid #244743;
	border-radius: 4px;
}

/*Contains the AboutUsProfile for each employee*/
#AboutUsGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /*4 columns, each taking up one frame*/
	gap: 3px;
	width: 100%;
	justify-content: center;
	margin-bottom: 7px;
}

#AboutUsTitle h1 {
	position: relative;
	font-size: 133%;
	display: block;
	margin: 18px auto;
	width:100%;
	text-align: center;
}

/*Each individual employee*/
.AboutUsProfile {
	justify-content: center;
	text-align: center;
	max-width: 220px;
	min-width: 0;
	width: 100%;
}

.AboutUsProfile img {
	margin-top: 14px;
	object-fit: cover;
}

.AboutUsProfile h1 {
	color: #111155;
	font-size: 100%;
	font-weight: bold;
	margin: 0px;
}

/*
This section is more complex so here's the math and how it works out:
4n+1: 1, 5, 9, 13
4n+2: 2, 6, 10, 14
4n+3: 3, 7, 11, 15

In tandem with nth-last-child, this checks the last row and handles it as follows:
1. If there is only one profile in the bottom row:
   - Move it to column 2 and center it between columns 2 and 3

2. If there are two profiles in the bottom row:
   - Move them to columns 2 and 3

3. If there are three profiles:
   - Center them in the space between the columns
*/

/*If there is only one profile in the bottom row*/
.AboutUsProfile:nth-last-child(1):nth-child(4n+1) {
	grid-column: 2; /*Move it to column 2*/
	margin-left: 51%; /*Center it between columns 2 and 3*/
}

/*If there are two in the bottom row, select the first one*/
.AboutUsProfile:nth-last-child(2):nth-child(4n+1) {
	grid-column: 2; /*Put the first one in column 2*/
}

/*If there are two in the bottom row, select the second one*/
.AboutUsProfile:nth-last-child(1):nth-child(4n+2) {
	grid-column: 3; /*Put the second one in column 3*/
}

/*If there are 3 in the bottom row*/
.AboutUsProfile:nth-last-child(3):nth-child(4n+1), /*Selects the item in column 1*/
.AboutUsProfile:nth-last-child(2):nth-child(4n+2), /*Selects the item in column 2*/
.AboutUsProfile:nth-last-child(1):nth-child(4n+3) /*Selects the item in column 3*/
{
	margin-left: 51%; /*Center them in the space between the columns*/
}

/*Media Queries*/
@media screen and (max-width: 940px) {
	#AboutUsContainer {
		width: 95%;
	}
	
	#AboutUsGrid {
		width: 95%;
		margin: auto;
	}
}

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

}

@media screen and (max-width: 600px) {
	.indexContentBlock {
		height: auto;
	}
}

@media screen and (max-width: 505px) {
	.AboutUsProfile img {
		max-width: 110px;
		max-height: 144px;
		width: 100%;
		height: auto;
		aspect-ratio: 110 / 144;
	}
}
		
/*This is what most phones will see*/
@media screen and (max-width: 445px) {
	
}