body{
	background-color: #363636;
	font-family: 'Titillium Web', sans-serif;
	color: #FAFAFA;
	/*transition: all 300ms ease-in-out;*/
	-webkit-font-smoothing: antialiased;
	margin: 0;
	font-size: 16px;;
}

body.has-modal{
	overflow: hidden;
	padding-right:15px;
}

.background{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url('img/bg_micro.png');
	background-repeat: no-repeat;
	background-position: top;
	background-size: 1920px;
	filter: blur(15px);
	-webkit-transition: 1s -webkit-filter linear;
	-moz-transition: 1s -moz-filter linear;
	-ms-transition: 1s -ms-filter linear;
	-o-transition: 1s -o-filter linear;
}

a,a:visited{
    color: #FAFAFA;
    text-decoration: none;
}

.page-inner{
	position: relative;
}
.has-modal .page{
	filter: blur(12px);
	-webkit-filter: blur(12px);
}
.page{

}

h2{
	display: inline-block;
	font-size: 1.2em;
	color: #616161;
	padding: 4px 10px 6px 10px;
	border-radius: 2px;
	padding-bottom: 40px;
}

.section{
	max-width: 1024px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 100px;
	position: relative;
}

.s_1{
	height: 100vh;
	margin-bottom: 70px;
}
.s_3{
	margin-bottom: 50px;
}
.s_4{
	display: none;
}

.timeline{
	padding-top: 20px;;
}

.hello_wrapper{
	border-radius: 50%;
	width: 300px;
	height: 300px;
	box-sizing: border-box;
	margin: 0 auto;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;

}
.hello{
	font-size: 3em;
	line-height: 1.1em;
	padding-top: 70px;
}
.line{
	width: 120px;
	height: 1px;
	background-color: #fff;
	display: inline-block;
	opacity: .5;
	margin-top: 24px;
}
.spec{
	font-size: 1.3em;
	margin-top: 10px;
}


.skills{
	padding: 0;
	font-weight: 100;
	margin: 0;
	text-align: justify;
	-moz-text-align-last: center;
	     text-align-last: center;;
}
.skills li{
	padding: 5px 15px;
	display: inline-block;
	font-size: 1.1em;
	margin: 23px;
	border: none;
	border-radius: 3px;
	opacity: 0.9;;
}
.skills li:hover{

}

.timeline__el{
	width: 50%;
	display: block;
	text-align: left;
	margin-left: 50%;
	position: relative;
	padding-bottom: 50px;
	height: 143px;
}
.timeline__el:before{
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background-color: #6d6d9a;
	border-radius: 50%;
	left: -7px;
	top: 5px;
}
.timeline__el:after{
	content: '';
	background-image: -webkit-linear-gradient(white 9%, rgba(255,255,255,0) 10%);
	background-image: linear-gradient(white 9%, rgba(255,255,255,0) 10%);
	background-repeat: repeat-y;;
	display: block;
	position: absolute;
	left: 0;
	padding-bottom: 50px;
	height: 112px;
	width: 1px;
	background-position: left;
	background-size: 1px 20px;
	top: 27px;
}
.timeline__el:nth-child(even){
	background-position: right;
	text-align: right;
	margin-left: 1px;
}
.timeline__el:nth-child(even):before{
	right: -7px;
	left: inherit;
}
.timeline__el:nth-child(even):after{
	right: 0px;
	left: inherit;
}
.timeline__el:last-child:after{
	display: none;
}
.timeline__el:nth-child(even) .timeline__date{
	transform: translateX(calc(100% + 16px));
	right: 0;
}
.timeline__date{
	color:#BBB;
	position:absolute;
	transform: translateX(calc(-100% - 16px));
}
.timeline__place{
	color: #BBB;
	margin-bottom: 10px;
	padding: 0 20px;
}

.timeline__text{
	padding: 0 20px;
}
.timeline__tech{
	padding: 5px 20px 0 20px;
	font-size: 14px;
	color: #BBB;

}

@media (max-width: 768px) {
	.skills {}
	.skills li {
		margin: 14px;
		font-size: 1em;
	}

	.timeline__el{
		width: 100%;
		margin: 0;
		height: auto;
	}
	.timeline__el:before{
		display: none;
	}
	.timeline__el:after{
		display: none;
	}

	.timeline__date,
	.timeline__el:nth-child(even) .timeline__date{
		position: static;
		padding: 0 15px;
		text-align: left;
		transform: none;
		right: auto;
	}
	.timeline__place{
		padding: 0 15px;
		text-align: left;
	}
	.timeline__text{
		padding: 0 15px;
		text-align: justify;
	}
	.timeline__tech{
		text-align: left;
		padding: 5px 15px 0 15px;
	}
	.skills{
		text-align: center;
	}
}

.projects{
	position: relative;
}

.projects__el{
	display: inline-block;
	width: 290px;
	height: 290px;
	background-color: #999;
	margin: 20px;
	border: 1px solid #555;
	position: relative;
	cursor: pointer;
}

.projects__img{
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	background-color:rgba(255,255,255,.3);
}
.modal{
	display: none;
	height: 100%;
}

.modal__close{
	position: absolute;
	top:20px;
	right: 20px;
	font-size:20px;
	color:#fff;
	cursor: pointer;
}

.modal-container{
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	background-color: rgba(101,81,75,0.85);

}
.modal-container .modal{
	display: block;
}
.modal-inner{
	width: 900px;
	background-color: #333;
	border-radius: 10px;
	height: 500px;
	margin: auto;
  	position: absolute;
  	top: 0; left: 0; bottom: 0; right: 0;
}

.is-active .modal{

}
.projects__el.is-active .projects__content{}


@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}


@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1;
    visibility: visible; }
      to { opacity: 0;
      visibility: hidden; }

}

@keyframes fadeOut {
    from { opacity: 1;
    visibility: visible; }
      to { opacity: 0;
      visibility: hidden; }

}


/************ ARROWS ***************/

.arrows {
	position: absolute;
	left: 50%;
	bottom: 40px;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	cursor: pointer;
	padding: 0 20px;
}

.arrows div {
	height:3px;
	width:3px;
	-webkit-animation: arrow 1.5s infinite;
	        animation: arrow 1.5s infinite;
	background-color: rgba(255,255,255,.5);
	margin-bottom:10px;
}

@-webkit-keyframes arrow {
	0% {opacity:0.1}
	40% {opacity:1}
	80% {opacity:0.2}
	100% {opacity:0.1}
}

@keyframes arrow {
	0% {opacity:0.1}
	40% {opacity:1}
	80% {opacity:0.2}
	100% {opacity:0.1}
}

.arrows .a1 {
	-webkit-animation-delay:-.6s;
	        animation-delay:-.6s;
	opacity: .7
}
.arrows .a2 {
	-webkit-animation-delay:-.3s;
	        animation-delay:-.3s;
}
.arrows .a3 {
	-webkit-animation-delay:0s;
	        animation-delay:0s;
	opacity: .7;
}