@import url("../css/reset.css");
@import url("../css/grid.css");
@import url("../css/type.css");
::selection {
  background: lightcoral;
  color: white; }

::-moz-selection {
  background: lightcoral;
  color: white; }

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg); } }
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
body {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  line-height: 200%;
  color: #535c61; }

h1, h2 {
  font-size: 275%;
  font-weight: 500;
  margin: 0; }

p {
  font-family: 'calendas_plusregular', serif;
  font-weight: 400;
  font-size: 130%;
  margin: 0; }

a {
  color: #535c61;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid lightcoral;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }
  a:hover {
    color: lightcoral; }
button {
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	font-size: 125%;
	padding: 0;
	border: 0;
}
button a {
	border: none;
}

.header {
  position: relative;
  text-align: center;
  height: 75px;
  border-bottom: 4px solid #faf9f5; }
  .header a {
    padding-bottom: 0;
    border-bottom: none; }
  .header a:after {
    color: lightcoral;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    opacity: 0;
    position: absolute;
    left: 41%;
    top: 25px;
    content: '< \0020 Home'; }
  .header a:hover:after {
    opacity: 100;
    left: 42%; }
  .header svg {
    height: 75px;
    width: auto; }

.bio, .banner {
  background: white;
  background: -moz-linear-gradient(top, white 0%, #faf9f5 100%);
  background: -webkit-linear-gradient(top, white 0%, #faf9f5 100%);
  background: linear-gradient(to bottom, white 0%, #faf9f5 100%);
  padding-top: 100px; }
  .bio .me img {
    display: block;
    width: auto;
    height: 300px; }
  .bio .text {
    position: relative;
    text-align: right; }
    .bio .text svg {
      width: auto;
      height: 100px; }
    .bio .text h1 {
      position: relative;
      padding: 0 0 35px;
      z-index: 1; }
      .bio .text h1 img {
        z-index: -1;
        position: absolute;
        top: -25px;
        right: -45px;
        width: 100px;
        height: 100px;
        -webkit-animation: spin 5s linear infinite;
        -moz-animation: spin 5s linear infinite;
        animation: spin 5s linear infinite; }
    .bio .text p {
      z-index: 99;
      padding-bottom: 25px; }
      .bio .text p:last-child {
        padding-bottom: 0; }
  .bio .wrap .grids {
    overflow: visible; }

.banner {
  padding-bottom: 100px;
}

.work, .content {
  padding-top: 100px;
  border-bottom: 4px solid #faf9f5; }
  .work h1, .content h2 {
    font-size: 200%;
    padding: 50px 0 35px; }
  .work p, .content p {
    font-size: 125%;
    line-height: 175%;
    padding-bottom: 25px; }
    .work p:last-child, .content p:last-child {
      padding-bottom: 0; }
  .work .browser {
    position: relative; }
    .work .browser:before {
      font-weight: 400;
      content: "Scroll here...";
      background-color: rgba(240, 128, 128, 0.75);
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
      z-index: 999;
      padding: 0 10px;
      border-radius: 4px; }
    .work .browser:hover:before {
      opacity: 0; }
    .work .browser .browser-top img {
      display: block; }
    .work .browser .site {
      height: 400px;
      overflow-y: scroll;
      cursor: row-resize; }
      .work .browser .site img {
        display: block;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%); }
        .work .browser .site img:hover {
          -webkit-filter: grayscale(0);
          filter: grayscale(0); }

.content {
  padding-bottom: 100px;
}
.content .stacked {
	display: block;
	padding-bottom: 50px;
}
.content .stacked:last-child {
	padding-bottom: 0;
}

.private {
  background: white;
  background: -moz-linear-gradient(top, white 0%, #faf9f5 100%);
  background: -webkit-linear-gradient(top, white 0%, #faf9f5 100%);
  background: linear-gradient(to bottom, white 0%, #faf9f5 100%);
  padding: 100px 0 75px; }
  .private iframe {
    display: block;
    margin: 0 auto;
    width: 100%; }
  .private h1 {
    text-align: center;
    font-size: 200%;
    line-height: 125%;
    padding: 50px 0 25px; }
  .private p {
    text-align: center; }
    .private p a {
      font-family: 'Rubik', sans-serif;
      color: lightcoral; }
      .private p a:hover {
        color: #535c61;
        border-bottom-color: #535c61; }
    .private p span {
      margin: 0 25px; }

.social {
  text-align: center;
  margin-top: 75px; }
  .social ul {
    display: block;
    height: 25px;
    padding: 0;
    margin: 0; }
    .social ul li {
      display: inline-block; }
      .social ul li a {
        display: inline-block;
        font-size: 125%;
        font-weight: 400;
        padding: 0;
        border: 0; }
        .social ul li a img {
          height: 25px;
          width: auto; }
    .social ul span {
      color: lightcoral;
      font-weight: 900;
      margin: 0 25px; }

.footer {
  margin-top: 75px;
  padding: 50px 0 60px;
  background: #faf9f5;
  background: -moz-linear-gradient(top, #faf9f5 0%, white 100%);
  background: -webkit-linear-gradient(top, #faf9f5 0%, white 100%);
  background: linear-gradient(to bottom, #faf9f5 0%, white 100%); }
  .footer p:before {
    font-family: 'Rubik', sans-serif;
    display: block;
    color: lightcoral;
    text-transform: uppercase;
    font-size: 75%;
    letter-spacing: 1px; }
  .footer .credit p:before {
    content: "Thanks for stopping by"; }
  .footer .email {
    text-align: right; }
    .footer .email p:before {
      content: "Get in touch"; }
    .footer .email p a {
      cursor: pointer;
      border: 0; }

/* TABLET */
/* MOBILE */
@media only screen and (max-width: 650px) {
  .wrap {
    padding: 0 20px; }

  .bio {
    padding: 50px 0; }
    .bio .me {
      margin-bottom: 25px; }
      .bio .me img {
        margin: 0 auto; }
    .bio .text {
      text-align: left; }
      .bio .text h1 img {
        display: none; }

  .work {
    padding-top: 50px; }
    .work .browser {
      margin-top: 25px; }
      .work .browser:before {
        display: none; }
      .work .browser .site {
        height: 250px;
        overflow-y: hidden; }
        .work .browser .site img {
          -webkit-filter: grayscale(0);
          filter: grayscale(0); }

.content img {
	padding-top: 25px;
}
.content .stacked {
    padding-bottom: 0;
}

  .private {
    padding: 50px 0 25px; }

  .social ul {
    height: auto; }
    .social ul span {
      margin: 0 10px; }

  .footer .credit, .footer .email {
    text-align: center; }
  .footer .credit {
    margin-bottom: 25px; } }