/* -- This is a CSS comment! The browser will ignore it -- */

/* -- Let's set up some global styles -- */
* { 
	box-sizing: border-box; 
	margin:0;
	padding:0;
}

body {
	font:18pt/1.4em arial, san-serif;
	background: url("images/mainBG.jpg") left bottom no-repeat #faf0e4;
	background-size:contain;
	background-attachment:fixed;
	}

a {	color:#ed5145;
	text-decoration:none;
	}

a:hover {color:#c00e00;}

.imgfit img { 
	width:100%;
	height:auto;
	}
	
h1 { 
	font-family: 'Electrolize';
	color: #ed5145;
	text-align:center;
}

h2 {
	font-family: 'Electrolize';
	line-height:2rem;
	color: #ed5145;
}

h3, h4 {
	font-family: 'Electrolize';
	color: #ed5145;
}

.thumb {width:80px;}

.flex {
	display:flex;
	flex-wrap:wrap;
	}

.center {
	text-align:center;
}
	
p, h1, h2, h3, h3, h4, h5, h6 {	margin: 5px 0 20px 0;}

ul {list-style-type:none;}

.bullet { list-style-type:square;margin-left:30px;}
.bullet li {margin:10px 0 10px 0;}

/* --------- Content Styling ----- */

#wrapper {
	width:95%;
	margin:0 auto;
}


/* ----- Content Elements ---*/

.content {
		padding-top:15px;
		background:#fff;
		padding:10px;
		border-radius: 20px;
		margin:50px 0 60px 0;
}

.splash {
	background:url("images/splash-intro.png") #fff bottom left no-repeat;
	background-size:contain;

}

.splash h1 {
	text-align:right;
}
.intro {
	background: #faf0e4;
	padding: 10px;
	border-radius:20px;
}

.subsections {
	margin:30px 0 30px 0;
	padding:0;
}

.subitem {
	padding:5px;
	margin:.2em;
	background: #faf0e4;
	padding: 10px;
	border-radius:20px;
	}

.footnote {
	font-size:.8em;
}

.next a {
	display:block;
	padding:10px;
	margin:0 auto;
	width:150px;
	height:55px;
	border-radius:20px;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	color:#fff;
	background: #efc744;
	
}

.next a:hover {
	background-color:#ed5145;
	color:white;
}

.tinygallery {
	list-style-type:none;
	background-color:#faf0e4;
	justify-content:space-evenly;
	border-radius:20px;
	margin:0;
	padding:0;
}

.tinygallery li {
	width:28%;
	padding:10px;
}

.pfp {
	width:100px;
	display:inline;
	float:left;
	margin: 0 10px 10px 0;
	border-radius:20px;
}

.example {
	justify-content:space-between;

	
}

.grow { flex-grow: 1;}
	
footer {
	padding:10px;
	text-align:center;

}
	
/*-------- Desktop Styling ---------*/
@media only screen and (min-width: 768px) {
	
	#wrapper {width:80%;}
	
	header {padding-top:100px;}
	
	#title {	
		font-size:4em;
		padding-bottom: 20px;
	}
	
	.mainmenu li {width:25%;}
	.intro {padding:20px;}
	.subsections, .example {
	
		justify-content: space-between;
	}
	
	.example li {
		width:200px;
		padding:10px;
		margin:5px;
		background:#fff;
	}

	.col3 {width:30%;}

	.right {
	justify-content:end;
	}
	.subitem {	width:49%; padding:15px; margin:10px 0 10px 0;}
	
	.full { width:100%; }
}