@font-face {
  font-family: Bonnie;
  src: url(font/ARBONNIE.woff2);
}

@font-face {
  font-family: high_tower;
  src: url(font/HighTower.woff2);
}

@font-face {
  font-family: brush;
  src: url(font/Brush445.woff2);
}

/*background color*/

.bg_blue{
	background-color:#151B54;
}

.bg_red{
	background-color:#E30B5D;
}

.bg_green{
	background-color:#00FF7F;
}

.bg_black{
	background-color:#000;
}

.bg_white{
	background-color:#FFFFFF;
}

.bg_violet{
	background-color:#c869ff;
}

.bg_mint{
	background-color:#89ffaa;
}

.bg_lgray{
	background-color:#f2f2f2;
}

/*font color*/
.blue{
	color:#5865F2;
}

.red{
	color:#E30B5D;
}

.green{
	color:#00FF7F;
}

.white{
	color:#FFFFFF;
}

.yellow{
	color:#FFFF33;
}

.black{
	color:#000;
}

.violet{
	color:#800080;
}

.gray{
	color:#4D4D4F;
}

.maroon{
	color:#b70000;
}

.orange{
	color:#ffcb4f;
}
/*other font design*/

.bolder{
	font-weight:bolder;
}

.center{
	text-align:center;
}

.left{
	text-align:left;
}

.right{
	text-align:right;
}

.italic{
	font-style:italic;
}

/*font size*/

.font9{
	font-size:9px;
}

.font10{
	font-size:10px;
}

.font11{
	font-size:11px;
}

.font12{
	font-size:12px;
}

.font14{
	font-size:14px;
}

.font15{
	font-size:15px;
}

.font16{
	font-size:16px;
}

.font17{
	font-size:17px;
}

.font18{
	font-size:18px;
}

.font20{
	font-size:20px;
}

.font25{
	font-size:25px;
}
/*start of general style*/
body
{
	min-height: 100vh;
    min-height: -webkit-fill-available;
	width:100%;
	height:100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden; 
	font-size:16px;
	font-weight:500;
	font-family: "Open Sans", sans-serif;
/*	background-size: cover;
	background-repeat: no-repeat; */
	background: white url(img/leaf3.webp);
	background-repeat: repeat;
/*	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover; */
}

.relative{
	position:relative;
}

.block{
	display:block;
	 overflow:hidden;
}

.brush{
	font-family: "brush", sans-serif;
}

.txt_white{
	color:#fffff;
}

.txt_black{
	color:#000;
}

.txt_amber{
	color:#F5B041;
}

.main_box{
	position:relative;
	overflow:hidden;
	display:block;
	width:100%;
	height:100%;
}

.bg_orange{
	background-color:#ffcb4f;
}

.bg_black{
	background-color:#000;
}

.container100{
	display:block;
	width:100%;
	overflow:hidden;
}

.container{
	position:relative;
	margin-left:5%;
	display:block;
	overflow:hidden;
	width:90%;
}

.container16{
	padding:16px;
}

.container5{
	padding:5px;
}

/*end of general style*/

.main_img{
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100vh;
	background: white url(img/mgrape_main24.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.dest_holder{
	z-index:100;
	min-height:500px;
	position:relative;
	overflow:hidden;
	display:none;
	margin-bottom:40px;
	width:100%;
	margin-top:80px;
}

#home1{
	z-index:100;
}

.nav{
	position:absolute;
	top:0;
	width:100%;
	display:block;
	overflow:hidden;
	z-index:1000;
	padding:0px;
	background-image: linear-gradient(to right, #080808, #080808, #171717, #292929, #2c2c2c);
	color:white;
	text-align:center;
}

.nav_wide, .nav_mob{
	position:relative;
	top:0;
	min-height:80px;
	width:100%;
	overflow:hidden;
	text-align:center;
	z-index:1001;
}

.nav_mob{
	display:none;
}

.show{
	display:block;
}

.hide{
	display:none;
}

.burger{
	position:absolute;
	top:0;
	right:10%;
}

.burger a{
	text-decoration:none;
}
.burger i{
	font-size:36px;
	color:white;
}

.other_nav{
	float:left;
	text-align: center;
	text-decoration: none;
	margin: 24px 2px 0px;
	cursor: pointer;
	color: white;
	max-width:fit-content;
}

.other_nav_itm{
	margin:0px 30px 0px;	
}

.ord_nav_grp{
	position:absolute;
	right:140px;
	top:0px;
}

.other_nav_mob{
	width:100%;
	border: none;
	color: #f7ecd2;
	padding: 15px 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	margin: 10px 5px;
	display:block;
	z-index:900;
}

.button22 {
	border: none;
	color: #f7ecd2;
	padding: 25px 5px 5px;
	text-align: center;
	text-decoration: none;
	width:80px;
	font-size: 14px;
	margin: 0px 2px;
	cursor: pointer;
	float:left;
}

.button22:hover{
	color: #F5B041;	
}

.button22:active{
	color: #F5B041;
}

.button22:focus{
	color:#F5B041;
}

.button_wide_holder{
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.button_mob {
  width:100%;
  border: none;
  color: #f7ecd2;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 10px 0px;
  cursor: pointer;
  display:block;
  z-index:900;
}

.button_mob:hover{
	color: #F5B041;	
}

.slide_btn{
	display:block;
	margin-top:0px;
	padding: 9px 18px 9px;
	width:60%;
	background-color:#ffcb4f;
	border-radius:20px;
	text-decoration:none;
	font-size:12px;
	margin-left:auto;
	margin-right:auto;
	color:black;
	cursor:pointer;
}

.slide_btn:hover{
	background-color:#FAF884;
}

.order_btn{
	display:block;
	margin-top:0px;
	padding: 9px 18px 9px;
	background-color:#ffcb4f;
	border-radius:20px;
	text-decoration:none;
	font-size:12px;
	float:left;
	color:black;
	cursor:pointer;
}

.order_btn:hover{
	background-color:#FAF884;
}

.order_btn2{
	margin-top:20px;
	padding: 9px 18px;
	background-color:#ffcb4f;
	border-radius:20px;
	text-decoration:none;
	font-size:12px;
	color:black;
	cursor:pointer;
}

.order_btn2:hover{
	background-color:#FAF884;
}

.order_btn3{
	margin-top:20px;
	padding: 9px 18px;
	border-radius:20px;
	text-decoration:none;
	font-size:12px;
	color:black;
	cursor:pointer;
}

.order_btn_mob{
	padding: 9px 18px;
	background-color:#ffcb4f;
	border-radius:20px;
	text-decoration:none;
	font-size:12px;
	color:black;
}

.synergy2{
	font-family:Bonnie;
	font-weight:bolder;
	font-size:24px;
}

.herbs2{
	font-family: high_tower;
	font-weight:bolder;
	font-size:24px;
}

.synergy{
	font-family:Bonnie;
	font-weight:bolder;
}
.synergy span{
	display:block;
}

.herbs{
	font-family: high_tower;
	font-weight:bolder;
}
.herbs span{
	display:block;
	
}

.main_text{
	position:absolute;
	z-index:99;
	color:white;
}

.mySlides{
	animation-name: bobble;
	animation-duration: 15s;
	transition: transform .5s ease-in-out;
	background: rgba(0, 0, 0, 0.6);
	position:absolute;
	text-align:center;
	border-radius:25px;
	padding:20px;
}

@keyframes bobble {
    0% {
        left:120%;
		opacity:1;
		animation-timing-function: ease-in;
    }
	5% {
        left:120%;
		opacity:1;
		animation-timing-function: ease-in;
    }
	7% {
		left:1%;
		opacity:1;
		animation-timing-function: ease-in;
	}
	70%{
		left:1%;
		opacity:1;
		animation-timing-function: ease-in;
	}
    100% {
        left:50%;
		opacity: 0;
    }
}

.menu_social{
	color:#ffcb4f; 
	text-decoration:none; 
	font-size:36px; 
	text-align:center; 
	position:absolute; 
	bottom:10px; 
	z-index:301; 
	left:10px;
}

#menu_footer{
	position:absolute;
	color:#f7ecd2;
	font-size:9px;
	text-align:center;
	display:block;
	bottom:10px;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 200px;
}

.herb_title{
	font-size:30px;
	font-weight:bolder;
	font-family: "brush", sans-serif;
	text-align:center;
	padding:5px;
	color:#800080;
	margin:12px 0px;
}

.herb_holder{
	float:left;
	background-color:#1a1a1a;
	height:300px;
	position:relative;
	box-shadow: 0px 0px 4px #d9d9d9;
	border:1px solid #f2f2f2;
	border-radius: 25px 25px;
	color:white;
}

.herb_holder_det{
	float:left;
	background-color:#1a1a1a;
	height:300px;
	position:relative;
	box-shadow: 0px 0px 4px #d9d9d9;
	border:1px solid #f2f2f2;
	border-radius: 25px 25px;
	color:white;
}

.herb_img_holder{
	width:100%;
	background-color:#f2f2f2;
	height:150px;
	position:absolute;
	top:0;
	border: 1px solid #f2f2f2;
	border-bottom-left-radius: 25px;
	text-align:center;
	z-index:99;
}

.herb_img_holder img{
	height:85%;
	padding:10% 10% 5% 10%;
}

.herb_img_holder img:hover{
	height:100%;
	padding:auto auto 0% auto;
}

.herb_text{
	margin:170px 20px 20px 20px;
	z-index:100;
}

.herb_desc{
	overflow:hidden;
	white-space: wrap;
	font-size:12px;
	margin-top:7px;
}

.herb_name{
	font-size:15px;
	font-weight:bolder;
}

.herbscience{
	font-size:12px;
	font-style:italic;
}

.herb_btn{
	position:absolute;
	bottom:20px;
	right:10px;
	font-size:12px;
	background-color:#F5B041;
	border: 1px solid #F5B041;
	border-radius:25px;
	padding:5px;
	cursor:pointer;
}

/* SQUARE VIDEO*/
.video-container2 {
	position: relative;
	padding-bottom: 100%;
	height: 0; overflow: hidden;
}

.video-container2 iframe,
.video-container2 object,
.video-container2 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* RECTANGLE VIDEO*/
.video-container3 {
	position: relative;
	padding-bottom: 56.25%;
	height: 0; overflow: hidden;
}

.video-container3 iframe,
.video-container3 object,
.video-container3 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* REEL VIDEO*/
.video-container4 {
	position: relative;
	padding-bottom: 177%;
	height: 0; overflow: hidden;
}

.video-container4 iframe,
.video-container4 object,
.video-container4 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_holder{
	background-color:white; 
	float:left;
	overflow:hidden; 
	cursor:pointer; 
	position:relative; 
	z-index:299;
	background-color:#F1EFEC;
}

.title{
	font-size:12px;
	text-align:left;
}

.video-thumbnail {
	cursor: pointer; width:100%;
}

.video-thumbnail img{
	border-radius:10px;
	width:100%;
}

.yt_logo{
	position:absolute;
	width:24px;
	bottom:1px;
	right:1px;
}

.myButton9_sml{
	background-color:#F5B041;
	padding:5px 20px;
	border:1px solid #F5B041;
	border-radius:25px 25px;
	cursor:pointer;
	color:black;
	text-decoration:none;
}

.close{
  position:relative;
  display:block;
  text-align:right;
}

.close_btn{
	position:absolute;
	right:0;
	top:0;
	z-index:400;
	cursor:pointer;
	height: 30px;
	width:30px;
}

.close_btn img{
	width:100%;
}

.about_txt{
	color:white;
}

.col_100{
	width:100%;
}

.col_50{
	width:50%;
	float:left;
}

.col_25{
	width:25%;
	float:left;
}

.login{
	margin-top:0px;
	min-height:350px;
	border-radius:20px;
	box-shadow:2px 2px 20px;
	text-align:center;
	overflow:hidden;
	position:relative;
}

.login_close{
	position:absolute;
	top:-10px;
	right:30px;
	z-index:101;
}

label{
	display:block;
	font-size:12px;
	color:#808080;
	margin-top:12px;
	text-align:center;
}


input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea{
	position:relative;
	display:block;
	width:90%;
	padding:7px 5%;
	background-color:#F5F5F5;
}

select{
	position:relative;
	display:block;
	width:90%;
	padding:7px 5%;
	background-color:#F5F5F5;
}

.login span{
	display:block;
	text-align:left;
	margin-top:20px;
	font-size:14px;
	color:#5865F2;
	text-decoration:underline;
	cursor:pointer;
}

.login .login_head{
	display:block;
	border-radius:10px 10px 0px 0px;
	background-color:#4B0150;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
	font-weight:bolder;
}

.form_item_holder{
	position:relative;
	display:block;
	width:70%;
	margin-left:15%;
}

.profile_img{
	border-radius:50px;
	width:48px;
	border:1px solid white;
	margin-top:-10px;
	margin-left:35px;
	position:relative;
}

.profile_img_mob{
	border-radius:50px;
	width:48px;
	border:1px solid white;
	margin-top:5px;
}

.profile_img2{
	border-radius:50px;
	width:100px;
	border:1px solid #8B008B;
	margin-top:5px;
}

.log_fail_main{
	position:absolute;
	z-index:300;
	top:25%;
	background-color:#FFFFFF;
	border-radius:10px;
}

.log_fail_main span{
	font-size:14px;
}

.log_fail_main .fail_head{
	display:block;
	border-radius:10px 10px 0px 0px;
	background-color:#E30B5D;
	color:#FFFFFF;
	text-align:center;
	padding:10px;
	font-weight:bolder;
	
}

.forgot_instruction{
	font-size:12px;
	margin-top:10px;
}

.prov_master{
	position:relative;
	display:block;
	width:100%;
	z-index:200;
}

.provholder{
	position:absolute;
	width:100%;
	z-index:500;
}

.search_holder{
	border:1px solid gray;
	display:block;
	overflow:hidden;
	width:100%;
	background-color:#f2f2f2;
}

.search_head{
	color:white; 
	background-color:#848482; 
	font-size:12px; 
	width:100%;
	padding:10px;
}


.select_class{
	padding:10px;
	cursor:pointer;
	text-align:left;
	font-size:14px;
	width:100%;
}

.check_ring{
	width:130px; 
	height:130px; 
	padding:24px; 
	position:relative; 
	margin:24px auto; 
	border-radius: 50%; 
	border:24px solid #0bb40c;
}

.success_note{
	width:90%; 
	min-height:160px; 
	padding:20px 5%; 
	font-size:16px; 
	color:white; 
	background:#2E1A47; 
	text-align:left;
}

.member_img{
	border:5px solid #583759;
	float:left;
	cursor:pointer;
	margin-bottom:20px;
	border-radius:20px;
	box-shadow: 5px 5px 10px #aaaaaa;
	transition: filter 0.3s ease;
}

.member_img:hover{
	filter: brightness(1.2); /* Increase brightness by 20% */
}

.member_img_holder{
	display:block;
	overflow:hidden;
}

.benefit_detail_img_holder{
	display:block;
	background:black;
	color:yellow;
	overflow:hidden;
	width:100%;
}

.benefit_head{
	font-family: "brush", sans-serif;
	font-weight:bolder;
}

#reg_link{
	padding:20px;
	font-weight:bolder;
	border:1px solid gray;
	color:blue;
}

.order_margin{
	position:relative;
	display:block;
	overflow:hidden;
}

.shadow{
	border:1px solid gray;
	box-shadow:2px 2px 20px gray;
}

.shadow5{
	border:1px solid gray;
	box-shadow:5px 5px 30px black;
}

.pic_holder{
	background:white;
}

.profile_holder{
	position:relative;
	display:block;
	overflow:hidden;
}

.profilex{
	background-color:#461B7E;
	border:1px solid #461B7E;
	border-radius:10px;
	box-shadow:2px 2px 10px gray;
	padding:20px;
	color:white;
}

.profile_line{
	padding:25px 5px 5px;
	border-bottom-style: solid;
	border-bottom-color: #86608E;
	border-bottom-width: 1px;
}

.profile_line span{
	float:right;
}

.logo{
	width:190px;
	margin: 24px 32px;
}

.logo img{
	width:100%;
}

.logo i{
	float:left;
	font-size:24px;
	color:#F5B041;
}

.alveo_img_l{
	position:relative;
	display:block;
	overflow:hidden;
	z-index:100;
	}
.alveo_img_r{
	position:relative;
	display:block;
	overflow:hidden;
	z-index:100;
	
}

.alveo_img_c{
	position:relative;
	display:block;
	overflow:hidden;
	z-index:100;
}

.alveo_icon_l{
	z-index:101;
}
.alveo_icon_r{
	z-index:102;
}

.img_bg{
	position:relative;
	display:block;
	overflow:hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background: white url(img/benefits_bg.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.about_img{
	position:relative;
}

.about_img img{
	position:absolute;
	bottom:0;
}

.herbdesc_holder{
	position:relative;
	overflow:hidden;
	display:block;
}

.d3_img{
	width:96px; 
	border-radius:50%;
}

.d3_img_holder{
	text-align:center;
}


.ben_img{
	width:144px; 
	border-radius:20px;
	border:1px solid #461B7E;
	box-shadow:2px 2px 10px gray;
	margin-bottom:10px;
}

.ben_img_holder{
	text-align:center;
}

.vid_playing{
	position:relative;
}

.vid_gallery{
	position:relative;
}

/* pc laptop*/
@media screen and (min-width: 1101px) {
	.synergy {
		font-size: 90px;
	}

	.herbs {
		font-size: 72px;
	}

	.synergy span{
		font-size: 45px;
		margin-top:-15px;
	}

	.herbs span{
		font-size: 35px;
		margin-top:-5px;
	}
	.main_text{
		left:10%; top:20%;
		width:90%;
	}
	
	.mySlides{
		width:400px;
	}

	.nav_mob{
		display:none;
	}
	
	.bthide{
		display:block;
	}
	
	.burger{
		display:none;
	}
	.logo{
		margin-left:10%;
	}
	.logo i{
		display:none;
	}

	.video_holder{
		width:23%;
		margin:10px 1%;
		height:258px;
	}

	.vid_playing{
		width:40%;
		float:left;
	}
	
	.vid_gallery{
		width:60%;
		float:left;
	}

	.about_img{
		width:46%;
		margin:2%;
		float:right;
	}
	.about_txt{
		width:50%;
		float:right;
		margin-top:100px;
	}

	.order_margin{
		width:60%;
		margin:0% 20%;
	}
	
	.login{
		width:40%;
		margin-left:30%;
	}
	
	.login_close{
		width:40%;
		margin-left:30%;
	}
	
	.log_fail_main{
		width:40%;
		margin-left:30%;
	}
	.member_img{
		margin-left:20px;
		width:46%;
	}
	.member_img_holder{
		width:80%;
		margin-left:10%;
	}
	
	.benefit_detail_img{
		width:50%; float:left;
	}

	.benefit_detail_note{
		width:50%; float:left
	}
	.order_margin{
		width:50%;
		margin-left:25%;
	}
	.pic_holder{
		width:120px;
	}
	
	.benefit_head{
		font-size:50px;
		margin-top:30px;
	}
	
	.profile_holder{
		width:50%;
		margin-left:25%;
	}
	
	.table60{
		width:60%;
		margin-left:20%;
	}
	
	.alveo_img_l{
		width:50%;
		float:left;
	}
	.alveo_img_r{
		width:50%;
		float:right;
	}
	
	.alveo_img_c{
		width:50%;
		float:left;
	}
	
	.alveo_icon_l{
		position:relative;
		width:25%;
		float:left;
	}
	.alveo_icon_r{
		position:relative;
		width:25%;
		float:right;
	}
	
	.beauty_slide{
		float:left;
		width:40%;
	}
	
	.beauty_slide_note{
		float:left;
		width:60%;
	}
	
	.tutorial_img{
		width:auto;
	}
	
	.herbdesc_holder{
		width:70%;
		margin-left:15%;
	}
	
	.herb_holder{
		width:14.6%;
		margin:10px 0.5%;
	}
	
	.herb_holder_det{
		width:225px;
		margin:10px 0.5%;
	}
	
	.d3_img_holder{
		width:15%; float:left;
	}
	
	.d3_text{
		width:85%; float:left; padding:30px 0px;
	}
	
	.ben_img_holder{
		width:20%; float:left;
	}
	
	.ben_text{
		width:80%; float:left; padding:50px 0px;
	}
	
	.ben_main_img{
		width:70%; float:left; padding:0px 0px 60px 0px;
	}
	
	.ben_main_txt{
		width:28%; float:left; padding:60px 1%;
	}
}
/*tablets*/
@media screen and (max-width: 1200px) {
	.synergy {
		font-size: 90px;
	}

	.synergy span{
		font-size: 45px;
		margin-top:-15px;
	}

	.herbs {
		font-size: 72px;
	}

	.herbs span{
		font-size: 35px;
		margin-top:-5px;
	}

	.main_text{
		left:10%; top:20%;
		width:90%;
	}
	
	.mySlides{
		width:250px;
	}

	.nav_mob{
		display:block;
	}
	
	.bthide{
		display:none;
	}
	
	.burger{
		display:block;
	}
	
	.logo{
		margin-left:5%;
	}
	
	.logo i{
		display:block;
	}

	.video_holder{
		width:48%;
		margin:10px 1%;
		height:200px;
	}

	.vid_playing{
		width:55%;
		float:left;
	}

	.vid_gallery{
		width:45%;
		float:left;
	}

	.about_img{
		width:46%;
		margin:2%;
		float:right;
	}

	.about_txt{
		width:50%;
		float:right;
		margin-top:100px;
	}

	.order_margin{
		width:60%;
		margin:0px 20%;
	}
	
	.login{
		width:50%;
		margin-left:25%;
	}
	
	.login_close{
		width:50%;
		margin-left:25%;
	}
	
	.log_fail_main{
		width:50%;
		margin-left:25%;
	}
	.member_img{
		width:46%;
		float:left;
		margin-left:20px;
	}
	.member_img_holder{
		width:100%;
		margin-left:0%;
		margin-top:20px;
		margin-bottom:20px;
	}
	
	.benefit_detail_img{
		width:50%; float:left;
	}

	.benefit_detail_note{
		width:50%; float:left
	}
	.order_margin{
		width:70%;
		margin-left:15%;
	}
	.pic_holder{
		width:108px;
	}
	.benefit_head{
		font-size:35px;
		margin-top:10px;
	}
	.profile_holder{
		width:70%;
		margin-left:15%;
	}
	.table60{
		width:80%;
		margin-left:10%;
	}
	.alveo_img_l{
		width:50%;
		float:left;
	}
	.alveo_img_r{
		width:50%;
		float:right;
	}
	
	.alveo_img_c{
		width:49%;
		float:left;
	}
	.alveo_icon_l{
		position:relative;
		width:25%;
		float:left;
	}
	.alveo_icon_r{
		position:relative;
		width:25%;
		float:right;
	}
	
	.beauty_slide{
		float:left;
		width:40%;
	}
	
	.beauty_slide_note{
		float:left;
		width:60%;
	}
	
	.tutorial_img{
		width:auto;
	}
	
	.herbdesc_holder{
		width:70%;
		margin-left:15%;
	}
	
	.herb_holder{
		width:23%;
		margin:0.5%;
	}

	.herb_holder_det{
		width:225px;
		margin:0.5%;
	}
	
	.d3_img_holder{
		width:15%; float:left;
	}
	
	.d3_text{
		width:85%; float:left; padding:30px 0px;
	}
	
	.ben_img_holder{
		width:25%; float:left;
	}
	
	.ben_text{
		width:75%; float:left; padding:50px 0px;
	}
	
	.ben_main_img{
		width:100%; float:left; padding:0px 0px 0px 0px;
	}
	
	.ben_main_txt{
		width:100%; float:left; padding:48px 10px;
	}
}


/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {  
	.herbs {
		font-size: 72px;
	}

	.synergy {
		font-size: 72px;
	}

	.herbs span{
		font-size: 36px;
		margin-top:-15px;
	}

	.synergy span{
		font-size: 36px;
		margin-top:-15px;
	}

	.main_text{
		left:0%; 
		top:12%;
		width:99%;
	}

	.mySlides{
		width:220px;
	}

	.bthide{
		display:none;
	}
	
	.burger{
		display:block;
	}
	
	.logo{
		margin-left:5%;

	}
	.logo i{
		display:block;
	}

	.video_holder{
		width:48%;
		margin:10px 1%;
		height:244px;
	}

	.vid_playing{
		width:100%;
	}

	.vid_gallery{
		width:100%;
	}
	
	.about_img{
		width:80%;
		margin:10%;
	}

	.about_txt{
		width:100%;
		margin-top:10px;
	}

	.order_margin{
		width:100%;
		margin:0;
	}
	
	.login{
		width:90%;
		margin-left:5%;
	}
	
	.login_close{
		width:90%;
		margin-left:5%;
	}
	
	.log_fail_main{
		width:90%;
		margin-left:5%;
	}
	.member_img{
		width:90%;
	}
	.member_img_holder{
		width:100;
		margin:0;
	}
	.benefit_detail_img{
		width:100%; 
		float:left;
	}

	.benefit_detail_note{
		width:100%; float:left;
	}
	.order_margin{
		width:100%;
		margin-left:0%;
	}
	.pic_holder{
		width:96px;
	}
	
	.benefit_head{
		font-size:30px;
		margin-top:0px;
	}
	.profile_holder{
		width:100%;
		margin-left:0%;
	}
	.table60{
		width:100%;
		margin-left:0%;
	}
	.alveo_img_l{
		width:100%;
		float:left;
	}
	
	.alveo_img_r{
		width:100%;
		float:right;
	}
	.alveo_img_c{
		width:100%;
		float:left;
	}
	
	.alveo_icon_l{
		position:absolute;
		width:50%;
		left:0;
	}
	.alveo_icon_r{
		position:absolute;
		width:50%;
		right:0;
	}
	
	.beauty_slide{
		float:left;
		width:100%;
	}
	
	.beauty_slide_note{
		float:left;
		width:100%;
	}
	.tutorial_img{
		width:100%;
	}
	
	.herbdesc_holder{
		width:98%;
		margin-left:0%;
	}
	
	.herb_holder{
		width:46%;
		margin:10px 1%;
	}
	
	.herb_holder_det{
		width:190px;
		margin:0%;
	}
	
	.d3_img_holder{
		width:100%; display:block;
	}
	
	.d3_text{
		width:100%; display:block; padding:0px 0px;
	}
	
	.ben_img_holder{
		width:100%; display:block;
	}
	
	.ben_text{
		width:100%; display:block; padding:0px 0px;
	}
	
	.ben_main_img{
		width:100%; float:left; padding:0px 0px 0px 0px;
	}
	
	.ben_main_txt{
		width:100%; float:left; padding:48px 10px;
	}
}

/*tabs start*/
.tab {
  overflow: hidden;
  width:100%;
  background-color: #4B0082;
  
/*  #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab button {
  color:#FFFFFF;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 12px ;
  transition: 0.3s;
  font-size: 14px;
}

.buttonx2 {
  color:gray;
  margin-top:20px;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 12px;
  transition: 0.3s;
  font-size: 14px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #8B008B;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #4B0150;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width:100%;
  padding: 10px;
}

.tabcontent2 {
  display: none;
  width:100%;
  padding: 10px;
}

/*tabs end*/
table {
	border-collapse: collapse;
	width: 98%;
	font-size:12px;
	border:1px solid gray;
	padding:0px 1%;
}

.tdhead{
	text-align:center; 
	font-weight:bolder; 
	background-color:#4B0150; 
	color:white;
	padding:10px 0px 10px
}

th, td {
	text-align: left;
	padding: 10px;
}
tr:nth-child(even) {background-color: #F9F6EE;}

.search_input{
	width:95%;
	border:1px solid gray;
	font-size:18px;
	padding:10px;
}

.search_icon{
	position:absolute;
	right:0;
	font-size:20px;
	font-weight:bolder;
	z-index:301;
	border:2px solid blue;
	color:white;
	background:blue;
	padding:5px;
}

.pagination{
	display:block;
	position:relative;
	overflow:hidden;
	text-align:center;
	margin:auto;
	border:1px solid gray;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: dodgerblue;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.del_detail{
	width:100%;
	color:white;
	background:black;
	padding:15px 0px 15px;
	text-align:center;
	font-weight:bolder;
	font-size:15px;
}

.radius20{
	border:1px solid black;
	border-radius:20px;
}

.radius20_head{
	border:3px solid black;
	border-radius:20px 20px 0px 0px;
}

.file_upload{
	border:10px solid gray;
	padding: 10px;
}

.order_input{
	margin:1px auto 5px auto;
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
    border: 1px solid #000;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}


.order_input2{
	margin:1px auto 5px auto;
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
    border: 1px solid #000;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}

.input_area{
	float:left; 
	width:94%; 
}

.symbol_area{
	float:left; 
	width:5%;
	text-align:left;
	font-size:18px; 
	font-weight:bolder;
}

.city_select{
	width:100%;
	display:block;
	overflow:hidden;
}

.content_footer{
	position:relative;
	width:100%;
	margin-top:20px;
	display:none;
	overflow:hidden;
	background-image: linear-gradient(to right, #080808, #080808, #171717, #292929, #2c2c2c);
	padding:30px;
	color:white;
	min-height:200px;
	z-index:600;
	
}

.affiliates{
	width:260px;
	margin-top:10px;
	color:#9B9A96;
	font-size:11px;
	text-decoration:none;
	float:left;
	border-radius:10px;
	padding:10px;
}

.affiliates span{
	color:#9B9A96;
	font-size:12px;
	font-weight:bolder;
	text-decoration:underline;
}

.site_map{
	width:150px;
	float:left;
	margin-top:10px;
	border-radius:10px;
	padding:10px;
	margin-right:40px;
}

.site_map a{
	color:#9B9A96;
	font-size:11px;
	text-decoration:none;
}

.site_map span{
	color:#9B9A96;
	font-size:12px;
	text-decoration:underline;
}

.courier{
	width:150px;
	margin-right:40px;
	float:right;
	color:#9B9A96;
	font-size:11px;
	text-decoration:none;
	margin-top:10px;
	float:left;
	padding:10px;
}

.courier span{
	color:#9B9A96;
	font-size:12px;
	font-weight:bolder;
	text-decoration:underline;
}

.footer_main{
	width:70%;
	margin-left:15%;
}

/*Slideshow-->*/
/* {box-sizing: border-box;}*/
.mySlides2 {display: none;}
/*img {vertical-align: middle;}*/

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.checkbox-wrapper-25 input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
                      -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 15px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
                inset 0 0 10px hsla(0,0%,0%,.5),
                0 0 0 1px hsla(0,0%,0%,.1),
                0 -1px 2px 2px hsla(0,0%,0%,.25),
                0 2px 2px 2px hsla(0,0%,100%,.75);
    cursor: pointer;
    height: 25px;
    padding-right: 25px;
    width: 75px;
    -webkit-appearance: none;
    -webkit-transition: .25s;
}
.checkbox-wrapper-25 input[type="checkbox"]:after {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
                inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
                0 1px 3px 1px hsla(0,0%,0%,.5),
                0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 25px;
    width: 50px;
}
.checkbox-wrapper-25 input[type="checkbox"]:checked {
    background-position: 0 0, 35px 0;
    padding-left: 25px;
    padding-right: 0;
}