/*   
Theme Name: Adham Dannaway
Theme URI: https://www.maddisweb.com/
Description: Handcrafted portfolio website of Adham Dannaway.
Author: Adham Dannaway
Author URI: https://www.maddisweb.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,
.email-octopus-form .emailoctopus-form .btn {
  -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;
}
.logo-text{    
	color: #666;
    font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3.2rem;
    vertical-align: bottom;
    display: inline-block;
    padding: 28px 0;}
/* Rounded corners top only */
.rounded-top,
.bar-chart li {
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
}
/* 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-c-desktop {
  text-align: left !important;
}
@media only screen and (min-width: 830px) {
  .align-c-desktop {
    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:#f4faff;
  height: 62px;
  padding: 0 5%;
  width: 90%;
  position: absolute;
  z-index: 1000;
   /* box-shadow:1px 1px 2px 1px rgb(136 136 136 / 20%)
   Navigation */
}
header nav {
  display: none;
  background: #f4faff;
    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: 6.4rem;
    border: 0px;
  }
header nav li a {
  display: block;
  color: #666;
  line-height: 6.4rem;
 padding: 0 1em;
  text-decoration: none;
  font-weight:bold;
  font-weight:bold;
}


  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,header nav .social{
    display: none;
  }



.works  header{
    opacity: 1;
    top: 0px;
    position: fixed;

}
.works  h2{
	margin-top:4rem;
	}
.works .cs-btn {
	top:20px;
    color: #6a6a6a;
    background: #fff;
    padding: 5px 10px;
    font-weight: 500;
    border: 1px solid #ccc;
	position:relative;
}
.works h4{padding-top:1rem;}
.works img.major
 {
	margin-top:10rem;
	margin-bottom: 0;
}
.works section ul,
.works section ol {padding-left: 20px;}
.works section ul li,
.works section ol li{padding:5px 0;}


.logo {
  height: 62px;
  width: 40px;
  background: url(../assets/sprite-mobile.png) 0px -63px no-repeat;
  display: block;
  text-indent: -9999px;
  float: left;
}
.logo:hover {
  opacity: 0.5;
}
  .nick-logo{
	   height: 92px;
    width: 62px;
    background: url(../nikhil/images/logo.png) 0px 28px no-repeat;
	background-size: 60%;
	  display: block;
  text-indent: -9999px;
  float: left;
}
.nick-logo:hover {
  opacity: 0.5;
}
.icon-nav.active {
  opacity: 0.5;
}

.ar-arrow {
     border: solid #666;
    border-width: 0 3px 3px 0;
    display: block;
    padding: 3px;
    float: left;
    position: relative;
    /* margin: auto; */
top: 44%;}

.ar-right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.ar-left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.ar-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.ar-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

 .title-mob.{display:show;}
 .title-desktop, .nick-img{display:none;}



.social li:first-child {
 margin-left:0;
}
.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(../assets/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 .resume a {
  background-position: -34px -185px;
}
.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 -185px;
}
.content {
  margin-top: 62px;
}
/* Set optimal copy length */
.row {
  max-width: 68rem;
  margin: 0 auto;
}
/* Remove copy length from non copy elements */

       
.cs-btn{


    border-radius: 4px;

    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    outline: 0;
    padding: 10px 25px;
    text-align: center;
    transform: translateY(0);
    transition: transform 150ms, box-shadow 150ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
	text-decoration:none;
}

  .btn-grad { background:#1380aa;}
 .btn-grad {
	text-align: center;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow:#dce3e9 1px 2px 4px 2px;}

  .btn-grad:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
	 background:#56B4D3;
  }
.portfolio-img{
	visibility: visible;
	right: 0%; opacity: 1 !important; 
	padding-top:50px}
.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;
}
.description h1 span {
    font-size: 4rem;
    display: block;
}
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);

}
footer a.top {
  background: transparent url(../assets/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.1;
  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: 26px;
  font-size: 2.6rem;
  line-height: 1.3;
  font-weight: normal;
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
h3.small,
.h3.small {
  font-size: 22px;
  font-size: 2.2rem;
}
.skill-title{
    margin: 0;
    color: #666;
    text-rendering: optimizelegibility;
    font-weight: normal;
    font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
	font-size: 3.2rem;
	letter-spacing: -0.06em;
	text-align:left;
}
h4,
.h4 {
  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;
}
p {
  margin-bottom: 2.4rem;
  line-height: 1.5;
  font-size: 20px;
  font-size: 2rem;
  /*-webkit-font-smoothing: antialiased;*/
}
p.intro {
  font-size: 24px;
  font-size: 2.4rem;
  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;
  line-height: 1.5 !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;
}
span.uppercase {
  position: absolute;
  top: 0px;
  left: 6px;
}
a {
  text-decoration: underline;
  cursor: pointer;
  color: #111111;
}
a:hover,
a:active {
  color: #757575;
}
a.link-top {
  text-decoration: none;
  margin-bottom: 4rem;
  display: inline-block;
}
/* 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:#f4faff;
  position: absolute;
  top: -0.8rem;
  left: 50%;
  margin-left: -108px;
  width: 220px;
  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;
  border: 1px solid #ccc;
  border-width: 0 1px;
}
/* Change default text selection colour */
::selection {
  background: #111111;
  color: #FFF;
}
::-moz-selection {
  background: #111111;
  color: #FFF;
}
::-webkit-selection {
  background: #111111;
  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;
}
ul.ul.disc-none,
ol.ol.disc-none {
  list-style-type: none;
  padding-left: 0px !important;
}
.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('../assets/proximanova-bold-webfont.eot');
  src: url('../assets/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../assets/proximanova-bold-webfont.woff') format('woff'), url('../assets/proximanova-bold-webfont.ttf') format('truetype'), url('../assets/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
  font-weight: normal;
  font-style: normal;
;font-display: swap;
}
@font-face {
  font-family: 'proxima nova semibold';
  src: url('../assets/proximanova-semibold-webfont.woff2') format('woff2'), url('../assets/proximanova-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
;font-display: swap;
}
/*@font-face {
    font-family: 'proxima nova regular';
    src: url('../assets/proximanova-regular-webfont.eot');
    src: url('../assets/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/proximanova-regular-webfont.woff') format('woff'),
         url('../assets/proximanova-regular-webfont.ttf') format('truetype'),
         url('../assets/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;

;font-display: swap;
}*/
@font-face {
  font-family: 'proxima nova light';
  src: url('../assets/proximanova-light-webfont.eot');
  src: url('../assets/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'), url('../assets/proximanova-light-webfont.woff') format('woff'), url('../assets/proximanova-light-webfont.ttf') format('truetype'), url('../assets/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
  font-weight: normal;
  font-style: normal;
;font-display: swap;
}
/* 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.light .pill,
section.main .pill {
  margin: 0 0 2.4rem 0 !important;
}
section.dark,
section.noise,
section.blue-grey {
  background: #f4faff;
  border-bottom: #dddddd solid 1px;
  padding: 6.4rem 3.2rem;
}
section.dark-blue{
	background:linear-gradient(90deg, #32709a, #8ab2cb); 
	padding: 2rem 3rem; 
	margin-bottom:30px;
	}
.works section.dark-blue h2{ 
        margin-bottom: 0;
	margin-top: 2rem;
    color: #fff;
    text-align: left;
	text-rendering: optimizelegibility;
    font-weight: normal;
	text-transform: uppercase;
	}
.works section.dark-blue h2 span{}
section.blue-grey{background: #f4faff;}
.bdr-top{border-top:1px solid #ddd; padding-top:50px}
.about section.dark:last-child,
.about section.noise:last-child,
.featured section.dark:last-child,
.featured section.noise:last-child {
  padding-bottom: 12.8rem;
}

.tag{   
	position: relative;
    top: -35px;
    display: inline-block;
    background: #ffffff;
    padding: 5px;
    border: 1px solid #dadada;
    border-width: 1px;
    border-radius: 9px 0 0 0;
    font-size: 2rem;
    font-weight: bold;
    width: 28px;
    text-align: center;
	}


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;
}
.text-main {
  position: relative;
}
.home-img{margin-bottom:0;border-bottom:1px solid #ddd}
img {
  max-width: 100%;
  position: relative;
  margin-bottom: 4rem;
  height: auto;
}
img.major {
  margin-top: 0;
  margin-bottom: 0;
}
img.shadow {
  border: #dddddd solid 1px;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
img.icon {
  margin-bottom: 0.8rem !important;
}
img.rounded,
.is-style-rounded img,
img.is-style-rounded {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
img.border,
.border img {
  border: #dddddd solid 1px;
  box-sizing: content-box !important;
}
hr {
  border: none;
  border-top: none !important;
  border-bottom: #dddddd solid 1px !important;
  margin: 0 0 4rem 0;
  padding-top: 1.6rem;
}
.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;
  border: 1px solid #dddddd;
  margin: 0;
  box-sizing: border-box;
}
.avatar-stack {
  margin-bottom: 0.8rem;
}
.avatar-stack .avatar {
  margin: 0 0 0 -2rem;
  border: 4px solid #FFFFFF;
}
.avatar-stack .avatar img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #dddddd;
  margin: 0;
  box-sizing: border-box;
  position: static;
}
.avatar-stack .avatar:first-of-type {
  margin: 0;
}
.author-profile {
  margin-bottom: 4rem;
}
.author-profile .avatar {
  background: url(../assets/sprite.png) 0px -802px no-repeat;
}
.author-profile .author-description {
  display: inline-block;
  color: #757575;
  font-size: 16px;
  font-size: 1.6rem;
  padding-left: 0.8rem;
  padding-bottom: 0.8rem;
}
.author-profile .author-description .name {
  display: block;
  padding-bottom: 0.4rem;
  color: #333333;
  font-size: 18px;
  font-size: 1.8rem;
}
.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: 1rem;
}

.skills {
    display: flex;
    flex-wrap: wrap;
}


.skills__skill {
		display:none;
    padding: .5rem .5rem;
    margin-bottom:.5rem;
    margin-right:.5rem;
    font-size: 1rem;
    background:rgb(255 255 255 / 100%);
	border: 1px solid #eee;
    border-radius: 25px;
    font-weight: 600;
    color: #666;
	}
    #content-detail .aoc.skills{text-align:center; display:block;}
    #content-detail .aoc.skills .skills__skill{display:inline-block;}

/* 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: 4rem;
  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 figure {
  margin: 0 0 4rem 0;
}
.blog figure.rounded img {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.blog table.summary-list {
  border-bottom: 1px solid #dddddd;
}
.blog table.summary-list td {
  border: none;
  padding: 12px 24px 12px 0px;
  border-top: 1px solid #dddddd;
}
.blog table.summary-list td.label {
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
.blog article {
  border-bottom: #dddddd solid 1px;
}
.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 {
  /*.drop-shadow(0px, 1px, 3px, 0px, rgba(0,0,0,0.3));*/
  margin: 0 0 4rem 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: #dddddd solid 1px;
}
.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 {
  /*.drop-shadow(0px, 1px, 3px, 0px, rgba(0,0,0,0.3));*/
  margin: 0 0 3.2rem 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
/* 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: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -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);
  Background:#fff;
}
.snaps a img {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  width: 100%;
  margin-bottom: 0;
}
.snaps a span{
  color: #666;
  text-decoration: none;
  padding:4px 2px 0px 2px;

display:block;
border-radius: 0 0 8px 8px;
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  font-size: 14px;
  font-weight:bold;
}
.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;
      text-align: left;
  line-height: 5rem;
  display: block;
  height: 5rem;
  background: url(../assets/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) {
	 .title-mob{display:show;}
	 .title-desktop, .nick-img{display:none;}
  .social-disc li {
    width:100%;
  }
}
/* 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(../assets/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;
  /* Inline media queries */
}
.thumbs li {
  float: none;
  margin: 0 0 3.2rem 0;
  background: #ffffff;
  padding: 5% 5% 0 5%;
  position: relative;
  display: block;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -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);
  /* Show the 3rd item at the bottom of the page */
}
.thumbs li a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #333333;
}
.thumbs li a img {
  display: block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -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);
}
.home .thumbs li:nth-child(3n),
.portfolio .thumbs li:nth-child(3n),
.error404 .thumbs li:nth-child(3n) {
  display: block;
}
.thumbs .description {
  padding: 1.6rem 0;
  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;
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
.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;
}
@media only screen and (min-width: 630px) {
	.social-disc li {
    width:35%;
  }
  .thumbs li {
    float: left;
    width: 44.16666666666%;
    margin: 0 5% 5% 0;
    background: #ffffff;
    padding: 1.6666666666% 1.6666666666% 0 1.6666666666%;
    /* Hide the 3rd item at the bottom of the page */
  }
  .thumbs li:nth-child(2n) {
    margin-right: 0;
  }
  .home .thumbs li:nth-child(3n),
  .portfolio .thumbs li:nth-child(3n),
  .error404 .thumbs li:nth-child(3n) {
    display: none;
  }
  .thumbs .description {
    padding: 1.6rem;
  }
}
@media only screen and (min-width: 830px) {
  .thumbs li {
    float: left;
    width: 30.1923076923%;
    margin: 0 2.4038461538% 2.4038461538% 0;
    background: #ffffff;
    padding: 0.7692307692% 0.7692307692% 0 0.7692307692%;
    /* Show the 3rd item at the bottom of the page */
  }
  .thumbs li:nth-child(2n) {
    margin-right: 2.4038461538%;
  }
  .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),
  .learn .thumbs li:nth-child(3n) {
    display: block;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 1140px) {
  .thumbs .description {
    padding: 1.6rem 4rem 1.6rem 1.6rem;
  }
  .thumbs .arrow-r {
    width: 32px;
    height: 32px;
    background: url(../assets/sprite.png) no-repeat;
    display: block;
    background-position: -63px -107px;
    position: absolute;
    top: 2.4rem;
    right: 10px;
  }
}
/* Button */
a.button,
button,
.submit,
.email-octopus-form .emailoctopus-form .btn {
  font-family: "proxima nova semibold", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  color: #336699;
  background-color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  border: #aacae5 solid 2px;
  vertical-align: middle;
  height: 4.8rem;
  display: block;
  width: 100%;
   box-shadow: 1px 1px 1px #ccc;
  text-align: center;
  line-height: 4.8rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -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,
.email-octopus-form .emailoctopus-form .btn.secondary {
  color: #333333;
  background-color: #ffffff;
}
a.button.secondary:hover,
button.secondary:hover,
.submit.secondary:hover,
.email-octopus-form .emailoctopus-form .btn.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,
.email-octopus-form .emailoctopus-form .btn.secondary a:active.button,
a.button.secondary button:active,
button.secondary button:active,
.submit.secondary button:active,
.email-octopus-form .emailoctopus-form .btn.secondary button:active,
a.button.secondary .submit:active,
button.secondary .submit:active,
.submit.secondary .submit:active,
.email-octopus-form .emailoctopus-form .btn.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,
.email-octopus-form .emailoctopus-form .btn.green {
  background: #317F39;
  border-color: #317F39;
}
a.button.red,
button.red,
.submit.red,
.email-octopus-form .emailoctopus-form .btn.red {
  background: #BF2727;
  border-color: #BF2727;
}
a.button.disabled,
button.disabled,
.submit.disabled,
.email-octopus-form .emailoctopus-form .btn.disabled {
  color: #b4b4b4 !important;
  position: static;
  cursor: not-allowed;
  background: #f5f5f5;
  border-color: #dddddd;
}
.error404 a.button,
.error404 button,
.error404 .submit,
.error404 .email-octopus-form .emailoctopus-form .btn {
  margin-bottom: 10px;
}
a:hover.button,
button:hover,
.submit:hover,
.email-octopus-form .emailoctopus-form .btn:hover {
  opacity: 0.8;
}
a:active.button,
button:active,
.submit:active,
.email-octopus-form .emailoctopus-form .btn: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: 16px;
  font-size: 1.6rem;
  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;
  height: 3.2rem;
  line-height: 3.2rem;
  vertical-align: middle;
  margin: 1.6rem 0;
  /*letter-spacing: 0.2rem;
	text-transform: uppercase;*/
}
/* 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(../assets/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(../assets/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:auto;
}
.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 {
  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;
}
.face .designer h4{
	padding:5px 10px;
	margin:0;
	Background:#f5f5f5;
	display:inline-block;
	box-shadow:1px 1px 2px 1px rgb(138 138 138 / 20%);
	}
	

@media only screen and (min-width: 320px),
@media only screen and (min-width: 375px),
@media only screen and (min-width: 414px),
@media only screen and (min-width: 768px)
@media only screen and (min-width: 900px),
 {
	 
	.content .row.skills{margin-top:-10px;}
	#content-detail .skills__skill{display:block;
	background: rgb(255 255 255 / 90%);
	}
	.skills__skill {
		display:none;
    padding: .5rem .5rem;
    margin-bottom:.5rem;
    margin-right:.5rem;
    font-size: 1rem;
    background:rgb(228 228 228 / 20%);
	border: 1px solid #eee;
    border-radius: 25px;
    font-weight: 600;
    color: #666;
	}
	.logo-text{
		display:none;
        font-size: 2.8rem;
        padding: 15px 0;
        font-variant: all-small-caps;
		}
		.nick-logo {
			background-position-y:12px;
		}
	.face .coder .description{
	 margin-left: 14px;
	}
	.face .coder .description h1{
		display:none;
		
	}
	.face .designer h1{font-size:5rem}

	.face .coder .description p{
		text-align:left;
		display:none ;
		font-size: 1.1rem;
		margin-bottom: 1.4rem;
	}
	.face .designer .description p{
		display:block ;
	}
	.face .coder, .face .designer .social{display:block;}
	/*#about #img-main{display: none;}*/
	  section.light,
  section.dark,
  section.noise,
  section.main {
    /*padding: 4rem 4.3rem;*/
	padding: 2rem 3rem;
  }
	.face .coder, .face .designer {
    position: static;
    width: 100%;
    display: block;
    z-index: 10;
    height: 170px;
    margin: auto;
    top: 0;
    bottom: 0;
    text-align: center;
	}
	
	.portfolio-img{
	padding-top:0px; padding-bottom:20px}
	.works img.major
 {
	margin-top:2rem;
	margin-bottom: 0;
}
 }

@media only screen and (min-width: 1024px),
@media only screen and (min-width: 1140px)
{
	.title-mob{display:none;}
	 .title-desktop, .nick-img{display:block;}
	.content .row.skills{margin-top:20px;}
	  .skills__skill {
	display:block;		
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    margin-right: 1.5rem;
    font-size: 1.6rem;
    background:rgb(228 228 228 / 20%);
	border: 1px solid #eee;
    border-radius:25px;
    font-weight: 600;
    color: #666;
	}
	.logo-text{display:none;}
	.face .coder .description{
	 margin-left:0;
	 right:0;
	 }
	 .nick-logo {
			background-position-y:28px;
		}
	.face .coder .description h1, .face .designer .description h1{
		display:block;
		text-align:left;
	}
	.face .coder .description p, .face .designer .description p{
		text-align:left;
		font-size:1.8rem;
		margin-bottom: 1.4rem;
		 display:block ;
	}
	.face .coder .description p{margin-top:55px;}
	  .face .coder h1,
  .face .designer h1 {
    font-size: 82px;
    font-size: 4.5rem;
  }
    .face {
    width: 1040px;
    height: 600px;
    position: relative;
    /* Face images */
    /* Background images */
    /* Hide default image with no effects */
  }


  .face .coder .description,
  .face .designer .description {
    position: absolute;
    top: 130px;
    width: 310px;
  }
	  .face .coder,
  .face .designer {
    width: 520px;
    height: 600px;
    top: 0px;
    position: absolute;
  }
  .face .coder {
  right: 0;
  text-align: right;
}
#about #img-main{display: block;}
 .face .designer .social{display:none}
 .works img.major
 {
	margin-top:7rem;
	margin-bottom: 0;
}
}

@media only screen and (min-width: 1024px){

		.face{width:auto;}
        .face .coder .description p,
		.face .designer .description p {
			display:none;
		}			
	.coder .row.skills{margin-top: 120px;margin-left: 70px;}
	.designer .row.skills{margin-top: 30px;}
}
@media only screen and (min-width: 1140px) {
		.face{width:auto;}
        .face .coder .description p,
		.face .designer .description p {
			display:block;
		}			
	.coder .row.skills{margin-top:10px;margin-left:0px;}
	.designer .row.skills{margin-top:10px;}
  .face .coder .arrow,
  .face .designer .arrow {
    width: 85px;
    height: 140px;
    background: url(../assets/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(../assets/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;
	    border-left:2px solid rgb(255, 255, 255);
  }
  .face .designer-bg,
  .face .coder-bg {
    width: 420px;
    height: 200px;
    position: absolute;
    bottom: 0px;
    background: url(../assets/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: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -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;
}
.form input[type="text"],
.form input[type="email"] {
  height: 4.8rem;
  line-height: 4.8rem;
}
.form textarea {
  height: 148px;
  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: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -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: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -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: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -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: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -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;
}
/* Email Octopus form */
.email-octopus-form .form-container {
  margin: 0 0 1.6rem 0 !important;
}
.email-octopus-form [data-form="fe2a5aa0-e2b2-11ef-9fc3-5b431a732bb4"].inline-container {
  max-width: none !important;
}
.email-octopus-form .main-form .emailoctopus-form-row {
  margin: 0 0 16px 0 !important;
}
.email-octopus-form input.form-control {
  border: #949494 solid 1px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -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;
  height: 4.8rem;
  line-height: 4.8rem !important;
}
.email-octopus-form .emailoctopus-form .btn {
  padding: 0px;
  margin: 0px !important;
}
.email-octopus-form .emailoctopus-form .btn:active {
  background-color: #333333 !important;
  border-color: #333333 !important;
}
.email-octopus-form .text-center {
  margin: 0px !important;
}
.email-octopus-form .emailoctopus-success-message,
.email-octopus-form .emailoctopus-error-message {
  text-align: left !important;
}
@media only screen and (min-width: 600px) {
  .email-octopus-form .emailoctopus-form .btn {
    width: auto;
    border-radius: 0 8px 8px 0 !important;
  }
  .email-octopus-form input.form-control {
    border-radius: 8px 0 0 8px !important;
    border-right: none;
  }
  .email-octopus-form .main-form .emailoctopus-form-row {
    margin: 0 !important;
  }
}
@media only screen and (min-width: 830px) {
  .email-octopus-form .form-container {
    margin: auto auto 1.6rem auto !important;
  }
  .email-octopus-form .emailoctopus-success-message,
  .email-octopus-form .emailoctopus-error-message {
    text-align: center !important;
  }
}
@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;
  }

  .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:#f4faff;
    height: 92px;
	border-bottom: 1px solid #ddd;
	  box-shadow:none;
  }
  .logo {
    height: 92px;
    width: 62px;
    background: url(../assets/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: #666;
    line-height: 92px;
    padding: 0 1em;
    text-decoration: none;
	font-weight:bold;
  }
  header nav li:hover a,
  header nav .current_page_item a,
  header nav .current_page_parent a {
    color: #999;
  }
  header nav .portfolio .current_page_parent a {
    color: #ffffff;
  }
  header nav .portfolio .page-item-7 a {
    color: #757575;
  }
  header .icon-nav {
    display: none;
  }
  
  header .icon-nav,header nav .social{
    display: block;
  }


  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%;
  }
  .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(../assets/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%;
  }
 
  /* 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: 8px 0 0 8px;
    border-right: 0;
  }
  .form .email-capture .submit {
    margin-top: 0;
    margin-left: 0;
    float: left;
    border-radius: 0 8px 8px 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;
  }
  span.uppercase {
    top: 3.2rem;
  }
  .row,
  .content .row {
    clear: both;
    max-width: 1040px;
    margin: 0 auto;
  }
  .home-img{margin-bottom:0;border-bottom:none}
  .bdr-top {
    padding-top:100px;
}
.tag{   
    top:0px;
	}
  .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;
  }
  .portfolio h1.hero,
  .portfolio .h1.hero {
    font-size: 56px;
    font-size: 5.6rem;
  }
  /* 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(../assets/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(../assets/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;
  }
  .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(../assets/venkata-maddi-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(../assets/loader@2x.png) 0 100% no-repeat;*/
    background-size: 200px 100px;
  }
  #jpreBar,
  #qLbar {
   /* background: url(../assets/loader@2x.png) -100px 100% no-repeat;*/
    background-size: 200px 100px;
  }
  .logo,
  .icon-nav,
  .social li a {
    background-image: url(../assets/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(../assets/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(../assets/sprite@2x.png);
    background-size: 200px 1200px;
  }
}

.scrollup {
    z-index: 9999;
    display: none;
    position: fixed;
    right: 20px;
    bottom: 30px;
    margin: 0;
    color: #999;
    background-color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
	box-shadow:0px 1px 4px 2px #c4e0fb;
	display:none;
}
.scrollup .ar-arrow { left: 15px;}