body{
    font-weight:normal;
    font-style:normal;
    font-size:14px;
    background-color:#f7f1ee;
    overflow-x:hidden;
    overflow-y:auto
}
.img{
    max-width:100%;
    transition:all .3s ease-out 0s
}
a,.btn{
    -webkit-transition:all .3s ease-out 0s;
    -moz-transition:all .3s ease-out 0s;
    -ms-transition:all .3s ease-out 0s;
    -o-transition:all .3s ease-out 0s;
    transition:all .3s ease-out 0s
}
.btn{
    border-radius:0px;
    font-size:14px;
    padding:0px 15px;
    height:30px;
    line-height:30px
}
a:focus,.btn:focus{
    text-decoration:none;
    outline:none
}
a:focus,a:hover{
    color:#050035;
    text-decoration:none
}
a,button,input{
    outline:medium none;
    color:#686868
}
.uppercase{
    text-transform:uppercase
}
.capitalize{
    text-transform:capitalize
}
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
    color:#383838;
    margin-top:0px;
    font-style:normal;
    font-weight:400
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    color:inherit
}
h1{
    font-size:46px;
    font-weight:500
}
h2{
    font-size:37px
}
h3{
    font-size:28px
}
h4{
    font-size:22px
}
h5{
    font-size:18px
}
h6{
    font-size:16px
}
ul{
    margin:0px;
    padding:0px
}
li{
    list-style:none
}
p{
    font-size:14px;
    font-weight:normal;
    line-height:24px;
    color:#3e3e3e;
    margin-bottom:15px
}

.home-detail-product{
    position:relative;
    display:inline-block;
    cursor:pointer;
    font-size:25pt;/*font-size:36pt;*/
    font-weight:200;
    color: #8b5e3c;
    text-decoration:none;
}
.home-detail-product:hover {
     color: #7c8738;
}
@media only screen and (max-width: 48em){
    .home-detail-product{
        position:relative;
        display:inline-block;
        cursor:pointer;
        font-size:18pt !important;
        color: #8b5e3c;
        text-decoration:none;
    }
    .home-detail-product:hover {
         color: #7c8738;
    }
}    
.detail-link{
    position:relative;
    display:inline-block;
    cursor:pointer;
    font-size:14pt;/*font-size:18pt;*/
    font-weight:300;
    color: #8b5e3c;
    text-decoration:none;
}
.detail-link::after{
    content:"\2192";
    font-size:30px;
    display:inline-block;
    line-height:1;
    position:absolute;
    top:-4px;/*top:0px;*/
    margin-left:10px
}
.detail-link:hover {
     color: #7c8738;
}
section.ui{
    text-align:center
}
section.ui h1{
    font-size:14pt;/*font-size:18pt;*/
    color:#7c8738;
    font-weight:600;
    letter-spacing:1px
}
@media only screen and (max-width: 48em){
    section.ui h1{
        font-size:20pt !important;
        line-height: :28pt !important;
        color:#7c8738;
        font-weight:500 !important;
        letter-spacing:1px
    }

    section.ui h3{
        font-family: "Saltery";
        font-size: 20pt !important;
        line-height: 28pt !important;
        color:#8b5e3c;
    }

    section.ui img{
        width: 50%;
    }

    .detail-link{
        position:relative;
        display:inline-block;
        cursor:pointer;
        font-size:14pt !important;
        font-weight:400;
        font-family: "Muli";
        color: #8b5e3c;
        text-decoration:none;
    }
    .detail-link::after{
        content:"\2192";
        font-size:30px;
        display:inline-block;
        line-height:1;
        position:absolute;
        top:-4px;
        margin-left:10px
    }
    .detail-link:hover {
         color: #7c8738;
    }
}
section.ui h2{
    font-size:1.2rem;
    font-weight:300
}
.has-text-centered{
    overflow:hidden
}
.top-head-menu{
    z-index:200;
    display:flex;
    background:#f7f1ee;
    align-items:center;
    height:80px;
    position:absolute;
    width:100%;
    top:0;
    left:0;
    -webkit-transition:all 400ms ease-in-out;
    -moz-transition:all 400ms ease-in-out;
    -ms-transition:all 400ms ease-in-out;
    -o-transition:all 400ms ease-in-out;
    transition:all 400ms ease-in-out;
    justify-content: center;
}
.top-head-menu:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:0;
    background:transparent;
    -webkit-transition:all 400ms ease-in-out;
    -moz-transition:all 400ms ease-in-out;
    -ms-transition:all 400ms ease-in-out;
    -o-transition:all 400ms ease-in-out;
    transition:all 400ms ease-in-out;
    -webkit-box-shadow:0 0 6px 1px rgba(0,0,0,0);
    box-shadow:0 0 6px 1px rgba(0,0,0,0)
}
.top-head-menu .menu-mobile{
    display:none;
    border:0px;
    padding:5px;
    height:38px;
    width:38px;
    align-items:center;
    justify-content:center;
    background:transparent;
    border-radius:5px
}
.top-head-menu.fixed_top{
    position:fixed;
    height:50px
}
.top-head-menu.fixed_top:before{
    background:#f7f1ee;
    height:100%;
    -webkit-box-shadow:0 0 6px 1px rgba(0,0,0,.15);
    box-shadow:0 0 6px 1px rgba(0,0,0,.15)
}
.top-head-menu.fixed_top ul li a{
    animation:fadeIn;
    animation-duration:800ms;
    color: #8b5e3c
}
.top-head-menu.fixed_top .logo{
    animation:fadeIn;
    animation-duration:600ms;
    width:150px
}
.top-head-menu .logo{
    width:220px;
    padding:5px
}
.top-head-menu .logo img{
    width:100%
}
.top-head-menu nav{
    display:flex;
    margin:0;
    padding:0
}
.top-head-menu nav .selected-pointer{
    display:none
}
.top-head-menu nav ul{
    display:flex;
    align-items:center
}
.top-head-menu nav ul>li{
    display:block;
    margin-left:30px
}
.top-head-menu nav ul>li.head_nav{
    display:none
}
.top-head-menu nav ul>li.sosial-media a{
    text-align:center;
    display:inline-block
}
.top-head-menu nav ul>li.sosial-media a img{
    height:23px;
    margin:0 2px;
    display:inline-block
}
.top-head-menu nav ul>li.lang{
    -webkit-box-shadow:0 0 0 1px #8b5e3c;
    box-shadow:0 0 0 1px #8b5e3c;
    padding:5px;
    border-radius:15px
}
.top-head-menu nav ul>li.lang a{
    letter-spacing:0px;
    text-align:center;
    display:inline-block;
    padding:0 5px
}
.top-head-menu nav ul>li.lang a.list{
    border-right:solid 1px #8b5e3c
}
.top-head-menu nav ul>li a{
    text-decoration:none;
    color:#8b5e3c;
    -webkit-transition:all 200ms ease-in-out;
    -moz-transition:all 200ms ease-in-out;
    -ms-transition:all 200ms ease-in-out;
    -o-transition:all 200ms ease-in-out;
    transition:all 200ms ease-in-out;
    font-weight:500;
    letter-spacing:2px
}
.top-head-menu .flex-menu{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    position:relative;
    z-index:2;
    margin: 0 10px;
}
.body-content{
    overflow:hidden;
    display:flex;
    flex-direction:column
}
@media only screen and (min-width: 75em){
    .col-lg-A{
        -ms-flex-preferred-size:11.111111%;
        flex-basis:11.111111%;
        max-width:11.111111%
    }
}
@media only screen and (max-width: 63.9375em){
    .top-head-menu .flex-menu .logo img{
        width:116px
    }
    .top-head-menu .flex-menu nav ul>li a{
        font-size:10px
    }
    .top-head-menu section.ui h1{
        font-size:20px !important
    }
}
@media only screen and (max-width: 48em){
    .container{
        padding:0 5%
    }
    h1{
        font-size:18pt !important;
        line-height: 28pt !important
    }
    h2{
        font-size:14pt !important;
        line-height:25pt !important;
    }
    ul.steps li{
        display:none !important
    }
    ul.steps li.active{
        display:block !important
    }
    .top-head-menu{
        height:50px
        background:#f7f1ee;
    }
    .top-head-menu .flex-menu{
        width:100%;
        right:0
    }
    .top-head-menu.fixed_top .menu-mobile{
        background:transparent;
        margin-right: 10%
    }
    .top-head-menu.fixed_top .menu-mobile svg{
        fill:#8b5e3c
    }
    .top-head-menu .menu-mobile{
        display:flex
    }
    .top-head-menu .menu-mobile svg{
        fill:#8b5e3c
    }
    .top-head-menu nav{
        position:fixed;
        right:-300px;
        top:0;
        width:300px;
        height:100%;
        background-color:#fff;
        padding-bottom:20px;
        -webkit-transition:all 500ms ease-in-out;
        -moz-transition:all 500ms ease-in-out;
        -ms-transition:all 500ms ease-in-out;
        -o-transition:all 500ms ease-in-out;
        transition:all 500ms ease-in-out
    }
    .top-head-menu nav ul{
        flex-direction:column;
        justify-content:start;
        align-items:flex-start;
        width:100%;
        position:relative;
        z-index:2;
        background:#f7f1ee
    }
    .top-head-menu nav ul li{
        width:100%;
        margin:0;
        display:flex;
        align-items:center;
        height:40px
    }
    .top-head-menu nav ul li.sosial-media{
        width:auto !important
    }
    .top-head-menu nav ul li.sosial-media a{
        padding:0
    }
    .top-head-menu nav ul li.lang{
        margin-top:10px;
        margin-left:24px;
        width:100px !important;
        height:30px !important;
        display:flex;
        justify-content:space-around;
        align-content:center;
        padding:0
    }
    .top-head-menu nav ul li.lang a{
        margin:0;
        padding:0;
        width:50%;
        border-radius:0
    }
    .top-head-menu nav ul li:hover a{
        color:#8b5e3c
    }
    .top-head-menu nav ul li:hover .selected-pointer{
        border:solid 1px rgba(83,57,43,.13)
    }
    .top-head-menu nav ul li:hover .selected-pointer svg{
        fill:#fff
    }
    .top-head-menu nav ul li.head_nav{
        display:flex;
        border-bottom:solid 1px #edf2f8;
        height:70px
    }
    .top-head-menu nav ul li.head_nav .logo{
        margin-left:34px
    }
    .top-head-menu nav ul li .selected-pointer{
        display:block;
        width:19px;
        height:19px;
        padding:10px;
        margin-left:12px;
        background-color:#f7f1ee;
        border:solid 1px #f7f1ee;
        border-radius:5px;
        opacity:.7;
        -webkit-transition:all 200ms ease-in-out;
        -moz-transition:all 200ms ease-in-out;
        -ms-transition:all 200ms ease-in-out;
        -o-transition:all 200ms ease-in-out;
        transition:all 200ms ease-in-out
    }
    .top-head-menu nav ul li .selected-pointer svg{
        width:100%;
        height:100%
    }
    .top-head-menu nav ul li a{
        display:block;
        color:#8b5e3c;
        opacity:.7;
        font-size:12px !important;
        padding:0px 10px;
        border-radius:5px;
        margin-left:24px;
        width:calc(100% - 88px)
    }
    .top-head-menu .logo{
        display:flex;
        max-width:220px;
        align-items:center;
        width:calc( 100% - 120px )
    }
    .top-head-menu .logo img{
        width:50%
    }
}
.constractor:before{
    content:"";
    display:block;
    opacity:0;
    position:fixed;
    right:-100px;
    top:-100px;
    width:0;
    height:0;
    -webkit-transition:all 300ms ease-in-out;
    transition:all 300ms ease-in-out;
    border-radius:100%;
    z-index:20;
    -webkit-box-shadow:0 0 0 200px rgba(0,0,0,.5);
    box-shadow:0 0 0 200px rgba(0,0,0,.5)
}
.constractor.active-push:before{
    background:#000;
    opacity:.6;
    position:fixed;
    right:0;
    top:0;
    width:150%;
    height:100%;
    z-index:200;
    border-radius:0
}
.constractor.active-push .top-head-menu:before{
    display:none
}
.constractor.active-push .top-head-menu .flex-menu .menu-mobile{
    display:none
}
.constractor.active-push .top-head-menu .flex-menu>.logo{
    display:none
}
.constractor.active-push .top-head-menu nav{
    right:0;
    top:0;
    -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.12);
    box-shadow:0 0 5px 0 rgba(0,0,0,.12)
}
.constractor.active-push .top-head-menu nav .logo{
    width:150px
}
section.cert-section-about{
    min-height:200px;
    width:100%;
    background:#f7f1ee;
    text-align:center
}
section.cert-section-about h2{
    font-family:"Saltery";
    color:#8b5e3c;
    font-size:25pt;
    font-weight:300;
}
section.cert-section-about h3{
	font-family: "Muli";
    line-height:25pt;
    color:#8b5e3c;
    max-width:738px;
    margin:0 auto;
    font-size:14pt;
    font-weight:300
}
section.cert-section-about .point-content{
    margin-top:46px
}
section.cert-section-about .point-content .logo-cert{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 5px;
    border-radius:10px;
    margin-bottom:15px
}
section.cert-section-about .point-content .logo-cert img{
    display:block;
    margin:0 auto;
    width:70%
}
section.cert-section h1{
    font-size:12pt;
    font-family: "Muli";
    color:#7c8738;
    font-weight:600;
    letter-spacing:1px
} 
@media only screen and (max-width: 48em){
	section.cert-section-about h1{
        font-family:"Muli";
        color:#7c8738;
        font-size:12pt !important;
        font-weight:600 !important;
    }
    section.cert-section-about h2{
	    font-family:"Saltery";
	    color:#8b5e3c;
	    font-size:18pt !important;
	    font-weight:500;
	}
	section.cert-section-about h3{
		font-family: "Muli";
	    line-height:25pt !important;
	    color:#8b5e3c;
	    max-width:738px;
	    margin:0 auto;
	    font-size:14pt !important;
	    font-weight:300
	}
    section.cert-section h1{
        font-size:12pt !important;
        font-family: "Muli";
        color:#7c8738;
        font-weight:600;
        letter-spacing:1px
    }
}	
section.steps-production{
    min-height:200px;
    width:100%;
    text-align:center;
    padding-top:40px;
    padding-bottom:70px;
    background-color:#f7f1ee;
    /*position: relative;*/
    display: flex;
    justify-content: center;
}
section.steps-production img.overlay-bg{
    position:absolute;
    right:-220px;
    max-width:80%
}
section.steps-production .container{
    width: 102rem;
}
section.steps-production .point-content{
    margin-top:26px;
}
section.steps-production .point-content .box{
    padding:0 4%;
    min-height:277px
}
section.steps-production .point-content .box h3{
    font-family:"Saltery";
    color:#8b5e3c;
    margin:0;
    font-size:25pt;
    /*font-size:36pt*/
}
section.steps-production .point-content .box .desc{
    font-size:14pt;
    /*font-size:18pt;*/
    color:#8b5e3c;
    line-height:25pt;
    /*line-height:30pt;*/
    margin-top:5px;
    font-weight:300;
}
section.steps-production .point-content .box .ico-point{
    position:relative
}
section.steps-production .point-content .box .ico-point img{
    width: 20%;
    /*width: 25%;*/
}
section.steps-production .point-content .box .ico-point .point{
    position:relative;
    display:flex;
    z-index:2;
    align-items:center;
    justify-content:center;
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center center;
    width:80px;
    height:80px;
    margin:20px auto
}
section.steps-production .point-content .box .ico-point .point span{
    font-family:"Saltery";
    color:#fff;
    font-size:36pt
}
@media only screen and (max-width: 48em){
	section.steps-production .container{
	    width: auto;
	}
	section.steps-production img.overlay-bg{
	    position:absolute;
	    right:-58px;
	    /*height: 700px;*/
        width: auto;
        margin-top: 210px;
	}
	section.steps-production h1{
	    font-family:"Muli";
	    color:#7c8738;
	    margin:0;
	    font-size:12pt !important;
        font-weight: 600 !important;
	}
	section.steps-production .point-content .box .desc{
	    font-size:14pt;
	    color:#8b5e3c;
	    line-height:25pt;
	    margin-top:5px;
	    font-weight:300;
	    margin-bottom: 35px;
	}
}	

section.main-about{
    min-height:200px;
    width:100%;
    background:#f7f1ee;
    text-align:center;
    padding-top:12.6%;
    padding-bottom:70px
}
section.main-about h3{
    font-family:"Saltery";
    color:#8b5e3c;
    font-size:25pt;
    /*font-size:36pt;*/
    font-weight:300;
    text-align:left;
    margin-bottom:6%
}
section.main-about .desc p{
    line-height:25pt;
    color:#8b5e3c;
    font-size:14pt;
    /*font-size:18pt;*/
    font-weight:300;
    text-align:left;
    margin-right: 33px;
}
section.main-about img{
    display:block;
    margin:0 auto;
    margin-bottom:20px
}
section.main-about img.logo-header{
    max-width:60%;
    /*max-width:100%;*/
}

@media only screen and (max-width: 48em){
	section.main-about img.logo-header{
	    max-width:50%;
        margin-top: 80px;
	}
	section.main-about .desc p{
	    line-height:25pt !important;
	    color:#8b5e3c;
	    font-size:14pt !important;
	    font-weight:300;
	    text-align:left;
        margin-right: auto;
	}
	section.main-about{
	    min-height:200px;
	    width:100%;
	    background:#f7f1ee;
	    text-align:center;
	    padding-top:12.6%;
	    padding-bottom:0px
	}
}	

section.contact-section{
    padding:50px 0;
    background-color:#fff
}
section.contact-section .box-row{
    text-align: right;
    margin-right: 35px;
}
section.contact-section .biografi{
    margin-top:40px;
    text-align:left;
    line-height:1.5;
    color:#8b5e3c;
    font-size:14pt;
    font-weight:300;
    font-family: "Muli";
}
section.contact-section .biografi li{
    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;
    margin-right:-0.5rem;
    margin-left:-0.5rem;
    align-items:center;
    margin-bottom:15px
}
section.contact-section .biografi li p{
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
    max-width:100%;
    width:100%;
    padding-left:40px;
    font-size:12pt;
    font-family: "Muli";
    color:#8b5e3c;
    font-weight:300;
}
section.contact-section .biografi li img{
    height:28px;
    margin-right:10px
}
section.cert-section{
    min-height:200px;
    width:100%;
    background:#fff;
    text-align:center
}

section.cert-section .container{
    width: 100%;
    margin-top: 50px
}
@media only screen and (max-width: 48em){
	section.contact-section{
	    padding:50px 0;
	    background-color:#fff
	}
    section.contact-section h1{
        font-family:"Muli";
        color:#7c8738;
        font-size:12pt !important;
        font-weight:600;
    }
    section.contact-section .box-row{
	    text-align: center;
	    width: 100%;
        margin-right: 70px !important;
        margin-left: 20px;
	}
	section.contact-section .biografi{
	    margin-top:40px;
	    text-align:left;
	    line-height:1.5;
	    color:#8b5e3c;
	    font-size:11pt;
	    font-weight:300;
	    font-family: "Muli";
	}
	section.contact-section .biografi li{
	    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;
	    margin-right:-0.5rem;
	    margin-left:-0.5rem;
	    align-items:center;
	    margin-bottom:15px
	}
	section.contact-section .biografi li p{
	    -ms-flex-preferred-size:100%;
	    flex-basis:100%;
	    max-width:100%;
	    width:100%;
	    padding-left:40px;
	    font-size:11pt;
	    font-family: "Muli";
	    color:#8b5e3c;
	    font-weight:300;
	}
	section.contact-section .biografi img{
	    height:28px;
	    margin-right:10px;
	    width: auto;
	}
	 section.cert-section{
	    min-height:200px;
	    width:100%;
	    background:#fff;
	    text-align:center
	}
}	
section.cert-section-about .container h2{
    max-width: 690px;
    margin: 0 auto;
    /*width: 42rem;*/
    margin-left: 275px;
}
section.cert-section .point-content{
    margin-top:46px;
}
section.cert-section .point-content .logo-cert{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 0px;
    background-color:#fff;
    border-radius:10px;
    margin-bottom:15px
}
section.cert-section .point-content .logo-cert img{
    display:block;
    margin:0 auto;
    width:70%;/*width:100%*/
}
section.filosofi-section{
    min-height:200px;
    width:100%;
    text-align:center;
    padding-top:40px;
    padding-bottom:70px;
    display: flex;
    justify-content: center;
}
section.filosofi-section .container{
    width: 102rem;
}
section.filosofi-section img.overlay-bg{
    position:absolute;
    right:-220px;
    max-width:80%
}
section.filosofi-section .point-content{
    margin-top:26px;
}
section.filosofi-section .point-content .box{
    padding:0 10%;
    min-height:277px
}
section.filosofi-section h1{
    font-family:"Muli";
    color:#7c8738;
    margin:0;
    font-size:14pt;/*font-size:18pt*/
}
section.filosofi-section .point-content .box h3{
    font-family:"Saltery";
    color:#8b5e3c;
    margin:0;
    font-size:25pt;/*font-size:36pt*/
}
section.filosofi-section .point-content .box .desc{
    font-size:14pt;/*font-size:18pt;*/
    color:#8b5e3c;
    line-height:25pt;/*line-height:30pt;*/
    margin-top:5px;
    font-weight:300;
}
@media only screen and (max-width: 48em){
    section.cert-section .point-content{
        width: 90%;
    }
    section.cert-section .point-content .logo-cert img{
        display:block;
        margin:0 auto;
        width:100%;
    }
	section.filosofi-section .container{
    	width: auto;
	}
    section.cert-section-about .container h2{
        width: auto;
        margin-left: auto;
    }
	section.filosofi-section img.overlay-bg{
	    position:absolute;
	    right:-58px;
	    /*height: 700px;*/
        width: auto;
        margin-top: 198px;
	}
	section.filosofi-section .point-content{
	    margin-top:0px
	}
	section.filosofi-section h1{
	    font-family:"Muli";
	    color:#7c8738;
	    margin:0;
	    font-size:14pt !important;
	    font-weight: 600 !important;
	}
    section.filosofi-section .point-content .box h3{
        font-family:"Saltery";
        color:#8b5e3c;
        margin:0;
        font-size:18pt !important;
        line-height: 30pt !important
    }
    section.filosofi-section .point-content .box .desc{
        font-size:14pt !important;
        color:#8b5e3c;
        line-height:25pt;
        margin-top:5px
    }
}
section.filosofi-section .point-content .box .ico-point{
    position:relative
}
section.filosofi-section .point-content .box .ico-point .point{
    position:relative;
    z-index:2;
    margin-top:20px
}
section.filosofi-section .point-content .box .ico-point .point .img{
    width:100%;
    height:114px;
    background-size:cover !important;
    border-radius:5px;
    margin-top:-20px;
    background-color:#eee !important
}
section.filosofi-section .point-content .box .ico-point .point svg{
    width:100%;
    max-width:72px;
    max-height:72px;
    fill:#379eef
}
section.main-section{
    min-height:200px;
    width:100%;
    background:#f7f1ee;
    text-align:center;
    padding-top:10%;
    padding-bottom:70px
}
section.main-section h1{
    font-family:"Saltery";
    color:#8b5e3c;
    font-size:25pt;/*font-size:36pt;*/
    font-weight:300;
    max-width: 700px;
    /*max-width: 900px*/
}
section.main-section h2{
    font-size:14pt;/*font-size:18pt;*/
    line-height:25pt;/*line-height:30pt;*/
    color:#8b5e3c;
    max-width:688px;/*max-width:885px;*/
    margin:0 auto
}
section.main-section img{
    display:block;
    margin:0 auto;
    margin-bottom:20px
}
section.main-section img.logo-header{
    max-height:110px;
    max-width:35%;/*max-width:60%*/
}
section.main-section img.farmer{
    max-height:426px;
    max-width:60%
}
.product-section{
    min-height:200px;
    width:100%;
    background:#f7f1ee;
    text-align:center;
    padding-top:2%;
    /*padding-bottom:70px;*/
    position:relative
}
@media only screen and (max-width: 48em){
    section.main-section img.logo-header{
        max-height:110px;
        max-width:60%;
    }
    section.main-section{
    min-height:200px;
        width:100%;
        background:#f7f1ee;
        text-align:center;
        padding-top:25%;
        padding-bottom:70px
    }
    section.product-section .container h1{
        font-family:"Muli";
        color:#7c8738;
        margin:0;
        font-size:14pt !important;
        font-weight: 600 !important;
    }
    .product-section{
        min-height:200px;
        width:100%;
        background:#f7f1ee;
        text-align:center;
        padding-top:8%;
        padding-bottom:0px !important;
        position:relative
    }
}
.product-section img.overlay-coco-bg{
    max-width:359px;
    position:absolute;
    bottom:2px;
    left:-48px
}
.product-section h3{
    font-family:"Saltery";
    color:#8b5e3c;
    margin-bottom:20px;
    font-size:25pt; /*font-size:36pt*/
}
.product-section .point img{
    border-style: none;
    width: 60%;
}
.product-section .margin-self{
    margin-top:8%
}
.product-section .point-content{
    margin-top:26px;
    margin-bottom: 100px;
}

.product-section .point-content .box:hover{
    opacity: 0.7;
    cursor: pointer;
    color: #7c8738;
}
.product-section .point-content .logo-cert{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 10px;
    background-color:#fff;
    border-radius:10px;
    margin-bottom:15px;
    -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.08);
    box-shadow:0 0 5px 0 rgba(0,0,0,.08)
}
.product-section .point-content .logo-cert img{
    margin:0;
    width:100%
}

section.overview-section{
    padding-bottom:37.6%;
    background-repeat:no-repeat;
    background-size:cover;
    /* Create the parallax scrolling effect 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;*/
    animation: breath 8s ease-in-out alternate;
}
@media only screen and (max-width: 48em){
    .product-section .point-content{
        margin-top:26px;
        margin-bottom: 26px;
    }
	section.overview-section{
	    padding-bottom:37.6%;
	    background-repeat:no-repeat;
	    background-size:cover;
	    height: 70px;
	    position: inherit;
        background-attachment: unset;
        background-position: unset;
	}
}	

section.mall-section{
    min-height:200px;
    width:100%;
    text-align:center;
    padding-top:40px;
    padding-bottom:70px
}
section.mall-section h2{
    line-height:1.5;
    color:#8b5e3c
}
section.mall-section .point-content{
    margin-top:60px
}
section.mall-section .point-content .box{
    padding:0 10%;
    margin-bottom:50px;
    text-align:left
}
section.mall-section .point-content .box h2{
    font-weight:600;
    font-size:14pt;
}
section.mall-section .point-content .box .desc{
    font-size:12pt;
    color:#8b5e3c;
    line-height:1.6;
    margin-top:5px
}
section.mall-section .point-content .box .ico-point{
    position:relative
}
section.mall-section .point-content .box .ico-point .point{
    position:relative;
    z-index:2;
    margin-top:20px
}
 section.online-market-section{
    min-height:200px;
    width:100%;
    text-align:center
}
section.online-market-section h2{
    line-height:1.5;
    color:#8b5e3c
}
section.online-market-section .point-content{
    margin-top:46px
}
section.online-market-section .point-content .logo-cert{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 10px;
    margin-bottom:50px
}
section.online-market-section .point-content .logo-cert img{
    display:block;
    margin:0 auto;
    width:60%;
    max-width:195px
}
 section.overview-outlet{
    margin-top:80px;
    padding-bottom:37.6%;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
    /* Create the parallax scrolling effect 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
    animation: breath 8s ease-in-out alternate;*/
}
section.overview-outlet::before{
    content:"";
    display:block;
    background-color:#fff;
    width:100%;
    padding-top:100px;
    margin-top:-100px
}
section.overview-outlet .text{
    position:absolute;
    width:100%;
    height:100%;
    text-align:left
}
section.overview-outlet .text .container{
    height:100%
}
section.overview-outlet .text .container .row{
    height:100%
}
section.overview-outlet .text .container .row div{
    display:flex;
    align-items:center
}
section.overview-outlet .text .container .row div h2{
    font-family:"Saltery";
    color:#fff;
    margin-left:80px;
    font-size:25pt;
    line-height:35pt;
    /*padding:0 30px;*/
    max-width:368px
}
@media only screen and (max-width: 48em){
	section.mall-section{
	    min-height:200px;
	    width:103%;
	    text-align:center;
	    padding-top:40px;
	    padding-bottom:30px
	}
	section.mall-section h1{
        font-size:14pt !important;
        line-height: :28pt !important;
        color:#7c8738;
        font-weight:600 !important;
        letter-spacing:1px
    }
    section.online-market-section h1{
        font-size:14pt !important;
        line-height: :28pt !important;
        color:#7c8738;
        font-weight:600 !important;
        letter-spacing:1px
    }
    section.overview-outlet{
        margin-top:80px;
        height: 70px;
        margin-left: -56px;
        background-attachment: unset;
        background-position: unset;
        background-repeat: unset;
        background-size: cover;
    }
    section.overview-outlet::before{
        padding-top:50px;
        margin-top:-50px
    }
    section.overview-outlet .text .container .row div h2{
        font-family: "Saltery";
        color: #fff;
        margin-left: 25px;
        font-size: 36pt;
        line-height: 20pt !important;
        padding: 50px 30px;
        max-width: 160px;
        margin-bottom: auto;
    }
    section.mall-section .point-content .box{
        padding:0 4%;
        margin-bottom:30px;
        text-align:left
    }
}
.top-footer{
    position:relative;
    background-color:#7c8738;
    padding-top:30px;
    display: flex;
    justify-content: center;
}
.top-footer.with-img{
    margin-top:17vh
}
.top-footer img.bg{
    width:80%;/*width:100%;*/
    position:absolute;
    bottom:0
}
.top-footer .container{
    position:relative;
    margin:0 10px; 
}
.top-footer .container h3{
    color:#fff;
    font-size:14pt;/*font-size:18pt;*/
    font-weight:500;
    letter-spacing:2px
}
.top-footer .container h4{
    visibility: visible;
    font-family:"Saltery";
    color:#fff;
    font-size:25pt;/*font-size:36pt;*/
    font-weight:100;
    animation: move-toRight 3s ease;
}
.top-footer .container h4 a{
    margin-left:5%;
    font-family:"Muli";
    font-size:18px;
    font-weight:100
}
/*
.top-footer .container h4{
    font-family:"Saltery";
    color:#fff;
    font-size:36pt;
    font-weight:100
}*/
.top-footer .container h4 a{
    margin-left:5%;
    font-family:"Muli";
    font-size:14px;
    font-weight:100
}
@media only screen and (max-width: 48em){
    .top-footer{
        position:relative;
        background-color:#7c8738;
        padding-top:30px;
        display: block !important;
        justify-content: unset !important;
    }
    .top-footer.with-img{
        margin-top:0vh
    }
	.top-footer .container h3{
	    color:#fff;
	    font-size:14pt;\
	    font-family: "Muli";
	    font-weight:500;
	    letter-spacing:2px
	}
    .top-footer img.bg{
        width:100% !important;/*width:100%;*/
        position:absolute;
        bottom:0
    }
	.top-footer .container h4{
	    font-family:"Saltery";
	    color:#fff;
	    font-size:18pt;
	    font-weight:100;
        width: max-content;
	}
}	
.bottom-footer{
    min-height:300px;
    align-items:center;
    display:flex;
    justify-content: center;
}
.bottom-footer .copyright{
    color:#fff;
    margin:30px 0 20px;
    opacity:.8
}
.bottom-footer .container{
    opacity:.8;
    margin: 0 10px;
}
.bottom-footer .container .row h3{
    font-family:"Saltery";
    color:#fff;
    font-size:25pt;/*font-size:36pt;*/
    font-weight:100
}
@media only screen and (max-width: 48em){
	.bottom-footer .container .row h3{
	    font-family:"Saltery";
	    color:#fff;
	    font-size:18pt;
	    font-weight:100
	}
}
.bottom-footer .container .row ul li{
    display:flex;
    align-items:center;
    margin-bottom:25px
}
.bottom-footer .container .row ul li i{
    color:#8b5e3c;
    background-color:#fff;
    font-size:19px;
    height:25px;
    width:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:25px;
    margin-right:10px
}
.bottom-footer .container .row ul li img{
    max-height:25px;
    margin-right:10px
}
.bottom-footer .container .row ul li a{
    color:#fff;
    font-size:16px;
    font-weight:200
}
section.product-overview-section{
    min-height:200px;
    width:100%;
    background:#fff;
    text-align:center;
    padding-bottom:50px
}
section.product-overview-section .point-content{
    margin-top:46px;
}
section.product-overview-section .point-content .box{
    /*padding:9px*/
    padding:30px;
}
section.product-overview-section .point-content .box:hover{
    /*padding:9px*/
    padding:30px;
    opacity: 0.7;
    cursor: pointer;
    color:#7c8738;
}
section.product-overview-section .point-content .logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 5px;
    background-color:#fff;
    border-radius:10px;
    margin-bottom:0px
}
section.product-overview-section .point-content .logo img{
    display:block;
    margin:0 auto;
    max-height:320px;
    width: 70%;
}
section.product-overview-section .point-content .logo img:hover{
    display:block;
    margin:0 auto;
    max-height:320px;
    opacity: 0.7;
    cursor: pointer;
}
section.product-overview-section .point-content .logo img.oil{
        display:block;
        margin:0 auto;
        max-height:320px;
        width: 15%;
    }
section.product-overview-section .point-content .title{
    color:#8b5e3c;
    text-transform:capitalize;
    font-size:14pt;
    margin-top: -8px;
    width: 82%;
    display: inline-block;
}
section.product-overview-section .point-content .title:hover{
    color:#7c8738;
    text-transform:capitalize;
    font-size:14pt;
    margin-top: -8px;
    cursor: pointer;
}
section.main-product-section{
    min-height:200px;
    width:100%;
    background:#f7f1ee;
    text-align:left;
    padding-top:1.6%;
    padding-bottom:70px
}
section.main-product-section .container h1{
    font-family: "Muli";
    font-size: 14pt;
    font-weight: 600;
}
section.main-product-section h3{
    font-family:"Saltery";
    color:#8b5e3c;
    font-size:23pt;
    font-weight:300;
    text-align:left;
    margin-bottom:5%;

}
section.main-product-section .desc{
    line-height:20pt;
    color:#8b5e3c;
    margin:0 auto;
    font-size:12pt;
    font-weight:300;
    font-family: "Muli";
    text-align:left
}
section.main-product-section img{
    display:block;
    margin:0 auto;
    margin-bottom:20px
}
section.main-product-section .container-modal img.logo-header{
    max-width:60%;
    margin-top: 132px;
}
.main-product-link{
    position:relative;
    display:inline-block;
    cursor:pointer;
    font-size:36pt;
    font-weight:200;
    color: #8b5e3c;
    text-decoration:none;
}
.main-product-link:hover {
     color: #7c8738;
}
section.main-product-section .container-modal img.logo-header-granul{
    max-width:70%;
    margin-top: 69px;
}
section.main-product-section .container-modal img.logo-header-sirup{
    max-width:52%;
    margin-top: 102px;
}
section.main-product-section .container-modal img.logo-header-oil{
    max-width:35%;
}
section.product-overview-section .point-content .logo img.sirup{
    display:block;
    margin:0 auto;
    max-height:320px;
}

section.product-overview-section .point-content .logo img.sirup-mobile{
    display:none;
}
@media only screen and (max-width: 48em){
    section.product-overview-section .point-content .box{
        /*padding:9px*/
        padding:30px 0px;
    }
    section.product-overview-section .point-content .logo img{
        display:block;
        margin:0 auto;
        max-height:320px;
        width: 100%;
    }

    section.product-overview-section .point-content .logo img.oil{
        display:block;
        margin:0 auto;
        max-height:320px;
        width: 40%;
    }

    section.product-overview-section .point-content .logo img.sirup{
        display:block;
        margin:0 auto;
        max-height:320px;
        width: 110%;
        display: none;
    }

    section.product-overview-section .point-content .logo img.sirup-mobile{
        display:block;
        margin:0 auto;
        max-height:320px;
        width: 110%;
        display: inline;
    }    

    section.main-product-section .container h1{
        font-family: "Muli";
        font-size: 14pt !important;
        font-weight: 600 !important;
    }

    section.main-product-section .desc{
        line-height:25pt;
        color:#8b5e3c;
        margin:0 auto;
        font-size:14pt !important;
        font-weight:300;
        font-family: "Muli";
        text-align:left
    }
    section.product-overview-section .point-content .title{
        color:#8b5e3c;
        text-transform:capitalize;
        font-size:12pt !important;
        margin-top: auto;
    }

    section.product-overview-section .point-content .title:hover{
        color:#7c8738;
        text-transform:capitalize;
        font-size:12pt !important;
        margin-top: auto;
    }

    section.product-section h3{
        font-family: "Saltery";
        font-size: 20pt !important;
        line-height: 28pt !important;
        color:#8b5e3c;
        margin-bottom: 15px;
        margin-left: 16px;
        margin-right: 16px;
    }

    .main-product-link{
        position:relative;
        display:inline-block;
        cursor:pointer;
        font-size:36pt;
        font-weight:200;
        color: #8b5e3c;
        text-decoration:none;
    }
    .main-product-link:hover {
         color: #7c8738;
    }

    section.main-product-section .container-modal img.logo-header-granul{
        max-width: 40% !important;
        margin-top: 109px !important;
    }

    section.main-product-section .container-modal img.logo-header-sirup{
        max-width:52%;
        margin-top: -15px;
    }
}
.product-section .margin-self{
    margin-top:8%
}
.product-section .point-content .logo-cert{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 10px;
    background-color:#fff;
    border-radius:10px;
    margin-bottom:15px;
    -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.08);
    box-shadow:0 0 5px 0 rgba(0,0,0,.08)
}
.product-section .point-content .logo-cert img{
    margin:0;
    width:100%
}
@media only screen and (max-width: 48em){
	.product-section .point-content .ico-poin .poin a img{
		width: 70%;
	}	
}	

section.overview-product{
    margin-top:0px;
    padding-bottom:37.6%;
    background-repeat:no-repeat;
    background-size:100%;
    /*background-attachment: fixed;*/
    animation: breath 8s ease-in-out alternate;
}
section.overview-product::before{
    content:"";
    display:block;
    background-color:#fff;
    width:100%;
    padding-top:100px;
    margin-top:-100px
}
@media only screen and (max-width: 48em){
    section.overview-product{
        margin-top:80px;
        height: 45px;
        margin-left: -57px;
        background-attachment: unset;
        background-size: cover;
    }
    section.overview-product::before{
        padding-top:50px;
        margin-top:-50px
    }
    section.ui.overview-modal{
        height:220px !important;
        margin-bottom:-290px !important;
        position:relative !important;
        background-size: 640px 220px !important;
    }
}
section.ui.overview-modal{
    height:290px;
    margin-bottom:-290px;
    position:relative
}
.mask{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(52,73,94,.8);
    z-index:50;
    display:none;
    opacity:0;
    transition:.7s;
    z-index:10000;
    overflow:scroll;
    padding-top:50px
}
.mask .modal{
    margin:100px auto 100px;
    overflow:hidden;
    display:block;
    width:80%;
    max-width:1200px;
    background:#fff;
    visibility:hidden;
    opacity:0;
    transition:.5s ease-out;
    position:relative
}
.mask .modal .overview-modal h3.head{
    font-family: "Saltery";
    color: #f7f1ee;
    font-size: 20pt;
    font-weight: 500;
    line-height: 30pt;
    width: 735px;
    text-align: left;
    margin-left: 417px;
    padding-top: 130px;
}    
.mask .modal .main-product-section{
    background:none !important;
    z-index:22222222;
    position:relative
}
.mask .modal .main-product-section .container-modal{
    padding:0 40px;
    margin-top: 36px
}
.mask .modal .main-product-section h1.head{
    font-size:30px;
    text-transform:capitalize;
    color:#8b5e3c;
    font-weight:500;
    margin-top: 250px;
}
.mask .modal .main-product-section h3.head{
    color:#f7f1ee !important;
    margin-bottom:105px;
}
.mask .modal .main-product-section .berat{
    font-size:25px;
    font-family: "Muli";
    color:#8b5e3c;
    margin-bottom:20px
}
.mask .modal .close{
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    color:#fff;
    cursor:pointer;
    background-color:rgba(0,0,0,0);
    border:0;
    z-index:222200000
}
.mask .modal .close img{
    fill:#fff
}
.mask .modal .body{
    display:block;
    position:relative;
    background:#f7f1ee;
}
.mask .modal .body img.overlay-coco-bg{
    max-width:359px;
    position:absolute;
    bottom:2px;
    right:-48px
}
.mask .modal .body .cert-section .container-modal img{
    width:80%
}
@media only screen and (max-width: 48em){
    .mask .modal .main-product-section img.logo-header{
        width: 45% !important;
        padding-top: 166px !important;
    }

    .mask .modal .main-product-section img.logo-header-granul{
        width: 40% !important;
        padding-top: 66px !important;
    }

    .mask .modal .main-product-section img.logo-header-sirup{
        width: 35% !important;
        padding-top: 184px !important;
    }

    .mask .modal .main-product-section img.logo-header-oil{
        width: 25% !important;
        padding-top: 133px !important;
    }
    .mask{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(52,73,94,.8);
        z-index:50;
        display:none;
        opacity:0;
        transition:.7s;
        z-index:10000;
        overflow:scroll;
        padding-top:50px
    }
    .mask .modal{
        margin:100px auto 100px;
        overflow:hidden;
        display:block;
        width:100%;
        max-width:1200px;
        background:#fff;
        visibility:hidden;
        opacity:0;
        transition:.5s ease-out;
        position:relative
    }
    .mask .modal .overview-modal h3.head{
        font-family: "Saltery";
        color: #f7f1ee;
        font-size: 18pt !important;
        font-weight: 500;
        line-height: 20pt !important;
        width: 290px !important;
        text-align: left;
        margin-left: 0px !important;
        padding-top: 18px !important;
    }
    .mask .modal .main-product-section{
        background:none !important;
        z-index:22222222;
        position:relative
    }
    .mask .modal .main-product-section .container-modal{
        padding:0 40px;
        margin-top: 36px
    }
    .mask .modal .main-product-section h1.head{
        font-size:25px !important;
        font-family: "Muli";
        text-transform:capitalize;
        color:#8b5e3c;
        font-weight:500;
        margin-top: auto;
    }
    .mask .modal .main-product-section h3.head{
        color: #f7f1ee !important;
        margin-bottom: 170px;
        width: 262px;
        margin-top: -374px;
        padding-bottom: 0px;
        margin-left: -26px;
    }
    .mask .modal .main-product-section .berat{
        font-size:25px;
        font-family: "Muli";
        color:#8b5e3c;
        margin-bottom:20px
    }
    .mask .modal .close{
        position:absolute;
        top:20px;
        right:20px;
        width:50px;
        height:50px;
        color:#fff;
        cursor:pointer;
        background-color:rgba(0,0,0,0);
        border:0;
        z-index:222200000
    }
    .mask .modal .close img{
        fill:#fff;
        width: 25px;
    }
    .mask .modal .body{
        display:block;
        position:relative;
        background:#f7f1ee;
    }
    .mask .modal .body img.overlay-coco-bg{
        max-width:359px;
        position:absolute;
        bottom:2px;
        right:-48px
    }
    .mask .modal .body .cert-section .container-modal img{
        width:130%
    }
}
.mask.active{
    visibility:visible;
    opacity:1;
     display:block
}
.mask.active .modal{
    visibility:visible;
    opacity:1;
    transform:translateY(0)
}
.how-to-use{
    margin:40px 0 20px
}
.how-to-use .container-modal{
    padding:0 40px
}
.how-to-use .row.border{
    border-top:solid 2px #7c8738;
    border-bottom:solid 2px #7c8738;
    padding:30px 0;
}
.how-to-use .row.border h4{
    font-size:12pt;
    color:#7c8738;
    font-family: "Muli";
    font-weight: 600;
}
@media only screen and (max-width: 48em){
    .how-to-use .row.border h4{
        font-size:12pt;
        color:#7c8738;
        font-family: "Muli";
        font-weight: 600;
        margin-top: revert;
    }
}    
.how-to-use .row.border ul{
    list-style:disc;
    margin-left: 13px;
}
.how-to-use .row.border ul li{
    line-height:1.6;
    color:#8b5e3c;
    list-style: disc;
    margin-right: 55px;
    font-size: 11pt;
    font-family: "Muli";
}
.how-to-use .row.border ul li.pemakaian{
    line-height:1.6;
    color:#8b5e3c;
    list-style: disc;
    margin-right: 55px;
    font-size: 10pt;
    font-family: "Muli";
}
.how-to-use .row.border ul li.penyimpanan{
    line-height:1.6;
    color:#8b5e3c;
    list-style: disc;
    margin-right: 55px;
    font-size: 10pt;
    font-family: "Muli";
}
.how-to-use .row.border ul li.manfaat{
    line-height:1.6;
    color:#8b5e3c;
    list-style: disc;
    margin-right: -9px;
    font-size: 10pt;
    font-family: "Muli";
}
@media only screen and (max-width: 48em){
    .how-to-use .row.border ul li.pemakaian{
        line-height:1.6;
        color:#8b5e3c;
        list-style: disc;
        margin-right: 0px;
        font-size: 11pt;
        font-family: "Muli";
    }
    .how-to-use .row.border ul li.penyimpanan{
        line-height:1.6;
        color:#8b5e3c;
        list-style: disc;
        margin-right: 0px;
        font-size: 11pt;
        font-family: "Muli";
    }
    .how-to-use .row.border ul li.manfaat{
        line-height:1.6;
        color:#8b5e3c;
        list-style: disc;
        margin-right: 12px;
        font-size: 11pt;
        font-family: "Muli";
    }
}

@media only screen and (min-width: 49em) and (max-width: 74em)
{
	section.filosofi-section .point-content{
		max-width: 1024px !important;
	}
    section.filosofi-section .container{
        max-width: 1024px !important;
    }
    section.steps-production .point-content{
        max-width: 1024px !important;   
    }
    section.filosofi-section .point-content .box .desc-rv{
        font-size:12pt;
        color:#8b5e3c;
        line-height:20pt;
        margin-top:5px;
        font-weight:300;
    }
    section.filosofi-section .point-content .box h3.rv{
        font-family:"Saltery";
        color:#8b5e3c;
        margin:0;
        font-size:25pt
    }
    .mask .modal .overview-modal h3.head{
        /*margin-left: 110%;
        width: 483px;*/
    }
    section.main-product-section .container-modal img.logo-header-granul{
        max-width:70%;
        margin-top: 134px !important;
    }
    section.main-product-section .container-modal img.logo-header-oil{
        max-width:35%;
        margin-top: 65px !important;
    }

}

@media only screen and (min-width: 75em) and (max-width: 85em)
{
	section.filosofi-section .point-content{
		max-width: 1200px !important;
	}
    section.filosofi-section .container{
        max-width: 1200px !important;
    }
    section.steps-production .point-content{
        max-width: 1200px !important;   
    }
    .mask .modal .overview-modal h3.head{
        /*margin-left: 110%;
        width: 483px;*/
    }
    section.main-product-section .container-modal img.logo-header-granul{
        max-width:60%;
        margin-top: 128px;
    }
    section.main-product-section .container-modal img.logo-header-oil{
        max-width:35%;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 86em) 
{
	section.filosofi-section .point-content{
		max-width: 1366px;
	}
    section.filosofi-section .container{
        max-width: 1366px;
    }
    section.steps-production .point-content{
        max-width: 1366px;  
    }
    .mask .modal .overview-modal h3.head{
        margin-left: 110%;
        width: 483px;
    }
    section.main-product-section .container-modal img.logo-header-granul{
        max-width:70%;
        margin-top: 88px;
    }
    section.main-product-section .container-modal img.logo-header-oil{
        max-width:35%;
        margin-top: 10px;
    }
}    

@keyframes breath {
  from { 
    transform: scale(1);
  }
  to {
    transform: scale(1.05)
  }
}

@keyframes move-toRight {
    0% {
        transform: translateX(-150px);
    }
    100% {
        transform: translateX(0px);
    }
}