.desktop {
    display:block;    
}
.tablet {
    display:none;    
}
.mobile {
    display:none;    
}
/*
@media (max-width: 800px) {
    .desktop {
        display:none;    
    }
    .tablet {
        display:block;    
    }
    .mobile {
        display:none;    
    }
}
*/
@media (max-width: 480px) {
    .desktop {
        display:none;    
    }
    .tablet {
        display:none;    
    }
    .mobile {
        display:block;    
    }
}
#thank-you {
    height: 70vh;
    text-align: center;
    font-family: 'Uncial Antiqua', cursive;
    padding-top: 200px;
    color: #fff;
}
#thank-you h1{
    padding-top: 100px;
}
.header {
    height: 30px; 
    background: #FCD829;
    font-family: Verdana, Geneva, sans-serif;
}
.header i,
.header span
{
    font-size: 12px;
    color: #000;
}
.header .btn-secondary {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    padding: 0rem 0.75rem;
    font-size: 12px;
}
.header .btn-secondary:hover {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}

.header .btn-secondary:focus, 
.header .btn-secondary .focus {
  box-shadow: 0 0 0 0rem rgba(130, 138, 145, 0.5);
}
.header .btn-secondary .disabled, 
.header .btn-secondary:disabled {
  color: #000;
  background-color: transparent;
  border-color: transparent;
}

.header .btn-secondary:not(:disabled):not(.disabled):active, 
.header .btn-secondary:not(:disabled):not(.disabled).active,
.header .show > .btn-secondary.dropdown-toggle {
  color: #000;
  background-color: transparent;
  border-color: transparent;
}

.header .btn-secondary:not(:disabled):not(.disabled):active:focus, 
.header .btn-secondary:not(:disabled):not(.disabled).active:focus,
.header .show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0rem rgba(130, 138, 145, 0.5);
}
body{
    background-color:#000;  
    font-family: 'IM Fell English', serif;
}
#layout-header {
    position: absolute;
    top: 0;
    width:100%;
    z-index:3;
}
.nav-dark {
    background-color:transparent;    
}
.nav-link {
    display: block;
    padding: 2px 1.5rem;
    color:#fff;
    font-family: 'IM Fell English', serif;
}
.nav-link:hover, .nav-link:focus {
    text-decoration: none;
    color:#FCD829;
}
.kreasi-link {
    display: block;
    padding: 0px 1rem;
    font-family: 'IM Fell English', serif;
    border: 2px solid black;
    background-color: #FCD829;
    color: black;
    font-size: 1rem;
    cursor: pointer;
    outline: 2px solid #FCD829;
    margin-left:10px;
}
.kreasi-link:hover, .kreasi-link:focus {
    text-decoration: none;
    color:#000;
    background-color: #fff;
    outline: 2px solid #fff;
}
.produk-link {
    padding: 6px 1rem;
    font-family: 'IM Fell English', serif;
    border: 4px solid black;
    background-color: #fff;
    color: black;
    font-size: 1rem;
    cursor: pointer;
    outline: 2px solid #fff;
}
.produk-link:hover, .produk-link:focus {
  text-decoration: none;
  color:#000;
  background-color: #FCD829;
  outline: 2px solid #FCD829;
}
footer .produk-link {
    font-size:12px;    
}
.carousel-caption {
    position: absolute;
    right: 55%;
    top: 20%;
    left: 20%;
    z-index: 2;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: left;
}
.carousel-caption h1{
  font-size:3.5rem;
  font-family: 'Uncial Antiqua', cursive;
  color:#FCD829;
  text-transform: uppercase;
}
.carousel-caption p{
  font-size:1.5rem;
  font-family: 'IM Fell English', serif;
  padding-bottom:50px;
}
.about-caption {
  position: absolute;
  top: 80px;
  text-align: center;
  right:20%;
  left:20%;
}
.about-caption h3 {
  color:#B54418; 
  font-family: 'Uncial Antiqua', cursive;
  font-size:2rem;
}
.about-caption p {
  color:#000; 
  font-family: 'IM Fell English', serif;
  font-size:1rem;
}
.baris-1,
.baris-2,
.baris-3 {
    padding-top:100px;    
}
.caption-title {
    text-align:center;    
    font-family: 'Uncial Antiqua', cursive;
    color:#fff;
}
.caption-title h1 {
    color:#FCD829;
    font-size:2.1rem;
}
.caption-title h5 {
    color:#fff;
    font-size:1.2rem;
    font-family: 'IM Fell English', serif;
}
#produk {
  background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-about.png'); 
  background-repeat: no-repeat;
  padding-bottom: 70px;
  background-size: 100%;
}
#produk .caption-title h1{
  padding-top:100px;
  padding-bottom:50px;
}
.caption-carousel {
  color:#fff;
  font-family: 'IM Fell English', serif;
  padding: 25px 40px;
}
.caption-carousel h5{
  font-size:1rem;
}
/* end fix */
#produk .owl-nav > button {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}
#produk .owl-nav i {
  font-size: 52px;
}
#produk .owl-nav .owl-prev {
  left: -100px;
}
#produk .owl-nav .owl-next {
  right: -100px;
}
#produk .owl-dots {
  text-align: center;
  padding-top: 50px;
}
#produk .owl-dots button.owl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
#produk .owl-dots button.owl-dot.active {
  background-color: #FCD829;
}
#produk .owl-dots button.owl-dot:focus {
  outline: none;
}
#produk .control-left,
#produk .control-right {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(110deg) brightness(105%) contrast(103%);    
}
#produk .control-left:hover,
#produk .control-right:hover,
#produk .control-left:focus,
#produk .control-right:focus{
  filter: invert(64%) sepia(98%) saturate(750%) hue-rotate(3deg) brightness(109%) contrast(104%);  
}

#resep .owl-nav > button {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}
#resep .owl-nav i {
  font-size: 52px;
}
#resep .owl-nav .owl-prev {
  left: -100px;
}
#resep .owl-nav .owl-next {
  right: -100px;
}
#resep .owl-dots {
  text-align: center;
  padding-top: 50px;
}
#resep .owl-dots button.owl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
#resep .owl-dots button.owl-dot.active {
  background-color: #FCD829;
}
#resep .owl-dots button.owl-dot:focus {
  outline: none;
}
#resep .control-left,
#resep .control-right {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(110deg) brightness(105%) contrast(103%);    
}
#resep .control-left:hover,
#resep .control-right:hover,
#resep .control-left:focus,
#resep .control-right:focus{
  filter: invert(64%) sepia(98%) saturate(750%) hue-rotate(3deg) brightness(109%) contrast(104%);  
}

#produk-detail .owl-nav > button {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: transparent;
}
#produk-detail .owl-nav i {
  font-size: 52px;
}
#produk-detail .owl-nav .owl-prev {
  left: -70px;
}
#produk-detail .owl-nav .owl-next {
  right: -70px;
}
#produk-detail .owl-dots {
  text-align: center;
  padding-top: 50px;
}
#produk-detail .owl-dots button.owl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
#produk-detail .owl-dots button.owl-dot.active {
  background-color: #FCD829;
}
#produk-detail .owl-dots button.owl-dot:focus {
  outline: none;
}
#produk-detail .control-left,
#produk-detail .control-right {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(110deg) brightness(105%) contrast(103%);    
}
#produk-detail .control-left:hover,
#produk-detail .control-right:hover,
#produk-detail .control-left:focus,
#produk-detail .control-right:focus{
  filter: invert(64%) sepia(98%) saturate(750%) hue-rotate(3deg) brightness(109%) contrast(104%);  
}

#banner .control-left,
#banner .control-right {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(110deg) brightness(105%) contrast(103%);    
}
#banner .control-left:hover,
#banner .control-right:hover,
#banner .control-left:focus,
#banner .control-right:focus{
  filter: invert(64%) sepia(98%) saturate(750%) hue-rotate(3deg) brightness(109%) contrast(104%);  
}
#resep-page .control-left,
#resep-page .control-right {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(110deg) brightness(105%) contrast(103%);    
}
#resep-page .control-left:hover,
#resep-page .control-right:hover,
#resep-page .control-left:focus,
#resep-page .control-right:focus{
  filter: invert(64%) sepia(98%) saturate(750%) hue-rotate(3deg) brightness(109%) contrast(104%);  
}
.button-produk {
    text-align:center;
    padding-top:50px;
}
.caption-kota {
  color:#fff;
  font-family: 'IM Fell English', serif;
  padding-top:20px;
  font-size:0.9rem;
}
.caption-kota img{
  width:30px;
}
.caption-kota span{
  padding-left:10px;
}
#wa {
  background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/bg-wa.png'); 
  background-repeat: no-repeat;
  height: 120px;
  background-size: 100%;
}
.caption-wa {
  color:#B54418;
  font-family: 'IM Fell English', serif;
  text-align:center;
  padding-top: 30px;
}
.caption-wa h2{
  font-size:1.8rem;
}
.caption-wa i{
  font-size:2.8rem;
}
.no-wa{
  font-size:2.8rem;
}
.capt-wa{
  font-size:1.8rem;
}
#resep {
  background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/bg-resep.png'); 
  background-repeat: no-repeat;
  padding-bottom:100px;   
  background-size: 100%;
}
.item-resep {
    text-align:center;    
}
.caption-resep {
  color:#FCD829;
  font-family: 'IM Fell English', serif;
  padding-top: 25px;
  margin:0 25px;
}
.caption-resep h5{
  font-size:1.3rem;
}
.caption-resep a{
  color:#fff;
}
.caption-resep a:hover{
  color:#FCD829;
  text-decoration:none;
}
.caption-resep img{
  filter: invert(64%) sepia(98%) saturate(750%) hue-rotate(3deg) brightness(109%) contrast(104%);  
  width: 25px;
  margin-bottom: 5px;
}
#border {
    text-align:center;
}
#border .container {
    padding-right: 0;
    padding-left: 0;    
}
footer {
    font-family: 'IM Fell English', serif;
    color:#fff;
    padding-top:30px;
}
.menu-footer {
    list-style-type:none;
    padding-left:0;
    font-size:0.9rem;
}
.menu-footer a{
    color:#fff;
}
.menu-footer a:hover{
    color:#FCD829;
    text-decoration:none;
}
footer h5 {
    font-size:0.9rem;    
}
.footer-wa i{
    font-size:2.5rem; 
}
.caption-wa-footer {
    position:absolute;
    top: 23px;left: 57px;
}
.footer-wa:hover {
    color:#FCD829;
    cursor: pointer;
}
.footer-wa a {
    color:#fff;
    cursor: pointer;
}
.footer-wa a:hover {
    color:#FCD829;
    cursor: pointer;
}
.footer-wa .no-wa{
    font-size:1.5rem; 
}
.footer-wa .capt-wa{
    font-size:1rem; 
}
.btn-email {
  padding: 4px 0.8rem;
    font-family: 'IM Fell English', serif;
    border: 3px solid black;
    background-color: #fff;
    color: black;
    font-size: 0.8rem;
    cursor: pointer;
    outline: 3px solid #fff;
}
.btn-email:hover, .btn-email:focus {
  text-decoration: none;
  color:#000;
  background-color: #FCD829;
  outline: 2px solid #FCD829;
}
footer .form-control {
    background: transparent;
    border: none;
    border-bottom: 2px solid;   
    border-radius:0;
}
footer .form-control:focus {
    background: transparent;
    border: none;
    border-bottom: 1px solid; 
    color:#fff;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.25);
}
.copyright {
    text-align:center;
    padding-top:50px;
}
.control-banner {
    position: absolute;
    bottom: 20%;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 21%;
}
#banner .carousel-control-prev, 
#banner .carousel-control-next {
    text-align: center;
    opacity: 1;
    transition: opacity 0.15s ease;
}
#banner .carousel-control-prev:hover, 
#banner .carousel-control-prev:focus,
#banner .carousel-control-next:hover,
#banner .carousel-control-next:focus {
  text-decoration: none;
  outline: 0;
  opacity: 1;
}

.carousel-control-prev,
.carousel-control-next {
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-indicators {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 5%;
  margin-left: 5%;
  list-style: none;
  margin-bottom: 0;
}

.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

#banner .carousel-indicators li {
    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 1;
    transition: opacity 0.6s ease;
    border-radius: 50%;
}
#banner .carousel-indicators .active {
  background-color: #FCD829;
}
.atribute-1 {
    position: absolute;
    z-index: 1;
    margin-top: -131px;
    margin-left: 158px;
}
.atribute-1 img{
  width:500px;
}
.atribute-2 {
    position: absolute;
    z-index: 1;
    margin-top: -84px;
    margin-left: 471px;
}
.atribute-2 img{
  width:330px;
}
.atribute-3 {
    position: absolute;
    z-index: -1;
    margin-top: -338px;
    margin-left: -114px;
}
.atribute-3 img{
    width:250px;
}
.atribute-4 {
    position: absolute;
    z-index: -1;
    margin-top: -338px;
    margin-left: 355px;
}
.atribute-4 img{
  width:250px;
}
.atribute-5 {
    position: absolute;
    z-index: -1;
    margin-top: -338px;
    margin-left: -114px;
}
.atribute-5 img{
    width:250px;
}
#anim1 {
    width: 130px;
    height: 120px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -200px 0;
    position:absolute;
	z-index:1;
	top:17%;
	left:13%;
}
#anim2 {
    width: 130px;
    height: 140px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -200px -100px;
    position:absolute;
	z-index:1;
	top:50%;
	left:5%;
}
#anim3 {
    width: 130px;
    height: 140px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -200px -230px;
    position:absolute;
	z-index:1;
	top:70%;
	left:10%;
}
#anim4 {
    width: 130px;
    height: 140px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -200px -360px;
    position:absolute;
	z-index:1;
	top:15%;
	right:20%;
}
#anim5 {
    width: 130px;
    height: 140px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -200px -480px;
    position:absolute;
	z-index:1;
	top:22%;
	right:5%;
}
#anim6 {
    width: 130px;
    height: 140px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -180px -630px;
    position:absolute;
	z-index:1;
	top:50%;
	right:8%;
}
#anim7 {
    width: 130px;
    height: 140px;
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/animasi/sprite-anim.png') -200px -730px;
    position:absolute;
	z-index:1;
	top:70%;
	right:8%;
}
.title-tempat {
    padding-top: 165px;
}
.title-resep {
    padding-top: 95px;
}
.resep-list {
    padding-top: 80px;
}
#produk-page{
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-produk.jpg');   
    background-repeat: no-repeat;
    background-size: 100%;
}
#produk-page .caption-title{
    padding-top:15%;
    padding-bottom:5%;
}
.product-title-list {
    text-align:center;    
}
.product-img-list img {
    width:100%; 
    z-index:2;
    position:relative;
}
.atribute-produk-list {
    position:absolute;
    top: 0;
    left: 50px;
}
.atribute-produk-list img{
    width:90%;
    z-index:1;
}
.wa-produk-list {
    position: absolute;
    bottom:-100%;    
}
.footer-produk-list {
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-list.png');   
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:bottom;
}
.lokasi-produk-list {
    text-align: center;
    padding-bottom: 0;    
}
.lokasi-produk-list p{
    text-align: center;
    padding-bottom: 35px;  
    font-family: 'IM Fell English', serif;
    font-size: 2rem;
}
.lokasi-produk-list a{
    color:#FBD729;
}
.lokasi-produk-list a:hover{
    color:#FBD729;
}
.link-product-list {
    color:#FBD729;
    font-family: 'Uncial Antiqua', cursive;
}
.link-product-list:hover {
    color: #fff;
    text-decoration:none;
}
#sync1 .owl-dots,
#sync2 .owl-dots,
#sync3 .owl-dots{
    display:none;    
}
#syncmobile1 .owl-dots,
#syncmobile2 .owl-dots,
#syncmobile3 .owl-dots{
    display:none;    
}
#produk-detail {
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/bg-product-detail.png');   
    background-repeat: no-repeat;
    background-size: 100%;
    text-align:center;
    padding-bottom: 140px;
}
#produk-detail .container {
    padding-top:15%;    
}
.caption-product-detail {
    padding:0 15%;
}
.caption-product-detail h2 {
    color:#FBD729;
    font-family: 'Uncial Antiqua', cursive;
    padding-top:80px;
}
.caption-product-detail h3 {
    color:#fff;
    font-family: 'IM Fell English', serif;
    font-size:2rem;
}
.caption-product-detail h4 {
    color:#fff;
    font-family: 'IM Fell English', serif;
    font-size:1rem;
    padding-top:50px;
}
.caption-product-detail p {
    color:#fff;
    font-family: 'IM Fell English', serif;
}
.border-product-list img {
    position:relative;
    width:100%;
}
#loc-product-list {
    background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-lokasi-link.png');   
    background-repeat: no-repeat;
    background-size: 100%;
}
.caption-loc-link {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 27px;  
}
.caption-loc-link p{
    text-align: center;
    padding-bottom: 35px;  
    font-family: 'IM Fell English', serif;
    font-size: 2rem;
}
.caption-loc-link a{
    color:#FBD729;
}
.caption-loc-link a:hover{
    color:#FBD729;
}
.other-size h5 {
    font-family: 'IM Fell English', serif;
    color:#fff;
}
#sync1 img {
    display: inline;
    width: 80%;
}
#sync2 label {
    font-family: 'IM Fell English', serif;
    color:#fff;
    margin:0;
}
#syncmobile1 img {
    display: inline;
    width: 80%;
}
#syncmobile2 label {
    font-family: 'IM Fell English', serif;
    color:#fff;margin: 0;
}
.produk-home-link{
    color:#fff;    
    font-family: 'IM Fell English', serif;
}
.produk-home-link:hover {
    color:#FBD729;   
    text-decoration:none;
}
button.owl-dot {
    background:#fff;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
}
#lokasi-page {
    background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/bg_lokasi.jpg');   
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 5%;
}
#lokasi-page .caption-title {
    padding-top: 15%;
    padding-bottom: 5%;
}
#lokasi-page .caption-kota {
    color: #fff;
    font-family: 'IM Fell English', serif;
    font-size: 1.3rem;
}
#lokasi-page .caption-kota {
    color: #fff;
    font-family: 'IM Fell English', serif;
    font-size: 1.3rem;
}
#lokasi-page .caption-kota img {
    width: 45px;
}
.list-kota-detail {
    list-style-type: none;
    font-size: 0.8rem;
    padding-left: 58px;
    text-transform: uppercase;
    color: #fff;
    padding-top:20px;
    font-family: 'IM Fell English', serif;
}
#kontak-page {
    background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/bg-kontak.jpg');   
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 5%;
}
#kontak-page .container {
    padding-top: 15%;
    padding-bottom: 5%;  
}
#kontak-page .caption-title h1{
    font-size: 2rem;
    font-family: 'Uncial Antiqua', cursive;
    color: #FCD829;
    text-transform: uppercase;
    text-align:left ;
}
.form-kontak {
    padding-top:50px;
}
.form-kontak label {
    color: #fff;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
}
.form-kontak .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: transparent;
    background-clip: padding-box;
    border: none;
    border-bottom:1px solid #fcd829;
    border-radius: 0rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: 'IM Fell English', serif;
}
.form-kontak .form-control:focus {
  color: #fff;
  background-color: transparent;
  border-color: #fcd829;
  outline: 0;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.25);
}
.form-kontak .form-textarea {
    height:150px;    
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: transparent;
    background-clip: padding-box;
    border: none;
    border-bottom:1px solid #fcd829;
    border-radius: 0rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: 'IM Fell English', serif;
}
.button-kontak {
    text-align:right;
    padding-top:50px;
}
#produk .owl-carousel .owl-item img {
    display: block;
    width: 100%;
}
#resep .owl-carousel .owl-item .resep-home-img {
    display: block;
    width: 100%;
}
#produk-detail .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#resep-page .container {
    padding-top: 15%;
    padding-bottom: 5%;  
}
#resep-page {
    background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/bg-resep.jpg');   
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 5%;
}
#resep-page button.owl-dot {
    background: #fff;
    color: #fff;
    border: 1px solid;
    padding: 0 !important;
    font: inherit;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-right: 5px;
    text-align: center;
    position: relative;
}
#resep-page .owl-dots {
    text-align: center;
    margin-top: -30px;
}
#resep-page .owl-dots button.owl-dot.active {
    background-color: #FCD829;
}

#resep-page.owl-carousel .owl-item .img-resep {
    display: block;
    width: 100%;
}
#resep-page .owl-nav {
    text-align:center;
    padding-top: 80px;
}
#resep-page .owl-nav button{
    padding:0 145px;
}
#resep-page .caption-title {
    text-align: center;
    font-family: 'Uncial Antiqua', cursive;
    color: #fff;
    padding-bottom:30px;
}
#resep-page .carousel-wrap {
    text-align: center;
}
#resep-detail {
    background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/bg-resep-detail.jpg');   
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 5%;
}
#resep-detail .container {
    padding-top: 10%;
    padding-bottom: 5%;  
}
.img-resep-detail {
    width:90%;    
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari 3-8 */
    transform: rotate(-5deg);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.title-resep-detail {
    font-family: 'IM Fell English', serif;
    font-size:3rem;
    color:#fcd829;
    text-align:center;
    padding-top:50px;
}
.sub-title-resep-detail {
    font-family: 'IM Fell English', serif;
    font-size:2.5rem;
    color:#fcd829;
}
.bahan ul {
    list-style-type: none;
    color:#fff;
    font-family: 'IM Fell English', serif;
    font-size:1.2rem;
}
.resep-cara {
    padding-top:50px;
}
.resep-cara ul {
    color:#fff;
    font-family: 'IM Fell English', serif;
    font-size:1.3rem;
    padding-left:20px;
}
.resep-cara ol {
    color:#fff;
    font-family: 'IM Fell English', serif;
    font-size:1.3rem;
    padding-left:20px;
}
.sosmed i {
    font-size:20px;    
    padding-right:5px;
}
.sosmed a {
    color:#fff;
}
.sosmed a:hover,
.sosmed a:focus{
    color:#fcd829;
}
.sosmed img {
    width: 32px;
    margin-top: -10px;
    margin-left: -8px;
}
.copyright a{
    color:#fff;
}
.copyright a:hover,
.copyright a:focus{
    color:#fcd829;
}
.navbar-toggler {
    color: #fad728;
    padding: 0.25rem 0.75rem;
    font-size: 2rem;
    line-height: 1px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.mobile-banner img{
    width: 100%;
}
.mobile-banner {
    position: absolute;
    z-index: 1;
}
#border img {  
    width:100%;
}
.container-produk {
    padding-bottom: 300px;
}
.navbar-expand-lg .navbar-collapse {
    background-color:transparent;    
}
.bg-kontak-mobile img{
    width:100%;
    display:block;
}
.bg-kontak-mobile{
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top:50px;
}
@media (max-width: 375px) {
    #resep-page .owl-nav {
      display:none;
    }
    .caption-kota span {
        padding-left: 5px;
    }
    #resep-page .container {
        padding-top: 25%;
        padding-bottom: 5%;
    }
    #resep-detail {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/resep/bg-resep-detail-mobile.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 25%;
    }
    .title-resep-detail {
        font-size: 2rem;padding-bottom: 25px;
    }
    .sub-title-resep-detail {
        font-size: 1.5rem;
        padding-left: 20px;
    }
    .bahan ul {
        font-size: 1rem;padding-left: 22px;
    }
    .resep-cara ol {
        font-size: 1rem;
        padding-left: 35px;
    }
    #resep-page {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/resep/bg-resep-mobile.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 25%;
    }
    #resep-page .owl-nav {
        text-align: center;
        padding-top: 40px;
    }
    #resep-page .control-left, #resep-page .control-right {
        width:30px;
    }
    #resep-page .owl-dots {
        text-align: center;
        margin-top: 45px;
    }
    #kontak-page {
        background: none;
        padding-top: 55px;
    }
    #kontak-page .caption-title h1 {
        font-size: 1.2rem;
        text-align: center;
    }
    .list-kota-detail {
        font-size: 12px;
        padding-top: 15px;
        padding-left: 50px;
    }
    .caption-kota span {
        font-size: 13px;
    }
        #lokasi-page .caption-kota img {
        width: 35px;
    }
    #lokasi-page {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/bg-lokasi-mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
    #lokasi-page .caption-title {
        padding-top: 35%;
        padding-bottom: 5%;
    }
    #loc-product-list {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-list-mobile-loc.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .caption-loc-link {
        padding-top: 10px;
    }
    .caption-loc-link img {
        width: 40px;
    }
    .caption-loc-link p {
        padding-bottom: 0;
        font-size: 12px;margin-bottom: -5px;
    }
    .caption-loc-link .left {
        position: absolute;
        margin-top: 0px;
        left: 32px;
    }
    .caption-loc-link .right {
        position: absolute;
        margin-top: -25px;
        right: 32px;
    }
    #produk-detail .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .caption-product-detail h2 {
        padding-top: 38px;
        font-size: 1.5rem;
    }
    .caption-product-detail h3 {
        font-size: 1.2rem;
    }
    .caption-product-detail p {
        font-size: 13px;
    }
    .caption-product-detail h4 {
        font-size: 1rem;
        padding-top: 20px;
    }
    #produk-detail {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-list-mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        padding-bottom: 20px;
    }
    #syncmobile2 label {
        font-size: 13px;
    }
    .navbar-expand-lg .navbar-collapse {
        background-color:#000;    
        padding: 20px;
    }
    .nav-link {
    padding: 15px 1.5rem;
    }
    .navbar-brand {
        padding:15px;    
    }
    .lokasi-produk-list {
        padding-bottom: 16px; 
    }
    .lokasi-produk-list .left{
        position: absolute;
        margin-top: 0px;
        left: 32px;
    }
    .lokasi-produk-list .right{
        position: absolute;
        margin-top: -25px;
        right: 32px;
    }
    .lokasi-produk-list img{
        width:40px;
    }
    .lokasi-produk-list p {
        padding-bottom: 0;
        font-size: 12px;margin-bottom: -5px;
    }
    .container-produk {
        padding-bottom: 180px;
    }
    .atribute-produk-list {
        left: 42px;
    }
    #produk-page .caption-title {
        padding-top: 30%;
        padding-bottom: 5%;
    }
    #produk-page{
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-mobile-top.jpg');   
        background-repeat: no-repeat;
        background-size: 100%;
        padding-bottom: 20px;
    }
    .footer-produk-list {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
    
    }
    footer {
        padding-top: 0;
    }
    footer  .form-control {
        width: 65%;
    }
    footer h5 {
        padding-top: 10px;  
    }
    .footer {
        text-align:center;    
    }
    .footer-wa {
        text-align:left;  
    }
    .caption-wa-footer {
        left: 147px;
        top: 36px;
    }
    .footer-wa i {
    margin-left: 76px;
    }
    .carousel-caption {
        right: 15%;
        top: 15%;
        left: 15%;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .carousel-caption h1 {
        font-size: 1.7rem;
    }
    .produk-link {
        padding: 4px 1rem;
        border: 2px solid black;
        font-size: 0.8rem;
        outline: 2px solid #fff;  
    }
    .carousel-caption p {
        font-size: 1rem;
        padding-bottom: 4px;
    }
    #banner .control-left, #banner .control-right {
        width: 30px;
    }
    .control-banner {
        bottom: 42%;
        left: 36%;
    }
    .atribute-1 {
        display:none;    
    }
    .atribute-2 {
        display:none;    
    }
    .baris-1, .baris-2, .baris-3 {
        padding-top: 15px;
    }
    .about-caption {
        position: absolute;
        top: 45px;
        text-align: center;
        right: 15%;
        left: 15%;
    }
    .about-caption h3 {
        font-size: 1.4rem;
    }
    .about-caption p {
        font-size: 12px;
    }
    .navbar-nav {
        text-align: center;
    }
    #produk {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/banner/bg-produk-mobile.jpg');
            background-repeat: repeat;
            background-size: auto;
        background-repeat: no-repeat;
        padding-bottom: 70px;
        background-size: 100%;
    }
    #produk .owl-nav .owl-prev {
        left: 10px;
    }
    #produk .owl-nav .owl-next {
        right: 10px;
    }
    #produk .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    #produk .control-left, #produk .control-right {
        width: 35px;
    }
    #produk label {
        margin-bottom: 0rem;
        font-size: 17px;
    }
    #produk .owl-dots {
        display: none; 
    }
    #resep .owl-carousel .owl-item .resep-home-img {
        display: block;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    #resep .owl-nav .owl-prev {
        left: 10px;
    }
    #resep .owl-nav .owl-next {
        right: 10px;
    }
    #resep .owl-dots {
        display: none; 
    }
    #resep .control-left, #resep .control-right {
        width: 35px;
    }
    #produk-detail .owl-nav .owl-prev {
        left: 10px;
    }
    #produk-detail .owl-nav .owl-next {
        right: 10px;
    }
    #produk-detail .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    #produk-detail .control-left, #produk-detail .control-right {
        width: 35px;
    }
    #produk-detail label {
        margin-bottom: 0rem;
        font-size: 12px;
    }
    #produk-detail .owl-dots {
        display: none; 
    }
    .button-produk {
        text-align: center;
        padding-top: 15px;
    }
    .title-tempat {
        padding-top: 0;  
    }
    #produk .caption-title h1 {
        padding-bottom: 30px;
        font-size:1.5rem;
    }
    #wa {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/banner/bg-wa-mobile.jpg');
            background-repeat: repeat;
            background-size: auto;
        background-repeat: no-repeat;
        height: 120px;
        background-size: 100%;
    }
    .caption-wa {
        padding-top: 20px;
    }
    .caption-wa h2 {
        font-size: 1rem; 
    }
    .caption-wa i {
        font-size: 1.6rem; 
    }
    .no-wa {
        font-size: 1.6rem;  
    }
    .capt-wa {
        font-size: 1rem; 
    }
    .caption-title h1 {
        font-size: 1.5rem;
    }
    .title-resep {
        padding-top: 20px;  
    }
    .caption-resep h5 {
        font-size: 1rem;
    }
    #border .container {  
        padding-right: 15px;
        padding-left: 15px;  
    }
    #resep {
        background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/bg-resep.png');
            background-repeat: repeat;
            background-size: auto;
        background-repeat: no-repeat;
        padding-bottom: 25px;
        background-size: 100%;
    }
}

@media (min-width: 376px) and (max-width: 480px) {
    #resep-page .container {
        padding-top: 25%;
        padding-bottom: 5%;
    }
    #resep-detail {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/resep/bg-resep-detail-mobile.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 25%;
    }
    .title-resep-detail {
        font-size: 2rem;padding-bottom: 25px;
    }
    .sub-title-resep-detail {
        font-size: 1.5rem;
        padding-left: 20px;
    }
    .bahan ul {
        font-size: 1rem;padding-left: 22px;
    }
    .resep-cara ol {
        font-size: 1rem;
        padding-left: 35px;
    }
    #resep-page {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/resep/bg-resep-mobile.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 25%;
    }
    #resep-page .owl-nav {
        text-align: center;
        padding-top: 40px;
    }
    #resep-page .control-left, #resep-page .control-right {
        width:30px;
    }
    #resep-page .owl-dots {
        text-align: center;
        margin-top: 45px;
    }
    #kontak-page {
        background: none;
        padding-top: 55px;
    }
    #kontak-page .caption-title h1 {
        font-size: 1.2rem;
        text-align: center;
    }
    .list-kota-detail {
        font-size: 12px;
        padding-top: 15px;
        padding-left: 50px;
    }
    .caption-kota span {
        font-size: 16px;
    }
        #lokasi-page .caption-kota img {
        width: 35px;
    }
    #lokasi-page {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/bg-lokasi-mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
    #lokasi-page .caption-title {
        padding-top: 35%;
        padding-bottom: 5%;
    }
    #loc-product-list {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-list-mobile-loc.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .caption-loc-link {
        padding-top: 10px;
    }
    .caption-loc-link img {
        width: 40px;
    }
    .caption-loc-link p {
        padding-bottom: 0;
        font-size: 15px;margin-bottom: -5px;
    }
    .caption-loc-link .left {
        position: absolute;
        margin-top: 2px;
        left: 32px;
    }
    .caption-loc-link .right {
        position: absolute;
        margin-top: -30px;
    right: 32px;
    }
    #produk-detail .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .caption-product-detail h2 {
        padding-top: 38px;
        font-size: 1.5rem;
    }
    .caption-product-detail h3 {
        font-size: 1.2rem;
    }
    .caption-product-detail p {
        font-size: 13px;
    }
    .caption-product-detail h4 {
        font-size: 1rem;
        padding-top: 20px;
    }
    #produk-detail {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-list-mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        padding-bottom: 20px;
    }
    #syncmobile2 label {
        font-size: 13px;
    }
    .navbar-expand-lg .navbar-collapse {
        background-color:#000;    
        padding: 20px;
    }
    .nav-link {
    padding: 15px 1.5rem;
    }
    .navbar-brand {
        padding:15px;    
    }
    .lokasi-produk-list {
        padding-bottom: 15px; 
    }
    .lokasi-produk-list .left{
        position: absolute;
        margin-top: 2px;
        left: 32px;
    }
    .lokasi-produk-list .right{
        position: absolute;
        margin-top: -32px;
        right: 32px;
    }
    .lokasi-produk-list img{
        width:40px;
    }
    .lokasi-produk-list p {
        padding-bottom: 0;
        font-size: 15px;
        margin-bottom: -5px;
    }
    .container-produk {
        padding-bottom: 180px;
    }
    .atribute-produk-list {
        left: 67px;
    }
    #produk-page .caption-title {
        padding-top: 30%;
        padding-bottom: 5%;
    }
    #produk-page{
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-mobile-top.jpg');   
        background-repeat: no-repeat;
        background-size: 100%;
        padding-bottom: 20px;
    }
    .footer-produk-list {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/produk/bg-product-mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
    
    }
    footer {
        padding-top: 0;
    }
    footer  .form-control {
        width: 70%;
    }
    footer h5 {
        padding-top: 10px;  
    }
    .footer {
        text-align:center;    
    }
    .footer-wa {
        text-align:left;  
    }
    .caption-wa-footer {
        left: 147px;
        top: 36px;
    }
    .footer-wa i {
    margin-left: 76px;
    }
    .carousel-caption {
        right: 15%;
        top: 13%;
        left: 15%;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .carousel-caption h1 {
        font-size: 2rem;
    }
    .produk-link {
        padding: 4px 1rem;
        border: 2px solid black;
        font-size: 0.8rem;
        outline: 2px solid #fff;  
    }
    .carousel-caption p {
        font-size: 1rem;
        padding-bottom: 4px;
    }
    #banner .control-left, #banner .control-right {
        width: 30px;
    }
    .control-banner {
        bottom: 48%;
        left: 38%;
    }
    .atribute-1 {
        display:none;    
    }
    .atribute-2 {
        display:none;    
    }
    .baris-1, .baris-2, .baris-3 {
        padding-top: 15px;
    }
    .about-caption {
        position: absolute;
        top: 45px;
        text-align: center;
        right: 15%;
        left: 15%;
    }
    .about-caption h3 {
        font-size: 1.5rem;
    }
    .about-caption p {
        font-size: 14px;
    }
    .navbar-nav {
        text-align: center;
    }
    #produk {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/banner/bg-produk-mobile.jpg');
            background-repeat: repeat;
            background-size: auto;
        background-repeat: no-repeat;
        padding-bottom: 70px;
        background-size: 100%;
    }
    #produk .owl-nav .owl-prev {
        left: 10px;
    }
    #produk .owl-nav .owl-next {
        right: 10px;
    }
    #produk .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    #produk .control-left, #produk .control-right {
        width: 35px;
    }
    #produk label {
        margin-bottom: 0rem;
        font-size: 17px;
    }
    #produk .owl-dots {
        display: none; 
    }
    #resep .owl-carousel .owl-item .resep-home-img {
        display: block;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    #resep .owl-nav .owl-prev {
        left: 10px;
    }
    #resep .owl-nav .owl-next {
        right: 10px;
    }
    #resep .owl-dots {
        display: none; 
    }
    #resep .control-left, #resep .control-right {
        width: 35px;
    }
    #produk-detail .owl-nav .owl-prev {
        left: 10px;
    }
    #produk-detail .owl-nav .owl-next {
        right: 10px;
    }
    #produk-detail .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    #produk-detail .control-left, #produk-detail .control-right {
        width: 35px;
    }
    #produk-detail label {
        margin-bottom: 0rem;
        font-size: 14px;
    }
    #produk-detail .owl-dots {
        display: none; 
    }
    .button-produk {
        text-align: center;
        padding-top: 15px;
    }
    .title-tempat {
        padding-top: 0;  
    }
    #produk .caption-title h1 {
        padding-bottom: 30px;
        font-size:1.5rem;
    }
    #wa {
        background: url('http://demad.siamelephant.com/themes/demaderaascom/assets/image/banner/bg-wa-mobile.jpg');
            background-repeat: repeat;
            background-size: auto;
        background-repeat: no-repeat;
        height: 120px;
        background-size: 100%;
    }
    .caption-wa {
        padding-top: 23px;
    }
    .caption-wa h2 {
        font-size: 1rem; 
    }
    .caption-wa i {
        font-size: 1.6rem; 
    }
    .no-wa {
        font-size: 1.6rem;  
    }
    .capt-wa {
        font-size: 1rem; 
    }
    .caption-title h1 {
        font-size: 1.5rem;
    }
    .title-resep {
        padding-top: 20px;  
    }
    .caption-resep h5 {
        font-size: 1rem;
    }
    #border .container {  
        padding-right: 15px;
        padding-left: 15px;  
    }
    #resep {
        background: url('https://www.demad.siamelephant.com/themes/demaderaascom/assets/image/bg-resep.png');
            background-repeat: repeat;
            background-size: auto;
        background-repeat: no-repeat;
        padding-bottom: 25px;
        background-size: 100%;
    }
    #resep-page .owl-nav {
      display:none;
    }
}
@media (max-width: 800px) {
    .navbar-brand img{
        width:100px;    
    }
}
@media (min-width: 801px) and (max-width: 1366px) {
    .carousel-caption h1 {
        font-size: 3rem;
        font-family: 'Uncial Antiqua', cursive;
        color: #FCD829;
    }
    .carousel-caption p {
        font-size: 1.2rem;
        font-family: 'IM Fell English', serif;
        padding-bottom: 50px;
    }
    .title-tempat {
        padding-top: 30px;
    }
    .title-resep {
        padding-top: 35px;
    }
    .resep-list {
        padding-top: 30px;
    }
    .lokasi-produk-list {
        text-align: center;
        padding-bottom: 20px;
    }
}
@media (min-width: 1367px) and (max-width: 1440px) {
    .title-tempat {
        padding-top: 30px;
    }
    .carousel-caption h1 {
        font-size: 3rem;
        font-family: 'Uncial Antiqua', cursive;
        color: #FCD829;
    }
    .carousel-caption p {
        font-size: 1.2rem;
        font-family: 'IM Fell English', serif;
        padding-bottom: 50px;
    }
    .title-resep {
        padding-top: 35px;
    }
    .resep-list {
        padding-top: 30px;
    }
    .lokasi-produk-list {
        text-align: center;
        padding-bottom: 20px;
    }
}