@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700);

body { margin: 0; padding: 0; font-family: "Source Sans Pro", Arial, Sans-serif; background: #ffffff; }
@media screen and (max-width: 640px) { body { font-size: 14px; } }
@media screen and (min-width: 641px) { body { font-size: 15px; } }

h1, h2, h3, h4, h5, h6 { font-family: "Quicksand", "Arial Bold", Sans-serif; 
    margin-top: 30px;}

p { margin: 1em 0 0; padding: 0 0 1em; line-height: 1.5em; }

a { transition: 0.2s all; text-decoration: none; color: #8a8a8a; }
a:visited { color: #3b049; }
a:hover { opacity: .8; text-decoration: underline; }

.list-unstyled, .flex-list, .post-list, .engagements .engagements-list, .skills-list, .portfolio-post-list li.post-list-item-full .post-link, .site-nav-links, .timeline, .timeline-content .timeline-event { list-style: none; margin: 0; padding: 0; }

img { max-width: 100%; }

.hidden { display: none !important; }

/** Code formatting **/
pre, code { font-size: 16px; border-radius: 3px; background-color: #333333; color: #FFFFFF; }

code { padding: 1px 5px 3px; font-family: "Cutive Mono", monospace; }

pre { padding: 8px 12px; overflow-x: auto; }
pre > code { padding-right: 0; padding-left: 0; }

p > code { vertical-align: bottom; }

/** Clearfix **/
.clearfix:after { content: ""; display: table; clear: both; }

/** Display Classes **/
.show { display: block; }

.hide { display: none; }

.back-button, .back-link-container a { background: #FACAD5; color: #EF4B6D; display: inline-block; font-family: "Quicksand", "Arial Bold", Sans-serif; font-size: 16px; padding: 5px 10px 5px 8px; }
.back-button:before, .back-link-container a:before { content: "â—…"; font-size: .7em; padding-right: 5px; }
.back-button:visited, .back-link-container a:visited { color: #EF4B6D; }
.back-button:hover, .back-link-container a:hover { background: #EF4B6D; color: #FFFFFF; text-decoration: none; }
.back-button:active, .back-link-container a:active { background: #7A0026; color: #ebebeb; }

.forward-button, .view-more-link-container a { background: #000000; color: #FFFFFF; display: inline-block; font-family: "Quicksand", "Arial Bold", Sans-serif; font-size: 16px; padding: 20px 20px 20px 30px; vertical-align: middle; }

.forward-button:visited, .view-more-link-container a:visited { color: #FFFFFF; }
.forward-button:hover, .view-more-link-container a:hover { background: #9bcbfd; color: #000000; text-decoration: none; }
.forward-button:active, .view-more-link-container a:active { background: #7A0026; color: #ebebeb; }

input[type="submit"], .button { background: #afafaf;  color: #FFFFFF;}
input[type="submit"]:visited, .button:visited { color: #FFFFFF; }
input[type="submit"]:hover, .button:hover { background: #f3f3f3;
    color: #000000;
    text-decoration: none;
    border: none;
    height: 40px; }
input[type="submit"]:active, .button:active { background: #e3e3e3; }
input[type="submit"]:focus, .button:focus { outline: none; }
input[type="submit"][disabled], .button[disabled] { background-color: #666666; margin-bottom: 0; margin-left: 0; margin-top: 5px; box-shadow: none; color: #ebebeb; }

.button-block, input[type="submit"], .portfolio-visit-link { display: block; width: 100%; }

.scroll-button { -webkit-appearance: none; background: rgba(239, 75, 109, 0.75); border-radius: 0; border: 0; bottom: -120px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; font-family: "Quicksand", "Arial Bold", Sans-serif; font-size: 3em; height: 60px; line-height: 16px; padding: 24px 5px 0; position: fixed; right: 10px; text-align: center; transition: .2s all; width: 60px; }
.scroll-button:visited { color: #FFFFFF; }
.scroll-button:focus { outline: none; }
.scroll-button.show-scroll-button { bottom: 10px; -webkit-animation: 0.2s slideUp 1; -moz-animation: 0.2s slideUp 1; -o-animation: 0.2s slideUp 1; animation: 0.2s slideUp 1; }
.scroll-button.show-scroll-button:hover { background: #FACAD5; color: #000000; text-decoration: none; -webkit-animation: 2s slideHover infinite; -moz-animation: 2s slideHover infinite; -o-animation: 2s slideHover infinite; animation: 2s slideHover infinite; }
.scroll-button:active { background: #7A0026; color: #ebebeb; margin-bottom: 0; margin-left: 0; margin-top: 5px; }

.page-content { max-width: 1080px; margin: 0 auto; -webkit-animation: 1s fadeIn 1; -moz-animation: 1s fadeIn 1; -o-animation: 1s fadeIn 1; animation: 1s fadeIn 1; }

.wrapper { background: #FFFFFF;  box-sizing: border-box; }
@media screen and (max-width: 640px) { .wrapper { padding: 0em; } }
@media screen and (min-width: 641px) { .wrapper { padding: 0em; } }

.shadow-h1, .hero h1, .content-wrapper h1 {
	font-family: "Quicksand", "Arial Bold", Sans-serif;
	font-size: 2.5em;
	line-height: 1.25em;
	font-weight: bold;
	/* [disabled]text-shadow: 0px 3px 0 #727272; */
}

.hero { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2em; }
@media screen and (min-width: 960px) { .hero .hero-content { width: 74%; } }
.hero .hero-image { position: relative; box-sizing: border-box; }
@media screen and (max-width: 959px) { .hero .hero-image { margin: 30px auto 0; } }
@media screen and (min-width: 960px) { .hero .hero-image { width: 22%; text-align: right;} }
.hero .hero-text-bubble { position: absolute; -webkit-animation: 1s textbubble 1; -moz-animation: 1s textbubble 1; -o-animation: 1s textbubble 1; animation: 1s textbubble 1; top: -30px; left: -10px; }
.hero p { font-weight: lighter; font-size: 1.75em; }

.content-wrapper h2 { font-size: 2em; font-weight: lighter; }
.content-wrapper h3 { color: #666666; font-size: 1.5em; }
.content-wrapper h4 { font-size: 1.25em; margin: 0; font-weight: lighter; }

.flex-list, .post-list, .engagements .engagements-list, .skills-list, .portfolio-post-list li.post-list-item-full .post-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.post-list { -webkit-justify-content: space-between; justify-content: space-between; margin-top: 40px; }
.post-list li { box-sizing: border-box; border: 1px solid #ebebeb; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.post-list li.post-list-item-full { width: 49%; }
.post-list li.post-list-item-full + li { margin-top: 0; }
@media screen and (min-width: 800px) { .post-list li:not(.post-list-item-full) { width: 48%; margin-bottom: 1.875em; }
  .post-list li:not(.post-list-item-full):nth-last-child(2):nth-child(odd), .post-list li:not(.post-list-item-full):last-child { margin-bottom: 0; } }
@media screen and (max-width: 799px) { .post-list li:not(.post-list-item-full) { width: 100%; }
  .post-list li:not(.post-list-item-full) + li { margin-top: 1.875em; } }
.post-list li:hover { border-color: #cccccc; }
.post-list li .post-link { padding: 1.875em; display: block; width: 100%; box-sizing: border-box; }
.post-list li .post-link:hover { text-decoration: none; }
.post-list li h3 { color: #4ba2ef; }
.post-list li p { padding-bottom: 0; color: #000000; }
.post-list li .post-meta { display: block; }
.post-list li .post-meta + p { margin-top: 5px; }

.content-block { padding: 3.75em 0; border-top: 1px dotted #FACAD5; }
.content-block h2 { text-align: center; margin-top: 0; padding-bottom: 20px; }
.content-block:last-child { padding-bottom: 0; }

label { color: #666666; }

.required-field:after { color: #EF4B6D; content: "*"; }

input:not([type="submit"]), textarea { -webkit-appearance: none; background: #FFFFFF; border: 1px solid #cccccc; box-shadow: none; box-sizing: border-box; color: #666666; display: block; font-family: 'Source Sans Pro', Arial, Sans-serif; font-size: 1.15em; font-weight: lighter; margin: .5em 0 1.5em; padding: 7px 10px; transition: 0.2s all; width: 100%; }
input:not([type="submit"]):hover, textarea:hover { border-color: #ebebeb; }
input:not([type="submit"]):focus, textarea:focus { background: #FFFFFF; border-color: #999999; outline: none; }
input:not([type="submit"])[disabled], textarea[disabled] { background: #ebebeb; border-color: #999999; color: #999999; }
@media screen and (max-width: 960px) { input:not([type="submit"]), textarea { font-size: 1em; } }

textarea { resize: vertical; min-height: 150px; }

/** Navigation **/
.site-nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; background-color: #000000; font-family: "Quicksand", "Arial Bold", Sans-serif; padding: 10px 15px; position: relative; z-index: 1000; }
@media screen and (max-width: 640px) { .site-nav { text-align: center; -webkit-justify-content: center; justify-content: center; } }
.site-nav a { text-decoration: none; }

.site-title { text-shadow: -2px 3px 0 #EF4B6D; color: #FACAD5; font-size: 2.75em; font-weight: bold; line-height: 1em; padding-bottom: 5px; }
@media screen and (max-width: 640px) { .site-title { width: 100%; margin-bottom: 5px; } }
.site-title:visited { color: #FACAD5; }
.site-title:hover { color: #EF4B6D; text-shadow: -2px 3px 0 #FACAD5; opacity: 1; }

.site-nav-links { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-self: center; align-self: center; font-size: 16px; }
@media screen and (max-width: 640px) { .site-nav-links { padding-bottom: 10px; } }
.site-nav-links a { color: #FACAD5; padding: 5px 15px; display: block; box-sizing: border-box; }
.site-nav-links a:visited { color: #FACAD5; }
.site-nav-links a:hover { color: #EF4B6D; opacity: 1; }
.site-nav-links li { display: block; }
.site-nav-links li.site-nav-link-active a { color: #EF4B6D; }

/** Footer **/
.site-footer { border-top: 1px solid #ebebeb; background-color: #FFFFFF; }
.site-footer.full-footer { border-top: 1px solid #b3b3b3; }
.site-footer h2 { margin-top: 0; }
.site-footer p { padding: 0; margin: 0; }

.footer-wrapper { border-bottom: 1px solid #FACAD5; }
@media screen and (min-width: 1081px) { .footer-wrapper { border-right: 1px solid #fffcfc; border-left: 1px solid #fffcfc; } }

@media screen and (max-width: 640px) { .footer-wrapper, .footer-links { padding: 1.875em; } }
@media screen and (min-width: 641px) { .footer-wrapper, .footer-links { padding: 3.75em; } }

.engagements { border-bottom: 1px dotted #FACAD5; }
@media screen and (max-width: 640px) { .engagements { padding-bottom: 1.875em; } }
@media screen and (min-width: 641px) { .engagements { padding-bottom: 3.75em; } }
.engagements h3 { margin: 0; }
.engagements .engagements-list { -webkit-justify-content: space-between; justify-content: space-between; }
.engagements .engagements-list li { margin-bottom: 1.25em; }
@media screen and (max-width: 640px) { .engagements .engagements-list li { width: 100%; } }
@media screen and (min-width: 641px) { .engagements .engagements-list li { width: 48%; }
  .engagements .engagements-list li:nth-last-child(2):nth-child(odd), .engagements .engagements-list li:last-child { margin-bottom: 0; } }
@media screen and (max-width: 640px) { .engagements + .contact { padding-top: 1.875em; } }
@media screen and (min-width: 641px) { .engagements + .contact { padding-top: 3.75em; } }

.contact h2 { margin-bottom: 0; }
.contact p { margin-bottom: 1em; font-size: 1.25em; font-weight: lighter; }
.contact p.contact-form-error { color: #666666; text-align: center; margin: 1em 0 0; }

.contact-form { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.contact-form-field { width: 100%; }
@media screen and (min-width: 641px) { .contact-form-field { width: 48%; } }
@media screen and (min-width: 641px) { .contact-form-field.contact-subject { width: 100%; } }
.contact-form-field.contact-message { width: 100%; }

.footer-links { background-color: #f3f3f3; color: #666666; font-family: "Quicksand", "Arial Bold", Sans-serif; font-size: .9em; }
@media screen and (min-width: 481px) { .footer-links { text-align: center; } }

.skills-list { -webkit-justify-content: space-between; justify-content: space-between; margin-top: 40px; }
.skills-list p { font-size: 1.15em; margin-top: .25em; }
.skills-list img { display: inline-block; }
@media screen and (max-width: 640px) { .skills-list img { max-height: 150px; } }
@media screen and (min-width: 641px) { .skills-list img { max-height: 200px; } }
@media screen and (min-width: 641px) and (max-width: 768px) { .skills-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
  .skills-list li + li { margin-top: 30px; } }
@media screen and (max-width: 640px), (min-width: 769px) { .skills-list li { text-align: center; }
  .skills-list li p { text-align: left; } }
@media screen and (min-width: 641px) and (max-width: 768px) { .skills-list li .skills-list-image { width: 35%; }
  .skills-list li .skills-list-image img { margin: 0; } }
@media screen and (max-width: 640px), (min-width: 769px) { .skills-list li .skills-list-image img { margin-top: 30px; margin-bottom: 10px; } }
@media screen and (min-width: 641px) and (max-width: 768px) { .skills-list li .skills-list-image img { margin: 0; } }
@media screen and (min-width: 641px) and (max-width: 768px) { .skills-list li .skills-list-content { width: 60%; } }
@media screen and (min-width: 769px) { .skills-list .skills-list-4 { width: 30%; } }
@media screen and (min-width: 769px) { .skills-list .skills-list-3 { width: 31%; } }

.view-more-link-container { margin-top: 30px; display: block; text-align: center;  clear: both; }

.timeline-date { position: relative; z-index: 2; }
.timeline-date + li { margin-top: 1.875em; }
.timeline-date:before { content: ""; border-bottom: 1px solid #f3f3f3; width: 100%; position: absolute; top: .95em; z-index: -1; }
.timeline-date h3 { display: inline-block; background: #FFFFFF; }
@media screen and (max-width: 640px) { .timeline-date h3 { padding: 0 10px; text-align: center; } }
@media screen and (min-width: 641px) { .timeline-date h3 { padding-right: 10px; } }

.timeline-content { margin: 0; }
@media screen and (max-width: 640px) { .timeline-content { padding-left: 0px; } }
@media screen and (min-width: 641px) { .timeline-content { padding-left: 1.875em; } }
.timeline-content .timeline-event { margin: 1.875em 0 0; }
@media screen and (min-width: 641px) { .timeline-content .timeline-event { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } }
.timeline-content .timeline-event h4 { text-align: center; }
.timeline-content .timeline-event .timeline-event-image-container { text-align: center; }
@media screen and (max-width: 640px) { .timeline-content .timeline-event .timeline-event-image-container img { max-width: 200px; max-height: 150px; } }
@media screen and (min-width: 641px) { .timeline-content .timeline-event .timeline-event-image-container img { max-width: 250px; max-height: 200px; } }
@media screen and (min-width: 641px) { .timeline-content .timeline-event > div { width: 48%; } }

.about-hero .hero-text-bubble { max-width: 200px; }
.about-hero .hero-image { padding-left: 40px; padding-top: 30px; }

.hportfolio-post-list li .portfolio-button-container { padding: 0 30px 30px; }
.hportfolio-post-list li .post-meta { margin-bottom: 10px; }
.hportfolio-post-list li:not(.post-list-item-full) .post-link { padding-bottom: 1.25em; }
.hportfolio-post-list li.post-list-item-full .post-link { -webkit-justify-content: space-between; justify-content: space-between; }
@media screen and (min-width: 960px) { .hportfolio-post-list li.post-list-item-full .hportfolio-thumbnail-container, .hportfolio-post-list li.post-list-item-full .hportfolio-content-container { width: 100%; } }
@media screen and (max-width: 959px) { .hportfolio-post-list li.post-list-item-full .hportfolio-thumbnail-container { -webkit-order: 0; order: 0; }

@media screen and (max-width: 640px) { .post-list li.post-list-item-full  { width: 100%; } }
@media screen and (min-width: 400px) { .post-list li.post-list-item-full  { width: 100%; } }

  .hportfolio-post-list li.post-list-item-full .hportfolio-content-container { -webkit-order: 1; order: 1; } }
.hportfolio-post-list .portfolio-thumbnail { max-width: 100%; margin: 0 auto; display: block; }
.hportfolio-post-list .hportfolio-thumbnail-container { overflow: hidden; max-height: 300px; }
.hportfolio-post-list .hportfolio-content-container { padding: 1.875em; box-sizing: border-box; }

.portfolio-hero .hero-text-bubble { max-width: 130px; }
.portfolio-hero .hero-drawing { max-height: 300px; }
.portfolio-hero .hero-image { padding-left: 50px; padding-top: 30px; }

.post-portfolio .post-header h1 { color: #FFFFFF; text-shadow: -3px 3px 0 #EF4B6D; }
.post-portfolio .post-header .post-meta { color: #FFFFFF; }
.post-portfolio .post-header .post-header-info { position: absolute; bottom: 0; padding: 0 0 20px 20px; }

.post-blog .post-header { border-bottom: 1px dotted #FACAD5; padding-bottom: 10px; }

.blog-hero .hero-text-bubble { max-width: 110px; }
.blog-hero .hero-drawing { max-height: 300px; }
.blog-hero .hero-image { padding-left: 60px; padding-top: 30px; }

.back-link-container { max-width: 800px; margin: 0 auto; padding-top: 30px; }

.post { max-width: 800px; margin: 0 auto; }
.post blockquote { padding: 0 0 0 1em; border-left: 5px solid #facad5; font-weight: lighter; margin: 0 0 20px 0; }
.post blockquote p { padding-bottom: 0; }
.post blockquote strong { font-weight: 400; }

.post-meta { color: #999999; }

.post-header { margin-bottom: 30px; position: relative; }
.post-header h1 { margin: 0 0 .25em; }
.post-header .back-link-container { position: absolute; top: 0; z-index: 2; }
.post-header .post-header-image-container { position: relative; overflow: hidden; }
@media screen and (max-width: 640px) { .post-header .post-header-image-container { max-height: 400px; } }
@media screen and (min-width: 641px) { .post-header .post-header-image-container { max-height: 550px; } }
.post-header .post-header-image-container img { display: block; margin: 0 auto; border: 0; width: 100%; }
.post-header .post-header-image-container:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); }

.post-content { font-size: 18px; }
.post-content p { line-height: 1.75em; padding: 0; margin: 1.5em 0; }
.post-content h2 { font-size: 1.5em; }
.post-content h3 { font-size: 1.25em; }
.post-content h4 { font-size: 1em; color: #999999; }
.post-content h4 + p { margin-top: .5em; }
.post-content ul li + li, .post-content ol li + li { margin-top: 1em; }
.post-content ul li p, .post-content ol li p { margin: 0; padding: 0; }
.post-content img + em { font-size: .8em; color: #999999; display: block; text-align: center; }

.fillintheblank { padding: 1em; border: 1px solid #ebebeb; background: #f3f3f3; font-size: 1em; margin: 0 auto 20px; }
.fillintheblank p { margin: 0; padding: 0; }
.fillintheblank *[contenteditable="true"] { border-bottom: 1px solid #FACAD5; }
.fillintheblank *[contenteditable="true"]:hover { background: #cccccc; color: #FACAD5; border-bottom-color: #FACAD5; }
.fillintheblank *[contenteditable="true"]:focus { outline: none; background: #FFFFFF; color: #f3f3f3; }

.post-portfolio { padding-top: 0; }
.post-portfolio img { border: 1px solid #ebebeb; }

.post-footer { border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; color: #999999; font-weight: bold; }

.error-404-hero .hero-text-bubble { max-width: 110px; }
.error-404-hero .hero-drawing { max-height: 300px; }
.error-404-hero .hero-image { padding-top: 20px; }
@media screen and (max-width: 959px) { .error-404-hero .hero-image { -webkit-order: -1; order: -1; } }

.cleft {}
.cright {}

.whatcent {text-align: center; font-family: "Quicksand", "Arial Bold", Sans-serif; 
    margin-top: 30px;}