@font-face {
	font-family: 'BebasNeue';
	src:url(../fonts/BebasNeue-Regular.woff) format('woff')
}

body{
	font: 18px/36px 'BebasNeue', 'Arial Narrow'. arial, san-serif;
	background-color: #ddd;
}

h1{
	font-size:80px;
	margin: 50px 0;
	text-align:center;
	text-shadow: 1px 1px 1px;
}


.galeri {
	width:100%;
}
.galeri .col{
	overflow:hidden;
	position: relative;
	
}

.galeri .col img,
.galeri .col span{
	width:100%;
	height:100%;
	border-radius: 5%;
	border: 3px solid #00a3d9;
}
.galeri .col .img{
	width:auto;
	height:100%;
	border-radius: 5%;
}

.galeri .col span{
	width: 92%;
	display: block;
	background-color: rgba(0,163,267,.3);
	position: absolute;
	top:0;
	text-align:center;
	line-height: 120px;
	color: #dbdbea;
	text-shadow: 1px 1px 1px #ddd;
	opacity: 0;
	transform: scale(0) rotate(0);
	transition: .3s;
}

.galeri a:hover span{
	opacity: 1;
	transform: scale(1) rotate(360deg);
}

.clear{
	clear:both;
}

/*overlay*/
.overlay{
	width: 0;
	height: 0;
	overflow: hidden;
	position: fixed;
	top:0;
	left:0;
	background: rgba(0,0,0,0);
	z-index: 9999;
	transition:.8s;
	text-align: center;
	padding: 100px 0;
}

.overlay:target{
	width: auto;
	height: auto;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,.7);
}

.galeri .overlay img{
	width: auto;
	margin: auto;
	max-height: 500px;
	box-shadow: 2px 2px 2px 5px rgba(0,0,0,.5);
	border: 0px solid #00a3d9;
	
}

.overlay:target img{
	animation: ZoomAndFade 1s;
}

.galeri .overlay p{
	color: #dbdbea;
	text-shadow: 1px 1px 1px #ddd;
	background: rgba(0,0,0,.7);
	padding: 10px;
	min-height: 10px;
	width: auto;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity : 0;
}
.galeri .overlay:target p{
	animation: SlideUpFade .5s .5s forwards;
}

.overlay .close{
	width: 30px;
	height: 30px;
	background-image:url(../img/close.png);
	position: absolute;
	text-indent: -9999px;
	top: 40px;
	left: 50%;
	margin-left: -10px;
	opacity : 0;
}

.overlay:target .close{
	animation: SlideDownFade .5s .5s forwards;
}

.overlay:target .next,
.overlay:target .prev{
	animation: Fade .5s forwards;
}

/*navigasi*/

.overlay .next,
.overlay .prev{
	width: 50px;
	height: 50px;
	background-image:url(../img/next.png);
	position: absolute;
	text-indent: -9999px;
	top: 50%;
	right:0;	
}

.overlay .prev{
	background-image:url(../img/prev.png);
	left:0;
}

/*animasi*/
@keyframes Fade{
	0% {
		opacity:0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes ZoomAndFade{
	0% {
		transform: scale(0);
		opacity:0;
	}
	
	100% {
		transform:scale(1);
		opacity: 1;
	}
}

@keyframes SlideUpFade {
	0%{
		opacity: 0;
		margin-bottom: -20px;
	}
	100% {
		opacity: 1;
		margin-top: 0;
	}
	
}

@keyframes SlideDownFade {
	0%{
		opacity: 0;
		margin-top: -20px;
	}
	100% {
		opacity: 1;
		margin-top: 0;
	}
	
}