@import url(../font-awesome.css);
@import url(../common.css);
@import url(../mCustomScrollbar.css);
@import url(tabs.css);

body{
	background: url("../../images/home-pattern.png") repeat scroll left top;
	font: normal 14px helvetica, arial, sans-serif;
}

.wrapper{
	width: 77.86%;
	margin: 0 auto 50px;
	max-width: 1024px;
}

.logoBlock {
	margin: 10px 0;
	text-align: center;
}

.logoLink {
	text-align: center;
	display: inline-block;
}

.logoImage {
	text-align: center;
	margin: 0 auto;
}

/* Skills Block */
	.horizGraph {
		position: relative;
	}
	.horizontal {
		padding-bottom: 15px;
	}
	.horizontal li {
		border:1px solid #ccc;
		border-left: 0;
		height: 30px;
		line-height: 30px;
		width: 100%;
		margin-bottom: 15px;
		position: relative;
	}

	.horizontal li .text {
		position: relative;
		z-index: 3;
		color: #fff;
		padding-left: 10px;
	}

	.horizontal li .knownWell, .horizontal li .known {
		height: 30px;
		line-height: 30px;
		position: absolute;
		top: 0;
		left: 0;
		text-align: right;
	}
	.horizontal li .knownWell {
		width: 98%;
		background: #586a36;
		z-index: 1;
	}
	.horizontal li .known {
		width: 95%;
		background: rgba(88,106,54,0.5);
		z-index: 2;
		color: #fff;
	}
	.infoGraph li span.knownWell {
		background: #586a36;
	}

	.infoGraph li span.known {
		background: rgba(88,106,54,0.5);
	}
	.horizontal li.test1 .knownWell {
		width: 70%;
	}
	.horizontal li.test1 .known {
		width: 80%;
	}
	.horizontal li.test2 .knownWell {
		width: 50%;
	}
	.horizontal li.test2 .known {
		width: 55%;
	}
	.horizontal li.test2 .knownWell {
		width: 50%;
	}
	.horizontal li.test2 .known {
		width: 55%;
	}
	.horizontal li.test3 .knownWell {
		width: 90%;
	}
	.horizontal li.test3 .known {
		width: 95%;
	}
	.horzLine {
		border-bottom: 1px solid #000;
		width: 100%;
		text-align: right;
		position:absolute;
		bottom: 0;
		left: 0;
		height: 100%;
	}
	.horzLine li {
		width: 10%;
		float: left;
		position: relative;
		height: 100%;
	}
	.horzLine li span {
		border-right: 1px dotted #006c7c;
		display: inline-block;
		height: 100%;
		vertical-align: bottom;
		position:relative;
		font-size: 10px;
		padding: 3px 3px 0 0;
		z-index: 10;
	}
	.horzLine li span label {
		position: absolute;
		bottom: -10px;
		left: -18px;
		width: 18px;
	}
	.horzLine li:before, .horzLine li:after {
		content:"";
		position: absolute;
		width: 2px;
		margin-left: -1px;
		color: #000;
		border-right: 1px solid #000;
	}
	.horzLine li:before {
		height: 20px;
		bottom: -10px;
		right: 0px;
	}
	.horzLine li:after {
		height: 10px;
		bottom: 0;
		left: 50%;
	}



.downloadBlock {
	padding: 20px;
    background: #d5e0c0;
	margin: 20px -15px;
    border-top: 1px solid #2B3F04;
    border-bottom: 1px solid #2B3F04;
}

.downloadBlock li {
	margin-bottom: 8px;
}

.downloadBlock li label {
	font-weight: bold;
}

.downloadBlock li a {
	text-decoration: underline;
	color: #2B3F04;
}

.listContent {
	margin-bottom: 16px;
}

.iconInfoBlock a {
	text-decoration: underline;
    color: #2B3F04;
}

.iconInfoBlock .iconBlock {
	display: inline-block;
	vertical-align: top;
	width: 24px;
}

.iconInfoBlock .iconBlock i {
	font-size: 24px;
}

.iconInfoBlock .infoBlock {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 50px);
	padding-left: 4px;
}

.iconInfoBlock label {
	font-weight: bold;
}

.iconInfoBlock h5 {
	font-size: 11px;
	font-style: italic;
	margin: 0;
	color: #A08585;
}

.block {
	margin-bottom: 32px;
}

.block ul {
	margin-top: 8px;
}

.block .title {
	font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    border-bottom: 1px solid #2B3F04;
    padding-bottom: 8px;
}

/* Profile block */
.personalBlock .mobileBlock, .personalBlock .emailBlock, .personalBlock .webBlock {
	display: inline-block;
}

.personalBlock .mobileBlock {
	width: 150px;
}

.personalBlock .webBlock {
	width: 180px;
}

.personalBlock .emailBlock {
	width: 205px;
}

/* Social Block */

.socialBlock .listContent, .otherBlock .listContent {
	width: 24%;
	display: inline-block;
	white-space: nowrap;
}

.hobbies a {
	text-decoration: underline;
	color: #2B3F04;
}

/* Experience Block */
.experience li {
	border-bottom: 1px dotted #2B3F04;
	padding-bottom: 8px;
}
.experience li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.experience h4 {
	font-size: 14px;
	padding-bottom: 8px;
}
.experience h5 {
	font-size: 12px;
	margin-bottom: 4px;
}
.experience p {
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 8px;
}
.experience .workProcess {
	margin-top: 8px;
}
.resp-vtabs .resp-tab-content {
	height:calc(100vh - 250px);
}
.resp-vtabs .resp-tab-content .content {
	height: 100%;
}
.mCSB_container {
    padding: 0 15px;
}
.aboutBlock, .skillsBlock, .experienceBlock, .educationBlock, .moreBlock {
	padding: 15px 0;
	margin: 15px 0;
}
.skillsBlock .horzLine {
	margin: 0 15px;
	width: calc(100% - 30px);
}
.horizontal li.html5 .knownWell {
	width: 80%;
}
.horizontal li.html5 .known {
	width: 90%;
}
.horizontal li.css3 .knownWell {
	width: 90%;
}
.horizontal li.css3 .known {
	width: 100%;
}
.horizontal li.photoshop .knownWell {
	width: 70%;
}
.horizontal li.photoshop .known {
	width: 80%;
}
.horizontal li.scss .knownWell {
	width: 90%;
}
.horizontal li.scss .known {
	width: 100%;
}
.horizontal li.emmet .knownWell {
	width: 80%;
}
.horizontal li.emmet .known {
	width: 100%;
}
.horizontal li.purecss .knownWell {
	width: 80%;
}
.horizontal li.purecss .known {
	width: 100%;
}
.horizontal li.postcss .knownWell {
	width: 75%;
}
.horizontal li.postcss .known {
	width: 85%;
}
.horizontal li.jquery .knownWell {
	width: 60%;
}
.horizontal li.jquery .known {
	width: 70%;
}
.horizontal li.javascript .knownWell {
	width: 40%;
}
.horizontal li.javascript .known {
	width: 60%;
}
.horizontal li.responsive .knownWell {
	width: 90%;
}
.horizontal li.responsive .known {
	width: 100%;
}
.horizontal li.bootstrap .knownWell {
	width: 85%;
}
.horizontal li.bootstrap .known {
	width: 95%;
}
.horizontal li.foundation .knownWell {
	width: 70%;
}
.horizontal li.foundation .known {
	width: 80%;
}
.horizontal li.gumby .knownWell {
	width: 60%;
}
.horizontal li.gumby .known {
	width: 70%;
}
.horizontal li.angular .knownWell {
	width: 50%;
}
.horizontal li.angular .known {
	width: 70%;
}
.horizontal li.react .knownWell {
	width: 60%;
}
.horizontal li.react .known {
	width: 80%;
}
.horizontal li.dolphin .knownWell {
	width: 60%;
}
.horizontal li.dolphin .known {
	width: 80%;
}
.horizontal li.wordpress .knownWell {
	width: 80%;
}
.horizontal li.wordpress .known {
	width: 90%;
}
.horizontal li.phpmotion .knownWell {
	width: 80%;
}
.horizontal li.phpmotion .known {
	width: 100%;
}
.horizontal li.magento .knownWell {
	width: 70%;
}
.horizontal li.magento .known {
	width: 80%;
}
.horizontal li.oscommerce .knownWell {
	width: 50%;
}
.horizontal li.oscommerce .known {
	width: 70%;
}
.horizontal li.joomla .knownWell {
	width: 30%;
}
.horizontal li.joomla .known {
	width: 50%;
}
.horizontal li.codeignitor .knownWell {
	width: 30%;
}
.horizontal li.codeignitor .known {
	width: 50%;
}