@font-face 
{
    font-family: llumar;
    src: url('LLumarFaktPro-Light.otf');
}

html, body {
	background: linear-gradient(to right, #000000, #333333);
	margin:0;
	font-family: Calibri, Arial;
	font-size: 12px;
}
h1 {
	font-size:3vw;
	text-align:center;
	margin:0;
	color:white;
}
h2 {
	font-size:2vw;
	text-align:left;
	margin:0;
	color:#dcdcdc;
}
h3 {
	font-size:2vw;
	text-align:right;
	margin:0;
	color:#ffffff;
}
p {
	font-size:1.3vw;
	text-align:justify;
	color:#dcdcdc;
	margin:0;
}
.p2 {
	font-size:1.4vw;
	color:#dcdcdc;
	text-align:justify;
	margin:0;
}
.p3 {
	font-size:1.1vw;
	color:#ffffff;
	text-align:justify;
	margin:0;
}
.p4 {
	font-size:1.2vw;
	color:#ffffff;
	text-align:justify;
	margin:0;
}
.wrapper {
	width:100%;
}
.header {
	width:100%;
	height:12vh;
	background: linear-gradient(to right, #000000, #2f4f4f);
	left:0;
	top:0;
	position:fixed;
	z-index:3;
}
.header:hover {
	background: linear-gradient(to right, #000000, #808080);
}
.home {
	width:100%;
	margin-top:12vh;
}
.isi1 {
	width:100%;
	margin-top:3vh;
	float:left;
}
.footer {
	width:100%;
	height:25vh;
	float:left;
	background: linear-gradient(to right, #000000, #2f4f4f);
}
.logojki {
	float:left;
}
.menu {
	float:right;
	top:1vh;
	right:1vw;
	position:absolute;
	font-size:1.5vw;
}
a.link1:link, a.link1:visited{
	color: #ffffff;
	text-decoration: none;
}
a.link1:hover, a.link1:active{
	color: #00bfff;
	text-decoration: none;
}
a.link2:link, a.link2:visited{
	color: #ffffff;
	text-decoration: none;
}
a.link2:hover, a.link2:active{
	color: #eee8aa;
	text-decoration: none;
}
a.link3:link, a.link3:visited{
	color: #c0c0c0;
	text-decoration: none;
}
a.link3:hover, a.link3:active{
	color: #ffffff;
	text-decoration: none;
}
.container {
  position: relative;
  width:100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #333333;
  border-radius:8px;
}
.container:hover .overlay {
  opacity: 0.9;
}
.textnya {
  color: #ffffff;
  font-size: 1.3vw;
  position: absolute;
  top:8%;
  left:5%;
  right:5%;
  text-align: justify;
}

.boxkecil { 
	background-color:#ffffff;
	width:8vw;
	color:#000000;
	height:2vw;
	text-align:center;
	margin-top:1vw;
}
.boxkecil:hover { 
	background-color:#fafad2;
}
ul#menu li {
  display:inline;
}

/*------------------------------------------------------------------ */
/*untuk bagian tampil galeri*/
.link_info {
	
}
.infobox{
			width:100vw;
			min-width:100vw;
			min-height:100vh;
			position:fixed;
			z-index:4;
			top:0;
			left:0;
			display:none;
			background-color:rgba(0,0,0,0.9);
			text-align:center;
			font-size:8px;
			color:#333333;
		}
		.closebtn {
			margin-right: 3vw;
			margin-top: 2vw;
			color: white;
			font-weight: bold;
			float: right;
			font-size:calc(10px + 2vw);
			line-height: 20px;
			cursor: pointer;
			transition: 0.3s;
		}
		.closebtn:hover {
			color: red;
		}
		.tampilgambar{
			width:80vw;
			height:80vh;
			margin-top:10vh;
			margin-left:9vw;
		}

/*------------------------------------------------------------------ */

/* ----------------------------------------------------------------- */
/* untuk slideshow*/
	* {box-sizing: border-box}
	/*body {font-family: Verdana, sans-serif; margin:0}*/
	.mySlides {display: none}
	img {vertical-align: middle;}

	/* Slideshow container */
	.slideshow-container {
	  width: 100%;
	  position: relative;
	  margin: auto;
	}

	/* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width: auto;
	  padding: 16px;
	  margin-top: -22px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	  background-color: rgba(0,0,0,0.2);
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color: rgba(0,0,0,0.8);
	}

	/* Caption text */
	.text {
	  color: #f2f2f2;
	  font-size: 1.2vw;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 8px;
	  width: 100%;
	  text-align: center;
	  text-shadow: 1px 1px #696969;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
	  font-size: 1vw;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #717171;
	}

	/* Fading animation */
	.fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 2s;
	  animation-name: fade;
	  animation-duration: 2s;
	}

	@-webkit-keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}

	@keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
	  .prev, .next,.text {font-size: 11px}
	}
/* selesai slideshow */
/* ------------------------------------------------------------------------ */