html { color: #222; font-size: 1em; line-height: 1.4; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: rgba(255,0,0,.7); text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg,video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.hidden { display: none !important; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; -webkit-clip-path: none; clip-path: none; height: auto; margin: 0; overflow: visible; position: static; width: auto; white-space: inherit; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " ";  display: table; }
.clearfix:after { clear: both; }
a, a:visited { text-decoration: underline; }
pre { white-space: pre-wrap !important; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main {  display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box;  height: 0;  overflow: visible; }
pre { font-family: monospace, monospace;  font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0;position: relative;vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea {font-family: sans-serif;  font-size: 100%;  line-height: 1.15;  margin: 0; }
button, input {  overflow: visible; }
button, select {  text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box;  padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}
[type="search"] { -webkit-appearance: textfield;  outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }



body { margin: 0; background: #fff; color: #646464; font-family: "Open Sans", sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0; padding: 0; }
a { text-decoration: none; color: #e43924; }
a:hover { text-decoration: underline; }

header { background: #770D00 url(img/tylerbg.png) bottom center no-repeat; overflow: hidden; height: 300px; }
header nav { display: block; margin: 76px auto 0; width: 320px; text-align: center;}
header nav ul { list-style: none; margin: 0; padding: 0; display: inline; text-align: center; }
header nav ul li { margin: 0; padding: 0; display: inline-block; }
header nav ul li a { color: #fff; }
header nav ul li a img { margin: 0 24px; }
header a:hover img { opacity: .7; }
header h1 { margin: 12px 20px 0; color: #FFF; color: #FFF; text-align: center; font-size: 21px; font-weight: 300; }
header p { color: #fff; text-align: center; font-weight: 300; }

header#about-page { background: #770D00 url(img/about-bg.jpg) bottom center no-repeat; overflow: hidden; height: 270px; background-size: cover; }


#work2 .wrap h2 { display: none; }
#work2 .wrap .workimg { display: grid; margin-top: -32px; grid-template-columns: 1fr 1fr 1fr; column-gap: 32px; row-gap: 32px; }
@media screen and (max-width: 1020px) {
	#work2 .wrap .workimg { margin-top: -24px; column-gap: 24px; row-gap: 24px; padding: 0 8px; }
}
@media screen and (max-width: 600px) {
	#work2 .wrap .workimg { grid-template-columns: 1fr 1fr; margin: -16px 0 0 0; column-gap: 8px; row-gap: 8px; }
}

.workimg { width: 100%; overflow: visible; box-sizing: border-box; padding: 0; margin: 0px; }
.workimg a { display: block;box-sizing: border-box; margin: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,.3); position: relative; background: #760f07; transition: .1s; }
.workimg a:hover img { opacity: .1; }
.workimg a:hover h6 { opacity: 1; }

.workimg a img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 1;
	transition: .7s; 
}
.workimg a h6 {
	position: absolute;
	color: #fff;
	text-align: center;
	top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translate(-50%, -50%);
	font-size: 18px;
	opacity: 0;
	transform: .8s;
}

#about { margin: 64px 0 0; }

#about .wrap, #career .wrap { width: 800px; padding: 0 24px; }
@media screen and (max-width: 820px) { 
	#about .wrap, #career .wrap { width: 100%; } 
}
#about .about p { font-weight: 100; font-size: 28px; line-height: 36px; margin: 0 0 0 0; }

#about .skills { margin: 64px 0; }
#about .skills h3, #about .software h3, #career h2 { font-size: 18px; text-transform: uppercase; font-weight: 600; }
#about .skills p { font-weight: 400; line-height: 24px; }
#about .skills > img, #about .software div img.heading-hr { display: block; margin: 0 0 16px; padding: 0; width: 58px; height: 3px; }
#about .skills ul { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; list-style: none; margin: 24px 0 0 0; padding: 0; }
#about .skills ul li, #about .software li { font-weight: 100; padding: 0 0 0px 0; line-height: 24px; }
#about .software { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 64px 0; }
@media screen and (max-width: 620px) {
	#about .software { display: flex; flex-direction: column; align-items: center; margin: 0; }
	#about .software div { width: 100%; display: block; }
}
#about .software ul { display: grid; grid-template-columns: 1fr; gap: 24px; list-style: none; margin: 24px 0 0 0; padding: 0; }
@media screen and (max-width: 620px) {
	#about .software ul { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media screen and (max-width: 420px) {
	#about .software img { width: 100%; height: auto; margin-top: 24px; }
}

#career { margin: 0 0 64px 0; }
#career .wrap > p { line-height: 24px; margin-bottom: 64px; }
@media screen and (max-width: 620px) {
	#career .wrap > p { margin-bottom: 32px; }
}
#career .job { margin: 0; background: url(img/timeline-bg.svg) top left repeat-y; border-top: 1px dotted #f2f2f2; padding: 24px 0 24px 32px; position: relative; display: flex; column-gap: 32px; }
@media screen and (max-width: 820px) {
	#career .job { flex-direction: column; }
}
#career .job img.timeline-dot { position: absolute; top: -7px; left: -7px; width: 13px; height: 13px; }
#career .job h6, #career .job h6 a { text-transform: uppercase; font-weight: 600; font-size: 16px; width: 30%; margin: 6px 0 0 0; color: #646464; }
@media screen and (max-width: 820px) {
	#career .job h6, #career .job h6 a { width: 100%; }
}
#career .job h6 span { font-size: 15px; font-weight: 300; line-height: 21px; text-transform: none; padding-top: 4px; display: block; }
#career .job p { margin: 0; line-height: 28px; font-size: 15px; font-weight: 300; width: 70%; }
@media screen and (max-width: 820px) {
	#career .job p { margin: 16px 0 0 0; width: 100%; }
}



#casestudy { margin: 24px auto 48px; color: #3c3c3c; display: flex; flex-flow: column; }
#casestudy * {box-sizing: border-box;}
@media screen and (max-width: 1020px) {
	#casestudy { margin: 30px auto; }
}
#casestudy h2, #casestudy h3 { font-size: 36px; text-align: center; }
#casestudy hr { border-top: 4px solid #ddd; width: 100px; margin: 15px auto; }
#casestudy h5 { line-height: 32px; font-size: 28px; width: 680px; margin: 30px auto 20px; padding: 0 30px; }
@media screen and (max-width: 680px) {
	#casestudy h5 { line-height: 32px; font-size: 28px; width: 100%; margin: 30px auto 20px; padding: 0 30px; }
}
#casestudy p, #casestudy ul { line-height: 28px; font-size: 15px; width: 680px; margin: 20px auto; padding: 0 30px; display: block; }
#casestudy ul { padding-left: 60px; line-height: 28px; font-size: 15px; }
@media screen and (max-width: 800px) {
	#casestudy p, #casestudy ul { line-height: 28px; font-size: 18px; margin: 20px 0px; width: auto; }
}
#casestudy p.intro { font-weight: 300; line-height: 36px; font-size: 18px; }
#casestudy img.fullcol { margin: 10px auto; width: 100%; }
#casestudy img.old { margin: 40px auto; display: block; max-width: 1400px; }
@media screen and (max-width: 1420px) {
	#casestudy img.old { margin: 40px auto; display: block; max-width: 1200px; }
}
@media screen and (max-width: 1220px) {
	#casestudy img.old { margin: 40px auto; display: block; max-width: 1000px; }
}
@media screen and (max-width: 1000px) {
	#casestudy img.old { margin: 40px auto; display: block; max-width: auto; width: 100%; }
}
.team-role-duration { margin: 8px auto 0; width: 620px; display: flex; align-items: flex-start; flex: 0 0 100%; flex-flow: row; gap: 16px; justify-content: space-between; }
@media screen and (max-width: 640px) {
	.team-role-duration { width: auto; margin: 24px; }
}
	.team-role-duration div { display: flex; flex-flow: column; }
	.team-role-duration h6 { font-size: 18px; text-transform: uppercase; font-weight: 600; }
	#casestudy .team-role-duration ul { list-style: none; font-size: 15px; padding: 8px 0; width: auto; margin: 0; }
	
#casestudy .tabs { max-width: 620px; margin: 16px auto; }
#casestudy .tabs-nav { padding:0; margin:0; width: 626px; }
@media screen and (max-width: 640px) {
	#casestudy .tabs { max-width: 100%; width: 100%; padding-left: 8px; padding-right: 8px; }
	#casestudy .tabs-nav { width: 100%; }
}
#casestudy .tabs-nav li { list-style: none; padding: 0; margin: 0; display: block; float: left; width: 33%; }
#casestudy .tabs-nav li a { color: #646464; font-weight: 600; display: block; border: 1px solid #f2f2f2; border-bottom: 3px solid #90FFC9; background: #fbfbfb; padding: 12px 16px 16px; margin: 0; height: auto; line-height: 24px; }
#casestudy .tabs-nav li a:hover { text-decoration: none; }
#casestudy .tabs-nav li:first-child a { border-right: 0; border-top-left-radius: 6px; border-bottom: 3px solid #B6DCFF; }
#casestudy .tabs-nav li:last-child a { border-left-color: transparent; border-top-right-radius: 6px; border-bottom: 3px solid #FFED89; }
#casestudy .tabs-nav li.tab-active a { display: block; background: #fff; border-bottom-color: transparent; color: #646464; cursor: default; }
#casestudy .tab-active a:hover { text-decoration: none; cursor: default; }
#casestudy .tab-active a span, #casestudy .tabs-nav li a span { display: block; clear: both; font-size: 14px; line-height: 18px; font-weight: 400; }
#casestudy .tabs-stage { border: 1px solid #f2f2f2; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 16px; position: relative; top: -1px; }
@media screen and (max-width: 640px) {
	#casestudy .tabs-stage { padding: 8px; }
}
#casestudy .tabs-stage h6 { width: auto; padding: 0 16px; margin: 16px 0; font-size: 16px; font-weight: 600; }
#casestudy .tabs-stage p { width: auto; padding: 0 16px; margin: 16px 0; }
#casestudy .tabs-stage ul { width: auto; padding: 0 0 0 36px; margin: 16px 0; }
img.sales-process { margin: 16px auto; }
@media screen and (max-width: 580px) {
img.sales-process { width: 100%; height: auto; }
}


.abc-wrap { position: relative; max-width: 1800px; }
.about-content { margin: 0 auto; width: 800px; padding: 0 24px; overflow: auto; }
@media screen and (max-width: 800px) {
	.about-content { margin: 0; width: 100%; padding: 0; overflow: auto; }
}
.about-content ul.about-ul-links { list-style: none; padding: 0; margin: 16px 0 24px 0; }
.about-content ul.about-ul-links li { padding: 0 8px 0 0; display: inline-block; }
@media screen and (max-width: 800px) {
	.about-content ul.about-ul-links { padding-left: 16px; padding-right: 16px; }
}
.about-content p.intro { margin-top: 48px; font-weight: 300; line-height: 36px; font-size: 18px; }
.about-content h3, #hikepass h3 { font-size: 24px; font-weight: 600; }
.about-content h6, #hikepass h6 { font-size: 18px; font-weight: 600; }
.about-content p { line-height: 28px; font-size: 15px; margin: 20px 0; padding: 0; display: block; }
@media screen and (max-width: 800px) {
	.about-content p, .about-content h3, .about-content h6 { padding-left: 16px; padding-right: 16px; }
	.about-content ul { margin-left: 16px; padding-left: 16px; padding-right: 16px; }
	.about-content ul li { padding-left: 32px; }
}
.about-content .a-two-col, #hikepass .a-two-col { width: 50%; float: left; padding: 16px 0; }
.about-content ul, #hikepass ul { padding-left: 24px; font-weight: 300; }
.about-content ul li, #hikepass ul li { padding: 0 0 12px 0; }
#hikepass { display: flex; margin: 0 auto; width: 800px; padding: 0 24px; position: relative; gap: 48px; }
@media screen and (max-width: 800px) {
	#hikepass { display: block; margin: 0; width: 100%; padding: 0; position: relative; gap: 48px; }
	#hikepass div { width: 46%; float: left; padding: 0 2%; }
}
#hikepass img { display: block; position: absolute; width: 342px; height: auto; top: 0; right: -150px; }
@media screen and (max-width: 800px) {
	#hikepass img { display: block; clear: both; position: relative; width: 342px; height: auto; margin: 16px auto; right: auto; top: auto; }
}
#hikebgleft { position: absolute; left: 0; top: -50px; width: 340px; }
#hikebgright { position: absolute; right: 0; top: -40px; width: 379px; }
@media screen and (max-width: 1510px) {
	#hikebgleft { display: none; } 
	#hikebgright { display: none; }
}

.back-to-top { position: fixed; bottom: 24px; right: 24px; }


footer { padding: 2px 0 2px 0; background: #fbfbfb; border-top: 1px solid #f2f2f2; }
footer .footercontent { display: flex; flex-direction: column; }
footer .flogo { display: flex; flex-direction: column; margin: 16px 0 0 0; }
footer .flogo div { text-align: center; }
footer .flogo div img { margin: 8px 8px 0; }
footer .flogo div img:hover { opacity: .8; }
footer p { text-align: center; font-size: 12px; }

.wrap { margin: 0 auto; width: 1400px; }
@media screen and (max-width: 1420px) {
	.wrap { width: 1200px; }
}
@media screen and (max-width: 1220px) {
	.wrap { width: 1000px; }
}
@media screen and (max-width: 1000px) {
	.wrap { width: 100%; padding: 0 0px; box-sizing: border-box; }
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
}
@media print *, *:before,*:after {
        background: transparent !important;
        color: #000 !important; 
        box-shadow: none !important;
        text-shadow: none !important;
    }
}