body, html {
    width: 100%;
    height: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.logo {
	height: 40px;
	margin-top: -10px;
}

.satu{
	background-image: url(../img/1.jpg);
	background-size:cover;
	height:700px;
	width: auto;
	margin-top:50px;
}

.dua{
	background-image: url(../img/2.jpg);
	background-size:cover;
	height:700px;
	width: auto;
	margin-top:50px;
}

.tiga{
	background-image: url(../img/3.jpg);
	background-size:cover;
	height:700px;
	width: auto;
	margin-top:50px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.pemukul{
	background-image: url(../img/ketuk.jpg);
	min-height: 280px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
}

.text-dalam {
    font-size: 18px;
    font-weight: 400;
}

.lesung {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.lesung > h2 {
    margin: 0;
    font-size: 3em;
	color: rgba(248,248,248, 0.9);
}


.lesung > p {
    color: rgba(248,248,248, 0.9);
}

.servis {
text-align: center;
}

.imbang {
text-align: center;
padding: 20px 20px;
cursor: pointer; cursor: hand;
}


#map-canvas {
width: 100%;
height: 400px;
}

.awad {
text-align: center;
}

.awad1{
margin-left: auto;
margin-right: auto;
}


.bawah {
    padding: 20px 0;
    background-color: #f8f8f8;
}

.bawahpeta {
margin-bottom: 30px;
}

.hubungi {
    text-align: center;
	margin-bottom: 10px;
}

.biru:hover {
background: white;
cursor: pointer; cursor: hand;
}

.merah:hover {
background: white;
cursor: pointer; cursor: hand;
}

.hijau:hover {
background: white;
cursor: pointer; cursor: hand;
}



.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

.logo1 {
	height: 25px;
	float: right;
	margin-top: -3px;
}

.brand {
	height: 200px;
	float: right;
	margin-top: 30%;
	margin-right: 10%;
}

.lesung1 {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
	padding-left: 10%;
}

.lesung1 > h2 {
    margin: 0;
    font-size: 3em;
	color: rgba(248,248,248, 0.9);
}


.lesung1 > p {
    color: rgba(248,248,248, 0.9);
}

#johanBooks td{
    border:1px solid black;
}