.icon { font-family: fontello; font-style: normal; font-weight: normal; font-size: 1rem; speak: never; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* You can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

html { font-family: franklin-gothic-urw, Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; width: 100%; color: #38312f; border: 1rem solid #d77b00; height: 100vh; box-sizing: border-box; overflow: hidden; }

h1, h2, h3 { margin: 0; font-size: 1rem; line-height: 1em; font-family: new-spirit, serif; font-weight: 400; }

h1 { font-weight: 400; font-size: clamp(2rem, 4vw, 2.5rem); color: #d77b00; }

h1 strong { font-weight: 600; }

h1 a { color: #38312f; }

h1 #jobTitle { display: block; font-size: 1.5rem; line-height: 1em; font-family: new-spirit-condensed; font-weight: 400; color: #d77b00; }

h2 { font-family: new-spirit-condensed; font-size: clamp(1rem, 2vw, 2rem); }

h3 { font-family: new-spirit; font-size: clamp(0.8rem, 1.5vw, 1.5rem); }

body { margin: 0; width: calc(100vw - 2rem); height: calc(100vh - 2rem); overflow: scroll; padding: 2rem; box-sizing: border-box; }

header { display: flex; justify-content: space-between; }

a { text-decoration: none; color: #d77b00; }

a:hover { color: #38312f; }

.at-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

#prevNextNav { height: 3rem; justify-content: center; display: flex; align-items: center; }

#mainNav { margin-top: 1rem; }

#mainNav ul { list-style: none; margin: 0; padding: 0; font-family: new-spirit-condensed; font-size: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }

#mainNav ul li { margin-top: -2px; }

#mainNav ul li a { border-top: 2px solid #e8e5e4; display: block; }

#mainNav ul li a span { display: inline-block; white-space: nowrap; padding-top: .25em 0 .5em 0; }

#mainNav ul li a:hover { border-color: #38312f; }

figure { margin: 0; }

main { grid-area: content; }

#examples { grid-column: 1 / -1; display: grid; grid-template-rows: repeat(auto-fill, minmax(3rem, auto)); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-gap: 1rem; }

a.portfolioItem { display: grid; grid-template-rows: 10rem 4rem; text-decoration: none; cursor: pointer; margin-bottom: 2rem; background: #ffffff; position: relative; border-bottom: 0.3rem solid #e8e5e4; }

a.portfolioItem figure { grid-row: 1; height: 100%; margin: 0; overflow: hidden; }

a.portfolioItem h3 { grid-row: 2; font-weight: 100; padding-top: 1rem; letter-spacing: 0; }

a.portfolioItem img { max-width: 100%; width: 100%; }

a.portfolioItem:hover { border-color: #38312f; }

a.portfolioItem:hover h3 { color: #38312f; }

@media screen and (min-width: 600px) { #prevNextNav { height: 6rem; } }

@media screen and (min-width: 1000px) { body { padding: 3rem; display: grid; grid-template-areas: "header . nav" "header content ." ". footer ."; grid-template-columns: 15vw minmax(10rem, auto) 15vw; grid-template-rows: 8rem auto auto; grid-gap: 3rem; } header { position: fixed; grid-area: header; width: 15vw; display: grid; grid-template-rows: 10rem auto; grid-gap: 3rem; grid-template-areas: "logo" "nav"; background: rgba(255, 255, 255, 0.9); } h1 { font-size: 4vw; } h1#logo { grid-area: logo; } h1 #jobTitle { font-size: 2.5vw; } #prevNextNav { grid-area: nav; z-index: 1; } #mainNav { grid-area: nav; margin: 0; } #mainNav ul { flex-direction: column; } #mainNav ul li a { display: block; } main header { border-bottom: 2px solid #e8e5e4; } footer { grid-row: -1; grid-column: 2; } }

main h1 { margin: 0; line-height: 1.2em; margin-bottom: 1rem; padding-right: 1rem; padding-top: 4rem; width: 70%; position: relative; background: #ffffff; grid-area: headline; }

main h1:before { content: ""; display: block; position: absolute; height: 8rem; width: 8rem; left: -8rem; top: 0; z-index: -1; clear: both; background: #ffffff; }

main header { display: flex; grid-area: none; position: relative; width: 100%; min-height: 8rem; padding-bottom: 1rem; }

footer:after { display: block; }

#prevNextNav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; }

#prevNextNav ul li { font-family: new-spirit-condensed; white-space: nowrap; }

#prevNextNav ul #prevItem { font-size: clamp(1rem, 2vw, 2rem); }

#prevNextNav ul #prevItem a { color: #747474; }

#prevNextNav ul #prevItem a:hover { color: #38312f; }

#prevNextNav ul #prevItem:after { content: " / "; color: #38312f; }

#prevNextNav ul #prevItem .icon { margin-right: .5rem; }

@media screen and (min-width: 1000px) { main header { height: 11rem; } #prevNextNav ul { justify-content: flex-end; } #prevNextNav ul #nextItem { font-size: clamp(2rem, 4vw, 3rem); } #prevNextNav ul #nextItem a { position: relative; top: .25em; } }

/** Slideshow START **/
.slideshow { margin: auto; width: inherit; max-height: 90vh; background: #ffffff; position: relative; }

.slideshowWrapper { width: inherit; overflow: hidden; position: relative; }

.slideshowContent { width: inherit; height: 100%; position: relative; top: 0; left: 0; transition: left .5s ease-in; display: flex; }

.slide { cursor: pointer; width: inherit; }

.slide figure { width: auto; display: inline-block; }

.slide img, .slide video { max-width: 100%; width: 100%; display: block; margin: auto 0; }

.slideshowControls { display: flex; width: 100%; justify-content: start; margin-top: 1rem; }

.slideControl { height: 1.5rem; width: 1.5rem; border: 2px solid transparent; box-sizing: border-box; position: relative; text-indent: -999rem; margin-right: .5rem; }

.slideControl:before { content: ""; height: .75rem; width: .75rem; position: absolute; top: .25rem; left: .25rem; background: #000000; }

.slideControl:hover:before { background: #cccccc; }

.slideControl.active { border-color: #000000; }

.slideshowDirection { display: none; position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 90%; justify-content: space-between; }

.slideshow:hover .slideshowDirection { display: flex; }

.slideshowDirection a { display: flex; pointer-events: all; top: 0; height: 3rem; width: 2rem; align-self: center; cursor: pointer; }

.slideshowDirection a.previousSlide { left: 0; }

.slideshowDirection a.nextSlide { right: 0; justify-content: flex-end; }

.slideshowDirection a span { display: block; pointer-events: none; height: 3rem; width: 2rem; align-self: center; position: relative; text-indent: -999rem; background: rgba(0, 0, 0, 0.3); }

.slideshowDirection a:hover span { background: black; }

.slideshowDirection a span:before { content: ""; display: block; height: 1rem; width: 1rem; position: absolute; top: 50%; left: 50%; margin-top: -.5rem; margin-left: -.5rem; border: 2px solid white; transform: rotate(45deg); }

.slideshowDirection a.previousSlide span:before { border-width: 0 0 2px 2px; }

.slideshowDirection a.nextSlide span:before { border-width: 2px 2px 0 0; }

#enlarge { position: absolute; top: 0; right: 0; }

.visible #enlarge { display: none; }

/** Slideshown END **/
#overlay { visibility: hidden; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100vw; height: 100%; z-index: 99; display: grid; grid-template-areas: ". close ." "prev contents next" ". contents ."; grid-template-columns: 5vw auto 5vw; grid-template-rows: 3rem auto 3rem; }

#overlay.visible { visibility: visible; }

#overlayContents { grid-area: contents; display: flex; justify-content: center; align-items: center; }

#overlay figure { margin: 0; }

#overlay figure figcaption { color: #ffffff; }

#overlay figure img, #overlay figure video { max-height: 70vh; max-width: 90vw; }

#overlay #closeModal { position: relative; grid-area: close; justify-self: end; border: none; background: #ffffff; font-family: "New Spirit", serif; font-weight: 400; font-size: inherit; color: #d77b00; height: 2rem; width: 2rem; border-radius: 3rem; cursor: pointer; padding: 0; }

#overlay #closeModal span { margin-left: -6rem; }

#overlay #closeModal:before { content: "\00D7"; display: block; height: inherit; width: inherit; position: absolute; top: 0; left: 0; color: inherit; text-indent: 0; font-size: 2rem; line-height: 1em; }

#overlay #closeModal:after { content: ""; display: block; position: absolute; top: 0; left: -2rem; border-top: 1rem solid transparent; border-right: 1rem solid #ffffff; border-bottom: 1rem solid #ffffff; border-left: 1rem solid transparent; }

#overlay #closeModal:hover { background: #d77b00; color: #ffffff; }

#overlay #closeModal:hover:before { color: inherit; }

#overlay #closeModal:hover:after { border-right-color: #d77b00; border-bottom-color: #d77b00; }

#enlarge { display: none; position: absolute; right: 1rem; border: none; background: #000000; font-family: inherit; font-size: inherit; color: #d77b00; height: 2rem; width: 2rem; cursor: pointer; text-indent: -999rem; box-sizing: border-box; padding: 0; }

#enlarge:before { content: "\002B"; display: block; height: inherit; width: inherit; position: absolute; top: 0; left: 0; color: #ffffff; text-indent: 0; font-size: 2rem; line-height: 1em; }

#enlarge:hover { background: #d77b00; }

@media only screen and (min-width: 600px) { #enlarge { display: block; right: -1rem; } }

.slideshow { grid-area: slideshow; width: 100%; max-height: unset; }

.slideshow figure.slide { margin: 0; padding: 0; text-align: center; max-height: 50vh; }

.slide { background: #ebebeb; display: flex; flex-direction: column; align-content: center; }

.slide img { max-height: 100vw; width: auto; margin: auto; }

figcaption { color: #4a4a4a; font-size: .8rem; text-align: center; margin-left: 1rem; }

.slideshowControls { margin: 1rem; }

.slideControl { margin-right: 0; }

.slideControl.active { border-color: #d77b00; }

.slideControl:before { background: #d77b00; }

article { grid-area: article; }

#skills { grid-area: skills; margin-bottom: 4rem; margin-top: 4rem; width: 50%; }

#skills h2 { display: inline-block; position: relative; font-size: 1rem; margin-top: 0; }

#skills h2:after { content: ""; display: inline-block; height: 2rem; width: 0; vertical-align: middle; border-right: 1px solid #d77b00; transform-origin: 0 100%; transform: skewX(135deg); }

#skills ul { list-style: none; margin: 0; padding: 0; font-size: .8em; grid-area: skills; }

.caseStudy__section { margin-bottom: 1rem; }

.caseStudy__subsection { overflow: hidden; margin: 1rem 0; }

.caseStudy figure img { height: 100%; }

.caseStudy figure.vertical { max-width: 25%; }

.caseStudy__hero { width: 100%; margin-bottom: 1rem; }

.caseStudy__hero figure, .caseStudy__hero video { width: 100%; margin: 0; }

.caseStudy__hero figure img, .caseStudy__hero video img { width: 100%; }

main.portfolio h1 { margin: 0; padding-right: 0; padding-top: 3rem; background: none; box-sizing: border-box; font-size: 1.5rem; font-weight: 700; width: 100%; color: #ffac3e; }

main.portfolio h1:before { display: none; }

main.portfolio h1 span { display: block; font-weight: 400; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1em; }

main.portfolio h1 span:nth-child(1) { color: #d77b00; }

@media only screen and (min-width: 600px) { .slideshow { width: 100%; } .slideshowWrapper { width: 100%; } figure.slide { margin: -1rem; padding: 1rem; } figure.slide img { max-height: 100%; max-width: auto; } figure.slide video { max-height: 100%; width: auto; } #enlarge { grid-area: slideshow; position: absolute; right: 0; } #skills { width: auto; } #overlay .slideshow { width: 90vw; margin: 0; height: 90vh; align-self: start; } #overlay .slideshow .slideshowWrapper { height: calc(100% - 3rem); } #overlay .slideshow figure.slide img { width: auto; } #overlay .slideshow figure.slide figcaption { color: #000000; text-align: center; } #overlay #closeModal { padding: 0 2rem 0 .5rem; width: auto; border-radius: 0; } #overlay #closeModal span { margin: 0; } #overlay #closeModal:before { left: auto; right: .5rem; } .caseStudy__section figure { max-width: 50%; margin-left: 1rem; float: right; } .caseStudy__section figure img { width: 100%; } }

@media screen and (min-width: 1000px) { body { grid-template-areas: "header content nav" "header content ." ". footer ."; } }

/*# sourceMappingURL=kb-portfolio.css.map */