/* CSS Document */
/*=========================================
Stylesheet for Webful MarketPlace
==========================================*/
/* ------------------------------------------ */
/* TABLE OF CONTENTS
/* ------------------------------------------ */
/* 01 - General & Basic Styles
/* 02 - Top Bar CSS Starts
/* 03 - HEADER CSS Starts
/* 04 - Banner CSS starts
/* 05 - Categories Navigation
/* 06 - widgets CSS
/* 07 - Featured areas starts.
/* 08 - Pricing Tables Starts
/* 09 - Testimonials Section
/* 10 - Useful Elements CSS
/* 11 - Customer Account CSS
/* 12 - 404 Page CSS Starts
/* 13 - Shop stylings
/* 14 - Open Shop Landing Page
/* 15 - Blog Posts starts
/* 16 - Products CSS
/* 17 - New Items section
/* 18 - Suggested Stores Section
/* 19 - Single Store CSS
/* 20 - Product Page CSS
/* 21 - Content Blocks CSS Starts.
/* 22 - Page loading animation
/* 23 - Information Boxes
/* 24 - Content Box
/* 25 - Call to Action
/* 26 - Footer
/* 27 - Media Queries
*/
/*-------------------------
01 - General & Basic Styles
-------------------------*/
body {
padding: 0;
margin: 0;
font-family: CenturyGothic;
font-weight: normal;
font-style: normal;
font-size:100%;
line-height: 25px;
color:#5d5d5d;
background-color:#fff;
}
h1, h1 a {
font-size: 2rem;
margin-bottom: 15px;
}
h2, h2 a {
font-size: 1.75rem;
}
h3, h3 a {
font-size: 1.50rem;
}
h4, h4 a {
font-size: 1.25rem;
}
h5, h6, h5 a, h6 a {
font-size:1rem;
padding-top:1px;
}
label, p, ul, ol, a, blockquote, input, textarea, select, [type=date], [type=text], [type=email], span{
font-size: 0.93rem;
line-height:25px;
color:#000000;
}
h1,h2,h3,h4,h5,h6, h2 a, h3 a, h4 a, h5 a, h6 a, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, .product-title a {
font-family: CenturyGothic, sans-serif;
font-weight:bold;
color:#4A4A4A;
}
a:hover {
color:#f79800;
}
iframe {
width:100%;
border:0px;
}
.button {
text-transform:uppercase;
font-weight: bold;
}
.module {
margin-bottom:5px !important;
}
.inner-padding {
padding-top:25px;
padding-bottom:25px;
}
.button.primary {
background-color:#f79800;
}
.button.primary:hover {
background-color:#FEA821;
}
.button:hover {
background-color:#FEA821;
}
.button.secondary {
background-color:#0f99de;
}
.button.secondary:hover {
background-color:#f79800;
}
/*-------------------------
General & Basic Styles End
-------------------------*/
/*-------------------------
02 - Top Bar CSS Starts
------------------------*/
.top-info-bar {
background-color:#fff;
}
.top-info-bar .menu li a {
border-right:1px solid #ededed;
color: #000000;
text-align: center;
}
.top-info-bar .menu li:last-child a {
border-right:0px;
}
.top-info-bar .menu .is-active {
background-color:#FEA821;
color:#FFF;
}
.is-dropdown-submenu {
min-width:180px;
border:1px solid #ededed;
}
.is-dropdown-submenu li a {
padding:10px !important;
}
.top-info-bar .dropdown.menu>li.is-dropdown-submenu-parent>a:after {
border-color: #5d5d5d transparent transparent;
}
.top-info-bar .dropdown.menu>.is-active.is-dropdown-submenu-parent>a:after {
border-color: #fff transparent transparent;
}
.top-info-bar .dropdown.menu>.is-active.is-dropdown-submenu-parent>a {
color:#fff;
}
/*-------------------------
Top bar CSS ends
------------------------*/
/*-------------------------
03 - HEADER CSS Starts
-------------------------*/
.header {
background-color:#fff;
}
.top-bar-title {
padding:10px;
background-color:#f79800;
margin-top:9px;
margin-bottom:9px;
margin-right:0px;
position:relative;
}
.logo {
max-width: 100px;
padding-top:5px;
}
.top-bar-title .menu-icon {
color:#FFF;
}
.top-bar-title:hover {
background-color:#0f99de;
}
.main-search-form {
position:relative;
margin-top:20px;
}
.main-search-form input[type=text] {
margin-bottom:0px;
}
.main-search-form .button {
font-size:1.25rem;
padding:8px;
position:absolute;
top:0px;
right:0px;
margin-bottom:0px;
}
.main-search-form select {
width:150px;
position:absolute;
top:0px;
right:36.58px;
margin-bottom:0px;
}
.my-account-title {
padding:7.5px;
border-top:1px solid #FFF;
border-right:1px solid #FFF;
border-left:1px solid #FFF;
border-bottom:0px;
}
.my-account-title.hover {
border-top:1px solid #ededed;
border-right:1px solid #ededed;
border-left:1px solid #ededed;
border-bottom:0px;
}
.my-account-holder {
position:relative;
margin-top:13px;
}
.my-account-holder a {
padding-left:10px;
padding-right:10px;
line-height:16px;
display:block;
float:left;
}
.my-account-holder .special-margin {
margin-bottom:7px;
}
.links {
max-width:190px;
}
.cart-link {
width:80px;
}
.cart-link a {
line-height:39px;
}
.user-icon {
font-size:39px;
line-height:39px;
margin-right:10px;
}
.cart-holder .dropdown-pane {
min-width:300px !important;
}
.cart-holder .dropdown-pane .button {
margin-bottom:0px;
}
.account-wrap .dropdown-pane {
max-width:211px;
border-top:0px;
border-left:1px solid #ededed;
border-right:1px solid #ededed;
border-bottom:1px solid #ededed;
}
.my-account-holder .vertical {
border-top:1px solid #ededed;
}
.my-account-holder .vertical li a {
width:180px;
padding-left:1rem;
padding-right:1rem;
}
.my-account-holder .vertical li a:hover {
background-color:#f79800;
color:#FFF;
}
/*-------------------------
HEADER CSS Ends
-------------------------*/
/*------------------------
04 - Banner CSS starts
--------------------------*/
.banner {
padding-top:0px;
}
.tp-bannertimer {
height: 5px;
background-color: rgba(166, 216, 236, 1.00);
}
.main-title-banner {
z-index: 6;
min-width: 600px;
max-width: 600px;
white-space: normal;
}
.tp-caption.Newspaper-Subtitle, .Newspaper-Subtitle {
color: rgba(247,152,0,1) !important;
font-size:16px !important;
}
.shadow {
font-weight: bold !important;
text-shadow:2px 1px 3px #5d5d5d;
}
/*------------------------
Banner CSS Ends
--------------------------*/
/*-----------------------
05 - Categories Navigation
----------------------*/
/*-----------------------
Categories Navigation ends
----------------------*/
/*------------------------
06 - widgets CSS
-------------------------*/
/*------------------------
widgets CSS Ends
-------------------------*/
/*------------------------
07 - Featured areas starts.
-------------------------*/
.featured-area {
background-color:#FFF;
}
.featured-area .owl-next {
top:-25px;
right:15px;
}
.featured-area .owl-prev {
top:-25px;
left:auto;
right:50px;
}
.section-title {
padding: 10px 15px;
}
.section-title .float-left {
margin-right:20px;
}
.section-title h2, .section-title h2 a {
font-size: 1.25rem;
text-transform: uppercase;
font-weight: normal;
margin-bottom: 0px;
line-height:22px;
}
.cart-page .section-title h2, .cart-page .section-title h2 a {
text-transform:capitalize;
}
.section-title h2 span {
color:#f79800;
font-size: 1.25rem;
}
.big-section-title {
padding-left:15px;
padding-right:15px;
}
.big-section-title h2 {
text-align: center;
text-transform:capitalize;
font-size: 1.6rem;
margin-bottom: 50px;
font-weight:normal;
overflow:hidden;
line-height:40px;
height:50px;
}
.big-section-title h2 span {
font-size: 1.5rem;
padding: 7px 15px;
position:relative;
font-weight:500;
}
.big-section-title h2 span:after {
right: -491px;
content: ' ';
display: block;
height: 0;
border-bottom: 1px solid;
width: 466px;
position: absolute;
top: 50%;
border-color: #ccc;
}
.big-section-title h2 span:before {
left: -491px;
content: ' ';
display: block;
height: 0;
border-bottom: 1px solid;
width: 466px;
position: absolute;
top: 50%;
border-color: #ccc;
}
.left-out {
font-size:0.75rem;
color:#f79800;
}
/*------------------------
Featured areas ends.
-------------------------*/
/*---------------------
08 - Pricing Tables Starts
/*---------------------*/
/*---------------------
Pricing Tables ends
/*---------------------*/
/*------------------------
09 - Testimonials Section
-----------------------*/
/*------------------------
Testimonials Section End
-----------------------*/
/*----------------------
10 - Useful Elements CSS
-----------------------*/
/*----------------------
Useful Elements CSS Ends
-----------------------*/
/*----------------------
11 - Customer Account CSS
-----------------------*/
/*----------------------
Customer Account CSS Ends
-----------------------*/
/*----------------------
12 - 404 Page CSS Starts
--------------------------*/
/*----------------------
404 Page CSS End
--------------------------*/
/*---------------------
13 - Shop stylings
---------------------*/
/*---------------------
Shop stylings ends
---------------------*/
/*----------------------
14 - Open Shop Landing Page
-----------------------*/
/*----------------------
Open Shop Landing Ends
-----------------------*/
/*-----------------------
15 - Blog Posts starts
-----------------------*/
/*-----------------------
Blog Posts Ends
-----------------------*/
/*----------------------
16 - Products CSS
-----------------------*/
.product {
padding-left:15px;
padding-right:15px;
float:left!important;
}
.product:hover {
box-shadow: 0 3px 6px 0 rgba(51,51,51,.298039);
}
.product-image {
position:relative;
}
.product-image p {
font-size: 14px;
margin-bottom: 5px;
}
.product-image a img:last-child {
display:none;
}
.product:hover>.product-image a img:last-child {
display:block;
}
.product:hover>.product-image a img:first-child {
display:none;
}
.product .product-image img {
width:100%;
height:auto;
text-align:center;
}
.product-title a {
overflow:hidden;
display:block;
padding-top:1px;
padding-bottom:10px;
padding-left:1px;
padding-right:1px;
font-weight:bold;
text-align:center;
height:42px;
text-transform:capitalize;
}
/*----------------------
Products CSS Ends
-----------------------*/
/*---------------------
17 - New Items section
---------------------*/
.tabs-content {
border:0px;
background-color:transparent;
padding:0px;
}
.tabs-panel {
padding:0px;
}
.tabs {
width: 100%;
overflow: auto;
background-color: transparent;
border: 0px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
}
.tabs li {
float: none;
}
.tabs-title>a:focus, .tabs-title>a[aria-selected=true], .tabs-title>a:hover {
background-color:#FEA821;
color:#fff;
}
li.tabs-title {
text-align: center;
width: 9%;
display: table-cell;
}
.tabs-title a {
font-family: MyriadHebrew;
line-height: 1.2!important;
font-size: 15px;
padding-top: 12px!important;
padding-bottom: 12px!important;
}
.knowledge-tabs {
width: 100%;
overflow: auto;
background-color:transparent;
border:0px;
}
li.knowledge-tab {
text-align: center;
display: table-cell;
}
.knowledge-tab a {
font-size: 26px;
font-family: CenturyGothic;
padding:15px!important;
}
.knowledge-tab li:first-child {
margin-left: 1px;
}
.knowledge-tab>a {
line-height: 10px!important;
}
.knowledge-category {
margin-top: 15px;
padding-left: 5px;
padding-right: 5px;
float: left!important;
}
.knowledge-category-small {
float: left;
padding-top: 10px;
padding-left: 6px;
padding-right: 6px;
}
.knowledge-category-small p {
line-height: 1.3;
font-size: 18px;
padding-left: 8px;
padding-right: 8px;
text-align: justify;
}
.knowledge-category-small h1 {
font-size: 32px;
font-family: CenturyGothic-Bold;
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 8px;
color: #000000;
line-height: 1;
}
.knowledge-category-small h2 {
font-size: 18px;
font-family: CenturyGothic-Bold;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
color: #6A6A6A;
}
.knowledge-article {
margin-bottom: 30px;
}
.knowledge-article h2 {
font-size: 40px;
font-family: CenturyGothic-Bold;
text-align: center;
margin-top: 20px;
margin-bottom: 5px;
color: #383838;
}
.knowledge-separator {
display: flex;
align-items: center;
text-align: center;
}
.knowledge-separator::before, .knowledge-separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.knowledge-separator::before {
margin-right: 1.25em;
padding-top: 15px;
}
.knowledge-separator::after {
margin-left: 1.25em;
padding-top: 15px;
}
.col-container {
display: table;
width: 100%;
}
.col {
display: table-cell;
}
.knowledge-tab a#panel2-label {
background-color: #FEA821;
color: #fff;
display: none;
}
.knowledge-tabs li:nth-child(1) {
display: none!important;
}
.knowledge-tab a#panel0-label {
background-color: #03561a;
color: #fff;
}
.knowledge-tab a#panel1-label {
background-color: #0cb8f8;
color: #fff;
}
.knowledge-tab>a:focus, .knowledge-tab>a[aria-selected=true], .knowledge-tab>a:hover {
font-size: 30px;
}
/*---------------------
New Items section Ends
---------------------*/
/*-----------------------
18 - Suggested Stores Section
------------------------*/
.store .thumbnail {
border:0px;
background-color:#FFF;
padding:10px;
margin-bottom:0px;
box-shadow: 0 0 0px 0px rgba(33,153,232,.0);
}
.store .thumbnail:hover {
box-shadow: 0 0 6px 1px rgba(33,153,232,.5);
}
.store h4 , .store h4 a{
font-weight:normal;
margin-top:15px;
margin-bottom:2px;
font-size:1rem;
}
.store-reputation {
margin-top:10px;
}
.store-reputation span {
line-height: 16px;
margin-left: 15px;
font-size: 0.75rem;
}
.store-end {
margin-top:0px;
padding-bottom:15px;
border-bottom:1px solid #ededed;
font-size:0.80rem;
margin-bottom:0px;
}
.store h6 a {
line-height:20px;
font-size:0.875rem;
font-weight:normal;
}
.store h6 {
line-height:20px;
font-weight:normal;
}
.top-product-review {
margin-bottom:7px;
}
.store .product {
border-right:0px;
border-bottom:1px solid #ededed;
}
.no-border {
border:0px !important;
border-bottom:0px;
}
.store-page .store .thumbnail {
box-shadow: 0 0 2px 1px rgba(33,153,232,.5);
}
.store-page .store h4, .store-page .store h4 a {
margin-top:0px;
font-size:1.25rem;
}
.store-page .store-end {
margin-bottom:25px;
}
.sidebar .store-widget p {
margin-bottom:0px;
}
.sidebar .product {
padding:0px;
border-right:0px;
}
.sidebar .product h6 {
margin-bottom:5px;
}
.sidebar .product h6 a {
font-weight:normal;
}
.store-page .product .menu li a:before {
content:"";
}
.store-page .product:hover {
box-shadow: 0 0px 0px 0 rgba(51,51,51,.298039);
}
/*-----------------------
Suggested Stores Ends
------------------------*/
/*----------------------
19 - Single Store CSS
----------------------*/
.customer-navigation .dropdown.menu.vertical>li.opens-right.is-active>a {
color: #FFF;
background-color:#f79800;
}
.customer-navigation .dropdown.menu.vertical>li.opens-right>a:after {
display: none;
}
.customer-navigation .menu li .menu li a {
color:#0f99de;
border-bottom:1px solid #ededed;
}
.customer-navigation .menu li .menu li a:hover {
color:#FFF;
}
.store_featured img {
width:100%;
height:auto;
}
.left-colapse {
padding-left:0px;
}
.right-colapse {
padding-right:0px;
}
.margin-top {
margin-top:15px;
}
.margin-bottom {
margin-bottom:15px;
}
.store-info h2 {
margin-top:0px;
margin-bottom:0px;
font-weight:normal;
line-height:36px;
}
.store-info p {
margin-bottom:5px;
}
.store-info .menu li a {
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
line-height:18px;
}
.store-info .menu li {
padding-left:12px;
padding-right:12px;
border-right:1px solid #ccc;
line-height:18px;
}
.store-info .menu li:first-child {
padding-left:0px;
}
.store-info .menu li:last-child {
border-right:0px;
}
.store-info .store-reputation {
margin-bottom:20px;
}
.owner-info p {
margin-bottom:5px;
font-weight:bold;
text-transform:uppercase;
text-align:center;
}
.owner-info img {
border-radius:100%;
text-align:center;
display:block;
margin:auto;
width:115px;
}
.owner-info a {
display:block;
text-align:center;
}
.popular-product a {
line-height:18px;
font-weight:bold;
}
.popular-product img {
width:100px;
height:auto;
margin-right:10px;
}
.popular-product .product-description {
width:calc(100% - 115px);
}
.popular-product .price {
color:#f79800;
font-weight:bold;
}
.popular-product {
margin-bottom:15px;
}
.widget-content .popular-product:last-child {
margin-bottom:0px;
}
.store-content .tabs {
border-bottom:3px solid #3b3d42;
margin-bottom:40px;
}
.store-content .tabs li:first-child {
margin-left:0px;
}
.products-wrap .pro-rating {
text-align:center;
}
.products-wrap .product {
margin-bottom:35px;
}
.products-wrap .product {
border:0px;
}
.store-content .pagination-container {
border-top:1px solid #ededed;
padding-top:15px;
}
.shop-filter span {
float:left;
}
.shop-filter input[type=checkbox] {
margin-left:15px;
}
.shop-filter input[type=text] {
width:75px;
float:left;
margin-left:10px;
margin-right:10px;
height:25px;
margin-bottom:15px;
}
.product-filter {
margin-top:0px;
padding-top:25px;
padding-bottom:25px;
border-top:1px solid #ededed;
}
.product-filter .grid-filter a {
font-size:18px;
width:25px;
height:25px;
color:#FFF;
background-color:#222;
padding:6px;
}
.product-filter .grid-filter a.active {
background-color:#f0f0f0;
color:#222;
}
.product-filter em {
float:left;
display:table-cell;
vertical-align:central;
line-height:35px;
}
.product-filter .byview {
padding-left:65px;
}
.product-filter .byview select, .product-filter .sortby select {
float:left;
width:50px;
height:35px;
margin-left:5px;
padding:6px;
margin-bottom:0px;
}
.product-filter .sortby select {
width:150px;
}
.list-product .product-title a {
text-align:left;
font-size:1.25rem;
text-transform:uppercase;
overflow:visible;
height:auto;
}
.list-product .prices {
text-align:left;
font-size:1rem;
}
.list-product .last-row {
margin-bottom:15px;
}
/*----------------------
Single Store CSS Ends
----------------------*/
/*--------------------
20 - Product Page CSS
---------------------*/
.single-product .title-section, .single-product .title-section a, .single-product .title-section span {
color:#FFF;
font-family: Montserrat, sans-serif;
}
.single-product .title-section a:hover {
color:#f79800;
}
.single-product .title-section .pro-rating {
float:left;
}
.single-product .title-section {
padding-top:20px !important;
padding-bottom:20px !important;
}
.title-section a , .title-section span, .title-section .pro-rating {
margin-left:10px;
margin-right:10px;
font-size:1rem;
}
.title-section .store-name {
font-weight:bold;
}
.bordered-light {
border:1px solid #FFF;
padding:3px 10px;
border-radius:4px;
}
.bordered-light:hover {
border-color:#f79800;
}
.main-image {
padding:0px;
background-color:#f7f7f7;
border:1px solid #ededed;
margin-bottom:15px;
}
.main-image img {
width:100%;
}
.single-product-detail .thumbnails img {
float:left;
width:82px;
height:82px;
margin-right:15px;
border:1px solid #ededed;
}
.single-product-detail .thumbnails a:last-child img {
margin-right:0px;
}
.item-header {
border-bottom:1px solid #ededed;
padding-bottom:10px;
margin-bottom:25px;
}
.item-header h1 {
font-size:1.30rem;
margin-bottom:10px;
}
.item-meta .review-count {
padding-left:10px;
padding-right:10px;
border-right:1px solid #CCC;
}
.item-meta .review-count:last-child {
border:0px;
}
.prod-dropdown {
float:left;
margin-right:5px;
margin-left:5px;
}
.prod-dropdown .btncont {
font-size: 16px;
line-height: 16px;
display: block;
padding-top: 2px;
text-align: center;
width: 25px;
height: 25px;
border: 2px solid;
border-radius: 99px;
color: #cccccc;
}
.prod-dropdown .btncont:hover {
color: #FFF;
background-color:#222;
}
.prod-dropdown .dropdown-pane {
width:150px !important;
height:150px !important;
}
.next-prev-nav {
position:relative;
}
.row-title {
width:100px;
padding-right:15px;
display:block;
float:left;
line-height:20px;
}
.item-pricing p {
margin-bottom:5px;
}
.item-pricing .sale-price {
text-decoration:line-through;
font-style:italic;
}
.item-pricing .regular-price {
font-size:1.5rem;
font-weight:bold;
color:#f79800;
line-height:40px;
}
.off-percent {
padding:5px 10px;
background-color:#0f99de;
color:#fff;
margin-left:15px;
}
#bulk-price p {
margin-bottom:0px;
}
.bulk-price {
margin-left:15px;
padding-left:15px;
border-left:1px solid #ccc;
}
.item-options {
margin-top:40px;
margin-bottom:40px;
}
.red {
background-color:red;
}
.yellow {
background-color:yellow;
}
.green {
background-color:green;
}
.blue {
background-color:blue;
}
.orange {
background-color:orange;
}
.color {
width:20px;
height:20px;
border:1px solid #666;
margin-right:15px;
display:block;
float:left;
text-align:center;
line-height:20px;
}
.option-box {
margin-bottom:15px;
}
.item-quantity .qty {
margin-bottom:0px;
padding:5px;
height:35px;
width:50px;
display:inline;
margin-right:15px;
}
.item-quantity span {
line-height:39px;
}
.shopping-buttons {
margin-top:20px;
border-bottom:1px solid #ededed;
padding-bottom:15px;
margin-bottom:15px;
}
.shopping-buttons a {
margin-right:15px;
float:left;
}
.shopping-buttons .wishlist {
font-size:2rem;
line-height:40px;
}
.button {
border-radius:3px;
}
.shopping-buttons .button {
margin-bottom:0px;
}
.coupon-store {
border:1px dashed #000;
padding:5px 10px;
border-left:5px solid orange;
}
.store-location {
margin-bottom:15px !important;
}
.product-description img {
text-align:center;
margin:auto;
display:block;
margin-bottom:15px;
}
/*--------------------
Product Page CSS Ends
---------------------*/
/*-----------------------
21 - Content Blocks CSS Starts.
--------------------------*/
.content-blocks {
margin-bottom:50px;
}
.content-blocks img {
position:relative;
min-width: 105% !important;
transform: translateX(-4%);
transition: all 0.5s ease 0s;
}
.content-blocks .block-banner::before {
content: "";
height: 100%;
left: 0;
opacity: 0.3;
position: absolute;
top: 0;
transition: all 0.3s ease 0s;
visibility: visible;
width: 100%;
z-index: 9;
}
.block-banner:hover::before {
opacity: 0.7;
visibility: visible;
z-index: 1;
}
.block-banner:hover img {
transform: translateX(0%);
}
.block-banner {
position:relative;
overflow:hidden;
}
.block-banner .banner-details {
bottom: 0;
left: 5%;
position: absolute;
z-index: 9;
}
.block-banner h2 {
font-size: 2.50rem;
font-weight:normal;
text-transform: uppercase;
margin: 10% 0 10px 0;
-moz-transition: -moz-transform 0.25s;
-o-transition: -o-transform 0.35s;
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.block-banner:hover h2 {
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.banner-details p {
display: inline-block;
font-size: 1.13rem;
font-weight: 700;
position: relative;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-o-transition: opacity 0.35s, -o-transform 0.35s;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.block-banner:hover p {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.two-banner-block .small-block-wrap {
display:block;
margin-top:20px;
max-height:250px;
}
.two-banner-block .small-block-wrap:first-child {
margin-top:0px;
}
.two-banner-block img {
max-height:207px;
}
.content-blocks .block-banner::before {
background-color: #000;
}
.block-banner .banner-details h2, .block-banner .banner-details p {
color:#FFF;
}
.store-detail {
width:100%;
padding-top:40px;
padding-bottom:40px;
background-color:#f7f7f7;
border-bottom:1px solid #ededed;
}
/*-----------------------
Content Blocks CSS ends
--------------------------*/
/*-------------------------
22 - Page loading animation
------------------------*/
.container {
height:100%;
overflow:hidden;
position:relative;
min-width:300px;
}
.boxed {
max-width: 1200px;
margin: auto;
box-shadow: 0px 0px 6px 1px #CCC;
}
.shadow {
box-shadow: 0px 0px 2px 1px #CCC;
padding:10px;
}
.new-patient-offer .shadow {
padding:5px;
}
body.box {
background-image: url(images/help/bodybg.jpg);
background-repeat: repeat;
}
.loaded {
height:auto;
overflow-y:visible;
}
/*-------------------------
23 - Information Boxes
-------------------------*/
.information-boxes {
text-align:center;
}
.information-boxes .columns {
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
border-left:1px solid #ededed;
padding:25px;
background-color:#FFF;
}
.information-boxes .columns:first-child {
border-left:0px;
}
.information-boxes h4 {
font-size:1rem;
}
.information-boxes .fa {
font-size:3.5rem;
margin-bottom:15px;
}
.information-boxes .columns:hover, .information-boxes .columns:hover h4, .information-boxes .columns:hover p {
background-color:#0f99de;
color:#FFF !important;
}
/*-------------------------
Information Boxes Ends
-------------------------*/
/*----------------------
24 - Content Box
-----------------------*/
.inner-page {
background-color:#FFF;
}
.content-container .title-section {
padding-top:25px;
padding-bottom:25px;
margin-bottom:15px;
position:relative;
}
.content-container .title-section::after {
content: "";
background:url('images/help/title-bg.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index:-1;
background-size:cover;
background-position:top;
}
.content-container .title-section h1 {
text-transform:uppercase;
margin-top:0px;
margin-bottom: 0px;
line-height: 50px;
}
.content-container .title-section ul {
margin:0px;
}
.breadcrumbs {
margin-left: 10px;
margin-right: 10px;
}
.breadcrumbs a {
color: #FEA821;
}
.breadcrumbs li, .breadcrumbs li a {
font-size:0.65rem;
}
.content-container .title-section {
background-color:rgba(43,45,50, 0.7);
}
.content-container .title-section::after {
background-color:#666;
}
.content-container .title-section h1 {
color:#FFF;
}
/*----------------------
Content Box Ends
-----------------------*/
/*-------------------------
25 - Call to Action
-------------------------*/
.call-to-action {
background-color:#f79800;
color:#FFF;
padding-top: 10px;
padding-bottom: 10px;
}
.call-to-action h4 {
color:#FFF;
}
.call-to-action h4, .call-to-action input[type=text], .call-to-action input[type=button] {
margin-bottom:0px;
height:40px;
}
.call-to-action h4 {
line-height:40px;
}
.call-to-action .signup-form .columns {
padding-left:3px;
padding-right:3px;
}
/*-------------------------
Call to Action
-------------------------*/
/*---------------------------
26 - Footer
----------------------------*/
.footer {
width:100%;
color:#FFF;
background-color:#333333;
}
.footer h2 {
font-size:1rem;
margin-bottom:10px;
font-weight:bold;
color:#FFF;
}
.footer hr {
margin: 0.8rem auto;
}
.tx-div {
background-color:#fff;
width: 45px;
display: block;
height: 3px;
opacity: .8;
margin: 10px 0 15px;
}
.footerTopUp {
width:100%;
height: 10px;
background-color: #dbd9d9;
}
.footerTop {
background-color:#e3e3e3;
color:#333;
}
.footerTop h2 {
font-size: 22px;
color:#303030;
}
.footerTop ul {
margin:0px;
list-style:none;
}
.vertical li a {
padding:8px 0px;
}
.footerbottom {
width:100%;
padding-top:20px;
padding-bottom:20px;
}
.footer a {
color:#FFF;
}
.footer a:hover {
color:#f79800;
}
.footerbottom ul {
margin:0px;
}
.footerbottom ul li a {
border-right:1px solid;
padding:0px 10px;
}
.footerbottom ul li:first-child a {
padding-left:0px;
}
.footerbottom ul li:last-child a {
border:0px;
padding-right:0px;
}
.footerbottom .menu {
padding-bottom:5px;
margin-bottom:5px;
float:left;
}
.footerbottom img {
padding-right:5px;
}
.footerbottom h2 {
margin-bottom:5px;
}
.footerbottom .payment a {
font-size:1.45rem;
}
.copyrightinfo {
font-size:13px;
}
.address i {
width: 45px;
height: 45px;
border: 2px solid;
font-size: 1.2857142857142858em;
text-align: center;
line-height: 41px;
float: left;
margin-right: 0.7em;
margin-bottom: 0.7em;
color:#FFF;
}
.address h4 {
font-size: 14px;
text-transform: uppercase;
margin: 0 0 5px;
font-weight:bold;
color:#FFF;
}
.footer p {
color:#FFF;
}
.footer ul {
margin:0px;
}
.office-hours li {
padding-bottom:10px;
}
.footer-widget input[type=text] {
height:40px;
max-width:230px;
}
.socialicons {
line-height:25px;
font-size:18px;
font-weight:bold;
}
.socialicons a {
margin-right:5px;
margin-left:5px;
}
#top {
color: #ffffff;
background: #3b3d42;
position: fixed;
right: 34px;
text-align: center;
bottom: 100px;
font-weight: bold;
text-decoration: none;
border-radius: 100%;
width: 40px;
height: 40px;
padding: 3px 8px 6px;
font-size: 27px;
display:none;
}
/*--------------------------
Footer CSS ends here
---------------------------*/
/*-------------------------
27 - Media Queries
--------------------------*/
/*Large Screens Adjustments*/
@media only screen and (min-width: 64.063em) {
.search-head {
position: absolute;
top: 0px;
right: 0px;
width: 112%;
}
.owl-controls {
margin-top:0px;
}
.information-boxes {
padding-left:15px;
padding-right:15px;
}
/*Header*/
.logo-container {
max-width:16%;
}
.account-wrap {
min-width:32.5%;
}
.footer-widget {
margin-left:12.5px;
margin-right:12.5px;
}
.search-wrap {
max-width:44%;
}
.footer-widget:first-child {
margin-left:0px;
}
.footer-widget:last-child {
margin-right:0px;
}
/*Information boxes*/
.information-boxes .columns {
max-width:20%;
}
.hide-for-large-only {
display:none;
}
}
/*Mobile Screens CSS*/
@media only screen and (max-width: 40em) {
.responsive-table {
overflow-x:scroll;
}
.call-to-action h4 {
line-height:normal;
}
.mega-menu .child-nav {
min-width:auto;
min-height:auto;
max-width:auto;
max-height:auto;
border:1px solid #ededed;
}
.backgroundstyle1 {
background-image:none;
background-size:cover;
}
.backgroundstyle2 {
background-image:none;
background-size:cover;
}
.second-child-nav {
top:0px !important;
}
.widget .menu li a {
clear:both;
position:relative;
}
/*Nav code ends*/
.logo {
max-width: 100%;
}
.row .small-12 {
margin-top:0.1px;
margin-bottom:0.1px;
}
.row .small-12:last-child {
margin-bottom:0px;
}
.row .small-12:first-child {
margin-top:0px;
}
.footer-column {
padding-bottom:25px;
}
.footer-column, .footer-column-2 {
padding:15px;
}
.footerbottom {
padding:5px;
}
.footerbottom .menu, .copyrightinfo, .footerbottom a {
font-size:11px!important;
}
.top-info-bar .row .small-12 {
margin-top:0px;
margin-bottom:0px;
}
/*Footer Settings*/
.footer-widget {
margin-bottom:15px;
}
.footerbottom ul {
text-align: center;
width: 100%;
border-bottom: 0px;
}
.copyrightinfo {
text-align:center;
}
.owl-prev , .owl-next {
position: relative;
}
.owl-prev:hover , .owl-next:hover {
position: relative;
}
.owl-next {
float:left;
right:0px;
margin-left:5px;
}
.owl-prev {
float:left;
left:0px;
margin-right:5px;
}
.owl-controls {
width:60px;
margin-top:30px;
}
.open-shop-banner .content-section img {
max-width:100%;
}
.featured-area .owl-prev {
right:0px;
}
.featured-area .owl-next {
right:0px;
}
.user-icon {
font-size:1.765rem;
}
.block-banner .banner-details p {
display:none;
}
.block-banner .banner-details .promo-title {
font-size:2rem;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.right-colapse {
padding-left:0px;
}
.left-colapse {
padding-right:0px;
}
.tabs-title a {
padding:10px;
}
.bulk-price {
border-left:0px;
display:block;
margin-left:115px;
padding-left:0px;
}
.title-section .review-count {
display:none;
}
.title-section .bordered-light {
display:none;
}
.single-product-detail .thumbnails img {
margin-right:5px;
width:calc(20% - 5px);
height:auto;
}
}
/*-------------------------
Media Queries Ends
--------------------------*/
@media only screen and (max-width: 1024px) {
.top-bar-title {
display: none;
}
.user-icon {
display: none;
}
}
/* Slideshow container */
.slideshow-container-featured {
max-width: 403px;
position: relative;
margin: auto;
}
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
}
.slideshow-container h2 {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
color: #fff;
font-size: 77.5px;
font-family: NathanScript;
letter-spacing: 10px;
}
.phytofairy {
background-image: url("../images/brands-showroom/phytofairy.png");
height: 380px;
background-size: contain;
background-repeat: no-repeat;
margin-top: 30px!important;
}
.phytofairy-welcome {
padding-left: 50px;
padding-top: 25px;
}
.phytofairy-welcome-1 {
font-family: ComicJensFreePro;
font-size: 38.5px;
font-weight: bold;
letter-spacing: 2px;
color: #000000;
margin-bottom: 0px;
}
.phytofairy-welcome-2 {
font-family: CenturyGothic;
font-size: 54.8px;
font-weight: normal;
letter-spacing: 2.5px;
color: #000000;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
height: 45px;
width: 45px;
padding-top: 10px;
padding-left: 15px;
margin-top: -40px;
margin-left: 10px;
margin-right: 10px;
color: white;
font-weight: bold;
font-size: 26px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
color: #ffffff;
background-color: #FEA821;
border-radius: 50%;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* The dots/bullets/indicators */
.dot, .dot-1, .dot-2, .dot-3, .dot-4 {
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.prev:hover, .next:hover {
color: #ffffff;
background-color: #FEA821;
border-radius: 50%;
}
.active {
background-color: #FEA821;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next, .text {font-size: 11px}
}
/* Main Menu at homepage */
.footer-social-icon img {
margin: 5px;
}
/* Hide by Hao on 20230831 */
.footer-social-icon, .medium-6.small-12.columns.infographic {
display: none;
}
.separator, .separator-2 {
display: inline-block;
}
hr.separator, hr.separator-2 {
color: #000;
}
.right {
float: right;
}
.row-menu {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.menu-tabs {
position: relative;
height: auto;
overflow-x: hidden;
overflow-y: hidden;
}
.menu-is-active a{
background-color:#FEA821;
color:#fff!important;
}
.navbar, .navbar-2 {
width:100%;
/*overflow:auto;*/
}
.navbar li:nth-child(1), .navbar-2 li:nth-child(1) {
text-decoration: none;
min-width: 68px;
text-align: center;
}
.navbar li:nth-child(1n+2) {
text-decoration: none;
width: 33.4%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
.navbar-2 li:nth-child(1n+2) {
text-decoration: none;
width: 33%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
.navbar li:nth-child(2) a {
background-color: #f71e6b;
color: #ffffff;
}
.navbar li:nth-child(3) a {
background-color: #92cb3a;
color: #ffffff;
}
.navbar li:nth-child(4) a {
background-color: #f78f1e;
color: #ffffff;
}
.navbar-2 li:nth-child(2) a {
background-color: #19c2ac;
color: #ffffff;
}
.navbar-2 li:nth-child(3) a {
background-color: #b759c8;
color: #ffffff;
}
.navbar-2 li:nth-child(4) a {
background-color: #293e6b;
color: #ffffff;
}
.navbar a, .navbar-2 a {
font-size: 20px;
color: unset;
}
.main-menu {
margin-bottom:10px;
}
.row-menu {
border-right: 0px!important;
}
.navbar li, .navbar-2 li {
height: 42px;
}
.navbar li a, .navbar-2 li a {
border-right: 0px!important;
}
.fa-home, .fa-more {
font-size:35pt;
}
.menu>li>a {line-height: 1.2!important;}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: center;
}
.modal-dialog {
margin-top: 120px!important;
}
}
/* Featured Items at homepage */
.product-title a {
height: 60px;
color: #454343;
font-size: 18px;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
.featured-items {
width: 100%;
background-color: #ebebeb;
padding-top: 1%;
overflow-x: hidden;
}
.featured-items-inner {
max-width: 75rem;
width: 100%;
margin: auto;
}
.featured-items-2 {
width: 100%;
background-color: #f58220;
overflow-x: hidden;
}
.featured-items-inner-2 {
max-width: 70rem;
width: 100%;
margin: auto;
}
.title-hr {
display:flex;
flex-direction:row;
align-items: center;
}
.divider-right {
flex-grow: 1;
height: 1px;
background-color: #9f9f9f;
margin-left: 10px;
}
/* Homepage css for mobile */
@media screen and (max-width: 440px) {
.column {
width: 50%;
}
.prev, .next {
padding: 4px;
font-size: 18px;
width: 32px;
height: 32px;
padding-left: 10px;
}
.prev:hover, .next:hover {
height: 36px;
width: 36px;
}
.separator {
width: 45%;
}
.separator-2 {
display: none;
}
.featured-items-inner h5 {
font-size: 13px;
}
.product-title a {
font-size: 11.5px;
}
.product-image p {
font-size: 11px;
}
}
@media screen and (max-width: 850px) and (min-width: 550px) {
.prev, .next {
padding: 4px;
font-size: 18px;
width: 32px;
height: 32px;
padding-left: 10px;
}
}
@media screen and (max-width: 899px) and (min-width: 441px) {
.product-title a {
font-size: 13px;
}
.product-image p {
font-size: 12px;
}
}
@media screen and (max-width: 549px) and (min-width: 430px) {
.column {
width: 50%;
}
.separator {
width: 45%;
}
.separator-2 {
display: none;
}
.featured-items-inner h5 {
font-size: 18px;
}
}
@media screen and (max-width: 800px) and (min-width: 550px) {
.separator {
width: 58%;
}
.separator-2 {
width: 30%;
}
}
@media screen and (max-width: 942px) and (min-width: 755px) {
.navbar a {
font-size: 11.5px;
}
.menu>li>a {line-height: 2.3!important;}
}
@media screen and (max-width: 1194px) and (min-width: 943px) {
.navbar a {
font-size: 16px;
}
.menu>li>a {line-height: 1.5!important;}
}
@media screen and (max-width: 1022px) and (min-width: 900px) {
.product-title a {
font-size: 15px;
}
.product-image p {
font-size: 13px;
}
}
@media screen and (max-width: 1084px) and (min-width: 1023px) {
.product-title a {
font-size: 16px;
}
.product-image p {
font-size: 14px;
}
}
@media screen and (max-width: 1149px) and (min-width: 1085px) {
.product-title a {
font-size: 17px;
}
}
@media screen and (max-width: 754px) {
.account-wrap {
display: none;
}
.navbar li:nth-child(1), .navbar-2 li:nth-child(1) {
display: none;
}
.special-margin {
font-size: 16px;
padding: 6px;
}
.fa-user {
font-size: 16pt;
padding-top: 5px;
}
.fa-home, .fa-more {
font-size: 20pt;
padding-top: 4px;
padding-right: 4px;
}
.sign-in {
font-weight: normal;
}
.mobile-login {
background-color: #d0d0d2;
padding: 10px;
}
.navbar {
width: 100%;
overflow: auto;
position:relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar li:nth-child(1n+2), .navbar-2 li:nth-child(1n+2) {
width: 13.15%;
min-width: 125px;
float: none;
text-align: center;
}
li.main-menu-2 a {
font-size: 13.5px;
}
.columns {
padding-left: 0px;
padding-right: 0px;
}
.navbar li:nth-child(2) {
background-color: #f71e6b;
}
.navbar li:nth-child(3) {
background-color: #92cb3a;
}
.navbar li:nth-child(4) {
background-color: #f78f1e;
}
.navbar-2 li:nth-child(2) {
background-color: #19c2ac;
}
.navbar-2 li:nth-child(3) {
background-color: #b759c8;
}
.navbar-2 li:nth-child(4) {
background-color: #293e6b;
}
}
@media screen and (min-width: 641px) {
.paddles {
display: none;
}
}
@media screen and (max-width: 778px) {
.tabs {
/*height: 60px;*/
}
.tabs li {
width: 100%;
float: none;
min-width: 108px;
height: 55px!important;
}
.knowledge-tabs li.knowledge-tab {
width: 49.9%;
float: left;
text-align: center;
}
}
@media screen and (max-width: 707px) {
.navbar li:nth-child(1n+2), .navbar-2 li:nth-child(1n+2) {
width: 11.15%;
min-width: 125px;
float: none;
text-align: center;
}
}
@media screen and (max-width: 640px) {
.navbar li:nth-child(1n+2), .navbar-2 li:nth-child(1n+2) {
width: 12.15%;
min-width: 100px;
float: none;
text-align: center;
}
.knowledge-title img {
width: 50%!important;
}
.top-info-bar .menu li a {
padding: .5rem .2em;
}
a#panel5-label {
width: 100px!important;
}
.paddles {
}
.paddle {
position: absolute;
top: 0;
bottom: 0;
width: 3em;
}
.left-paddle {
left: 0;
color: #fff;
background-color: #f71e6b;
border-radius: 50%;
font-size: 12px;
height: 34px;
margin-top: 10px;
margin-left: 5px;
}
.right-paddle {
right: 0;
color: #fff;
background-color: #f71e6b;
border-radius: 50%;
font-size: 12px;
height: 34px;
margin-top: 10px;
margin-right: 5px;
}
.hidden {
display: none;
}
.knowledge-category-small h1 {
font-size: 20px;
}
.phytofairy-content p {
font-size: 18px;
letter-spacing: 1px;
line-height: 1.3;
}
}
@media screen and (min-width: 755px) {
.account-wrap-mobile {
display: none;
}
.featured-items-inner {
width: 100%;
margin: auto;
}
.separator {
width: 69%;
}
.separator-2 {
width: 45%;
}
.knowledge-tabs {
padding-left: 10px;
}
.navbar {
margin-bottom: 10px;
margin-top: 10px;
}
}
@media screen and (max-width: 350px) and (min-width: 200px) {
.separator {
width: none;
}
.separator-2 {
display: none;
}
}
@media screen and (max-width: 1000px) and (min-width: 800px) {
.separator {
width: 70%;
}
.separator-2 {
width: 45%;
}
}
@media screen and (max-width: 1430px) and (min-width: 1001px) {
.separator {
width: 76%;
}
.separator-2 {
width: 58%;
}
}
@media screen and (min-width: 1440px) {
.separator {
width: 80%;
}
.separator-2 {
width: 64%;
}
}
.mobile-home-icon {
float: left;
margin-left: 4%;
}
.mobile-links {
float: right;
margin-right: 4%;
}
.fa-facebook, .fb-share, .fa-instagram, .fa-youtube, .fa-whatsapp, .fa-wechat {
margin-right: 5px;
color:#333;
padding: 10px;
font-size: 23.5px;
width: 45px;
height: 45px;
text-align: center;
text-decoration: none;
}
.social-icon {
padding-top: 15px;
}
.social-icon a:hover {
color: #fff;
}
.fb-share {
background: #3B5998;
color: white;
}
.fa-whatsapp {
background: #25D366;
color: white;
}
.fa-wechat {
background: #00CC33;
color: white;
}
.footer-text {
width: 20%;
}
.footer-center, .footer-2-center a {
color: #fff;
font-size: 13px;
}
.footer-3-center img {
width: 90%;
height: auto;
}
@media screen and (min-width: 1000px) {
.footer-center {
margin-left: 30%!important;
}
.footer-2-center {
margin-left: 20%!important;
}
.footer-3-center {
margin-left: 26%!important;
}
.footer-4-center {
margin-left: 18%!important;
}
img.shop-personal-profile {
max-width: 350px;
max-height: 350px;
}
}
/* Single Page for Product */
h2.product-title {
color: #FEA821;
font-size: 30px;
margin-bottom: 0.1rem;
margin-top: 1rem;
margin-left: 10px;
margin-right: 10px;
}
.product-info hr {
margin: 0.1rem auto;
margin-left: 10px;
margin-right: 10px;
}
.product-detail {
margin: 10px;
}
h3.product-details {
color: #000;
font-size: 20px;
padding-top: 1px;
margin-bottom: 0px;
font-weight: 590;
}
h2.product-details {
color: #000;
font-size: 26px;
padding-top: 2px;
margin-left: 1px;
}
.button {
background-color: #FEA821;
}
.button-share {
border-radius: 25px;
font-size: 18px;
margin-left: 5px;
margin-right: 10px;
color: #fff;
float: left;
}
.videoplay {
position: relative;
padding-bottom: 43%;
padding-top: 0;
overflow: hidden;
margin-top: 30px;
margin-left: 5px;
margin-right: 5px;
min-height: 270px;
}
.videoplay iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infographic img {
padding: 5px;
}
.knowledge-title img {
width: 30%;
height: auto;
margin-top: 15px;
margin-bottom: 15px;
}
ol.business-section-list {
list-style-type: lower-roman;
font-family: Helvetica;
font-size: 1.5rem;
line-height: 1.3;
padding-top: 10px;
padding-bottom: 30px;
}
.business-section-description {
margin-left: 8%;
margin-top: 10px;
width: 88%;
}
.business-section {
margin-top: 30px;
padding: 15px;
}
.business-section-title h1 {
font-size: 3rem;
text-align: center;
}
.business-section-title-highlight {
color: #F8B107;
font-size: 3rem;
}
.business-section-title-sub h2 {
font-size: 3rem;
font-family: HelveticaBold;
color: #000;
margin-left: 70px;
margin-top: 5px;
line-height: 1.2;
letter-spacing: 5px;
text-transform: uppercase;
}
.business-section-title-sub-b h2 {
font-size: 3rem;
font-family: HelveticaBold;
color: #000;
margin-top: 5px;
line-height: 1.2;
letter-spacing: 5px;
text-transform: uppercase;
}
.business-section-title-sub img {
margin-left: 70px;
width: 40%;
}
.business-section-title-sub-b img {
width: 40%;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-10 h2 {
padding-top: 15px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-12 h2 {
padding-top: 35px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 85px;
}
.business-footer img {
padding: 10px;
}
/* Shop Referral Link */
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
img.shop-personal-profile {
border-radius: 50%;
border: 8px solid white;
margin-top: 5px;
}
.shop-personal-profile-intro h5 {
text-align: center;
text-transform: uppercase;
color: #4E4E4E;
font-family: CenturyGothic-Bold;
font-size: 30px;
letter-spacing: 1px;
padding-top: 8px;
}
.shop-personal-profile-intro p {
text-align: center;
color: #4E4E4E;
font-family: CenturyGothic;
font-size: 22px;
padding: 3px;
}
.shop-personal-details {
padding: 15px;
}
h5.shop-personal-profile-member {
text-align: left;
text-transform: uppercase;
color: #ffffff;
font-family: HelveticaBold;
font-size: 34px;
letter-spacing: 1px;
margin-bottom: -12px;
padding-left: 20px;
}
h5.shop-personal-profile-rank {
text-align: left;
text-transform: uppercase;
color: #ffffff;
font-family: HelveticaLight;
font-size: 26px;
letter-spacing: 1px;
padding-left: 20px;
}
h5.shop-personal-profile-hi {
text-align: left;
color: #ffffff;
font-family: HelveticaLight;
font-size: 26px;
padding-left: 20px;
}
.shop-personal-profile-email {
text-align: center;
color: #000000;
background-color: #ffffff;
width: 70%;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 25px;
box-shadow: 3px 0px 15px 0px #000 inset;
}
.shop-personal-profile-email a {
font-size: 20px;
}
p.shop-personal-profile-id {
text-align: right;
text-transform: uppercase;
color: #ffffff;
font-family: HelveticaLight;
font-size: 18px;
padding-top: 28px;
}
a.shop-personal-profile-hi {
color: #273CD7;
font-family: HelveticaLight;
font-size: 28px;
text-decoration: underline;
}
a:hover.shop-personal-profile-hi {
color: #273CD7;
font-family: HelveticaLight;
font-size: 30px;
text-decoration: underline;
}
@media screen and (max-width: 1100px) and (min-width: 1001px) {
.business-section-title h1, .business-section-title-highlight {
font-size: 2.6rem;
}
.business-section-title-sub h2 {
font-size: 2.5rem;
letter-spacing: 5px;
margin-left: 60px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 2.5rem;
letter-spacing: 5px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1.3rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 15px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 35px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 45px;
}
}
@media screen and (max-width: 1000px) and (min-width: 901px) {
.business-section-title-sub img {
margin-left: 50px;
width: 40%;
}
.business-section-title-sub-b img {
width: 40%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 2.3rem;
}
.business-section-title-sub h2 {
font-size: 2.2rem;
letter-spacing: 5px;
margin-left: 50px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 2.2rem;
letter-spacing: 5px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1.1rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 15px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 35px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 45px;
}
}
@media screen and (max-width: 900px) and (min-width: 761px) {
.business-section-title-sub img {
margin-left: 40px;
width: 50%;
}
.business-section-title-sub-b img {
margin-left: 10px;
width: 50%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 2.2rem;
}
.business-section-title-sub h2 {
font-size: 1.8rem;
letter-spacing: 5px;
margin-left: 40px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 1.8rem;
letter-spacing: 5px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 10px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 30px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 40px;
}
}
@media screen and (max-width: 760px) and (min-width: 641px) {
.business-section-title-sub img {
margin-left: 40px;
width: 50%;
}
.business-section-title-sub-b img {
margin-left: 10px;
width: 50%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 2.2rem;
}
.business-section-title-sub h2 {
font-size: 1.7rem;
letter-spacing: 5px;
margin-left: 40px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 1.7rem;
letter-spacing: 5px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 10px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 30px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 40px;
}
}
@media screen and (max-width: 640px) and (min-width: 541px) {
.business-section-title-sub img {
margin-left: 40px;
width: 50%;
}
.business-section-title-sub-b img {
margin-left: 10px;
width: 50%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 1.8rem;
}
.business-section-title-sub h2, .business-section-title-sub-b h2 {
font-size: 1.4rem;
letter-spacing: 4px;
margin-left: 40px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 1.4rem;
letter-spacing: 4px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2 {
padding-top: 5px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 20px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 30px;
}
}
@media screen and (max-width: 540px) and (min-width: 461px) {
.business-section-title-sub img {
margin-left: 30px;
width: 50%;
}
.business-section-title-sub-b img {
margin-left: 10px;
width: 50%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 1.5rem;
}
.business-section-title-sub h2 {
font-size: 1.1rem;
letter-spacing: 2px;
margin-left: 30px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 1.1rem;
letter-spacing: 2px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 5px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 20px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 30px;
}
}
@media screen and (max-width: 460px) and (min-width: 361px) {
.business-section-title-sub img {
margin-left: 20px;
width: 50%;
}
.business-section-title-sub-b img {
margin-left: 10px;
width: 50%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 1.5rem;
}
.business-section-title-sub h2 {
font-size: 1rem;
letter-spacing: 1px;
margin-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
.business-section-title-sub-b h2 {
font-size: 1rem;
letter-spacing: 1px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
ol.business-section-list {
font-size: 1rem;
padding-bottom: 5px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 10px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 20px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 30px;
}
}
@media screen and (max-width: 360px) {
.business-section-title-sub img {
margin-left: 10px;
width: 50%;
}
.business-section-title-sub-b img {
margin-left: 5px;
width: 50%;
}
.business-section-title h1, .business-section-title-highlight {
font-size: 1.3rem;
}
.business-section-title-sub h2 {
font-size: 0.9rem;
letter-spacing: 0.9px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 1;
}
.business-section-title-sub-b h2 {
font-size: 0.9rem;
letter-spacing: 0.9px;
margin-left: 5px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 1;
}
ol.business-section-list {
font-size: 1rem;
padding-bottom: 0px;
}
.business-sec-1 h2, .business-sec-7 h2, .business-sec-9 h2 {
padding-top: 5px;
}
.business-sec-3 h2, .business-sec-5 h2, .business-sec-6 h2, .business-sec-8 h2, .business-sec-10 h2, .business-sec-12 h2 {
padding-top: 10px;
}
.business-sec-4 h2, .business-sec-11 h2 {
padding-top: 20px;
}
}
.infographic {
float: left!important;
}
.phytofairy-images {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.phytofairy-images-bottom img {
padding: 25px;
}
.phytofairy-section {
margin-top: 40px;
padding: 15px;
}
.phytofairy-section-b {
padding: 15px;
}
.phhp-awards-gallery {
margin-top: 20px;
margin-bottom: 20px;
padding: 0px;
}
.why-supplement-section {
padding: 15px;
}
.phytofairy-section-title h1 {
font-family: CenturyGothic-Bold;
font-size: 3rem;
font-weight: 800;
text-align: center;
color: #000000;
letter-spacing: 1.1px;
}
@media screen and (min-width: 600px) {
.phytofairy-section-slider {
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
position: relative;
margin-bottom: 30px;
}
}
.phytofairy-section-small img {
min-height: 33.33%;
padding: 5px;
}
.phytofairy-text {
padding: 8px 12px;
position: absolute;
bottom: 25px;
width: 100%;
text-align: center;
}
.phytofairy-natural-ingredients {
position: absolute;
top: 30%;
width: 100%;
color: rgba(33, 34, 33, 0.85);
font-size: 64px;
font-family: charlinda-Regular;
letter-spacing: 8px;
line-height: 1.5;
text-align: center;
}
.phytofairy-natural-ingredients img {
position: absolute;
left: 36%;
padding-top: 10px;
}
.phytofairy-welcome img:hover, .phytofairy-natural-ingredients img:hover, .phytofairy-lab img:hover, .phytofairy-factory img:hover, .awards-gallery img:hover, .phytofairy-supplement img:hover {
transform: scale(1.15);
}
.phhp-awards-gallery img:hover {
transform: scale(1.03);
}
.phytofairy-section-description h2 {
color: #000000;
letter-spacing: 2px;
font-weight: bold;
font-family: CenturyGothic-Bold;
padding-top: 1px;
}
.phytofairy-section-description p {
font-size: 1.3rem;
line-height: 1.35;
text-align: justify;
}
.phytofairy-section-description {
padding-left: 15px;
padding-right: 15px;
}
.pbp-travel-award {
padding: 15px;
}
.pbp-travel-award h2 {
font-size: 22px;
}
.pbp-system-heading h2 {
text-align: center;
}
.pbp-section-description {
float: left!important;
}
.pbp-section-description p {
font-size: 1.3rem;
line-height: 1.35;
margin-bottom: 0px!important;
}
.pbp-section-description h2 {
color: #000000;
font-weight: bold;
font-family: CenturyGothic-Bold;
padding-top: 10px;
}
.pbp-section-description img {
width: 60%;
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
display: block;
}
.pbp_line {
display: block;
border-top: 2px solid black;
width: 50%;
margin: auto;
margin-top: 15px;
margin-bottom: 10px;
}
.pbp-be-your-own-boss_line {
display: block;
border-top: 2px solid black;
width: 25%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.pbp-earning-potential img {
width: 98%;
padding-bottom: 1px;
padding-top: 5px;
}
.pbp-earning-potential h2 {
padding: 3px;
}
.pbp-earning-potential p {
padding: 7px;
}
.pbp-travel-award img {
width: 80%;
padding-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
display: block;
}
.pbp-tools h2 {
text-align: center;
}
.pbp-tools img {
width: 100%;
}
.pbp-life-transformation img {
width: 100%;
}
.pbp-life-transformation-text {
background: #D1E2B6;
margin-bottom: 15px;
}
.pbp-life-transformation-text2 p {
text-align: center;
}
.pbp-system img {
width: 100%;
padding-top: 5px;
}
.pbp-travel hr.pbp_line {
margin-left: 15px;
}
.pbp-be-your-own-boss {
background: #F6F2EF;
}
.pbp-system {
background: #B7FBE4;
}
.phytofairy-lab {
position: absolute;
top: 7%;
left: 5%;
color: #0B6133;
font-size: 60px;
font-family: HelveticaBold;
letter-spacing: 9px;
line-height: 1.1;
}
.phytofairy-lab img {
position: absolute;
left: 0%;
}
.phytofairy-factory {
position: absolute;
top: 9%;
right: 3%;
color: #000000;
font-size: 34.8px;
font-family: CenturyGothic;
letter-spacing: 2px;
font-weight: bold;
}
.phytofairy-factory img {
position: absolute;
right: 0%;
padding-top: 15px;
}
.awards-gallery img {
position: absolute;
bottom: 3%;
left: 41%;
}
.phytofairy-factory-img {
padding-top: 5px;
}
.phytofairy-bottom-center {
text-align: center;
position: absolute;
bottom: 8px;
font-family: CenturyGothic-Bold;
font-size: 26px;
width: 85%;
color: #000000;
}
.phytofairy-center-natural {
text-align: center;
position: absolute;
top: 32%;
left: 8%;
font-family: Helvetica;
font-size: 45px;
color: #ffffff;
height: 80px;
padding: 24px;
background: rgb(12, 102, 7, 0.8);
width: 85%;
}
.phytofairy-center-supplement {
text-align: center;
position: absolute;
top: 32%;
left: 8%;
font-family: Helvetica;
font-size: 45px;
color: #ffffff;
height: 80px;
padding: 24px;
background: rgb(12, 102, 169, 0.8);
width: 85%;
}
.phytofairy-supplement {
text-align: center;
position: absolute;
top: 61%;
}
.phytofairy-brand {
position: relative;
padding-bottom: 10px;
}
.phytofairy-excellence-brand {
font-family: CenturyGothic-Bold;
position: absolute;
top: 32%;
left: 7%;
color: #0E6D3E;
font-size: 67px;
letter-spacing: 5px;
line-height: 1.5;
}
.phytofairy-excellence-brand-2 {
font-family: CenturyGothic-Bold;
position: absolute;
top: 50%;
left: 7%;
color: #16422C;
font-size: 67px;
letter-spacing: 4px;
line-height: 1.5;
}
.phytofairy-excellence-brand-special {
font-family: FreestyleScript-Regular;
color: #16422C;
font-size: 84.8px;
letter-spacing: 5px;
line-height: 1.5;
}
.natural-ingredient h2 {
position: absolute;
margin: auto;
text-align: center;
top: 17%;
width: 100%;
color: #060606;
font-size: 78px;
font-family: PleaseDontTakeMyMan;
letter-spacing: 10px;
}
.ingredient-section-title h2 {
text-align: center;
color: #000000;
letter-spacing: 2px;
font-size: 2.2rem;
font-weight: bold;
font-family: CenturyGothic-Bold;
padding-top: 10px;
}
.phytofairy-brand h2 {
text-align: center;
color: #000000;
font-size: 1.8rem;
font-weight: bold;
font-family: CenturyGothic-Bold;
padding-top: 15px;
}
.phytofairy-brand p {
text-align: justify;
color: #000000;
font-size: 20px;
font-family: CenturyGothic;
padding-top: 10px;
}
.ingredient-section-font, .ingredient-section-font a {
text-align: center;
color: #000000;
font-size: 1rem;
font-weight: bold;
font-family: HelveticaBold;
padding-top: 15px;
}
.ingredient-shop {
position: relative;
}
img.ingredient-shop-now {
position: absolute;
bottom: 5%;
right: 2%;
width: 16%;
display: none;
}
img.ingredient-shop-now:hover, img.corporate-hq-more-info:hover, img.corporate-supports-more-info:hover, img.corporate-content:hover, img.corporate-career-more-info:hover {
transform: scale(1.15);
}
.phim-space {
padding-bottom: 20px;
}
.awards-gallery-space {
padding-bottom: 10px;
}
.phim-section-title-small h2 {
text-align: center;
color: #076C62;
font-size: 40px;
font-family: HelveticaLight;
letter-spacing: 3px;
}
.phim-section-title h1 {
text-align: center;
color: #046D63;
font-size: 45px;
font-family: HelveticaBold;
letter-spacing: 3px;
}
.phim-location {
position: absolute;
top: 20%;
right: 5%;
}
.phim-location img {
width: 50px;
height: auto;
}
.phim-location h2 {
color: #1B968B;
font-size: 40px;
font-family: HelveticaNeueLTStdMd;
}
.phim-content {
padding-bottom: 15px;
}
.phim-content img {
width: 100%;
height: auto;
}
.phim-cert img {
width: 220px;
height: auto;
padding: 5px;
}
.phim-content p {
text-align: justify;
color: #000000;
font-size: 1.3rem;
font-family: CenturyGothic;
padding: 5px;
line-height: 1.6;
}
.phim-content strong {
text-align: justify;
color: #000000;
font-size: 25px;
font-family: CenturyGothic-Bold;
padding: 5px;
margin-bottom: 15px;
line-height: 1.6;
}
.rnd-content {
padding: 5px;
}
.rnd-content img {
width: 100%;
height: auto;
padding: 5px;
}
.rnd-content h2 {
text-align: center;
color: #000000;
font-size: 25px;
font-family: CenturyGothic-Bold;
line-height: 1.5;
padding: 5px;
}
.rnd-content p {
text-align: left;
color: #000000;
font-size: 20px;
font-family: CenturyGothic;
line-height: 1.2;
padding: 5px;
}
.why-natural-header {
padding: 10px;
}
.why-natural-date p {
float: left;
left: 0;
color: #6C6C6C;
font-size: 22px;
font-family: CenturyGothic;
line-height: 2.5;
padding-left: 5px;
}
.why-natural-social {
float: right;
right: 0;
}
.why-supplement-content {
padding-bottom: 15px;
}
.why-supplement-content h1 {
text-align: left;
color: #000000;
font-size: 36px;
font-family: CenturyGothic-Bold;
letter-spacing: 1.5px;
padding: 10px;
border-left: 6px solid black;
}
.why-supplement-content h2 {
text-align: left;
color: #000000;
font-size: 35px;
font-family: CenturyGothic-Bold;
letter-spacing: 1.5px;
}
.why-supplement-content h3 {
text-align: left;
color: #000000;
font-size: 34px;
font-family: CenturyGothic-Bold;
letter-spacing: 1px;
}
.why-supplement-content p {
text-align: justify;
color: #000000;
font-size: 20px;
font-family: CenturyGothic;
letter-spacing: 1.2px;
line-height: 1.5;
padding: 5px;
}
.phytofairy-subpage {
background-image: url("../images/phytofairy/phytofairy.png");
height: 500px;
background-size: contain;
background-repeat: no-repeat;
margin-top: 50px!important;
}
.phytofairy-content {
padding-bottom: 15px;
}
.phytofairy-content h1 {
text-align: center;
color: #89D24A;
font-size: 44px;
font-family: ErasITC-Medium;
letter-spacing: 4px;
}
.phytofairy-content p {
text-align: justify;
color: #000000;
font-size: 1.3rem;
font-family: CenturyGothic;
line-height: 1.35;
padding: 5px;
}
.phytofairy-comic, .phytofairy-comic-cn, .phytofairy-comic-my {
padding-top: 20px;
padding-bottom: 40px;
}
.phytofairy-comic img, .phytofairy-comic-cn img, .phytofairy-comic-my img {
width: 100%;
height: auto;
padding: 5px;
}
.phytofairy-comic p, .phytofairy-comic-cn p, .phytofairy-comic-my p {
text-align: center;
color: #000000;
font-size: 20px;
padding: 5px;
height: 120px;
}
.corporate-hq, .corporate-career, .corporate-tools {
position: relative;
}
img.corporate-hq-more-info {
position: absolute;
top: 5%;
right: 3%;
width: 25%;
}
img.corporate-supports-more-info {
position: absolute;
bottom: 5%;
left: 40%;
}
img.corporate-social-love {
position: absolute;
top: 8%;
left: 25%;
width: 50%!important;
}
p.corporate-social-share-love {
position: absolute;
top: 35%;
left: 33%;
color: #ffffff!important;
font-size: 50px!important;
letter-spacing: 2px;
}
span.corporate-social-share-love-special {
color: #ffffff!important;
font-size: 100px!important;
font-family: Mistral;
letter-spacing: 2px;
}
.corporate-career h2 {
position: absolute;
bottom: 15%;
left: 5%;
color: #ffffff;
font-size: 55px;
font-family: HelveticaBold;
letter-spacing: 2.5px;
}
img.corporate-career-more-info {
position: absolute;
bottom: 15%;
right: 5%;
}
.corporate-tools p {
position: absolute;
top: 32%;
color: #ffffff!important;
font-size: 35px!important;
font-family: CenturyGothic-Bold!important;
letter-spacing: 1.5px!important;
}
.corporate-section-title-small h2 {
text-align: center;
color: #000000;
font-size: 48px;
font-family: CenturyGothic-Bold;
letter-spacing: 1px;
}
.corporate-section-title-small-special {
color: #F58220;
font-size: 50px;
font-family: CenturyGothic-Bold;
letter-spacing: 2px;
}
.corporate-space {
padding-bottom: 20px;
}
.corporate-content {
max-width: 100%!important;
}
.corporate-news {
background-image: url("../images/corporate/news.png");
width: 100%;
background-size: contain;
background-repeat: no-repeat;
}
.corporate-news img {
width: 72%!important;
}
.corporate-news .next {
right: 15px!important;
}
.about-phhp-our-philosophy {
background-color: #f5f5f5;
}
.about-phhp-our-philosophy img {
margin-top: -80px!important;
width: 150px!important;
}
.innovation-and-support-banner h2 {
position: absolute;
top: 30%;
width: 100%;
text-align: center;
color: #ffffff;
font-size: 74px;
font-family: HelveticaBold;
letter-spacing: 2px;
}
.innovation-and-support-banner h4 {
position: absolute;
top: 46%;
width: 100%;
text-align: center;
color: #ffffff;
font-size: 20px;
font-family: HelveticaBold;
}
.innovation-and-support-content p, .innovation-and-support-content li {
text-align: justify;
color: #000000;
font-size: 1.3rem;
font-family: CenturyGothic;
line-height: 1.4;
padding: 0 40px;
}
.innovation-and-support-content li {
margin-left: 5%;;
}
.innovation-and-support-content img {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
padding-top: 30px;
padding-bottom: 30px;
}
.about-phhp-content p {
text-align: justify;
color: #000000;
font-size: 1.3rem;
font-family: CenturyGothic;
line-height: 1.35;
padding: 0 40px;
}
.about-phhp-content img {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
padding-top: 30px;
}
.about-phhp-philosophy p {
text-align: left!important;
}
.about-phhp-keyword p {
text-align: left!important;
font-size: 1.5rem!important;
padding-left: 11%!important;
padding-top: 25px!important;
padding-bottom: 25px!important;
}
.about-phhp-keyword-c {
background-color: #FED987;
margin-bottom: 20px;
}
.about-phhp-keyword-a {
background-color: #FFBF9C;
margin-bottom: 20px;
}
.about-phhp-keyword-r {
background-color: #A1F0FD;
margin-bottom: 20px;
}
.about-phhp-keyword-e {
background-color: #FEA1AC;
margin-bottom: 20px;
}
.corporate-content p {
text-align: center;
color: #000000;
font-size: 1.3rem;
font-family: CenturyGothic;
line-height: 1.35;
padding: 0 40px;
}
.corporate-content img {
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 15px;
}
.corporate-content-img p {
text-align: center;
color: #000000;
font-size: 1.1rem;
font-family: Helvetica;
line-height: 1.1;
font-weight: bold;
}
.corporate-content-img img {
width: 85%;
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
display: block;
}
.corporate-four-missions h2 {
text-align: center;
color: #000000;
font-size: 23px;
font-family: HelveticaBold;
line-height: 1.1;
padding-top: 25px;
}
.corporate-four-missions p {
text-align: left;
color: #000000;
font-size: 18px;
font-family: Helvetica;
line-height: 1.1;
padding-top: 10px;
}
.phhp-social-responsibility h2 {
text-align: left!important;
padding-left: 30px;
}
.phhp-social-responsibility img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 5px;
}
/* PPM & PPB webpage */
.box8 {
width: 100%;
background: #fff;
}
.box8 h2 {
text-align: left;
color: #000000;
font-size: 1.8rem;
font-weight: bold;
font-family: CenturyGothic-Bold;
padding-top: 20px;
padding-left: 15px;
}
.box8 p {
text-align: left;
color: #000000;
font-size: 1.3rem;
font-family: CenturyGothic;
padding: 15px;
padding-top: 0px;
}
.effect8 {
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect8:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
.ppm-section-5, .ppm-section-6, .ppm-section-7, .ppm-section-8, .ppm-section-9, .ppm-section-10 {
position: relative;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
position: absolute;
top: 25%;
left: 52%;
font-size: 1.8rem;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
position: absolute;
top: 25%;
left: 6%;
font-size: 1.8rem;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
position: absolute;
top: 40%;
left: 52%;
color: #000000;
font-size: 20px;
width: 40%;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
position: absolute;
top: 40%;
left: 6%;
color: #000000;
font-size: 20px;
width: 40%;
}
/* login css*/
.container-login100{width:100%;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:15px;background-repeat:no-repeat;background-position:center;background-size:cover}.wrap-login100{width:100%;background:#fff;border-radius:10px;overflow:hidden}.login100-form{width:100%}.login100-form-title{display:block;font-size:30px;color:#333;line-height:1.2;text-align:center}.wrap-input100{width:100%;position:relative}.label-input100{font-size:18px;color:#333;line-height:1.5;padding-left:7px}.input100{font-size:16px;color:#333;line-height:1.2;display:block;width:100%;height:55px;background:0 0;padding:0 7px 0 43px}.focus-input100{position:absolute;display:block;width:100%;height:100%;top:0;left:0;pointer-events:none}.focus-input100::after{content:attr(data-symbol);color:#adadad;font-size:22px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;justify-content:center;position:absolute;height:calc(100% - 20px);bottom:0;left:0;padding-left:13px;padding-top:3px}.focus-input100::before{content:"";display:block;position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#7f7f7f;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.input100:focus+.focus-input100::before{width:100%}.has-val.input100+.focus-input100::before{width:100%}.input100:focus+.focus-input100::after{color:#a64bf4}.has-val.input100+.focus-input100::after{color:#a64bf4}.container-login100-form-btn{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center}.wrap-login100-form-btn{width:100%;display:block;position:relative;z-index:1;border-radius:25px;overflow:hidden;margin:0 auto;box-shadow:0 5px 30px 0 rgba(3,216,222,.2);-moz-box-shadow:0 5px 30px 0 rgba(3,216,222,.2);-webkit-box-shadow:0 5px 30px 0 rgba(3,216,222,.2);-o-box-shadow:0 5px 30px 0 rgba(3,216,222,.2);-ms-box-shadow:0 5px 30px 0 rgba(3,216,222,.2)}.login100-form-bgbtn{position:absolute;z-index:-1;width:300%;height:100%;background:#a64bf4;background:-webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);background:-o-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);background:-moz-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);background:linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);top:0;left:-100%;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.login100-form-btn{font-size:16px;color:#fff;line-height:1.2;text-transform:uppercase;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;padding:0 20px;width:100%;height:50px}.wrap-login100-form-btn:hover .login100-form-bgbtn{left:0}.validate-input{position:relative}.alert-validate::before{content:attr(data-validate);position:absolute;max-width:70%;background-color:#fff;border:1px solid #c80000;border-radius:2px;padding:4px 25px 4px 10px;bottom:calc((100% - 20px)/2);-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%);right:2px;pointer-events:none;color:#c80000;font-size:13px;line-height:1.4;text-align:left;visibility:hidden;opacity:0;-webkit-transition:opacity .4s;-o-transition:opacity .4s;-moz-transition:opacity .4s;transition:opacity .4s}.alert-validate::after{content:"\f06a";font-family:FontAwesome;display:block;position:absolute;color:#c80000;font-size:16px;bottom:calc((100% - 20px)/2);-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%);right:8px}.alert-validate:hover:before{visibility:visible;opacity:1}@media(max-width:992px){.alert-validate::before{visibility:visible;opacity:1}}.login100-social-item{font-size:25px;color:#fff;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;margin:5px}.login100-social-item:hover{color:#fff;background-color:#333}@media(max-width:576px){.wrap-login100{padding-left:15px;padding-right:15px}}
@media screen and (max-width: 350px) {
.slideshow-container h2 {
top: 33%;
font-size: 20px;
letter-spacing: 5px;
}
.innovation-and-support-banner h2 {
font-size: 20px;
}
.innovation-and-support-banner h4 {
font-size: 9px;
}
.natural-ingredient h2 {
top: 26%;
}
.phytofairy {
height: 120px;
}
.phytofairy-subpage {
height: 120px;
}
.phytofairy-welcome {
padding-top: 1px;
}
.phytofairy-welcome-1 {
font-size: 9.6px;
}
.phytofairy-welcome-2 {
font-size: 14.8px;
}
.phytofairy-section-description h2, .phytofairy-section-title h1, .pbp-section-description h2 {
font-size: 1rem;
}
.phytofairy-natural-ingredients {
font-size: 19px;;
letter-spacing: 4.5px;
}
.phytofairy-text {
bottom: 35px;
}
.phytofairy-section-description p, .box8 p, .pbp-section-description p {
font-size: 1rem;
}
.phytofairy-lab {
font-size: 17px;;
letter-spacing: 1px;
}
.phytofairy-factory {
top: 4%;
font-size: 10.6px;
letter-spacing: 0px;
}
.phytofairy-bottom-center {
bottom: 2px;
font-size: 12px;
width: 100%;
}
.phytofairy-center-natural {
font-size: 18px;
height: 35px;
padding: 5px;
}
.phytofairy-center-supplement {
font-size: 18px;
height: 35px;
padding: 5px;
}
.phytofairy-excellence-brand {
font-size: 19px;;
letter-spacing: 1px;
}
.phytofairy-excellence-brand-2 {
font-size: 19px;;
letter-spacing: 1px;
}
.phytofairy-excellence-brand-special {
font-size: 19px;;
letter-spacing: 1px;
}
.phytofairy-supplement {
top: 69%;
}
.phytofairy-supplement img {
width: 40%;
}
.phytofairy-factory img {
padding-top: 0px;
}
.phim-location img {
width: 17px;
}
.phim-location h2 {
font-size: 12px;
}
.phim-section-title-small h2 {
font-size: 20px;
}
.phim-section-title h1 {
font-size: 26px;
}
.phim-content p {
font-size: 17px;
line-height: 1.2;
}
.phim-content strong {
font-size: 18px;
line-height: 1.2;
}
.corporate-section-title-small h2 {
font-size: 25px;
}
.corporate-section-title-small-special {
font-size: 28px;
}
.corporate-content p, .about-phhp-content p, .innovation-and-support-content p, .innovation-and-support-content li {
font-size: 1.2rem;
padding: 0;
}
img.corporate-content {
width: 50%;
}
.corporate-content-img p {
font-size: 1rem;
}
.corporate-four-missions p {
padding: 10px;
}
.corporate-four-missions h2 {
padding-top: 5px;
}
img.corporate-supports-more-info {
left: 30%;
}
p.corporate-social-share-love {
top: 30%;
left: 33%;
font-size: 16px!important;
}
span.corporate-social-share-love-special {
font-size: 26px!important;
}
.corporate-career h2 {
font-size: 14px;
}
img.corporate-career-more-info {
bottom: 12%;
}
.corporate-announcement p {
font-size: 16px;
padding-top: 15px;
}
.corporate-news .prev{
top: 65%;
}
.corporate-news .next {
right: 0px!important;
top: 65%;
}
.corporate-tools p {
font-size: 12px!important;
}
img.corporate-hq-more-info {
width: 35%;
}
.box8 h2 {
font-size: 1.4rem;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
top: 5%;
font-size: 1.2rem;
width: 44%;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
top: 5%;
font-size: 1.2rem;
width: 44%;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
display: none;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
display: none;
}
img.shop-personal-profile {
max-height: 280px;
}
}
@media screen and (max-width: 440px) and (min-width: 351px) {
.slideshow-container h2 {
top: 33%;
font-size: 22px;
letter-spacing: 5px;
}
.innovation-and-support-banner h2 {
font-size: 20px;
}
.innovation-and-support-banner h4 {
font-size: 12px;
}
.natural-ingredient h2 {
top: 26%;
}
.phytofairy {
height: 140px;
}
.phytofairy-subpage {
height: 145px;
}
.phytofairy-welcome {
padding-top: 1px;
}
.phytofairy-welcome-1 {
font-size: 13px;
}
.phytofairy-welcome-2 {
font-size: 16px;;
}
.phytofairy-section-description h2, .phytofairy-section-title h1, .pbp-section-description h2 {
font-size: 1.2rem;
padding-top: 0px;
}
.phytofairy-natural-ingredients {
font-size: 27px;
letter-spacing: 5px;
}
.phytofairy-text {
bottom: 45px;
}
.phytofairy-section-description p, .box8 p, .pbp-section-description p {
font-size: 1.1rem;
text-align: left;
}
.phytofairy-lab {
font-size: 17px;
letter-spacing: 1.8px;
}
.phytofairy-factory {
top: 4%;
font-size: 12px;
letter-spacing: 0px;
}
.phytofairy-bottom-center {
bottom: 2px;
font-size: 13px;
width: 100%;
}
.phytofairy-center-natural {
font-size: 19px;
height: 40px;
padding: 6px;
}
.phytofairy-center-supplement {
font-size: 19px;
height: 40px;
padding: 6px;
}
.phytofairy-excellence-brand {
font-size: 22px;
letter-spacing: 1px;
}
.phytofairy-excellence-brand-2 {
font-size: 22px;
letter-spacing: 1px;
}
.phytofairy-excellence-brand-special {
font-size: 24.8px;
letter-spacing: 1px;
}
.phytofairy-supplement {
top: 68%;
}
.phytofairy-supplement img {
width: 45%;
}
.phytofairy-factory img {
padding-top: 0px;
}
.phim-location img {
width: 18px;
}
.phim-location h2 {
font-size: 14px;
}
.phim-section-title-small h2 {
font-size: 22px;
}
.phim-section-title h1 {
font-size: 28px;
}
.phim-content p {
font-size: 18px;
line-height: 1.2;
}
.phim-content strong {
font-size: 18px;
line-height: 1.2;
}
.corporate-section-title-small h2 {
font-size: 25px;
}
.corporate-section-title-small-special {
font-size: 28px;
}
.corporate-content p, .about-phhp-content p, .innovation-and-support-content p, .innovation-and-support-content li {
font-size: 1.2rem;
padding: 0;
}
img.corporate-content {
width: 50%;
}
.corporate-content-img p {
font-size: 1rem;
}
.corporate-four-missions p {
padding: 10px;
}
.corporate-four-missions h2 {
padding-top: 5px;
}
img.corporate-supports-more-info {
left: 35%;
}
p.corporate-social-share-love {
top: 30%;
left: 33%;
font-size: 20px!important;
}
span.corporate-social-share-love-special {
font-size: 30px!important;
}
.corporate-career h2 {
font-size: 16px;
bottom: 18%;
}
img.corporate-career-more-info {
bottom: 14%;
}
.corporate-announcement p {
font-size: 17px;
padding-top: 15px;
}
.corporate-news .prev{
top: 65%;
}
.corporate-news .next {
right: 0px!important;
top: 65%;
}
.corporate-tools p {
font-size: 14px!important;
}
img.corporate-hq-more-info {
width: 35%;
}
.box8 h2 {
font-size: 1.4rem;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
top: 4%;
font-size: 1.4rem;
width: 44%;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
top: 4%;
font-size: 1.4rem;
width: 44%;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
display: none;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
display: none;
}
img.shop-personal-profile {
max-height: 330px;
}
}
@media screen and (max-width: 550px) and (min-width: 441px) {
.slideshow-container h2 {
top: 38%;
font-size: 30px;
letter-spacing: 5px;
}
.innovation-and-support-banner h2 {
font-size: 30px;
}
.innovation-and-support-banner h4 {
font-size: 15px;
}
.natural-ingredient h2 {
top: 26%;
}
.phytofairy {
height: 170px;
}
.phytofairy-subpage {
height: 180px;
}
.phytofairy-welcome {
padding-top: 11px;
}
.phytofairy-welcome-1 {
font-size: 16px;;
}
.phytofairy-welcome-2 {
font-size: 22px;
}
.phytofairy-section-description h2, .phytofairy-section-title h1, .pbp-section-description h2 {
font-size: 1.65rem;
}
.phytofairy-natural-ingredients {
font-size: 34.8px;
letter-spacing: 6px;
}
.phytofairy-text {
bottom: 58px;
}
.phytofairy-section-description p, .box8 p, .pbp-section-description p {
font-size: 1.2rem;
}
.phytofairy-lab {
font-size: 24px;
letter-spacing: 3px;
}
.phytofairy-factory {
top: 5%;
font-size: 15.8px;
letter-spacing: 0px;
}
.phytofairy-bottom-center {
bottom: 2px;
font-size: 16px;
width: 100%;
}
.phytofairy-center-natural {
font-size: 23px;
height: 45px;
padding: 7px;
}
.phytofairy-center-supplement {
font-size: 23px;
height: 45px;
padding: 7px;
}
.phytofairy-excellence-brand {
font-size: 34.8px;
letter-spacing: 1px;
}
.phytofairy-excellence-brand-2 {
font-size: 34.8px;
letter-spacing: 1px;
}
.phytofairy-excellence-brand-special {
font-size: 34.8px;
letter-spacing: 1px;
}
.phytofairy-supplement {
top: 66%;
}
.phytofairy-supplement img {
width: 47%;
}
.phytofairy-factory img {
padding-top: 1px;
}
.phim-location img {
width: 19px;
}
.phim-location h2 {
font-size: 16px;
}
.phim-section-title-small h2 {
font-size: 23px;
}
.phim-section-title h1 {
font-size: 29px;
}
.phim-content p {
font-size: 19px;
line-height: 1.2;
}
.phim-content strong {
font-size: 19px;
line-height: 1.2;
}
.corporate-section-title-small h2 {
font-size: 25px;
}
.corporate-section-title-small-special {
font-size: 28px;
}
.corporate-content p, .about-phhp-content p, .innovation-and-support-content p, .innovation-and-support-content li {
font-size: 1.2rem;
padding: 0;
}
img.corporate-content {
width: 40%;
}
.corporate-content-img p {
font-size: 1rem;
}
.corporate-four-missions p {
padding: 10px;
}
.corporate-four-missions h2 {
padding-top: 5px;
}
img.corporate-supports-more-info {
left: 37%;
}
p.corporate-social-share-love {
top: 30%;
left: 34.5%;
font-size: 25px!important;
}
span.corporate-social-share-love-special {
font-size: 35px!important;
}
.corporate-career h2 {
font-size: 20px;
bottom: 18%;
}
img.corporate-career-more-info {
bottom: 15%;
}
.corporate-announcement p {
font-size: 20px;
padding-top: 15px;
}
.corporate-news .prev{
top: 65%;
}
.corporate-news .next {
right: 0px!important;
top: 65%;
}
.corporate-tools p {
font-size: 18px!important;
}
img.corporate-hq-more-info {
width: 35%;
}
.box8 h2 {
font-size: 1.5rem;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
top: 14%;
font-size: 1.4rem;
width: 45%;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
top: 14%;
font-size: 1.4rem;
width: 45%;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
display: none;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
display: none;
}
img.shop-personal-profile {
max-height: 380px;
}
}
@media screen and (max-width: 700px) and (min-width: 551px) {
.slideshow-container h2 {
top: 38%;
font-size: 40px;
letter-spacing: 6px;
}
.innovation-and-support-banner h2 {
font-size: 41px;
}
.innovation-and-support-banner h4 {
font-size: 20px;
}
.natural-ingredient h2 {
top: 26%;
}
.phytofairy {
height: 210px;
}
.phytofairy-subpage {
height: 240px;
}
.phytofairy-welcome {
padding-top: 16px;
}
.phytofairy-welcome-1 {
font-size: 21px;
}
.phytofairy-welcome-2 {
font-size: 25px;
}
.phytofairy-section-description h2, .phytofairy-section-title h1, .pbp-section-description h2 {
font-size: 1.9rem;
}
.phytofairy-natural-ingredients {
font-size: 38.5px;
letter-spacing: 7px;
}
.phytofairy-text {
bottom: 28px;
}
.phytofairy-lab {
font-size: 33px;
letter-spacing: 4px;
}
.phytofairy-factory {
top: 5%;
font-size: 19px;;
letter-spacing: 0px;
}
.phytofairy-bottom-center {
bottom: 2px;
font-size: 18px;
width: 100%;
}
.phytofairy-excellence-brand {
font-size: 38.5px;
letter-spacing: 1.5px;
}
.phytofairy-excellence-brand-2 {
font-size: 38.5px;
letter-spacing: 1.5px;
}
.phytofairy-excellence-brand-special {
font-size: 38.5px;
letter-spacing: 1.5px;
}
.phytofairy-supplement {
top: 66%;
}
.phytofairy-supplement img {
width: 55%;
}
.phytofairy-factory img {
padding-top: 2px;
}
.phim-location img {
width: 20px;
}
.phim-location h2 {
font-size: 17px;
}
.phim-section-title-small h2 {
font-size: 24px;
}
.phim-section-title h1 {
font-size: 30px;
}
.phim-content p {
font-size: 10px;
line-height: 1.2;
}
.phim-content strong {
font-size: 20px;
line-height: 1.2;
}
.corporate-section-title-small h2 {
font-size: 25px;
}
.corporate-section-title-small-special {
font-size: 28px;
}
.corporate-content p, .about-phhp-content p, .innovation-and-support-content p, .innovation-and-support-content li {
font-size: 1.2rem;
padding: 0;
}
img.corporate-content {
width: 30%;
}
.corporate-content-img p {
font-size: 1rem;
}
.corporate-four-missions p {
padding: 10px;
}
.corporate-four-missions h2 {
padding-top: 5px;
}
img.corporate-supports-more-info {
left: 39%;
}
p.corporate-social-share-love {
top: 30%;
left: 36%;
font-size: 32px!important;
}
span.corporate-social-share-love-special {
font-size: 44px!important;
}
.corporate-career h2 {
font-size: 24px;
bottom: 7%;
}
img.corporate-career-more-info {
bottom: 6%;
}
.corporate-announcement p {
font-size: 22px;
padding-top: 15px;
}
.corporate-news .prev{
top: 58%;
}
.corporate-news .next {
right: 0px!important;
top: 58%;
}
.corporate-tools p {
font-size: 22px!important;
}
img.corporate-hq-more-info {
width: 35%;
}
.box8 h2 {
font-size: 1.7rem;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
top: 20%;
font-size: 1.5rem;
width: 45%;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
top: 20%;
font-size: 1.5rem;
width: 45%;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
display: none;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
display: none;
}
img.shop-personal-profile {
max-height: 430px;
}
}
@media screen and (max-width: 599px) and (min-width: 551px) {
.phytofairy-center-natural {
font-size: 25px;
height: 55px;
padding: 12px;
}
.phytofairy-center-supplement {
font-size: 25px;
height: 55px;
padding: 12px;
}
}
@media screen and (max-width: 663px) and (min-width: 600px) {
.phytofairy-center-natural {
font-size: 25px;
height: 50px;
padding: 14px;
}
.phytofairy-center-supplement {
font-size: 25px;
height: 50px;
padding: 14px;
}
}
@media screen and (max-width: 685px) and (min-width: 664px) {
.phytofairy-center-natural {
font-size: 27px;
height: 55px;
padding: 17px;
}
.phytofairy-center-supplement {
font-size: 27px;
height: 55px;
padding: 17px;
}
}
@media screen and (max-width: 1014px) and (min-width: 686px) {
.phytofairy-center-natural {
font-size: 29px;
height: 60px;
padding: 18px;
}
.phytofairy-center-supplement {
font-size: 29px;
height: 60px;
padding: 18px;
}
}
@media screen and (max-width: 1174px) and (min-width: 1015px) {
.phytofairy-center-natural {
font-size: 40px;
height: 64px;
padding: 18px;
}
.phytofairy-center-supplement {
font-size: 40px;
height: 64px;
padding: 18px;
}
}
@media screen and (max-width: 845px) and (min-width: 701px) {
.slideshow-container h2 {
top: 38%;
font-size: 52px;
letter-spacing: 7px;
}
.innovation-and-support-banner h2 {
font-size: 50px;
}
.innovation-and-support-banner h4 {
font-size: 25px;
}
.natural-ingredient h2 {
top: 26%;
}
.phytofairy {
height: 270px;
}
.phytofairy-subpage {
height: 290px;
}
.phytofairy-welcome {
padding-top: 25px;
}
.phytofairy-welcome-1 {
font-size: 28px;
}
.phytofairy-welcome-2 {
font-size: 30px;
}
.phytofairy-section-description h2, .phytofairy-section-title h1 {
font-size: 2.5rem;
}
.phytofairy-natural-ingredients {
font-size: 40px;
letter-spacing: 7px;
}
.phytofairy-lab {
font-size: 40px;
letter-spacing: 5px;
}
.phytofairy-factory {
top: 6%;
font-size: 24.8px;
letter-spacing: 1px;
}
.phytofairy-bottom-center {
bottom: 4px;
font-size: 22px;
width: 90%;
}
.phytofairy-excellence-brand {
font-size: 48px;
letter-spacing: 3px;
}
.phytofairy-excellence-brand-2 {
font-size: 48px;
letter-spacing: 3px;
}
.phytofairy-excellence-brand-special {
font-size: 48px;
letter-spacing: 3px;
}
.phytofairy-supplement {
top: 62%;
}
.phytofairy-supplement img {
width: 60%;
}
.phytofairy-factory img {
padding-top: 8px;
}
.phim-location img {
width: 24px;
}
.phim-location h2 {
font-size: 21px;
}
.phim-section-title-small h2 {
font-size: 25px;
}
.phim-section-title h1 {
font-size: 32px;
}
.phim-content p {
font-size: 20px;
line-height: 1.2;
}
.phim-content strong {
font-size: 22px;
line-height: 1.2;
}
.corporate-section-title-small h2 {
font-size: 25px;
}
.corporate-section-title-small-special {
font-size: 28px;
}
.corporate-content p, .about-phhp-content p, .innovation-and-support-content p, .innovation-and-support-content li {
font-size: 1.2rem;
padding: 0;
}
img.corporate-content {
width: 30%;
}
.corporate-content-img p {
font-size: 1rem;
}
.corporate-four-missions p {
padding: 10px;
}
.corporate-four-missions h2 {
padding-top: 5px;
}
img.corporate-supports-more-info {
left: 39%;
}
p.corporate-social-share-love {
top: 32%;
left: 36%;
font-size: 36px!important;
}
span.corporate-social-share-love-special {
font-size: 55px!important;
}
.corporate-career h2 {
font-size: 30px;
bottom: 7%;
}
img.corporate-career-more-info {
bottom: 6%;
}
.corporate-announcement p {
font-size: 24px;
}
.corporate-news .prev{
top: 58%;
}
.corporate-news .next {
right: 10px!important;
top: 58%;
}
.corporate-tools p {
font-size: 24px!important;
}
img.corporate-hq-more-info {
width: 35%;
}
.box8 h2 {
font-size: 1.5rem;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
top: 8%;
left: 46%;
font-size: 1.5rem;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
top: 8%;
font-size: 1.5rem;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
top: 23%;
left: 46%;
font-size: 15px;
width: 50%;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
top: 23%;
font-size: 15px;
width: 50%;
}
}
@media screen and (max-width: 1040px) and (min-width: 846px) {
.slideshow-container h2 {
top: 38%;
font-size: 60px;
letter-spacing: 8px;
}
.innovation-and-support-banner h2 {
font-size: 60px;
}
.innovation-and-support-banner h4 {
font-size: 25px;
}
.phytofairy-subpage {
height: 350px;
}
.natural-ingredient h2 {
top: 26%;
}
.phytofairy-welcome {
padding-top: 35px;
}
.phytofairy-welcome-1 {
font-size: 28px;
}
.phytofairy-welcome-2 {
font-size: 33px;
}
.phytofairy-section-description h2, .phytofairy-section-title h1 {
font-size: 2.8rem;
}
.phytofairy-natural-ingredients {
font-size: 48px;
letter-spacing: 7px;
}
.phytofairy-lab {
font-size: 46px;
letter-spacing: 5.5px;
}
.phytofairy-factory {
top: 6%;
font-size: 27px;
letter-spacing: 1px;
}
.phytofairy-bottom-center {
bottom: 4px;
font-size: 23px;
width: 92%;
}
.phytofairy-excellence-brand {
font-size: 58px
letter-spacing: 4px;
}
.phytofairy-excellence-brand-2 {
font-size: 58px;
letter-spacing: 4px;
}
.phytofairy-excellence-brand-special {
font-size: 58px;
letter-spacing: 4px;
}
.phytofairy-supplement {
top: 60%;
}
.phytofairy-supplement img {
width: 62%;
}
.phytofairy-factory img {
padding-top: 10px;
}
.phim-location img {
width: 25px;
}
.phim-location h2 {
font-size: 22px;
}
.phim-section-title-small h2 {
font-size: 28px;
}
.phim-section-title h1 {
font-size: 35px;
}
.phim-content p {
font-size: 22px;
line-height: 1.3;
}
.phim-content strong {
font-size: 23px;
line-height: 1.2;
}
.corporate-section-title-small h2 {
font-size: 25px;
}
.corporate-section-title-small-special {
font-size: 28px;
}
.corporate-content p, .about-phhp-content p, .innovation-and-support-content p, .innovation-and-support-content li {
font-size: 1.2rem;
padding: 0;
}
img.corporate-content {
width: 30%;
}
.corporate-content-img p {
font-size: 1rem;
}
.corporate-four-missions p {
padding: 10px;
}
.corporate-four-missions h2 {
padding-top: 5px;
}
img.corporate-supports-more-info {
left: 40%;
}
p.corporate-social-share-love {
top: 32%;
left: 36%;
font-size: 40px!important;
}
span.corporate-social-share-love-special {
font-size: 60px!important;
}
.corporate-career h2 {
font-size: 36px;
bottom: 7%;
}
img.corporate-career-more-info {
bottom: 6%;
}
.corporate-announcement p {
font-size: 26px;
}
.corporate-news .prev{
top: 58%;
}
.corporate-news .next {
right: 10px!important;
top: 58%;
}
.corporate-tools p {
font-size: 30px!important;
}
img.corporate-hq-more-info {
width: 35%;
}
h2.ppm-section-5, h2.ppm-section-7, h2.ppm-section-9 {
top: 15%;
left: 50%;
font-size: 1.6rem;
}
h2.ppm-section-6, h2.ppm-section-8, h2.ppm-section-10 {
top: 15%;
font-size: 1.6rem;
}
p.ppm-section-5, p.ppm-section-7, p.ppm-section-9 {
top: 30%;
left: 50%;
font-size: 18px;
width: 49%;
}
p.ppm-section-6, p.ppm-section-8, p.ppm-section-10 {
top: 30%;
font-size: 18px;
width: 49%;
}
}
@media screen and (max-width: 1150px) and (min-width: 1041px) {
.slideshow-container h2 {
top: 39%;
font-size: 77px;
letter-spacing: 8px;
}
.innovation-and-support-banner h2 {
font-size: 70px;
}
.innovation-and-support-banner h4 {
font-size: 28px;
}
.natural-ingredient h2 {
top: 28%;
}
.phytofairy-natural-ingredients {
font-size: 60px;
letter-spacing: 8px;
}
.phytofairy-factory {
top: 7%;
font-size: 31px;
letter-spacing: 2px;
}
.phytofairy-bottom-center {
bottom: 6px;
font-size: 25px;
width: 92%;
}
.phytofairy-supplement {
top: 59%;
}
.phytofairy-supplement img {
width: 68%;
}
p.corporate-social-share-love {
top: 32%;
left: 36%;
font-size: 45px!important;
}
span.corporate-social-share-love-special {
font-size: 65px!important;
}
.corporate-career h2 {
font-size: 38px;
}
.corporate-tools p {
font-size: 32px!important;
}
}
@media screen and (min-width: 950px) {
.phytofairy-images-bottom img {
width: 70%;
display: block;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 1115px) and (min-width: 701px) {
.phytofairy-comic-my p {
height: 200px!important;
font-size: 18px;
}
.phytofairy-comic p {
font-size: 19px;
}
}
@media screen and (max-width: 700px) and (min-width: 640px) {
.phytofairy-comic-my p {
height: 280px!important;
}
}
@media screen and (max-width: 700px) and (min-width: 300px) {
.phytofairy-comic-my p {
font-size: 18px;
}
.phytofairy-comic p {
font-size: 18px;
}
}
img.button-learn-more {
width: 220px;
}
@media screen and (max-width: 370px) and (min-width: 300px) {
.awards-gallery img.button-learn-more {
width: 60px;
}
}
@media screen and (max-width: 430px) and (min-width: 371px) {
.awards-gallery img.button-learn-more {
width: 70px;
}
}
@media screen and (max-width: 500px) and (min-width: 431px) {
.awards-gallery img.button-learn-more {
width: 84px;
}
}
@media screen and (max-width: 550px) and (min-width: 501px) {
.awards-gallery img.button-learn-more {
width: 100px;
}
}
@media screen and (max-width: 630px) and (min-width: 551px) {
.awards-gallery img.button-learn-more {
width: 110px;
}
}
@media screen and (max-width: 700px) and (min-width: 631px) {
.awards-gallery img.button-learn-more {
width: 135px;
}
}
@media screen and (max-width: 500px) and (min-width: 300px) {
img.button-learn-more {
width: 100px;
}
}
@media screen and (max-width: 800px) and (min-width: 501px) {
img.button-learn-more {
width: 135px;
}
}
@media screen and (max-width: 900px) and (min-width: 801px) {
img.button-learn-more {
width: 155px;
}
}
@media screen and (max-width: 1100px) and (min-width: 901px) {
img.button-learn-more {
width: 180px;
}
}
/* Drop Down Menu */
@media screen and (min-width: 755px) {
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
padding: 15px;
display: none;
position: absolute;
background-color: #fafbfa;
min-width: 1150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu {border-left: 3px solid #DEDEDE;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown-menu a:hover {background-color: #ddd;}
.dropdown-menu a {
font-family: CenturyGothic;
float: left;
text-align: left!important;
padding: 4px;
}
a.dropdown-menu-small {
font-size: 14px;
width: 350px;
}
a.dropdown-heading {
font-size: 20px;
font-weight: bolder;
width: 350px;
}
a.dropdown-subheading {
font-size: 16px;
font-weight: 700;
width: 350px;
}
a.dropdown-shopping {
color: #f71e6b!important;
}
a.dropdown-brands {
color: #19c2ac!important;
}
a.dropdown-knowledge {
color: #92cb3a!important;
}
a.dropdown-corporate {
color: #f78f1e!important;
}
.subheading-block ul, .subheading-block li {
list-style: none;
margin-left: 0;
padding: 0;
height: 35px;
}
.subheading-block li:nth-child(n) a {
background-color: #fafbfa;
color: #000;
}
.subheading-block li:nth-child(n) a:hover {
background-color: #ddd;
}
}
/* Drop Down Menu for Mobile*/
@media screen and (max-width: 754px) {
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 4px;
margin-bottom: 4px;
margin-left: 5px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
a.fa-more, a.fa-more:hover {
color: #000;
}
.topnav {
background-color: #d0d0d2;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: #000000;
padding: 5px;
text-decoration: none;
font-size: 16px;
display: block;
}
.subheadingblock_core, .subheadingblock_targeted, .subheadingblock_beverages, .subheadingblock_skincare, .subheadingblock_body, .subheadingblock_home, .subheadingblock_brands, .subheadingblock_knowledge, .subheadingblock_corporate {
display: none;
}
.subheading-block ul, .subheading-block li {
list-style: none;
margin-left: 0;
padding: 0;
}
.subheading-block li:nth-child(n) a {
background-color: inherit;
color: #000;
}
a.dropdown-menu-small {
font-size: 14px;
width: 300px;
}
a.dropdown-heading {
font-size: 20px;
font-weight: bolder;
width: 300px;
background-color: #d0d0d2!important;
}
a.dropdown-subheading {
font-size: 16px;
font-weight: 700;
width: 300px;
background-color: #d0d0d2!important;
}
a.dropdown-shopping {
color: #f71e6b!important;
}
a.dropdown-brands {
color: #19c2ac!important;
}
a.dropdown-knowledge {
color: #92cb3a!important;
}
a.dropdown-corporate {
color: #f78f1e!important;
}
}
@media screen and (min-width: 1148px) {
.navbar li:nth-child(1n+2), .navbar-2 li:nth-child(1n+2) {
min-width: 362px;
}
}
/* PPM for Mobile*/
@media screen and (max-width: 700px) {
p.ppm-section-5-mobile, p.ppm-section-7-mobile, p.ppm-section-9-mobile {
color: #000000;
padding: 8px;
font-size: 18px;
}
p.ppm-section-6-mobile, p.ppm-section-8-mobile, p.ppm-section-10-mobile {
color: #000000;
padding: 8px;
font-size: 18px;
}
}
@media screen and (min-width: 701px) {
p.ppm-section-5-mobile, p.ppm-section-7-mobile, p.ppm-section-9-mobile {
display: none;
}
p.ppm-section-6-mobile, p.ppm-section-8-mobile, p.ppm-section-10-mobile {
display: none;
}
.ppm-join-now img {
width: 55%;
margin-left: auto;
margin-right: auto;
}
}
/* Referral Link for Mobile*/
@media screen and (max-width: 740px) {
.shop-personal-details {
padding-top: 2px;
padding-bottom: 2px;
}
h5.shop-personal-profile-member, .shop-personal-profile-intro h5 {
font-size: 26px;
}
h5.shop-personal-profile-hi, a.shop-personal-profile-hi, a:hover.shop-personal-profile-hi {
font-size: 20px;
}
p.shop-personal-profile-email, .shop-personal-profile-intro p {
font-size: 18px;
}
.shop-personal-profile-email {
width: 100%;
}
p.shop-personal-profile-id {
padding-top: 0px;
}
#popup_this br, .hover_bkgr_fricc br {
display: none;
}
#popup_this {
left: 5%!important;
padding-top: 0px!important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-bottom: 20px!important;
margin: 45px!important;
}
#popup_this h4:nth-of-type(1), .hover_bkgr_fricc h4:nth-of-type(1) {
padding-top: 35px;
margin: 2px;
}
#popup_this h4:nth-of-type(2), #popup_this h4:nth-of-type(3), .hover_bkgr_fricc h4:nth-of-type(2), .hover_bkgr_fricc h4:nth-of-type(3) {
padding-top: 65px;
margin: 2px;
}
#popup_this h4, #popup_this h4 a, .hover_bkgr_fricc h4, .hover_bkgr_fricc h3, .hover_bkgr_fricc p {
font-size: 0.9rem;
}
#popup_this p {
font-size: 0.75rem;
}
#popup_this .button-share, .hover_bkgr_fricc .button-share {
font-size: 7px;
}
.hover_bkgr_fricc > div {
margin: 40px;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Popup box BEGIN */
.hover_bkgr_fricc h4, .hover_bkgr_fricc h3, .hover_bkgr_fricc p {
text-align: left;
}
.hover_bkgr_fricc a:hover {
color: #000000;
}
.hover_bkgr_fricc{
/*background:rgba(0,0,0,.4);*/
cursor:pointer;
display:none;
margin-top:15%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10000;
}
.hover_bkgr_fricc .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.hover_bkgr_fricc > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 550px;
min-height: 100px;
vertical-align: middle;
position: relative;
border-radius: 8px;
padding: 15px 20px;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
.trigger_popup_fricc {
cursor: pointer;
font-size: 20px;
margin: 20px;
display: inline-block;
font-weight: bold;
}