@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot') format('embedded-opentype'),
       url('../fonts/fontello.woff') format('woff'),
       url('../fonts/fontello.ttf') format('truetype'),
       url('../fonts/fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body {
	margin: 0;
	padding: 0; 
}

body {
	font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
	font-size: 100%;
	color: #4A4A4A;
	background-color: #E8E8E5;
}

p {
	font-size: 18px;
	line-height: 1.5;
}

p.lead {
	font-size: 20px;
	font-weight: 700;
}

a {
	text-decoration: none; 
	color: #111;
	border-bottom: 2px solid #111;
}

.skills a {
	border-color: #E74055;
}

.works a {
	border-color: #4DA5C4;
}

.about a {
	border-color: #F2BC19;
}

.skills a:hover {
	color: #E74055 ;
}

.works a:hover {
	color: #4DA5C4;
}

.about a:hover {
	color: #F2BC19;
}

h1, h2, h3 {
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	line-height: 1.5;
	margin: 30px 0;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

ul {
	list-style: none;
	padding: 0; 
	margin-bottom: 20px;
}

li {
	margin-bottom: 6px;
	font-size: 18px;
}

article {
	margin: 145px 20px 60px;
	max-width: 720px;

}

/* icons */

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 }

.icon-twitter-circled:before { content: '\e800'; } /* '' */
.icon-github-circled-alt2:before { content: '\e801'; } /* '' */
.icon-facebook-circled:before { content: '\e802'; } /* '' */
.icon-linkedin-circled:before { content: '\e803'; } /* '' */
.icon-mail-circled:before { content: '\e804'; } /* '' */

/* header */

header {
	padding-top: 20px;
	display: block;
	border-bottom: solid 4px #666;
	position: fixed; 
	top: 0;
	z-index: 10;
	background-color: #E8E8E5;
	width: 100%;
}

header.skills {
	border-color: #E74055;
}

header.works {
	border-color: #4DA5C4;
}

header.about {
	border-color: #F2BC19;
}

/* navigation */ 
nav ul {
	display:table;
	margin:0 20px;
}

nav ul li {
	margin: 10px 8px;
	float:left;
	display:table-cell;
}

nav ul li:first-child {
	margin-left: 0;
}

.item a span {
	position: absolute;
	top: 10px;
	display: block;
	width: 55px;
  text-align: center;
  font-size: 14px;
}

.item, .item a {
	width: 55px;
	height: 55px; 
	border-radius: 50%;
	display: block;
	background-size: 100%;
}

.item.skills {
	background-image: url(../img/skills.png);
}

.item.skills a {
	background: rgba(231, 64, 85, 0.6);
	border-bottom: none;
}

.item.works  {
	background-image: url(../img/works.png);
}

.item.works a {
	background: rgba(77, 165, 196, 0.6);
	border-bottom: none;
}

.item.about  {
	background-image: url(../img/me-bw.png);
}

.item.about a {
	background: rgba(242, 188, 25, 0.6);
	border-bottom: none;
}

.item.skills a:hover, .item.skills.active a{
	background: transparent;
	color: #E74055;
}

.item.works a:hover, .item.works.active a {
	background: transparent;
	color: #4DA5C4;
}

.item.about a:hover, .item.about.active a {
	background: transparent;
	color: #F2BC19;
}

.item.home a {
	border-bottom: none;
}

.item.home a.icon-home:before { 
	content: '\e805'; 
	font-size: 35px;
	margin-left: 10px;
	margin-top:8px;
	opacity: 0.4;
} 

.item.home a:hover.icon-home:before { 
	opacity: 1;
} 

.item.home a span {
	display: none;
}

footer {
	background-color: #333;
	z-index: 10;
	position: relative;
	bottom: 0;
	padding: 20px;
	display: block;
}

footer ul {
	display: block;
	margin-bottom: 0;
}

footer ul li, footer ul li a {
	color:#ccc;
}

footer h2 {
	display: none;
}

footer a {
	border-bottom: none;
}

/* frontpage  */

.frontpage {
	max-width: 1024px;
	text-align: center;
	margin: 0 auto;
}

.frontpage h1 {
	font-weight: 300;
	font-size: 24px; 
}

.frontpage h1 span {
	font-weight: 400;
	font-size: 42px;
	display: block; 
}

.frontpage nav ul {
	display: block;

}

.frontpage nav ul li {
	display:inline-block;
	float: none;
}

.frontpage .item, .frontpage .item a {
	width: 185px;
	height: 185px; 
	border-radius: 50%;
	display: block;
	background-size: 100%;
	color: #fff;
}

.frontpage .item {
	margin: 30px auto;
}

.frontpage .item a span {
	position: relative;
	display: inline-block;
	margin-top: 130px;
	font-size: 24px;
	width: 185px;

}

/* about */ 

.timeline-item {
	line-height: 1.5;

}

.timeline-item span {
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	display: block;
	margin: 10px 0;
}

.about img {
	max-width: 100%;
	height: auto;
}

.works img {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

@media all and (min-width: 700px) {
	header {
		margin:0 20px;
		padding-top: 90px;
		display: block;
		border-bottom: none;
		position: fixed; 
		top: 0;
		left: 0;
		z-index: 10;
		background-color: #E8E8E5;
		width: 200px;
		height: 100%;
	}
	nav ul {
		display:block;
		margin:0;
	}

	nav ul li {
		margin: 15px;
		float:none;
		clear: both;
	}

	nav ul li:first-child {
		margin-left: 15px;
	}

	.item a span {
		position: relative;
		top: 17px;
		left: 75px;
		display: block;
		width: 100px;
  	text-align: left;
  	font-size: 16px;
	}	

	p, li, a {
		font-size: 18px;
	}

	p.lead {
		font-size: 22px;
	}

	article {
		margin: 100px 20px 60px 270px;
		padding: 0 20px;
		border-left: 4px solid #333;
	}

	article.skills {
		border-color: #E74055;
	}
	article.works {
		border-color: #4DA5C4;
	}
	article.about {
		border-color: #F2BC19;
	}

	.about img {
		max-width: 220px;
		height: auto;
		float:left;
		margin-right: 20px;
	}

	.works img {
		max-width: 720px;
		height: auto;
	}

	footer {
		padding: 10px 40px;
	}

	footer ul {
		display: inline-block;
	}

	footer ul li {
		float: left;
		margin: 0 40px 20px 0;
	}

	footer ul li, footer ul li a {
		font-size: 14px;
	}

	.frontpage {
		margin-top: 100px;
	}

	.frontpage h1 {
		font-size: 32px; 
	}

	.frontpage h1 span {
		font-size: 54px;
	}

	.frontpage .item, .frontpage .item a {
		width: 230px;
		height: 230px;
	}

	.frontpage .item {
		display:inline-block;
		margin: 30px;
	} 

	.frontpage .item a span {
		text-align: center;
		left: 0;
		top: 0;
		margin-top: 160px;
	}

}