@font-face {
    font-family:'quicksandbold';
    src: url('../fonts/quicksand-bold-webfont.eot');
    src: url('../fonts/quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-bold-webfont.woff') format('woff'),
         url('../fonts/quicksand-bold-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-bold-webfont.svg#quicksandbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'quicksandlight';
    src: url('../fonts/quicksand-light-webfont.eot');
    src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-light-webfont.woff') format('woff'),
         url('../fonts/quicksand-light-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'quicksandregular';
    src: url('../fonts/quicksand-regular-webfont.eot');
    src: url('../fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-regular-webfont.woff') format('woff'),
         url('../fonts/quicksand-regular-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{position:relative;background:#fff;font:100%/1  'quicksandregular', sans-serif;color:#333}
h1{margin:0 0 10px;font:3em/1 'quicksandlight'; padding-bottom:20px;}
h2{margin:0;font:2em/1 'quicksandbold'}
h3{margin:0 0 30px;font:1.5em/1 'quicksandbold'}
h4{margin:0 0 10px;font:1.1em/1 'quicksandbold'}
p{margin:0 0 25px;font-size:0.9em;line-height:1.4}
ol, ul{margin:0 0 25px;padding:0 0 0 40px;font-size:0.9em;line-height:1.4}
nav ol, nav ul{list-style:none;margin:0}
a{color:#72B5E5; text-decoration:none;}
h4 a{color:#333; text-decoration:none;}
a:hover{text-decoration:none}
address{font-style:normal;font-size:0.8em;line-height:1.6}
blockquote{margin:0}
hr{background:none;border:none;border-bottom:5px dotted #f0f0f0}

.inp-b{position:relative;margin:0 0 20px}
  .inp-b label.inp-error{position:absolute;left:-25px;top:8px;display:block;width:15px;height:15px;background:#FF4C78;-webkit-border-radius:50%;border-radius:50%;overflow:hidden;text-indent:100%;white-space:nowrap}
input[type="text"]{position:relative;width:100%;margin:0;padding:6px 10px;background:#eee;border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:0.9em;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}
textarea{position:relative;max-width:100%;width:100%;min-height:150px;margin:0;padding:6px 10px;background:#eee;border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:0.9em;resize:none;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
.lt-ie8 input[type="text"], .lt-ie8 textarea{padding-left:0;padding-right:0}
input[type="text"]:focus, textarea:focus{background:#72B5E5;color:#fff}
::-webkit-input-placeholder{color:#333}
:-moz-placeholder, ::-moz-placeholder{color:#333}
:-ms-input-placeholder{color:#333}
input.inp-error, textarea.inp-error{-webkit-animation:shake 0.5s;-moz-animation:shake 0.5s;-o-animation:shake 0.5s;animation:shake 0.5s}

.clearfix:before, .clearfix:after, .cols:before, .cols:after{content: " ";display:table}
.clearfix:after, .cols:after{clear:both}
.lt-ie8 .clearfix, .lt-ie8 .cols{zoom:1}

.cont-sec{position:relative}

.container{position:relative;width:940px;margin:auto;padding:50px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.cont-b{background:#72B5E5;color:#fff}
.cont-b-2{background:#60A4E0;color:#fff}
.cont-b-3{background:#333;color:#fff}
    .cont-b a, .cont-b-2 a{color:#fff}
    .cont-b .btn-2, .cont-b-2 .btn-2, .cont-b-3 .btn-2{border-color:#fff}
    .cont-b-3 .btn-2:hover{background:#fff;border-color:#fff}
    .cont-b-3 .btn:hover{background:#fff;color:#333}

.sec-title{background:#F6F6F6}
  .sec-title .container{padding-top:20px;padding-bottom:20px}

.col{float:left;margin-left:4%}
.col:first-child{margin-left:0}
.col-1-2{width:48%}
.col-1-3{width:30.6%}
.col-1-4{width:22%}

.center{text-align:center}

.wrapper{position:relative;padding:60px 0 0}

.main{position:relative;overflow:hidden;z-index:10}

.nav{position:fixed;left:0;top:0;width:100%;background:#333;z-index:100}
    .nav .container{height:60px;padding:0}
    .nav .nav-trigger{display:none;margin:0 auto}
    .nav ul{padding:0;font:1em/58px 'quicksandbold';text-transform:uppercase;text-align:center}
    .nav li{display:inline-block;padding:0 15px}
    .lt-ie8 .nav li{display:inline}
    .nav a{display:block;height:60px;color:#fff;text-decoration:none;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
    .nav a:focus{outline:none}
    .nav a:hover{color:#fff}
    .nav .current a, .main-nav .current a:hover{color:#72B5E5}

.social-nav{margin:0 0 30px;padding:0;list-style:none;text-align:center}
    .social-nav li{display:inline-block}
    .lt-ie8 .social-nav li{display:inline}
    .social-nav a{position:relative;
        display:block;
        width:44px;
        height:44px;
        background-image:url(../img/icon-social.png);
        -webkit-border-radius:50%;
        border-radius:50%;
        text-decoration:none;
    }
    .social-nav a{background-position-y:2px;}
    .social-nav a:hover{background-color:#fff; background-position-y:40px;}

    .social-nav .github{background-position-x:2px;}
    .social-nav .facebook{background-position-x:-32px;}
    .social-nav .twitter{background-position-x:-68px;}
    .social-nav .flickr{background-position-x:-114px;}
    .social-nav .linkedin{background-position-x:-160px;}
    .social-nav .skype{background-position-x:-205px;}
    .social-nav .appstore{background-position-x:-247px;}
    .social-nav .email{background-position-x:-292px;}
    .social-nav .stackoverflow{background-position-x:-332px;}

.filter{margin:0 0 50px;padding:0;list-style:none;font:1em 'quicksandbold';text-transform:uppercase;color:#72B5E5}
    .filter li{position:relative;float:left;padding:10px 20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer}
    .filter li:hover{color:#333}
    .filter li.active{background:#72B5E5;color:#fff}
    .filter .active:after{content:"";position:absolute;left:50%;bottom:-10px;width:0;height:0;margin:0 0 0 -10px;border-top:10px solid #72B5E5;border-left:10px solid rgba(255,255,255,0);border-right:10px solid rgba(255,255,255,0)}

.btn{position:relative;overflow:visible;display:inline-block;padding:10px 20px;background:#72B5E5;border:none;-webkit-border-radius:30px;border-radius:30px;color:#fff;font:1em 'quicksandbold';text-transform:uppercase;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:#333}

.btn-2{position:relative;display:inline-block;padding:8px 16px;background:#72B5E5;border:2px solid #72B5E5;-webkit-border-radius:30px;border-radius:30px;font:1em 'quicksandbold';text-transform:uppercase;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn-2:hover{border-color:#333;color:#333}

.nav-trigger{position:relative;width:60px;height:60px;cursor:pointer}
.nav-trigger:after{content:"";position:absolute;left:50%;top:50%;width:30px;height:16px;margin:-10px 0 0 -15px;border:2px solid #BBDCE8;border-left:none;border-right:none}
.nav-trigger-a:after{border-color:#fff}
.nav-trigger:before{content:"";position:absolute;left:50%;top:50%;width:30px;height:2px;margin:-1px 0 0 -15px;background:#BBDCE8}
.nav-trigger-a:before{background:#fff}

.intro{padding:30px 0 0 0;text-align:center}
    .intro .desc{margin:0 0 30px;font:1.1em 'quicksandbold'}
    .intro .btn-2{margin:0 5px}

.about .photo{float:left;margin:0 50px 0 0;border-width:10px}
.about .inner{padding:10px 0 0}
.about p{margin:0}

.photo{position:relative;overflow:hidden;width:200px;height:200px;background:#333;border:5px solid #333;-webkit-border-radius:50%;border-radius:50%}
    .photo img{position:relative;width:100%;height:auto;-webkit-border-radius:50%;border-radius:50%;z-index:10}

.intro-text{font-size:1em;line-height:1.5; padding-top:14px;}

/*.exp{height:380px}*/
  .exp h4 span{font:1em 'quicksandregular'}

.date{position:relative;display:inline-block;margin:0 0 15px;padding:5px 10px;background:#72B5E5;-webkit-border-radius:20px;border-radius:20px;font-size:0.8em;color:#fff;text-transform:uppercase}
.lt-ie8 .date{display:inline}

.skills .skill{position:relative;margin:0 0 10px;background:#f6f6f6;-webkit-border-radius:20px;border-radius:20px}
.skills .progress{position:relative;background:#72B5E5;-webkit-border-radius:20px;border-radius:20px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;color:#fff}
.skills h4{margin:0;padding:10px 20px;font:0.9em/1.4 'quicksandregular';text-transform:uppercase}
.skills .val{font:1em 'quicksandbold'}

.tools{margin:0;padding:0;font-size:0.8em;text-transform:uppercase;list-style:none}
    .tools li{position:relative;float:left;margin:5px 5px;padding:5px 10px;background:#F6F6F6;-webkit-border-radius:20px;border-radius:20px}

.project h4{margin:15px 0 0;}

.showcase{position:relative;margin:0 -30px 0 0}

.works{width:100%;margin:0;padding:0 0 30px;list-style:none;font-size:1.4em;line-height:1;text-transform:uppercase}
    .works li{float:left;width:33.3%;padding:0 30px 30px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .works .work{position:relative;overflow:hidden;width:100%;height:100%}
    .works a{position:relative;overflow:hidden;display:block;width:100%;height:100%}
    .works img{width:100%;max-width:100%;height:auto;vertical-align:bottom}
    .works a:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#333 url(../img/icon-more.png) no-repeat 50% 50%;opacity:0;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
    .lt-ie9 .works a:after{display:none}
    .works a:hover:after{opacity:0.9}

.contacts{position:relative}
    .contacts .map{height:480px}
    .contacts .inner{position:absolute;left:0;bottom:0;width:100%;padding:25px 0;background:rgba(114,181,229,0.9);-pie-background:rgba(114,181,229,0.9);color:#fff;text-align:center;line-height:1.6;text-transform:uppercase}
    .contacts .inner span{font:1em 'quicksandbold'}

.message{display:none;margin:0 0 20px;padding:10px 20px;-webkit-border-radius:20px;border-radius:20px;font:0.9em/1.4 'quicksandregular'}
.message-ok{background:#58A384}
.message-error{background:#FF4C78}

.loading{display:inline-block;width:30px;height:30px;margin:0 0 20px;background:url(../img/loading.gif);vertical-align:middle}

@-webkit-keyframes shake {
  0%   {left:0}
  20%  {left:-5px}
  40%  {left:5px}
  60%  {left:-5px}
  80%  {left:5px}
  100% {left:0}
}
@-moz-keyframes shake {
  0%   {left:0}
  20%  {left:-5px}
  40%  {left:5px}
  60%  {left:-5px}
  80%  {left:5px}
  100% {left:0}
}
@-o-keyframes shake {
  0%   {left:0}
  20%  {left:-5px}
  40%  {left:5px}
  60%  {left:-5px}
  80%  {left:5px}
  100% {left:0}
}
@keyframes shake {
  0%   {left:0}
  20%  {left:-5px}
  40%  {left:5px}
  60%  {left:-5px}
  80%  {left:5px}
  100% {left:0}
}

@media screen and (max-width:980px){
    .inp-b label.inp-error{left:auto;right:10px}
    .col{float:none;width:100%;margin:0;padding:0 0 20px}
    .container{width:100%;padding:30px}
    .nav .container{height:auto;padding:0}
    .nav .nav-trigger{display:block}
    .nav ul{display:none;line-height:1}
    .nav li{display:block;padding:0}
    .nav a{height:auto;padding:15px 20px}
    .nav .current a, .nav .current a:hover{background:#f6f6f6}
    .intro{padding:10px 0}
    .project .photo{margin-right:30px}
    .exp{height:auto}
    .feedback-form{margin:0 0 30px}
}
@media screen and (max-width:400px){
    h3{margin:0 0 15px}
    .container, .sec-title .container{padding:15px}
    .intro .btn-2{margin:0 0 10px}
    .about .photo{float:none;margin:auto}
    .project .photo{float:none;margin:auto}
    .skills h4{font-size:0.8em}
    .showcase{margin:0}
    .filter{margin:0 0 30px}
        .filter li{float:none}
    .works{padding:0}
    .works li{float:none;width:100%;padding:0 0 15px}
}

.photo, .photo img, .btn, .btn-2, .filter li, .skill, .skill .progress, .date, .tools li, .item, .author, .contacts .inner, .social-nav a, .message{behavior:url("assets/js/PIE.htc")}