<!DOCTYPE html> 
<html class=" -webkit-" style="display: block;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="stylez.css">
<meta name="description" content="Payon Citi Foundation" />
<meta name="keywords" content="Organisasi Filantropi Non Profit untuk Pendidikan & Kesejahteraan Anak Tidak Mampu" />

<!-- <link href="https://smartadventure.id/edu/mobileweb.css" rel="stylesheet" type="text/css"> -->
<style>

.container {display: table; width: 100%;}
.kolom {display: table-cell; padding: 16px;color:white;width: 100%;}

@media only screen and (max-width: 600px) {
    .kolom { 
        display: block;
        width: 100%;
    }
}

/* ---- FAQ section accordion ---- */ 
.accordion {
  background-color: #75cbca;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover { background-color: #febe20; }
.panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; font-size:15px; }
</style>

<style>
/* ---- Kurikulum section click show images ---- */
/* body {font-family: Arial, Helvetica, sans-serif;} */
#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; }
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 15px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: 40px;
  right: 160px;
  color: #ffffff;
  font-size: 80px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb; text-decoration: none; cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>

<style>

/* ---- Character section ----
*,  *::after,  *::before { box-sizing: border-box; }

html { font-family: arial; }
body { margin: 0; background-color:#434A53; color:#fff; }
a { color: #45d296; }
*/
.site-wrap {
  margin: 0;
  max-width: 1000px;
  margin: 50px auto;
  padding: 1em 0.2em;
}
.block-slider { line-height: 40px;}
/* .block-slider__items { margin: -0.1em; } */
.block-slider__items { margin: -0.1em; }
.block-slider__items::after {
  display: table;
  clear: both;
  content: " ";
}
.block-slider__item {
padding-top : 3em;
  width: 350px;
  float: left;
  /*padding: 0.2 0.2em; */
}
@media (min-width: 500px) { .block-slider__item { width: 33.33333%; } }
@media (min-width: 700px) { .block-slider__item { width: 25%; } }
@media (min-width: 800px) {
.block-slider__item { width: 20%; }
}
@media (min-width: 900px) {
.block-slider__item { width: 16.66667%; }
}
@media (min-width: 1000px) {
.block-slider__item { width: 14.2857142857%; }
}

.block-slider__image {
  padding: 20 0.5em;
  background: #fff5d6;
  color: #fff;
  text-align: center;
  border:5px solid #fff;
}

</style>
<style type="text/css">
.zoom {
  padding: 5px;
  background-color: green;
  transition: transform .2s;
  width: auto;
  height: auto;
  margin: 0 auto; 
}
.gbr{
  /* height: auto; */
  /*width: 110px;*/
  height: auto; 
  width: 250px;
  /*border: 2px solid #cccccc;*/
}
.gbr:hover {
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.3); 
} 

.blog .carousel-indicators {
	left: 0;
	top: auto;
    bottom: -40px;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #a3a3a3;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}
.blog .carousel-indicators .active {
    background: #707070;
}    
</style>

<style media="" data-href="https://smartadventure.id/dataweb/css/style.css">
/* w+ */
html {
  max-width: 100%;
  overflow-x: hidden;
  height: auto;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

[contenteditable="true"]:focus {
  outline: none;
}

.form-input {
  border-radius: 10px;
  border: solid 1px #e8e8e8;
  height: 42px;

  padding-left: 18px;
  padding-right: 30px;
}

.form-area {
  border-radius: 10px;
  border: solid 1px #e8e8e8;
  resize: none;

  padding-left: 18px;
  padding-right: 30px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.form-input:hover {
  border-color: #dbdbdb;
}
.form-input:active,
.form-input.open,
.form-input:focus {
  border-color: #f9eb9d;
}

.form-area:hover {
  border-color: #dbdbdb;
}
.form-area:active,
.form-area.open,
.form-area:focus {
  border-color: #f9eb9d;
}

.bg-sedu-order {
  background-image: url("https://smartadventure.id/dataweb/css/background-image/sedu-order-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg-footer {
  background-image: url("https://smartadventure.id/dataweb/css/background-image/footer3.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.top-quality-decor {
  top: 2rem;
}
.right-quality-decor {
  right: 2rem;
}
.bottom-quality-decor {
  bottom: 2rem;
}
.left-quality-decor {
  left: 19rem;
}

.hidden {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.fix-height {
  min-height: 100vh;
}
.m-auto {
  margin: auto;
}
.button-primary {
  /* Rectangle: */
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  cursor: pointer;
  color: #ffeec9;
  font-size: 17px;
  padding: 9px 12px;
  text-decoration: none;
  background: #0e9586;
  box-shadow: 0 4px 0 0 #ffeec9;
  border-radius: 100px;
}
.button-primary-link {
  /* Rectangle: */
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  cursor: pointer;
  color: #ffeec9;
  font-size: 17px;
  padding: 9px 15px;
  text-decoration: none;
  background: #ff8ba3;
  box-shadow: 0 4px 0 0 #ffeec9;
  border-radius: 100px;
}
.button-primary:hover {
  background: #fc6382;
}
.button-primary-link:hover {
  background: #fc6382;
}
.button-primary-dropdown {
  /* Rectangle: */
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  cursor: pointer;
  color: #ffeec9;
  padding: 9px 15px;
  text-decoration: none;
  background: #ff8ba3;
  box-shadow: 0 4px 0 0 #ffeec9;
  border-radius: 100px;
}
.button-primary-dropdown:hover {
  background: #fc6382;
}

.button-secondary { /* color: #519aa3;*/ color: #fcfce3;}

.button-secondary:hover {
  /*color: #2f7780; */ color: #fcfce3;
}
.clip-circle {
  clip-path: circle(300px at center);
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 12px 0.75rem;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
}

.dropdown:hover .dropdown-content {
  display: block;
}
.callouts--top:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 23px;
  top: -42px;
  border: 10px solid transparent;
  border-bottom: 32px solid rgb(193, 193, 193); /* IE8 Fallback */
  border-bottom: 32px solid rgba(193, 193, 193, 0.5);
  z-index: 2;
}
.callouts--top:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 25px;
  top: -32px;
  border: 8px solid transparent;
  border-bottom: 25px solid #fff;
  z-index: 3;
}
.background-gray-f6 {
  background-color: #f6f6f6;
}

a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

.mt10rem {
  margin-top: 10rem;
}
.right-10 {
  right: 10rem;
}

.max-h-32 {
  max-height: 32rem;
}

.wrapper-logo-delivery {
  height: 6em;
  vertical-align: middle;
  text-align: center;
  display: block;
}

.logo-delivery {
  /* max-height: 92px;
  width: auto; */
  max-width: 16em;
  display: block;
  margin: 0 auto;
}

.footer-nav {
  position: relative;
  top: -32px;
  margin-right: 24px;
}

@media screen and (min-width: 0em) and (max-width: 30em) {
  .section-grab {
    margin-top: 4rem;
  }

  .logo-grab {
    /* max-height: 48px; */
  }

  .footer-nav {
    position: unset;
    top: unset;
    margin-right: unset;
    display: block;
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 0em) and (max-width: 30em) {
  .mt10rem-s {
    margin-top: 10rem;
  }

  .w-40-s {
    width: 40%;
  }
  .left-0-s {
    left: 0;
  }
  .left--20-s {
    left: -20rem;
  }
  .right-10-s {
    right: 10rem;
  }
  .left-10-s {
    left: 10rem;
  }
}

@media screen and (min-width: 30em) {
  .vh-35-ns {
    height: 35vh;
  }
  .m-auto-ns {
    margin: auto;
  }
  .right-10-ns {
    right: 10rem;
  }
  .left-10-ns {
    left: 10rem;
  }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
  .vh-35-m {
    height: 35vh;
  }
  .m-auto-m {
    margin: auto;
  }
  .right-10-m {
    right: 10rem;
  }
  .left-10-m {
    left: 10rem;
  }
}
@media screen and (min-width: 60em) {
  .m-auto-l {
    margin: auto;
  }
  .right-10-l {
    right: 10rem;
  }
  .left-10-l {
    left: 10rem;
  }
}
.right-20 {
  right: 20rem;
}

.right-10 {
  right: 10rem;
}

.right-5 {
  right: 5rem;
}
.left-5 {
  left: 5rem;
}

.left-10 {
  left: 10rem;
}

.bg-sedu-dark-blue {
  background-color: #0e2244;
}

.polaroid-images a {
  background: white;
  display: inline;
  float: left;
  margin: 0 15px 30px;
  padding: 10px 10px 25px;
  text-align: center;
  text-decoration: none;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 0;
  position: relative;
}

.polaroid-images a:after {
  color: #333;
  font-size: 20px;
  font-family: "Dosis", sans-serif;
  content: attr(title);
  position: relative;
  top: 15px;
}

.polaroid-images img {
  display: block;
  width: inherit;
}

.charity-photo-1 {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  transform: rotate(4deg);
}

.charity-photo-2 {
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

.charity-photo-3 {
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

.charity-photo-4 {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  transform: rotate(4deg);
}

.bg-sedu-blue-darker {
  background-color: #83e3f2;
}

.fa:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
.balons1 {background-color:#ffdf01;}
.balons2 {background-color:#ff0000;}
.balons3 {background-color:#0052be;}
.balons4 {background-color:#aad401;}

}
</style>

<!--
    <script type="text/javascript" async="" src="dataweb/f.txt"></script><script type="text/javascript" async="" src="dataweb/analytics.js.download"></script>
    <script type="text/javascript" async="" src="dataweb/analytics.js.download"></script>
    <script type="text/javascript" async="" src="dataweb/recaptcha__en.js.download" crossorigin="anonymous" integrity="sha384-pMn/at+iAgl0PpX8A+ccr7iPPScp0lIFsRTiC6EkDFtJ3fTeFBeJkP7nZJTcbD5h"></script>
    <script async="" src="dataweb/gtm.js.download"></script><script src="dataweb/prefixfree.min.js.download"></script>
    <meta name="facebook-domain-verification" content="kwyds66z7q8uqwyfeo71fp4xi21hd9">
    Google Tag Manager 
-->
<script>
/*
    (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-WXZ9N9M');
*/
</script>
    <!-- End Google Tag Manager -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <!--<script async="" src="dataweb/js"></script> -->
<script>
/*
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-117613059-3');
*/
</script>
    <title>Payon Citi Foundation</title>
    <meta name="keywords" content="Payon Citi Foundation, Yayasan">
    <meta name="description" content="Payon Citi Foundation">
    <link rel="canonical" href="https://payonciti.org">
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://payonciti.org">
    <meta property="og:title" content="Payon Citi Website">
    <meta property="og:description" content="Payon Citi Foundation">
    <!--  <meta property="og:image" content="https://smartadventure.id/assets/image/sedu-og.jpg"> -->
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://payonciti.org">
    <meta property="twitter:title" content="Smart Website">
    <meta property="twitter:description" content="tes at a time.">
    <!-- <meta property="twitter:image" content="https://smartadventure.id/assets/image/sedu-og.jpg"> -->
<!--<script src="dataweb/f(1).txt"></script>-->
<style>
/*
.zoom {
  padding: 20px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 400px;
  margin: 0 auto;
}
img{
  height: auto;  
  width: 110px;
}

img:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
*/
</style>

<style>
/*.menutops, a:hover {border-radius: 8px 8px 1px 1px;background-color: #535fc8; padding:5px; /* border: solid 1px #daffd1;* }*/
.menutops {border-radius: 8px 8px 1px 1px;background-color: #77da70; padding:5px; /* border: solid 1px #daffd1;*/ }
.logowb {display: none;}
@media (max-width: 768px) {
.logowb {display :block;}
} 

.common_table{
    display:table;
    border-collapse:collapse;
    border: 0px solid grey;
    width: 95%;
    }
.common_table DIV{
    display:table-row;
    border: 0px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    text-align:left;
    padding :3px;
    width: 32%;
    }
    
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<script type="text/javascript">
    window.alert = function(){};
    var defaultCSS = document.getElementById('bootstrap-css');
    function changeCSS(css){
        if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
        else $('head > link').filter(':first').replaceWith(defaultCSS); 
    }
    $( document ).ready(function() {
        var iframe_height = parseInt($('html').height()); 
        window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
    });
</script>
</head>

<body style="display: block; height: 5110px;">
<!-- Google Tag Manager (noscript) -->
<!-- 
<noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WXZ9N9M" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript> 
-- End Google Tag Manager (noscript) --
<script src="dataweb/api.js.download"></script>
--> 
<script src="dataweb/jquery.min.js.download"></script>
<script src="dataweb/jquery.nice-select.min.js.download"></script>
<script src="dataweb/jquery.scrollme.js.download"></script>
<script src="dataweb/index.js.download"></script>

<div class="body-container flex flex-column">
    <div class="big-menu dn fixed h-100 w-100 bg-white z-9999" style="display: none;">
        <div class="flex">
            <div class="w-20"></div>
            <div class="w-80 flex flex-column f2-l f3 mv5 mh5 dosis sedu-primary">
                <div class="mv2">
                    <a href="https://smartadventure.id/payontes.html" class="button-secondary link m-auto mh3">Home </a>
                </div>
                <div class="mv2"><a href="#" class="button-secondary link m-auto mh3">Tentang Kami </a></div>
                <div class="mv2"><a href="#" class="button-secondary link m-auto mh3">Kegiatan </a></div>
                <div class="mv2"><a href="#" class="button-secondary link m-auto mh3">Artikel </a></div>
                <div class="mv2"><a href="#" class="button-secondary link m-auto mh3">Menjadi Relawan </a></div>
                <div class="mv2"><a href="#" class="button-secondary link m-auto mh3">Hubungi Kami </a></div>
                <!--<div class="mv2"><a href="https://smartadventure.id/bimbingan_online.html" class="button-secondary link m-auto mh3">Bimbingan Online </a></div> -->
                <!-- <div class="mv2"><a href="#kurikulum" class="button-secondary link m-auto mh3">Kurikulum </a></div> --> 
                <div class="mv2"><a href="https://smartadventure.id/payotes.html" class="button-secondary link m-auto mh3">Berdonasi</a></div> 
                <!--  
                    <div class="mv2">
                        <a href="https://smartadventure.id/bigorder" class="button-secondary link m-auto mh3">Big Order </a>
                    </div> 
                    <div class="mv2">
                        <a href="https://blog.puserts.com/" class="button-secondary link m-auto mh3">Blog </a>
                    </div>
                -->
            </div>
        </div>
    </div> 

    <!-- Hide sementara burger
    <div class="burger-button-container w-10 z-9999">
        <button class="hamburger hamburger--elastic fixed right-2-l right-2-m right-1 top-1" type="button" style="border:none; padding-bottom:8px;">
            <span class="hamburger-box">
                <span class="hamburger-inner"></span>
            </span>
        </button>
    </div>  
    -->

    <div section="header">
        <div class="nav-bar flex tc f6-l f6-m f7-ns f7 mt4 relative z-999">
            <div class="dummy w-20"></div>
            <!--
            <div class="nav-bar-body flex absolute right-10 w-50 o-0 o-0-ns o-0-m o-100-l dosis sedu-primary tr" style="position: fixed; background-color:#ffffff; padding: 1px; width:80%; border-bottom: 3px solid blue;">
            <div class="nav-bar-body flex absolute right-10 w-50 o-0 o-0-ns o-0-m o-100-l dosis sedu-primary tr" style="position: relative; background-color:#ffffff; padding: 1px; width:80%; border-bottom: 3px solid blue;">
            -->
            <div class="nav-bar-body flex absolute right-10 w-50 o-0 o-0-ns o-0-m o-100-l dosis sedu-primary tr" style="position: relative; padding: 1px; width:85%; border-bottom: 3px solid #535fc8;">
                <a class="no-underline" href="index.html"><img src="dataweb/logo_payo_web.png" style="width:155px; height: 70px; padding-right: 15px;"></a>
                <div style="margin-top: 47px;">
                <a href="index.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 45px 5px 45px;">Home</a>
                <a href="tentang.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 10px 5px 10px;">Tentang Kami</a>
                <a href="kegiatan.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 35px 5px 35px;">Kegiatan</a>
                <a href="artikel.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 40px 5px 40px;  background-color: #535fc8;">Artikel</a> 
                <a href="relawan.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 5px 5px 5px;">Menjadi Relawan</a>
                <a href="map.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 10px 5px 10px;">Hubungi Kami</a>
                <a href="donasi.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding:5px 30px 5px 30px;  background-color: #e29a11;">Berdonasi</a>
                <!-- <a href="https://bloger.web.id/home" class="button-secondary link m-auto mh3">Home </a> --> 
                <!--
                <a class="no-underline" href="https://smartadventure.id"><img src="dataweb/logotes.jpg" style="width:110px; height:65px; padding-right:115px;"></a>
                <span style="border-bottom: 2px solid blue;">
                ------
                <a class="no-underline" href="https://smartadventure.id"><img src="dataweb/logotes.jpg" style="width:100px; height: 42px; padding-right:250px;"></a>

                <a href="https://smartadventure.id/payontes.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding-right:4px;">Home</a>
                
                <a href="#" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding-right:4px;">Tentang Kami </a>
                <a href="#" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding-right:4px;">Kegiatan</a>
                <a href="#" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding-right:4px;">Artikel</a> 
                <a href="#" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding-right:4px;">Menjadi Relawan</a>
                <a href="#" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto menutops" style="padding-right:4px;">Hubungi Kami</a>
                <!-- <a href="https://smartadventure.id/bimbingan_online.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto " style="padding-right:4px;">Bimbingan Online</a>----
                <!-- <a href="#kurikulum" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto " style="padding-right:4px;">Kurikulum</a> ---
                <a href="https://smartadventure.id/payotes.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto" style="border-radius: 8px 8px 1px 1px; border: solid 1px #71cfc6; background-color:blue; padding:5px;" >Berdonasi</a> 
                -->
            </div>
            <!--
            <div class="nav-bar-body flex absolute right-10 w-50 o-0 o-0-ns o-0-m o-100-l dosis sedu-primary tr">
                <a href="https://bloger.web.id/edu/" class="button-secondary link mh2 f4-l f6-m f7-ns f7 link m-auto mh3">Home </a>
                <a href="https://bloger.web.id/edu/index.html#kurikulum" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto ">Kurikulum</a>
                <a href="#metode" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto ">Metode</a>
                <a href="https://bloger.web.id/edu/index.html#keunggulan" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto ">Keunggulan</a>  
                <a href="https://bloger.web.id/edu/character.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto ">Karakter</a>
                <a href="https://bloger.web.id/edu/index.html#faq" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto ">FAQ</a> 
                <a href="https://bloger.web.id/edu/journey_kami.html" class="button-secondary link mh2 f4-l f6-m f7-ns f7 dosis m-auto ">Tentang Kami</a> 
                <!-- <a href="https://bloger.web.id/#order-target" id="orderNow-btn" class="button-primary-link mh1 f6-l f6-m f7-ns f7 m-auto  dosis">Order Now</a> --
            </div>
            -->
        </div>        
    </div>
</div>
<!--
<div section="hero" class="ma2">
    <!-- TOP BG HIDE SEMENTARA
    <div class="new-blob-bg">
        <object class="left-0 bottom-0 absolute z-negative o-0 o-100-l" data="https://smartadventure.id/dataweb/image/new_blob.svg" type="image/svg+xml"></object>
    </div>
    ---------------------------
    <div class="hero-content ph5-l ph5-m flex-column tc-m tl-l tc-ns tc">
        <div class="logo-container mt5-l">
            <a class="no-underline logowb" href="https://smartadventure.id">
                <img class="w-40 w-10-l" src="dataweb/logo_payo_web.png" style="width:210px;">
            </a>
            <!-- <img class="mw3 ml4" src="dataweb/halal.png">   <img class="w-40 w-10-l" src="dataweb/image/smart-01.png"></a>---------------------------------
        </div> 
    </div>
     <!--
    <div class="hero-bg">
        <object width="900" height="700" class="mt5-m mt10rem-s mt5-l w-100-m right--2-l right--2-m left--20-s absolute z-negative" data="dataweb/image/herofull.svg" type="image/svg+xml"></object>
    </div>
   
    <div class="new-blob-bg">
        <object class="left-0 bottom-0 absolute z-negative o-0 o-100-l" data="https://bloger.web.id/edu/dataweb/image/new_blob.svg" type="image/svg+xml"></object>
    </div>
    <div class="hero-content ph5-l ph5-m flex-column tc-m tl-l tc-ns tc">
        <div class="logo-container mt5-l">
            <a class="no-underline" href="https://bloger.web.id/home"><img class="w-40 w-10-l" src="dataweb/image/smart-01.png"></a>
            <!-- <img class="mw3 ml4" src="dataweb/halal.png"> --------
        </div>
        <div class="hero-copy sedu-primary dosis pt4 f3 f3-ns f3-m f2-l z-1">A beyond learning experiences awaits !!<br>Menjadikan Dunia Belajar<br>Lebih seru dari main game<br></div>
        <div class="hero-button pt5 z-1 "><a href="https://bloger.web.id/location" class="button-primary dosis pa4">Temukan Kami</a></div>
    </div>
    -------------------------
</div>
-->
 
  <!--
  <img src="dataweb/bgrelawan.jpg" style="  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 99%;">
  <br/>
  --> 
        <!-- <div style="border-radius: 25px; border: 3px solid #999; background-color: white;  opacity: 0.8; padding: 5px 20px 20px 20px; width: 80%;  margin-left: auto; margin-right: auto;"> -->
        <div class="dosis" style="border-radius: 25px; background-color: white;  opacity: 0.8; padding: 30px 20px 20px 20px; width: 80%;  margin-left: auto; margin-right: auto;">
         <!--
         <p style="text-align: justify; font-size:25px;">
         Mari turut serta dalam kegiatan kerelawanan yang diadakan di Yayasan Payon Citi dengan mengisi formulir pendaftaran relawan dibawah ini.  
         </p>
         -->   

                <DIV class="common_table">
                   <DIV>
                        <DIV>
                            <p>
                            <img src="dataweb/kegiatan1.jpg" alt="Kegiatan Payon" style="width:120px;height:120px; margin-right:15px; float: left;">
                            <b>
                                <a href="https://www.instagram.com/reel/Cpb2VH1paSi/?igshid=YmMyMTA2M2Y=" target="_blank" style="text-decoration:none;">
                                Keutamaan Sedekah
                                </a>
                            </b>
                                <!--
                                <p style="font-size:12px;">
                                    Depok, 18 Februari 2023
                                </p>
                                -->
                            </p>
                        </DIV>
                        <DIV>
                            <p>
                            <img src="dataweb/kegiatan2.jpg" alt="Kegiatan Payon" style="width:120px;height:120px; margin-right:15px; float: left;">
                            <b>
                                <a href="https://www.instagram.com/p/CgwZ7GrhH5j/?igshid=YmMyMTA2M2Y=" target="_blank" style="text-decoration:none;">
                                Zakat Maal Untuk Mensucikan Harta
                                </a>
                            </b> 
                            </p>
                        </DIV>
                        <DIV>
                            <p>
                            <img src="dataweb/kegiatan1.jpg" alt="Kegiatan Payon" style="width:120px;height:120px; margin-right:15px; float: left;">
                            <b>
                                <a href="https://www.instagram.com/reel/Cpb2VH1paSi/?igshid=YmMyMTA2M2Y=" target="_blank" style="text-decoration:none;">
                                Keutamaan Sedekah
                                </a>
                            </b> 
                            </p>
                        </DIV>
                   </DIV>  
                </DIV> 
                   
                <!-- baris dua -------------------------
                
                <DIV class="common_table">
                   <DIV>
                        <DIV>
                            <p>
                            <img src="dataweb/kegiatan1.jpg" alt="Kegiatan Payon" style="width:120px;height:120px; margin-right:15px; float: left;">
                            <b>
                                <a href="https://www.instagram.com/reel/Cpb2VH1paSi/?igshid=YmMyMTA2M2Y=" target="_blank" style="text-decoration:none;">
                                Keutamaan Sedekah
                                </a>
                            </b> 
                            </p>
                        </DIV>
                        <DIV>
                            <p>
                            <img src="dataweb/kegiatan2.jpg" alt="Kegiatan Payon" style="width:120px;height:120px; margin-right:15px; float: left;">
                            <b>
                                <a href="https://www.instagram.com/p/CgwZ7GrhH5j/?igshid=YmMyMTA2M2Y=" target="_blank" style="text-decoration:none;">
                                Zakat Maal Untuk Mensucikan Harta
                                </a>
                            </b> 
                            </p>
                        </DIV>
                        <DIV>
                            <p>
                            <img src="dataweb/artikel/transparan.png" alt="Kegiatan Payon" style="width:120px;height:120px; margin-right:15px; float: left;">
                            <b>
                                <a href="https://www.instagram.com/reel/Cpb2VH1paSi/?igshid=YmMyMTA2M2Y=" target="_blank" style="text-decoration:none;">
                                &nbsp;
                                </a>
                            </b> 
                            </p>
                        </DIV>
                   </DIV>  
                </DIV>
                -->
        </div>
  
  
  <!--
  <img src="dataweb/bgjannah.png" style="  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 99%;">
  <br/>
  -->
  
 <div section="qualities" class="flex flex-column tc-m tc-l tc-ns tc">
     <!--
     <div class="scrollme o-0 achievements-header sedu-primary dosis f2 f2-ns f2-m f2-l pa3 w-100 w-100-ns w-50-m w-50-l m-auto" data-when="enter" data-from="0.5" data-to="0" data-translatey="-200" data-opacity="0" style="opacity: 0.88; transform: translate3d(0px, -23px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">
    
       <!--<img src="dataweb/pyatas.jpg"><br/> -->
       <!-- "Karena Keagungan Allah bermula dari penciptaan semesta-NYa"-----
    </div>
    -->
    
</div>

        <!-- YOUTUBE
        <div class="containerz">
           <div class="kolom" style=" margin: 0 auto; display:block;">
             <!-- https://youtu.be/_RzyDPImGH4  https://www.youtube.com/watch?v=_RzyDPImGH4&feature=youtu.be   hero https://www.youtube.com/embed/jIOcALlf7VA?autoplay=0&mute=1&rel=0 ------
            <p align="center">
                <!--<iframe data-u="image" width="550px" height="350px" src="https://www.youtube.com/embed/jIOcALlf7VA?autoplay=0&mute=1&rel=0" style="border: none;padding: 0px 0px 0px 70px;"></iframe>--------
                <iframe data-u="image" width="65%" height="400px" src="https://www.youtube.com/embed/jIOcALlf7VA" allowfullscreen style="border: none;padding: 0px 0px 0px 70px;"></iframe>
            </p>
          </div>
        </div>
        -->

          
<!-- <div class="hero-bg-decoy pt6 pt6-ns pt6-m pt0-l mt10rem-s o-0 vh-50-ns vh-75 right-0 "></div> -->
<div section="qualities" class="flex flex-column tc-m tc-l tc-ns tc">
    <!--
    boy_air_skye
    girl_fire_flarion
    boy_stone_rocky
    boy_water_brizzo
    girl_water_aruna
    girl_air_aura
    boy_fire_blaze
    girl_stone_rhea
    <div class="scrollme animateme o-0 achievements-header sedu-primary dosis f2 f2-ns f2-m f2-l pa3 w-100 w-100-ns w-50-m w-50-l m-auto" data-when="enter" data-from="0.5" data-to="0" data-translatey="-200" data-opacity="0" style="opacity: 0.88; transform: translate3d(0px, -23px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">
    -->
    
    <!--
    <div class="scrollme o-0 achievements-header sedu-primary dosis f2 f2-ns f2-m f2-l pa3 w-100 w-100-ns w-50-m w-50-l m-auto" data-when="enter" data-from="0.5" data-to="0" data-translatey="-200" data-opacity="0" style="opacity: 0.88; transform: translate3d(0px, -23px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">
        <br/>  
        <div style="border-radius: 25px; background-color: white;  opacity: 0.8; padding: 30px;">
         <!--
         <p style="text-align: justify; font-size:25px;">
         Mari turut serta dalam kegiatan kerelawanan yang diadakan di Yayasan Payon Citi dengan mengisi formulir pendaftaran relawan dibawah ini.  
         </p>
         -----------------
         
         <p style="text-align: left;"> 
           <!--
           <form style="font-size:20px;" action="" method="post">

                <DIV class="common_table">
                   <DIV><DIV>Nama Lengkap</DIV><DIV> : </DIV><DIV> <input type="text" name="namalengkap"/></DIV></DIV>
                   <DIV><DIV>Nama Panggilan</DIV><DIV> : </DIV><DIV> <input type="text" name="namapanggilan" /></DIV></DIV>
                   <DIV><DIV>Alamat</DIV><DIV> : </DIV><DIV> <input type="text" name="alamat" /></DIV></DIV>
                   <DIV><DIV>Email</DIV><DIV> : </DIV><DIV> <input type="text" name="email" /></DIV></DIV>
                   <DIV><DIV>No. HP</DIV><DIV> : </DIV><DIV> <input type="text" name="nohp" /></DIV></DIV>
                   
                   <DIV><DIV style="vertical-align: top;">Alasan Menjadi Relawan</DIV><DIV style="vertical-align: top;"> : </DIV><DIV> <textarea rows="4" cols="20" name="alasan"></textarea></DIV></DIV>
                </DIV>
                 
              <!--
              <label for="username">Nama Lengkap:</label>
              <input type="text" name="namalengkap" id="username" />
              <label for="password">Password:</label>
              <input type="password" name="password" id="password" /> 
              --------
              <br/><br/><input type="submit" value="Daftar Relawan" />  
            </form> 
            -->
            <!-- <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSesWQRsprQsnW-GLu2eF9vSdPtvcNmNn2QwuVg3V13ZMaZQ1Q/viewform?embedded=true" width="500" height="1082" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> -->

         </p>
         <!--
         <p style="text-align: center; font-size:21px;">
           "karena setiap aksi kecil dari kita akan sangat berarti bagi mereka"
         </p> 
        </div>
        ----
    </div> --> 
</div>

<!--
<section id="boy_air_skye">
<!-- Disable buble <div class="left-0 absolute z-negative"><object data="dataweb/image/slds_container_skye.svg" type="image/svg+xml" class="balons1"></object></div> ------
<div section="products-silky-dessert" class="scrollme flex flex-wrap ma2 mt6 tc-m tl-l tc-ns tc">
    <div class="animateme silky-dessert-image w-80 w-80-ns w-100-m w-40-l mr-auto-ns ml-auto-ns mr-auto ml-auto mh0-l o-0" data-when="enter" data-from="1" data-to="0.5" data-translatex="-200" data-opacity="0" style="opacity: 0; transform: translate3d(-200px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">
        <img class="w-50-m karaktr" src="dataweb/program_satu.png">
    </div>
    <div class="animateme o-0 silky-dessert-content w-100 w-100-ns mt6 w-100-m w-40-l ph5 pt3 m-auto flex flex-column" data-when="enter" data-from="1" data-to="0.5" data-translatex="200" data-opacity="0" style="opacity: 0; transform: translate3d(200px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">
        <div style="border-radius: 25px; background-color: white;  opacity: 0.8; padding: 30px;">
        <div class="silky-dessert-content-header sedu-primary dosis f2 f2-ns f2-m f2-l"><span style="font-size:30px;">Pendidikan Dan Keagamaan</span></div><!--Boy Air Skye-------
        <div class="silky-dessert-content-body open-sans sedu-primary f6 lh-extra mw6-l mw5-m mw5-ns mw5 pt4 mr-auto m-auto-m">
            
            <p style="text-align: justify;">
            Dalam rangka mendukung Pemerintah untuk menaikkan tingkat pendidikan di semua level masyarakat, 
            Yayasan Payon Citi ikut aktif dalam kegiatan pendidikan dan 
            keagamaan khususnya untuk anak-anak Indonesia yang kurang beruntung secara ekonomi dan kehidupan</p>
            <p style="text-align: justify;">
            <!-- 
            <span style="font-weight:bold;font-size:20px;" class="f2 f2-ns f2-m f2-l">Tornado</span><br/>
            <img src="https://smartadventure.id/dataweb/image/tornado.png" alt="tes" style="width:80px;height:80px; margin-left: 2px; float: right;">
            -----
            Melalui program Rumah Belajar & Tahfidz Yatim Dhuafa serta Pondok Qur’an Al-Ghifari Ciangsana, 
            Yayasan Payon Citi berharap dapat  membangun mental dan karakter siswa Yatim Duafa 
            agar kelak mereka dapat menjadi pribadi yang taat kepada Allah, cerdas dan mandiri. 
            </p>  
            <!--<p><span style="font-weight:bold;font-size:20px;" class="f2 f2-ns f2-m f2-l">Special Ability</span><br/>Serangan angin topan yang buat. Dapat menyerang dan menerbangkan lawan.</p>------
        </div>
        </div>
        <!-- <div class="silky-dessert-content-button pt4"><a href="https://bloger.web.id/edu" class="button-primary dosis pa2">Detail</a></div> -----
    </div>
</div>
</section>
-->

<!---
<div section="footer" class="flex flex-column relative mt5">
    <div class="nb4 w-100 z-negative absolute vh-30-l vh-50 bottom-0 bg-footer"></div>
    <div class="vh-30-l vh-10"></div>
    <div class="mh5-l mh4-m mh3 tl-l tc"></div>
    <div class="f6 flex flex-wrap mh5-l mh4-m mh3 items-start-ns items-center tl-l tc">
        <div class="mt3 w-50-l  w-100 open-sans white lh-copy">
        <div style="margin-top:100px;">
                
            <p style="line-height: 1.1;">
            <span class="link dim white open-sans" style="font-size:13px; color: #fff;">Contact Us : </span><br>
            <a href="tel:0822833833" class="link dim white mr1" target="_blank" style="font-size:11px;">
                <span><i class="fa fa-phone"></i></span>
            </a>
            <a href="https://wa.me/628118771007" class="link dim white" target="_blank">
                <span>
                <a style="text-decoration:none; color:#ffffff; font-size:11px;" href="https://api.whatsapp.com/send?phone=087889636705&text=Halo%21%20Selamat%20Datang.">
                    <!-- <i class="fa fa-whatsapp"></i></span> ------------------- &nbsp; +6281222294341 
                </a>
            </a><br>
            <a class="link dim white open-sans" href="mailto:revolusibelajar4.0@gmail.com" target="_top" style="font-size:11px;">
                <span><i class="fa fa-envelope"></i></span>&nbsp; revolusibelajar4.0@gmail.com <br>
            </a>
             
            <a class="link dim white open-sans" href="https://www.instagram.com/revolusibelajar4.0/" target="_top" style="font-size:11px;">
                <span><i class="fa fa-instagram"></i></span>&nbsp; @revolusibelajar4.0<br>
            </a> 
            <a class="link dim white open-sans" href="https://www.facebook.com/smartadventure.id" target="_top" style="font-size:11px;">
                <span><i class="fa fa-facebook"></i></span>&nbsp; smartadventure.id<br>
            </a>
            <a class="link dim white open-sans" href="https://www.youtube.com/c/RevolusiBelajar" target="_top" style="font-size:11px;">
                <span><i class="fa fa-youtube"></i></span>&nbsp; revolusibelajar<br>
            </a> 
            <a class="link dim white open-sans" href="https://goo.gl/maps/6LywUq21dBZH3DWC9" target="_top" style="font-size:11px;">
                <span><i class="fa fa-home"></i></span>&nbsp; Arjuna 89, Depok. Kel Mekarjaya Kec Sukmajaya, Jawa Barat<br>
            </a>  
            </p>  
            </div>
            
            <!--
            <a href="https://www.tiktok.com/@revolusibelajar" class="fa link dim white fa-tiktok ml1" target="_blank"></a>
            <a href="https://www.youtube.com/c/RevolusiBelajar" class="fa link dim white fa-youtube ml1" target="_blank"></a>
            <a href="https://www.instagram.com/@revolusibelajar4.0/?hl=en" class="fa link dim white fa-instagram ml1" target="_blank"></a>
            -----------------------------
        </div>
        <div class="w-20-l w-100 mt3 flex-column"></div>
        <!--
        <div class="w-30-l w-100 open-sans tr-l tc mt0-l mt3 mb3 block">
            <a href="https://smartadventure.id/career" class="link dim white mt1 footer-nav">Careers at Smartedu</a>
            <!--<img height="80px" width="80px" src="dataweb/halal.png
        </div>
        ---------------------------
        <div style="padding-top:1px; width: 100%; line-height:1px;">
            <div style="text-align: center;"> 
            <div class="open-sans" style="color: #fff; padding:bottom:5px;font-size:12px;">Support By : </div>
                <a href="https://bimbeltikitaka.com" style="border-radius: 1px; text-decoration:none;">
                 <img src="dataweb/image/bimbeltikitaka.png" style="height:41px;">
                </a>
                <br/>
                <span class="link dim white open-sans" style="font-size:11px;">&copy; Smart Adventure. All Rights Reserved PT. Revolusi Belajar Indonesia</span>
            </div>
        </div>
    </div>
</div> 

-->

<script type="text/javascript">
	// optional
	$('#blogCarousel').carousel({
		interval: 3000
	});	
</script>

<script src="dataweb/block-slider.min.js"></script>
<script>
  BlockSlider(document.getElementById('block-slider'), {
      sInterval: 2000,
      sTransition: 400,
  });
</script>

<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>