@import url(https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900);

@charset "utf-8";
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	color: #231F20;
	margin: 0 auto;
}
h2 {
	font-family: 'Orbitron', sans-serif;
	font-size:12pt;
	font-weight:900;
	line-height:2;
	letter-spacing: 5px;
	margin-bottom: 15px;
	padding-left: 25px;
	border-left:5px solid #c00;
}
h3 {
	font-family: 'Orbitron', sans-serif;
	font-weight:700;
	font-size: 9pt;
	letter-spacing: 5px;
	margin-bottom: 10px;
	color:#999;
	padding-left:30px;
	text-transform:uppercase;
}
h4 {
	text-transform: uppercase;
	margin-bottom: 10px;
}
p {
	/* padding: 0 15px 0 30px; */
	padding: 0 30px;
	margin-bottom: 10px;
}
p+h3, p+h4 {
	margin-top: 25px;
}
h3+p a {margin-right:10px; margin-bottom:15px; display:inline-block;}

img {border:none;}

img.gallery {
	box-shadow:0px 3px 5px rgba(0,0,0,0.25);
	width:100%;
	height:auto;
}

img.new {background-color:#c00;}

img.gallery:hover {opacity:0.75;}

.hide {display: none;}

.floatright {float: right; padding-left: 5px;}

.floatleft {float: left; padding-right: 5px;}

#container,
.container {
	width:100%;
	max-width: 1200px;
	padding:0 20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	transition:all 0.5s;
}
#logo {
	width: auto;
	height:auto;
	float: left;
}
#logo img {
	width:auto;
	height:auto;
	max-height:50px;
	max-width:60%;
	/* opacity:0.1; */
	transition:all 1s;
}
@media (min-width: 450px) {
	#logo img {max-width:100%;}
}
#logo img:hover {opacity:1; transition:all 1s;}

#logo h1 {margin:0;}

#logo_lg {
	width:100%;
	height:100%;
	max-height:90px;
	margin:0 auto;
}
#logo_lg h1 {
	text-align:center;
	margin:0 auto;
}
#logo_lg img {
	opacity:0.1;
	width:80%;
	max-width:550px;
	height:auto;
	transition:all 1s;
}

#logo_lg img:hover {opacity:1; transition:all 1s;}

#navholder {
	position:fixed;
	width:100%;
	height:0;
	z-index:800;
	margin-left:0;
	right:0px;
	box-sizing:border-box;
	text-align: center;
	text-transform: uppercase;
	background-repeat: no-repeat;
	background-position: right top;
}
#navholder span {
	font-family: 'Orbitron', sans-serif;
	font-size: 24px;
	letter-spacing: 6px;
}
#content,
.content {
	clear: both;
	width:100%;
	max-width: 1200px;
	min-height: 350px;
	padding: 20px;
	margin-top:0px;
	margin-bottom:20px;
}
#content a,
.content a {
	color: #BF1E2E;
	text-decoration: none;
}
#content a:hover,
.content a:hover {
	text-decoration: underline;
}

.clear {clear:both;}

#footer {
	clear:both;
	color: #231F20;
	width: 100%;
	text-align: center;
	font-size: 7pt;
	padding: 3px 0 60px;
	margin-top: 6px;
}
#footer a {
	text-transform: uppercase;
	text-decoration: none;
	color: #231F20;
}
#footer a:hover {
	background-color: #BF1E2E;
}


/* ---------- NAV MENUS ---------- */

#nav {
	height:100%;
	width: 100%;
	transition:all 0.5s;
	overflow:hidden;
	background:rgba(255,255,255,0.95);
	box-sizing:border-box;
	box-shadow: 0px 5px 50px rgba(0,0,0,0.25);
	z-index:800;
	margin-top:-20px;
	margin-left:125%;
	padding-top:75px;
	opacity:0;
}
#nav ul {
	font-family: 'Orbitron', sans-serif;
	font-weight:500;
	font-size: 8pt;
	letter-spacing: 5px;
	margin:0;
	padding:15px;
}
#nav li {
	line-height: 45px;
	height:45px;
	list-style-type: none;
	width:100%;
	padding-left:5px;
	box-sizing:border-box;
	border-bottom:5px solid transparent;
	transition:all 0.5s;
}

#nav li a {
	color: #231F20;
	display: block;
	text-decoration: none;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	transition:all 0.5s;
}
#nav li:hover a {color:#c00; transition:all 0.5s;}

#nav .active a {color:#999;}

.menu_btn {
	opacity:0;
	position:absolute;
}
.menu_btn + label {
	position:absolute;
	display:block;
	background:#FFF;
	height:auto;
	width:auto;
	padding:0px 10px 0px 15px;
	top:0px;
	right:25px;
	font-family: 'Orbitron', sans-serif;
	font-weight:400;
	font-size: 8pt;
	letter-spacing: 5px;
	line-height: 45px;
	border-bottom:5px solid #999;
	z-index:800;
	opacity:0.85;
}

input[type="checkbox"].menu_btn:checked + label {
	border-color:#C00;
	opacity:0.95;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.15);
	transition:all 0.5s;
}
input[type="checkbox"].menu_btn:not(:checked) + label {
	border-color:#999;
	transition:all 0.5s;
}

input[type="checkbox"].menu_btn:checked ~ #nav {
	transition:all 0.5s;
	margin-left:0;
	opacity:1;
	height:100vh;
}
input[type="checkbox"].menu_btn:not(:checked) ~ #nav {
	transition:all 0.5s;
	margin-left:125%;
}


/* ---------- HOME PAGE NAV ---------- */

#hm_design {background-image:url(../images/hm_design.png);}
#hm_illustration {background-image:url(../images/hm_illustration.png);}
#hm_branding {background-image:url(../images/hm_branding.png);}

#illustration {background-image:url(../images/hm_illustration.png);}
#webdesign {background-image:url(../images/hm_webdesign.png);}
#logos {background-image:url(../images/hm_logos.png);}
#printdesign {background-image:url(../images/hm_printdesign.png);}
#musings {background-image:url(../images/hm_musings.png);}
#about {background-image:url(../images/hm_about.png);}
 
.hm_panel {
	background-color:#231F20;
	color:#FFF;
	height:100px;
	background-position:center;
	background-size:cover;
	box-shadow:0 5px 10px rgba(0,0,0,0.20);
	transition:all 0.5s;
	margin-bottom:10px;
}

.hm_panel:hover {
	background-color:#c00;
	margin-top:-5px;
	margin-bottom:15px;
	box-shadow:0 10px 15px rgba(0,0,0,0.20);
	transition:all 0.5s;
}

.row:nth-child(odd) .hm_panel:nth-child(even),
.row:nth-child(even) .hm_panel:nth-child(odd) {background-color:#555;}

.row:nth-child(odd) .hm_panel:nth-child(even):hover,
.row:nth-child(even) .hm_panel:nth-child(odd):hover {background-color:#c00;}

.hm_panel a {
	color:#FFF;
	display:block;
	box-sizing:border-box;
	height:100%;
	width:100%;
	font-family: 'Orbitron', sans-serif;
	font-weight:900;
	font-size:12pt;
	line-height:2em;
	text-align:center;
	padding:25px 0 0;
	letter-spacing:3px;
	overflow:hidden;
}
.hm_panel a:hover {text-decoration:none;}


/* ---------- GALLERY GRIDS ---------- */

.grid {width:100%;}

.grid-sizer,
.grid-item {width: 50%;}
.grid-item {float:left; box-sizing:border-box; padding:5px;}
.grid-item--width2 { width: 100%; }

.onegrid .grid-sizer,
.onegrid .grid-item {width: 100%;}
.onegrid .grid-item--width2 { width: 100%; }

.grid-item a {display:block; width:100%; height:100%;}



/* ---------- MEDIA QUERIES ---------- */

/* Larger than mobile */
@media (min-width: 400px) {
	.hm_panel a {font-size:12pt; letter-spacing:10px; padding-left:10px;}
}


/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.hm_panel {height:250px;}
	.hm_panel a {font-size:12pt; letter-spacing:3px; padding:50px 0 0 3px;}
	
	.hm_panel {
		box-shadow:0 10px 20px rgba(0,0,0,0.20);
		margin-bottom:20px;
		background-position:center top;
	}

	.hm_panel:hover {
		margin-top:-10px;
		margin-bottom:30px;
		box-shadow:0 30px 30px rgba(0,0,0,0.15);
	}
	
	.grid-sizer,
	.grid-item {width: 33.333%;}
	.grid-item--width2 { width: 66.666%; }
}


/* Larger than tablet */
@media (min-width: 750px) {
	#logo_lg {
		margin:0 auto 15px;
	}
	.hm_panel {
		margin-bottom:25px;
	}
}


/* Larger than desktop */
@media (min-width: 1000px) {
	.hm_panel {
		margin-bottom:30px;
	}
	.hm_panel a {font-size:14pt; letter-spacing:10px; padding-left:10px;}
	
	.grid-sizer,
	.grid-item {width: 25%;}
	.grid-item--width2 { width: 50%; }
	
	.trigrid .grid-sizer,
	.trigrid .grid-item {width: 33.333%;}
	.trigrid .grid-item--width2 { width: 66.666%; }
	
	#container,
	.container {margin-top:30px; transition:all 0.5s;}
	
	.container.content {margin-top:0;}
	
	.header {height:60px; overflow:hidden; position:relative;}
	
	#logo {
		position:absolute;
		z-index:1000;
	}
	
	#navholder {
		position:relative;
		height: 50px;
		float: left;
		box-sizing:border-box;
		width:100%;
		padding-left:315px;
	}
	#nav {
		height: 50px;
		background:transparent;
		box-shadow:none;
		margin-top:0;
		margin-left:0;
		padding-top:0;
		opacity:1;
	}
	#nav ul {
		font-size: 7pt;
		font-weight:400;
		letter-spacing:4px;
		padding:0;
		display:flex;
		justify-content: space-around;
		width:100%;
	}
	#nav li {
		padding-left:4px;
		float:left;
		height:50px;
		width:auto;
	}
	#nav li:hover {
		border-bottom:5px solid #c00;
		transition:all 0.5s;
	}
	#nav .active {
		border-bottom:5px solid #999;
	}
	
	.menu_btn,
	.menu_btn + label {
		display:none;
	}
	input[type="checkbox"].menu_btn:checked ~ #nav {
		height:50px;
	}
	input[type="checkbox"].menu_btn:not(:checked) ~ #nav {
		margin-left:0;
	}

}


/* Larger than Desktop HD */
@media (min-width: 1200px) {
	#nav ul {
		font-size: 8pt;
		letter-spacing:5px;
	}
	#nav li {
		padding-left:5px;
	}
}


.fr-close.fr-close-outside + canvas {display:none !important;}