.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; } }

.introContent p:first-child { margin-top: 0; }

#intro h1 { grid-area: title; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #d77b00; height: 11rem; border-bottom: 2px solid #e8e5e4; }

#intro h1 span:nth-child(1) { color: #ffac3e; }

#intro h1 span:nth-child(2) { color: #ff970b; }

@media screen and (min-width: 1000px) { body { grid-template-areas: "header . nav" ". content ." ". footer ."; } header { width: calc(100% - 30vw); grid-template-rows: unset; grid-template-columns: 30vw auto; grid-template-areas: "logo nav"; } #mainNav ul { flex-direction: row; } #mainNav ul li { margin: 0 .5rem; } #intro { display: grid; grid-template-rows: 11rem auto; grid-gap: 1rem; grid-template-areas: "title" "content"; } #intro h1 { margin: 0; } #intro h1 span { display: block; } }

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