/* Effects =================================================== */
/* Animate all */
.animate,
.top,
header nav li a,
.thumbs li {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
/* Animate opacity */
.animate-opacity,
.social a,
.logo,
.contact a {
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}
/* Rounded corners top only */
.rounded-top,
.bar-chart li {
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
}
/* 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 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;
}
@font-face {
  font-family: 'neosans regular';
  src: url('fonts/neosans-medium-webfont.eot');
  src: url('fonts/neosans-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/neosans-medium-webfont.woff') format('woff'), url('fonts/neosans-medium-webfont.ttf') format('truetype'), url('fonts/neosans-medium-webfont.svg#neosansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  background: #FFFFFF;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

section.light, section.dark, section.noise {
    padding: 6em 5%;
}
section.light, section.dark, section.noise, section.main {
    padding: 4.5em 5%;
}
section.light {
   
    border-bottom: 1px solid #DDD;
}
section.light, section.main {
    overflow: hidden;
    border-top: 1px solid #FFF;
    padding: 3em 1.5em;
}
.nopad-b {
    padding-bottom: 0px !important;
}
.nopad-t {
    padding-top: 0px !important;
}


.concept {
  padding: 0px 10px;
  font-size: 12px;
  font-size: 1.2rem;
  background: #e8e8e8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  margin-left: 5px;
  border-bottom: #FFF solid 1px;
  color: #888888;
  font-weight: normal;
  display: inline-block;
}
/* Previous and Next buttons */
.next,
.prev {
  display: none;
}
/* jQuery Preloader */
#jpreOverlay,
#qLoverlay {
  background-color: #FFF;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
}
#jpreSlide {
  font-size: 22px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  width: 100%;
}
#jpreLoader,
#qLloader {
  width: 100px;
  height: 100px;
  background: url(images/loader.png) 0 100% no-repeat;
  position: fixed;
  top: 43%;
  left: 50%;
  margin-left: -50px;
  display: none;
}
#jpreBar,
#qLbar {
  width: 100px;
  height: 0%;
  position: absolute;
  bottom: 0px;
  background: url(images/loader.png) -100px 100% no-repeat;
}
#jprePercentage,
#qLpercentage {
  color: #888888;
  text-align: center;
  position: absolute;
  height: 30px;
  width: 100px;
  bottom: -30px;
}
/* Eliminate FOUC - by hiding content inside .js class initially */
.js #content,
.js #content-detail,
.js .js #coder-img,
.js #designer-img,
.js #coder,
.js #designer,
.js #coder-bg,
.js #designer-bg,
.js #img-main,
.js #text-main,
.js #snaps,
.js #snaps-1,
.js #snaps-2,
.js #snaps-3,
.js #snaps-4,
.js #snaps-5,
.js #snaps-6,
.js #img-0,
.js #img-1,
.js #img-2,
.js #icons,
.js #aqua,
.js #pink,
.js #yellow,
.js #brown,
.js #red,
.js #footer,
.js #face-img,
.js .portfolio-main .thumbs li,
.js .thumbs .arrow-r,
.js #navi {
  opacity: 0;
}
.js #header {
  top: -92px;
  opacity: 0;
}
.js .thumbs .arrow-r {
  opacity: 0;
  right: 0;
}
/* Homepage Half Face */
.face {
  width: 100%;
  position: relative;
  /* Show default image */

  /* Descriptions */

  /* Inline media queries */

}
.face .face-img {
  display: block;
  margin: 0px;
max-width:100%;
}
.face a {
  color: #888888;
  text-decoration: none;
}
.face .coder,
.face .designer {
  position: absolute;
  width: 40%;
  display: block;
  z-index: 10;
  height: 15%;
  margin: auto;
  top: 0;
  bottom: 0;
}
.face .coder h1,
.face .designer h1 {
  font-size: 22px;
  font-size: 2.2rem;
}
.face .designer {
  left: 0;
}
.face .coder {
  right: 0;
  text-align: right;
}
.face .designer-img,
.face .coder-img,
.face .designer-bg,
.face .coder-bg,
.face .coder p,
.face .designer p {
  display: none;
}


 .face .designer h1,  .face .designer .h1 {
    margin-bottom: 0.1em;
    font-size: 4.8rem;
    line-height: 1.2em;
    font-family: "neosans regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing: -0.07em;
}
 .face .designer h1, .face .designer .h1 {
    margin: 0px;
    color: #111;
    text-rendering: optimizelegibility;
    font-weight: normal;
}
.face .designer h1, .face .designer .h1 {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    outline: 0px none;
    font-size: 3rem;
    vertical-align: bottom;
    background: transparent none repeat scroll 0% 0%;
}
.face a {
    color: #888 !important;
}
.face .coder h1 
{
    margin-bottom: 0.1em;
    font-size: 4.8rem;
    line-height: 1.2em;
    font-family: "neosans regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing: -0.07em;
}
.face .coder h1 
{
	 
    margin: 0px;
    color: #111;
    text-rendering: optimizelegibility;
    font-weight: normal;

}
.face .coder h1 
{
	  margin: 0px;
    padding: 0px;
    border: 0px none;
    outline: 0px none;
    font-size: 3rem;
    vertical-align: bottom;
    background: transparent none repeat scroll 0% 0%;
}


@media only screen and (min-width: 321px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 26px;
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 376px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 30px;
    font-size: 3rem;
  }
}
@media only screen and (min-width: 500px) {
.TzArticleDescription img
{
display:block;
}   
.face .coder h1,
  .face .designer h1 {
    font-size: 42px;
    font-size: 4.2rem;
  }
}
@media only screen and (min-width: 600px) {
  .face .coder h1,
  .face .designer h1 {
    font-size: 47px;
    font-size: 4.7rem;
  }
}
@media only screen and (min-width: 750px) {
#logoImage img {
    height: auto;
    max-height: 70px;
    width: auto;
    max-width: 70%;
} 
 .face .coder,
  .face .designer {
    width: 25%;
    height: 35%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 45px;
    font-size: 2.8rem;
  }
  .face .coder .more,
  .face .designer .more {
    display: none;
  }
  .face .coder p,
  .face .designer p {
    display: block;
    font-size: 16px;
    font-size: 1.2rem;
    margin: 0px;
  }
}
@media only screen and (min-width: 860px) {
#logoImage img {
    height: auto;
    max-height: 90px;
    width: auto;
    max-width: 90%;
}   
.face .coder,
  .face .designer {
    width: 30%;
    height: 30%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 58px;
    font-size: 3.8rem;
  }
  .face .coder p,
  .face .designer p {
    font-size: 12px;
    
  }
}
@media only screen and (min-width: 1024px) {
.TzArticleDescription img
{

} 
#logoImage img {
    height: auto;
    max-height: 100px;
    width: auto;
    max-width: 100%;
}  
 .face .coder,
  .face .designer {
    height: 40%;
  }
  .face .coder h1,
  .face .designer h1 {
    font-size: 70px;
    font-size: 4.9rem;
  }
  .face .coder .more,
  .face .designer .more {
    display: inline;
  }
}
@media only screen and (min-width: 1140px) {
.TzArticleDescription img
{

} 
 .face {
    width: 1040px;
    height: 600px;
    position: relative;
    /* Face images */
  
    /* Background images */
  
    /* Hide default image with no effects */
  
  }
  .face .coder,
  .face .designer {
    width: 520px;
    height: 600px;
    top: 0px;
    position: absolute;
  }
  .face .coder .description,
  .face .designer .description {
    position: absolute;
    top: 160px;
    width: 270px;
  }
  .face .coder .arrow,
  .face .designer .arrow {
    width: 85px;
    height: 140px;
    background: url(images/sprite.png) no-repeat;
    display: block;
    position: absolute;
    top: 20px;
  }
  .face .coder p,
  .face .designer p {
    font-size: 18px;
    font-size: 1.4rem;
    line-height: 1.4em;
  }
  .face .coder {
    text-align: left;
    right: 0px;
  }
  .face .coder .description {
    right: 0px;
  }
  .face .coder .arrow {
    right: 0px;
    background-position: 0px -751px;
  }
  .face .designer {
    left: 0px;
  }
  .face .designer .description {
    left: 0px;
  }
  .face .designer .arrow {
    left: 0px;
    background-position: 0px -892px;
  }
  .face .designer-img,
  .face .coder-img {
    width: 420px;
    height: 600px;
    position: absolute;
    top: 0;
    background: url("http://m2hweb.com/templates/tz_profiler/test/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("http://m2hweb.com/templates/tz_profiler/test/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;
  }
}