@import url('https://fonts.googleapis.com/css?family=Alef:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
body {
    width: 100%; 
    font-family: 'Alef', sans-serif; 
    background: #fff;
    font-size:14px;
    color:#310E08;
}
html,body {
    width: 100%; 
    height: 100%;
}
.btn-coklat{
    background: #2f1b0d;
    color:#fff;
}
a{color:#310E08}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 15px 0 30px 0;
}
.container{max-width:1080px}
.navbar{
    background:#f6e3a8;
    border:none;
    margin-bottom:0;
    border-radius:0;
    border-bottom: 1px solid #fff
}
.navbar li a{
    color:#310E08!important;
}
.breadcrumbs{
    background: url('../images/breadcrumb.jpg')top center no-repeat;
    padding:120px 0 45px 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.breadcrumbs h1{
    color:#fff;
    margin: 0;
}
.contactus textarea,
.contactus input{
    box-shadow: none;
    border:1px solid #2F1B0D;
    border-radius: 0;
}
.introtext{
    position:absolute;
    top:120px;
    right:0;
}
.introtext h1{
    font-family: 'Gloria Hallelujah', cursive;
    font-weight:700;
    text-align:right;
    color:#773E21;
    font-size:46px
}
.introtext h1 small{ 
    color:#f8ce2e;

}
.section,
.produk{
    padding: 60px 0;  
}
.produk h1{
    margin: 0 0 15px 0;
}
.produk img{ 
    margin-bottom: 15px;
}
.relative{
    position:relative;
}
.intro { 
    width: 100%;
    height: 500px;   
    background: url('../images/intro-bg.jpg') no-repeat top center;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.nomargin{
    margin: 0;
}
.mt60{
    margin-top: 60px
}
.padtb60{
    padding: 60px 0;
}
.footer-home{
    padding:45px 0;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(246,227,168,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(246,227,168,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(246,227,168,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f6e3a8',GradientType=0 ); /* IE6-9 */
}
.footer-home h4{
    background: #F1B41E;
    display: inline-block;
    padding: 5px 15px;
    margin: 0 0 10px 0;
}

footer{
    background:#edd690;
    border-top: 1px solid #fff;
    padding:15px 0;
}
.tl{
    text-align:left;
}
.tr{
    text-align:right;
}
@media only screen and (max-width: 800px) {
    .intro { 
        width: 100%; 
        height: 350px;
        background: url('../images/800.jpg') no-repeat top center;  
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .tl,.tr{
        text-align:center;
    }
    .mmb15{
        margin-bottom: 15px;
    }
}
@media only screen and (max-width: 360px) {
    .intro { 
        width: 100%;
        height: 400px; 
        background: url('../images/360.jpg') no-repeat top center;  
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    } 
}