body
{
	font-size: 1em;
	text-align: center;
	margin: 0;
	padding: 0;
	background-position: top left;
	background-repeat: no-repeat;
	font-family: Roboto, "wf_SegoeUILight", Tahoma;
}

@font-face{font-family: 'wf_SegoeUILight';
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot');
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'),
		url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'),
		url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'),
		url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('.svg');
    font-weight: normal;
    font-style: normal;
}

h1
{
	font-family: "Arial";
	font-weight: normal;
}


#ie {font-size: 0.85em;}

.resume {margin: 7% auto;}

h3
{
	padding-top: 0.5em;
	margin-bottom: 0;
}

.resume-select
{
	position: absolute;
	right: 0;
	top: 2em;
	width: 6em;
	text-align: left;
	line-height: 1.5em;
	padding: 1em 0 1em 1em;
    border-bottom-left-radius: 0.5em;
    border-top-left-radius: 0.5em;
}

.resume-select a, .tel, .email
{
	text-decoration: none;
	color: #666;
	padding-left: 26px;
	background-image: url('img/png/icons.png');
	background-repeat:  no-repeat;
}

.resume-select a:hover {color: #4b4;}

#select-graph a {background-position: 0 3px;}
#select-rus a {background-position: 0 -20px;}
#select-eng a {background-position: 0 -40px;}

.resume-select span {border-bottom: dashed 1px;}

.tel {background-position: 0 -79px;}
.email {background-position: 0 -58px;}

.tel,
#an,
#pm,
#ux,
#qa
{
	/* white-space: nowrap; */
}

.line
{
	width: calc(90% - 6em);
	max-width: 654px;
	margin: 0 auto;
	text-align: left;
	padding: 1em 3em 2em;
}

li
{
	list-style: circle;
	margin-bottom: 1em;
}

#ie .line
{
	width: 90%;
}

.first-brake
{
	padding: 0.5em;
	display: inline;
}

.brake {padding: 2em;}

#graph .line,  #graph #general div, #graph #last div
{
	text-align: center;
	margin: 0 auto;
}

p,
ul
{
	padding-top: 0.5em;
    padding-bottom: 0.7em;
    margin: 0;
}

#graph #general, #graph #last
{
	font-size: 2em;
	width: 26em;
}

#graph #last {padding: 2em 0;}

#graph #general
{
	padding: 2.5em 0 0;
	margin-bottom: 1.5em;
	background: url('img/png/frame.png') center 40px no-repeat;
}

#ie #graph #general
{
	margin-bottom: 4em;
	height: 12em;
}

.pointing-hand
{
	width: 95px;
	height: 50px;
	background-image: url('img/png/pointing-hand.png');
	position: relative;
}

.pointing-hand#left
{
	left: -7em;
	top: 2.1em;
	background-position: -95px 0;
}

.pointing-hand#right
{
	right: -7em;
	top: -2.1em;
	background-position: 0 0;
}

#ie .pointing-hand#left
{
	left: -8em;
}

#ie .pointing-hand#right
{
	right: -8em;
}

#contact {width: 10em;}

#general img, #education img
{
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}


#rus #positions, #eng #positions
{
	margin: 1em 0;
    font-size: 1.5em;
}

#graph #positions
{
	display: block;
}

#an {color: #c00;}
#pm {color: #77f;}
#ux {color: #4b4;}
#qa {color: #ea2;}

#skills,
#education
{
	background: #eee;
	-moz-border-radius: 2em;  
	-webkit-border-radius: 2em;  
}

#adobe,
#xara,
#sketch,
#vmware,
#msoffice,
#gwt,
#sql,
#iis,
#win,
#linux,
#confluence,
#tfs,
#git,
#figma,
#apple,
#axure,
#vscode
{
	padding-left: 20px;
	margin-left: 3px;
	background-position: 0 2px;
	background-repeat: no-repeat;
}

#xara {background-image: url('img/svg/xara.svg');}
#adobe {background-image: url('img/svg/adobe.svg');}
#sketch {background-image: url('img/svg/sketch.svg');}
#vmware {background-image: url('img/svg/vmware.svg');}
#msoffice {background-image: url('img/png/msoffice-small.png');}
#gwt {background-image: url('img/png/gwt-small.png');}
#sql {background-image: url('img/png/sql-small.png');}
#iis {background-image: url('img/png/iis-small.png');}
#win {background-image: url('img/png/win-small.png');}
#linux {background-image: url('img/png/linux-small.png');}
#confluence {background-image: url('img/svg/confluence.svg');}
#tfs {background-image: url('img/svg/tfs.svg');}
#git {background-image: url('img/svg/git.svg');}
#figma {background-image: url('img/svg/figma.svg');}
#apple {background-image: url('img/svg/apple.svg');}
#axure {background-image: url('img/svg/axure.svg');}
#vscode {background-image: url('img/svg/vscode.svg');}

#skills img[src*="svg"]
{
    width: 6em;
    padding: 0.5em 1em;
    vertical-align: super;
}

#education span
{
	color: #aaa;
	padding-top: -1em;
}

#education a {color: #22a;}

#education span
{
	display: block;
}

.job
{
	margin-bottom: 3em;
}

.job div {
	margin-bottom: 0.5em;
	color: #888;
}

/*#other ul{margin-top: 0em;}*/
.quote {font-style: italic;}
.important {font-weight: bold;}

#social
{
	max-width: 22em;
	margin: -2.5em auto 4em;
}

#social a
{
    font-family: 'Socicon', Roboto !important;
    font-size: 1.5em;
    margin: 0.1em;
    padding: 0.5em;
	text-decoration: none;
    display: inline-block;
	border-radius: 1em;
}

#social a:hover { background-color: #ded; }

a i {cursor: pointer;}

img {border: 0;}

* html .png
{
	width: expression(this.firstChild.width);
	filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.firstChild.src+"', sizingMethod='image')");
	background: expression("transparent url("+this.firstChild.src.replace(".png", ".gif")+") no-repeat");
	backg/round: none !important;
}

* html .png img {behavior: expression(this.style.visibility="hidden");}


#octopus
{
	padding: 0 !important;
	max-width: 800px;
	margin-bottom: 1em;
}

#octopus h2
{
	margin: 2em 0 1em;
	text-align: center;
}

#octopus ul
{
	margin: 0 auto;
	padding: 0 15em 0 0;
	position: relative;
}

#octopus li
{
	text-align: right;
	list-style: none;
	padding: 0.5em;
	padding-top: 0.4em;
	background-color: #eef; 
	z-index: 1000;
	border-top-left-radius: 2em;
	border-bottom-left-radius: 2em;
	display: block;
	margin-bottom: 0.1em;

}

#face
{
	background-color: #eef;
	position: absolute;
	right: 0;
	display: block;
	width: 15em;
	height: 100%;
	z-index: -10;
	border-top-right-radius: 11em 50%;
	border-bottom-right-radius: 11em 50%;
}

#eye
{
	position: relative;
	left: 6em;
	top: 8em;
	background-color: #fff;
	display: block;
	width: 5em;
	height: 2em;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
}

#pupil
{
	position: absolute;
	left: 40%;
	background-color: #eef;
	display: block;
	width: 2em;
	height: 1.5em;
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
}

#courage
{
	width: 65%;
	margin-left: calc(35% - 0.9em);
}

#problem-solving
{
	width: 85%;
	margin-left: calc(15% - 0.9em);
}

#requirement-management
{
	width: 90%;
	margin-left: calc(10% - 0.9em);
}

#ux-ui
{
	width: 80%;
	margin-left: calc(20% - 0.9em);
}

#info-design
{
	width: 60%;
	margin-left: calc(40% - 0.9em);
}

#layout
{
	width: 75%;
	margin-left: calc(25% - 0.9em);
}

#negotiation
{
	width: 55%;
	margin-left: calc(45% - 0.9em);
}

#organized
{
	width: 60%;
	margin-left: calc(40% - 0.9em);
}

#witty
{
	width: 65%;
	margin-left: calc(35% - 0.9em);
}

#delegation-motivation
{
	width: 70%;
	margin-left: calc(30% - 0.9em);
}

.additional
{
	width: 0;
	margin-left: calc(100% - 0.9em);
	height: 1em;
}

#new-message
{
	position: absolute;
	right: 21em;
	margin-top: 1.5em;
	font-size: 0.8em;
}

.socicon-telegram {color: #08c; padding: 0.5em 0.55em 0.5em 0.45em !important;}
.socicon-skype {color: #00aff0;}
.socicon-tumblr {color: #34526f; padding: 0.5em 0.55em 0.5em 0.45em !important;}
.socicon-vkontakte {color: #4C75A3;}
.socicon-github {color: #000;}
.socicon-habrahabr {color: #629fbc;}
.socicon-linkedin {color: #0e76a8; padding: 0.45em 0.5em 0.55em 0.5em !important;}
.socicon-instagram {color: #c32aa3;}
.socicon-livejournal {color: #113141;}
.socicon-twitter {color: #00acee; padding: 0.5em 0.45em 0.5em 0.55em !important;}
.socicon-facebook {color: #3b5998; padding: 0.5em 0.55em 0.5em 0.45em !important;}
.socicon-youtube {color: #c4302b;}

ul ul
{
    padding-top: 1em;
    padding-bottom: 0;
}

@media screen and (max-width: 650px){
	#graph #general,
	#graph #last
	{
		width: unset;
	}

	.resume
	{
		margin-top: 0.2em;
	}

	.resume#graph
	{
		margin-top: -1.4em;
	}

	.resume-select
	{
		width: 5em;
	}
}

@media screen and (max-height: 370px){
	.resume
	{
		margin-top: 0.6em;
	}

	.resume#graph
	{
		margin-top: -1.4em;
	}
}

@media screen and (max-width: 570px){
	.resume-select
	{
		top: 0.8em;
	}

	.vcard h1
	{
		width: 80%;
	    margin-top: -0.2em;
	}
	
	.line
	{
		width: calc(100% - 4em);
	    padding: 2em;
	}

	#skills,
	#education
	{
		border-radius: unset;
		-moz-border-radius: unset;
		-webkit-border-radius: unset;
	}

	#positions img
	{
		width: 100%;
	}
	
	#graph #general
	{
		background-image: unset;
	}

	#general img
	{
		margin: auto;
	}
	
	img[src$="qr.png"],
	img[src$="ess.png"],
	img[src$="ood.png"]
	{
		display: none !important;
	}
		
	.pointing-hand
	{
		-moz-transform: rotate(90deg); /* Для Firefox */
		-ms-transform: rotate(90deg); /* Для IE */
		-webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */
		-o-transform: rotate(90deg); /* Для Opera */
		transform: rotate(90deg);
		position: relative;
	}
	
	.pointing-hand#right
	{
		top: -1.5em;
		right: 0;
	}
	
	.pointing-hand#left
	{
		top: 1.5em;
		left: 0;
	}
	
	div#contact
	{
		padding: 3em 0;
		display: block;
	}
	
	#graph .first-brake
	{
		display: none;
	}

	#general div#contact
	{
		padding: 3em 0 7em;
	}
	
	.graph#social
	{
		position: absolute;
		top: 22em;
		width: 100%;
		max-width: unset;
	}
	
	div#languages
	{
		zoom: 0.7;
		margin-top: -3em !important;
	}
	
	div#skills .png
	{
		zoom: 0.7;
		padding: 0.2em;
	}
	
	div#octopus
	{
		zoom: 0.6;
	}
	
	div#experience img
	{
		zoom: 0.6;
	}
	
	div#last
	{
		padding: unset !important;
	}
}

@media screen and (min-width: 1200px){
	body{
		background-image: url(http://milosh.stevanovich.ru/back.jpg);
	}

	.resume-select {
		position: fixed;
	}
}