/*
 *  CSS designed by Wesley. Taipei, Sep 2021
 *  wes.lee(at)outlook.com
 */

/* ----- RESET ----- */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input {
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
}

fieldset, img {
    border: none;
}

table {
    border-collapse: collapse; 
    border-spacing: 0;
}

html {
    height: auto; 
    min-height: 100%;
}
/* 
article {
    height: 100%; 
    overflow: auto;
} */

body {
    background: #F5F5F5;
    box-sizing: border-box;
    padding: 100px 0 1em;
    color: #000;
    font-family: Helvetica, Arial, "Noto Sans TC", sans-serif; 
    font-size: 106.25%;
    font-weight: 400;
  	line-height: 1.47059;
    text-align: left;
}

.material-icons-outlined {
    vertical-align: middle;
    transform: translateY(-.1em);
}



/* ----- STRUCTURE ----- */

#branding {
    height: 100px;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    border-bottom: 1px solid #E5E5E5;
    position: fixed;
    top: 0;
    z-index: 99;
}

	#forever-home a {
	    display: block; 
	    overflow: hidden; 
	    height: 0; 
	    width: 252px; 
	    margin: 35px auto 0;
	    padding-top: 30px; 
	    background: url(../image/foreverliving-logo.svg) no-repeat 0 0; 
	}

main {
    width: 100%;
    background: #FFF;
}
  #contentpage.productpage main {
    background: #FFF url(//cdn.xuansiwei.com/ahjia11990/1760348228484/bg_watercolor_r__1200-402_c__e6efc7_.jpg?x-oss-process=style/small) no-repeat center 0;
   }

#hero {
	  clear: both;
  	display: flex;
  	align-items:center;
    justify-content:center;
  	width: 100%;
  	height: 320px;
    margin: 0 0 2.5em;
  	background: #FFF url(../image/general.jpg) no-repeat center center;
  	background-size: cover;
  	border-bottom: 8px solid #D4D4D4;
}
	  .Autoship         #hero { background-image: url(../image/Autoship1.jpg); }
	  .ComboPaks        #hero { background-image: url(../image/ComboPaks1.jpg); }
	  .Drinks           #hero { background-image: url(../image/Drinks1.jpg); }
	  .Nutritional      #hero { background-image: url(../image/Nutritional1.jpg); }
	  .WeightManagement #hero { background-image: url(../image/WeightManagement1.jpg); }
	  .BeeProducts      #hero { background-image: url(../image/BeeProducts1.jpg); }
	  .PersonalCare     #hero { background-image: url(../image/PersonalCare1.jpg); }
	  .SkinCare         #hero { background-image: url(../image/SkinCare1.jpg); }
	  .infinite         #hero { background-image: url(../image/infinite1.jpg); }
	  .Logic            #hero { background-image: url(../image/Logic1.jpg); }
	  .Sonya            #hero { background-image: url(../image/Sonya1.jpg); }
	  .Accessories      #hero { background-image: url(../image/Accessories.jpg); }
	
    #hero h1 {
        color: #FFF;
        font-size: 5em;
        text-align: center;
        text-shadow: 2px 2px 8px #000;
    }
 
#mainContent {
    padding: 0 1em 1em;
}

#siteInfo {
  clear: both;
  padding: 1.5em 1em 1em;
  color: #010101;
  text-align: left;
}

#siteInfo section.siteInfoContent {
  display: flex;
  padding: 0 0 1em;
}
#siteInfo article {
  flex: 1;
  margin: 0 auto;
  padding: 65px 0 1.5em;
  background: url(//cdn.xuansiwei.com/ahjia11990/1760164906619/footer_staticpage_image_254x56_1683007192379_r__254-56_c__040404_.svg) no-repeat 0 0;
  background-size: 248px auto;
}

#siteInfo ul {
  flex: 0 0 25%;
  padding: 10px;
  list-style: none;
  margin: 0;
}
#siteInfo p.legcy { }


article.prodsupp h3 ~ * {line-height: 0%;}
  .proddesc div.prodsupp {line-height: 0%;}


.maxWidthControl {
    max-width: 1120px;
    margin: 0 auto;
}


/* ----- NAV ----- */

a { text-decoration: underline; }

a:visited, 
a:link { color: #1D1D1F; }

a:hover, 
a:active { text-decoration: none; color: #6C6C6C; }

  a.btn {
      display: block;
      border: 3px solid #333;
      max-width: 100%;
      padding: .3em 1em;
      margin: 1em 0;
      color: #000;
      text-decoration: none;
  }

            .prodsupp a.btn {
              margin: 1em auto;
              padding: 1em;
              max-width: 75%;
              line-height: 1em;
              text-align: center;
              color: #000;
              background: #F7C744;
              border: none;
            }

    a.btn:hover, a.btn:focus {
      background: #333;
      color: #FFF;
      transition: background-color .3s;
    }
    a.download::before {
      content: "cloud_download";
      font-family: 'Material Icons Outlined';
      -webkit-font-feature-settings: 'liga';
      vertical-align: middle;
      transform: translateY(-.1em);
      text-decoration: none;
  }


nav ul { list-style: none; }
   #branding nav li, #siteInfo nav li { display: inline-block; }

nav header { display: none; }

#glNav { display: none; }

#suppNav { float: right; margin: -25px 1em 0 .5em; }
  #suppNav a { margin: 0; padding: .5em;}
  #suppNav a .label { margin-left: .2em; }
  #suppNav a.join { display: none; }
  

#mainNav { 
  clear: both; 
  display: block; 
  width: 100%; 
  padding: 1px 0;
  /* height: 100%; */
  background: #FFF; 
  text-align: center;
}
  #mainNav ul { padding-right: 1em; overflow: auto; white-space: nowrap; }
  #mainNav li { margin:0; padding: 0; display: inline-block; }
  #mainNav li a { display: block; margin: 0; padding: .8em; color: #000; text-decoration: none; transition: background-color .3s; }
  #mainNav li a:hover, #mainNav li a:active { background: #E5E5E5; }
  #mainNav li a.actived { background: #FFC600; font-weight: 500; }

#breadcrumb { 
    clear: both; 
    display: block;
    width: 100%; 
    padding: 1em 0; 
    border-top: 8px solid #D4D4D4; 
    border-bottom: 1px solid #CCC;
}
  #breadcrumb li::after {
      content: "arrow_right";
      font-family: 'Material Icons Outlined';
      -webkit-font-feature-settings: 'liga';
      vertical-align: middle;
      transform: translateY(-.1em);
  }

  #siteInfo nav ul { margin: 0; padding: 0; }
  nav.socialLinks li { display: inline-block; }
  #siteInfo a { color: #000; text-decoration: none;}
  #siteInfo a:hover { text-decoration: underline; }
  a.icon-social {
    display: inline-block;
    width: 25px;
    height: 0;
    padding-top: 25px;
    margin: 0;
    background: url(../image/icon_social.svg) no-repeat;
    background-size: 425% auto;
    overflow: hidden;
    vertical-align: text-bottom;
  }
  a.fb { background-position:0 0;}
  a.ig { background-position:-26px 0;}
  a.yt { background-position:-51px 0;}
  a.line { background-position:-78px 0;}


  



/* ----- STYLE ----- */

h1, h2, h3, h4 { font-weight: 900; }
h3, h4 { font-weight: 500; font-size: 1.2em; }

h2 + * { margin-top: .8em; }
h3 + *, h4 + *  { margin-top: .5em; }

	#mainContent h2 { font-size: 1.5em; padding: .7em 0 1.2em; clear: left; }
	.new h2 { font-size: 1.5em; color: #D9987A; padding: .7em 0 1.2em; clear: left; }

p { margin-bottom: 1em; }
.meta { color: #9A9A9A; }

.highlight, .error { color: #B74B4B; }
.highlight-label { background: #B74B4B; color: #FFF; font-size: .8em; padding: .2em .5em; }
    .cards-showcase .highlight-label { background: #B74B4B; color: #FFF; margin: 0 0 0 .5em; padding: .2em .5em; font-weight: 300; }

img.social-profile { border-radius: 50%; }
.proddesc a[target="_blank"]::after {
    content: "fit_screen";
    font-family: 'Material Icons Outlined';
    -webkit-font-feature-settings: 'liga';
    margin-left: .5em;
    text-decoration: none;
    display: inline-block;
}

.sep { margin-top: 1.5em; padding-top: 1em; border-top: 1px solid #ccc;}



/* ----- LIST ----- */

article ul,
article ol { margin: 0 0 1em; padding: 0 1.5em; }

.subList { width: 99%; margin: 0 0 2em; border-top: 1px solid #D5C5B2; border-left: 1px solid #D5C5B2; background: #FFF;}
 .subList th, .subList td { border-bottom: 1px solid #D5C5B2; border-right: 1px solid #D5C5B2; padding: .5em 1em; text-align: center; }
 .subList th { background: #F8F5F2; font-weight: bold; }
 .subList th[scope=col] { padding: 0.7em; background: #EFE9E2;}
 .subList td.highlight { border-left: 1px solid #D5C5B2; }

.certifList { width:100%; margin: 0 0 2em; border-top: 1px solid #D5C5B2; border-right: 1px solid #D5C5B2;}
.certifList th, .certifList td { border-bottom: 1px solid #D5C5B2; border-left: 1px solid #D5C5B2; padding: .5em 1em; }
  .certifList th { background: #F8F5F2; color: #333;	font-weight: bold; white-space: nowrap; }
	.certifList th[scope=col] { text-align: center; padding: 0.7em; background: #EFE9E2; border-bottom: 1px solid #D5C5B2; }
	.certifList th[scope=row] { text-align: center; font-weight: normal; }
	.certifList td.highlight { border-left: 1px solid #D5C5B2; }
  .certifList th img {width: 70px;}

.tighten th, .certifList td { padding: .5em; text-align: center; vertical-align:middle; line-height:normal; }
.tighten th { vertical-align:bottom;}


.cards-content {
    list-style: none; 
   
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    margin: 0;
    padding: 0; 
}
  .cards-content li {
    flex: 0 1 calc(25% - 2em);
    margin: 0 .5em 1em; 
    padding: 1.5em;
    background: #E5E5E5;
    text-align: center;
  }
  .how-to-buy h3 { margin: 0 0 1em;}
  .how-to-buy h3 img { max-width: 80px;}
  .how-to-buy img { max-width: 100%;}
  .cards-content h3 .material-icons-outlined { font-size: 4em;}
  


/* ----- Product ----- */

ul.cards-showcase { 
  list-style: none; 
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
  margin: 0;
  padding: 0; 
  }
  .cards-showcase li { 
    flex: 0 1 calc(25% - 1.6em);
    margin: 0 1.6em 2em 0; 
    padding: 0; 
    line-height: normal;
    position: relative;
  }
  .cards-showcase span.highlight-label {
    position: absolute;
    top: 1.5em;
    left: -0.5em;
  }
 
  .cards-showcase img { max-width: 100%; padding: 0; margin: 0; }
  h3.pname { font-size: 1em; line-height: normal; margin:0; }
  .price { margin-bottom: 1em;}
  .cards-showcase li a { display: block; background: #F2F2F2; margin: 0 0 .5em; padding: 1.8em 1em; border-radius: 8px; transition: opacity .3s; }
  .cards-showcase a:hover, .cards-showcase a:active { opacity: 50%; }
  .cards-showcase .meta { font-size: .9em; font-weight: 100; }


.prodtitle .prodinfo, .proddesc { clear: both; }

.prodtitle { 
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    margin: 0 -1em 4em;
    padding: 1.7em 0 .8em;
    text-align: center;
    position: sticky;
    top: 90px;
    z-index: 50;
}
    .prodtitle h1 { font-size: 2em; line-height: 1.1em; }
    .prodtitle h1 span { color: #808080; font-size: .7em; font-weight: 100; }
    
  .prodinfo img { max-width: 50%; margin: 0 1.5em 2em 0; float: left;}
  p.prodvg { color: #74AA50; }
  p.prod-certif { margin-top: 3em; margin-bottom: .5em; }
   .prod-certif + p img { height: 60px; margin-right: .5em; }

  .proddesc h3,
  .prodmedia h3,
  .prodsupp h3 {
      background: #E6E6E6;
      margin: 2em 0 1em;
      padding: .5em 0;
      font-size: 1em;
      text-align: center;
      clear: both;
  }

  .proddesc img, .prodsupp img  { max-width: 100%; }
  .prodsupp img.rwd  { max-width: 49.5%; }
  .proddesc img.recommand { max-width: 500px; }
  
  p.proding { float: left; max-width: 55%;}
    .proddesc img.prodfact { float: right; max-width: 40%; margin-bottom: 1em;}
 
ol.prodfaq { margin-left: 1em; margin-right: 0; padding-right: 0; }
  ol.prodfaq li { margin-bottom: 1em; }
  ol.prodfaq p { margin-bottom: 0; text-decoration: underline; }
  ol.prodfaq li > div { background: #f5f5f5; padding: 1em; height: 100%; overflow: auto; }

.faqclosed { cursor:pointer; }
.faqopen { zoom: 1; font-weight: bold; }


.prodmedialist {
  list-style: none;
  padding: 0;
}
  .prodmedialist li::before {
    content: "file_download";
    font-family: 'Material Icons Outlined';
    -webkit-font-feature-settings: 'liga';
    vertical-align: middle;
    transform: translateY(-.1em);
  }  
  .prodmedialist a { padding: .5em; }

.cards-stock {
  list-style: none; 
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
  margin: 0;
  padding: 0; 
  }

  .cards-stock li { 
    flex: 0 1 calc(20% - 2em);
    margin: 0 0 2em 0; 
    padding: 1.5em 1em;
    line-height: 100%;
    }
  .cards-stock h3 { font-size: 1em; }

 .cards-stock img { max-width: 160px; margin: 0 0 1em; }
 .cards-stock p + p { margin-bottom: .5em; }


.cards-showcase-accessories,
.cards-showcase-certifs {
  list-style: none; 
  height: 100%;
  display: block;
  padding: 1.5em 0 0; 
  }

  .cards-showcase-accessories li,
  .cards-showcase-certifs li { margin: 0; padding: 1.5em 0; clear: left; border-top: 1px solid #D4D4D4; line-height: normal; }

  .cards-showcase-accessories h3,
  .cards-showcase-certifs h3 { font-size: 1.1em; font-weight: 700;  }
 
  .cards-showcase-accessories .meta { font-size: .9em; font-weight: 100; margin-bottom: 1em; }

 .cards-showcase-accessories img,
 .cards-showcase-certifs img { float:left; width: 120px; margin: 0 0 1em; }
 
 .cards-showcase-accessories img ~ *,
 .cards-showcase-certifs img ~ * { margin-left: 180px; }

 .cards-showcase-accessories p + p,
 .cards-showcase-certifs p + p { margin-bottom: .5em; }
  #phaseout .cards-showcase-accessories h3 + p { color: #9A9A9A; text-decoration: line-through; }
  #phaseout .cards-showcase-accessories h3 + p::after,
  .cards-showcase-accessories p s::after { content:"售完"; background:#B74B4B; color: #FFF; font-size: .8em; padding: .1em .3em; margin-left: .5em; display: inline-block; text-decoration: none;}



/* ----- Tabs ----- */

#tabs {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1em 0 0;
}
.nav-tabs {
  list-style: none;
  padding: 0 0 1.5em;
}
  .nav-tabs li {
    display: inline-block;
  }
  .nav-tabs li a {
    display: block;
    padding: .5em 1em;
    margin: 0 .2em 1em;
    background: #E5E5E5;
    border-radius: 9px;
    text-decoration: none;
  }
    .nav-tabs li:last-child a {
      background: none;
      text-decoration: underline;
    }
    li.ui-tabs-active a { background: #FFC600; font-weight: 500; }

.tabs-content {
  padding: 1em 0 0;
}



/* ----- Meida ----- */

.loader { display: block; width: 132px; margin: 0 auto; text-align: center; }
.loading {
    background: url(../image/loader_bottle.svg) no-repeat center bottom;
    width: 132px;
    height: 180px;
    display: block;
}
/*.loading {
  border: 10px solid #f3f3f3; 
  border-top: 10px solid #FFC600; 
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  margin: 1em auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
*/

.intrinsic-container { position: relative; overflow: hidden; height: 0; }
  .intrinsic-container-16x9 { padding-bottom: 56.25%; } /* 16x9 Aspect Ratio */
  .intrinsic-container-4x3 { padding-bottom: 75%; } /* 4x3 Aspect Ratio */
  .intrinsic-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }


/* ----- Autoship Extra ------ */
  
    #categorypage.Autoship .prodid3,
    #contentpage.Autoship .prodid3,
    #categorypage.Autoship p.price,
    #categorypage.Autoship p.meta {
      display: none;
    }
  
    .order-now-btn {
      display: block;
      width: auto;
      margin: 1em;
      padding: .6em 4em;
      background: #F7C744;
      text-decoration: none;
      text-align: center;
      font-weight: bold;
    }
  
    .order-now-btn strong { 
      color: #B74B4B;
    }
  
    .order-now-btn:hover {
      color: #F7C744;
      background: #000;
  }

/* ----- RWD ----- */

@media only screen and (max-width: 767px) 
{

body { padding-top: 60px; }
#branding { height: 60px; }
	#forever-home a { width: 160px; padding-top: 30px; margin: 20px 1em 0 1em; }

#mainNav li a { padding: .5em; margin:0; transition: background-color .3s; }

#suppNav { float: right; margin: -33px 0 0; padding: 0; }
  #suppNav a { margin: 0; padding: .5em .5em .5em 5px;}
  #suppNav a .label { display: none; }
  #suppNav span.material-icons-outlined { font-size: 1.5em; }


main { padding: 0 0 1em; }

#hero { height: 170px; margin: 0; }
  #hero h1 { font-size: 3em; }


#siteInfo section.siteInfoContent,
  #siteInfo p {
      display: block;
      text-align: center;
    }
    #siteInfo article {
      background-position-x: center;
    }

#breadcrumb { padding: .5em 0; }

#breadcrumb ul { padding-left: .5em; }

  #breadcrumb li::after {
      content: none;
  }
  #breadcrumb li a::before {
      content: "arrow_back_ios";
      font-family: 'Material Icons Outlined';
      -webkit-font-feature-settings: 'liga';
      vertical-align: middle;
      transform: translateY(-0.1em);
  }
  #breadcrumb a { margin-left: .5em; text-decoration: none; }

.proddesc img.recommand, .prodsupp img.rwd { max-width: 100%; }
p.proding, .proddesc img.prodfact { float: none; max-width: 100%; }

.cards-stock { display: block; padding: 1.5em 0; }
 .cards-stock li { margin: 0; padding: 1em 0; clear: left; border-bottom: 1px solid #E5E5E5; }
 .cards-stock li:first-child { border-top: 1px solid #E5E5E5; }
 .cards-stock img { float:left; max-width: 100px; }
 .cards-stock img ~ * { margin-left: 140px; }


ul.cards-showcase  { justify-content: space-between; padding-top: 1em; }
  .cards-showcase li { 
    flex: 0 1 calc(50% - .5em);
    margin: 0 0 1.5em;
  }
  .cards-showcase span.highlight-label {
    position: absolute;
    top: 1em;
    left: -0.5em;
  }

.cards-content { justify-content: space-between; padding-top: 1em; }
  .cards-content li { 
    flex: 1 1 calc(30% - 0em);
    margin: 0 1em 1.5em;
  }
  .cards-content li:first-child { flex: 1 1 100%; }
  .how-to-buy img { max-width: 45%;}


.prodtitle { margin: 0 -1em 0; padding: .5em 0; text-align: center; position: sticky; top: 60px; }
  .prodtitle h1 { font-size: 1.5em; line-height: normal; }
  .prodtitle h1 span { font-size: .7em; }
  
  .prodimg { padding: 2em; margin: 0 0 1.5em; }  
  .prodinfo img { max-width: 100%; margin: 0; float: none; margin: .5em 0; }

  p.prod-certif { margin-top: 2em;}

  .prodmedialist li { padding: .5em; }


  .cards-showcase-accessories li,
  .cards-showcase-certifs li { text-align: center; }

  .cards-showcase-accessories img { float: none; width: 180px; margin: 0 0 1em; }

  .cards-showcase-accessories img ~ *,
  .cards-showcase-certifs img ~ * { margin-left: 0; }

  .cards-showcase-accessories p.meta ~ *,
  .cards-showcase-certifs h3 ~ * { text-align: left;}

  .cards-showcase-certifs img { float: none; width: 160px; margin: 0 0 1em; }

}<!-- /media -->

@media only screen and (max-width: 767px) and (orientation: landscape)
{
#suppNav { float: right; margin: -25px 1em 0 .5em; }
  #suppNav a { margin: 0; padding: .5em;}
  #suppNav a .label { margin-left: .2em; }
  #suppNav span.material-icons-outlined { display: inline-block; }

}<!-- /media -->

/* ----- FONT ----- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); /* Noto Sans TC */