@charset "UTF-8";
/* CSS Document */
/* global styles */
body {
	background-color: white;
	font-size: 16px;
	font-family: 'Krub', sans-serif;
	margin: 0 auto;
	padding: 0;
	max-width: 1500px;
}
img {
	display: block;
	width: 100%;
	height: auto;
}
/* type styles */
p {
	font-size: 1.2em;
	font-weight: 300;
}
h1 {
	font-size: 3.5em;
	text-align: center;
	font-weight: 400;
}
h2 {
	font-size: 3em;
}

/* header styles */
header {
	margin: 0 4em 2em 4em;
	border-bottom: 1px solid grey;
}
.headerText {
	text-decoration: none;
	color: black;
}

/* navigation styles */
.navigation {
	max-width: none;
	display: flex;
    justify-content: center;
	list-style-type: none;
	background-color: white;
	margin: 0em 4em;
	padding: 0em;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: white;
}
li {
	float: left;
    border-right: 3px solid white;
}
li a {
	display: block;
	color: black;
	padding: 2em;
	text-decoration: none;
	text-align: center;
	font-size: 1.2em;
}
li a:hover {
	color: grey;
	font-weight: bold;
}
/* hero image styles */
.heroIndex, .heroAbout, .heroServices, .heroWorkshops,.heroStudents {
	margin: 1em 1em 1em 1em;
	display: grid;
}
.aboutPhoto{
	width: 10%;
	justify-content: center;
	text-align: center;
}
.indexPhoto {
	justify-content: center;
	text-align: center;
}
.heroPhoto {
	width: 75%;
	justify-content: center;
	text-align: center;
}

/* summary area */
.summary {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 5em;
	margin: 2em 4em;
}
.summary1 {
	grid-column: 1/2;
}
.summary2 {
	grid-column: 2/3;
}
.summary3 {
	grid-column: 3/4;
}
.summary4 {
	grid-column: 4/5;
}
.summaryText {
	text-align: center;
}
.summaryHead {
	text-align: center;
	font-size: 1.5em;
	font-weight: 500;
}
.summaryMainHed {
	grid-column: 1/5;
	font-size: 1.5em;
	text-align: center;
	margin: 0 4em;
}

/* workshops area */
.workshops {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5em;
	margin: 2em 4em;
}
.workshops1 {
	grid-column: 1/2;
}
.workshops2 {
	grid-column: 2/3;
}
.workshops3 {
	grid-column: 1/2;
}
.workshopsMainHed {
	grid-column: 1/3;
}

/* students styles */

/* video styles */

.video {
	margin: 1em;
	width: 100%;
	height: auto;
}

/* about styles */
.aboutPhoto {
	width: 10%;
	margin: 0 auto;
}

/* contact styles */
.contactUs {
	margin: 2em 4em;
	background-color: lavender;
	padding: 1em 2em;
}
.contactHead {
	text-align: center;
	font-size: 1.5em;
	font-weight: 300;
}
.contactText {
	color: black;
	text-decoration: none;
}

/* footer styles */
footer {
	border-top: 1px solid grey;
	margin: 1em 4em;
}
.footerText {
	text-align: center;
}

/* responsive styles */
@media screen and (max-width: 780px) {
.summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5em;
	margin: 2em 4em;
}
.summary1 {
	grid-column: 1/2;
}
.summary2 {
	grid-column: 2/3;
}
.summary3 {
	grid-column: 1/2;
}
.summary4 {
	grid-column: 2/3;
}
}
@media screen and (max-width: 700px) {
.summary, .workshops {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5em;
	margin: 2em 4em;
}
.summary1 {
	grid-column: 1/2;
}
.summary2 {
	grid-column: 1/2;
}
.summary3 {
	grid-column: 1/2;
}
.summary4 {
	grid-column: 1/2;
}
}