:root {
    --hijau: #366043;
    --greenhopeToneColor: #366043;
    --footergradientstart: #00643d; 
    --dark: #231F20;
    --putih: #FFF;
    --aqua: #1aa5e2;
    --bghijau: #366043;
    --bghijau_2: #296040;
    --bghijau_3: #296040; 
    --bgaqua: #1aa5e2;
    --bgyellow: #E2E991;  
    --textHijau: #256040;
    --textKuning: #E2E991;


    --btnhijau: #356044;
    --btnkuning: #E2E991;

    --heading: 32px;
    --subheading: 20px;
    --normal: 15px;
    --small: 12px;
    --heading_m: 25px;
    --subheading_m: 20px;
    --normal_m: 14px;
    --small_m: 10px;

    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s;
    
}
  
@media screen and (min-width: 300px) {

    .heading-sc {
        font-size: var(--heading_m);
        line-height: calc(var(--heading_m)*1.7);
    }
    .subheading-sc, h1, h2, h3, h4, h5 {
        font-size: var(--subheading_m);
        line-height: calc(var(--subheading_m)*1.7);
    }
    html, body, p, span, div, a {
        font-family: "Lato", sans-serif;
        font-size: var(--normal_m);
        line-height: calc(var(--normal_m)*1.4); /* font-size x 1.4 */
    }

}

@media screen and (min-width: 800px) {

    .heading-sc {
        font-size: var(--heading);
        line-height: calc(var(--heading)*2);
    }
    .subheading-sc, h1, h2, h3, h4, h5 {
        font-size: var(--subheading);
        line-height: calc(var(--subheading)*2);
    }
    html, body, p, span, div, a {
        font-size: var(--normal);
        line-height: calc(var(--normal)*1.7); /* font-size x 1.4 */
    }

}


.text-shadow {
    text-shadow: 0px 2px 2px rgba(0,0,0,0.6)
}

.text-hijau {
    color: var(--textHijau) !important;
}

.text-kuning {
    color: #dee873 !important;
}

.text-putih {
    color: var(--putih) !important;
}

.text-dark {
    color: var(--dark) !important;
}

.text-aqua {
    color: var(--aqua) !important;
}

.text-merah {
    color: red;
}

.fw-900 {
    font-weight: 900 !important;
}

.bg-hijau {
    background-color: var(--bghijau) !important;
}

.bg-hijau-2 {
    background-color: var(--bghijau_2) !important;
}

.bg-hijau-3 {
    background-color: var(--bghijau_3) !important;
}

.bg-aqua {
    background-color: var(--bgaqua) !important;
}

.logo-podcast {
    position: absolute; margin-left: 50%; left:-62.5px; top: 130px;
}
.btn-listenPodcast {
    position: absolute;
    bottom: 100px;
    margin-left: 50%;
    left: -77px;
}

.mediaCardBody {
    height: 450px; padding: 0px; position: relative;
}

.mediaThumbNa {
    display: block; height: 55%;
    margin-bottom: 15px;
}

.media_judul_putih {
    font-weight: normal !important;
    font-size: var(--normal);
    line-height: calc(var(--normal)*1.4); /* font-size x 1.4 */
    color: var(--putih);
    text-decoration: none;
    text-transform: none !important;
    height: 80px !important;
    display: inline-block;
    width: 100%;
}

.media_judul_putih:hover {
    color: #FFF;
    text-decoration: underline;
}

.media_short_desc {
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--putih);
}

.mediaLink {
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    color: var(--putih); 
    text-decoration: none;
    font-weight: normal !important;
    text-transform: capitalize !important;
}

.mediaLink:hover {
    text-decoration: underline;
    color: var(--putih);
}

.mediaLinkArchives {
    position: absolute; 
    left: 90%;
    top: 25%;
    z-index: 2;
}

/* button hijau  */ 
.btn-sc-line-hijau {
    font-weight: normal !important;
    border: 3px solid;
    border-color: var(--hijau);
    color: var(--hijau);
    border-radius: 20px;
    padding: 0.375rem 1rem;
    min-width: 160px;
}

.btn-sc-line-hijau:hover {
    border-color: white;
    color: white;
    background-color: var(--hijau);
}

/* button line Putih  */ 
.btn-sc-line-putih {
    font-weight: normal !important;
    border: 3px solid;
    border-color: white;
    color: white;
    border-radius: 20px;
    padding: 0.375rem 1rem;
    min-width: 160px;
}

.btn-sc-line-putih:hover {
    border-color: white;
    color: black;
    background-color: white;
}


 /* button fill hijau  */
.btn-sc-hijau {
    font-weight: normal !important;
    border: 3px solid;
    border-color: var(--btnhijau);
    background-color: var(--btnhijau);
    color: #FFF;
    border-radius: 20px;
    padding: 0.375rem 1rem;
    min-width: 160px;
}

.btn-sc-hijau:hover {
    background-color: #FFF;
    color: var(--btnhijau);
}

 /* button fill kuning  */
 .btn-sc-kuning {
    font-weight: normal !important;
    border: 3px solid;
    border-color: var(--btnkuning);
    background-color: var(--btnkuning);
    color: var(--textHijau);
    border-radius: 20px;
    padding: 0.375rem 1rem;
    min-width: 160px;
}

.btn-sc-kuning:hover {
    background-color: #FFF;
    border-color: #FFF;
    color: var(--textHijau);
}

/* button fill putih  */
.btn-sc-putih {
    font-weight: normal !important;
    border: 3px solid;
    border-color: var(--putih);
    background-color: var(--putih);
    color: var(--hijau);
    border-radius: 20px;
    padding: 0.375rem 1rem;
    min-width: 160px;
}

.btn-sc-putih:hover {
    border-color: var(--hijau);
    background-color: var(--hijau);
    color: var(--putih);
}


/* button fill dark  */
.btn-sc-dark {
    font-weight: normal !important;
    border: 3px solid;
    border-color: var(--dark);
    background-color: var(--dark);
    color: var(--putih);
    border-radius: 20px;
    padding: 0.375rem 1rem;
    min-width: 160px;
}

.btn-sc-dark:hover {
    border-color: var(--dark);
    background-color: var(--putih);
    color: var(--dark);
}

/* heading  */
.heading-sc {
    font-weight: normal;
    color: var(--hijau);
    display: block;
    margin-bottom: 7px;
}

.subheading-sc {
    font-weight: normal;
    line-height: 28px;
    color: var(--hijau);
    display: block;
}

.heading-header-sc {
    --header-sc: 50px;
    font-weight: 900;
    font-size: 50px;
    line-height: calc(var(--header-sc)*1.4);
    color: var(--kuning);
    display: block;
}

/* Icon circle plastic */
.plastic-circle-img-wrapper {
    display: block;
    height: 100px;
}


/* UL LI */
ul.faws {
    list-style-type: none;
    margin-top: 20px;
    padding-left: 20px;
}

ul.faws li { 
    position: relative; 
    line-height: 21px; /* best readable font size x 1.4 */
    margin-bottom: 20px;
    font-size: 15px;  
}
ul.faws li span.dot-bulet {
    position: absolute; 
    left:-20px;
    font-size: 35px;
    line-height: 23px;
}

ul.faws li > span.li-span-judul {
    display: block; 
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}

/* Kolom Video */

.playVid a img {
    transition: all .2s ease-in-out;
}
.playVid:hover a img {
    transform: scale(1.2);
}


/* Bootstrap */
html, body { 
    height: 100%; 
} 
.full-page {  
    height: 100vh; 
    width: 100vw;     
}

/* Same Col Height */
/*
.row-same-col-h {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.row-same-col-h > [class*='col-'] {
    display: flex;
    flex-direction: column;
} 
*/
/* END Same Col Height */

/* ENd Bootstrap */



/* Reset CSS */
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%; 
    vertical-align: baseline;
    background: transparent;
} */


/* Responsive style  */
@media only screen and (max-width: 600px) { 


}


.emailsub {
    border-bottom: 1px solid #FFF;
    border:0px;
    border-bottom: 1px solid #FFF; 
    /* -webkit-appearance: none;  */
    padding: 7px 7px; 
    background: transparent; 
    color: #FFF;
    outline: none;
    width: 50%;
    margin-right: 20px;
}


.emailsub::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#FFF;
    font-style: italic;
}
.emailsub:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#FFF;
    font-style: italic;
}
.emailsub::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#FFF;
    font-style: italic;
}
.emailsub:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#FFF;
    font-style: italic;
}
.emailsub::-ms-input-placeholder { /* Microsoft Edge */
    color:#FFF;
    font-style: italic;
}

.emailsub::placeholder { /* Most modern browsers support this now. */
    color:#FFF;
    font-style: italic;
}
  
.footer-section {
    color: #FFF;
}

#footer-section h2 {
    color: var(--putih);
    margin-bottom: 15px;
}

#footer-section p {
    color: #FFF;
}

.footer-icon { 
    color: #FFF;
    font-size: 25px;
    margin-right: 10px;
}

.footer-btn-download { 
    margin-top: 20px;
    margin-bottom: 20px;
 }

 .footer-icon.with-text {
    line-height: 14px;
    padding: 10px 0px;
    font-size: 14px;
    display: block;
 }

 .footer-icon.with-text i {
    margin-left: 10px;
    font-size: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right:10px;
 }

 .foot-text {
    font-weight: normal !important;
 }


/* Inline sub nav menu  */
ul#inline_sub_menu {
    width: 100%;
    padding: 15px 10px;
    background: white;
    position: fixed; top: 74px; right: 0px; left: 0;
    z-index: 99;
}
ul#inline_sub_menu li {
    display:inline;
    margin-right: 25px;
    color: var(--dark);
    float: right;
    font-weight: bold;
}

ul#inline_sub_menu li a {
    color: var(--hijau);
    font-weight: normal !important;
    text-decoration: none;
}

ul#inline_sub_menu li:first-child {
    margin-right: 6%;
}

.konten-ul ul li {
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 15px;
}

.ps_relatip {
    position: relative;
}

.ps_absolut {
    position: absolute;
}

.juduldanDesc {
    position: absolute;
    bottom: 35px;
    left: 50px;
    width: 60%;
}
.titleThumb {
    font-size: 20px;
    text-transform: capitalize;
    background-color: white;
    color: var(--dark);
    display: inline-block;
    padding: 10px 10px;
}
.descThumb {
    left: 50px;
    display: block;
    color: var(--dark);
    font-size: 16px;
    line-height: 28px;
    margin-top: 15px;
}

.thumbLink {
    position: absolute;
    left:0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 2;
    margin: 0px;
}

.thumbLink:hover + .titleThumb {
    background: var(--hijau);
    color: white;
}

.theThumb {
   transition:all 0.5s;
  -webkit-transition:all 0.5s;
  -o-transition:all 0.5s;
  -moz-transition:all 0.5s;
}

.theThumb:hover {
  filter: grayscale(1); 
  -webkit-filter: grayscale(1); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%);
}

.opa_putih {
    background: white;
    opacity: .8;  
}
.cover_div {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}


.logo-bistik-media {
    position: absolute; z-index:2; width: 300px;
    margin-left: 50%;
    left: -150px;
    top: 50%;
    margin-top: -84px; 
}


.linkMedia {
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}



.noBorder {
    border: 0px !important;
}

.homeCard {
    border: 0px;
    background: transparent; 
}


.opa_pita {
    background-color: rgba(62, 152, 104, 0.77);
    bottom: 0px; left:0px; right: 0px;
    padding: 10px 7px;
}




/* Box Hover fadeup  */
.item_boxhover {
	position: relative;
	height: 100px;
	overflow-y: hidden !important;
}

.item_boxhover a {
	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 1;
}

.item_boxhover a:hover ~ .item__overlay,
.item_boxhover.active .item__overlay {
  	transform: translate3d(0, 0, 0);
}


.item_boxhover img {
  	width: 100%;
 	height: 100px;
  	display: block;
  	object-fit: contain;
  	margin: 0 auto;
}

.item__overlay {
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	height: 100%;
  	position: absolute;
  	width: 100%;
	top: 0;
  	transition: transform 300ms;
  	background-color: rgb(255 255 255 / 90%);
  	transform: translate3d(0, calc(100% - 0px), 0);
}

.item__overlay .item__body {
  	flex-grow: 1;
  	padding: 1rem;
}
.item__overlay .item__body p {
  	margin: 0;
}