/*!
Theme Name: GKI Serpong
Theme URI: https://gkiserpong.org
Author: Webdesaint
Author URI: https://webdesaint.com
Text Domain: gkiserpong
*/


/* WORDPRESS
========================================================== */
.alignnone {margin: 5px 20px 20px 0;}
.aligncenter,
div.aligncenter {display: block; margin: 5px auto 5px auto;}
.alignright {float: right; margin: 5px 0 20px 20px;}
.alignleft {float: left; margin: 5px 20px 20px 0;}

a img.alignright {float: right; margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float: left; margin: 5px 20px 20px 0;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}

.wp-caption {max-width: 96%; padding: 5px 3px 10px; text-align: center;}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto;}
.wp-caption p.wp-caption-text {font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px;}

.gallery-item {display: inline-block; text-align: left; vertical-align: top; width: 50%;}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {-webkit-box-shadow: none; box-shadow: none; background: none; display: inline-block; max-width: 100%;}
.gallery-item a img {display: block; -webkit-transition: -webkit-filter 0.2s ease-in; transition: -webkit-filter 0.2s ease-in; transition: filter 0.2s ease-in; transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.gallery-item a:hover img,
.gallery-item a:focus img {-webkit-filter: opacity(60%); filter: opacity(60%);}

.gallery-caption {display: block; text-align: left; padding: 0 10px 0 0; margin-bottom: 0;}

.gallery-columns-1 .gallery-item {max-width: 100%;}
.gallery-columns-2 .gallery-item {max-width: 50%;}
.gallery-columns-3 .gallery-item {max-width: 33%;}
.gallery-columns-4 .gallery-item {max-width: 25%;}
.gallery-columns-5 .gallery-item {max-width: 20%;}
.gallery-columns-6 .gallery-item {max-width: 16.66%;}
.gallery-columns-7 .gallery-item {max-width: 14.28%;}
.gallery-columns-8 .gallery-item {max-width: 12.5%;}
.gallery-columns-9 .gallery-item {max-width: 11.11%;}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {display: none;}

/* GENERAL
========================================================== */
body{font-family:'Roboto', sans-serif; font-size:14px}

#main{min-height:500px; margin:0}

.form-control{font-size:14px}

a{color:#D19A7A; transition: all 0.2s ease;}

/* Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.section:before,
.section:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {content: ""; display: table; table-layout: fixed;}

.clear:after,
.section:after,
.site-header:after,
.site-content:after,
.site-footer:after {clear: both;}

/* HEADER
========================================================== */
/* Top Header */
#top-header{padding:5px 0; width:100%}
#top-header .container{display:flex; justify-content:center;}
#top-header .navbar-brand {text-align:center}
#top-header .navbar-brand img{height:50px; margin:0 0 5px}
#top-header .navbar-brand span{font-family:'Roboto', sans-serif; font-size:16px; font-weight:700; text-transform:uppercase}

@media (max-width:767px){
    #top-header .navbar-brand img{height:60px}
    #top-header .navbar-brand span{font-size:15px}
}

/* Nav Bar */
#nav-header{background:#D19A7A; padding:0; width:100%}
#nav-header .container{position:relative}

/* Nav Menu */
#nav-header #navbar{order:2}
#nav-header .navbar-nav{display:flex; justify-content:space-between; margin-right:30px; width:100%; position:relative}
#nav-header .navbar-nav .nav-link{font-family:'Raleway', sans-serif; font-size:16px; font-weight:700; padding:10px 15px; text-transform:uppercase; position:relative}
/* #nav-header .navbar-nav .nav-link.active:after{background:#000; content:''; display:block; height:3px; width:100%; position:absolute; bottom:0; left:0} */
#nav-header .navbar-nav .dropdown-menu{background:#D19A7A; border-radius:0; border:0; margin-top:0; padding:0}
#nav-header .navbar-nav .dropdown-menu .dropdown-item{font-family:'Raleway', sans-serif; font-weight:600;}
#nav-header .navbar-nav .dropdown-menu .dropdown-item:focus, 
#nav-header .navbar-nav .dropdown-menu .dropdown-item:hover,
#nav-header .navbar-nav .dropdown-menu .dropdown-item.active{background:#B5856A; color:#000}

#nav-header .navbar-toggler{border:0; padding:10px 0;}
#nav-header .navbar-toggler:focus{outline:0; box-shadow:none; -webkit-box-shadow:none}

.fancy {position: absolute; bottom: 0; height: 3px; background-color: #000; transition: all 0.3s ease-out; display: none;}

@media (max-width:767px){
    #nav-header #navbar{order:3}
    #nav-header .navbar-nav .nav-link{padding:5px 0; text-align:center;}
    #nav-header .navbar-nav .dropdown-menu{box-shadow:none;}
    #nav-header .navbar-nav .dropdown-menu .dropdown-item{padding:5px 0; text-align:center;}
    .fancy{display:none!important}
}

/* Search Form */
#nav-header #search-toggle{border:0; background:transparent; padding:10px 0; order:3}

#nav-header #search-bar{background:#D19A7A; display:none; position:absolute; top:40px; right:0; padding:10px; z-index:99}
#nav-header #search-bar .search-form{background:#fff; border-radius:5px; overflow:hidden; display:flex}
#nav-header #search-bar .search-form .form-control{border:0; border-radius:0}
#nav-header #search-bar .search-form .form-control:focus{border:0; outline:0; box-shadow:none; -webkit-box-shadow:none}
#nav-header #search-bar .search-form .form-control:focus-visible{outline:0}
#nav-header #search-bar .search-form button{background:#a76331; border:0; color:#fff; padding:5px 12px}

@media (max-width:767px){
    #nav-header #search-toggle{order:2}
}

/* SINGLE PAGE
========================================================== */
#page-detail{padding:30px 0}

.page-title{font-family:'Raleway', sans-serif; font-size:26px; font-weight:700; margin:0 0 20px; text-transform:uppercase}

.foto-gallery-slider{float:left; width:100%}
.foto-gallery-slider .slick-slide img{height:auto; width:100%}
.foto-gallery-slider .slick-prev{left:30px; z-index:9}
.foto-gallery-slider .slick-next{right:30px; z-index:9}
.foto-gallery-slider .slick-prev:before, 
.foto-gallery-slider .slick-next:before{font-size:40px}
.foto-gallery-slider .slick-dots{bottom:20px}
.foto-gallery-slider .slick-dots li button:before{color:#fff; font-size:16px}
.foto-gallery-slider .slick-dots li.slick-active button:before{color:#fff;}

.custom-breadcrumbs{border-bottom:1px solid #000; margin:0 0 15px; padding:0 0 15px}
.custom-breadcrumbs a{color:#000}

.post-meta {float:left; margin:-10px 0 20px; width:100%}
.post-meta .post-date{margin:0 5px 0 0}
.post-meta .views-count{margin:0 5px 0 0}
.post-meta .comment{margin:0 5px 0 0}
.post-meta .like-post-btn{background:#fff; border:0; margin:0 5px 0 0; padding:0; }
.post-meta .like-post-btn:disabled{color:red; opacity:1}
.post-meta .sharethis-inline-share-buttons {display:inline!important; margin:0 0 0 -2px!important;}
.post-meta .sharethis-inline-share-buttons .st-btn{height:19px!important; padding:0!important;}
.post-meta .sharethis-inline-share-buttons .st-btn:hover{top:0!important;}
.post-meta .sharethis-inline-share-buttons .st-btn img{top:2px!important;}
.post-meta .share{background:transparent; border:0; padding:0}
.post-meta .share-options{list-style:none; margin:0; padding:0; text-align:center}
.post-meta .share-options li{display:inline; margin:0 5px}
.post-meta .share-options li a{color:#000; font-size:30px}
.post-meta .share-options li a:hover{color:#c69c7f;}


/* Comment */
#comments{float:left; margin-top:0; width:100%}

#comments-title{border-top:1px solid #000; border-bottom:1px solid #000; font-size:16px; margin:0 0 20px; padding:15px 0; text-transform:uppercase}

.commentlist {padding:0!important; width:100%!important}
.commentlist>li.comment{border-bottom: 1px solid #dee2e6; padding:0 0 15px!important; margin:0 0 15px!important;}
.commentlist>li.comment .comment-author a{color:#000}
.commentlist>li.comment .comment-wilayah{margin:-10px 0 10px}

.btn-submit-comment{background:#000; border:0; color:#fff; font-size:14px; padding:10px 20px; border-radius:5px}

/* ARCHIVES
========================================================== */
#page-archive{padding:30px 0}

/* PARTS
========================================================== */
.block-area{float:left; margin:0 0 30px; width:100%}
.block-area .block-title{border-bottom:5px solid #000; float:left; margin:0 0 20px; width:100%}
.block-area .block-title h2{background:#000; color:#fff; font-family:'Raleway', sans-serif; font-size:14px; font-weight:600; float:left; margin:0; padding:8px 30px 3px; text-transform:uppercase}
.block-area .block-title .nav-tabs{border:0; float:left; margin:0 0 0 20px}
.block-area .block-title .nav-tabs .nav-item{margin-right:20px}
.block-area .block-title .nav-tabs .nav-item:last-child{margin-right:0}
.block-area .block-title .nav-tabs .nav-link{border:0; color:#A0A0A0; font-size:16px; font-weight:700; border-radius:0; padding:0}
.block-area .block-title .nav-tabs .nav-link.active{color:#000}
.block-area .block-content{float:left; width:100%}

.social-media{list-style:none; margin:0; padding:0}
.social-media li{float:left; margin:0 0 20px; width:100%}
.social-media li:last-child{margin:0}
.social-media li a{background:#aaa; color:#fff; display:flex; align-items:center; gap:15px; float:left; text-transform:uppercase; width:100%; padding:10px 15px}
.social-media li a div{display:flex; align-items:center; justify-content: space-between; gap:15px; width:100%}
.social-media li a img{height:40px}
.social-media li a.instagram{background:#CC6CE5}
.social-media li a.youtube{background:#0097B2}
.social-media li a.facebook{background:#36B7FF}
.social-media li a.x{background:#5070FF}
.social-media li a.tiktok{background:#03BF62}

.post-list{float:left; margin:0 0 20px; width:100%}
.post-list .row>*{padding-left:10px; padding-right:10px}
.post-list .thumbnail{border-radius:5px; float:left; overflow: hidden; width:100%; position: relative; aspect-ratio: 16/9; }
.post-list .thumbnail img{float:left; transition: transform 0.5s ease; display: block; width:100%; height: 100%; object-fit: cover;}
.post-list:hover .thumbnail img {transform: scale(1.3);}
.post-list h3{font-family:'Raleway', sans-serif; font-size:16px; font-weight:700; margin:0 0 10px}
.post-list h3 a{color:#000; }
.post-list p{margin:0}
.post-list .post-meta{margin:0 0 10px}

.kegiatan-gereja{list-style:none; margin:0; padding:0}
.kegiatan-gereja li{border-bottom:1px solid #ddd; float:left; width:100%}
.kegiatan-gereja li a{color:#000; float:left; width:100%; padding:5px 0}

.rh-archive h2, 
.rh-archive h3 {cursor: pointer; margin:0; padding:0; display: flex; align-items: center; gap: 5px;}
.rh-archive h2 {font-size:16px; font-weight:700;}
.rh-archive h3 {font-size:16px; font-weight:500; padding-left: 15px;}
.rh-archive ul {list-style:disc; margin:0 0 10px; padding:0 0 0 35px;}
.rh-archive ul a{color:#000}

.komisi-komisi{list-style:none; margin:0; padding:0}
.komisi-komisi li{margin:0 0 10px}
.komisi-komisi li ul{list-style:disc; margin:10px 0 0; padding:0 0 0 20px}
.komisi-komisi li ul li{margin:0 0 5px}
.komisi-komisi a{color:#000}
.komisi-komisi a:hover{text-decoration:underline}

.video-list iframe{margin:0 0 10px; width:100%; height:150px}
.video-list h4{font-size:16px; text-align:center}

.foto-list .thumbnail{border-radius:5px; float:left; overflow: hidden; width:100%; position: relative; aspect-ratio: 16/9; }
.foto-list .thumbnail img{float:left; transition: transform 0.5s ease; display: block; width:100%; height: 100%; object-fit: cover;}
.foto-list h4{font-size:16px; text-align:center}

/* HERO
========================================================== */
#hero{padding:30px 0; position:relative; min-height:500px; width:100%}
#hero .container{position:relative}
#hero .container .row{margin-left:-5px; margin-right:-5px}
#hero .container .row > *{padding-left:5px; padding-right:5px}
#hero .bg-hero{background:#EDE4DA; content:''; display:block; height:500px; width:100%; position:absolute; top:0; left:0;}
#hero .tagline{color:#B65F23; font-family:'Archivo', sans-serif; font-size:55px; font-weight:700; text-transform:uppercase; text-align:center; text-shadow:0 0 5px rgba(0,0,0,0.2)}
#hero .ayat{font-family:'Roboto', sans-serif; font-weight:300; font-size:28px; letter-spacing:4px; text-align:center; text-transform:uppercase}

#hero .hero-instagram{border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.4); float:left; height:610px; overflow:hidden; margin:0 0 10px; position:relative; width:100%}
#hero .hero-instagram .label{background:#000; color:#fff; font-family:'Raleway', sans-serif; font-weight:600; padding:5px 30px; text-transform:uppercase; position:absolute; top:20px; right:15px;}

#hero .hero-ibadah-online{border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.4); float:left; height:400px; overflow:hidden; margin:0 0 10px; position:relative; width:100%}
#hero .hero-ibadah-online .label{background:#000; color:#fff; font-family:'Raleway', sans-serif; font-weight:600; padding:5px 30px; text-transform:uppercase; position:absolute; top:20px; right:15px;}
#hero .hero-ibadah-online iframe{height:100%; width:100%}

#hero .hero-foto{border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.4); float:left; height:200px; overflow:hidden; margin:0 0 10px;position:relative; width:100%}
#hero .hero-foto .label{background:#000; color:#fff; font-family:'Raleway', sans-serif; font-weight:600; padding:5px 30px; text-transform:uppercase; position:absolute; bottom:20px; right:15px;}

#hero .hero-video{border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.4); float:left; height:200px; overflow:hidden; margin:0 0 10px; position:relative; width:100%}
#hero .hero-video .label{background:#000; color:#fff; font-family:'Raleway', sans-serif; font-weight:600; padding:5px 30px; text-transform:uppercase; position:absolute; bottom:20px; right:15px;}

#home-content{padding:30px 0}

@media (max-width:991px){
    #hero .tagline{font-size:30px}
}
@media (max-width:767px){
    #hero .tagline{font-size:24px}
    #hero .ayat{font-size:18px; letter-spacing:2px;}
}

/* PAGINATION
========================================================== */
.pagination{gap:10px; justify-content:center}
.pagination a{color:#000}
.pagination .current{color:#c69c7f}

/* FOOTER
========================================================== */
#top-footer{background:#EDE4DA; padding:40px 0 20px}
#top-footer h4{font-size:18px; font-weight:600; margin:0 0 15px; text-transform:uppercase;}
#top-footer p{margin-top:0; margin-bottom:10px}
#top-footer a{color:#9A725A}
#top-footer .qris{height:100px; width:auto; margin:0 0 30px}
#top-footer .play-store{height:40px; margin:0; width:auto;}
#top-footer .app-store{height:40px; margin:0; width:auto;}
#top-footer .post-list h3 {font-size:14px; margin:0 0 5px}
#top-footer .post-list h3 a{color:#000; }
#top-footer .post-list p{margin:0}

#copyright{background:#D19A7A; padding:10px 0}
#copyright p{margin:0}