@charset "utf-8";
/* CSS Document */

body {
	background:#FFFFFF;
	margin:0;
	padding:0;
}

.container{
	max-width:1000px;
	padding:5px 0;
}


/****************** Header / Navigation ***********************/

#header{
	width:100%;
	margin: 0 auto;
}

#navBig{
	font-size:1.25em;
}
.nav{
	margin-left:2%;
}
#navSm{
	display:none;
	width:75px;
	height:75px;
	margin:35px 35px 0 0;
	cursor:pointer;
}
.navMenu{
	width: 50%;
	height: 5px;
	background-color: black;
	margin: 6px 0;
}
#menu{
	display:none;
	width:100%;
	z-index:10;
	position:fixed;
	top:0;
	height:100vh;
	overflow:scroll;
}
.menuItem{
	width:100%;
	background-color:#E9E9E9;
	border-bottom:#666 thin solid;
	padding:30px;
	font-size:2em;
}
.menuItem:hover{
	background-color:#CCE6FF;
	cursor:pointer;
}
#catBig{
	display:block;
	margin-top:25px;
}
.catbut{
	padding:10px;
	background-color:#FFF;
	border:#666 thin solid;
	border-radius: 5px;
	margin:0 5px 0 5px;
	font-size:1em;
}
.catbut:hover{background-color:#CCE6FF; cursor:pointer;}
.catSelect{background-color:#CCE6FF;}
#catSm{
	display:none;
	margin-top:25px;
}
.catSel{
	width:90%;
	font-size:1em;
	padding:10px;
	margin:0 5% 0 5%;
	border-radius: 5px;
}

@media screen and (max-width: 850px) {
	#navBig{display:none;}
	#navSm{display:block;}
	#catBig{display:none;}
	#catSm{display:block;}
}

#footer{
	width:100%;
	margin: 0 auto;
	padding:30px;
	background-color:#333;
	color:#CCC;
	height:75px;
	font-size:.75em;
	clear:both;
}

#feature{
	width:100%;
	margin: 0 auto;
	color:white;
	font-size:1.5em;
	padding:15px 0;
}

#content{
	width:100%;
	margin: 0 auto;
	padding:15px 0;
}


#cover{
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background-color: rgba(50, 50, 50, 0.85);
	display:none;
	z-index:3;
}


/****************** Sections *******************/

* {
  box-sizing: border-box;
}

.column {
	position:relative;
	float: left;
	padding: 20px;
	/*height: 375px; Should be removed. Only for demonstration */
}
.hoverBut:hover{background-color:#CCE6FF; cursor:pointer;}

.row:after {
	content: "";
	display: table;
	clear: both;
}
.more{
	width:calc(100% - 20px);
	background-color:#CCC;
	padding:10px;
	margin:5px;
	position:relative;
	bottom:5px;
	left:5px;
	display:block;
}


.quote{
	width:95%;
	margin:15px 0 15px 5%;
	background-color:#E9E9E9;
	border-left:thick solid #12b6eb;
	padding:15px;
	font-style:italic;
}

@media screen and (max-width: 850px) {
	.column{
		height:auto;
	}
	.more{
		position:relative;
	}
}