@charset "utf-8";

/* CSS Document */

@media screen and (min-width:0px) and (max-width:989px) {

*{

    box-sizing: border-box;

}   

body{

    margin: 0px;

    background: #FFF;

}

html {

    scroll-behavior: smooth;

}



nav:not(.mm-menu){

    display: none;

}



.menu-mobile{

    text-align: left;

    float: left;

    z-index: 10;

    position: relative;

    margin-top: 4px;

}

.menu-mobile{

    font-size: 16px;

    font-weight: bold;

    color: #000;

    line-height: 47px;

    -moz-box-sizing: border-box;

    box-sizing: border-box; 

}

.menu-mobile.fixed{

    position: fixed;

    top: 0;

    left: 0;

}

.menu-mobile .menu-mobile a{

    background: center center no-repeat transparent;

    background-image:url(../images/mob.png);

    display: block;

    width: 30px;

    height: 29px;

    top: 0;

    right: 0px;

    float:left;

    text-decoration:none;

}



.header_atas{

    float: left;

    width: 100%;

    padding-top: 10px;

    padding-bottom: 10px;

    overflow: hidden;

    background: #009046;

    font-size: 0px;

    font-family: 'Myriad Pro Regular';

}

.header_atas .left{

    float: left;

}

.header_atas .left i{

    font-size: 11px;

    color: #FFF;

    float: left;

    margin-top: 2px;

    margin-right: 5px;

}

.header_atas .left a{

    float: left;

    color: #FFF;

    margin-right: 15px;

    position: relative;

}

.header_atas .left a:after{

    content: "";

    position: absolute;

    right: -7.5px;

    top: 2px;

    width: 1px;

    height: 12px;

    background: #007434;

}

.header_atas .left a:nth-last-child(1):after{

    display: none;

}

.header_atas .right{

    font-size: 14px;

    color: #FFF;

    float: right;

}

.header_atas .right a{

    color: #FFF;

    margin-left: 5px;

}



.menu_atas{

    float: left;

    width: 100%;

    background: #FFF;

    padding-top: 15px;

    padding-bottom: 15px;

}

.menu_atas .logo{

    float: left;

    width: 100%;

    margin-top: -40px;

    text-align: center;

}

.menu_atas .logo img{

    width: 100%;

    max-width: 150px;

}



#navbar {

}

.sticky {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.95);

    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);

    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);

    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);

    color: #000;

    z-index: 5;

}

.sticky + .content {

    padding-top: 60px;

}



#cssmenu {

    display: none;

}



.slide{

    float: left;

    width: 100%;

    overflow: hidden;

    position: relative;

}



.berita_home{

    float: left;

    width: 100%;

    background: #f8f8f8;

    position: relative;

    padding-top: 50px;

    padding-bottom: 50px;

}

.berita_home .title{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Semibold';

    color: #2f2f2f;

    font-size: 20px;

    padding-bottom: 10px;

    margin-bottom: 20px;

    text-align: left;

    border-bottom: 1px solid #EEE;

}

.berita_home .title:after{

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 180px;

    height: 1px;

    background: #f5d735;

}

.berita_home .slide{

    float: left;

    width: 100%;

}

.berita_home .box{

    float: left;

    width: 100%;

    height: 340px;

    overflow: hidden;

    background: #FFF;

    border-radius: 8px;

    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(221,221,221,1);

    -moz-box-shadow: inset 0px 0px 0px 1px rgba(221,221,221,1);

    box-shadow: inset 0px 0px 0px 1px rgba(221,221,221,1);

}

.berita_home .box .pic{

    float: left;

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: #000;

    position: relative;

    transition: all 0.4s ease-in;

}

.berita_home .box:hover .pic{

    opacity: 0.5;

}

.berita_home .box .pic img{

    width: 100%;

    height: 100%;

    transition: transform .3s;

}

.berita_home .box:hover .pic img{

    transform: scale(1.05);

}

.berita_home .box .desc{

    float: left;

    width: 100%;

    padding: 5%;

    overflow: hidden;

}

.berita_home .box .desc .title_berita{

    float: left;

    width: 100%;

    height: 65px;

    overflow: hidden;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 18px;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

}

.berita_home .box:hover .desc .title_berita{

    color: #f5d735;

}

.berita_home .box .desc .sub_category{

    float: left;

    padding: 5px;

    border-radius: 3px;

    letter-spacing: 1px;

    font-family: 'Myriad Pro Regular';

    font-weight: normal;

    color: #FFF;

    background: #777777;

    font-size: 11px;

    margin-bottom: 10px;

}



.produk_home{

    float: left;

    width: 100%;

    padding-top: 50px;

    padding-bottom: 50px;

    background: #FFFFFF;

    position: relative;

    overflow: hidden;

}

.produk_home .title{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Semibold';

    color: #2f2f2f;

    font-size: 32px;

    padding-bottom: 10px;

    margin-bottom: 30px;

    text-align: center;

}

.produk_home .grid{

    float: left;

    width: 100%;

    display: grid;

    grid-template-columns: auto;

    grid-gap: 30px;

    -webkit-box-pack: left;

    -ms-flex-pack: left;

    justify-content: left;

}

.produk_home .grid > div{

    text-align: left;

}

.produk_home .box{

    float: left;

    width: 100%;

    height: 400px;

    background: rgb(21,148,11);

    background: linear-gradient(270deg, rgba(21,148,11,1) 0%, rgba(17,105,6,1) 50%);

    border-radius: 8px;

    position: relative;

    overflow: hidden;

}

.produk_home .box:nth-child(3n+2){

    float: left;

    width: 100%;

    height: 400px;

    background: rgb(228,184,73);

    background: linear-gradient(270deg, rgba(228,184,73,1) 0%, rgba(183,135,1,1) 50%);

    border-radius: 8px;

    position: relative;

    overflow: hidden;

}

.produk_home .box:nth-child(3n+3){

    float: left;

    width: 100%;

    height: 400px;

    background: rgb(154,21,77);

    background: linear-gradient(270deg, rgba(154,21,77,1) 0%, rgba(87,3,26,1) 50%);

    border-radius: 8px;

    position: relative;

    overflow: hidden;

}

.produk_home .box .back{

    opacity: 0;

}

.produk_home .box:hover .back{

    opacity: 1;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(25, 147, 6, 0.6);

    text-align: center;

    color: #FFF;

    font-size: 50px;

    transition: all 0.4s ease-in;

}

.produk_home .box:hover .back .ico{

    margin: 0 auto;

    margin-top: 45%;

    text-align: center;

    display: inline-block;

    transition: all 0.4s ease-in;

}

.produk_home .box:hover .back .ico i{

    font-size: 60px;

    color: #FFF;

}

.produk_home .box .pic{

    float: left;

    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #000;

    position: relative;

}

.produk_home .box .pic img{

    width: 100%;

    height: 100%;

    transition: transform .3s;

}

.produk_home .box:hover .pic img{

    transform: scale(1.05);

}

.produk_home .box .desc{

    float: left;

    width: 100%;

    padding: 5%;

    overflow: hidden;

}

.produk_home .box .desc .title_berita{

    float: left;

    width: 100%;

    height: 70px;

    overflow: hidden;

    font-family: 'Myriad Pro Regular';

    color: #FFF;

    font-size: 15px;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

}

.produk_home .box .sub_category{

    position: absolute;

    left: 15px;

    top: 190px;

    padding: 8px;

    padding-left: 15px;

    padding-right: 15px;

    border-radius: 5px;

    font-family: 'Myriad Pro Semibold';

    color: #FFF;

    background: rgb(22,159,12);

    background: linear-gradient(270deg, rgba(22,159,12,1) 0%, rgba(17,105,6,1) 50%);

    font-size: 24px;

}

.produk_home .box:nth-child(3n+2) .sub_category{

    position: absolute;

    left: 15px;

    top: 190px;

    padding: 8px;

    padding-left: 15px;

    padding-right: 15px;

    border-radius: 5px;

    font-family: 'Myriad Pro Semibold';

    color: #FFF;

    background: rgb(228,184,73);

    background: linear-gradient(270deg, rgba(228,184,73,1) 0%, rgba(183,135,1,1) 50%);

    font-size: 24px;

}

.produk_home .box:nth-child(3n+3) .sub_category{

    position: absolute;

    left: 15px;

    top: 190px;

    padding: 8px;

    padding-left: 15px;

    padding-right: 15px;

    border-radius: 5px;

    font-family: 'Myriad Pro Semibold';

    color: #FFF;

    background: rgb(154,21,77);

    background: linear-gradient(270deg, rgba(154,21,77,1) 0%, rgba(87,3,26,1) 50%);

    font-size: 24px;

}



.partner_home{

    float: left;

    width: 100%;

    padding-top: 50px;

    padding-bottom: 50px;

    background: #FFF;

    position: relative;

    overflow: hidden;

}

.partner_home .slide{

    float: left;

    width: 100%;

}

.partner_home .slide .box{

    float: left;

    width: 100%;

    height: 60px;

}

.partner_home .slide .box img{

    width: 100%;

    height: 100%;

    filter: grayscale(100%);

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

}

.partner_home .slide .box:hover img{

    width: 100%;

    height: 100%;

    filter: grayscale(0%);

}



.tentang_page{

    float: left;

    width: 100%;

    padding-top: 30px;

    padding-bottom: 30px;

    background: #FFF;

    overflow: hidden;

}

.tentang_page .top_side{

    float: left;

    width: 100%;

    text-align: center;

    margin-bottom: 80px;

}

.tentang_page .top_side .title_top{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Semibold';

    font-size: 20px;

    text-transform: uppercase;

    color: #000;

    margin-bottom: 10px;

}

.tentang_page .top_side .bread{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 14px;

    color: #666;

    margin-top: 8px;

}

.tentang_page .top_side .bread a{

    color: #666;

}

.tentang_page .top_side .bread a:nth-last-child(2){

    font-weight: bold;

    color: #666;

}

.tentang_page .side_left{

    float: left;

    width: 100%;

    margin-bottom: 30px;

}

.tentang_page .side_right{

    float: left;

    width: 100%;

    margin-bottom: 30px;

}

.tentang_page .side_full{

    float: left;

    width: 100%;

    margin-bottom: 30p;

}

.tentang_page h2{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 17px;

    padding-bottom: 10px;

    margin-bottom: 15px;

    text-align: left;

    border-bottom: 1px solid #EEE;

}

.tentang_page h2:after{

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 180px;

    height: 1px;

    background: #f5d735;

}

.tentang_page h2.center{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 18px;

    padding-bottom: 10px;

    margin-bottom: 15px;

    text-align: center;

    border-bottom: none;

}

.tentang_page h2.center:after{

    content: "";

    position: absolute;

    left: 40%;

    bottom: 0;

    width: 20%;

    height: 1px;

    background: #f5d735;

}

.tentang_page .text{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Regular';

    color: #0b560b;

    font-size: 15px;

    line-height: 1.8em;

}

.tentang_page .text p{

    padding-bottom: 10px;

}

.tentang_page .text b, .tentang_page .text strong{

    font-family: 'Myriad Pro Semibold';

    color: #000;

}

.tentang_page .text li{

    padding-bottom: 0;

    margin-left: 15px;

}

.tentang_page .text .link{

    float: left;

    width: 100%;

    margin-bottom: 25px;

}

.tentang_page .text .link i{

    float: left;

    margin-right: 10px;

    font-size: 30px;

    margin-top: -3px;

    color: #f5d735;

}

.tentang_page .text .link a{

    color: #000;

}

.tentang_page .pic_big{

    float: left;

    width: 100%;

    overflow: hidden;

}

.tentang_page .pic_big img{

    width: 100%;

}

.tentang_page .grid{

    float: left;

    width: 100%;

    margin-bottom: 60px;

}

.tentang_page .grid .row{

    box-sizing: border-box;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex: 0;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}

.tentang_page .grid .center_grid{

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    text-align: center;

}

.tentang_page .box_foto{

    box-sizing: border-box;

    -ms-flex: 0 0 auto;

    -webkit-box-flex: 0;

    flex: 0 0 auto;

    -ms-flex-preferred-size: 100%;

    margin: ;

    flex-basis: 100%;

    max-width: 100%;

    height: 470px;

    overflow: hidden;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    position: relative;

    background: #EEE;

    border-bottom: 3px solid rgba(119,119,119,0.3);

    padding: 15px;

    margin-bottom: 20px;

}

.tentang_page .box_foto:hover{

    border-bottom: 3px solid #f5d735;

    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);

    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);

    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);

}

.tentang_page .box_foto .pic{

    float: left;

    width: 100%;

    height: 320px;

    overflow: hidden;

    position: relative;

}

.tentang_page .box_foto .pic img{

    width: 100%;

    height: 100%;

}

.tentang_page .box_foto .pic .back{

    opacity: 0;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

}

.tentang_page .box_foto:hover .pic .back{

    position: absolute;

    left: 0;

    top: 0;

    opacity: 1;

    width: 100%;

    height: 100%;

    background: rgba(39, 174, 96, 0.6);

    z-index: 1;

}

.tentang_page .box_foto .name{

    float: left;

    width: 90%;

    margin: 5%;

    margin-top: 20px;

    text-align: center;

    font-family: 'Myriad Pro Semibold';

    font-size: 20px;

    color: #009046;

    margin-bottom: 20px;

    letter-spacing: 0;

}

.tentang_page .box_foto .subname{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Semibold';

    font-size: 16px;

    color: #000;

}

.tentang_page .grid_award{

    float: left;

    width: 100%;

    display: grid;

    grid-template-columns: auto;

    grid-gap: 20px;

}

.tentang_page .grid_award > div{

    text-align: center;

}

.tentang_page .box_award{

    float: left;

    width: 100%;

    height: 300px;

    overflow: hidden;

}

.tentang_page .box_award .pic{

    float: left;

    width: 100%;

    height: 200px;

    margin-bottom: 10px;

    overflow: hidden;

}

.tentang_page .box_award .pic img{

    width: 100%;

    height: 100%;

}

.tentang_page .box_award .name{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 18px;

    color: #000;

    margin-bottom: 10px;

}

.tentang_page .box_award .subname{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 15px;

    color: #009046;

}



.produk_page{

    float: left;

    width: 100%;

    padding-top: 30px;

    padding-bottom: 30px;

    background: #FFF;

    overflow: hidden;

}

.produk_page .top_side{

    float: left;

    width: 100%;

    margin-bottom: 60px;

}

.produk_page .top_side .title_top{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 20px;

    text-transform: uppercase;

    color: #000;

}

.produk_page .top_side .bread{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 13px;

    color: #666;

    margin-top: 8px;

}

.produk_page .top_side .bread a{

    color: #666;

}

.produk_page .top_side .bread a:nth-last-child(2){

    font-weight: bold;

    color: #666;

}

.produk_page .grid{

    float: left;

    width: 100%;

    display: grid;

    grid-template-columns: auto;

    grid-gap: 20px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}

.produk_page .grid > div{

    text-align: center;

}

.produk_page .box_produk{

    float: left;

    width: 100%;

    height: 380px;

    overflow: hidden;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    position: relative;

    background: #000;

}

.produk_page .box_produk img{

    width: 100%;

    height: 100%;

}

.produk_page .box_produk .back{

    opacity: 0;

}

.produk_page .box_produk:hover .back{

    opacity: 1;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(25, 147, 6, 0.6);

    text-align: center;

    color: #FFF;

    font-size: 50px;

    transition: all 0.4s ease-in;

}

.produk_page .box_produk:hover .back .ico{

    margin: 0 auto;

    margin-top: 60%;

    text-align: center;

    display: inline-block;

    transition: all 0.4s ease-in;

}

.produk_page .box_produk:hover .back .ico i{

    font-size: 60px;

    color: #FFF;

}



.produk_detail{

    float: left;

    width: 100%;

    padding-top: 30px;

    padding-bottom: 30px;

    background: #FFF;

    overflow: hidden;

}

.produk_detail .top_side{

    float: left;

    width: 100%;

    margin-bottom: 80px;

}

.produk_detail .top_side .title_top{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Semibold';

    font-size: 20px;

    text-transform: uppercase;

    color: #000;

}

.produk_detail .top_side .bread{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 14px;

    color: #666;

    margin-top: 8px;

}

.produk_detail .top_side .bread a{

    color: #666;

}

.produk_detail .top_side .bread a:nth-last-child(2){

    font-weight: bold;

    color: #666;

}

.produk_detail .side_full{

    float: left;

    width: 100%;

    margin-bottom: 30px;

}

.produk_detail .text{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Regular';

    color: #0b560b;

    font-size: 15px;

    line-height: 1.8em;

}

.produk_detail .download_area{

    float: left;

    width: 100%;

}	
.produk_detail .download_area .button_download{

    float: left;

    padding: 12px;
	
	width: 100%;

    margin-top: 20px;

    border-radius: 8px;

    border: none;

    letter-spacing: 2px;

    background: #0b560b;

    color: #FFF;

    font-size: 16px;

    font-family: 'Myriad Pro Semibold';

    border-radius: 8px;

    position: relative;

    text-align: center;

    border: 2px solid #FFF;

    box-shadow: 3px 3px 0px 0px #FFF;

    transition: all 0.3s ease 0s; 

    -webkit-transition: all 0.3s ease 0s;

    margin-bottom: 50px;

    position: relative;

}

.produk_detail .download_area .button_download:hover{

    border: 2px solid rgba(245, 215, 53);

    box-shadow: 3px 3px 0px 0px rgba(245, 215, 53);

}		

.produk_detail .text p{

    padding-bottom: 10px;

}

.produk_detail .text b, .produk_detail .text strong{

    font-family: 'Myriad Pro Semibold';

    color: #000;

}

.produk_detail .text h1, .produk_detail .text h2, .produk_detail .text h3, .produk_detail .text h4{

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 20px;

    margin-bottom: 0px;

}

.produk_detail .text li{

    padding-bottom: 0;

    margin-left: 15px;

}

.produk_detail .button{

    float: left;
	
	width: 100%;

    padding: 12px;

    border-radius: 8px;

    border: none;

    letter-spacing: 2px;

    background: rgba(245, 215, 53);

    color: #0b560b;

    font-size: 15px;

    font-family: 'Myriad Pro Semibold';

    border-radius: 8px;

    position: relative;

    text-align: center;

    border: 2px solid #FFF;

    box-shadow: 3px 3px 0px 0px #FFF;

    transition: all 0.3s ease 0s; 

    -webkit-transition: all 0.3s ease 0s;

    margin-bottom: 50px;

    position: relative;

}

.produk_detail .button:hover{

    border: 2px solid #0b560b;

    box-shadow: 3px 3px 0px 0px #0b560b;

}



.produk_detail .form{

    float: left;

    width: 100%;

}

.produk_detail .form h2.left{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 17px;

    padding-bottom: 10px;

    margin-bottom: 25px;

    text-align: left;

    border-bottom: 1px solid #EEE;

}

.produk_detail .form h2.left:after{

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100px;

    height: 1px;

    background: #f5d735;

}

.produk_detail .form_right{

    float: left;

    width: 100%;

    margin-bottom: 20px;

}

.produk_detail .form_right h2.left{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 17px;

    padding-bottom: 10px;

    margin-bottom: 25px;

    text-align: left;

    border-bottom: 1px solid #EEE;

}

.produk_detail .form_right h2.left:after{

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100px;

    height: 1px;

    background: #f5d735;

}

.produk_detail .form_right .text{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Regular';

    color: #000;

    font-size: 14px;

    line-height: 1.5em;

    margin-bottom: 15px;

    overflow: hidden;

}

.produk_detail .form_right .text td{

    padding-right: 20px;

    padding-bottom: 5px;

}

.produk_detail .form_right .text b, .produk_detail .form_right .text strong{

    font-family: 'Myriad Pro Semibold';

}

.produk_detail .form_right .text p{

    padding-bottom: 15px;

}

.produk_detail .form .label, .ff-el-input--label, .fluentform .ff-el-input--label label{

    float: left;

    width: 100%;

    color: #0b560b;

    font-size: 16px;

    font-family: 'Myriad Pro Regular';

    margin-bottom: 10px;

}

.produk_detail .form .label_more{

    float: left;

    width: 100%;

    color: #0b560b;

    font-size: 16px;

    font-family: 'Myriad Pro Regular';

    margin-bottom: 20px;

    line-height: 1.5em;

}

.produk_detail .form .label_more li.list-text{

    margin-left: 19px;

}

.fluentform .ff-el-is-error .text-danger{

    float: left;

    width: 100%;

    padding-left: 6%;

    color: #f56c6c;;

    font-size: 12px;

    font-family: 'Myriad Pro Regular';

    margin-top: -5px;

}

.produk_detail .form .label span, .ff-el-input--label span{

    color: #0b560b;

    font-size: 12px;

}

.produk_detail .form .input{

    float: left;

    width: 100%;

    height: 45px;

    background: #FFF;

    border-radius: 5px;

    margin-bottom: 15px;

    padding: 3%;

    border: 2px solid #0b560b;

    color: #000;

    font-size: 16px;

    font-family: 'Myriad Pro Regular';

}

.produk_detail .form select.ff-el-form-control:not([size]):not([multiple]){

    float: left;

    width: 100%;

    height: 45px;

    background: #FFF;

    border-radius: 5px;

    margin-bottom: 15px;

    padding: 3%;

    border: 2px solid #0b560b;

    color: #000 !important;

    font-size: 16px;

    font-family: 'Myriad Pro Regular';

}

.produk_detail .form textarea{

    float: left;

    width: 100%;

    height: 130px;

    background: #FFF;

    border-radius: 5px;

    margin-bottom: 15px;

    padding: 3%;

    border: 2px solid #0b560b;

    color: #000 !important;

    font-size: 16px;

    font-family: 'Myriad Pro Regular';

}

.produk_detail .form .button{

    float: left;

    padding: 12px;

    padding-left: 70px;

    padding-right: 70px;

    margin-top: 20px;

    border-radius: 8px;

    border: none;

    letter-spacing: 2px;

    background: rgba(245, 215, 53);

    color: #0b560b;

    font-size: 15px;

    font-family: 'Myriad Pro Semibold';

    border-radius: 8px;

    position: relative;

    text-align: center;

    border: 2px solid #FFF;

    box-shadow: 3px 3px 0px 0px #FFF;

    transition: all 0.3s ease 0s; 

    -webkit-transition: all 0.3s ease 0s;

    margin-bottom: 50px;

    position: relative;

}

.produk_detail .form .button:hover{

    border: 2px solid #0b560b;

    box-shadow: 3px 3px 0px 0px #0b560b;

}



.berita_page{

    float: left;

    width: 100%;

    padding-top: 50px;

    padding-bottom: 50px;

    background: #FFF;

    overflow: hidden;

}

.berita_page .top_side{

    float: left;

    width: 100%;

    margin-bottom: 80px;

}

.berita_page .top_side .title_top{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Semibold';

    font-size: 20px;

    text-transform: uppercase;

    color: #000;

}

.berita_page .top_side .bread{

    float: left;

    width: 100%;

    text-align: center;

    font-family: 'Myriad Pro Regular';

    font-size: 14px;

    color: #666;

    margin-top: 8px;

}

.berita_page .top_side .bread a{

    color: #666;

}

.berita_page .top_side .bread a:nth-last-child(2){

    font-weight: bold;

    color: #666;

}

.berita_page .grid{

    float: left;

    width: 100%;

    display: grid;

    grid-template-columns: auto;

    grid-gap: 30px;

    margin-bottom: 30px;

    -webkit-box-pack: left;

    -ms-flex-pack: left;

    justify-content: left;

}

.berita_page .grid > div{

    text-align: left;

}

.berita_page .box{

    float: left;

    width: 100%;

    height: 400px;

    overflow: hidden;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    position: relative;

    background: #FFF;

    border-radius: 8px;

    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(221,221,221,1);

    -moz-box-shadow: inset 0px 0px 0px 1px rgba(221,221,221,1);

    box-shadow: inset 0px 0px 0px 1px rgba(221,221,221,1);

}

.berita_page .box .pic{

    float: left;

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: #000;

    position: relative;

    transition: all 0.4s ease-in;

}

.berita_page .box:hover .pic{

    opacity: 0.5;

}

.berita_page .box .pic img{

    width: 100%;

    height: 100%;

    transition: transform .3s;

}

.berita_page .box:hover .pic img{

    transform: scale(1.05);

}

.berita_page .box .desc{

    float: left;

    width: 100%;

    padding: 5%;

    overflow: hidden;

}

.berita_page .box .desc .title_berita{

    float: left;

    width: 100%;

    height: 45px;
    line-height: 1.1em;

    margin-bottom: 10px;

    overflow: hidden;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 20px;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

}

.berita_page .box:hover .desc .title_berita{

    color: #f5d735;

}

.berita_page .box .desc .date{

    float: left;

    letter-spacing: 1px;

    font-family: 'Myriad Pro Regular';

    color: #000;

    font-size: 12px;

    margin-bottom: 15px;

}

.berita_page .box .desc .text{

    float: left;

    width: 100%;

    height: 65px;

    overflow: hidden;

    font-family: 'Myriad Pro Regular';

    color: #0b560b;

    font-size: 15px;

    line-height: 1.5em;

}



.berita_page .detail_berita{

    float: left;

    width: 100%;

    overflow: hidden;

    margin-bottom: 50px;

}

.berita_page .detail_berita .side{

    float: left;

    width: 100%;

    margin-bottom: 30px;

}

.berita_page .detail_berita .pic_berita{

    float: left;

    width: 100%;

    margin-bottom: 30px;

    overflow: hidden;

}

.berita_page .detail_berita .pic_berita img{

    width: 100%;

}

.berita_page .detail_berita .date{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Regular';

    margin-bottom: 30px;

    font-size: 14px;

    color: #000;

}

.berita_page .detail_berita .date i{

    font-size: 16px;

    color: #000;

}

.berita_page .detail_berita .title_berita{

    float: left;

    width: 100%;

    overflow: hidden;

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 28px;

    text-transform: uppercase;

    margin-bottom: 20px;

    text-align: left;

}

.berita_page .detail_berita .text{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Regular';

    font-weight: normal;

    color: #0b560b;

    font-size: 16px;

    line-height: 1.8em;

}

.berita_page .detail_berita .text p{

    padding-bottom: 20px;

}

.berita_page .detail_berita .text b, .berita_page .detail_berita .text strong{

    font-family: 'Myriad Pro Semibold';

    color: #000;

}

.berita_page .detail_berita .text h1, .berita_page .detail_berita .text h2, .berita_page .detail_berita .text h3, .berita_page .detail_berita .text h4{

    font-family: 'Myriad Pro Semibold';

    color: #000;

    font-size: 20px;

    margin-bottom: 0px;

}

.berita_page .detail_berita .text li{

    padding-bottom: 0;

    margin-left: 15px;

}

.berita_page .detail_berita .menu_right{

    float: left;

    width: 100%;

}

.berita_page .detail_berita .menu_right .title{

    float: left;

    width: 100%;

    position: relative;

    font-family: 'Myriad Pro Regular';

    color: #000;

    font-size: 17px;

    padding-bottom: 10px;

    margin-bottom: 10px;

    text-align: left;

}

.berita_page .detail_berita .menu_right .title:after{

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 40px;

    height: 2px;

    background: #f5d735;

}

.berita_page .detail_berita .menu_right .link{

    float: left;

    width: 100%;

    padding-top: 10px;

    padding-bottom: 10px;

    font-family: 'Myriad Pro Regular';

    color: #777;

    font-size: 15px;

    margin-bottom: 5px;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    border-bottom: 1px solid rgba(221,221,221,1);

}

.berita_page .detail_berita .menu_right .link i{

    float: left;

    font-size: 10px;

    margin-top: 3px;

    margin-right: 10px;

    transition: margin-left 0.3s;

    -webkit-transition: margin-left 0.3s;

}

.berita_page .detail_berita .menu_right .link:hover{

    color: #27ae60;

}

.berita_page .detail_berita .menu_right .link:hover i{

    float: left;

    margin-left: 10px;

}

.berita_page .detail_berita .side .text .button{

    padding: 12px;

    padding-left: 50px;

    padding-right: 50px;

    margin-top: 20px;

    border-radius: 8px;

    border: none;

    letter-spacing: 2px;

    background: rgba(245, 215, 53);

    color: #0b560b;

    font-size: 15px;

    font-family: 'Myriad Pro Semibold';

    border-radius: 8px;

    position: relative;

    text-align: center;

    border: 2px solid #FFF;

    box-shadow: 3px 3px 0px 0px #FFF;

    transition: all 0.3s ease 0s; 

    -webkit-transition: all 0.3s ease 0s;

    margin-bottom: 50px;

    position: relative;

}

.berita_page .detail_berita .side .text .button:hover{

    border: 2px solid #0b560b;

    box-shadow: 3px 3px 0px 0px #0b560b;

}


.paging{

    float: left;

    width: 100%;

    margin-top: 40px;

    margin-bottom: 40px;

    text-align: center;

}

.paging ul{

    display: inline-block;

    margin: 0;

    padding: 0;

    zoom:1;

    *display: inline;

}

.paging li{

    float: left;

    list-style: none;

    margin: 5px;

    position: relative;

}

.paging li a{

    float: left;

    width: 35px;

    height: 35px;

    text-align: center;

    border: 1px solid rgba(221,221,221,1);

    color: #777;

    font-size: 15px;

    line-height: 2.2em;

    font-family: 'Myriad Pro Regular';

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

}

.paging li a:hover, .paging li a.active{

    border: 1px solid #009046;

    background: #009046;

    color: #FFF;

}



.footer{

    float: left;

    width: 100%;

    padding-top: 30px;

    background: #03602e;

    position: relative;

}

.footer .grid{

    float: left;

    width: 100%;

    display: grid;

    grid-template-columns: auto;

    grid-gap: 30px;

}

.footer .grid > div{

    text-align: left;

}

.footer .box{

    float: left;

    width: 100%;

}

.footer .box .logo{

    float: left;

    width: 100%;

    margin-bottom: 35px;

}

.footer .box .logo img{

    width: 200px;

    float: left;

}

.footer .box .title{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Bold';

    position: relative;

    color: #FFF;

    font-size: 15px;

    text-transform: uppercase;

    margin-bottom: 30px;

    text-align: left;

}

.footer .box .title:after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 50px;

    height: 3px;

    background: #fee252;

}

.footer .box .text{

    float: left;

    width: 100%;

    font-family: 'Myriad Pro Regular';

    color: #FFF;

    font-size: 14px;

    line-height: 1.5em;

    margin-bottom: 15px;

    overflow: hidden;

}

.footer .box .text b, .footer .box .text strong{

    font-family: 'Myriad Pro Semibold';

}

.footer .box .text p{

    padding-bottom: 15px;

}

.footer .box .text a{

    color: #FFF;

}

.footer .box .text img{

    width: 100%;

}

.footer .box i{

    float: left;

    font-size: 26px;

    margin-right: 10px;

}

.footer .box .link:hover{

    color: #FFF;

}

.footer .bottom{

    float: left;

    width: 100%;

    margin-top: 40px;

    padding-top: 20px;

    padding-bottom: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    color: #FFF;

    font-family: 'Myriad Pro Regular';

    font-size: 12px;

}



#back-to-top {

    position: fixed;

    bottom: 10px;

    right: 10px;

    z-index: 9999;

    width: 45px;

    height: 45px;

    text-align: center;

    background: url(../images/top.png) no-repeat center #009046;

    color: #FFF;

    cursor: pointer;

    border: 0;

    border-radius: 2px;

    text-decoration: none;

    transition: all 0.3s ease-out; 

    -webkit-transition: all 0.3s ease-out;

    opacity: 0;

    -webkit-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.5);

    -moz-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.5);

    box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.5);

}

#back-to-top:hover {

    opacity: 0.5;

}

#back-to-top.show {

    opacity: 1;

}

.container_24{

    margin-left: auto;

    margin-right: auto;

    width: 90%;

}

}