/* Reset =================================================== */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: bottom;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
/* Variables =================================================== */
/* Mixins =================================================== */
.clearfix,
section,
.row {
  *zoom: 1;
}
.clearfix:before,
section:before,
.row:before,
.clearfix:after,
section:after,
.row:after {
  display: table;
  content: "";
}
.clearfix:after,
section:after,
.row:after {
  clear: both;
}
/* Effects =================================================== */
/* Animate all */
.animate,
.top,
header nav li a,
.thumbs li {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
/* Animate opacity */
.animate-opacity,
.social a,
.logo,
.contact a {
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}
/* Rounded corners top only */
.rounded-top,
.bar-chart li {
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
}
/* Text Shadow */
.text-shadow-black,
.bar-chart .percent,
.bar-chart .skill,
a.button,
.submit {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
}
.text-shadow-white,
.bar-chart .label,
.concept,
.header-center h3 {
  text-shadow: 0px 1px 1px #ffffff;
}
.shadow {
  -webkit-appearance: none;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
/* Helpers =================================================== */
.align-c {
  text-align: center !important;
}
.align-l {
  text-align: left !important;
}
.align-r {
  text-align: right !important;
}
.nopad-t {
  padding-top: 0 !important;
}
.nopad-b {
  padding-bottom: 0 !important;
}
.nopad {
  padding: 0 !important;
}
.margin-b {
  margin-bottom: 80px !important;
}
.margin-bs {
  margin-bottom: 25px !important;
}
.nomargin {
  margin: 0 !important;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
span.text-wide {
  display: none;
}
.pad {
  text-align: left;
  padding: 25px 0px;
  padding-bottom: 0px;
}
.pad.side {
  padding: 0px;
}
/* Page =================================================== */
html {
  background: #FFFFFF;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Source Sans Pro',  sans-serif;
  background-color: transparent;
  font-size: 20px;
  font-size: 2rem;
  color: #555555;
  text-rendering: optimizeLegibility;
}
header {
  background: #111111 url(../images/sprite-mobile.png) repeat-x;
  height: 62px;
  padding: 0 5%;
  width: 90%;
  position: absolute;
  z-index: 1000;
  /* Navigation */

}
header nav {
  display: none;
  background: #222;
  position: absolute;
  top: 62px;
  right: 0px;
  z-index: 1000;
  width: 100%;
  font-size: 24px;
  font-size: 2.4rem;
  text-align: center;
}
header nav li {
  height: 3em;
  list-style: none;
  display: block;
  border-top: #212121 solid 1px;
  border-bottom: #363636 solid 1px;
}
header nav li a {
  display: block;
  color: #FFF;
  line-height: 2.8em;
  text-decoration: none;
}
header nav li a:active {
  background: #333;
}
.logo {
  height: 62px;
  width: 40px;
  background: url(../images/sprite-mobile.png) 0px -63px no-repeat;
  display: block;
  text-indent: -9999px;
  float: left;
}
.logo:hover {
  opacity: 0.5;
}
.icon-nav {
  width: 27px;
  height: 62px;
  float: right;
  background: url(../images/sprite-mobile.png) -42px -63px no-repeat;
  display: block;
  text-indent: -9999px;
}
.icon-nav.active {
  opacity: 0.5;
}
.social {
  display: none;
}
.content {
  margin-top: 62px;
}
footer {
  background: #f8f8f8 url(../images/bg-grey-med.png) repeat;
  height: 50px;
  padding: 40px 5% 0 5%;
  color: #888888;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  position: relative;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
footer nav {
  display: none;
}
footer .right {
  display: none;
}
footer .left {
  float: none !important;
}
footer .left a {
  text-decoration: none;
}
footer .gradient-white {
  position: absolute;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, rgba(255, 255, 255, 0)));
  background-image: -ms-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
  /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/

  background-image: -moz-linear-gradient(center bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
}
footer a.top {
  background: transparent url(../images/sprite.png) 0 -217px;
  width: 118px;
  height: 90px;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -59px;
  bottom: -40px;
  text-indent: -9999px;
}
footer a:hover.top {
  bottom: -35px;
}
h1,
.h1,
h2,
.h2 {
  margin: 0;
  color: #111111;
  text-rendering: optimizelegibility;
  font-weight: normal;
}
h1,
.h1 {
  margin-bottom: 0.1em;
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 1.2em;
  font-family: 'Source Sans Pro',  sans-serif;
  letter-spacing: -0.07em;
}
.portfolio h1 {
  font-size: 42px;
  font-size: 4.2rem;
  font-family: 'Source Sans Pro',  sans-serif;
  border-bottom: #DDD solid 1px;
  padding-bottom: 0.3em;
  margin-bottom: 0.1em;
  letter-spacing: -0.01em;
}
h2,
.h2 {
  margin-bottom: 0.5em;
  font-size: 29px;
  font-size: 2.9rem;
  line-height: 1.2em;
}
h3,
.h3 {
  padding-top: 1em;
  margin-bottom: 0.4em;
  text-transform: uppercase;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'Source Sans Pro',  sans-serif;
}
p {
  margin-bottom: 1.4em;
  line-height: 1.4em;
}
p.intro {
  font-size: 25px;
  font-size: 2.5rem;
  color: #888888;
  line-height: 1.3em;
  margin-bottom: 0.7em;
  clear: both;
}
p.quote-author {
  color: #888888;
  margin-top: -0.5em;
}
p.author {
  color: #888888;
  font-size: 18px;
  font-size: 1.8rem;
}
p.author .date {
  display: block;
}
.strong {
  font-family: 'Source Sans Pro',  sans-serif;
  font-weight: 600;
}
a {
  text-decoration: underline;
  cursor: pointer;
  color: #888888;
}
a:hover,
a:active {
  color: #626262;
}
/* Centered header with line */
.header-center {
  height: 1px;
  background: #DDD;
  border-bottom: #FFF solid 1px;
  margin-bottom: 30px;
  position: relative;
}
.header-center h3 {
  background: #f8f8f8 url(../images/bg-grey.png) repeat;
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  text-align: center;
  display: block;
  color: #888888;
  text-transform: uppercase;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  letter-spacing: 1px;
  padding: 0px;
}
/* Change default text selection colour */
::selection {
  background: #888888;
  color: #FFF;
}
::-moz-selection {
  background: #888888;
  color: #FFF;
}
::-webkit-selection {
  background: #888888;
  color: #FFF;
}
ul.ul,
ol.ol {
  list-style-type: disc;
  padding-left: 2em;
  margin-bottom: 1.4em;
  line-height: 1.4em;
}
ul.ul li,
ol.ol li {
  margin-bottom: 0.7em;
}
.text-light {
  color: #888888;
}
.text-center {
  margin: auto;
  margin-bottom: 3em;
  max-width: 40em;
}
.text-center.nomargin {
  margin: 0 auto 0 auto !important;
}
.text-center p:last-child {
  margin-bottom: 0;
}
.line {
  width: 100%;
  height: 1px;
  background: #DDD;
  border-bottom: #FFF solid 1px;
  clear: both;
  margin-bottom: 50px;
}

/* Sections */
section.light,
section.main {
  overflow: hidden;
  border-top: #FFF solid 1px;
  padding: 3em 1.5em;
}
section.dark,
section.noise {
  background: url(../images/bg-grey.png) repeat;
  border-bottom: #dddddd solid 1px;
  padding: 3em 1.5em;
}
section.dark {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
section.noise {
  border: none;
}
section.main {
  background: none;
  border: none;
}
section.light {
  -webkit-box-shadow: inset 0px 30px 30px -30px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0px 30px 30px -30px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0px 30px 30px -30px rgba(0, 0, 0, 0.05);
  border-bottom: #dddddd solid 1px;
}
.portfolio .content-detail .row {
  clear: both;
  max-width: 1040px;
  margin: 0 auto;
}
.portfolio .content-detail .row.alt [class^="col-"] {
  float: right;
  margin: 0 0 0 3.84615384615%;
}
.portfolio .content-detail [class^="col-"] {
  float: left;
  margin: 0 3.84615384615% 0 0;
  list-style: none;
  position: relative;
}
.portfolio .content-detail [class^="col-"]:last-child,
.portfolio .content-detail .row.alt [class^="col-"]:last-child {
  margin-right: 0;
}
.portfolio .content-detail .col-3 {
  width: 48.0769230769%;
}
.portfolio .content-detail .col-3:nth-child(2) {
  margin-right: 0;
}
.portfolio .content-detail .col-6 {
  width: 100%;
  margin-right: 0;
}
.portfolio .content-detail .col-12 {
  width: 100%;
  margin-right: 0;
}
#content-detail section:last-child,
.contact section:last-child {
  /*padding-bottom: @padlarge * 2;*/

}
.home section.light {
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#content-detail {
  position: relative;
}
img {
  max-width: 100%;
  position: relative;
  margin-bottom: 2em;
}
img.major {
  margin-top: 2em;
  margin-bottom: 0;
}
img.last {
  margin-bottom: 3em;
}
img.shadow {
  border: #DDD solid 1px;
}
/* snaps */
.snaps {
  border-top: #dddddd 1px solid;
  padding-top: 3em;
  max-width: 540px;
  margin: auto;
}
.snaps a {
  margin: 2% 3% 2% 3%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.snaps a img {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  width: 100px;
  margin-bottom: 0;
}
.snaps a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}
/* Social Disc Icons */
.social-disc {
  list-style-type: none;
  margin-top: 1.5em;
}
.social-disc li {
  height: 50px;
  margin-bottom: 0.7em;
}
.social-disc li a {
  padding-left: 60px;
  line-height: 50px;
  display: block;
  height: 50px;
  background: url(../images/sprite.png) no-repeat;
  text-decoration: none;
  font-size: 18px;
  font-size: 1.8rem;
}
.social-disc li a.facebook {
  background-position: 0px -547px;
  color: #43609c;
}
.social-disc li a.twitter {
  background-position: 0px -598px;
  color: #5fc5ec;
}
.social-disc li a.dribbble {
  background-position: 0px -649px;
  color: #eb528d;
}
.social-disc li a.linkedin {
  background-position: 0px -700px;
  color: #0982c0;
}
.social-disc li a:hover {
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
}
/* Favicons */
.favicons {
  padding: 1em 0 0 0;
}
.favicons li {
  list-style-type: none;
  display: inline-block;
  margin: 0 1% 1% 0;
  width: 100%;
}
.favicons li a {
  padding-left: 26px;
  height: 16px;
  line-height: 16px;
  font-size: 14px;
  font-size: 1.4rem;
  display: block;
  overflow: hidden;
  background: url(../images/sprite-favicons.png) no-repeat;
}

/* Pie Chart */
.pie-chart {
  text-align: center;
}
.pie-chart ul {
  list-style-type: none;
  padding: 0;
}
.pie-chart .designer,
.pie-chart .coder {
  float: none;
  margin-bottom: 3em;
}
/* Bar Chart */
#bar-chart {
  display: none;
}
/* Ten things list */
.ten-things {
  text-align: center;
}
.ten-things ul {
  list-style-type: none;
  padding: 0;
}
/* Portfolio Thumbs */
.thumbs {
  list-style: none;
  position: relative;
  padding: 0;
  /* Show the 3rd item at the bottom of the page */

}
.thumbs li {
  float: none;
  margin: 0 0 1.5em 0;
  background: #FFF;
  padding: 5% 5% 0 5%;
  position: relative;
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.thumbs li a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #555555;
}
.thumbs li a img {
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0;
}
.thumbs li:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}
.thumbs .description {
  padding: 0.5em;
  position: relative;
  overflow: hidden;
}
.thumbs h4,
.thumbs .h4 {
  /*font-family: @basefont-regular;*/

  font-weight: normal;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.2em;
  text-align: center;
}
.thumbs p {
  display: none;
}
.thumbs .arrow-r {
  display: none;
}
.thumbs .home .thumbs li:nth-child(3n),
.thumbs .portfolio .thumbs li:nth-child(3n),
.thumbs .error404 .thumbs li:nth-child(3n) {
  display: block;
}
/* Button */
a.button,
button,
.submit {
  color: #FFF;
  border-style: solid;
  border-width: 1px;
  border-color: #8dc5be #8dc5be #669d95;
  background-repeat: repeat-x;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  vertical-align: middle;
  height: 36px;
  display: inline-block;
  line-height: 36px;
  padding: 0 2em;
  text-decoration: none;
  cursor: pointer;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  background-color: #b0dbd6;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5fb2a8), color-stop(1, #b0dbd6));
  background-image: -ms-linear-gradient(bottom, #5fb2a8, #b0dbd6);
  /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/

  background-image: -moz-linear-gradient(center bottom, #5fb2a8 0%, #b0dbd6 100%);
  background-image: -o-linear-gradient(bottom, #5fb2a8, #b0dbd6);
}
a.button.green,
button.green,
.submit.green {
  background-color: #9bd465;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #56b101), color-stop(1, #9bd465));
  background-image: -ms-linear-gradient(bottom, #56b101, #9bd465);
  /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/

  background-image: -moz-linear-gradient(center bottom, #56b101 0%, #9bd465 100%);
  background-image: -o-linear-gradient(bottom, #56b101, #9bd465);
  border-color: #56b101 #56b101 #469000;
  margin-right: 10px;
}
a.button.red,
button.red,
.submit.red {
  background-color: #cf3b3b;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a90000), color-stop(1, #cf3b3b));
  background-image: -ms-linear-gradient(bottom, #a90000, #cf3b3b);
  /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/

  background-image: -moz-linear-gradient(center bottom, #a90000 0%, #cf3b3b 100%);
  background-image: -o-linear-gradient(bottom, #a90000, #cf3b3b);
  border-color: #a90000 #a90000 #890000;
  margin-right: 10px;
}
a.button.disabled,
button.disabled,
.submit.disabled {
  -webkit-box-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.02), inset 1px 0 0 rgba(0, 0, 0, 0.02), inset -1px 0 0 rgba(0, 0, 0, 0.02) !important;
  -moz-box-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.02), inset 1px 0 0 rgba(0, 0, 0, 0.02), inset -1px 0 0 rgba(0, 0, 0, 0.02) !important;
  box-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.02), inset 1px 0 0 rgba(0, 0, 0, 0.02), inset -1px 0 0 rgba(0, 0, 0, 0.02) !important;
  -webkit-animation-name: none!important;
  background: #f2f2f2!important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: #cfcfcf!important;
  filter: none!important;
  border-top-color: #bfbfbf!important;
  color: #b4b4b4!important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 6px rgba(0, 0, 0, 0.05) !important;
  position: static;
  cursor: auto;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 6px rgba(0, 0, 0, 0.05) !important;
}
a:hover.button,
button:hover,
.submit:hover {
  background-position: 0 15px;
}
a:active.button,
button:active,
.submit:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Concept Only Label */
.concept {
  padding: 0px 10px;
  font-size: 12px;
  font-size: 1.2rem;
  background: #e8e8e8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  margin-left: 5px;
  border-bottom: #FFF solid 1px;
  color: #888888;
  font-weight: normal;
  display: inline-block;
}
/* Previous and Next buttons */
.next,
.prev {
  display: none;
}
/* jQuery Preloader */
#jpreOverlay,
#qLoverlay {
  background-color: #FFF;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
}
#jpreSlide {
  font-size: 22px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  width: 100%;
}
#jpreLoader,
#qLloader {
  width: 100px;
  height: 100px;
  background: url(../images/loader.png) 0 100% no-repeat;
  position: fixed;
  top: 43%;
  left: 50%;
  margin-left: -50px;
  display: none;
}
#jpreBar,
#qLbar {
  width: 100px;
  height: 0%;
  position: absolute;
  bottom: 0px;
  background: url(../images/loader.png) -100px 100% no-repeat;
}
#jprePercentage,
#qLpercentage {
  color: #888888;
  text-align: center;
  position: absolute;
  height: 30px;
  width: 100px;
  bottom: -30px;
}
/* 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 #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: #888888;
  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: 7rem;
  }
  .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: 160px;
    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;
  }
}
/* Contact Form Styles */
.contact {
  /* Error/warning/success messages */

  /* Didn't Send */

  /* Some Errors */

  /* Sent successfully */

}
.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  border: #CCC solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.1);
  width: 98%;
  color: #888888;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Source Sans Pro',  sans-serif;
  padding: 0px;
}
.contact input[type="text"],
.contact input[type="email"] {
  height: 30px;
  line-height: 30px;
}
.contact textarea {
  height: 104px;
}
.contact .submit {
  float: left;
  width: 99%;
  outline: none;
}
.contact .ajax-loader {
  float: right;
  padding: 8px 10px 0px 0px;
}
.contact .wpcf7-response-output {
  clear: both;
  text-align: center;
  padding: 1em;
  margin: 1em 0;
}
.contact .wpcf7-mail-sent-ng {
  border: #ffd7d7 1px solid;
  background: #f8efef;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #e27070;
}
.contact .wpcf7-validation-errors {
  border: #f7e1ad 1px solid;
  background: #faf6ec;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #e3b150;
}
.contact .wpcf7-mail-sent-ok {
  border: #bce68a 1px solid;
  background: #ebf9dd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #94d646;
}
.contact .wpcf7-not-valid-tip,
.contact .screen-reader-response {
  display: none;
}
/* Mobile Blog Styles */
.blog {
  padding: 3em 5%;
}
.blog h1,
.blog .h1 {
  font-size: 42px;
  font-size: 4.2rem;
  font-family: 'Source Sans Pro',  sans-serif;
  border-bottom: #DDD solid 1px;
  padding-bottom: 0.3em;
  margin-bottom: 0.1em;
  letter-spacing: -0.03em;
}
.blog h1 a,
.blog .h1 a {
  text-decoration: none;
  color: #111111;
}
.blog h1 a:hover,
.blog .h1 a:hover {
  color: #888888;
}
.blog h2,
.blog .h2 {
  padding-top: 1em;
  margin-bottom: 0.4em;
  font-size: 29px;
  font-size: 2.9rem;
}
.blog h2.margin-small,
.blog .h2.margin-small {
  margin-bottom: 0.2em;
}
.blog h2 a,
.blog .h2 a {
  color: #111111;
}
.blog h2 a:hover,
.blog .h2 a:hover {
  color: #888888;
}
.blog h3,
.blog .h3 {
  padding-top: 1em;
  margin-bottom: 0.4em;
  text-transform: uppercase;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'Source Sans Pro',  sans-serif;
}
.blog h3 a,
.blog .h3 a {
  color: #111111;
}
.blog h3 a:hover,
.blog .h3 a:hover {
  color: #888888;
}
.blog article {
  padding-bottom: 1.4em;
  border-bottom: #DDD solid 1px;
  /* Hack for 5th blog post */

}
.blog article p {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.4em;
  margin-bottom: 1.4em;
}
.blog article p.author {
  font-size: 18px;
  font-size: 1.8rem;
  color: #888888;
  float: left;
}
.blog article p.author .date {
  display: block;
  float: none;
}
.blog article p.small {
  font-size: 18px;
  font-size: 1.8rem;
}
.blog article p.light {
  color: #888888;
}
.blog article p.margin-small {
  margin-bottom: 0.7em;
}
.blog article p.margin-top {
  padding-top: 2em;
}
.blog article ul,
.blog article .ul,
.blog article ol,
.blog article .ol {
  padding-left: 2em;
  margin-bottom: 1.8em;
}
.blog article ul li,
.blog article .ul li,
.blog article ol li,
.blog article .ol li {
  margin-bottom: 0.3em;
}
.blog article:nth-child(5) {
  border-bottom: 0px !important;
}
.blog article img {
  margin-bottom: 0px;
}
.blog .share {
  display: none;
  float: right;
  list-style: none;
}
.blog .share li {
  float: right;
}
.blog .share #fb-root {
  padding-top: 2px;
}
.blog p.intro {
  padding-top: 20px;
}
.blog .sidebar li {
  list-style: none;
  float: left;
  margin-bottom: 2em;
}
.blog .sidebar .ads {
  padding: 10px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.blog .sidebar h2,
.blog .sidebar .h2 {
  padding-top: 0px;
}
.blog .recent-posts {
  border-bottom: #DDD solid 1px;
  padding-bottom: 2.1em;
  margin-top: 1em;
}
.blog .recent-posts ul {
  list-style: none;
}
.blog .recent-posts ul li {
  margin-bottom: 0.8em;
}
.blog .recent-posts ul li a {
  font-size: 18px;
  font-size: 1.8rem;
}
.blog .comments {
  margin-bottom: 2.5em;
  margin-top: 2.5em;
}
.blog .comments h2 {
  padding-top: 0px;
}
.blog .attachment-post-thumbnail {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  margin: 0.25em 0em 1.5em 0em;
}
.blog .col-8 {
  margin: auto !important;
  float: none;
}
.blog-index article {
  padding-bottom: 2.7em;
  margin-bottom: 2em;
}
/* Hide syntax highlighter plugin toolbar */
.syntaxhighlighter .toolbar {
  display: none !important;
}
@media only screen and (min-width: 376px) {
  h1 {
    font-size: 60px;
    font-size: 6rem;
  }
  /* Portfolio Thumbs */
  .thumbs li {
    float: left;
    width: 44.16666666666%;
    margin: 0 5% 5% 0;
    background: #FFF;
    padding: 1.6666666666% 1.6666666666% 0 1.6666666666%;
  }
  .thumbs li:nth-child(2n) {
    margin-right: 0;
  }
  /* Hide the 3rd item at the bottom of the page */
  .home .thumbs li:nth-child(3n),
  .portfolio .thumbs li:nth-child(3n),
  .error404 .thumbs li:nth-child(3n) {
    display: none;
  }
  .favicons li {
    width: 48%;
  }
  .favicons li:nth-child(2n) {
    margin-right: 0;
  }
  .favicons li:nth-child(5n) {
    margin-right: 1%;
  }
  .snaps a {
    margin: 2% 1% 2% 0;
  }
  .snaps a img {
    width: auto;
  }
  p.author .date {
    float: right;
  }
}
@media only screen and (min-width: 668px) {
  .margin-b {
    margin-bottom: 150px !important;
  }
  .margin-bs {
    margin-bottom: 50px !important;
  }
  .line {
    margin-bottom: 100px;
  }
  .pad {
    padding: 50px 0px;
    padding-bottom: 0px;
  }
  header {
    background: #111111 url(../images/sprite.png) repeat-x;
    height: 92px;
  }
  .logo {
    height: 92px;
    width: 62px;
    background: url(../images/sprite.png) 0px -93px no-repeat;
  }
  header nav {
    float: right;
    display: block;
    font-size: 18px;
    font-size: 1.8rem;
    position: static;
    background: transparent;
    width: auto;
  }
  header nav li {
    display: inline-block;
    float: left;
    position: relative;
    height: 92px;
    border: 0px;
  }
  header nav li a {
    display: block;
    color: #FFF;
    line-height: 92px;
    padding: 0 1em;
    text-decoration: none;
  }
  header nav li a:active {
    background: none;
  }
  header nav li:hover a,
  header nav .current_page_item a,
  header nav .current_page_parent a {
    color: #888888;
  }
  header nav .portfolio .current_page_parent a {
    color: #FFF;
  }
  header nav .portfolio .page-item-7 a {
    color: #888888;
  }
  header .icon-nav {
    display: none;
  }
  footer .left {
    float: left !important;
  }
  footer .right {
    display: block;
  }
  .content {
    margin-top: 92px;
  }
  h1,
  .h1 {
    font-size: 70px;
    font-size: 7rem;
  }
  .portfolio h1,
  .portfolio .h1 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  p.intro {
    font-size: 24px;
    font-size: 2.4rem;
  }
  span.text-wide {
    display: inline;
  }
  .portfolio .content-detail .col-3 {
    width: 22.1153846154%;
  }
  .portfolio .content-detail .col-3:nth-child(2) {
    margin-right: 3.84615384615%;
  }
  .portfolio .content-detail .col-3:last-child {
    margin-right: 0;
  }
  .portfolio .content-detail .col-6 {
    width: 48.0769230769%;
  }
  .portfolio .content-detail .col-6:first-child {
    margin-right: 3.84615384615%;
  }
  .portfolio .content-detail .col-12 {
    width: 100%;
    margin-right: 0;
  }
  section.light,
  section.dark,
  section.noise,
  section.main {
    padding: 4.5em 5%;
  }
  #content-detail section:last-child,
  .contact section:last-child {
    /*padding-bottom: 8% !important;*/
  
  }
  /* snaps */
  .snaps a {
    margin-right: 2em;
  }
  .snaps a:nth-child(3n) {
    margin: 0;
  }
  /* Portfolio Thumbs */
  .thumbs li {
    float: left;
    /* width:314px; */
  
    width: 30.1923076923%;
    /* height:214px; */
  
    /* margin: 0 25px 25px 0; */
  
    margin: 0 2.4038461538% 2.4038461538% 0;
    background: #FFF;
    /* padding: 8px; */
  
    padding: 0.7692307692% 0.7692307692% 0 0.7692307692%;
  }
  .thumbs li:nth-child(2n) {
    margin-right: 2.4038461538%;
  }
  .thumbs h4 {
    text-align: left;
    font-size: 18px;
    font-size: 1.8rem;
  }
  .thumbs p {
    display: block;
    margin: 0;
    font-size: 16px;
    font-size: 1.6rem;
    color: #888888;
    line-height: 1.2em;
    padding-top: 0.2em;
    height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Show the 3rd item at the bottom of the page */
  .home .thumbs li:nth-child(3n),
  .portfolio .thumbs li:nth-child(3n),
  .portfolio-main .thumbs li:nth-child(3n),
  .error404 .thumbs li:nth-child(3n) {
    display: block;
    margin-right: 0px;
  }
  .favicons li {
    width: 30%;
  }
  .favicons li:nth-child(3n) {
    margin-right: 0;
  }
  .favicons li:nth-child(2n) {
    margin-right: 1%;
  }
  /* Bar Chart */
  #bar-chart {
    display: block;
  }
  .bar-chart {
    list-style: none;
    height: 450px;
    position: relative;
    background: url(../images/axis.png) repeat-x;
    padding: 0;
    margin: 0px;
    /* Y Axis */
  
  }
  .bar-chart li {
    display: inline-block;
    width: 16%;
    height: 100%;
    background-color: #CCC;
    text-align: center;
    font-weight: bold;
    color: #FFF;
    position: relative;
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0 1.8% 0 0;
    border: #BBB solid 1px;
    vertical-align: bottom;
    border-bottom: #BBB solid 1px;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  }
  .bar-chart li:nth-child(6n) {
    margin-right: 0;
  }
  .bar-chart .percent {
    opacity: 0.3;
    position: absolute;
    bottom: 60px;
    font-size: 45px;
    font-size: 4.5rem;
    width: 100%;
  }
  .bar-chart .percent span {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .bar-chart .skill {
    position: absolute;
    bottom: 20px;
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .bar-chart .p-40 {
    height: 40%;
  }
  .bar-chart .p-75 {
    height: 75%;
  }
  .bar-chart .p-80 {
    height: 80%;
  }
  .bar-chart .p-90 {
    height: 90%;
  }
  .bar-chart .p-95 {
    height: 95%;
  }
  .bar-chart .aqua {
    border-color: #8dc5be;
    background-color: #b0dbd6;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5fb2a8), color-stop(1, #b0dbd6));
    background-image: -ms-linear-gradient(bottom, #5fb2a8, #b0dbd6);
    /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
  
    background-image: -moz-linear-gradient(center bottom, #5fb2a8 0%, #b0dbd6 100%);
    background-image: -o-linear-gradient(bottom, #5fb2a8, #b0dbd6);
  }
  .bar-chart .pink {
    border-color: #ebc0b5;
    background-color: #f4dcd6;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e1ae9e), color-stop(1, #f4dcd6));
    background-image: -ms-linear-gradient(bottom, #e1ae9e, #f4dcd6);
    /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
  
    background-image: -moz-linear-gradient(center bottom, #e1ae9e 0%, #f4dcd6 100%);
    background-image: -o-linear-gradient(bottom, #e1ae9e, #f4dcd6);
  }
  .bar-chart .yellow {
    border-color: #e7af30;
    background-color: #efc563;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfae36), color-stop(1, #efc563));
    background-image: -ms-linear-gradient(bottom, #dfae36, #efc563);
    /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
  
    background-image: -moz-linear-gradient(center bottom, #dfae36 0%, #efc563 100%);
    background-image: -o-linear-gradient(bottom, #dfae36, #efc563);
  }
  .bar-chart .brown {
    border-color: #dcb386;
    background-color: #dcba83;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #bc8e5b), color-stop(1, #dcba83));
    background-image: -ms-linear-gradient(bottom, #bc8e5b, #dcba83);
    /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
  
    background-image: -moz-linear-gradient(center bottom, #bc8e5b 0%, #dcba83 100%);
    background-image: -o-linear-gradient(bottom, #bc8e5b, #dcba83);
  }
  .bar-chart .red {
    border-color: #e14949;
    background-color: #da6d6c;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ca4544), color-stop(1, #da6d6c));
    background-image: -ms-linear-gradient(bottom, #ca4544, #da6d6c);
    /*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
  
    background-image: -moz-linear-gradient(center bottom, #ca4544 0%, #da6d6c 100%);
    background-image: -o-linear-gradient(bottom, #ca4544, #da6d6c);
  }
  .bar-chart li.axis {
    width: 8%;
    border: 0;
    border-right: #DDD solid 1px;
    height: 450px;
    background: url(../images/bg-grey.png) repeat;
    -webkit-box-shadow: inset 0 0 0 0 #ffffff;
    -moz-box-shadow: inset 0 0 0 0 #ffffff;
    box-shadow: inset 0 0 0 0 #ffffff;
  }
  .bar-chart .label {
    color: #888888;
    margin: -0.6em 0 88px 0;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
  }
  img {
    margin-bottom: 4em;
  }
  img.last {
    margin-bottom: 4em;
  }
  img.margin-small {
    margin-bottom: 2.4em;
  }
  /* iPad (portrait) blog styles */
  .blog {
    padding: 50px 5%;
  }
  .blog h1,
  .blog .h1 {
    font-size: 48px;
    font-size: 4.8rem;
    padding-bottom: 0.3em;
  }
  .blog h2,
  .blog .h2 {
    margin-bottom: 0.5em;
  }
  .blog h3,
  .blog .h3 {
    margin-bottom: 0.5em;
  }
  .blog article p {
    line-height: 1.6em;
    margin-bottom: 1.8em;
  }
  .blog article p.margin-small {
    margin-bottom: 0.9em;
  }
  .blog article p.author .date {
    display: inline-block;
  }
  .blog .share {
    display: block;
  }
  .blog .attachment-post-thumbnail {
    margin: 1em 0em 2.5em 0em;
  }
  .blog .recent-posts {
    margin-top: 0.3em;
  }
  .blog-index article {
    padding-bottom: 4em;
    margin-bottom: 3.3em;
  }
  .contact .submit {
    float: right;
    width: auto;
  }
}
@media only screen and (min-width: 1024px) {
  header nav {
    font-size: 18px;
    font-size: 1.8rem;
    margin-right: 10%;
  }
  .social {
    display: block;
    float: right;
    list-style: none;
    margin: 30px 0 0 0;
  }
  .social li {
    display: inline-block;
  }
  .social li a {
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url(../images/sprite.png) 0 0 no-repeat;
    text-indent: -9999px;
    cursor: pointer;
    margin-left: 15px;
  }
  .social li a:hover {
    opacity: 0.5;
  }
  .social .facebook a {
    background-position: 0px -186px;
  }
  .social .twitter a {
    background-position: -32px -186px;
  }
  .social .dribbble a {
    background-position: -64px -186px;
  }
  .social .linkedin a {
    background-position: -96px -186px;
  }
  footer nav {
    display: block;
    float: left;
    margin-left: 100px;
  }
  footer nav ul {
    list-style: none;
  }
  footer nav li {
    float: left;
  }
  footer nav li a {
    float: left;
    margin-right: 20px;
    text-decoration: none;
    font-size: 16px;
    font-size: 1.6rem;
    color: #888888;
  }
  footer nav li a:hover {
    color: #555555;
  }
  p {
    line-height: 1.4em;
  }
  p.intro {
    font-size: 26px;
    font-size: 2.6rem;
  }
  .row {
    clear: both;
    max-width: 1040px;
    margin: 0 auto;
  }
  .row.alt [class^="col-"] {
    float: right;
    margin: 0 0 0 3.84615384615%;
  }
  [class^="col-"] {
    float: left;
    margin: 0 3.84615384615% 0 0;
    list-style: none;
    position: relative;
  }
  [class^="col-"]:last-child,
  .row.alt [class^="col-"]:last-child {
    margin: 0;
  }
  .col-1 {
    width: 4.8076923077%;
  }
  .col-2 {
    width: 13.4615384615%;
  }
  .col-3 {
    width: 22.1153846154%;
  }
  .col-4 {
    width: 30.7692307692%;
  }
  .col-5 {
    width: 39.4230769231%;
  }
  .col-6 {
    width: 48.0769230769%;
  }
  .col-7 {
    width: 56.7307692308%;
  }
  .col-8 {
    width: 65.3846153846%;
  }
  .col-9 {
    width: 74.0384615385%;
  }
  .col-10 {
    width: 82.6923076923%;
  }
  .col-11 {
    width: 91.3461538462%;
  }
  .col-12 {
    width: 100%;
    margin: 0;
  }
  /* snaps */
  .snaps {
    padding-top: 0;
    max-width: 920px;
  }
  .snaps a,
  .snaps a:nth-child(3n) {
    margin-right: 0.4%;
    width: 135px;
  }
  .snaps a:last-child {
    margin-right: 0 !important;
  }
  /* Pie chart */
  .pie-chart .designer,
  .pie-chart .coder {
    padding-top: 3em;
  }
  .pie-chart .coder {
    float: right;
    margin-bottom: 0;
    text-align: left;
  }
  .pie-chart .designer {
    float: left;
    margin-bottom: 0;
    text-align: left;
  }
  .pie-chart img {
    width: auto;
  }
  .pie-chart ul li {
    display: block;
  }
  .bar-chart .label {
    font-size: 16px;
    font-size: 1.6rem;
    margin: -0.6em 0 92px 0;
  }
  .bar-chart li {
    margin: 0 2% 0 0;
  }
  .bar-chart .skill {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .bar-chart .percent {
    font-size: 60px;
    font-size: 6rem;
  }
  img.major {
    margin-top: 0;
  }
  section.light,
  section.dark,
  section.noise {
    padding: 6em 5%;
  }
  section.main,
  .portfolio-main section.noise {
    padding: 3em 5%;
  }
  #content-detail section:last-child,
  .contact section:last-child {
    padding-bottom: 6em !important;
  }
  .text-middle {
    padding-top: 2em;
  }
  .text-main {
    padding-top: 1.5em;
  }
  .portfolio .text-main {
    padding-top: 3em;
  }
  .text-center {
    margin-bottom: 4em;
  }
  /* Ten things list */
  .ten-things {
    text-align: left;
  }
  .favicons li {
    width: 23%;
  }
  .favicons li:nth-child(4n) {
    margin-right: 0;
  }
  .favicons li:nth-child(3n) {
    margin-right: 1%;
  }
  .pad {
    padding: 50px;
  }
  .pad.side {
    padding: 0px 50px;
  }
  /* Desktop blog styles */
  .blog {
    padding: 100px 5%;
  }
}
@media only screen and (min-width: 1140px) {
  .logo {
    margin-left: 0;
  }
  header nav {
    margin-right: 14%;
  }
  footer nav {
    margin-left: 150px;
  }
  p {
    line-height: 1.6em;
  }
  /* snaps */
  .snaps {
    max-width: 1024px;
  }
  .snaps a,
  .snaps a:nth-child(3n) {
    margin-right: 1.9%;
    width: 140px;
  }
  /* Previous and Next buttons */
  .next,
  .prev {
    width: 59px;
    height: 118px;
    display: block;
    background: url(../images/sprite.png) no-repeat;
    position: fixed;
    top: 45%;
    text-indent: -9999px;
  }
  .next {
    right: 0px;
    background-position: -60px -309px;
  }
  .prev {
    left: 0px;
    background-position: 0px -309px;
  }
  .next a,
  .prev a {
    position: absolute;
    display: block;
    background: url(../images/sprite.png) no-repeat;
    width: 59px;
    height: 118px;
    z-index: 10;
    opacity: 0;
  }
  .next a {
    background-position: -60px -428px;
  }
  .prev a {
    background-position: 0px -428px;
  }
  /* Portfolio Thumbs */
  .thumbs .description {
    padding: 0.7em 47px 0.6em 0.7em;
  }
  .thumbs .arrow-r {
    width: 32px;
    height: 32px;
    background: url(../images/sprite.png) no-repeat;
    display: block;
    background-position: -63px -107px;
    position: absolute;
    top: 20px;
    right: 15px;
  }
  .favicons li {
    width: 18%;
  }
  .favicons li:nth-child(5n) {
    margin-right: 0;
  }
  .favicons li:nth-child(4n) {
    margin-right: 1%;
  }
  /* Contact page navi image */
  .contact #img-main {
    background: url(../images/....jpg) top left no-repeat;
    display: block;
    max-width: 590px;
    max-height: 500px;
    position: relative;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* jQuery Preloader */
  #jpreLoader,
  #qLloader {
    background: url(../images/loader@2x.png) 0 100% no-repeat;
    background-size: 200px 100px;
  }
  #jpreBar,
  #qLbar {
    background: url(../images/loader@2x.png) -100px 100% no-repeat;
    background-size: 200px 100px;
  }
  header,
  .logo,
  .icon-nav {
    background-image: url(../images/sprite-mobile@2x.png);
    background-size: 200px 500px;
  }
  .social-disc li a {
    background-image: url(../images/sprite@2x.png);
    background-size: 150px 1200px;
  }
}
/* Retina iPad */
@media only screen and (min-width: 600px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 600px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 600px) and (min-device-pixel-ratio: 1.5) {
  header {
    background: #111111 url(../images/sprite.png) repeat-x;
    background-size: auto;
    height: 92px;
  }
  .logo {
    height: 92px;
    width: 62px;
    background: url(../images/sprite.png) 0px -93px no-repeat;
    background-size: auto;
  }
}