/*
Theme Name: BBGPJABAR
Version: 1.0
Text Domain: bbgpjabar
*/

/*  Normalize
--------------------------------------------------------------*/
body {margin: 0; -webkit-font-smoothing: auto;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block;}
audio,
canvas,
progress,
video {display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}
[hidden],
template {display: none;}
a {background-color: transparent;}
a:active,
a:hover {outline: 0;}
dfn {font-style: italic;}
mark {background: #ff0; color: #000;}
small {font-size: 80%;}
sub,
sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
figure {margin: 1em 2.5rem;}
hr {box-sizing: content-box; height: 0;}
button {overflow: visible;}
button,
select {text-transform: none;}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled],
html input[disabled] {cursor: default;}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}
input[type="checkbox"],
input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {border: 0; padding: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse; border-spacing: 0;}
td,
th {padding: 0;}

.nav-tabs .nav-link{border-radius:0}

/*Elements
--------------------------------------------------------------*/
html{overflow-x:hidden}
body {background: #fff; font-family:'Poppins', sans-serif; font-size:16px; font-weight:400; line-height:1.6; overflow-x:hidden}
body.mobile-menu-active{overflow:hidden; }
body.mobile-menu-active:before{background:rgba(0,0,0,0.4); content:''; display:block; height:100%; position:fixed; top:0; left:0; width:100%; z-index:9999;}
img {height: auto; max-width: 100%;}
figure {margin: 1em 0;}
table {margin: 0 0 30px; width: 100%;}
button:focus{outline:0}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {clear: both; font-weight:400; margin-bottom: 15px;}
h1 {font-size: 32px;}
h2 {font-size: 24px; line-height: 1.25;}
h3 {font-size: 18px; line-height: 25px;}
h4 {font-size: 16px; line-height: 20px;}
h5 {font-size: 14px; line-height: 17.5px;}

p {margin-bottom:15px;}

a{color:#3366CC; text-decoration:none}
a:hover{text-decoration:none}

/* Header
--------------------------------------------------------------*/
header#masthead {background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); margin:0; padding:0; position:relative; z-index:999}

/* Top Bar */
#top-bar{background:#3366CC; color:#fff; font-size:13px; padding:10px 0; width:100%}
#top-bar p{margin:0}
#top-bar p a{margin:0 15px 0 0;}
#top-bar p a i{background:#fff; border-radius:50px; color:#3366CC; font-size:10px; line-height:18px; height:18px; margin:0 5px 0 0; text-align:center; width:18px}
#top-bar ul{list-style:none; margin:0; padding:0; float:right}
#top-bar li{border-left:1px solid #fff; display:inline-block; font-size:13px; line-height:14px; padding:0 10px}
#top-bar li:first-child{border:0}
#top-bar a{color:#fff; padding:0}

/* Main Header */
#main-header{padding:0;}

/* Logo */
.navbar-brand {height: auto; margin:0; padding:0;}
.navbar-brand a {display:flex; align-items:center}
.navbar-brand a img{height:50px; margin:0 10px 0 0; width:auto}
.navbar-brand a h1{font-size:24px; font-weight:700; margin:0}
.navbar-brand a h4{font-weight:400; margin:0}

/* Button */
.header-buttons{list-style:none; margin:4px 0 0; padding:0}
.header-buttons li{display:inline-block; margin:0; padding:0; position:relative}
.header-buttons li:first-child{border-right:1px solid #666; margin:0 10px 0 0; padding:0 10px 0 0;}

.btn-toggle-zoom-text{background:transparent; border:0; font-size:20px; padding:0}

.btn-toggle-search-form{background:transparent; border:0; padding:0}
.btn-toggle-search-form img{height:20px; margin:-4px 0 0;}

/* Increase Dicrease font size */
#resize-text-area{background:#DDDDDD; border-radius:10px; display:none; font-size:20px; position:absolute; padding:10px 10px; left: -13px; top: 46px; text-align: center;}
#resize-text-area button{background:transparent; border:0;}
#resize-text-area .bar{background: rgb(12,129,245); background: linear-gradient(0deg, rgba(12,129,245,1) 0%, rgba(12,129,245,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); content:''; display:block; height:100px; margin:10px auto; width:20px}

#resize-text-area a{font-size:24px; color:#888; display:block; font-weight:bold; padding: 5px;}
#resize-text-area a:hover{color:#fff; background:#0988FB; transition:.25s ease-out;}
#resize-text-area a.selected  {background:#0988FB; color:#fff !important;}

#tiny     {font-size:8px!important; line-height:8px!important;}
#small     {font-size:11px!important; line-height:11px!important;}
#medium    {font-size:14px!important; line-height:14px!important;}
#large     {font-size:17px!important; line-height:17px!important;}
#max       {font-size:20px!important; line-height:20px!important;}

/* Search Form */
#search-form-area{background:#E5F1FD; display:none; padding:15px 0; position:absolute; top:127px; left:0; width:100%; z-index: 99;}
#search-form-area .search-form{display:flex; margin:0 auto; max-width:100%; width:600px;}
#search-form-area .search-form label{margin:0}
#search-form-area .search-form input[type="search"]{background:#fff url('images/icon-search.png') 15px 11px no-repeat; border:0; height:auto; padding:10px 15px 10px 40px; border-radius:20px 0 0 20px; background-size:16px 16px;}
#search-form-area .search-form button{background:#3166CC; border:0; color:#fff; font-size:16px; padding:5px 20px 5px 15px; width:100px; border-radius:0 20px 20px 0}
#search-form-area .search-form button img{margin:-3px 5px 0 0}

/* Menus
--------------------------------------------------------------*/
#masthead nav {padding-left: 0; padding-right: 0;}
#masthead .navbar-nav{text-align:center}
#masthead .navbar-nav > li {display:inherit; position:relative}
#masthead .navbar-nav > li > a {border-bottom:2px solid transparent; color:#111; font-weight:500; padding:35px 10px 25px;}
#masthead .navbar-nav > li.active > a {background:#CDE6FD; border-bottom:2px solid #3265CE; color: #3265CE;}
#masthead .navbar-nav .dropdown-toggle::after {display:none}

.navbar-toggle .icon-bar {background: #000 none repeat scroll 0 0;}

.dropdown-menu .dropdown-toggle::after {border-bottom: 0.3em solid transparent; border-left: 0.3em solid; border-top: 0.3em solid transparent;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {position: relative;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {display: block;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after {display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {border-left-color: #fff;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {float: none;}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu {left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px;}

/* Mobile Menu */
#sideMenu{background:transparent; border:0; cursor:pointer; display:none; color:#024AAD; font-size:30px; padding:0}

#sideMenuContainer {background: #fff; height: 100%; padding:0; position: fixed; top:0; right:-300px; width: 300px; z-index: 999999;}
#sideMenuContainer .top-menu{list-style:none; float:left; margin:20px 0 15px; padding:0 20px; text-align:right; width:100%}
#sideMenuContainer .top-menu li{display:inline-block; line-height:14px; margin:0; padding:0}
#sideMenuContainer .top-menu li:first-child{margin:0 10px 0 0; padding:0 10px 0 0}
#sideMenuContainer .top-menu a{color:#3366CC}
#sideMenuContainer .search-form-mobile{float:left; margin:0 0 15px; padding:0 20px; position:relative; width:100%}
#sideMenuContainer .search-form-mobile input[type="search"]{background:#fff; border:1px solid #3166CC; border-radius:10px; font-size:14px; height:auto; padding:10px 40px 10px 15px;}
#sideMenuContainer .search-form-mobile button{background:transparent; border:0; position:absolute; top: 8px; padding: 0; right:30px;}
#sideMenuContainer .search-form-mobile button img{height:16px; width:auto}
body.mobile-menu-active #sideMenuContainer{box-shadow: 0 0 20px rgba(0,0,0,0.6);}

#mobile-menu{float:left; width:100%}
#mobile-menu li a{color:#333; float:left; font-size:16px; padding:5px 20px; width:100%}
#mobile-menu li:hover > a{background:#CCE5FD; color:#3265CE; font-weight:700}
#mobile-menu li.active > a{background:#CCE5FD; color:#3265CE; font-weight:700}
#mobile-menu .dropdown-toggle::after{display:none}
#mobile-menu .dropdown-menu{position:relative!important; transform:none!important}

#closeSideMenu{background:white; border:0; color:#024AAD; font-size: 30px; position:absolute; left:0; top:0; padding: 5px 15px;}

/* Small menu. */
.navbar-toggler{color:#024AAD; font-size:30px; padding:0}
.navbar-toggler-icon{height:auto; width:auto}

.menu-toggle,
.main-navigation.toggled ul {display: block;}

.dropdown-item {line-height: 1.2; padding-bottom: 0.313rem; padding-top: 0.313rem;}
.dropdown-menu {border:0; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.2); min-width:280px; top:80%}
.dropdown .open .dropdown-menu {display: block; left: 12.250em; top: 0;}
.dropdown-menu .dropdown-item {white-space: normal; background: transparent; font-size:14px; line-height: 1.6;}
.dropdown-menu .dropdown-item:hover {background:#B7D9FC; color:#435E93; font-weight:600}

@media screen and (min-width: 37.5em) {
  .menu-toggle {display: none;}
}
@media screen and (min-width: 769px) {
  .dropdown-menu li > .dropdown-menu {right: -9.875rem; top: 1.375rem;}
}
@media screen and (max-width: 991px) {
  .navbar-nav .dropdown-menu {border: medium none; margin-left: 1.250rem; padding: 0;}
  .dropdown-menu li a {padding: 0;}
  #masthead .navbar-nav > li > a {padding-bottom: 0.625rem; padding-top: 0.313rem;}
  .navbar-light .navbar-toggler {border: medium none; outline: none;}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {margin: 0 0 1.5em; overflow: hidden;}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {float: left; width: 50%;}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {float: right; text-align: right; width: 50%;}
.comment-content.card-block {padding: 20px;}
.navigation.post-navigation {padding-top: 1.875rem;}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {border: 1px solid #ddd; border-radius: 0.938rem; display: inline-block; padding: 0.313rem 0.875rem; text-decoration: none;}
.post-navigation .nav-next a::after {content: " \2192";}
.post-navigation .nav-previous a::before {content: "\2190 ";}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {background: #eee none repeat scroll 0 0;}

/* Alignments
--------------------------------------------------------------*/
.alignleft {display: inline; float: left; margin-right: 1.5em;}
.alignright {display: inline; float: right; margin-left: 1.5em;}
.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}

a img.alignright {float: right; margin: 0.313rem 0 1.25rem 1.25rem;}
a img.alignnone {margin: 0.313rem 1.25rem 1.25rem 0;}
a img.alignleft {float: left; margin: 0.313rem 1.25rem 1.25rem 0;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}

.wp-caption.alignnone {margin: 0.313rem 1.25rem 1.25rem 0;}
.wp-caption.alignleft {margin: 0.313rem 1.25rem 1.25rem 0;}
.wp-caption.alignright {margin: 0.313rem 0 1.25rem 1.25rem;}

/* 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;}

/* Content
--------------------------------------------------------------*/
.section{padding:40px 0}

#page-content{padding:40px 0}
#page-content .page-title{color:#425E92; font-weight:400; text-transform:uppercase}
#page-content table th,
#page-content table td{padding:5px 10px}
#page-content img{margin-bottom:20px}

/* Archive */
#page-archive{padding:40px 0}
#page-archive .page-title{color:#425E92; font-size:30px; font-weight:400; margin:0 0 20px; text-transform:uppercase}
#page-archive .artikel{float:left; margin:0 0 30px; width:100%;}
#page-archive .artikel .thumbnail{float:left; height:200px; margin:0 0 20px; overflow:hidden; width:100%}
#page-archive .artikel .thumbnail img{float:left; min-height:200px; width:100%}
#page-archive .artikel h2{font-size:20px; font-weight:400; min-height:44px;}

/* WP Pagenavi */
.wp-pagenavi{margin:30px 0; text-align:center;}
.wp-pagenavi a, 
.wp-pagenavi span{border:0; padding:5px 10px;}
.wp-pagenavi span.current{background:#3366CC; color:#fff; border-radius:100px}
.wp-pagenavi span.pages{display:none}

/* Artikel Detail
--------------------------------------------------------------*/
#page-article{padding:40px 0}
#page-article .breadcrumb{background:transparent; border:0; margin:0 0 30px; padding:0}
#page-article .breadcrumb a{color:#111}
#page-article .breadcrumb .sep{margin:0 5px}
#page-article .breadcrumb .current{color:#425E92}
#page-article .article{float:left; margin:0 0 30px; width:100%}
#page-article .article .article-header{float:left; margin:0 0 30px; width:100%}
#page-article .article .article-title{margin:0}
#page-article .related-title{color:#425E92}
#page-article .terkait{border-bottom:1px solid #ddd; float:left; margin:0 0 15px; padding:0 0 15px; width:100%}
#page-article .terkait .thumbnail{float:left; height:160px; margin:0 0 10px; overflow:hidden; width:100%}
#page-article .terkait .thumbnail img{height:auto; min-height:160px; width:100%}
#page-article .terkait h2{font-size:18px; margin:0 0 10px}
#page-article .terkait p{margin:0}

/* General Template
--------------------------------------------------------------*/
/* Description */
#general-description{float:left; padding:40px 0; width:100%}
#general-description h2{color:#425E92; text-transform:uppercase}
#general-description img{float:left; margin:0; width:100%}

#general{float:left; width:100%}

/* Home
--------------------------------------------------------------*/
/* Slider */
#home-slider{float:left; padding:0; width:100%}
#home-slider .slick-dotted.slick-slider{margin:0}
#home-slider .slide{height:500px; position:relative}
#home-slider .slide .content{background:rgba(51, 101, 203, 0.1); color:#fff; font-size:24px; position:absolute; padding:0px 0 100px; left:0; bottom:0; width:100%}
#home-slider .slide .content h2{color:#fff; font-size:30px; margin:0 0 10px}
#home-slider .slide .content h2 a{color:#fff}
#home-slider .slider-arrow{position:absolute; float:left; top:50%; width:100%}
#home-slider .slider-arrow .container{position:relative}
#home-slider .slider-arrow .slick-prev, 
#home-slider .slider-arrow .slick-next{height:60px; opacity:1; width:60px; z-index:999}
#home-slider .slider-arrow .slick-prev:before, 
#home-slider .slider-arrow .slick-next:before{display:none}
#home-slider .slider-arrow .slick-prev{left:-100px} 
#home-slider .slider-arrow .slick-next{right:-100px}
#home-slider .slider-pagination{position:absolute; float:left; bottom:170px; width:100%}
#home-slider .slider-pagination .container{position:relative}
#home-slider .slider-pagination .slick-dots{bottom:0; text-align:left;}
#home-slider .slider-pagination .slick-dots li button{height:auto; width:auto}
/*#home-slider .slider-pagination .slick-dots li button:before{background:#BABBBA; border-radius:50px; color:#fff; content:'\f111'; font-family:'Font Awesome 5 Free'; font-size:14px; font-weight:400; line-height:14px; height:auto; opacity:1; width:auto;}
#home-slider .slider-pagination .slick-dots li.slick-active button:before{background:#0A81F6;}*/

/* Featues */
#home-features{ margin:-150px 0 0; padding:0; width:100%}
#home-features .box{height:230px; background:#fff; float:left; padding:40px 30px; text-align:center; width:100%; box-shadow:0 0 10px rgba(0,0,0,0.2); border-radius:20px;}
#home-features .box img{height:60px; margin:0 0 20px; width:auto}
#home-features .box h3{color:#0C81F6; font-size:20px; font-weight:400; margin:0 0 10px;}
#home-features .box p{margin:0}

/* Main Artikel */
#home-main-artikel{float:left; padding:40px 0; width:100%}
#home-main-artikel .artikel-wrapper{display:flex; }
#home-main-artikel .artikel-wrapper img{max-width:55%}
#home-main-artikel .artikel-wrapper .content{background:#E6F2FE; padding:30px}
#home-main-artikel .artikel-wrapper .content h2{color:#0C81F6; font-size:26px; font-weight:400}
#home-main-artikel .artikel-wrapper .content h2 a{color:#0C81F6}

/* Banner */
#home-banner{float:left; padding:0; width:100%}
#home-banner img{margin:0 0 15px; width:100%}
#home-banner h3{color:#0C81F6; font-size:26px; font-weight:400; margin:0}

/* Counter */
#home-counter{float:left; padding:40px 0 0; width:100%}
#home-counter img{height:auto; margin:0; width:100%}
#home-counter h3{font-size:28px; font-weight:400; margin:0 0 20px; text-align:center}
#home-counter h4{font-size:18px; font-weight:400; margin:0 0 10px; text-align:center}

/* Latest Post */
#home-latest-post{float:left; padding:40px 0; width:100%}
#home-latest-post h3{color:#425E92; font-size:20px; font-weight:400; margin:0 0 20px}
#home-latest-post h3 a{color:#425E92;}
#home-latest-post .box{float:left; margin:0 0 30px; width:100%; box-shadow:0 0 5px rgba(0,0,0,0.2)}
#home-latest-post .box .thumbnail{float:left; height:200px; margin:0; overflow:hidden; width:100%}
#home-latest-post .box .thumbnail img{float:left; min-height:200px; width:100%}
#home-latest-post .box .content{float:left; padding:20px; width:100%}
#home-latest-post .box .content h2{font-size:20px; font-weight:400; min-height:44px;}

/* Video 1 */
#video_1{float:left; padding:40px 0; width:100%}
#video_1 iframe{background:#3366CC; padding:30px}

/* Video 2 */
#video_2{float:left; padding:40px 0; width:100%}
#video_2 iframe{background:#3366CC; padding:30px}

/* Address & Map */
#address-map{float:left; padding:40px 0; width:100%}


/* Tentang Kami - Sejarah
--------------------------------------------------------------*/
/* Description */
#sejarah-description{float:left; padding:40px 0; width:100%}
#sejarah-description h2{color:#425E92; text-transform:uppercase}
#sejarah-description img{float:left; margin:0; width:100%}

/* Timeline */
#sejarah-timeline{float:left; padding:40px 0; width:100%}
#sejarah-timeline h3{color:#888; font-size:18px; }
#sejarah-timeline .border-right{border-right:1px solid #425E92!important}
#sejarah-timeline .badge-pill{background:#425E92!important}
#sejarah-timeline .timeline-margin-top{margin-top:-150px}
#sejarah-timeline .timeline{background:#E6F2FE; padding:30px}
#sejarah-timeline .timeline img{margin:0 0 20px; max-width:100%}
#sejarah-timeline .timeline p{margin:0 0 10px}
#sejarah-timeline .timeline h3{color:#425E92; font-size:24px; position:relative}
#sejarah-timeline .timeline h3:before{background:#425E92; content:''; display:block; height:2px; position:absolute; left:-76px; top:12px; width:70px}
#sejarah-timeline .row-even .timeline h3{text-align:right}
#sejarah-timeline .row-even .timeline h3:before{left:auto; right:-76px}

/* Tentang Kami - Visi Misi
--------------------------------------------------------------*/
/* Tugas & Fungsi */
#tugas-fungsi{background:#E6F2FE; float:left; padding:40px 0; text-align:center; width:100%}
#tugas-fungsi h2{color:#425E92; margin:0 0 30px; text-transform:uppercase}
#tugas-fungsi img{margin:0 0 30px; width:100%}

/* Tata Nilai */
#tata-nilai{float:left; padding:40px 0; width:100%}
#tata-nilai h2{color:#425E92; margin:0 0 30px; text-transform:uppercase}
#tata-nilai h3{font-size:24px}
#tata-nilai img{margin:0 0 30px; width:100%}
#tata-nilai .tata-nilai-slider .slick-prev{left:20px; z-index:9}
#tata-nilai .tata-nilai-slider .slick-next{right:20px; z-index:9}
#tata-nilai .tata-nilai-slider .slick-dots{bottom:45px}
#tata-nilai .tata-nilai-slider img{margin:0}

/* Visi */
#visi{background:#E6F2FE; float:left; padding:40px 0; text-align:center; width:100%}
#visi h2{color:#425E92; margin:0 0 30px; text-transform:uppercase}
#visi img{margin:0 0 30px; width:100%}

/* Misi */
#misi{float:left; padding:40px 0; text-align:center; width:100%}
#misi h2{color:#425E92; margin:0 0 30px; text-transform:uppercase}
#misi img{margin:0 0 30px; width:100%}
#misi .row {margin-left:0; margin-right:0}
#misi .row .col-lg-4{padding:0}
#misi .misi{height:100%; padding:30px; text-align:left}
#misi .misi.odd{background:#EBEFFA;}
#misi .misi.even{background:#D5E0F4;}
#misi .misi img{height:60px; margin:0 0 10px; width:auto}
#misi .misi p{margin:0}

/* Tentang Kami - Struktur Organisasi
--------------------------------------------------------------*/
/* Description */
#struktur-organisasi-description{float:left; padding:40px 0; width:100%}
#struktur-organisasi-description h2{color:#425E92; text-transform:uppercase}
#struktur-organisasi-description img{float:left; margin:0; width:100%}

/* Struktur Organisasi */
#struktur-organisasi{float:left; width:100%}
#struktur-organisasi img{height:auto; width:100%}

/* Tentang Kami - SDM
--------------------------------------------------------------*/
/* Description */
#sdm-description{float:left; padding:40px 0 20px; width:100%}
#sdm-description h2{color:#425E92; text-transform:uppercase}
#sdm-description img{float:left; margin:0; width:100%}

/* SDM */
#sdm{float:left; padding:0 0 40px; width:100%}
#sdm .nav-tabs{margin:0 0 30px}
#sdm .nav-tabs .nav-link{border:0; color:#444; padding:0 40px 10px}
#sdm .nav-tabs .nav-link:focus, 
#sdm .nav-tabs .nav-link:hover{border:0}
#sdm .nav-tabs .nav-item.show .nav-link, 
#sdm .nav-tabs .nav-link.active{border:0; border-bottom:4px solid #435F91; color:#435F91}
#sdm .profil{color:#333; float:left; margin:0 0 30px; width:100%}
#sdm .profil .foto{height:auto; margin:0; width:100%}
#sdm .profil .content{background:#3366CC; color:#fff; float:left; padding:10px 15px; width:100%}
#sdm .profil h3{font-size:18px; margin:0}
#sdm .profil h4{font-size:14px; margin:0}
#sdm .modal-body .foto{float:left; width:100%}
#sdm .modal-body .table td, 
#sdm .modal-body .table th{color:#444; font-size:16px; padding:5px 0 5px}
#sdm .modal-body .table thead td{border:0}
#sdm .modal-body .table.no-border td, 
#sdm .modal-body .table.no-border th{border:0}
#sdm .modal-body p{margin:0 0 10px}
#sdm .tab-pane .col-lg-3{display:none}

/* Tentang - Statistik
--------------------------------------------------------------*/
/* Description */
#statistik-description{float:left; padding:40px 0; width:100%}
#statistik-description h2{color:#425E92; text-transform:uppercase}
#statistik-description img{float:left; margin:0; width:100%}

/* Testimoni Pemangku Kepentingan */
#statistik{background:#E6F2FE; float:left; padding:40px 0; width:100%}
#statistik .card{background:transparent; border:0; border-bottom:1px solid #0C81F6; border-radius:0; padding:0}
#statistik .card-header{border-bottom:1px solid #0C81F6; border-radius:0; background:transparent; padding:15px 0;}
#statistik .card-header button{background:transparent; border:0; color:#0C81F6}
#statistik .card-header button i{margin:0 0 0 10px}
#statistik .card-header button[aria-expanded="true"] .fa-chevron-up{display:inline-block}
#statistik .card-header button[aria-expanded="true"] .fa-chevron-down{display:none}
#statistik .card-header button[aria-expanded="false"] .fa-chevron-up{display:none}
#statistik .card-header button[aria-expanded="false"] .fa-chevron-down{display:inline-block}
#statistik .card-body{padding:15px 0}

/* Tentang Kami - Rencana Strategis
--------------------------------------------------------------*/
/* Description */
#rencana-strategis-description{float:left; padding:40px 0; width:100%}
#rencana-strategis-description h2{color:#425E92; text-transform:uppercase}
#rencana-strategis-description img{float:left; margin:0; width:100%}

/* Rencana Strategis */
#rencana-strategis{float:left; min-height:500px; padding:0 0 40px; width:100%}

/* Tentang Kami - Program Kerja
--------------------------------------------------------------*/
/* Description */
#program-kerja-description{float:left; padding:40px 0; width:100%}
#program-kerja-description h2{color:#425E92; text-transform:uppercase}
#program-kerja-description img{float:left; margin:0; width:100%}

/* Program Kerja */
#program-kerja{float:left; min-height:500px; padding:0 0 40px; width:100%}

/* Layanan - Lagu Anak
--------------------------------------------------------------*/
/* Description */
#lagu-anak-description{float:left; padding:40px 0; width:100%}
#lagu-anak-description h2{color:#425E92; text-transform:uppercase}
#lagu-anak-description img{float:left; margin:0; width:100%}

/* Data Audio */
#data-audio{float:left; padding:40px 0; width:100%}
#data-audio .data-audio-header{border-top:1px solid #3364CB; border-left:1px solid #3364CB; border-right:1px solid #3364CB; padding:10px 20px}
#data-audio .card{border:1px solid #3364CB; border-radius:0;}
#data-audio .card .card{border-left:0; border-right:0; border-bottom:0}
#data-audio .card:first-child{border-bottom:0}
#data-audio .card-header button {background:transparent; border:0; color:#0C81F6; padding:0}
#data-audio .card-header button i{margin:0 0 0 10px}
#data-audio .card-header button[aria-expanded="true"] .fa-chevron-up{display:inline-block;}
#data-audio .card-header button[aria-expanded="true"] .fa-chevron-down{display:none}
#data-audio .card-header button[aria-expanded="false"] .fa-chevron-up{display:none}
#data-audio .card-header button[aria-expanded="false"] .fa-chevron-down{display:inline-block}
#data-audio .album-header{border-bottom:0; margin:0;}
#data-audio .album-body{padding:0}
#data-audio .audio-header{border-bottom:0; margin:0}
#data-audio .audio-header img{margin:0 10px 0 0}
#data-audio .audio-header button{color:#111}
#data-audio .audio-header button i{color:#0C81F6;}
#data-audio .audio-body{font-size:14px; padding-top:0; padding-left:60px}
#data-audio #accordionDataAudio > .card:nth-child(odd) .album-header{background:#E6F2FE; }
#data-audio #accordionDataAudio > .card:nth-child(odd) .album-body{background:#E6F2FE}
#data-audio #accordionDataAudio > .card:nth-child(odd) .audio-header{background:#E6F2FE}
#data-audio #accordionDataAudio > .card:nth-child(odd) .audio-body{background:#E6F2FE}
#data-audio #accordionDataAudio > .card:nth-child(even) .album-header{background:#fff;}
#data-audio #accordionDataAudio > .card:nth-child(even) .album-body{background:#fff}
#data-audio #accordionDataAudio > .card:nth-child(even) .audio-header{background:#fff}
#data-audio #accordionDataAudio > .card:nth-child(even) .audio-header{background:#fff}
#data-audio .mejs-container{background:transparent; float:left; height:22px!important; margin:0 10px 0 0; width:50px!important}
#data-audio .mejs-container .mejs-controls{background:transparent; height:22px; padding:0}
#data-audio .mejs-time,
#data-audio .mejs-time-rail,
#data-audio .mejs-volume-button,
#data-audio .mejs-horizontal-volume-slider{display:none}
#data-audio .mejs-button{height:22px; line-height:20px; width:auto}
#data-audio .mejs-button>button{color:#0C81F6; font-size:14px; height:auto; line-height:20px; margin:0; padding:1px 0; position:relative; min-width:60px; width:auto}
#data-audio .mejs-button>button[aria-label="Play"]:before{content:'\f04b'; display:inline-block; font-family:'Font Awesome 5 Free'; font-weight:900; margin:0 5px 0 0;}
#data-audio .mejs-button>button[aria-label="Play"]:after{content:'Play'; display:inline-block;}
#data-audio .mejs-button>button[aria-label="Pause"]:before{content:'\f04c'; display:inline-block; font-family:'Font Awesome 5 Free'; font-weight:900; margin:0 5px 0 0;}
#data-audio .mejs-button>button[aria-label="Pause"]:after{content:'Pause'; display:inline-block;}
#data-audio .download-audio{color:#0C81F6; float:left; font-size:14px}

/* Embed Video */
#lagu-anak-embed-video{float:left; padding:40px 0; width:100%}
#lagu-anak-embed-video embed,
#lagu-anak-embed-video iframe{float:left; height:500px; width:100%}

/* Layanan - Sekolah Ramah Anak
--------------------------------------------------------------*/
/* Description */
#sekolah-ramah-anak-description{float:left; padding:40px 0; width:100%}
#sekolah-ramah-anak-description h2{color:#425E92; text-transform:uppercase}
#sekolah-ramah-anak-description img{float:left; margin:0; width:100%}

/* Sekolah Ramah Anak */
#sekolah-ramah-anak{float:left; width:100%}

/* Layanan - Guru Sahabat Keluarga
--------------------------------------------------------------*/
/* Description */
#guru-sahabat-keluarga-description{float:left; padding:40px 0; width:100%}
#guru-sahabat-keluarga-description h2{color:#425E92; text-transform:uppercase}
#guru-sahabat-keluarga-description img{float:left; margin:0; width:100%}

/* Guru Sahabat Keluarga */
#guru-sahabat-keluarga{float:left; width:100%}

/* Layanan - LADO (Laboratorium Dongeng)
--------------------------------------------------------------*/
/* Description */
#lado-description{float:left; padding:40px 0; width:100%}
#lado-description h2{color:#425E92; text-transform:uppercase}
#lado-description img{float:left; margin:0; width:100%}

/* LADO */
#lado{background:#fff; float:left; padding:40px 0; width:100%}
#lado .card{background:transparent; border:0; border-bottom:1px solid #0C81F6; border-radius:0; padding:0}
#lado .card-header{border-bottom:1px solid #0C81F6; border-radius:0; background:transparent; padding:15px 0;}
#lado .card-header button{background:transparent; border:0; color:#0C81F6}
#lado .card-header button i{margin:0 0 0 10px}
#lado .card-header button[aria-expanded="true"] .fa-chevron-up{display:inline-block}
#lado .card-header button[aria-expanded="true"] .fa-chevron-down{display:none}
#lado .card-header button[aria-expanded="false"] .fa-chevron-up{display:none}
#lado .card-header button[aria-expanded="false"] .fa-chevron-down{display:inline-block}
#lado .card-body{padding:15px 0}

/* Teaser */
#lado-teaser h2{color:#425E92; text-transform:uppercase}

/* LADO TKPLB */
#lado-tkplb h2{color:#425E92; text-transform:uppercase}

/* LADO Tim */
#lado-tim h2{color:#425E92; text-transform:uppercase}

/* Layanan - Papan Gembira
--------------------------------------------------------------*/
/* Description */
#papan-gembira-description{float:left; padding:40px 0; width:100%}
#papan-gembira-description h2{color:#425E92; text-transform:uppercase}
#papan-gembira-description img{float:left; margin:0; width:100%}

/* Papan Gembira */
#papan-gembira{float:left; width:100%}

/* Layanan - Pembelajarah ADHM
--------------------------------------------------------------*/
/* Description */
#pembelajaran-adhm-description{float:left; padding:40px 0; width:100%}
#pembelajaran-adhm-description h2{color:#425E92; text-transform:uppercase}
#pembelajaran-adhm-description img{float:left; margin:0; width:100%}

/* Pembelajarah ADHM */
#pembelajaran-adhm{float:left; width:100%}

/* Layanan - Beri Kami Penilaian
--------------------------------------------------------------*/
#beri-kami-penilaian-description{float:left; min-height:600px; padding:40px 0; width:100%}
#beri-kami-penilaian-description h2{color:#425E92; text-transform:uppercase}
#beri-kami-penilaian-description img{float:left; margin:0; width:100%}
#beri-kami-penilaian-description .form-penilaian{padding:0 0 0 15px}
#beri-kami-penilaian-description .form-penilaian li{margin:0 0 5px}
#beri-kami-penilaian-description .form-penilaian a i{font-size:14px; margin:0 0 0 10px}

/* Form Beri Kami Penilaian */
#form-beri-kami-penilaian{background:#E6F2FE url('images/bg-form-penilaian.jpg') center bottom no-repeat; background-size:cover; float:left; padding:60px 0; width:100%}
#form-beri-kami-penilaian .form-header{background:#fff; float:left; margin:0 0 30px; padding:20px; width:100%; border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#form-beri-kami-penilaian .form-header h2{color:#425E92; margin:0 0 10px}
#form-beri-kami-penilaian .form-container{background:#fff; float:left; min-height:600px; padding:20px; width:100%; border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#form-beri-kami-penilaian .form-container iframe{min-height:500px; width:100%}

/* Layanan - Lapor
--------------------------------------------------------------*/
#lapor-description{background:#E5EAFD; float:left; min-height:600px; padding:40px 0; width:100%}
#lapor-description h2{color:#425E92; text-transform:uppercase}
#lapor-description img{float:left; margin:0; width:100%}
#lapor-description .form-penilaian{padding:0 0 0 15px}
#lapor-description .form-penilaian li{margin:0 0 5px}
#lapor-description .form-penilaian a i{font-size:14px; margin:0 0 0 10px}

/* Form Lapor */
#form-lapor{background:#fff url('images/bg-form-lapor2.jpg') center bottom no-repeat; background-size:cover; float:left; padding:60px 0; width:100%}
#form-lapor .form-container{background:#fff; float:left; min-height:600px; padding:20px; width:100%; border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#form-lapor .form-container h2{color:#425E92; margin:0 0 10px}
#form-lapor .form-container iframe{min-height:500px; width:100%}

/* Program - Diklat Non Diklat
--------------------------------------------------------------*/
#diklat-description{float:left; padding:40px 0; width:100%}
#diklat-description h2{color:#425E92; text-transform:uppercase}
#diklat-description img{float:left; margin:0; width:100%}

#non-diklat-description{float:left; padding:40px 0; width:100%}
#non-diklat-description h2{color:#425E92; text-transform:uppercase}
#non-diklat-description img{float:left; margin:0; width:100%}

#agenda-diklat{float:left; padding:40px 0; width:100%}
#agenda-diklat h3{color:#425E92; font-size:20px; font-weight:400; margin:0 0 20px}
#agenda-diklat h3 a{color:#425E92;}
#agenda-diklat .artikel{float:left; margin:0 0 30px; width:100%}
#agenda-diklat .artikel .thumbnail{float:left; height:160px; margin:0 0 10px; overflow:hidden; width:100%}
#agenda-diklat .artikel .thumbnail img{height:auto; min-height:160px; width:100%}
#agenda-diklat .artikel h2{font-size:20px; margin:0 0 10px}
#agenda-diklat .artikel p{margin:0}

#google-pdf{float:left; padding:40px 0; width:100%}
#google-pdf embed,
#google-pdf iframe{float:left; height:500px; width:100%}

/* Program - Program Guru Penggerak & Sekolah Penggerak
--------------------------------------------------------------*/
#program-guru-penggerak-description{float:left; padding:40px 0; width:100%}
#program-guru-penggerak-description h2{color:#425E92; text-transform:uppercase}
#program-guru-penggerak-description img{float:left; margin:0; width:100%}

#program-sekolah-penggerak-description{float:left; padding:40px 0; width:100%}
#program-sekolah-penggerak-description h2{color:#425E92; text-transform:uppercase}
#program-sekolah-penggerak-description img{float:left; margin:0; width:100%}

#program-penggerak{float:left; padding:40px 0; width:100%}
#program-penggerak .nav-tabs{margin:0 0 30px}
#program-penggerak .nav-tabs .nav-link{border:0; color:#444; padding:0 40px 10px}
#program-penggerak .nav-tabs .nav-link:focus, 
#program-penggerak .nav-tabs .nav-link:hover{border:0}
#program-penggerak .nav-tabs .nav-item.show .nav-link, 
#program-penggerak .nav-tabs .nav-link.active{border:0; border-bottom:4px solid #435F91; color:#435F91}
#program-penggerak .dokumentasi-kegiatan {float:left; margin:0 0 30px; width:100%}
#program-penggerak .dokumentasi-kegiatan img{float:left; height:auto; margin:0 0 15px; width:100%}
#program-penggerak .dokumentasi-kegiatan h3{font-size:18px; margin:0}
#program-penggerak .karya-penggerak{background:#fff; float:left; margin:0 0 30px; padding:20px; width:100%; box-shadow:0 1px 5px rgba(0,0,0,0.2)}
#program-penggerak .karya-penggerak img{height:auto; margin:0; width:100%}
#program-penggerak .karya-penggerak h3{font-size:18px; margin:0 0 10px}
#program-penggerak .karya-penggerak p{color:#888; margin:0}


/* Program - Tanya Jawab
--------------------------------------------------------------*/
#tanya-jawab{background:#E6F2FE; background-size:cover; float:left; padding:60px 0; width:100%}
#tanya-jawab .content{background:#fff; float:left; min-height:600px; padding:20px; width:100%; border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#tanya-jawab .content h2{color:#425E92; margin:0 0 10px}
#tanya-jawab .card{border:0; border-bottom:1px solid #ddd; padding:10px 0}
#tanya-jawab .card-header{background:transparent; border:0; margin-bottom:0; padding:0}
#tanya-jawab .card-header button{background:transparent; border:0; color:#111; width:100%; text-align:left}
#tanya-jawab .card-header button i{color:#3364CB; margin:0 10px 0 0}
#tanya-jawab .card-header button[aria-expanded="true"] .fa-plus{display:none}
#tanya-jawab .card-header button[aria-expanded="true"] .fa-minus{display:inline-block}
#tanya-jawab .card-header button[aria-expanded="false"] .fa-plus{display:inline-block}
#tanya-jawab .card-header button[aria-expanded="false"] .fa-minus{display:none}
#tanya-jawab .card-body{background:transparent; margin:10px 0; padding:0 0 0 50px; position:relative}
#tanya-jawab .card-body .border-left{background:#3364CB; content:''; display:block; height:80%; left:30px; position:absolute; top:6px; width:4px}

/* RBI - Pembangunan ZI-WBK
--------------------------------------------------------------*/
/* Description */
#pembangunan-zi-wbk-description{float:left; padding:40px 0; width:100%}
#pembangunan-zi-wbk-description h2{color:#425E92; text-transform:uppercase}
#pembangunan-zi-wbk-description img{float:left; margin:0; width:100%}

/* Pembangunan ZI-WBK */
#pembangunan-zi-wbk{background:#E6F2FE; float:left; padding:40px 0; width:100%}
#pembangunan-zi-wbk .card{background:transparent; border:0; border-bottom:1px solid #0C81F6; border-radius:0; padding:0}
#pembangunan-zi-wbk .card-header{border-bottom:1px solid #0C81F6; border-radius:0; background:transparent; padding:15px 0;}
#pembangunan-zi-wbk .card-header button{background:transparent; border:0; color:#0C81F6}
#pembangunan-zi-wbk .card-header button i{margin:0 0 0 10px}
#pembangunan-zi-wbk .card-header button[aria-expanded="true"] .fa-chevron-up{display:inline-block}
#pembangunan-zi-wbk .card-header button[aria-expanded="true"] .fa-chevron-down{display:none}
#pembangunan-zi-wbk .card-header button[aria-expanded="false"] .fa-chevron-up{display:none}
#pembangunan-zi-wbk .card-header button[aria-expanded="false"] .fa-chevron-down{display:inline-block}
#pembangunan-zi-wbk .card-body{padding:15px 0}

/* RBI - Hasil Survey Kepuasan
--------------------------------------------------------------*/
/* Description */
#hasil-survey-kepuasan-description{float:left; padding:40px 0; width:100%}
#hasil-survey-kepuasan-description h2{color:#425E92; text-transform:uppercase}
#hasil-survey-kepuasan-description img{float:left; margin:0; width:100%}

/* Hasil Survey Kepuasan */
#hasil-survey-kepuasan{background:#E6F2FE; float:left; padding:40px 0; width:100%}
#hasil-survey-kepuasan .card{background:transparent; border:0; border-bottom:1px solid #0C81F6; border-radius:0; padding:0}
#hasil-survey-kepuasan .card-header{border-bottom:1px solid #0C81F6; border-radius:0; background:transparent; padding:15px 0;}
#hasil-survey-kepuasan .card-header button{background:transparent; border:0; color:#0C81F6}
#hasil-survey-kepuasan .card-header button i{margin:0 0 0 10px}
#hasil-survey-kepuasan .card-header button[aria-expanded="true"] .fa-chevron-up{display:inline-block}
#hasil-survey-kepuasan .card-header button[aria-expanded="true"] .fa-chevron-down{display:none}
#hasil-survey-kepuasan .card-header button[aria-expanded="false"] .fa-chevron-up{display:none}
#hasil-survey-kepuasan .card-header button[aria-expanded="false"] .fa-chevron-down{display:inline-block}
#hasil-survey-kepuasan .card-body{padding:15px 0}

/* RBI - Kebijakan Standar Pelayanan
--------------------------------------------------------------*/
/* Description */
#kebijakan-standar-pelayanan-description{float:left; padding:40px 0; width:100%}
#kebijakan-standar-pelayanan-description h2{color:#425E92; text-transform:uppercase}
#kebijakan-standar-pelayanan-description img{float:left; margin:0; width:100%}

/* Testimoni Pemangku Kepentingan */
#kebijakan-standar-pelayanan{background:#E6F2FE; float:left; padding:40px 0; width:100%}
#kebijakan-standar-pelayanan .card{background:transparent; border:0; border-bottom:1px solid #0C81F6; border-radius:0; padding:0}
#kebijakan-standar-pelayanan .card-header{border-bottom:1px solid #0C81F6; border-radius:0; background:transparent; padding:15px 0;}
#kebijakan-standar-pelayanan .card-header button{background:transparent; border:0; color:#0C81F6}
#kebijakan-standar-pelayanan .card-header button i{margin:0 0 0 10px}
#kebijakan-standar-pelayanan .card-header button[aria-expanded="true"] .fa-chevron-up{display:inline-block}
#kebijakan-standar-pelayanan .card-header button[aria-expanded="true"] .fa-chevron-down{display:none}
#kebijakan-standar-pelayanan .card-header button[aria-expanded="false"] .fa-chevron-up{display:none}
#kebijakan-standar-pelayanan .card-header button[aria-expanded="false"] .fa-chevron-down{display:inline-block}
#kebijakan-standar-pelayanan .card-body{padding:15px 0}

/* RBI - Testimoni Pemangku Kepentingan
--------------------------------------------------------------*/
/* Description */
#testimoni-pemangku-kepentingan-description{float:left; padding:40px 0; width:100%}
#testimoni-pemangku-kepentingan-description h2{color:#425E92; text-transform:uppercase}
#testimoni-pemangku-kepentingan-description img{float:left; margin:0; width:100%}

/* Testimoni Pemangku Kepentingan */
#testimoni-pemangku-kepentingan{float:left; width:100%}

/* Tautan
--------------------------------------------------------------*/
#tautan{float:left; padding:40px 0; width:100%}
#tautan h2{color:#425E92; text-transform:uppercase}
#tautan .col-lg-4{margin-bottom:20px;}
#tautan .tautan{background:#E6F2FE; float:left; height:100%; margin:0; padding:20px; width:100%}
#tautan .tautan h3{font-size:18px; text-transform:uppercase}
#tautan .tautan ul{list-style:none; margin:0; padding:0}
#tautan .tautan a{color:#0B81F6}

/* Media
--------------------------------------------------------------*/
.wp-smiley {border: none; margin-bottom: 0; margin-top: 0; padding: 0;}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {max-width: 100%;}

/*  Captions
--------------------------------------------------------------*/
.wp-caption {background: #f1f1f1 none repeat scroll 0 0; border: 1px solid #f0f0f0; max-width: 96%; padding: 0.313rem 0.313rem 0; text-align: center;}
.wp-caption img[class*="wp-image-"] {border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto;}
.wp-caption .wp-caption-text {font-size: 0.688rem; line-height: 1.063rem; margin: 0; padding: 0.625rem;}
.wp-caption-text {text-align: center;}

/* Galleries
--------------------------------------------------------------*/
.gallery {margin-bottom: 1.5em;}
.gallery-item {display: inline-block; text-align: center; vertical-align: top; width: 100%;}
.gallery-item .gallery-columns-2 {max-width: 50%;}
.gallery-item .gallery-columns-3 {max-width: 33.33333%;}
.gallery-item .gallery-columns-4 {max-width: 25%;}
.gallery-item .gallery-columns-5 {max-width: 20%;}
.gallery-item .gallery-columns-6 {max-width: 16.66667%;}
.gallery-item .gallery-columns-7 {max-width: 14.28571%;}
.gallery-item .gallery-columns-8 {max-width: 12.5%;}
.gallery-item .gallery-columns-9 {max-width: 11.11111%;}
.gallery-caption {display: block;}

/* Footer
--------------------------------------------------------------*/
#colophon{background:#3366CC; color:#fff; float:left; padding:40px 0 60px; width:100%}
#colophon .logo-footer{height:80px; width:auto}
#colophon p{font-size:14px}
#colophon .social{list-style:none; margin:0; padding:0}
#colophon .social li{display:inline-block; margin:0 10px 0 0}
#colophon .social a img{height:30px}

#floating-button-lapor{background:#024AAD; color:#fff; font-size:16px; padding:10px 20px; position:fixed; left:70px; bottom:0; border-radius:20px 20px 0 0; z-index:9}
#floating-button-lapor i{background:#fff; color:#024AAD; font-size:14px; height:24px; line-height:24px; margin:0 10px 0 0; text-align:center; width:24px; border-radius:50px;}

#floating-button-penilaian{background:#024AAD; color:#fff; font-size:16px; padding:10px 20px; position:fixed; left:200px; bottom:0; border-radius:20px 20px 0 0; z-index:9}
#floating-button-penilaian i{background:#fff; color:#024AAD; font-size:14px; height:24px; line-height:24px; margin:0 10px 0 0; text-align:center; width:24px; border-radius:50px;}

#back-to-top{background:#fff; color:#3366CC; font-size:20px; height:40px; line-height:38px; position:fixed; bottom:120px; right:42px; text-align:center; width:40px; border-radius:100px; box-shadow:0 0 5px rgba(0,0,0,0.4);}

#whatsapp{position:fixed; bottom:40px; right:30px; }
#whatsapp img{height:60px; width:auto; }

/* Responsive
--------------------------------------------------------------*/
@media (min-width:768px){
  .modal-dialog {max-width: 740px;}
}
@media (max-width: 1199.98px) {
  /* Header */
  #top-bar p a {margin:0 5px 0 0}
  #top-bar u{display:none}
}
@media (max-width: 991.98px) {
  /* Header */
  #top-bar{display:none}
  #main-header{padding:10px 0}
  .header-buttons{display:none}
  #sideMenu{display:block}
  .navbar-brand a img{height:40px}
  .navbar-brand a h1{font-size:20px;}
  .navbar-brand a h4{font-size:14px}
  /* Home */
  #home-slider .slide{height:420px}
  #home-slider .slide .content{font-size:18px; padding:20px 0 20px;}
  #home-slider .slide .content h2{font-size:22px}
  #home-slider .slide .content p{margin:0}
  #home-slider .slider-arrow{top:41%}
  #home-slider .slider-arrow .slick-prev, 
  #home-slider .slider-arrow .slick-next{height:40px; width:40px}
  #home-slider .slider-pagination{bottom:-40px;}
  #home-slider .slider-pagination .slick-dots{position:relative; text-align:center;}
  #home-features{margin:0; padding:60px 0 0;}
  #home-features .box{border-radius:10px; margin:0 0 30px; padding:20px 10px}
  #home-features .box h3{margin:0}
  #home-main-artikel .artikel-wrapper{display:block; float:left; position:relative; width:100%}
  #home-main-artikel .artikel-wrapper img{max-width:100%; width:100%}
  #home-main-artikel .artikel-wrapper .content{background:rgba(255,255,255,0.8); padding:10px; position:absolute; bottom:0; left:0; width:100%}
  #home-main-artikel .artikel-wrapper .content h2{font-size:16px; margin:0}
  #home-main-artikel .artikel-wrapper .content p,
  #home-main-artikel .artikel-wrapper .content .more{display:none}
  #home-banner h3{font-size:18px}
  #home-counter img{height:auto; width:100%}
  #home-counter h3{font-size:22px}
  #home-counter h4{font-size:16px; margin:0 0 5px}
  /* Tentang Kami - Sejarah */
  #sejarah-description {text-align:center}
  #sejarah-timeline{padding:40px 0 100px}
  #sejarah-timeline .row-1 .pt-5{padding-top:.5rem!important}
  #sejarah-timeline .timeline-margin-top{margin-top:0}
  #sejarah-timeline .timeline{margin-left:30px; position:relative}
  #sejarah-timeline .timeline:before{background: #425E92; content: ''; display: block; height:110%; width:2px; position:absolute; left:-25px; top:0 }
  #sejarah-timeline .timeline img{width:100%}
  #sejarah-timeline .row-even .timeline h3:before,
  #sejarah-timeline .timeline h3:before{width:45px; right:auto; left:-55px}
  #sejarah-timeline .row-even .timeline h3{text-align:left}
  /* Tentang Kami - Struktur Organisasi */
  #struktur-organisasi-description{text-align:center}
  /* Tentang Kami - SDM */
  #sdm-description {text-align:center}
  #sdm .nav-tabs .nav-item{border-bottom:1px solid #ddd; margin:0; width:100%}
  #sdm .nav-tabs .nav-link{font-weight:bold; padding:10px 0; text-align:center}
  #sdm .nav-tabs .nav-item.show .nav-link, 
  #sdm .nav-tabs .nav-link.active{background:#E6F2FE; color:#425E92; border:0}
  /* Tentang Kami - Rencana Strategis */
  #rencana-strategis-description {text-align:center}
  /* Tentang Kami - Program Kerja */
  #program-kerja-description {text-align:center}
  /* Layanan - Lagu Anak */
  #lagu-anak-description {text-align:center}
  #lagu-anak-embed-video embed,
  #lagu-anak-embed-video iframe{height:200px; }
  /* Layanan - Sekolah Ramah Anak */
  #sekolah-ramah-anak-description {text-align:center}
  /* Layanan - Guru Sahabat Keluarga */
  #guru-sahabat-keluarga-description {text-align:center}
  /* Layanan - LADO */
  #lado-description {text-align:center}
  /* Layanan - Papan Gembira */
  #papan-gembira-description {text-align:center}
  /* Layanan - Pembelajaran ADHM */
  #pembelajaran-adhm-description {text-align:center}
  /* Layanan - Beri Kami Penilaian */
  #beri-kami-penilaian-description {text-align:center}
  #beri-kami-penilaian-description .form-penilaian{text-align:left}
  /* Layanan - Lapor */
  #lapor-description {text-align:center}
  #lapor-description .form-penilaian{text-align:left}
  /* Program - Diklat & Non Diklat*/
  #diklat-description {text-align:center}
  #non-diklat-description {text-align:center}
  #google-pdf embed,
  #google-pdf iframe{height:300px;}
  /* Program - Guru Penggerak */
  #program-guru-penggerak-description,
  #program-sekolah-penggerak-description{text-align:center}
  #program-penggerak .nav-tabs .nav-item{border-bottom:1px solid #ddd; margin:0; width:100%}
  #program-penggerak .nav-tabs .nav-link{font-weight:bold; padding:10px 0; text-align:center}
  #program-penggerak .nav-tabs .nav-item.show .nav-link, 
  #program-penggerak .nav-tabs .nav-link.active{background:#E6F2FE; color:#425E92; border:0}
  /* Program - Tanya Jawab */
  #tanya-jawab{background:#fff; padding:60px 0;}
  #tanya-jawab .content h2{text-align:center}
  #tanya-jawab .content{min-height:auto; padding:0; border-radius:0; box-shadow:none}
  /* RBI - Pembangunan ZI-WBK */
  #pembangunan-zi-wbk-description {text-align:center}
  /* RBI - Hasil Survey Kepuasan */
  #hasil-survey-kepuasan-description {text-align:center}
  /* RBI - Kebijakan Standar Pelayanan */
  #kebijakan-standar-pelayanan-description {text-align:center}
  /* RBI - Testimoni Pemangku Kepentingan */
  #testimoni-pemangku-kepentingan-description {text-align:center}
  /* Tautan */
  #tautan {text-align:center}
  /* Footer */
  #colophon .col-lg-8{order:2}
  #colophon .col-lg-4{order:1}
  #colophon h4{text-align:center}
  #colophon .social{margin:0 0 30px; text-align:center}
  #colophon .social a img{height:40px}
  #colophon .logo{height:80px; margin:0 10px; width:auto}
  #colophon p{text-align:center}
  #floating-button-lapor {padding:10px 15px; left:0; bottom:85px; border-radius:0 10px 10px 0}
  #floating-button-lapor span{display:none}
  #floating-button-lapor:hover span{display:inline-block; margin:0 0 0 10px}
  #floating-button-lapor i{font-size:12px; height:22px; line-height:22px; margin:0; width:22px}
  #floating-button-penilaian{padding:10px 15px; left:0; bottom:30px; border-radius:0 10px 10px 0}
  #floating-button-penilaian span{display:none}
  #floating-button-penilaian:hover span{display:inline-block; margin:0 0 0 10px}
  #floating-button-penilaian i{font-size:12px; height:22px; line-height:22px; margin:0; width:22px}
  #back-to-top{bottom:100px}
  #whatsapp{bottom:30px}
}
@media (max-width: 575.98px) {
  /* Header */
  .navbar-brand{width:320px; white-space:inherit}
}