/* Page =================================================== */
html {
  background: #FFFFFF;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;}
   
#content {
 
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  background-color: transparent;
  font-size: 18px;
  font-size: 1.8rem;
  color: #111111;
  text-rendering: optimizeLegibility;
}

.sliding-kaka p{
    font-family: Inter;
}

.row .sliding-kaka h1,
.row .sliding-kaka h2 {
  margin: 0;
  font-family: Inter!important;
  color: #111111;
  font-size: 1em;
  text-rendering: optimizelegibility;
  font-weight: normal;
}
.row .sliding-kaka h1{
  margin-bottom: 0.1em;
  font-size: 48px;
  font-size: 2rem;
  line-height: 1.2em;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, Sans-serif;
  letter-spacing: -0.07em;
}



/* Eliminate FOUC - by hiding content inside .js class initially */
.js #content,
.js #content-detail,
.js .js #coder-img,
.js #designer-img,
.js #coder,
.js #designer,
.js #coder-bg,
.js #designer-bg,
.js #img-main,
.js #text-main,
.js #snaps,
.js #snaps-1,
.js #snaps-2,
.js #snaps-3,
.js #snaps-4,
.js #snaps-5,
.js #snaps-6,
.js #img-0,
.js #img-1,
.js #img-2,
.js #img-3,
.js #img-4,
.js #img-5,
.js #icons,
.js #aqua,
.js #pink,
.js #yellow,
.js #brown,
.js #red,
.js #footer,
.js #face-img,
.js .portfolio-main .thumbs li,
.js .thumbs .arrow-r,
.js #navi {
  opacity: 0;
}
.js #header {
  top: -92px;
  opacity: 0;
}
.js .thumbs .arrow-r {
  opacity: 0;
  right: 0;
}

/* Homepage Half Face */
.face {
  width: 100%;
  position: relative;
  /* Show default image */
  /* Descriptions */
  /* Inline media queries */
}
.face .face-img {
  display: block;
  margin: 0px;
}
.face a {
  color: #666666;
  text-decoration: none;
}
.face .coder,
.face .designer {
  position: absolute;
  width: 40%;
  display: block;
  z-index: 10;
  height: 15%;
  margin: auto;
  top: 0;
  bottom: 0;
}
.face .coder h1,
.face .designer h1 {
  font-size: 22px;
  font-size: 2.2rem;
}
.face .designer {
  left: 0;
}
.face .coder {
  right: 0;
  text-align: right;
}
.face .designer-img,
.face .coder-img,
.face .designer-bg,
.face .coder-bg,
.face .coder p,
.face .designer p {
  display: none;
}
@media only screen and (min-width: 321px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 26px;
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 376px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 30px;
    font-size: 3rem;
  }
}
@media only screen and (min-width: 500px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 42px;
    font-size: 4.2rem;
  }
}
@media only screen and (min-width: 600px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 47px;
    font-size: 4.7rem;
  }
}
@media only screen and (min-width: 750px) {
  .face .coder,
  .face .designer {
    width: 25%;
    height: 35%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 45px;
    font-size: 4.5rem;
  }
  .face .coder .more,
  .face .designer .more {
    display: none;
  }
  .face .coder p,
  .face .designer p {
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    margin: 0px;
  }
}
@media only screen and (min-width: 860px) {
  .face .coder,
  .face .designer {
    width: 30%;
    height: 30%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 58px;
    font-size: 5.8rem;
  }
  .face .coder p,
  .face .designer p {
    font-size: 17px;
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 1024px) {
  .face .coder,
  .face .designer {
    height: 40%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 70px;
    font-size: 3rem;
  }
  .face .coder .more,
  .face .designer .more {
    display: inline;
  }
}
@media only screen and (min-width: 1140px) {
  .face {
    width: 1040px;
    height: 600px;
    position: relative;
    /* Face images */
    /* Background images */
    /* Hide default image with no effects */
  }
  .face .coder,
  .face .designer {
    width: 520px;
    height: 600px;
    top: 0px;
    position: absolute;
  }
  .face .coder .description,
  .face .designer .description {
    position: absolute;
    top: 180px;
    width: 270px;
  }
  .face .coder .arrow,
  .face .designer .arrow {
    width: 85px;
    height: 140px;
    background: url(images/sprite.png) no-repeat;
    display: block;
    position: absolute;
    top: 20px;
  }
  .face .coder p,
  .face .designer p {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.4em;
  }
  .face .coder {
    text-align: left;
    right: 0px;
  }
  .face .coder .description {
    right: 0px;
  }
  .face .coder .arrow {
    right: 0px;
    background-position: 0px -751px;
  }
  .face .designer {
    left: 0px;
  }
  .face .designer .description {
    left: 0px;
  }
  .face .designer .arrow {
    left: 0px;
    background-position: 0px -892px;
  }
  .face .designer-img,
  .face .coder-img {
    width: 420px;
    height: 600px;
    position: absolute;
    top: 0;
    background: url(images/sprite-home.png) 0 0 no-repeat;
    display: block;
    z-index: 1;
  }
  .face .designer-img {
    background-position: 0px -600px;
    left: 100px;
  }
  .face .coder-img {
    background-position: 100% 0px;
    right: 100px;
  }
  .face .designer-bg,
  .face .coder-bg {
    width: 420px;
    height: 200px;
    position: absolute;
    bottom: 0px;
    background: url(images/sprite-home.png) 0 -1300px no-repeat;
    display: block;
  }
  .face .designer-bg {
    left: 100px;
  }
  .face .coder-bg {
    right: 100px;
    background-position: 100% -1300px;
  }
  .face .face-img {
    display: none;
  }
}