:root {
--color1: #0055AA;
--color2: #FF8000;
--colorborder: #F2F2F2;
--colorbg: #F9F9F9;
--maxwidth: 1250px;
}
body {
font-family: arial, sans-serif;
font-size: 15px;
line-height: 1.5;
color: #444;
background: #FFF;
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
nav, ul, li {
margin: 0;
padding: 0;
} a, h1, h2, h3, h4 {
color: var(--color1);
transition: 0.5s;
}
a:hover {
color: var(--color2);
}
a:active, a:hover, a:link, a:visited {
text-decoration: none;
} h1 {
font-size: 160%;
}
h2 {
font-size: 140%;
}
h3 {
font-size: 120%;
}
h4 {
font-size: 100%;
}
h1, h2, h3, h4 {
margin: 10px 0;
font-weight: 600;
} input, radio, select, textarea {
padding: 5px 10px;
color: #555;
outline: 0;
background: #FFF;
border: 1px solid var(--colorborder);
}
input[type=checkbox] {
border: none;
box-shadow: none;
width: auto;
}
.button-primary, .form-submit input, button {
cursor: pointer;
padding: 6px 11px;
background: var(--color1);
border: 0;
outline: 0;
color: #FFF;
transition: 0.5s;
}
.button-primary:hover, .form-submit input:hover, button:hover {
background: var(--color2);
}
input[type=text]:focus, radio:focus, select:focus, textarea:focus {
background: #F9F9F9;
border-color: #CCC;
}
form ::placeholder {
font-size: 90%;
color: #CCC;
} blockquote{
font-size: 110%;
width:90%;
margin:30px auto;
font-style:italic;
color: #555555;
padding:1.2em 30px 1.2em 75px;
border-left:5px solid var(--color1);
line-height:1.6;
position: relative;
background: var(--colorbg);
}
blockquote::before{
font-family:arial, sans-serif;
content: "\201C";
color: var(--color1);
font-size:4em;
position: absolute;
left: 10px;
top:-10px;
}
blockquote::after{
content: '';
}
code {
background: #F5F5F5;
border: #F2F2F2 solid 1px;
padding: 5px;
} img {
height: auto;
}
a img {
border: none;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
img.aligncenter {
display: block;
margin: 5px auto;
}
img.alignright {
display: inline;
margin: 0 0 5px 5px;
padding: 5px;
}
img.alignleft {
display: inline;
margin: 0 5px 5px 0;
padding: 5px;
}
.wp-caption {
border: #F2F2F2 solid 1px;
background-color: #FFF;
padding: 5px;
margin: 5px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
text-align: center;
font-style: italic;
font-size: 80%;
padding: 5px 5px 0;
margin: 0;
}
.aligncenter {
display: block;
margin: 5px auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption, img, img.alignnone, p img {
max-width: 100%;
} @keyframes blinker {
50% {
opacity: 0;
}
}
.blink {
animation: blinker 1s linear infinite;
} @keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-50px)
}
80% {
transform: translateX(10px)
}
100% {
opacity: 1;
transform: translateX(0px)
}
} ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #F5F5F5; 
}
::-webkit-scrollbar-thumb {
background: #E7E7E7; 
}
::-webkit-scrollbar-thumb:hover {
background: var(--color1); 
}
body ::-webkit-scrollbar	{
width: 6px;
height: 6px;
} .info {
border: #F2F2F2 solid 1px;
background-image: linear-gradient(to top, #FAFAFA, #FFF);
padding: 5px 10px;
}
.notis {
border: #FFB973 solid 1px;
background: #FFFFEC;
padding: 4px 10px;
color: #FF8000;
}
.notif {
border: #e2c702 solid 1px;
background: #FFFFEC;
padding: 5px 10px;
color: #e2c702
}
.warning {
background: #fff2f2b0;
border: 1px solid #f7b1b1;
padding: 5px 10px;
color: red;
}
.sukses {
border: 1px solid #4CAF50;
background: #D9F4DB;
padding: 5px 10px;
color:#4CAF50;
}
.kotax {
width: 100%;
padding: 10px;
margin: 10px 0;
}
.kotax ul li {
padding: 3px 0;
margin: 5px 10px 5px 20px;
} .small {
font-size: 80%;
line-height: 1.4em;
}
.medium {
font-size: 90%;
line-height: 1.4em;
}
.big {
font-size: 160%;
line-height: 1.3em;
font-weight: 600;
}
.jumbo {
font-size: 400%;
line-height: 1.3em;
font-weight: 600;
}
.hidden {
font-size: 0;
}
.tred {
color:red;
}
.tgreen {
color:#4CAF50;
}
.torange {
color:#FF8000;
}
.tyellow {
color: #e2c702;
}
.tgrey {
color: #AAA;
}
.tcolor {
color: var(--color1);
}
.thover {
color: var(--color2);
}	
.judul {
margin: 10px 0;
font-size: 110%;
font-weight: 600;
color: var(--color1);
}
.maintitle {
margin: 10px auto;
overflow: hidden;
text-align: center;
}
.maintitle h1, .maintitle h2, .maintitle h3, .maintitle h4 {
font-size: 150%;
margin: 0;
font-weight: 900;
display: inline-block;
border: 1px solid var(--color1);
border-width: 1px 1px 1px 10px;
background: #FFF;
padding: 7px 12px;
}
.maintitle p {
margin: 15px 0;
}
.maintitle h1 span, .maintitle h2 span, .maintitle h3 span, .maintitle h4 span {
font-size: 50%;
display: block;
font-weight: 400;
text-transform: uppercase;
color: var(--color2);
margin-bottom: -5px;
}
.sorter .maintitle {
text-align: left;
margin-top: 0;
margin-bottom: 20px;
}	
.sorter .maintitle h3 {
float: left;
margin-right: 10px;
}
.sorter .maintitle p {
margin: 0;
padding: 10px 0;
border-top: 1px solid var(--colorborder);
}
.headtitle {
color: var(--color1);
border-bottom: 1px solid var(--colorborder);
margin-bottom: 15px;
font-size: 110%;
font-weight: 600;
}
.headtitle span{
padding-bottom: 5px;
display: inline-block;
border-color: var(--color1);
border-style: solid;
border-width: 1px 1px 1px 10px;
padding: 5px 12px;
margin-bottom: -1px;
}
.katarsip {
padding: 15px;
margin: -15px -15px 15px;
position: relative;
background: linear-gradient(#FFF, #F9F9F9);
border-bottom: 1px solid var(--colorborder);
overflow: hidden;
}
.katarsip select {
background: none;
width: 110px;
} .glyphicon {
font-size: 80%;
margin-right: 3px;
}
.overback {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.16;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
} .mainwrap {
padding-top:50px;
} #topwrap {
width: 100%;
margin: 0 auto;
background: linear-gradient(#F2F2F2,#FFF);
border-bottom: 1px solid var(--colorborder);
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.tophead {
max-width: var(--maxwidth);
margin: 0 auto;
padding: 5px 10px;
height: 50px;
transition: 0.5s;
position: relative;
}
.topleft {
width: 80%;
float: left;
height: 40px;
overflow: hidden;
font-size: 90%;
}
.topright {
width: 20%;
float: right;
text-align: right;
}
.topleft ul li {
padding-left: 32px;
line-height: 40px;
display: inline-block;
margin-right: 20px;
}
.allkontak {
background: var(--color1);
color: #FFF;
padding: 5px 10px;
display: inline-block;
margin: 0 20px 0 3px;
}
.allkontak:hover {
background: var(--color2);
color: #FFF;
}
.topsearch, .topmember, .topcart {
width: 50px;
height: 40px;
line-height: 40px;
display: inline-block;
cursor: pointer;
text-align: center;
font-size: 20px;
position: relative;
color: var(--color1);
}
.topsearch:hover, .topmember:hover, .topcart:hover {
color: var(--color2);
transition: 0.5s;
}
.topsearch {
display: none;
} .pcs {
background: var(--color2);
width: 20px;
height: 20px;
border-radius: 50%;
color: #FFF;
font-size: 8px;
line-height: 20px;
display: inline-block;
position: absolute;
top: 4px;
right: 30px;
text-align: center;
}
#rincian {
width: 370px;
padding: 10px 15px 15px;
position: absolute;
z-index: 2;
background: #FFF;
right: 10px;
top: calc(100% - 5px);
display: none;
text-align: left;
border: 1px solid var(--colorborder);
}
#rincian button {
width: 100%;
text-transform: uppercase;
padding: 10px 15px;
letter-spacing: 0.1em;
}
#rincian .jcart-items {
font-size: 90%;
border: none;
}
#rincian .jcart-items img {
max-width:90px;
}
#rincian .jcart-item-berat,#rincian .jcart-item-qtyberat, #rincian .jcart-item-price {
display: none;
}
#rincian #jcart table tbody {
display:block;
max-height: 400px;
overflow: auto;
} .infomember {
padding: 10px 15px;
text-align:center;
cursor: default;
float: right;
width:50%;
}
.menumember {
width:50%;
padding: 10px;
text-align:left;
float: left;
}
.menumember ul li {
width: 100%;
font-size: 95%;
list-style: none;
padding: 5px 10px;
}
#topmember {
width: 370px;
position: absolute;
z-index: 2;
right: 10px;
top: calc(100% - 5px);
border: 1px solid var(--colorborder);
background:#FFF;
display: none;
} #headerwrap {
width: 100%;
margin: 0 auto;
background: linear-gradient(#FFF, #EEE);
transition: 0.5s;
}
.header {
max-width: var(--maxwidth);
margin: 0 auto;
padding: 10px 5px;
height: 120px;
transition: 0.5s;
position: relative;
}
.headleft,.headright  {
width: 50%;
padding: 10px;
height: 100%;
display: inline-grid;
align-items: center;
overflow: hidden;
float: left;
}
.headleft img{
max-width: 100%;
max-height: 80px;
}
.headleft p {
width:100%;
line-height: 1.2em;
}
.headleft a {
font-weight: 900;
font-size: 140%;
display: block;
margin-bottom: 5px;
} .searching {
width: 100%;
border: 2px solid var(--color1);
padding: 5px;
background: var(--colorbg);
border: 1px solid var(--colorborder);
overflow: hidden;
}
.searching input {
margin-top: 5px;
float: left;
padding: 0 15px;
line-height: 30px;
height: 40px;
background: #FFF;
width: 84%;
margin: 0;
border: none;
}
.searching input::placeholder {
color: #DDD;
}
.searching button {
height: 40px;
width: 16%;
padding: 5px 10px;
font-size: 120%;
line-height: 30px;
float: right;
margin: 0;
border: none;
} #naviwrap {
width: 100%;
margin: 0 auto;
transition: 0.5s;
background: var(--color1);
}
.navi {
max-width: var(--maxwidth);
margin: 0 auto;
font-size: 90%;
text-align: left;
position: relative;
}
.togglemenu {
content: 'MENU NAVIGASI';
cursor: pointer;
display: none;
color: #fff;
text-align: center;
background: rgba(0,0,0,.2);
padding: 10px 15px;
height: 40px;
}
#navicontent {
width: 100%;
z-index: 1;
background: var(--color1)
}
.naviku > li {
float: left;
line-height: 36px;
}
.naviku a {
padding: 0 15px;
color: #FFF;
}
.naviku {
list-style: none;
text-align: left;
}
.naviku:after {
content: " ";
display: table;
clear: both;
}
.naviku > li > a {
display: block;
text-transform: uppercase;
}
.naviku ul {
list-style: none;
width: 200px;
border-bottom: 1px solid var(--colorborder);
border-left: 2px solid var(--color1);
z-index: 100;
}
.naviku li {
position: relative;
}
.naviku li:hover {
background: rgba(0,0,0,0.07);
}
.naviku > li .parent {
background-image: url(//distributor4lifetransferfactors.com/wp-content/themes/indostore-per/images/downArrow.png);
padding-right: 40px;
background-repeat: no-repeat;
background-position: right;
}
.naviku li ul {
position: absolute;
left: -9999px;
background: #FFF;
}
.naviku > li.hover > ul {
left: 0;
}
.naviku li li.hover ul {
left: 100%;
top: 0;
}
.naviku li li {
border: 1px solid var(--colorborder);
border-bottom: none;
border-left: none;
}
.naviku li li a {
display: block;
position: relative;
color: #555;
}
.naviku li li ul {
margin-top:-1px;
} #newstickerwrap {
width: 100%;
background: #FAFAFA;
height: 40px;
position: relative;
border-bottom: 1px solid var(--colorborder);
}
.newsticker {
max-width: var(--maxwidth);
margin: 0 auto;
display: block; 
}
.newsticker li{
padding: 0 15px;
margin-top: 8px;
font-size: 14px;
line-height: 2em;
list-style-type: none;
}
.newsticker li span{
background: var(--color2);
color: #FFF;
padding: 2px 6px;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
}
.newsticker:after {
content: 'INFORMASI';
position:absolute;
background-image: linear-gradient(to right, #FAFAFA, #FAFAFA, transparent);
top: 0;
left: 0;
height: 40px;
padding: 0 100px 0 15px;
font-weight: 900;
font-size: 12px;
line-height: 40px;
color: var(--color1);
}
.newsticker:before {
content: '';
position:absolute;
background-image: linear-gradient(to left, #FAFAFA, #FAFAFA, transparent);
top: 0;
right: 0;
height: 40px;
width: 50px;
z-index: 1;
} #containwrap {
width: 100%;
overflow: hidden;
position: relative;
background: var(--colorbg);
}
.maincontain {
max-width: var(--maxwidth);
overflow: hidden;
margin: 0 auto;
padding: 15px;
}
.contain {
padding: 15px;
overflow: hidden;
background: #FFF;
border: 1px solid var(--colorborder);
margin-bottom: 10px;
position: relative;
} #splitwrap {
width: 79%;
float: right;
min-height: 300px;
}
#splitwrap .contain:last-child {
margin-bottom: 0;
} #slider img {
width: 100%;
}
.sliderblock {
position: absolute;
width:100%;
height: 100%;
top:0;
left:0;
display: flex;
align-items: center;
padding: 0 140px;
text-align: center;
}
.slidertext {
max-width: 700px;
padding: 15px;
} 
.slidertext h2 {
color: var(--color1);
font-size: 150%;
text-transform: uppercase;
margin:0;
}
.slidertext h2 span {
color: var(--color2);
font-size: 60%;
display: block;
font-weight: 400;
margin-bottom: -5px;
}
.slidertext p {
font-size: 110%;
line-height:1.3em;
font-weight: 300;
margin: 0 0 15px;
}
.slidertext button {
border: 2px solid var(--color1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.slidertext button:hover {
border: 2px solid #FFF;
}
#slidprod, #slidblog, #slidfeat, #katspes { width: calc(100% + 16px);
margin: -8px;
}
#slidprod .gridpad, #slidblog .gridpad, #slidfeat .gridpad { width: 100%;
} .why {
width: 50%;
padding: 10px;
float: left;
}
.why:nth-child(2n){
clear: left;
}
.why h2 {
font-size: 120%;
margin-bottom: 10px;
text-transform: capitalize;
font-weight: 900;
}
.why p {
margin: 0 0 15px;
}
.why img {
max-width: 120px;
float: left;
margin: 0 10px 5px 0;
} .gridpadks {
margin: 8px;
padding-bottom: 10px;
text-align: center;
border: 1px solid var(--colorborder);
}
.gridpadks img{
background: #FFF;
margin-bottom: 5px;
transition: 0.5s;
width: 100%;
}
.gridpadks a:hover img {
opacity: 0.5;
}
.gridpadks:hover {
box-shadow: 0 0 5px 3px rgba(51,51,51,0.1);
} .gridpad{
padding: 8px;
float: left;
width: 20%;
}
.gridpad:nth-child(5n+1){
clear: left;
}
.areafeed,.blogfeed {
overflow: hidden;
margin: -8px -8px 30px;
}
.grid,.gridblog {
width: 100%;
overflow: hidden;
background: #FFF;
transition: 0.5s;
position: relative;
border: 1px solid var(--colorborder);
}
.grid:hover,.gridblog:hover {
box-shadow: 0 0 5px 3px rgba(51,51,51,0.1);
}
.grid img, .gridblog img {
transition: 0.5s;
width: 100%;
}
.grid:hover img, .gridblog:hover img {
opacity: 0.5;
}
.grid p, .gridblog p {
display: none;
font-size: 90%;
}
.grid:hover .quicklabel,.grid:hover .buttonthumb {
opacity: 1;
transition: 0.5s;
}
.imgthumb {
position: relative;
}
.tithumb {
padding: 0 8px 5px;
}
.tithumb .judul{
display: block;
font-weight: 400;
font-size: 100%;
margin: 5px 0;
font-size: 90%;
}
.buttonthumb {
position: absolute;
bottom: 5px;
right: 5px;
width: 100%;
text-align: right;
opacity: 0;
}
.buttonthumb button {
border: none;
font-size: 90%;
}
.buttonthumb .detailt {
display: none;
} .labeli {
display: inline-block;
padding: 3px 8px;
font-size: 80%;
background: var(--color1);
color: #FFF;
position: absolute;
top: 5px;
left: 5px;
}
.labeli a {
color: #FFF;
}
.labeli:hover {
background: var(--color2);
}
.disclabel {
position: absolute;
top: 5px;
right: 5px;
color: var(--color1);
border: 1px solid var(--color1);
background: rgba(255,255,255,0.5);
display: flex;
align-items: center;
padding: 2px 6px 4px;
font-size: 110%;
}
.disclabel span{
text-align: center;
display: block;
line-height: 1em;
}
.disclabel strong{
font-weight: 400;
} .gridpad.listview {
width: 100%;
}
.listview .imgthumb{
float: left;
max-width: 170px;
margin-right: 10px;
}
.listview .tithumb {
padding: 10px;
}
.listview .tithumb p {
display: block;
}
.listview .buttonthumb{
position: static;
opacity: 1;
text-align: left;
}
.listview .buttonthumb .detailt {
display: inline-block;
} #testi {
width: 100%;
margin: 10px auto;
}
.testi {
text-align: center;
margin: 2px 0 15px;
}
.testi .avatesti {
display:inline-block;
}
.testi p {
font-size: 95%;	
}
#testi .owl-prev, #testi .owl-next {
top: 25px;
} .gmaps iframe {
width: 100%;
margin-bottom: -6px;
} .popup {
min-width: 300px;
max-width: 1000px;
display: none;
padding: 15px;
}
.popup ul li {
list-style: none;
padding: 5px 0;
}
.popup td {
padding:3px;
vertical-align: top;
} .quickpop {
min-width: 300px;
max-width: 500px;
display: none;
padding: 15px;
}
.quickpop ul li {
list-style: none;
padding: 5px 0;
}
.quicklabel {
opacity: 0;
position: absolute;
bottom: 2px;
right: 2px;
font-size: 18px;
z-index: 2;
}
.quickdetail {
margin-left: 180px;
}
.quickview {
width: 170px;
float: left;
text-align: center;
}
.quickview img {
width: 100%;
background: #FFF;
border: 1px solid var(--colorborder);
margin-bottom: 10px;
} #kontak-kami {
max-width: 420px;
}
.kontak ul li {
border-bottom: 1px solid var(--colorborder);  
padding-left: 40px;
line-height: 30px;
}
.kontak ul li:last-child {
border: none;
}
#kontak-kami a {
float: right;
font-weight: bold;
}
.smsli, .telli, .messli, .tgramli, .lineli, .wali, .mailli {
background-image: url(//distributor4lifetransferfactors.com/wp-content/themes/indostore-per/images/kontak.png);
background-repeat: no-repeat;
height: 40px;
}
.smsli {
background-position: 0 0;
}
.telli {
background-position: 0 -40px;
}
.wali {
background-position: 0 -80px;
}
.messli {
background-position: 0 -120px;
}
.tgramli {
background-position: 0 -160px;
}
.lineli {
background-position: 0 -200px;
}
.mailli {
background-position: 0 -240px;
} .pagination {
width: 100%;
margin: 30px 0;
text-align: center;
}
.pagination a, .pagination > .current {
border: #F2F2F2 solid 1px;
padding: 5px 10px;
background: #FFF;
margin: 0 2px;
display: inline-block;
}
.pagination a:hover, .pagination > .current {
color: #FFF;
background: var(--color1);
} .wrap-post {
overflow: hidden;
}
.wrap-post ul li, .elementor-text-editor ul li {
margin: 0 10px 0 30px;
}
.utube {
width: 100%;
margin: 10px auto;
}
.utube iframe {
width:100%;
height:500px;
} #sidewrap {
width: 21%;
float: left;
padding-right: 10px;
overflow: auto;
}
#sidewrap .sidebar:last-child {
margin-bottom: 0;
}
#sidewrap::-webkit-scrollbar-track {
background: none; 
}
#sidewrap::-webkit-scrollbar-thumb {
background: none; 
}
#sidewrap:hover::-webkit-scrollbar-track {
background: #F5F5F5; 
}
#sidewrap:hover::-webkit-scrollbar-thumb {
background: #E7E7E7; 
}
.sideopen {
position: fixed;
top: 45%;
left: -15px;
background: #FFF;
border: 1px solid var(--color1);
border-width: 10px 1px 1px 1px;
color: var(--color1);
transform: rotate(270deg);
font-size: 90%;
width: 60px;
height: 36px;
line-height: 26px;
text-align:center;
cursor: pointer;
display: none;
z-index: 1;
}
.sideclose {
position: fixed;
top:0;
left: 0;
background: var(--color1);
color: #FFF;
width: 260px;
height: 30px;
line-height: 30px;
font-size: 90%;
text-align: center;
cursor: pointer;
display: none;
z-index: 1;
}
.sidebar {
padding: 10px;
margin-bottom: 10px;
border: 1px solid var(--colorborder);
background: #FFF;
}
.sidebar ul li{
margin: 0 10px 0 20px;
}
.sidebar h4 {
margin: -11px -11px 10px;
padding: 6px 12px;
border: 1px solid var(--color1);
border-width: 1px 1px 1px 10px;
text-transform: uppercase;
}
.sidebar .owl-pagination {
display: none;
} .navigori ul li {
list-style: none;
padding: 4px;
margin: 0;
position: relative;
border-bottom: 1px solid #F9F9F9;
}
.navigori ul li:last-child {
border-bottom: none;
}
.navigori li a {
text-decoration: none;
}
.navigori li li {
margin-left: 12px;
border-bottom: none;
}
.navigori li li:before {
content: '';
position: absolute;
top: 8px;
right: 100%;
width: 7px;
height: 7px;
border-bottom: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.navigori li li a {
font-size: 90%;
}
.navigori > ul > li > .children {
overflow: hidden;
max-height: 0;
transition: 0.5s;
border-top: 1px solid #FFF;
}
.navigori > ul > li > .children:after {
content: '';
position: absolute;
top: 8px;
right: 0;
width: 30px;
height: 10px;
background-image: url(//distributor4lifetransferfactors.com/wp-content/themes/indostore-per/images/downArrow.png);
background-repeat: no-repeat;
background-position: right;
}
.navigori li:hover .children {
display: block;
max-height: 300px;
overflow: auto;
} .hotitem {
width: 100%;
overflow: hidden;
font-size: 90%;
}
.hotitem img {
float: left;
margin-right: 5px;
transition: 0.5s;
}
.hotitem:hover img {
opacity: 0.5;
}
.hotitem .medium {
display: flow-root;
}
#hotitem .owl-prev, #hotitem .owl-next {
top: 25px;
} #footerwrap {
background: var(--color1);
width: 100%;
position: relative;
}
#footerwrap a {
color: #FFF;
}
#footerwrap a:hover {
color: var(--color2);
}
.footer {
max-width: var(--maxwidth);
margin: 0 auto;
color: #FFF;
position: relative;
padding:50px 15px 20px;
}
.footer h4 {
text-transform: uppercase;
margin-top: 0;
font-weight: 900;
color: #FFF;
border-left: 10px solid rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.07);
padding: 6px 12px;
}
.footer button {
background: none;
color: #FFF;
border: 1px solid #FFF;
}
.footer button:hover {
background: var(--color2);
}
.footbarwidget {
width: 33.333%;
padding: 20px 15px 20px;
float: left;
}
.footbar {
margin-bottom: 30px;
overflow: hidden;
position: relative;
}
.footbar ul li {
padding: 5px 0;
list-style-type:none;
}
.footbar ul li li {
border-left: 1px solid rgba(255, 255, 255, 0.25);
padding-left: 5px;
}
#copyrightwrap {
background: rgba(0,0,0,.2);
width: 100%;
padding: 20px 15px;
}
.copyright {
max-width: var(--maxwidth);
margin: 0 auto;
color: #F5F5F5;
padding: 10px 15px;
position: relative;
overflow: hidden;
text-align: center;
} .socmed a{
display: block;
height: 42px;
margin: 8px 0;
line-height: 1.2em;
}
.socmed b{
display: block;
}
.socmed .small {
display: flow-root;
}
.fb, .twit, .bl, .toped, .shopee, .insta,.lazada, .blibli {
background-image: url(//distributor4lifetransferfactors.com/wp-content/themes/indostore-per/images/socmed.png);
background-repeat: no-repeat;
width: 42px;
height: 42px;
border-radius: 50%;
float: left;
margin-right: 5px;
}
.toped {
background-position: 0 0;
}
.bl {
background-position: -44px 0;
}
.shopee {
background-position: -88px 0;
}
.insta {
background-position: -132px 0;
}
.fb {
background-position: -176px 0;
}
.twit {
background-position: -220px 0;
}
.lazada {
background-position: -264px 0;
}
.blibli {
background-position: -308px 0;
} .comments, .comments input[type="text"], .comments textarea {
width: 100%;
}
.comments label {
font-weight: bold;
}
.comments input[type="radio"] {
margin: 0 5px;
color: #CCC;
}
.comment-respond {
margin: 20px 0;
}
.comments ul li {
list-style-type: none;
margin-bottom: 20px;
position: relative;
}
.comments li li {
margin-left: 8%;
}
.comments li li .avadiskusi {
width: 60px;
height: 60px;
}
.ratestar {
display:inline-block;
margin-right: 10px;
padding: 8px 5px 2px 2px;
border: 1px solid transparent;
}
.ratestar:hover {
background: #F2F2F2;
border-color: #EEE;
}
.leftcomment {
width: 13%;
float: left;
padding: 15px 10px 0 0;
text-align: right;
}
.rightcomment {
width: 87%;
padding: 10px;
float: left;
}
.rightcomment p {
display: table;
background: #F9F9F9;
padding: 10px;
margin: 5px 0;
} .scrollup {
position: fixed;
display: none;
z-index: 600;
width: 40px;
height: 40px;
bottom: 20px;
right: 20px;
text-indent: -9999px;
background: url(//distributor4lifetransferfactors.com/wp-content/themes/indostore-per/images/icon_top.png) no-repeat;
opacity: 0.1;
} .waarea {
position: fixed;
z-index: 3;
width: 280px;
bottom: 0;
right: 20px;  
padding: 0 15px 0;
background: #FFF;
box-shadow: 0 2px 6px 6px rgba(51,51,51,0.09);
text-align: center;
}
.watitle {
background: #24BE5B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #FFF;
position: absolute;
bottom: 100%;
right: 0;
width: 100%;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.wacontent {
width: 100%;
background: #FFF;
color: #444;
margin-top: 10px;
margin-bottom: 15px;
display: none;
}
.wacontent a{
color: #444;
}
.toggled {
display:block;
}
.walist {
padding: 10px;
border-top: 1px solid var(--colorborder);
text-align: left;
}
.walist:hover {
background: #F1FCE9
}
.wapop .walist {
background: #EFEFEF;
border-top: none;
border-bottom: 1px solid #D5D5D5;
}
.walist img {
float: left;
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 10px;
}
.waonline {
color: #30A958
}	
.wapop {
width: 420px;
display: none;
padding:0;
background-image: url(//distributor4lifetransferfactors.com/wp-content/themes/indostore-per/images/wa/wa-back.jpg);
position: relative;
}
.wachat {
height: 180px;
padding: 10px;
}
.wabubble1,.wabubble2 {
background: #FFF;
position: relative;
padding: 5px 10px;
margin-left: 10px;
margin-bottom: 3px;
font-size: 14px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius:5px;
display: table;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.15);
}
.wabubble1:after {
content: '';
position: absolute;
display: block;
top: 0;
right: 100%;
width: 0;
height: 0;
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-right: 10px solid #FFF;
}
.wareply {
background: #EFEFEF;
padding: 10px;
display: flex;
height: 55px;
}
.wareply ::placeholder {
color: #CCC;
}
.wareply input {
width: 85%;
margin:0;
border: none;
}
.wareply button {
width: 15%;
margin:0;
text-align: center;
background: #24BE5B;
}
.wareply button:hover {
opacity: 0.7;
} .avatar {
padding: 5px;
background: #FFF;
float: left;
margin: 0 10px 0 0;
border: #F2F2F2 solid 1px;
}
.avaprofil {
width: 150px;
height: 150px;
}
.avatesti, .avadiskusi {
width: 80px;
height: 80px;
} .shareit {
margin: 10px 0 0;
display: inline-block;
overflow: hidden;
border: 1px solid var(--colorborder);
padding: 10px;
background-image: linear-gradient(to top, #FAFAFA, #FFF);
}
.shareit strong {
line-height: 28px;
float: left;
}
.shareit span{
line-height: 28px;
font-size: 28px;
margin-left: 10px;
width: 30px;
float: left;
}
.shareit span:hover {
opacity: 0.8;
} .owl-controls .owl-buttons div {
filter:Alpha(Opacity=0);
opacity:0;
background: #FFF;
border-radius: 50%;
}
.smallslider .owl-controls .owl-buttons .owl-prev, .megaslider .owl-controls .owl-buttons .owl-prev {
left: 50px;
background-color: #FFF;
}
.smallslider .owl-controls .owl-buttons .owl-next, .megaslider .owl-controls .owl-buttons .owl-next {
right: 50px;
background-color: #FFF;
}
.owl-carousel .owl-buttons .owl-prev{
transition: 0.5s;
opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-prev {
left: 15px;
opacity: 1;
}
.owl-carousel .owl-buttons .owl-next{
transition: 0.5s;
opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-next {
right:15px;
opacity: 1;
} .tabmenu {
border-bottom: 1px solid var(--colorborder);
}
.tabmenu button{ 
background: #FFF;
color: #DDD;
border-color: var(--colorborder);
border-style: solid;
border-width: 1px 1px 1px 10px; 
margin: 0 5px -1px 0;
font-weight: 600;
}
.tabmenu button.active,.tabmenu button:hover {
color: var(--color1);	 
border-color: var(--color1);	
}
.tabcontent {
padding-top: 15px;
display: none;
animation: moveInRight .5s ease-out;
} 
.tabcontent ol {
font-size: 90%;	
} .autoheading {
font-size: 0;
margin: 0;
padding: 0;
}
.crumbs {
margin-bottom: 15px;
font-size: 90%;
}
.maintenis {
text-align: center;
height: 50px;
line-height: 50px;
background: #ff3100b8;
color: #FFF;
width: 100%;
position: absolute;
z-index: 1000;
top: 0;
}
.error {
border: 1px solid red;
background: #FFDDDD;
margin-bottom: 5px;
}
label.error {
border: none;
background: none;
color: #FA3C3C;
font-size: 90%;
display: block;
}
.select2-container--default .select2-selection--single {
border-color: #EEE;
} .contain .midform {
margin: 0 auto;
}
.contain .midwrap,.contain .regwrap {
max-width: 100%;
}
.contain .loginwrap {
margin-bottom: 20px;
}
#dataresi {
margin-top: 15px;
}
.boxpp {
float: none;
width: auto;
margin: 0 0 10px;
border-color: var(--color1);
border-width: 1px 1px 1px 10px;
text-align: left;
padding: 15px;
overflow: hidden;
background: #FFF;
}
.boxpp .judul {
margin-top: 0;
}
.boxpp ul {
margin: 0;
max-width: 70%;
overflow: auto;
white-space: nowrap;
padding: 5px 0;
position: absolute;
top: 1px;
right: 1px;
display: inline-flex;
}
.boxpp ul li {
display: inline-block;
border: none;
padding: 5px 10px;
}
.boxpp .avaprofil {
width: 80px;
height: 80px;
float: left;
margin-right: 15px;
}
.boxpp .uploadpic {
right: -5px;
}
.contain .boxinfo {
float: none;
padding: 15px;
width: 100%;
background: #FFF;
border: 1px solid var(--colorborder);
}
.boxview #galeriview {
height: 100px;
max-width: 400px;
margin: 10px auto 0;
}
.boxview .disclabel {
top: 10px;
right: 10px;
}
.boxdetail .labeli {
position: initial;
}
.boxview {
padding-right: 15px;
}
.boxview .zoomwrap {
max-width: 400px;
margin: 0 auto;
}
.boxdetail {
padding-left: 15px;
border-left: 1px solid var(--colorborder);
}
.warni,.warni.selected:before {
border-radius: 0;
}
.viewcart {
border: none;
padding: 0;
}
.wizard-navigation .progress-with-circle {
height: 4px;
top: 0;
}
.nav-pills {
height: 4px;
top: 0;
background: var(--colorborder);
}
.nav-pills>li {
height: 50px;
}
.wizard-card .icon-circle {
border-width: 2px;
height: 52px;
color: var(--colorborder);
border-color: var(--colorborder);
}
.nav-pills > li.active > a [class*="ti-"], .nav-pills > li.active > a:hover [class*="ti-"], .nav-pills > li.active > a:focus [class*="ti-"] {
font-size: 22px;
}
.nav-pills > li.active > a:after {
height: 52px;
}
.wizard-navigation {
height: 80px;
margin-top: 30px;
background: #FFF;
border: 1px solid var(--colorborder);
border-bottom: none;
}
.wizard-footer {
margin: 0;
}
.wizard-card form {
border: 1px solid var(--colorborder);
overflow: hidden;
padding: 15px;
background: #FFF;
border-top: none;
}
.btn-number {
background: none;
color: var(--color1);
}
.input-number {
border: 1px solid var(--colorborder);
}