/* Resets */

/* Typography and Header Styling */

body,
.pure-g,
.pure-menu-list,
p {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.header-font {
	font-family: 'discoregular', Arial, Helvetica, sans !important;
	letter-spacing: -1px;
}

.site-title {
	text-align: center;
	font-size: 4rem;
	letter-spacing: -2px;
}

/* Helper Classes */

.no-margin {
	margin: 0;
}

.margin-auto {
	margin: auto;
}

.text-center {
	text-align: center;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.pad-left {
	margin-left: 1rem;
}

.pad-right {
	margin-right: 1rem;
}

.pure-g .pure-gutter-1 > *:not(.no-gutter) {
	margin-left: 1rem;
	margin-right: 1rem;
}

.pad-v-1 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

.pad-h-1 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

.fixed-top-right {
	position: fixed;
	top: 0;
	right: 0;
}

.no-decor {
	list-style: none;
	padding: 0;
}

.no-decor li {
	padding: .25rem 0;
}

.clickable:hover {
	cursor: pointer;
}

/* Specific Elements */

body {
	background: #FBFBFB;
}

.body-container {
	background: #FFF;
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.pure-g {
	margin: auto;
}

.page-content {
	padding-top: 1rem;
	padding-bottom: 7rem;
	max-width: 1500px;
	margin: auto;
}

.page-content > h1:first-child {
	margin-bottom: 2rem;
}

.sidebar-right {
	text-align: center;
}

.pure-menu-item {
	font-size: 1.5rem;
}

.pure-menu-children {
	border: 1px solid #DDD;
}

.contact-toggle {
	padding: 1rem 1.25rem;
	margin: .2rem;
	border: 3px solid;
	color: #AAA;
	border-color: #AAA;
	transition: .3s ease-out;
}

.contact-toggle:hover {
	border-color: #C21A17;
	color: #C21A17;
}

.contact-toggle.active {
	border-color: #C21A17;
	background-color: #C21A17;
	color: white;
}

a.hidden-link {
	color: inherit;
	text-decoration: none;
}

a.hidden-link:visited
a.hidden-link:hover,
a.hidden-link:focus {
	color: inherit;
}

a.active:link,
a.active:visited,
a.active:hover,
a.active:active,
a.active:focus {
	background-color: #C21A17 !important;
	color: #FFF !important;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
	color: black;
}

.blog-item-link a {
	text-decoration: none;
}

.animate-child i.fa {
	margin-left: .3rem;
	font-size: .75em;
}

.animate-child:hover i.fa {
	-webkit-animation: wrench 1.2s ease infinite;
  animation: wrench 1.2s ease infinite;
}

.post-date {
	color: #C21A17;
	margin-bottom: .5rem !important;
}

p:first-child {
	/*margin-top: 0;*/
}

/* Bio Page Specific */

.bio-container {
	overflow: hidden;
}

.bio-toggle {
	padding: .5rem 0;
	-webkit-transition: color .7s, background-color .7s, box-shadow .3s ease-out;
  -moz-transition: color .7s, background-color .7s, box-shadow .3s ease-out;
  transition: color .7s, background-color .7s, box-shadow .3s ease-out;
}

.bio-toggle:not(.active):hover {
	cursor: pointer;
	box-shadow: 5px 0px 10px 0px #AAA;
}

.bio-toggle.music:not(.active):hover {
	box-shadow: -5px 0px 10px 0px #AAA;
}

.bio-toggle.active {
	cursor: default;
	color: white;
}

.bio-toggle.music.active {
	background-color: #385DC2;
}

.bio-toggle.tech.active {
	background-color: green;
}

.bio-img {
	width: 40%;
}

.bio.animated {
	-webkit-animation-duration: .4s;
	-moz-animation-duration: .4s;
	animation-duration: .4s;
}

/* Portfolio Page Specific */

.portfolio-grid {
	margin-top: 3rem;
}

.portfolio-grid .portfolio-figure {
	padding: 1rem;
	margin: 1rem 12.5% !important;
	width: 75% !important;
	transition: all .3s ease-in-out;
}

.portfolio-figure:hover,
.portfolio-figure:focus {
	transform: scale(1.05);
	-webkit-box-shadow: 0px 15px 100px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 15px 100px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 15px 100px 0px rgba(0,0,0,0.75);
}

.portfolio-figure img {
	width: 100%;
	margin: auto;
}

.portfolio-figure a:link,
.portfolio-figure a:visited,
.portfolio-figure a:hover,
.portfolio-figure a:active,
.portfolio-figure a:focus {
	color: black;
	text-decoration: none;
}

.portfolio .header-font,
.portfolio-item-page .portfolio-desc {
	text-align: center;
}

.portfolio .header-font {
	font-size: 3rem;
	margin-bottom: .5rem;
}

.portfolio-item-page [class *="portfolio-img"] {
	width: 35%;
	display: inline-block;
}

.portfolio p:first-child {
	margin-bottom: 1rem;
}

/* Contact Page */


.page-content form.contact {
	max-width: 1500px;
	width: 75%;
	margin: auto;
}

form.contact table {
	width: 100%;
	margin: auto;
}

form.contact td {
	padding-bottom: 1rem;
}

form.contact .form-label {
	text-align: center;
	width: 30%;
	font-size: 2rem;
}

form.contact .form-field input,
form.contact .form-field textarea {
	padding-left: 1rem;
	width: 100%;
	font-size: 1.5rem;
}

form.contact .submit {
	width: 100%;
}

form.contact .submit input {
	font-size: 1.5rem;
	border: none;
	width: 8rem;
	height: 4rem;
	color: white;
	background: green;
	margin: auto;
}

/* Page footer helpers */

div[class *="mobile-footer"] {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding-top: 1rem;
}

.nav-back,
.nav-forward {
	margin-top: 3rem;
	position: relative;
	color: white;
	font-weight: bold;
	/*margin: auto;*/
	/*display: inline-block;*/
	/*width: 48%;*/
}

.nav-back a span,
.nav-forward a span {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index: 1;
	/*color: rgba(255,255,255,.85);*/
}

.nav-back p,
.nav-forward p {
	font-size: 1rem;
	text-align: center;
	margin: 1rem .2rem !important;
}

.nav-back i,
.nav-forward i {
	position: absolute;
	left: 50%;
	top: -.75rem;
	font-size: 1.5rem;
   color: black;
   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
}

.nav-back {
	background-color: purple;
	/*float: left;*/
}

.nav-forward {
	background-color: #E89E15;
	/*float: right;*/
}

@media screen and (max-width: 700px) {
	.pure-menu-item {
		font-size: 1rem;
	}

	.nav-back p,
	.nav-forward p {
		font-size: .7rem;
	}
}

@media screen and (max-width: 568px) {

	.bio-toggle {
		border-top: 1px solid;
		border-bottom: 1px solid;
	}

	.bio-toggle.music {
		border-color: #385DC2;
		margin-top: 0;
		margin-bottom: 0;
	}

	.bio-toggle.tech {
		border-color: green;
		margin-top: .5rem;
	}

	.pure-menu-list li.pure-menu-item {
		margin: auto;
		float: left;
		width: 50%;
		margin-bottom: .5rem;
		display: inline-block;
	}

	.pure-menu-horizontal .pure-menu-children {
		width: 100% !important;
	}

	.pure-menu-children li.pure-menu-item {
		margin-bottom: .5rem;
		width: 100%;
	}

	.page-content {
		margin-top: 1rem;
		padding-top: 0;
	}

	.page-content .header-font {
		margin-top: 0;
	}

	form.contact .form-label {
		width: 15%;
		font-size: 1.3rem;
	}
}