/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  outline: none;
  text-decoration: none; }

html, body {
  height: 100%;
  margin: 0; }

body {
  background-color: #f8f8f8;
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none; }

canvas {
  position: absolute;
  top: 0;
  left: 0; }

h1 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.3em; }

h3 {
  font-size: 0.8em;
  margin: 6em 2em 2em 2em;
  line-height: 1.8em; }

ul {
  text-align: center;
  margin-top: 1em; }

li {
  display: inline;
  font-size: 0.8em;
  margin-left: 1.2em;
  width: 25%;
  letter-spacing: 0.10em;
  text-align: center; }

.txt-rotate {
  background: linear-gradient(to right, #C33764 0%, #1D2671 100%);
  font-weight: 600;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.title {
  font-size: 2em;
  text-align: center;
  padding-top: 1em;
  left: 50%; }

.text {
  margin: 2em 1em 1em 1em;
  font-size: 0.8em; }
  .text p {
    display: block;
    line-height: 1.6em; }

.container {
  height: 100%; }
  .container #intro {
    text-align: center;
    color: #404040;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .container #intro .hero {
      position: relative; }
      .container #intro .hero h1 {
        margin-bottom: 0.7em;
        letter-spacing: 0.009em; }
      .container #intro .hero h3 {
        margin-bottom: 5em; }
    .container #intro a {
      display: inline-block;
      text-transform: uppercase;
      font-weight: 600;
      position: relative;
      color: #6420c8; }
      .container #intro a:after {
        background: none repeat scroll 0 0 transparent;
        bottom: -0.2em;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: #C33764;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0; }
      .container #intro a:hover:after {
        width: 98%;
        left: 0; }
  .container #about {
    position: relative;
    text-align: center;
    color: #404040;
    height: 100%;
    width: 100%; }
    .container #about .overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      background: -moz-linear-gradient(bottom, rgba(114, 81, 109, 0.2) 85%, #eeeeee 100%);
      background: -webkit-linear-gradient(bottom, rgba(248, 248, 248, 0.2) 85%, #f8f8f8 100%);
      background: linear-gradient(bottom, rgba(114, 81, 109, 0.2) 85%, #f8f8f8 100%);
      z-index: -1; }
    .container #about .photo {
      display: block;
      width: 90px;
      height: 90px;
      background: url(../images/Til.jpg) no-repeat 0 0;
      background-size: cover;
      overflow: hidden;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 2em; }
  .container #work {
    position: relative;
    color: #404040;
    height: 100%;
    width: 100%; }
    .container #work .intro-block {
      position: relative;
      align-items: center;
      height: 100%; }
    .container #work .hex-bg-big-text {
      position: absolute;
      z-index: -1;
      height: 100%;
      width: 100%; }
    .container #work .centerfold-wrap {
      position: relative; }
    .container #work .hoverblock {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .container #work .code-display {
      position: relative;
      color: #f6f6f6;
      width: 100%;
      margin-top: 100px; }
    .container #work .code-display h1 {
      color: #333; }
    .container #work .code-description {
      width: 100%;
      height: 100%;
      color: #333; }
    .container #work .code-description * {
      display: none; }
    .container #work .code-description > div {
      padding: 0px 40px;
      font-size: 16px; }
    .container #work .code-description > div {
      padding: 0px 40px;
      font-size: 16px; }
      .container #work .code-description > div p.tags {
        margin-top: 30px;
        color: #404040; }
    .container #work .desc-active {
      display: block;
      position: relative; }
    .container #work .desc-active > p > span {
      margin-top: 30px;
      display: inline; }
    .container #work p.code-title {
      position: relative;
      font-size: 2em; }
    .container #work .desc-active::after {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 50px;
      left: 0;
      content: "";
      opacity: .2;
      z-index: -1; }
      .container #work .desc-active::after .hex-master-wrap {
        position: relative;
        min-width: 225px;
        height: 300px; }
    .container #work .border-1,
    .container #work .border-2,
    .container #work .border-3 {
      position: absolute;
      width: 100%;
      top: 30px;
      left: 0;
      z-index: 2;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
    .container #work .border-2 {
      transform: rotate(60deg); }
    .container #work .border-3 {
      transform: rotate(120deg); }
    .container #work .border-3::before {
      display: none;
      position: absolute;
      content: "";
      bottom: 10%;
      left: 42px;
      width: 50%;
      height: 83%;
      background-color: rgba(255, 255, 255, 0);
      border-top: 1px solid;
      border-bottom: 1px solid;
      border-color: white;
      border-radius: 50%;
      visibility: visible;
      z-index: -1;
      /* transform: rotate(60deg) */ }
    .container #work .intro-block .grid-1,
    .container #work .intro-block .grid-2,
    .container #work .intro-block .grid-3 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 75%;
      margin: 0 auto;
      margin-bottom: -50px; }
    .container #work .intro-block .grid-3 {
      margin-bottom: -50px; }
    .container #work .intro-block .grid-2,
    .container #work .intro-block .grid-3 {
      margin-top: -50px; }
    .container #work .hex-wrap {
      position: relative;
      width: 65px;
      height: 80px;
      margin: 1em 0em 1em 0.5em;
      border-top-left-radius: 100%;
      border-top-right-radius: 100%;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
      border: 0px solid; }
    .container #work .hex-wrap .skillName {
      font-size: 1em;
      position: absolute;
      top: 28px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 50px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      cursor: pointer; }
    .container #work .hexagon {
      width: 300px;
      height: 150px;
      margin: 15px 0 0 -75px;
      overflow: hidden;
      visibility: hidden;
      -webkit-transform: rotate(120deg);
      -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
      -o-transform: rotate(120deg);
      transform: rotate(90deg);
      cursor: pointer;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
    .container #work .hex-inner-1 {
      overflow: hidden;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
      -o-transform: rotate(-60deg);
      transform: rotate(-60deg); }
    .container #work .hex-inner-2 {
      position: relative;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50%;
      /* background-image: url(http://placekitten.com/240/240) */
      visibility: visible;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
      -o-transform: rotate(-60deg);
      transform: rotate(-60deg);
      overflow: hidden; }
    .container #work .hex-inner-2::before, .container #work .hex-inner-2::after {
      position: absolute;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
      top: 0;
      left: 0;
      height: 110%;
      width: 110%;
      content: "";
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg); }
    .container #work .hex-init {
      position: absolute;
      top: 36px;
      left: 0px;
      height: 46%;
      width: 100%;
      z-index: 9;
      transform: rotate(-60deg);
      cursor: pointer; }
    .container #work .net {
      background-color: #672d79; }
    .container #work .js {
      background-color: #f5da55; }
    .container #work .html5 {
      background-color: #f14a29; }
    .container #work .css3 {
      background-color: #3b5998; }
    .container #work .react {
      background-color: #1da1f2; }
    .container #work .mobile {
      background-color: #1da1f2; }
    .container #work .design {
      background-color: #f14a29; }
    .container #work .hex-init::after {
      background-color: inherit;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      content: "";
      transform: rotate(-60deg); }
    .container #work .hex-init::before {
      background-color: inherit;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      content: "";
      transform: rotate(60deg); }
  .container #contact {
    position: relative;
    text-align: center;
    color: #404040;
    height: 100%;
    width: 100%; }
    .container #contact .social {
      margin-top: 3em;
      padding: 0.1em; }
      .container #contact .social span {
        color: #999999;
        margin-bottom: 0;
        font-size: 1.5em;
        line-height: 100%;
        max-width: 20em; }
        .container #contact .social span a {
          display: inline-block;
          font-size: 1em;
          color: rgba(100, 32, 200, 0.4);
          margin: 0 1em;
          margin-bottom: 0.6em;
          transform: rotateY(0deg);
          transition: transform 0.2s ease-in-out, color 0.2s linear; }
          .container #contact .social span a:hover {
            color: #a3206d;
            transform: rotateY(360deg);
            transition: transform 0.6s ease-in-out, color 0.4s linear; }
    .container #contact .text {
      margin-top: 5em;
      position: relative; }
      .container #contact .text a {
        position: relative; }
        .container #contact .text a:after {
          background: none repeat scroll 0 0 transparent;
          bottom: -0.2em;
          content: "";
          display: block;
          height: 2px;
          left: 50%;
          position: absolute;
          background: #C33764;
          transition: width 0.3s ease 0s, left 0.3s ease 0s;
          width: 0; }
        .container #contact .text a:hover:after {
          width: 98%;
          left: 0; }
      .container #contact .text span {
        color: #551a8b;
        font-size: 1em; }
      .container #contact .text .resume {
        font-size: 2em; }
  .container .bounce {
    -moz-animation: bounce 1s infinite;
    -webkit-animation: bounce 1s infinite;
    animation: bounce 1s infinite; }

@media only screen and (min-width: 600px) {
  h1 {
    font-size: 4em; }
  h3 {
    font-size: 1.5em; }
  .title {
    font-size: 4em;
    padding-top: 1.2em;
    left: 50%; }
  .text {
    margin-top: 2em;
    font-size: 1.3em; }
  .container {
    height: 100%; }
    .container #about {
      position: relative;
      text-align: center;
      color: #404040;
      height: 100%;
      width: 100%; }
      .container #about .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: transparent;
        background: -moz-linear-gradient(bottom, rgba(114, 81, 109, 0.2) 85%, #eeeeee 100%);
        background: -webkit-linear-gradient(bottom, rgba(248, 248, 248, 0.2) 85%, #f8f8f8 100%);
        background: linear-gradient(bottom, rgba(114, 81, 109, 0.2) 85%, #f8f8f8 100%);
        z-index: -1; }
      .container #about .photo {
        display: block;
        width: 200px;
        height: 200px;
        background: url(../images/Til.jpg) no-repeat 0 0;
        background-size: cover;
        overflow: hidden;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto; }
    .container #work .intro-block {
      position: relative;
      align-items: center;
      height: 100%;
      margin-top: 5em; }
    .container #work .hex-bg-big-text {
      position: absolute;
      z-index: -1;
      height: 100%;
      width: 100%; }
    .container #work .centerfold-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1; }
    .container #work .hoverblock {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .container #work .code-display {
      position: relative;
      color: #f6f6f6;
      width: 600px;
      height: 260px;
      margin-left: 50px; }
    .container #work .code-display h1 {
      color: #333; }
    .container #work .code-description {
      width: 100%;
      height: 100%;
      color: #333; }
    .container #work .code-description * {
      display: none; }
    .container #work .code-description > div {
      padding: 0px 40px;
      font-size: 26px; }
    .container #work .code-description > div {
      padding: 0px 40px;
      font-size: 26px; }
      .container #work .code-description > div p.tags {
        margin-top: 30px;
        color: #404040; }
    .container #work .desc-active {
      display: block;
      position: relative; }
    .container #work .desc-active > p > span {
      margin-top: 30px;
      display: inline; }
    .container #work p.code-title {
      position: relative;
      font-size: 6rem; }
    .container #work .desc-active::after {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 50px;
      left: 0;
      content: "";
      opacity: .2;
      z-index: -1; }
      .container #work .desc-active::after .hex-master-wrap {
        position: relative;
        min-width: 225px;
        height: 300px; }
    .container #work .border-1,
    .container #work .border-2,
    .container #work .border-3 {
      position: absolute;
      width: 100%;
      top: 46px;
      left: 0;
      z-index: 2;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
    .container #work .border-2 {
      transform: rotate(60deg); }
    .container #work .border-3 {
      transform: rotate(120deg); }
    .container #work .border-3::before {
      display: none;
      position: absolute;
      content: "";
      bottom: 10%;
      left: 42px;
      width: 50%;
      height: 83%;
      background-color: rgba(255, 255, 255, 0);
      border-top: 1px solid;
      border-bottom: 1px solid;
      border-color: white;
      border-radius: 50%;
      visibility: visible;
      z-index: -1;
      /* transform: rotate(60deg) */ }
    .container #work .intro-block .grid-1,
    .container #work .intro-block .grid-2,
    .container #work .intro-block .grid-3 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 75%;
      margin: 0 auto;
      margin-bottom: -50px; }
    .container #work .intro-block .grid-3 {
      margin-bottom: -50px; }
    .container #work .intro-block .grid-2,
    .container #work .intro-block .grid-3 {
      margin-top: -50px; }
    .container #work .hex-wrap {
      position: relative;
      width: 150px;
      height: 190px;
      margin: 0 1em 0 0;
      border-top-left-radius: 100%;
      border-top-right-radius: 100%;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
      border: 0px solid; }
    .container #work .hex-wrap .skillName {
      font-size: 2em;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 5px;
      margin: auto;
      width: 100%;
      height: 58px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      cursor: pointer; }
    .container #work .hexagon {
      width: 400px;
      height: 150px;
      margin: 15px 0 0 -75px;
      overflow: hidden;
      visibility: hidden;
      -webkit-transform: rotate(120deg);
      -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
      -o-transform: rotate(120deg);
      transform: rotate(90deg);
      cursor: pointer;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
    .container #work .hex-inner-1 {
      overflow: hidden;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
      -o-transform: rotate(-60deg);
      transform: rotate(-60deg); }
    .container #work .hex-inner-2 {
      position: relative;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50%;
      /* background-image: url(http://placekitten.com/240/240) */
      visibility: visible;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
      -o-transform: rotate(-60deg);
      transform: rotate(-60deg);
      overflow: hidden; }
    .container #work .hex-inner-2::before, .container #work .hex-inner-2::after {
      position: absolute;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
      top: 0;
      left: 0;
      height: 110%;
      width: 110%;
      content: "";
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg); }
    .container #work .hex-init {
      position: absolute;
      top: 46px;
      left: 0px;
      height: 46%;
      width: 100%;
      z-index: 9;
      transform: rotate(-60deg);
      cursor: pointer; }
    .container #work .net {
      background-color: #672d79; }
    .container #work .js {
      background-color: #f5da55; }
    .container #work .html5 {
      background-color: #f14a29; }
    .container #work .css3 {
      background-color: #3b5998; }
    .container #work .react {
      background-color: #1da1f2; }
    .container #work .mobile {
      background-color: #1da1f2; }
    .container #work .design {
      background-color: #f14a29; }
    .container #work .hex-init::after {
      background-color: inherit;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      content: "";
      transform: rotate(-60deg); }
    .container #work .hex-init::before {
      background-color: inherit;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      content: "";
      transform: rotate(60deg); } }

@media only screen and (min-width: 769px) {
  h1 {
    font-size: 5em; }
  h3 {
    font-size: 1.3em; }
  ul {
    text-align: center;
    margin-top: 2em; }
  li {
    display: inline;
    padding: 0 1.2em;
    font-size: 1.2em;
    margin-left: 50px;
    width: 25%;
    letter-spacing: 0.10em;
    text-align: center; }
  .container {
    height: 100%; }
    .container #about, .container #work, .container #intro {
      position: relative;
      color: #404040;
      height: 100%;
      width: 100%; }
      .container #about .arrow,
      .container #about .arrow:before, .container #work .arrow,
      .container #work .arrow:before, .container #intro .arrow,
      .container #intro .arrow:before {
        position: absolute;
        left: 49%;
        bottom: 15px; }
      .container #about .arrow, .container #work .arrow, .container #intro .arrow {
        width: 40px;
        height: 70px;
        box-shadow: inset 0 0 0 1px #4a569d;
        border-radius: 25px;
        bottom: 50px; }
      .container #about .arrow:before, .container #work .arrow:before, .container #intro .arrow:before {
        content: '';
        width: 8px;
        height: 8px;
        background: #4a569d;
        margin-left: -4px;
        top: 8px;
        border-radius: 4px;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-name: scroll; }
    .container #contact {
      position: relative;
      text-align: center;
      color: #404040;
      height: 100%;
      width: 100%; }
      .container #contact .social {
        margin-top: 5em;
        padding: 0.1em; }
        .container #contact .social span {
          color: #999999;
          margin: 0;
          font-size: 1.5em;
          line-height: 100%;
          max-width: 20em; }
          .container #contact .social span a {
            display: inline-block;
            font-size: 2em;
            color: rgba(100, 32, 200, 0.4);
            margin: 0 1em;
            margin-bottom: 0.6em;
            transform: rotateY(0deg);
            transition: transform 0.2s ease-in-out, color 0.2s linear; }
            .container #contact .social span a:hover {
              color: #a3206d;
              transform: rotateY(360deg);
              transition: transform 0.6s ease-in-out, color 0.4s linear; }
      .container #contact .text {
        margin-top: 5em;
        position: relative; }
        .container #contact .text a {
          position: relative; }
          .container #contact .text a:after {
            background: none repeat scroll 0 0 transparent;
            bottom: -0.2em;
            content: "";
            display: block;
            height: 2px;
            left: 50%;
            position: absolute;
            background: #C33764;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0; }
          .container #contact .text a:hover:after {
            width: 98%;
            left: 0; }
        .container #contact .text span {
          color: #551a8b;
          font-size: 1em; } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-10px); }
  60% {
    transform: translateY(-5px); } }

@keyframes scroll {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(46px); } }