@import url(font-awesome.min.css);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color:#fff;
  font-family: 'Playfair Display', serif;
}
h1, h2, h3, h4, h5, .mini, .minimini, .miniminimini{
	letter-spacing: 1px;
	display: inline-block;

}
h1{
	font-size:32px;
	letter-spacing: 3px;
	margin-top: 34px;
}

h2{
	font-size: 24px;
	margin-top: 20px;
}

h3{
	font-size: 16px;
	opacity: .9;
	margin-top: 22px;
}

h4{
	font-size: 12px;
	opacity: .7;
	margin-top: 24px;
}

h5{
	font-size: 12px;
	opacity: .5;
	margin-top: 26px;
}

.mini{
	font-size: 9px;
	opacity: .3;
	margin-top: 28px;
}

.minimini{
	margin-top: 22px;
	font-size: 5px;
	opacity: .1;
}

.miniminimini{
	font-size: 1px;
	opacity: .1;

}
footer{
	position: absolute;
	bottom:10px;
	width: 100%;
	left:0;
	text-align: center;
}
footer .icons{
	width: 114px;
	display: inline-block;
	margin:0 auto;
}
 #info img{
 	width: 18px;
 	margin-top: 4px;
 }
footer .icons a, #close, #info{
	color:#fff;
	text-decoration: none;
	font-size: 20px;
	border:1px solid #fff;
	background: #000;
	border-radius: 30px;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	float:left;
	margin:0 4px;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

footer .icons a:hover, #close:hover, #info:hover{
	border:1px solid #000;
	background: #fff;
	color:#000;
}


footer .icons a.info{
	border:1px solid #000;
	background: #fff;
	color:#000;
	
}

footer .icons a.info:hover{
	border:1px solid #fff;
	background: #000;
	color:#fff;
}
#close i, #info i{
	margin-left: -1px;
	margin-top: -1px;
}
#close, #info{
	position: absolute;
	top:3px;
	right: -34px;
	line-height: 28px;
	font-size: 12px;
	width: 28px;
	height: 28px;
	line-height: 28px;
}

#particle-canvas {
  width: 100%;
  height: 100%;
  z-index: 1;
}
#container, #container-hidden{
	position: absolute;
	top:0;
	left:50%;
	margin-left: -270px;
	width: 540px;
	height: 100%; 
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.1);
	z-index: 2;
    flex-direction: column;
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#container-hidden{
	left: -100%;
	width: 700px;
	margin-left: -350px;
}

#container-hidden.open{
	left: 50%;
}


#container.open{
	left: -100%;
}

#image-container, #name-container, #info-container{
	z-index: 2;
	left:50%;
	text-align: center;
}

#image-container{
	width:200px;
	height: 200px;
	border:2px solid #fff;
	border-radius: 500px;
	overflow: hidden;
	margin-top: -150px;
	animation-name: topAnimation;
    animation-duration: 3s;
}

#image-container img{
	width:100%;
}

#name-container,#info-container{
	width: 100%;
}

.info-container{
    overflow: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid #fff;
    width: 100%;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

@keyframes topAnimation {
    from {margin-top: -220px;}
    to {margin-top:-150px;}
}

@media only screen and (max-width: 768px) {
	#container, #container-hidden{
		position: absolute;
		top:0;
		left:5%;
		margin-left: 0;
		width: 90%;
		height: 100%;
	}

	#container-hidden{
		left: -100%;
		width: 100%;
		margin-left:0;
	}


	#container-hidden.open{
		left: 0%;
	}

	#close, #info{
		top:10px;
		right: 20px;
	}
	.cd-timeline__content{
		top:-9px;
	}
	.cd-timeline__content h2{
		font-size: 16px;
		font-weight: normal;
	}
	.cd-timeline__img.cd-timeline__img--picture{
		left:5px;
	}
	#image-container{
		width:150px;
		height: 150px;
		margin-top: -50px;
	}

	@keyframes topAnimation {
	    from {margin-top: -90px;}
	    to {margin-top:-50px;}
	}
	
	h1{
		font-size:28px;
		letter-spacing: 3px;
		margin-top: 24px;
	}

	h2{
		font-size: 22px;
		margin-top: 20px;
	}

	h3{
		font-size: 18px;
		opacity: .9;
		margin-top: 22px;
	}

	h4{
		font-size: 12px;
		opacity: .7;
		margin-top: 14px;
	}

	h5{
		font-size: 12px;
		opacity: .5;
		margin-top: 16px;
	}

	.mini{
		font-size: 9px;
		opacity: .3;
		margin-top: 18px;
	}

	.minimini{
		margin-top: 12px;
		font-size: 5px;
		opacity: .1;
	}
}