/* Reset styles */
html{color:#555;background:#fafafa;min-height:100%;height:100%;-webkit-text-size-adjust:none;/* image-rendering:auto;image-rendering:optimizeQuality; */-webkit-font-smoothing:antialiased;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}caption,th{text-align:left}ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline:none}input,textarea,select{/* font-size:100% */}legend{color:#000}
/*
*/
/* # Reset styles # */
/* Fonts */
@font-face {
font-family: "Regular";
src: url("fonts/AvenirNextCyr-Regular.eot?#iefix") format("embedded-opentype"),
url("fonts/AvenirNextCyr-Regular.otf") format("opentype"),
url("fonts/AvenirNextCyr-Regular.woff") format("woff"),
url("fonts/AvenirNextCyr-Regular.ttf") format("truetype"),
url("fonts/AvenirNextCyr-Regular.svg#AvenirNextCyr-Regular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Medium";
src: url("fonts/AvenirNextCyr-Medium.eot?#iefix") format("embedded-opentype"),
url("fonts/AvenirNextCyr-Medium.otf") format("opentype"),
url("fonts/AvenirNextCyr-Medium.woff") format("woff"),
url("fonts/AvenirNextCyr-Medium.ttf") format("truetype"),
url("fonts/AvenirNextCyr-Medium.svg#AvenirNextCyr-Medium") format("svg");
font-weight: normal;
font-style: normal;
}
/* # Fonts # */
/* Rouble */
@font-face {
font-family: "ALS Rubl";
font-style: normal;
font-weight: normal;
src: local("fonts/ALS Rubl"), url("fonts/rouble.woff") format("woff");
}
.rur {
font-family: "ALS Rubl";
font-size: 90%;
font-style: normal;
text-transform: none !important;
}
.button .rur {
font-size: 100%;
}
/* # Rouble # */
/* Palette
Background #fafafa
Black #000
Dark #222
Text #555
Green/Links #49a79d
# Palette # */
/* Common styles */
a {
color: #49a79d;
text-decoration: none;
}
a[href^="tel:"] {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
p {
margin-bottom: 1.6em;
}
strong, b {
font-family: "Medium";
font-weight: normal;
}
em, i {
font-style: italic;
}
sup {
font-size: 11px;
}
h1 {
color: #222;
font-size: 30px;
font-family: "Medium";
text-align: center;
}
h2 {
color: #222;
font-size: 18px;
font-family: "Medium";
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
margin: 40px 0;
}
h3 {
color: #222;
font-size: 25px;
font-weight: normal;
font-family: "Regular";
letter-spacing: 0;
text-align: left;
margin: 0 0 20px;
}
h4 {
color: #222;
font-size: 14px;
font-weight: normal;
font-family: "Medium";
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
margin: 0 0 20px;
}
img {
/*
image-rendering: auto;
image-rendering: optimizeQuality;
*/
}
option:checked, option:hover {
background-color: #49a79d;
}
hr {
display: block;
float: none;
border: none;
background: #cfcfcf;
height: 1px;
margin: 30px 0;
}
.body ul {
margin-bottom: 1.6em;
}
.body ul li {
list-style: disc outside;
margin-left: 1.5em;
}
/* # Common styles # */
/* Common classes */
.h { display: none; }
.l { float: left !important; }
.r { float: right !important; }
.al { text-align: left !important; }
.ac { text-align: center !important; }
.ar { text-align: right !important; }
.oh { overflow: hidden; }
.pr { position: relative; }
.pa { position: absolute; }
.clearfix:before, .clearfix:after { display: block; clear: both; content: ""; border-top: 1px transparent solid; width: 1px; height: 1px; }
.nm { margin: 0 !important; }
.mt60 { margin-top: 60px !important; }
.mb60 { margin-bottom: 60px !important; }
.mt40 { margin-top: 40px !important; }
.mb40 { margin-bottom: 40px !important; }
.mt30 { margin-top: 30px !important; }
.mr30 { margin-right: 30px !important; }
.mb30 { margin-bottom: 30px !important; }
.ml30 { margin-left: 30px !important; }
.mt20 { margin-top: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mb20 { margin-bottom: 20px !important; }
.ml20 { margin-left: 20px !important; }
.mt10 { margin-top: 10px !important; }
.mr10 { margin-right: 10px !important; }
.mb10 { margin-bottom: 10px !important; }
.ml10 { margin-left: 10px !important; }
.mt0 { margin-top: 0px !important; }
.mr0 { margin-right: 0px !important; }
.mb0 { margin-bottom: 0px !important; }
.ml0 { margin-left: 0px !important; }
div[id*='wait_'] { display: none; }
/* # Common classes # */
/* Layout */
body {
font-family: "Regular", sans-serif;
font-size: 15px;
line-height: 1.4;
min-width: 1180px;
min-height: 640px;
height: 100%;
}
.wrapper {
margin: 0 auto;
min-width: 1000px;
max-width: 1200px;
}
@media screen and (max-width: 1260px) {
.wrapper {
padding: 0 30px;
}
}
/* Bar */
.bar {
color: #fff;
background: #49a79d;
height: 58px;
line-height: 58px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.bar .rur {
font-size: 100%;
}
.bar-close {
cursor: pointer;
background: url(images/close/small-white.png) no-repeat 0 0;
background-size: 100%;
width: 15px;
height: 15px;
position: absolute;
right: 0;
top: 50%;
margin: -8px 0 0;
}
/* # Bar # */
/* Header */
.header {
background: #fff;
}
.header .wrapper {
position: relative;
height: 206px;
}
.header-logo {
width: 150px;
height: 90px;
position: absolute;
left: 50%;
top: 28px;
margin: 0 0 0 -70px;
z-index: 10;
}
/* Header - Left */
.header-left {
position: absolute;
left: 0;
top: 40px;
}
.header-call {
color: #6d737c;
}
.header-call strong {
color: #222;
}
.header-call-title, .footer-call-title {
cursor: pointer;
display: inline-block;
background: url(images/sprite.png) no-repeat right -2px;
background-size: 375px 1056px;
padding-right: 24px;
}
.header-callback {
display: inline-block;
margin: 4px 0 0;
text-decoration: none;
border-bottom: 1px #49a79d dotted;
}
.header-callback:hover {
border-bottom: none;
}
/* # Header - Left # */
/* Header - Right */
.header-right {
position: absolute;
right: 0;
top: 40px;
}
.header-search, .header-browsed, .header-basket {
display: block;
float: left;
width: 18px;
height: 18px;
background: url(images/sprite.png) no-repeat 0 0;
background-size: 375px 1056px;
}
.header-search {
cursor: pointer;
background-position: 0 -51px;
margin: 0 20px 0 0;
padding-bottom: 2px;
overflow: hidden;
white-space: nowrap;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.header-search-input {
display: none;
border: none;
background: none;
font-size: 14px;
letter-spacing: 0;
vertical-align: top;
width: 154px;
margin: 0 0 0 20px;
}
.header-search-close {
cursor: pointer;
display: none;
background: url(images/sprite.png) no-repeat 6px -270px;
background-size: 375px 1056px;
width: 20px;
height: 20px;
}
.header-search.active {
width: 200px;
border-bottom: 1px #d7d7d7 solid;
}
.header-search.active .header-search-input, .header-search.active .header-search-close {
display: inline-block;
}
.header-browsed {
background-position: 0 -105px;
width: 28px;
margin: 0 20px 0 0;
}
.header-basket {
background-position: 0 -160px;
width: 20px;
margin: 0 50px 0 0;
position: relative;
}
.header-basket span {
color: #fff;
display: block;
background: #49a79d;
border-radius: 20px;
font-size: 10px;
font-family: "Medium";
line-height: 1;
padding: 4px 5px 2px;
position: absolute;
top: -8px;
right: -8px;
}
.header-login {
color: #000;
font-size: 14px;
}
/* # Header - Right # */
/* Header - Menu */
.header-menu-wrapper {
border-top: 1px #ececec solid;
position: absolute;
left: 0;
bottom: 0;
z-index: 20;
}
.header-menu {
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.header-menu-item--root {
white-space: nowrap;
padding: 0;
line-height: 60px;
}
.header-menu-item--root a {
display: inline-block;
color: #2c2b35;
font-family: "Medium";
letter-spacing: 0.1em;
text-decoration: none;
line-height: 56px;
padding-top: 2px;
border-bottom: 2px transparent solid;
}
.header-menu-item--root:hover a, .header-menu-item--root.hover a {
border-bottom: 2px #6bc7bd solid;
}
.header-menu-spacer {
width: 1000px;
}
.header-menu-spacer:first-child {
width: 0;
}
/* Header - Menu - Tree */
.header-menu-trees-wrapper {
display: none;
position: absolute;
top: 60px;
left: 0px;
overflow: hidden;
background: #fafafa;
width: 100%;
padding: 0 0 40px;
z-index: 20;
box-shadow: 0px 15px 15px 5px rgba(0, 0, 0, 0.25);
}
.header-menu-item--root {
position: relative;
}
.header-menu-item--root:hover .header-menu-trees-wrapper, .header-menu-item--root.hover .header-menu-trees-wrapper, .header-menu-item--root:hover .header-menu-sub {
display: block;
}
.header-menu-tree-col {
float: left;
width: 25%;
padding-right: 2%;
box-sizing: border-box;
}
.header-menu-tree-col:last-child {
padding-right: 0;
}
.header-menu-tree-item {
font-size: 15px;
line-height: 30px;
}
.header-menu-tree-item.root {
float: left;
width: 25%;
margin: 40px 0 0;
}
.header-menu-tree-col .header-menu-tree-item.root {
width: 100%;
min-height: 160px;
}
.header-menu-tree a:hover {
color: #49a79d;
}
.header-menu-tree-link.root {
color: #222;
font-size: 12px;
font-family: "Medium";
letter-spacing: 0.15em;
text-transform: uppercase;
}
.header-menu-tree-link.child {
color: #555;
font-family: "Regular";
letter-spacing: 0;
text-transform: none;
}
.header-menu-tree-item a {
line-height: 30px;
border: none !important;
}
.header-menu-sub {
background: #fafafa;
display: none;
position: absolute;
top: 60px;
padding: 6px 20px;
margin: 0 0 0 -20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
}
.header-menu-sub .header-menu-item--child {
line-height: 34px;
}
.header-menu-sub .header-menu-item--child a {
color: #555555;
line-height: 34px;
font-size: 15px;
font-family: "Regular";
letter-spacing: 0;
text-transform: none;
border: none !important;
}
/* # Header - Menu # */
@media screen and (max-width: 1260px) {
.header-left {
left: 30px;
}
.header-right {
right: 30px;
}
.header-menu-wrapper {
margin: 0 30px;
}
}
/* # Header # */
/* Footer */
.footer {
background: #fff url(images/line.png) repeat-x left bottom;
background-size: 30px 15px;
padding: 60px 0;
}
.footer .wrapper {
position: relative;
}
.footer-menus-wrapper {
float: left;
width: 65%;
}
.footer-menu-col {
float: left;
width: 33%;
}
.footer-menu {
float: left;
display: inline-block;
width: 33%;
margin: 0 0 30px;
}
.footer-menu-col .footer-menu {
width: 100%;
}
.footer-menu-item a {
color: #555;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
line-height: 30px;
}
.footer-menu-item.title {
margin: 0 0 6px;
}
.footer-menu-item.title a {
color: #222;
font-size: 12px;
font-family: "Medium";
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
}
.footer-info {
float: right;
width: 25%;
}
.footer-info-copy {
color: #222;
font-size: 12px;
font-family: "Medium";
text-transform: uppercase;
letter-spacing: 0.15em;
margin: 0 0 30px;
}
.footer-info-socials {
overflow: hidden;
margin: 0 0 30px;
}
.footer-info-socials-link {
display: inline-block;
vertical-align: middle;
background: url(images/socials.png) no-repeat 0 0;
background-size: 175px 104px;
width: 35px;
height: 35px;
margin: 0 8px 0 0;
}
.footer-info-socials-link.ig { background-position: -1px 0; }
.footer-info-socials-link.ig:hover { background-position: 1px -70px; }
.footer-info-socials-link.pi { background-position: -70px 0; }
.footer-info-socials-link.pi:hover { background-position: -70px -70px; }
.footer-info-socials-link.fb { background-position: -140px 0; }
.footer-info-socials-link.fb:hover { background-position: -140px -70px; }
.footer-call {
color: #6d737c;
}
.footer-call strong {
color: #222;
}
.footer-callback {
display: inline-block;
margin: 4px 0 0;
text-decoration: none;
border-bottom: 1px #49a79d dotted;
}
.footer-callback:hover {
border-bottom: 1px transparent dotted;
}
.footer-info-address {
color: #555;
font-size: 15px;
line-height: 23px;
margin: 30px 0 0;
}
.footer-sign {
clear: both;
color: #777;
font-size: 11px;
}
/* # Footer # */
/* Columns */
.cols {
overflow: hidden;
}
.col {
float: left;
}
.col img, .col iframe {
max-width: 100%;
height: auto;
}
/* 2 Columns */
.col--2 {
width: 49%;
margin: 0 2% 0 0;
}
.col--2:last-child, .col--2:nth-child(2), .col--2:nth-child(2n), .col--2.last-in-row {
margin-right: 0;
}
.col--2:nth-child(2n+1), .col--2.row-first {
clear: left;
}
/* 3 Columns */
.col--3 {
width: 32%;
margin: 0 2% 0 0;
}
.col--3:last-child, .col--3:nth-child(3), .col--3:nth-child(3n), .col--3.last-in-row {
margin-right: 0;
}
.col--3:nth-child(3n+1), .col--3.row-first {
clear: left;
}
/* 4 Columns */
.col--4 {
width: 22%;
margin: 0 4% 0 0;
}
.col--4:last-child, .col--4:nth-child(4), .col--4:nth-child(4n), .col--4.last-in-row {
margin-right: 0 !important;
}
.col--4:nth-child(4n+1), .col--4.row-first {
clear: left;
}
/* 5 Columns */
.col--5 {
width: 18.4%;
margin: 0 2% 0 0;
}
.col--5:last-child, .col--5:nth-child(5), .col--5:nth-child(5n), .col--5.last-in-row {
margin-right: 0 !important;
}
.col--5:nth-child(5n+1), .col--5.row-first {
clear: left;
}
/* 6 Columns */
.col--6 {
width: 15%;
margin: 0 2% 0 0;
}
.col--6:last-child, .col--6:nth-child(6), .col--6:nth-child(6n), .col--6.last-in-row {
margin-right: 0 !important;
}
.col--6:nth-child(6n+1), .col--6.row-first {
clear: left;
}
/* # Columns # */
/* # Layout # */
/* Common blocks & elements */
/* Icons */
.icons, .icons-sub:after, .icons-sub:before, .icons-after:after, .icons-before:before {
background-image: url(images/icons.png) !important;
background-repeat: no-repeat !important;
background-size: 32px 317px !important;
background-position: 0 0;
}
.sprite, .sprite-sub:after, .sprite-sub:before, .sprite-after:after, .sprite-before:before {
background-image: url(images/sprite.png) !important;
background-repeat: no-repeat !important;
background-size: 375px 1056px !important;
background-position: 0 0;
}
/* Common */
.icons.common, .sprite.common {
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
}
.icons.common.left, .sprite.common.left {
margin: -4px 8px 0 0;
}
.icons.common.right, .sprite.common.right {
margin: -4px 0 0 8px;
}
.icons.common.delivery {
background-position: 0 -48px;
width: 34px;
height: 20px;
}
.icons.common.individual {
background-position: 0 -100px;
width: 24px;
height: 20px;
}
.icons.common.zoom {
background-position: 0 -298px;
height: 20px;
width: 20px;
}
.icons.common.close {
background-image: url(images/close/small.png) !important;
background-size: 15px 15px !important;
background-position: 0 0 !important;
width: 15px !important;
height: 15px !important;
top: 26px;
right: 26px;
}
.sprite.common.cart, .sprite.common.basket {
background-image: url(images/icons.png) !important;
background-repeat: no-repeat !important;
background-size: 32px 317px !important;
background-position: 0 -200px;
/* Black
background-position: 0 -160px;
*/
width: 20px;
height: 18px;
}
.sprite.common.link {
background-position: 0 -216px;
width: 20px;
height: 20px;
}
/* # Icons # */
/* Breadcrumbs */
.breadcrumbs {
text-align: center;
margin: 30px 30px 40px;
}
.page-title + .breadcrumbs {
margin-top: 10px;
}
.breadcrumbs-link-wrapper, .breadcrumbs-link, .breadcrumbs-item {
display: inline-block;
color: #afafaf;
text-transform: lowercase;
}
/* # Breadcrumbs # */
/* Photo Flips */
.photo-flip-item {
/* transition: all 0.2s linear; */
}
.photo-flip-line {
width: auto;
margin: 2px auto 0;
border-left: 1px #fff solid;
}
.photo-flip-line-item {
background: #dcdcdc;
border-right: 1px #fff solid;
height: 3px;
width: 30px;
font-size: 0;
padding: 0;
margin: 0;
}
.photo-flip-line-item.active {
background: #49a79d;
}
/* # Photo Flips # */
/* Buttons */
.button {
cursor: pointer;
display: inline-block;
/* text-transform: uppercase; */
text-decoration: none;
white-space: nowrap;
width: auto;
height: 34px;
line-height: 34px;
font-size: 14px;
text-align: center;
font-family: "Medium";
/* letter-spacing: 0.15em; */
padding: 0 16px;
border-radius: 0;
-webkit-appearance: none;
}
.button--transparent {
color: #49a79d;
border: 1px #49a79d solid;
background: none;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.button--transparent:hover {
color: #fff;
background: #49a79d;
}
.button--green {
color: #fff;
background: #49a79d;
border: 1px #49a79d solid;
}
.button--gray {
color: #222;
border: 1px #222 solid;
}
.button--gray:hover, .button--gray.active {
color: #eee;
background: #222;
}
input.button {
height: 36px;
}
.button.uc {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.button--transparent.button--disabled, .button--transparent.button--disabled:hover {
cursor: default;
color: #888;
border: 1px #888 solid;
background: none;
}
/* # Buttons # */
/* Forms */
.form-label {
display: block;
padding: 0 10px;
margin: 0 0 14px;
}
.form-label--added {
margin-top: -10px;
}
.form-label span {
display: block;
color: #777;
font-size: 14px;
line-height: 1.2;
margin: 0 0 4px -10px;
}
.form-label-nopadding {
padding: 0;
}
.form-label-nopadding span {
margin-left: 0;
}
.form-label span span, .form-label em span {
display: inline;
color: #49a79d;
margin: 0;
}
.form-label span i.hint, i.hint {
cursor: pointer;
display: inline-block;
color: #fff;
background: #49a79d;
width: 14px;
height: 14px;
margin: -4px 0 0 2px;
font-size: 11px;
line-height: 14px;
text-align: center;
font-style: normal;
vertical-align: middle;
border-radius: 10px;
}
.form-input {
display: block;
background: #fff;
border: 1px #d7d7d7 solid;
height: 24px;
padding: 4px 9px;
-webkit-appearance: none;
border-radius: 0;
}
.form-label .form-input {
width: 100%;
margin-left: -10px;
}
.form-textarea {
display: block;
color: #777;
background: #fff;
border: 1px #d7d7d7 solid;
height: 100px;
padding: 20px;
resize: vertical;
-webkit-appearance: none;
border-radius: 0;
}
.form-label .form-textarea {
width: 96%;
margin-left: -10px;
}
.form-select {
display: block;
background: #fff url(images/sprite.png) no-repeat right 4px;
background-size: 375px 1056px;
border: 1px #d7d7d7 solid;
width: 100%;
height: 34px;
padding: 6px 30px 6px 9px;
-webkit-appearance: none;
border-radius: 0;
}
.form-file {
cursor: pointer;
display: block;
border: 1px #49a79d dotted;
height: 25px;
width: 100%;
padding: 5px 9px 2px;
margin: 0 0 0 -10px;
position: relative;
font-style: normal;
}
.form-file input {
display: none;
}
.form-file .text {
display: inline-block;
position: relative;
z-index: 20;
}
.form-file .delete {
cursor: pointer;
display: inline-block;
float: right;
line-height: 1.6;
text-decoration: underline;
position: relative;
z-index: 20;
}
.form-file .delete:hover {
text-decoration: none;
}
.form-file .progress {
background: rgba(51, 192, 172, 0.2);
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 10;
height: 100%;
width: 0;
}
.form-file i {
display: inline-block;
background: url(images/attach.png) no-repeat 0 0;
background-size: 10px 20px;
width: 10px;
height: 20px;
margin: 0 0 0 6px;
vertical-align: bottom;
position: relative;
z-index: 20;
}
.error span {
color: #000;
}
.error .form-input, .error .form-textarea, .error .form-select {
border-color: #000;
}
.form-error {
position: absolute;
z-index: 9000;
color: #fff;
background: #49a79d;
padding: 6px 10px 7px;
max-width: 240px;
}
.form-error--left:after {
left: 100%;
top: 11px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
/* pointer-events: none; */
border-color: rgba(73, 167, 157, 0);
border-left-color: #49a79d;
border-width: 6px;
margin-top: 0;
}
.form-error--top:after {
top: 100%;
left: 10px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
/* pointer-events: none; */
border-color: rgba(73, 167, 157, 0);
border-top-color: #49a79d;
border-width: 6px;
margin-left: 0;
}
.form-error.white {
color: #222;
background: #fff;
box-shadow: 0 0 10px #ccc;
}
.form-error.white:after {
display: none;
}
.form-input:focus, .form-input.focus, .form-textarea:focus, .form-textarea.focus, .form-select:focus, .form-select.focus {
border-color: #49a79d;
}
[type="checkbox"]:not(:checked), [type="checkbox"]:checked, [type="radio"]:not(:checked), [type="radio"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + span:before, [type="checkbox"]:checked + span:before, [type="radio"]:not(:checked) + span:before, [type="radio"]:checked + span:before {
cursor: pointer;
content: '';
position: absolute;
left:0;
top: 2px;
width: 16px;
height: 16px;
background: url(images/checkboxes.png) no-repeat 0 0;
background-size: 48px 16px;
}
[type="radio"]:not(:checked) + span:before, [type="radio"]:checked + span:before {
background-image: url(images/radios.png);
}
[type="checkbox"]:checked + span:before, [type="radio"]:checked + span:before {
background-position: -32px 0;
}
.form-checkbox-wrapper, .form-radio-wrapper {
display: block;
margin: 0 0 14px;
}
.form-checkbox, .form-radio {
display: inline-block;
vertical-align: baseline;
margin: 0 10px 0 0;
}
.form-checkbox-label, .form-radio-label {
display: inline-block;
position: relative;
padding-left: 30px;
}
.form-radio-variant {
display: inline-block;
vertical-align: baseline;
margin: 0 40px 0 0;
}
/* # Forms # */
/* Slider */
.noUi-connect, .noUi-background {
background: none;
box-shadow: none;
border: none;
}
.noUi-target.noUi-background {
background: #fff url(/bitrix/templates/simmetrium/images/line.png) repeat-x left bottom;
background-size: 30px 15px;
box-shadow: none;
border: none;
}
.noUi-handle {
border: none;
border-radius: 0;
background: #49a79d;
position: relative;
width: 14px !important;
height: 20px !important;
margin: 8px 0 0 10px;
box-shadow: none;
left: -34px !important;
}
.noUi-handle-upper {
left: 0 !important;
}
.noUi-handle:before {
display: none;
content: none;
}
.noUi-handle:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
/* pointer-events: none; */
border-color: rgba(73, 167, 157, 0);
border-left-color: #49a79d;
border-width: 10px;
margin-top: -10px;
background: none;
}
.noUi-handle-upper:after {
left: auto;
border-left-color: transparent;
right: 100%;
border-right-color: #49a79d;
}
.noUi-tooltip {
position: absolute;
top: 24px;
right: 0;
left: auto;
font-size: 14px;
}
.noUi-handle-upper .noUi-tooltip {
left: 0;
right: auto;
}
/* # Slider # */
/* Sections scroller */
.section {
overflow: hidden;
}
.scroller {
color: #fff;
background: transparent;
position: fixed;
right: 0;
top: 30%;
width: 50px;
height: auto;
text-align: center;
z-index: 50;
}
.scroller-prev, .scroller-next {
background: #222;
cursor: pointer;
padding: 10px 0;
}
.scroller-prev {
padding-top: 16px;
}
.scroller-next {
padding-bottom: 12px;
}
.scroller-count {
background: #222 url(images/scroller-line.png) no-repeat center center;
background-size: 17px 27px;
padding: 10px;
cursor: default;
}
.scroller-count div {
font-size: 15px;
text-align: right;
text-indent: -4px;
}
.scroller-count div:first-child {
font-size: 20px;
text-align: left;
text-indent: 4px;
}
/* Iconic */
.scroller-list {
}
.scroller-item {
background: #222;
font-family: "Medium";
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
}
.scroller-item--space {
background: transparent;
width: 50px;
height: 10px;
}
.scroller-item em {
font-style: normal;
}
.scroller-item strong {
color: #fff;
background: #49a79d;
min-width: 14px;
height: 22px;
line-height: 22px;
font-size: 12px;
padding: 0 4px;
margin: 0;
position: absolute;
right: 4px;
top: 6px;
border-radius: 20px;
letter-spacing: 0;
}
.scroller-icon {
background: url(images/scroller.png) no-repeat 0 0;
background-size: 100px 300px;
display: block;
width: 50px;
height: 50px;
}
.scroller-icon--info {
background-position: 0 0;
}
.scroller-item.active .scroller-icon--info {
background-position: -50px 0;
}
.scroller-icon--pricelist {
background-position: 0 -50px;
}
.scroller-item.active .scroller-icon--pricelist {
background-position: -50px -50px;
}
.scroller-icon--gallery {
background-position: 0 -100px;
}
.scroller-item.active .scroller-icon--gallery {
background-position: -50px -100px;
}
.scroller-icon--up {
background: url(images/scroller-up.png) no-repeat 0 -50px;
background-size: 50px 100px;
}
.scroller-item.active .scroller-icon--up {
background-position: 0 0;
}
.scroller-icon--basket {
background-position: 0 -250px;
}
.scroller-item:hover .scroller-icon--basket {
background-position: -50px -250px;
}
.scroller-item span {
display: none;
}
.scroller-item:hover span {
display: block;
position: absolute;
right: 50px;
top: 0;
color: #fff;
background: #3c3c3c;
white-space: nowrap;
line-height: 50px;
font-size: 12px;
text-transform: uppercase;
height: 50px;
padding: 0 10px;
}
.scroller-item:hover .scroller-icon {
background-color: #474747;
}
/* # Sections scroller # */
/* Swiper */
.swiper-button-prev {
background: url(images/sprite.png) no-repeat 0 0;
background-size: 375px 1056px;
width: 41px;
height: 42px;
opacity: 0.5;
left: 40px;
}
.swiper-button-next {
background: url(images/sprite.png) no-repeat 0 0;
background-size: 375px 1056px;
width: 41px;
height: 42px;
opacity: 0.5;
right: 40px;
}
.swiper-pagination {
text-align: center;
height: 10px !important;
bottom: 40px !important;
}
.swiper-pagination .swiper-pagination-bullet {
display: inline-block;
border: 1px #b6b6b6 solid;
background: none;
opacity: 1;
width: 6px;
height: 6px;
margin: 1px 7px 0 !important;
vertical-align: top;
}
.swiper-pagination .swiper-pagination-bullet-active {
border: 1px #b6b6b6 solid;
background: #b6b6b6;
width: 8px;
height: 8px;
margin-top: 0px !important;
}
/* # Swiper # */
/* Banners */
.banners-wrapper {
width: 100%;
height: 620px;
margin: 0 0 40px;
}
.banners-button--prev, .product-image-button--prev {
background-position: 0 -861px;
}
.banners-button--next, .product-image-button--next {
background-position: 0 -940px;
}
.banners-pagination {
text-align: center;
height: 10px !important;
bottom: 40px !important;
}
.banners-pagination .swiper-pagination-bullet {
border: 1px #ccc solid;
}
.banners-pagination .swiper-pagination-bullet-active {
border: 1px #ccc solid;
background: #ccc;
}
.banners-item {
color: #fff;
width: 100%;
height: 620px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
overflow: hidden;
}
.banners-item-name {
padding: 0 100px;
margin: 300px 0 0;
font-size: 30px;
font-family: "Regular";
line-height: 1.2;
letter-spacing: 0.2em;
text-transform: uppercase;
text-align: center;
}
.banners-item-text {
padding: 0 100px;
margin: 20px 0 0;
text-align: center;
font-weight: 100;
}
.banners-item-button-wrapper {
position: absolute;
left: 0;
bottom: 100px;
width: 100%;
}
/* # Banners # */
/* Hits */
.hits-wrapper {
background: #f2f2f2;
}
.hits {
background: #f2f2f2;
width: 100%;
}
.hits-button--prev {
background-position: 0 -703px;
}
.hits-button--next {
background-position: 0 -782px;
}
.hits-pagination {
text-align: center;
height: 10px !important;
bottom: 40px !important;
}
.hits-pagination .swiper-pagination-bullet {
border: 1px #b6b6b6 solid;
}
.hits-pagination .swiper-pagination-bullet-active {
border: 1px #b6b6b6 solid;
background: #b6b6b6;
}
.hits-item-inner {
margin: 140px 10% 90px;
overflow: hidden;
}
.hits-item-image {
float: left;
width: 48%;
height: auto;
}
.hits-item-info {
float: right;
width: 48%;
}
.hits-item-name {
color: #222;
font-size: 25px;
font-family: "Regular";
line-height: 48px;
margin: 20px 0 0;
}
.hits-item-text {
margin: 6px 0 0;
}
.hits-item-price {
color: #222;
font-size: 25px;
margin: 14px 0 0;
}
.hits-item-button {
display: block;
margin: 20px 0 0;
}
/* # Hits # */
/* Gallery */
.gallery {
overflow: hidden;
}
.gallery-image {
float: left;
display: block;
cursor: pointer;
background-position: center center;
background-size: cover;
position: relative;
}
.gallery-image span {
display: block;
opacity: 0;
width: 43px;
height: 44px;
position: absolute;
top: 50%;
left: 50%;
margin: -22px 0 0 -22px;
padding: 0 0 0 1px;
border-radius: 22px;
background: #49a79d;
color: #fff;
font-size: 40px;
line-height: 42px;
text-align: center;
-webkit-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.gallery-image:hover span {
opacity: 1;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* # Gallery # */
/* Lightbox */
.lightbox {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.lightbox-overlay {
background: #fff;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
opacity: 1;
}
.lightbox-content {
background: none;
top: 50%;
margin-top: -270px;
padding: 0 10px;
position: relative;
z-index: 20;
}
.lightbox-close {
cursor: pointer;
background-position: 5px -140px;
position: fixed;
top: 20px;
right: 20px;
height: 20px;
width: 20px;
z-index: 20;
}
.lightbox-swiper {
padding: 40px 100px 50px;
}
.lightbox-swiper-pagination {
bottom: 20px !important;
}
.lightbox-swiper-button--prev {
background-position: 0 -702px;
left: 40px;
margin-top: -50px;
}
.lightbox-swiper-button--next {
background-position: 0 -782px;
right: 40px;
margin-top: -50px;
}
.lightbox-swiper-slide {
width: 100%;
height: 500px;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
-webkit-transition: opacity 0.25s;
-ms-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
opacity: 1;
}
.lightbox-swiper-slide.swiper-slide-prev, .lightbox-swiper-slide.swiper-slide-next {
opacity: 0;
}
.lightbox-swiper-slide-title {
position: absolute;
top: -40px;
left: 5%;
width: 90%;
height: 20px;
color: #b6b6b6;
font-size: 15px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
/* # Lightbox # */
/* Fancybox (images) */
div.fancybox-overlay.fancybox-images {
background: #fff !important;
}
div.fancybox-opened.fancybox-images .fancybox-skin {
box-shadow: none !important;
}
#fancybox-thumbs.bottom {
bottom: 0 !important;
padding-bottom: 20px;
overflow-x: scroll;
}
#fancybox-thumbs ul {
left: 0 !important;
}
#fancybox-thumbs ul li {
margin: 0 10px;
opacity: 1 !important;
}
#fancybox-thumbs ul li a {
background: none;
border-width: 2px;
border-color: #e0e0e0 !important;
}
#fancybox-thumbs ul li.active a {
border-color: #6bc7bd !important;
}
#fancybox-thumbs ul li a img {
max-height: 100% !important;
/* width: 100% !important; */
width: auto !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
margin: auto;
}
#fancybox-thumbs.vertical ul li a img {
max-height: 100% !important;
width: auto !important;
}
div.fancybox-images a.fancybox-close {
position: fixed !important;
background-image: url(images/close/big.png) !important;
background-size: 21px 21px !important;
background-position: 0 0 !important;
width: 21px !important;
height: 21px !important;
top: 20px;
right: 15px;
}
.fancybox-images .fancybox-prev {
left: -150px;
}
.fancybox-images .fancybox-next {
right: -150px;
}
.fancybox-images .fancybox-prev span, .fancybox-next span {
width: 41px;
height: 42px;
opacity: 0.5;
visibility: visible;
}
.fancybox-images .fancybox-prev span {
left: 40px;
background-position: 0 -703px;
}
.fancybox-images .fancybox-next span {
right: 40px;
background-position: 0 -782px;
}
/* # Fancybox (images) # */
/* Openers */
.opener-content {
overflow: hidden;
}
.opener {
color: #49a79d;
cursor: pointer;
}
/* # Openers # */
/* Counters */
.counter {
display: inline-block;
color: #222;
border: 1px #d7d7d7 solid;
border-radius: 0;
min-width: 30px;
height: 36px;
line-height: 36px;
text-align: center;
font-size: 14px;
padding: 0 16px 0 6px;
vertical-align: top;
-webkit-appearance: none;
}
/* # Counters # */
/* Colors */
.colors-title, .seria-pricelist-item-colors-title, .product--preview .seria-tech-title h2, .product-main .seria-tech-title h2 {
color: #222;
font-size: 12px;
font-family: "Medium";
text-transform: uppercase;
letter-spacing: 2px;
}
.colors-list {
font-size: 0;
text-align: left;
margin: 10px 0 0;
}
.colors-item {
cursor: pointer;
display: inline-block;
width: 50px;
height: 24px;
margin: 0 6px 6px 0;
border: 2px #ddd solid;
border-radius: 2px;
background-position: center center;
background-size: cover;
position: relative;
vertical-align: top;
}
.colors-item.active {
cursor: default;
border-color: #49a79d;
}
.colors-item.active:after {
content: " ";
display: none;
width: 24px;
height: 24px;
background-position: 0 0;
position: absolute;
left: 50%;
top: 50%;
margin: -12px 0 0 -12px;
}
.colors-item:hover {
height: 30px;
margin-top: -3px;
margin-bottom: 3px;
border-color: #49a79d;
border-radius: 2px;
z-index: 20;
}
.colors-item:hover .colors-item-preview {
display: block;
}
.colors-name {
color: #222;
margin: 6px 0 0;
}
.colors-item-preview {
display: none;
background: #fff;
border-radius: 0;
position: absolute;
left: 50%;
top: 30px;
width: 150px;
height: auto;
padding: 30px 30px 20px;
margin: 0 0 0 -105px;
box-shadow: 0 0 30px #ccc;
}
.colors-item-preview:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
/* pointer-events: none; */
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.colors-item-preview-image {
width: 150px;
height: 150px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0 0 10px;
}
.colors-item-preview-name {
font-size: 15px;
text-align: center;
}
.colors-item-wait {
display: none;
}
.catalog-item .colors-item:hover .colors-item-wait, .pricelist-item .colors-item:hover .colors-item-wait {
display: block;
position: absolute;
color: #fff;
background: #49a79d;
font-size: 12px;
top: -30px;
left: 50%;
transform: translateX(-50%);
padding: 2px 4px;
white-space: nowrap;
}
.colors-item-wait:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(73, 167, 157, 0);
border-top-color: #49a79d;
border-width: 6px;
margin-left: -6px;
}
/* # Colors # */
/* Fancybox */
.fancybox-overlay {
background: rgba(0, 0, 0, 0.3) !important;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
}
.fancybox-inner {
overflow: hidden !important;
overflow-y: auto !important;
}
.fancybox-skin {
background: #fff;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.fancybox-close {
width: 20px;
height: 20px;
top: 10px;
right: 5px;
}
/* # Fancybox # */
/* Cropped */
.cropped-button-wrapper {
margin: 0 0 30px;
text-align: center;
}
/* # Cropped # */
/* Image Points */
.imgp {
position: absolute;
top: 0;
left: 0;
z-index: 11;
}
.imgp.active {
width: 100%;
height: 100%;
}
.imgp-switcher {
float: left;
cursor: pointer;
margin-right: 20px;
}
.imgp-switcher span.on, .imgp-switcher span.off {
background: #fff;
border-radius: 20px;
position: relative;
z-index: 2;
}
.imgp-switcher span.on {
margin-right: -20px;
padding: 0 16px 0 10px;
}
.imgp-switcher span.off {
background: #f2f2f2;
margin-left: -20px;
padding: 0 10px 0 16px;
}
.imgp-switcher.active span.off {
background: #fff;
}
.imgp-switcher.active span.on {
background: #f2f2f2;
}
.imgp-switcher span.m, .imgp-switcher span.p {
display: inline-block;
color: #fff;
background: #31b0a2;
font-family: "Medium";
border-radius: 20px;
border: 2px #f2f2f2 solid;
padding: 0 2px;
margin: 0 4px;
line-height: 14px;
width: 10px;
height: 14px;
text-align: center;
position: relative;
z-index: 4;
}
.imgp-switcher span.p, .imgp-switcher.active span.m {
display: none;
}
.imgp-switcher.active span.p {
display: inline-block;
}
.imgp-edit-buttons {
float: left;
}
.imgp-edit-button {
float: left;
color: #31b0a2;
text-decoration: underline;
cursor: pointer;
}
.imgp-edit-button:hover {
text-decoration: none;
}
/* # Image Points # */
/* # Common blocks & elements # */
.bx-imopenlines-config-sidebar-info-block { display: none!important; }
.pricelist-group-title {
color: #222;
font-size: 14px;
font-weight: normal;
font-family: "Medium";
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
margin: 0 0 20px;
}
.hits-title {
color: #222;
font-size: 18px;
font-family: "Medium";
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 40px 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 10;
}
.section-title {
font-size: 20px;
line-height: 1.4;
text-transform: uppercase;
margin: 60px 0 40px;
}
.text-content ul {
display: flex;
flex-direction: column;
padding-left: 25px
}
.text-content ul li {
font-style: normal;
position: relative;
margin-bottom: 10px;
list-style: initial;
}
/*
.text-content ul li:after {
content: "";
display: block;
position: absolute;
left: -10px;
top: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #49a79d
}
*/