/*   
Theme Name: Adham Dannaway
Theme URI: https://www.adhamdannaway.com/
Description: Handcrafted portfolio website of Adham Dannaway.
Author: Adham Dannaway
Author URI: https://www.adhamdannaway.com/
*/
/* 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,
a.button,
button,
.submit {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
/* Animate color */
.animate-color,
footer a {
  -webkit-transition: color .3s;
  -moz-transition: color .3s;
  -o-transition: color .3s;
  transition: color .3s;
}
/* Animate opacity */
.animate-opacity,
.social a,
.logo,
.contact a,
[tooltip]:after,
[tooltip]:before {
  -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: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
}
/* Text Shadow */
.text-shadow-black,
.bar-chart .percent,
.bar-chart .skill {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.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: 7.68rem !important;
}
.margin-bs {
  margin-bottom: 2.4rem !important;
}
.nomargin {
  margin: 0 !important;
}
.noborder {
  border: none !important;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
span.text-wide {
  display: none;
}
.pad {
  text-align: left;
  padding: 2.4rem 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: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  background-color: transparent;
  font-size: 18px;
  font-size: 1.8rem;
  color: #333333;
  text-rendering: optimizeLegibility;
}
header {
  background: #111;
  height: 62px;
  padding: 0 5%;
  width: 90%;
  position: absolute;
  z-index: 1000;
  /* Navigation */
}
header nav {
  display: none;
  background: #222222;
  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: 6.4rem;
  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: 6.4rem;
  text-decoration: none;
  text-transform: lowercase;
}
.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 li {
  display: inline-block;
  border: 0;
  margin-top: 1.6rem;
  margin-left: 2.4rem;
  height: 3.2rem;
}
.social li a {
  width: 3.2rem;
  height: 3.2rem;
  display: inline-block;
  background: url(images/sprite.png) 0 0 no-repeat;
  text-indent: -9999px;
  cursor: pointer;
  padding: 0px;
}
.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;
}
.social .email a {
  background-position: -130px -186px;
}
.social .instagram a {
  background-position: -163px -186px;
}
.content {
  margin-top: 62px;
}
/* Set optimal copy length */
.row {
  max-width: 68rem;
  margin: 0 auto;
}
/* Remove copy length from non copy elements */
.home .row:not(.copy-width),
#header .row:not(.copy-width),
#footer .row:not(.copy-width),
#bar-chart .row:not(.copy-width),
.portfolio-main #content-detail .row:not(.copy-width),
.portfolio #content-detail .row:not(.copy-width) {
  max-width: 1040px;
}
footer {
  background: #f5f5f5;
  height: 50px;
  padding: 40px 5% 0 5%;
  color: #757575;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  position: relative;
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
}
footer nav {
  display: none;
}
footer .left {
  float: none !important;
}
footer .gradient-white {
  position: absolute;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0);
  background-image: -moz-linear-gradient(center bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}
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;
}
footer a {
  color: #757575;
  text-decoration: none;
}
footer a:hover {
  color: #333333;
}
h1,
.h1,
h2,
.h2 {
  margin: 0;
  color: #333333;
  text-rendering: optimizelegibility;
  font-weight: normal;
  font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
h1,
.h1 {
  margin-bottom: 0.8rem;
  font-size: 80px;
  font-size: 8rem;
  line-height: 1.2;
  letter-spacing: -0.06em;
}
h2,
.h2 {
  margin-bottom: 1.6rem;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.2;
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
h3,
.h3 {
  margin-bottom: 1.6rem;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: normal;
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
h3.small,
.h3.small {
  font-size: 20px;
  font-size: 2rem;
}
p {
  margin-bottom: 2.4rem;
  line-height: 1.7;
  font-size: 20px;
  font-size: 2rem;
  /*-webkit-font-smoothing: antialiased;*/
}
p.intro {
  font-size: 26px;
  font-size: 2.6rem;
  color: #757575;
  line-height: 1.3;
}
p.intro-small {
  font-size: 22px;
  font-size: 2.2rem;
  color: #757575;
  line-height: 1.3;
}
p.subscript,
p.date {
  margin-top: -1.6rem;
  color: #757575;
}
p.small {
  font-size: 18px !important;
  font-size: 1.8rem !important;
  margin-bottom: 2.4rem !important;
}
p.light {
  color: #757575 !important;
}
p.margin-small {
  margin-bottom: 1.6rem;
}
.strong,
strong {
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  font-weight: normal;
}
.uppercase {
  color: #757575;
  text-transform: uppercase;
  font-size: 14px !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.2rem !important;
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif !important;
}
a {
  text-decoration: underline;
  cursor: pointer;
  color: #333333;
}
a:hover,
a:active {
  color: #757575;
}
/* Centered header with line */
.header-center {
  height: 1px;
  background: #dddddd;
  border-bottom: #ffffff solid 1px;
  margin-bottom: 3.2rem;
  position: relative;
}
.header-center h3 {
  background: #fafafa;
  position: absolute;
  top: -0.8rem;
  left: 50%;
  margin-left: -160px;
  width: 320px;
  text-align: center;
  display: block;
  color: #757575;
  text-transform: uppercase;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  letter-spacing: 0.2rem;
  padding: 0 !important;
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
/* Change default text selection colour */
::selection {
  background: #333333;
  color: #FFF;
}
::-moz-selection {
  background: #333333;
  color: #FFF;
}
::-webkit-selection {
  background: #333333;
  color: #FFF;
}
ul.ul,
ol.ol {
  list-style-type: disc;
  padding-left: 1.6rem;
  margin-bottom: 3.2rem;
  line-height: 1.5;
}
ul.ul li,
ol.ol li {
  margin-bottom: 0.8rem;
}
.text-light {
  color: #757575;
}
.line {
  width: 100%;
  height: 1px;
  background: #dddddd;
  border-bottom: #ffffff solid 1px;
  clear: both;
  margin-bottom: 4.8rem;
}
/* Font Embedding */
@font-face {
  font-family: 'proxima nova bold';
  src: url('fonts/proximanova-bold-webfont.eot');
  src: url('fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-bold-webfont.woff') format('woff'), url('fonts/proximanova-bold-webfont.ttf') format('truetype'), url('fonts/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'proxima nova semibold';
  src: url('fonts/proximanova-semibold-webfont.woff2') format('woff2'), url('fonts/proximanova-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/*@font-face {
    font-family: 'proxima nova regular';
    src: url('fonts/proximanova-regular-webfont.eot');
    src: url('fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/proximanova-regular-webfont.woff') format('woff'),
         url('fonts/proximanova-regular-webfont.ttf') format('truetype'),
         url('fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;

}*/
@font-face {
  font-family: 'proxima nova light';
  src: url('fonts/proximanova-light-webfont.eot');
  src: url('fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-light-webfont.woff') format('woff'), url('fonts/proximanova-light-webfont.ttf') format('truetype'), url('fonts/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Sections */
section.light,
section.main {
  overflow: hidden;
  border-top: #ffffff solid 1px;
  padding: 6.4rem 3.2rem;
}
.about section.light:last-child,
.about section.main:last-child,
.featured section.light:last-child,
.featured section.main:last-child {
  padding-bottom: 12.8rem;
}
section.dark,
section.noise {
  background: #fafafa;
  border-bottom: #dddddd solid 1px;
  padding: 6.4rem 3.2rem;
}
.about section.dark:last-child,
.about section.noise:last-child,
.featured section.dark:last-child,
.featured section.noise:last-child {
  padding-bottom: 12.8rem;
}
section.dark:last-child,
section.noise:last-child {
  border-bottom: none;
}
section.dark {
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
}
section.noise {
  border: none;
}
section.main {
  background: none;
  border: none;
  border-bottom: #dddddd solid 1px;
}
section.light {
  /*.inner-shadow(0px, 30px, 30px, -30px, rgba(0,0,0,0.05));*/
  border-bottom: #dddddd solid 1px;
}
.content-blocks .col-4 {
  margin-bottom: 4.8rem !important;
}
.content-blocks .col-4:last-child {
  margin-bottom: 0 !important;
}
.content-blocks p {
  margin-bottom: 0 !important;
}
img {
  max-width: 100%;
  position: relative;
  margin-bottom: 4rem;
  height: auto;
}
img.major {
  margin-top: 4rem;
  margin-bottom: 0;
}
img.shadow {
  border: #dddddd solid 1px;
}
img.icon {
  margin-bottom: 0.8rem !important;
}
hr {
  border: none;
  border-top: none !important;
  border-bottom: #dddddd solid 1px !important;
  margin: 0 0 4rem 0;
  padding-top: 1.6rem;
}
.portfolio .content-detail .row.alt [class^="col-"] {
  float: right;
  margin: 0 0 0 3.84615385%;
}
.portfolio .content-detail [class^="col-"] {
  float: left;
  margin: 0 3.84615385% 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-4 {
  width: 100%;
  margin-right: 0;
}
.portfolio .content-detail .col-6 {
  width: 100%;
  margin-right: 0;
}
.portfolio .content-detail .col-12 {
  width: 100%;
  margin-right: 0;
}
/* Mobile portfolio styles */
.portfolio h1,
.portfolio .h1 {
  font-size: 40px;
  font-size: 4rem;
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  border-bottom: #dddddd solid 1px;
  letter-spacing: -0.1rem;
  padding-bottom: 0.8rem;
  font-weight: normal;
}
.portfolio h2,
.portfolio .h2,
.portfolio h3,
.portfolio .h3,
.portfolio .heading {
  padding-top: 1.6rem;
}
.portfolio .author {
  color: #757575;
  font-size: 18px;
  font-size: 1.8rem;
}
.portfolio .author .date {
  float: right;
}
.portfolio .text-center {
  margin: auto;
  margin-bottom: 6.4rem;
  max-width: 68rem;
}
.portfolio .text-center.nomargin {
  margin: 0 auto 0 auto !important;
}
.portfolio .text-center p:last-child {
  margin-bottom: 0;
}
.portfolio .content-detail {
  position: relative;
}
.portfolio .content-detail p:not(.thumbs *) {
  line-height: 1.7;
  margin-bottom: 4rem;
  font-size: 20px;
  font-size: 2rem;
}
.portfolio .content-detail ul:not(.thumbs),
.portfolio .content-detail .ul,
.portfolio .content-detail ol,
.portfolio .content-detail .ol {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.5;
  padding-left: 4rem;
  margin-bottom: 4rem;
}
.portfolio .content-detail ul:not(.thumbs) li,
.portfolio .content-detail .ul li,
.portfolio .content-detail ol li,
.portfolio .content-detail .ol li {
  margin-bottom: 0.8rem;
}
/* Mobile Blog Styles */
.blog {
  padding: 2em 5%;
}
.blog h1,
.blog .h1 {
  font-size: 40px;
  font-size: 4rem;
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  letter-spacing: -0.1rem;
  margin-bottom: 1.6rem;
  font-weight: normal;
}
.blog h1 a,
.blog .h1 a {
  text-decoration: none;
  color: #333333;
}
.blog h1 a:hover,
.blog .h1 a:hover {
  color: #757575;
}
.blog h2,
.blog .h2 {
  padding-top: 1.6rem;
}
.blog h2.margin-small,
.blog .h2.margin-small {
  margin-bottom: 0.8rem;
}
.blog h2 a,
.blog .h2 a {
  text-decoration: none;
  color: #333333;
}
.blog h2 a:hover,
.blog .h2 a:hover {
  color: #757575;
}
.blog h3,
.blog .h3 {
  padding-top: 1.6rem;
}
.blog h3 a,
.blog .h3 a {
  text-decoration: none;
}
.blog h3 a:hover,
.blog .h3 a:hover {
  color: #757575;
}
.blog p {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.7;
  margin-bottom: 4rem;
}
.blog p.excerpt {
  font-size: 22px;
  font-size: 2.2rem;
  color: #757575;
  line-height: 1.3;
  margin-bottom: 2.4rem;
  clear: both;
}
.blog ul,
.blog .ul,
.blog ol,
.blog .ol {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.5;
  padding-left: 1.6rem;
  margin-bottom: 4rem;
}
.blog ul li,
.blog .ul li,
.blog ol li,
.blog .ol li {
  margin-bottom: 0.8rem;
}
.blog img {
  margin-bottom: 0px;
  margin-top: 1.6rem;
}
.blog article {
  border-bottom: #dddddd solid 1px;
}
.blog .author-profile {
  margin-bottom: 4rem;
}
.blog .author-profile .avatar {
  width: 6.4rem;
  height: 6.4rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  display: inline-block;
  background: url(images/sprite.png) 0px -802px no-repeat;
  -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);
  border: 1px solid #dddddd;
}
.blog .author-profile .author-description {
  display: inline-block;
  color: #757575;
  font-size: 18px;
  font-size: 1.8rem;
  padding-left: 0.8rem;
  padding-bottom: 0.8rem;
}
.blog .author-profile .author-description .name {
  display: block;
  padding-bottom: 0.4rem;
  color: #333333;
}
.blog .share {
  display: none;
  float: right;
  list-style: none;
}
.blog .share li {
  float: right;
  line-height: 0;
}
.blog .share li:last-child {
  margin-right: 1.6rem;
}
.blog .sidebar li {
  list-style: none;
  float: left;
  margin-bottom: 4rem;
}
.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 .recent-posts {
  padding-bottom: 4rem;
  padding-top: 4rem;
}
.blog .recent-posts ul {
  list-style: none;
  padding-left: 0;
}
.blog .recent-posts ul li {
  margin-bottom: 1.6rem;
}
.blog .comments {
  margin: 4rem 0;
}
.blog .attachment-post-thumbnail,
.blog .wp-post-image {
  -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 0 4rem 0;
}
.blog .col-8 {
  margin: auto !important;
  float: none;
  max-width: 68rem;
}
.blog-index .author-profile {
  margin-bottom: 3.2rem;
}
.blog-index article {
  padding-bottom: 4rem;
  margin-bottom: 4rem;
  border-bottom: none;
}
.blog-index article:last-of-type {
  border-bottom: none;
  margin-bottom: 0px;
}
.blog-index article .attachment-post-thumbnail,
.blog-index article .wp-post-image {
  -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 0 3.2rem 0;
}
/* Hide syntax highlighter plugin toolbar */
.syntaxhighlighter .toolbar {
  display: none !important;
}
/* snaps */
.snaps {
  border-top: #dddddd 1px solid;
  padding-top: 4.8rem;
  margin: auto;
}
.snaps a {
  width: 44%;
  margin: 2% 4% 2% 0;
  float: left;
  text-decoration: none;
  padding: 2%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.snaps a img {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  width: 100%;
  margin-bottom: 0;
}
.snaps a:nth-child(2n),
.snaps a:last-child {
  margin-right: 0;
}
.snaps a:hover {
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
/* Social Disc Icons */
.social-disc {
  list-style-type: none;
  padding-top: 3.2rem;
}
.social-disc li {
  height: 5rem;
  margin-bottom: 3.2rem;
  display: inline-block;
  width: 100%;
}
.social-disc li a {
  padding-left: 6.6rem;
  line-height: 5rem;
  display: block;
  height: 5rem;
  background: url(images/sprite.png) no-repeat;
  text-decoration: none;
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
.social-disc li a.facebook {
  background-position: 0px -547px;
  color: #43609c;
}
.social-disc li a.twitter {
  background-position: 0px -598px;
  color: #189ACD;
}
.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.instagram {
  background-position: 0px -751px;
  color: #ef0074;
}
.social-disc li a:hover {
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
}
@media only screen and (min-width: 390px) {
  .social-disc li {
    width: 49%;
  }
}
/* Favicons */
.favicons {
  padding: 1.6rem 0 0 0;
}
.favicons li {
  list-style-type: none;
  display: inline-block;
  margin: 0 1% 1% 0;
  width: 100%;
}
.favicons li a {
  padding-left: 2.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  font-size: 14px;
  font-size: 1.4rem;
  display: block;
  overflow: hidden;
  background: url(images/sprite-favicons.png) no-repeat;
}
.favicons li .line-25 {
  background-position: 0px 0px;
}
.favicons li .abduzeedo {
  background-position: 0px -16px;
}
.favicons li .awwwards {
  background-position: 0px -32px;
}
.favicons li .css-mania {
  background-position: 0px -48px;
}
.favicons li .design-inspiration {
  background-position: 0px -64px;
}
.favicons li .specky-boy {
  background-position: 0px -80px;
}
.favicons li .wdl {
  background-position: 0px -96px;
}
.favicons li .underworld-mag {
  background-position: 0px -112px;
}
.favicons li .onetrapixel {
  background-position: 0px -128px;
}
.favicons li .vandelay {
  background-position: 0px -144px;
}
.favicons li .two-experts {
  background-position: 0px -160px;
}
.favicons li .denzo-mag {
  background-position: 0px -176px;
}
.favicons li .six-revisions {
  background-position: 0px -192px;
}
.favicons li .smashing-geeks {
  background-position: 0px -208px;
}
.favicons li .noupe {
  background-position: 0px -224px;
}
.favicons li .womtec {
  background-position: 0px -240px;
}
.favicons li .t3n {
  background-position: 0px -256px;
}
.favicons li .eyes-on-pixel {
  background-position: 0px -272px;
}
.favicons li .q-index {
  background-position: 0px -288px;
}
.favicons li .css-wow {
  background-position: 0px -304px;
}
.favicons li .css-mayo {
  background-position: 0px -320px;
}
.favicons li .most-inspired {
  background-position: 0px -336px;
}
.favicons li .css-based {
  background-position: 0px -352px;
}
.favicons li .css-perk {
  background-position: 0px -368px;
}
.favicons li .css-brigit {
  background-position: 0px -384px;
}
.favicons li .css-gallery {
  background-position: 0px -400px;
}
.favicons li .siiimple {
  background-position: 0px -416px;
}
.favicons li .swd {
  background-position: 0px -432px;
}
.favicons li .css-smooth-operator {
  background-position: 0px -448px;
}
.favicons li .colorgorize {
  background-position: 0px -464px;
}
.favicons li .css-line {
  background-position: 0px -480px;
}
.favicons li .folio-focus {
  background-position: 0px -496px;
}
.favicons li .css-design-awards {
  background-position: 0px -512px;
}
.favicons li .karachi-corner {
  background-position: 0px -528px;
}
.favicons li .css-brat {
  background-position: 0px -544px;
}
.favicons li .gdj {
  background-position: 0px -560px;
}
.favicons li .web-geekly {
  background-position: 0px -576px;
}
.favicons li .design-deck {
  background-position: 0px -592px;
}
.favicons li .arnaud {
  background-position: 0px -608px;
}
.favicons li .underworld-mag {
  background-position: 0px -624px;
}
.favicons li .beautiful-2 {
  background-position: 0px -640px;
}
.favicons li .web-appers {
  background-position: 0px -656px;
}
.favicons li .damn-digital {
  background-position: 0px -672px;
}
.favicons li .inspire-first {
  background-position: 0px -688px;
}
.favicons li .marked-lines {
  background-position: 0px -704px;
}
.favicons li .92-pixels {
  background-position: 0px -720px;
}
.favicons li .psd-collector {
  background-position: 0px -736px;
}
.favicons li .com-limao {
  background-position: 0px -752px;
}
.favicons li .art-spire {
  background-position: 0px -768px;
}
.favicons li .acris-design {
  background-position: 0px -784px;
}
.favicons li .e-junkie {
  background-position: 0px -800px;
}
.favicons li .design-on-stop {
  background-position: 0px -816px;
}
.favicons li .design-work {
  background-position: 0px -832px;
}
.favicons li .trip-wire-mag {
  background-position: 0px -848px;
}
.favicons li .e-consultancy {
  background-position: 0px -864px;
}
.favicons li .dj-designer-lab {
  background-position: 0px -880px;
}
.favicons li .css-gallery-pro {
  background-position: 0px -896px;
}
.favicons li .ildp {
  background-position: 0px -912px;
}
.favicons li .omega-imagine {
  background-position: 0px -928px;
}
.favicons li .3lancer {
  background-position: 0px -944px;
}
.favicons li .curiosando {
  background-position: 0px -960px;
}
.favicons li .dwdb {
  background-position: 0px -976px;
}
.favicons li .fish-be-cat {
  background-position: 0px -992px;
}
.favicons li .kachibito {
  background-position: 0px -1008px;
}
.favicons li .artatm {
  background-position: 0px -1024px;
}
.favicons li .blue-blots {
  background-position: 0px -1040px;
}
.favicons li .super-dit {
  background-position: 0px -1056px;
}
.favicons li .css-awards {
  background-position: 0px -1072px;
}
.favicons li .diego-burmudez {
  background-position: 0px -1088px;
}
.favicons li .my-desy {
  background-position: 0px -1104px;
}
.favicons li .edumac {
  background-position: 0px -1120px;
}
.favicons li .demortalz {
  background-position: 0px -1136px;
}
.favicons li .down-graf {
  background-position: 0px -1152px;
}
.favicons li .noil {
  background-position: 0px -1168px;
}
.favicons li .land-of-web {
  background-position: 0px -1184px;
}
.favicons li .iguoguo {
  background-position: 0px -1200px;
}
.favicons li .land-of-web {
  background-position: 0px -1216px;
}
.favicons li .i-am-designing {
  background-position: 0px -1232px;
}
.favicons li .smashing-journal {
  background-position: 0px -1248px;
}
.favicons li .tuts-list {
  background-position: 0px -1264px;
}
.favicons li .web-rockets-mag {
  background-position: 0px -1280px;
}
.favicons li .andres-zenteno {
  background-position: 0px -1296px;
}
.favicons li .top-design-mag {
  background-position: 0px -1312px;
}
.favicons li .inspiration-mix {
  background-position: 0px -1328px;
}
.favicons li .farbwolke {
  background-position: 0px -1344px;
}
.favicons li .design-relexion {
  background-position: 0px -1360px;
}
.favicons li .design-idol {
  background-position: 0px -1376px;
}
.favicons li .design-your-way {
  background-position: 0px -1392px;
}
.favicons li .wdc {
  background-position: 0px -1408px;
}
.favicons li .design-beep {
  background-position: 0px -1424px;
}
.favicons li .creattica {
  background-position: 0px -1440px;
}
/* Pie Chart */
.pie-chart,
.ten-things {
  text-align: center;
}
.pie-chart ul,
.ten-things ul {
  list-style-type: none;
  padding: 0;
}
.pie-chart .designer,
.ten-things .designer,
.pie-chart .coder,
.ten-things .coder {
  float: none;
  margin-bottom: 4rem;
}
/* Bar Chart */
#bar-chart {
  display: none;
}
/* 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 3.2rem 0;
  background: #ffffff;
  padding: 5% 5% 0 5%;
  position: relative;
  display: block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.thumbs li a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #333333;
}
.thumbs li a img {
  display: block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0;
}
.thumbs li:hover {
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.thumbs .description {
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
}
.thumbs h4,
.thumbs .h4 {
  font-weight: normal;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.4rem;
}
.thumbs p {
  display: block;
  margin: 0 !important;
  font-size: 16px;
  font-size: 1.6rem;
  color: #757575;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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 {
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  color: #ffffff;
  background-color: #333333;
  font-size: 18px;
  font-size: 1.8rem;
  border: #333333 solid 1px;
  vertical-align: middle;
  height: 4.8rem;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 4.8rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
a.button.secondary,
button.secondary,
.submit.secondary {
  color: #333333;
  background-color: #ffffff;
}
a.button.secondary:hover,
button.secondary:hover,
.submit.secondary:hover {
  background-color: #333333;
  color: #ffffff;
  opacity: 1;
}
a.button.secondary a:active.button,
button.secondary a:active.button,
.submit.secondary a:active.button,
a.button.secondary button:active,
button.secondary button:active,
.submit.secondary button:active,
a.button.secondary .submit:active,
button.secondary .submit:active,
.submit.secondary .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);
}
a.button.green,
button.green,
.submit.green {
  background: #317F39;
  border-color: #317F39;
}
a.button.red,
button.red,
.submit.red {
  background: #BF2727;
  border-color: #BF2727;
}
a.button.disabled,
button.disabled,
.submit.disabled {
  color: #b4b4b4 !important;
  position: static;
  cursor: not-allowed;
  background: #f5f5f5;
  border-color: #dddddd;
}
.error404 a.button,
.error404 button,
.error404 .submit {
  margin-bottom: 10px;
}
a:hover.button,
button:hover,
.submit:hover {
  opacity: 0.8;
}
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);
}
/* Pill label */
.pill {
  padding: 0 1.6rem;
  font-size: 12px;
  font-size: 1.2rem;
  background: #f5f5f5;
  border: #dddddd solid 1px;
  -webkit-border-radius: 1.6rem;
  -moz-border-radius: 1.6rem;
  border-radius: 1.6rem;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #333333;
  font-weight: normal;
  display: inline-block;
  text-transform: uppercase;
  height: 3.2rem;
  line-height: 3.2rem;
  vertical-align: middle;
  letter-spacing: 0.2rem;
  margin: 1.6rem 0;
}
/* 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-size: 2.2rem;
  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: #757575;
  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 #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: 10;
}
/* Tooltip styles */
[tooltip] {
  position: relative;
  display: inline-block;
}
[tooltip]:before {
  content: "";
  position: absolute;
  top: 80%;
  left: 50%;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  z-index: 99;
  opacity: 0;
  border-color: #fafafa transparent transparent;
  transform: translateX(-50%) translatey(0%) rotate(-180deg);
}
[tooltip].success:before {
  border-color: #ebf9dd transparent transparent;
}
[tooltip].fail:before {
  border-color: #faf6ec transparent transparent;
}
[tooltip]:after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: 80%;
  background-color: #fafafa;
  text-align: center;
  color: #333333;
  padding: 15px;
  font-size: 14px;
  font-size: 1.4rem;
  min-width: 120px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  margin-top: 10px;
  transform: translateX(-50%) translateY(0%);
  text-rendering: optimizeLegibility;
  -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);
  text-indent: 0;
  line-height: 1.5;
  text-transform: none;
}
[tooltip].success:after {
  background-color: #ebf9dd;
}
[tooltip].fail:after {
  background-color: #faf6ec;
}
[tooltip]:hover:after,
[tooltip]:hover:before {
  opacity: 1;
}
/* Homepage Half Face */
.face {
  width: 100%;
  position: relative;
  /* Show default image */
  /* Descriptions */
  /* Inline media queries */
  /* Full sliding half face experience */
}
.face .face-img {
  display: block;
  margin: 0px;
}
.face a {
  color: #757575;
  text-decoration: none;
}
.face .coder,
.face .designer {
  position: absolute;
  width: 40%;
  display: block;
  z-index: 10;
  height: 20%;
  /* vertical centering */
  margin: auto;
  top: 0;
  bottom: 0;
}
.face .coder h1,
.face .designer h1 {
  display: none;
}
.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: 320px) {
  .face .coder h1,
  .face .designer h1 {
    display: block;
    font-size: 22px;
    font-size: 2.2rem;
  }
  .face .coder h1 span,
  .face .designer h1 span {
    line-height: 1;
  }
  .face .coder h1 span.chevron-left,
  .face .designer h1 span.chevron-left {
    padding: 0 0.1em 0 0;
  }
  .face .coder h1 span.chevron-right,
  .face .designer h1 span.chevron-right {
    padding: 0 0 0 0.14em;
  }
}
@media only screen and (min-width: 375px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 26px;
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 414px) {
  .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: 36px;
    font-size: 3.6rem;
  }
}
@media only screen and (min-width: 600px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 46px;
    font-size: 4.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .face .coder,
  .face .designer {
    width: 30%;
    height: 44%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 56px;
    font-size: 5.6rem;
  }
  .face .coder p,
  .face .designer p {
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    margin: 0px;
  }
}
@media only screen and (min-width: 900px) {
  .face .coder,
  .face .designer {
    width: 32%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 64px;
    font-size: 6.4rem;
  }
}
@media only screen and (min-width: 1024px) {
  .face .coder,
  .face .designer {
    width: 30%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 72px;
    font-size: 7.2rem;
  }
  .face .coder p,
  .face .designer p {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.4;
  }
}
@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 h1,
  .face .designer h1 {
    font-size: 82px;
    font-size: 8.2rem;
  }
  .face .coder .description,
  .face .designer .description {
    position: absolute;
    top: 180px;
    width: 290px;
  }
  .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 {
    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;
  }
}
/* Form Styles */
.form {
  /* Mailchimp for WP - Error/warning/success messages */
  /* Contact Form 7 - Error/warning/success messages */
  /* Didn't Send */
  /* Some Errors */
  /*	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.unaccepted .wpcf7-response-output,
	.wpcf7 form.spam .wpcf7-response-output{
		border:#EBD8AB 1px solid;
		background:#faf6ec;
		.rounded(3px);
		color:#946918;		
	}*/
  /* Sent successfully */
}
.form input[type="text"],
.form input[type="email"],
.form textarea {
  border: #949494 solid 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -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: 100%;
  color: #333333;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  padding: 0px 1.6rem;
  box-sizing: border-box;
  vertical-align: middle;
}
.form input[type="text"],
.form input[type="email"] {
  height: 4.8rem;
  line-height: 4.8rem;
}
.form textarea {
  height: 152px;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  line-height: 1.7;
}
.form label {
  line-height: 1.7;
  display: block;
}
.form input::placeholder {
  color: #757575;
}
.form .ajax-loader {
  float: right;
  padding: 8px 10px 0px 0px;
}
.form .email-capture {
  padding-top: 2.4rem;
  margin-bottom: 4rem;
}
.form .email-capture .submit {
  margin-top: 1.6rem;
}
.form .mc4wp-response {
  margin-top: 0.8rem;
}
.form .mc4wp-response .mc4wp-alert {
  clear: both;
  padding: 1.6rem;
  margin: 1.6rem 0;
  border: #A1D8EA 1px solid;
  background: #EBFAFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #007BA2;
}
.form .mc4wp-response .mc4wp-alert.mc4wp-error {
  border: #EFBBBB 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: #BF2727;
}
.form .mc4wp-response .mc4wp-alert.mc4wp-success {
  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: #317F39;
}
.form .mc4wp-response p {
  margin-bottom: 0;
  font-size: 1.8rem;
}
.form .wpcf7 form .wpcf7-response-output {
  clear: both;
  text-align: center;
  padding: 1.6rem;
  margin: 1.6rem 0;
  border: #A1D8EA 1px solid;
  background: #EBFAFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #007BA2;
}
.form .wpcf7 form.failed .wpcf7-response-output,
.form .wpcf7 form.aborted .wpcf7-response-output,
.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.unaccepted .wpcf7-response-output,
.form .wpcf7 form.spam .wpcf7-response-output {
  border: #EFBBBB 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: #BF2727;
}
.form .wpcf7 form.sent .wpcf7-response-output {
  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: #317F39;
}
.form .wpcf7-not-valid-tip,
.form .screen-reader-response {
  display: none;
}
@media only screen and (min-width: 428px) {
  h1,
  .h1 {
    font-size: 96px;
    font-size: 9.6rem;
  }
  .portfolio h1,
  .blog h1,
  .portfolio .h1,
  .blog .h1 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  .portfolio p.excerpt,
  .blog p.excerpt {
    font-size: 24px;
    font-size: 2.4rem;
  }
  section.light,
  section.dark,
  section.noise,
  section.main {
    padding: 8rem 4.3rem;
  }
  /* Portfolio Thumbs */
  .thumbs li {
    float: left;
    width: 44.16666666666%;
    margin: 0 5% 5% 0;
    background: #ffffff;
    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 {
    width: 30%;
    margin: 1% 2% 1% 0;
    padding: 1%;
  }
  .snaps a:nth-child(2n) {
    margin-right: 2%;
  }
  .snaps a:nth-child(3n) {
    margin-right: 0;
  }
  a.button,
  button,
  .submit {
    display: inline-block;
    width: auto;
    padding: 0 1.5em;
  }
  .error404 a.button,
  .error404 button,
  .error404 .submit {
    margin: 0 10px 0 0;
  }
  .pill {
    margin: 0 0 0 1.6rem;
  }
}
@media only screen and (min-width: 830px) {
  .social {
    margin-left: 30px;
  }
  .social li {
    margin-top: 30px;
  }
  .margin-b {
    margin-bottom: 14.4rem !important;
  }
  .margin-bs {
    margin-bottom: 4.8rem !important;
  }
  .line {
    margin-bottom: 9.6rem;
  }
  .pad {
    padding: 4.8rem 0px;
    padding-bottom: 0px;
  }
  header {
    background: #111;
    height: 92px;
  }
  .logo {
    height: 92px;
    width: 62px;
    background: url(images/sprite.png) 0px -93px no-repeat;
  }
  header nav {
    float: right;
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    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:hover a,
  header nav .current_page_item a,
  header nav .current_page_parent a {
    color: #757575;
  }
  header nav .portfolio .current_page_parent a {
    color: #ffffff;
  }
  header nav .portfolio .page-item-7 a {
    color: #757575;
  }
  header .icon-nav {
    display: none;
  }
  footer .left {
    float: left !important;
  }
  footer nav {
    display: inline-block;
    margin: auto;
    float: right;
  }
  footer nav ul {
    list-style: none;
  }
  footer nav li {
    display: inline-block;
  }
  footer nav li a {
    margin-right: 20px;
  }
  .content {
    margin-top: 92px;
  }
  h1,
  .h1 {
    font-size: 102px;
    font-size: 10.2rem;
  }
  .portfolio h1,
  .blog h1,
  .portfolio .h1,
  .blog .h1 {
    font-size: 56px;
    font-size: 5.6rem;
  }
  span.text-wide {
    display: inline;
  }
  section.light,
  section.dark,
  section.noise,
  section.main {
    padding: 9.6rem 4.3rem;
  }
  .portfolio .content-detail .col-3 {
    width: 22.1153846154%;
  }
  .portfolio .content-detail .col-3:nth-child(2) {
    margin-right: 3.84615385%;
  }
  .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.84615385%;
  }
  /* Portfolio Thumbs */
  .thumbs li {
    float: left;
    width: 30.1923076923%;
    margin: 0 2.4038461538% 2.4038461538% 0;
    background: #ffffff;
    padding: 0.7692307692% 0.7692307692% 0 0.7692307692%;
  }
  .thumbs li:nth-child(2n) {
    margin-right: 2.4038461538%;
  }
  /* 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: #CCCCCC;
    text-align: center;
    color: #FFFFFF;
    position: relative;
    font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0 1.8% 0 0;
    border: #BBBBBB solid 1px;
    vertical-align: bottom;
    border-bottom: #BBBBBB 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.8;
    position: absolute;
    bottom: 50px;
    font-size: 45px;
    font-size: 4.5rem;
    width: 100%;
    line-height: 1em;
  }
  .bar-chart .percent span {
    font-size: 24px;
    font-size: 2.4rem;
    padding-left: 3px;
  }
  .bar-chart .skill {
    position: absolute;
    bottom: 20px;
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .bar-chart .p-30 {
    height: 30%;
  }
  .bar-chart .p-40 {
    height: 40%;
  }
  .bar-chart .p-75 {
    height: 75%;
  }
  .bar-chart .p-80 {
    height: 80%;
  }
  .bar-chart .p-85 {
    height: 85%;
  }
  .bar-chart .p-90 {
    height: 90%;
  }
  .bar-chart .p-95 {
    height: 95%;
  }
  .bar-chart .p-100 {
    height: 100%;
  }
  .bar-chart .aqua {
    border-color: #8dc5be;
    background-color: #5fb2a8;
    background-image: -moz-linear-gradient(center bottom, #5fb2a8 0%, #b0dbd6 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5fb2a8), color-stop(1, #b0dbd6));
    background-image: -webkit-linear-gradient(bottom, #5fb2a8, #b0dbd6);
    background-image: -o-linear-gradient(bottom, #5fb2a8, #b0dbd6);
    background-image: -ms-linear-gradient(bottom, #5fb2a8, #b0dbd6);
    background-image: linear-gradient(#b0dbd6, #5fb2a8);
  }
  .bar-chart .pink {
    border-color: #ebc0b5;
    background-color: #e1ae9e;
    background-image: -moz-linear-gradient(center bottom, #e1ae9e 0%, #f4dcd6 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e1ae9e), color-stop(1, #f4dcd6));
    background-image: -webkit-linear-gradient(bottom, #e1ae9e, #f4dcd6);
    background-image: -o-linear-gradient(bottom, #e1ae9e, #f4dcd6);
    background-image: -ms-linear-gradient(bottom, #e1ae9e, #f4dcd6);
    background-image: linear-gradient(#f4dcd6, #e1ae9e);
  }
  .bar-chart .yellow {
    border-color: #e7af30;
    background-color: #dfae36;
    background-image: -moz-linear-gradient(center bottom, #dfae36 0%, #efc563 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfae36), color-stop(1, #efc563));
    background-image: -webkit-linear-gradient(bottom, #dfae36, #efc563);
    background-image: -o-linear-gradient(bottom, #dfae36, #efc563);
    background-image: -ms-linear-gradient(bottom, #dfae36, #efc563);
    background-image: linear-gradient(#efc563, #dfae36);
  }
  .bar-chart .brown {
    border-color: #dcb386;
    background-color: #bc8e5b;
    background-image: -moz-linear-gradient(center bottom, #bc8e5b 0%, #dcba83 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #bc8e5b), color-stop(1, #dcba83));
    background-image: -webkit-linear-gradient(bottom, #bc8e5b, #dcba83);
    background-image: -o-linear-gradient(bottom, #bc8e5b, #dcba83);
    background-image: -ms-linear-gradient(bottom, #bc8e5b, #dcba83);
    background-image: linear-gradient(#dcba83, #bc8e5b);
  }
  .bar-chart .red {
    border-color: #e14949;
    background-color: #ca4544;
    background-image: -moz-linear-gradient(center bottom, #ca4544 0%, #da6d6c 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ca4544), color-stop(1, #da6d6c));
    background-image: -webkit-linear-gradient(bottom, #ca4544, #da6d6c);
    background-image: -o-linear-gradient(bottom, #ca4544, #da6d6c);
    background-image: -ms-linear-gradient(bottom, #ca4544, #da6d6c);
    background-image: linear-gradient(#da6d6c, #ca4544);
  }
  .bar-chart li.axis {
    width: 8%;
    border: 0;
    border-right: #DDD solid 1px;
    height: 450px;
    background: #fafafa;
    -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: #757575;
    margin: -0.6em 0 88px 0;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
  }
  /* Tooltip styles */
  [tooltip]:after {
    min-width: 220px;
  }
  /* Blog styles tablet large */
  .blog {
    padding: 4.8rem 5%;
  }
  .blog .share {
    display: block;
  }
  .blog .recent-posts {
    margin-top: 0.3em;
  }
  .blog-index article h1,
  .blog-index article .h1 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  .contact .submit {
    /*float: right;*/
    width: auto;
  }
  .form .email-capture input[type="email"] {
    width: 30rem;
    float: left;
    border-radius: 4px 0 0 4px;
    border-right: 0;
  }
  .form .email-capture .submit {
    margin-top: 0;
    margin-left: 0;
    float: left;
    border-radius: 0 4px 4px 0;
  }
}
@media only screen and (min-width: 1024px) {
  header nav {
    font-size: 18px;
    font-size: 1.8rem;
  }
  p {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .row,
  .content .row {
    clear: both;
    max-width: 1040px;
    margin: 0 auto;
  }
  .row.alt [class^="col-"] {
    float: right;
    margin: 0 0 0 3.84615385%;
  }
  [class^="col-"] {
    float: left;
    margin: 0 3.84615385% 0 0;
    list-style: none;
    position: relative;
  }
  [class^="col-"]:last-child,
  .row.alt [class^="col-"]:last-child {
    margin: 0;
  }
  .col-1 {
    width: 4.80769231%;
  }
  .col-2 {
    width: 13.46153846%;
  }
  .col-3 {
    width: 22.11538462%;
  }
  .col-4 {
    width: 30.76923077%;
  }
  .col-5 {
    width: 39.42307692%;
  }
  .col-6 {
    width: 48.07692308%;
  }
  .col-7 {
    width: 56.73076923%;
  }
  .col-8 {
    width: 65.38461538%;
  }
  .col-9 {
    width: 74.03846154%;
  }
  .col-10 {
    width: 82.69230769%;
  }
  .col-11 {
    width: 91.34615385%;
  }
  .col-12 {
    width: 100%;
    margin: 0;
  }
  .portfolio .content-detail .col-4 {
    width: 30.7692307692%;
    margin-right: 3.84615385%;
    margin-bottom: 0 !important;
  }
  .portfolio .content-detail .col-4:last-child {
    margin-right: 0;
  }
  .content-blocks [class^="col-"] {
    margin-bottom: 0;
  }
  .content-blocks p {
    margin-bottom: 0 !important;
  }
  /* snaps */
  .snaps {
    padding-top: 3.2rem;
  }
  .snaps a {
    width: 14%;
    margin: 0 2% 0 0;
    padding: 0.5%;
  }
  .snaps a:nth-child(3n) {
    margin-right: 2%;
  }
  .snaps a:last-child {
    margin-right: 0;
  }
  /* 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;
  }
  section.main,
  .portfolio-main section.noise {
    padding: 6.4rem 4.3rem;
  }
  .text-main,
  .text-middle {
    padding-top: 3.2rem;
  }
  .portfolio .text-main,
  .portfolio .text-middle {
    padding-top: 6.4rem;
  }
  .text-main.pad-small,
  .text-middle.pad-small {
    padding-top: 3.2rem;
  }
  /* 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: 4.8rem;
  }
  .pad.side {
    padding: 0px 4.8rem;
  }
  /* Desktop portfolio styles */
  .portfolio img {
    margin-bottom: 6.4rem;
  }
  .portfolio img.margin-small {
    margin-bottom: 4rem;
  }
  .portfolio ul.ul,
  .portfolio ol.ol {
    margin-bottom: 4rem;
  }
  .portfolio .text-center {
    margin-bottom: 8rem;
  }
  .portfolio h1,
  .portfolio .h1 {
    font-size: 48px;
    font-size: 4.8rem;
  }
  /* Desktop blog styles */
  .blog {
    padding: 9.6rem 5%;
  }
  .blog .col-8 {
    width: auto;
  }
  img.major {
    margin: 0;
  }
  .contact .submit {
    float: right;
  }
  .form .email-capture {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 1140px) {
  .logo {
    margin-left: 0;
  }
  /* 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: 1.6rem 4rem 1.6rem 1.6rem;
  }
  .thumbs .arrow-r {
    width: 32px;
    height: 32px;
    background: url(images/sprite.png) no-repeat;
    display: block;
    background-position: -63px -107px;
    position: absolute;
    top: 2.4rem;
    right: 10px;
  }
  .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/adham-dannaway-sky-people.jpg) top left no-repeat;
    display: block;
    max-width: 590px;
    max-height: 500px;
    position: relative;
  }
}
/* Mobile retina */
@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;
  }
  .logo,
  .icon-nav,
  .social li a {
    background-image: url(images/sprite-mobile@2x.png);
    background-size: 200px 500px;
  }
  .social-disc li a,
  footer a.top,
  .thumbs .arrow-r,
  .next,
  .prev,
  .next a,
  .prev a,
  .blog .author-profile .avatar {
    background-image: url(images/sprite@2x.png);
    background-size: 200px 1200px;
  }
}
/* Desktop retina */
@media only screen and (min-width: 830px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 830px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 830px) and (min-device-pixel-ratio: 1.5) {
  .logo,
  .social li a,
  .blog .author-profile .avatar {
    background-image: url(images/sprite@2x.png);
    background-size: 200px 1200px;
  }
}