@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%;
}
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;
}

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

#main{
	opacity:0;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
#wrapper{ 
	position: relative;
	z-index:2;
	float:left;
	width: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;
}
.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: relative;
	float:left;
	left: 0;
	top: 0;
	background: #fff;
	z-index:3;
	-webkit-transform: translate3d(0,0,0);	
}
#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%;
	background:url(../images/bg.png);
	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: translate3d(0,0,0);	
}
.desktop-screen-navigation{
	position:relative;
	top:40%;
}
.logo{
	position:absolute;
	top:10%;
	left:0;
	width:100%;
	display:block;
}
.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;
	-webkit-transform: translate3d(0,0,0);	
}
#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;
	-webkit-transform: translate3d(0,0,0);	
}
#facts h2 {
	margin-bottom:80px;
}
.parallax-facts{
	background:url(../images/bg.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;
	-webkit-transform: translate3d(0,0,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{
	padding:0;
	z-index:2;
	-webkit-transform: translate3d(0,0,0);	
}
#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: 550px;
	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;
}

#options2{
	width:100%;
	text-align:center;
	position:relative;
	z-index:12;
	padding:10px 0;
	margin-top:30px;
	margin-bottom:30px;
}
#options2 ul {
	position: relative;
	margin: 10px auto 10px;
	max-width: 550px;
	border-radius: 6px;
	padding: 8px 0;
	border-bottom: 4px solid #ccc;
}
#options2 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);
}
#options2 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;
}
#options2 li.actcat, #options2 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;
	-webkit-transform: translate3d(0,0,0);	
}
#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;
	-webkit-transform: translate3d(0,0,0);	
}
#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/bg.jpg);
	background-attachment:scroll;
	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;
}

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

#blog { 
	margin-top:100px;
	-webkit-transform: translate3d(0,0,0);	
}
.bs:after{
	border-top-color: #fff !important;}
/*-- Post Styles --*/

#single-media {
	margin-bottom:-20px;
	cursor:move;
}
.post { 
	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 {
	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;
}
.searh-holder{
	border:1px solid #ccc;
	border-bottom:6px solid #ccc;
	border-radius:4px;
	position:relative;
	height: 46px;
	overflow:hidden;
}
.search {
	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; 
}
.post-body a , .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:hover{
	color:#666;
}
.widget-archive a, .widget-recent-entries a {
	color: #060606!important; 
	font-weight: 400;
	font-size: 0.8666666666667em;
	display: block;
	padding-bottom: 8px;
	margin-bottom: 15px;
	border-bottom: 1px solid #e9e9e9;
}

/*--- FLICKR  ---*/

.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;
	max-width:600px;
	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;
}
.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: #5297c7;
	color:#fff;
}
::-moz-selection {
	background:#5297c7;
	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,.search-submit i , .bs .to-top i{
	color: #5297c7;
}
#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 , .button {
	background:#5297c7;
}
.start-decor:after {
	border-top-color:#5297c7;
}
.start-decor:before {
	border-bottom-color:#5297c7;
}
.show-skills:after {
	border-top-color:#5297c7;
	border-width: 28px;
	margin-left: -18px;
}
.show-skills:before {
	border-bottom-color:#5297c7;
	border-width:28px;
	margin-left:-18px;
}
.conter-decor:after {
	border-top-color: #5297c7;
}
.conter-decor:before {
	border-bottom-color: #5297c7;
}
.contact-details h3 {
	border-bottom:2px solid #5297c7;
}
.user-photo{
	border-left:8px solid #5297c7;
}
#services-carusel .owl-next , #project-slider .owl-next , #testimonials .owl-next{background:#5297c7 url(../images/sr.png) no-repeat center;}
#services-carusel .owl-prev ,#project-slider .owl-prev , #testimonials .owl-prev {background:#5297c7 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) {
.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:#5297c7;
	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:#5297c7;
}
.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}
#respond{
	margin-left:0;
}
}



/* Make sure the image wrapper can anchor positioned children */
.folio-img-holder { position: relative; }

/* Toggle this on any card that should show the award */
.has-award .folio-img-holder::after {
  content: "";
  position: absolute;
  top: 8px;               /* adjust to taste */
  right: 8px;              /* swap to right:8px; for top-right */
  width: 88px;            /* responsive-friendly size */
  height: 88px;
  background-image: url("../images/winner.png"); /* your badge */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;             /* above the thumbnail, below/above overlays as needed */
  pointer-events: none;   /* don't block clicks to the video link */
}

/* If your hover overlay covers it, bump z-index or force above overlay */
.folio-img-holder .folio-overlay { z-index: 2; }
.has-award .folio-img-holder::after { z-index: 4; }

/* Optional modifiers for different corners */
.has-award--tr .folio-img-holder::after { left: auto; right: 8px; }
.has-award--bl .folio-img-holder::after { top: auto; bottom: 8px; }
.has-award--br .folio-img-holder::after { top: auto; left: auto; right: 8px; bottom: 8px; }

/* ====================
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;
}
}