/*
	A Person - Responsive Single Page Vcard
	Version : 2 [ October 2 , 2014 ] - Modern style
	Author : 99Square Studio
	Copyright by : 99Square Studio
 */
 


/*
[Typography]
	font-family: 'Open Sans', sans-serif;

/* =================================================================================
	General
================================================================================= */

body { 
	margin:0; 
	padding:0;
	color:#fff; 
	font-size:14px;
	font-family: 'Open Sans', sans-serif;	
	color: #999;
}

.clear {
	clear:both;
}

:Focus {	
	outline: none;
}

img { 
	border:0;
	max-width: 100%;
}

.top-margin {
	margin-top:20px!important;
}
.bottom-margin-zero {
	margin-bottom:-120px!important;
}
.relative {
	position:relative;
}
.small-padding {
	padding: 40px 0;
}
.medium-padding {
	padding: 60px 0;
}
.large-padding {
	padding:80px 0;
}
.white-container {
	background-color: #fff;
	color: #000;
}
.text-right {
	text-align: right;
}
.center {
	margin:auto!important;
	float: none!important;
}
hr {
	border: 0;
	border-top: 1px #eee solid;
	width: 100%;
}
.padding-top-zero {
	padding-top: 0;
}
.padding-bottom-zero {
	padding-bottom: 0;
}
/* =================================================================================
	navigation
================================================================================= */
.nav-container {
	width: 100%;
	padding: 15px 0;
	background-color: rgba(255,255,255,0.95);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	position: fixed;
	top: 0;
	opacity: 0;
	z-index: 999;
	-webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}
.nav-show{
	opacity: 0.7;
}
.nav-container:hover {
	padding: 25px 0;
	background-color: #fff;
	opacity: 1;
}
.nav-container:hover a {
	color: #666;
}
.nav-container ul {
	padding:0;
	margin: 0;
	text-align: center;
}
.nav-container li {
	list-style: none;
	display: inline;
	padding:0 22px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;

}
.nav-container li a {
	color: #999;
	text-decoration: none;
	-webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}
.nav-container li a:hover {
	color: #f03535;

}
/* =================================================================================
	typography
================================================================================= */
h1,h2,h3,h4,h5,h6 {
	font-family: 'Open Sans', sans-serif;	
	font-weight:100;
}
h1 { 
	font-size:42px;
}
h2 {
	font-size:32px;
}
h3 {
	font-size:24px;
}
h4 {
	font-size:18px;
}
.lead {
	font-size: 16px;
	font-weight: 100;
	margin-top: -20px;
}
.lead:after {
	content: "::";
	font-size: 18px;
	color: #f03535;
	font-weight: 700;
	margin-right: 10px;
}
.lead-right:after {
	margin-left: 10px;
}
p {
	line-height: 31px;
	margin-top: 30px;
	color: #777;
}
/* =================================================================================
	Header
================================================================================= */
header {
	position: absolute;
}
.top-pic-body  { 	
	width:320px; 
	height:auto; 
	margin:auto; 
	margin-top:10%;
}

.top-pic {  
	width:230px;
	height:230px; 
	padding:24px;  
	margin:auto;
	border-radius:50%;
	border:1px #000 solid;
	transition:all .4s;
	text-align: center;
	overflow: hidden;
	-webkit-transition: all 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition:         all 400ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.top-pic:hover {
	background-color: rgba(255,255,255,.6);
	border: 1px #ccc solid;
}
.top-pic img { 
	border-radius:50%;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	-webkit-transition: all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition:         all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
	
}

.top-pic:hover img {	
	opacity: 0;
	-webkit-transition: all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition:         all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);

}


.top-pic .title-name { 	
	text-align:center; 
	font-size:42px; 
	font-weight:300;   
	text-transform:uppercase;  
	color:#111; 
	text-decoration: none;
	margin:auto;  
	opacity: 0;
	position:relative; 
	margin-top:60px;
	-webkit-transition: all 900ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 900ms cubic-bezier(0.86, 0, 0.07, 1);
}
.top-pic:hover .title-name {
	opacity: 1;
	margin-top:-150px;
	-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}

.top-pic .title-description { 	
	text-align:center;  
	font-size:14px; 
	text-transform:uppercase; 
	font-weight:400; 
	color:#042d49; 
	opacity: 0;
	margin-top:60px;
	-webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}

.top-pic:hover .title-description {
	opacity: 1;
	margin-top:-0px;
	-webkit-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 800ms cubic-bezier(0.86, 0, 0.07, 1);
}


/* =================================================================================
	Social icons 
================================================================================= */

.social-icon { 	
	width:32px; 
	height:32px;    
	opacity:1!important;
	border-radius: 50%;
 }
.social-icon i {	
	font-size:33px!important; 
	color:#111; 
}

.social-icon1 { 	
	float:left;
	margin-top:-150px;
	margin-left:-37px; 
}

.social-icon2 { 	
	float:left; 
	margin-top:-76px; 
	margin-left:-25px; 
}

.social-icon3 { 	
	float:left; 
	margin-top:-13px; 
	margin-left:15px; 
}

.social-icon4 { 	
	float:left; 
	margin-top:15px; 
	margin-left:43px; 
}

.social-icon5 { 	
	float:left;
	margin-top:15px; 
	margin-left:63px; 
}

.social-icon6 { 
	float:right;
	margin-top:-16px;
	margin-right:25px; 
}

.social-icon7 { 	
	float:right; 
	margin-top:-80px; 
	margin-right:-70px; 
}

.social-icon8 { 	
	float:right; 
	margin-top:-150px; 
	margin-right:-80px; 
} 


.facebook,
.twitter,
.linkedin,
.googleplus,
.github,
.vimeo,
.pinterest,
.skype {	
	transition: all 0.4s ; 
}
.facebook:hover {	
	color:#3b5998; 
}

.twitter:hover {	
	color:#2daae1; 
}

.linkedin:hover {	
	color:#0073b2; 
}

.googleplus:hover {	
	color:#f63e28; 
}

.github:hover {	
	color:#a6d785; 
}

.pinterest:hover {	
	color:#cb2027; 
}

.vimeo:hover {	
	color:#2daae1; 
}

.skype:hover {	
	color:#00aff0; 
}

/* =================================================================================
	Lines
================================================================================= */
.line { 	
	border-left:1px #111 solid; 
	height:50px; 
	margin:auto; 
	width:0;
} 

.normal-line { 
	width:0;
	margin:auto;
	height:100px;
	border-left:1px #111 solid;
}

.long-line { 
	width:0;
	margin:auto;
	height:200px;
	border-left:1px #111 dotted;
}

/* =================================================================================
	circles
================================================================================= */
.small-circle {
	width:160px;
	height:160px;
	border-radius:50%;
	border:1px #ddd solid;
	margin:40px auto;
	text-align:center;
	color:#fff;
	position:relative;
	background-color:#fff;
	overflow:hidden;
	
}
.small-circle .icon {
	font-size:54px;
	color:#f03535;
	line-height:160px!important;
	transition:all .3s;
}
.small-circle:hover {
	background-color:#f03535;
	color:#fff;
	border:1px #f03535 solid;
}
.small-circle:hover .icon {
	
	line-height:60px!important;
	font-size:42px;
	
	opacity:0;
	
}
.small-circle span {
	opacity:0;
	-webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}

.small-circle:hover span {
	opacity:1;
}
.circle-line {
	width:90%;
	right:5%;
	border-bottom:1px #666 dotted;
	margin-top:120px;
	position:absolute;
	
}

/* =================================================================================
	header background
================================================================================= */
.header-background { 
	width: 100%;
	z-index: -99;
	position: relative;
}
.header-bg {
	background-image: url(assets/contents/header-bg.jpg);
	background-size: cover;
	background-position: fixed;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
}
.header-background-pattern {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background-color: rgba(255,255,255,0.2);
	z-index:0;
}
header {
		-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.header-opacity {
	opacity: 0.2;
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}


/* =================================================================================
	facts
================================================================================= */
.facts {
	border-top: 1px #eee solid;
	border-bottom: 1px #eee solid;
	width: 100%;
	padding:60px 0;
}
/* =================================================================================
	background side
================================================================================= */
.background-side-right {
	position: absolute;
	width: 33.333%;
	height: 100%;
	background-size: cover;
	right: 0;
	top: 0;
}
.background-side1 {
	background-image: url(assets/contents/bg-side1.jpg);
	background-position: left center;
}

/* =================================================================================
	heading
================================================================================= */
.heading {
	margin: 20px auto;
	text-align: center;
	z-index: 99;
	position: relative;
}
.heading h2 {
	font-size: 32px;
	color: #000;
}
.heading .line {
	width: 30px;
	height: 3px;
	background-color: #f03535;
	margin:10px auto;
	border: 0;
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.heading .lead {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #333;
	margin-top: 10px;
}
.heading .lead:after {
	content:"";
}
.heading .icon {
	font-size: 70px;
	color: #eee;
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
section:hover .heading .icon {
	color: #f03535;
}

section:hover .heading .line {
	background-color: #ccc;
}

.white-heading h2 {
	color: #fff;
}
.white-heading .icon {
	color: #888;
}
section:hover .white-heading .icon {
	color: #fff;
}
.white-heading .lead {
	color: #ccc!important;
}
/* =================================================================================
	services
================================================================================= */
.small-icon {
	font-size: 42px;
	color: #ccc;
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.small-heading {
	font-size: 17px;
	font-weight: 600;
	color: #000;
	
	margin-bottom: -20px;
}
.row-fluid [class*="span"]:hover .small-icon{
	color:#f03535;
}

/* =================================================================================
	infographic
================================================================================= */
.infographic {
	width: 100%;
	padding: 80px 0;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(assets/contents/infographic.jpg);	
	position: relative;
}
.infographic-pattern {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(44,44,44,0.8);	
}

.infographic-line {
	border:0;
	border-right: 2px #fff dotted;
	height: 100px;
	width: 1px;
	margin:auto;
	position: relative;
}
.infographic-circle {
	width: 60px;
	height: 60px;
	margin:auto;
	background-color: #fff;
	border-radius: 50%;
	position: relative;
	z-index: 99;
	text-align:center; 
	-webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}
.infographic-circle i { 
	font-size: 32px;
	color: #f03535;
	line-height: 60px;
	text-align: center;
	-webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}
.span7:hover .infographic-circle {
	background-color:#f03535; 
}
.span7:hover .infographic-circle i {
	color:#fff;
}
.infographic .date {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	margin-top: 25px;
}
.infographic .des {
	color: #fff;
	position: relative;
}
.infographic .des h4 {
	color: #fff;
	font-weight: 600;
}
.infographic .des p {
	color: #999;
	margin-top: -20px;
}
/* =================================================================================
	skills
================================================================================= */
.skill-circle {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	margin:auto;
	border: 1px #ddd solid;
	background-color: #fff;
	text-align: center;
	overflow: hidden;
	-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.skill-circle:hover {
	border: 1px #ccc solid;
}
.skill-circle i {
	font-size: 42px;
	color: #f03535;
	line-height: 160px;
		-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.skill-circle:hover i {
	margin-top: -100px;
	opacity: 0;
}
.skill-circle .number {
	font-size: 42px;
	color: #f03535;
	line-height: 160px;
	opacity: 0;
	font-weight: 600;
			-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.skill-circle .number em {
	font-size: 14px;
	font-weight: 600;
	font-style:normal; 
}
.skill-circle:hover .number {
	opacity: 1;
	line-height:40px;
}
.skill-heading {
	text-align: center;
}
.skill-heading h4 {
	font-size: 14px;
	font-weight: 600;
}
/* =================================================================================
	portfolio
================================================================================= */
/* portfolio filtering */
.portfolio-filter {
	margin: auto;
	text-align: center;
	margin-bottom: 60px;
}
.portfolio-filter li {
	display: inline;
	list-style: none;
	margin-right: 40px;
	text-align: center;
	position: relative;
	font-weight: 400;
}
.portfolio-filter li:first-child:before {
	content: '';
}
.portfolio-filter li:before {
	content: '.';
	font-weight: 600;
	font-size: 14px;
	color: #222;
	margin-right: 20px;
	position: absolute;
	top: -2px;
	left: -25px;
}
.portfolio-filter li a {
	text-decoration: none;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size:11px; 
	 -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.portfolio-filter li a.current {
	color: #f03535;
}
/* portfolio details */
.portfolio-container {
	position: relative;
	overflow: hidden;
	width: 33.333%;
}
.portfolio-details {
	opacity: 0;
	background-color: rgba(22,22,22,0.7);
	width: 100%;
	height: 100%;
	position: absolute;
	text-align:center; 
	 -webkit-transition: all 900ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 900ms cubic-bezier(0.86, 0, 0.07, 1);
}
.portfolio-container:hover .portfolio-details {
	opacity: 1;
}
.portfolio-details h4 {

	font-size: 21px;
	color: #fff;
	margin:0;
	margin-bottom: -999px;
  -webkit-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 800ms cubic-bezier(0.86, 0, 0.07, 1);
}
.portfolio-details em {
	font-size: 12px;
	font-weight: 600;
	font-style: normal;
	color: #999;
	text-transform: uppercase;
	
}
.portfolio-details .line {
	width: 20px;
	height: 3px;
	background-color: #fff;
	margin: auto;
	border: 0;
	margin-bottom: 10px;
	margin-top: -990px;
	 -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);

}
.portfolio-container:hover .caption-details h4  {
	margin-bottom: 0;
}
.portfolio-container:hover .caption-details .line {
	margin-top: -20px;
}


/* Isotope */
.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    /* pointer-events: none; */
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* =================================================================================
	contact
================================================================================= */
.contact-circle {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	margin:auto;
	border: 1px #ddd solid;
	background-color: #fff;
	text-align: center;
	overflow: hidden;
	float: left;
	margin:20px 100px;
	-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.contact-circle:hover {
	border: 1px #ccc solid;
}
.contact-circle i {
	font-size: 42px;
	color: #f03535;
	line-height: 160px;
		-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.contact-circle:hover i {
	margin-top: -100px;
	opacity: 0;
}
.contact-circle .text {
	font-size: 14px;
	color: #f03535;
	line-height: 160px;
	opacity: 0;
	font-weight: 400;
			-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
}
.contact-circle:hover .text {
	opacity: 1;
	line-height:40px;
}

input {
	padding:7px 10px;
	border: 0;
	border-bottom: 1px #eee solid;
	-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  	transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
    font-family: 'Open Sans', sans-serif;	
   	width:45%;
   	margin:5px 10px;
   	font-size: 13px;
   	color: #777;

}
input:focus,
textarea:focus {
	border-bottom: 1px #f03535 solid;
}
textarea {
	padding:7px 10px;
	border: 0;
	border-bottom: 1px #eee solid;
	-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  	transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1);
    font-family: 'Open Sans', sans-serif;	
   	width:95%;
   	max-width: 95%;
   	min-width: 95%;
   	margin:20px 10px;
   	font-size: 13px;
   	color: #777;
}

input[type="submit"] {
	width: 120px;
	padding:10px 15px;
	background-color: #444;
	color: #fff;
	-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: pointer;
}
input[type="submit"]:hover {
	background-color:#f03535;
}

fieldset {
	border: 0;
}


/* =================================================================================
	footer
================================================================================= */
footer {
	padding: 60px 0;
	background-color: #232323;
	text-align: center;
}
footer i {
	color: #f03535;
	font-size: 32px;
	margin:10px;
}
footer a {
	color: #999;
	text-decoration: none;
	transition:all .3s;
}
footer a:hover {
	color: #fff;