body { font-family: 'Baloo 2', cursive; font-size: 18px; }



.toparea { background: #064d64; padding: 10px 0; color: #FFF; }

.toparea a { color: #FFF; }

.toparea img.toplogo { width: 120px; height: auto; }

.toparea ul { margin: .8em 0 0 0; padding: 0; list-style: none; text-align: right; }

.toparea li { display: inline; padding: 0 1em; border-right: 1px solid #FFF; }

.toparea li:last-child { border: none; padding: 0 0 0 1em; }



.contentarea { background: #d2a542 url(images/bg-area2.jpg) no-repeat center top; background-size: 100%; }

.contentarea .area1 { color: #064d64; padding: 5em 0 0 0; }

.contentarea .area1 h3 { font-size: 3em; margin: 0; padding: 0; line-height: 1em; }

.contentarea .area1 .hadist { font-size: 1em; line-height: 1.5em; }

.contentarea .area1 .headline { margin: 2em 0; }

.contentarea .area1 .headline img { width: 80%; max-width: 600px; height: auto; margin: 1em 0 0 0; }

.contentarea .area1 .quot { font-size: 1.4em; line-height: 1.5em; }



.contentarea .area2 { color: #064d64; padding: 5em 0 0 0; }

.contentarea .area2 h2 { font-size: 1.5em; margin: 0; padding: 0; }

.contentarea .area2 h3 { font-size: 3em; margin: 0; padding: 0; }

.contentarea .area2 h4 { font-size: 1.5em; font-weight: 600; margin: 0 0 1em 0; }

.contentarea .area2 img { width: 100%; height: auto; }

.contentarea .area2 .kartu:hover img { transform: rotateY(360deg); transition: transform 0.8s; transform-style: preserve-3d; }

.contentarea .area2 .platinumarea { padding: 0 0 0 2em; background: url(images/dot-platinum.png) no-repeat 0 1px; }

.contentarea .area2 .goldarea { padding: 0 0 0 2em; background: url(images/dot-gold.png) no-repeat 0 1px; }

.contentarea .area2 .silverarea { padding: 0 0 0 2em; background: url(images/dot-silver.png) no-repeat 0 1px; }



.contentarea .area3 { padding: 5em 0; color: #FFF; background: #d2a542; }

.contentarea .area3 .btn-red { background: #C30; border: 1px solid #B30; color: #FFF; font-weight: 600; font-size: 1.25em; margin: 1em 0 0 0; }

.contentarea .area3 h3 { font-weight: 600; }

.contentarea .area3 ol { margin: 0; padding: 0; list-style-position: inside; }

.contentarea .area3 ol li ul { list-style: none; }



.footerarea { background: #064d64; padding: 4em 0 3em 0; color: #FFF; }

.footerarea a { color: #FFF; }

.footerarea h3 { font-size: 1em; font-weight: 600; margin: 0 0 1em 0; }

.footerarea h4 { font-size: 1em; font-weight: 400; margin: 0; padding: 0; }

.footerarea img.footerlogo { width: 200px; height: auto; margin: 0 0 1em 0; }

.footerarea .sosmed { margin: 2em 0 0 0; }

.footerarea .sosmed a { margin: 0 1em 0 0; }

.footerarea .sosmed i { margin: 0 5px 0 0; }



.innerarea { background: #fef0d1; padding: 5em 0; }

.innercontent { margin: 0 0 3em 0; }

.innerarea h1 { font-size: 1.5em; font-weight: 600; margin: .6em 0 1em 0; }

.innerarea h2 { font-size: 1.2em; font-weight: 600; margin: 0; }

.innercontent ul { list-style: none; margin: 0 0 1em 0; padding: 0; }

.innercontent tr td { border-bottom: 1px solid #FDDB91; padding: 1em 0; }

.innerarea img { width: 100%; height: auto; margin: 0 0 1em 0; }



@media (min-aspect-ratio: 16/9) {



}



@media (max-aspect-ratio: 16/9) {



}



@media (max-width: 767px) {

.toparea { text-align: center; }

.toparea img.toplogo { margin: 0; }

.toparea ul { text-align: center; }

.contentarea .area1 { padding: 3em 0 0 0; }

.contentarea .area1 h3 { font-size: 1.5em; }

.contentarea .area1 .quot { font-size: 1em; }

.contentarea .area2 { padding: 3em 0 0 0; }

.contentarea .area2 h2 { font-size: 1.2em; }

.contentarea .area2 .kartu { margin: 0 0 2em 0; }

.contentarea .area3 { padding: 3em 0; }

.footerarea .sosmed { margin: 0 0 3em 0; }

.footerarea .sosmed a { margin: 0; display: block; }

.innerarea h1 { text-align: left; }

.text-right { text-align: left !important; }

}