@media (max-width: 1024px) {
    .menus-cust a {
        font-size: 10px;
    }
    .jenishewan .list-bottom .harga-hewan h2 {
        font-size: 15px;
    }
    .katamereka .katamereka-list .km-img {
        min-height: 170px;
    }
    .katamereka .katamereka-list .km-img .km-img-bg {
        height: 80px;
    }
    .katamereka .katamereka-list .km-ket .km-desc {
        line-height: 1.5;
        font-size: 10px;
    }
    .katamereka .katamereka-list .km-ket .km-nama {
        font-size: 12px;
    }
    .katamereka .katamereka-list .km-ket .km-posisi {
        font-size: 9px;
        color: #848484;
    }
}

@media (min-width: 800px) {
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 17px;
    }
    .jenishewan .list-bottom a {
        font-size: 10px;
    }
    #vmap {
        height: 300px;
    }
    .sm-fixed-top {
        top: -104px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 25px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        font-size: 9px;
    }
    .btn-q a {
        font-size: 7px;
    }
    .harga-aqiqah h2 {
        font-size: 30px;
    }
    .harga-aqiqah h1 {
        font-size: 50px;
    }
}

@media (min-width: 769px) {
    .cont-peta {
        padding-top: 20px;
    }
    .carts-item .carts-list .carts-attr .carts-attr-produk,
    .carts-attr-kelas,
    .carts-item .carts-list .carts-attr .carts-attr-harga,
    .carts-item .carts-list .carts-attr .carts-attr-total {
        margin-top: 10px;
    }
    .carts-item .carts-list {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .onlyhp {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    /*KATA MEREKA*/
    .katamereka .col-md-3 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .katamereka .katamereka-list .km-img {
        min-height: 173px;
    }
    .katamereka .katamereka-list .km-img .km-img-bg {
        height: 70px;
    }
    .katamereka .katamereka-list .km-ket .km-nama {
        font-size: 12px;
    }
    .katamereka .katamereka-list .km-ket .km-posisi {
        font-size: 9px;
    }
    .katamereka .katamereka-list .km-ket .km-desc {
        font-size: 8px;
    }
    .pilihanqurban .list-program .desc-program h3 {
        font-size: 15px;
    }
    .carts-item .carts-list .carts-attr .carts-attr-produk,
    .carts-item .carts-list .carts-attr .carts-attr-harga,
    .carts-item .carts-list .carts-attr .carts-attr-total,
    .prc {
        margin-top: 10px;
        text-align: center;
    }
    .invoice {
        padding: 0;
    }
    .content-invoice {
        padding: 15px;
    }
    .img-cart img {
        width: 140px;
    }
    .content-invoice .content-invoice-title,
    .content-invoice .totalharga,
    .content-invoice .catataninvoice,
    .content-invoice .penotalan,
    .content-invoice .divac {
        font-size: 13px;
    }
    .content-invoice .invoice-account tr {
        font-size: 11px;
    }
}


/* Medium devices (tablets, 768px and up)*/

@media (min-width: 769px) and (max-width: 1024px) {
    .pilihanqurban .list-program .desc-program h3 {
        font-size: 15px;
    }
    .cont-peta {
        padding-top: 20px;
    }
    .title-content .title.title-peta {
        font-size: 24px;
    }
    .container-cust {
        padding-left: 50px;
        padding-right: 50px;
    }
    .jenishewan .list-bottom span {
        font-size: 11px;
    }
    .jenishewan .list-bottom,
    .jenishewan .list-top {
        height: 155px;
    }
    .jenishewan .list-top img {
        margin-top: 0px;
    }
    .logo-skema img {
        width: 35px;
    }
    .list-skema .desc-skema {
        font-size: 11px;
        height: 55px;
    }
    .peta-list .subs .huruf {
        font-size: 20px;
    }
    .peta-list h4 {
        font-size: 18px;
    }
    .peta-list .subs .totalqurban {
        font-size: 40px;
    }
    .list-skema .title-skema {
        font-size: 12px;
    }
    .list-skema .desc-skema {
        font-size: 7px;
        height: 50px;
    }
    .video-qurban h1 {
        font-size: 50px;
    }
    .video-qurban img {
        width: 300px;
    }
    .video-qurban h1 {
        font-size: 50px;
    }
    .video-qurban iframe {
        width: 498px;
        height: 280px;
    }
    .video-qurban a {
        font-size: 13px;
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi {
        max-height: 130px;
    }
    .untuksiapa p {
        font-size: 15px;
    }
    .rekomendasi .rekomendasi-list .title-rekomendasi h5 {
        font-size: 10px;
    }
}

@media (min-width: 769px) {
    .onlyhp {
        display: none;
    }
}

@media (max-width: 800px) {
    .jenishewan .list-top h3 {
        height: 70px;
    }
    .jenishewan .list-top img {
        width: 110px;
    }
}


/*Small devices (landscape phones, 576px and up)*/

@media (max-width: 768px) {
    .jenishewan .list-top h3 {
        height: 80px;
    }
    .jenishewan .list-top img {
        margin-top: 0px;
        width: 130px;
    }
    [class^='imghvr-'] h5,
    [class*=' imghvr-'] h5 {
        font-size: 9px;
    }
    .video-qurban h3 {
        font-size: 15px;
    }
    .jenishewan .list-bottom a {
        font-size: 9px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        font-size: 9px;
    }
    .nav-search-box {
        display: none;
    }
    .sm-fixed-top {
        top: -58px;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 11px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 20px;
    }
    .kelas-hewan .listkelas {
        padding: 7px 10px;
        font-size: 8px;
    }
    .peta-list .subs img {
        margin-bottom: 0;
    }
    .peta-list {
        margin-top: 15px;
    }
    #vmap {
        height: 290px;
    }
    /*PAGE TRANSACTION NOTIF*/
    .transaction {
        padding: 20px 100px;
    }
    .transaction .divtransaction {
        padding: 90px 35px 30px;
        border: 1px solid #ffbc00;
    }
    .transaction .divtransaction .emoticon-transaction {
        margin-top: -4em;
    }
    .transaction .divtransaction .emoticon-transaction img {
        width: 110px;
    }
    .transaction .divtransaction .desc {
        padding: 20px;
    }
    .transaction .divtransaction .desc h3 {
        font-size: 20px;
    }
    .transaction .divtransaction .desc p {
        font-size: 10px;
    }
    .btn-transaction {
        font-size: 10px;
    }
    /*page invoice*/
    .invoice {
        padding: 10px 10px 80px;
    }
    .cards-header {
        display: none;
    }
    .panduanbayar {
        padding: 10px;
        border-radius: 5px;
    }
    .panduanbayar .title {
        font-size: 10px;
    }
    .panduanbayar .desc {
        font-size: 8px;
    }
    .container-checkbox {
        padding-left: 20px;
        font-size: 9px;
    }
    .checkmark {
        height: 15px;
        width: 15px;
    }
    .container-checkbox .checkmark:after {
        left: 5px;
        top: 3px;
        width: 5px;
    }
    .btn-checkout a {
        width: 180px;
        margin-bottom: 5px;
        font-size: 11px;
    }
    .rowqurban .col-4:first-child {
        padding-left: 15px;
    }
    .rowqurban .col-4:last-child {
        padding-right: 15px;
    }
    .rowqurbansyam .col-6:first-child,
    .rowqurbanyaman .col-6:first-child {
        padding-left: 15px;
    }
    .rowqurbansyam .col-6:last-child,
    .rowqurbanyaman .col-6:last-child {
        padding-right: 15px;
    }
    .rowqurbansyam .col-6,
    .rowqurbanyaman .col-6 {
        padding-left: 2px;
        padding-right: 2px;
    }
    .video-qurban {
        text-align: center;
    }
    .video-qurban {
        padding: 30px 30px 30px 40px;
    }
    .aqiqah {
        margin: 15px;
    }
    .sm-fixed-top {
        top: -73px;
    }
    .logo-bar-area {
        box-shadow: none;
    }
    .logo-bar-area.sm-fixed-top {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    .container-cust {
        padding-left: unset;
        padding-right: unset;
    }
    .container-cust .col-lg-4 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .title-content .title.title-peta {
        font-size: 20px;
    }
    .peta-list .subs {
        font-size: 15px;
    }
    .peta-list h4 {
        font-size: 13px;
    }
    .peta-list .subs .totalqurban {
        font-size: 25px;
    }
    .list-skema .title-skema {
        font-size: 12px;
    }
    .list-skema .desc-skema {
        font-size: 8px;
        height: 45px;
    }
    .container.skema {
        padding-right: 15px;
        padding-left: 15px;
    }
    .list-skema {
        border-radius: 10px
    }
    .list-skema .logo-skema img {
        width: 50px;
    }
    .sk img {
        width: 170px;
    }
    .video-qurban h1 {
        font-size: 35px;
    }
    .video-qurban img {
        width: 195px;
    }
    .video-qurban iframe {
        width: 390px;
        height: 220px;
    }
    .video-qurban a {
        font-size: 10px;
        display: inline-block;
    }
    .title-untuksiapa {
        font-size: 40px;
    }
    .untuksiapa p {
        font-size: 11px;
        line-height: 1.2;
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi {
        max-height: 98px;
    }
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
    .title-content .title.title-mitra {
        font-size: 30px;
    }
    .colp {
        padding-left: 5px;
        padding-right: 5px;
    }
    .col {
        padding: 0;
    }
    .logo-bar-area {
        padding-top: 5px;
    }
    .logo-bar-area .navbar-brand img {
        height: 35px;
    }
    .menus-cust {
        display: none;
    }
    .rekomendasi .rekomendasi-list .title-rekomendasi h5 {
        font-size: 10px;
    }
}

@media (max-width: 767px) {
    .carts-item .carts-list {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .carts-item .carts-list .carts-img {
        width: 25%;
    }
    .carts-item .carts-list .carts-img img {
        width: 100%;
    }
    .carts-item .carts-list .carts-attr {
        width: 75%;
        display: grid;
        padding-left: 10px;
    }
    .carts-item .carts-list .carts-attr .carts-attr-desc {
        width: 100%;
        display: -webkit-box;
    }
    .prc {
        width: 50%;
        display: block;
    }
    .carts-item .carts-list .carts-attr .carts-attr-produk {
        width: 100%;
    }
    .carts-item .carts-list .carts-attr .carts-attr-harga {
        width: 100%;
    }
    .carts-item .carts-list .carts-attr .carts-attr-kuantitas {
        width: 100%;
    }
    .carts-item .carts-list .carts-attr .carts-attr-total {
        width: 50%;
        text-align: center;
        justify-content: center;
    }
    .carts-item .carts-list .carts-attr .carts-attr-total span {
        padding: 10px;
        background-color: #828282;
        color: white;
    }
    .carts-item .carts-list .carts-an {
        width: 100%;
        margin-top: 10px;
    }
    .carts-item .carts-list .carts-img,
    .carts-item .carts-list .carts-attr .carts-attr-produk,
    .carts-item .carts-list .carts-attr .carts-attr-harga {
        justify-content: left;
    }
    .input-group--style-2 .input-group-btn>.btn {
        padding-top: 0.4875rem;
        padding-bottom: 0.4875rem;
    }
    .jmlkuantitas {
        padding: .275rem .75rem;
        line-height: 0;
    }
    .form_an span {
        font-size: 8px;
    }
    .carts-item {
        width: 100%;
        display: flex;
        padding: 5px;
        box-shadow: 2px 2px 8px -3px #2b2b2b;
        border-radius: 5px;
    }
}

@media (max-width: 600px) {
    [class^='imghvr-'] figcaption,
    [class*=' imghvr-'] figcaption {
        padding: 5px 20px;
    }
    [class^='imghvr-'] figcaption p {
        font-size: 0.6325rem;
    }
    .jenishewan .list-bottom a {
        font-size: 8px;
        padding: 11px 15px;
    }
    .jenishewan .list-bottom,
    .jenishewan .list-top {
        height: 155px;
    }
    .jenishewan .list-top img {
        width: 100px;
        margin-top: 0px;
    }
    .jenishewan .list-bottom {
        padding: 15px 10px 0 10px;
    }
    .skema .col-lg-2 {
        margin-bottom: 10px;
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi {
        max-height: 155px;
    }
    .title-content .title.title-mitra {
        font-size: 25px;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 16px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 23px;
    }
    .katamereka .katamereka-list .km-img {
        min-height: 290px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        font-size: 9px;
    }
    .harga-aqiqah h2 {
        font-size: 30px
    }
    .harga-aqiqah h1 {
        font-size: 40px
    }
    .harga-aqiqah span {
        font-size: 10px;
    }
    .btn-q a {
        font-size: 9px;
    }
    .title-content .title.title-peta {
        font-size: 19px;
        padding: 0px 60px 0 60px;
    }
    .peta-list {
        margin-top: 10px;
        padding-left: 15px;
    }
    .peta-list h4 {
        font-size: 17px;
    }
    .peta-list .subs {
        font-size: 25px;
    }
    .peta-list .subs .totalqurban {
        font-size: 35px;
    }
    .peta-list .subs img {
        width: 45px;
    }
    .onlymob {
        display: block;
    }
    .onlyweb {
        display: none;
    }
    /*page transaction notif */
    .transaction {
        padding: 10px 64px;
    }
    .transaction .head-invoice-arrow i {
        font-size: 30px;
    }
    .transaction .divtransaction {
        padding: 55px 35px 30px;
    }
    .transaction .divtransaction .emoticon-transaction img {
        width: 85px;
    }
    .transaction .divtransaction .emoticon-transaction {
        margin-top: -3.5em;
        margin-left: -3em;
    }
    .transaction .divtransaction .desc h3 {
        font-size: 18px;
    }
    .transaction .divtransaction .desc {
        padding: 15px;
        padding-bottom: 0 !important;
    }
    .recomendasi-transaction .col-lg-3 {
        padding-left: 2px;
        padding-right: 2px;
    }
    /*page detail-product*/
    .rekomendasi .rekomendasi-list .title-rekomendasi h5 {
        font-size: 7px;
        font-family: 'Montserrat SemiBold';
    }
    .sm-fixed-top {
        top: -57px;
    }
    .pilihanqurban .list-program .desc-program h3 {
        font-size: 10px;
    }
    .list-skema .title-skema {
        font-size: 15px;
    }
    .list-skema .desc-skema {
        height: 35px;
    }
    .list-skema .logo-skema img {
        width: 62px;
    }
    .video-qurban {
        border-radius: 30px;
    }
    .video-qurban h1 {
        font-size: 30px;
    }
    .video-qurban img {
        width: 165px;
    }
    .title-untuksiapa {
        font-size: 30px;
    }
    .video-qurban h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .video-qurban a {
        font-size: 9px;
        padding: 15px;
    }
    .rekomendasi .col-3:first-child {
        padding-left: 15px;
    }
    .rekomendasi .col-3:last-child {
        padding-right: 15px;
    }
    .rekomendasi .col-3 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .rekomendasi .rekomendasi-list .title-rekomendasi {
        width: 100%;
    }
    .rekomendasi .rekomendasi-list .img-rekomendasi {
        width: 100%;
    }
    .rekomendasi .rekomendasi-list .img-rekomendasi img {
        width: 53px;
    }
}

@media (max-width: 480px) {
    [class^='imghvr-'] figcaption h1,
    [class^='imghvr-'] figcaption h2,
    [class^='imghvr-'] figcaption h3,
    [class^='imghvr-'] figcaption h4,
    [class^='imghvr-'] figcaption h5,
    [class^='imghvr-'] figcaption h6,
    [class*=' imghvr-'] figcaption h1,
    [class*=' imghvr-'] figcaption h2,
    [class*=' imghvr-'] figcaption h3,
    [class*=' imghvr-'] figcaption h4,
    [class*=' imghvr-'] figcaption h5,
    [class*=' imghvr-'] figcaption h6 {
        display: none;
    }
    [class^='imghvr-'] figcaption p {
        line-height: 0.8rem;
        font-size: 0.5000rem;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 9px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 20px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        font-size: 7px;
    }
    .katamereka .katamereka-list .km-img {
        min-height: 250px;
    }
}

@media (max-width: 414px) {
    .jenishewan .list-top h3 {
        font-size: 17px;
        padding: 10px 10px 5px;
        height: 50px;
    }
    .katamereka .katamereka-list .km-img {
        min-height: 195px;
    }
    .container-cust .col-lg-4 {
        padding-left: 2px;
        padding-right: 2px;
    }
    /*page transaction notif*/
    .transaction {
        padding: 10px 0px;
    }
    .transaction .head-invoice-arrow i {
        font-size: 25px;
    }
    .transaction .divtransaction {
        padding: 40px 35px 20px;
    }
    .transaction .divtransaction .desc h3 {
        font-size: 15px;
    }
    .transaction .divtransaction .desc p {
        font-size: 9px;
        line-height: 1.7;
    }
    .content-invoice {
        padding: 10px;
        font-size: 10px;
    }
    .content-invoice .content-invoice-title,
    .content-invoice .totalharga,
    .content-invoice .catataninvoice,
    .content-invoice .penotalan,
    .content-invoice .divac {
        font-size: 10px;
        padding-left: 1em;
    }
    .img-cart img {
        width: 80px;
    }
    .content-invoice .invoice-account tr {
        font-size: 7px;
    }
    .logo-bar-area .navbar-brand img {
        max-height: 40px;
    }
    .menus-cust {
        display: none;
    }
    .title-content .title {
        font-size: 15px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .title-content {
        padding: 0;
    }
    .jenishewan .list-top img {
        width: 70px;
        margin-top: -5px;
    }
    .jenishewan .list-bottom span {
        line-height: 1.5;
        font-size: 9px;
    }
    .jenishewan .list-bottom a {
        padding: 7px 5px;
        font-size: 6px;
    }
    .container-cust .col-lg-4 {
        padding-left: 2px;
        padding-right: 2px;
    }
    .jenishewan .list-bottom .harga-hewan h2 {
        font-weight: 700;
        /*font-size: 20px;*/
        font-size: 15px;
    }
    .jenishewan .list-bottom span {
        display: flow-root;
        font-size: 11px;
    }
    .jenishewan .list-bottom {
        padding: 15px 10px 0 10px;
    }
    .btn-q {
        margin-top: 5px;
    }
    .harga-aqiqah h2 {
        font-size: 20px;
    }
    .harga-aqiqah h1 {
        font-size: 30px;
        margin-bottom: 0;
    }
    .harga-aqiqah span {
        font-size: 13px;
    }
    .btn-q a {
        font-size: 8px;
        padding: 10px 15px;
    }
    .title-content .title.title-peta {
        padding: unset;
    }
    .peta-list .subs .huruf {
        font-size: 20px;
    }
    .peta-list {
        margin-top: 0;
        margin-bottom: 15px;
    }
    .peta-list h4 {
        font-size: 16px;
    }
    .peta-list .subs {
        font-size: 30px;
    }
    .peta-list .subs img {
        width: 32px;
    }
    .peta-list .subs .totalqurban {
        font-size: 35px;
    }
    .cont-peta {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: white;
    }
    .list-skema {
        margin-bottom: 5px;
    }
    .list-skema .desc-skema {
        height: 30px;
        padding: 5px;
    }
    .list-skema .logo-skema img {
        width: 40px;
    }
    .list-skema .title-skema {
        margin-top: 10px;
        font-size: 13px;
    }
    .sk {
        margin-top: 1em;
        margin-bottom: 2em;
    }
    .sk img {
        width: 110px;
    }
    .video-qurban {
        border-radius: 20px;
    }
    .video-qurban h1 {
        font-size: 25px;
    }
    .video-qurban img {
        display: none;
    }
    .video-qurban iframe {
        width: 272px;
        height: 149px;
    }
    .rowmore {
        margin-top: 14px;
    }
    .video-qurban h3 {
        font-size: 13px;
    }
    .video-qurban a {
        font-size: 10px;
        padding: 10px;
        margin-right: 20px;
    }
    .dokumentasi .desc-dokumentasi {
        padding: 10px;
    }
    .dokumentasi .desc-dokumentasi p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .title-content .title.title-mitra {
        font-size: 18px;
    }
    .footer ul.footer-cust {
        line-height: 0.4;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 12px;
        margin-bottom: 0;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 18px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        padding: 8px 10px;
        font-size: 6px;
    }
    .aqiqah {
        margin: 15px 0;
        padding: 15px;
    }
    .pilihanqurban .list-program .desc-program h3 {
        font-size: 9px;
        padding: 10px;
    }
    .pilihanqurban .list-program .desc-program {
        padding: 10px;
    }
    .rekomendasi .rekomendasi-list {
        padding: 5px;
        display: block;
    }
    .rekomendasi .rekomendasi-list .title-rekomendasi h5 {
        font-size: 7px;
        height: 20px;
        margin-bottom: 5px;
        font-family: "Montserrat SemiBold";
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi {
        max-height: 120px;
        min-height: 120px;
    }
    .dokumentasi .col-lg-3 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .jenishewan .list-bottom {
        padding: 10px 10px 0 10px;
    }
    .jenishewan .list-bottom span {
        font-size: 9px;
    }
    .jenishewan .list-bottom,
    .jenishewan .list-top {
        height: 100px;
    }
}

@media (max-width: 390px) {
    .kelas-hewan .listkelas {
        font-size: 6px;
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi {
        max-height: 95px;
        min-height: 95px;
    }
    .list-skema .title-skema {
        font-size: 13px;
    }
    .list-skema .title-skema {
        font-size: 11px;
    }
    .list-skema .desc-skema {
        font-size: 7px;
    }
    #vmap {
        height: 250px;
    }
    /*page transaction notif*/
    .transaction .divtransaction .desc h3 {
        font-size: 13px;
    }
    .transaction .divtransaction .desc p {
        font-size: 8px;
    }
    .head-invoice-title h4 {
        font-size: 13px;
        font-family: "Montserrat SemiBold";
    }
    .head-invoice .head-invoice-arrow i {
        font-size: 20px;
    }
    .invoice {
        padding: 10px 0px 80px;
    }
    .pilihanqurban .list-program .desc-program h3 {
        font-size: 8px;
    }
    .jenishewan .list-top h3 {
        font-size: 13px;
        padding: 15px 15px 5px 15px;
    }
    .jenishewan .list-top h3 {
        height: 50px;
    }
    .jenishewan .list-top img {
        width: 60px;
    }
    .qurbansyam .rowsyam .col-lg-5 {
        padding: 0;
    }
    .qurbansyam .rowsyam .col-lg-7 {
        padding: 0;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 13px;
        margin-bottom: 2px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        /*font-size: 18px;*/
        font-size: 15px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        padding: 6px 10px;
        font-size: 6px;
    }
    .aqiqah {
        margin: 15px 0;
    }
    .harga-aqiqah h2 {
        font-size: 15px;
    }
    .harga-aqiqah h1 {
        font-size: 26px;
        margin-bottom: 0;
    }
    .harga-aqiqah span {
        font-size: 10px;
    }
    .btn-q {
        margin-top: 2px;
    }
    .btn-q a {
        font-size: 7px;
        padding: 6px 10px;
    }
    .btn-more {
        margin-top: 1.5em;
    }
    .btn-more a {
        padding: 8px 15px;
        font-size: 12px;
    }
    .rekomendasi .rekomendasi-list {
        padding: 5px;
        display: block;
    }
    .rekomendasi .rekomendasi-list .title-rekomendasi h5 {
        font-size: 6px;
        height: 20px;
        margin-bottom: 5px;
        font-family: "Montserrat SemiBold";
    }
}

@media (max-width: 330px) {
    .jenishewan .list-top h3 {
        height: 38px;
        padding: 5px 15px 5px 15px;
    }
    [class^='imghvr-'] figcaption p {
        line-height: 0.7rem;
        font-size: 0.4500rem;
    }
    .kelas-hewan .listkelas {
        font-size: 6px;
    }
    .video-qurban iframe {
        width: 100%;
        height: auto;
    }
    .katamereka .katamereka-list .km-ket .km-nama {
        font-size: 9px;
    }
    .katamereka .katamereka-list .km-ket .km-posisi {
        font-size: 7px;
    }
    .katamereka .katamereka-list .km-ket .km-desc {
        font-size: 7px;
    }
    .title-content .title.title-peta {
        font-size: 14px;
    }
    .list-skema .title-skema {
        font-size: 8px;
    }
    .katamereka .katamereka-list .km-img {
        min-height: 150px;
    }
    .video-qurban {
        border-radius: 10px;
    }
    .peta-list .subs .totalqurban {
        font-size: 30px;
    }
    #vmap {
        height: 200px;
    }
    /*page transaction notive*/
    .transaction .head-invoice-arrow {
        margin-left: 1em;
    }
    .transaction .divtransaction {
        padding: 25px 25px 20px;
    }
    .transaction .divtransaction .emoticon-transaction {
        margin-top: -3.5em;
        margin-left: -2.5em;
    }
    .transaction .divtransaction .emoticon-transaction img {
        width: 70px;
    }
    .transaction .divtransaction .desc {
        padding: 10px;
    }
    .transaction .divtransaction .desc h3 {
        font-size: 10px;
    }
    .transaction .divtransaction .desc p {
        font-size: 7px;
    }
    .content-invoice .content-invoice-title,
    .content-invoice .totalharga,
    .content-invoice .catataninvoice,
    .content-invoice .penotalan,
    .content-invoice .divac {
        font-size: 7px;
        padding-left: 1em;
    }
    .content-invoice .invoice-account tr {
        font-size: 6px;
    }
    .img-cart img {
        width: 60px;
    }
    .lines {
        height: 1px;
    }
    .content-invoice .divac .invoice-account {
        width: 75%;
    }
    .img-cart {
        width: 25%;
    }
    .pilihanqurban .list-program .desc-program h3 {
        font-size: 6px;
    }
    .jenishewan .list-bottom,
    .jenishewan .list-top {
        height: 80px;
    }
    .jenishewan .list-top img {
        width: 53px;
    }
    .jenishewan .list-bottom {
        padding: 10px 5px 0 5px;
    }
    .jenishewan .list-bottom .harga-hewan h2 {
        font-size: 13px;
    }
    .jenishewan .list-bottom span {
        font-size: 6px;
    }
    .jenishewan .list-bottom a {
        padding: 5px 5px;
        font-size: 5px;
    }
    .qurbansyam {
        padding: 15px;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 10px;
        margin-bottom: unset;
        padding: 0 5px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 14px;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        font-size: 5px;
    }
}

@media (max-width: 250px) {
    [class^='imghvr-'] figcaption p {
        line-height: 0.5rem;
        font-size: 0.3700rem;
    }
    .buy-now-cust {
        font-size: 7px;
        padding: 5px 10px;
    }
    .product-description-wrapper .product-description-label,
    .product-description-wrapper .avialable-amount {
        font-size: 8px;
    }
    .kelas-hewan .listkelas {
        font-size: 5px;
        padding: 4px 4px;
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi img {
        border-radius: 10px 10px 0 0;
    }
    .dokumentasi .list-dokumentasi {
        border-radius: 10px;
    }
    .dokumentasi .list-dokumentasi .img-dokumentasi {
        max-height: 56px;
        min-height: 56px;
        border-radius: 10px 10px 0 0;
    }
    .contact-widget li:not(:last-child) {
        margin-bottom: 0;
    }
    .footer .footer-links>li>a {
        font-size: 0.5rem;
    }
    .title-content .title.title-mitra {
        font-size: 10px;
    }
    .footer-top .heading-xs {
        font-size: 10px !important;
    }
    .footer .col.p5 ul.footer-links.contact-widget {
        font-size: 8px;
        line-height: 1.3;
    }
    .dokumentasi .desc-dokumentasi p {
        font-size: 6px;
    }
    .qurbansyam {
        border-radius: 10px;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-family: 'Montserrat SemiBold';
    }
    .peta-list h4 {
        font-size: 10px;
    }
    .peta-list .subs {
        font-size: 20px;
    }
    .peta-list .subs .huruf {
        font-size: 14px;
    }
    .peta-list .subs .totalqurban {
        font-size: 20px;
    }
    .peta-list .subs img {
        margin-bottom: 15px;
    }
    #vmap {
        height: 180px;
    }
    .title-content .title.title-peta {
        font-size: 10px;
    }
    .cartsinput_width {
        width: 100px;
    }
    .carts-item .carts-list .carts-attr .carts-attr-total span {
        padding: 5px;
        font-size: 10px;
    }
    .row.recomendasi-transaction {
        margin-right: 10px;
        margin-left: 10px;
    }
    .transaction .divtransaction {
        padding: 40px 5px 20px;
    }
    .transaction .divtransaction .desc {
        padding: 15px 0px;
    }
    .pc-4 {
        padding: 5px !important;
    }
    .input-group--style-2 .input-group-btn>.btn {
        padding: 6px;
    }
    .jmlkuantitas {
        font-size: 8px;
        padding: 3px;
        text-align: center;
    }
    .content-invoice {
        padding: 5px;
        border-radius: 10px;
    }
    .content-invoice .divac .invoice-account {
        width: 75%;
    }
    .img-cart {
        width: 25%;
    }
    .content-invoice .content-invoice-title,
    .content-invoice .totalharga,
    .content-invoice .catataninvoice,
    .content-invoice .penotalan,
    .content-invoice .divac {
        font-size: 7px;
        padding-left: 1em;
    }
    .content-invoice .invoice-account tr {
        font-size: 5px;
    }
    .img-cart img {
        width: 50px;
    }
    .content-invoice .invoice-account td.ttl {
        padding-right: 1px;
    }
    .rekomendasi .col-3 {
        padding-left: 2px;
        padding-right: 2px;
    }
    .rekomendasi .rekomendasi-list {
        padding: 3px 2px;
        border-radius: 5px;
    }
    .rekomendasi .rekomendasi-list .title-rekomendasi h5 {
        font-size: 5px;
        height: 19px;
    }
    .logo-bar-area .navbar-brand img {
        height: 20px;
    }
    .logo-bar-icons .nav-search-box .nav-box-icon,
    .logo-bar-icons .nav-compare-box .nav-box-icon,
    .logo-bar-icons .nav-wishlist-box .nav-box-icon,
    .logo-bar-icons .nav-cart-box .nav-box-icon {
        font-size: 20px;
        width: 10px;
    }
    .logo-bar-icons .nav-search-box .nav-box-number,
    .logo-bar-icons .nav-compare-box .nav-box-number,
    .logo-bar-icons .nav-wishlist-box .nav-box-number,
    .logo-bar-icons .nav-cart-box .nav-box-number {
        min-width: 12px;
        height: 12px;
    }
    .jenishewan {
        border-radius: 10px;
    }
    .jenishewan .list-top {
        border-radius: 10px 10px 0 0;
    }
    .jenishewan .list-bottom,
    .jenishewan .list-top {
        height: 60px;
    }
    .jenishewan .list-bottom .harga-hewan h2 {
        font-size: 12px;
    }
    .jenishewan .list-top h3 {
        font-size: 10px;
        padding: 5px 5px 5px 5px;
        margin-bottom: 0;
    }
    .jenishewan .list-bottom span {
        font-size: 4px;
    }
    .jenishewan .list-bottom a {
        padding: 3px 3px;
        font-size: 4px;
    }
    .jenishewan .list-bottom {
        padding: 10px 0px 0 0px;
        display: block;
    }
    .jenishewan .list-top img {
        width: 40px;
    }
    .title-content .title {
        font-size: 12px;
    }
    .qurbansyam {
        padding: 10px 14px;
    }
    .rowsyam .haraga-qurbansyam h4 {
        font-size: 9px;
        font-size: 5px;
        padding-right: 2px;
    }
    .sk {
        margin-top: 0;
        margin-bottom: 2em;
    }
    .video-qurban {
        padding: 10px 15px 26px 15px;
    }
    .video-qurban iframe {
        width: 100%;
        height: auto;
    }
    .video-qurban h1 {
        font-size: 20px;
    }
    .video-qurban h3 {
        font-size: 8px;
    }
    .video-qurban a {
        font-size: 6px;
        padding: 10px;
        margin-right: unset;
    }
    .list-skema .title-skema {
        font-size: 6px;
        margin-right: 10px;
    }
    .list-skema .desc-skema {
        font-size: 5px;
        height: 20px;
    }
    .rowsyam .haraga-qurbansyam h1 {
        font-size: 8px;
        margin-bottom: 0;
    }
    .rowsyam .haraga-qurbansyam a.btnnow {
        font-size: 4px;
        padding: 5px 7px;
    }
    .rekomendasi .rekomendasi-list .img-rekomendasi img {
        width: 35px;
    }
}


/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    .jenishewan .list-bottom,
    .jenishewan .list-top {
        height: 200px;
    }
    .jenishewan .list-top img {
        margin-top: 50px;
    }
    .peta-list .subs .huruf {
        font-size: 25px;
    }
}

@media only screen and (width: 414px) {
    .sm-fixed-top {
        top: -45px;
    }
    .menus-cust {
        display: none;
    }
    .logo-bar-area {
        padding: 2px 0;
    }
    .logo-bar-area .navbar-brand img {
        width: 84px;
    }
    .img-aqiqah img {
        width: 100%;
    }
    .harga-aqiqah h2 {
        font-size: 30px;
    }
    .harga-aqiqah h1 {
        font-size: 50px;
    }
    .harga-aqiqah span {
        font-size: 13px;
    }
    .btn-q {
        text-align: left;
    }
    .btn-q a {
        padding: 10px 15px
    }
    .title-content .title.title-peta {
        padding: unset;
    }
    .onlyweb {
        display: none;
    }
    .onlymob {
        display: block;
    }
    .peta-list {
        margin-top: unset;
    }
    .peta-list .subs img {
        width: 40px;
    }
    .peta-list .subs .totalqurban {
        font-size: 35px;
    }
    .cont-peta {
        padding-left: 5px;
        padding-right: 5px;
        background: white;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .list-skema .desc-skema {
        padding: 5px;
        height: 25px;
    }
    .list-skema {
        margin-bottom: 10px;
    }
    .sk {
        margin-top: 1em;
        margin-bottom: 2em;
    }
    .sk img {
        width: 140px;
    }
    .video-qurban h1 {
        font-size: 35px;
    }
    .video-qurban img {
        display: none;
    }
    .video-qurban iframe {
        width: 330px;
        height: 185px;
    }
    .video-qurban a {
        padding: 10px;
        margin-right: 20px;
    }
    .video-qurban h3 {
        font-size: 15px;
    }
    .video-qurban {
        padding: 30px 30px 30px 40px;
    }
    .title-content {
        padding: 0;
    }
    .title-content .title.title-mitra {
        font-size: 22px;
    }
    .p5 {
        padding: 5px;
    }
}

@media only screen and (width: 320px) {
    .katamereka .katamereka-list .km-ket .km-nama {
        font-size: 9px;
    }
    .katamereka .katamereka-list .km-ket .km-posisi {
        font-size: 7px;
    }
    .katamereka .katamereka-list .km-ket .km-desc {
        font-size: 7px;
    }
    .list-skema .title-skema {
        margin-top: 9px;
    }
    .list-skema .desc-skema {
        font-size: 7px;
    }
    .video-qurban {
        padding: 30px 30px 30px 40px;
    }
    .btn-q .btn-centr {
        text-align: center;
    }
    .pd5 {
        padding: 5px;
    }
    .harga-aqiqah h2 {
        font-size: 15px;
    }
    .harga-aqiqah h1 {
        font-size: 24px;
    }
    .harga-aqiqah span {
        font-size: 8px;
    }
    .btn-q a {
        font-size: 6px;
        padding: 5px 8px;
    }
    .btn-more {
        /*margin-top: 0;*/
    }
    .btn-more a {
        padding: 6px 10px;
        font-size: 10px;
    }
    .space {
        margin-bottom: 0px;
    }
}

@media only screen and (width: 1024px) {
    [class^='imghvr-'] figcaption,
    [class*=' imghvr-'] figcaption {
        padding: 5px 20px;
    }
    [class^='imghvr-'] figcaption p {
        line-height: .8rem;
        font-size: 0.6325rem;
    }
    .body-wrap.shop-default {
        margin-bottom: 60em;
    }
}

@media only screen and (width: 768px) {
    .body-wrap.shop-default {
        margin-bottom: 33em;
    }
    [class^='imghvr-'] figcaption,
    [class*=' imghvr-'] figcaption {
        padding: 5px 20px;
    }
    [class^='imghvr-'] figcaption p {
        line-height: .8rem;
        font-size: 0.5325rem;
    }
    [class^='imghvr-'] figcaption h1,
    [class^='imghvr-'] figcaption h2,
    [class^='imghvr-'] figcaption h3,
    [class^='imghvr-'] figcaption h4,
    [class^='imghvr-'] figcaption h5,
    [class^='imghvr-'] figcaption h6,
    [class*=' imghvr-'] figcaption h1,
    [class*=' imghvr-'] figcaption h2,
    [class*=' imghvr-'] figcaption h3,
    [class*=' imghvr-'] figcaption h4,
    [class*=' imghvr-'] figcaption h5,
    [class*=' imghvr-'] figcaption h6 {
        display: none;
    }
}

@media only screen and (width: 375px) {
    /* .body-wrap.shop-default{
		margin-bottom: 17em;
	} */
}

@media only screen and (width: 414px) {
    .body-wrap.shop-default {
        margin-bottom: 11em;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    [class^='imghvr-'] figcaption p {
        line-height: .8rem;
        font-size: 0.6325rem;
    }
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (orientation: landscape) {
    [class^='imghvr-'] figcaption p {
        line-height: .8rem;
        font-size: 0.5325rem;
    }
}