/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Home
:: Portfolio
:: Resume
:: About
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */
body { background: #edece6; }
.container { background: #ffffff; max-width: 1280px; margin: 0 auto; padding: 0px 0px 0px 0px; }

@media only screen and (min-width: 1441px) { .container { border-left: 1px solid #ddddd8; border-right: 1px solid #ddddd8; } }

.clear { clear: both; }

a { color: #068fc3; text-decoration: none; line-height: inherit; }
a:hover { color: #068fc3; text-decoration: underline; }
a:focus { color: #068fc3; }

.site-footer a { color: #f3b53a; text-decoration: none; line-height: inherit; }
.site-footer a:hover { color: #f3b53a; text-decoration: underline; }
.site-footer a:focus { color: #f3b53a; }

p { font-family: inherit; font-weight: normal; font-size: 14px; line-height: 1.6; margin-bottom: 16px; }

h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: normal; color: #1f2224; text-rendering: optimizeLegibility; line-height: 1.1; margin-bottom: 0px; margin-top: 0px; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #1f2224; line-height: 0; }

h1 { font-size: 30px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 0px 0px 30px 0px; }

h2 { font-size: 18px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 0px 0px 10px 0px; color: #999999; text-transform: uppercase; font-weight: 600; }

h3 { font-size: 20px; text-transform: uppercase; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 0px 0px 10px 0px; font-weight: 600; }

h4 { font-size: 16px; line-height: normal; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 0px 0px 10px 0px; }

h5 { font-size: 17px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; }

h6 { font-size: 24px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 10px 0px 10px 0px; font-weight: 600; }

.h2-icon { font-size: 30px; vertical-align: middle; margin: 0px 10px 0px 0px; min-width: 40px; }

ul, ol { margin: 5px 0px 10px 0px; } 
dl, li { font-size: 14px; line-height: 1.4; margin: 0px 0px 0px 0px; list-style-position: outside; }

#header { padding: 30px 0px 30px 0px; }
#header-wrapper { background: #1f2224; }
.hr-header > hr { border: none; clear: both; margin: 0px 0px 60px 0px; height: 0; }

#title {
	width: 43%;
	}
#navigation {
	width: 57%;
	}

.logo { float: left;}

#site-title { 
	font-family: "AllerLightRegular", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	color: #ffffff;;
	font-size: 40px;
	text-rendering: optimizeLegibility;
	margin: 14px 0px 0px 125px;
	}
#site-title a { color: #ffffff; text-decoration: none; }
#site-title a:hover { color: #ffffff; text-decoration: none; }
#site-subtitle {
	color: #ffffff;
	font-family: "AllerLightRegular", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	margin: 0px 0px 0px 128px;
	}
#site-subtitle a { color: #ffffff; text-decoration: none; }
#site-subtitle a:hover { color: #ffffff; text-decoration: none; }

#menu { float: right; }

.nav-icon { font-size: 16px; vertical-align: middle; margin: -2px 12px 0px 0px; }

.nav-bar { font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; text-transform: none; }
.nav-bar { height: 40px; background: transparent; margin-left: 0; margin-top: 25px; padding: 0; }
.nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 0px; line-height: 38px; -webkit-box-shadow: none;; -moz-box-shadow: none;; box-shadow: none;}
.nav-bar > li:first-child { -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }
.nav-bar > li:last-child { border-right: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.nav-bar > li.active { background: transparent; }
.nav-bar > li.active > a { color: #1f2224; cursor: default; }
.nav-bar > li.active:hover { cursor: default; }
.nav-bar > li:hover { border-bottom: 0px solid #3e5765; background: transparent; }
.nav-bar > li > a { color: #ffffff; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; }
.nav-bar > li > a:hover { color: #f3b53a; }
.nav-bar > li ul { margin-bottom: 0; }
.nav-bar > li .flyout { display: none; }
.nav-bar > li.has-flyout > a:first-child { padding-right: 40px; position: relative; }
.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #e6e6e6 transparent transparent transparent; position: absolute; right: 20px; top: 17px; }
.nav-bar > li.has-flyout > a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 20px; z-index: 2; display: block; }
.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 55px; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #666; }
.nav-bar > li > a:first-child { position: relative; padding: 0; margin: 0px 0px 0px 40px; display: block; text-decoration: none; font-size: 16px; font-weight: normal; }
.nav-bar > li > input { margin: 0 10px; }
.nav-bar.vertical { height: auto; margin-top: 0; }
.nav-bar.vertical > li { float: none; border-bottom: none; border-right: solid 1px #333333; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.nav-bar.vertical > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: transparent transparent transparent #e6e6e6; }
.nav-bar.vertical > li .flyout { left: 100%; top: -1px; }
.nav-bar.vertical > li .flyout.right { left: auto; right: 100%; }
.nav-bar.vertical > li.active { border-right: solid 1px #2284a1; }
.nav-bar.vertical > li:last-child { border-bottom: solid 1px #333333; }

/* Normal Buttons ---------------------- */
.button { width: auto; background: #f3b53a; border: 1px solid #f3b53a; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: bold; line-height: 1; margin: 10; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; -webkit-transition: background-color 0.15s ease-in-out; -moz-transition: background-color 0.15s ease-in-out; -o-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; /* Hovers */ /* Sizes */ /* Colors */ /* Radii */ /* Layout */ /* Disabled ---------- */ }
.button:hover, .button:focus { color: white; background-color: #ffbe3e; border: 1px solid #ffbe3e; }
.button:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.button.large { font-size: 17px; padding: 15px 30px 16px; }
.button.medium { font-size: 14px; }
.button.small { font-size: 11px; padding: 7px 14px 8px; }
.button.tiny { font-size: 10px; padding: 5px 10px 6px; }
.button.expand { width: 100%; text-align: center; }
.button.primary { background-color: #2ba6cb; border: 1px solid #1e728c; }
.button.primary:hover, .button.primary:focus { background-color: #2284a1; }
.button.success { background-color: #5da423; border: 1px solid #396516; }
.button.success:hover, .button.success:focus { background-color: #457a1a; }
.button.alert { background-color: #c60f13; border: 1px solid #7f0a0c; }
.button.alert:hover, .button.alert:focus { background-color: #970b0e; }
.button.secondary { background-color: #e9e9e9; color: #1d1d1d; border: 1px solid #c3c3c3; }
.button.secondary:hover, .button.secondary:focus { background-color: #d0d0d0; }
.button.radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
.button.round { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; }
.button.full-width { width: 100%; text-align: center; padding-left: 0px !important; padding-right: 0px !important; }
.button.left-align { text-align: left; text-indent: 12px; }
.button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.button.disabled :hover, .button[disabled] :hover { background: #2ba6cb; }
.button.disabled.success, .button[disabled].success { background-color: #5da423; }
.button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #5da423; outline: none; }
.button.disabled.alert, .button[disabled].alert { background-color: #c60f13; }
.button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #c60f13; outline: none; }
.button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; }
.button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #e9e9e9; outline: none; }

.button-right-icon { font-size: 14px; vertical-align: top; margin: 0px 0px 0px 10px; }
.button-left-icon { font-size: 14px; vertical-align: top; margin: 0px 10px 0px 0px; }
.button.offcanvas { width: 100%; text-align: left; font-size: 16px; line-height: 1.2;}
.button-left-offcanvas-icon { font-size: 24px; vertical-align: middle; margin: 0px 10px 0px 0px; }

/* Current Page --------------------------- */
#home .nav-bar li.nav-home a { border-bottom: 2px solid #f3b53a; }
#portfolio .nav-bar li.nav-portfolio a { border-bottom: 2px solid #f3b53a; }
#resume .nav-bar li.nav-resume a { border-bottom: 2px solid #f3b53a; }
#about .nav-bar li.nav-about a { border-bottom: 2px solid #f3b53a; }

/* Current Page Mobile -------------------- */
#home .mobile-nav-bar li.nav-home a { color: #ffffff; }
#home .mobile-nav-bar li.nav-home:after {
	z-index: 50;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: -0.03125em;
	margin-top: -0.625em;
	border-top: 0.625em transparent solid;
	border-bottom: 0.625em transparent solid;
	border-right: 0.625em #ffffff solid;
	}
#portfolio .mobile-nav-bar li.nav-portfolio a { color: #ffffff; }
#portfolio .mobile-nav-bar li.nav-portfolio:after {
	z-index: 50;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: -0.03125em;
	margin-top: -0.625em;
	border-top: 0.625em transparent solid;
	border-bottom: 0.625em transparent solid;
	border-right: 0.625em #ffffff solid;
	}
#resume .mobile-nav-bar li.nav-resume a { color: #ffffff; }
#resume .mobile-nav-bar li.nav-resume:after {
	z-index: 50;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: -0.03125em;
	margin-top: -0.625em;
	border-top: 0.625em transparent solid;
	border-bottom: 0.625em transparent solid;
	border-right: 0.625em #ffffff solid;
	}
#about .mobile-nav-bar li.nav-about a { color: #ffffff; }
#about .mobile-nav-bar li.nav-about:after {
	z-index: 50;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: -0.03125em;
	margin-top: -0.625em;
	border-top: 0.625em transparent solid;
	border-bottom: 0.625em transparent solid;
	border-right: 0.625em #ffffff solid;
	}

/* Footer --------------------------- */
#site-footer #navlinks { display: none; }
.footer-left {
	text-align: left;
	}
.footer-right {
	text-align: right;
	}
.footer-right p {
	float: right;
	}
.footer-right > img {
	float: right;
	margin: 4px 0px 0px 10px;
	}

#site-footer { background: #1f2224; padding-top: 20px; margin-top: 20px; }
.site-footer p {
	color: #ffffff;
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 12px;
	}

.test {}

.top-button { text-align: right; }


/* -----------------------------------------
   Home
----------------------------------------- */
.fixx {}

#hero {
	background: url(/images/hero.svg);
	padding: 30px;
	min-height: 160px;
	}
#hero .welcome {
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 60px;
	color: #ffffff;
}
#hero .message {
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #1f2224;
	float: left;
	margin: 30px 0px 0px 0px;
	line-height: 26px;
}

.welcome {
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: #1f2224;
	line-height: 26px;
	}
.coming-soon-title {
	font-size: 20px;
	line-height: 30px;
	color: #1f2224;
	font-weight: bold;
	}
.coming-soon {
	font-size: 14px;
	line-height: 30px;
	color: #222222;
	}

#what-i-do {
	padding: 0px 0px 10px 0px;
	text-align: center;
	}
#skill1, #skill2, #skill3 { text-align: center; }
#skill1 > img, #skill2  > img, #skill3  > img { margin: 50px 0px 0px 0px; }
#skill1 > h4, #skill2  > h4, #skill3  > h4 { margin: 20px 0px 24px 0px; }
#skill1 p, #skill2 p, #skill3 p { text-align: left; font-size: 14px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

.hr-highlights > hr { border: solid #1f2224; border-width: 1px 0 0; clear: both; margin: 60px 0px 60px 0px; height: 0; }
#highlights {
	padding: 0px 0px 60px 0px;
	text-align: center;
	}
#highlight1 img, #highlight2 img, #highlight3 img, #highlight4 img  {
	border: 1px solid #1f2224;
	margin: 0px 0px 10px 0px;
	}
#highlight1 p, #highlight2 p, #highlight3 p, #highlight4 p { text-align: left; font-size: 14px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 0px 0px 30px 0px; }

.imgHover {
    display: inline;
    position: relative;
    }
.imgHover .hover {
    position: absolute;
    left:0;
    z-index: 2;
    color: #ffffff;
    background: rgba(31, 34, 36, 0.9);
    width: 100%;
    font-family: "OpenSansLight", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 30px;
    padding: 10px;
    }
.imgHover:hover .hover { background: rgba(31, 34, 36, 0.7); }

.subheader { font-size: 30px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal; color: #1f2224; line-height: 1.1; margin-bottom: 0px; margin-top: 0px; }

@media only screen and (max-width: 1279px) and (min-width: 768px) {
.imgHover .hover {
    font-size: 20px;
    }
.imgHover:hover .hover { background: rgba(31, 34, 36, 0.9); }
}

@media only screen and (max-width: 767px) {
.imgHover .hover {
    font-size: 16px;
    }
.imgHover:hover .hover { background: rgba(31, 34, 36, 0.9); }
}


/* -----------------------------------------
   Portfolio
----------------------------------------- */

.portfolio-item {
	width: 100%;
	margin: 0px 0px 40px 0px;
	padding: 0px 0px 40px 0px;
	border-bottom: 1px solid #edece6;
	}
.portfolio-item-title { font-size: 24px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; margin: 0px 0px 20px 0px; display: inline-block; font-weight: 700; }
.portfolio-item-heading { font-size: 14px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: bold; margin: 20px 0px 10px 0px; display: inline-block; }
.portfolio-item ul, .portfolio-case-study ul { margin: 0px 0px 0px 0px; }
.portfolio-item li, .portfolio-case-study li { font-size: 14px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.4; margin: 0px 0px 0px 0px; list-style: none; }
.portfolio-item p, .portfolio-case-study p { font-size: 14px; font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.4; margin: 0px 0px 0px 0px; }
.portfolio-case-study .spacer30 { width: 100%; height: 30px; }

@media only screen and (max-width: 767px) {
.promo-hero-img { margin-top: 20px; }
}


/* -----------------------------------------
   Resume
----------------------------------------- */

#resume h3 { margin: 25px 0px 0px 0px; }

.location { font-size: 12px; color: #999999; }

.resume-spacer { width: 100%; height: 30px; }

.company { font-weight: bold; width: 100%; display: inline-block; margin: 30px 0px 0px 0px; }

.date { margin: 10px 0px 0px 0px; width: 100%; display: inline-block; color: #999999; }

@media only screen and (max-width: 767px) {
.company { float: left; width: auto; margin: 5px 0px 0px 0px; }
.date { float: left; margin: 5px 0px 0px 0px; }
}



/* -----------------------------------------
   About
----------------------------------------- */

#contact {
	background: #f6f6f6;
	padding: 30px 30px 70px 30px;
	}
.profilepic {
	margin: 0px 0px 0px 0px;
	float: right;
	}
.profilelink {
	margin: 20px 0px 0px 0px;
	float: right;
	}
.profile-icon { font-size: 25px; vertical-align: top; margin: 0px 0px 0px 10px; color: #1f2224; }
.profile-icon-first { font-size: 25px; vertical-align: top; margin: 0px; color: #1f2224; }
.profilelink a:hover { text-decoration: none; color: #f3b53a; }
.profile-icon:hover { color: #f3b53a; }
.map { border: 10px solid #f6f6f6; margin: 0px 0px 28px 0px; padding: 0; }

.error { visibility: hidden; }

form { margin: 0 0; }

#type_the_word { width: 140px; }

label {
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
	}
	
.quform-input {position: relative;}

.contact-form-name .quform-errors-wrap {
  position: absolute;
  left: 50px;
  top: -38px;
  }
  
.contact-form-email .quform-errors-wrap {
  position: absolute;
  left: 50px;
  top: -38px;
  }
  
.contact-form-message .quform-errors-wrap {
  position: absolute;
  left: 70px;
  top: -30px;
  }
 
.contact-form-captcha .quform-errors-wrap {
  position: absolute;
  left: 150px;
  top: -30px;
  }

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

.profilelinks {
	clear: both;
	float: right;
	margin: 20px 0px 0px 0px;
	width: 140px;
	}
.profilelink {
	margin: 0px 0px 0px 10px;
	float: right;
	}
.profile-icon { font-size: 25px; vertical-align: top; margin: 0px 0px 0px 0px; color: #1f2224; }
#contact {
	background: transparent;
	padding: 20px 0px 0px 0px;
	border-top: 1px solid #eeeeee;
	}
.right { float: right; }

}

/* -----------------------------------------
   Medium Screens
----------------------------------------- */

@media only screen and (max-width: 1279px) and (min-width: 768px) {
	
#site-title { 
	font-size: 32px;
	margin: 22px 0px 0px 105px;
	}
#site-subtitle {
	font-size: 16px;
	margin: 0px 0px 0px 108px;
	}
	
.nav-bar > li > a:hover { color: #ffffff; }
.nav-bar > li > a:first-child { font-size: 14px; font-weight: normal; margin: 0px 0px 0px 30px; }
.nav-icon { font-size: 14px; margin: -2px 8px 0px 0px; }
	
}


/* -----------------------------------------
   Small Screens
----------------------------------------- */

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

#header { padding: 20px 0px 10px 0px; }

#site-title { 
	font-family: "AllerLightRegular", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	color: #ffffff;
	font-size: 40px;
	text-rendering: optimizeLegibility;
	margin: 14px 0px 0px 105px;
	}
#site-title a { color: #ffffff; }
#site-subtitle {
	font-family: "AllerLightRegular", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	color: #ffffff;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	margin: 0px 0px 0px 108px;
	}

.hr-header > hr { border: none; clear: both; margin: 0px 0px 20px 0px; height: 0; }

#menu { display: none; }

.nav-icon { font-size: 20px; vertical-align: middle; margin: 0px 12px 0px 0px; min-width: 30px; display: block; float: left; text-align: center; }

.nav-bar { margin-top: 10px; }
.nav-bar > li { float: left; display: block; border-right: none; width: 100%; background: #26292c; margin: 4px 0px 4px 0px; }
.nav-bar > li > a:first-child { padding: 4px 0px 4px 0px; margin: 0; font-size: 16px; border: 1px solid #26292c; }
.nav-bar > li:hover { background: #26292c; }
.nav-bar > li > a:hover { color: #ffffff; }

.top-button { text-align: left; }
.button { margin: 0px 0px 20px 0px; }
.quform-submit .button { margin: 10px 0px 20px 0px; }

h2 { border-top: 1px solid #eeeeee; padding: 30px 0px 10px 0px; }
h3 { margin: 6px 0px 10px 0px; }

#site-footer #navlinks { display: block; margin: 10px 0px 0px 0px; }
#site-footer #navlinks a { color: #f3b53a; margin: 0px 10px; }
.footer-left {
	text-align: left;
	}
.footer-right {
	text-align: left;
	}
.footer-right p {
	float: left;
	}
.footer-right > img {
	float: left;
	margin: 4px 10px 0px 0px;
	}

#site-footer { padding-top: 1px; margin-top: 0px; }
.site-footer { margin-top: 20px; }

}
  
 .test {}