@charset "UTF-8";
/*
Description: Scott Clark - Portfolio
Author: Scott Clark
Author URI: http://www.halfulldesign.com;
*/

/* Form Reset */
button,input,label,select,textarea{margin:0;border:0;padding:0;display:inline-block;vertical-align:middle;white-space:normal;background:0 0;line-height:1;font-size:15px;font-family:Arial}input:focus{outline:0}input,textarea{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}button,input[type=button],input[type=checkbox],input[type=radio],input[type=reset],input[type=submit],select{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{width:13px;height:13px}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}button,input[type=reset],input[type=button],input[type=submit]{overflow:visible;width:auto}::-webkit-file-upload-button{padding:0;border:0;background:0 0}textarea{vertical-align:top;overflow:auto}

/* Global Styles */
* {box-sizing:border-box;}
html {margin:0; padding:0; width:100%;}
body {min-width:320px; margin:0; padding:0; font-family:'Roboto',sans-serif; color:#444; -webkit-font-smoothing:antialiased;}
::selection {background:#457da7; color:#fff; /* WebKit/Blink Browsers */ }
::-moz-selection {background:#457da7; color:#fff; /* Gecko Browsers */ }
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {margin:0 0 24px; padding:0; font-family:'Roboto',sans-serif; font-weight:400; line-height:1.5; letter-spacing:-0.25px; color:#242424;}
h1,.h1 {font-size:56px;}
h2,.h2 {font-weight:300; line-height:1.35;}
h2,.h2 {color:#292929;}
h4,.h4 {font-size:20px;}
h6.uppercase, .h6.uppercase {font-weight:500; letter-spacing:2px; color:#777; text-transform:uppercase;}
p,ul li,ol li {font-size:21px; font-weight:300;}
p {margin-bottom:24px; line-height:1.8; color:#444;}
@media (max-width:767px){
	p,ul li,ol li {font-size:18px; line-height:1.65;}
	h1,.h1 {font-size:48px; line-height:1.35}
	h4 .divide {height:0; display:block; visibility:hidden;}
}
@media (max-width:480px){
	h1,.h1 {font-size:40px; line-height:1.25}
	h2,.h2 {font-size:27px;}
	h4, .h4 {font-size:18px;}
}
strong {font-weight:500;}
img {max-width:100%; width:100%; border-radius:8px}
img.rounded {border-radius:8px;}
.pacifico {font-family:'Pacifico',script;}
.light {font-weight:300;}
.black {color:#000;}
.dark-grey {color:#292929;}
.text-grey {color:#444;}
.light-grey {color:#777;}
.relative {position:relative;}
.static {position:static;}
.no-scroll {position:fixed; height:100%;}
a {font-weight:400; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; color}
a:hover, a:focus {color:#006284; text-decoration:none;}
a.bt-hover {position:relative; display:inline-block; outline:none; color:#404d5b; vertical-align:bottom; text-decoration:none; white-space:nowrap; overflow:hidden;}
a.bt-hover:after {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#e4f3a6; z-index:-1; opacity:0.8; filter:alpha(opacity=80); -webkit-transition:-webkit-transform 0.2s; transition:transform 0.2s; -webkit-transform:translateY(95%); transform:translateY(95%);}
a.bt-hover:hover, a.bt-hover:focus {color:#444;}
a.bt-hover:hover:after, a.bt-hover:focus:after {-webkit-transform:translateY(0); transform:translateY(0);}
a.bt-hover.grey:after {background-color:#aaa; opacity:0.3;}
a.bt-hover.red:after {background-color:#9a262c; opacity:0.3;}
a.bt-hover.blue:after {background-color:#4b9acf; opacity:0.3;}
a.bt-hover.lw-green:after {background-color:#236847; opacity:0.3}
p a.bt-hover {line-height:1.6; top:-2px;}
@media (max-width:767px){
	p a.bt-hover {line-height:1.5; top:0;}
	a.bt-hover.award {font-size:14px; top:-8px;}
}

/* Text Align */
@media (max-width:767px){
	.text-left-sm {text-align:left;}
}

/* Bootstrap Override */
@media (max-width:767px){
	.container {padding-left:30px; padding-right:30px;}
}

/* Slide IN Keyframes Animation */
.slide-fade-in {position:relative; animation:fadein 2s,slidein 0.6s ease-in-out; -moz-animation:fadein 2s,slidein 0.6s ease-in-out; -webkit-animation:fadein 2s,slidein 0.6s ease-in-out; -o-animation:fadein 2s,slidein 0.6s ease-in-out;}


.blue {color:#457da7;}
.mb0 {margin-bottom:0px;}
.mb8 {margin-bottom:8px;}
.mb16 {margin-bottom:16px;}
.mb24 {margin-bottom:24px;}
.mb32 {margin-bottom:32px;}
.mb40 {margin-bottom:40px;}
.mb48 {margin-bottom:48px;}
.mb56 {margin-bottom:56px;}
.mb64 {margin-bottom:64px;}
.mb72 {margin-bottom:72px;}
.mb80 {margin-bottom:80px;}
.mb88 {margin-bottom:88px;}
.mb96 {margin-bottom:96px;}
.mt0 {margin-top:0px;}
.mt8 {margin-top:8px;}
.mt16 {margin-top:16px;}
.mt24 {margin-top:24px;}
.mt32 {margin-top:32px;}
.mt40 {margin-top:40px;}
.mt48 {margin-top:48px;}
.mt56 {margin-top:56px;}
.mt64 {margin-top:64px;}
.mt72 {margin-top:72px;}
.mt80 {margin-top:80px;}
.mt88 {margin-top:88px;}
.mt96 {margin-top:96px;}
@media (max-width:767px){
	.mb-xs-0 {margin-bottom:0;}
}
.clear {clear:both;}
.clear.divide {width:100%; margin:2rem 0; border-top:1px solid #ddd;}

/* SKIP TO CONTENT */
#skiptocontent {position:absolute; top:-5rem; left:0; padding:0.75rem 1.5rem; color:#fff; background:#444; font-weight:700; font-size:1.4rem; text-decoration:none; z-index:10;}
#skiptocontent:focus {top:0; outline:0;}
#skiptocontent:hover {background-color:#457da7;}

/* Nav Container */
.container.nav {margin:0 auto; background:none;}

/* Header */
header {padding:3.5rem 0 0}
header .name .h1 {margin:0 0 1rem; font-family:'Qwitcher Grypen',script; font-size:6.8rem; line-height:1;}
/*header .name .h1:after {content:'Designer'; position:absolute; bottom:0; left:0; font-family:'Roboto',sans-serif; font-size:1.4rem; text-transform:uppercase; font-weight:500; letter-spacing:2px}*/
header .name .h1 a {display:inline-block; position:relative; text-decoration:none; color:#292929; font-weight:700;}
header .name .h1 a:hover, header .name h1 a:focus {color:#457da7;}
@media only screen and (max-width:767px){
	header {padding:2.25rem 0 0}
	header .name .h1 {margin:0.5rem 0; font-size:5.5rem;}
}
/* --- Dark Background --- */
body.dark header {transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s;}
body.dark header .name {border-color:#fff;}
body.dark header .name h1 a {color:#fff;}
body.dark header h1, body.dark header h2 {color:#fff;}
body.dark header:hover {background-color:#fff;}
body.dark header:hover h1, body.dark header:hover h2 {color:#777;}
body.dark header:hover .name {border-color:#777;}
body.dark header:hover .name h1 a {color:#444;}
body.dark header:hover .name:hover {border-color:#084365;}
body.dark header:hover .name:hover a {color:#084365; border-color:#084365;}


/* Top Nav */
@media (min-width:768px){
	nav button.mobile-toggle {display:none;}
	nav.top-nav {padding-top:2rem; text-align:right;}
	nav.top-nav ul {position:relative; margin:0; padding:0; list-style:none;}
	nav.top-nav ul li {display:inline-block; margin:0 8px; padding:0;}
	nav.top-nav ul li a {display:inline-block; padding:1rem 0; font-size:1.6rem; text-decoration:none; color:#444; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; letter-spacing:1px; text-transform:uppercase;}
	nav.top-nav ul li.nav-active a {position:relative; color:#000;}
	nav.top-nav ul li a:hover, nav.top-nav ul li a:focus {color:#000;}
	nav.top-nav ul li.nav-active a:hover, nav.top-nav ul li.nav-active a:focus {color:#000;}
	nav.top-nav ul #select-line {position:absolute; bottom:0px; width:100px; margin-left:0; height:2px; background:#99bcf1;}
}
@media (max-width:767px){
	nav button.mobile-toggle {display:block; position:relative; float:right; margin:12px -16px 0 0; padding:20px; text-align:center; border-radius:4px; z-index:10;}
	nav button.mobile-toggle:focus {outline:none;}
	nav button.mobile-toggle span {position:relative; display:block; width:28px; height:2px; background-color:#444; transition:0.3s transform;}
	nav button.mobile-toggle span:before {content:''; position:absolute; left:0; top:-7px; width:24px; height:2px; background-color:#444;}
	nav button.mobile-toggle span:after {content:''; position:absolute; left:0; bottom:-7px; width:24px; height:2px; background-color:#444;}
	nav.top-nav ul {position:fixed; visibility:hidden; top:0; bottom:0; left:0; right:0; margin:0 auto; padding:124px 35px 0 0; width:100%; height:100%; z-index:-1; background-color:#fff; list-style-type:none; text-align:right; background-color:rgba(255,255,255,0.97); opacity:0; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s;}
	nav.top-nav ul li {margin-bottom:8px; transform:translateY(-9px); -webkit-transform:translateY(-9px); -moz-transform:translateY(-9px); transition:0.6s;}
	nav.top-nav ul li a {font-size:28px; color:#404d5b; font-weight:300;}
	/* --- Active --- */
	nav button.mobile-toggle.active {position:fixed; right:30px;}
	nav button.mobile-toggle.active span {transform:rotate(45deg);}
	nav button.mobile-toggle.active span:before {top:0px; left:-1px; width:28px; transform:rotate(-90deg);}
	nav button.mobile-toggle.active span:after {display:none;}
	nav.top-nav ul.active {visibility:visible; opacity:1; z-index:10;}
	nav.top-nav ul.active li {transform:translateY(0);}
}

/* Content Container */
section.content {padding:120px 0 32px;}
section.content.portfolio {padding-top:64px;}
@media (max-width:991px){
	section.content {padding:96px 0 16px;}
	section.content.portfolio {padding-top:40px;}
}
@media (max-width:767px){
	section.content {padding:72px 0 24px;}
}

/* Intro Text */
section.intro {margin:0px 0 0;}
section.intro h2 {color:#444; font-weight:300; line-height:1.6;}
@media (max-width:991px){
	section.intro {margin:40px 0 0;}
}
@media (max-width:767px){
	section.intro {margin-top:32px;}
	section.intro h2 {font-size:24px; line-height:1.6}
}
@media (max-width:480px){
	section.intro h2 {font-size:18px;}
}

/* Resume */
section.resume {color:#444;}
section.resume .resume-item {position:relative; margin:2.5rem 0 1rem 2px; padding-bottom:1rem;}
section.resume .resume-item.education {margin:1.5rem 0 0 1px; padding-bottom:0;}
section.resume .resume-item.no-border {border:0;}
section.resume .resume-item h4 {margin-bottom:0; font-size:24px;}
section.resume .resume-item h4 span {display:inline-block; margin:0 3px; font-weight:300; color:#bbb;}
section.resume .resume-item h5 {margin:2px 0 16px 1px; color:#777; font-size:18px; text-transform:uppercase; font-weight:500;}
section.resume .resume-item h5 i {position:relative; display:inline-block; top:0; margin-right:4px; font-size:17px; font-weight:500;}
section.resume .resume-item h5 span {position:relative; display:inline-block; top:1px; margin:0 5px 0 5px; color:#ccc; font-size:22px;}
section.resume .resume-item ul {list-style-type:circle; margin:0 0 0 3rem; padding:0; font-weight:400;}
section.resume .resume-item ul li {margin-bottom:16px; padding-left:8px}
@media (max-width:767px){
	section.resume .resume-item {border-bottom:1px solid #eee; margin-bottom:3rem; padding-bottom:0rem;}
	section.resume .resume-item h4 {font-size:19px;}
	section.resume .resume-item h5 {font-size:15px;}
	section.resume .resume-item h5 i {font-size:14px; margin-right:2px;}
}
@media (max-width:520px){
	section.resume .resume-item h4 {font-style:italic; font-size:17px; margin-bottom:5px; color:#666;}
	section.resume .resume-item h4 span {display:none;}
	section.resume .resume-item h4 strong {display:block; font-style:normal; font-size:19px; color:#444;}
	section.resume .resume-item h5 {margin-bottom:16px; font-size:15px;}
	section.resume .resume-item h5 i {font-size:14px;}
}


/* Hero */
.hero {position:relative; margin-top:2rem; padding:12rem 0 12rem; background-color:#457da7; overflow:hidden;}
.hero h1 {position:absolute; left:20px; bottom:-13px; margin:0; color:#fff; font-weight:500; font-size:62px; letter-spacing:-2px; line-height:1; text-shadow:0 30px 39px rgba(0,0,0,0.15);}
@media (max-width:991px){
	.hero {padding:12rem 0 9rem;}
	.hero h1 {font-size:48px;}
}
@media (max-width:767px){
	.hero {padding:9rem 0 7rem;}
	.hero h1 {font-size:36px;}
}

/* Headshot */
.headshot-container {margin-top:40px;}
.headshot-circle {width:300px; height:300px; overflow:hidden; margin:0 auto 40px; border-radius:100%; border:8px solid #fff; box-shadow:0 12px 48px rgba(0,0,0,0.1)}
.headshot-circle img {height:100%; max-width:none}
@media (max-width:540px){
	.headshot-circle {width:80%; height:auto}
}
/* --- Headshot bar --- */
.headshot-bar {position:absolute; top:0; width:100%; height:316px; background:rgba(242, 242, 242, 0.65); z-index:-1}
.headshot-bar:before {content:''; display:block; position:absolute; top:0; left:0; right:0; height:316px; width:100%; margin:auto; background-image:url(../images/headshot-hero-banner-pattern.png); background-size:cover; z-index:0; opacity:.03}
/* --- INT --- */
.headshot-bar.interior,
.headshot-bar.interior:before {height:160px;}
@media (max-width:767px){
	.headshot-bar.interior,
	.headshot-bar.interior:before {height:116px;}
}

/* Portfolio */
section.portfolio p {margin:0 0 1.5rem 1rem; font-weight:400;}
section.portfolio a {display:block; position:relative; text-decoration:none; color:#fff;}
section.portfolio a .image {position:relative; overflow:hidden; margin-bottom:20px; z-index:0;}
section.portfolio a .image img {display:block; width:100%; height:auto; box-sizing:border-box; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -webkit-backface-visibility:hidden; border-radius:8px}
section.portfolio a .text {display:block; position:absolute; top:50%; left:0; right:0; width:80%; margin:auto; z-index:2; opacity:0; transition:0.4s; -webkit-transition:0.4s; -moz-transition:0.4s; line-height:1.1; font-size:24px; font-weight:400; text-align:center;}
section.portfolio a .text span {display:block; margin-top:1.25rem; font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:1px; opacity:0.85; filter:alpha(opacity=85);}
section.portfolio a:after {content:''; position:absolute; top:0; left:0; right:0; width:100%; height:100%; opacity:0; filter:alpha(opacity=0); transition:0.45s;}
section.portfolio #halfull a:after {background-color:#4a9acf;}
section.portfolio #ui-three a:after {background-color:#265873;}
section.portfolio #cffm a:after {background-color:#5d9b98;}
section.portfolio #heritage a:after {background-color:#13a157;}
section.portfolio #isc-worlds a:after {background-color:#eb1c26;}
section.portfolio #lone-wolf a:after {background-color:#9a262c;}
section.portfolio #lwolf-new a:after {background-color:#233d2d;}
section.portfolio #city-of-burlington a:after {background-color:#005596;}
section.portfolio #yrt a:after {background-color:#006ec7;}
section.portfolio #william-osler a {color:#000;}
section.portfolio #william-osler a:after {background-color:#fcbb5d;}
section.portfolio #calgary a:after {background-color:#c8102e;}
section.portfolio #orangeville-tourism a {color:#000;}
section.portfolio #orangeville-tourism a:after {background-color:#f15c41;}
section.portfolio #healthy-way-consulting a:after {background-color:#013A55;}
/* --- Hover Effects --- */
@media (min-width:768px){
	section.portfolio a:hover .text , section.portfolio a:focus .text {transform:translateY(-45%); opacity:1;}
	section.portfolio a:hover .image img, section.portfolio a:focus .image img {transform:scale(1.05);}
	section.portfolio a:hover:after, section.portfolio a:focus:after {opacity:0.96; filter:alpha(opacity=96);}
}

/* --- Portfolio Page --- */
.portfolio-container {position:relative; display:block; margin:6rem auto; animation:fadein 2s,slidein 1.4s ease-in-out; -moz-animation:fadein 2s,slidein 1.4s ease-in-out; -webkit-animation:fadein 2s,slidein 1.4s ease-in-out; -o-animation:fadein 2s,slidein 1.4s ease-in-out;}
.portfolio-container img {max-width:100%;}
.portfolio-container figure {margin-right:12px; color:#777; text-align:right;}
.portfolio-container.shadow img {box-shadow:0 16px 42px rgba(0,0,0,0.12);}
@media (max-width:767px){
	.portfolio-container {margin:2.5rem 0;}
	.portfolio-container.shadow img {box-shadow:0 10px 28px rgba(0,0,0,0.12);}
}
/* ------ Portfolio nav ------ */
.portfolio-nav {position:relative; margin-bottom:16px; margin-top:0px;}
.portfolio-nav ul {margin:0; padding:0; list-style-type:none; text-align:center;}
.portfolio-nav ul li {position:relative; display:inline-block; text-align:center;}
.portfolio-nav ul li.prev {margin-right:3px;}
.portfolio-nav ul li.next {margin-left:3px;}
.portfolio-nav ul li a {padding:9px 18px; border:1px solid #ccc; background-color:#fff; line-height:1.2; font-size:15px; color:#666; border-radius:4px;}
.portfolio-nav ul li.prev.disabled a, .portfolio-nav ul li.next.disabled a {color:#eee; border-color:#eee;}
.portfolio-nav ul li.prev a:after {content:'Back'; padding-left:5px; font-size:16px;}
.portfolio-nav ul li.next a:before {content:'Next'; padding-right:5px; font-size:16px;}
.portfolio-nav ul li a:hover {background-color:#457da7; color:#fff; border-color:#457da7;}
.portfolio-nav ul li.disabled a:hover, .portfolio-nav ul li.disabled a:focus {background-color:#fff; border-color:#eee; color:#eee;}

@media (max-width:767px){
	.portfolio-nav {margin-top:16px; margin-bottom:16px;}
	.portfolio-nav ul li a {padding:6px 13px; font-size:12px;}
	.portfolio-nav ul li.prev a:after {font-size:13px;}
	.portfolio-nav ul li.next a:before {font-size:13px;}
}

/* Contact */
section.contact h2 {}
section.content.thanks {min-height:400px;}
section.contact.thanks i {display:inline-block; padding:20px; color:#a2cc80; border:1px solid #a2cc80; border-radius:100px;}
section.contact #url-contact {display:none;}
section.contact form input,
section.contact form textarea {width:100%; padding:22px 18px; margin:1.5rem 0 0; font-family:'Roboto',sans-serif; font-weight:300; background-color:#fff; box-sizing:border-box; font-size:17px; color:#444; border:1px solid #bfbfbf; border-radius:6px; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s;}
section.contact form input::placeholder,
section.contact form textarea::placeholder {color:#888; font-weight:300;}
section.contact form input:hover,
section.contact form textarea:hover {border-color:#666;}
section.contact form input:focus,
section.contact form textarea:focus {outline:none; background-color:#f5f5f5; border-color:#999;}
section.contact form textarea {height:178px;}
section.contact form fieldset {position:relative; border:none; padding:0; margin:0;}
section.contact form label {width:100%; display:block; margin-bottom:0.5rem; font-family:'Roboto',sans-serif; font-size:16px; color:#777; font-weight:400;}
section.contact form label sup {margin-right:2px;color:#99bcf1; font-weight:700; top:-0.35em;}
section.contact form label.error {display:inline-block; top:0px; right:0; margin:9px 0 6px 10px; color:#cb0e0e; text-align:left; font-size:13px; text-transform:none;}
section.contact form input[type=submit]{background-color:#4177a7; color:#fff; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s; border:0; font-weight:400;}
section.contact form input[type=submit]:hover,
section.contact form input[type=submit]:focus {background-color:#2e5f8a;}
section.contact .submit-error {padding:17px 25px; background-color:#e4f3a6; opacity:0.6; color:#444; font-size:16px;}

/* About Me */
section.about .social-channels span {display:inline-block; margin:0 12px; color:#bbb;}



/* Call To Action */
.cta {padding:8rem; margin:0; text-align:center;}

/* Footer */
footer {margin-top:72px; padding:3rem 0 2.75rem; background-color:#242424;}
footer p {margin:0; color:#fff; font-size:1.5rem; font-weight:400}
footer .social-icons a {position:relative; display:inline-block; margin:0 0.5rem; color:#fff; font-size:2.2rem; line-height:1;}
footer .social-icons a:hover, footer .social-icons a:focus {color:#fff;}
footer .social-icons a.email {top:1px;}
footer .social-icons a.linkedin {padding:0.3rem 0.4rem 0.2rem; top:-4px; color:#292929; background-color:#fff; font-size:1.55rem; border-radius:1px;}
footer .social-icons a.linkedin:hover, footer .social-icons a.linkedin:focus {background-color:#fff;}
@media (max-width:991px){
	footer {margin-top:6rem;}
	footer .social-icons {margin-top:12px; font-size:1.6rem;}
}
@media (max-width:767px){
	footer {margin-top:3.5rem;}
	footer {text-align:center;}
	footer .social-icons {text-align:center;}
}

#fader {position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999; pointer-events:none; background:white; animation-duration:800ms; animation-timing-function:ease-in-out;}
#fader:before {content:'fade'}
@keyframes fade-out {
  from {opacity:1}
  to {opacity:0}
}
@keyframes fade-in {
	from {opacity:0}
	to {opacity:1}
}
#fader.fade-out {opacity:0; animation-name:fade-out;}
#fader.fade-in {opacity:1; animation-name:fade-in;}