html {
box-sizing: border-box
}
*,
:after,
:before {
box-sizing: inherit
}
.m-color-gray {
color: #767676
}
.m-color-bg-transparent {
background-color: transparent
}
*,
:after,
:before {
box-sizing: border-box
}
html {
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent
}
body {
font-size: 13px;
font-size: 1.3rem;
font-size: 1.3em;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
line-height: 1.42857143;
color: #303030;
background-color: #fff;
margin: 0
}
p {
margin: 0 0 10px
}
strong {
font-weight: 700
}
img {
border: 0;
vertical-align: middle
}
svg:not(:root) {
overflow: hidden
}
hr {
box-sizing: content-box;
height: 0;
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee
}
ul {
margin-top: 0;
margin-bottom: 10px
}
h1,
h2,
h3,
h5 {
font-weight: 700;
font-family: inherit;
line-height: 1.1;
color: inherit;
margin-top: 1em;
margin-bottom: 1em
}
h1 {
font-size: 26px;
font-size: 2.6rem
}
h2 {
font-size: 22px;
font-size: 2.2rem
}
h3 {
font-size: 18px;
font-size: 1.8rem
}
h5 {
font-size: 13px;
font-size: 1.3rem
}
@media (max-width:599px) {
h1,
h2,
h3 {
font-size: 16px;
font-size: 1.6rem
}
}
.text-center {
text-align: center
}
.container-fluid:after,
.container-fluid:before {
content: " ";
display: table
}
.container-fluid:after {
clear: both
}
.hidden {
display: none!important;
visibility: hidden!important
}
.list-inline {
padding-left: 0;
list-style: none;
margin-left: -5px
}
.list-inline>li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
.img-responsive {
display: block;
max-width: 100%;
height: auto
}
.m-hint .m-link {
font-size: 12px
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
@media (min-width:768px) {
.modal-dialog {
width: 600px;
margin: 30px auto
}
}
.modal {
display: none;
overflow: auto;
overflow-y: hidden;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 4000;
-webkit-overflow-scrolling: touch;
outline: 0;
margin-top: 15%;
bottom: auto
}
.modal .modal-content {
min-height: 100%;
border: 0;
border-radius: 0;
background: #fff
}
.modal .modal-content .modal-header {
padding: 25px 30px 0;
margin: 0 0 15px
}
.modal .modal-content .modal-header .close {
margin-left: auto;
margin-top: -25px;
margin-right: -30px;
width: 40px;
height: 40px;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
float: right;
border: none;
outline: 0;
background-color: transparent;
text-indent: -9999px;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='%23767676'%3E%3Cpath d='M71.334 28.908l-4.242-4.242L48 43.758 28.908 24.666l-4.242 4.242L43.758 48 24.666 67.092l4.242 4.242L48 52.242l19.092 19.092 4.242-4.242L52.242 48l19.092-19.092z'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
background-size: 32px;
display: block
}
.modal .modal-content .modal-body {
position: relative;
padding: 0 30px 20px
}
.modal .modal-dialog {
position: relative;
margin: 10px
}
@media (min-width:768px) {
.modal .modal-dialog {
margin: 70px auto
}
}
@-ms-viewport {
width: device-width
}
.m-card {
background-color: #fff;
padding: 8px
}
.m-card+.m-card {
margin-top: 8px
}
@media only screen and (min-width:768px) {
.m-card {
padding: 16px
}
}
@media only screen and (min-width:992px) {
.m-card {
padding: 24px
}
}
.m-type {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
color: #222;
font-family: Open Sans, sans-serif;
font-size: 14px;
line-height: 21px;
text-size-adjust: 100%
}
.m-link {
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
color: #222;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-size: 14px;
line-height: 21px;
text-decoration: none;
text-size-adjust: 100%
}
.m-link:link {
color: #00a790
}
.m-link:visited {
color: #006456
}
.m-link:visited:hover {
color: #00a790
}
.m-link:visited:active {
color: #2ab9a3
}
.m-link:hover {
color: #54cab6
}
.m-link:active {
color: #7fdcca
}
.m-link--signal:link {
color: #222
}
.m-link--signal:visited {
color: #222
}
.m-link--signal:visited:hover {
color: #54cab6
}
.m-link--signal:visited:active {
color: #7fdcca
}
.m-link--signal:hover {
color: #54cab6
}
.m-link--signal:active {
color: #7fdcca
}
.m-link.is-selected {
cursor: default
}
.m-link.is-selected:active,
.m-link.is-selected:hover,
.m-link.is-selected:link,
.m-link.is-selected:visited,
.m-link.is-selected:visited:active,
.m-link.is-selected:visited:hover {
color: #ff5a00
}
.m-heading {
color: #222;
font-family: Roboto, sans-serif;
font-weight: 500;
line-height: 1.3;
margin: 0 0 16px
}
.m-heading--xs {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px
}
@media only screen and (min-width:544px) {
.m-heading--xs {
font-size: 17px
}
}
.m-breadcrumb {
overflow: hidden;
white-space: nowrap
}
@media only screen and (min-width:992px) {
.m-breadcrumb {
white-space: normal
}
}
.m-breadcrumb__items {
margin-bottom: -16px;
overflow-x: auto;
padding-bottom: 16px
}
@media only screen and (min-width:992px) {
.m-breadcrumb__items {
margin-bottom: 0;
overflow-x: hidden;
padding-bottom: 0
}
}
.m-breadcrumb__item {
display: inline-block;
position: static
}
.m-breadcrumb__item:not(:last-child):after {
content: "-";
margin: 0 8px
}
.m-breadcrumb__link {
display: inline-block;
line-height: 1;
padding: 12px 0
}
@media only screen and (min-width:544px) {
.m-breadcrumb__link {
padding: 8px 0
}
}
html {
box-sizing: border-box
}
*,
:after,
:before {
box-sizing: inherit
}
.m-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-positive: 1;
flex-grow: 1;
margin-left: -16px
}
.m-grid__col {
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 1px;
flex-basis: 1px;
max-width: 100%;
padding-left: 16px
}
.m-grid__col--12 {
width: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
@media only screen and (min-width:48em) {
.m-grid__col--5\@md {
width: 41.66667%;
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
max-width: 41.66667%
}
.m-grid__col--6\@md {
width: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.m-grid__col--7\@md {
width: 58.33333%;
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
max-width: 58.33333%
}
}
.m-price {
white-space: nowrap
}
.m-price--primary {
color: #3a4e58;
font-size: 24px;
font-family: Roboto, sans-serif;
font-weight: 500;
line-height: 1em
}
@media only screen and (min-width:34em) {
.m-price--primary {
font-size: 28px
}
}
.m-price--primary .m-price__fraction {
font-size: .75em;
font-weight: 700
}
.m-hint {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
color: #222;
color: #767676;
font-family: Open Sans, sans-serif;
font-size: 14px;
font-size: 12px;
line-height: 21px;
line-height: 16px;
margin-top: 4px;
text-size-adjust: 100%
}
.m-input {
-moz-appearance: none;
-ms-text-size-adjust: 100%;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
appearance: none;
background-color: #fff;
border: 1px solid #c3c3c3;
border-radius: 2px;
box-sizing: border-box;
color: #222;
font-family: Open Sans, sans-serif;
font-size: 14px;
height: 40px;
line-height: 21px;
margin: 0;
min-width: 0;
outline: 0;
padding: 9.5px 12px;
text-size-adjust: 100%;
width: 100%
}
.m-input::-ms-input-placeholder {
color: #767676
}
.m-input::-webkit-input-placeholder {
color: #767676
}
.m-input:-ms-input-placeholder {
color: #767676
}
.m-input::-ms-clear {
display: none
}
.m-input--number {
-moz-appearance: textfield;
width: 64px
}
.m-input--number::-webkit-inner-spin-button,
.m-input--number::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
.m-input-group {
display: -ms-flexbox;
display: flex;
position: relative
}
.m-input-group>.m-button:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0
}
.m-input-group>.m-button:not(:first-child):not(:last-child) {
border-radius: 0
}
.m-input-group>.m-input:not(:first-child):not(:last-child) {
border-radius: 0
}
.m-input-group .m-input+.m-button {
margin-left: -1px
}
.m-input-group .m-button+.m-input {
border-left: 0
}
.m-input-group .m-button:not(.m-button--primary) {
border: 1px solid #c3c3c3
}
.m-input-group .m-button:disabled {
border-color: #ddd
}
.m-button {
-moz-appearance: none;
-ms-text-size-adjust: 100%;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
appearance: none;
background: #fff;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: #222;
cursor: pointer;
display: inline-block;
font-family: Open Sans, sans-serif;
font-size: 14px;
height: 40px;
line-height: 21px;
line-height: 40px;
margin: 0;
padding: 0 13px;
position: relative;
text-align: center;
text-decoration: none;
text-size-adjust: 100%;
vertical-align: middle;
white-space: nowrap;
width: auto
}
.m-button::-moz-focus-inner {
border-style: none;
padding: 0
}
.m-button:focus,
.m-button:hover {
outline: 0
}
.m-button--primary {
background: #ff5a00;
color: #fff;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
transition: background-color .2s linear
}
.m-button--primary:focus,
.m-button--primary:hover {
background: #ff7b33
}
.m-button--primary:active {
background: #ff9c66
}
.m-button--secondary {
background: 0 0;
color: #00a790;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
transition: color .2s linear
}
.m-button--secondary:focus,
.m-button--secondary:hover {
color: #2ab9a3
}
.m-button--secondary:active {
color: #54cab6
}
.m-button--wide {
width: 100%
}
.m-icon {
box-sizing: border-box;
cursor: inherit;
height: 40px;
overflow: hidden;
text-indent: 100vw;
-ms-transform: scale(1);
transform: scale(1);
vertical-align: top;
width: 40px
}
.m-display-none {
display: none
}
.m-align-text-center {
text-align: center
}
.m-margin-left-8 {
margin-left: 8px
}
.m-margin-top-0 {
margin-top: 0
}
.m-padding-zero {
padding: 0
}
@media only screen and (min-width:544px) {
.m-padding-zero {
padding: 0
}
}
@media only screen and (min-width:768px) {
.m-padding-zero {
padding: 0
}
}
@media only screen and (min-width:992px) {
.m-padding-zero {
padding: 0
}
}
@media only screen and (min-width:1248px) {
.m-padding-zero {
padding: 0
}
}
body {
line-height: 1.25
}
div.main-wrapper {
background: #eceff1
}
.container-fluid {
min-width: 320px;
max-width: 1248px;
margin: 0 auto;
padding-left: 0;
padding-right: 0
}
.m-card+.m-card {
margin-top: 16px
}
.no-wrap {
display: inline-block;
white-space: nowrap
}
.inline {
display: inline-block
}
.offer-card {
position: relative
}
.metrum-heading {
font-weight: 400
}
@media (min-width:768px) {
.metrum-heading {
padding-top: 28px
}
.purchase-box-hint {
margin-top: 8px
}
}
.m-link.is-selected.si-breadcrumb--is-selected {
cursor: pointer
}
#showitem-main .m-color-bg-transparent {
background-color: transparent
}
#offer-management-section.hidden+.m-card {
margin-top: 0
}
.si-purchase__time-left-box {
color: #767676
}
.si-price-box {
margin: 24px 0
}
.si-button__buy-now {
margin: 8px 0
}
.si-title {
margin-bottom: 4px
}
.si-purchase__quantity {
fill: #222;
transition: fill .2s linear
}
.si-purchase__quantity-input {
-ms-flex-align: center;
align-items: center
}
.si-purchase__time-left-box {
padding-top: 24px
}
.si-badges {
margin: 10px 0;
padding-top: 10px;
border-color: #ddd;
border-width: 1px;
border-style: solid none;
display: -ms-flexbox;
display: flex
}
.si-badges.si-badges-desktop {
display: none
}
@media (min-width:480px) {
.si-badges.si-badges-mobile {
display: none
}
.si-badges.si-badges-desktop {
display: block
}
}
.si-badges__column {
padding-left: 8px
}
.si-badges__column:first-child {
padding-left: 0
}
.si-badges__link {
text-align: center
}
.si-badges__valuecol {
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: center;
justify-content: center;
padding-left: 8px
}
.si-badges__labelcol {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: center;
justify-content: center;
padding-left: 8px
}
.si-badges__grid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-left: 8px
}
.m-card.si-breadcrumb-card+.m-card {
margin-top: 0
}
@media (max-width:480px) {
.si-badges__column {
padding-left: 16px;
min-width: 33%
}
.si-badges__column:first-child {
padding-left: 16px
}
.si-badges__column:nth-child(3) {
min-width: 50%
}
.si-badges__column:last-child {
min-width: 33%
}
.breadcrumbs-list {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
}
.si-caption {
font-weight: 400;
color: #767676;
font-family: Open Sans, sans-serif;
font-size: 13px;
line-height: 16px
}
.gallery {
text-align: center
}
.gallery .anim {
transition: margin-left .3s ease-out
}
.gallery .img-main-wrapper {
border-radius: 5px;
overflow: hidden;
padding: 5px 0
}
.img-container {
padding: 0;
border-radius: 5px;
background: #fff;
width: 100%
}
.img-container>div {
margin: 0 auto
}
.img-container .list {
height: 300px;
vertical-align: middle;
text-align: left
}
.img-container ul {
width: 100%;
font-size: 0;
margin: 0;
padding: 0
}
.img-container ul>li {
width: 100%;
padding: 0;
margin: 0;
vertical-align: middle
}
.img-container img {
width: auto;
max-height: 300px;
margin: 15px auto;
opacity: 1;
transition: opacity .3s ease-out
}
@media (max-width:599px) {
.img-container .list {
height: 220px
}
.img-container img {
max-height: 220px
}
}
@media (min-width:768px) {
.gallery-wrapper {
padding-right: 0
}
}
.variants-modal.modal {
height: 100%;
margin: 0;
overflow-y: auto
}
.variants-modal .modal-content {
overflow-y: auto
}
.variants-modal .modal-dialog {
width: auto;
height: auto;
margin: 0
}
.m-modal__close-button {
display: block;
width: 100%;
padding: 1.844rem 0;
border: 0;
letter-spacing: .125rem;
font-weight: 600;
font-size: medium;
white-space: nowrap;
text-transform: uppercase;
transition: background-color .2s linear, color .2s linear;
text-align: center;
color: #00a790;
background-color: #fff;
border-radius: 0;
position: fixed;
bottom: 0;
border-top: 1px solid #ddd
}
@media (max-width:599px) {
.variants-modal .modal-content {
height: 100%
}
.variants-modal .modal-content .modal-body {
padding: 0 0 54px
}
.variants-modal .modal-dialog {
height: 100%
}
}
@media (min-width:768px) {
.m-modal__close-button {
display: none
}
}
@media (min-width:768px) and (max-width:991px) {
.variants-modal .modal-dialog {
margin: 8% 4%
}
}
@media (min-width:768px) {
.variants-modal .modal-dialog {
margin: 8%
}
}
@media (min-width:1280px) {
.variants-modal .modal-dialog {
padding-left: 0;
padding-right: 0;
width: 980px;
margin-left: auto;
margin-right: auto
}
}
.offer-badge {
text-align: center
}
.brandzone-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.brandzone-representation-text {
margin-left: 8px
}
.notify-and-watch {
margin-bottom: 5px;
float: right;
position: relative
}
@media (min-width:768px) {
#showitem-main .notify-and-watch {
position: absolute;
top: 10px;
right: 16px;
padding-left: 0
}
}
@media (min-width:1024px) {
#showitem-main .notify-and-watch {
top: 18px;
right: 16px
}
}