/* --------------------------------- */
/* Css Styles                        */
/*---------------------------------- */

/**
	Picard - vCard Html Template
	Author : olkera
	Copyright 2015

/* Table of Content
==================================================
	
	1. Body and Core Css
	2. Profile
	3. Top Menu
	4. Content
	5. About Page
	6. Resume Page
	7. Portfolio Page
	8. Blog Posts Page
	9. Contact Page
	10. Single Blog Page
	11. Responsive
	


/*------------------------ 1 Body and Core Css ------------------------*/		

html {
  position: relative;
  min-height: 100%;
}

body{
	font-family: 'Lato', sans-serif;
	background:url(../images/bg.png) center fixed !important;
}

a{
    text-decoration:none !important;
}

a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

p{
	font-size:14px;
}

*:focus {
    outline: 0;
}

#wrapper{
    margin: 60px 0;
}

/*preloader*/

#preloader {
    background-color:#0b1623;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%; 
    z-index: 99;
    display:table;
}

.spinner {
    margin: 0 auto;
    width: 50px;
    height: 30px;
    text-align: center;
    font-size: 10px;
    display:table-cell;
    vertical-align:middle;
} 

.spinner > div {
    background-color: #ffffff;
    height: 60px;
    width: 6px;
    display: inline-block; 
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/*------------------------ 2 Profile ------------------------*/		


.profile-image{
	width:100%;
	-webkit-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	-moz-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
}

.profile-image img{
	width:100%;
}

.profile-info{
	text-align:center;
	background:#FFFFFF;
	-webkit-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	-moz-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
}

.profile-info h1{
	font-size:20px;
	font-weight:900;
}

.name-job{
	padding:23px 0;
	border-bottom:1px dashed #cccccc;
}

.job{
	color:#c1c1c1;
	font-weight:400;
	line-height: 30px;
	font-size:16px;
}

.profile-info .social-icons{
	padding:20px;
}


.social-icons a{
	font-size: 12px;
    color: #2A2A2A;
    border: solid 1px #2A2A2A;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    width: 34px;
    display: inline-block;
    padding: 8px 0;
    margin-right: 5px;
	text-align:center;
}

.social-icons a:hover{
	transition:all ease 0.3s;
}

/*------------------------ 3 Top Menu ------------------------*/	

ul.top-menu{
	width:100%;
	background:#fff;	
	display: inline-block;
	-webkit-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	-moz-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
}

ul.top-menu li{
	list-style:none;
	float:left;
	width:20%;
	text-align:center;
	font-size:16px;
	border-right:1px dashed #cccccc;
}

ul.top-menu li:last-child{
	border-right:0;
}

ul.top-menu li a{
	color:#000;
	padding:45px 0 40px 0;	
	display: inline-block;	
	line-height: 30px;
	display: block;
}

ul.top-menu li a:hover{
	transition:all ease 0.2s;
}

ul.top-menu li .selected{
}

ul.top-menu li i{
	font-size:30px;
}

/*------------------------ 4 Content ------------------------*/	

.content{
	background:#fff; 
	margin-top:30px;
	-webkit-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	-moz-box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
	box-shadow: -2px -1px 88px 0px rgba(0,0,0,0.17);
}

.page-title{
	border-bottom: 1px dashed #cccccc;	
	padding:30px;
}

.page-title h2{
	font-size:20px;
	font-weight:bold;
	display:inline-block;
}

.page{
	padding-top:30px;
	padding-bottom: 90px;
	display: inline-block;
	min-height: 670px;
}

.section-title{
	font-size:18px;
	font-weight:bold;
	margin-bottom:30px;
}

.footer{
	bottom: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 25px 0;
    left: 0;
	border-top: 1px dashed #cccccc;
}

.footer p {
	color:#b4b4b4;
	font-size:13px;
}

/*------------------------ 5 About Page ------------------------*/	


.page ul.info-list{
	
}

.page ul.info-list li{
	list-style:none;
	font-size:14px;
	line-height: 35px;
}

.page ul.info-list li span{
	color:#949494;
}

ul.skill-list h3 {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    color: #000;
	font-weight:bold;
}

ul.skill-list li {
	list-style:none;
}

.progress{
	margin: 15px 0;
	display: block;
    height: 6px;    
    position: relative;
    width: 100%;
    overflow: visible;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    background: #ffffff;
	box-shadow:0;
}

.progress .percentage {
    border-radius: 50px 0 0 50px;
    -moz-border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px 0 0 50px;
    -ms-border-radius: 50px 0 0 50px;
    -o-border-radius: 50px 0 0 50px;
    bottom: 0;
    position: absolute;
    top: 0;
}

.about-text{
	margin-top:60px;
}

.about-text p{
	color:#949494;
	line-height:24px;
	font-size:14px;
}

.services {
    margin-top: 60px;
	display: inline-block;
}

.services .service i{
	width: 55px;
    height: 55px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
    padding-top: 18px;
    float: left;
	color:#fff;
	font-size:20px;
	margin-right: 10px;
}

.services .service span{
    padding-top: 6px;
    display: inline-block;
    line-height: 20px;	
	font-size:16px;
}

.services .service p{
	font-size:14px;
	color:#949494;
}

.services .service{
	margin-bottom:30px;
}



/*------------------------ Resume Page ------------------------*/	

.resume-education{
	margin-bottom:30px;
}

.rounded-icon i{
	width:55px;
	text-align:center;
	padding:20px 0;
	font-size:15px;
	color:#fff;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

.resume-out{
	padding-left: 25px;
}

.resume-info{
	border-left:2px solid #E5E5E5;
	padding: 0 0 40px 30px;
}

.info-title{
    font-weight: 600;
	font-size:16px;
}

.info-title::after {
    content: '';
    width: 10px;
    height: 10px;
    float: left;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    margin: 0px 9px 0 -36px;
}

.info-date{
	font-size: 14px;
    padding: 6px 0;
    display: block;
}

.resume-info p{
	color: #A8A8A8;
	font-weight: 400;
	font-size:14px;
	line-height:24px;
}

.resume-info:first-child {
    padding-top:50px;
}

.resume-info:last-child{
    border: 0;
}

.resume-info:last-child .info-title:after{
    margin: 0px 9px 0 -34px;
}


/*------------------------ 7 Portfolio Page ------------------------*/

.portfolio_filter li{
	float:left;
	list-style:none;
	cursor:pointer;
	font-size:14px;
	margin-right:20px;
	color:#c1c1c1;
}

.portfolio_filter li:last-child{
	margin-right:0px;
}    

.portfolio_items .single_item{
	margin-bottom:30px;
}

.portfolio_items .single_item img{ 
	width:100%;
}



/*------------------------ 8 Blog Posts Page ------------------------*/

.blog-post .post-image img{
	 width:100%;
}

.blog-post .post-title h1{
	font-size:20px;
	line-height:24px;
	font-weight:bold;
	margin-top:24px;
}

.blog-post .post-info{
	font-size:14px;
	line-height:24px;
	font-weight:600;
	padding:6px 0;
}

.blog-post p{
	font-size:14px;
	line-height:24px;
	color:#a8a8a8;
	font-weight:400;
}

.blog-post .but-big{
	margin:30px 0 60px;
}

.but-big{
	color:#fff;
	font-size:13px;
	font-weight:bold;
	padding:12px 25px;
	display: inline-block;
	border:0;
}

.but-big:hover{
	color:#fff;
}

.but-big:focus{
	color:#fff;
}


/*------------------------ 9 Contact Page ------------------------*/

.form-inp{
	width:100%;
	height:45px;
	border:solid 1px #dfdfdf;
	font-size:13px;
	padding-left:10px;
	margin-bottom:15px;
}

.contact-form textarea{
	width:100%;
	border:solid 1px #dfdfdf;
	font-size:13px;
	padding:10px 0 0 10px;
	margin-bottom:15px;
}

.contact-info .social-icons{
	padding-top: 15px;
}

#map{
	width: 100%;
    height: 350px;
    margin-top: 50px;
	display:inline-block;
}

/*------------------------ 10 Single Blog Page ------------------------*/

.post-comments{
	margin:50px 0;
}

.post-comments .comments li{
	border-bottom: 1px dashed #cccccc;
	list-style:none;
	padding: 25px 0;
}

.post-comments .comments li:first-child{
	border-top: 1px dashed #cccccc;
}	

.user-img{
	width:84px;
	height:84px;
	float:left;
}

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

.comment-content{
	margin-left:95px;
}

.comment-content .comment-info .user a.user-name{
	font-size:16px;
	color:#000000;
	font-weight:bold;
}

.comment-content .comment-info .user a.reply{
	float: right;
    font-size: 13px;
}

.comment-content .comment-info .date{
	line-height: 14px;
}

.comment-content .comment-info .date a{
	font-size:12px;
}

.comment-content .comment-text{
	font-size: 14px;
    line-height: 22px;
    color: #a8a8a8;
    font-weight: 400;
}

.blog-msg{
	width:100%;
	height:45px;
	border:solid 1px #dfdfdf;
	font-size:13px;
	padding-left:10px;
	margin-bottom:30px;
}

.write-message textarea{
	width: 100%;
    border: solid 1px #dfdfdf;
    font-size: 13px;
    padding: 10px 0 0 10px;
    margin-bottom: 15px;
}


@media screen and (min-width: 479px) {
	
	.comment-reply{
		padding-left:30px !important;
	}
	
}


/*------------------------ Responsive ------------------------*/	


/*Max Width 991px */

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

	.profile{
		margin-bottom: 30px;
	}
	
	.my-skills {
		margin-top:30px;	
	}
	
	.contact-info{
		margin-top: 30px;
	}

}


/*Max Width 767px */

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

	.profile{
		margin-bottom: 30px;
	}
	
	.my-skills {
		margin-top:30px;	
	}
	
	.services .service span{
		width:100%;
		text-align: center;
	}
	
	.services .service{
		text-align:center;
	}
	
	.services .service i{
		float:none;
	}
}


@media only screen and (max-width:479px) {
	
	ul.top-menu li i {
   		font-size: 23px;
	}
	
	ul.top-menu li a {
		padding: 27px 0 23px 0;
	}
	
	#wrapper {
  	    margin: 15px 0;
	}
	
	.page-title {
		border-bottom: 1px dashed #cccccc;
		padding: 30px;
		display: inline-block;
		text-align: center;
		width: 100%;
	}
	
	.portfolio_filter li {
		float: none;
		text-align: center;
		width: 100%;
	}
	
	.portfolio_filter{
		width: 100%;
		margin-top: 15px;
		line-height: 26px;
	}
	
	.user-img{ 
		display:none; 
	}
	
	.comment-content {
   		margin-left: 0px;
	}
	
}