body, p, h1, .banner, a, .contact_button a { font-family: "proxima-nova", "proxima nova", "FF-Tisa", "Palatino", "Hoefler Text", "Baskerville", "Georgia", serif; }

footer a, .button a, .button button, #nav a, h2, h3, h4, h5, h6 { font-family: "futura-pt", "Futura", "Trebuchet MS", "Verdana", sans-serif; }

body, p, h1, .banner, footer a, .button a, .button button, #nav a, h2, h3, h4, h5, h6 { font-weight: 400; }

a, .contact_button a, p a { font-weight: 700; }

ol, ul, html, body { margin: 0px; padding: 0px; }

html { font-family: sans-serif; font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

article, footer, header, nav, section  { display: block; }

a { background: transparent; }

a:active, a:hover { outline: 0; }

img { width: 100%; border: 0; }

svg:not(:root) { overflow: hidden; }

footer a, .button a, .button button, #nav a, h2, h4, h5, h6 { letter-spacing: 0.025em; text-transform: uppercase; }

footer a, #banner .button a, .contact_button a, #content_wrapper > section:nth-child(2n+1) a, .banner, #content_wrapper > section:nth-child(2n+1) { -webkit-font-smoothing: antialiased; }

footer a, #banner .button a, .contact_button a, #content_wrapper > section:nth-child(2n+1) a { color: #f2f2f2; }
footer a:hover, #banner .button a:hover, .contact_button a:hover, #content_wrapper > section:nth-child(2n+1) a:hover, footer a:focus, #banner .button a:focus, .contact_button a:focus, #content_wrapper > section:nth-child(2n+1) a:focus { color: #7FB8B0; border-color: #7FB8B0; }
footer a:active, #banner .button a:active, .contact_button a:active, #content_wrapper > section:nth-child(2n+1) a:active { color: #54978d; border-color: #54978d; }

#nav a, #contact a { color: #282828; }
#nav a:hover, #contact a:hover, #nav a:focus, #contact a:focus { color: #7FB8B0; }
#nav a:active, #contact a:active { color: #54978d; }

body { line-height: 1.5; letter-spacing: normal; color: #282828; font-size: 1.125rem; }

p { font-size: 1.125rem; margin: 0.5em 0; padding: 0; }
.work_cap p { font-size: 1rem; padding: 0; margin: 0; }
p + p { margin-top: 1em; }

/*section headings*/
h1, h2, h3 { line-height: 1.2; text-align: center; }

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }

h1 { font-size: 3rem; }

h2 { font-size: 2rem; margin: 0.5em 0; }

h3 { font-size: 1.625rem; margin: 0.5em 0; }

h4 { font-size: 1.375rem; }

h5 { font-size: 1.125rem; }

h6 { font-size: 1rem; }

/*  ********************************* LINK STYLES **********************************/
a { text-decoration: none; }
a:hover, a:active { cursor: pointer; }

p a { color: #282828; }
p a:hover { color: #7FB8B0; }
p a:active { color: #54978d; }

#nav a { font-size: 1.375rem; text-align: center; }
#nav > a { line-height: 4.8125rem; }
#nav > a:hover { cursor: context-menu; }
footer a { font-size: 1.375rem; }
.work_it a { text-align: center; }

.button a, .button button, .contact_button a { font-size: 1.125rem; padding: 0.75em 2em; border: 1px solid; border-radius: 2px; }

#banner .button, .button, .contact_button { position: relative; width: 100%; padding: 0.625rem 0; margin: 0 auto; }
#banner .button a, .button a, .contact_button a { display: inline-block; }

#banner .button, .button { text-align: center; }

#banner .button a, .contact_button a { border: 2px solid; background: #282828; }

.button a { color: #8c8c8c; border: 2px solid #8c8c8c; }
.button a:hover, .button a:active { color: #7FB8B0; border-color: #7FB8B0; }
.button a:active { background: rgba(200, 200, 200, 0.3); }

#banner .button a { background: rgba(80, 80, 80, 0.3); }

.icon_button { display: inline-block; padding: 0; margin: 0 0.5rem; }
.icon_button a { vertical-align: middle; display: inline-block; height: 2.5rem; width: 2.5rem; }
.icon_button a[href^="https://github"] { background: url(../images/icons/GitHub-Mark-Light-64px.png) no-repeat center; background-size: contain; }

.banner { color: #f2f2f2; position: relative; display: table; margin: 0; width: 100%; background: #282828; }
.banner .intro { display: table-cell; vertical-align: middle; width: 100%; }

@media only screen and (max-width: 32.5rem) { .banner { height: 15.859375rem; } }
@media only screen and (min-width: 32.5625rem) { .banner { height: 25.375rem; } }
* { box-sizing: border-box; }

#content_wrapper .content, header .content, footer .content { max-width: 75rem; margin: 0 auto; position: relative; }

#body_wrapper { display: block; width: 100%; }

footer, header, nav, section { display: block; }

ol, ul { list-style: none; }

html, body { height: 100%; width: 100%; }

img { display: block; }

#body_wrapper { position: relative; min-height: 100%; height: 100%; }

#content_wrapper { width: 100%; }

#content_wrapper .content { display: block; width: 100%; padding: 2%; }

#content_wrapper > section { margin: 0; padding: 2rem 1rem; background: #f2f2f2; }
#content_wrapper > section:nth-child(2n+1) { background: #505050; background: -webkit-linear-gradient(top right, #8c8c8c, #505050); background: linear-gradient(to bottom left, #8c8c8c, #505050); color: #f2f2f2; }

header { position: relative; width: 100%; margin: 0 auto; background: #f2f2f2; }

#nav > a, #nav li:last-of-type { display: none; }

@media only screen and (max-width: 32.5rem) { #nav li a, #nav > a { background: #f2f2f2; }
  #nav li a:hover, #nav > a:hover, #nav li a:focus, #nav > a:focus { background: gainsboro; color: #282828; }
  #nav li a:active, #nav > a:active { background: #505050; }
  #nav li a { border-bottom: 0.125rem solid #c8c8c8; display: block; line-height: 4.8125rem; height: 4.8125rem; padding: 0; }
  #nav li:last-of-type { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
  #nav li:last-of-type a { background: rgba(40, 40, 40, 0.6); height: 100%; width: 100%; }
  #nav > a { padding-right: 3.953125rem; padding-left: 1.71875rem; position: absolute; right: 0; height: 4.8125rem; border-left: 1px solid #c8c8c8; }
  #nav > a:after { content: " "; position: absolute; display: block; right: 1.71875rem; top: 1.71875rem; width: 1.375rem; height: 1.375rem; background: url(../images/icons/menu_icon.svg) no-repeat center; background-size: contain; }
  header { height: 4.8125rem; background: #f2f2f2; }
  #logo_container { display: inline-block; width: 4.8125rem; padding: 0.375rem; }
  #nav { display: inline-block; position: absolute; top: 0; bottom: 0; right: 0; }
  #nav ul { position: fixed; top: 4.8125rem; left: 0; right: 0; width: 100vw; z-index: 1; }
  #nav li { display: block; }
  #nav:not(:target) > a:first-of-type { display: inline-block; }
  #nav:not(:target) ul { display: none; }
  #nav:target > a:last-of-type { display: inline-block; z-index: 2; }
  #nav:target ul { display: block; }
  #nav:target li:last-of-type { display: block; } }
@media only screen and (min-width: 32.5625rem) { header { height: 5.5rem; }
  #logo_container { display: inline-block; width: 5.5rem; padding: 0.25rem; }
  #nav { position: absolute; top: 0; right: 0.25rem; display: inline-block; }
  #nav li { display: inline-block; }
  #nav li a { display: block; height: 5.5rem; line-height: 5.5rem; margin: 0 0.25rem; padding: 0 0.25em; }
  #nav li a.current { color: #7FB8B0; }
  .hide_mobile { display: block; background: pink; } }
/*  ********************************* FOOTER **********************************/
footer { background: #282828; position: relative; display: block; bottom: 0; left: 0; width: 100%; height: 6.875rem; line-height: 6.875rem; }
footer li { display: inline-block; }
footer li:nth-of-type(2) { position: absolute; top: 0; right: 0; padding: 0 1.25rem; }
footer li a { padding: 0 1.25rem; }

#work_list { display: block; width: 100%; margin: 0; padding: 0; }

.work_it { display: inline-block; position: relative; margin: 2%; }
.work_it a { display: block; height: 100%; width: 100%; background: transparent; }
.work_it a:hover, .work_it a:focus, .work_it a:active { background: -webkit-radial-gradient(closest-corner, #f2f2f2, rgba(255, 255, 255, 0)); background: radial-gradient(closest-corner, #f2f2f2, rgba(255, 255, 255, 0)); -webkit-transition: background 0.5s ease; transition: background 0.5s ease; }
.work_it a:hover .work_cap, .work_it a:focus .work_cap, .work_it a:active .work_cap { background: #282828; -webkit-transition: background 1s ease; transition: background 1s ease; }
.work_it img { width: 100%; }

.work_cap { padding: 0.6875rem 0; width: 100%; color: #f2f2f2; -webkit-font-smoothing: antialiased; background: transparent; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; }

@media only screen and (max-width: 32.5rem) { .work_it { width: 96%; } }
@media only screen and (min-width: 32.5625rem) and (max-width: 50rem) { .work_it { width: 46%; }
  .work_it:first-of-type { width: 96%; } }
@media only screen and (max-width: 50rem) { #works .content { max-width: 33.75rem; margin: 0 auto; } }
@media only screen and (min-width: 50.0625rem) { .work_it { width: 29.3333333333%; } }
#kfphoto { max-width: 400px; padding: 0 1.625rem 1.625rem 1.625rem; margin: 0 auto; }
#kfphoto img { display: block; border-radius: 100%; }

#aboutme, #aboutsite, #contact h2, #contact p, .contact_button { margin: 2%; padding: 0; display: inline-block; vertical-align: top; }

#contact h2 { width: 96%; }

#about h3 { text-align: left; }

@media only screen and (max-width: 21.3125rem) { .contact_button { background: transparent; width: 100%; margin: 0 auto; } }
@media only screen and (max-width: 32.5rem) { #aboutme, #aboutsite, #contact p, .contact_button { width: 96%; } }
@media only screen and (min-width: 32.5625rem) and (max-width: 75.0625rem) { #about .content, #contact .content { max-width: 50.625rem; margin: 0 auto; } }
@media only screen and (max-width: 75rem) { #contact .content { text-align: center; } }
@media only screen and (min-width: 75.0625rem) { #contact p, #aboutme { width: 54.3333333333%; }
  .contact_button, #aboutsite { width: 37.6666666667%; }
  .contact_button { text-align: right; } }
#showcase h2, #showcase h3, #showcase h4 { text-align: left; }
#showcase h2, #showcase h3 { margin: 0 2%; }
#showcase h4 { margin: 0.5em 0 0.25em; }
#showcase li { margin-bottom: 1em; }
#showcase li ul { list-style: disc; font-size: 1rem; margin: 1em 0 1em 1em; }
#showcase .button { margin: 2%; }

.showcase_container { display: block; position: relative; top: 0; }

.showcase_main_img, .showcase_info, .showcase_sub_img { display: inline-block; vertical-align: top; margin: 2%; }

@media only screen and (max-width: 75rem) { .showcase_main_img, .showcase_info, .showcase_sub_img { width: 96%; } }
@media only screen and (min-width: 50.0625rem) and (max-width: 75.0625rem) { .showcase_container { max-width: 45rem; margin: 0 auto; } }
@media only screen and (min-width: 75.0625rem) { .button { text-align: left; }
  .showcase_info { width: 37.6666666667%; float: right; }
  #showcase .button { clear: both; }
  .showcase_main_img, .showcase_sub_img { width: 54.3333333333%; } }