article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
canvas,
video {
display: inline-block;
}
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
a {
background: transparent;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button {
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face {
font-family: 'wf_segoe-ui_light';
src: url('fonts/segoe-ui/light/latest.eot');
src:
local("Segoe UI Light"),
local("Segoe WP Light"),
url('fonts/segoe-ui/light/latest.eot?#iefix') format('embedded-opentype'),
url('fonts/segoe-ui/light/latest.woff') format('woff'),
url('fonts/segoe-ui/light/latest.ttf') format('truetype'),
url('fonts/segoe-ui/light/latest.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'wf_segoe-ui_light';
src: url("fonts/segoe-ui/semilight/latest.eot");
src:
url("fonts/segoe-ui/semilight/latest.eot?#iefix") format("embedded-opentype"),
url("fonts/segoe-ui/semilight/latest.woff") format("woff"),
url("fonts/segoe-ui/semilight/latest.ttf") format("truetype"),
url("fonts/segoe-ui/semilight/latest.svg#web") format("svg");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'wf_segoe-ui_normal';
src: url('fonts/segoe-ui/normal/latest.eot');
src:
local("Segoe UI"),
local("Segoe"),
local("Segoe WP"),
url('fonts/segoe-ui/normal/latest.eot?#iefix') format('embedded-opentype'),
url('fonts/segoe-ui/normal/latest.woff') format('woff'),
url('fonts/segoe-ui/normal/latest.ttf') format('truetype'),
url('fonts/segoe-ui/normal/latest.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'wf_segoe-ui_normal';
src: url('fonts/segoe-ui/semibold/latest.eot');
src:
local("Segoe UI Semibold"),
local("Segoe Semibold"),
local("Segoe WP Semibold"),
url('fonts/segoe-ui/semibold/latest.eot?#iefix') format('embedded-opentype'),
url('fonts/segoe-ui/semibold/latest.woff') format('woff'),
url('fonts/segoe-ui/semibold/latest.ttf') format('truetype'),
url('fonts/segoe-ui/semibold/latest.svg#web') format('svg');
font-weight: bold;
font-style: normal;
}
html {
font-size: 10px;
background: #fff;
/* font-size: 62.5%;*/
}
body, div, dl, dt, dd, ul, li, form {
margin: 0;
padding: 0;
}
ol, ul {
list-style: none
}
body {
font-size: 14px;
font-size: 1.4rem;
color: #000;
/*font-family:  "Century Gothic", Futura, Arial;
font-family: arial,"sans-serif";*/
}
body {
font-family: wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
color: #000;
}
a {
text-decoration: none;
color: #333;
outline: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #4ca3bf;
}
input,
select,
textarea {
font-family: "wf_SegoeUI","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=url],
input[type=text] {
text-indent: 4px;
-webkit-appearance: none;
border-radius: 0;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=url],
input[type=text],
select,
textarea {
border: 1px solid #ccc;
}
/*input[type=text],
input[type=text]:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}*/
.white, a.white:link, a.white:visited {
color: #fff;
}
.primary, a.primary:link, a.primary:visited {
color: #4ca3bf;
}
.red, a.red:link, a.red:visited {
color: #ff0000;
}
.b, a.b:link, a.b:visited {
font-weight: bold;
}
.u, a.u:link, a.u:visited {
text-decoration: underline;
}
.nou, a.nou:link, a.nou:visited {
text-decoration: none;
}
.clearfix:after {
clear: both;
content: "";
display: block;
height: 0;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
}
.none {
display: none;
}
.hidden {
visibility: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.inline-block {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
img {
max-width: 100%;
border: none;
}
/* ===BGN Buttons ===============*/
button, .button {
position: relative;
overflow: visible;
border: none;
display: inline-block;
padding: 3px 10px;
color: #4c4c4c;
text-align: center;
vertical-align: middle;
margin: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #f2f2f2;
/* IE hacks */
zoom: 1;
*display: inline;
font-family: wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
button:hover, .button:hover,
button:focus, .button:focus,
button:active, .button:active {
color: #fff;
background-color: #54b5d4;
text-decoration: none;
}
button:active, .button:active,
button.active, .button.active {
color: #fff;
background-color: #54b5d4;
}
/* default primary positive negative error  info  success*/
/* overrides extra padding on button elements in Firefox */
.button::-moz-focus-inner {
padding: 0;
border: 0;
}
.button.primary {
color: #fff;
background-color: #4ca3bf;
}
.button.primary:hover,
.button.primary:focus,
.button.primary:active {
background-color: #54b5d4;
}
.button.primary:active,
.button.primary.active {
background-color: #54b5d4;
}
.button.blue {
color: #fff;
background-color: #4ca3bf;
}
.button.blue:hover,
.button.blue:focus,
.button.blue:active,
.button.blue.active {
background-color: #54b5d4;
}
.button.box-btn {
padding: 8px 5px;
border: 2px solid #3c3c3c;
color: #000;
font-size: 14px;
font-weight: bold;
background-color: #fff;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.button.box-btn:hover,
.button.box-btn:focus,
.button.box-btn:active {
color: #fff;
background-color: #3c3c3c;
}
/*black*/
.button.circle-black {
padding: 6px 33px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
font-size: 16px;
color: #fff;
background-color: #333;
}
.button.circle-black:hover,
.button.circle-black:focus,
.button.circle-black:active {
background-color: #000;
}
/*loading*/
.button.loading,
.button.loading:hover,
.button.loading:focus,
.button.loading:active {
background-color: #ccc;
cursor: wait;
}
button[disabled]{
color: #b3b3b3;
background-color: #f8f8f8;
box-shadow: none;
cursor: default;
}
/*=== begin 20151117 select component ===*/
.choose-group {
position: relative;
text-align: left;
font-size: 13px;
color: #000;
}
.choose-current {
position: relative;
border: 1px solid #ccc;
height: 25px;
line-height: 23px;
text-indent: 10px;
background-color: #fff;
cursor: pointer;
}
.choose-current .arrow {
position: absolute;
width: 25px;
height: 19px;
top: 3px;
right: 0px;
border-left: 1px solid #ccc;
background: url(images/icons/arrow-down.png) center center no-repeat;
}
.choose-list {
position: absolute;
width: 100%;
top: 27px;
padding: 8px 10px 0px;
border: 1px solid #ccc;
border-top: 0px;
box-sizing: border-box;
background-color: #fff;
z-index: 10;
}
.choose-list .choose-option {
margin-bottom: 10px;
cursor: pointer;
}
/*=== end 20151117 select component ===*/
/* bof text upcase */
.uppercase {
text-transform: uppercase;
}
/* eof text upcase */
/*layout*/
#wrapper-container {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
background-color: #fff;
width: 100%;
}
/* layout */
/* bof PC header */
#wrapper {
position: relative;
}
#header {
position: relative;
min-height: 54px;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
z-index: 300;/* ie7 position erro */
}
.header-container {
position: relative;
min-height: 55px;
background-color: #404040;
z-index: 300;
}
.logo-container {
float: left;
margin-top: 19px;
padding: 0;
width: 200px;
}
#logo {
display: block;
width: 0;
padding-left: 199px;
height: 18px;
overflow: hidden;
background: url('images/logo-global-x-1.png') -5px -10px no-repeat;
}
@media(min--moz-device-pixel-ratio:1.5), (-o-min-device-pixel-ratio:3/2), (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
#logo {
background-image: url('images/logo-global-x-2.png');
background-size: 220px 77px;
}
}
/* eof PC header */
@media screen and (max-width: 1257px) {
#container,
.main-width {
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
@media screen and (max-width: 720px) {
#container,
.main-width {
padding-left: 10px;
padding-right: 10px;
}
}
/* BGN Size Slider */
/* Ion.RangeSlider
// css version 1.8.1
// by Denis Ineshin | ionden.com
// ===================================================================================================================*/
/* =====================================================================================================================
// RangeSlider */
.irs {
position: relative; display: block;
}
.irs-line {
position: relative;
display: block;
overflow: hidden;
}
.irs-line-left,
.irs-line-mid,
.irs-line-right {
position: absolute; display: block;
top: 0;
}
.irs-line-left {
left: 0;
width: 10%;
}
.irs-line-mid {
left: 10%;
width: 80%;
}
.irs-line-right {
right: 0; width: 10%;
}
.irs-diapason {
position: absolute;
display: block;
left: 0;
top: 11px;
width: 100%;
}
.irs-slider {
position: absolute;
display: block;
cursor: default;
z-index: 1;
cursor: pointer;
}
.irs-slider.single {
left: 10px;
}
.irs-slider.single:before {
position: absolute;
display: block;
content: "";
top: -50%;
left: -100%;
width: 300%;
height: 200%;
background: rgba(0,0,0,0);
}
.irs-slider.from {
left: 100px;
}
.irs-slider.from:before {
position: absolute;
display: block;
content: "";
top: -50%;
left: -200%;
width: 300%;
height: 200%;
background: rgba(0,0,0,0.0);
}
.irs-slider.to {
left: 300px;
}
.irs-slider.to:before {
position: absolute;
display: block;
content: "";
top: -50%;
left: 0;
width: 300%;
height: 200%;
background: rgba(0,0,0,0.0);
}
.irs-slider.last {
z-index: 2;
}
.irs-min {
position: absolute; display: block;
left: 0;
cursor: default;
}
.irs-max {
position: absolute; display: block;
right: 0;
cursor: default;
}
.irs-from, .irs-to, .irs-single {
position: absolute; display: block;
top: 0; left: 0;
cursor: default;
white-space: nowrap;
}
.irs-grid {
position: absolute; display: none;
bottom: 0; left: 0;
width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
display: block;
}
.irs-grid-pol {
position: absolute;
top: 0; left: 0;
width: 1px; height: 8px;
background: #000;
}
.irs-grid-pol.small {
height: 4px;
}
.irs-grid-text {
position: absolute;
bottom: 0; left: 0;
width: 100px;
white-space: nowrap;
text-align: center;
font-size: 9px; line-height: 9px;
color: #000;
}
/* Ion.RangeSlider, Flat UI Skin
// css version 1.8.1
// by Denis Ineshin | ionden.com
// ===================================================================================================================*/
/* =====================================================================================================================
// Skin details */
.irs-diapason{
background-color: #999;
}
.irs-slider {
width: 14px;
height: 18px;
top: 4px;
}
.irs-slider {
background: url(images/slider-button.png) center 1px no-repeat;
}
@media(min--moz-device-pixel-ratio:1.5), (-o-min-device-pixel-ratio:3/2), (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
.irs-slider {
width: 20px;
height: 22px;
top: 2px;
background-image: url('images/slider-button-2x.png');
background-size: 20px 20px;
}
}
.irs {
height: 23px;
}
.irs-with-grid {
height: 60px;
}
.irs-line {
height: 0px;
border: 1px solid #dadada;
border-right-color: #e5e5e5;
border-left-color: #e5e5e5;
top: 11px;
background-color: #e5e5e5;
}
.irs-diapason {
height: 2px;
}
.irs-min, .irs-max {
color: #999;
font-size: 10px; line-height: 1.333;
text-shadow: none;
top: 0; padding: 1px 3px;
background: #e1e4e9;
border-radius: 4px;
}
.irs-from, .irs-to, .irs-single {
color: #fff;
font-size: 10px; line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
background: #fff;
border-radius: 4px;
}
.irs-from:after, .irs-to:after, .irs-single:after {
position: absolute; display: block; content: "";
bottom: -6px; left: 50%;
width: 0; height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #fff;
}
.irs-grid-pol {
background: #e1e4e9;
}
.irs-grid-text {
color: #999;
}
/* eof new filter */
/*========before is new==================*/
h1, .light-title {
font-family: wf_segoe-ui_light, 'Segoe UI Light', 'Segoe WP Light', wf_segoe-ui_normal, 'Segoe UI', Segoe, 'Segoe WP', Tahoma, Verdana, Arial, sans-serif;
font-weight: normal;
}
h1.normal-title {
font-family: wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
h1.important-title {
font-size: 40px;
margin-top: 40px;
margin-bottom: 20px;
}
.button.gray, .popup-button-cancel {
background-color: #e5e5e5;
}
.button.gray:hover,
.button.gray:focus,
.button.gray:active,
.button.gray.active,
.button.popup-button-cancel:hover,
.button.popup-button-cancel:focus,
.button.popup-button-cancel:active,
.button.popup-button-cancel.active {
color: #fff;
background-color: #e5e5e5;
}
/*red*/
.button.red {
color: #fff;
background-color: #b22e2e;
}
.button.red:hover,
.button.red:focus,
.button.red:active {
background-color: #d24646;
}
.button.red:active,
.button.red.active {
background-color: #d24646;
}
/*red*/
/*black*/
.button.black {
color: #fff;
background-color: #404040;
}
.device-desktop .button.black:hover,
.device-desktop .button.black:focus,
.device-desktop .button.black:active {
background-color: #4e4e4e;
}
.button.black:active,
.button.black.active {
background-color: #404040;
}
/* light black*/
.button.light-black {
padding: 3px 25px 5px;
color: #fff;
background-color: #404040;
font-family: 'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
.button.light-black:hover,
.button.light-black:focus,
.button.light-black:active {
background-color: #404040;
}
/*processing*/
.button.processing {
color: #a3a3a3;
background-color: #e6e6e6;
cursor: progress;
}
.button.processing:hover,
.button.processing:focus,
.button.processing:active,
.device-desktop .button.processing:hover,
.device-desktop .button.processing:focus,
.device-desktop .button.processing:active {
color: #a3a3a3;
background-color: #e6e6e6;
cursor: progress;
}
.button.processing:active,
.button.processing.active,
.device-desktop .button.processing:active,
.device-desktop .button.processing.active {
color: #a3a3a3;
background-color: #e6e6e6;
cursor: progress;
}
.button.small {
font-size: 14px;
padding: 3px 10px;
}
.button.big {
font-size: 20px;
padding: 5px 15px;
font-weight: bold;
}
/* for checkbox */
.ui-checkbox {
position: relative;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
background: url('images/icons/icons-checkbox.png') 0 0 no-repeat;
overflow: hidden;
}
.ui-checkbox input {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
filter: alpha(opacity=0);
opacity: 0;
}
.ui-normal-checkbox, .ui-normal-checkbox-selected{
display: inline-block;
cursor: pointer;
font-weight: bold;
background-position: 0 0;
cursor: pointer;
}
.ui-checkbox.disabled {
opacity: 0.45;
filter:alpha(opacity=45);
cursor: default;
}
.ui-normal-checkbox-selected {
background-position: 0 -30px;
color: #4a668d;
}
.price {
font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
/* beg banner info */
.about-frames {
border-width: 1px 0;
border-style: solid;
border-color: #c7c7c7;
background-color: #f2f2f2;
}
.about-frames.toggle-up {
border-width: 1px 0 0 0;
}
.about-frames .main-width {
position: relative;
}
.about-frames-active {
display: block;
top: -34px;
position: absolute;
left: 6px;
z-index: 10;
padding: 2px 20px 2px 6px;
float: left;
text-transform: uppercase;
cursor: pointer;
font-size: 12px;
}
.about-frames-active b {
height: 0;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #3a3a3a transparent;
position: absolute;
right: 4px;
top: 4px;
}
.about-frames-active.toggle-icon-up b{
top: 7px;
border-color: #3a3a3a transparent transparent transparent;
}
.about-frames-active.align-left {
left: 6px;
}
.about-frames-active.align-center {
left: 40%;
}
.about-frames-active.align-right {
left: auto;
right: 6px;
}
.about-frames-active.bg-white-filter {
color: #000;
background: rgba(250, 250, 250, 0.6);
}
.about-frames-active.font-white {
color: #fff;
}
.about-frames-active.font-white b {
border-color: transparent transparent #fff transparent;
}
.about-frames-active.font-white.toggle-icon-up b {
top: 7px;
border-color: #fff transparent transparent transparent;
}
.about-frames-content {
padding: 15px 0 20px 0;
}
.about-frames-content h1 {
margin: 0 0 15px 0;
}
.about-frames-content p {
margin: 0;
}
.about-frames span.dotted {
display: inline-block;
height: 8px;
width: 5px;
padding-right: 5px;
background: url('images/icons/icon-decimal.gif') 0 0 no-repeat;
}
.about-bogo .about-frames-active {
padding-left: 6px;
color: #fff;
background-color: rgba(3, 3, 3, 0.4);
}
/* end banner info */
.nav-arrow {
display: block;
margin: 0 auto;;
border-style: solid;
_border-style: dashed;
border-width: 9px;
border-color: transparent;
border-top-width: 0;
border-bottom: 9px solid #b3b3b3;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
position: absolute;
left: 51%;
top: -9px
}
.nav-arrow-inner {
display: block;
margin: 0 auto;;
border-style: solid;
_border-style: dashed;
border-width: 9px;
border-color: transparent;
border-top-width: 0;
border-bottom: 9px solid #fff;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
position: absolute;
left: 51%;
top: -8px
}
/* breadcrumb */
.breadcrumb{
margin: 0 auto;
font-size: 14px;
font-size: 1.4rem;
}
.breadcrumb span{
color: #9a9a9a;
}
.breadcrumb a{
color: #578ed7;
}
.breadcrumb p {
margin: 0;
}
.breadcrumb em {
font-size: 14px;
font-size: 1.4rem;
font-style: normal;
display: inline-block;
margin: 0 5px;
}
/** footer **/
#footer {
width: 100%;
}
#footer .main-width {
padding: 0 20px;
}
.parter {
margin: 20px auto;
text-align: center;
}
.parter li {
width: 20%;
display: inline-block;
vertical-align: middle;
text-align: center;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
.footer-content {
margin-top: 15px;
padding-top: 12px;
color: #fff;
line-height: 1.4;
}
.footer-content .footer-links {
padding-top: 20px;
padding-bottom: 15px;
background-color: #404040;
}
.footer-eyeglasses,
.footer-parter,
.footer-sign-up {
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
float: left;
}
.footer-content a {
color: #fff;
white-space: nowrap;
}
.footer-eyeglasses {
width: 48%;
}
.footer-parter {
width: 26%;
text-align: center;
}
.footer-sign-up {
float: right;
width: 25%;
padding-top: 5px;
}
.footer-eyeglasses ul {
-moz-column-width: 33%;
-moz-column-count: 3;
-webkit-column-width: 33%;
-webkit-column-count: 3;
column-width: 33%;
column-count: 3;
overflow: hidden;
}
.footer-eyeglasses li {
padding-bottom: 5px;
width: 33%\9;
float:  left\9;
}
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.footer-eyeglasses ul {
-moz-column-width: 33%;
-moz-column-count: 3;
-webkit-column-width: 33%;
-webkit-column-count: 3;
column-width: 33%;
column-count: 3;
}
.footer-eyeglasses li {
padding-bottom: 5px;
}
}
*/
.footer-sign-up {
padding-right: 0px;
}
.footer-parter p {
margin: 0;
padding: 1px 0px 10px;
width: 100%;
}
.footer-parter span {
display: inline-block;
width: 48%;
max-width: 110px;
text-align: center;
}
.footer-parter img {
margin: 0 3px 5px;
}
.footer-sign-up .follow-us-title {
margin-top: 8px;
text-transform: uppercase;
}
.follow-us-title span {
margin-right: 4px;
white-space: nowrap;
vertical-align: top;
display: inline-block;
}
.follow-us-title a {
display: inline-block;
vertical-align: top;
}
.footer-sign-up dl {
padding-right: 0px;
}
.footer-sign-up dt {
text-transform: uppercase;
}
.footer-sign-up .newsletter-input {
*float: left;
margin: 3px 0;
height: 26px;
padding: 1px;
width: 210px;
line-height: 25px;
border: 1px solid #e6e6e6;
color: #777777;
text-indent: 5px;
vertical-align: middle;
}
.footer-sign-up .newsletter-button {
float: right;
margin-top: 3px;
width: 75px;
height: 28px;
line-height: 28px;
padding: 0 10px;
color: #fff;
background-color: #4e4e4e;
text-transform: capitalize;
}
.copyright {
width: 100%;
height: 25px;
line-height: 25px;
border-top: 1px solid #4e4e4e;
text-align: center;
padding: 10px 0;
background-color: #4e4e4e;
text-align: center;
}
@media screen and (max-width: 1200px) {
.footer-sign-up .newsletter-input {
float: none;
}
.footer-sign-up .newsletter-button {
float: none;
margin-top: 0;
}
.footer-eyeglasses {
width: 76%;
}
.footer-parter {
width: 23%;
float: right;
}
.footer-parter p {
text-align: right;
padding-bottom: 10px;
}
.footer-parter p span:first-child {
text-align: center;
}
.footer-parter span {
text-align: right;
}
.footer-parter img {
margin-right: 0;
}
.footer-content .footer-parter dl {
padding-right: 0;
}
.footer-sign-up {
display: block;
float: none;
width: 100%;
overflow: hidden;
padding-top: 30px;
clear: both;
}
.footer-sign-up dl {
overflow: hidden;
}
.footer-sign-up dd {
float: left;
margin-right: 10px;
}
.copyright {
text-align: left;
text-indent: 20px;
}
/* end footer */
}
@media screen and (max-width: 1024px) {
.footer-eyeglasses {
width: 69%;
}
.footer-parter {
width: 30%;
float: right;
}
}
/* Sub Nav */
.title{
font-size: 36px;
font-weight: normal;
color: #666;
}
/* for fixed */
.stick-transition{
-webkit-transition: top .35s ease;
transition: top .35s ease;
}
.main-nav-content.nav-fixed {
position: fixed;
top: 0;
background-color: #fff;
}
.nav-fixed .subs b {
display: none;
}
/*  index */
#banner {
width: 100%;
text-align: center;
background-color: #f3f7f8;
overflow: hidden;
}
#banner .main-banner {
position: relative;
margin: 0 auto;
}
/* filter  */
#filter-wrapper {
width: 97%;
margin: 0 auto;
max-width: 1200px;
}
#filter{
position: relative;
}
#filter li {
float: left;
width: 11.4%;
margin: 1% 1% 1% 0;
padding-right: 1%;
border-right: 1px dotted #e3e3e3;
height: 250px;
}
#filter .advanced .women{
width: 84px;
}
#filter .shapes dl{
margin-top: 8px;
}
#filter .advanced .men{
width: 52px;
}
.filter-box {
margin: 0 auto;
-webkit-transform: translateZ(0);
}
.filter-result{
padding: 0 6px;
height: 40px;
line-height: 40px;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
}
.bottom-border{
border-bottom: 1px solid #e3e3e3;
}
.result-wrapper {
position: relative;
margin: 0 auto;
overflow: hidden;
padding-left: 0;
}
.filter-result .result-title {
margin: 0;
font-size: 22px;
color: #b22e2e;
float: left;
padding-right: 32px;
background: url(images/category-nav-ico.png) no-repeat right center;
}
.filter-icon-box {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
float: right;
}
.filter-favorite,
.filter-cart {
padding-left: 10px;
line-height: 38px;
display: none;
}
.filter-favorite em,
.filter-cart em {
font-style: normal;
}
.filter-favorite b,
.filter-cart b {
display: inline-block;
width: 0;
height: 0;
padding-left: 16px;
padding-top: 15px;
line-height: 0;
font-size: 0;
overflow: hidden;
vertical-align: middle;
opacity: .6;
filter:alpha(opacity=60);
}
.filter-favorite b {
background: url(images/topbar-my-favorites-light.png) no-repeat 3px 2px;
}
.filter-favorite.enable b {
opacity: 1;
background-position: 3px -25px;
}
.filter-cart b {
background: url(images/topbar-shopping-cart-light.png) no-repeat 0px 0px;
}
.filter-cart.enable b {
opacity: 1;
background-position: 0 -26px;
}
#filter .filter-title {
height: 26px;
line-height: 26px;
font-size: 16px;
color: #4a668d;
border-bottom: 1px solid #e3e3e3;
margin: 5px 0;
}
#filter .filter-title .filter-tip {
font-family: arial;
display: inline-block;
margin-left: 3px;
margin-bottom: 1px;
width: 0px;
padding-left: 15px;
height: 15px;
color: #666;
font-size: 11px;
text-align: center;
line-height: 14px;
cursor: pointer;
text-decoration: none;
background-color: #fff;
vertical-align: middle;
background: url('images/icon-help.png') -1px -1px no-repeat;
overflow: hidden;
}
#filter dd {
width: 110px;
display: inline-block;
height: 30px;
line-height: 30px;
float: left;
}
#filter .sizes dd{
width: 100%;
height: auto;
}
#filter .prescription dd {
width:  150px;
}
#filter .colors{
width: 12%;
position: relative;
z-index: 4;
}
#filter .prices dd{
width: 178px;
}
.filter-layer {
display: none;
}
.disabled .filter-layer{
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.filter-line {
border-top: 1px solid #c9c9c9;
border-bottom: 1px solid #fafafa;
margin: 0;
padding: 0;
*margin-top: -7px;
border-left: none;
border-right: none;
}
.filter-action{
width: 98%;
max-width: 1200px;
margin: 0 auto;
position: relative;
display: none;
}
.filter-action a{
position: absolute;
right: 0;
bottom: -27px;
}
.filter-sizes-tips {
font-size: 14px;
line-height: 1.2;
}
.filter-sizes-info {
margin: 0px;
line-height: 1.4;
}
.filter-sizes-calc {
margin: 15px 0;
padding: 5px 10px;
border: 1px solid #ccc;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.filter-action a {
bottom: -29px;
}
}
.filter-action .action {
color: #fc9842;
}
.hide-filters {
float: right;
padding-right: 12px;
padding: 6px 30px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #ccc;
width: 90px;
background: #f2f2f2 url(images/hide-filters.png) no-repeat 125px 9px;
}
.filter-action .show{
background-image: url(images/show-filters.png);
}
#filter .checkbox {
display: inline-block;
cursor: pointer;
height: 20px;
line-height: 20px;
padding-left: 22px;
background: url(images/no-check-1.png) no-repeat 0 center;
}
#filter .checkbox:hover{
color: #4A668D;
}
#filter .disabled{
opacity: 0.45;
filter:alpha(opacity=45);
cursor: default;
}
#filter .selected {
background: url(images/checked-2.png) no-repeat 0 center;
}
#filter .colors-list {
position: relative;
z-index: 100;
width: 176px;
display: block;
height: 30px;
border: 1px solid #ddd;
cursor: pointer;
margin-top: 4px;
}
#filter .colors .list-all{
display: none;
width: 520px;
height: auto;
overflow: hidden;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ddd;
margin-top: -1px;
padding: 0 4px;
background: #fff url(images/filter-bg.png) left bottom no-repeat;
margin-left: -352px;
}
#filter .colors .list-all li{
border-right: none;
}
#filter .colors-list li {
width: 90px;
height: 29px;
line-height: 29px;
padding: 0 0 2px 40px;
border-bottom: 1px solid #ddd;
font-size: 14px;
position: relative;
margin: 0;
}
#filter .colors dd {
width: 172px;
height: 35px;
position: relative;
}
#filter .colors-list .action{
display: block;
}
#filter #color-checked .action{
border-bottom: none;
border-right: none;
}
#filter .colors-list .default{
width: 176px;
padding: 0;
text-align: center;
border-bottom: none;
border-right: none;
}
#filter .colors-list span {
display: inline-block;
position: absolute;
left: 4px;
top: 5px;
width: 32px;
height: 20px;
background-color: #fff;
}
#filter .colors-list span.all-color {
background:url("images/color/all.jpg") no-repeat 0 0;
}
#filter .colors .dropdown {
position: absolute;
top: 16px;
right: 6px;
height: 0;
border-width: 5px;
border-style: solid;
border-color: #4d4d4d transparent transparent transparent;
z-index: 100;
}
#filter .sizes {
width: 16%;
}
#filter .sizes-list .checkbox{
margin-right: 10px;
}
#filter .demensions {
position: relative;
height: 165px;
margin-top: 10px;
border-right: none;
}
#filter .demensions dt {
margin-bottom: 8px;
}
#filter .prices {
width: 178px;
position: absolute;
right: 0;
top: 0;
height: auto;
margin-right: 0;
padding-right: 0;
border-right: 0;
}
/* bof header filter*/
#header-color-list {
display: none;
}
/* eof header filter*/
.prices .slider-value {
overflow: hidden;
line-height: 150%;
text-align: center;
}
#price-start{
text-align: left;
float: left;
}
#price-end{
text-align: right;
float: right;
}
#filter .colors{
width: 178px;
position: absolute;
right: 0;
top: 85px;
height: auto;
margin-right: 0;
padding-right: 0;
border-right: 0;
}
#filter .advanced{
position: absolute;
left: 0;
top: 120px;
height: auto;
border-right: none;
}
#filter .prices .prices-lens{
display: none;
}
#filter .filter-title span{
display: none;
}
#filter .demensions dd {
width: 185px;
height: auto;
}
#filter .demensions .size-sub-title{
font-weight: bold;
text-align: center;
font-size:1.3rem;
}
#filter .demensions .size-lens, #filter .demensions .size-temple, #filter .demensions .size-height{
height: 130px;
display:none;
}
.result-title{
display: none;
}
.big-result-title {
font-size: 16px;
color: #b22e2e;
float: left;
background:url(images/filter-big-icon.png) no-repeat 0 13px;
padding-left: 30px;
width: 85%;
}
.filter-result .result-list {
margin-left: 15px;
}
.result-list span {
padding: 0 2%;
color: #4c4c4c;
opacity: 0.5;
filter:alpha(opacity=50);
}
.result-list span.filter-select {
opacity: 1;
filter:alpha(opacity=100);
font-weight: bold;
}
.size-1, .size-2, .size-3 {
margin-bottom: 15px;
}
.slider-value .size-pic-1, .slider-value .size-pic-2, .slider-value .size-pic-3 {
margin: 0 auto;
width: 65px;
padding: 0 5px;
vertical-align: bottom;
}
.start-value{
text-align: left;
}
.end-value{
text-align: right;
}
.empty-line{
padding: 0 9px;
}
.demensions .slider-continer{
width: 162px;
height: 14px;
position: relative;
background: url(images/slider-shape.png) no-repeat center center;
}
.demensions .slider-range{
width: 50%;
height: 14px;
position: absolute;
left: 10%;
background: url(images/slidered-shape.png) no-repeat center center;
top: 0;
}
.prices .slider-value span {
font-size: 16px;
}
.hide-filter {
display: none;
text-align: center;
font-size: 18px;
color: #b22e2e;
height: 36px;
line-height: 36px;
border-top: 1px dotted #e3e3e3;
cursor: pointer;
}
.hide-filter span {
position: relative;
}
.hide-filter .result-num {
float: right;
font-size: 14px;
padding: 0 6px;
color: #3a3a3a;
cursor: pointer;
}
.hide-filter b {
position: absolute;
top: 8px;
right: -18px;
height: 0;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #b22e2e transparent;
}
.slider-continer a {
display: block;
width: 14px;
height: 14px;
position: absolute;
top: 0;
background: url(images/slider-button.png) no-repeat center center;
}
.slider-continer .slider-start{
left: 10%;
}
.slider-continer .slider-end{
left: 60%;
}
.slider-value {
position: relative;
width: 185px;
text-align: center;
}
.prices .slider-value{
width: 178px;
}
.slider-value span{
width: 48px;
display: inline-block;
border-radius: 2px;
line-height: normal;
text-align: center;
}
.slider-value .start-value,
.slider-value .end-value{
position: absolute;
top: 2px;
}
.slider-value .start-value{
left: 0;
}
.slider-value .end-value{
right: 0;
}
.list-wrapper .message{
margin-bottom: 10px;
}
.list-wrapper .message b{
font-size: 14px;
}
.list-wrapper {
margin: 0 auto;
max-width: 1200px;
}
.layer-wrapper{
position: relative;
}
.list-wrapper .ajax-layer{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 10;
opacity: 0.6;
filter:alpha(opacity=20);
display: none;
}
.list-wrapper .pager{
clear: both;
height: 45px;
}
.list-wrapper .lens{
float: left;
}
.list-wrapper .rpage{
float: right;
}
/* BGN  product list */
.products-list {
position: relative;
}
.products-list .item {
position: relative;
float: left;
width: 33.16%;
height: 29.233%;
margin: 0px 0px;
text-align: center;
padding-top: 38px;
background-color: #fff;
overflow: hidden;
}
.products-list .item .product-info {
height: 22px;
margin: 0px 0 0 -30px;
position: relative;
background-color: transparent;
}
.products-list .item .product-info a {
position: relative;
vertical-align: middle;
text-decoration: none;
}
.products-list .item .product-package {
margin: 0;
height: 14px;
font-size: 12px;
line-height: 1.2;
color: #a3a3a3;
font-style: normal;
}
.add-pic-item {
position: absolute;
left: 9%;
top: 6%;
z-index: 10;
display: block;
width: 82%;
}
.add-pic .add-pic-item img {
display: block;
margin: 0 auto;
-moz-backface-visibility: hidden;
}
.add-pic .add-pic-item:hover img {
opacity: 0.8;
filter:alpha(opacity=80);
}
.add-pic span.add-pic-item:hover img{
opacity: 1;
filter:alpha(opacity=100);
}
.add-pic .product-color {
border-color: #fff;
}
.add-pic .product-color span {
border-color: #fff;
}
.add-pic-special {
position: absolute;
left: 0;
top: 6%;
z-index: 10;
display: block;
width: 100%;
}
.add-pic .winter-women,
.add-pic .winter-men {
position: absolute;
height: 46%;
left: 12.5%;
top: 10%;
display: block;
width: 0;
padding-left: 75%;
z-index: 15;
overflow: hidden;
}
.add-pic .winter-men {
top: 56%;
height: 27%;
}
@media (min-width: 870px) and (max-width: 1024px){
.add-pic .winter-women {
height: 40%;
}
.add-pic .winter-men {
top: 50%;
height: 27%;
}
}
@media (min-width: 720px) and (max-width: 870px){
.add-pic .winter-women {
height: 50%;
}
.add-pic .winter-men {
top: 60%;
height: 27%;
}
}
@media (min-width: 400px) and (max-width: 600px){
.add-pic .winter-women {
height: 40%;
}
.add-pic .winter-men {
top: 50%;
height: 27%;
}
}
.products-list .item .image {
position: relative;
width: 90.4755783%;
height: 0;
padding-bottom: 42.858942065%;
overflow: hidden;
margin: 0 auto -16px;
}
.products-list .item .image img {
display: block;
position: absolute;
left: 0;
top: 0;
}
.products-list .item .icon {
position: absolute;
right: 0;
top: 15px;
color: #c01920;
font-weight: bold;
z-index: 2;
display: block;
width: 93%;
padding-right: 7%;
clear: both;
height: 56px;
}
.icon .brand{
position: absolute;
top: 10px;
right: 0%;
}
.icon .dis15, .icon .onsale{
float: right;
margin-left: 5px;
}
.item .color-info {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
position: relative;
margin: 0;
padding: 0 5px;
text-align: center;
overflow: hidden;
z-index: 2;
}
.product-color {
display: inline-block;
cursor: pointer;
width: 12px;
height: 12px;
border-radius: 100%;
font-size: 0;
line-height: 0;
margin: 0 2px;
position: relative;
}
.product-color span {
display: inline-block;
*display: block;
cursor: pointer;
width: 12px;
height: 12px;
border-radius: 100%;
font-size: 0;
line-height: 0;
text-indent: -9999em;
background-color: #e8e8e8;
overflow: hidden;
}
.current-color span {
background-color:#000;
}
.item .Black {
background-color: #000;
}
.item .Gunmetal {
background-color: #565656;
}
.item .Brown {
background-color: #00FF00;
}
.products-list .name {
margin: 10px 0;
font-size: 16px;
color: #626262;
text-transform: uppercase;
}
.products-list .product-size {
color: #818181;
position: absolute;
right: -65px;
top: -1px;
display: none;
width: 60px;
text-align: left;
}
.products-list .current .product-size{
display: block;
}
.products-list .really-prices {
font-size: 18px;
color: #bbbbbb;
margin-right: 10px;
text-decoration: line-through;
}
.products-list .price {
position: relative;
margin: 0 auto;
font-size: 18px;
font-weight: bold;
color: #626262;
}
.products-list .promotion-item .promition-price{
font-size: 16px;
color: #818181;
}
.products-list .promotion-item .price{
color: #f57527;
}
.price-info {
margin-bottom: 14px;
text-align: center;
height: 30px;
}
.item.has-package .price-info {
margin-bottom: 0px;
}
.promition-price {
width: 75px;
position: absolute;
top: 2px;
left: -78px;
text-decoration: line-through;
text-align: right;
}
.products-list .current {
position: relative;
}
.products-list .mobile-try-on {
display: none;
position: absolute;
left: 0%;
top: 4%;
z-index: 10;
cursor: pointer;
}
.quick-look {
color: #4ca3bf;
background: url(images/product-selection-quick.png) right 7px no-repeat;
display: none;
font-size: 18px;
height: 25px;
left: 50%;
line-height: 25px;
padding-right: 14px;
position: absolute;
text-align: left;
top: 12%;
width: 100px;
z-index: 10;
margin-left: -57px;
font-weight: bold;
}
.favorite {
visibility: hidden;
display: inline-block;
vertical-align: middle;
z-index: 10;
margin: 0 0 0 9px;
width: 15px;
height: 15px;
cursor: pointer;
background: url("images/list-icon-favorites-s.png") no-repeat scroll 0 0px;
}
.current .favorite {
visibility: visible;
}
.favorite-action {
visibility: visible;
background-position: 0 -25px;
}
.current .quick-look {
display: block;
cursor: pointer;
opacity: 0.8;
}
.quick-action .quick-look{
display: block;
}
/*.current .image img {
opacity: 0.8;
}*/
.quick-look:hover{
}
.product-action {
background-color: #F1F1F1;
margin: 0 auto;
overflow: hidden;
padding-left: 0;
visibility: hidden;
width: 70%;
border-radius: 4px;
}
.product-action a, .product-action .change-a {
display: block;
height: 22px;
line-height: 22px;
margin-top: 7px;
text-decoration: none;
text-transform: uppercase;
}
.product-action .left a{
border-right: 1px solid #cacaca;
}
.product-action a:hover{
color: #333;
}
.product-action .tryon-disabled a{
color: #ccc;
cursor: default;
}
.product-action li {
background-color: #F1F1F1;
float: left;
font-size: 16px;
height: 35px;
line-height: 35px;
list-style-type: none;
position: relative;
width: 50%;
}
.product-action .details {
border-left: none;
float: right;
width: 49.5%;
}
.product-action a, .product-action .change-a {
display: block;
text-transform:uppercase;
text-decoration: none;
}
/* for banner */
.replace-color {
background-color: #f2f2f2;
}
.list-banner,
.normal-banner {
position: relative;
width: 100%;
text-align: center;
overflow: hidden;
}
.list-banner .banner-image {
position: absolute;
max-width: 5000px;
-moz-backface-visibility: hidden;
}
/*.normal-banner .banner-image {
width: auto;
margin: 0 auto;
position: relative;
max-width: 100%;
}*/
.list-banner .aminate-at {
}
@keyframes anim
{
0% { opacity: 1;}
1% { opacity: 0;}
50%{opacity: 0;}
51%{opacity: 1;}
}
@-moz-keyframes anim /* Firefox */
{
0% { opacity: 1;}
1% { opacity: 0;}
50%{opacity: 0;}
51%{opacity: 1;}
}
@-webkit-keyframes anim /* Safari and Chrome */
{
0% { opacity: 1;}
1% { opacity: 0;}
50%{opacity: 0;}
51%{opacity: 1;}
}
@-o-keyframes anim /* Opera */
{
0% { opacity: 1;}
1% { opacity: 0;}
50%{opacity: 0;}
51%{opacity: 1;}
}
.aminate-at{
animation: anim 4s linear 0s infinite normal;
/* Firefox: */
-moz-animation: anim 4s linear 0s infinite normal;
/* Safari 和 Chrome: */
-webkit-animation: anim 4s linear 0s infinite normal;
/* Opera: */
-o-animation: anim 4s linear 0s infinite normal;
}
.list-banner img {
display: block;
}
@keyframes myfirst
{
0%   {opacity:0;}
100% {opacity:0.8;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {opacity:0; }
100% {opacity:0.8;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:0.8;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {opacity:0;}
100% {opacity:0.8;}
}
.current .quick-look {
animation: myfirst 0.4s linear 0s 1 alternate;
/* Firefox: */
-moz-animation: myfirst 0.4s linear 0s 1 alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 0.4s linear 0s 1 alternate;
/* Opera: */
-o-animation: myfirst 0.4s linear 0s 1 alternate;
}
@keyframes mySecond
{
0%   {transform:translateY(100%)}
100% {transform:translateY(0%)}
}
@-moz-keyframes mySecond /* Firefox */
{
0%   {-moz-transform:translateY(100%)}
100% {-moz-transform:translateY(0%)}
}
@-webkit-keyframes mySecond /* Safari and Chrome */
{
0%   {-webkit-transform:translateY(100%)}
100% {-webkit-transform:translateY(0%)}
}
@-o-keyframes mySecond /* Opera */
{
0%   {-o-transform:translateY(100%)}
100% {-o-transform:translateY(0%)}
}
.current .product-action{
animation: mySecond 0.4s linear 0s 1 alternate;
/* Firefox: */
-moz-animation: mySecond 0.4s linear 0s 1 alternate;
/* Safari 和 Chrome: */
-webkit-animation: mySecond 0.4s linear 0s 1 alternate;
/* Opera: */
-o-animation: mySecond 0.4s linear 0s 1 alternate;
}
@keyframes myfavorite
{
0%{transform: scale(1); opacity: 0}
50%{transform: scale(1.3); opacity: .3;}
100% {transform:scale(1); opacity: 1;}
}
@-moz-keyframes myfavorite /* Firefox */
{
0%{-moz-transform:scale(1); opacity: .2}
50%{-moz-transform:scale(1.3); opacity: .3;}
100% {-moz-transform:scale(1); opacity: 1;}
}
@-webkit-keyframes myfavorite /* Safari and Chrome */
{
0%{-webkit-transform:scale(1); opacity: .2}
50%{-webkit-transform:scale(1.3); opacity: .3;}
100% {-webkit-transform:scale(1); opacity: 1;}
}
@-o-keyframes myfavorite /* Opera */
{
0%{-o-transform:scale(1); opacity: .2}
50%{-o-transform:scale(1.3); opacity: .3;}
100% {-o-transform:scale(1); opacity: 1;}
}
.favorite-action {
animation: myfavorite 0.5s linear 0s 1 alternate;
/* Firefox: */
-moz-animation: myfavorite 0.5s  linear 0s 1 alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfavorite 0.5s  linear 0s 1 alternate;
/* Opera: */
-o-animation: myfavorite 0.5s  linear 0s 1 alternate;
}
/* END  product list */
/* start popup common */
.ajax-loading {
margin: 0 auto;
width: 0;
height: 64px;
padding-left: 64px;
overflow: hidden;
background: url('images/icons/loading.gif') center center no-repeat;
background-image: url('images/icons/loading.svg'), none;
background-size: cover;
}
.overlay {
z-index: 1010;
}
.overlay.popup-effect {
transition: all 0.2s ease-in-out;
}
.overlay.popup-removing {
opacity: 0 !important;
}
.popup-wrapper {
z-index: 1360;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
background-color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 0;
transform: scale(0.8);
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
}
.popup-wrapper.popup-show {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transition: all 0.2s ease-in-out;
transition-property: opacity,transform;
}
.popup-wrapper.rectangle {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.popup-wrapper.bg-gray {
background-color: #f7f7f7;
}
.popup-wrapper.bg-gray .popup-main {
background-color: #f7f7f7;
}
.popup-wrapper.popup-removing {
transition: all 0.2s ease-in-out;
transition-property: opacity,transform;
}
.quick-wrapper {
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
}
.video-popup, .quick-wrapper {
border: 0;
padding: 0;
background-color: transparent;
box-shadow: none;
}
.popup-main {
border: 1px solid #a4a4a4;
background-color: #fff;
color: #6c6c6c;
}
.popup-container {
position: relative;
}
.popup-title {
height: 20px;
line-height: 20px;
text-align: left;
padding-left: 10px;
font-size: 16px;
font-weight: normal;
}
.popup-flip-container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
z-index:1360;
}
.popup-main-flip {
/*    -webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.popup-main-flip .popup-main-flip-card,
.popup-main-flip .popup-main-flip-content {
display: block;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.popup-main-flip .popup-main-flip-card {
position: absolute;
left:0px;
top:0px;
z-index: 1360;
}
.popup-main-flip .popup-main-flip-content {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 1361;
}
.popup-main-flip.active_flip {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#login-form {
padding: 20px;
}
.popup-close {
position: absolute;
display: block;
top: -25px;
color: #fff;
text-indent: 0;
width: 52px;
height: 23px;
font-size: 14px;
line-height: 1.4;
padding-left: 23px;
right: 4px;
background-image: url('images/icons/icon-out-close.png');
background-position: right center;
background-repeat: no-repeat;
overflow: hidden;
z-index: 1370;
cursor: pointer;
}
#popup-status .tip-container {
background: #fff;
padding: 10px 50px 10px 20px;
position: relative;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #ccc;
z-index: 1350;
}
#popup-status .tip-close {
width: 23px;
height: 23px;
position: absolute;
right: 5px;
top: 6px;
overflow: hidden;
text-indent: -9999em;
background: url(images/tips-close-ok.gif) no-repeat right 0;
z-index: 1370;
}
#popup-alert .popup-main, #popup-confirm .popup-main {
text-align: center;
max-width: 600px;
min-width: 250px;
border: none;
font-size: 18px;
color: #4c4c4c;
}
.popup-footer {
background-color: #fff;
text-align: center;
}
.popup-footer button {
font-size: 16px;
color: #fff!important;
background-color: #4ca3bf!important;
}
.popup-footer button:hover,
.popup-footer button:focus,
.popup-footer button:active {
background-color: #54b5d4!important;
}
.popup-footer button:active,
.popup-footer button.active {
background-color: #54b5d4!important;
}
#popup-alert .popup-message, #popup-confirm .popup-message {
padding: 10px 20px 20px;
}
#popup-alert .popup-close, #popup-confirm .popup-close {
line-height: 1.4;
text-align: left;
}
#popup-confirm .popup-container,
#popup-alert .popup-container {
text-align: center;
padding: 0 0 20px 0;
}
.popup-container .popup-header .popup-title {
margin: 0;
}
#popup-confirm .popup-footer button {
margin-right: 20px;
padding-left: 18px;
padding-right: 18px;
}
#popup-confirm  button.popup-button-cancel {
margin-right: 0;
}
.popup-header {
position: relative;
z-index: 1350;
}
.popup-container {
width: 100%;
border: 1px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#popup-alert .popup-header h3, #popup-confirm .popup-header h3 {
font-size: 18px;
line-height: 36px;
padding-left: 20px;
}
#popup-window .popup-main {
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#popup-alert .popup-button-submit, #popup-confirm .popup-button-submit {
margin-right: 5px;
}
#popup-alert .popup-button-submit {
padding: 4px 25px 5px;
}
#popup-alert, #popup-confirm, #popup-confirms {
z-index: 1350;
}
.loading-pop,
.loading-pop .popup-container,
.loading-pop .popup-main {
background: none;
background-color: none;
border: none;
box-shadow: none;
color: #fff;
}
/* Qucik Look */
.quick-layer {
display: none;
position: absolute;
left: 0;
top: 0;
background: #000;
width: 100%;
height: 100%;
min-height: 440px;
z-index: 100;
opacity: 0.2;
filter:alpha(opacity=20);
}
.overlay {
background: #000000;
}
.overlay.quick-loading {
background: url('images/icons/loading.gif') center center no-repeat #000;
background-image: url('images/icons/loading.svg'), none;
background-size: 64px 64px;
}
.quick-wrapper .popup-close {
top: 0px;
opacity: 0;
}
.quick-wrapper.popup-show .popup-close {
top: -25px;
opacity: 1;
transition: all 0.7s ease-in-out;
transition-property: top, opacity;
}
.quick-wrapper .popup-container {
border: none;
}
.tooltip.tooltip-quick-color {
padding: 10px 12px;
min-width: 30px;
z-index: 2000; /* tooltip in quicklook */
}
.quick-look-wrapper {
max-width: 990px;
width: 990px;
min-width: 720px;
color: #3a3a3a;
clear: both;
overflow: hidden;
min-height: 440px;
background-color: #F7F7F7;
}
.quick-look-wrapper .quick-tab-container {
width: 213px;
float: left;
padding-bottom: 500px;
margin-bottom: -500px;
background-color: #fff;
border-right: 1px solid #dedede;
}
.quick-look-wrapper .quick-detail-container {
width: 776px;
float: right;
background-color: #f7f7f7;
}
/*quick-tab-container*/
.quick-tab {
width: 100%;
text-align: center;
overflow: hidden;
}
.quick-tab span {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
width: 50%;
height: 20px;
padding: 10px 0;
float: left;
color: #858585;
font-weight: bold;
background-color: #e9e9e9;
cursor: pointer;
}
.quick-tab span.active {
color: #000;
background-color: #fff;
cursor: default;
}
.quick-tab-content {
text-align: left;
padding: 10px;
}
.quick-available-size {
margin: 18px 5px 5px 30px;
text-align: left;
}
.quick-available-size strong,
.quick-available-size span {
display: block;
margin: 3px auto;
}
.quick-available-size strong {
margin-top: 5px;
color: #000;
font-size: 16px;
}
.quick-available-list {
margin-left: 30px;
}
.quick-available-list h5 {
margin: 18px auto 5px;
color: #000;
font-size: 16px;
}
.quick-available-list li {
padding: 3px 0;
}
.quick-available-list .checkbox {
display: inline-block;
width: 17px;
height: 17px;
background: url(images/icons/icon-check-blue.png) no-repeat 0 -26px;
}
.quick-available-list .checked {
background-position: 0  0px;
}
.quick-switch-image {
text-align: center;
margin: 20px auto;
color: #000;
}
.quick-switch-image em {
display: block;
font-style: normal;
line-height: 1.1;
}
.quick-switch-image .quick-switch-product,
.quick-switch-image .quick-switch-model {
cursor: pointer;
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
.quick-switch-image span {
display: inline-block;
}
.quick-switch-image span.quick-switch-button {
display: none;
color: #000;
text-decoration: underline;
}
.quick-switch-image span.quick-switch-button:hover {
color: #6d6d6d;
}
.quick-switch-image .quick-switch-model.no-model {
cursor: default;
}
.quick-switch-image .quick-switch-model.no-model em {
color: #a9a9a9;
}
#tab-detail-content {
display: table;
width: 100%;
}
.quick-detail-size {
display: table-header-group;
}
.quick-product-attribute {
display: table-footer-group;
}
.quick-frames-sizes {
display: table-header-group;
}
.quick-detail-size span {
display: block;
margin-top: 3px;
margin-left: 30px;
}
.quick-detail-size strong,
.quick-frames-sizes h5 {
display: block;
margin: 18px auto 0px 30px;
font-size: 16px;
color: #000;
}
.quick-frames-sizes .quick-switch-unit {
margin-left: 30px;
cursor: pointer;
text-decoration: underline;
}
.quick-frames-sizes .quick-switch-unit {
color: #000;
}
.quick-frames-sizes .quick-switch-unit:hover {
color: #6d6d6d;
}
.quick-sizes-detail {
margin: 5px auto 0px 30px;
width: 110px;
}
.quick-sizes-detail li {
margin: 6px auto;
padding: 1px 0 2px;
text-align: right;
background: url('images/quick-sizes-example.png') 0 1px no-repeat;
}
.quick-sizes-detail li.example-2 {
background-position: 0 -27px;
}
.quick-sizes-detail li.example-3 {
background-position: 0 -50px;
}
.quick-sizes-detail li.example-4 {
background-position: 0 -74px;
}
.quick-sizes-detail li.example-5 {
background-position: 0 -96px;
}
.quick-attribute-detail {
margin-left: 30px;
padding-top: 10px;
}
.quick-product-attribute p {
margin: 10px auto 15px;
}
.quick-product-attribute b {
display: block;
margin-bottom: 2px;
font-size: 16px;
color: #000;
}
.quick-package-inclued {
margin: 18px auto 10px 30px;
}
.quick-package-inclued ul {
margin: 5px 0px;
display: inline-block;
}
.quick-package-inclued h5 {
margin: 0 auto;
font-size: 16px;
color: #000;
}
.quick-package-inclued li {
text-align: left;
padding: 1px 1px 1px 15px;
line-height: 1.3;
background: url('images/icons/icon-quick-checked.png') 0 5px no-repeat;
}
/* quick-detail-container  */
.quick-detail-title,
.quick-detail-content,
.quick-detail-bottom {
position: relative;
margin: 0 40px;
padding-top: 10px;
}
.quick-detail-title {
padding-top: 17px;
}
.quick-title .quick-name {
display: inline-block;
font-size: 30px;
color: #000;
vertical-align: middle;
}
.quick-title .quick-size {
display: inline-block;
margin: 0 5px;
width: 21px;
height: 21px;
line-height: 21px;
font-size: 12px;
color: #6d6d6d;
text-align: center;
border: 1px solid #dcdcdc;
vertical-align: middle;
}
.quick-title .quick-favorites {
display: inline-block;
margin-top: 5px;
margin-left: 5px;
width: 28px;
height: 28px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url('images/icons/detail-icon-favorites.png');
vertical-align: middle;
cursor: pointer;
}
.quick-title .quick-favorites.favorite-action {
background-position: 0 -34px;
}
.quick-reviews {
margin: 5px auto;
color: #6d6d6d;
}
.quick-reviews .middle {
margin-right: 5px;
}
.quick-detail-container .quick-package {
position: absolute;
display: inline-block;
right: 0;
top: 16px;
}
.quick-scroll-image {
position: relative;
padding: 0px 45px;
}
.quick-scroll-image .prev,
.quick-scroll-image .next {
position: absolute;
display: block;
top: 120px;
left: 0;
width: 35px;
height: 75px;
float: left;
background: url(images/rotate-icons.png) no-repeat -14px 0px;
cursor: pointer;
}
.quick-scroll-image .next {
left: auto;
right: 0;
background-position: -41px 0px;
}
.quick-scroll-image .quick-scroll-content {
width: 600px;
overflow: hidden;
height: 300px;
position: relative;
}
.quick-scroll-image .quick-scroll-content ul{
position: relative;
}
.quick-scroll-image .quick-scroll-content li{
float: left;
position: relative;
text-align: center;
}
.quick-dimension-list .dimension-tips {
position: absolute;
}
.quick-model {
height: 300px;
text-align: center;
}
.quick-model ul,
.quick-model li {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
text-align: center;
vertical-align: middle;
}
.quick-detail-bottom {
display: table;
width: 690px;
overflow: hidden;
padding-bottom: 25px;
}
.quick-color,
.quick-price {
display: table-cell;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
vertical-align: middle;
*float: left;
color: #000;
width: 45%;
}
.quick-color {
*padding-top: 15px;
}
.quick-price {
width: 55%;
*float: right;
text-align: right;
}
.quick-color strong {
margin-right: 8px;
font-size: 16px;
}
.quick-color .product-color {
margin-top: -3px;
width: 13px;
height: 13px;
border-radius: 100%;
border: 1px solid #404040;
background-color: #fff;
vertical-align: middle;
}
.quick-color .current-color {
background-color: #404040;
}
.quick-price-inner {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.quick-out-of-stock span {
color: #848484;
}
.quick-out-of-stock em {
display: block;
*margin-right: 10px;
}
.quick-price-info {
display: inline-block;
*margin-right: 10px;
font-size: 16px;
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
}
.quick-detail-bottom-link {
position: relative;
text-align: right;
padding-bottom: 20px;
margin-top: -20px;
margin-right: 45px;
}
.quick-detail-bottom-link .quick-add-cart {
color: #000;
font-size: 13px;
text-decoration: underline;
}
.qucik-select-button {
margin: 0 0 0 15px;
border: 2px solid #333333;
padding: 10px 20px;
font-size: 16px;
color: #fff;
vertical-align: middle;
background-color: #333333;
}
.qucik-select-button:hover {
color: #333333;
background-color: #fff;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
@media screen and (max-width: 1024px) {
.quick-wrapper {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
.quick-look-wrapper {
max-width: 720px;
width: 720px;
clear: both;
background: none;
overflow: visible;
}
.quick-look-wrapper .quick-tab-container {
position: relative;
margin-bottom: 0;
padding-bottom: 0;
width: 100%;
float: none;
min-height: 40px;
border-right: 0;
}
.quick-tab {
position: absolute;
left: 0;
top: -40px;
height: 40px;
width: 215px;
text-align: center;
overflow: hidden;
}
.quick-look-wrapper .quick-detail-container {
width: 100%;
float: none;
background-color: #f7f7f7;
}
.quick-tab-content {
padding: 5px 30px;
height: 30px;
overflow: hidden;
}
.quick-switch-image span {
display: none;
}
.quick-switch-image span.quick-switch-button {
display: inline-block;
}
.quick-switch-image .quick-switch-model.no-model {
display: none;
}
.quick-switch-image {
display: inline-block;
margin: 4px 0 auto 5px;
float: right;
text-align: right;
cursor: pointer;
}
.quick-available-size,
.quick-available-list,
.quick-package-inclued {
margin: 0;
display: inline-block;
float: left;
padding-top: 4px;
text-align: left;
}
.quick-package-inclued  {
padding-top: 1px;
}
.quick-available-size strong,
.quick-available-size span {
display: inline;
margin: 0;
font-size: 14px;
}
.quick-available-list {
margin-left: 10px;
padding-top: 3px;
}
.quick-available-list li.invalid,
.quick-available-list li span.checkbox {
display: none;
}
.quick-available-list li:after {
content: ', ';
}
.quick-available-list li:last-child:after {
content: ' ';
}
.quick-available-size strong,
.quick-available-list h5,
.quick-available-list ul,
.quick-package-inclued h5,
.quick-package-inclued ul,
.quick-frames-sizes h5,
.quick-frames-sizes ul {
display: inline-block;
margin: 0;
padding: 0;
font-size: 13px;
margin-right: 5px;
}
.quick-available-size strong,
.quick-available-size span {
font-size: 13px;
}
.quick-frames-sizes ul {
width: auto;
}
.quick-available-list li,
.quick-package-inclued li,
.quick-frames-sizes li {
display: inline-block;
margin-right: 5px;
padding: 2px 0;
font-size: 13px;
}
.quick-frames-sizes li {
padding-left: 47px;
}
.quick-package-inclued li {
padding-left: 15px;
}
.quick-available-list .checkbox {
vertical-align: text-top;
}
.quick-switch-button {
display: inline-block;
}
.quick-attribute-detail {
margin-left: 0;
padding-top: 2px;
}
.quick-detail-size {
display: none;
}
.quick-frames-sizes,
.quick-product-attribute {
display: table-cell;
padding: 0;
text-align: left;
padding-top: 2px;
vertical-align: middle;
}
.quick-frames-sizes {
padding-top: 4px;
}
.quick-frames-sizes .quick-switch-unit {
margin-left: 2px;
}
.quick-product-attribute {
padding-top: 3px;
padding-left: 10px;
}
.quick-product-attribute p {
margin: 0;
display: inline-block;
margin-right: 5px;
}
.quick-product-attribute b {
display: inline;
text-align: left;
font-size: 13px;
}
.quick-detail-title,
.quick-detail-content,
.quick-detail-bottom {
margin-left: 30px;
margin-right: 30px;
}
.quick-detail-bottom-link {
margin-right: 30px;
}
.quick-scroll-image {
padding: 0 35px;
}
.quick-detail-bottom {
width: 660px;
}
}
.device-phone .products-list .item .quick-look {
display: none;
}
.device-phone .products-list .item .mobile-try-on {
display: inline-block;
}
.tooltip, .tooltip .arrow-wrapper .arrow {
background: #fff;
border: 0;
*border: 1px solid #c2c2c2;
border: 1px\9 solid\9 #c2c2c2\9;
z-index: 1000;
}
.tooltip {
padding: 15px 20px;
color: #000;
border-radius: 4px;
min-width: 150px;
max-width: 500px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}
.tool-tip-close {
position: absolute;
right: 5px;
top: 5px;
width: 0;
padding-left: 12px;
height: 12px;
background: url('images/tips-close.png') 0 0 no-repeat;
opacity: .6;
overflow: hidden;
cursor: pointer;
}
.tool-tip-content {
font-size: 16px;
}
.tool-tip-content h6 {
margin: 0 0 10px;
font-size: 14px;
font-weight: bold;
}
.tool-tip-content a {
color: #5b7eaf;
}
.tool-tip-close:hover {
opacity: 1;
}
.tooltip .arrow-wrapper {
overflow: hidden;
position: absolute;
}
.tooltip .arrow-wrapper .arrow {
position: absolute;
width: 25px;
height: 25px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tooltip .arrow-wrapper-normal, .tooltip .arrow-normal {
position: absolute;
height:0px;
width:0px;
}
.tooltip .arrow-left {
border: 10px solid transparent;
border-right-color: #c2c2c2;
border-left: none;
}
.tooltip .arrow-normal.arrow-left {
border-right-color: #fff;
}
.tooltip .arrow-top {
border: 10px solid transparent;
border-bottom-color: #c2c2c2;
border-top: none;
}
.tooltip .arrow-normal.arrow-top {
border-bottom-color: #fff;
}
.tooltip .arrow-bottom {
border: 10px solid transparent;
border-top-color: #c2c2c2;
border-bottom: none;
}
.tooltip .arrow-normal.arrow-bottom {
border-top-color: #fff;
}
.tooltip .arrow-right {
border: 10px solid transparent;
border-left-color: #c2c2c2;
border-right: none;
}
.tooltip .arrow-normal.arrow-right {
border-left-color: #fff;
}
.tips-error, .tips-error .arrow-wrapper .arrow {
border: none;
background: #ffe;
z-index: 1450;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.tips-ok, .tips-ok .arrow-wrapper .arrow {
border: none;
background: #fff;
color: #074;
z-index: 1050;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.tips-ok .tool-tip-close,
.tips-error .tool-tip-close {
background-image: url('images/tips-close-ok.gif');
}
.tips-ok .tool-tip-close:hover,
.tips-error .tool-tip-close:hover {
opacity: 1;
}
/* pd tips*/
.pd-tips-content {
padding: 5px 7px;
max-width: 325px;
font-size: 14px;
text-align: center;
}
.pd-tips-content strong {
display: block;
margin: 0px auto 15px;
font-size: 15px;
text-transform: uppercase;
color: #4ba4c0;
}
.pd-tips-content span {
display: block;
margin: 15px auto 5px;
font-weight: bold;
color: #000;
}
/* tool tips end*/
.pre-ajax-load {
display: block;
height: 16px;
line-height: 16px;
text-align: left;
padding: 5px 0 5px 20px;
background: url(images/pre-ajax-load.gif) no-repeat left center;
}
.feed-back,
.rx-live-chat {
width: 29px;
height: 94px;
position: fixed;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 999;
}
.rx-live-chat{
display: none;
}
.feed-back a {
display: block;
width: 0px;
padding-left: 29px;
height: 94px;
background: url('images/feedback.png') 0 0 no-repeat #ccc;
text-transform: uppercase;
overflow: hidden;
}
.rx-live-chat {
height: 126px;
bottom: 94px;
}
.rx-live-chat button {
width: 0;
height: 126px;
padding: 0;
margin: 0;
padding-left: 29px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: url('images/live-chat.jpg') 0 0 no-repeat #ccc;
text-indent: 100px;
overflow: hidden;
}
.view-palyer {
display: block;
}
/** email popup start **/
.first-visit-content {
width: 620px;
margin: 30px 130px 37px;
text-align: center;
}
.first-visit-content .logo {
width: 196px;
padding: 0 0 18px;
margin: 0 auto;
}
.first-visit-content .logo-bottom {
width: 196px;
margin: 0 auto;
}
.first-visit-content .thanks {
letter-spacing: 2px;
padding-bottom: 18px;
font-size: 25px;
font-weight: 100;
color: #343434;
font-family: 'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
.first-visit-content .email-discount {
margin-bottom: 35px;
padding: 5px 0 25px;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.first-visit-content .email-discount .use-code {
margin: 20px 0 0;
font-size: 25px;
color: #000;
}
.first-visit-content .email-discount .code {
margin: 12px 0 13px;
font-size: 33px;
color: #54b5d4;
text-transform: uppercase;
}
.first-visit-content .email-discount .code-info {
margin: 0;
text-transform: uppercase;
font-size: 25px;
color: #000;
}
.first-visit-content .come-see-btn {
padding-bottom: 20px;
}
.first-visit-content .come-see-btn .button {
padding: 8px 62px;
font-size: 20px;
color: #fff;
text-transform: uppercase;
background-color: #414141;
letter-spacing: 2px;
}
.first-visit-content .discount-info {
margin: 0;
font-size: 92px;
color: #54b5d4;
text-transform: uppercase;
}
.first-visit-content .discount-title {
margin: 0;
margin-top: -6px;
font-size: 25px;
text-transform: uppercase;
color: #000;
}
.submit-email {
color: #343434;
text-align: center;
}
.submit-email .email-tip {
margin-top: 7px;
margin-bottom: 32px;
}
.submit-email button {
padding: 9px 62px;
font-size: 20px;
color: #fff;
text-transform: uppercase;
}
input.subscribe-newsletter-coupon {
width: 385px;
height: 51px;
border: 2px solid #c2c2c2;
text-align: center;
font-size: 18px;
font-weight: 100;
outline: none;
}
.subscribe-newsletter-coupon::-webkit-input-placeholder {
color: #cfcfcf;
font-size: 18px;
font-weight: 100;
}
.subscribe-newsletter-coupon:-moz-placeholder {
color: #cfcfcf;
font-size: 18px;
font-weight: 100;
}
.subscribe-newsletter-coupon::-moz-placeholder {
color: #cfcfcf;
font-size: 18px;
font-weight: 100;
}
.subscribe-newsletter-coupon:-ms-input-placeholder {
color: #cfcfcf;
font-size: 18px;
font-weight: 100;
}
#email-confirm {
display: block;
margin: 18px auto 0;
}
.country-container {
max-width: 460px;
text-align: center;
padding: 20px 20px 30px;
}
.country-container .blue {
color: #325bb0;
}
.country-info {
line-height: 1.3;
font-size: 20px;
margin: 20px 0 0 0;
}
.flag-list {
margin: 20px auto;
line-height: 1.1;
}
.flag-list a {
display: inline-block;
margin: 5px 20px;
}
.stars {
position: relative;
vertical-align: middle;
width: 87px;
height: 15px;
display: inline-block;
*display: inline;
*zoom: 1;
background: url('images/icons/icon-star-1x.png') 0 0 no-repeat;
}
@media(min--moz-device-pixel-ratio:1.5), (-o-min-device-pixel-ratio:3/2), (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
.stars {
background-image: url('images/icons/icon-star-2x.png');
background-size: 87px 165px
}
}
.stars.star-5 {
background-position: 0 0;
}
.stars.star-4-5 {
background-position: 0 -15px;
}
.stars.star-4 {
background-position: 0 -30px;
}
.stars.star-3-5 {
background-position: 0 -45px;
}
.stars.star-3 {
background-position: 0 -60px;
}
.stars.star-2-5 {
background-position: 0 -75px;
}
.stars.star-2 {
background-position: 0 -90px;
}
.stars.star-1-5 {
background-position: 0 -105px;
}
.stars.star-1 {
background-position: 0 -120px;
}
.stars.star-0-5 {
background-position: 0 -135px;
}
.stars.star-0 {
background-position: 0 -150px;
}
/** email popup end **/
/** email popup phone start **/
.first-visit-content-phone {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(25, 25, 25, 0.9);
z-index: 1351;
}
.first-visit-content-phone .close {
position: absolute;
right: 10px;
top: 14px;
height: 23px;
width: 23px;
background: url(images/close-1x.png) no-repeat center center;
cursor: pointer;
}
@media not all, not all, (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 1.5dppx) {
.first-visit-content-phone .close {
background-image: url(images/close-2x.png);
background-size: 23px 23px;
}
}
.first-visit-content-phone .email-wapper {
position: absolute;
width: 248px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
text-align: center;
font-weight: bold;
}
.first-visit-content-phone .email-wapper .discount-info {
font-size: 39px;
text-transform: uppercase;
margin: 0;
}
.first-visit-content-phone .email-wapper .discount-title {
text-transform: uppercase;
margin: 0;
}
.first-visit-content-phone .email-wapper .email-box {
margin: 38px 0 10px;
font-size: 24px;
}
.first-visit-content-phone .email-wapper .email-box .code-phone {
padding-bottom: 18px;
text-transform: uppercase;
}
input.subscribe-newsletter-coupon-phone {
width: 248px;
height: 50px;
border: 0;
background-color: #fff;
text-indent: 10px;
font-size: 16px;
font-weight: 100;
border-radius: 0;
padding: 0;
text-align: center;
}
.subscribe-newsletter-coupon-phone::-webkit-input-placeholder {
font-size: 16px;
font-weight: 100;
}
.subscribe-newsletter-coupon-phone:-moz-placeholder {
font-size: 16px;
font-weight: 100;
}
.subscribe-newsletter-coupon-phone::-moz-placeholder {
font-size: 16px;
font-weight: 100;
}
.subscribe-newsletter-coupon-phone:-ms-input-placeholder {
font-size: 16px;
font-weight: 100;
}
.first-visit-content-phone .email-wapper .email-button-box {
margin-bottom: 25px;
}
.first-visit-content-phone .email-wapper .email-button-box button {
width: 248px;
height: 40px;
padding: 0;
color: #fff;
font-size: 16px;
background-color: #4d4d4d;
text-transform: uppercase;
}
.first-visit-content-phone .after-submit .thankyou {
margin-bottom: 18px;
font-size: 25px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 100;
font-family: 'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
.first-visit-content-phone .after-submit .code-wrap {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
text-transform: uppercase;
}
.first-visit-content-phone .after-submit .use-code {
margin-top: 24px;
margin-bottom: 2px;
letter-spacing: 2px;
font-size: 23px;
font-weight: 100;
font-family: 'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
}
.first-visit-content-phone .after-submit .code {
margin-top: 0;
margin-bottom: 26px;
font-size: 36px;
letter-spacing: 2px;
}
.first-visit-content-phone .after-submit .bottom-btn {
margin-top: 60px;
margin-bottom: 25px;
}
.first-visit-content-phone .after-submit .bottom-btn .button {
width: 248px;
height: 40px;
line-height: 40px;
padding: 0;
color: #000;
font-size: 16px;
}
.first-visit-content-phone .after-submit .bottom-logo {
width: 140px;
margin: 0 auto;
}
/** email popup phone end **/
/* two half links on one image begin */
.half-links-left,
.half-links-right {
position: absolute;
width: 50%;
height: 100%;
z-index: 12;
background-color: #fff;
opacity: 0;
filter:alpha(opacity=0);
}
.half-links-left {
left: 0;
top: 0;
}
.half-links-right {
top: 0;
right: 0;
}
.half-links-top,
.half-links-bottom {
position: absolute;
width: 100%;
height: 50%;
z-index: 12;
background-color: #fff;
opacity: 0;
filter:alpha(opacity=0);
}
.half-links-top {
top: 0;
left: 0;
}
.half-links-bottom {
left: 0;
top: 50%;
}
/* banner animation begin */
.one-animation {
z-index: 2;
animation: cycle 4s linear infinite;;
-moz-animation:cycle 4s linear infinite;
-webkit-animation:cycle 4s linear infinite;
}
.two-animation {
z-index: 1;
animation: cycletwo 4s linear infinite;;
-moz-animation: cycletwo 4s linear infinite;
-webkit-animation: cycletwo 4s linear infinite;
}
@keyframes cycle {
0% { opacity: 1;}
25% { opacity: 0;}
50% { opacity: 0;}
75% { opacity: 1;}
100% { opacity: 1;}
}
@keyframes cycletwo {
from { opacity:1; }
to { opacity:1; }
}
@-moz-keyframes cycle {
0% { opacity: 1;}
25% { opacity: 0;}
50% { opacity: 0;}
75% { opacity: 1;}
100% { opacity: 1;}
}
@-moz-keyframes cycletwo {
from { opacity:1; }
to { opacity:1; }
}
@-webkit-keyframes cycle {
0% { opacity: 1;}
25% { opacity: 0;}
50% { opacity: 0;}
75% { opacity: 1;}
100% { opacity: 1;}
}
@-webkit-keyframes cycletwo {
from { opacity:1; }
to { opacity:1; }
}
/* eof product detail tab content img animation */
@media screen and (min-width: 280px) {
#wrapper {
min-width: 280px;
}
}
@media screen and (max-width: 1230px) {
.products-list .item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#filter{
padding-bottom: 105px;
}
#filter li {
width: 18.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#filter .size {
width: 57%;
left: 0;
top: auto;
bottom: 5px;
height: auto;
border-right: none;
}
#filter .prices .prices-1 {
height: auto;
}
#filter .prices .filter-title{
border-bottom: none;
}
#filter .material{
border-right: none;
}
#filter .sizes {
height: 80px;
width: 57.5%;
left: 0;
top: auto;
bottom: 15px;
position: absolute;
}
#filter .sizes-container {
width: 31%;
float: left;
border-right: 1px dotted #e3e3e3;
padding: 0 10px 0 0;
margin-right: 10px;
}
#filter .demensions {
position: relative;
float: left;
height: 70px;
width: 65%;
margin-top: 7px;
border-right: none;
}
#filter .demensions .filter-title {
display: none;
}
#filter .demensions dd {
width: 48.5%;
margin-right: 10px;
padding-right: 10px;
border-right: 1px dotted #e3e3e3;
position: relative;
}
.slider-value {
width: auto;
}
#filter .advanced{
right: 0;
}
#filter .colors{
top: auto;
bottom: 23px;
right: 0;
left: 80%;
}
#filter .prices{
width: 19%;
padding-right: 1.5%;
top: auto;
left: 59.5%;
bottom: 12px;
border-right: 1px dotted #e3e3e3;
}
#filter .size{
height: 70px;
padding-top: 25px;
}
#filter #irs-1, #filter #irs-2, #filter #irs-3 {
border-top: 1px solid #e3e3e3;
padding-top: 5px;
}
#filter .demensions .size-1{
position: absolute;
left: 0;
top: 0;
padding-top: 25px;
}
#filter .demensions .size-2 {
position: absolute;
left: 53%;
top: 0px;
padding-top: 25px;
border-right: none;
}
#filter .demensions .size-3{
position: absolute;
left: 70%;
top: 0px;
padding-top: 25px;
}
.size-pic-1, .size-pic-2, .size-pic-3{
top: 0;
left: 0;
margin-top: 0;
}
#filter .prices dd, .prices .slider-value{
width: 100%;
}
.slider-value .empty-line{
width: 0;
padding: 0;
}
#filter .colors-list li{
width: 130px;
}
.feed-back,
.rx-live-chat {
display: none!important;
}
}
@media screen and (max-width: 1024px) {
#filter .colors {
width: 140px;
}
#filter .colors dd{
width: 134px;
}
#filter .colors-list{
width: 138px;
}
#filter .colors-list .default{
width: 140px
}
#filter .colors .list-all{
margin-left: -390px;
}
#filter .demensions {
width: 63%;
}
.result-list span{
padding: 0 1%;
}
.filter-favorite,
.filter-cart {
padding-left: 5px;
}
.first-visit-content {
width: 600px;
margin: 30px 40px 37px;
}
}
@media (max-width: 870px) {
.products-list .item {
width: 49%;
border-color: #fff;
}
.products-list .item .image {
padding-bottom: 48%;
}
.products-list .item .favorite-action{
visibility: visible;
}
.products-list .current .icon {
display: block;
}
.products-list .current .product-size {
display: none;
}
.big-result-title {
width: 87%;
}
.filter-icon-box {
position: absolute;
top: 0;
right: 20px;
float: none;
}
.special-pic {
display: none;
}
}
@media (max-width: 850px) {
#filter .demensions {
width: 63%;
}
#filter .demensions dd {
width: 45.5%;
}
#filter {
width: 98%;
}
#filter .advanced{
top: 140px;
}
}
@media (max-width: 780px) {
.big-result-title {
padding-left: 0;
background: none;
}
.filter-result .result-list {
margin-left: 0;
}
.result-list span {
padding: 0 0.8%;
}
.filter-result {
float: none;
}
}
@media (max-width: 720px) {
.title {
font-size: 26px;
}
#filter {
padding-bottom: 0;
}
#filter .filter-title {
text-align: left;
background-color: #f2f2f2;
padding: 2% 0 2% 2%;
cursor: pointer;
margin: 0;
}
.prices .filter-title {
background: #f2f2f2;
}
#filter .style .filter-title,
#filter .colors .filter-title{
border-bottom: none;
}
#filter{
width: 100%;
}
#filter .filter-title span {
display: inline;
}
#filter-wrapper {
width: 100%;
padding: 0;
}
#filter dd {
width: 50%;
padding: 4px 0;
}
#filter li {
width: 100%;
margin: 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
height: auto;
padding-right: 0;
}
#filter .prices,
#filter .colors,
#filter .advanced,
#filter .sizes {
width: 100%;
position: relative;
top: 0;
height: auto;
left: 0;
padding-right: 0;
border-right:none;
}
#filter .demensions{
display: none;
}
#filter .demensions .filter-title {
display: block;
}
#filter .prices .prices-1 {
display: none;
}
#filter .prices dd {
width: auto;
}
#filter .prices .prices-lens {
height: auto;
display: block;
}
#filter .prices .prices-lens span {
width: 100px;
}
#filter .colors .dropdown {
top:22px;
}
#filter .advanced, #filter .colors {
width: 100%;
}
#filter .colors .list-all {
width: 260px;
margin-left: 0;
}
#filter .material,
#filter .frames,
#filter .advanced,
#filter .advanced,
#filter .colors {
height: auto;
}
.demensions .size-pic-2 {
margin-top: 0;
}
.filter-line{
display: none;
}
.filter-action {
display: none;
}
#filter .checked {
background-color: #5889bd;
color: #fff;
}
#filter li dl {
margin-left: 2%;
width: 310px;
padding: 8px 0;
display: none;
height: 35px;
overflow: visible;
padding-left: 10px;
}
#filter li .default {
display: block;
}
#filter .demensions .size-lens,
#filter .demensions .size-temple,
#filter .demensions .size-height {
display: block;
padding-right: 0;
margin-right: 0;
border-right: none;
height: 105px;
}
#filter .demensions .size-sub-title {
text-align: left;
}
#filter .size {
padding-top: 0;
}
#filter .demensions dl {
width: 480px;
height: auto;
overflow: hidden;
padding-bottom: 15px;
}
#filter .colors dl {
padding-bottom: 15px;
}
#filter .demensions .size-1,
#filter .demensions .size-2,
#filter .demensions .size-3 {
display: none;
}
#filter .advanced dd {
width: 50%;
}
#filter .advanced .women,
#filter .advanced .men{
width: auto;
}
#filter .demensions dd {
width: 33.3%;
}
#filter .demensions dd span {
display: block;
height: 25px;
line-height: 25px;
}
#filter .sizes-container {
width: 100%;
float: none;
padding: 0;
margin: 0;
}
#filter .sizes dd {
width: 100%;
}
#filter .filter-title .filter-tip {
display: none;
}
.hide-filter {
display: none;
}
.result-title {
display: block;
}
.big-result-title {
display: none;
}
.rate {
width: 290px;
}
.products-list .item .product-action {
display: none;
}
.products-list .item .favorite {
visibility: hidden;
}
.current .image img {
opacity: 1;
}
.first-visit-content {
width: 90%;
margin-left: 5%;
}
.first-visit-content .discount-info {
font-size: 66px;
}
.first-visit-content .discount-title {
margin-top: 0;
}
.rx-live-chat {
display: none;
}
}
@media (max-width: 480px) {
.products-list .item .product-color {
margin-top: 10px;
}
.products-list .item {
padding-top: 20px;
}
.popup-main {
overflow-y: auto;
}
.video-popup{
overflow: visible;
}
.products-list .item .icon {
height: 40px;
top: 2px;
}
#filter .demensions dl {
width: 320px;
}
#filter .demensions dd {
width: 50%;
}
.first-visit-content .discount-info {
font-size: 46px;
}
.first-visit-content .discount-title {
font-size: 18px;
}
.subscribe-newsletter-coupon {
width: 280px;
}
}
@media (max-width: 400px){
.products-list .item {
width: 98%;
}
.item.add-pic .image {
padding-bottom: 73%;
}
.add-pic .price-info {
display: none;
}
}
@media (max-width: 380px) {
#container {
padding-left: 10px;
padding-right: 10px;
}
.popup-main {
overflow: auto;
}
}
/* BGN pagination */
#pagination {
padding: 5px 0;
clear: both;
margin: 0 auto;
}
.pages{
float: left;
}
.pages strong, .pages span {
display: inline-block;
}
.pages strong{
margin: 0 5px;
font-size: 14px;
}
.pages span, .pages a {
display: inline-block;
width: 39px;
height: 39px;
margin-bottom: 5px;
text-align: center;
line-height: 39px;
color: #fff;
background-color: #919191;
font-size: 14px;
}
.pages .page-nav-action {
background-color: #f0f0f0;
color: #333;
cursor: pointer;
}
.pages .page-nav-action:hover{
background-color: #919191;
color: #fff;
}
.pages a:hover {
text-decoration: none;
}
.page-size{
float: right;
font-size: 14px;
position: relative;
width: 188px;
height: 40px;
line-height: 40px;
text-align: right;
}
.page-size ul{
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
color: #626262;
line-height: 26px;
background: #f0f0f0 url(images/drop-down.png) no-repeat 100px 18px;
}
.page-size li{
width: 115px;
padding-left: 10px;
height: 40px;
line-height: 40px;
display: none;
font-size: 14px;
}
.page-size .current {
display: inline-block;
}
@media (max-width: 480px) {
.page-size {
display: none;
}
}
/* bof POPUP login */
.jsTip {
padding: 8px 0;
line-height: 1.5em;
margin: 0;
position: relative;
}
.jsTip .close {
/* float: right; */
width: 0;
padding-left: 14px;
background: url(images/close_x.gif) no-repeat 0 50%;
overflow: hidden;
cursor: pointer;
position: absolute;
right: 5px;
}
#login-form {
padding: 20px 17px;
}
#login-form .popup-login-wrapper,
#login-form .popup-sign-wrapper {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
}
#login-form .popup-sign-wrapper {
position: relative;
padding-top: 10px;
padding-bottom: 0;
border-top: 1px solid #cdcdcd;
}
#login-form h5 {
margin: 5px auto;
color: #7f7f7f;
font-weight: normal;
font-size: 16px;
}
#login-form .popup-login-form {
margin-top: 5px;
}
#login-form .popup-login-wrapper li {
position: relative;
padding: 4px 0;
}
#login-form .relative {
position: relative;
}
#login-form .button {
margin-top: 5px;
padding: 4px 26px 5px;
line-height: 1.5;
}
#login-form .forgot-pwd {
position: absolute;
right: 0;
top: 10px;
display: inline-block;
font-size: 11px;
vertical-align: middle;
}
#login-form .form-item {
height: 28px;
overflow: hidden;
}
#login-form .form-item input,
#login-form .form-item input:focus,
#login-form .form-item input:active {
margin-left: -1px;
height: 26px;
padding: 0;
width: 245px;
text-indent: 5px;
vertical-align: middle;
border: 1px solid #d6d6d6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-appearance: none;
}
#login-form .icon-user,
#login-form .icon-pwd {
float: left;
height: 26px;
width: 27px;
display: inline-block;
text-indent: -555px;
border: 1px solid #d6d6d6;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background: url('images/icons/icon-for-login.png') 8px 8px no-repeat #f4f4f4;
vertical-align: middle;
overflow: hidden;
}
#login-form .icon-pwd {
background-position: 8px -22px;
}
#login-form .pop-facebook {
cursor: pointer;
}
#login-form .popup-sign-link {
position: absolute;
width: 100%;
left: 0;
bottom: -50px;
color: #fff;
text-align: center;
}
#login-form .popup-sign-link a {
color: #fff;
text-decoration: underline;
}
@media screen and (max-width: 480px) {
.popup-login-wrapper .popup-main {
overflow: visible;
}
#login-form {
padding-left: 10px;
padding-right: 10px;
}
#login-form .popup-login-wrapper,
#login-form .popup-sign-wrapper {
padding-left: 10px;
padding-right: 10px;
}
.form-item input,
.form-item input:focus,
.form-item input:active {
width: 185px;
}
#login-form .forgot-pwd {
position: relative;
right: auto;
top: auto;
font-size: 11px;
vertical-align: middle;
margin-left: 8px;
}
#login-form .popup-sign-link {
position: relative;
margin: 5px auto;
width: auto;
left: auto;
line-height: 1.2;
bottom: auto;
color: #000;
}
#login-form .popup-sign-link a {
color: #000;
}
}
/* eof POPUP login */
/* for root bing img */
body > img[src*="bing"] {
display: none;
}
@charset "utf-8";
.top-bar {
text-align: right;
height: 40px;
position: relative;
}
.top-bar .main-bar {
max-width: 1200px;
margin: 0 auto;
padding-top: 10px;
color: #000;
}
.top-bar a {
font-size: 13px;
color: #4d95ad;
text-decoration: underline;
}
.top-bar i.bar-close {
position: absolute;
top: 0;
right: 0;
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
width: 0;
height: 40px;
padding-left: 40px;
overflow: hidden;
cursor: pointer;
background: url('images/tips-close.png') center center no-repeat #f2f2f2;
}
.top-bar i.bar-close:hover {
background-color: #eaeaea;
}
@media screen and (max-width: 1350px) {
.top-bar .main-bar {
padding-right: 50px;
}
}
#container,
.main-width {
width: 1200px;
margin: 0 auto;
z-index: 1;
}
@media screen and (min-width: 1920px) {
.list-banner .banner-image {
width: 100%;
}
}
@media screen and (max-width: 1257px) {
#container,
.main-width {
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#wrapper-container {
margin: 0 auto;
min-width: 960px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.shortcut-container {
position: relative;
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
float: right;
margin: 15px -8px 10px;
z-index: 15;
font-size: 14px;
color: #fff;
}
@media screen and (max-width: 1200px) {
.shortcut-container {
margin-right: 0;
}
}
.shortcut li {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
float: left;
position: relative;
padding: 0 9px;
}
.shortcut li.line {
padding-top: 2px;
padding-left: 0;
padding-right: 0;
color: #fff;
font-size: 12px;
}
.shortcut .shortcut-links {
display: inline-block;
height: 20px;
line-height: 1.5;
color: #fff;
vertical-align: top;
}
.shortcut .shortcut-links.hover,
.shortcut .shortcut-links:hover {
color: #f1f1f1;
text-decoration: none;
}
.shortcut .icon {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
margin-top: 3px;
margin-right: 5px;
width: 0;
height: 16px;
padding-left: 16px;
overflow: hidden;
background: url('images/icons/icon-global-x-1.png') no-repeat;
}
.shortcut .shortcut-favorites {
margin-left: 10px;
}
.shortcut .shortcut-favorites .icon {
background-position: -5px -80px;
}
.shortcut .shortcut-cart .icon {
background-position: -5px -131px;
}
.shortcut .shortcut-local {
margin-right: 5px;
}
.shortcut .shortcut-local a {
color: #fff;
}
.shortcut-sub-wrapper {
position: absolute;
left: -3px;
*left: 0px;
border: 1px solid #404040;
color: #fff;
background-color: #404040;
z-index: 110;
margin-top: -1px;
top: 21px;
}
/* bof short sub */
#top-track-wrapper {
width: 225px;
padding: 23px 12px 12px;
}
#top-track-wrapper .track-search {
position: relative;
width: 220px;
}
.track-search input {
width: 99%;
border: 1px solid #dfdfdf;
height: 28px;
margin-top: 6px;
}
.track-search .track-button,
.track-search .track-button:hover,
.track-search .track-button:focus,
.track-search .track-button:active {
position: absolute;
right: 4px;
top: 13px;
cursor: pointer;
width: 16px;
height: 16px;
background: url(images/search-ico.png) no-repeat center center #fff;
border: none;
}
.shortcut-track-order .track-tips {
margin-top: 12px;
line-height: 1.2;
font-size: 12px;
}
#top-track-wrapper .order-color {
color: #418bd2;
}
#top-track-wrapper .status-color {
color: #d07070;
}
#top-track-wrapper .view-detail {
margin-bottom: 10px;
}
#top-track-wrapper .view-detail a {
color: #ccc;
font-size: 12px;
}
#top-track-wrapper .view-detail a:hover {
color: #578ed7;
}
#top-login-wrapper {
width: 303px;
left: -3px;
padding: 14px 5px 5px;
}
.login-content {
padding: 5px 10px 0;
}
.login-form dd {
padding: 3px;
}
.login-form label {
display: block;
margin: 3px 0;
}
.login-form .input-login {
width: 100%;
padding: 4px 0;
text-indent: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login-form input:focus {
background-color: #faffbd;
}
.login-form .button {
width: 100%;
padding: 7px 0;
text-transform: uppercase;
}
.login-content .remember-forget {
position: relative;
padding: 5px 4px;
overflow: hidden;
font-size: 12px;
}
.login-content .remember-forget label {
position: relative;
display: inline-block;
padding-left: 22px;
cursor: pointer;
}
.login-content .remember-forget .checkbox {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
background-color: #fff;
}
.login-content .remember-forget .checkbox.checked {
background: url(images/checked-3.png) no-repeat center center;
}
.login-content .remember-forget .forget-password {
margin: 3px 0 0;
float: right;
display: inline-block;
color: #fff;
}
.login-content .remember-forget .login-facebook {
float: left;
display: inline-block;
padding-bottom: 1px;
padding-left: 19px;
margin-right: 8px;
margin-top: 3px;
color: #fff;
background: url(images/facebook-icon-login.png) left center no-repeat;
cursor: pointer;
}
.register-content {
text-align: center;
margin: 5px auto;
padding: 13px 10px 10px;
border-top: 1px dashed #636363;
}
.other-content {
padding: 16px 13px 8px;
border-top: 1px dashed #636363;
}
.other-content .head-amazon-login,
.other-content .login-facebook {
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: middle;
width: 126px;
height: 40px;
cursor: pointer;
}
.other-content .login-facebook {
width: 147px;
text-align: right;
}
.other-content .login-facebook img {
width: 145px;
height: 33px;
}
#top-logout {
margin: 0 2px;
}
#top-logout:hover {
text-decoration: underline;
}
#top-help-wrapper {
width: 250px;
padding: 30px 12px 12px;
text-align: center
}
#top-help-wrapper .button.faq {
margin: 0 auto;
padding: 5px 15px 5px 40px;
width: 70%;
color: #fff;
background-image: url(images/icons/icon-faq.png);
background-repeat: no-repeat;
background-position: 15px center;
}
#top-help-wrapper .livechat {
margin-bottom: 0;
}
#top-help-wrapper .faq-others {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #555;
}
#top-help-wrapper .livechat {
display: block;
}
#top-help-wrapper .livechat em {
display: inline-block;
color: #fff;
font-style: normal;
padding: 2px 13px 2px 24px;
background: url(images/icons/icon-livechat.png) left 6px no-repeat;
cursor: pointer;
}
#top-help-wrapper .livechat em:hover {
color: #679dd9;
background-position: left -38px;
}
#top-help-wrapper .unlive em,
#top-help-wrapper .unlive em:hover {
color: #828282;
background-position: left -16px;
cursor: default;
}
body .livechat .unlive {
cursor: default;
background-color: #b3b3b3;
}
.livechat .unlive:hover,
.livechat .unlive:focus,
.livechat .unlive:active {
cursor: default;
background-color: #b3b3b3;
}
#top-help-wrapper .send-us {
display: inline-block;
color: #fff;
margin-top: 5px;
padding: 2px 0 2px 24px;
background: url(images/icons/icon-email.png) 0 3px no-repeat;
}
#top-help-wrapper .send-us:hover {
color: #679dd9;
background-position: 0 -17px;
}
#top-help-wrapper .send-number {
display: block;
font-size: 18px;
padding-top: 5px;
}
/* eof short sub */
/* bof PC nav */
.nav-content {
float: left;
margin-top: 3px;
width: 585px;
}
/* bof PC nav */
/*  for fix top */
.nav-container .logo-container,
.nav-container .shortcut-container {
display: none;
}
.nav-container {
min-height: 40px;
position: relative;
background-color: #fff;
z-index:  210;
}
.main-nav li {
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
text-align: center;
}
.main-nav .item {
position: relative;
display: block;
margin-right: 15px;
height: 33px;
line-height: 33px;
font-size: 18px;
color: #000;
text-transform: uppercase;
text-decoration: none;
padding-right:20px;
z-index: 11;
outline:none;
}
.main-nav .item:first {
padding-left: 0;
}
.main-nav .item:hover {
color: #000;
text-decoration: none;
}
.main-nav .item b {
color: #000;
position: absolute;
right: 8px;
top: 15px;
width: 0px;
height: 0px;
border-width: 4px;
border-style: solid;
border-color: #000 #fff #fff;
font-size: 0px;
line-height: 0;
}
.nav-container.show-sub {
min-height: 39px;
border-bottom: 1px solid #ccc;
}
.nav-container.show-sub .item {
color: #999;
}
.nav-container.show-sub .item b {
color: #999;
border-color: #999 #fff #fff;
}
.nav-container.show-sub .current b {
color: #000;
border-color: #000 #fff #fff;
}
.nav-container.show-sub .current {
color: #000;
}
#reflekt-nav.item {
padding-left: 23px;
background: url('images/menu/icon-reflekt-nav.png') 0 10px no-repeat;
cursor: pointer;
}
#reflekt-nav.item.black-reflekt {
background-position: 0 -42px;
}
#reflekt-nav.item em {
display: inline-block;
font-style: normal;
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*IE*/
filter:FlipH;
}
/* sub reflekt */
.sub-reflekt-content {
padding: 0;
}
.sub-reflekt-content span {
display: inline-block;
float: right;
width: 49.5%;
text-align: right;
}
.sub-reflekt-content span:first-child {
float: left;
text-align: left;
}
/* sub menu */
#sub-menu-wrapper {
position: relative;
margin-top: -1px;
background-color: #fff;
min-height: 1px;
*font-size: 0;
*zoom: 1;
}
.sub-nav-wrapper {
display: none;
z-index: 10;
width: 100%;
text-align: left;
font-size: 16px;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.sub-nav-wrapper .main-width {
min-height: 120px;
padding-top: 15px;
padding-bottom: 15px;
}
/* sub eyeglasses */
#sub-eyeglasses dt {
float: left;
width: 27%;
padding-top: 5px;
min-width: 300px;
min-height: 115px;
}
#sub-eyeglasses dd {
float: left;
min-height: 120px;
text-align: center;
border-left: 1px solid #e9e9e9;
}
#sub-eyeglasses span.by-gender {
width: 46%;
min-width: 145px;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
font-weight: bold;
font-size: 18px;
text-align: center;
}
#sub-eyeglasses span.by-gender a {
display: inline-block;
vertical-align: top;
margin-top: 10px;
width: 100%;
font-size: 16px;
padding: 52px 0 5px;
background-position: center 0;
background-repeat: no-repeat;
}
.by-gender .women {
background-image: url('images/sub-women.jpg');
}
.by-gender .men {
background-image: url('images/sub-men.jpg');
}
#sub-eyeglasses dd.popular {
width: 27%;
min-width: 275px;
}
#sub-eyeglasses dd.packages {
width: 15%;
min-width: 160px;
}
#sub-eyeglasses dd.promotion {
float: right;
width: 28%;
min-width: 260px;
padding: 0px;
text-align: right;
border-left: none;
overflow: hidden;
}
#sub-eyeglasses .promotion img {
display: block;
float: right;
}
.sub-nav-list {
margin: 10px auto;
width: 80%;
max-width: 250px;
text-align: center;
}
.sub-nav-title {
display: block;
text-align: left;
color: #4ca3bf;
font-size: 16px;
}
.sub-nav-list ul {
margin-top: 4px;
}
.popular .sub-nav-list li {
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
width: 45%;
float: left;
}
.sub-nav-list li a {
display: block;
margin: 3px 0;
font-size: 14px;
text-align: left;
white-space: nowrap;
}
.sub-nav-list li a sup {
text-decoration: none;
}
/* sub sunglasses */
.sub-sunglasses-content dt span {
display: inline-block;
text-align: center;
padding-top: 3px;
}
.sub-sunglasses-content dt a {
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-top: 10px;
width: 155px;
padding: 52px 5px 5px 0px;
font-size: 16px;
font-weight: bold;
background-position: center 0;
background-repeat: no-repeat;
}
.sub-sunglasses-content dt .prescription-sunglasses {
background-image: url('images/sub-prescription.jpg');
padding-right: 0
}
.sub-sunglasses-content dt .non-prescription-sunglasses {
background-image: url('images/sub-non-prescription-sunglasses.jpg');
padding-right: 0
}
.sub-sunglasses-content dt .sport-sunglasses {
background-image: url('images/sub-sport-sunglasses.jpg');
padding-right: 0
}
.sub-sunglasses-content dt {
float: left;
width: 330px;
padding-top: 5px;
min-width: 300px;
min-height: 115px;
}
.sub-sunglasses-content dd {
float: left;
min-height: 120px;
text-align: center;
border-left: 1px solid #e9e9e9;
}
.sub-sunglasses-content dd.packages {
width: 20%;
min-width: 160px;
padding: 0 30px;
white-space: nowrap;
}
.sub-sunglasses-content .sub-nav-list {
max-width: none;
width: 100%;
}
.sub-sunglasses-content dd.promotion {
float: right;
width: 28%;
min-width: 260px;
padding: 0px;
text-align: right;
border-left: none;
overflow: hidden;
}
.sub-sunglasses-content .promotion img {
display: block;
float: right;
}
/* */
.sub-collections-content span {
float: left;
width: 20%;
padding-top: 4px;
min-width: 160px;
max-width: 240px;
}
.sub-collections-content a {
display: block;
padding-right: 10px;
}
.sub-collections-content em {
display: none;
font-style: normal;
color: #000;
}
.sub-collections-content a:hover em {
text-decoration: underline;
color: #578ed7;
}
.sub-collections-content img {
opacity: .999999;
}
.sub-collections-content img:hover {
opacity: 0.8;
}
@media screen and (max-width: 1100px) {
#sub-eyeglasses dd.promotion {
display: none;
}
}
/* eof PC nav */
/* bof search */
.search-content {
float: right;
width: 330px;
margin-top: 7px;
}
.search-content .filter-button {
position: relative;
display: block;
float: right;
margin-top: 3px;
margin-left: 10px;
text-align: right;
cursor: pointer;
font-weight: bold;
}
.filter-button .icon {
display: inline-block;
vertical-align: middle;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
margin-left: 10px;
width: 0;
height: 15px;
padding-left: 10px;
overflow: hidden;
background: url('images/icons/icon-slide.png') right center no-repeat;
}
.search-content .search-form {
position: relative;
float: right;
width: 110px;
}
.search-form .input-search,
.search-form .input-search:focus,
.search-form .input-search:active,
.search-form .input-search:hover {
position: absolute;
right: 0;
top: 0;
border: none;
width: 110px;
height: 22px;
color: #000;
text-indent: 2px;
outline: none;
border-radius: 0;
}
.search-form .input-search:focus,
.search-form .input-search:active {
color: #000;
border-bottom: 1px solid #b9b9b9;
}
.search-form input.input-search:-webkit-input-placeholder {
color: #a3a3a3;
}
.search-form input.input-search:-moz-placeholder {
color: #a3a3a3;
}
.search-form input.input-search::-moz-placeholder {
color: #a3a3a3;
}
.search-form input.input-search:-ms-input-placeholder {
color: #a3a3a3;
}
.search-button,
.search-button:hover,
.search-button:focus,
.search-button:active {
position: absolute;
right: 4px;
top: 4px;
width: 0px;
padding: 0 0 0 17px;
height: 17px;
background: url(images/icons/icon-nav-search.png) no-repeat center center #fff;
border: none;
overflow: hidden;
cursor: pointer;
}
#divSuggestions {
position: absolute!important;
width: 165px;
text-align: left;
line-height: 1.4;
z-index: 30;
background-color: #fff;
}
#divSuggestions ul {
padding-left: 7px;
background-color: #fff;
}
#divSuggestions  td img {
width: 90px;
margin-right: 3px;
}
#divSuggestions .yui-ac-highlight {
cursor: pointer;
color: #328fce;
}
/* eof search */
.sub-collections-content em {
display: none;
}
/* eof PC nav */
/* bof filter selected */
.slider-right .selected {
background: url(images/checked-2.png) no-repeat 0 center;
}
/* eof filter selected */
/*  bof sticky nav */
.sticky-nav {
height: 55px;
min-width: 460px;
color: #fff!important;
background-color: #404040!important;
background-color: rgba(42,42,42, .89)!important;
border-bottom: none!important;
z-index: 1100;
}
.sticky-nav .logo-container {
display: block!important;
margin-top: 15px;
margin-right: 36px;
width: 60px;
}
.sticky-nav .logo-container #logo {
display: block;
width: 0;
padding-left: 69px;
height: 26px;
overflow: hidden;
background: url('images/logo-global-x-1.png') -5px -38px no-repeat;
}
.sticky-nav .nav-content {
margin-top: 10px;
width: 575px;
}
.sticky-nav .main-nav .item,
.sticky-nav .main-nav .item:hover,
.sticky-nav .main-nav.show-sub .item {
font-size: 16px;
color: #fff;
}
.sticky-nav .main-nav .item b {
display: none;
}
.sticky-nav .search-form {
display: none;
}
.sticky-nav .filter-button .icon {
vertical-align: top;
width: 0;
height: 21px;
padding-left: 21px;
background: url('images/icons/icon-global-x-1.png') no-repeat -5px -183px;
}
.sticky-nav .search-content {
width: auto;
margin-top: 11px;
}
.sticky-nav .search-content .filter-button {
display: block;
}
.sticky-nav .shortcut-container {
display: block!important;
margin-top: 13px;
margin-right: 8px;
}
.sticky-nav .shortcut .shortcut-links {
margin-top: 0;
}
.sticky-nav .shortcut .icon {
margin-top: 1px;
margin-right: 2px;
width: 0;
height: 22px;
padding-left: 23px;
background: url('images/icons/icon-global-x-1.png') no-repeat;
}
.sticky-nav .shortcut .shortcut-favorites .icon {
background-position: -5px -278px;
}
.sticky-nav .shortcut .shortcut-favorites .icon.active {
background-position: -5px -312px;
}
.sticky-nav .shortcut .shortcut-cart .icon {
background-position: -1px -341px;
}
.sticky-nav .shortcut .shortcut-cart .icon.active {
background-position: -1px -374px;
}
.sticky-nav #reflekt-nav.item em {
background-position: center -41px;
}
@media(min--moz-device-pixel-ratio:1.5), (-o-min-device-pixel-ratio:3/2), (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
.sticky-nav .shortcut .icon {
background-image:url('images/icons/icon-global-x-2.png');
background-size: 80px 1000px
}
}
@media screen and (max-width: 960px) {
.sticky-nav .main-nav .nav-content {
width: auto;
}
.sticky-nav .main-nav .item {
padding-right: 0;
}
.sticky-nav .nav-content {
display: inline-block;
width: auto;
}
}
@media screen and (max-width: 820px) {
.sticky-nav .main-nav {
display: none;
}
}
@media screen and (max-width: 720px) {
.sticky-nav .logo-container {
margin-right: 20px;
}
}
/*  eof sticky nav*/
.top-menu-eyeglasses {
display: block;
width: 0;
height: 33px;
padding-left: 29px;
background: url('images/icons/icon-pink-oct.jpg') left center no-repeat;
overflow: hidden;
}
.sticky-nav .pink-october {
display: none;
padding-left: 0;
background: none;
}
/*=== begin after 20151117 filter tags ===*/
.tags-sort-wrap {
padding-top: 14px;
padding-bottom: 14px;
}
.selected-list {
width: 70%;
float: left;
}
.selected-list .selected-tags {
display: inline-block;
margin: 0px 8px 5px 5px;
line-height: 13px;
*line-height: 27px;
}
.selected-tags b, .selected-tags strong, .selected-tags .cancel {
display: inline-block;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
font-size: 14px;
}
.selected-tags .cursor-default:hover {
cursor: default;
}
.selected-tags a {
text-decoration: none;
}
.selected-tags b, .selected-tags .cancel {
width: 12px;
height: 13px;
margin-right: 3px;
background: url(images/delete.png) 0 1px no-repeat;
font-size: 14px;
text-align: center;
line-height: 13px;
cursor: pointer;
}
.selected-tags:hover strong {
color: #4a668d;
}
.selected-tags:hover b {
background: url(images/delete.png) 0 -13px no-repeat;
}
.list-view {
width: 30%;
margin-top: -2px;
float: right;
text-align: right;
}
.list-view .sort-wrap {
display: inline-block;
*display: inline;
*zoom: 1;
width: 194px;
margin-left: 5px;
}
#list-sort-by {
border: 1px solid #b3b3b3;
padding: 2px;
}
#list-sort-by,
#list-sort-by:focus,
#list-sort-by:active {
border-left: none;
border-right: none;
border-top: none;
outline: none;
border-radius: 0;
}
/*=== end after 20151117 filter tags ===*/
/*=== begin 20151111 new filter ===*/
.filter-out {
*position: relative;
*z-index: 10;
}
.filter {
position: relative;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
.filter-wrap {
width: 986px;
height: 54px;
margin: 0 auto;
}
.filter-wrap.bogo-filter-wrap,
.filter-wrap.onsale-filter-wrap {
width: auto;
}
.filter-wrap.sunglasses-filter-wrap {
width: 765px;
}
.filter-wrap.campaign-filter-wrap {
width: 820px;
}
.filter-wrap li {
position: relative;
float: left;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-color: transparent;
}
.filter-wrap.sunglasses-filter-wrap li {
margin: 0 20px;
}
@media(min-width: 1200px) {
.filter-wrap.bogo-filter-wrap,
.filter-wrap.onsale-filter-wrap {
width: 1024px;
}
.filter-wrap.sunglasses-filter-wrap {
width: 960px;
}
.filter-wrap li {
margin: 0px 8px;
}
.filter-wrap.sunglasses-filter-wrap li {
margin: 0px 32px;
}
.fr-filter-wrap li {
margin: 0px 5px;
}
}
@media(max-width: 960px) {
.filter-wrap {
width: auto;
}
}
.filter-wrap li.current {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #fcfcfc;
}
.filter-menu {
padding: 17px 20px;
margin-bottom: -1px;
text-transform: uppercase;
cursor: pointer;
}
.fr-filter-wrap .filter-menu {
padding: 17px 16px;
}
.filter-menu span {
vertical-align: middle;
letter-spacing: 1px;
}
.filter-menu .icon {
display: inline-block;
*display: inline;
*zoom: 1;
width: 11px;
height: 6px;
margin-left: 4px;
vertical-align: middle;
background: url('images/icons/filter-arrow.png') center top no-repeat;
}
.filter-wrap li.current .filter-menu {
background-color: #fcfcfc;
}
.filter-wrap li.filtered .filter-menu {
color: #4ca3bf;
transition: color .25s ease-out;
}
.filter-wrap li.filtered .filter-menu .icon {
background-position: center center;
}
.filter-down {
display: none;
position: absolute;
left: -1px;
top: 55px;
z-index: 30;
padding: 20px 20px 16px;
border: 1px solid #ccc;
border-top: 0px;
background-color: #fcfcfc;
}
.filter-down .option-list {
margin-left: -10px;
margin-right: -10px;
}
.filter-down.glasses-type .option-list,
.filter-down.gender .option-list,
.filter-down.frame-type .option-list {
margin: 0px;
}
.filter-down .option {
margin-bottom: 6px;
margin-left: 10px;
margin-right: 10px;
text-indent: 22px;
white-space: nowrap;
color: #000;
background: url(images/no-check-1.png) no-repeat 0 center;
cursor: pointer;
}
.filter-down.glasses-type .option,
.filter-down.gender .option,
.filter-down.frame-type .option {
margin-left: 20px;
margin-right: 20px;
}
.filter-down .option.selected {
background: url(images/checked-4.png) no-repeat 0 center;
}
.filter-wrap li.current .filter-down {
display: block;
transition: display .25s ease-out;
}
.filter-down.glasses-type {
width: 100%;
padding: 20px 0px 16px;
}
.filter-down.gender {
width: 100%;
padding: 20px 0px 16px;
}
.fr-filter-wrap .filter-down.gender {
width: 130px;
}
.filter-down.size {
width: 190px;
}
.fr-filter-wrap .filter-down.size {
width: 250px;
}
.filter-down.type {
width: 105px;
}
.filter-down.shape {
width: 200px;
}
.filter-down.frame-type {
width: 100%;
padding: 20px 0px 16px;
}
.filter-down.material {
width: 180px;
}
.filter-down.lens-type {
width: 200px;
right: -1px;
left: auto;
}
.fr-filter-wrap .filter-down.lens-type {
width: 230px;
}
@media(min-width: 1069px) {
.filter-down.lens-type {
right: auto;
left: -1px;
}
}
.filter-down.color-choose {
width: 280px;
}
.bogo-filter-wrap .filter-down.color-choose,
.onsale-filter-wrap .filter-down.color-choose {
right: -1px;
left: auto;
}
@media(max-width: 1200px) {
.sunglasses-filter-wrap .filter-down.color-choose {
right: -1px;
left: auto;
}
}
.filter-down.size .option,
.filter-down.shape .option,
.filter-down.material .option,
.filter-down.color-choose .option {
width: 40%;
float: left;
}
.filter-down.color-choose .option {
height: auto;
padding: 0px 3px 3px;
text-indent: 0px;
background-image: none;
}
.filter-down.color-choose .option:hover,
.filter-down.color-choose .option.selected {
transition: background-color .25s ease-out;
background-color: #e9e9e9;
}
.filter-down.color-choose .option span {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.filter-down.color-choose .option .color {
height: 20px;
width: 32px;
margin-right: 10px;
}
.filter-down.color-choose .option .clear {
background-image: url(images/color/color-family-12.png);
}
.filter-down.color-choose .option .striped {
background-image: url(images/color/color-family-13.png);
}
.filter-down.color-choose .option .camouflage {
background-image: url(images/color/color-family-14.png);
}
.filter-down.color-choose .option .tortoise {
background-image: url(images/color/color-family-15.png);
}
.filter-down.color-choose .option .floral {
background-image: url(images/color/color-family-16.png);
}
.filter-down.color-choose .option .leopard {
background-image: url(images/color/color-family-18.png);
}
.filter-down.color-choose .option .black {
background-color: #000;
}
.filter-down.color-choose .option .gray {
background-color: #808080;
}
.filter-down.color-choose .option .white {
background-color: #E6E6FA;
}
.filter-down.color-choose .option .pink {
background-color: #FFC0CB;
}
.filter-down.color-choose .option .red {
background-color: #FF0000;
}
.filter-down.color-choose .option .brown {
background-color: #800000;
}
.filter-down.color-choose .option .orange {
background-color: #FFA500;
}
.filter-down.color-choose .option .yellow {
background-color: #FFFF00;
}
.filter-down.color-choose .option .green {
background-color: #008000;
}
.filter-down.color-choose .option .blue {
background-color: #0000FF;
}
.filter-down.color-choose .option .purple {
background-color: #800080;
}
.filter-down.size .dimension,
.filter-down.lens-type .eligible {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #e6e6e6;
}
.filter-down.size .dimension .slider .size-pic-1,
.filter-down.size .dimension .slider .size-pic-2,
.filter-down.size .dimension .slider .size-pic-3,
.filter-down.size .dimension .slider .size-pic-4 {
margin: 0px auto;
width: 54px;
height: 26px;
background: url('images/icons/filter-dimention.png') center top no-repeat;
}
.filter-down.size .dimension .slider .size-pic-1 {
background-position: center top;
}
.filter-down.size .dimension .slider .size-pic-2 {
background-position: center -26px;
}
.filter-down.size .dimension .slider .size-pic-3 {
background-position: center -52px;
}
.filter-down.size .dimension .slider .size-pic-4 {
background-position: center bottom;
}
.filter-down.size .dimension .slider .value-bar {
margin-bottom: 16px;
text-align: center;
color: #000;
font-size: 13px;
}
.filter-down.lens-type .eligible.sunglasss-noline {
margin-top: 0px;
padding-top: 3px;
border-top: 0px;
}
.filter-down.lens-type .eligible .option {
margin-left: 0px;
margin-right: 0px;
}
.filter-down.lens-type .eligible .group {
padding-top: 5px;
padding-bottom: 10px;
}
.filter-down.lens-type .eligible .action .button {
width: 100%;
padding: 5px 0px;
border: 1px solid #ddd;
background-color: #fff;
text-transform: uppercase;
font-size: 11px;
color: #8d8d8d;
letter-spacing: 1px;
}
.filter-down.lens-type .eligible .action .button:hover {
color: #000;
border-color: #ccc;
transition: color .25s ease-out, border-color .25s ease-out;
}
.filter-clear {
position: absolute;
right: 12px;
top: 20px;
font-size: 12px;
color: #a3a3a3;
cursor: pointer;
}
.filter-clear .selected {
transition: color .25s ease-out;
color: #4ca3bf;
}
/*=== end 20151111 new filter ===*/
/*=== begin 20151120 popup table in newfilter  ===*/
.filter-popup {
width: 812px;
padding: 20px 30px 25px;
}
.filter-popup .close-wrap {
display: none;
}
.filter-popup .read-prescription {
padding-bottom: 10px;
text-align: right;
}
.filter-popup  .read-prescription a {
color: #6FB5CC;
}
.filter-popup .os-container {
border: 1px solid #404040;
}
.filter-popup .os-content {
width: 100%;
display: table;
text-align: center;
background-color: #f2f2f2;
}
.filter-popup .os-content dl {
display: table-row;
}
.filter-popup .os-table dt,
.filter-popup .os-table dd {
display: table-cell;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
width: 20%;
margin: 0;
height: 21px;
padding: 8px 10px 11px;
}
.filter-popup .os-table.os-head {
color: #fff;
background-color: #404040;
}
.filter-popup .os-table .os-title {
padding-left: 3%;
text-align: left;
}
.filter-popup .os-table.os-left .os-title,
.filter-popup .os-table.os-right .os-title,
.filter-popup .os-table.os-left .os-cyl,
.filter-popup .os-table.os-right .os-cyl,
.filter-popup .os-table.os-left .os-cyl-add,
.filter-popup .os-table.os-right .os-cyl-add {
background-color: #fff;
}
.filter-popup .os-table.os-left .os-axis input,
.filter-popup .os-table.os-right .os-axis input {
width: 70px;
}
.filter-popup .os-pd-container {
background-color: #fff;
padding: 0;
clear: both;
border-top: 1px solid #cecece;
}
.filter-popup .os-pd-container p {
margin: 0;
padding: 0;
}
.filter-popup .os-pd-table {
background-color: #f2f2f2;
}
.filter-popup .os-pd-table li.save-as {
margin-top: 0;
margin-bottom: 0;
background-color: #f2f2f2;
}
.filter-popup .os-pd-table .td {
display: inline-block;
vertical-align: top;
zoom: 1;
min-height: 23px;
padding: 10px 0px;
}
.filter-popup .os-pd-table .td .inner {
padding-left: 25px;
}
.filter-popup .os-pd-table .td .all-pd-num,
.filter-popup .os-pd-table .td .right-pd-num,
.filter-popup .os-pd-table .td .left-pd-num {
width: 75px;
}
.filter-popup .confirm-prescription {
position: relative;
padding-top: 10px;
}
.filter-popup .confirm-prescription .confirm-btn {
position: absolute;
left: 0px;
}
.filter-popup .confirm-prescription .confirm-btn button {
padding: 10px 40px;
text-transform: uppercase;
color: #fff;
background-color: #404040;
}
.filter-popup .confirm-prescription .confirm-btn button[disabled] {
background-color: #d6d6d6;
}
.filter-popup .confirm-prescription .prescription-text {
padding: 10px 0px;
text-align: right;
color: #a3a3a3;
}
/*=== end 20151120 popup table in newfilter ===*/
/*---- begin gift card activity ----*/
.subs-gift-card {
display: inline-block;
*display: inline;
*zoom: 1;
width: 90px;
margin-right: -50px;
margin-top: 6px;
}
.subs-gift-card.subs-gift-card-fr {
width: 115px;
margin-right: -86px;
}
.subs-gift-card a {
outline: none;
text-transform: uppercase;
color: #fff;
font-size: 16px;
}
.subs-gift-card a:hover {
text-decoration: none;
}
.subs-gift-card .gift-card-text {
display: none;
}
.sticky-nav .subs-gift-card .gift-card-text {
display: block;
}
.sticky-nav .subs-gift-card .gift-card-img {
display: none;
}
/*---- end gift card activity ----*/
#header {
border-bottom: none;
}
/* bof banner */
/* for banner */
.banner-image {
position: absolute;
max-width: 5000px;
}
.list-banner {
text-align: left;
position: relative;
/* *z-index: 288;  ie7 position erro */
}
.list-banner ul {
overflow: hidden;
position: relative;
}
.list-banner li {
list-style: none;
float: left;
position: relative;
}
.list-banner li .sub-link a {
position: absolute;
background-color: #fff;
filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
#bogo-date {
position: absolute;
left: 99px;
bottom: 20px;
}
#banner-prev {
position: absolute;
left: 20px;
bottom: 50px;
width: 75px;
height: 160px;
background-position:  center center;
background-image: url(images/hp-left.png);
background-repeat: no-repeat;
cursor: pointer;
opacity: .6;
}
#banner-next {
position: absolute;
right: 20px;
bottom: 50px;
width: 75px;
height: 160px;
background-position:  center center;
background-image: url(images/hp-right.png);
background-repeat: no-repeat;
cursor: pointer;
opacity: .6;
}
#banner-next, #banner-prev {
z-index: 14;
}
#banner-next:hover, #banner-prev:hover {
opacity: .999;
}
.disables-button {
display: none;
}
.list-banner {
overflow: hidden;
}
.button-none{
display: none;
}
.list-banner .freeshipping-tips-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
z-index: 10;
}
.guaranty-improve {
padding: 17px 10px;
line-height: 1.3;
text-align: center;
background-color: #fafafa;
border-bottom: 1px solid #ebebeb;
}
.freeshipping-tips-container {
margin-right: 40px;
height: 40px;
color: #fff;
text-align: center;
background-color: #6e6f69;
background-color: rgba(0, 0, 0, .5);
cursor: pointer;
}
.freeshipping-tips-container:hover {
background-color: #404040;
background-color: rgba(0, 0, 0, .6);
}
.freeshipping-tips {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
padding: 10px 10px 10px 37px;
font-size: 15px;
text-align: center;
background: url('images/icons/icon-white-car.png') left center no-repeat;
}
.freeshipping-tips i {
font-style: normal;
}
.freeshipping-tips span {
margin-left: 10px;
text-decoration: underline;
text-transform: uppercase;
cursor: pointer;
}
.freeshipping-tips-close {
position: absolute;
right: 0px;
top: 0px;
display: block;
width: 40px;
height: 40px;
background: url('images/icons/icon-out-close.png') center center no-repeat;
cursor: pointer;
background-color: #6e6f69;
background-color: rgba(0, 0, 0, .5);
}
.freeshipping-tips-close:hover {
background-color: #4e4e4e;
background-color: rgba(0, 0, 0, .6);
}
.freeshipping-popup {
padding: 10px 5px 20px;
max-width: 475px;
font-size: 14px;
text-align: center;
color: #000;
}
.freeshipping-popup-title {
margin: 20px auto;
max-width: 300px;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
}
.freeshipping-popup-content {
margin: 20px;
}
/* eof banner */
.guarantee-container {
position: relative;
margin-top: 33px;
padding: 16px 10px;
border: 1px solid #cacaca;
font-size: 16px;
text-align: center;
color: #000;
text-transform: uppercase;
background-color: #fbfbfb;
cursor: pointer;
letter-spacing: 2px;
}
.guarantee-container span {
margin: 0 10px;
}
.guarantee-container .icon {
position: absolute;
display: block;
right: 0;
top: 0;
width: 0;
height: 53px;
padding-left: 56px;
overflow: hidden;
background: url('images/icon-help-x1.png') center center no-repeat;
cursor: pointer;
}
.guarantee-container:hover {
background-color: #f2f2f2;
}
.guarantee-popup-content {
width: 95%;
max-width: 630px;
font-size: 14px;
color: #000;
padding: 30px 45px 40px;
}
.guarantee-popup-content h5 {
margin: 10px 0 0;
font-size: 16px;
}
.guarantee-popup-content p {
margin: 0px auto;
}
.index-container {
color: #000;
overflow: hidden;
}
.index-piece {
margin-top: 2.8%;
width: 48.3333333%;
max-width: 580px;
text-align: center;
overflow: hidden;
}
.index-piece.daily {
float: left;
max-width: 578px;
min-height: 410px;
}
#daily-video {
position: relative;
}
#daily-video a.daily-content {
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-decoration: none;
z-index: 100;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#daily-video .daily-content:hover {
background-color: rgba(0,0,0, .4);
}
.daily-content p {
margin: 25% auto 17px;
font-size: 36px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.daily-content span.daily-button {
display: inline-block;
padding: 8px 10px;
border: 3px solid #fff;
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#daily-video .daily-content:hover span {
color: #000;
background-color: #fff;
}
/*recommend*/
.index-piece.recommend {
float: right;
}
.recommend ul {
overflow: hidden;
position: relative;
}
.recommend ul li{
position: relative;
float: left;
}
.recommend p {
margin: 7px auto 2px;
font-size: 16px;
}
.recommend p.name {
margin-top: -30px;
font-weight: bold;
}
/*review-text*/
.index-piece.index-review {
position: relative;
float: left;
/*background: url('images/bg-index-guaranty.jpg') top center no-repeat;
background-size: cover;*/
}
.index-review .index-review-content {
position: absolute;
top: 22.2%;
left: 12%;
width: 76%;
min-height: 180px;
margin: 0px auto;
padding: 10% 1% 11%;
overflow: hidden;
}
.review-text {
padding: 20px 72px;
color: #000;
font-size: 14px;
text-align: right;
letter-spacing: 1px;
}
.review-text p {
margin: 10px auto 0;
}
.review-text .quote {
position: relative;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
.review-text i {
position: absolute;
top: -8px;
font-size: 26px;
font-family: Georgia;
vertical-align: bottom;
vertical-align: baseline;
color: #707070;
}
.review-text i.icon-quote-left {
left: -8px;
}
.review-text i.icon-quote-right {
right: -5px;
}
.review-text .signature {
padding-right: 10px;
}
@media screen and (max-width: 1200px) {
.index-review .index-review-content {
padding: 4% 1% 6%;
}
}
@media screen and (max-width: 1024px) {
.index-review .index-review-content {
top: 8%;
}
}
@media screen and (max-width: 900px) {
.index-review .index-review-content {
top: 12.2%;
padding: 10% 1% 11%;
}
}
/*package*/
.index-piece.product-package {
position: relative;
float: right;
}
.product-package img {
display: block;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.product-package-content {
filter: alpha(opacity=00);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 21.5%;
height: 69.5%;
background-color: rgba(255, 255, 255, .6);
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.product-package-content a {
display: block;
margin: 20px auto;
padding: 12px 10px;
width: 50%;
min-width: 280px;
font-size: 14px;
font-weight: bold;
border: 2px solid #3c3c3c;
background-color: #fff;
text-decoration: none;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.product-package-content a:hover {
color: #fff;
background-color: #3c3c3c;
}
.product-package.hover img {
filter: alpha(opacity=80);
-moz-opacity: .8;
-khtml-opacity: .8;
opacity: .8;
background-color: #fff;
}
.product-package.hover .product-package-content {
display: block;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
/* piece responsive */
@media screen and (max-width: 900px) {
.index-piece.daily,
.index-piece.recommend,
.index-piece.index-review,
.index-piece.product-package {
float: none;
margin: 3.4% auto 0;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.index-review .index-review-centent {
top: 19%;
padding: 4.8% 1%;
}
.index-review p {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.product-package-content {
padding-top: 10%;
}
.product-package-content a {
max-width: 250px;
font-size: 13px;
}
}
/*index-mix-match*/
.index-mix-match {
margin: 20px auto;
overflow: hidden;
text-align: center;
}
.index-mix-match .title {
margin: 20px auto 0;
font-size: 32px;
text-transform: uppercase;
}
.index-mix-match ul,
.index-mix-match li {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
.index-mix-match li {
margin: 20px;
max-width: 400px;
}
.index-mix-match li:first-child {
margin-right: 30px;
}
.index-mix-match a {
text-decoration: none;
}
.index-mix-match a span {
display: block;
margin: 10px auto;
padding: 6px 5px 7px;
width: 195px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
border: 2px solid #3c3c3c;
background-color: #fff;
text-decoration: none;
z-index: 10;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.index-mix-match a:hover span {
color: #fff;
text-decoration: none;
background-color: #3c3c3c;
}
/*index-social*/
.index-social {
width: 100%;
margin: 25px auto;
overflow: hidden;
}
.index-social dl {
width: 100%;
margin-left: -4px;
overflow: hidden;
}
.index-social dt {
position: relative;
float: left;
width: 27%;
height: 0;
padding-bottom: 33.5%;
overflow: hidden;
}
.index-social .social-content {
position: absolute;
top: 35%;
left: 10%;
width: 75%;
font-size: 26px;
font-weight: bold;
color: #fff;
text-align: center;
}
.index-social .social-content>em {
display: block;
margin: 10px auto;
font-weight: normal;
font-size: 18px;
}
.index-social .social-content .social-list {
width: 100%;
margin: 20px auto 5px;
font-size: 14px;
}
.social-list a {
margin: 0 5px;
}
.index-social dd {
float: left;
position: relative;
display: inline-block;
width: 18.25%;
height: 0;
padding-bottom: 16.75%;
overflow: hidden;
}
.index-social dt>img,
.index-social dd img {
display: block;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.view-container {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.index-social dd a,
.index-social dd span {
display: block;
width: 75%;
padding: 8px 5px;
text-decoration: none;
text-transform: uppercase;
color: #000;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.index-social dd .view-btn-top {
margin: 24% auto 4px;
font-size: 16px;
}
.index-social dd a.view-btn-top:hover {
color: #6C6969;
}
.index-social dd a.view-btn-bottom {
margin: 0 auto;
border: 2px solid #3c3c3c;
color: #3c3c3c;
font-weight: bold;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.index-social dd a.view-btn-bottom:hover {
color: #fff;
background-color: #3c3c3c;
}
.index-social dd a.view-btn-bottom.one {
margin-top: 38%;
}
/*index-video*/
.index-video {
margin: 50px auto 40px;
width: 100%;
color: #404040;
text-align: center;
overflow: hidden;
}
.index-video .title {
margin: 10px auto;
font-size: 24px;
color: #404040;
text-transform: uppercase;
}
.index-video ul,
.index-video li {
display: inline-block;
vertical-align: top;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
.index-video ul {
width: 100%;
margin-top: 5px;
overflow: hidden;
}
.index-video li {
margin-top: 0px;
padding: 0 2.3%;
}
.index-video li:first-child {
padding-left: 0;
}
.index-video li:last-child {
padding-right: 0;
}
.index-video a {
display: block;
margin: 10px auto 0;
padding: 3px 5px;
white-space: nowrap;
text-transform: uppercase;
}
.index-video a:hover {
color: #888;
text-decoration: none;
}
.index-video a img {
margin-right: 5px;
vertical-align: top;
}
@media screen and (max-width: 1257px) {
.index-video li {
padding: 0 2%;
}
}
@media screen and (max-width: 960px) {
.index-video {
display: none;
}
.index-social {
overflow: hidden;
}
.index-social dt {
width: 32.8%;
padding-bottom: 40%;
}
.index-social dd {
width: 22.4%;
padding-bottom: 20%;
}
.index-social dd:nth-child(7),
.index-social dd:nth-child(8) {
display: none;
}
}