@media (max-width: 768px) {

/*============= overall ==========*/
	/* FLoater */
	.floater-inner {
		width: 100%;
		display: block;
		right: 0px;
		bottom: 0px;
	}

	.stickyContact {
		width: 100%;
		display: block;
		text-align: center;
	}
	.stickyContact a {
		font-size: 1rem;
	}
	.card-header {
		padding: 0.5rem;
	}
	.popuplogo {
		width:10rem;
	}

	#formContactVet textarea {
		height: 25vh;
	}
	#formContactVet label {
		font-size:0.8rem;
	}


	.float-img {
		display: none;
	}
	.float-mobile {
		display: block;
	}


	.navbar-nav .nav-item .nav-link {
		font-size: 1.2rem;
		padding: 1rem 0rem 1rem 0.5rem;
	}

	.navbar-nav .nav-item .nav-link.active,
	.navbar-nav .nav-item .nav-link:hover {
		border-radius: 0rem;
	}




/*============= homepage ==========*/


	.home-container {
		margin-top: 40px;
	}

		.display{
			flex-direction: column-reverse !important;
		}
        .logo {
            width: 200px;
            height: 50px;
            /* background-color: red */
        }

        .logo {
            width: 60%;
            height: auto
        }


        .bannerContent {
            display: flex;
            justify-content: center
        }

        .maxparagraph2 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 30px !important;
        }

        .content {
            margin-top: 0rem
        }

        .section4 img {
            width: auto;
            height: 250px;
        }

        .imageSection img {
            width: 150px;
            height: 150px;
            object-fit: cover;

        }

		.mobileonly {
			display: block;
		}
		.desktoponly {
			display: none;
		}

		.footer.copy, .footer.social {
			text-align: center;
		}
		.footer.social {
			margin-bottom:20px;
		}

		.footer.social a {
			font-size: 0.5em;
		}

		/*hero banner*/
		.hero-banner .caption{
			position: relative;
			width: 100%;
			bottom: 30%;
			padding: 10px;
			text-align: center;
			height: 26.5rem;
			padding-top: 2rem;
		}
		.hero-banner .images {

		}

		.hero-banner .caption h1,
		.pagebanner .caption h1
		{
			font-size: 2.5rem;
		}



		.banner-img {
			width: 100%;
			height: 200px;
			display: block;
			overflow: hidden;
			position: absolute;
			bottom: 0px;
		}
		.banner-img img {
			float: right;
			width: 150%;
			margin: 0px;
			padding: 0px;
			  filter: blur(3px);
		  -webkit-filter: blur(3px);
		}

		.banner-img .overlay {
		  display: block; /* Hidden by default */
		}

		.hero-banner .herobtn {
			margin-bottom: 0px;
		}




		/*nutrition*/
		.home-nutritions .title  h1 {
			font-size: 1.5rem;
		}
		.home-nutritions .title-inner .btn {
			font-size: 1.2em;
		}

		.home-nutritions .outer .col-12 {
		margin-bottom: 10px;
		margin-top: 0px;
		min-height: 7.5rem;
		}


		.home-nutritions .copy p {
			text-align: center;
			font-size:15px;
			display: block;
			width: 100%;

		}

		home-nutritions .outer .col-12 {
		padding: 0px 10px;
		}
		.home-nutritions .outer .img img {
			width: 90%;
		}

		.home-nutritions .title-inner .btn {
			padding: 0 20px;
		}

		.homewhy .img {
			height: 250px;
			overflow: hidden;
		}

		.pagebanner {
			min-height: 200px;
		}

		.pagebanner .caption {
			position: absolute;
			width: 100%;
			text-align: center;
			bottom: 0px;
			padding: 5px;
			left: 0px;
		}


		.pagebanner .banner-img img {
			width: auto;
			height: 100%;

		}





        .mobileImg1 p {
            font-size: 12px !important;
        }

        .section p {
            width: 50px !important;
        }

        .border-right {
            border: 0px !important;
        }

        .dihilangkan {
            display: none;
        }

        .buttonSec1 {
            position: absolute;
            left: 40%;
            /* right: 50% */
        }

        .buttonStyle {
            font-size: 10px;
            border-radius: 50px;
            background-color: #77bbea;
            font-family: 'Poppins';
            font-weight: 400;
            color: white;
            padding-left: 6vw;
            padding-right: 6vw;
        }

        .buttonArticlePage {
            margin-top: 0;
            border-radius: 30px;
            font-size: 15px;
            background-color: #ca94d0;
            pointer-events: none;
            font-family: 'Poppins';
            font-weight: 400;
            color: white
        }

        .backgroundArticle {
/*
            max-height: 500px;
            height: 300px;
*/
        }

        .imageSection {
            max-height: 300px;
            height: 200px;
            position: relative
        }

		.hero-sections {
			display: none;
		}



		/* ABOUT US */
		.homeabout h1 {
			font-size: 1.3rem;
			word-break: break-word;
		}




        .section1 h1 {
            padding-top: 5vh;
            font-size: 19px;
            text-align: center;
            font-family: 'Poppins';
            font-weight: 700 !important;
        }

        .section1 p {
            font-size: 11px;
            text-align: center;
            font-family: 'Poppins';
            font-weight: 500 !important
        }

        .backgroundArticle {
/*
            max-height: 500px;
            height: 200px;
*/
        }

		.article-list.container {
			max-height: 200px;
		}


		.article-list .buttonStyle4 {
			margin-top: 0px;
		}



        .banner1 {
            background-image: url("../img/HOME/banner1.jpg");
            background-size: cover;
            background-position: center;
            min-width: 100%;
            max-width: 150px;
            min-height: 100%;
            max-height: 100%;
            height: 300px;
            width: 120px;
            object-fit: cover;
        }

        .border-right {
            /* display:none */
        }

        .background4 {
            background-size: cover;
            background-position: center;
            max-height: 1000px;
            border-radius: 0 0 20px 20px;
        }

        .background3 {
            background-image: url("../img/HOME/bgsec3.png");
            /* background-attachment: fixed; */
            background-size: cover;
            background-position: center;
            min-width: 100%;
            max-width: 100%;
            width: 100%;
        }

        .titleSection4 {
            height: 20px;
            font-size: 15px;
        }

        .section4 p {
            font-size: 1.5rem;
            width: 176px;
            font-size: 12px !important;
            /**Major Properties**/
            overflow: hidden;
            max-height: 7rem;
            padding-right: 0 !important;
/*             padding-top: 10px !important; */
            -webkit-box-orient: vertical;
            display: block;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 5;
        }


        #section2 button {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 85%;
        }

        #section3 button {
            position: absolute;
            bottom: 0;
            left: 5;
            width: 60%;
        }

        .ingredients li {
            display: flex !important;
            margin-left: -5vw !important;
        }

        .ingredients a {
            font-size: 12px !important;
            padding-left: 5vw !important;
            padding-right: 5vw !important;
        }

        .ingredients p {
            color: white !important;
            font-size: 10px !important;
        }

        .ingredients img {
            /* width: 100% !important; */
            height: auto
        }
.container.tipsdetail {
	margin-top: 1rem;
}

	.tips-hero.topic {
		  height: 10rem;
	}


        #section3 p {
            font-size: 1.5rem;
            width: 135px;
            font-size: 9px !important;
            /**Major Properties**/
            overflow: hidden;
            max-height: 4rem;
            padding-right: 0 !important;
            padding-top: 10px !important;
            margin-bottom: 35px !important;
            -webkit-box-orient: vertical;
            display: block;
            display: -webkit-box;
            overflow: hidden !important;
            text-overflow: ellipsis;
            -webkit-line-clamp: 4;
        }

        #section2 {
            position: relative;
            max-width: 40vw;
            overflow-wrap: break-word;
        }

/*
        .col p {
            font-size: 12px
        }
*/

/*
        .title p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 10px !important;
            margin-bottom: -2px !important;
            font-weight: 700 !important;
            font-family: 'Poppins'
        }
*/

        .section3 h1 {
            font-size: 10px;
            margin-bottom: -2px;
            font-weight: 700 !important;
        }

        .section2 p {
            font-size: 1.5rem;
            width: 150px;
            font-size: 9px;
            /**Major Properties**/
            overflow: hidden;
            max-height: 5rem;
            padding-right: 0 ;
            padding-top: 10px ;
            margin-bottom: 35px;
            -webkit-box-orient: vertical;
            display: block;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 5;
        }

        .anotherNone {
            display: none;
            font-size: 13px;
        }

        .newCol1 {
            margin-top: -5vh;
            margin-bottom: 5vh
        }

        .btnSection4 {
            display: none
        }

        .buttonStyle1 {
            font-size: 1.2rem;
            width: 100%;
            border-radius: 50px;
            background-color: #77bbea;
            font-family: 'Poppins';
            font-weight: 400;
            color: white;
        }

        .maxparagraph2 p {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .maxparagraph4 p {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .section5 img {
            display: none
        }

        .section7 {
            padding-left: 0 !important;
            padding-right: 0 !important
        }

        .section6 p {
            display: none;
        }


        .nutritionImg {
            width: 50%;
            height: 80px;
            object-fit: cover;
            margin-bottom: 30px;
        }

        .nutrients {
            height: auto !important
        }


        .sec5 h1 {
            font-size: 20px;
            font-weight: 700 !important;
            font-family: 'Poppins';
        }

        .mobileImg1 {
            display: block !important;
            margin-top: 5vh;
        }
        .banner1 {
            background-image: url("../img/HOME/banner1.jpg");
            background-size: cover;
            background-position: center;
            min-width: 100%;
            max-width: 150px;
            min-height: 100%;
            max-height: 100%;
            height: 300px;
            width: 120px;
        }

        .mobileTitle {
            width: 155px;
            height: 50px;
        }

        .background1 {
            background-size: cover;
            background-position: center;
            min-width: 100%;
            max-width: 150px;
            min-height: 100%;
            max-height: 100%;
            height: 300px;
            width: 120px;
            border-radius: 0 0 0 0;
        }

        .mobileNutriens {
            margin-top: 0 !important;
        }

        .section1 h1 {
            padding-bottom: 0;
            padding-top: 10vh;
            padding-left: 0 !important;
            font-family: 'Poppins';
            font-weight: 500;
            color: #3a3a3a;
            font-size: 20px
        }

        .section1 br {
            display: block !important;
        }

        .searchSection {
            display: none
        }

        .section2div h1 {
            font-family: 'Poppins';
            font-weight: 400;
            font-size: 12px;
        }

        .title {
            font-size: 15px !important;
        }

        .section2div p {
            font-family: 'Poppins';
            font-weight: 400;
            color: #3a3a3a;
            font-size: 10px;
            padding-top: 0 !important;
        }

        .stickyContact {
            display: block;
        }

        .section2div {
            position: relative;
        }

        .section3 p {
            font-size: 12px;
        }


/*PRODUCT*/
    .section2 img {
/*         height: 60px; */
    }
.productdetail.upper {
	background:linear-gradient(to bottom, rgba(200, 200, 200, 0) 50%, rgba(0, 0, 0, 1) 200%);
}
    .background1 {
        background-size: cover;
        background-position: center;
        min-width: 100%;
        max-width: 150px;
        min-height: 100%;
        max-height: 100%;
        margin-right: 0;
        height: 300px;
        object-fit: cover;
        /* width: 100px; */
        border-radius: 0 0 50px 50px;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

	.product.section2 {
		margin-top: 30px;
	}

		.slide-indicator {
			display: block;
		}


    .section2 div {
        width: auto !important;
        font-size: 15px;
    }

    .section1 {
        font-family: 'Poppins';
        font-weight: 700 !important;
        color: white !important;
        font-size: 30px !important;
    }

    .filter h1 {
        display: block;
        text-align: center
    }

    .inputSec {
        /* display: none */
    }

    .none1 {
        display: none;
    }

    .fontSub {
        font-size: 15px !important;
    }

    .inputSec {
        display: none
    }

    .productList {
        display: flex;
        overflow-x: auto;
    }
	.listproduct {
		margin-bottom: 4rem;
	}
    .lastSection img {
        width: 150px !important;
    }

    .titleFilter {
        font-size: 18px !important;
    }
    .border-right-custom {
	    border-radius: 0 0px 0px 0;
    }

	.listfilter {
		display: none;
	}

    #sub_layout {
/*         display: flex */
/* 	display: none; */
    }

    .mobileSub {
        display: flex;
        overflow-x: auto;
    }

    .mobileView {
        align-items: center;
        justify-content: space-between;
        display: flex
    }



/*ABOUT US*/
.aboutus {
	margin-top: 10px;
}
.aboutus .title.mobileonly {
	font-size: 25px !important;
	text-align: center;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px !important;
	font-weight: 100 !important;
}
.nut-thumb {
	max-height: 150px;
}
.max-nutrition .content h3 {
	font-size: 20px;
}


/*PRODUCT DETAIL*/
    .titleDetail {
        font-size: 20px !important;
        font-family: 'Poppins' !important;
        font-weight: 500 !important;
    }

    .productdetail.background1 {
        background-image: url("../img/detailProduct/images/topbanner_01.jpg");
        background-size: cover;
        background-position: center;
        min-width: 100%;
        max-width: 150px;
        min-height: 100%;
        max-height: 100%;
        margin-right: 0;
        width: 500px;
        border-radius: 0 0 50px 50px;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .productdetail.background2 {
        /* background-size: cover;
        background-position: center;
        min-width: 100%;
        max-width: 150px;
        min-height: 100%;
        max-height: 100%;
        margin-right: 0;
        height: 750px;
        width: 500px;
        border-radius: 0 0 50px 50px;
        margin-right: 0 !important;
        margin-left: 0 !important; */
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* .topnav {
        display: none;
    } */

    .nutrient {
/*         display: none !important; */
    }


    .inputSect {
        display: none;
    }

    .product.section1 img {
    }

    /* table {
        display: none
    } */

    .buttonSection1 {
        display: flex;
    }

    .inputSec {
        display: none
    }

    .buttonSection1 button {
        padding: 3px !important;
        padding-left: 5px !important;
        padding-right: 10px !important;
        font-family: 'Poppins';
        color: white;
        font-weight: 400;
        font-size: 15px;
        border: none;
        border-radius: 25px;
    }

    .buttonSec {
        padding: 3px !important;
        padding-left: 5px !important;
        padding-right: 10px !important;
        font-family: 'Poppins';
        color: white;
        font-weight: 400;
        font-size: 15px;
        border: none;
        border-radius: 25px;
    }

    /*store*/

    .gambar{
        width: 75%;
        padding-top: 2rem;
        height: auto;
    }

    .lastSection button {
        font-size: 13px !important;
        padding-left: 2px !important;
        padding-right: 0 !important;
    }

    .paragraphMobile {
        width: 120px;
        height: 35px;
    }

    .find.background1 {
        background-size: cover;
        background-position: center;
        /* min-width: 100%;
        max-width: 150px;
        min-height: 100%;
        max-height: 100%; */
        margin-right: 0;
        height: auto;
        /* width: 150px; */
        border-radius: 0 0 50px 50px;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .find.background2 {
        background-size: cover;
        min-width: 100%;
        max-width: 150px;
        min-height: 100%;
        max-height: 100%;
        height: 300px;
        width: 120px;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border-radius: 0 50px 0 0;
    }

    .searchBox {
        display: none;
    }

    .sponsor {
        display: flex;
        justify-content: center
    }

    .stickyMessage {
        display: none
    }

    .sponsor img {
        width: 70% !important;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .card {
        border: none !important
    }

    .storeImg {
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .card-body {
        padding: 2px !important;
    }

    .section4 img {
        height: 200px !important
    }

    .buttonMobile {
        font-size: 12px !important;
    }

    .section4 {
        position: relative;
        width: 100%;
        /* padding-left: 5px !important; */
    }

    .card-text {
        font-size: 10px !important;
    }

    .storeDetail button {
        background-color: #81c6ea;
        font-family: 'Poppins';
        color: #3a3a3a;
        font-weight: 400;
        color: white;
        font-size: 11px;
        border-radius: 20px;
        margin-bottom: 5px;
    }

    .store button {
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #f39f4a;
        font-family: 'Poppins';
        color: #3a3a3a;
        width: 100%;
        font-weight: 700;
        color: white;
        font-size: 5px;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0;
    }

    .inputSec {
        display: none
    }

    .lastSection h1 {
        font-family: 'Poppins';
        font-weight: 500 !important;
        color: black;
        padding-bottom: 20vh;
        margin-top: -10vh !important;
        font-size: 20px !important;
    }

    .lastSection button {
        font-size: 10px !important;
        background-color: #77bbea;
        font-family: 'Poppins' !important;
        font-weight: 500 !important;
        color: white;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
        font-family: 'Poppins' !important;
        font-weight: 400 !important;
    }

/* TIPS */

        .tips.section1 {
            position: absolute !important;
            top: 0 !important;
        }

/**/
		.bungkus {
			max-height: 200px;
		}

/*contact*/
    .contact img{
        max-width:20px;
    }

    .contact.mobile-contact p{
        font-size: 1rem;
    }


}



@media (max-width: 320px) {

	.hero-banner .caption h1{
		font-size: 2.5rem;
	}

	.homeabout h1 {
	font-size: 1rem;
	}
	.popuplogo {
		width:7rem;
	}

}