html{
    overflow-x:hidden !important;
    height:100%;
}
body{

}
@-o-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
.clear{clear:both;float:none;}
/* ====================
Typography
--------------------------------------------------------------*/
/*h1 {
    font-size: 4.46666666667em;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    font-weight: 400;
    line-height: 1.17em;    
}
h2 {
    font-size: 2.2em;
    letter-spacing: 0.10em;
    font-weight: bold;
    text-transform:uppercase;
}
h3 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    font-weight: 200;
}
h4 {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 200;   
}
h5 {
    font-size: 0.8em;
    font-weight: 200;
}
h6 {
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: 200;
}*/
h1.animtext{
    margin-top:35%;
    position:relative;
    color:#fff;
}
h3.animtext{
    margin-top:20px;
}
.color-white{
    color:#fff !important;
}

/* ====================
Content Styles
--------------------------------------------------------------*/

#main{
    opacity:0;
    height:100%;
}
#wrapper{ 
    position: relative;
    z-index:2;
    top:100%;
}
.piece_inner-container{
    max-width: 1200px;
    width:92%;
    margin: 20px auto 0px auto;
    position: relative;
    zoom:1;
    z-index:2;
}
.anim{
    top:25%;
    opacity:0;
}
.content , .sections{
    float:left;
    width:100%;
    position:relative;
}

/*.background-white{
    float:left;
    width:100%;
    background:#fff;
}*/
.respimg{
    width:100%;
    height:auto
}
.content-holder{
    height:100%; 
    margin-left:17%;
    vertical-align:top; 
    position: absolute; 
    left:0; 
    top:0; 
    right:0;
    z-index:2;
    height:100%;
}
.content-separator{
    margin:10px auto 20px;
    max-width:250px;
    position:relative;
}
.content-separator i {
    color:#ccc;
    background:#fff;
    width:50px;
    height:50px;
    position:relative;
    z-index:2;
    border-radius:100%;
    border-bottom:4px solid #ccc;
    line-height:50px;
}
.content-separator span {
    width:100%;
    height:1px;
    position:absolute;
    top:50%;
    left:0;
    background:#fff;
}
.gray-separator span {
    background:#ccc;
}
/* =====
page preload
--------------------*/

#jpreOverlay {
    background: #fff;
}
#jpreLoader{
    position:relative;
    z-index:1;
}
#jpreBar {
    position:fixed;
    width:50%;
    height:100%  ;
    top:0;
    left: 50%;
}
#jprePercentage {
    font-size: 18px;
    position:fixed;
    top:50%;
    left:10%
}
/* ====================
intro
--------------------------------------------------------------*/

#intro{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    z-index:3;
}
#intro:before, #intro:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 35px 20px #000;
    -moz-box-shadow: 0 35px 20px #000;
    box-shadow: 0 35px 20px #000;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
    opacity:0.2;
}
#intro:after{
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto;
}
.nav-holder{
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}
.nav-border{
    position:absolute;
    top:5%;
    left:5%;
    width:90%;
    height:90%;
    border:1px solid #fff;
    z-index:1;
}
.nav-button{
    display:none;
}
.link-holder{
    margin-top:35%;
    position:relative;
    z-index:2;
}
.link-holder ul {
    max-width:200px;
    margin:0 auto;
}
.link-holder ul li {
    width:100%;
    float:left;
    margin-bottom:8px;
}
.link-holder ul li a {
    border:1px solid #fff;
    width:100%;
    float:left;
    padding:6px;
    display:block;
    color:#fff;
}
.link-holder ul li a:hover{
    background:#fff;
}
.text-ticker-holder{
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:100%;
}
#slides{
    position:absolute !important;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-4;
}
#slides li {
    position:relative;
}
.slides-fullscreen-img{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    margin-left:-25%;
    position:absolute;
    -webkit-animation: spinAround 120s linear infinite;
    -moz-animation: spinAround 120s linear infinite;
    animation: spinAround 120s linear infinite;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}
.start-holder{
    width:50px;
    height:50px;
    margin:120px auto;
    position:relative;
}
.start{
    color:#fff;
    display:block;
    font-size:24px;
}
.start i {
    line-height:50px;
}
.start-decor{
    position:absolute;
    width:50px;
    height:5px;
    z-index:-1;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-2px;
}
.start-decor:after{
    top:2px;
    left:50%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    opacity:0.3;
}
.start-decor:before{
    bottom:3px;
    left:50%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    opacity:0.3;
}
.start-decor:after {
    border-width:30px;
    margin-left:-30px;
}
.start-decor:before {
    border-width:30px;
    margin-left:-30px;
}
.overlay{
    background:#393D40;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    opacity:0.8;
}
.fade{
    opacity:0;
}
/* ====================
Sidebar
--------------------------------------------------------------*/

.left-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:17%;
    height:100%;
    z-index:3;
    background:#474D5D;
}
.desktop-screen-navigation{
    position:relative;
    top:40%;
}

.desktop-screen-navigation ul li{
    width:100%;
    float:left;
    margin-bottom:4px;
    position:relative;
    border-right:4px solid #474D5D;
    border-left:4px solid #474D5D;
}
.desktop-screen-navigation ul li a {
    color:#fff;
    font-weight:400;
    display:block;
    padding:8px;
}
.desktop-screen-navigation ul li.current:before {
    bottom: 0;
    left: 100%;
    margin-left:-38px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.desktop-screen-navigation ul li.current , .desktop-screen-navigation ul li:hover {
    background:#fff;
}
.desktop-screen-navigation ul li.current:before {
    border-right-color: #474D5D;
    border-width: 19px;
    margin-right:0;
}
.desktop-screen-navigation ul li.current:after {
    bottom: 10px;
    left: 100%;
    margin-left:-20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.desktop-screen-navigation ul li.current:after {
    border-right-color: #fff;
    border-width: 10px;
    margin-right:0;
}
.nav-top{
    position:absolute;
    bottom:10px;
    left:50%;
    width:50px;
    height:50px;
    z-index:4;
    margin-left:-25px;
    color:#fff; 
}
.nav-top span{
    position:absolute;
    top:5px;
    left:10px;
    width:30px;
    height:30px;
    -webkit-transform:rotate(45deg); 
    -moz-transform:rotate(45deg) ; 
    -o-transform: rotate(45deg) ;
    -ms-transform:rotate(45deg);
    z-index:-1;
}
.nav-top:hover span{
    -webkit-transform:rotate(-405deg); 
    -moz-transform:rotate(-405deg) ; 
    -o-transform: rotate(-405deg) ;
    -ms-transform:rotate(-405deg);
}
/* ====================
About
--------------------------------------------------------------*/
#about{
    background:#fff;
    z-index:2;
}
#about p {
    text-align:left;
    margin-bottom:20px;
}
#about h3 {
    text-align:left;
    margin-bottom:20px;
}
#about h3.margin{
    font-weight:bold;
    color:#666;
}
#about h4.margin {
    margin-bottom:20px;
}
.photo-holder{
    position: relative;
    max-width:350px;
    margin:0 auto;
}
.photo-holder img{
    -webkit-border-radius: 10px;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius: 10px;
    -moz-border-radius-bottomleft: 0;
    border-radius: 10px;
    border-bottom-left-radius: 0;
}
.photo-holder:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 10px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:350px;
    -webkit-box-shadow: 0 15px 10px #000;
    -moz-box-shadow: 0 15px 10px #000;
    box-shadow: 0 15px 10px #000;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    opacity:0.5;
}  
.button{
    padding:10px 30px;
    color:#fff;
    border-radius:6px;
    float:left;
    border-bottom:4px solid #ccc;
    position:relative;
}
.button:before{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 12px;
    right: 10px;
    width: 50%;
    top: 30%;
    max-width:120px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

/* ====================
Skills
--------------------------------------------------------------*/

.show-skills{
    position:absolute;
    top:0;
    left:50%;
    width:50px;
    height:50px;
    z-index:4;
    margin-left:-25px;
    cursor:pointer;
}
.show-skills i {
    color:#fff;
    position:absolute;
    top:20px;
    left:25px;
    z-index:5;
}
.show-skills  span{
    width: 150px;
    height: auto;
    line-height: 20px;
    padding: 10px;
    left: 50%;
    margin-left: -64px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-family: 'Istok Web', sans-serif;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom:4px solid #ccc;
    border-right:4px solid #ccc;
    text-indent: 0px;
    position: absolute;
    bottom: 62px;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    -webkit-transform: translate(35px) rotate(25deg) scale(1.5);
    -moz-transform: translate(35px) rotate(25deg) scale(1.5);
    -o-transform: translate(35px) rotate(25deg) scale(1.5);
    -ms-transform: translate(35px) rotate(25deg) scale(1.5);
    transform: translate(35px) rotate(25deg) scale(1.5);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index:6;
}
.show-skills span:after{
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    margin-top:2px;
    pointer-events: none;
}
.show-skills span:after {
    border-top-color: #ccc;
    border-width: 10px;
    margin-left: -10px;
    margin-top:4px;
}
.show-skills:hover span{
    visibility:visible;
    opacity:1;
    -webkit-transform: translate(0px) rotate(0deg) scale(1);
    -moz-transform: translate(0px) rotate(0deg) scale(1);
    -o-transform: translate(0px) rotate(0deg) scale(1);
    -ms-transform: translate(0px) rotate(0deg) scale(1);
    transform: translate(0px) rotate(0deg) scale(1);
}
.show-skills:after{
    top:38px;
    left:50%;
    border: solid transparent;
    content: " ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
}
.show-skills:before{
    bottom:12px;
    left:50%;
    border:solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.show-skills-holder{
    width:100%;
    position:absolute;
    height:37px;
    background:url(../images/banner-mask-down.png) no-repeat top center;
    bottom:-37px;
    left:-12px;
    z-index:3;
}
.decor-fix{
    position:absolute;
    top:0;
    right:-12px;
    width:12px;
    height:37px;
    background:#fff;
}
.piechart-holder {
    margin-top:50px;
    display:none;
}
.piechart-holder p {
    text-align:center !important;
    font-size:0.7em;
}
.piechart-holder h4{
    text-transform:uppercase;
    font-weight:400;
    font-size:20px;
}
.chart {
    position: relative;
    display: inline-block;
    width: 152px;
    height: 152px;
    margin-bottom: 26px;
    text-align: center;
}
.chart canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.percent {
    display: inline-block;
    font-size:21px;
    color:#474d5d;
    line-height: 152px;
    z-index: 2;
}
.percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em;
}
.angular {
    margin-top: 100px;
}
.angular .chart {
    margin-top: 0;
}
.right{
    float:right !important
}

/* ====================
Facts
--------------------------------------------------------------*/

#facts{
    overflow:hidden;
    position:relative;
    z-index:0;
}
#facts h2 {
    margin-bottom:80px;
}
.parallax-facts{
    background:url(../images/bg2.jpg);
    background-size: cover;
    background-position: center  ;
    background-attachment:fixed;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-12;
}
#facts .content{
    padding:50px 0;
}
#facts ul {
    margin:0 auto;
    max-width:800px;
}
#facts ul li {
    display:inline-block;   
    position:relative;
    width:32%; 
}
.milestone-counter{
    float:left;
    width:100%;
}
#facts ul li h6 {
    font-size:13px;
    color:#fff;
    padding:12px;
    clear:both;
    max-width:200px;
    margin:-10px auto 0;
    position:relative;
    display:block;
    font-weight:bold;
}
#facts ul li h6 span {
    width:60px;
    height:1px;
    position:absolute;
    top:-1px;
    left:50%;
    margin-left:-30px;
    background:#fff;
    opacity:0.5
}
.num{
    position:relative;
    z-index:-1;
    font-size:56px;
    font-weight:bold;
    font-family: 'Istok Web', sans-serif;
    text-shadow: 0px 18px 2px rgba(41, 41, 41, .3);
}
.conter-decor{
    position:absolute;
    width:50px;
    height:4px;
    z-index:-1;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-2px;
}
.conter-decor:after{
    top: 2px;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    opacity:0.3;
}
.conter-decor:before{
    bottom: 2px;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    opacity:0.3;
}
.conter-decor:after {
    border-width: 90px;
    margin-left: -90px;
}
.conter-decor:before {
    border-width: 90px;
    margin-left: -90px;
}
.rotade{
    position:absolute;
    background:#fff;
    z-index:-1;
    width:1px;
    height:50px;
    opacity:0.5;
}
.rot-top-left{
    top:-50px;
    left:-90%;
}
.rot-top-right{
    top:50px;
    right:100%;
}
.rot-bottom-left{
    bottom:-50px;
    right:-90%;
}
.rot-bottom-right{
    bottom:50px;
    left:100%;
}
.rot-top-left, .rot-bottom-left{
    -webkit-transform: rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:  rotate(45deg);
    -ms-transform:  rotate(45deg);
    transform:  rotate(45deg);
}
.rot-bottom-right, .rot-top-right {
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

/* ====================
Resume
--------------------------------------------------------------*/

#resume{
    position:relative;
    z-index:4;
    padding:0;
}
.background-color{
    float:left;
    width:100%;
    position:relative;
    z-index:2;
    padding:90px 0;
}
.resumeshadow{
    position:absolute;
    width:100%;
    height:123px;
    left:0;
    bottom:0;
    z-index:-1;
}
.resumeshadow:before, .resumeshadow:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 20px;
    left: 10px;
    width: 50%;
    top: 40%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 35px 20px #000;
    -moz-box-shadow: 0 35px 20px #000;
    box-shadow: 0 35px 20px #000;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
    opacity:0.2;
}
.resumeshadow:after{
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto;
}
#resume div.grid-full{
    position:relative;
}
.place-holder{
    margin-bottom:40px;
}
#resume .container {
    max-width:900px;
}
#resume  a.button{
    background:#fff;
    margin-top:50px;
}
.resume-line{
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    left:9.836363636364%;
    background:#fff;
}
.resume-date {
    width:120px;
    height:120px;
    background:#fff;
    float:left;
    margin-top:20px;
    border-radius:100%;
    position:relative;
    border-bottom:4px solid #ccc;
}
.resume-date h4 {
    margin-top:40px;
}
.resume-date span {
    margin-top:6px;
    font-size:0.8em;
    color:#585F73;
}
.resume-info {
    text-align:left;
    padding:18px;
    background:#fff;
    border-radius:8px;
    border-bottom:6px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
}
.resume-info h3{
    font-weight:800;
    text-transform:none;
    color:#666;
    margin-bottom:6px;
}
.resume-info h4{
    font-weight:600;
}
.resume-info p {
    font-size:0.8em;
    margin-top:10px;
}
.resume-info:after{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.resume-info:after {
    border-right-color: #ccc;
    border-width: 15px;
    margin-top: -15px;
}
.resume-info:before{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 70%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

/* ====================
Work
--------------------------------------------------------------*/

#work{
    margin: 30px 0 0 0;
    padding: 0 0 50px 0;
    z-index: 2;
}
#work .container{
    overflow:hidden;
}
#piece_container{
    position:relative;
    z-index:3;
    float:left;
    width:100%;
    height:100%;
    margin: 0;
    padding: 0 0 0 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #666;
    text-align:center;
    -webkit-backface-visibility:hidden
}
#piece_container .mix { 
    opacity: 0;
    display: none;
}
#options{
    width:100%;
    text-align:center;
    position:relative;
    z-index:12;
    margin-top: -20px;
}
#options ul {
    position:relative;
    margin:0px auto 0px;
    max-width:500px;
    padding:6px 0;
}
#options ul:before{
    z-index: -1;
    position: absolute;
    content: "";
    top: 70%;
    max-width:200px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
#options li{
    font-family: "Montserrat", Arial, sans-serif;
    display:inline-block;
    color: #fff;
    text-transform: none;
    padding: 6px 10px;
    cursor:pointer;
    font-weight:700;    
    position:relative;
    font-size: 1.8em;
    line-height: 18px;
    font-weight: normal;
}
#options li.actcat, #options li:hover{
    color:#53EBD2;
}
.box {
    display:inline-block;
    position:relative;
    z-index:1;
    margin:1.3% 1.315151515152%; 
}
.box  a{
    float:left;
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
.folio-img-holder{
    position:relative;
    width:100%;
    float:left;
}
.folio-img-holder img{
    position:relative;
    z-index:1;
}
.folio-overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:2;
    opacity:0;
    background:#474D5D;
    overflow:hidden;
/*    -moz-box-shadow: -10px -10px 0 1px rgba(255,255,255,0.6);
    -webkit-box-shadow: -10px -10px 0 1px rgba(255,255,255,0.6);
    box-shadow: -10px -10px 0 1px rgba(255,255,255,0.6);*/
}
.folio-overlay h3{
    margin-top:20%;
    color:#fff;
    font-weight:600;
    text-transform:none;
}
.folio-button{
    color:#fff;
    margin:10% auto;
/*    width:50px;
    height:50px;*/
    line-height:50px;
    border-radius:4px;
    font-size:5em;
    -webkit-transform: scale(0) rotate(360deg); 
    -moz-transform: scale(0) rotate(360deg) ; 
    -o-transform: scale(0) rotate(360deg) ;
    -ms-transform: scale(0) rotate(360deg);
        -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 300ms linear;
    transition: all 500ms linear;
}
.white-popup-block{
    max-width:900px;
    margin: 50px auto;
    padding:0 0 90px;
}
.white-popup-block div.content{
    background:#EEEEEE;
    padding-bottom:50px;
}
.slider-content{
    position:relative;
    float:left;
    width:100%;
}
.white-popup-block div.content h2{
    font-size:1.5em;
    font-weight:500;
    text-transform:none;
    text-align:center;
}
.white-popup-block div.content h4{
    text-align:center;
    font-size:1.4em;
    margin-top:20px;
    font-weight:600;
    margin-bottom:50px;
}
.white-popup-block div.content p {
    padding:10px;
    text-align:center;
    margin-top:-30px;
}
.white-popup-block a.lanch-button{
    padding:10px 30px;
    color:#fff;
    border-radius:6px;
    border-bottom:4px solid #ccc;
    position:absolute;
    bottom:-60px;
    left:50%;
    margin-left:-80px;
}
.white-popup-block a.lanch-button:hover{
    color:#666;
}
.white-popup-block a.lanch-button:before{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 12px;
    right: 10px;
    width: 50%;
    top: 30%;
    max-width:120px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}
.separator{
    width:75px;
    height:1px;
    margin:0 auto 10px;
}
/* ====================
Services
--------------------------------------------------------------*/

#services{
    background:#eee;
    z-index:1;
}
#services .content{
    padding:50px 0;
}
.icon-holder{
    width:150px;
    height:150px;
    border-radius:100%;
    background:#fff;
    margin:0 auto;
    border-bottom:6px solid #ccc;
}
.icon-holder i {
    font-size:54px;
    line-height:150px;
}
.services-box-info{
    position:relative;
    margin:40px auto;
    background:#fff;
    border-radius:10px;
    padding:8px;
    width:80%;
    border-bottom:6px solid #ccc;
}
.services-decor {
    width:2px;
    height:30px;
    background:#fff;
    top:-36px;
    left:50%;
    position:absolute;
}
.services-box-info h4 {
    margin:30px 0;
    font-weight:800;
}
.services-box-info p{
    font-size:0.8em;
    text-align:justify;
    max-width:250px;
    margin:10px auto; 
}
.services-box-info h5{
    font-size:0.9em;
}
.services-box-info li {
    width:100%;
    padding:6px;
    font-size:0.8em;
    margin-bottom:10px;
    border-bottom:1px dashed #ccc;
}
.price{
    width:80%;
    margin:20px auto;
    color:#fff;
    font-size:1.2em;
    text-transform:uppercase;
    padding:20px 0;
    position:relative;
    border-radius:4px;
}
.services-box{
    position:relative;
}
.services-box:before, .services-box:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 30px;
    left: 59px;
    width: 50%;
    top: 40%;
    max-width:200px;
    background: #ccc;
    border:1px dashed #fff;
    -webkit-box-shadow: 0 35px 20px #000;
    -moz-box-shadow: 0 35px 20px #000;
    box-shadow: 0 35px 20px #000;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
    opacity:0.2;
}
.services-box:after{
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 59px;
    left: auto;
}
#services-carusel .item {
    max-width:350px;
    margin:0 auto;
}
/* ====================
Order
--------------------------------------------------------------*/

#order{
    padding:0;
    position:relative;
    z-index:2;
}
#order div.content{
    padding:60px 0;
    position:relative;
    z-index:2;
} 
#order a.button{
    float:none;
    margin:0 auto;
    background:#fff;
    padding:20px 40px;
}
#order a.button:hover, .button:hover , #resume a.button:hover{
    color:#666;
}

/* ====================
testimonials
--------------------------------------------------------------*/

#testimonials{
    padding:90px 0 0;
    z-index:1 ;
}
.parallax-testimonials{
    background:url(../images/bg1.jpg);
    background-attachment:fixed;
    background-size: cover;
    background-position:center;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-12;
}
#testimonials .content{
    position:relative;
    z-index:2;
}
#testimonials-slider{
    width:100%;
    position:relative;
    z-index:2;
    color:#fff;
    padding:10px 0;
}
#testimonials-slider p {
    font-size:20px;
    font-family: "Times New Roman", Times, serif; font-style: italic;
    padding:8px;
    margin-top:30px;
    color:#fff;
    max-width:800px;
    margin:0 auto;
}
.testimonials-shadow{
    position:absolute;
    width:100%;
    height:80px;
    left:0;
    bottom:-80px;
    z-index:0;
    
}
.user-photo{
    width:200px;
    height:200px;
    border-radius:100%;
    margin:10px auto;
    background:#fff;
    position:relative;
    border:8px solid #fff;
}
.user-photo img{
    border-radius:100%;
}
.client-name{
    max-width:350px;
    margin:40px auto;
    padding:8px 4px;
    border-radius:6px;
    background:#fff;
    border-bottom:6px solid #ccc;
    position:relative;
}
.client-line{
    position:absolute;
    width:1px;
    height:25px;
    top:-25px;
    left:50%;
    background:#fff;
    display:block;
}
.circle{
    position:absolute;
    width:9px;
    height:9px;
    background:#fff;
    border-radius:100%;
    top:0;
    left:-4px;
    display:block;
}
/*
 ====================
Map
--------------------------------------------------------------*/

#mapbox{
    position:relative ;
    width:100%;
    height:350px;
    overflow:hidden;
    margin-top:80px;
    z-index:0;
}
#map_canvas { 
    height: 100%; 
    position:absolute;
    top:0;
    left:0; 
    width:100%;
}

/* ====================
Contacts
--------------------------------------------------------------*/

#contacts{
    padding:0;
    background:#585F73;
}
#contacts div.content{
    padding:50px 0;
    position:relative;
    z-index:3;
}
#contacts h2 {
    margin-bottom:30px;
}
.contact-details{
    margin:50px  auto ;
}
.contact-details h3 {
    float:left;
    padding:0 10px 10px 0;
    color:#fff;
}
.contact-form{
    margin:0 auto;
    max-width:800px;
}
.contact-form p {
    color:#fff;
    max-width:600px;
    text-align:right;
    font-size:0.8em;
    float: right;
    margin-bottom:30px;
}
.contact-details ul {
    float:left;
    margin-top:40px;
}
.contact-details ul li {
    float:left;
    width:100%;
    margin-bottom:20px;
}
.contact-details ul li i {
    width:50px;
    height:50px;
    font-size:24px;
    background:#fff;
    border-radius:100%;
    line-height:50px;
    border-bottom:4px solid #ccc;
    float:left;
}
.contact-details ul li span{
    background:#fff;
    padding:8px;
    font-size:0.8em;
    margin-top:6px;
    margin-left:20px;
    border-radius:6px;
    border-bottom:4px solid #ccc;
    float:left;
    display:block;
}
/* ======
Contact form
------------*/

#contact_form{
    width: 100%;
    font-size: 11px;
    color: #666666;
    margin:50px auto;
}
#contact_form label input{
    display: block;
}
#contact_form input{
    border:2px solid #fff;
    border-bottom:4px solid #ccc;
    outline: none;
    padding: 10px;
    float:left;
    width:49%;
    height: 45px;
    background: none;
    -webkit-appearance: none;
    font-size: 1.2em;
    font-weight:300;
    margin-bottom:20px;
    border-radius:8px;
    color:#fff;
    -webkit-font-smoothing: antialiased;
}
::-webkit-input-placeholder { 
    color: #fff; text-overflow: ellipsis; 
    text-transform: uppercase;
}
:-moz-placeholder { 
    color: #fff !important; text-overflow: ellipsis; 
    text-transform: uppercase;
}
::-moz-placeholder { 
    color: #fff !important; text-overflow: ellipsis; 
    text-transform: uppercase;
} 
:-ms-input-placeholder { 
    color: #fff !important; text-overflow: ellipsis;
    text-transform: uppercase; 
}
.right{
    float:right !important
}
#contact_form textarea{
    background: none;
    border:2px solid #fff;
    border-bottom:4px solid #ccc;
    color: #fff;
    height:200px;
    width: 100%;
    resize: vertical;
    outline:none;
    margin-top:8px;
    padding:10px;
    border-radius:8px;
    -webkit-appearance: none;
    font-family: 'Open Sans', sans-serif;
}
#contact_form textarea:focus, #contact_form input:focus {
    color:#fff;
    text-transform: none;
    -webkit-transition: background 0.33s linear;
    -moz-transition: background 0.33s linear;
    -o-transition: background 0.33s linear;
    transition: background 0.33s linear;
}
.submit_btn {
    border: none;
    margin-top:20px;
    padding: 10px 25px 10px 25px;
    color: #fff;
    width:150px;
    float:left;
    cursor:pointer;
    border-radius:8px;
    border-bottom:6px solid #ccc;
}
.submit_btn:hover{
    background:#fff;
}
.success, .error{
    padding: 10px;
    font-size:16px;
    color:#fff;
    width:100%;
    position:relative;
    border-radius:4px;
}
.error{     
    color:#F54A4B;
}

/* ====================
Footer
--------------------------------------------------------------*/

#footer {
    padding:0;
}
#footer .content{
    padding:5px 0 30px;
}
#footer .content:after{
    top: 0;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#footer .content:after {
    border-top-color: #585F73;
    border-width: 50px;
    margin-left: -50px;
}
#footer p {
    font-size:14px;
    color:#fff;
}
.social-list{
    width:100%;
    margin-top:80px;
    padding-bottom:20px;
}
.social-list ul {
    position:relative;
    z-index:3;
}
.social-list ul li {
    margin-left:4px;
    display:inline-block;   
}
.social-list ul li a{
    float:left;
    border-bottom:4px solid #ccc;
    background:#fff;
    width:50px;
    height:50px;
    border-radius:100%;
    font-size:18px;
}
.social-list ul li i{
    line-height:50px;
}
.social-list ul li a:hover{
    color:#ccc;
}
.to-top{
    width:50px;
    height:50px;
    line-height:50px;
    margin:-18px auto;
    font-size:34px;
    display:block;
    color:#fff;
}
.to-top i {
    cursor:pointer;
}
/* ====================
Color styles
--------------------------------------------------------------*/


#jprePercentage, h3.animtext, .margin , .link-holder ul li a:hover, .num , #resume  a.button , .resume-date h4 ,.resume-info h4 , .icon-holder i , .services-box-info h5 , #order a.button , .client-name , .contact-details ul li i , .contact-details ul li span , .submit_btn:hover , .social-list ul li a , .folio-overlay h5 , .desktop-screen-navigation ul li.current a , .desktop-screen-navigation ul li:hover a{
    color: #5DA7C3;
}
#jpreBar, .nav-holder , .desktop-screen-navigation ul li , .button , .show-skills  span , .background-color, #options ul , .box  a, .box  a div.folio-name , .white-popup-block a.lanch-button , .separator , .price ,#order div.content, .testimonials-shadow , #contact_form textarea:focus, #contact_form input:focus , .submit_btn , #footer .content , .nav-top span{
    background:#5DA7C3;
}
.start-decor:after {
    border-top-color:#5DA7C3;
}
.start-decor:before {
    border-bottom-color:#5DA7C3;
}
.show-skills:after {
    border-top-color:#5DA7C3;
    border-width: 28px;
    margin-left: -18px;
}
.show-skills:before {
    border-bottom-color:#5DA7C3;
    border-width:28px;
    margin-left:-18px;
}
.conter-decor:after {
    border-top-color: #5DA7C3;
}
.conter-decor:before {
    border-bottom-color: #5DA7C3;
}
.contact-details h3 {
    border-bottom:2px solid #5DA7C3;
}
.user-photo{
    border-left:8px solid #5DA7C3;
}
#services-carusel .owl-next , #project-slider .owl-next , #testimonials .owl-next{background:#5DA7C3 url(../images/sr.png) no-repeat center;}
#services-carusel .owl-prev ,#project-slider .owl-prev , #testimonials .owl-prev {background:#5DA7C3 url(../images/sl.png) no-repeat center;}
/* ====================
CSS animation
--------------------------------------------------------------*/

.img-rotade{
    -webkit-animation: spinAround 12s linear infinite;
    -moz-animation: spinAround 12s linear infinite;
    animation: spinAround 12s linear infinite;
}
@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform:scale(5.0) rotate(-60deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: scale(5.0) rotate(-60deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: scale(5.0) rotate(-60deg);
    }
}
.transition{
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
}
.transition2{
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.but-rotade{
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}
.start-rotade{
    -webkit-transform: scale(0.8) rotate(360deg); 
    -moz-transform: scale(0.8) rotate(360deg) ; 
    -o-transform: scale(0.8) rotate(360deg) ;
    -ms-transform: scale(0.8) rotate(360deg);
}
.scale-big{
    -webkit-transform: scale(1) rotate(720deg); 
    -moz-transform: scale(1) rotate(720deg) ; 
    -o-transform: scale(1) rotate(720deg) ;
    -ms-transform: scale(1) rotate(720deg);
}
.scale-small{
    -webkit-transform: scale(0) rotate(360deg); 
    -moz-transform: scale(0) rotate(360deg) ; 
    -o-transform: scale(0) rotate(360deg) ;
    -ms-transform: scale(0) rotate(360deg);
}
/* ====================
Media 
--------------------------------------------------------------*/

@media only screen and  (max-width: 1200px) {
.left-sidebar{
    width:250px;
}   
.content-holder{
    margin-left:250px;
}
#about .grid-half {
    width:100%;
}
.photo-holder{
    margin-bottom:60px;
}
.resume-info{
    margin-left:30px;
}
.contact-details h3 {
    display:none;
}
.contact-details ul {
    float:none;
    margin:0 auto;
}
.contact-details ul li {
    float:left;
    width:100%;
    margin-bottom:20px;
}
.contact-details  ul li i {
    float:none;
    width:50px !important;
    height:50px !important;
    margin:0 auto;
}
.contact-details ul li span{
    width:100%;
    margin-top:20px;
    margin-left:0;
}
.folio-overlay h3{
    margin-top:10%;
}
}
/* ====================
Tablet / netbooks 
--------------------------------------------------------------*/
@media only screen and  (max-width: 959px) {
.left-sidebar{
    display:none;
}   
.content-holder, .slides-fullscreen-img{
    margin-left:0;
}   
.nav-holder{
    position:fixed;
    width:100%;
    height:50px;
    z-index:100;
    top:0;
    left:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-box-shadow: 0 0 10px -2px #000;
    -webkit-box-shadow: 0 0 10px -2px #000;
    box-shadow: 0 0 10px -2px #000;
}
.nav-button{
    width:46px;
    height:36px;
    position:absolute;
    top:8px;
    left:50%;
    margin-left:-23px;
    cursor:pointer;
    padding:4px;
    display:block;
}
.nav-button span{
    width:100%;
    height:4px;
    float:left;
    margin-bottom:6px;
    background:#fff;
}
.text-ticker-holder{
    width:100%;
}
.nav-border{
    display:none;
}
.link-holder{
    margin-top:0;
    background:#5DA7C3;
    display:none;
    position:absolute;
    top:50px;
    left:0;
    width:100%;
}
.link-holder ul {
    width:100%;
}
.link-holder ul li {
    width:100%;
    float:left;
    margin-bottom:8px;
}
.link-holder ul li a {
    border: none;
}
.link-holder ul li.cur a{
    background:#fff;
    color:#5DA7C3;
}
.resume-line{
    display:none;
}
#facts ul li {
    width:100%;
    margin-bottom:90px;
}
#facts ul li:last-child{
    margin-bottom:10px;
}
.box {
    width: 46.969696969697%;
}
.folio-overlay h3{
    margin-top:30%;
}
}

/* ====================
Tablet 
--------------------------------------------------------------*/

@media only screen and  (max-width: 740px) {
    
.resume-info{
    margin-top:30px;
    margin-left:0;
    border-top:1px solid #ccc;
}       
.resume-info:after{
    right: 100%;
    margin-right:-73px;
    top: -16px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.resume-info:after {
    border-bottom-color: #ccc;
    border-width: 15px;
    margin-top: -15px;
}
#facts, #testimonials{
    background-attachment: scroll;
}
#testimonials-slider p {
    font-size:14px;
}
}

/* ====================
Smartphone / small tablet 
--------------------------------------------------------------*/

@media only screen and  (max-width: 540px) {

.box {
    width: 96.969696969697%;
}
#contact_form input{
    width:100%;
}
#project-slider .owl-next ,#project-slider .owl-prev {display:none}

}
/* ====================
Retina 
--------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {

#testimonials-slider p {
    font-size:18px;
}
}