/* FONTS */
@font-face {
    font-family: 'Aleo Light';
    src: url('../fonts/Aleo/aleo-light-webfont.eot');
    src: url('../fonts/Aleo/aleo-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Aleo/aleo-light-webfont.woff2') format('woff2'),
         url('../fonts/Aleo/aleo-light-webfont.woff') format('woff'),
         url('../fonts/Aleo/aleo-light-webfont.ttf') format('truetype'),
         url('../fonts/Aleo/aleo-light-webfont.svg#aleolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aleo Regular';
    src: url('../fonts/Aleo/aleo-regular-webfont.eot');
    src: url('../fonts/Aleo/aleo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Aleo/aleo-regular-webfont.woff2') format('woff2'),
         url('../fonts/Aleo/aleo-regular-webfont.woff') format('woff'),
         url('../fonts/Aleo/aleo-regular-webfont.ttf') format('truetype'),
         url('../fonts/Aleo/aleo-regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aleo Bold';
    src: url('../fonts/Aleo/aleo-bold-webfont.eot');
    src: url('../fonts/Aleo/aleo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Aleo/aleo-bold-webfont.woff2') format('woff2'),
         url('../fonts/Aleo/aleo-bold-webfont.woff') format('woff'),
         url('../fonts/Aleo/aleo-bold-webfont.ttf') format('truetype'),
         url('../fonts/Aleo/aleo-bold-webfont.svg#aleobold') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'Ubuntu Bold';
    src: url('../fonts/Ubuntu/ubuntu-b-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-b-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu Light';
    src: url('../fonts/Ubuntu/ubuntu-l-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-l-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu Regular';
    src: url('../fonts/Ubuntu/ubuntu-r-webfont.woff2') format('woff2'),
         url('../fonts/Ubuntu/ubuntu-r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro Light Italic';
    src: url('../fonts/SourceSans/SourceSansPro-LightIt.eot');
    src: url('../fonts/SourceSans/SourceSansPro-LightIt.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans/SourceSansPro-LightIt.woff') format('woff'),
        url('../fonts/SourceSans/SourceSansPro-LightIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Source Sans Pro Semibold';
    src: url('../fonts/SourceSans/SourceSansPro-Semibold.eot');
    src: url('../fonts/SourceSans/SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans/SourceSansPro-Semibold.woff') format('woff'),
        url('../fonts/SourceSans/SourceSansPro-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro Regular';
    src: url('../fonts/SourceSans/SourceSansPro-Regular.eot');
    src: url('../fonts/SourceSans/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans/SourceSansPro-Regular.woff') format('woff'),
        url('../fonts/SourceSans/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro Extra Light';
    src: url('../fonts/SourceSans/SourceSansPro-ExtraLight.eot');
    src: url('../fonts/SourceSans/SourceSansPro-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans/SourceSansPro-ExtraLight.woff') format('woff'),
        url('../fonts/SourceSans/SourceSansPro-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}


@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica/HelveticaNeueLTStd-Lt.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'Helvetica Light Italic';
    src: url('../fonts/Helvetica/HelveticaNeueLTStd-LtIt.otf');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Thin';
    src: url('../fonts/Helvetica/HelveticaNeueLTStd-Th.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'Helvetica Medium';
    src: url('../fonts/Helvetica/HelveticaNeueLTStd-Md.otf');
    font-weight: normal;
}

html{
    font-size: 62.5%;
}

@media screen and (min-width:1780px) and (max-width:1919px){
    html{
        font-size: 58%;
    }
}

@media screen and (min-width:1680px) and (max-width:1779px){
    html{
        font-size: 55%;
    }
}

@media screen and (min-width:1580px) and (max-width:1679px){
    html{
        font-size: 52%;
    }
}

@media screen and (min-width:1480px) and (max-width:1579px){
    html{
        font-size: 50%;
    }
}

@media screen and (max-width:1479px){
    html{
        font-size: 48%;
    }
}

body {
/*    font-family: 'Helvetica';*/
    font-family: 'Source Sans Pro Regular';
    background: #f6f6f6;
    color: #272727;
    font-size: 14px;
    font-size: 1.4rem;
    height: auto;
    padding: 0;
    z-index: -3;
}

a {
    cursor: pointer;
}

nav ul {
  list-style: none; }


hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

h1, h2, h3, h4{
/*    font-family: 'Aleo Regular';*/
    font-family: 'Ubuntu Regular';
    color: #fff;
}

.title-light{
/*    font-family: 'Aleo Light';*/
    font-family: 'Ubuntu Light';
}

.title-regular{
/*    font-family: 'Aleo Regular';*/
    font-family: 'Ubuntu Regular';
}

.title-bold{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

h1{
    font-size: 67px;
    font-size: 6.7rem;
    color: #595959;
}

@media screen and (max-width:767px){
    h1{
        font-size: 4.5rem;
    }
}

h2{
    font-size: 42px;
    font-size: 4.2rem;
}

h3{
    font-size: 30px;
    font-size: 3rem;
}

h4{
    font-size: 22px;
    font-size: 2.2rem;
}

h5{
    font-size: 17px;
    font-size: 1.7rem;
}

p,ol,ul{
    color: #525252;
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Source Sans Pro Regular';
}

@media screen and (max-width:1400px){
    p,ol,ul{
        font-size: 14px;
    }
}


  /* =========================

        GENERAL STYLES

   =========================*/
*, *:before, *:after {
  box-sizing: border-box;
  border: none; }

a:link,
a:visited,
a:active {
/*  font-weight: 600;*/
  color: #000;
  text-decoration: none;
}
  a:link:hover,
  a:visited:hover,
  a:active:hover {
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }



/******************************************************/
/*                    NAVBAR START                    */
/******************************************************/

.btn-buy{
    position: absolute;
    bottom: 110%;
    right: 0;
    border-radius: 6px;
    background-color: #8c2529;
    border-color: #8c2529;
    color: #fff;
    padding: 8px 20px;
    font-size: 16px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn-buy .fa{
    padding-right: 5px;
}

@media screen and (max-width:768px){
    .btn-buy{
        padding: 6px 12px;
    }
}

@media screen and (max-width:767px){
    .btn-buy{
        bottom: initial;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 15px;
    }
}

.btn-buy:hover{
    color: #fff;
    background-color: #6a1a1d;
    border-color: #6a1a1d;
}

.navbar-custom {
    position: absolute;
    border: 0;
    border-radius: 20px;
    margin: 0;
    height: auto;
    color: #000;
/*    font-family: 'Avenir Medium';*/
    background-color: #3ca989;
    padding: 15px 0;
    width: 80%;
    margin-left: 10%;
    z-index: 101;
    margin-top: 5%;
    box-shadow: 0px 8px 8px -4px rgba(0,0,0,0.64);
}

@media screen and (max-width:1600px){
    .navbar-custom{
        width: 86%;
        margin-left: 7%;
    }
}

@media screen and (max-width:1360px){
    .navbar-custom{
        width: 94%;
        margin-left: 3%;
    }
}

@media screen and (max-width:1180px){
    .navbar-custom{
        width: 98%;
        margin-left: 1%;
    }
}

@media screen and (max-width:768px){
    .navbar-custom{
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media screen and (max-width:767px){
    .navbar-custom{
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 12%;
    }
}

.navbar-custom .navbar-nav>li>a:focus,
.navbar-custom .navbar-nav>li>a:hover{
    color: #dcdcdc;
}


.navbar-custom .navbar-nav > li > a,
.navbar-custom .navbar-nav .dropdown-menu > li > a {
    color: #fff;
    line-height: 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'Aleo Bold';
/*    font-family: 'Ubuntu Bold';*/
}

.navbar-custom .navbar-nav .dropdown-menu > li > a{
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-menu-custom>li>a:focus,
.dropdown-menu-custom>li>a:hover{
    background-color: #2f9a7b;
    color: #fff;
}

@media screen and (max-width:1490px){
    .navbar-nav>li>a {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .navbar-custom .navbar-nav > li > a,
    .navbar-custom .navbar-nav .dropdown-menu > li > a {
        line-height: 16px;
        font-size: 14px;
    }
}

@media screen and (max-width:1368px){
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-custom .navbar-nav > li > a,
    .navbar-custom .navbar-nav .dropdown-menu > li > a {
        line-height: 12px;
        font-size: 14px;
    }
}

.navbar-custom .navbar-nav>.open>a,
.navbar-custom .navbar-nav>.open>a:focus,
.navbar-custom .navbar-nav>.open>a:hover{
    background-color: #2f9a7b;
    color: #fff;
}

.navbar-nav>li>.dropdown-menu{
    width: 100%;
    background-color: #3ca989;
}

/*
.navbar-nav{
    background-color: #fff;
    margin: 0 0;
}

@media screen and (max-width:768px){
    .navbar-nav{
        padding-left: 2%;
    }
}

.navbar-custom .nav li.active,
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .navbar-nav > li.active a {
    background: none;
    outline: 0;
    color: #47b2e8;
}

.navbar-custom .dropdown-menu {
    border: 0;
    border-radius: 0;
}

.navbar-custom .dropdown-menu > li > a {
    padding: 10px 20px;
}

.navbar-custom .nav .open > a,
.navbar-custom .dropdown-menu > li > a:hover,
.navbar-custom .dropdown-menu > li > a:focus {
    background: #006cb6;
}

.navbar-custom .navbar-toggle .icon-bar {
    background: #fff;
}
*/

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: inline-table;
        table-layout: auto;
        float: none;
        width: 100%;


    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
}

@media screen and (max-width:768px){
    .navbar-header{
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.navbar-menu{
    padding-top: 0 !important;
    border-top: 0;
}

.navbar-toggle{
    float: left;
    margin-right: 0;
    margin-left: 15px;
}

.navbar-default .navbar-toggle{
    border-color: transparent;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
    background-color: #388D74;
}

.navbar-default .navbar-toggle .icon-bar-white{
    background-color: #fff;
}

.navbar-logo{
    position: absolute !important;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    width: 19%;
    display: inline-table;
    vertical-align: middle;
    top: -50%;
    -webkit-transform: translate(0,-40%);
    -ms-transform: translate(0,-40%);
    transform: translate(-50%, 0);
}

.logo{
    position: relative;
    width:75%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
/*
    top: 40%;
    -webkit-transform: translate(0,-40%);
    transform: translate(0,-40%);
*/
}

@media screen and (max-width:1400px){
    .logo{
        width:69%;
    }
}

@media screen and (max-width:768px){
    .logo{
        width:74%;
    }
}

.divider{
    padding: 0 !important;
    border-left: 1px solid #aabeb8;
}

.divider-link{
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 3px;
    pointer-events: none;
}

.nav-left{
    width: 40%;
}

.nav-right{
    width: 40%;
    float: right;
}

@media screen and (max-width:767px){
    .nav-left{
        width: 100%;
    }

    .nav-right{
        float: none;
        width: 100%;
    }

    .nav-left>li, .nav-right>li{
        left: 15px;
    }
}

@media screen and (max-width:767px){
    .mobile-logo{
        position: absolute;
        width: 52%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: -65%;
    }
}

/******************************************************/
/*                      NAVBAR END                    */
/******************************************************/

/**************************************************/
/*                   HOME PAGE                   ;*/
/**************************************************/

#header{
    position: relative;
    width: 100%;
    height: auto;
}

#header h1{
    color: #8c2529;
    font-family: 'Aleo Regular';
}

#header p{
    font-size: 21px;
    font-size: 2.1rem;
    color: #fff;
    font-family: 'Helvetica';
}

.header-title-top{
    margin-bottom: 0;
/*    tesaja*/
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
}

.header-title-bottom{
    margin-top: 0;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    display: inline-block;
    margin-bottom: 10px;
}

.header-line-top{
    border-top: 1px solid #8c2529;
    position: absolute;
    top: 3px;
    right: 0;
    width: 110%;
    z-index: 2;
}

.header-line-bottom{
    border-top: 1px solid #8c2529;
    position: absolute;
    bottom: 3px;
    right: 0;
    width: 110%;
    z-index: 2;
}

.header-line-top-center{
    border-top: 1px solid #8c2529;
    position: absolute;
    top: 3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 110%;
    z-index: 2;
}

.header-line-bottom-center{
    border-top: 1px solid #8c2529;
    position: absolute;
    bottom: 3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 110%;
    z-index: 2;
}

@media screen and (max-width:768px){
    .header-line-top-center{
        top: 0;
    }

    .header-line-bottom-center{
        bottom: 0;
    }
}

.header-img-slide{
    position: relative;
    width: 100%;
    min-height: 150px;
}

.header-img-slide:before{
    content: "";
    display: block;
    padding-top: 52%;
}

@media screen and (max-width:768px){
    .header-img-slide:before{
        padding-top: 134%;
    }
}

@media screen and (max-width:767px){
    .header-img-slide:before{
        padding-top: 165%;
    }
}

.header-img-slide-home{
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
}

.owl-custom-header-home{
    width: 100%;
    height: 100vh;
    min-height: 400px;
}

.owl-custom-header .owl-controls .owl-pagination{
    position: absolute;
    right: 11%;
    bottom: 10%;
    opacity: 1;
    z-index: 4;
}

.owl-custom-header .owl-controls{
    margin-top: 0;
}

.owl-custom-header .owl-controls .owl-page span{
    background: #fff;
}

.wrap{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 90%;
    position: absolute;
    text-align: right;
    bottom: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
}

.header-slider-content{
    position: relative;
    max-width: 48%;
    width: auto;
    right: 0;
/*
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
*/
}

@media screen and (max-width:1540px){
    .header-slider-content{
        max-width: 55%;
    }
}

@media screen and (max-width:1220px){
    .header-slider-content{
        max-width: 60%;
    }
}

@media screen and (max-width:1220px){
    .header-slider-content{
        max-width: 80%;
    }
}

.header-slider-title{
    position: relative;
    padding: 2% 22% 2% 2%;
    text-align: right;
    height: auto;
    background: rgba(255,255,255,0.8);
}

@media screen and (max-width:1368px){
    .header-slider-title{
        padding: 2% 18% 2% 2%;
    }
}

@media screen and (max-width:1180px){
    .header-slider-title{
        padding: 2% 12% 2% 2%;
    }
}

@media screen and (max-width:768px){
    .header-slider-title{
        padding: 2% 14px 2% 2%;
    }
}

.header-slider-title-tail{
    position: absolute;
    width: 30px;
    height: 100%;
    right: 100%;
    top: 0;
    border-left-width: 50px;
    border-right-width: 50px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8) rgba(255,255,255,0.8) rgba(255,255,255,0.8) transparent;
}

@media screen and (max-width:768px){
    .header-slider-title-tail{
        border-right-width: 0;
    }
}

.header-slider-desc{
    color: #fff;
    margin-top: 3%;
    text-align: right;
    margin-right: 22%;
}

@media screen and (max-width:1368px){
    .header-slider-desc{
        margin-right: 18%;
    }
}

@media screen and (max-width:1180px){
    .header-slider-desc{
        margin-right: 12%;
    }
}

@media screen and (max-width:768px){
    .header-slider-desc{
        margin-right: 14px;
    }
}

.btn-read{
    pointer-events:auto;
    border-radius: 0;
    background-color: #8c2529;
    border-color: #8c2529;
    color: #fff;
    margin-right: 22%;
    margin-top: 2%;
    padding: 12px 70px;
    font-size: 16px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@media screen and (max-width:1400px){
    .btn-read{
        font-size: 14px;
        padding: 10px 60px;
    }
}

@media screen and (max-width:1368px){
    .btn-read{
        margin-right: 18%;
    }
}

@media screen and (max-width:1180px){
    .btn-read{
        margin-right: 12%;
    }
}

@media screen and (max-width:768px){
    .btn-read{
        margin-right: 14px;
        padding: 6px 12px;
    }
}

.btn-read:hover{
    color: #fff;
    background-color: #6a1a1d;
    border-color: #6a1a1d;
}

#sub-header{
    position: relative;
    width: 100%;
    height: auto;
}

#sub-header h2 {
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    color: #1a6c42;
    font-size: 32px;
    font-size: 3.2rem;
}

@media screen and (max-width:1400px){
    #sub-header h2 {
        font-size: 3.5rem;
        margin-top: 10px;
    }
}

.sub-header-line{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    border-top-color: #636363;
}

.sub-header-background{
    padding: 1% 4.5%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.sub-header-background-wrapper{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.sub-header-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
/*    padding: 1% 6%;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 1;
}

.sub-header-background:hover .sub-header-overlay{
    background: #8c2529;
    mix-blend-mode: multiply;
    box-shadow: none;
    border: none;
}

.sub-header-background:hover .transparent-container{
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.sub-header-background:hover .transparent-container p,
.sub-header-background:hover .transparent-container h2{
    color: #fff !important;
}

.sub-header-background:hover .sub-header-line{
    border-top-color: #fff;
}

.transparent-container{
    position: relative;
    border: 1px solid #8c2529;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.88);
    background-color: rgba(255,255,255,0.88);
    text-align: center;
    padding: 2%;
    z-index: 5;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.subheader-icon-1{
    width: 60px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.subheader-icon-2{
    width: 60px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.subheader-icon-3{
    width: 60px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

#produk-kami{
    position: relative;
    width: 100%;
    height: auto;
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(../images/main/produk-kami.jpg);
    min-height: 500px;
}

@media screen and (max-width:767px){
    #produk-kami{
        background-size: cover;
        padding-bottom: 8%;
    }
}

#produk-kami h2{
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4%;
    pointer-events: none;
    color: #8c2529;
    text-transform: uppercase;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    font-size: 40px;
    font-size: 4rem;
}

/*
.produk-kami-img-slide{
    position: relative;
    width: 100%;
    min-height: 150px; desired width
}

.produk-kami-img-slide:before{
    content: "";
    display: block;
    padding-top: 45%;
}
*/

.produk-kami-slide-wrapper{
    position: relative;
    width: 100%;
    padding-top: 45%;
    background: transparent;
    background-size: cover;
    background-position: center center;
}

@media screen and (max-width:1180px){
    .produk-kami-slide-wrapper{
        padding-top: 55%;
    }
}

@media screen and (max-width:1180px){
    .produk-kami-slide-wrapper{
        padding-top: 60%;
    }
}

@media screen and (max-width:768px){
    .produk-kami-slide-wrapper{
        padding-top: 66%;
        height: auto;
    }
}

@media screen and (max-width:767px){
    .produk-kami-slide-wrapper{
        padding-top: 25%;
        height: auto;
    }
}

.produk-home-slide-img{
    position: absolute;
    bottom: 34.8%;
    left: 50%;
    width: 8%;
}

@media screen and (max-width:768px){
    .produk-home-slide-img{
        position: relative;
        bottom: initial;
        left: initial;
        width: 100%;
        background-size: 155% auto;
        background-position: right bottom;
        padding-top: 60%;
    }
}

.dots{
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8c2529;
    border: 3px solid #f5f5f5;
    box-shadow: 0 0 0 1px #8c2529;
    z-index: 1000;
}

/*
.dots:hover{
    background: #fff;
    border: 5px solid #66a0d1;
    box-shadow: 0 0 0 1px #387993;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
*/

.dots-1{
    left: 49.8%;
    bottom: 54.8%;
}

.dots-2{
    left: 49.8%;
    bottom: 45%;
}

.dots-3{
    left: 49.8%;
    bottom: 34.5%;
}

.owl-custom-produk .owl-controls .owl-buttons div {
    position: absolute;
    background: transparent;
    opacity: 1;
    height: 70px;
    font-size: 40px;
    color: #000;
}

.owl-custom-produk .owl-controls .owl-buttons .owl-prev{
    left: 7%;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

.owl-custom-produk .owl-controls .owl-buttons .owl-next{
    right: 7%;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

@media screen and (max-width:1280px){
    .owl-custom-produk .owl-controls .owl-buttons .owl-prev{
        left: 2%;
    }

    .owl-custom-produk .owl-controls .owl-buttons .owl-next{
        right: 2%;
    }
}

@media screen and (max-width:992px){
    .owl-custom-produk .owl-controls .owl-buttons .owl-prev{
        left: 0;
    }

    .owl-custom-produk .owl-controls .owl-buttons .owl-next{
        right: 0;
    }
}

@media screen and (max-width:767px){
    .owl-custom-produk .owl-controls .owl-buttons .owl-prev{
        left: 0;
        top: 20%;
    }

    .owl-custom-produk .owl-controls .owl-buttons .owl-next{
        right: 0;
        top: 20%;
    }
}

.owl-theme .owl-controls{
    margin-top: 0;
}

.arrow-slide-img{
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@media screen and (max-width:1180px){
    .arrow-slide-img{
        width: 50%;
        display: block;
    }
}

.arrow-slide-img-right{
    margin-left: auto;
}

.produk-desc-wrapper-outer{
    position: absolute;
    width: 35%;
/*    left: 16.5%;*/
    right: 48%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media screen and (max-width:1400px) {
    .produk-desc-wrapper-outer{
        width: 38%;
    }
}

@media screen and (max-width:1080px) {
    .produk-desc-wrapper-outer{
        width: 45%;
    }
}

.produk-desc-wrapper{
    position: relative;
    display: inline-block;
    width: 100%;
}

.produk-desc-wrapper h3{
    font-size: 2.6rem;
}

.produk-desc-wrapper p{
/*    font-size: 1.7rem;*/
    margin-bottom: 0;
}

@media screen and (max-width:767px){
    .produk-desc-wrapper{
        position: relative;
        display: block;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.produk-point{
    display: inline-block;
    width: 37%;
}



.produk-desc-icon{
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    width: 5%;
    min-width: 30px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

h3.produk-desc-title{
    display: inline-block;
    color: #8c2529;
    vertical-align: middle;
    margin-top: 10px;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.produk-desc{
    position: relative;
    width: 60%;
    min-width: 100px;
    text-align: right;
    display: inline-block;
    margin-right: 4px;
}

@media screen and (max-width:767px){
    .produk-desc{
        width: 100%;
        text-align: left;
    }
}

/*
@media screen and (max-width:1368px){
    .produk-desc{
        width: 25%;
    }
}
*/




/*
.desc-wrapper-1{
    left: 16.5%;
    top: 26%;
}

.desc-wrapper-2{
    left: 16.5%;
    top: 45%;
}

.desc-wrapper-3{
    left: 16.5%;
    top: 65%;
}
*/

@media screen and (max-width:768px){
    .desc-wrapper-1{
        left: initial;
        top: initial;
    }

    .desc-wrapper-2{
        left: initial;
        top: initial;
    }

    .desc-wrapper-3{
        left: initial;
        top: initial;
    }
}

.desc-1{

}

.desc-2{
    vertical-align: middle;
}

.desc-3{
/*    vertical-align: bottom;*/
}

.point-3{
    vertical-align: baseline;
    vertical-align: super;
}
/*
@media screen and (max-width:1368px){
    .desc-1, .desc-2, .desc-3{
        left: 12%;
    }
}
*/

.leaf-1{
    position: absolute;
    width: 13.6%;
    bottom: -11.4%;
    right: 1.8%;
    z-index: 3;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

#fun-facts{
    position: relative;
    width: 100%;
    height: auto;
    background-image: url(../images/main/fun-facts.jpg);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 2% 8% 3% 8%;
}

@media screen and (Max-width:768px){
    #fun-facts{
        padding: 6% 15px 6% 15px;
    }
}

#fun-facts h2{
    color: #fff;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    font-size: 36px;
    font-size: 3.6rem;
}

@media screen and (max-width:768px){
    #fun-facts h2{
        font-size: 2.6rem;
    }
}

#fun-facts p{
    color: #fff;
}

.img-facts{
    width: 70%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@media screen and (max-width:768px){
    .img-facts{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

.facts-desc{
    position: relative;
    padding-left: 10%;
    padding-right: 3%;
    height: 100%;
    color: #fff;
}

@media screen and (max-width:768px){
    .facts-desc{
        padding-left: 0;
        padding-right: 0;
    }
}

.facts-line{
    width: 88%;
    border-top-color: #d7d7d7;
}

#resep-kami{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 7% 25% 7%;
    background-image: url(../images/main/texture.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top;
    z-index: 0;
}

@media screen and (max-width:1192px){
    #resep-kami{
        padding: 4% 4% 25% 4%;
    }
}

@media screen and (max-width:1080px){
    #resep-kami{
        padding: 4% 1% 25% 1%;
    }
}

@media screen and (max-width:1080px){
    #resep-kami{
        padding: 4% 1% 25% 1%;
    }
}

@media screen and (max-width:992px){
    #resep-kami{
        padding: 4% 1% 40% 1%;
    }
}

@media screen and (max-width:767px){
    #resep-kami{
        padding: 8% 10px 120% 10px;
    }
}

#resep-kami h2{
    color: #8c2529;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    font-size: 36px;
    font-size: 3.6rem;
}

#resep-kami h3{
    color: #8c2529;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.dropdown-kategori-resep, .dropdown-urutkan{
    display: inline-block;
}

@media screen and (max-width:768px){
    .dropdown-kategori-resep, .dropdown-urutkan{
        display: block;
    }

    .dropdown-urutkan{
        margin-bottom: 8%;
    }
}

.dropdown-urutkan .dropdown-menu>li>a,
.dropdown-kategori-resep .dropdown-menu>li>a{
    padding: 8px 20px;
}

.dropdown-urutkan .dropdown-menu,
.dropdown-kategori-resep .dropdown-menu{
    min-width: 100%;
}

.dropdown-urutkan{
    margin-left: 3%;
}

@media screen and (max-width:768px){
    .dropdown-urutkan{
        margin-left: 0;
        margin-top: 5%;
    }
}

.dropdown-urutkan .dropdown-menu{
    background-color: rgba(255,255,255,0.8);
}

.dropdown-urutkan .dropdown-menu>li>a:focus,
.dropdown-urutkan .dropdown-menu>li>a:hover{
    background-color: #8c2529;
    color: #fff;
}

.dropdown-kategori-resep .dropdown-menu>li>a:focus,
.dropdown-kategori-resep .dropdown-menu>li>a:hover{
    background-color: #3ca989;
    color: #fff;
}

.btn-kategori-resep {
    position: relative;
    display: inline-block;
    height: 46px;
    background: #3ca989;
    border-radius: 0;
    color: #fff;
    padding-left: 45px;
    padding-right: 45px;
    font-size: 16px;
    z-index: 2;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

@media screen and (max-width:1400px) {
    .btn-kategori-resep {
        font-size: 14px;
        height: 42px;
    }
}

@media screen and (max-width:768px){
    .btn-kategori-resep{
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        height: 40px;
    }
}

.btn-kategori-resep:hover, .btn-kategori-resep.active{
    background-color: #2e7f67;
    color: #fff;
}

.btn-urutkan{
    position: relative;
    display: inline-block;
    height: 46px;
    background: rgba(255,255,255,0.8);
    border-radius: 0;
    color: #707070;
    padding-left: 45px;
    padding-right: 45px;
    font-size: 16px;
    z-index: 2;
}

@media screen and (max-width:1400px) {
    .btn-urutkan {
        font-size: 14px;
        height: 42px;
    }
}

@media screen and (max-width:768px){
    .btn-urutkan{
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        height: 40px;
    }
}

.btn-search, .input-search{
    height: 46px;
}

.btn-search{
    background-color: #8c2529;
    border-radius: 0;
    color: #fff;
    padding: 6px 20px;
}

.input-search{
    background-color: #f9f9f9;
    font-size: 16px;
}

@media screen and (max-width:1400px) {
    .input-search,
    .btn-search{
        font-size: 14px;
        height: 42px;
    }
}

.resep-img-border{
    position: relative;
    border: 4px solid #fff;
    margin-top: 12%;
    margin-bottom: 6%;
}

.resep-img-border:after, .resep-img-border:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 10px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.resep-img-border:before{
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.resep-img{
    position: relative;
    width: 100%;
    border: 8px solid #fff;
    background-color: #e2e1e1;
}

@media screen and (max-width:768px){
    .resep-img{
        border: 6px solid #fff;
    }
}

.resep-img:before{
    content: "";
    display: block;
    padding-top: 70%;
}

.resep-img:after{
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 0;
  left: auto;
}


.pin{
    position: absolute;
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -2%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.resep-desc{
    padding-left: 2%;
    padding-right: 2%;
}

/*
.resep-desc p{
    font-size: 1.8rem;
}
*/

p.resep-desc-text {
    height: 60px;
    overflow-y: hidden;
}

.resep-line{
    border-top-color: #505151;
}

.kategori-resep{
    display: inline-block;
    margin-right: 4%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.kategori-img{
    display: inline-block;
    width: 35px;
    vertical-align: middle;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

p.kategori-desc{
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 0;
    vertical-align: middle;
    width: auto !important;
}

.likes-color{
    color: #8c2529;
}

/**************************************************/
/*                  HOME PAGE END                ;*/
/**************************************************/

/**************************************************/
/*                   RESEP PAGE                  ;*/
/**************************************************/

.wrap-center{
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    pointer-events: none;
    padding: 10%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 3;
}

@media screen and (max-width:880px){
    .wrap-center{
        padding: 0;
    }
}

.header-slider-content-center{
    position: relative;
    width: auto;
    max-width: 60%;
}

@media screen and (max-width:768px){
    .header-slider-content-center{
        max-width: 80%;
    }
}

.overlay-header{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/main/overlay-texture.png);
    background-repeat: repeat;
    background-size: contain;
    z-index: 2;
    pointer-events: none;
}

.header-slider-title-center{
    position: relative;
    padding: 3% 1%;
/*    text-align: center;*/
    width: auto;
    white-space: nowrap;
    background: rgba(255,255,255,0.8);
    display: inline-block;
    box-sizing: border-box;
    text-transform: uppercase;
}

@media screen and (max-width:768px){
    .header-slider-title-center{
        white-space: normal;
    }
}

.header-slider-title-tail-left{
    position: absolute;
    width: 30px;
    height: 100%;
    right: 100%;
    top: 0;
    border-left-width: 40px;
    border-right-width: 40px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8) rgba(255,255,255,0.8) rgba(255,255,255,0.8) transparent;
}

.header-slider-title-tail-right{
    position: absolute;
    width: 30px;
    height: 100%;
    left: 100%;
    top: 0;
    border-left-width: 40px;
    border-right-width: 40px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8) transparent rgba(255,255,255,0.8) rgba(255,255,255,0.8) ;
}

@media screen and (max-width:768px){
    .header-slider-title-tail-left, .header-slider-title-tail-right{
        border-left-width: 15px;
        border-right-width: 15px;
    }
}

.header-slider-desc-center{
    color: #fff;
    margin-top: 4%;
    text-align: center;
}

.header-title-top-center{
    margin-top: 0;
    margin-bottom: 0;
    width: auto;
    display: inline;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.pagination-resep{
}

.pagination-resep>li:first-child>a,
.pagination-resep>li:first-child>span,
.pagination-resep>li:last-child>a,
.pagination-resep>li:last-child>span{
    border-radius: 0;
}

.pagination-resep>li>a,
.pagination-resep>li>span{
    padding: 10px 18px;
    font-size: 18px;
    line-height: 1.3333333;
    margin-right: 8px;
    border-color: #5b5b5b;
    color: #474747;
    background-color: transparent;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover,
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 3;
    color: #fff;
    background-color: #8c2529;
    border-color: #8c2529;
}

/**************************************************/
/*                 RESEP PAGE END                ;*/
/**************************************************/

/**************************************************/
/*                 RESEP DOWNLOAD                ;*/
/**************************************************/

#resep-download{
    position: relative;
    width: 100%;
/*    width: 21cm;*/
    height: 100%;
/*    height: 29.7cm;*/
/*    background-image: url(../images/resep/print-resep.jpg);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: auto;
    padding: 0 11% 11% 11%;
    z-index: 1;
}

#resep-download h1, #resep-download h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

#resep-download h1, #resep-download h2, #resep-download h3, #resep-download h4{
    color: #8c2529;
}

.resep-wrapper{
    position: relative;
    width: 100%;
    height: auto;
    padding: 3% 10% 5% 10%;
    background-image: url(../images/resep/paper.jpg);
    background-position: left top;
    background-size: 100% auto;
    background-repeat: repeat-y;
    z-index: 6;
    margin-top: 3%;
}



.resep-img-download{
    position: relative;
    width: 100%;
    border: 8px solid #fff;
}

.resep-img-download:before{
    content: "";
    display: block;
    padding-top: 55%;
}

.resep-img-download-shadow{
    position: relative;
    border: none;
/*    margin-bottom: 6%;*/
}

.resep-img-download-shadow:after, .resep-img-download-shadow:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: -1px;
  left: 10px;
  width: 60%;
  top: 80%;
/*  max-width:300px;*/
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-13deg);
  -ms-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

.resep-img-download-shadow:before{
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
    right: 10px;
    left: auto;
}

/**************************************************/
/*               RESEP DOWNLOAD END              ;*/
/**************************************************/

/**************************************************/
/*                  RESEP DETAIL                 ;*/
/**************************************************/

#alat-dan-bahan{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 7% 4% 7%;
    background-image: url(../images/resep/alat-bahan-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 0;
}

@media screen and (max-width:1400px){
    #alat-dan-bahan{
        padding: 4% 5%;
    }
}

@media screen and (max-width:1080px){
    #alat-dan-bahan{
        padding: 4% 3%;
    }
}

@media screen and (max-width:768px){
    #alat-dan-bahan{
        padding: 8% 10px;
    }
}

#alat-dan-bahan h3, #alat-dan-bahan h4{
    color: #8c2529;
}

#alat-dan-bahan h3{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
}

.detail-resep-top{
/*
    padding-left: 5%;
    padding-right: 5%;
*/
    position: relative;
    width: 100%;
    max-width: 900px;
}

.detail-resep-top p{
    width: 100%;
    max-width: 800px;
}

.resep-title-line{
    border-top-color: #a1a1a1;
    width: 100%;
    max-width: 800px;
    margin-top: 3%;
}

.kategori-resep-big{
    display: inline-block;
    margin-right: 4%;
    margin-top: 1%;
    margin-bottom: 2%;
}

h2.resep-title{
    color: #8c2529;
    text-transform: uppercase;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    font-size: 45px;
    font-size: 4.5rem;
}

.pin-resep{
    position: absolute;
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@media screen and (max-width:768px){
    .pin-resep{
        width: 17%;
    }
}

.resep-img-big-border{
    position: relative;
    border: 10px solid #fff;
    margin-bottom: 6%;
}

.resep-img-big-border:after, .resep-img-big-border:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: -2px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.resep-img-big-border:before{
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.resep-img-big{
    position: relative;
    width: 100%;
    border: 8px solid #fff;
}

@media screen and (max-width:768px){
    .resep-img-big{
        border: none;
    }
}

.resep-img-big:before{
    content: "";
    display: block;
    padding-top: 110%;
}

.alat-bahan-left{
    padding-right: 3%;
}

@media screen and (max-width:1080px){
    .alat-bahan-left{
        padding-right: 15px;
    }
}

@media screen and (max-width:768px){
    .alat-bahan-left{
        padding-left: 0;
    }
}

@media screen and (max-width:767px){
    .alat-bahan-left{
        padding-left: 0;
    }
}

.alat-bahan-right{
    padding-left: 3%;
}

@media screen and (max-width:1080px){
    .alat-bahan-right{
        padding-left: 15px;
    }
}

@media screen and (max-width:768px){
    .alat-bahan-right{
        padding-left: 0;
        padding-right: 0;
    }
}

.resep-paper{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url(../images/resep/paper.jpg);
    background-position: left top;
    background-size: 100% auto;
    background-repeat: repeat-y;
    padding: 7% 8% 10% 8%;
}

@media screen and (max-width:767px) {
    .resep-paper {
        padding: 7% 15px 10% 15px;
    }
}

.resep-paper:after, .resep-paper:before{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 6px;
  left: 10px;
  width: 70%;
  top: 80%;
  max-width:300px;
  background: #bcb9b9;
  box-shadow: 0 15px 10px #bcb9b9;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.resep-paper:before{
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.resep-paper-line{
    border-top-color: #363636;
    width: 42%;
    min-width: 250px;
    margin-bottom: 6%;
}

.list-alat-bahan li, .list-alat-bahan-b li, .list-alat-bahan-isi li{
    line-height: 2;
    color: #464646;
}

.list-alat-bahan-b, .list-alat-bahan-isi{
    list-style-type: upper-roman;
    list-style-position: inside;
}

#cara-memasak{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 11% 25% 11%;
    background-image: url(../images/resep/cara-memasak-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 0;
    border-top: 4px solid #8c2529;
    box-shadow: inset  0  8px 8px -8px #696868;
}

@media screen and (max-width: 1400px){
    #cara-memasak {
        padding: 6% 5% 25% 5%;
    }
}

@media screen and (max-width: 1080px){
    #cara-memasak {
        padding: 6% 3% 25% 3%;
    }
}

@media screen and (max-width: 768px){
    #cara-memasak {
        padding: 6% 5px 45% 5px;
    }
}

@media screen and (max-width: 767px){
    #cara-memasak {
        padding: 8% 10px 118% 10px;
    }
}

#cara-memasak h4{
    color: #8c2529;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.cara-memasak-line{
    margin-bottom: 4%;
    margin-top: 4%;
    border-top-color: #a1a1a1;
    width: 80%;
}

.cara-memasak-heading{
    font-size: 38px;
    font-size: 3.8rem;
    color: #8c2529;
    text-transform: uppercase;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.list-cara-memasak{
    list-style-type: decimal;
    list-style-position: inside;
}

.list-cara-memasak li{
    line-height: 2.5;
    color: #464646;
}

.cara-memasak-wrapper, .ulasan-resep-wrapper{
    padding-top: 4%;
    padding-bottom: 4%;
}

.ulasan-resep-wrapper{
    position: relative;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    height: auto;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid #a66061;
}

.kategori-resep-wrapper{
    background: #f9f9f9;
    margin-top: 3%;
    padding: 2%;
}

.form-ulasan{
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 0;
    background: rgba(255,255,255,0.41);
    border-color: #c0c0c0;
}

@media screen and (max-width:1368px){
    .form-ulasan{
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
    }
}

.popover-title{
    background-color: #8c2529;
}

.recipe-share-icon:hover{
    color: #8c2529;
}

.btn-kirim-ulasan, .btn-share, .btn-print{
    height: 46px;
    padding: 10px 60px;
    font-size: 18px;
    margin-top: 2%;
    line-height: 1.3333333;
    border-radius: 0;
    background-color: #579b87;
    color: #fff;
    display: inline-block;
    margin-right: 10px;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

@media screen and (max-width:1400px){
    .btn-kirim-ulasan, .btn-share, .btn-print{
        padding: 10px 50px;
        font-size: 14px;
        height: 42px;
    }
}

@media screen and (max-width:768px){
    .btn-kirim-ulasan, .btn-share, .btn-print{
        padding: 6px 20px;
        font-size: 14px;
        height: 40px;
    }
}

.btn-kirim-ulasan:hover, .btn-share:hover, .btn-print:hover{
    background-color: #2e7f67;
    color: #fff;

}

.print-logo, .share-logo{
    color: #fff;
    margin-right: 1rem;
}

h2.resep-lain{
    text-transform: uppercase;
    color: #579b87;
    margin-top: 10px;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.resep-lain-line{
    border-top-color: #a1a1a1;
    width: 50%;
    position: absolute;
    margin-top: 0;
}

.resep-lain-name{
    color: #8c2529;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
}

.egg-butter{
    position: absolute;
    width: 12%;
    left: 1%;
    top: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.roller{
    position: absolute;
    width: 14.5%;
    right: 6%;
    top: -3%;
    z-index: 2;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.egg{
    position: absolute;
    width: 6%;
    right: 1%;
    top: -3%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/**************************************************/
/*                RESEP DETAIL END               ;*/
/**************************************************/

/**************************************************/
/*                  JADWAL DEMO                 ;*/
/**************************************************/

#jadwal-demo{
    position: relative;
    width: 100%;
    height: auto;
    background-image: url(../images/jadwal-demo/jadwal-background.jpg);
    background-size: cover;
    padding: 7% 7% 25% 7%;
}

@media screen and (max-width:1400px) {
    #jadwal-demo {
        padding: 7% 3% 25% 3%;
    }
}

@media screen and (max-width:1200px) {
    #jadwal-demo {
        padding: 7% 15px 25% 15px;
    }
}

@media screen and (max-width: 768px){
    #jadwal-demo {
        padding: 6% 5px 45% 5px;
    }
}

@media screen and (max-width: 767px){
    #jadwal-demo {
        padding: 8% 2px 110% 2px;
    }
}

/*
.jadwal-demo-img-big{
    position: relative;
    width: 100%;
    min-height: 100px;
    margin-bottom: 4%;
}

.jadwal-demo-img-big:before{
    content: "";
    display: block;
    padding-top: 32%;
}

@media screen and (max-width:768px){
    .jadwal-demo-img-big:before{
        content: "";
        display: block;
        padding-top: 60%;
    }
}

.jadwal-demo-img{
    position: relative;
    width: 100%;
    min-height: 100px;
    margin-bottom: 4%;
}

.jadwal-demo-img:before{
    content: "";
    display: block;
    padding-top: 60%;
}

.jadwal-demo-content{
    padding-left: 10px;
    padding-right: 10px;
}

.jadwal-demo-content h2{
    color: #8c2529;
    font-family: 'Aleo Bold';
    margin-bottom: 3.3rem;
    margin-top: 3.3rem;
}

.jadwal-demo-content h3{
    color: #8c2529;
    font-family: 'Aleo Bold';
    margin-bottom: 2rem;
    margin-top: 2rem;
    line-height: 1.4;
}

.jadwal-demo-content p{
    color: #8f8f8f;
}

p.jadwal-place-time{
    color: #585858;
}

p.jadwal-place-time-small{
    color: #585858;
    font-size: 15px;
}

.jadwal-separator{
    margin-left: 2%;
    margin-right: 2%;
}

.jadwal-demo-line{
    border-top-color: #c2c2c2;
    margin-top: 4.5em;
    margin-bottom: 4.5em;
}

.jadwal-demo-line-small{
    border-top-color: #c2c2c2;
    margin-top: 3em;
    margin-bottom: 3em;
}
*/

.btn-jadwal-demo {
    position: relative;
    display: inline-block;
    height: 46px;
    background: #3ca989;
    border-radius: 0;
    color: #fff;
    padding-left: 45px;
    padding-right: 45px;
    font-size: 16px;
    z-index: 2;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

@media screen and (max-width:767px){
    .btn-jadwal-demo {
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        height: 40px;
    }
}

.btn-jadwal-demo:hover
.btn-jadwal-demo:focus,
.btn-jadwal-demo.active{
    background-color: #2e7f67;
    color: #fff;
}

.jadwal-demo-image-wrapper {
    position: relative;
}

/*
.jadwal-demo-image-wrapper:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: -24%;
    margin-left: auto;
    margin-right: auto;
    width: 51%;
    height: 26%;
    -webkit-box-shadow: 80px 0 27px rgba(0, 0, 0, 0.2);
    box-shadow: 80px 0 27px rgba(0, 0, 0, 0.2);
    -webkit-transform: skew(-50deg);
    transform: skew(-50deg);
    -webkit-transform-origin: 0 200%;
    transform-origin: 0 200%;
}
*/

.jadwal-demo-image {
    position: relative;
    display: block;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}

@media screen and (max-width:767px) {
    .jadwal-demo-image {
        width: 70%;
    }
}

#jadwal-demo h4 {
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    color: #8c2529;
}

#jadwal-demo h5 {
    color: #525252;
/*    font-family: 'Helvetica';*/
    font-family: 'Source Sans Pro Regular';
}

.jadwal-demo-list-grid {
    position: relative;
    width: 100%;
    padding: 0 15% 30% 15%;
}

@media screen and (max-width:1200px) {
    .jadwal-demo-list-grid {
        padding: 0 20px 30% 20px;
    }
}

@media screen and (max-width:767px) {
    .jadwal-demo-list-grid {
        padding: 0 0 30% 0;
    }
}

.jadwal-demo-line {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 11% 0;
    background-color: #c8c8c8;
}

.jadwal-demo-line:after {
    content: '';
    position: absolute;
    height: 3px;
    background-color: #c8c8c8;
    width: 45%;
    top: -1px;
    left: 0;
}

.pdf-hide-mobile {
    vertical-align: top !important;
}

@media screen and (max-width:767px) {
    .pdf-hide-mobile {
        display: none;
    }
}

.btn-download-pdf {
    background-color: #8c2529;
    border-radius: 0;
    color: #fff;
    padding: 10px 16px;
    font-size: 18px;
    padding-bottom: 8px;
    padding-top: 8px;
    font-size: 16px;
    margin-top: 6%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}

@media screen and (max-width:1200px) {
    .btn-download-pdf {
        padding: 6px 12px;
        font-size: 14px;
    }
}

.btn-download-pdf span {
    display: inline-block;
    vertical-align: middle;
}

.pdf-image {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 19px;
    margin-right: 8px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.disclaimer-text {
    position: relative;
    margin-top: 0;
    margin-bottom: 40px;
}

@media screen and (max-width:992px) {
    .disclaimer-text {
        margin-bottom: 60px;
    }
}

@media screen and (max-width:767px) {
    .disclaimer-text {
        margin-bottom: 10px;
    }
}

.disclaimer-text p {
    font-size: 16px;
}

@media screen and (max-width:1400px) {
    .disclaimer-text p {
        font-size: 14px;
    }
}

/**************************************************/
/*                JADWAL DEMO END                ;*/
/**************************************************/

/**************************************************/
/*                 VIDEO TUTORIAL                ;*/
/**************************************************/

#rahasia-top{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #f4f4f2;
    background-image: url(../images/video-tutorial/rahasia-1.png);
    background-size:  40% auto;
    background-position: right 13% bottom;
    background-repeat: no-repeat;
    padding: 5% 9%;
    border-bottom: 2px solid #8c2529;
}

@media screen and (max-width:768px){
    #rahasia-top{
        padding: 18% 10px 0 10px;
        background-image: none !important;
    }
}

#rahasia-top h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    color: #8c2529;
}

.rahasia-top-left{
    padding-right: 7%;
}

@media screen and (max-width:768px){
    .rahasia-top-left{
        padding-right: 15px;
    }
}

.rahasia-img{
    width: 100%;
    margin-top: 6%;
}

.rahasia-top-line{
    border-top-color: #c8c8c8;
    width: 80%;
    margin-top: 4%;
    margin-bottom: 4%;
}

#rahasia-top p{
    margin-bottom: 4%;
}

#rahasia-bottom{
    position: relative;
    width: 100%;
    height: auto;
    background-image: url(../images/video-tutorial/rahasia-bottom.jpg);
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    padding: 6.5% 15% 7% 15%;
    border-bottom: 2px solid #8c2529;
}

.leaf-rahasia{
    position: absolute;
    width: 9%;
    min-width: 100px;
    top: -4%;
    left: 10%;
    z-index: 3;
}

#tim-demo{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #f4f4f2;
    padding: 4% 7% 25% 7%;
}

@media screen and (max-width: 1400px){
    #tim-demo {
        padding: 4% 5% 25% 5%;
    }
}

@media screen and (max-width: 1080px){
    #tim-demo {
        padding: 4% 3% 25% 3%;
    }
}

@media screen and (max-width: 768px){
    #tim-demo {
        padding: 6% 5px 45% 5px;
    }
}

@media screen and (max-width: 767px){
    #tim-demo {
        padding: 8% 5px 110% 5px;
    }
}

#tim-demo h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    color: #8c2529;
    margin-top: 10px;
}

.video-demo-title{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    color: #8c2529;
}

.video-demo-img{
    position: relative;
    width: 100%;
    min-height: 150px;
}

.video-demo-img:before{
    content: "";
    display: block;
    padding-top: 82%;
}

.video-list-wrapper{
    position: relative;
    padding-left: 2%;
}

@media screen and (max-width:768px){
    .video-list-wrapper{
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 30px;
    }
}

.video-list{
    overflow-y: scroll;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    height: auto;
}

@media screen and (max-width:768px){
    .video-list{
        height: 300px !important;
    }
}

.video-lainnya{
    margin-top: 0;
    margin-bottom: 0;
}

.video-list-line{
    border-top-color: #cccccc;
    width: 80%;
    margin-top: 10px;
    margin-bottom: 30px;
}

.video-demo-thumbnail{
    position: relative;
    width: 100%;
    min-height: 150px;
}

@media screen and (max-width:768px){
    .video-demo-thumbnail{
        min-height: 100px;
    }
}

.video-demo-thumbnail:before{
    content: "";
    display: block;
    padding-top: 65%;
}

.video-list-wrapper h3{
/*    font-family: 'Helvetica';*/
    font-family: 'Source Sans Pro Regular';
    color: #5e5e5e;
}

/**************************************************/
/*               VIDEO TUTORIAL END              ;*/
/**************************************************/

/**************************************************/
/*                  TENTANG KAMI                 ;*/
/**************************************************/

#sejarah{
    position: relative;
    width: 100%;
    height: auto;
    background-image: url(../images/tentang-kami/sejarah.jpg);
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    padding: 4% 15% 7% 15%;
}

@media screen and (max-width:1400px){
    #sejarah{
        padding: 4% 10% 7% 10%;
    }
}

@media screen and (max-width:1080px){
    #sejarah{
        padding: 8% 5% 8% 5%;
    }
}

@media screen and (max-width:767px){
    #sejarah{
        padding: 18% 10px;
        background-size: 100% auto;
    }
}

#sejarah h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    color: #8c2529;
}

#sejarah p{
    line-height: 1.6;
    margin-bottom: 25px;
    color: #525252;
}

h4.sejarah-quote{
/*    font-family: "Helvetica Light Italic";*/
    font-family: 'Source Sans Pro Light Italic';
    color: #525252;
    text-align: left;
}

h4.sejarah-quote-by{
/*    font-family: "Helvetica Medium";*/
    font-family: 'Source Sans Pro Semibold';
    color: #525252;
    margin-top: 3%;
    text-align: left;
}

.sejarah-line{
    width: 30%;
    border-top-color: #acacac;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    margin-bottom: 4%;
}

.sejarah-circle{
    width: 12px;
    height: 12px;
    background: #8c2529;
    border-radius: 50%;
    display: inline-block;
    margin: 0 3px;
}

.sejarah-fieldset{
    border: 1px solid #9e4a4c;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
    padding: 2% 4%;
}

.sejarah-legend{
    background: #f4f4f2;
    width: auto;
    padding: 0 2%;
    margin-bottom: 0;
}

.owl-sejarah {
    border: 1px solid #9e4a4c;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
    padding: 2% 4%;
}

.owl-sejarah .owl-controls {
    position: absolute;
    top: -11px;
    background-color: #F4F4F2;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
}

.owl-sejarah .owl-controls .owl-page span {
    background-color: #8c2529;
}


.leaf-2{
    position: absolute;
    width: 9%;
    min-width: 100px;
    top: 15%;
    left: 10%;
    z-index: 3;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@media screen and (max-width:768px){
    .leaf-2{
        top: 3%;
        left: 6%;
    }
}

#prestasi-top{
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    background-image: url(../images/tentang-kami/prestasi.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.prestasi-left{
    position: relative;
    padding: 4%;
}

.prestasi-left:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8c2529;
    mix-blend-mode: multiply;
}

.prestasi-left-inner{
    position: relative;
    border: 1px solid #fff;
    padding: 9% 7%;
}

.prestasi-left-inner h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
}

.prestasi-left-inner p{
    color: #fff;
}

.prestasi-line{
    width: 63%;
    border-top-color: #acacac;
    margin-top: 5%;
    margin-bottom: 5%;
}

.trophy-img{
    position: relative;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.trophy-ribbon{
    position: relative;
    margin-left: 5%;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-block;
/*    background-color: rgba(0,0,0,0.5);*/
    background-color: rgba(255,255,255,0.8);
}

@media screen and (max-width:768px){
    .trophy-ribbon{
        width: 90%;
    }
}

.trophy-ribbon-tail-left{
    position: absolute;
    width: 30px;
    height: 100%;
    right: 100%;
    top: 0;
    border-left-width: 15px;
    border-right-width: 15px;
    border-top-width: 20px;
    border-bottom-width: 20px;
    border-style: solid;
    border-color : rgba(255,255,255,0.8) rgba(255,255,255,0.8) rgba(255,255,255,0.8) transparent;
}

.trophy-ribbon-tail-right{
    position: absolute;
    width: 30px;
    height: 100%;
    left: 100%;
    top: 0;
    border-left-width: 15px;
    border-right-width: 15px;
    border-top-width: 20px;
    border-bottom-width: 20px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8) transparent rgba(255,255,255,0.8) rgba(255,255,255,0.8) ;
}

.list-prestasi p{
    margin-bottom: 0;
    color: #8c2529;
}

.list-prestasi li{
    position: relative;
    margin-top: 4%;
    margin-bottom: 4%;
}

#prestasi-bottom{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 15% 25% 15%;
    background-image: url(../images/tentang-kami/texture.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top;
}

@media screen and (max-width:1080px){
    #prestasi-bottom{
        padding: 4% 8% 30% 8%;
    }
}

@media screen and (max-width: 768px){
    #prestasi-bottom {
        padding: 6% 5px 45% 5px;
    }
}

@media screen and (max-width:767px){
    #prestasi-bottom{
        padding: 8% 10px 110% 10px;
    }
}

#prestasi-bottom h4{
/*    font-family: "Helvetica";*/
    font-family: "Source Sans Pro Regular";
    text-align: center;
    color: #525252;
    line-height: 1.6;
}

.border-rekor{
    width: 82%;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.img-rekor-wrapper{
    position: relative;
}

.img-rekor{
    position: absolute;
    width: 70%;
    min-height: 128px;
    border-radius: 50%;
    top: 19.8%;
    left: 14.2%;
}

.img-rekor:before{
    content: "";
    display: block;
    padding-top: 100%;
}

.bulet{
    border-radius: 50%;
}

h3.rekor-title{
    font-size: 25px;
    font-size: 2.5rem;
    text-align: center;
    color: #8c2529;
    line-height: 1.5;
    padding-left: 4%;
    padding-right: 4%;
}

/**************************************************/
/*                TENTANG KAMI END               ;*/
/**************************************************/

/**************************************************/
/*                  HUBUNGI KAMI                 ;*/
/**************************************************/

#hubungi-kami{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 7% 25% 7%;
    background-color: #f5f5f4;
}

@media screen and (max-width: 1400px){
    #hubungi-kami{
        padding: 4% 5% 25% 5%;
    }
}

@media screen and (max-width: 1080px){
    #hubungi-kami{
        padding: 4% 3% 25% 3%;
    }
}

@media screen and (max-width: 768px){
    #hubungi-kami {
        padding: 6% 5px 40% 5px;
    }
}

@media screen and (max-width: 767px){
    #hubungi-kami{
        padding: 8% 2px 110% 2px;
    }
}

#hubungi-kami h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    font-size: 36px;
    font-size: 3.6rem;
    color: #8c2529;
}

#hubungi-kami h3{
/*    font-family: 'Helvetica';*/
    font-family: "Source Sans Pro Regular";
    color: #595959;
}

#hubungi-kami label{
    color: #595959;
    font-size: 19px;
    font-size: 1.9rem;
}

.hubungi-input{
    background-color: #f5f4f3;
    border-radius: 0;
    border-color: #636363;
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

@media screen and (max-width:1368px){
    .hubungi-input{
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
    }
}

.btn-kirim{
    background: #8c2529;
    border-color: #8c2529;
    color: #fff;
    border-radius: 0;
    padding: 10px 105px;
    font-size: 18px;
    line-height: 1.3333333;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 2;
}

.btn-kirim:hover{
    color: #fff;
    background-color: #6a1a1d;
    border-color: #6a1a1d;
}

@media screen and (max-width:1400px){
    .btn-kirim{
        padding: 10px 80px;
        font-size: 14px;
    }
}

@media screen and (max-width:768px){
    .btn-kirim{
        width: 100%;
        font-size: 14px;
    }
}

#peta{
    border-bottom: 6px solid #8c2529;
}

/**************************************************/
/*                HUBUNGI KAMI END               ;*/
/**************************************************/

/**************************************************/
/*                     PRODUK                    ;*/
/**************************************************/

#produk{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 0;
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(../images/produk/produk-kami-background.jpg);
    border-bottom: 4px solid #8c2529;
}

#produk h2{
    width: auto;
    text-align: center;
    pointer-events: none;
    color: #8c2529;
    text-transform: uppercase;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    font-size: 40px;
    font-size: 4rem;
}

.produk-kami-line{
    width: 20%;
    border-top-color: #a1a1a1;
    margin-top: 1.5%;
    margin-bottom: 2.5%;
    margin-left: auto;
    margin-right: auto;
}

.tabs-produk{
    margin-top: 3.8%;
}

.tabs-produk{
    padding-left: 12%;
    padding-right: 12%;
}

@media screen and (max-width:767px){
   .tabs-produk{
/*
        padding-left: 0;
        padding-right: 0;
        overflow-x: scroll;
*/

        padding: 0;
        list-style: none;
        text-align: center;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;

        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        display: -moz-box;
    }
}


.tabs-produk li{
    width: 20%;
    text-align: center;
}

@media screen and (max-width:767px){
    .tabs-produk li{
/*        width: 70%;*/
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
        position: relative;
        cursor: pointer;

        width: 150px;
        float:none;
    }
}

.tabs-produk li a{
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.tabs-produk li a:hover {
    border-color: transparent;
}

.tabs-produk li a:focus,
.tabs-produk li a:hover {
    text-decoration: none;
    background-color: transparent;
}

.tabs-produk li.active a,
.tabs-produk li.active a:focus,
.tabs-produk li.active a:hover{
    color: #555;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #8c2529;
    padding-bottom: 23%;
}

@media screen and (max-width:767px) {
    .tabs-produk li.active a,
    .tabs-produk li.active a:focus,
    .tabs-produk li.active a:hover {
        border-bottom-width: 4px;
    }
}

@media screen and (max-width:768px){
    .tabs-produk li.active a,
    .tabs-produk li.active a:focus,
    .tabs-produk li.active a:hover{
        padding-bottom: 34%;
    }
}

.tabs-produk li.active a:before {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 0;
    height: 0;
    content: '';
    border: 10px solid #00a650;
    border-color:  #8c2529 transparent transparent transparent;
}

.img-produk-kategori{
    max-width: 175px !important;
    width: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.produk-kategori-title{
    color: #5f5f5f;
/*    font-family: 'Helvetica';*/
    font-family: "Source Sans Pro Regular";
    margin-top: 13%;
    margin-bottom: 8%;
    font-size: 2.7rem;
}

.tabs-produk li.active a .img-produk-kategori,
.tabs-produk li.active a:focus .img-produk-kategori,
.tabs-produk li.active a:hover .img-produk-kategori{
    border: 3px solid #8c2529;
    -webkit-filter: none;
    filter: none;
}

.produk-kami-slide{
    position: relative;
    width: 100%;
    height: auto;
    min-height: 400px;
}

@media screen and (max-width:768px) {
    .produk-kami-slide{
        min-height: 470px;
    }
}

.produk-kami-slide:after{
    content: '';
    position: relative;
    display: block;
    padding-top: 37%;
}

@media screen and (max-width:768px){
    .produk-kami-slide:after{
/*
        content: '';
        position: relative;
        display: block;
        padding-top: 80%;
*/
        content: none;
    }
}
@media screen and (max-width:767px) {
    .produk-kami-slide .content-inside {
        position: relative;
    }
}

.asd{
    position: relative;
}

.produk-kami-slide-img{
    position: absolute;
    width: 16%;
    height: auto;
    left: 0;
    right: 0;
    bottom: 10%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:768px){
    .produk-kami-slide-img {
        width: 23%;
        bottom: 8%;
        top: 50%;
        -webkit-transform: translate3d(0,-32%,0);
        transform: translate3d(0,-32%,0);
    }
}

@media screen and (max-width:767px){
    .produk-kami-slide-img{
        position: relative;
        width: 45%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-top: 8%;
        margin-bottom: 8%;
        top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.produk-dots{
    width: 10%;
    height: auto;
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.produk-dots-1{
    top: 28%;
    right: 55%;
}

.produk-dots-2{
    top: 28%;
    left: 55%;
}

.produk-dots-3{
/*    bottom: 33%;*/
    bottom: 10%;
    right: 55%;
}

.produk-dots-4{
/*    bottom: 33%;*/
    bottom: 10%;
    left: 55%;
}

.produk-kami-desc{
    position: absolute;
    width: 20%;
    min-width: 100px;
    text-align: right;
    display: inline-block;
    margin-right: 4px;
}

.produk-kami-desc-1{
    top: 19%;
    right: 66%;
}

.produk-kami-desc-2{
    top: 19%;
    left: 66%;
    text-align: left;
}

.produk-kami-desc-3{
/*    bottom: 25%;*/
    bottom: 1%;
    right: 66%;
}

.produk-kami-desc-4{
/*    bottom: 25%;*/
    bottom: 1%;
    left: 66%;
    text-align: left;
}

@media screen and (max-width:1180px){
    .produk-kami-desc{
        width: 30%;
    }

    .produk-kami-desc-1{
        top: 16%;
    }

    .produk-kami-desc-2{
        top: 16%;
    }

/*
    .produk-kami-desc-3{
        bottom: 21%;
    }

    .produk-kami-desc-4{
        bottom: 21%;
    }
*/
}

@media screen and (max-width:767px){
    .produk-kami-desc{
        position: relative;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .produk-kami-desc-1{
        top: 19%;
        right: 0;
        left: 0;
        text-align: left;
    }

    .produk-kami-desc-2{
        top: 19%;
        right: 0;
        left: 0;
    }

    .produk-kami-desc-3{
        right: 0;
        left: 0;
        text-align: left;
    }

    .produk-kami-desc-4{
        right: 0;
        left: 0;
        text-align: left;
    }
}

.owl-custom-produk-kategori .owl-controls .owl-page {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: #69bba3;
    border-radius: 50%;
    margin: 0 2%;
    outline: none;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

@media screen and (max-width:768px){
    .owl-custom-produk-kategori .owl-controls .owl-page {
        width: 60px;
        height: 60px;
    }
}

.owl-custom-produk-kategori .owl-controls .owl-pagination {
    margin-top: 6%;
}

.owl-custom-produk-kategori .owl-controls .owl-page:focus {
    outline: none;
}

.owl-custom-produk-kategori .owl-controls .owl-page span {
    display: none;
}

.owl-custom-produk-kategori .owl-controls .owl-page.active {
    background-color: #69bba3;
    border: 2px solid #fff;
    box-shadow: 0 0 0 6px #69bba3;
}

.owl-custom-produk-kategori .owl-controls .owl-page:not(.active) {
    background: transparent;
}

.owl-custom-produk-kategori .owl-controls .owl-page:not(.active):hover {
    background-color: #69bba3;
    border: 2px solid #fff;
}

.owl-custom-produk-kategori .owl-controls .owl-buttons div {
    position: absolute;
    background: transparent;
    opacity: 1;
    height: 70px;
    font-size: 40px;
    color: #000;
}

.owl-custom-produk-kategori .owl-controls .owl-buttons .owl-prev{
    left: 7%;
    top: 38%;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

.owl-custom-produk-kategori .owl-controls .owl-buttons .owl-next{
    right: 7%;
    top: 38%;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

@media screen and (max-width:1180px){
    .owl-custom-produk-kategori .owl-controls .owl-buttons .owl-prev{
        left: 1%;
    }

    .owl-custom-produk-kategori .owl-controls .owl-buttons .owl-next{
        right: 1%;
    }
}

@media screen and (max-width:767px){
    .owl-custom-produk-kategori .owl-controls .owl-buttons .owl-prev{
        left: 0;
        top: 14%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .owl-custom-produk-kategori .owl-controls .owl-buttons .owl-next{
        right: 0;
        top: 14%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

/**************************************************/
/*                   PRODUK END                  ;*/
/**************************************************/

/**************************************************/
/*                     PROSES                    ;*/
/**************************************************/

#proses{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 5% 25% 5%;
    background-image: url(../images/proses/proses-background.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top;
    z-index: 0;
}

#proses h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    font-size: 36px;
    font-size: 3.6rem;
    color: #8c2529;
    text-align: center;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

.proses-border{
    border: 1px solid #cfcfce;
    background-image: url(../images/proses/proses-background.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top;
    padding: 5% 0;
    margin-top: 5%;
}

/**************************************************/
/*                   PROSES END                  ;*/
/**************************************************/

/**************************************************/
/*                      MEDIA                    ;*/
/**************************************************/

#media{
    position: relative;
    width: 100%;
    height: auto;
    padding: 4% 7% 25% 7%;
    background-image: url(../images/media/proses-background.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top;
    z-index: 0;
}

@media screen and (max-width: 1400px){
    #media {
        padding: 4% 5% 25% 5%;
    }
}

@media screen and (max-width: 1080px){
    #media {
        padding: 4% 3% 25% 3%;
    }
}

@media screen and (max-width: 768px){
    #media {
        padding: 6% 5px 45% 5px;
    }
}

@media screen and (max-width: 767px){
    #media {
        padding: 12% 5px 110% 5px;
    }
}

@media screen and (max-width:768px){
    .nav-media>li {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 4%;
        float: none;
    }
}

.nav-media>li>a {
    background: rgba(255,255,255,0.8);
    border-radius: 0;
    color: #707070;
    padding: 12px 65px;
    font-size: 16px;
    z-index: 2;
    border: 1px solid #919191;
    margin-right: 15px;
}

@media screen and (max-width:1400px){
    .nav-media>li>a{
        font-size: 14px;
        padding: 10px 65px;
    }
}

@media screen and (max-width:768px){
    .nav-media>li>a{
        font-size: 14px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width:768px){
    .nav-pills>li+li {
        margin-left: auto;
    }
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover{
    background: #3ca989;
    border: 1px solid #3ca989;
}

.media-img{
    position: relative;
    width: 100%;
    min-height: 150px;
}

.media-img:before{
    content: "";
    display: block;
    padding-top: 60%;
}

.media-line{
    border-top-color: #a1a1a1;
}

.media-img-desc{
    margin-top: 5%;
    padding-left: 15px;
    padding-right: 15px;
}

@media screen and (max-width:768px){
    .media-img-desc{
        margin-top: 0;
        margin-bottom: 15px;
    }
}

.media-img-desc h3{
    color: #8c2529;
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    margin-top: 5px;
}

.media-img-desc h5, .media-img-desc img{
    display: inline-block;
    vertical-align: middle;
}

.share-icon, .love-icon{
    width: 20px;
    margin-left: 8px;
    margin-right: 8px;
}

.video-icon{
    width: 12%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@media screen and (max-width:768px){
    .video-icon{
        width: 22%;
    }
}

/**************************************************/
/*                   MEDIA END                   ;*/
/**************************************************/

/**************************************************/
/*                       FAQ                     ;*/
/**************************************************/

#faq{
    position: relative;
    width: 100%;
    height: auto;
    padding: 6% 16.8% 30% 16.8%;
    background-image: url(../images/faq/faq-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
}

@media screen and (max-width: 1400px){
    #faq {
        padding: 6% 10% 30% 10%;
    }
}

@media screen and (max-width: 768px){
    #faq {
        padding: 6% 15px 45% 15px;
    }
}

@media screen and (max-width: 767px){
    #faq {
        padding: 8% 10px 110% 10px;
    }
}

#faq h2{
/*    font-family: 'Aleo Bold';*/
    font-family: 'Ubuntu Bold';
    text-transform: uppercase;
    font-size: 36px;
    font-size: 3.6rem;
    color: #8c2529;
}

#faq h3{
/*    font-family: 'Helvetica';*/
    font-family: "Source Sans Pro Regular";
    color: #545454;
}

.faq-number-wrapper{
    position: relative;
    display: block;
}

.faq-number{
    position: relative;
    color: #222;
    text-align: center;
    width: 100%;
    height: 0;
    height: 100%;
    border: 2px solid #8c2529;
    border-radius: 50%;
}

.faq-number:before {
    content: '';
    display: block;
    padding-top: 100%;
    background-color: #ebebeb;
    border-radius: 50%;
    z-index: -1;
}


.faq-number:after{
    content: "";
    display: block;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.26);
}

.faq-number>h2{
    position: absolute;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0;
/*    font-family: 'Helvetica Thin' !important;*/
    font-family: "Source Sans Extra Light";
}

.faq-title-wrapper{
    position: relative;
    display: inline-block;
    float: none;
    vertical-align: middle;
}

.faq-title{
    display: inline-block;
    color: #545454;
/*    font-family: 'Helvetica';*/
    font-family: "Source Sans Pro Regular";
    font-size: 2.4rem;
    cursor: pointer;
}

.faq-title-line{
    margin-top: 5%;
}

.faq-plus{
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.faq-expand{
    position: relative;
/*    margin-top: 2%;*/
}

hr.faq-line{
    left: 0;
    border-top: 1px dashed #000;
    margin-top: 0;
    height: 1px;
}

.asdasd{
    position: relative;
}

/**************************************************/
/*                     FAQ END                   ;*/
/**************************************************/

/**************************************************/
/*                     FOOTER                    ;*/
/**************************************************/
/*
#footer{
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 6% 2% 6%;
    color: #fff;
    background-color: #8c2529;
    background-position: bottom;
}

#footer:after{
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 200px;
    background-image: url(../images/main/footer-top.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
*/

#footer{
    position: absolute;
    width: 100%;
    height: 500px;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 13% 8.1% 2% 8.1%;
    color: #fff;
    background-color: #8c2529;
    background: url(../images/main/footer.png);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

@media screen and (max-width:1220px){
    #footer{
        padding: 16% 5% 2% 5%;
    }
}

@media screen and (max-width:1220px){
    #footer{
        padding: 16% 3% 2% 5%;
    }
}

@media screen and (max-width:1080px){
    #footer{
        padding: 16% 2% 2% 2%;
    }
}

@media screen and (max-width:992px){
    #footer{
        background-size: auto 55%;
    }
}

@media screen and (max-width:768px){
    #footer{
        background: url(../images/main/footer-mobile.png);
        background-size: 100% 100%;
        height: 210px;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width:767px){
    #footer{
        background: url(../images/main/footer-mobile.png);
        background-size: 100% 100%;
        height: 300px;
        background-repeat: no-repeat;
    }
}

#footer h2{
    font-size: 28px;
    font-size: 2.8rem;
    color: #fff;
    text-transform: none;
    margin-bottom: 5%;
}

@media screen and (max-width:768px){
    #footer h2{
        font-size: 2.4rem;
    }
}

@media screen and (max-width:767px) {
    #footer h2 {
        font-size: 2rem;
    }
}

#footer h3{
    font-size: 30px;
    font-size: 3rem;
    color: #fff;
    margin-top: 3%;
/*    font-family: 'Aleo Light';*/
    font-family: 'Ubuntu Light';
}

@media screen and (max-width:767px) {
    #footer h3 {
        font-size: 2.4rem;
    }
}

#footer h4{
/*    font-family: 'Helvetica';*/
    font-family: 'Source Sans Pro Regular';
    text-align: left;
    color: #fff;
    line-height: initial;
}

@media screen and (max-width:767px) {
    #footer h4 {
        font-size: 2rem;
    }
}

.bottom-col{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

@media screen and (max-width:768px){
    .bottom-col{
        position: relative;
    }
}

@media screen and (max-width:767px) {
    .bottom-col {
        margin-bottom: 7%;
    }
}

.bottom-nav{
    margin: 0 auto;
/*
    display: inline-table;
    table-layout: auto;
    float: none;
*/
    pointer-events: auto;
}


.bottom-nav li,
.bottom-nav a{
    font-size: 16px;
    font-size: 1.6rem;
    list-style: none;
    text-align: center;
    color: #fff;
}

.footer-line{
    margin-top: 4%;
    margin-bottom: 2%;
}

.bottom-nav>li{
/*
    display: table-cell;
    float: none;
*/
    width: 20%;
    display: inline-block;
    float: left;
    text-align: center;
    border-right: 1px solid #fff;
}

.bottom-nav>li:first-child {
    text-align: left;
}

.bottom-nav>li:last-child {
    border-right: none;
}

.bottom-col .fa-stack{
    pointer-events: auto;
}

.fa-stack{
}

.facebook{
    color: #507cbe;
}
.youtube{
    color: #f16261
}
.twitter{
    color: #63cdf1;
}
.instagram{
    color: #c7c5b3;
}

footer{
    position: absolute;
    width: 100%;
    height: auto;
    top: 100%;
    left: 0;
    padding: 8px 2%;
    background: #761a1e;
}

@media screen and (max-width:767px){
    footer{
        padding: 8px 0;
    }
}

footer p{
    margin-bottom: 0;
    font-size: 14px;
    color: #fff;
}

@media screen and (max-width:767px){
    footer p{
        font-size: 12px;
    }
}


#shop-now {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 999;
}

@media screen and (max-width:767px) {
    #shop-now {
        right: 8px;
        bottom: 8px;
    }
}
/*

#shop-now p {
    display: inline-block;
    font-size: 14px;
}

img.shop-now-logo {
    position: relative;
    display: inline-block;
    height: 40px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
*/


button.shop-now-button {
    position: relative;
    border-radius: 50%;
    background-color: #fff;
    padding: 15px;
/*    box-shadow: 8px 8px 41px -6px rgba(163,163,163,1);*/
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border: 2px solid #fff;
    -webkit-transition: border-color 0.3s ease, background-color 0.3s ease;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    z-index: 1;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    button.shop-now-button {
        padding: 13px;
    }
}


.shop-now-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #8c2529;
    color: #fff;
    text-align: center;
    line-height: 1;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.shop-now-inner span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

button.shop-now-button:hover .shop-now-inner,
button.shop-now-button.active .shop-now-inner {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


button.shop-now-button:focus {
    outline: none !important;
}

button.shop-now-button:hover,
button.shop-now-button.active {
    outline: none !important;
/*
    border-color: #fff;
    background-color: #8c2529;
*/
}

button.shop-now-button img,
button.shop-now-button svg{
    display: block;
    width: 30px;
}

@media screen and (max-width:767px) {
    button.shop-now-button img,
    button.shop-now-button svg{
        width: 25px;
    }
}

button.shop-now-button svg * {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

button.shop-now-button:hover svg *,
button.shop-now-button:active svg *,
button.shop-now-button.active svg * {
/*    fill: #fff;*/
}

.shop-option-container {
    position: absolute;
    right: 0;
    bottom: 80px;
    padding: 10px 5px;
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    pointer-events: none;
    border-radius: 10px;
}

img.shop-now-logo {
    display: block;
    height: 30px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(0) translate3d(0,0,0);
    transform: scale(0) translate3d(0,0,0);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

img.shop-now-logo.matahari {
    height: 27px;
}

.shop-option-container.active {
    background-color: #fff;
    pointer-events: auto;
}

.shop-option-container.active img.shop-now-logo {
    -webkit-transform: scale(1) translate3d(0,0,0);
    transform: scale(1) translate3d(0,0,0);
}

/**************************************************/
/*                  FOOTER END                   ;*/
/**************************************************/

/**************************************************/
/*                   ANIMATION                   ;*/
/**************************************************/
.revealOnScroll {
    opacity: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -8deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 4deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -4deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}


@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -8deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 4deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -4deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-1px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-1px,0);
  }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}


/**************************************************/
/*                 ANIMATION END                 ;*/
/**************************************************/

/**************************************************/
/*               UTILITY CLASSES                ;*/
/**************************************************/

@media screen and (max-width:767px){
    .no-padding-mobile{
        padding-left: 0;
        padding-right: 0;
    }

    .small-padding-mobile{
        padding-left: 5px;
        padding-right: 5px;
    }

    .margin-bottom-5-mobile{
        margin-bottom: 12%;
    }
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/main/overlay-texture.png");
    background-repeat: repeat;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.content-inside{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-position: center center;
    width: 100%;
}

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.vertical-center{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.v-center-element{
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.v-center-element-only{
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.v-center-40{
    position: absolute;
    width: 100%;
    top: 40%;
    -webkit-transform: translate(0,-40%);
    -ms-transform: translate(0,-40%);
    transform: translate(0,-40%);
}

.v-center{
    display: inline-block;
    vertical-align: middle;
    float: none !important;
}

@media screen and (max-width:768px){
    .v-center-mobile{
        display: inline-block;
        vertical-align: middle;
        float: none !important;
    }
}

.padding-top-2{
    padding-top: 2%;
}

.padding-bottom-2{
    padding-bottom: 2%;
}


.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20,
.col-xs-40,
.col-sm-40,
.col-md-40,
.col-lg-40,
.col-xs-45,
.col-sm-45,
.col-md-45,
.col-lg-45,
.col-xs-55,
.col-sm-55,
.col-md-55,
.col-lg-55,
.col-xs-60,
.col-sm-60,
.col-md-60,
.col-lg-60{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-20 {
    width: 20%;
    float: left;
}
.col-xs-40 {
    width: 40%;
    float: left;
}
.col-xs-45 {
    width: 45%;
    float: left;
}
.col-xs-55 {
    width: 55%;
    float: left;
}
.col-xs-60 {
    width: 60%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-20 {
        width: 20%;
        float: left;
    }
    .col-sm-40 {
        width: 40%;
        float: left;
    }
    .col-sm-45 {
        width: 45%;
        float: left;
    }
    .col-sm-55 {
        width: 55%;
        float: left;
    }
    .col-sm-60 {
        width: 60%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-20 {
        width: 20%;
        float: left;
    }
    .col-md-40 {
        width: 40%;
        float: left;
    }
    .col-md-45 {
        width: 45%;
        float: left;
    }
    .col-md-55 {
        width: 55%;
        float: left;
    }
    .col-md-60 {
        width: 60%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-20 {
        width: 20%;
        float: left;
    }
    .col-lg-40 {
        width: 40%;
        float: left;
    }
    .col-lg-45 {
        width: 45%;
        float: left;
    }
    .col-lg-55 {
        width: 55%;
        float: left;
    }
    .col-lg-60 {
        width: 60%;
        float: left;
    }
}

.remove-padding {
    padding-left: 0;
    padding-right: 0;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width:767px){
    .row-eq-height {
        display: block;
    }
}

.row-no-margin{
    margin-left:0;
    margin-right:0;
}

.no-margin{
    margin-top: 0;
}

.hidden{
    display: none;
}

.margin-right-2{
    margin-right: 2%;
}

.margin-top-1{
    margin-top: 1%;
}

.margin-top-2{
    margin-top: 2%;
}

.margin-top-3{
    margin-top: 3%;
}

.margin-top-4{
    margin-top: 4%;
}

.margin-top-5{
    margin-top: 5%;
}

.margin-top-6{
    margin-top: 6%;
}

.margin-top-7{
    margin-top: 7%;
}

.margin-top-10{
    margin-top: 10%;
}

@media screen and (max-width:767px) {
    .margin-top-10-mobile {
        margin-top: 10%;
    }
}

.margin-top-15{
    margin-top: 15%;
}


.margin-3{
    margin-top: 3%;
    margin-bottom: 3%;
}

.margin-bottom-2{
    margin-bottom: 2%;
}

.margin-bottom-3{
    margin-bottom: 3%;
}

@media screen and (max-width:768px){
    .margin-bottom-3{
        margin-bottom: 5%;
    }
}

.margin-bottom-5{
    margin-bottom: 5%;
}