.inputerror{
	border: 1px solid red !important;
}

.margin-top-banner {
	margin-top: 70px;
}

.loginBtn {
    box-sizing: border-box;
    position: relative;
    margin: 0.2em;
    padding: 0 15px 0 20px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 13px;
    color: #FFF;
    cursor: pointer;
}

.loginBtn--facebook {
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    text-shadow: 0 -1px 0 #354C8C;
}

.card-article .card-image{
	min-height: 150px;
}

.list-search a{
	color: #3c136f;
}

.navbar-brand-std .nav-link{
	font-size: 15px;
}

.navbar-brand-std .nav-link:hover {
    color: #de4277;
    font-weight: bold;
}

.navbar-brand-std .search .dropdown-menu{
	width: 250px;
	top: 60px;
    right: 40px;
	border: 1px solid #cecece;
}

.navbar-brand-std .dropdown-menu::before{
	height: auto;
}

.navbar-brand-std .search .form-control{
	height: 40px;
    font-size: 14px;
	padding-left: 0;
    padding-right: 0;
	border: 0;
}

.navbar-brand-std .store-locator, .navbar-brand-std .search {
	margin: 0;
}

.navbar-brand-std .store-locator{
	border: none;
}


h1.text-theme{
	font-size: 2.2rem;
}

.onlyhome.navbar-expand-lg .navbar-nav .nav-link {
    color: #ffffff;
}

.hamburger--collapse .hamburger-inner, .hamburger--collapse .hamburger-inner::before, .hamburger--collapse .hamburger-inner::after {
	background-color: #3c136f;
}

.fa-tiktok {
  color: #3c136f;
  
  
}

.onlyhome.navbar-scrolled .navbar-nav .nav-link {
    color: #3c136f !important;
}

.onlyhome.navbar-brand-std .nav-item.active .nav-link:after{
	background-color: #ffffff;
}

.onlyhome.navbar-scrolled .nav-item.active .nav-link:after{
	background-color: #3c136f;
}

.onlyhome.navbar-brand-std .store-locator {
    border-right: 2px solid #ffffff;
}

.onlyhome.navbar-scrolled .store-locator {
    border-right: 2px solid #3c136f;
}

.navbar-brand-std .dropdown-megamenu .dropdown-menu .nav-link {
    color: #3c136f;
}

.navbar-brand-std .dropdown-menu {
    top: 70px;
}

.dropdown-megamenu .dropdown-menu .nav-link {
    font-size: .7rem;
}

.bg-tosca {
  background-color: #defef9;
}

.bg-purple {
  background-color: #f4e6ff;
}

.bg-pink {
  background-color: #fff0f7;
}


.vto-floating {
    position: fixed;
    bottom: 3%;
    right: 1%;
    z-index: 9999;
}


.list-props .list-inline-item{
	width: 118px;
	margin-right: 8px;
	font-size: 12px;
}

.list-props img {
	max-width: 100px !important;
}



.icon-kandungan-custom{
	/*width: 80%;*/
	height: 150px;
}

.icons{
	width: 110px;
}

.icon-new-cat{
	color: #ff0000;
	font-size: 40%;
	top: -5px;
}

.icon-new-prod{
	position: absolute;
    top: 25px;
    right: 40px;
    color: #ff0000;
    font-weight: bold;
}


.section-product .card-image-props {
    left: -20px;
}

.navbar-brand-std .nav-item.active .nav-link:after {
	left: 0;
	right: 0;
	margin: auto;
}

.wysiwyg-content a {
	text-decoration:underline;
}

.slider-no-arrow .slick-prev,
.slider-no-arrow .slick-next {
	display: none !important;
}

.slider-no-dots .slick-dots {
	display: none !important;
}

.slick-dots li button:before{
	font-size: 12px;
	color: #fff;
	opacity: 1;
}

.slick-dotted.slick-slider {
	margin-bottom: 0 !important;
}

.center > img, .card-product .card-image > img, .card-promo .card-image > img {
	max-width: 60%;
}

.pulse {
	box-shadow: 0 0 0 rgba(255, 36, 92, 0.6);
	animation: pulse 2s infinite;
}

.panel-promo {
	display: block;
	width: 120px;
	height: 120px;
	position: fixed;
	z-index: 999;
	bottom: 65px;
	right: 5px;
	background: url('../images/todayspromo100px.png');
	background-size: cover;
}

.panel-promo-no-bg {
	background: none !important;
}

.modal-std .modal-header {
  border: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.modal-std .modal-header .close {
  position: absolute;
  z-index: 1;
  top: -2rem;
  right: 0;
}

.modal-std .modal-footer {
  border: none;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.modal-body p{
	font-size: 14px;
}

.panel-promo-mbj {
	display: block;
	width: 120px;
	height: 120px;
	background: url('../images/badge-mbj_rev.png');
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
	position: relative;
}

.panel-promo .layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 53%;
	transform: translateY(-50%);
	height: 70%;
	width: 70%;
	margin: auto;
	background-color: rgba(255, 36, 92, .4);
	z-index: -1;
}

.section-mbj {
	background-color: #AB7BC5;
	position: relative;
	overflow: hidden;
}

.play-button {
	display: inline-block;
    max-width: 290px;
    position: absolute;
    right: -11rem;
    bottom: 0;
}

.main-banner-video-thumbnail .img-element {
	position: absolute;
	z-index: 0;
}

.main-banner-video-thumbnail .img-element-1 {
	top: 4rem;
	left: -1.5rem;
	z-index: 0;
}

.main-banner-video-thumbnail .img-element-2 {
	bottom: 9rem;
	right: -9rem;
}

.main-banner-video-thumbnail .img-element-3 {
	z-index: 1;
	position: relative;
}

.main-banner-video-thumbnail .play-button {
	z-index: 9;
}

.ornament-leaf {
	position: relative;
	min-height: 80px;
}

.ornament-leaf img {
	position: absolute;
}

.ornament-leaf .float-left {
	left: 0;
}

.ornament-leaf .float-right {
	right: 0;
}

.ornament-leaf .img-1 {
	left: -7rem;
	max-width: 295px;
}

.ornament-leaf .img-2 {
	right: -3rem;
	z-index: 2;
	top: -180px;
}

.ornament-leaf .img-3 {
	max-width: 330px;
	right: -8rem;
	top: -8rem;
}

.bg-soft-orange{
	background: #fed5ac;
}

.footer-about a{
	font-size: 12px;
	text-decoration: underline;
	margin: 0 5px;
}

@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 36, 92, 0.6);
	}
	70% {
		-webkit-box-shadow: 0 0 0 30px rgba(255, 36, 92, 0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 36, 92, 0);
	}
}
@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(255, 36, 92, 0.6);
		box-shadow: 0 0 0 0 rgba(255, 36, 92, 0.6);
	}
	70% {
		-moz-box-shadow: 0 0 0 30px rgba(255, 36, 92, 0);
		box-shadow: 0 0 0 30px rgba(255, 36, 92, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(255, 36, 92, 0);
		box-shadow: 0 0 0 0 rgba(255, 36, 92, 0);
	}
}


/* new main banner*/

.carousel-1 {
	background: url(../images/banner/marina-new-intro-banner_0724.jpg) no-repeat;
    width: 100%;
	height:80vh;
    background-size: cover;
	background-position: center center;
}

.carousel-2 {
	background: url(../images/banner/marina-new-intro-banner_0724.jpg) no-repeat;
    width: 100%;
	height:80vh;
    background-size: cover;
	background-position: center center;
}

.btn1-banner {
	background-color: #9A9FFD;
    height: 20vh;
    width: 100%;
	padding: 0px !important;
	bottom: 0;
}

.img1-banner {
	background: url(../images/banner/home-banner-2023/btn1-banner.png) no-repeat;
    max-width: 80%;
	width: 260px;
    background-size: contain;
    background-position: center center;
    height: 100%;
    margin-top: 0px;
}

.img1-banner:hover {
	background: url(../images/banner/home-banner-2023/btn1-banner-h.png) no-repeat;
    width:80%;
    background-size: cover;
	background-position: center center;
	height:  100%;
    margin-top: -15px;
}

.btn2-banner {
	background-color: #8AC7FF;
	height: 20vh;
    width: 100%;
	padding: 0px !important;
	bottom: 0;
}

.img2-banner {
	background: url(../images/banner/home-banner-2023/btn2-banner.png) no-repeat;
	max-width: 80%;
	width: 210px;
    background-size: contain;
    background-position: center center;
    height: 100%;
    margin-top: 0px;
}

/*
.img2-banner:hover {
	background: url(../images/banner/home-banner-2023/btn2-banner-h.png) no-repeat;
	width: 340px;
    background-size: cover;
    background-position: center center;
    height: 175px;
    margin-top: -40px;
}
*/

.img2-banner:hover {
	background: url(../images/banner/home-banner-2023/btn2-banner-h.png) no-repeat;
	width:60%;
    background-size: cover;
	background-position: center center;
	height:  100%;
    margin-top: -20px;
}

.btn3-banner {
	background-color: #DE9C92;
	height: 20vh;
    width: 100%;
	padding: 0px !important;
	bottom: 0;
}

.img3-banner {
	background: url(../images/banner/home-banner-2023/btn3-banner.png) no-repeat;
    max-width: 80%;
	width: 260px;
    background-size: contain;
    background-position: center center;
    height: 100%;
    margin-top: 0px;
}


.img3-banner:hover {
	background: url(../images/banner/home-banner-2023/btn3-banner-h.png) no-repeat;
    width:70%;
    background-size: cover;
	background-position: center center;
	height:  100%;
    margin-top: -25px;
}


@media (min-width: 768px) {
	.temp-banner{
		margin-top:8rem;
	}
	
	.img-thumb{
		background-size:cover !important; width:200px; height:200px;
	}
	.select-cat{
		display: none;
	}
	.label-cat{
		display:inline-block;
	}
	.list-filter .label{
		padding-top: 8px; 
		display: inline-block;
	}
	.section-article{
		padding-top: 8rem;
	}
	.section-testimonial{
		padding-top:4rem;
	}
	.section-activity{
		padding-top:0;
		margin-top: -2rem;
	}
	.section-banner {
		height: 325px;
	}

	.caption-pos-center{
		top:35% !important;
		max-width: 500px;
	}
	.caption-pos-left {
		top: 35% !important;
		left: 0 !important;
		max-width: 400px;
		margin: 0;
		text-align: left;
	}
	
	.caption-pos-mbj {
		top: auto !important;
		right: 11% !important;
		margin: 0;
		bottom: 18%;
	}
	
	.caption-pos-wash {
		bottom: 30% !important;
		left: 12% !important;
		margin: 0;
	}
	
	.ecollagenasta-mawar{
		position:absolute;
		bottom:0;
		right:15px;
	}
	
	.caption-ecollagenasta-mawar{
		bottom: 30% !important;
		left: 15% !important;
		margin: 0;
	}
	
	.caption-cleanse2glow{
		bottom: 45% !important;
		left: 43% !important;
		margin: 0;
	}
	
	.caption-micellar-water{
		bottom: 30% !important;
		left: 34% !important;
		margin: 0;
	}
	
	.caption-pos-edt {
		bottom: 18% !important;
		left: 15% !important;
		margin: 0;
	}
	
	.caption-pos-sun {
		bottom: 35% !important;
		left: 12% !important;
		margin: 0;
	}
	
	.caption-banner-corona {
		top: 42% !important;
		right: 10% !important;
		margin: 0;
	}
	
	.caption-banner-bodywashmawar {
		bottom: 2% !important;
		right: 16% !important;
		margin: 0;
	}
	
	.slick-prev, .slick-next{
		top: 40% !important;
		margin: 45px !important;
	}
	
	.slider-banner .slick-dots{
		bottom: 10px !important;
	}
	
	.slider-testimoni .slick-prev{
		left: -5rem;
	}
	.slider-testimoni .slick-next{
		right: -5rem;
	}	
	
	.caption-pos-banner {
		top: 30% !important;
		left: 15% !important;
		margin: 0;
	}
	.caption-pos-banner2 {
		bottom: 32% !important;
		right: 7% !important;
		margin: 0;
	}
	.caption-pos-banner3 {
		bottom: 7% !important;
		right: 54% !important;
		margin: 0;
	}
	.caption-pos-banner4 {
	    top: 40% !important;
		left: 14% !important;
		margin: 0;
	}
	.caption-pos-banner5 {
	    top: 72% !important;
		left: 40% !important;
		margin: 0;
	}
	.caption-pos-banner-hydra {
	    top: 70% !important;
		left: 44% !important;
		margin: 0;
	}
	.caption-pos-banner-nutri {
	    top: 82% !important;
		left: 44% !important;
		margin: 0;
	}
	
}

@media (min-width: 1440px) {
	.slider-banner .img {
		height: 53vw;
	}
	
	.caption-pos-wash {
		left: 10% !important;
	}
	
	.ecollagenasta-mawar{
		position:absolute;
		bottom:0;
		right:50px;
	}
	
	.caption-pos-banner {
		top: 25% !important;
		left: 10% !important;
		margin: 0;
	}
	
	.caption-pos-banner2 {
		bottom: 30% !important;
		right: 3% !important;
		margin: 0;
	}
	
	.caption-pos-banner4 {
	    top: 42% !important;
		left: 10% !important;
		margin: 0;
	}
	
	.caption-pos-banner5 {
	    top: 72% !important;
		left: 40% !important;
		margin: 0;
	}
	
	.caption-micellar-water{
		left: 35% !important;
	}
	
	.caption-pos-edt {
		left: 13% !important;
	}
	
	.caption-pos-sun {
		left: 10% !important;
	}
	.caption-pos-banner3 {
		bottom: 7% !important;
		right: 55% !important;
		margin: 0;
	}
	.caption-pos-banner-hydra {
	    top: 70% !important;
		left: 44% !important;
		margin: 0;
	}
	.caption-pos-banner-nutri {
	    top: 82% !important;
		left: 44% !important;
		margin: 0;
	}
}

@media (max-width: 767px) {
	
	.navbar-brand-std .store-locator, .navbar-brand-std .search {
		margin: 5px 0px;
		text-align: right;
	}
	
	.navbar-brand-std .nav-link{
		text-align: right;
	}
	
	.dropdown-megamenu .dropdown-menu.show{
		text-align: right;
	}

	.btn1-banner {
		background-color: #9A9FFD;
		height: 15vh;
		width: 100%;
		padding: 0px !important;
		bottom: 0;
	}

	.img1-banner {
		background: url(../images/banner/home-banner-2023/btn1-banner.png) no-repeat;
		max-width: 80%;
		width: 260px;
		background-size: contain;
		background-position: center center;
		height: 100%;
		margin-top: 0px;
	}

	.img1-banner:hover {
		background: url(../images/banner/home-banner-2023/btn1-banner-h.png) no-repeat;
		width:80%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		margin-top: 0px;
	}

	.btn2-banner {
		background-color: #8AC7FF;
		height: 15vh;
		width: 100%;
		padding: 0px !important;
		bottom: 0;
	}

	.img2-banner {
		background: url(../images/banner/home-banner-2023/btn2-banner.png) no-repeat;
		max-width: 80%;
		width: 210px;
		background-size: contain;
		background-position: center center;
		height: 100%;
		margin-top: 0px;
	}

	.img2-banner:hover {
		background: url(../images/banner/home-banner-2023/btn2-banner-h.png) no-repeat;
		width: 70%;
		background-size: contain;
		background-position: center center;
		height:  100%;
		margin-top: 0px;
	}

	.btn3-banner {
		background-color: #DE9C92;
		height: 15vh;
		width: 100%;
		padding: 0px !important;
		bottom: 0;
	}

	.img3-banner {
		background: url(../images/banner/home-banner-2023/btn3-banner.png) no-repeat;
		max-width: 80%;
		width: 260px;
		background-size: contain;
		background-position: center center;
		height: 100%;
		margin-top: 0px;
	}

	.img3-banner:hover {
		background: url(../images/banner/home-banner-2023/btn3-banner-h.png) no-repeat;
		width: 80%;
		background-size: contain;
		background-position: center center;
		height: 100%;
		margin-top: 0px;
	}

	
	ul.list-inline.list-props {
    text-align: center;
	}

	.list-props .list-inline-item{
		width: 130px;
		margin:10px;
	}
	.icons{
		width: 70px;
	}
	.main-wrapper {
		padding-top: 65px;
	}
	.temp-banner{
		margin-top:0;
	}
	.section-title{
		font-size:1.5em;
	}
	.section-activity{
		padding-top:0;
		margin-top: -2rem;
	}
	.section-product {
		padding-top: 1.5rem;
	}
	
	.icon-kandungan-custom{
		width: auto;
		height: auto;
	}
	.section-product .card-image-props {
		left: 1rem;
	}
	
	.section-product .card-image-props img {
        width: auto;
        height: 60px !important;
    }

	.section-product .card-image-props .uv-white {
        width: auto;
        height: 40px !important;
    }
	
	.section-testimonial{
		margin-top: -8rem;
	}
	.card-journal .card-image img {
		border: 1rem solid #fff;
	}	
	.center > img, .card-product .card-image > img, .card-promo .card-image > img {
		max-width: 90%;
		margin-bottom: 20px;
	}
	.img-thumb{
		background-size:cover !important; width:253px; height:253px;
	}
	.pattern{
		background-position: 0 85%;
	}	
	.select-cat{
		display:inline-block;
	}
	.label-cat{
		display:none;
	}	
	.section-review-list{
		padding: 15px;
	}
	.review {
		text-align: center;
		padding: 15px;
	}
	.review .stars-stats{
		margin-bottom: 2rem;
	}
	.review .stars-stats .big{
		font-size: 3rem;
	}
	#btnAddNewReview{
		width: 85%;
		margin: 0 auto;
		padding: 1rem;
	}	
	.footer-sitemap{
		text-align: center;
	}	
	.slick-prev, .slick-next{
		top: 40% !important;
		margin: 0 !important;
	}	
	.slider .slick-prev::before, .slider .slick-next::before{
		width: 15px;
		height:25px;
	}	
	.slider-banner {
		padding-top:0;
	}
	.slider-banner .container{
		padding:0;
	}
	.slider-banner .img{
		height: 590px;
		background-position: top right;
	}	
	.slider-banner .slick-dots{
		display: none !important;
	}	
	.panel-promo {
		width: 100px;
		height: 100px;
		bottom: 25px;
	}
	.panel-promo-mbj {
		width: 100px;
		height: 100px;
	}
	.panel-promo .layer {
		width: 70%;
		height: 70%;
	}
	.modal-std .modal-dialog {
	    margin-top: 2.5rem;
	}
	.caption-pos-mbj {
		margin: 0 auto;
		text-align: center;
	}
	.caption-pos-wash {
		margin: 0 auto;
		text-align: center;
		margin-top: -80px;
	}
	
	.caption-ecollagenasta-mawar{
		margin: 0 auto;
		text-align: center;
		margin-top: -97px;
	}
	
	.caption-cleanse2glow{
		bottom: 25% !important;
		left: 23% !important;
		margin: 0;
	}
	
	.caption-micellar-water{
		margin: 0 auto;
		text-align: center;
		margin-top: -93px;
	}
	
	.caption-pos-edt {
		margin: 0 auto;
		text-align: center;
		margin-top: -100px;
	}
	.caption-pos-sun {
		margin: 0 auto;
		text-align: center;
		margin-top: -80px;
	}
	
	.caption-banner-corona{
		margin: 0 auto;
		text-align: center;
		margin-top: -70px;
	}
	
	.caption-banner-bodywashmawar {
		margin: 0 auto;
		text-align: center;
		top: 225px;
		position: absolute !important;
		left: 0;
		right: 0;
	}
	
	.play-button {
		   position: relative;
	    max-width: 125px;
	    float: right;
	    right: 0;
	    bottom: 4rem;
	}
	.ornament-leaf {
		min-height: 20px;
	}
	.ornament-leaf .img-1 {
		left: -4rem;
		max-width: 175px;
	}
	.ornament-leaf .img-2 {
		max-width: 150px;
	}
	.ornament-leaf .img-3 {
		max-width: 200px;
		right: -7rem;
	}
	.section-banner {
		padding-top: 1.5rem;
		min-height: 425px;
	}
	
	.generic-content .box-text, .generic-content-inverse .box-text {
		margin-top: 0;
		min-height:auto;
	}
	
	iframe{
		width: 100%;
		height: 300px;
	}
	
	.btn-std{
		padding: 0.5rem 1rem;
	}
	.caption-pos-banner {
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	.caption-pos-banner2 {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		top: 35%;
		left: 0;
		right: 0;
		position: absolute !important;
	}
	.caption-pos-banner3 {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		top: 30%;
		left: 0;
		right: 0;
		position: absolute !important;
	}
	.caption-pos-banner4 {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		top: 30%;
		left: 0;
		right: 0;
		position: absolute !important;
	}
	.caption-pos-banner5 {
		display: none;
		margin: 0 auto;
		width: 100%;
		text-align: center;
		top: 30%;
		left: 0;
		right: 0;
		position: absolute !important;
	}
	.caption-pos-banner-hydra, .caption-pos-banner-nutri {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		bottom: 40%;
		left: 0;
		right: 0;
		position: absolute !important;
	}
}

@media (max-width: 576px) {
	
	/* new main banner responsive*/

	.margin-top-banner {
		margin-top: 0px !important;
	}	

	.carousel-1 {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position:relative;
	}

	.carousel-2 {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position:relative;
	}
}

@media (max-width: 376px) {
	
	/* new main banner responsive*/

	.carousel-1 {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position:relative;
		height: 60vh;
	}

	.carousel-2 {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position:relative;
		height: 60vh;
	}
}