@charset "UTF-8";
/* Import partials from `sass_dir` (defaults to `_sass`) */
/* Fonts */
@import url("https://fonts.googleapis.com/css?family=Lato|Merriweather");
/* Variables */
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.column, .columns { width: 100%; float: left; box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) { .container { width: 85%; padding: 0; } }
/* For devices larger than 550px */
@media (min-width: 550px) { .container { width: 80%; }
  .column, .columns { margin-left: 4%; }
  .column:first-child, .columns:first-child { margin-left: 0; }
  .one.column, .one.columns { width: 4.66666666667%; }
  .two.columns { width: 13.3333333333%; }
  .three.columns { width: 22%; }
  .four.columns { width: 30.6666666667%; }
  .five.columns { width: 39.3333333333%; }
  .six.columns { width: 48%; }
  .seven.columns { width: 56.6666666667%; }
  .eight.columns { width: 65.3333333333%; }
  .nine.columns { width: 74.0%; }
  .ten.columns { width: 82.6666666667%; }
  .eleven.columns { width: 91.3333333333%; }
  .twelve.columns { width: 100%; margin-left: 0; }
  .one-third.column { width: 30.6666666667%; }
  .two-thirds.column { width: 65.3333333333%; }
  .one-half.column { width: 48%; }
  /* Offsets */
  .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; }
  .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; }
  .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; }
  .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; }
  .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; }
  .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; }
  .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; }
  .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; }
  .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; }
  .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; }
  .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; }
  .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
  .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; } }
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* { margin: 0; padding: 0; }

/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html { font-size: 62.5%; }

body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; color: #222; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: 300; }

h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; }

h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }

h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }

h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }

h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }

h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) { h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; } }
p { margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #1EAEDB; }

a:hover { color: #0FA0CE; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 8px 30px; text-align: center; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 0px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; }

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; outline: 0; }

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; }

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul { list-style: circle inside; }

ol { list-style: decimal inside; }

ol, ul { padding-left: 0; margin-top: 0; }

ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }

li { margin-bottom: 1rem; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; }

pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; }

th:first-child, td:first-child { padding-left: 0; }

th:last-child, td:last-child { padding-right: 0; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button { margin-bottom: 1rem; }

input, textarea, select, fieldset { margin-bottom: 1.5rem; }

pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width { width: 100%; box-sizing: border-box; }

.u-max-full-width { max-width: 100%; box-sizing: border-box; }

.u-pull-right { float: right; }

.u-pull-left { float: left; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after, .row:after, .u-cf { content: ""; display: table; clear: both; }

body { background-color: #EFEFEF; color: #444; font-family: "Merriweather", Georgia, serif; margin: 0; line-height: 1.6; font-size: 1.5rem; }

@media (min-width: 330px) { body { font-size: 1.8rem; } }
.container { margin: 0px auto; max-width: 700px; }

a, a img { -webkit-transition: 500ms ease-out; -moz-transition: 500ms ease-out; -o-transition: 500ms ease-out; transition: 500ms ease-out; }

button { font-size: 1.8rem; font-family: "Merriweather", Georgia, serif; margin: 6px 0px; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }

button:hover { background-color: #c9c9c9; }

.top { position: relative; }
.top a:link, .top a:visited, .top a:link:active, .top a:visited:active { color: #444; text-decoration: underline; cursor: pointer; }
.top a:hover { color: darkturquoise; text-decoration: none; }
.top .brand { padding: 32px 0px 10px 0px; }
.top .brand h1 { border-left: 14px solid darkturquoise; padding-left: 12px; margin: 0; color: #111; font-family: "Lato", sans-serif; font-weight: 600; }
.top .icon { font-size: 3rem; margin: 0 6px; }
.top .contact { margin-bottom: 72px; }
.top .contact .resume { margin-bottom: 48px; }
.top .scroll { display: block; position: absolute; bottom: 12px; left: 24px; font-family: "Lato", sans-serif; font-size: 1.5rem; }

@media (min-width: 550px) { .top { height: 100vh; }
  .top .brand { padding: 144px 8px 0px 0px; }
  .top .bio { margin: 48px 0 24px 0; }
  .top .scroll { display: block; position: absolute; bottom: 24px; left: 64px; } }
.bottom { background-color: #333; color: #EFEFEF; margin: 0 auto; }
.bottom a:link, .bottom a:visited, .bottom a:link:active, .bottom a:visited:active { color: #EFEFEF; text-decoration: underline; cursor: pointer; }
.bottom a:hover { color: darkturquoise; text-decoration: none; }
.bottom a:hover img { opacity: 0.5; }
.bottom .projects { padding: 56px 8px 0px 0px; font-family: "Lato", sans-serif; font-weight: 600; }
.bottom .bordered { border-top: 1px solid #EFEFEF; }
.bottom .section { margin-top: 16px; padding-top: 16px; }
.bottom .section .summary { width: 100%; overflow: auto; font-size: 1.5rem; }
.bottom .section .summary .title { font-size: 1.8rem; margin-bottom: 0.5rem; }
.bottom .section .summary .thumb { max-width: 300px; margin: 4px 16px 16px 0px; float: left; }
.bottom .footer { padding-top: 48px; padding-bottom: 72px; }

@media (min-width: 550px) { #bottom #projects { padding: 100px 8px 0px 0px; }
  #bottom .section { margin-top: 32px; padding-top: 32px; }
  #bottom .section .title { font-size: 2.52rem; }
  #bottom .section .thumb { margin: 4px 16px 16px 0px; } }