@import url('https://fonts.googleapis.com/css?family=Great+Vibes|Montserrat:300,400|Lora');
@import url('https://fonts.googleapis.com/css?family=Oswald');
/* font-family: 'Lato', sans-serif; font-family: 'Montserrat', sans-serif;
font-family: 'Lora', serif;
font-family: 'Great Vibes', cursive;
font-family: 'Oswald', sans-serif; */
body {background: #f9f6ed; padding-top: 74px; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 26px;}
.container {max-width: 1100px;}
/* == HEADER SETUP == */
header  {position: fixed; background: #11772d; top: 0px; top: 0px; right: 0px; left: 0px; z-index: 1030; transition: all 0.4s ease; }
header.sticky { background: #11772d; text-align: left;  transition: all 0.4s ease; }

/*I. NAVIGATION : CUSTOM SETUP*/
.theme-navbar {background: transparent; padding: 0px; font-weight: 400; min-height: 120px; transition: all 0.4s ease;} /*as default of this theme */
header.sticky .theme-navbar {min-height: 60px; transition: all 0.4s ease;}
/*Brand setup*/
.theme-navbar .navbar-brand {color: black; margin-right: 3rem; width: 5%; }
.theme-navbar .navbar-brand:focus, .theme-navbar .navbar-brand:hover {color: red;}
.theme-navbar .navbar-brand img {width: 150%; transition: all 0.4s ease;}
header.sticky .theme-navbar .navbar-brand img {width: 130%; transition: all 0.4s ease;}

/*I. a.Link Setup & dropdown*/
.theme-navbar ul.navbar-nav .nav-link {color: #FFF; background: transparent; padding-left: 18px; padding-right: 18px;  padding-top: 25px; padding-bottom: 25px; border-bottom: 4px solid transparent; transition: 0.4s all;}
.theme-navbar ul.navbar-nav .nav-link:focus, 
.theme-navbar ul.navbar-nav .nav-link:hover {color: #e3ae4d; border-bottom: 4px solid #e3ae4d; transition: 0.4s all;}
.theme-navbar .dropdown-menu {border: none; border-radius: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; background: #FFF;}
.theme-navbar ul.dropdown-menu li {border-bottom: 1px solid #e3ae4d; }
.theme-navbar ul.dropdown-menu li:last-child {border:none;}
.theme-navbar ul.dropdown-menu li a {color: #666; background: #FFF;padding-top: 10px; padding-bottom: 10px;}
.theme-navbar ul.dropdown-menu li a:focus,
.theme-navbar ul.dropdown-menu li a:hover {color: #FFF; background: #e3ae4d;}

/*I. b.Toggler burger setup */
.theme-navbar .navbar-toggler {border: 1px solid transparent;}
.theme-navbar .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
.dropdown:hover>.dropdown-menu {display: block;}
/* II. CONTENT CUSTOM */
/* II. 1. Heading & sub heading and basic setup */
a {color: #e3ae4d; text-decoration: none; transition: 0.4s all;}
a:hover, a:focus {color: #000;  text-decoration: none; transition: 0.4s all;}
h1, h2, h3, h4 {margin-top: 0px; margin-bottom: 30px; font-family: 'Lora', serif;}
h1 {font-size: 22px; text-align: center; color: #1d4d7b;} h2 {font-size: 20px;} h3 {font-size: 18px;} h4 {font-size: 16px;}
.breadcrumb-item + .breadcrumb-item::before {display: inline-block; padding-right: 0.5rem; color: #e6e6e6; content: "|";}
.subheading {display: block; font-size: 24px; font-family: 'Great Vibes', cursive; text-align: center; color: #e3ae4d; margin-bottom: 10px; }
.sosmed {position: relative;}
.sosmed a {font-size: 25px; padding: 10px; color: #FFF;}
.sosmed a:hover, .sosmed a:focus {color: #c18311;}
.banner {position: relative;}
.banner img {width: 100%;}
.banner .bquotes {position: absolute; color: #FFF; bottom: 20%; width: 60%; left: 20%; text-align: center; font-size: 20px; line-height: 30px; font-family: 'Oswald', sans-serif;}
.banner .bquotes p::before {content: "\f10d"; font-family: FontAwesome; display: inline-block; padding-right: 10px;}
.banner .bquotes p::after {content: "\f10e"; font-family: FontAwesome; display: inline-block; padding-left: 10px;}
.banner > .ornament {display: block; position: absolute; height: 150px; width: 100%; bottom: -70px; background: url(../images/ornab.png) no-repeat; background-position: center; background-size: cover; z-index: 999;}
.banner > .ornament-nobanner {display: block; position: absolute; height: 90px; width: 100%; bottom: -35px; background: url(../images/ornab-bo.png) no-repeat; background-position: center; background-size: cover; z-index: 999;}
.contents {padding-top: 100px; padding-bottom: 100px; line-height: 25px;}
a.btn-more {display: block; font-size: 18px; margin-top: 20px; width: 200px;}
a.btn-more:hover, a.btn-more:focus {color: #FFF;}
a.btn-more-round {display: block; color: #666; font-size: 16px; margin-top: 20px; padding: 5px 10px; width: 130px; border-radius: 16px; border: 1px solid #777; text-align: center; margin-left: auto; margin-right: auto;}
a.btn-more-round:hover, a.btn-more-round:focus {color: #FFF; background: #666;}
.fa-angle-right {margin-left: 12px;}
/* Additions */
.text-contents p {text-align: justify;}
h1.yayasan {font-size: 22px; text-align: center; color: #11772d;} h2 {font-size: 20px;} h3 {font-size: 18px;} h4 {font-size: 16px;} 
.subyayasan {display: block; font-size: 24px; font-family: 'Great Vibes', cursive; text-align: center; color: #11772d; margin-bottom: 10px; }

/* III. Pages */
.home-one {text-align: center;}
.taglines {font-size: 18px; color: #0b6b68; line-height: 26px;}
/* About us */
ul.list-btn {list-style-type: none; text-align: center;}
ul.list-btn li {display: inline-block; padding: 10px; font-family: 'Oswald', sans-serif;}
ul.list-btn li a {padding: 10px 25px; border:1px solid #e3ae4d; background: #FFF; color: #666; text-align: center;}
ul.list-btn li a:hover, ul.list-btn li a:focus {color: #FFF; background: #e3ae4d;}
.modal-content {border:none; background: #f9f6ed;} .modal-content .fa-arrows {color: #d29a33;}
.modal-content ul {padding-left: 25px;}
.modal-header {background: #11772d;} .modal-header > .close {color: #FFF;}
h4.modal-title {font-size: 25px; color: #FFF; width: 100%; text-align: center; margin-right: -20px;}
.modal-footer a {display: block; border-radius: 12px; color: #FFF; font-family: 'Oswald', sans-serif; text-align: center; width: 80px; padding: 5px 20px; background: #e3ae4d; margin-left: auto; margin-right: auto;}

/* middle content*/
.middle-c {padding-top: 0px; padding-bottom: 0px; color: #FFF; background: url(../images/bgbel.jpg) no-repeat; background-position: center; background-size: cover;}
.middle-c .col-sm-7 {padding: 30px;}

/* below content */
.below-c {background: #FFF;}
.below-c .boxes {padding: 40px; border-left: 2px solid #e3ae4d; background: #FFF; border-right: 2px solid #e3ae4d; border-bottom: 2px solid #e3ae4d;}
.below-c h1 {margin-bottom: 50px;}
.below-c .boxes h2 {background: url(../images/ornat.png) no-repeat bottom; text-align: center; padding-bottom: 30px; margin-bottom: 20px;}

/* program yayasan */
.program-yvpp {width: 50%; background: #FFF; text-align: center; margin-top: 40px; display: block; margin-left: auto; margin-right: auto; border: 1px solid #999; padding: 40px; color: #666;}
.program-yvpp  h2 {font-size: 18px; background: url(../images/ornat.png) no-repeat bottom; text-align: center; padding-bottom: 30px; margin-bottom: 20px;}
.program-yvpp table {margin-top: 40px; text-align: left;}
.program-yvpp table th, .program-yvpp .addtables tr td:first-child {font-family: 'Oswald', sans-serif; font-size: 16px;}
ul.no-bullet {list-style-type: none;}
a.btn-insides {display: block; font-family: 'Oswald', sans-serif;  width: 250px; text-align: center; padding: 10px 10px; margin-top: 60px; border-radius: 8px; background: #d6a244; color: #FFF; margin-left: auto; margin-right: auto; }
a.btn-insides:hover, a.btn-insides:focus { background: #FFF; color: #11772d;} 


/* Facilities aka Gallery */
.card-columns {-webkit-column-count: 4; -moz-column-count: 4; column-count: 4;}
.facilities ul {list-style-type: auto;}
.tab-content .tab-pane {padding-top: 30px;}
.facilities .nav-tabs {border-bottom: none; text-align: center; width: 60%;}
.nav-tabs li a {color: #666;}

/* page Artikel Berita aka News */
.berita {padding-top: 50px;}
.berita .card-columns {-webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}
.berita-detail .breadcrumb {border: none; background: transparent; padding-left: 0px; border-bottom: 1px solid #e0e0e0;}
.berita-detail ol li:first-child {font-family: 'Lora', serif; font-size: 22px; font-weight: normal;}
.berita-detail ol li:first-child a{color: #1d4d7b;}
.berita-detail ol li a{color: #e28307; font-weight: normal;} .berita-detail ol li a:hover, .berita-detail ol li a:focus {color: #d8c100;}
.berita-detail .card {margin-bottom: 20px;}
.berita-detail .col-sm-8, .berita-detail .col-sm-4 {padding-top: 40px;}
.berita-detail h1 { text-align: left; font-size: 25px; color: #666; margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid #999; line-height: 32px; }
.berita-detail .timeon {display: block; margin-bottom: 20px; font-size: 11px;}
.berita-detail .timeon .fa-calendar-check-o {color: #bf8200; font-weight: bold;}
.berita-detail img {margin-bottom: 40px;}

/* BLOG */
.bloging h1 {font-size: 35px; text-align: left; display: inline-block; max-width: 100px; vertical-align: top;  padding-bottom: 0px;}
.bloging h2 {font-size: 25px; margin-top: 0px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #999;}
.bloging .description {display: inline-block; text-align: left; width: 85%; float: right; padding-left: 30px; border-left: 1px solid #999;}
.bloging .col-sm-8, .bloging .col-sm-4 {margin-top: 40px;}
.bloging img {border: 1px solid #e6e6e6; border-bottom: none;}
.bloging .blog-content {padding: 40px; border: 1px solid #e6e6e6; border-top: none;}
.bloging .blogbox {margin-bottom: 40px; background: #FFF;}
ul.blog-record  {list-style-type: none; font-size: 12px;}
ul.blog-record li {display: inline-block; padding-right: 20px;}
ul.blog-record li:nth-child(1):before { color: #e4b204;  content: "\f073"; font-size: 16px;  font-family: FontAwesome;  display: inline-block; width: 1.3em;}
ul.blog-record li:nth-child(2):before { color: #e4b204;  content: "\f007"; font-size: 16px; font-family: FontAwesome;  display: inline-block; width: 1.3em;}
ul.blog-list {list-style-type: none;} 
ul.blog-list li:before {color: #e4b204; content: "\f101"; font-size: 12px;  font-family: FontAwesome;  display: inline-block; width: 1.3em;}
ul.blog-list li a {text-align: left; padding: 5px 8px; color: #444; font-size: 12px;}
.bloging .col-sm-4 h3 {background: url(../images/ornat2.png) no-repeat left bottom; padding-bottom: 25px; margin-bottom: 10px;}
.bloging .boxside {text-align: center; font-size: 12px; border: 1px solid #999; padding: 20px; margin-bottom: 30px;}
.bloging .boxside h3 {background: none; text-align: center; margin-bottom: 0px;}
.blog-content h4 {margin-top: 20px; margin-bottom: 10px;}

/* footer */
footer {padding-top: 80px; padding-bottom: 20px; font-size: 12px; border-bottom: 10px solid #d99b2b; color: #c4c4c4; background: url(../images/bgfoot.jpg) no-repeat; background-size: cover; }
footer .row:last-child {text-align: center;} footer h1 {color: #FFF;} 
footer h1 {margin-bottom: 40px;}
footer h2 {font-size: 18px; background: url(../images/ornat2.png) no-repeat bottom left; padding-bottom: 20px;}
footer hr {border-color: #c4c4c4; margin-bottom: 20px;}
footer .boxes {margin-bottom: 20px;}
footer .boxes img {width: 30%; float: left; padding-right: 15px;}
footer .boxes a { padding-left: 10px; margin-bottom: 0px; display: block; line-height: 20px; color: #FFF; }
footer a:hover, footer a:focus {color: #e19202;}
footer .boxes b {font-size: 12px; color: #e19202;}
footer ul.flist {list-style-type: none; margin-left: 0px;}
footer ul.flist li {background: url(../images/bullet1.png) no-repeat left top; padding-left: 25px;}
footer ul.fhub {list-style-type: none;} footer ul.fhub li {padding-bottom: 10px;}
footer ul.fhub li:nth-child(1) {padding-left: 25px; background: url(../images/hubloc.png) no-repeat left top;}
footer ul.fhub li:nth-child(2) {padding-left: 25px; background: url(../images/hubphone.png) no-repeat left top;}
footer ul.fhub li:nth-child(3) {padding-left: 25px; background: url(../images/hubmobile.png) no-repeat left top;}
/* Listing */
ul.listing-one {padding-left: 18px;}
ul.listing-devide {-moz-column-count: 2;-moz-column-gap: 20px;-webkit-column-count: 2;-webkit-column-gap: 20px;column-count: 2;  column-gap: 20px; list-style-type: none; padding: 0px;}
ul.listing-bullet {list-style-type: none;}
ul.listing-bullet li:before {  color: #7d7d7d; content: "\f101"; font-family: FontAwesome; display: inline-block; font-size: 10px; width: 1.2em;  /* margin-left: -1.3em; if neccessary*/ }

/* anime testing */

.svg {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0; right: 0; left: 0; bottom: 0;
}
/* === RESPONSIVE QUERY === */
@media (max-width: 2600px){}

@media (max-width: 1280px){}

@media (max-width: 1100px){}

@media (max-width: 1004px){
.container {width: 100%;}
.program-yvpp {width: 70%;}
}

@media (max-width: 823px){
}
@media (max-width: 768px) {
	body {padding-top: 50px;}
	.theme-navbar {min-height: 60px;} 
	.theme-navbar .navbar-brand img {width: 260%;}
    .container {max-width: 720px;}
    nav .container {max-width: 98%;}
    .theme-navbar {padding:0px;}
    .sosmed {position: absolute; right: 10%; top: 30px; }
    header.sticky .theme-navbar .navbar-brand img {width: 240%; transition: all 0.4s ease;}
    .banner > .ornament {display: block; position: absolute; height: 68px; width: 100%; bottom: -40px; background: url(../images/ornab-sm.png) no-repeat; background-position: center; background-size: cover; z-index: 999;}
}
@media (max-width: 576px) {
	.navbar-toggler {margin-right: 10px;}
    .container {max-width: 540px;}
    nav .container {max-width: 98%;}
    .sosmed {position: absolute; right: 16%; top: 12px; }
    .banner .bquotes {width: 90%; left: 5%; font-size: 14px; line-height: 18px; bottom: 10%;}
    .program-yvpp {width: 100%;}
    .facilities .card-columns {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
    .facilities .nav-tabs {display: block; text-align:  center; width: 100%;}
    .banner > .ornament-nobanner {bottom: 0px;}
    .berita .card-columns {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
    .bloging h1 {margin-bottom: 0px;}
    .bloging .description {display: block; text-align: left; width: 100%; float: none; padding-left: 0px; border-left: 1px solid transparent;}
}
@media (max-width: 300px) {
    .theme-navbar {padding:10px;}
    nav .container {max-width: 100%;}
}
@media (max-width: 200px) {
    .theme-navbar {padding:10px;}
    nav .container {max-width: 100%;}
}
footer ul.fhub li:nth-child(4) {
    padding-left: 25px;
    background: url(../images/hubmobile.png) no-repeat left top;
}