#ch,
h2,
p {
  font-weight: 400;
  color: #222;
}

#top-arrow a,
#top-arrow a:link {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  letter-spacing: .2em;
  position: absolute;
  margin: 0;
}

figcaption,
figure,
footer,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

#ch,
h1,
h2,
p {
  padding: .5em 1.4em;
}

a:link {
  outline: rgba(255,255,255,.01) solid 1px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

a:visited {
  color: inherit;
  transition: all .3s linear;
}

a:active,
a:visited {
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -o-transition: all .3s linear;
}

a:active {
  outline: red solid 1px;
  color: red;
  transition: all .3s linear;
}

a:hover,
article:hover a {
  color: #00f;
}

a:hover {
  outline: green solid 1px;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

b,
strong {
  font-weight: 700;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

#ch {
  font-style: normal;
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: .83em;
  -webkit-margin-after: .83em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

small {
  font-size: 80%;
}

img {
  border: 0;
  opacity: 1;
}

 {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

address,
article {
  width: 100%;
  position: relative;
  float: left;
  transition: all .3s linear;
  overflow: hidden;
}

address,
article,
article:hover {
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -o-transition: all .3s linear;
}

address h2,
address ul,
article h2,
article ul {
  position: relative;
  z-index: 2;
}

article:hover {
  background: #E1E192;
  text-shadow: 1.5em -.45em 3px rgba(255,200,200,.7),1em -.3em 3px rgba(200,255,200,.7),.5em -.15em 3px rgba(200,200,255,.7);
  transition: all .3s linear;
}

article:hover a:hover {
  color: #AB031A;
  text-shadow: none;
}

.visual-portfolio ul li {
  width: 50%;
}

.visual-portfolio ul li img {
  width: 100%;
}

nav ul li:before {
  content: '#';
  position: relative;
  float: left;
  margin-right: .2em;
}

.codepen {
  opacity: .1;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  left: 0;
  padding: 0;
  border: 4px double #EDEDFF;
  border-radius: 5px;
}

#ch:before,
h2:before {
  content: '# ';
}

footer small {
  position: relative;
  float: right;
  text-align: right;
  margin: 0 8em 2em 0;
}

#location a,
#location img {
  padding: 0;
  margin: 0;
}

#location {
  display: inline-block;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#location img {
  display: inline-block;
  height: .7em;
  width: .7em;
}

#logo-holder,
#top-arrow a {
  display: block;
  cursor: pointer;
}

#location cite {
  color: transparent;
}

#experiments ul li img {
  width: initial;
}

#smarties {
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
}

#smarties-placehlider {
  background: url(../experiments/smarties/smarties.png) no-repeat;
  background-size: 100%;
  width: 100%;
  height: 300px;
  height: 30vw;
}

#editable:focus {
  border: none;
  outline: 0;
}

p::selection {
  background: #0f0;
  color: lilac;
}

h1::selection {
  background: #0f0;
  color: lilac;
}

h2::selection {
  background: #0f0;
  color: lilac;
}

img::selection {
  background: #ff0;
}

p::-moz-selection {
  background: #0f0;
  color: lilac;
}

h2::-moz-selection {
  background: #0f0;
  color: lilac;
}

#top-arrow {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: -10;
  opacity: 0;
  -webkit-transition: opacity 1.2s ease;
  -moz-transition: opacity 1.2s ease;
  -o-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease;
}

#top-arrow a,
#top-arrow a svg {
  width: 100%;
  height: 100%;
}

#top-arrow a {
  padding: 0;
  background: 0 0;
  -webkit-transition: -webkit-transform 1.2s ease;
  -moz-transition: -moz-transform 1.2s ease;
  -o-transition: -o-transform 1.2s ease;
  transition: transform 1.2s ease;
  opacity: inherit;
}

#top-arrow a:link {
  outline: 0;
}

#top-arrow a:active,
#top-arrow a:hover,
#top-arrow a:link,
#top-arrow a:visited {
  background-color: transparent;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0);
  }

  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0);
  }

  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

#logo-holder {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@media only screen and (max-width:40em) {
  #experiments ul li,
  #logos-and-branding ul li,
  #prototypes ul li,
  #websites ul li {
    width: 80%;
  }

  #top-arrow {
    position: fixed;
  }

  #top-arrow a {
    font-size: 20vmin;
    bottom: 0;
    right: 0;
  }

  #smarties-placehlider {
    height: 300px;
    height: 50vw;
  }
}

@media only screen and (min-width:40.063em) and (max-width:64em) {
  html {
    background-color: #e6ebff;
  }

  #experiments ul li,
  #logos-and-branding ul li,
  #prototypes ul li,
  #websites ul li {
    width: 80%;
  }

  #smarties-placehlider {
    height: 300px;
    height: 50vw;
  }
}

@media print {
  blockquote,
  img,
  pre,
  tr {
    page-break-inside: avoid;
  }

  * {
    background: 0 0!important;
    text-shadow: none!important;
    filter: none!important;
    -ms-filter: none!important;
    border-radius: none;
  }

  hr,
  ul,
  ul li {
    border: none;
  }

  #oldschool {
    display: block;
  }

  #oldschool img {
    width: 75%;
    margin-left: .9in;
  }

  #oldschool h1 {
    margin-left: .7in;
  }

  #oldschool h3 {
    margin-left: 2.3in;
  }

  #accounts svg,
  #apis svg,
  #bookmarked,
  #contact,
  #contents,
  #core-technologies svg,
  #editable,
  #experiments,
  #maya,
  #stats {
    display: none;
  }

  svg line {
    fill: #F0F;
    stroke-dasharray: none;
  }

  #accounts {
    -webkit-transform: rotate(-30deg) skew(10deg,2deg);
    -moz-transform: rotate(-30deg) skew(10deg,2deg);
    -o-transform: rotate(-30deg) skew(10deg,2deg);
    -ms-transform: rotate(-30deg) skew(10deg,2deg);
    transform: rotate(-30deg) skew(10deg,2deg);
  }

  #accounts:after {
    content: "Don't worry, your printer is fine ;-)";
    -webkit-transform: skew(12deg,2deg);
    -moz-transform: skew(12deg,2deg);
    -o-transform: skew(12deg,2deg);
    -ms-transform: skew(12deg,2deg);
    transform: skew(12deg,2deg);
    text-shadow: 0 0 5px #000;
    opacity: .3;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  blockquote,
  pre {
    border: 1px solid #999;
  }

  thead {
    display: table-header-group;
  }

  img {
    max-width: 100%!important;
  }

@page {
    margin: .5cm;
}

  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  a:after {
    content: attr(href);
    font-size: .8em;
    font-weight: 400;
    color: #F0F;
  }
}

body {
  width: 100%;
}

img {
  width: 50%;
}