@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;
}

.bg_trans{
	background: rgba(0,0,0,.25);
}

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

.red{
	color:#E30B5D;
}

.lred{
	color:#ED9898;
}

.green{
	color:#00FF7F;
}

.white{
	color:#FFFFFF;
}

.yellow{
	color:#f6c768;
}

.black{
	color:#000;
}

.violet{
	color:#800080;
}

.gray{
	color:#4D4D4F;
}

.maroon{
	color:#b70000;
}

.orange{
	color:#ffcb4f;
}

.gold{
	color:#f6c768;
}
/*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: -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: white url(img/leaf3.webp);
	background-repeat: repeat;
}
*/

   :root{
      --bg:#0b0b0b;
      --panel:rgba(255,255,255,.06);
      --panel2:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.12);
      --text:#f4f4f4;
      --muted:rgba(255,255,255,.72);
      --gold:#f6c768;
      --gold2:#d9a441;
      --radius:18px;
      --radius2:24px;
      --shadow: 0 18px 55px rgba(0,0,0,.55);
      --max: 1050px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      color:var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 700px at 20% 0%, rgba(246,199,104,.14), transparent 60%),
        radial-gradient(900px 700px at 80% 10%, rgba(116,200,108,.10), transparent 60%),
        linear-gradient(180deg,#0c0c0c,#070707 60%, #050505);
    }

.relative{
	position:relative;
}

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

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

.times{
	font-family: "Times New Roman", Times, Georgia, serif;
}

.txt_white{
	color:#fffff;
}

.txt_black{
	color:#000;
}

.txt_amber{
	color:#F5B041;
}

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

.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:400px;
	position:relative;
	overflow:hidden;
	display:none;
	padding:0px 0px 0px 0px;
	width:100%;
/*	margin-bottom:40px;
	margin-top:80px;*/
}

#home1{
	z-index:100;
	width:100%;
	margin-top:-50px;
}

.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:right;
	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:40px;
	top:40px;
}

.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:96px;
	font-size: 14px;
	margin: 0px 5px;
	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{
	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;
    }
}

.foot_holder{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* image container */
.popupWrapper {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Image container */
.popupContainer {
    position: relative;
	min-width:200px;
	min-height: 200px;
    max-width: 90%;
    max-height: 98%;
    display: inline-block;
    padding: 0;           /* ensure no padding */
    margin: 0;            /* ensure no margin */
}


.popupContainer_head{
	display:block;
	border-radius:10px 10px 0px 0px;
	background-color:rgba(11,8,66,0.95);
	color:#FFFFFF;
	text-align:center;
	padding:10px;
	font-weight:bolder;
	
}

.popupTextContainer{
	background:rgba(48,48,48,0.95);
	display: block;
    width: 100%;
    max-height: 98%;
    margin: 0;            /* remove default spacing */
    padding: 20px;
	font-size:14px;
	display:block;
	border-radius:0px 0px 10px 10px;
}
/* The image */
.popupImage {
    display: block;
	width:360px;
    max-width: 98%;
    max-height: 98%;
    margin: 0;            /* remove default spacing */
    padding: 0;
}

/* Close button EXACTLY on the corner */
.closePopup {
    position: absolute;
    top: 0;               /* <-- no gap */
    right: 5px;             /* <-- no gap */
    font-size: 28px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    padding: 2px 8px 4px 8px;     /* button padding only */
    background: rgba(0,0,0,0.8);
    border-radius: 4px;
    text-shadow: 0 0 4px black;
    z-index: 12000;
}


.menu_social{
	color:#ffcb4f; 
	text-decoration:none; 
	font-size:36px; 
	text-align:center; 
	position:absolute; 
	bottom:10px; 
	z-index:301; 
	left:10px;
	margin:10px;
	padding: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:20px;
	font-family: "times", sans-serif;
	text-align:center;
	padding:5px;
	color:#f6c768;
	margin:36px auto auto auto;
}

.herb_holder{
	float:left;
	background-color:#1a1a1a;
	height:300px;
	position:relative;
	box-shadow: 2px 2px 4px #d9d9d9;
	border:1px solid #f2f2f2;
	border-top-right-radius: 25px;
	border-bottom-left-radius: 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:#efeded;
	height:150px;
	position:absolute;
	top:0;
	border: 1px solid #f2f2f2;
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	text-align:center;
	z-index:99;
}

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

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

.herb_text{
	margin:170px 10px 10px 10px;
	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:10px;
	background-color:#F5B041;
	border: 1px solid #F5B041;
	border-radius:25px;
	padding:5px 10px;
	cursor:pointer;
	color:#000000;
	text-decoration:none;
}

/* 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%;
}

/* Popup background */
#videoPopup {
	position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;               /* hidden initially */
    z-index: 999999;

    /* perfect centering */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Close button */
#closeVideo {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 9999999; /* highest */
    font-size: 48px;
    font-weight: bold;
    color: white;
    cursor: pointer;
	padding:10px;
}

/* Popup content box */
#videoContainer {
    position: relative;
    width: 90%;
    z-index: 999999; /* same high index */
}

.vidcontR{
	max-width:500px;
}

.vidcontL{
	max-width:360px;
}

.vidcontS{
	max-width:600px;
}

.videoWrapper_S {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* square aspect ratio  (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.videoWrapper_R {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio  (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.videoWrapper_L {
    position: relative;
    width: 100%;
    padding-bottom: 160%; /* 16:9 aspect ratio  (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.videoWrapper_S iframe,
.videoWrapper_L iframe,
.videoWrapper_R iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video_holder{
	float:left;
	overflow:hidden; 
	cursor:pointer; 
	position:relative; 
	z-index:299;
	color:white;
	border-radius:20px;
	border: 1px solid gray;
}

.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:10px;
	top:10px;
	z-index:1200;
	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;
	text-align:center;
	overflow:hidden;
	position:relative;
	background:#695D5D;
}

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

label{
	display:block;
	font-size:12px;
	color:#CCC4C4;
	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:500px;
	max-width:96%;
	margin:20px auto;
}

.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:10px;
	background-color:rgba(255,255,255,.08);
	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:#780C0C;
	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;
	margin-top:72px;
}

.search_holder{
	margin-top:-20px;
	border:1px solid gray;
	display:block;
	overflow:hidden;
	width:100%;
	max-width:800px;
	background:#464a47;
}

.search_head{
	color:white; 
	background-color:#181a19; 
	font-size:14px; 
	width:100%;
	padding:10px;
}


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

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

.check_ring2{
	width:72px; 
	height:72px; 
	padding:24px; 
	position:relative; 
	margin:12px auto; 	
	border-radius: 50%; 
	border:8px solid #0bb40c;
}

.success_note{
	width:100%; 
	min-height:190px; 
	padding:10px; 
	font-size:16px; 
	color:white; 
	text-align:left;
}

.memb_tab{
	position:absolute;
	bottom:10px;
	right:10px;
}

.member_img{
	position:relative;
	float:left;
	margin-bottom:20px;
	border-radius:20px;

}

.member_img img{
	border-radius:20px;
	width:100%;
}
.member_img:hover{
	filter: brightness(1.2); /* Increase brightness by 20% */
}

.member_img_holder{
	display:block;
	overflow:hidden;
	background: rgba(255,255,255,.05);
}

.benefit_detail_img_holder{
	display:block;
	background:#1A0136;
	overflow:hidden;
	width:100%;
}

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

#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 #4D4A4A;
	box-shadow:2px 2px 2px #4D4A4A;
}

.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;
	cursor:pointer;
}

.profile_line span{
	float:right;
}

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

.logo img{
	width:100%;
	float:left;
}

.logo span{
	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{
	display:block;
	overflow:hidden;
	z-index:100;
	top:0;
}

.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_bg1.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	border:1px solid #728b8c;
}

.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%;
	margin:auto;
}

.d3_img_holder{
	text-align:center;
}


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

.ben_main_img{
	border:1px solid #728b8c;
}

.ben_img_holder{
	text-align:center;
}

.vid_playing{
	position:relative;
}

.vid_gallery{
	position:relative;
	width:100%;
}

.genHolder{
	display:block;
	overflow:hidden;
	margin:0px auto auto auto;
	background:rgba(255,255,255,.05);
}

/* pc laptop*/
@media screen and (min-width: 1101px) {
	.image_v{
		width:100%;
		display:block;
	}
	
	.image_h{
		display:none;
	}
	
	.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:14%;
		margin:10px 1%;
		height:250px;
	}

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

	.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:1.3333%;
		width:32%;
	}
	.member_img_holder{
		width:98%;
		margin-left:1%;
	}
	
	.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{
		position:absolute;
		width:80%;
		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 0px 0px;
	}
	
	.ben_main_txt{
		width:27%; float:left; padding:40px 1%;
	}
	
	.genHolder{
		width:80%;
	}
}
/*tablets*/
@media screen and (max-width: 1200px) {
	.image_v{
		width:100%;
		display:block;
	}
	
	.image_h{
		display:none;
	}
	
	.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:23%;
		margin:10px 1%;
		height:230px;
	}

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

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

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

	.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%;
		margin-left:4%;
	}
	
	.member_img img{
		width:100%;
	}
	
	.member_img_holder{
		width:98%;
		margin-left:1%;
		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{
		position:absolute;
		width:90%;
		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;
	}
	
	.genHolder{
		width:90%;
	}
}


/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {  
	.foot_holder{
		grid-template-columns: repeat(1, 1fr);
	}
	.image_h{
		width:100%;
		display:block;
	}
	
	.image_v{
		display:none;
	}
	
	
	.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%;
	}

	.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:95%;
		margin-left:5%;
	}
	.member_img_holder{
		width:100%;
		margin:0px;
	}
	.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:90%;
		position:absolute;
		left:0;
	}
	
	.alveo_icon_l{
		position:relative;
		width:45%;
		left:0;
	}
	.alveo_icon_r{
		position:relative;
		width:45%;
		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 20px;
	}
	.genHolder{
		width:100%;
	}

}

/*tabs start*/
.tab {
  position:fixed;
  top:80px;
  z-index:1000;
  overflow: hidden;
  width:100%;
  background: rgba(60,60,60,.72);
  border:1px solid rgba(116,200,108,.20);
  padding:0px 10px;

}

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

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

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

.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;
}
/* Style the tab content */
.tabcontent {
  display: none;
  width:100%;
}

.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%;
	background-color: #4A4848;
}

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

th, td {
	text-align: left;
	padding: 10px;
}

tr{border:1px solid #B5B5BD;}
/*tr:nth-child(even) {background-color: #F9F6EE;}*/

.search_input{
	width:100%;
	display:block;
	border:1px solid gray;
	font-size:18px;
	padding:15px;
	margin-left:20px;
	margin-bottom:5px;
}

.search_icon{
	position:absolute;
	left:0;
	font-size:24px;
	z-index:301;
	border:1px solid black;
	color:white;
	background:white;
	padding:5px;
}

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

.pagination a {
  color: gray;
  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%;
	overflow:hidden;
	background-image: linear-gradient(to right, #080808, #080808, #171717, #292929, #2c2c2c);
	padding:0px;
	color:white;
	min-height:200px;
	z-index:100;
	
}

.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;
}