/*

Theme Name: X
Theme URI: https://theme.co/x/
Author: Themeco
Author URI: https://theme.co/
Description: An immensely powerful and endlessly customizable WordPress theme.
Version: 8.0.7
License: GNU General Public License v2.0
License URI: NaN
Text Domain: __x__

*/

.page-template-page-my-account .e100-3.x-col { text-align: left; }

body[class*=woocommerce] ul.products.columns-3 li.product {width: 29%;}
body[class*=woocommerce] ul.products.columns-3 li.product.first {clear: none;}
body[class*=woocommerce] ul.products.columns-3 li.product.last {margin-right: 4%;}
body[class*=woocommerce] ul.products.columns-3 {margin-right: -4%;}
body[class*=woocommerce] ul.products.columns-3 li.product:nth-of-type(3n+1) {
clear: both;
}
.my-account .collapse{display: block;}
.woocommerce-account .woocommerce .login input[type="text"] {max-width: 500px;}
.woocommerce-account .woocommerce .login input#rememberme {float: none; margin-top: 5px;}
.woocommerce-account .woocommerce .login [type="submit"]:hover,
.woocommerce-account .woocommerce .login [type="submit"] {color: #7a9c59; border-color: #7a9c59;}
.woocommerce-account h2 {margin-top: 0px; }
.woocommerce-account .woocommerce h2 {margin-top: 0px;}
.woocommerce-account .e100-1.x-section {padding-top: 0px;}
.woocommerce-account .e100-4.x-text {margin-top: 0px;}
.my-account .collapse:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0px; height: 0px;}
.my-account .collapse { position: relative;}
.my-account .collapse .large-3,
.my-account .collapse .large-9 {float: left;}
.my-account .collapse .large-3 {padding-left: 100px;}
.my-account ul#menu-my-account-menu {margin: 0px; padding: 40px 0px 0px 0px; list-style: none;}
.my-account ul#menu-my-account-menu li {text-transform: uppercase; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px rgba(0,0,0,0.2) solid;}
.my-account .tabs-inner > h1 {font-family: inherit; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px;  text-transform: none; color: rgba(0,0,0,1); text-transform: uppercase; font-weight: bold; padding-bottom: 0px; margin-top: 50px; margin-bottom: 20px; margin-left: 25px !important; }
.woocommerce-account .my-account .woocommerce .button {color: #7a9c59 !important; border-color: #7a9c59;}
.woocommerce-account .my-account .myaccount_user {margin-bottom: 23px;}
.woocommerce-account .my-account .woocommerce h2 {margin-top: 0px; font-size: 16px; text-transform: uppercase; font-weight: bold;}
.my-account .collapse:before {
content: "";
position: absolute;
top: 0px;
bottom: 0px;
border-right: 1px rgba(0,0,0,0.2) solid;
left: 25%;
}
/* Tab landscape */
@media only screen and (max-width: 1199px) {
   .my-account .collapse .large-3 {width: 25%;}
   .my-account .collapse .large-9 {width: 75%;}
}
/* End of max 1199px */

/* Tab portrait */
@media only screen and (max-width: 991px) {
   body.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
   body.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {float: left;}
   body[class*="woocommerce"] ul.products.columns-3 li.product:nth-child(2n+3),
   body[class*="woocommerce"] ul.products.columns-4 li.product:nth-child(2n+3) {clear: none;}   
	.my-account .collapse .large-3 {padding-left: 0px; width: 80%; margin-left: auto; margin-right: auto; float: none;}
	.my-account .collapse .large-9 {width: 100%;}
	.my-account .collapse::before {display: none;}
}
/* End of max 991px */

/* Mobile  landscape */
@media only screen and (max-width: 767px) {
   body[class*="woocommerce"] ul.products.columns-3 li.product {width: 46%; margin-right: 4%;}
   body[class*=woocommerce] ul.products.columns-3 li.product:nth-of-type(3n+1) {clear: none;}
   body[class*=woocommerce] ul.products.columns-3 li.product:nth-of-type(2n+1) {clear: both;}
}
/* End of max 767px */

/* Mobile portrait */
@media only screen and (max-width: 479px) {
   .woocommerce-account .my-account .woocommerce .myaccount_user .button:first-child {margin-bottom: 10px;}
}

/*Fit mix style*/

#fitmixContainer { width: 80%; height: 100%; float: left; padding-top: 54.2%; position: relative;}

#popupContainer {width: 1000px; height: auto; position: fixed; display: none; z-index: 9999; margin: auto; left: 50%; right: auto; background-color: #000; max-width: 100%; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 40px;}

div#popupContainer:before { content: ""; background: rgba(0, 0, 0, 0.8); position: fixed; left: -2500px; top: -2500px; height: auto; width: auto; display: block; bottom: -2500px; right: -2500px; display: block; z-index: -1;}

#fitmixContainer iframe { position: absolute; top: 0px; width: 100%; bottom: 0px; left: 0px; right: 0px; display: block;}

button {
  display:block;
  margin: 4px;
}


.product_sidebar {
float: left;
width: 20%;
padding-left: 5px;
position: relative;
padding-top: 54.3%;
overflow: hidden;
overflow-y: auto;
}
.clearfix .product_sidebar li:last-child {margin-bottom: 0px;}
.clearfix:before, .clearfix:after {
    clear: both;
    content: "";
    display: table;
}
.clearfix .product_sidebar li {
width: 100%;
height: auto;
list-style: none;
margin-bottom: 3px;
}
.sizeCloseButton { width: 52px; height: 58px; cursor: pointer; position: absolute; right: -10px; top: -50px;  background-color: transparent;  background-image: url(./img/iconclose.svg); background-repeat: no-repeat; background-size: 42px; transition: 1s;}

.clearfix .product_sidebar li button {
width: 100%;
display: block;
background-color: #fff;
border: 0px;
border-radius: 5px;
height: 106px;
position: relative;
outline: 0px;
}

.clearfix .product_sidebar li button img {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}

.x-main.full {min-height: 500px;}

@media screen and (min-width: 1400px) {
.x-main.full {min-height: 600px;}
}

/*80% and 75%*/
@media screen and (min-width: 1600px) {
.x-main.full {min-height: 700px;}
}

/*67%*/
@media screen and (min-width: 1900px) {
.x-main.full {min-height: 1200px;}
}

   /*50%*/
@media screen and (min-width: 2300px) {
.x-main.full {min-height: 1200px;}
}

/*33%*/
@media screen and (min-width: 2800px) {
.x-main.full {min-height: 1900px;}
}

.post-type-archive-product #fitmixContainer{
	width: 100%;
}
.centeredSizeContainer{
	position: absolute;
    right: 195px;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
	transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.genderText {
    font-size: 24px;
    max-width: 340px;
    margin: auto;
    margin-bottom: 14px;
}
.genderButtonContainer {
    margin: 4px;
}
.genderButton {
    border: 1px solid white;
    border-radius: 3px;
    margin: auto;
    width: 100px;
    display: inline-block;
    cursor: pointer;
    padding: 10px 0px;
    font-weight: 300;
    margin-right: 6px;
    margin-left: 6px;
}
.sizeSeparator {
    margin: 14px;
}
.sizeSeparatorText {
    display: inline-block;
    position: absolute;
    position: relative;
}
.sizeSeparatorLeft {
    width: 120px;
    border-bottom: 1px solid white;
    display: inline-block;
    position: absolute;
    left: -130px;
    top: 10px;
}
.sizeSeparatorRight {
    width: 120px;
    border-bottom: 1px solid white;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: -130px;
}
.sizePupillaryDistanceText {
    margin: 8px;
    margin-bottom: 14px;
}
.pupillaryDistanceSelect {
    padding: 4px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 4px;
    height: 34px;
}
.centeredSizeContainer {
position: absolute;
right: 195px;
bottom: 0;
z-index: 9999;
background: rgba(0,0,0,0.5);
transform: none;
top: 0px;
left: 0px;
display: flex;
flex-wrap: wrap;
color: #fff;
justify-content: center;
text-align: center;
align-items: center;
align-content: center;
}
.sizeSeparator,
.genderButtonContainer {
width: 100%;
}
.brands_list {
position: absolute;
top: -37px;
left: 50px;
right: 50px;
}

.brands_list ul {
display: flex;
justify-content: center;
align-items: baseline;
flex-wrap: wrap;
width: 100%;
margin: 0px;
list-style: none;
}

.brands_list li a {
border: 1px #fff solid;
display: block;
padding: 5px 10px;
font-size: 12px;
border-radius: 2px;
color:#fff
}

html body .brands_list li a:hover {
background-color: #fff;
color: #000;
}

.brands_list li {
padding-left: 5px;
padding-right: 5px;
}
div#cs-content .brands_list li a {
border: 1px #fff solid;
display: block;
padding: 5px 10px;
font-size: 12px;
border-radius: 2px;
color: #fff !important;
}
div#cs-content .brands_list li.active  a,
div#cs-content .brands_list li a:hover {
background-color: #fff;
color: #000 !important;
}
.product_sidebar ul {
margin-left: 0px;
margin-bottom: 0px;
position: absolute;
top: 0px;
right: 0px;
left: 5px;
}

/* Tab portrait */
@media only screen and (max-width: 991px) {
   #popupContainer {width: 730px; margin-top: 15px;}
   .centeredSizeContainer {right: 146px;}
   .brands_list {top: -30px; left: 30px; right: 30px;}
   .brands_list li {padding-left: 3px; padding-right: 3px; padding-bottom: 6px;}
   div#cs-content .brands_list li a {padding: 3px 5px; font-size: 12px; line-height: 14px;}
   .sizeCloseButton {width: 30px; height: 30px; right: 0px; top: -35px; background-size: 100%;}
   .product_sidebar {height: auto; overflow-x: auto; padding-top: 44.2%; position: relative;}    
   .product_sidebar ul {margin-left: 0px; position: absolute; left: 5px; top: 0px; right: 0px; bottom: 0px;}
   .sizePupillaryDistanceText {width: 100%;}
   #fitmixContainer {padding-top: 44.2%; position: relative;}
   
}
/* End of max 991px */

/* Mobile  landscape */
@media only screen and (max-width: 767px) {
   #popupContainer {width: 96%; margin-top: 25px;}
   .brands_list {top: -52px; left: 50px; right: 50px;}
   #fitmixContainer {padding-top: 44%; width: 70%;}
   .product_sidebar {width: 30%; padding-top: 44%;}
   .centeredSizeContainer {right: 30%;}
   .sizePupillaryDistanceText {margin-bottom: 10px; margin-top: 0px;}
   .genderText {font-size: 20px; margin-bottom: 5px; line-height: 24px;}
   .genderButton {padding: 5px 0px;}
   .sizeCloseButton {top: -45px;}
   .sizeSeparator { margin-top: 5px; margin-bottom: 5px;}
}
/* End of max 767px */

@media only screen and (max-width: 479px) {
   .brands_list {top: -84px; left: 30px; right: 30px;}
   #fitmixContainer {padding-top: 80%; width: 100%;}
   .product_sidebar {width: 100%; padding-top: 0px; overflow-x: scroll; position: absolute; bottom: -100px; left: 0px; right: 0px;}
   .sizeCloseButton {top: -30px; width: 25px; height: 25px;}
   .product_sidebar ul { margin-left: 0px; position: relative; left: auto; top: 0px; right: 0px; bottom: auto; display: table; width: 100%; margin-bottom: 0px; cursor: pointer; padding-bottom: 0px;}
   .clearfix .product_sidebar li { width: auto; height: auto; margin-bottom: 3px; display: table-cell; padding-right: 5px;}
   .clearfix .product_sidebar li button { width: 150px; display: block; background-color: #fff; border: 0px; border-radius: 5px; height: 100px; position: relative; outline: 0px;}
   .centeredSizeContainer {right: 0px;}
   #popupContainer {margin-top: 0px;}
}
.clearfix .product_sidebar li button img{ 
	width: auto;
	height: auto;
}

.product_sidebar
{
 scrollbar-width: thin;
 scrollbar-color: rgba(199,199,199,0.9) transparent;
   border-radius: 0px;
}
.product_sidebar::-webkit-scrollbar {
 width: 11px;  
}
.product_sidebar::-webkit-scrollbar-track {
 background-color: rgba(199,199,199,0);
   border-radius: 0px;
}
.product_sidebar::-webkit-scrollbar-thumb {
 background-color: rgba(199,199,199,0.9);
 border-radius: 0px;
}