:root {
	--main-color: #b32707;
	--main-color-dark: #a62407;
	--main-color-hover: #992106;
	--main-color-active: #d92f09;
	--navbar-brand-color: #ffffff;
	--navbar-link-color: #f5f5f5;
	--navbar-header-color: #d4d4d4;
	--navbar-divider-color: rgba(255,255,255,0.25);
	--heading-font-family: "Merriweather", serif;
	--heading1-color: var(--main-color);
	--heading2-color: #1c1c1c;
	--heading3-color: #535353;
	--link-color: var(--main-color);
	--link-hover-color: var(--main-color-hover);
	--sub-title-bg: #bdc3c7;
	--sub-title-color: #545454;
	--alert-success-link: #3c763d;
	--panel-border-color: var(--main-color);
	--panel-heading-bg: var(--main-color);
	--panel-heading-border: var(--main-color);
	--panel-heading-hover-bg: var(--main-color-hover);
	--panel-heading-hover-border: var(--main-color-hover);
	--section-border-color: #eeeeee;
	--btn-shadow: hsla(0, 0%, 0%, 0.17);
	--btn-bg: var(--main-color);
	--btn-border-color: var(--main-color-dark);
	--btn-hover-bg: var(--main-color-dark);
	--btn-active-bg: var(--main-color-active);
	--orb-default: #ccc;
	--orb-red: #b32707;
	--orb-green: #629914;
	--orb-blue: #147199;
	--orb-gold: #91752c;
	--blockquote-border-color: #c6cbce;
	--modal-backdrop: #95a5a6;
	--footer-bg: #ecf0f1;
	--footer-text: #545454;
	--footer-link: #747474;
	--top-btn-bg: var(--btn-bg);
	--top-btn-shadow: hsla(0, 0%, 0%, 0.2);
	--top-btn-icon: #ffffff;
	--loader-fade: 2s linear;
}

/*
 * WilliamHy.de Styles
 *
 * Style sheet built by
 * William Hyde
 *
 * Built for Bootstrap 3
 *
 * Main Color - #b32707
 */


html {
	position: relative;
	min-height: 100%;
}

/* -+-+-+-+-+-+ Navbar -+-+-+-+-+-+ */
.navbar-wh {
	background-color: var(--main-color); /* ff4a21 */
	border-color: var(--main-color-dark);
}
.navbar-wh .navbar-brand {
	padding-right: 30px;
	font-family: var(--heading-font-family);
	color: var(--navbar-brand-color);
	transition: transform 240ms;
	-webkit-transition: -webkit-transform 240ms;
	animation: brand_animate 2s ease-out;
	-webkit-animation: brand_animate 2s ease-out;
	-webkit-font-smoothing: antialiased;
}
.navbar-wh .navbar-nav > li > a {
	color: var(--navbar-link-color);
	transition: background-color 240ms;
	-webkit-transition: background-color 240ms;
}
.navbar-wh .navbar-nav > li > a:hover,
.navbar-wh .navbar-nav > li > a:focus {
	color: var(--navbar-brand-color);
	background-color: var(--main-color-hover);
}
.navbar-wh .navbar-nav > .active > a,
.navbar-wh .navbar-nav > .active > a:hover,
.navbar-wh .navbar-nav > .active > a:focus {
	color: var(--navbar-brand-color);
	background-color: var(--main-color-active);
}
.navbar-wh .navbar-toggle {
	background-color: var(--main-color-active);
	border-color: var(--main-color-hover);
}
.navbar-wh .navbar-toggle .icon-bar {
	background-color: var(--main-color-hover);
}
.navbar-wh .navbar-nav > li > .dropdown-menu {
	border-radius: 0;
}
.navbar-wh .nav .open > a,
.navbar-wh .nav .open > a:hover,
.navbar-wh .nav .open > a:focus {
	background-color: var(--main-color-hover);
}
@media (min-width: 768px) {
	.navbar-wh .navbar-brand {
		font-size: 40px;
		line-height: 50px;
		height: 80px;
	}
	.navbar-wh .navbar-brand:hover,
	.navbar-wh .navbar-brand:focus {
		transform: rotate(-3deg);
		-webkit-transform: rotate(-3deg);
	}
	.navbar-wh .navbar-nav > li {
		transform: skewX(-15deg);
		-webkit-transform: skewX(-15deg);
	}
	.navbar-wh .navbar-nav > li > .dropdown-menu {
		transform: skewX(15deg) translateX(21px);
		-webkit-transform: skewX(15deg) translateX(21px);
	}
	.navbar-wh .navbar-nav > li > a {
		padding-top: 30px;
		padding-bottom: 30px;
		font-size: 16px;
	}
	.navbar-wh .navbar-nav > li > a .glyphicon {
		transform: skewX(15deg);
		-webkit-transform: skewX(15deg);
	}
}
@media (max-width: 991px) and (min-width: 768px) {
	.navbar-wh .navbar-nav > li > a {
		padding-left: 12px;
		padding-right: 12px;
	}
}
@media (max-width: 767px) {
	.navbar-wh .dropdown-header {
		color: var(--navbar-header-color);
	}
	.navbar-wh .navbar-nav .open .dropdown-menu > li > a {
		color: var(--navbar-brand-color);
	}
	.navbar-wh .navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-wh .navbar-nav .open .dropdown-menu > li > a:focus {
		background-color: var(--main-color-hover);
	}
	.navbar-wh .dropdown-menu .divider {
		background-color: var(--navbar-divider-color)
	}
}

/* -+-+-+-+-+-+ Text Styles -+-+-+-+-+-+ */
h1, h2, .h1, .h2 {
	font-family: var(--heading-font-family);
}
h1, .h1 {
	color: var(--heading1-color);
}
h2, .h2 {
	color: var(--heading2-color);
}
h3, .h3 {
	color: var(--heading3-color);
}
a {
	color: var(--link-color);
}
a:hover,
a:focus {
	color: var(--link-color-hover);
	outline: none;
}
.sub-title {
	display: inline-block;
	background-color: var(--sub-title-bg);
	color: var(--sub-title-color);
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1;
	transform: skewX(-15deg);
	-webkit-transform: skewX(-15deg);
}
.alert.alert-success > a {
	color: var(--alert-success-link);
	text-decoration: underline;
}
@media (min-width: 768px) {
	.landing-text {
		font-size: 16px;
		line-height: 1.5625;
	}
}

/* -+-+-+-+-+-+ General Styles -+-+-+-+-+-+ */
.page-header {
	margin-top: 20px;
}
.landing-btns {
	margin-bottom: 20px;
}
.img-center {
	display: block;
	margin: 0 auto;
}
@media (max-width: 767px) {
	.page-header,
	.page-header h1 {
		margin-top: 10px;
	}
	.landing-btns .btn {
		margin-bottom: 15px;
	}
	.landing-btns {
		margin-bottom: 0;
	}
}

/* -+-+-+-+-+-+ Panel Styles -+-+-+-+-+-+ */
.panel-heading {
	font-size: 16px;
	line-height: 1.3125;
}
.panel-body > h4 {
	margin-top: 0;
}
.panel-body > p:not(:last-child) {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--section-border-color);
}
.panel-body > p:last-child {
	margin-bottom: 0;
}
a.panel, 
.panel.panel-wh {
	display: block;
	text-decoration: none;
	border-color: var(--panel-border-color);
}
a.panel > .panel-heading, 
.panel.panel-wh > .panel-heading {
	color: var(--navbar-brand-color);
	background-color: var(--panel-heading-bg);
	border-color: var(--panel-heading-border);
}
a.panel:hover,
a.panel:focus {
	border-color: var(--panel-heading-hover-border);
}
a.panel:hover > .panel-heading,
a.panel:focus > .panel-heading {
	background-color: var(--panel-heading-hover-bg);
	border-color: var(--panel-heading-hover-border);
}

/* -+-+-+-+-+-+ Resume Section -+-+-+-+-+-+ */
.resume-section {
	margin: 20px 0;
	padding-top: 20px;
	border-top: 1px solid var(--section-border-color);
}
.resume-section h2,
.resume-section h3 {
	margin-top: 0;
}
.resume-section h2 {
	margin-bottom: 20px;
}
.resume-section ul > li:not(:last-of-type) {
	margin-bottom: 5px;
}
.resume-section ul > li > ul {
	margin-top: 5px;
}

/* -+-+-+-+-+-+ Button Styles -+-+-+-+-+-+ */
.btn {
	box-shadow: 3px 3px 0 var(--btn-shadow);
	transition: box-shadow 240ms, background-color 240ms;
	-webkit-transition: box-shadow 240ms, background-color 240ms;
}
.btn:hover,
.btn:focus {
	box-shadow: 1px 1px 0 var(--btn-shadow);
}
.btn:active,
.btn.active {
	box-shadow: inset 3px 3px 5px var(--btn-shadow);
}
.btn.btn-wh {
	color: var(--navbar-brand-color);
	background-color: var(--btn-bg);
	border-color: var(--btn-border-color);
}
.btn.btn-wh:hover,
.btn.btn-wh:focus {
	background-color: var(--btn-hover-bg);
}
.btn.btn-wh:active,
.btn.btn-wh.active {
	background-color: var(--btn-active-bg);
}

/* -+-+-+-+-+-+ Orbs -+-+-+-+-+-+ */
.orb {
	display: inline-block;
	height: 12px;
	width: 12px;
	background: var(--orb-default);
	border-radius: 6px;
}
.orb.red {
	background: var(--orb-red);
}
.orb.green {
	background: var(--orb-green);
}
.orb.blue {
	background: var(--orb-blue);
}
.orb.gold {
	background: var(--orb-gold);
}
@media (max-width: 767px) {
	.orb {
		height: 11px;
		width: 11px;
		border: 1px solid var(--navbar-brand-color);
	}
}

/* -+-+-+-+-+-+ Blockquote -+-+-+-+-+-+ */
blockquote {
	border-left-color: var(--blockquote-border-color);
}
.blockquote-reverse, 
blockquote.pull-right {
	border-right-color: var(--blockquote-border-color);
}

/* -+-+-+-+-+-+ Modals -+-+-+-+-+-+ */
.modal-backdrop {
	background-color: var(--modal-backdrop);
}
.modal-wh .modal-content {
	border-radius: 0;
	box-shadow: 5px 5px 0 var(--btn-shadow);
}

/* -+-+-+-+-+-+ Footer -+-+-+-+-+-+ */
body {
	margin-bottom: 170px;
}
body > footer {
	position: absolute;
	padding-top: 20px;
	margin-top: 20px;
	width: 100%;
	height: 90px;
	bottom: 0;
	background-color: var(--footer-bg);
}
body > footer p {
	color: var(--footer-text);
}
body > footer p:last-child {
	margin-bottom: 20px;
}
body > footer a,
body > footer a:hover,
body > footer a:focus {
	color: var(--footer-link);
}

/* -+-+-+-+-+-+ Top Button -+-+-+-+-+-+ */
.top-btn {
	position: fixed;
	display: block;
	right: -100px;
	bottom: -100px;
	height: 50px;
	width: 50px;
	background-color: var(--top-btn-bg);
	border-radius: 50%;
	box-shadow: 0 3px 0 var(--top-btn-shadow);
	transition: right 480ms, bottom 480ms;
	-webkit-transition: right 480ms, bottom 480ms;
}
.top-btn:hover,
.top-btn:focus {
	text-decoration: none;
}
.top-btn .glyphicon {
	top: 0;
	display: block;
	line-height: 50px;
	width: 50px;
	color: var(--top-btn-icon);
	text-align: center;
	font-size: 23px;
}
.top-btn.affix {
	bottom: 15px;
	right: 15px;
	z-index: 120;
}

/* -+-+-+-+-+-+ Loader -+-+-+-+-+-+ */
.loader {
	text-align: center;
	animation: loader_fade var(--loader-fade);
	-moz-animation: loader_fade var(--loader-fade);
	-webkit-animation: loader_fade var(--loader-fade);
}

/* -+-+-+-+-+-+ Animations -+-+-+-+-+-+ */
	/* BRAND ANIMATE */
@keyframes brand_animate {
	0% { opacity: 0; }
	10% { opacity: 0; }
	100% {  opacity: 1; }
}
@-webkit-keyframes brand_animate {
	0% { opacity: 0; }
	10% { opacity: 0; }
	100% {  opacity: 1; }
}
	/* LOADING ANIMATION */
@keyframes loader_fade {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes loader_fade {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}