/* ===================================== 
   Grid & Flexbox Layout
======================================== */

html, body {
	width: 100%;
	height: 100%;
}

.container {
	height: 100vh;
	display: grid;
	grid-gap: 0;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"main"
		"candidate"
		"past"
		"peo"
		"additional"
		"about"
		"contact"
		"footer";
}

header {
	grid-area: header;
}

/*.important {
	grid-area: important;
	background: #75141E;
	text-align: center;
	font-size: 3em;
}*/

/*.important a {
	color: #fff;
}*/

.results {
	font-size: 2em;
}

.main-content {
	grid-area: main;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		"notice"
		"current";
}

.seal {
	grid-area: seal;
}

.item {
	grid-area: item;
}

.main-nav {
	grid-area: nav;
}

.footer {
	grid-area: footer;
}

.notice {
	grid-area: notice;
}

.current {
	grid-area: current;
}

.card {
	display: flex;
	flex-direction: column;
}

.button {
	margin-top: 10px;
}

/* ===================================== 
   Grid & Flexbox Layout (Past)
======================================== */

.past-content {
	grid-area: past;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}

.past-header {
	grid-area: pheader;
}

.official {
	grid-area: official;
	padding: 1px 1em 1em 1em;
	background: rgba(255, 255, 255, 0);
	border-radius: .35em;
	margin: .8em .5em .8em;
	text-align: center;
}

.abstract {
	grid-area: abstract;
	padding: 1px 1em 1em 1em;
	background: rgba(255, 255, 255, 0);
	border-radius: .35em;
	margin: .8em .5em .8em;
	text-align: center;
}

.past-notice {
	grid-area: pnotice;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(200px, auto);
	grid-template-areas:
		"pheader pheader"
		"official abstract"
}



/* ===================================== 
   Grid & Flexbox Layout (Candidate)
======================================== */

.candidate-content {
	grid-area: candidate;
	display: grid;
	grid-template-areas: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		"notice"
		"sos"
		"finance"
		"ethics"
		"petition"
		"current";
}

.sos {
	grid-area: sos;
}

.finance {
	grid-area: finance;
}

.ethics {
	grid-area: ethics;
}

.petition {
	grid-area: petition;
}

.special {
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
	align-items: flex-end;
	align-content: flex-end;
	overflow: hidden;
}
	
.special a {
	margin: 5px 10px;
	flex: 1 0 auto;
	color: #fff;
}



/* ===================================== 
   Grid & Flexbox Layout (PEO)
======================================== */

.peo-content {
	grid-area: peo;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		"notice"
		"signup"
		"youth";
}

.signup {
	grid-area: signup;
}

.youth {
	grid-area: youth;
}



/* ===================================== 
   Grid & Flexbox Layout (Additional)
======================================== */

.additional-content {
	grid-area: additional;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		"notice"
		"map"
		"reports"
		"receives"
		"widget";
}

.map {
	grid-area: map;
	padding: 1px 1em 1em 1em;
	background: #f2f2f2;
	border-radius: .35em;
	margin: .8em .5em .8em;
	text-align: center;
}

.reports {
	grid-area: reports;
	padding: 1px 1em 1em 1em;
	background: #f2f2f2;
	border-radius: .35em;
	margin: .8em .5em .8em;
	text-align: center;
}

.widget {
	grid-area: widget;
	padding: 1px 1em 1em 1em;
	background: #f2f2f2;
	border-radius: .35em;
	margin: .8em .5em .8em;
	text-align: center;
}

.receives {
	grid-area: receives;
	padding: 1px 1em 1em 1em;
	background: #f2f2f2;
	border-radius: .35em;
	margin: .8em .5em .8em;
	text-align: center;
}

.resource {
	grid-area: resource;
}



/* ===================================== 
   Grid & Flexbox Layout (About)
======================================== */

.about-content {
	grid-area: about;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		"about"
		"board"
		"meetings"
		"hours";
}

.about {
	grid-area: about;
}

.board {
	grid-area: board;
}

.meetings {
	grid-area: meetings;
}

.hours {
	grid-area: hours;
}




/* ===================================== 
   Grid & Flexbox Layout (Contact)
======================================== */

.contact-content {
	grid-area: contact;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-template-areas:
		"notice";
}



/* ===================================== 
   Grid & Flexbox Layout (Plan)
======================================== */



.plan-header {
	grid-area: pheader;
}

.second-header {
	grid-area; sheader;
}

.plan-footer {
	grid-area: pfooter;
}

.plan-container {
	height: 100vh;
	display: grid;
	grid-gap: 0;
	grid-template-rows: auto auto;
	grid-template-columns: 100%;
	grid-template-areas:
		"pheader"
		"sheader"
		"pcontent"
		"pfooter";
}

.plan-content {
	display: grid;
	grid-area: pcontent;
	grid-template-rows: 1fr;
	grid-template-columns: 100%;
	grid-template-areas:
		". carousel carousel .";
}

.carousel-wrapper {
	grid-area: carousel;
}












/* ===================================== 
   Media Queries
======================================== */

@media (min-width: 768px) {
	.main-content {
		padding-left: 20px;
		padding-right: 20px;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(200px, auto);
		grid-template-areas:
			"notice notice current";
	}
	
	header,
	.main-nav {
		display: flex;
	}
	
	header {
		flex-direction: column;
		align-items: center;
	}
	
	.button {
	margin-top: auto;
	}



	.candidate-content {
		padding-left: 40px;
		padding-right: 40px;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(200px, auto);
		grid-template-areas:
			"notice notice"
			"sos finance"
			"ethics petition"
			"current current";		
	}
	

	.peo-content {
		padding-left: 40px;
		padding-right: 40px;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(200px, auto);
		grid-template-areas:
			"notice notice"
			"signup youth";
	}
	
	.additional-content {
		padding-left: 40px;
		padding-right: 40px;
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(200px, auto);
		grid-template-areas:
			"resource";		
	}
	
	.about-content {
		padding-left: 20px;
		padding-right: 20px;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(200px, auto);
		grid-template-areas:
			"about board"
			"meetings hours";
	}
}

	.contact-content {
		padding-left: 40px;
		padding-right: 40px;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(100px, auto);
		grid-template-areas:
			". notice ."
			". . .";
	}

@media (min-width: 1010px) {
	.main-content {
		padding-left: 60px;
		padding-right: 60px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(300px, auto);
		grid-template-areas:
			"notice notice current";
	}
	
	header {
		display: grid;
		grid-template-columns: 200px 1fr 1fr 200px 1fr/*repeat(5, 1fr)*/;
		grid-auto-rows: auto;
		grid-template-areas:
			"seal item item . nav"
	}
	
	.past-content {
		padding-left: 60px;
		padding-right: 60px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(325px, auto);
		grid-template-areas:
			". pnotice pnotice .";
	}
	
	.candidate-content {
		padding-left: 60px;
		padding-right: 60px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(200px, auto);
		grid-template-areas:
			"notice notice sos sos"
			"finance finance ethics petition"
			". current current .";		
	}


	
	.peo-content {
		padding-left: 100px;
		padding-right: 100px;
		grid-auto-rows: minmax(300px, auto);
	}
	
	.additional-content {
		padding-left: 40px;
		padding-right: 40px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(25px, auto);
		grid-template-areas:
			". resource resource";		
	}
	
	.about-content {
		padding-left: 60px;
		padding-right: 60px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(275px, auto);
		grid-template-areas:
			"about about about board"
			"meetings meetings hours .";
	}
}

@media (min-width: 1400px) {

	.about-content {
		padding-left: 170px;
		padding-right: 170px;
		grid-auto-rows: minmax(325px, auto);
	}

	.peo-content {
		padding-left: 170px;
		padding-right: 170px;
		grid-auto-rows: minmax(325px, auto);
	}

}