@charset "utf-8";
/* ====================
--------------------------------------------------------------
	++++General Styles++++
	++++Typography++++
	++++Content Styles++++
	++++Intro++++
	++++Navigation++++
	++++About++++
	++++Resume++++
	++++Portfolio++++
	++++Services++++
	++++Contacts++++
	++++Footer++++
	++++CSS Animation++++
	++++Media++++
*/

/* ====================
General Style
--------------------------------------------------------------*/

html{
	overflow-x:hidden !important;
	height:100% !important;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #666;
	background:#fff;
	height:100%;
	text-align:center;
	-webkit-backface-visibility:hidden
}
@-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;
}
b, strong {
    font-weight: bold;
}
i, em {
	font-style: italic;
}
.entry-content blockquote, 
.comment-content blockquote, 
blockquote {
    font-style: italic;
    margin-bottom: 1.71429rem;
    padding: 1.71429rem;
}
blockquote, q {
    quotes: none;
}

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

#main{
	opacity:0;
	height:100%;
}
#wrapper{ 
	position: relative;
	z-index:2;
	top:100%;
}
.container{
	max-width: 1200px;
	width:92%;
	margin:0px auto;
	position: relative;
	zoom:1;
	z-index:2;
}
.anim{
	top:25%;
	opacity:0;
}
.container p {
	font-size:0.9em;
}
.content , .sections{
	float:left;
	width:100%;
	position:relative;
}
.sections {
	padding: 90px 0;
}
/*#blog.sections {
	padding: 0;
}
*/.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%;

	-webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    
}
.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:999;
	display: table;
	height: 100%;
	text-align: center;
	width: 100%;
}
.main-menu-wrapper {
	display: table-cell;
    vertical-align: middle;
}
.link-holder ul {
	max-width:200px;
	margin:0 auto;
}
.link-holder ul li {
	width:100%;
	float:left;
	margin-bottom:8px;
	position: relative;
}
.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%;
	background:url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	background-attachment: scroll;
}
.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;

    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
.desktop-screen-navigation{
	position:relative;
	top:40%;
}
.logo-wrapper {
	left: 0;
    position: absolute;
    top: 10%;
    width: 100%;
}
.logo {
	color: #FFFFFF;
    display: block;
    font-size: 40px;
    font-weight: 600;
    line-height: 35px;
    text-transform: uppercase;
    width: 150px;
    margin: 0 auto;
}
.logo img {
	width: 100%;
	height: auto;
}
/* Slogan */
.slogan {
	color: #FFF;
	font-style: italic;
	font-size: 15px;
	margin-top: 10px;
}
.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%; 
}
#facts ul li:nth-child(3n+1) {
	margin-top: 100px;
}
#facts ul li:first-child{
	margin-top: 0;
}
.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: 82px;
	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{
	padding:0;
	z-index:2;
}
#work div.background-white{
	padding:90px 0;
}
#work .container{
	overflow:hidden;
}
.workshadow{
	position:absolute;
	width:100%;
	height:123px;
	left:0;
	bottom:0;
	z-index:-1;
}
.workshadow: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);
	opacity:0.5;
}
#folio_container{
	position:relative;
	z-index:3;
	float:left;
	width:100%;
	height:100%;
}
#folio_container .mix { 
	opacity: 0;
	display: none;
}
#options{
	width:100%;
	text-align:center;
	position:relative;
	z-index:12;
	padding:10px 0;
	margin-top:30px;
	margin-bottom:30px;
}
#options ul {
	position:relative;
	margin:10px auto 10px;
	max-width:350px;
	border-radius:6px;
	padding:8px 0;
	border-bottom:4px solid #ccc;
}
#options ul:before{
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 8px;
	left: 10px;
	width: 50%;
	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{
	display:inline-block;
	margin-bottom:5px;
    color: #fff;
    font-size: 15px;
	text-transform: none;
	padding:6px 10px;
	cursor:pointer;
	font-weight:700;	
	position:relative;
}
#options li.actcat, #options li:hover{
	color:#666;
}
.box {
	display:inline-block;
	position:relative;
	z-index:1;
	margin: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:30%;
	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:24px;
	-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:#fff;
	padding-bottom:90px;
}
.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:0.8em;
	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;
	position: relative;
	overflow: hidden;
}
.icon-holder img {
	width: 150px;
	height: 150px;
	left: 50%;
	top: 50%;
	position: absolute;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.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{
	margin-top: 80px;
	padding:20px 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, .wpcf7{
	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%;
	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 60px;
	font-size:34px;
	display:block;
	color:#fff;
}
.to-top i {
	cursor:pointer;
}

/* ====================
Blog - single
--------------------------------------------------------------*/

#blog { 
	padding-top:100px;
}
.bs:after{
	border-top-color: #fff !important;}
/*-- Post Styles --*/

.single-media {
	margin-bottom:-20px;
	cursor:move;
}
.post,.awe_portfolio {
	position:relative;
	text-align:left;
	margin-top:50px;
	padding:0px 0px 70px 0;
	border-bottom:1px solid #ccc;
}
.post-media{
	position:relative;
}
.post-media a{
	/*float:left;*/
	position:relative;
	width:100%;
	height:100%;
	text-align:center !important;
	display:block;
	overflow:hidden;
	margin-bottom:20px;
}
.post-media a img{
	position:relative;
	float:left;
	z-index:1;
}
.post-media a img:hover{
	opacity:0.5;
}
.post-meta {
	padding: 10px 0;
	font-family: 'Istok Web', sans-serif;
}
.post-meta ul {
	/*float:left;*/
	margin-top:10px;
}
.post-meta li {
	display:inline-block;
	margin-right:10px;
}
.post-meta li h6, .post-meta li a {
	text-transform:none !important;
	font-size:13px;
}
.post-title h3 {
	margin-top:10px;
}
.post-title h3 a{
	padding-top: 10px;
	text-transform: none;
	letter-spacing: normal;
	font-size:2.2em !important;
	font-family: 'Istok Web', sans-serif;
	color:#666;
}
.post-body a.read-more {
	float:right;
	margin-top:30px;
	color:#fff;
}
.post-body {
	margin-top:10px;
}
/*-- Sidebar styles --*/

.widget {
	text-align: left;
	margin: 50px auto;
}
.widget h4{
	margin-bottom:10px;
}
.widget table{
    width: 100%;
}
.widget table caption
{
    margin-bottom:10px;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 200;
}
.searh-holder{
	border:1px solid #ccc;
	border-bottom:6px solid #ccc;
	border-radius:4px;
	position:relative;
	height: 46px;
	overflow:hidden;
}
.search-form {
	border: none;
	float: left;
	outline: none;
	padding: 0px 0px 0px 10px;
	width: 100%;
	height: 40px;
	background: #fff;
	color: #666;
	-webkit-appearance: none;
}
.search-submit {
	border: none;
	outline: none;
	cursor: pointer;
	position:absolute;
	background:#fff;
	top:0;
	right:0;
	width: 18%;
	height: 40px;
}
.search-submit:hover i {
	opacity:0.5;
}
.cat-item, .recentcomments {
	font-size: 0.8666666666667em;
	padding-bottom: 8px;
	margin-bottom: 15px;
	border-bottom: 1px solid #ccc;
}
.cat-item a, .recentcomments a { 
	color: #060606!important; 
	font-weight: 400; 
	margin-right: 5px;
}
.post-body a.read-more , .tagcloud a {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 0.8em;
	text-transform: uppercase;
	padding: 5px 10px;
	position:relative;
	border-bottom:4px solid #ccc;
	color:#fff;
	border-radius:4px;
}
.tagcloud a:hover , .post-body a.read-more:hover{
	color:#666;
}
.widget_archive li , 
.widget-recent-entries li  {
	border-bottom: 1px solid #e9e9e9;
	padding-bottom: 8px;
	margin-bottom: 15px;
}
.widget_archive li a,
.widget-recent-entries li a {
	color: #060606!important; 
	font-weight: 400;
	font-size: 0.8666666666667em;
	display: inline-block;
	margin-right: 5px;
}

/*--- FLICKR  ---*/
.thumbs {overflow: hidden;}
.thumbs li { list-style: none; float: left; margin: 5px; padding: 1px; margin:1.515151515152%; background: #ccc; width: 30.30303030303%; overflow:hidden;}
.thumbs li:hover{opacity:0.5; border-radius:100%;}
.thumbs li:hover img{ border-radius:100%;}
.thumbs li img {  width:100%; height:auto }
.thumbs li a img { border: none;}

/*--- Pagination ---*/

.pagination {
    text-align:center;
	vertical-align: middle;
	margin-top: 55px;	
    font-size: 14px;
	margin-bottom:30px;
}
.pagination a {
    color: #999;
    display:inline-block;
	font-weight:300;		
    height: 40px;
    line-height: 40px;
    width: 40px;
    border: 1px solid #ccc;
	border-radius:4px;
}
.pagination a.current-page, .pagination a:hover {
    color:#fff;
}
.pagination  span.pagination-num{
	display: inline-block;
    padding:9px 15px;
	color:#666;
	font-size:12px !important;
	text-transform:uppercase;
}
.prevposts-link{
	margin-right:8px;
}
.nextposts-link{
	margin-left:8px;
}
.share-options {
	overflow:hidden;
	padding-top: 20px;
}
.share-options ul{
	float:left;
}
.share-options ul li {
	display:inline-block;
	margin-right:2px;
	padding:8px;
}
.share-options ul li a {
	margin:-14px  0 0 0;
	padding:0 ;
	font-size:16px ;
	color:#666 ;
}
.share-options h6 {
	float:left;
	margin-right:20px;
	margin-top:10px;
	font-size:13px;
	text-transform:none;
}
/*-- Comments --*/

#comments{ 
	text-align:left; 
	padding-top: 50px;
}
#comments-title{
	/*margin-left: 70px; */
	border-bottom: 1px solid #ccc;
	padding-bottom: 30px; 
	margin-bottom: 5px;
	font-size:15px;
}
.comment{ 
	/*float: left;*/
	padding:10px 0; 
}
.comment-body{ 
	position: relative; 
	margin-left: 70px; 
	padding-top: 30px; 
}
.comment-author{ 
	position: absolute; 
	top: 30px; 
	left: -70px;
	height:100%;
	/*border-right:1px solid #ccc;*/
	padding-right:6px;
}
.comment .children{ 
	margin-left: 70px; 
}
.fn{
	display: block; 
	margin-bottom: 10px;
}
.comment-meta, .comment-meta a{
	font-size:11px;
	margin-bottom:10px;
}
#respond{
		/*margin-left:70px;*/
	margin-top:50px;
}
#reply-title{
	padding-bottom:30px;
	margin-bottom:5px;
	font-size:12px;
}
.comment-reply-form{ 
	border-top: 1px solid #ccc; 
}
.comment-notes{ 
	margin-top: 10px; color: #a4a4a3; 
}
.control-group label, .control-group .controls{ 
	display: inline-block; 
}
.control-group label{ 
	margin-left: 10px; 
	font-weight: 200;
}
.control-group .controls input { 
	margin-top: 15px;
	border: none;
	outline: none;
	height: 35px;
	background: #fff;
	padding-left: 15px;
	color: #a4a4a3;
	text-decoration: none;
	border: 1px solid #ccc;
}
.control-group .controls textarea {
	margin-top: 15px;
	border: none;
	outline: none;
	height: 180px;
	background: #fff;
	padding-left: 15px;
	padding-top: 15px;
	color: #666;
	resize: vertical;
	text-decoration: none;
	border: 1px solid #ccc;
}
.controls button {
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	cursor: pointer;
	margin-top: 15px;
	font-size: 0.8em;
	text-transform: uppercase;
	font-family: inherit;
	padding: 10px 20px;
	color: #fff;
	margin-bottom:20px;
	border-bottom:4px solid #ccc;
}

.form-submit input {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    cursor: pointer;
    margin-top: 15px;
    font-size: 0.9em;
    text-transform: uppercase;
    font-family: inherit;
    padding: 8px 20px;
    color: #fff;
    margin-bottom:20px;
    border-bottom:4px solid #ccc;
    background: #54BABB;
    border-radius: 6px;
    float: left;

    -webkit-transition: all .5s linear 0s;
    -moz-transition: all .5s linear 0s ;
    -ms-transition: all .5s linear 0s ;
    -o-transition: all .5s linear 0s ;
    transition: all .5s linear 0s ;
}
.form-submit input:hover {
    color: #666;
}


/*.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
	margin-bottom: 20px;
}*/
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ====================
Color styles
--------------------------------------------------------------*/

::selection {
	background: #54BABB;
	color:#fff;
}
::-moz-selection {
	background:#54BABB;
	color:#fff;
}
#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,.desktop-screen-navigation ul li:hover a,.search-submit i , .bs .to-top i{
	color: #54BABB;
}
#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 , .folio-button , .nav-top span, .tagcloud a, .pagination a.current-page, .pagination a:hover , .post-body a.read-more , .button {
	background:#54BABB;
}
.start-decor:after {
	border-top-color:#54BABB;
}
.start-decor:before {
	border-bottom-color:#54BABB;
}
.show-skills:after {
	border-top-color:#54BABB;
	border-width: 28px;
	margin-left: -18px;
}
.show-skills:before {
	border-bottom-color:#54BABB;
	border-width:28px;
	margin-left:-18px;
}
.conter-decor:after {
	border-top-color: #54BABB;
}
.conter-decor:before {
	border-bottom-color: #54BABB;
}
.contact-details h3 {
	border-bottom:2px solid #54BABB;
}
.user-photo{
	border-left:8px solid #54BABB;
}
#services-carusel .owl-next , #project-slider .owl-next , #testimonials .owl-next, .single-slider .owl-next{background:#54BABB url(../images/sr.png) no-repeat center;}
#services-carusel .owl-prev ,#project-slider .owl-prev , #testimonials .owl-prev, .single-slider .owl-prev {background:#54BABB 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(3600deg); 
	-moz-transform: scale(1) rotate(3600deg) ; 
	-o-transform: scale(1) rotate(3600deg) ;
	-ms-transform: scale(1) rotate(3600deg);
}
.scale-small{
	-webkit-transform: scale(0) rotate(3600deg); 
	-moz-transform: scale(0) rotate(3600deg) ; 
	-o-transform: scale(0) rotate(3600deg) ;
	-ms-transform: scale(0) rotate(3600deg);
}


/* ====================
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) {


	/* Menu Responsive */
	.link-holder {
		height: auto;
	}
	.main-menu-wrapper {
		display: block;
	}
	body.intro-menu,
	.intro-menu #intro {
		height: auto;
	}



	.left-sidebar{
		display:none;
	}	
	.content-holder{
		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:#54BABB;
		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:#54BABB;
	}
	.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, .single-slider .owl-prev,.single-slider .owl-next{display:none}
#respond{
	margin-left:0;
}
}
/* ====================
Retina 
--------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.container p , .margin{
	font-size:1.1em;
	font-weight:400;	
}
#testimonials-slider p {
	font-size:18px;
}
}

.post-body p > a {
    font-size: 0.9em;
    font-family: "Open Sans";
    color: #54BABB;
}


/* Extra Style */

.intro-welcome-menu .nav-holder {
	left: auto;
	right: 0;
}
.intro-welcome-menu .text-ticker-holder {
	right: auto;
	left: 0;
}


.intro-welcome .nav-holder {
	display: none;
}

.intro-welcome .text-ticker-holder {
	width: 100%
}

.intro-menu  .text-ticker-holder {
	display: none;
}

.intro-menu  .nav-holder {
	width: 100%;
}
.site-info a {
	font-size: 13px;
	color: #FFF;
}


.img-responsive {
	display: block;
	height: auto;
	width: 100%;
	max-width: 100%;
}


.embed-responsive,
.awe-embed-video {
    padding-bottom: 56.25%;
    display: block;
    height: 0;
    overflow: hidden;
    position: relative;
}
.embed-responsive-item,
.awe-embed-video > iframe {
	border: 0 none;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/* Style Blog Default */

/* Heading */
.post-body h1 {font-size: 36px;}
.post-body h2 {font-size: 30px;}
.post-body h3 {font-size: 24px;}
.post-body h4 {font-size: 18px;}
.post-body h5 {font-size: 14px;}
.post-body h6 {font-size: 12px;}

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
	margin: 20px 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
}


/* Blogquote */
.post-body blockquote {
    font-style: italic;
    margin-bottom: 1.71429rem;
    padding: 1.71429rem;
}

.post-body blockquote p {
	margin: 0;
	font-style: italic;
}

/* Table */

.post-body table {
    border-bottom: 1px solid #ededed;
    color: #757575;
    font-size: 0.857143rem;
    line-height: 2;
    margin: 0 0 1.71429rem;
    width: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.post-body th {
    color: #636363;
    font-size: 0.785714rem;
    font-weight: bold;
    line-height: 2.18182;
    text-transform: uppercase;
}
.post-body td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}

/* Definition Lists */
.post-body dl {
    margin: 0 20px;	
    font-size: 15px;
    color: #696969;
}

.post-body dt {
    font-weight: bold;
    line-height: 1.71429;
    
}

.post-body dd {
    line-height: 1.71429;
    margin-bottom: 20px;

}

/* List */

.post-body  ul {
    list-style: disc outside ;
}

.post-body  ol {
    list-style: decimal outside ;
}
.post-body  ol, 
.post-body  ul {
    line-height: 1.71429;
    margin: 0 0 1.71429rem;
    font-size: 15px;
    color: #696969;
}

.post-body  li {
    margin: 0 0 0 2.57143rem;
}

.post-body ul ul, 
.post-body ol ol, 
.post-body ul ol, 
.post-body ol ul {
    margin-bottom: 0;
}

/* Address */

.post-body  address {
    display: block;
    font-style: italic;
    font-size: 14px;
    line-height: 28px;
    color: #696969;
}

.post-body ins {
    background-color: #fff9c0;
    text-decoration: none;
}


.post-body  pre {
    color: #666;
    font-size: 14px;
    padding: 20px;
    font-family: Consolas,Monaco,Lucida Console,monospace;
}


.post-body .edit-link a {
	font-size: 12px;
	font-weight: 400;
	font-family: 'Lato';
    margin-top: 20px;
    position: relative;
    text-transform: uppercase;
    float: right;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

img.aligncenter, .wp-caption.aligncenter {
	margin-top: 20px;
	margin-bottom: 20px;
}
img.alignleft, .wp-caption.alignleft {
	margin: 12px 24px 12px 0;
}
img.alignright, .wp-caption.alignright {
	margin: 12px 0 12px 24px;
}
.post-body img {
    max-width: 100%;
    height: auto;
}
.wp-caption {
    max-width: 100%;
    padding: 4px;
}
.post-body form input[type="submit"] {
    background-color: #000;
    border: medium none;
    color: #fff;
    padding: 0 20px;
    width: auto;
    cursor: pointer;
}
.post-body form input {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #666;
    display: inline-block;
    height: 30px;
    max-width: 200px;
    outline: medium none;
    padding: 0 0 0 10px;
    position: relative;
    width: 100%;
}

/* Gallery */

.post-body .gallery-item dt {
    font-weight: bold;
    line-height: 1.71429;
}

.post-body .gallery-item {
	margin-right: 0;
	margin-left: 0;
}
.post-body .gallery-item a {
    display: block;
}

.post-body .gallery img {
    border:  none !important;
}
.gallery .gallery-icon img {
    height: auto;
    max-width: 90%;
}

.post-body embed, 
.post-body iframe, 
.post-body object, 
.post-body video {
    margin-bottom: 1.71429rem;
    max-width: 100%;
}
.blog-item .blog-audio, 
.blog-item .blog-link,
.blog-item .blog-quote,
.blog-item .blog-list-img,
.blog-item .blog-video,
.blog-item .blog-image {
	margin-bottom: 50px;
}
.blog-grid .inner .head-audio,
.blog-grid .inner .head-image,
.blog-grid .inner .blog-link,
.blog-grid .inner .head-video {
	margin-bottom: 20px;
}


.post-body p {
	margin-bottom: 15px;
}


/* All of Widgets for Blog */

.widget.widget_archive select,
.widget.widget_categories select {
	font-size: 15px;
    font-weight: 400;
    height: 40px;
    padding: 0 10px;
    width: 100%;
}

.widget.widget_archive select option,
.widget.widget_categories select option {
	height: 30px;
	padding: 5px 0;
}


.widget ul li {
	border-bottom: 1px solid #ccc;
    font-size: 0.866667em;
    margin-bottom: 15px;
    padding: 10px 0;
}
.widget .flickr-content li {
	border-bottom: 0;
	background-color: transparent;
}

.widget.widget_text a img,
.widget.widget_text p img {
	width: 100%;
	height: auto;
}
.widget.widget_text p .wp-smiley {
	width: auto;
}

.comment-form .controls {
	display: block;
}
.comment-form textarea {
	width: 100%;
}

.form-allowed-tags {
	 font-size: 14px;
    margin-top: 20px;
    word-break: break-all;
    word-wrap: break-word;
}
.form-allowed-tags code {
    color: #c7254e;
}



/* Fix Mutil Level Menu */
.link-holder .children li a,
.desktop-screen-navigation .children li a {
	border: 0;
	font-size: 14px;
	color: #54babb;
}
.link-holder .children,
.desktop-screen-navigation .children {
    padding-left: 10px;
    left: 100%;
    position: absolute;
    top: 0;
    width: 200px;
    z-index: 999;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: all .3s linear 0s;
    -o-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

.link-holder .children li,
.desktop-screen-navigation .children li {
	background-color: #FFF;
	margin-bottom: 0;
	padding: 5px 0;
}
.link-holder  .has-child:hover > .children,
.desktop-screen-navigation .has-child:hover > .children {
	visibility: visible;
    opacity: 1;
}
.link-holder .children li .children li a,
.desktop-screen-navigation .children li.children li a {
	font-size: 14px;
}
.link-holder .has-child > a,
.desktop-screen-navigation .has-child > a {
	position: relative;
}
.link-holder .has-child > a:before ,
.desktop-screen-navigation .has-child > a:before {
	content: "\f105";
	color: #fff;
    display: inline-block;
    font-family: "FontAwesome";
    font-size: 20px;
    right: 14px;
    position: absolute;
    top: 7px;
}



.link-holder .children .has-child > a:before {
	color: #54babb;
}
.link-holder .has-child > a:hover:before {
	color: #54babb;
}


.desktop-screen-navigation .children {
	-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,.2);
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,.2);
}
.desktop-screen-navigation .children li {
	border: 0;
	background-color: #54babb;
}

.desktop-screen-navigation ul.children li  a {
	color: #FFF !important;
}

.desktop-screen-navigation ul.children li:hover {
	background: #54babb;
}

.disable-intro-single #wrapper,
.disable-intro-blog #wrapper {
	top: 0;
}



.section-image {
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    background-size: cover;
    background-repeat: repeat-y;
    background-position: 50% 50%;
}
.sections .paragraph p {
	color: #FFF;
}