/*
Theme Name: CodeTank
Theme URI: https://codetank.agency/
Author: Darwin Salvosa
Author URI: https://darwinsalvosa.com
Version: 1.0.0
Text Domain: CodeTank
*/
body,html {
    color: #fff
}

input,textarea {
    border: none;
    outline: 0
}

a,a.active,input,textarea {
    outline: 0
}

.align-center,body {
    text-align: center
}

article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video {
    display: block
}

blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

mark,rp,rt,ruby,summary,time {
    display: inline
}

html {
    background: 0 0
}

body {
    font: 14px/18px Arial,Helvetica,sans-serif;
    background: #d34738
}

input {
    border: 0
}

textarea {
    resize: none;
    border: 0
}

a {
    text-decoration: none
}

.none {
    display: none
}

.flat-left {
    float: left
}

.flat-right {
    float: right
}

.align-right {
    text-align: right
}

fieldset,img {
    border: 0
}

address,caption,cite,code,dfn,em,optgroup,strong,th,var {
    font-style: inherit;
    font-weight: inherit
}

li {
    list-style: none
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: 400
}

button,input,optgroup,option,select,textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit
}

button,input,select,textarea {
    font: 100% arial,helvetica,clean,sans-serif
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font: 100%
}

body {
    background: url(images/body-noise.png) repeat left top, url(images/about-me-background.png) no-repeat center 3165px, url(images/body-background-pattern.png) repeat-x center 1500px, url(images/bodybackground.png) repeat-x center top, url(images/nav-active-hello.png) no-repeat 9000px 0, url(images/nav-active-work.png) no-repeat 9000px 0, url(images/nav-active-about-me.png) no-repeat 9000px 0, url(images/nav-active-contact-us.png) no-repeat 9000px 0, url(images/logo.png) no-repeat 9000px 0, url(images/logo-work.png) no-repeat 9000px 0, url(images/logo-about-me.png) no-repeat 9000px 0, url(images/logo-contact-us.png) no-repeat 9000px 0, url(images/logo-ipad.png) no-repeat 9000px 0, url(images/logo-work-ipad.png) no-repeat 9000px 0, url(images/logo-about-me-ipad.png) no-repeat 9000px 0, url(images/logo-contact-us-ipad.png) no-repeat 9000px 0;
}

body.work {
    background: url(images/body-noise.png) repeat left top, url(images/body-background-pattern.png) repeat-x center 0, url(images/bodybackground.png) repeat-x center -1500px;
}

#wrap {
    position: relative;
    width: 1230px;
    text-align: left;
    margin: 0 auto;
}

body.work #wrap {
    width: 100%;
}

.tagline {
    color: #999999;
    letter-spacing: 2px;
    margin-left: 55px;
    margin-top: 10px;
    position: fixed;
    text-shadow: 1px 1px #000000;
    text-transform: uppercase;
    z-index: 1;
}

.tagline a {
    color: #fff;
}

.linkedin-wrap {
    position: relative;
}

nav {
    display: block;
    float: left;
    width: 338px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

#content {
    width: 876px;
    height: 100%;
    margin: 0 0 0 338px;
    top: 0;
}

body.work #content {
    width: auto;
    margin: 0;
    padding: 0 28px 0 0;
}

header {
    margin-left: 28px;
}

.grid-c4,.grid-c2,.grid-c3,.grid-c4,.grid-c5,.grid-c2-60-40 {
    float: left;
    width: 100%;
}

.grid-c1 .col,.grid-c2 .col,.grid-c3 .col,.grid-c4 .col,.grid-c5 .col,.grid-c2-60-40 .col {
    float: left;
    margin: 15px 0 0 28px;
}

.grid-c1 .col {
    width: 848px;
}

.grid-c2 .col {
    margin: 0;
    width: 50%;
}

.grid-c3 .col {
    width: 264px;
}

.grid-c4 .col {
    width: 191px;
}

.grid-c5 .col {
    width: 147px;
}

.grid-c2-60-40 .col.p60 {
    width: 497px;
}

.grid-c2-60-40 .col.p40 {
    width: 323px;
}

h4 {
    color: #fff;
    font-weight: bold;
    font-size: 76px;
    line-height: 96px;
    padding: 20px 0 20px 25px;
}

nav a {
    font-family: myriad-pro-condensed,sans-serif;
}

.title-header,.title-body,.subtitle-body,.paragraph-header,.work-box p {
    font-family: proxima-nova-condensed,sans-serif;
}

.subtitle-header {
    font-family: proxima-nova,sans-serif;
}

.how-i-work {
    background: transparent url("images/howiwork-bg.png") no-repeat scroll center 0;
    float: left;
    font-family: sans-serif;
    font-size: 25px;
    font-weight: bold;
    height: 60px;
    margin-top: 20px;
    padding-top: 28px;
    text-align: center;
    text-shadow: 1px 1px #333333;
    text-transform: uppercase;
    width: 100%;
}

.howiwork {
    float: left;
    padding-bottom: 15px;
    width: 100%;
}

#hello .howiwork-box img {
    display: none;
}

.howiwork-top {
    background: url("images/dotted.png") no-repeat scroll center 55px transparent;
    float: left;
    height: 150px;
    width: 100%;
}

.howiwork-tea {
    background: transparent url("images/tea.png") no-repeat scroll right 25px;
    float: left;
    height: 100%;
    width: 25%;
}

.howiwork-paint {
    background: transparent url("images/paint.png") no-repeat scroll center 15px;
    float: left;
    height: 100%;
    width: 50%;
}

.howiwork-plane {
    background: transparent url("images/plane.png") no-repeat scroll center 40px;
    float: left;
    height: 100%;
    width: 25%;
}

.howiwork-bot h3 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}

.howiwork-bot {
    background: url("images/bline.png") no-repeat scroll center bottom transparent;
    float: left;
    font-size: 15px;
    padding-bottom: 50px;
    padding-top: 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.howiwork-box {
    background: transparent url("images/divider.png") repeat-x scroll 0 0;
    float: left;
    height: 100%;
    margin-right: 30px;
    padding-top: 20px;
    width: calc(33.33% - 20px);
}

.howiwork-box:last-child {
    margin-right: 0;
}

.work-info {
    height: 175px;
    background: url(images/quicklook.jpg) no-repeat 0 -56px;
}

.work-info span {
    position: absolute;
    top: 57px;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(images/quicklook.jpg) no-repeat 0 -288px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.work-info:hover span {
    opacity: 1;
}

.workexp {
    float: left;
    margin-top: 10px;
    width: 100%;
    position: relative;
}

.workexp:hover .workexp-award {
    display: block;
    -webkit-transition: all .3s ease .15s;
    transition-duration: 5s;
}

.workexp-award {
    display: none;
    height: 350px;
    position: absolute;
    top: -365px;
    z-index: 99;
    transition: all .5s;
}

.workexp-award img {
    vertical-align: middle;
    border: 3px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.workexp2 {
    margin-top: 30px;
}

.workexp-txt {
    background: rgba(0, 0, 0, 0) url("images/workline.png") no-repeat scroll 0 30px;
    float: left;
    margin-left: 70px;
    padding-left: 30px;
    padding-bottom: 5px;
}

.workexp-txt h2 {
    float: left;
    font-size: 20px;
    text-transform: uppercase;
    width: 100%;
}

.workexp-txt span {
    color: #EB9A91;
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    width: 100%;
}

.workexp-txt span + span {
    font-size: 11px;
}

.workexp-txt span + span + span {
}

.workexp-txt span + span + span + span {
    background: url("images/awards.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    line-height: 12px;
    margin: 0;
    padding-bottom: 5px;
    padding-left: 25px;
    padding-top: 5px;
}

.workexp-img {
    float: left;
    margin-right: -65px;
    width: 65px;
}

.title-header,.title-body,.subtitle-body,.paragraph-header,.work-box p {
    font-family: proxima-nova-condensed,sans-serif;
    margin-bottom: 10px;
}

.subtitle-header {
    font-family: proxima-nova,sans-serif;
}

.title-header {
    font-size: 82px;
    line-height: 72px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #333;
}

.subtitle-header {
    font-size: 25px;
    font-weight: 100;
    line-height: 20px;
    text-transform: uppercase;
}

.paragraph-header {
    font-size: 17px;
    line-height: 20px;
    font-weight: 500;
    font-style: italic;
    margin-top: 5px;
    letter-spacing: 1px;
}

.title-body {
    font-size: 52px;
    line-height: 44px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #333;
}

.subtitle-body {
    font-size: 26px;
    font-weight: 100;
    line-height: 24px;
    text-transform: uppercase;
}

.paragraph-body {
    padding: 3px 0 15px 0;
}

.border-radious {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.border-radious-top {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.border-radious-left {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.border-radious-right {
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.img-border {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: none repeat scroll 0 0 #A92626;
    border: 0 solid #8F2020;
    padding: 1px;
    -moz-box-shadow: inset -1px 1px 4px rgba(0,0,0,.3);
    -webkit-box-shadow: inset -1px 1px 4px rgba(0,0,0,.3);
    box-shadow: inset -1px 1px 4px rgba(0,0,0,.3);
}

.img-border-2-cont {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #fff;
    padding: 8px 8px 60px 8px;
}

.img-border-2 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #d2d3d4;
}

.filter-border {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #343737;
    padding: 1px;
    border: 1px solid #5d6363;
    -moz-box-shadow: inset -1px 1px 4px rgba(0,0,0,.3);
    -webkit-box-shadow: inset -1px 1px 4px rgba(0,0,0,.3);
    box-shadow: inset -1px 1px 4px rgba(0,0,0,.3);
}

.block-style-1 {
    padding-bottom: 40px;
    margin-bottom: 30px;
    background: url(images/line.png) no-repeat center bottom;
}

.empty {
    float: left;
    width: 189px;
    height: 189px;
    background: url(images/body-noise.png) repeat 0 0, url(images/empty.png) no-repeat right center;
}

.fade {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    background: #2D3030;
}

#selector {
    position: fixed;
    width: 330px;
    height: 60px;
    z-index: 1;
    transition: all .5s;
}

.selector-hello {
    background: url(images/nav-active-hello.png) no-repeat 7px 5px;
}

.selector-work {
    background: url(images/nav-active-work.png) no-repeat 7px 5px;
}

.selector-about-me {
    background: url(images/nav-active-about-me.png) no-repeat 7px 5px;
}

.selector-contact-us {
    background: url(images/nav-active-contact-us.png) no-repeat 7px 5px;
}

nav ul {
    position: fixed;
    width: 338px;
    height: 100%;
    background: url(images/nav-noise.png) repeat-y right top, url(images/nav-line.png) no-repeat 53px 328px, url(images/nav-background-light.png) no-repeat 23px top, url(images/nav-background-info.png) no-repeat 23px top, url(images/nav-background.png) repeat-y right top;
}

nav li {
    float: left;
    width: 321px;
    margin: 0 0 0 7px;
}

nav a {
    position: relative;
    float: left;
    width: 275px;
    height: 45px;
    text-align: center;
    font-size: 32px;
    line-height: 37px;
    font-weight: 400;
    color: #9d9c9f;
    text-shadow: 1px 1px 2px #000;
    text-transform: uppercase;
    padding: 9px 14px 3px 32px;
    cursor: pointer;
    z-index: 2;
}

#nav-hello {
    margin-top: 330px;
}

#nav-hello.on,#nav-work.on,#nav-about-me.on,#nav-contact-us.on {
    background: url(images/nav-hover.png) no-repeat 46px 5px;
}

#nav-hello.on a,#nav-work.on a,#nav-about-me.on a,#nav-contact-us.on a {
    color: #fff;
}

#nav-hello.active a,#nav-work.active a,#nav-about-me.active a,#nav-contact-us.active a {
    color: #fff;
}

.personal-info {
    position: fixed;
    float: left;
    width: 299px;
    height: 28px;
    padding: 7px 0 0 5px;
    margin: 0 0 0 26px;
}

.personal-info a {
    float: left;
    height: 28px;
    padding: 0;
    margin: 1px 0 0 3px;
    background: url(images/personal-info-icons.png) no-repeat;
}

.personal-info a.twitter {
    width: 24px;
    background-position: 0 0;
}

.personal-info a.twitter:hover {
    background-position: 0 -132px;
}

.personal-info a.linkedin {
    width: 20px;
    background-position: 0 -33px;
}

.personal-info a.linkedin:hover {
    background-position: 0 -165px;
}

.personal-info a.blog {
    width: 36px;
    background-position: 0 -66px;
}

.personal-info a.blog:hover {
    background-position: 0 -198px;
}

.personal-info a.rss {
    width: 20px;
    background-position: 0 -99px;
}

.personal-info a.rss:hover {
    background-position: 0 -231px;
}

#nav-logo {
    position: fixed;
    float: left;
    width: 189px;
    height: 189px;
    margin: 87px 0 0 81px;
}

#nav-logo.logo-hello a {
    background: url("images/logo.png") no-repeat scroll center top;
}

#nav-logo h1 {
    position: absolute;
    top: 90px;
    left: 30px;
}

#nav-logo a {
    width: 189px;
    height: 189px;
    padding: 0;
}

#nav-logo a:hover {
    background: url(images/logo.png) no-repeat center -289px;
}

#nav-logo.logo-0 a {
    background: url(images/logo.png) no-repeat center top;
}

#nav-logo.logo-hello a {
    background: url(images/logo.png) no-repeat center top;
}

#nav-logo.logo-work a {
    background: url(images/logo-work.png) no-repeat center top;
}

#nav-logo.logo-about-me a {
    background: url(images/logo-about-me.png) no-repeat center top;
}

#nav-logo.logo-contact-us a {
    background: url(images/logo-contact-us.png) no-repeat center top;
}

.html5 {
    position: fixed;
    float: left;
    width: 170px;
    height: 53px;
    background: url(images/html5-logo.png) no-repeat 0 0;
    padding: 0;
    margin: 596px 0 0 90px;
}

.html5:hover {
    background-position: 0 bottom;
}

#hello {
    height: 1500px;
    padding: 0 28px;
}

#hello header {
    height: 420px;
    background: url(images/hello-background-me.jpg) no-repeat right top;
    margin-left: 0;
}

#hello header .title-header {
    padding-top: 28px;
}

#hello header .subtitle-header {
    line-height: 29px;
}

#hello header .paragraph-header {
    padding-top: 10px;
    line-height: 26px;
}

#hello header .paragraph-header a {
    color: #fff;
    padding: 1px 7px;
}

#hello header span {
    padding: 1px 0
}

#hello header .paragraph-header a.work {
    background: url(images/hello-link.png) no-repeat 0 0, url(images/hello-link.png) no-repeat right -112px;
}

#hello header .paragraph-header a.work span {
    background: #F68B1F;
}

#hello header .paragraph-header a.work:hover,#hello header .paragraph-header a.blog:hover,#hello header .paragraph-header a.aboutme:hover,#hello header .paragraph-header a.contact-us:hover {
    background: url(images/hello-link.png) no-repeat 0 -224px, url(images/hello-link.png) no-repeat right -252px;
}

#hello header .paragraph-header a.work:hover span,#hello header .paragraph-header a.blog:hover span,#hello header .paragraph-header a.aboutme:hover span,#hello header .paragraph-header a.contact-us:hover span {
    background: #b44037;
}

#hello header .paragraph-header a.blog {
    background: url(images/hello-link.png) no-repeat 0 -28px, url(images/hello-link.png) no-repeat right -140px;
}

#hello header .paragraph-header a.blog span {
    background: #d48536;
}

#hello header .paragraph-header a.aboutme {
    background: url(images/hello-link.png) no-repeat 0 -56px, url(images/hello-link.png) no-repeat right -168px;
}

#hello header .paragraph-header a.aboutme span {
    background: #F17022;
}

#hello header .paragraph-header a.contact-us {
    background: url(images/hello-link.png) no-repeat 0 -84px, url(images/hello-link.png) no-repeat right -196px;
}

#hello header .paragraph-header a.contact-us span {
    background: #5fabae;
}

.design-creativity span {
    width: 125px;
}

.html span {
    width: 60;
}

.jquery span {
    width: 115px;
}

.php span {
    width: 85px;
}

.photoshop span {
    width: 140px;
}

.stat-cont li {
    float: left;
    height: 35px;
    margin-bottom: 3px;
    overflow: hidden;
    width: 406px;
}

.stat.design-creativity-ext:hover, .html-ext:hover, .jquery-ext:hover, .php-ext:hover, .photoshop-ext:hover {
    width: 0!important
}

.design-creativity-ext {
    width: 90%!important;
    -webkit-transition: 2s linear;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    -ms-transition: 2s linear;
    transition: 2s linear;
}

.html-ext {
    width: 95%!important;
    -webkit-transition: 3s linear;
    -moz-transition: 3s linear;
    -o-transition: 3s linear;
    -ms-transition: 3s linear;
    transition: 3s linear;
}

.jquery-ext {
    width: 85%!important;
    -webkit-transition: 2s linear;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    -ms-transition: 2s linear;
    transition: 2s linear;
}

.php-ext {
    width: 80%!important;
    -webkit-transition: 3s linear;
    -moz-transition: 3s linear;
    -o-transition: 3s linear;
    -ms-transition: 3s linear;
    transition: 3s linear;
}

.photoshop-ext {
    width: 85%!important;
    -webkit-transition: 2s linear;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    -ms-transition: 2s linear;
    transition: 2s linear;
}

.stat {
    float: left;
    height: 35px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.24);
    width: 0;
}

.stat p {
    float: right;
    margin: 6px 8px 0 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.24);
}

.stat.design-creativity {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(69,142,181)), color-stop(1, rgb(80,162,206)));
    background-image: -webkit-linear-gradient(bottom, rgba(69,142,181,1) 0%, rgba(80,162,206,1) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(69,142,181) 0%, rgb(80,162,206) 100%);
    background-image: -o-linear-gradient(bottom, rgb(69,142,181) 0%, rgb(80,162,206) 100%);
}

.stat.design-creativity p {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(80,162,206)), color-stop(1, rgb(69,142,181)));
    background-image: -webkit-linear-gradient(bottom, rgb(80,162,206) 0%, rgb(69,142,181) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(80,162,206) 0%, rgb(69,142,181) 100%);
    background-image: -o-linear-gradient(bottom, rgb(80,162,206) 0%, rgb(69,142,181) 100%);
}

.stat.html {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(147,140,59)), color-stop(1, rgb(173,164,70)));
    background-image: -webkit-linear-gradient(bottom, rgb(147,140,59) 0%, rgb(173,164,70) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(147,140,59) 0%, rgb(173,164,70) 100%);
    background-image: -o-linear-gradient(bottom, rgb(147,140,59) 0%, rgb(173,164,70) 100%);
}

.stat.html p {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(173,164,70)), color-stop(1, rgb(147,140,59)));
    background-image: -webkit-linear-gradient(bottom, rgb(173,164,70) 0%, rgb(147,140,59) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(173,164,70) 0%, rgb(147,140,59) 100%);
    background-image: -o-linear-gradient(bottom, rgb(173,164,70) 0%, rgb(147,140,59) 100%);
}

.stat.jquery {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(211,153,60)), color-stop(1, rgb(233,168,64)));
    background-image: -webkit-linear-gradient(bottom, rgb(211,153,60) 0%, rgb(233,168,64) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(211,153,60) 0%, rgb(233,168,64) 100%);
    background-image: -o-linear-gradient(bottom, rgb(211,153,60) 0%, rgb(233,168,64) 100%);
}

.stat.jquery p {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(233,168,64)), color-stop(1, rgb(211,153,60)));
    background-image: -webkit-linear-gradient(bottom, rgb(233,168,64) 0%, rgb(211,153,60) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(233,168,64) 0%, rgb(211,153,60) 100%);
    background-image: -o-linear-gradient(bottom, rgb(233,168,64) 0%, rgb(211,153,60) 100%);
}

.stat.php {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(197,124,50)), color-stop(1, rgb(223,139,56)));
    background-image: -webkit-linear-gradient(bottom, rgb(197,124,50) 0%, rgb(223,139,56) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(197,124,50) 0%, rgb(223,139,56) 100%);
    background-image: -o-linear-gradient(bottom, rgb(197,124,50) 0%, rgb(223,139,56) 100%);
}

.stat.php p {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(223,139,56)), color-stop(1, rgb(197,124,50)));
    background-image: -webkit-linear-gradient(bottom, rgb(223,139,56) 0%, rgb(197,124,50) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(223,139,56) 0%, rgb(197,124,50) 100%);
    background-image: -o-linear-gradient(bottom, rgb(223,139,56) 0%, rgb(197,124,50) 100%);
}

.stat.photoshop {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.05, rgb(180,63,55)), color-stop(0.53, rgb(204,73,63)));
    background-image: -webkit-linear-gradient(bottom, rgb(180,63,55) 0%, rgb(204,73,63) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(180,63,55) 0%, rgb(204,73,63) 100%);
    background-image: -o-linear-gradient(bottom, rgb(180,63,55) 0%, rgb(204,73,63) 100%);
}

.stat.copy p {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(204,73,63)), color-stop(1, rgb(180,63,55)));
    background-image: -webkit-linear-gradient(bottom, rgb(204,73,63) 0%, rgb(180,63,55) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(204,73,63) 0%, rgb(180,63,55) 100%);
    background-image: -o-linear-gradient(bottom, rgb(204,73,63) 0%, rgb(180,63,55) 100%);
}

.stat p span {
    float: right;
    padding: 3px 12px;
    background: url(images/stats-noise.png) repeat left top;
}

.stat-img {
    width: 100%;
    height: 100%;
    background: url(images/stats-border.png) repeat-x left top, url(images/stats-noise.png) repeat left top;
}

.box-container-blog-images {
    position: relative;
    width: 191px;
    height: 191px;
    overflow: hidden;
    cursor: pointer;
}

.blog-images {
    display: block;
    width: 191px;
    height: 191px;
}

.blog-images span {
    position: absolute;
    width: 161px;
    height: 161px;
    font-size: 20px;
    padding: 15px;
    color: #fff;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #094660 url(images/blog-hover.png) no-repeat 0 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.blog-images:hover span {
    opacity: 1;
}

#work {
    height: 1665px;
}

body.work #work {
    height: auto;
}

#work header {
    background: rgba(0, 0, 0, 0) url("images/button.png") no-repeat scroll 0 50px;
    height: 247px;
}

#work header .title-header {
    padding-left: 264px;
}

#work header .subtitle-header {
    padding: 55px 0 5px 267px
}

#work header .paragraph-header {
    padding-left: 264px;
}

.works-in-detail {
    float: right;
    height: 24px;
    font-size: 13px;
    line-height: 15px;
    font-style: italic;
    color: #696e6e;
    margin-top: 20px;
    padding: 6px 10px 0px 40px;
    border-top: 1px solid #696e6e;
    border-bottom: 1px solid #696e6e;
    background: url(images/work-detail.png) no-repeat 10px 0;
}

.works-in-detail:hover {
    color: #dfe8e8;
    background-position: 10px -30px;
}

body.work #work header {
    height: auto;
    background: none;
}

body.work .works-in-detail {
    margin-top: 28px;
    padding: 6px 10px 0px 40px;
    background: url(images/work-detail.png) no-repeat 10px -60px;
}

body.work .works-in-detail:hover {
    color: #dfe8e8;
    background-position: 10px bottom;
}

.work-box {
    float: left;
    width: 248px;
    padding: 8px;
    margin: 0 0 28px 28px;
    background: #fff;
}

.work-box p {
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    color: #555;
    padding: 5px 0;
    margin: 0;
}

.work-box p span {
    font-size: 14px;
    color: #999;
    font-weight: 500;
    padding: 10px 0;
}

.box-container-img {
    position: relative;
    width: 246px;
    overflow: hidden;
    height: 232px;
    background: #fff;
    color: #333;
    cursor: pointer;
    border: 1px solid #ccc;
}

.box-image {
    position: absolute;
}

.ampliar-info {
    position: absolute;
    width: 46px;
    height: 46px;
    z-index: 10;
    bottom: 0;
    right: 0;
    background: url(images/ampliar-info.png) no-repeat left top;
}

.wrap {
    overflow: hidden;
}

#images {
    clear: both;
}

.filter-detail {
    float: left;
    width: 548px;
    padding: 0 152px 0 148px;
    text-align: center;
    margin: 0 0 30px 28px;
    background: url(images/filter-detail.png) no-repeat left 12px;
}

body.work .filter-detail {
    padding: 28px 0 0 0;
    margin: 0 0 30px 0;
    background: none;
}

#filtering-nav {
    float: left;
    width: 552px;
    text-align: center;
}

#filtering-nav li {
    display: inline-block;
    float: left;
}

#filtering-nav li a {
    float: left;
    width: 110px;
    height: 30px;
    color: #fff;
    font-size: 13px;
    line-height: 15px;
    padding: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(61,65,65)), color-stop(1, rgb(88,94,94)));
    background-image: -webkit-linear-gradient(bottom, rgb(61,65,65) 0%, rgb(88,94,94) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(61,65,65) 0%, rgb(88,94,94) 100%);
    background-image: -o-linear-gradient(bottom, rgb(61,65,65) 0%, rgb(88,94,94) 100%);
}

#filtering-nav li a:hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(14,87,94)), color-stop(1, rgb(2,121,123)));
    background-image: -webkit-linear-gradient(bottom, rgb(14,87,94) 0%, rgb(2,121,123) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(14,87,94) 0%, rgb(2,121,123) 100%);
    background-image: -o-linear-gradient(bottom, rgb(14,87,94) 0%, rgb(2,121,123) 100%);
}

#filtering-nav li a.on {
    float: left;
    width: 110px;
    height: 30px;
    color: #fff;
    font-size: 13px;
    padding: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(53,58,58)), color-stop(0.62, rgb(46,51,51)), color-stop(1, rgb(23,24,24)));
    background-image: -webkit-linear-gradient(bottom, rgb(53,58,58) 0%, rgb(46,51,51) 62%, rgb(23,24,24) 100%);
    background-image: -moz-linear-gradient(center bottom, rgb(53,58,58) 0%, rgb(46,51,51) 62%, rgb(23,24,24) 100%);
    background-image: -o-linear-gradient(bottom, rgb(53,58,58) 0%, rgb(46,51,51) 62%, rgb(23,24,24) 100%);
}

#filtering-nav li a span {
    float: left;
    width: 109px;
    height: 23px;
    padding-left: 1px;
    padding-top: 7px;
    background: url(images/filter-border.png) no-repeat right 0, url(images/stats-noise.png) repeat left top;
}

#filtering-nav li a:active span {
    height: 22px;
    padding-top: 8px;
}

ul#filtering-nav li:last-child a {
    width: 107px;
    padding-left: 1px;
}

ul#filtering-nav li:last-child a span {
    width: 107px;
    background: url(images/stats-noise.png) repeat left top;
}

.launch,.work-info,.launch-images {
    display: block;
    width: 246px;
    background: #212324;
}

.launch {
    height: 56px;
    border-bottom: 1px solid #ccc;
    background: url(images/quicklook.jpg) no-repeat 0 0;
}

.launch span {
    position: absolute;
    height: 56px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(images/quicklook.jpg) no-repeat 0 -232px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.launch:hover span {
    opacity: 1;
}

.work-info {
    height: 175px;
    background: url(images/quicklook.jpg) no-repeat 0 -56px;
}

.work-info span {
    position: absolute;
    top: 57px;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(images/quicklook.jpg) no-repeat 0 -288px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.work-info:hover span {
    opacity: 1;
}

.launch-images {
    height: 232px;
    background: url(images/quicklook.jpg) no-repeat right 0;
}

.launch-images span {
    position: absolute;
    height: 232px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(images/quicklook.jpg) no-repeat right bottom;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.launch-images:hover span {
    opacity: 1;
}

#about-me {
    background: url("images/about-me-background.jpg") no-repeat scroll -3px 0 transparent;
    height: 917px;
    padding-top: 200px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #about-me {
        background:url("images/about-me-background.jpg") no-repeat scroll -3px -2px transparent;
    }
}

#about-me .title-header {
    font-size: 70px;
    line-height: 38px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -2px;
    text-shadow: 1px 1px 1px #333;
    margin-bottom: 33px;
}

#about-me .title-header span {
    font-size: 40px;
    letter-spacing: 0px;
}

#about-me .subtitle-header {
    font-size: 24px;
    line-height: 24px;
    padding: 40px 0 15px;
}

#about-me .paragraph-header {
    line-height: 30px;
    margin: 30px 0 0 28px;
}

#contact-us {
    height: 955px;
    text-shadow: 1px 1px #999;
}

#contact-us .subtitle-header {
    padding-top: 35px;
}

#contact-us .paragraph-header {
    margin-bottom: 12px;
}

#contact-us .title-header {
    font-size: 70px;
}

.contactimage {
    background: url("images/contactprofile.png") repeat scroll 0 0;
    height: 290px;
    position: absolute;
    right: 0;
    top: 4310px;
    width: 350px;
}

.contact-info {
    float: right;
    margin: 120px 15px 0 0;
    width: 295px;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #000;
}

.contact-info i {
    color: #333;
    float: left;
    font-size: 40px;
    left: 30px;
    margin-top: -10px;
    position: absolute;
}

.contact-info li {
    position: relative;
    border-bottom: 1px solid #000;
    border-top: 1px solid #ffffff;
    color: #fff;
    float: left;
    font-size: 1.1em;
    height: 32px;
    padding: 12px 0 0 62px;
    width: 233px;
    background: url(images/contact-icons.png) no-repeat;
}

.contact-info li a {
    color: #fff;
}

.contact-info li a {
    color: #fff;
}

.contact-info li.mov {
    background-position: 20px 0;
}

.contact-info li.mail {
    background-position: 20px -44px;
}

.contact-info li.twitter {
    background-position: 20px -88px;
}

.contact-info li.location {
    background-position: 20px -132px;
    padding-bottom: 10px;
    padding-top: 5px;
}

.wpcf7 form .wpcf7-response-output {
    clear: both;
    margin-top: 20px;
    float: left;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ff6900!important;
    color: #ff6900;
}
.wpcf7 form .wpcf7-response-output {
    padding: 10px!important;
}
input {
    width: 395px;
    height: 30px;
    padding: 4px 20px 5px 40px;
    margin: 0 0 15px 0;
    font-size: 18px;
    line-height: 20px;
    color: #555;
    background: #fff url(images/contact-detail.png) no-repeat 8px 1px;
    -webkit-transition: box-shadow 0.4s ease;
    -moz-transition: box-shadow 0.4s ease;
    transition: box-shadow 0.4s ease;
}

input.alt {
    background-position: 8px -36px;
}

input::-webkit-input-placeholder {
    color: #999;
    font-size: 14px;
    padding: 5px 20px 4px 5px;
}

input:-moz-placeholder {
    color: #999;
    font-size: 14px;
    padding: 5px 20px 4px 5px;
}

input:focus {
    font-size: 18px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

textarea {
    width: 435px;
    height: 214px;
    padding: 10px 10px 4px 10px;
    background: #fff;
    font-size: 15px;
    color: #555;
    -webkit-transition: box-shadow 0.4s ease;
    -moz-transition: box-shadow 0.4s ease;
    transition: box-shadow 0.4s ease;
}

textarea::-webkit-input-placeholder {
    color: #999;
    font-size: 14px;
}

textarea:-moz-placeholder {
    color: #999;
    font-size: 14px;
}

textarea:focus {
    font-size: 15px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

input:hover, textarea:hover {
    color: #555;
    background-color: #e9e8e1;
}

input:hover:focus, textarea:hover:focus {
    background-color: #fff;
}

input[type=submit] {
    float: left;
    width: 240px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0px -1px 0px #000;
    padding: 10px 70px 10px 10px;
    margin: 15px 0 0 0;
    -moz-box-shadow: 0 1px 2px #000;
    -webkit-box-shadow: 0 1px 2px #000;
    box-shadow: 0 1px 2px #000;
    border-top: 1px solid #747467;
    border-bottom: 1px solid #1b1a11;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: url(images/airplane.png) no-repeat 90% 10px, -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(31,33,35)), color-stop(1, rgb(59,62,65)));
    background: url(images/airplane.png) no-repeat 90% 10px, -webkit-gradient(bottom, rgb(31,33,35) 0%, rgb(59,62,65) 100%);
    background: url(images/airplane.png) no-repeat 90% 10px, -moz-linear-gradient(center bottom, rgb(31,33,35) 0%, rgb(59,62,65) 100%);
    background: url(images/airplane.png) no-repeat 90% 10px, -o-linear-gradient(bottom, rgb(31,33,35) 0%, rgb(59,62,65) 100%);
    cursor: pointer;
    -webkit-transition: background 1s ease, color 0.5s ease;
    -moz-transition: background 1s ease, color 0.5s ease;
    transition: background 1s ease, color 0.5s ease;
}

input[type=submit]:hover {
    text-shadow: 1px 1px 1px #333;
    color: #83754f;
    background: url(images/airplane.png) no-repeat 110% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(31,33,35)), color-stop(1, rgb(59,62,65)));
    background: url(images/airplane.png) no-repeat 110% -210px, -webkit-gradient(bottom, rgb(31,33,35) 0%, rgb(59,62,65) 100%);
    background: url(images/airplane.png) no-repeat 110% -20px, -moz-linear-gradient(center bottom, rgb(31,33,35) 0%, rgb(59,62,65) 100%);
    background: url(images/airplane.png) no-repeat 110% -20px, -o-linear-gradient(bottom, rgb(31,33,35) 0%, rgb(59,62,65) 100%);
}

input[type=submit]:active {
    padding: 11px 70px 9px 10px;
    text-shadow: -1px -1px 0 #333;
}

#loading {
    background: rgba(0, 0, 0, 0) url("images/bird1.gif") repeat scroll 0 0;
    float: left;
    height: 158px;
    margin-bottom: -100px;
    margin-top: -58px;
    position: relative;
    width: 798px;
    z-index: 9;
    display: none;
}

#contactOk {
    display: none;
    font-size: 16px;
    line-height: 22px;
    font-style: italic;
    padding: 8px 10px 10px;
    margin: 0 42px 15px 0;
    background: rgba(60, 118, 61, 0.8);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#contactKo {
    display: none;
    font-size: 16px;
    line-height: 22px;
    font-style: italic;
    padding: 8px 10px 10px;
    margin: 0 42px 15px 0;
    background: rgba(169,28,41,.8);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#colorbox,#cboxOverlay,#cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}

#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
}

#cboxMiddleLeft,#cboxBottomLeft {
    clear: left;
}

#cboxContent {
    position: relative;
}

#cboxLoadedContent {
    overflow: auto;
}

#cboxLoadedContent iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

#cboxTitle {
    margin: 0;
}

#cboxLoadingOverlay,#cboxLoadingGraphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow {
    cursor: pointer;
}

#cboxOverlay {
    background: #151515;
}

#colorbox {
}

#cboxContent {
    margin: 20px 0;
}

#cboxLoadedContent {
    background: #fff;
    padding: 40px 15px 15px 15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#cboxTitle {
    position: absolute;
    top: 12px;
    left: 15px;
    color: #666;
    font-size: 13px;
    font-style: italic;
    line-height: 17px;
}

#cboxCurrent {
    position: absolute;
    top: 13px;
    right: 40px;
    color: #999;
    font-size: 12px;
    line-height: 16px;
}

#cboxSlideshow {
    position: absolute;
    top: -20px;
    right: 90px;
    color: #fff;
}

#cboxPrevious {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -32px;
    background: url(images/controls.png) no-repeat top left;
    width: 50px;
    height: 71px;
    text-indent: -9999px;
}

#cboxPrevious.hover {
    background-position: bottom left;
}

#cboxNext {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -32px;
    background: url(images/controls.png) no-repeat top right;
    width: 50px;
    height: 71px;
    text-indent: -9999px;
}

#cboxNext.hover {
    background-position: bottom right;
}

#cboxLoadingOverlay {
    background: #000;
}

#cboxLoadingGraphic {
    background: url(images/loading.gif) no-repeat center center;
}

#cboxClose {
    position: absolute;
    top: 10px;
    right: 2px;
    display: block;
    background: url(images/controls.png) no-repeat top center;
    width: 38px;
    height: 20px;
    text-indent: -9999px;
}

#cboxClose.hover {
    background-position: bottom center;
}

@media only screen and (min-width: 768px) and (max-width:1240px) {
    body {
        background: url(images/body-noise.png) repeat left top, url(images/about-me-background.png) no-repeat -388px 2985px, url(images/body-background-pattern.png) repeat-x center 1320px, url(images/bodybackground.png) repeat-x center top, url(images/nav-active-hello.png) no-repeat 9000px 0, url(images/nav-active-work.png) no-repeat 9000px 0, url(images/nav-active-about-me.png) no-repeat 9000px 0, url(images/nav-active-contact-us.png) no-repeat 9000px 0, url(images/logo.png) no-repeat 9000px 0, url(images/logo-work.png) no-repeat 9000px 0, url(images/logo-about-me.png) no-repeat 9000px 0, url(images/logo-contact-us.png) no-repeat 9000px 0, url(images/logo-ipad.png) no-repeat 9000px 0, url(images/logo-work-ipad.png) no-repeat 9000px 0, url(images/logo-about-me-ipad.png) no-repeat 9000px 0, url(images/logo-contact-us-ipad.png) no-repeat 9000px 0;
    }

    #wrap {
        width: 100%;
        margin: 0;
    }

    .tagline {
        display: none;
    }

    nav {
        width: 100px;
    }

    #content {
        margin: 0 0 0 100px;
        width: calc(100% - 100px);
    }

    .grid-c1 .col {
        width: 100%;
    }

    .howiwork {
        width: 100%;
    }

    #selector {
        width: 100px;
    }

    .selector-hello {
        background: url(images/nav-active-hello-ipad.png) no-repeat 15px 5px;
    }

    .selector-work {
        background: url(images/nav-active-work-ipad.png) no-repeat 15px 5px;
    }

    .selector-about-me {
        background: url(images/nav-active-about-me-ipad.png) no-repeat 15px 5px;
    }

    .selector-contact-us {
        background: url(images/nav-active-contact-us-ipad.png) no-repeat 15px 5px;
    }

    nav ul {
        width: 100px;
        background: url(images/nav-noise.png) repeat-y right top, url(images/nav-background-light.png) no-repeat -215px -35px, url(images/nav-detail-li-ipad.png) no-repeat 30px 152px, url(images/nav-background-ipad.png) repeat-y 0 top;
    }

    nav li {
        width: 70px;
        margin: 0 0 4px 15px;
    }

    nav a {
        width: 100px;
        padding: 9px 0 3px;
    }

    nav a span {
        display: none;
    }

    #nav-hello {
        margin-top: 170px;
        background: url(images/nav-active-hello-ipad-bn.png) no-repeat 0 5px;
        opacity: 0.7;
    }

    #nav-hello.on {
        background: url(images/nav-active-hello-ipad-bn.png) no-repeat 0 5px;
        opacity: 1;
    }

    #nav-work {
        background: url(images/nav-active-work-ipad-bn.png) no-repeat 0 5px;
        opacity: 0.7;
    }

    #nav-work.on {
        background: url(images/nav-active-work-ipad-bn.png) no-repeat 0 5px;
        opacity: 1;
    }

    #nav-about-me {
        background: url(images/nav-active-about-me-ipad-bn.png) no-repeat 0 5px;
        opacity: 0.7;
    }

    #nav-about-me.on {
        background: url(images/nav-active-about-me-ipad-bn.png) no-repeat 0 5px;
        opacity: 1;
    }

    #nav-contact-us {
        background: url(images/nav-active-contact-us-ipad-bn.png) no-repeat 0 5px;
        opacity: 0.7;
    }

    #nav-contact-us.on {
        background: url(images/nav-active-contact-us-ipad-bn.png) no-repeat 0 5px;
        opacity: 1;
    }

    .personal-info {
        position: absolute;
        float: left;
        width: 130px;
        margin: 73px 0 0 336px;
    }

    #nav-logo {
        width: 80px;
        height: 80px;
        margin: 40px 0 0 5px;
    }

    #nav-logo h1 {
        top: 40px;
        left: 16px;
        font-size: 8px;
        line-height: 8px;
    }

    #nav-logo a {
        width: 80px;
        height: 80px;
        padding: 0;
    }

    #nav-logo a:hover {
        background: url(images/logo-ipad.png) no-repeat center -289px;
    }

    #nav-logo.logo-0 a {
        background: url(images/logo-ipad.png) no-repeat center top;
    }

    #nav-logo.logo-hello a {
        background: url(images/logo-ipad.png) no-repeat center top;
    }

    #nav-logo.logo-work a {
        background: url(images/logo-work-ipad.png) no-repeat center top;
    }

    #nav-logo.logo-about-me a {
        background: url(images/logo-about-me-ipad.png) no-repeat center top;
    }

    #nav-logo.logo-contact-us a {
        background: url(images/logo-contact-us-ipad.png) no-repeat center top;
    }

    .html5 {
        width: 52px;
        height: 53px;
        background: url(images/html5-logo.png) no-repeat center 0;
        padding: 0;
        margin: 485px 0 0 19px;
    }

    .html5:hover {
        background-position: center bottom;
    }

    .contactimage {
        left: 636px;
    }
}

@media only screen and (min-width: 768px) and (max-width:1023px) {
    body {
        background: url(images/body-noise.png) repeat left top, url(images/about-me-background.png) no-repeat -388px 2985px, url(images/about-me-background.jpg) no-repeat 100px 4110px, url(images/body-background-pattern.png) repeat-x center 1680px, url(images/body-background-ipad.png) repeat-x center top, url(images/nav-active-hello.png) no-repeat 9000px 0, url(images/nav-active-work.png) no-repeat 9000px 0, url(images/nav-active-about-me.png) no-repeat 9000px 0, url(images/nav-active-contact-us.png) no-repeat 9000px 0, url(images/logo.png) no-repeat 9000px 0, url(images/logo-work.png) no-repeat 9000px 0, url(images/logo-about-me.png) no-repeat 9000px 0, url(images/logo-contact-us.png) no-repeat 9000px 0, url(images/logo-ipad.png) no-repeat 9000px 0, url(images/logo-work-ipad.png) no-repeat 9000px 0, url(images/logo-about-me-ipad.png) no-repeat 9000px 0, url(images/logo-contact-us-ipad.png) no-repeat 9000px 0;
        background-size: auto, auto, auto,auto auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
    }

    .grid-c4,.grid-c2,.grid-c3,.grid-c4,.grid-c5,.grid-c2-60-40 {
        float: left;
        width: 630px;
    }

    .grid-c1 .col,.grid-c2 .col,.grid-c3 .col,.grid-c4 .col,.grid-c5 .col,.grid-c2-60-40 .col {
        float: left;
        margin: 15px 0 0 28px;
    }

    .grid-c1 .col {
        width: 602px;
    }

    .grid-c2 .col {
        width: 602px;
    }

    .grid-c3 .col {
        width: 264px;
    }

    .grid-c4 .col {
        width: 128px;
    }

    .grid-c5 .col {
        width: 147px;
    }

    .grid-c2-60-40 .col.p60 {
        width: 497px;
    }

    .grid-c2-60-40 .col.p40 {
        width: 323px;
    }

    #hello {
        height: 1720px;
    }

    #hello header {
        height: 420px;
        background: none;
    }

    .block-style-1 {
        background-size: 630px auto;
    }

    .future {
        display: none;
    }

    .stat-cont li {
        width: 590px;
    }

    .stat {
        width: 590px;
    }

    #work {
        height: 2390px;
    }

    #work header {
        height: 247px;
        background: url(images/button.png) no-repeat 0 0;
    }

    #work header .subtitle-header {
        padding: 25px 0 0 264px;
    }

    .work-box {
        margin: 0 0 40px 40px;
    }

    .filter-detail {
        width: 556px;
        padding: 0 20px;
        margin: 0 0 30px 28px;
        background: url(images/filter-detail.png) no-repeat left 12px,url(images/filter-detail.png) no-repeat right 12px;
    }

    #filtering-nav {
        float: left;
        width: 548px;
        text-align: center;
    }

    #about-me {
        height: 910px;
        background: none;
    }

    #about-me .title-header {
        font-size: 76px;
        line-height: 38px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -2px;
        text-shadow: 1px 1px 1px #333;
        margin-bottom: 33px;
    }

    #about-me .title-header span {
        font-size: 40px;
        letter-spacing: 0px;
    }

    #about-me .subtitle-header {
        font-size: 24px;
        line-height: 24px;
        padding: 280px 0 15px 0;
    }

    #about-me .paragraph-header {
        line-height: 22px;
        margin: 20px 0 0 28px;
        font-size: 15px;
    }

    .contactimage {
        display: none;
    }

    .contact-info {
        margin: 20px 0;
    }

    #work header .title-header {
        font-size: 55px;
        line-height: 55px;
        padding-left: 264px;
    }
}

@media only screen and (max-width: 767px) {
    header {
        margin-left:0;
    }

    br {
        display: none;
    }

    .contact-info {
        float: left;
    }

    .howiwork-box {
        text-align: center;
    }

    .workexp-txt {
        padding-right: 30px;
    }

    #hello .howiwork-box img {
        width: auto;
        display: inline-block;
    }

    #about-me {
        padding-top: 30px;
    }

    .title-header {
        font-size: 50px;
    }

    .how-i-work, .howiwork-top {
        display: none;
    }

    .howiwork-box {
        padding: 20px 0;
        width: 100%;
    }

    #hello header .title-header {
        padding-top: 0;
    }

    #contact-us .subtitle-header {
        font-size: 20px;
        padding-top: 35px;
    }

    #about-me .title-header, #contact-us .title-header {
        font-size: 48px;
        line-height: 48px;
    }

    #wrap,#content,.grid-c4,.grid-c2,.grid-c3,.grid-c4,.grid-c5,.grid-c2-60-40,.grid-c1 .col,.grid-c2 .col,.grid-c3 .col,.grid-c4 .col,.grid-c5 .col,.grid-c2-60-40 .col,.process-img,.grid-c2-60-40 .col.p40,.grid-c2-60-40 .col.p60 {
        width: 100%;
        margin: 0;
    }

    nav {
        display: none;
    }

    #hello,#work,#about-me,#contact-us {
        height: auto;
        float: left;
        width: 90%;
        padding: 0 5%;
        background: #d14737;
    }

    #hello {
        padding: 30px 5%;
    }

    #work {
        background: #343737;
    }

    #about-me {
        background: #0093ab;
        padding: 30px 5%;
    }

    #contact-us {
        background: #c0c0c0;
    }

    #hello img {
        width: 100%;
    }

    #hello header {
        background: none;
        height: auto;
        margin: 0;
    }

    .tagline {
        display: none;
    }

    .stat-cont li {
        width: 100%;
    }

    .subtitle-body {
        margin-top: 40px;
    }

    .works-in-detail,.filter-detail {
        display: none;
    }

    .work-box {
        margin: 0 0 28px 14px;
    }

    #work header {
        background: rgba(0, 0, 0, 0) url("images/button.png") no-repeat scroll center 25px;
        height: auto;
        padding-bottom: 30px;
        padding-top: 167px;
        text-align: center;
    }

    #work header .subtitle-header {
        padding: 80px 0 0 0;
    }

    #work header .title-header,#work header .paragraph-header {
        padding-left: 0;
    }

    #about-me .subtitle-header {
        padding: 30px 0 15px;
    }

    #about-me .title-header,#contact-us .title-header {
        font-size: 45px;
    }

    #about-me .title-header span {
        font-size: 30px;
    }

    #about-me header,#contact-us header {
        margin-left: 0;
    }

    #about-me .paragraph-header {
        margin: 20px 0 0 0;
    }

    .contactimage {
        display: none;
    }

    input, textarea {
        width: 100%;
        max-width: 224px;
        clear: left;
        display: block;
    }

    textarea {
        max-width: 264px;
    }

    form, fieldset {
        width: 100%;
    }

    input[type="submit"] {
        max-width: none;
    }

    .contact-info {
        margin: 40px 0;
    }

    #contact-us input {
        max-width: 100%;
        width: calc(100% - 60px);
    }

    #contact-us textarea {
        max-width: 100%;
        width: calc(100% - 20px);
    }

    #contact-us input[type="submit"] {
        width: 100%;
    }

    .design-creativity {
        width: 90% !important;
    }

    .html {
        width: 95% !important;
    }

    .jquery {
        width: 85% !important;
    }

    .php {
        width: 80% !important;
    }

    .photoshop {
        width: 85% !important;
    }

    #hello img {
        height: auto;
    }
}

@media only screen and (max-width: 320px) {
    #contact-us input {
        max-width:205px;
    }

    #contact-us textarea {
        max-width: 245px;
    }

    #contact-us input[type="submit"] {
        max-width: 265px;
    }
}
