/**
Template Name: Mike Vcard Template
Author: Themarlab

*/
/**
 * Table of Contents
 * 1.0 - Fonts
 * 2.0 - Reset css
 * 3.0 - Home
 * 4.0 - About us
 * 5.0 - Resume
 * 6.0 - Portfolio
 * 7.0 - Blog
 * 8.0 - Contact
 * 9.0 - Media Query
 */

/* ==========================================================================
   1.0 Fonts
   ========================================================================== */ 

/*Roboto font*/
@font-face {
	font-family: 'robotobold';
	src: url('../fonts/roboto/roboto-bold-webfont.eot');
	src: url('../fonts/roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
	     url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
	     url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype');
	font-weight: normal;
font-style: normal;

}
/*open sans font*/
@font-face {
	font-family: 'open_sansbold';
	src: url('../fonts/open-sans/opensans-bold-webfont.eot');
	src: url('../fonts/open-sans/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/open-sans/opensans-bold-webfont.woff2') format('woff2'),
	     url('../fonts/open-sans/opensans-bold-webfont.woff') format('woff'),
	     url('../fonts/open-sans/opensans-bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;

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

}


@font-face {
	font-family: 'open_sanslight';
	src: url('../fonts/open-sans/opensans-light-webfont.eot');
	src: url('../fonts/open-sans/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/open-sans/opensans-light-webfont.woff2') format('woff2'),
	     url('../fonts/open-sans/opensans-light-webfont.woff') format('woff'),
	     url('../fonts/open-sans/opensans-light-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;

}
/* ==========================================================================
   2.0 Reset css
   ========================================================================== */
html, body { 
	overflow-x: hidden;
	height: 100%;
	font-family: 'open_sansregular';
	line-height: 20px;
	color: #959595;
	background: #f9f9f9;
	font-size: 13px;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'robotobold';
	margin: 0px;
}
img{
	max-width: 100%;
	height: auto;
}
ul{
	padding: 0px;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	outline: 0;
}

.nav > li > a:link, .nav > li > a:active  .nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: transparent;
	outline: 0;
	-moz-outline:0; 
}
a:hover, a:focus{
	text-decoration: none;
	background-color: transparent;
	outline: 0;
	-moz-outline:0; 
}
section .section-text{
	padding: 0px 0px 70px 0px;
}

section .section-heading{
	font-family:'robotobold';
	font-size: 24px;
	color: #362f2d;
	line-height: 36px;
	letter-spacing: 10px;
	text-transform: uppercase;
	padding-bottom: 20px;
}
.row-m-bttom{
	margin-bottom: 60px;
} 
.li-margin{
	margin-bottom: 30px;
}
.pad-0{
	padding: 0px;	
}
.pad-ex{
	padding: 3px;
}
.npl{
	padding-left:0px;	
}
.npr{
	padding-right:0px;	
}


/* ==========================================================================
   3.0 Home-content Styling
   ========================================================================== */
.content{
	position:absolute;
	top: 50%;
	margin-top: -300px; 
	width: 100%; 
}
.content .side-menu{
	-webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	background: #fff;
	width: 26%;
	float: left;
}
.content .nav-tabs > li{
	float: none;
}
.content .side-menu li a{
	display: block;
	text-align: center;
	cursor: pointer;
	padding: 30px 0;
	border-bottom: 1px solid #d7d7d7;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	margin-right: 0px;
	border-radius: 0px;
	line-height: 25px;
}
.content .side-menu li:last-child a{
	border-bottom: 0px;
}
.content .side-menu li a i{
	color: #265CDC;
}
.content .side-menu li a:hover{
	color: #265CDC;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
}
.content .side-menu li a:hover > i, .content .side-menu li a:hover > span{
	color:#265CDC;
}
.content .side-menu li.active a{
	background: #265CDC;
	color: #fff;
	border: 0px;
}
.content .side-menu li.active a > i, .content .side-menu li.active a > span{
	color: #fff;
}
.content .side-menu li a i{
	font-size: 30px;
}
.content .side-menu li a span{
	color: #b7b7b7;
}
.content .main-profile{
	width: 70%;
	-webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	background: #fff;
	float: left;
	margin-left: 15px;
	text-align: center;
	padding: 30px 15px;
	height: 590px;
}
.content .main-profile .pro-img{
	height: 120px;
	width: 120px;
	border: 5px solid #ccc;
}

.content .main-profile .text-wrapper{
	padding: 15px 0;
}
.content .main-profile .sign-img{
	margin-bottom: 20px;
}
.content .main-profile .text-wrapper h3{
	font-size: 30px;
	color: #000;
}
.content .main-profile .text-wrapper h4{
	font-size: 18px;
	color: #898989;
	font-family: 'open_sansregular';
	padding: 10px 0 25px 0;
}
.content .main-profile .text-wrapper a{
	display: block;
	width: 120px;
	padding:5px 0; 
	color: #fff;
	background: #265CDC;
	margin: 0 auto; 
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.content .main-profile .text-wrapper a:hover{
	background:#0A3AAD ;
}
.content .main-profile .social-wrapper{
	margin-top: 30px;
}
.content .main-profile .social-wrapper a{
	font-size: 18px;
	color:#265CDC;
	margin:0 10px;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s; 
}
.content .main-profile .social-wrapper a:hover{
	color: #0A3AAD; 
}

/* ==========================================================================
    4.0 About us Styling
	========================================================================== */
.details-wrapper .tab-pane{
	padding: 30px 25px;
	background: #fff;
	-webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
	height: 590px;
	overflow:auto;
}
.details-wrapper .tab-pane .row-heading{
	font-size: 20px;
	color: #898989;
	font-family: 'open_sansregular';
	padding-bottom: 10px;
	border-bottom: 1px solid #e1e1e1;
	margin: 5px 0 30px 0;
}
.details-wrapper .tab-pane  .number{
	font-size: 36px;
	color: #265CDC;
	font-family: 'open_sansbold';
	line-height: 30px;
}
.about-us .abt-focus{
	margin-top: 20px;
}
.about-us .abt-focus li{
	margin-bottom: 5px;
}
.about-us .abt-focus .st-line{
	width: 120px;
	display: inline-block;
	color: #000;
}
.about-us .service-list li i{
	font-size: 30px;
	color: #000;
	padding-bottom: 15px;
}
.about-us .service-list li h4{
	font-size: 18px;
	color: #000;
	font-family: 'open_sanslight';
	padding-bottom: 15px;
}
.about-us .fact-list li i{
	font-size:30px;
	color: #000;
}
.about-us .fact-list li .text-count{
	margin-left: 50px;
}
.about-us .counter{
	font-size: 24px;
	color: #000;
}
.about-us .testimonial-list img{
	height: 60px;
	width: 60px;
	float: left;
}
.about-us .testimonial-list .carousel-indicators{
	bottom: -25px;
	left: 0px;
	width: auto;
	margin-left: 0px;
}
.about-us .testimonial-list .carousel-indicators li{
	background:#b7b7b7;
	border-radius: 0px;
	border-color:none;
	height: 4px;
	width: 20px;
	border-bottom: 0px;

}
.about-us .testimonial-list .carousel-indicators li.active{
	height: 4px;
	width: 20px;
	background: #265CDC;
	margin: 1px;
}
.about-us .testimonial-list .name-wrapper{
	font-size: 18px;
	color: #000;
	padding-bottom: 15px;
	margin-left: 80px;
}
.about-us .testimonial-list p{
	padding-right: 80px;
	padding-top: 10px;
}
.about-us .testimonial-list .name-wrapper span{
	font-size: 14px;
	font-family: 'open_sansregular';
	color: #b7b7b7;
}

/* ==========================================================================
    5.0 Resume Styling
	========================================================================== */
.resume .event-list .event{
	position: relative;
	padding: 0 0 20px 25px;
}
.resume .event-list .event:last-child{
	padding-bottom: 0px;
}
.resume .event-list .event:before{
	content: "";
	position: absolute;
	top: 5px;
	bottom: -10px;
	left: 4px;
	width: 2px;
	background: #c2c2c2;
} 
.resume .event-list .event:after{
	content: "";
	position: absolute;
	top: 5px;
	left: 0px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #265CDC;
}
.resume .event-list .event .date{
	font-family: 'open_sanslight';
	width: 160px;
	font-size: 14px;
	margin-bottom: 5px;
	padding: 5px 0;
}
.resume .event-list .event h5{
	font-size: 16px;
	color: #000;
	font-family: 'open_sansregular';
}
.resume .event-list .event h6{
	font-size: 14px;
	color: #000;
	padding: 5px 0;
	font-family: 'open_sanslight';
}
.resume .skill-list li{
	position: relative;
	margin-bottom: 30px;
}
.resume .skill-list li h4{
	font-size: 16px;
	color: #000;
	font-family: 'open_sanslight';
}
.resume .skill-list li .percent{
	position: absolute;
	right: 0;
	top: 0;
}
.resume .skill-list li .skill-bar{
	padding: 2px;
	border: 1px solid #e1e1e1;
	margin-top: 8px;
}
.resume .skill-list li .skill-bar .inner-prcnt{
	background: #000;
	height: 5px;
}

/* ==========================================================================
   6.0 Portfolio Styling
   ========================================================================== */
.portfolio .portfolio-wrapper{
	position: relative;
}
.portfolio .filters-menu{
	margin-bottom: 40px;
	text-align: center;;
}
.portfolio .filters-menu li{
	display: inline-block;
}
.portfolio .filters-menu li a{
	position: relative;
	color: #b7b7b7;
	font-family: 'open_sansbold';
	padding: 5px 10px;
}
.portfolio .filters-menu li a.active{
	border-bottom:3px solid #000;
	color: #000!important;
}
.portfolio .filters-menu li a:hover{
	color: #000;
}
.portfolio .filters-menu li > a::after {
	content: "";
	display: block;
	height: 3px;
	position: absolute;
	top: 100%;
	width: 100%;
	left: 50%;
	transform: translate(-50%);
	background-image: linear-gradient(to right, transparent 50.3%, #000 50.3%);
	transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.portfolio .filters-menu li > a:hover::after {
    background-position: -100% 0;
}

.portfolio .portfolio-wrapper .portfolio-item{
	position:relative;
	float: left;
	overflow: hidden;
	height: 180px; 
	width:30.333%;
	margin-right: 10px;
	margin-bottom: 10px;

}
.portfolio .portfolio-wrapper .portfolio-item .link-box{
	position: absolute;
	overflow: hidden;
	width: 100%;
	top: 0px;
}

.portfolio .portfolio-wrapper .portfolio-item .link-box img{
	width: 100%;
}

.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover{
	background: rgba(38,92,220,0.9);
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all ease .5s;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
}

.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover:hover{
	opacity: 1;
}
.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover .portfolio-hover-content{
	padding: 15px;
	color: #fff;
	font-family: "open_sansbold";
}
.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover .portfolio-hover-content h4{
	font-size: 20px;
}
.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover .portfolio-hover-content p{
	margin: 0px !important;
	color: #fff;
	text-transform:uppercase;
	font-family: "open_sanslight";
	font-size: 12px;
}
.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover .portfolio-hover-content .extra-ink{
	text-align: center;
	font-size: 18px;
	position: absolute;
	top: 46%;
	width: 100%;
	left: 0%;
}
.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover .portfolio-hover-content .extra-ink i{
	background: transparent;
	border: 1px solid #fff;
	padding: 15px;
	border-radius: 50px;
	margin-right: 10px;
}
.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover .portfolio-hover-content .extra-ink i:hover{
	background: #fff;
	color: #265CDC;
}

#container .mix{
	display: none;
} 
/* ==========================================================================
   7.0 Blog
   ========================================================================== */
.blog .blog-list li{
	margin-bottom: 60px;
}
.blog .blog-list li h4{
	font-size: 20px;
	color: #000;
	padding: 30px 0 8px 0;
}
.blog .blog-list li a{
	display: block;
	padding: 5px 10px;
	border:1px solid #265CDC;
	width: 90px;
	color: #265CDC;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.blog .blog-list li a:hover{
	color: #fff;
	background: #265CDC;
}
/* ==========================================================================
   8.0 Contact Styling
   ========================================================================== */
.contact .contact-list li i{
	font-size: 30px;
	color: #265CDC;
}
.contact .contact-list li h5{
	color: #000;
	font-family: 'open_sanslight';
	padding: 10px 0 5px 0;
}
.contact .custom-form button{
	background: #265CDC;
	font-size: 14px;
	color: #fff;
	width: 100px;
	padding:10px; 
	border:0px;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;

}
.contact .custom-form button:hover{
	background: #0A3AAD;
}
.contact .custom-form .form-group{
	margin-bottom: 40px;
}
.contact .custom-form span{
	font-size: 16px;
	font-family: 'open_sansregular';
	color: #898989;
}
.contact .custom-form .form-control{
	border-radius: 0px;
	border:none;
	margin-top: 10px;
	background: #fafafa;
	height: 50px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.0);

} 
.contact .custom-form textarea.form-control{
	height: 100px;
}

/* ==========================================================================
	preloader
   ========================================================================== */
#preloader {
	height: 100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:10000; /* makes sure it stays on top */
}
#status  {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(../image/loading.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;

}


/* ==========================================================================
   9.0 Media query
   ========================================================================== */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.portfolio .portfolio-wrapper .portfolio-item{
		height: 210px;
	}
}
@media only screen and (min-width: 992px) {
	.content .side-menu{
		position: relative;
		right: 74%;
	}
	.content .main-profile{
		position: relative;
		left: 25%;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.res-m-bttm{
		margin-bottom: 35px;
	}
	.res-m-top{
		margin-top: 35px;
	}
	.pad-l-0{
		padding-left: 0px;
	}
	.content .side-menu{
		width: 100%;
		height: auto;
	}
	.content .main-profile{
		width: 100%;
		height: auto;
		margin-left: 0px;
		margin-bottom: 30px;
	}
	.content .side-menu li{
		display: inline-block;
		width:19.6% 
	}
	.content .side-menu li a{
		border-bottom: 0px;
	}
	.content{
		top: 3%;
		margin-top: 0;
	}
	

}

@media only screen and (min-width: 768px) and (max-width : 800px){
	.container{
		width: 700px;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
	body{
		font-size: 12px;
	}
	.container{
		margin:0 25px;
	}
	
	.portfolio .portfolio-wrapper .portfolio-item{
		height: 200px;
		width: 45%;
	}
	.content .side-menu{
		width: 100%;
		height: auto;
	}
	.content .side-menu li{
		width:19.4%; 
	}
	.content .side-menu li a{
		padding: 10px 0px;
	}

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	.container{
		margin:0 30px;
	}
	.portfolio .portfolio-wrapper .portfolio-item{
		width: 100%;
		height: 210px;
	}
	.content .side-menu li{
		width: 19%;
	}
	.content .side-menu li a i {
		font-size: 13px;
	}
	.content .side-menu li a span {
		font-size: 8px;
	}
	.portfolio .portfolio-wrapper .portfolio-item .link-box .portfolio-hover
	.portfolio-hover-content .extra-ink{
		top: 35%;
	}
	.portfolio .filters-menu li a {
		padding: 5px 5px;
	    font-size: 11px;
	}
	.about-us .abt-focus .st-line{
		width: 100%;
	}
}