html, body {height: 100%; padding: 0; margin: 0;}
#wrap {min-height: 100%;}
#wrap-inside {padding-bottom: 250px;}
#main {overflow:auto;}

#footer {position: relative; margin-top: -500px; height: 500px; clear:both; font-family: "Muli"; font-size: 9pt; background: url('../img/footer-bg.png') no-repeat top center; background-size: 100% 100%; color: #FFF; padding-top: 170px;}
#footer a {color: #FFF;}
#footer a:hover {color: #ff861f;}
#footer .inline-container {padding-left: 5%; padding-right: 5%;}
.footer-highlight {font-family: "Canaro-medium"; font-size: 12pt; margin-bottom: 20px;}
.footer-col {float: left; width: 24%; padding-left: 30px; padding-right: 30px;}
.footer-col-border-right {border-right: 1px solid #FFF;}
.footer-first-col {width: 25%; margin-right: 3%;}
.footer-label {font-family: "Canaro-semibold";}
.footer-sublink {padding-bottom: 10px; border-bottom: 1px solid #FFF; margin-bottom: 10px;}
.footer-social-media-wrapper img {margin-right: 10px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.footer-social-media-wrapper a:hover img {opacity: 0.7;}
.back-to-top {cursor: pointer; position: absolute; top: 108px; margin-left: -20px; left: 50%; width: 40px; height: 40px; background: url('../img/back-to-top.png') no-repeat 0 0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.back-to-top:hover {opacity: 0.7;}
.footer-mobile-version {display: none;}
.footer-top {background: url('../img/footer-bg-mobile-top.png') no-repeat top center; background-size: 100% 100%; height: 400px; padding-top: 100px;}
.footer-bottom {background: url('../img/footer-bg-mobile-bottom.png') no-repeat top center; background-size: 100% 100%; padding-top: 30px; padding-bottom: 30px;}

#copyright {padding-bottom: 5px; position: relative; font-family: "Muli"; font-size: 9px;}
.copyright-left {float: left;}
.copyright-right {float: right;}
.copyright-bold {font-family: "Muli-bold";}

body:before {content:""; height:100%; float:left; width:0; margin-top:-32767px;}

.inline-container {padding-left: 10%; padding-right: 10%; position: relative;}
a {color: #000; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
a:hover {color: #999; text-decoration: none;}
img {max-width: 100%; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
input, select {font-size: 14px;}
.hakiki-style-button {font-family: "Canaro-medium"; font-size: 13pt;}
.hakiki-style-button .button-icon {float: left; padding: 5px 8px 3px 8px; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;}
.hakiki-style-button .button-text {padding: 5px 5px 2px 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; background-color: #fff; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.hakiki-style-button a {display: table; margin: auto;}
.brown-decor {background: url('../img/brown-decor.png') no-repeat 0 0; width: 41px; height: 159px; background-size: cover;}
.green-decor {background: url('../img/our-brand-decor.png') no-repeat 0 0; width: 41px; height: 159px; background-size: cover;}

.banner {position: relative; width: 100vw; height: 30.5vh; background-size: cover; background-position: top center; background-repeat: no-repeat;}
.banner h1 {margin-top: 0; margin-bottom: 0; color: #FFF; font-family: "Muli"; font-size: 34px; position: absolute; left: 0; right: 0; text-align: center; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding-left: 5%; padding-right: 5%;}
.banner-line {background-color: #fff; width: 30px; height: 2px; position: absolute; top: 70%; left: 50%; margin-left: -15px;}
#banner-about {background-image: url('../img/banner-about.png')}
#banner-facility {background-image: url('../img/banner-facility.png')}
#banner-certification {background-image: url('../img/banner-certification.png')}
#banner-brand {background-image: url('../img/banner-brand.png')}
#banner-milestone {background-image: url('../img/banner-milestone.png')}
#banner-product {background-image: url('../img/banner-product.png')}
#banner-distribution {background-image: url('../img/banner-distribution.png')}
#banner-news {background-image: url('../img/banner-news.png')}
#banner-contact {background-image: url('../img/banner-contact.png')}

fieldset {border: 2px solid #d5d3d3; border-bottom: 5px solid #8ab848; position: relative; padding-bottom: 40px;}
fieldset .inline-container {padding-left: 5%; padding-right: 5%;}
legend {width: auto; border-bottom: 0; margin-bottom: 40px; color: #58595b; text-align: center; padding: 0 15px 0 15px; font-family: "Canaro-medium"; font-size: 14px;}

.clear {clear: both;}
.section {margin-bottom: 50px;}
.section-title {font-family: "Canaro-medium"; font-size: 28px;margin: 0 0 1em; line-height: 2em; padding: 0; position: relative; overflow: hidden; text-align: center; font-weight: normal; color: #58595b;}
.section-title:before, .section-title:after {content: " "; position: absolute; top: 50%; margin-left: -999em; height: 2px; width: 998em; border-top: 1px solid #bebebe; background: rgba(0,0,0,0.2);}
.section-title:after {left: auto; width: 999em; margin: 0 0 0 1em;}
.section-title2 {font-family: "Canaro-medium"; font-size: 28px; text-align: center; margin-bottom: 50px;}
.most-bottom-section {padding-bottom: 200px;}

.header-top {width: 100%; background-color: #8ab848; height: 15px; margin-bottom: 20px;}
.header-top-decoration {width: 71px; height: 15px; background: url('../img/header-image-top.jpg') no-repeat 0 0; position: relative; left: 20%;;}
.header-logo-wrapper {position: relative; border-bottom: 1px solid #c0c2c4; padding-bottom: 20px;}
.social-media-wrapper {position: absolute; margin-top: -16px; top: 50%; right: 0;}
.social-media-item {width: 33px; height: 33px; margin-right: 15px; float: left; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.social-media-item:hover {opacity: 0.7;}
#social-linkedin {background: url('../img/icon-linkedin-header.png') no-repeat 0 0;}
#social-instagram {background: url('../img/icon-instagram-header.png') no-repeat 0 0;}
#social-facebook {background: url('../img/icon-fb-header.png') no-repeat 0 0;}
#social-contact {background: url('../img/icon-contact-header.png') no-repeat 0 0;}

.navigation-wrapper {position: relative;}
.navigation-wrapper ul {list-style: none; padding-left: 0; margin-bottom: 0;}
.navigation-wrapper li {text-align: center; padding: 10px 2% 10px 2%; float: left;}
.navigation-wrapper li:hover {padding: 6px 2% 10px 2%; border-top: 4px solid #aaca7e; border-left: 1px solid #c0c2c4; border-right: 1px solid #c0c2c4;}
.navigation-wrapper li a {text-decoration: none; position: relative; color: #6d6e70; font-size: 11px; text-transform: uppercase; font-family: "Canaro-semibold"; letter-spacing: 0.5px;}
.navigation-wrapper li a:hover {color: #a6c776;}
.search-button, .close-search-icon {width: 18px; height: 19px; background: url('../img/icon-search.png') no-repeat 0 0; background-size: cover; position: absolute; top: 10px; right: 0; cursor: pointer;}
.close-search-icon {display: none; background: url('../img/icon-search-close.png') no-repeat 0 0; background-size: cover;}
.search-textinput-container {display: none; position: relative;}
.search-textinput-container input[type='text'] {border: 0; padding: 13px 30px 12px 30px; width: 100%; background: url('../img/icon-search.png') no-repeat center left; outline: none; font-size: 8pt;}

#header-fixed {background: #FFF; position: fixed; top: 0; left: 0; right: 0; z-index: 7; display: none;}
.headerfixed-top {width: 100%; background-color: #8ab848; height: 15px; margin-bottom: 20px;}
.headerfixed-top-decoration {width: 71px; height: 15px; background: url('../img/header-image-top.jpg') no-repeat 0 0; position: relative; left: 20%;;}
.navigation-fixed-wrapper {position: relative;}
.navigation-fixed-wrapper ul {list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0;}
.navigation-fixed-wrapper li {text-align: center; padding: 10px 2% 10px 2%; float: left;}
.navigation-fixed-wrapper li a {color: #6d6e70; font-size: 9pt; text-transform: uppercase; font-family: "Canaro-semibold";}
.navigation-fixed-wrapper a:hover {color: #a6c776;}
.navigation-fixed-wrapper li img {width: 13px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.navigation-fixed-wrapper a:hover > img {opacity: 0.7;}
.search-button-fixed {width: 18px; height: 19px; background: url('../img/icon-search.png') no-repeat 0 0; background-size: cover; position: absolute; top: 10px; right: 0; cursor: pointer;}

.burger-menu {display: none; position: absolute; top: 50%; margin-top: -20px; right: 0; width: 30px; height: 30px; background: url('../img/burger-menu.png') no-repeat 0 0; cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.burger-menu:hover {opacity: 0.7;}
#navigation-mobile-wrapper, .sub-nav-mobile-wrapper {padding-top: 46px; padding-bottom: 37px; width: 250px; overflow: auto; background: #e7e7e7; position: fixed; border-top: 10px solid #82bb3b; top: 0; bottom: 0; left: 0; z-index: 100; left: -250px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#navigation-mobile-wrapper.nav-mob-open, .sub-nav-mobile-wrapper.nav-mob-open {left: 0;}
.nav-mob-container {border-top: 1px solid #c2c2c2;}
.nav-mob-item {font-size: 10pt; font-weight: 300; text-transform: uppercase; font-family: "Canaro-medium"; color: #555; border-bottom: 1px solid #c2c2c2; position: relative; padding: 1em;}
.nav-mob-has-submenu {background: url('../img/icon-mega-menu-hover.png') no-repeat 210px center; background-size: 15px 15px;}
.nav-mob-container a {color: #555;}
.nav-mob-container a.active > .nav-mob-item, .nav-mob-container a:hover > .nav-mob-item, .nav-mob-item-parent {color: #e7e7e7; background-color: #7d7d7d;}
.sub-nav-mobile-wrapper {padding-top: 0;} 
.nav-mob-item-back {background-color: #555; color: #e7e7e7;}
.nav-mob-item-back img {width: 15px; vertical-align: text-top; margin-right: 5px;}
.nav-mob-item-back:hover {background-color: #555 !important;}

.nav-mega-menu {opacity: 0; width: 100%; background: url('../img/mega-menu-bg.jpg') no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 100%; left: 0; z-index: -1; padding: 50px 3% 60px 3%; border-bottom: 8px solid #8ab848; -webkit-transition: z-index 0s, opacity .3s; -moz-transition: z-index 0s, opacity .3s; -o-transition: z-index 0s, opacity .3s; transition: z-index 0s, opacity .3s;}
.mega-menu-title {text-align: left; font-family: "Canaro-medium"; font-size: 20px; color: #636467; text-transform: uppercase; width: 21.5%; float: left; border-right: 1px solid #939598; padding-right: 30px;}
.mega-menu-title img {padding-top: 50px;}
.mega-menu-hover-icon {opacity: 0; width: 13px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.mega-menu-nav-wrapper {overflow: hidden;}
.mega-menu-nav-item-col {float: left; width: 33%; padding-left: 20px; padding-right: 20px; border-right: 1px solid #939598;}
.mega-menu-nav-item {border-bottom: 1px solid #939598; padding-bottom: 14px; margin-bottom: 25px; text-align: left; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.mega-menu-nav-item-col a {color: #58595b !important; font-family: "Canaro-semibold" !important; vertical-align: middle; font-size: 15px !important; text-transform: unset !important;}
.mega-menu-nav-item-col a:hover > .mega-menu-nav-item {color: #a6c776;}
.mega-menu-nav-item-col a:hover > .mega-menu-nav-item .mega-menu-hover-icon {opacity: 1; margin-left: 5px;}
.mega-menu-last-col {border-right: 0;}
#nav-about:hover > #mega-about, #nav-product:hover > #mega-product {z-index: 5; opacity: 1;}

#section-slideshow {position: relative;}
.slide-decoration-top {position: absolute; top: 0; width: 100%; left: 0; z-index: 3;}
.slide-decoration-top img {vertical-align: top;}
.slide-decoration-bottom {position: absolute; bottom: 0; width: 100%; left: 0; z-index: 3;}
.current-slide-line {width: 137px; position: absolute; bottom: 0; left: 50%; margin-left: -68px; background-color: #959499; height: 7px;}
.slide-item {position: relative;}
.slide-image-container {text-align: center}
.slick-slide img.slide-image-mobile {display: none; width: 100%;}
.slide-desc-box {position: absolute; top: 30%; left: 15%; width: 47%; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; z-index: 4; background: #FFF;}
.slide-desc-box-header {padding-top: 22px; padding-left: 28px; padding-bottom: 20px; -webkit-border-radius: 15px 15px 0px 0px; -moz-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px;}
.slide-desc-box-body {padding: 20px; opacity: 0.95;}
.slide-desc-box-title {font-size: 34px; font-family: "Canaro-Book"; color: #fff; font-weight: 800; letter-spacing: 0.75px;}
.slide-desc-box-desc {background-color: #fff; color: #000; line-height: 18pt; font-size: 12pt; font-family: "Muli"; margin-bottom: 30px;}
.slide-desc-box-link {text-decoration: none; vertical-align: middle; font-size: 12pt; font-family: "Canaro-medium";}
.slide-desc-box-link img {display: inline-block !important; height: 25px; vertical-align: bottom;}
.slide-desc-box-link a:hover {opacity: 0.8;}

#section-slideshow .slick-prev, #section-slideshow .slick-next {top: unset; top: 90%; width: 20px; height: 39px; z-index: 4; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#section-slideshow .slick-prev {left: 10%; background-image: url('../img/slide-arrow-left.png');}
#section-slideshow .slick-next {right: 10%; background-image: url('../img/slide-arrow-right.png');}
#section-slideshow .slick-prev:before, #section-slideshow .slick-next:before {content: none;}
#section-slideshow .slick-prev:hover, #section-slideshow .slick-next:hover {opacity: 0.7;}

.carousel-logo-container {position: absolute; bottom: 25px; width: 70%; z-index: 4; margin: auto; left: 50%; margin-left: -35%;}

.brand-link-container {width: 90%; margin: auto; background: transparent; font-family: "Muli-bold"; color: #FFF; font-size: 9pt; margin-bottom: 50px;}
.brand-link-container a {color: #FFF;}
.brand-link-container a:hover > .brand-link, .brand-link-container a:hover > .brand-link-right {background-color: #4e9d40;}
.brand-link-left {padding: 7px 5px 6px 5px; width: 15%; float: left; text-align: center; background-color: #4e9d40; color: #fff; -webkit-border-radius: 20px 0px 0px 20px; -moz-border-radius: 20px 0px 0px 20px; border-radius: 20px 0px 0px 20px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -moz-box-shadow: 1px 3px 8px grey; -webkit-box-shadow: 1px 3px 8px grey; box-shadow: 1px 3px 8px grey;}
.brand-link, .brand-link-right {white-space: nowrap; padding: 5px 5px 2px 5px; text-align: center; background-color: #8ab848; float: left; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -moz-box-shadow: 1px 3px 8px grey; -webkit-box-shadow: 1px 3px 8px grey; box-shadow: 1px 3px 8px grey; width: 28%; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.brand-link-right {-webkit-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; border-radius: 0px 20px 20px 0px;}
.brand-link img, .brand-link-right img {width: 23px;}

.our-brand-container legend {font-size: 28px;}
.our-brand-body {padding: 0 5% 0px 5%;}

.our-brand-decor {width: 41px; height: 85px; background: url('../img/our-brand-decor.png') no-repeat 0 0; background-size: contain; position: absolute; left: 0; top: 10%;}
.our-brand-col {width: 33.33%; float: left; padding-right: 2%;}
.our-brand-subtitle {margin-bottom: 25px; font-family: "Canaro-medium"; font-size: 13pt;}
.our-brand-item {border-bottom: 1px solid #d5d3d3; color: #949698; vertical-align: middle; font-family: "Muli"; font-size: 12pt; padding-bottom: 5px; margin-bottom: 10px; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.our-brand-item img {opacity: 0; position: absolute; right: 20px; width: 13px; top: 50%; margin-top: -6px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.our-brand-col a:hover > .our-brand-item {color: #a6c776;}
.our-brand-col a:hover > .our-brand-item img {right: 0; opacity: 1;}
.our-brand-image-mobile {display: none; text-align: center; margin-bottom: 40px;}
.our-brand-image-mobile img {width: 100%; max-width: 300px;}

#section-news {background: url('../img/home-news-bg.png') repeat 0 0; padding-top: 50px;}
.news-carousel-wrapper {padding-left: 10%; padding-right: 5%;}
.news-carousel {position: relative; padding-bottom: 80px;}
.news-carousel a:hover > .news-item > .news-item-body > .news-item-title {color: #a6c776;}
.news-item {background:#FFF; margin: 3%; -moz-box-shadow: 4px 3px 7px grey; -webkit-box-shadow: 4px 3px 7px grey; box-shadow: 4px 3px 7px grey;}
.news-item-image {width: 100%; overflow: hidden; position: relative; margin-bottom: 10px;}
.news-item-image img {visibility: hidden;}
.news-item-image:before {content: ""; display: block; padding-top: 70%;}
.news-item-image-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: top center;}
.news-item-image-decor {position: absolute; bottom: 0; left: 0; right: 0; background: url('../img/news-item-image-decor.png') no-repeat top center; background-size: cover; height: 13px;}
.news-item-body {padding: 0 17px 15px 17px;}
.news-item-category {margin-bottom: 10px;}
.news-item-category-box {color: #fff; margin-top: 10px; padding: 3px 5px 3px 5px; width: 50px; font-family: "Canaro-semibold"; font-size: 12px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.news-item-title {width: 100%; overflow: hidden; position: relative; margin-bottom: 10px; text-align: left; color: #6d6e70; font-family: "Canaro-medium"; font-size: 20px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.news-item-title:before {content: ""; display: block; padding-top: 45%;}
.news-item-title-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.news-item-short-desc {width: 100%; overflow: hidden; position: relative; margin-bottom: 10px;text-align: left; color: #6d6e70; font-family: "Muli"; font-size: 10pt; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.news-item-short-desc:before {content: ""; display: block; padding-top: 40%;}
.news-item-short-desc-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.news-item-date {text-align: left; color: #6d6e70; font-family: "Canaro-semibold"; font-size: 10px;}
.news-carousel .slick-next, .news-carousel .slick-prev {top: unset; top: unset; bottom: 10px; width: 37px; height: 41px; z-index: 4; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.news-carousel .slick-next {right: 5%; background-image: url('../img/news-carousel-right.png') !important;}
.news-carousel .slick-prev {left: 0; background-image: url('../img/news-carousel-left.png') !important;}
.news-carousel .slick-prev:before, .news-carousel .slick-next:before {content: none;}
.news-carousel .slick-prev:hover, .news-carousel .slick-next:hover {opacity: 0.7;}
.news-button .button-icon {background-color: #3a7f32;}
.news-button .button-text {width: 200px; border: 1px solid #3a7f32; color: #3a7f32;}
.news-button a:hover > .hakiki-style-button-inner > .button-text {background: #3a7f32; color: #FFF;}

#section-hakiki-today fieldset .col-left {float: left; width: 50%; padding-right: 1%; font-family: "Muli"; font-size: 16px; color: #6d6e70; line-height: 1.4em;}
#section-hakiki-today fieldset .col-left p {margin-bottom: 40px;}
#section-hakiki-today fieldset .col-right {float: right; width: 50%; padding-left: 1%;}
.about-who-button .button-icon {background-color: #8ab848;}
.about-who-button .button-text {width: 100%; border: 1px solid #8ab848; color: #8ab848; -webkit-box-shadow: 5px 4px 1px #d1d3d4; -moz-box-shadow: 5px 4px 1px #d1d3d4; box-shadow: 5px 4px 1px #d1d3d4;}
.about-who-button a:hover > .hakiki-style-button-inner > .button-text {background: #8ab848; color: #FFF;}
.about-who-button a {width: 100%;}

#section-about-link {background-color: #f1f1f2; padding-top: 50px; padding-bottom: 50px;}
#section-about-link .inline-container {padding-left: 15%; padding-right: 15%;}
.about-link-item {width: 32%; float: left; margin-right: 2%; background:#FFF; -moz-box-shadow: 4px 3px 7px grey; -webkit-box-shadow: 4px 3px 7px grey; box-shadow: 4px 3px 7px grey;}
.about-link-item.last {margin-right: 0;}
.about-link-image {width: 100%; overflow: hidden; position: relative; margin-bottom: 40px;}
.about-link-image img {visibility: hidden;}
.about-link-image:before {content: ""; display: block; padding-top: 70%;}
.about-link-image-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: top center;}
.about-link-body {padding: 0 17px 15px 17px;}
.about-link-title {overflow: hidden; position: relative; color: #6d6e70; font-family: "Canaro-medium"; font-size: 14pt; margin-bottom: 20px;}
.about-link-title:before {content: ""; display: block; padding-top: 25%;}
.about-link-title-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.about-link-short-desc {position: relative; color: #6d6e70; font-family: "Muli"; font-size: 10pt; line-height: 1.4em; margin-bottom: 40px; overflow: hidden;}
.about-link-short-desc:before {content: ""; display: block; padding-top: 35%;}
.about-link-short-desc-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.about-link-button .button-icon {background-color: #8ab848; width: 36px; height: 32px; text-align: center}
.about-link-button .button-icon img {max-width: 20px; max-height: 18px;}
.about-link-button .button-text {width: 100%; border: 1px solid #8ab848; color: #8ab848; -webkit-box-shadow: 5px 4px 1px #d1d3d4; -moz-box-shadow: 5px 4px 1px #d1d3d4; box-shadow: 5px 4px 1px #d1d3d4;}
.about-link-button a:hover > .hakiki-style-button-inner > .button-text {background: #8ab848; color: #FFF;}
.about-link-button a {width: 100%;}
.about-profile-5-img {display: none;}

#section-about-profile-brand {color: #FFF;}
#section-about-profile-brand .inline-container {padding-left: 15%; padding-right: 15%;}
.about-profile-wrapper {background: url('../img/about-profile-5.png') no-repeat 0 0; background-size: contain; width: 100%;}
.about-profile-content {background: url('../img/about-profile-brand-bg.png') no-repeat 0 0; float: right; width: 65%; padding: 5%; background-size: 100% 101%;}
.about-profile-content .col-left {float: left; width: 50%; padding-right: 1%;}
.about-profile-title {font-family: "Canaro-book"; font-weight: normal; font-size: 13pt; margin-bottom: 20px;}
.about-profile-desc {font-family: "Muli"; font-size: 12pt;}
.about-profile-content .col-right {float: left; width: 50%; position: relative; padding-left: 1%;}
.about-brand-button {margin-top: 55px;}
.about-brand-button a {width: 100%;}
.about-brand-button .button-icon {background: #FFF;}
.about-brand-button .button-icon img {max-width: 20px; max-height: 18px;}
.about-brand-button .button-text {color: #fff; background: transparent; border: 1px solid #fff; width: 100%;}
.about-brand-button a:hover > .hakiki-style-button-inner > .button-text {background: #FFF; color: #8ab848}

#section-who-we-are .col-left {float: left; width: 66%; column-count: 2; padding-right: 2%; font-size: 11pt; font-family: "Muli"; color: #636363;}
#section-who-we-are .col-left .highlight {color: #3a7f32; font-family: "Muli-semibold"; font-size: 14pt; line-height: 1.2em;}
#section-who-we-are .col-left ol {padding-left: 20px;}
#section-who-we-are .col-right {float: right; width: 33%; margin-bottom: 30px;}

#section-subsidiaries {background-color: #e7e8e9; padding-top: 100px;}
#section-subsidiaries legend {font-family: "Canaro-medium"; color: #000; font-size: 17px;}
.subsidiary-item {position: relative; border-left: 1px solid #acacac; float: left; width: 33%; margin-bottom: 30px;}
.subsidiary-item:before {content: ""; display: block; padding-top: 60%;}
.subsidiary-item-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 2% 10%;}
.subsidiary-item.subsidiary-most-left {border-left: 0;}
.subsidiary-title {font-family: "Muli"; color: #3a7f32; font-size: 17px; font-weight: bold; margin-bottom: 20px;}
.subsidiary-desc {font-family: "Muli"; font-size: 16px; color: #6d6e71;}

#section-vision-mission .highlight {font-family: "Muli-semibold"; font-size: 20px; text-align: center; color: #8ab848; margin-bottom: 40px;}
.feature-container .clear-2 {display: none;}
.feature-item {margin-bottom: 30px; float: left; padding: 1%; width: 25%;}
.feature-title {font-family: "Canaro-semibold"; font-size: 16px; border-bottom: 5px solid #8ab848; padding-bottom: 10px; color: #6d6e71; margin-bottom: 20px;}
.feature-image { text-align: center; margin-bottom: 20px;}
.feature-image img {max-width: 60%;}
.feature-desc {font-family: "Muli"; font-size: 12px;}

.facility-intro-container {position: relative; border-right: 1px solid #a5a7a9;}
.facility-intro-border {border-top: 5px solid #b3a995; position: absolute; left: 50%; right: 0;}
.facility-intro-border.border-top {top: 0;}
.facility-intro-border.border-bottom {bottom: 0;}
.facility-intro-col-left {float: left; width: 50%;}
.facility-intro-col-right {float: left; width: 50%;}
.facility-intro-container .brown-decor {position: absolute; top: 5vw; left: 50%; width: 21px; height: 80px;}
.facility-intro-desc-wrapper {position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0px 5% 0 5%;}
.facility-intro-title {font-family: "Canaro-medium"; font-weight: normal; font-size: 17px; color: #4d4d4f; margin-bottom: 30px;}
.facility-intro-desc {font-family: "Muli"; font-size: 16px; color: #6d6e70;}

#section-facilities {background-color: #e7e8e9; padding-top: 100px;}
.accordion-item {margin-bottom: 5px;}
.accordion-header {padding: 1.5em 1.5em; background: #8ab848; color: white; cursor: pointer; font-size: 14px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; font-family: "Canaro-semibold";}
.accordion-item.active .accordion-header {background: #3a7f32;}
.accordion-body {display: none; padding: 3em 3em; font-size: 16px; line-height: 1.3em; background: #fcfcfc; color: #3f3c3c; font-family: "Muli-semibold";}
.accordion-header:after {content: url('../img/accordion-plus.png'); font-size: 1.2em; float: right; position: relative; transition: .3s all; transform: rotate(0deg); margin-top: -7px;}
.accordion-item.active .accordion-header:after {transform: rotate(-180deg); content: url('../img/accordion-minus.png'); margin-top: -14px;}

.standard-container {position: relative; border-left: 1px solid #a5a7a9;}
.standard-border {border-top: 5px solid #94c54d; position: absolute; left: 0; right: 50%;}
.standard-border.border-top {top: 0;}
.standard-border.border-bottom {bottom: 0;}
.standard-col-left {float: right; width: 50%;}
.standard-col-right {float: left; width: 50%;}
.standard-container .green-decor {position: absolute; top: 5vw; left: 0; width: 21px; height: 80px;}
.standard-desc-wrapper {position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0px 5% 0 5%; width: 50%;}
.standard-title {font-family: "Canaro-medium"; font-weight: normal; font-size: 17px; color: #4d4d4f; margin-bottom: 30px;}
.standard-desc {font-family: "Muli"; font-size: 16px; color: #6d6e70;}

#section-certification {background-color: #e7e8e9; padding-top: 100px;}
#section-certification .highlight {font-family: "Muli-bold"; font-size: 17px; color: #808285; text-align: center; padding-left: 20%; padding-right: 20%; margin-bottom: 50px;}
#section-certification legend {font-size: 17px;}
.certification-container .clear-2 {display: none;}
.certification-item {text-align: center; border-right: 1px solid #acacac; float: left; width: 33%; padding: 3%;}
.certification-item.last-item {border-right: 0;}
.certification-logo {margin-bottom: 20px;}
.certification-logo img {max-width: 60%;}
.certification-name {font-family: "Muli-semibold"; font-size: 15px; color: #58595b;}

.principal-container {position: relative; border-left: 1px solid #a5a7a9;}
.principal-border {border-top: 5px solid #94c54d; position: absolute; left: 0; right: 50%;}
.principal-border.border-top {top: 0;}
.principal-border.border-bottom {bottom: 0;}
.principal-col-left {float: right; width: 50%;}
.principal-col-right {float: left; width: 50%;}
.principal-container .green-decor {position: absolute; top: 5vw; left: 0; width: 21px; height: 80px;}
.principal-desc-wrapper {position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0px 5% 0 5%; width: 50%;}
.principal-title {font-family: "Canaro-medium"; font-weight: normal; font-size: 17px; color: #4d4d4f; margin-bottom: 30px;}
.principal-desc {font-family: "Muli"; font-size: 16px; color: #6d6e70;}

#section-brand .section-title {font-size: 17px;}
.brand-item {width: 25%; float: left;}
.brand-logo {width: 100%; height: 22vw; position: relative; border-right: 1px solid #adb0b3; text-align: center;}
.brand-logo img {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 80%;}
.brand-container .clear-2 {display: none;}

.milestone-container {position: relative;}
.milestone-container:before {content: ''; position: absolute; top: 0; left: 50%; 
    margin-left: -1px;
    width: 10px;
    height: 92%;
    background: #94c54d;
    border-left: 5px solid #fff;
    z-index: 1;}
.milestone-left {float: left; width: 50%; background: #ddd;}
.milestone-right {float: left; width: 50%;}
.milestone-item {height: 350px; position: relative; padding: 10%;}
.milestone-left .milestone-item {text-align: right;}
.milestone-item img {max-height: 100%;}
.milestone-desc-wrapper {position: absolute; left: 10%; right: 10%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.milestone-year {font-family: "Canaro-semibold"; font-weight: normal; font-size: 16px; color: #2e7b26;}
.milestone-desc {font-size: 17px; line-height: 1.5em; color: #888; font-family: "Muli-semibold";}
.milestone-marker-outer {width: 55px;
    height: 55px;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    border: 8px solid white;
    background: #FFF;
    position: absolute;
    top: 0;
    right: -34px;
    z-index: 1;}
.milestone-marker {width: 45px;
    height: 45px;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    border: 6px solid #94c54d;
    background: #FFF; margin-left: -3px; margin-top: -3px;
}
.milestone-active {display: none; width: 35px; height: 35px; border-radius: 50%; border: 2px solid #FFF; background: #94c54d; margin-left: -1px; margin-top: -1px;}
#section-milestone-mobile {display: none;}
.milestone-item.even {background: url('../img/home-news-bg.jpg') repeat 0 0;}

.category-container .clear-2, .category-container .clear-3 {display: none;}
.category-item {float: left; width: 23%; border-bottom: 1px solid #d5d3d3; color: #949698; vertical-align: middle; font-family: "Muli"; font-size: 12pt; padding-bottom: 5px; margin-right: 2%; margin-bottom: 10px; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.category-item.active {color: #94c54d;}
.category-item img {opacity: 0; position: absolute; right: 20px; width: 13px; top: 50%; margin-top: -6px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.category-container a:hover > .category-item {color: #a6c776;}
.category-container a:hover > .category-item img {right: 0; opacity: 1;}

#section-category2 {background: url('../img/home-news-bg.jpg') repeat 0 0; padding-top: 80px;}
.category2-container .clear-2 {display: none;}
.category2-item {float: left; width: 31%; margin-right: 2%; background: #FFF; margin-bottom: 30px; -webkit-box-shadow: 6px 6px 2px #bdbec2; -moz-box-shadow: 6px 6px 2px #bdbec2; box-shadow: 6px 6px 2px #bdbec2;}
.category2-image {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.category2-image:before {content: ""; display: block; padding-top: 70%;}
.category2-image-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.category2-name {padding: 5%; font-family: "Canaro-medium"; font-size: 16px; text-align: center; color: #606163; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.category2-item:hover .category2-image {-webkit-filter: none;  -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none;}
.category2-item:hover .category2-name {color: #89b844}

#section-category-brand {background: url('../img/home-news-bg.jpg') repeat 0 0; padding-top: 80px;}
.category-brand-title {border-bottom: 1px solid #838588; padding-bottom: 5px; font-family: "Canaro-medium"; color: #838588;}
.category-brand-container .clear-2 {display: none;}
.category-brand-item {float: left; width: 33%; padding: 3%;}
.brands-accordion .accordion-header {text-transform: uppercase;}

.dist-col {float: left; width: 16.66%; padding: 1%; margin-bottom: 20px;}
.indo-dist-container .clear-4, .indo-dist-container .clear-3, .indo-dist-container .clear-2 {display: none;}
.dist-province-name {font-size: 16px; font-family: "Canaro-semibold"; text-align: left; color: #363636; border-bottom: 5px solid #b7af98; padding-bottom: 10px; margin-bottom: 20px; height: 60px; position: relative;}
.dist-province-name span {position: absolute; left: 0; right: 0; bottom: 10px;}
.dist-city-name {font-family: "Muli"; font-size: 16px; line-height: 1.5em;}

#section-indo-dist-mobile {display: none;}
#section-indo-dist-mobile .accordion-header {background: #FFF; color: #000; border-bottom: 5px solid #b7af98;}

#section-segmentation {background-color: #e7e8e9; padding-top: 70px;}
#section-segmentation fieldset {border-bottom: 5px solid #b7af98;}
#section-segmentation legend {font-family: "Muli-bold"; font-size: 17px; color: #000}
.segmentation-item {float: left; width: 33%; padding: 10px 3% 10px 3%; border-right: 1px solid #acacac;}
.segmentation-text {border-bottom: 1px solid #acacac; padding-bottom: 20px; font-size: 16px; font-family: "Muli"; color: #464646;}
.segmentation-item.end-3 {border-right: 0;}

.distribution-area {width: 67%; margin-right: 2%; float: left;}
.market-segmentation {width: 29%; margin-left: 2%; float: left;}
.international-title {font-size: 17px; position: relative; padding-bottom: 10px; height: 40px; font-family: "Canaro-medium"; border-bottom: 5px solid #b7af98; margin-bottom: 30px;}
.international-text {position: absolute; left: 0; right: 0; bottom: 10px;}
.inter-dist-item {float: left; width: 31%; border-bottom: 1px solid #acacac; font-family: "Muli"; color: #464646; font-size: 16px; padding-bottom: 15px; margin-right: 2%; margin-bottom: 20px;}
.inter-dist-container .clear-2 {display: none;}
.business-to-business {font-size: 17px; font-family: "Canaro-medium"; text-align: center;}

.article-category-container {margin-bottom: 30px;}
.article-category-item {cursor: pointer; float: left; width: 25%; border-right: 1px solid #acacac; padding: 2%;}
.article-category-image {text-align: center; margin-bottom: 10px; -webkit-filter: grayscale(100%) brightness(150%);  -moz-filter: grayscale(100%) brightness(150%); -ms-filter: grayscale(100%) brightness(150%); -o-filter: grayscale(100%) brightness(150%); filter: grayscale(100%) brightness(150%); -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.article-category-image img {max-width: 30%;}
.article-category-name {position: relative; border-bottom: 2px solid #6d6e70; padding-bottom: 10px; font-family: "Canaro-medium"; font-size: 15px; color: #6d6e70; text-transform: uppercase;}
.icon-arrow-orange {opacity: 0; position: absolute; width: 14px; height: 14px; background: url('../img/icon-arrow-orange.png'); background-size: cover; top: 50%; margin-top: -7px; right: 10px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.article-category-item.active .article-category-image {-webkit-filter: none;  -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none;}
.article-category-item.active .icon-arrow-orange {opacity: 1; right: 0;}
.article-category-item.active .article-category-name {color: #dd7330; border-color: #dd7330}
.article-category-filter-wrapper {border-top: 1px solid #e7e8e9; border-bottom: 1px solid #e7e8e9;}
.article-category-filter-wrapper .inline-container {padding: 20px 15% 20px 15%;}
.filter-by-year {float: left; width: 30%;}
.search-article-wrapper {float: left; width: 58%; margin-left: 2%;}
.filter-title {font-family: "Muli-bold"; font-size: 13px; color: #6d6e70; margin-bottom: 10px;}
.article-category-filter-wrapper select, .article-category-filter-wrapper input[type='text'] {border: 1px solid #d1d3d4; border-top: 3px solid #d1d3d4; padding: 4px 0 4px 5px; width: 100%; font-size: 11px; font-family: "Muli-bold"; color: #6d6e70; outline: none;}
.article-category-filter-wrapper input[type='text'] {border-top: 3px solid #d1d3d4; border-color: #d1d3d4; box-sizing: border-box; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 5px 5px 25px; background: url('../img/icon-search.png') no-repeat; background-position: 5px 3px; background-size: 15px 15px;}
.search-article-textinput {overflow: hidden; padding-right: 2%;}
.search-article-button-wrapper {float: right; width: 70px;}
.search-article-button {cursor: pointer; opacity: 1; background-color: #e17036; text-align: center; padding: 4px 5px 4px 5px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.search-article-button:hover {opacity: 0.7;}

#section-articles {background: #f1f1f2; padding-top: 80px; overflow: hidden;}
#section-articles .news-item {width: 29%; }
.article-container .clear-2 {display: none;}
#section-articles .news-item {margin: 2%; margin-bottom: 30px;}
.article-category-dropdown-wrapper {display: none; margin-bottom: 20px;}
.date-social-media-wrapper {text-transform: uppercase; font-family: "Muli-semibold"; color: #6d6e71; font-size: 12px; border-top: 2px solid #bcbdc0; border-bottom: 2px solid #bcbdc0; padding-top: 10px; padding-bottom: 10px; margin-bottom: 40px;}
.article-date {float: left; margin-top: 4px;}
.article-social-media-wrapper {float: right;}
.article-social-media-wrapper img {max-width: 26px;}
.article-image {margin-bottom: 40px;}
.article-content {margin-bottom: 40px; color: rgb(33, 33, 33); font-size: 16px;}
#section-articles a:hover > .news-item > .news-item-body > .news-item-title {color: #a6c776;}
.back-to-news-button {margin-top: 55px; width: 200px; margin: auto;}
.back-to-news-button a {width: 100%;}
.back-to-news-button .button-icon {background: #e17036;}
.back-to-news-button .button-icon img {max-width: 20px; max-height: 18px;}
.back-to-news-button .button-text {color: #e17036; background: transparent; border: 1px solid #e17036; width: 100%;}
.back-to-news-button a:hover > .hakiki-style-button-inner > .button-text {background: #e17036; color: #fff}

.contact-company-title {font-family: "Canaro-medium"; font-size: 17px; text-align: left; padding-bottom: 10px; margin-bottom: 30px; color: #58595b; border-bottom: 1px solid #bebebe;}
.contact-wrapper {border-bottom: 1px solid #bebebe; padding-bottom: 30px; margin-bottom: 30px;}
.contact-title {font-family: "Canaro-medium"; font-size: 16px; color: #58595b; margin-bottom: 20px;}
.contact-item {margin-bottom: 10px; font-family: "Muli"; font-size: 16px;}
.contact-icon {width: 37px; float: left; margin-right: 1%;}
.contact-value {overflow: hidden;}

#section-search-form {padding-top: 50px;}
.text-search-wrapper {overflow: hidden;}
.text-search-wrapper input[type='text'] {width: 100%; height: 42px; border: 1px solid #d1d3d4; border-top: 8px solid #d1d3d4; padding: 5px 0 5px 5px; font-size: 19px; font-family: "Muli-bold"; color: #6d6e70;}
.button-search-wrapper {margin-left: 2%; width: 70px; float: right;}
.button-search-wrapper button {width: 100%; text-align: center; height: 42px; background-color: #8ab848; border: 0;}
#search-page-form {border-bottom: 1px solid #acacac; padding-bottom: 20px;}
.result-item {padding: 5% 3% 5% 3%; border: 1px solid #acacac; border-top: 3px solid #acacac; width: 48%;margin-bottom: 3%;}
.result-item.left {margin-right: 2%;}
.result-item.right {margin-left: 2%;}
.result-title {font-size: 16px; color: #8ab848; font-family: "Canaro-semibold"; text-decoration: none; margin-bottom: 20px;}
.result-desc {font-size: 16px; color: #acacac; font-family: "Muli";}