header {
	font-family: Calibri, sans-serif;
	}
body {
	font-family: Calibri, sans-serif;
	}

header { 
	background-image: url("logoText.png");
	background-position: center;
	height: 230px;
	background-repeat: no-repeat;
	background-color: #656465;
	background-size: contain;
}


/*body {
	background-image: url("logoWhite.png");
	background-position: right 40px;
	background-size: 46%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	<--this is all the kind of thing for a scrolling nav bar this image as the top bit-->
}*/



/* nav bar set up
nav bar will be in header */

.navBar { 
	display: grid; 
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}
/* setting up nav buttons in header */
.navBar a { 
	display: flex;
	width: 100px;
	text-align: center;
	min-height: 10%;
	text-decoration: none;
	border:solid white 2px;
	color: white;
	background-color: #EE2324;
	justify-content: center;
	justify-self: center;
	margin-top: 70px;
	font-size: 150%;
	vertical-align: middle;
	align-items: center;
	border-radius: 20px;
}



/* positioning each nav button */

.topLeft, .bottomLeft  {
	margin-right: 130px;
	
}

.topRight, .bottomRight {
	margin-left: 130px;
}

@media screen and (max-width: 600px) {
	.navBar {
		grid-template-columns: repeat(4, 1fr);
		gap: 0px;
	}
	.navBar a {
		margin: 0px;
		margin-top: 240px;
		font-size: 80%;
		width: 80px;
	}
}



.navBar a:hover { 
	background: #656465;
}



header {
	background-color: #656465;
}

h2, h1 {
	color: #EE2324;
}

/*slideshow */
.Pictures {
	background-color: #656465;
	margin-top: 0px;
	margin-bottom: 0px;
	
}



.slideshow {
	margin: auto;
	position: auto;
	border-bottom: solid 30px #EE2324;
	text-align: center;
	padding-top: 50px;
	background: linear-gradient(180deg, #656465 50%, white 37%);
	height: 450px;
	
}

.mySlides {
	display:none;
}
/* styling images */

.mySlides > img {
	max-height: 400px;
	max-width: 400px;
}




/* setting up flex boxes for content sections */

.ContentWrapper {
	
	border-bottom-style: solid;
	border-bottom-color: #EE2324;
	border-bottom-width: 30px;
	margin: 0px;

}

.ContentWrapper > * {
	margin-top: 40px;
	margin-bottom: 40px;
	
}

.ContentWrapper > img {
	min-width: 200px;
	align-items: center;
	height: auto;
}

.ContentWrapper > h2 {
	padding-top: 60px;
	font-size: 250%;
}


@media screen and (min-width: 700px) {
	.ContentWrapper {
		display: grid;
		grid-template-columns: 1fr 2fr 2fr 2fr;
		gap: 10px;
	}
	
}

/*contact form styling */


.formSend {
	color: white;
	background-color: #EE2324;
	border: none;
	border-radius: 20px;
	margin-top: 20px;
	min-width: 150px;
}

.formSend:hover {
	background-color: #656465;
}

.formInput {
	width: 90%;
}


/* footer will be simple flex box */

footer {
	display: flex;
	background-color: #656465;
	color: white;
}

footer a {
	color: white;
}

footer a:hover {
	text-decoration: none;
}

footer > * {
	flex: 1;
	text-align: center;
	justify-content: center;
}