@font-face{
	font-family: 'lato';
	src: url(../fonts/Lato-Medium.ttf) format(truetype);
}
body, html{
	width: 100vw;
	background-color: #ecf1f0;
	font-family: 'lato';
	overflow-x: hidden;
	color: #121212;
	animation-name:fadeIn;
	animation-iteration-count:1;
	animation-duration:1s;
	-webkit-animation-name:fadeIn;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:1s;
	-moz-animation-name:fadeIn;
	-moz-animation-iteration-count:1;
	-moz-animation-duration:1s;
	opacity: 1;
}
@keyframes fadeIn{
	0%{opacity:0.3;background-color:#fafafa;}
}
@-moz-keyframes fadeIn{
	0%{opacity:0.3;background-color:#fafafa;}
}
@-webkit-keyframes fadeIn{
	0%{opacity:0.3;background-color:#fafafa;}
}
a{color: inherit;}
a:hover{text-decoration: none;}
.bg-green{
	background-color: #009B4C;
	color: #fafafa;
}
.bg-darkgreen{
	background-color: #087A4A;
	color: #fafafa;
}
.bg-white{
	background-color: #fafafa;
	color: #121212;
}
.font-xs{
	font-size: 14px;
}
.font-sm{
	font-size: 18px;
}
.font-md{
	font-size: 24px;
}
.font-lg{
	font-size: 30px;
}
.font-xl{
	font-size: 36px;
}
.navbar{
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	border-radius: 0px;
	z-index: 2000000;
	border-bottom: 1px solid #087A4A;
}
.navbar-green li a{
	color: #fafafa;
}
.navbar-green li{
	list-style: none;
	display: inline;
	padding: 0px;
}
.navbar a{
	text-align: right;
}
.navbar-green {
  background-color: #009B4C;
}
.navbar-green .navbar-brand:hover,
.navbar-green .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-green .navbar-text {
  color: #fafafa;
}
.navbar-green .navbar-nav > li > a {
  color: #fafafa;
}
.navbar-green .navbar-nav > li > a:hover,
.navbar-green .navbar-nav > li > a:focus {
  background-color: transparent;
}
.navbar-toggle{
	color: #fafafa;
}
section{
	width: 960px;
	margin: auto;
}
#content{
	min-height: 400px;
}
.logo{
	height: auto;
	padding: 10px 40px;
	position: fixed;
	left: -20px;
	top: 0px;
	-webkit-transform: skew(-25deg);
	-moz-transform: skew(-25deg);
	transform: skew(-25deg);
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	transition-duration: 1s;
}
.logo img, .logo span{
	display: inline-block;
	vertical-align: middle;
}
.logo img{
	height: 50px;
}
.logo div{
	-webkit-transform: skew(25deg);
	-moz-transform: skew(25deg);
	transform: skew(25deg);
}
.logo.singitan{
	left: -365px;
}
.swiper-container {
    width: 100%;
    height: 350px;
    position: absolute;	
    top: 50px;
    z-index: 0;
}
.swiper-slide {
    text-align: center;
    background-size: cover;
    background-position: center;
}
.swiper-pagination{
	z-index: 3;
}
#header{
	margin-top: 50px;
	height: 350px;
	background-color: rgba(0,0,0,0.75);
	z-index: 2;
	padding: 50px;
}
#welcome{
	padding: 1px;
}
#jam{
	position: absolute;
	right: -20px;
	top: 390px;
	z-index: 3;
	padding: 10px 50px;
	-webkit-transform: skew(-25deg);
	-moz-transform: skew(-25deg);
	transform: skew(-25deg);
}
#jam p{
	-webkit-transform: skew(25deg);
	-moz-transform: skew(25deg);
	transform: skew(25deg);
	margin: 0px;
}
.subtitle{
	padding-top: 50px;
}
.subtitle p{
	margin: 0px;
}
.line{
	height: 2px;
	background-color: #121212;
	margin-bottom: 30px;
}
.line.white{
	background-color: #fafafa;
	margin-bottom: 5px;
}
p.sp{
	text-align: justify;
	text-indent: 60px;
}
.btn{
	border-radius: 0px;
}
.btn-success{
	background-color: #009B4C;
}
.btn-success:hover{
	background-color: #009B4C;
}
.newspanel{
	border-radius: 0px;
	border: none;
	border-bottom: 4px solid #009B4C;
	height: 350px;
}
.newspanel .panel-body{
	padding: 10px 25px;
}
.newspanel .panel-heading{
	height: 150px;
	background-size: cover;
	background-position: center;
}
#footer{
	margin-top: 40px;
	min-height: 20px;
	padding-top: 40px;
}
.footer-galeri{
	width: 120px;
	height: 120px;
	margin-right: 9px;
	display: inline-block;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	border: 2px solid #009B4C;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.footer-galeri:hover{
	border-color: #fafafa;
}
.pagination li.active a,.pagination li.active a:hover{
	background-color: #009B4C;
	color: #fafafa;
}
.pagination li a{
	background-color: #fafafa;
	color: #087A4A;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.pagination li a:hover{
	color: #087A4A;
}
.readberita{
	border-radius: 0px;
	border: none;
	border-bottom: 2px solid #009B4C;
}
.readberita .panel-body{
	padding:20px 125px;
}
.readberita img{
	margin-bottom: 20px;
}
.readberita label{
	font-weight: lighter;
}
.readberita p{
	text-indent: 50px;
	text-align: justify;
}
.readberita p.font-md{
	text-align: center;
}
.readberita .panel-head p{
	padding-top: 20px;
}
.commentbox{
	padding: 20px;
	border: 2px solid #e1e1e1;
}
.commentbox p{
	text-indent: 0px;
	margin: 5px;
}
.commentbox hr{
	margin: 15px 0px;
}
.commentbox .btn{
	width: 100%;
}
.tab-content{
	background-color: #fff;
	padding: 20px;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}
#tentang img{
	margin: 10px;
	width: 50%;
}
#desa label{
	font-weight: lighter;
}
#desa select{
	width: 50%;
	margin: 10px;
}
#desa label, #desa select{
	display: inline-block;
}
.panel.album{
	width: 100%;
	height: 200px;
	border: none;
	background-size: cover;
	background-position: center;
	display: table;
	border: 2px solid #087A4A;
}
a.album{
	text-decoration: none;
}
.album div{
	display: table-cell;
	vertical-align: middle;
	opacity: 0;
	cursor: pointer;
	transition-duration: 0.75s;
	-webkit-transition-duration: 0.75s;
	-moz-transition-duration: 0.75s;
}
.album div:hover{
	opacity: 1;
	background-color: rgba(250,250,250,0.7);
}
#foto{
	z-index: 20000000;
	overflow: hidden;
}
#foto .font-sm{
	padding: 10px;
	margin: 0px;
}