/* Partials */
/* Переменные */
/* Основные цвета проекта */
/* цвета шрифта */
/* цвет фона */
/* акцидентные цвета */
/* Путь к папке с картинками
* Пример: background-image: url('$img_path/svg/load.svg')
*/
/* Время для основных анимаций */
/* Настройки шагов адаптива и сетки */
/* Изменение настроек сетки */
/* Основные размеры для элементов */
/* Точки адаптива
Пример: @media (--mobile) {}
*/
/* Базовые стили */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none
}
@media (min-width: 1024px) {
*::-webkit-scrollbar {
width: 4px;
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #ccc;
}
}
html {
height: 100%
}
html.is-locked {
overflow: hidden;
}
body {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100vw;
min-height: 100vh;
background: #111;
font-size: 16px;
font-size: 1rem;
font-family: Roboto, Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #fff;
vertical-align: top;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow-x: hidden;
}
.is-locked body {
position: fixed;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
background-color: rgba(0, 0, 0, .8);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
body.has-overlay::before {
opacity: 1;
pointer-events: all;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #f30;
fill: #f30;
text-decoration: none;
transition: all 200ms ease
}
a:hover {
color: #d02700;
fill: #d02700;
text-decoration: none;
}
strong,
b {
font-weight: 400;
}
strong i,
strong em,
b i,
b em {
font-size: 90%;
font-weight: 400;
font-style: normal;
}
em,
i {
font-size: 90%;
font-style: normal;
}
em strong,
em b,
i strong,
i b {
font-weight: 400;
font-style: normal;
}
p {
margin: 0 0 16px;
}
.intro-header,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 16px 0;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
font-weight: 400
}
.intro-header:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
}
.intro-header {
font-size: 64px;
font-size: 4rem;
line-height: 1.125
}
@media (max-width: 1023px) {
.intro-header {
font-size: 2rem
}
}
h1,
.page-h1 {
margin-top: 0;
font-size: 40px;
font-size: 2.5rem;
line-height: 1.4
}
@media (max-width: 1023px) {
h1,
.page-h1 {
font-size: 1.75rem
}
}
h2,
.page-h2 {
font-size: 32px;
font-size: 2rem;
line-height: 1.25
}
@media (max-width: 1023px) {
h2,
.page-h2 {
font-size: 1.5rem
}
}
h3,
.page-h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.33
}
@media (max-width: 1023px) {
h3,
.page-h3 {
font-size: 1.375rem
}
}
h4 {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.3
}
@media (max-width: 1023px) {
h4 {
font-size: 1.125rem
}
}
h5,
h6 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.6
}
@media (max-width: 1023px) {
h5,
h6 {
font-size: 1rem
}
}
hr {
background: none;
border: none;
border-bottom: 1px solid #fff;
display: block;
position: relative;
height: 1px;
margin: 16px 0;
opacity: 0.2;
line-height: 0;
font-size: 0;
}
ul li, ol li {
list-style: none outside;
}
q,
blockquote {
margin-bottom: 16px;
font-weight: 400;
}
fieldset {
border: 1px solid #999;
margin-bottom: 16px;
padding: 32px;
}
fieldset legend {
position: relative;
margin-left: -8px;
padding: 0 8px;
}
/* Стилизация элементов форм */
input[type='number'] {
/* Прячет стрелки управления поля number в Firefox */
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield
/* Прячет стрелки управления поля number в Chrome, Safari и Opera */
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
appearance: none;
}
/* прячет стрелки у инпута */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
display: block;
height: 80px;
padding: 40px 24px 16px;
width: 100%;
margin-bottom: 32px;
font-size: 16px;
font-size: 1rem;
zoom: 1;
transition: all 200ms ease;
border-radius: 0;
box-shadow: none;
border: 1px solid #fff;
background-color: #fff;
}
input[type='color'].is-disabled,
.is-disabled input[type='color'],
input[type='color'][disabled],
input[type='date'].is-disabled,
.is-disabled input[type='date'],
input[type='date'][disabled],
input[type='datetime'].is-disabled,
.is-disabled input[type='datetime'],
input[type='datetime'][disabled],
input[type='datetime-local'].is-disabled,
.is-disabled input[type='datetime-local'],
input[type='datetime-local'][disabled],
input[type='email'].is-disabled,
.is-disabled input[type='email'],
input[type='email'][disabled],
input[type='month'].is-disabled,
.is-disabled input[type='month'],
input[type='month'][disabled],
input[type='number'].is-disabled,
.is-disabled input[type='number'],
input[type='number'][disabled],
input[type='password'].is-disabled,
.is-disabled input[type='password'],
input[type='password'][disabled],
input[type='search'].is-disabled,
.is-disabled input[type='search'],
input[type='search'][disabled],
input[type='tel'].is-disabled,
.is-disabled input[type='tel'],
input[type='tel'][disabled],
input[type='text'].is-disabled,
.is-disabled input[type='text'],
input[type='text'][disabled],
input[type='time'].is-disabled,
.is-disabled input[type='time'],
input[type='time'][disabled],
input[type='url'].is-disabled,
.is-disabled input[type='url'],
input[type='url'][disabled],
input[type='week'].is-disabled,
.is-disabled input[type='week'],
input[type='week'][disabled],
input:not([type]).is-disabled,
.is-disabled input:not([type]),
input:not([type])[disabled],
textarea.is-disabled,
.is-disabled textarea,
textarea[disabled],
select.is-disabled,
.is-disabled select,
select[disabled] {
cursor: default;
pointer-events: none;
border-color: #e0e0e0;
background-color: #e0e0e0;
color: #ccc
}
input[type='color'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='color']::-webkit-input-placeholder, input[type='color'][disabled]::-webkit-input-placeholder, input[type='date'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='date']::-webkit-input-placeholder, input[type='date'][disabled]::-webkit-input-placeholder, input[type='datetime'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='datetime']::-webkit-input-placeholder, input[type='datetime'][disabled]::-webkit-input-placeholder, input[type='datetime-local'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='datetime-local']::-webkit-input-placeholder, input[type='datetime-local'][disabled]::-webkit-input-placeholder, input[type='email'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='email']::-webkit-input-placeholder, input[type='email'][disabled]::-webkit-input-placeholder, input[type='month'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='month']::-webkit-input-placeholder, input[type='month'][disabled]::-webkit-input-placeholder, input[type='number'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='number']::-webkit-input-placeholder, input[type='number'][disabled]::-webkit-input-placeholder, input[type='password'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='password']::-webkit-input-placeholder, input[type='password'][disabled]::-webkit-input-placeholder, input[type='search'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='search']::-webkit-input-placeholder, input[type='search'][disabled]::-webkit-input-placeholder, input[type='tel'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='tel']::-webkit-input-placeholder, input[type='tel'][disabled]::-webkit-input-placeholder, input[type='text'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='text']::-webkit-input-placeholder, input[type='text'][disabled]::-webkit-input-placeholder, input[type='time'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='time']::-webkit-input-placeholder, input[type='time'][disabled]::-webkit-input-placeholder, input[type='url'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='url']::-webkit-input-placeholder, input[type='url'][disabled]::-webkit-input-placeholder, input[type='week'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='week']::-webkit-input-placeholder, input[type='week'][disabled]::-webkit-input-placeholder, input:not([type]).is-disabled::-webkit-input-placeholder, .is-disabled input:not([type])::-webkit-input-placeholder, input:not([type])[disabled]::-webkit-input-placeholder, textarea.is-disabled::-webkit-input-placeholder, .is-disabled textarea::-webkit-input-placeholder, textarea[disabled]::-webkit-input-placeholder, select.is-disabled::-webkit-input-placeholder, .is-disabled select::-webkit-input-placeholder, select[disabled]::-webkit-input-placeholder {
color: #ccc;
}
input[type='color'].is-disabled::-moz-placeholder, .is-disabled input[type='color']::-moz-placeholder, input[type='color'][disabled]::-moz-placeholder, input[type='date'].is-disabled::-moz-placeholder, .is-disabled input[type='date']::-moz-placeholder, input[type='date'][disabled]::-moz-placeholder, input[type='datetime'].is-disabled::-moz-placeholder, .is-disabled input[type='datetime']::-moz-placeholder, input[type='datetime'][disabled]::-moz-placeholder, input[type='datetime-local'].is-disabled::-moz-placeholder, .is-disabled input[type='datetime-local']::-moz-placeholder, input[type='datetime-local'][disabled]::-moz-placeholder, input[type='email'].is-disabled::-moz-placeholder, .is-disabled input[type='email']::-moz-placeholder, input[type='email'][disabled]::-moz-placeholder, input[type='month'].is-disabled::-moz-placeholder, .is-disabled input[type='month']::-moz-placeholder, input[type='month'][disabled]::-moz-placeholder, input[type='number'].is-disabled::-moz-placeholder, .is-disabled input[type='number']::-moz-placeholder, input[type='number'][disabled]::-moz-placeholder, input[type='password'].is-disabled::-moz-placeholder, .is-disabled input[type='password']::-moz-placeholder, input[type='password'][disabled]::-moz-placeholder, input[type='search'].is-disabled::-moz-placeholder, .is-disabled input[type='search']::-moz-placeholder, input[type='search'][disabled]::-moz-placeholder, input[type='tel'].is-disabled::-moz-placeholder, .is-disabled input[type='tel']::-moz-placeholder, input[type='tel'][disabled]::-moz-placeholder, input[type='text'].is-disabled::-moz-placeholder, .is-disabled input[type='text']::-moz-placeholder, input[type='text'][disabled]::-moz-placeholder, input[type='time'].is-disabled::-moz-placeholder, .is-disabled input[type='time']::-moz-placeholder, input[type='time'][disabled]::-moz-placeholder, input[type='url'].is-disabled::-moz-placeholder, .is-disabled input[type='url']::-moz-placeholder, input[type='url'][disabled]::-moz-placeholder, input[type='week'].is-disabled::-moz-placeholder, .is-disabled input[type='week']::-moz-placeholder, input[type='week'][disabled]::-moz-placeholder, input:not([type]).is-disabled::-moz-placeholder, .is-disabled input:not([type])::-moz-placeholder, input:not([type])[disabled]::-moz-placeholder, textarea.is-disabled::-moz-placeholder, .is-disabled textarea::-moz-placeholder, textarea[disabled]::-moz-placeholder, select.is-disabled::-moz-placeholder, .is-disabled select::-moz-placeholder, select[disabled]::-moz-placeholder {
color: #ccc;
}
input[type='color'].is-disabled:-ms-input-placeholder, .is-disabled input[type='color']:-ms-input-placeholder, input[type='color'][disabled]:-ms-input-placeholder, input[type='date'].is-disabled:-ms-input-placeholder, .is-disabled input[type='date']:-ms-input-placeholder, input[type='date'][disabled]:-ms-input-placeholder, input[type='datetime'].is-disabled:-ms-input-placeholder, .is-disabled input[type='datetime']:-ms-input-placeholder, input[type='datetime'][disabled]:-ms-input-placeholder, input[type='datetime-local'].is-disabled:-ms-input-placeholder, .is-disabled input[type='datetime-local']:-ms-input-placeholder, input[type='datetime-local'][disabled]:-ms-input-placeholder, input[type='email'].is-disabled:-ms-input-placeholder, .is-disabled input[type='email']:-ms-input-placeholder, input[type='email'][disabled]:-ms-input-placeholder, input[type='month'].is-disabled:-ms-input-placeholder, .is-disabled input[type='month']:-ms-input-placeholder, input[type='month'][disabled]:-ms-input-placeholder, input[type='number'].is-disabled:-ms-input-placeholder, .is-disabled input[type='number']:-ms-input-placeholder, input[type='number'][disabled]:-ms-input-placeholder, input[type='password'].is-disabled:-ms-input-placeholder, .is-disabled input[type='password']:-ms-input-placeholder, input[type='password'][disabled]:-ms-input-placeholder, input[type='search'].is-disabled:-ms-input-placeholder, .is-disabled input[type='search']:-ms-input-placeholder, input[type='search'][disabled]:-ms-input-placeholder, input[type='tel'].is-disabled:-ms-input-placeholder, .is-disabled input[type='tel']:-ms-input-placeholder, input[type='tel'][disabled]:-ms-input-placeholder, input[type='text'].is-disabled:-ms-input-placeholder, .is-disabled input[type='text']:-ms-input-placeholder, input[type='text'][disabled]:-ms-input-placeholder, input[type='time'].is-disabled:-ms-input-placeholder, .is-disabled input[type='time']:-ms-input-placeholder, input[type='time'][disabled]:-ms-input-placeholder, input[type='url'].is-disabled:-ms-input-placeholder, .is-disabled input[type='url']:-ms-input-placeholder, input[type='url'][disabled]:-ms-input-placeholder, input[type='week'].is-disabled:-ms-input-placeholder, .is-disabled input[type='week']:-ms-input-placeholder, input[type='week'][disabled]:-ms-input-placeholder, input:not([type]).is-disabled:-ms-input-placeholder, .is-disabled input:not([type]):-ms-input-placeholder, input:not([type])[disabled]:-ms-input-placeholder, textarea.is-disabled:-ms-input-placeholder, .is-disabled textarea:-ms-input-placeholder, textarea[disabled]:-ms-input-placeholder, select.is-disabled:-ms-input-placeholder, .is-disabled select:-ms-input-placeholder, select[disabled]:-ms-input-placeholder {
color: #ccc;
}
input[type='color'].is-disabled::-ms-input-placeholder, .is-disabled input[type='color']::-ms-input-placeholder, input[type='color'][disabled]::-ms-input-placeholder, input[type='date'].is-disabled::-ms-input-placeholder, .is-disabled input[type='date']::-ms-input-placeholder, input[type='date'][disabled]::-ms-input-placeholder, input[type='datetime'].is-disabled::-ms-input-placeholder, .is-disabled input[type='datetime']::-ms-input-placeholder, input[type='datetime'][disabled]::-ms-input-placeholder, input[type='datetime-local'].is-disabled::-ms-input-placeholder, .is-disabled input[type='datetime-local']::-ms-input-placeholder, input[type='datetime-local'][disabled]::-ms-input-placeholder, input[type='email'].is-disabled::-ms-input-placeholder, .is-disabled input[type='email']::-ms-input-placeholder, input[type='email'][disabled]::-ms-input-placeholder, input[type='month'].is-disabled::-ms-input-placeholder, .is-disabled input[type='month']::-ms-input-placeholder, input[type='month'][disabled]::-ms-input-placeholder, input[type='number'].is-disabled::-ms-input-placeholder, .is-disabled input[type='number']::-ms-input-placeholder, input[type='number'][disabled]::-ms-input-placeholder, input[type='password'].is-disabled::-ms-input-placeholder, .is-disabled input[type='password']::-ms-input-placeholder, input[type='password'][disabled]::-ms-input-placeholder, input[type='search'].is-disabled::-ms-input-placeholder, .is-disabled input[type='search']::-ms-input-placeholder, input[type='search'][disabled]::-ms-input-placeholder, input[type='tel'].is-disabled::-ms-input-placeholder, .is-disabled input[type='tel']::-ms-input-placeholder, input[type='tel'][disabled]::-ms-input-placeholder, input[type='text'].is-disabled::-ms-input-placeholder, .is-disabled input[type='text']::-ms-input-placeholder, input[type='text'][disabled]::-ms-input-placeholder, input[type='time'].is-disabled::-ms-input-placeholder, .is-disabled input[type='time']::-ms-input-placeholder, input[type='time'][disabled]::-ms-input-placeholder, input[type='url'].is-disabled::-ms-input-placeholder, .is-disabled input[type='url']::-ms-input-placeholder, input[type='url'][disabled]::-ms-input-placeholder, input[type='week'].is-disabled::-ms-input-placeholder, .is-disabled input[type='week']::-ms-input-placeholder, input[type='week'][disabled]::-ms-input-placeholder, input:not([type]).is-disabled::-ms-input-placeholder, .is-disabled input:not([type])::-ms-input-placeholder, input:not([type])[disabled]::-ms-input-placeholder, textarea.is-disabled::-ms-input-placeholder, .is-disabled textarea::-ms-input-placeholder, textarea[disabled]::-ms-input-placeholder, select.is-disabled::-ms-input-placeholder, .is-disabled select::-ms-input-placeholder, select[disabled]::-ms-input-placeholder {
color: #ccc;
}
&.is-disabled::-webkit-input-placeholder, .is-disabled &::-webkit-input-placeholder, &[disabled]::-webkit-input-placeholder {
color: #ccc;
}
&.is-disabled::-moz-placeholder, .is-disabled &::-moz-placeholder, &[disabled]::-moz-placeholder {
color: #ccc;
}
&.is-disabled::-ms-input-placeholder, .is-disabled &::-ms-input-placeholder, &[disabled]::-ms-input-placeholder {
color: #ccc;
}
input[type='color'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='color']::-webkit-input-placeholder, input[type='color'][disabled]::-webkit-input-placeholder, input[type='date'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='date']::-webkit-input-placeholder, input[type='date'][disabled]::-webkit-input-placeholder, input[type='datetime'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='datetime']::-webkit-input-placeholder, input[type='datetime'][disabled]::-webkit-input-placeholder, input[type='datetime-local'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='datetime-local']::-webkit-input-placeholder, input[type='datetime-local'][disabled]::-webkit-input-placeholder, input[type='email'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='email']::-webkit-input-placeholder, input[type='email'][disabled]::-webkit-input-placeholder, input[type='month'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='month']::-webkit-input-placeholder, input[type='month'][disabled]::-webkit-input-placeholder, input[type='number'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='number']::-webkit-input-placeholder, input[type='number'][disabled]::-webkit-input-placeholder, input[type='password'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='password']::-webkit-input-placeholder, input[type='password'][disabled]::-webkit-input-placeholder, input[type='search'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='search']::-webkit-input-placeholder, input[type='search'][disabled]::-webkit-input-placeholder, input[type='tel'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='tel']::-webkit-input-placeholder, input[type='tel'][disabled]::-webkit-input-placeholder, input[type='text'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='text']::-webkit-input-placeholder, input[type='text'][disabled]::-webkit-input-placeholder, input[type='time'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='time']::-webkit-input-placeholder, input[type='time'][disabled]::-webkit-input-placeholder, input[type='url'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='url']::-webkit-input-placeholder, input[type='url'][disabled]::-webkit-input-placeholder, input[type='week'].is-disabled::-webkit-input-placeholder, .is-disabled input[type='week']::-webkit-input-placeholder, input[type='week'][disabled]::-webkit-input-placeholder, input:not([type]).is-disabled::-webkit-input-placeholder, .is-disabled input:not([type])::-webkit-input-placeholder, input:not([type])[disabled]::-webkit-input-placeholder, textarea.is-disabled::-webkit-input-placeholder, .is-disabled textarea::-webkit-input-placeholder, textarea[disabled]::-webkit-input-placeholder, select.is-disabled::-webkit-input-placeholder, .is-disabled select::-webkit-input-placeholder, select[disabled]::-webkit-input-placeholder {
color: #ccc;
}
input[type='color'].is-disabled::-moz-placeholder, .is-disabled input[type='color']::-moz-placeholder, input[type='color'][disabled]::-moz-placeholder, input[type='date'].is-disabled::-moz-placeholder, .is-disabled input[type='date']::-moz-placeholder, input[type='date'][disabled]::-moz-placeholder, input[type='datetime'].is-disabled::-moz-placeholder, .is-disabled input[type='datetime']::-moz-placeholder, input[type='datetime'][disabled]::-moz-placeholder, input[type='datetime-local'].is-disabled::-moz-placeholder, .is-disabled input[type='datetime-local']::-moz-placeholder, input[type='datetime-local'][disabled]::-moz-placeholder, input[type='email'].is-disabled::-moz-placeholder, .is-disabled input[type='email']::-moz-placeholder, input[type='email'][disabled]::-moz-placeholder, input[type='month'].is-disabled::-moz-placeholder, .is-disabled input[type='month']::-moz-placeholder, input[type='month'][disabled]::-moz-placeholder, input[type='number'].is-disabled::-moz-placeholder, .is-disabled input[type='number']::-moz-placeholder, input[type='number'][disabled]::-moz-placeholder, input[type='password'].is-disabled::-moz-placeholder, .is-disabled input[type='password']::-moz-placeholder, input[type='password'][disabled]::-moz-placeholder, input[type='search'].is-disabled::-moz-placeholder, .is-disabled input[type='search']::-moz-placeholder, input[type='search'][disabled]::-moz-placeholder, input[type='tel'].is-disabled::-moz-placeholder, .is-disabled input[type='tel']::-moz-placeholder, input[type='tel'][disabled]::-moz-placeholder, input[type='text'].is-disabled::-moz-placeholder, .is-disabled input[type='text']::-moz-placeholder, input[type='text'][disabled]::-moz-placeholder, input[type='time'].is-disabled::-moz-placeholder, .is-disabled input[type='time']::-moz-placeholder, input[type='time'][disabled]::-moz-placeholder, input[type='url'].is-disabled::-moz-placeholder, .is-disabled input[type='url']::-moz-placeholder, input[type='url'][disabled]::-moz-placeholder, input[type='week'].is-disabled::-moz-placeholder, .is-disabled input[type='week']::-moz-placeholder, input[type='week'][disabled]::-moz-placeholder, input:not([type]).is-disabled::-moz-placeholder, .is-disabled input:not([type])::-moz-placeholder, input:not([type])[disabled]::-moz-placeholder, textarea.is-disabled::-moz-placeholder, .is-disabled textarea::-moz-placeholder, textarea[disabled]::-moz-placeholder, select.is-disabled::-moz-placeholder, .is-disabled select::-moz-placeholder, select[disabled]::-moz-placeholder {
color: #ccc;
}
input[type='color'].is-disabled:-ms-input-placeholder, .is-disabled input[type='color']:-ms-input-placeholder, input[type='color'][disabled]:-ms-input-placeholder, input[type='date'].is-disabled:-ms-input-placeholder, .is-disabled input[type='date']:-ms-input-placeholder, input[type='date'][disabled]:-ms-input-placeholder, input[type='datetime'].is-disabled:-ms-input-placeholder, .is-disabled input[type='datetime']:-ms-input-placeholder, input[type='datetime'][disabled]:-ms-input-placeholder, input[type='datetime-local'].is-disabled:-ms-input-placeholder, .is-disabled input[type='datetime-local']:-ms-input-placeholder, input[type='datetime-local'][disabled]:-ms-input-placeholder, input[type='email'].is-disabled:-ms-input-placeholder, .is-disabled input[type='email']:-ms-input-placeholder, input[type='email'][disabled]:-ms-input-placeholder, input[type='month'].is-disabled:-ms-input-placeholder, .is-disabled input[type='month']:-ms-input-placeholder, input[type='month'][disabled]:-ms-input-placeholder, input[type='number'].is-disabled:-ms-input-placeholder, .is-disabled input[type='number']:-ms-input-placeholder, input[type='number'][disabled]:-ms-input-placeholder, input[type='password'].is-disabled:-ms-input-placeholder, .is-disabled input[type='password']:-ms-input-placeholder, input[type='password'][disabled]:-ms-input-placeholder, input[type='search'].is-disabled:-ms-input-placeholder, .is-disabled input[type='search']:-ms-input-placeholder, input[type='search'][disabled]:-ms-input-placeholder, input[type='tel'].is-disabled:-ms-input-placeholder, .is-disabled input[type='tel']:-ms-input-placeholder, input[type='tel'][disabled]:-ms-input-placeholder, input[type='text'].is-disabled:-ms-input-placeholder, .is-disabled input[type='text']:-ms-input-placeholder, input[type='text'][disabled]:-ms-input-placeholder, input[type='time'].is-disabled:-ms-input-placeholder, .is-disabled input[type='time']:-ms-input-placeholder, input[type='time'][disabled]:-ms-input-placeholder, input[type='url'].is-disabled:-ms-input-placeholder, .is-disabled input[type='url']:-ms-input-placeholder, input[type='url'][disabled]:-ms-input-placeholder, input[type='week'].is-disabled:-ms-input-placeholder, .is-disabled input[type='week']:-ms-input-placeholder, input[type='week'][disabled]:-ms-input-placeholder, input:not([type]).is-disabled:-ms-input-placeholder, .is-disabled input:not([type]):-ms-input-placeholder, input:not([type])[disabled]:-ms-input-placeholder, textarea.is-disabled:-ms-input-placeholder, .is-disabled textarea:-ms-input-placeholder, textarea[disabled]:-ms-input-placeholder, select.is-disabled:-ms-input-placeholder, .is-disabled select:-ms-input-placeholder, select[disabled]:-ms-input-placeholder {
color: #ccc;
}
input[type='color'].is-disabled::-ms-input-placeholder, .is-disabled input[type='color']::-ms-input-placeholder, input[type='color'][disabled]::-ms-input-placeholder, input[type='date'].is-disabled::-ms-input-placeholder, .is-disabled input[type='date']::-ms-input-placeholder, input[type='date'][disabled]::-ms-input-placeholder, input[type='datetime'].is-disabled::-ms-input-placeholder, .is-disabled input[type='datetime']::-ms-input-placeholder, input[type='datetime'][disabled]::-ms-input-placeholder, input[type='datetime-local'].is-disabled::-ms-input-placeholder, .is-disabled input[type='datetime-local']::-ms-input-placeholder, input[type='datetime-local'][disabled]::-ms-input-placeholder, input[type='email'].is-disabled::-ms-input-placeholder, .is-disabled input[type='email']::-ms-input-placeholder, input[type='email'][disabled]::-ms-input-placeholder, input[type='month'].is-disabled::-ms-input-placeholder, .is-disabled input[type='month']::-ms-input-placeholder, input[type='month'][disabled]::-ms-input-placeholder, input[type='number'].is-disabled::-ms-input-placeholder, .is-disabled input[type='number']::-ms-input-placeholder, input[type='number'][disabled]::-ms-input-placeholder, input[type='password'].is-disabled::-ms-input-placeholder, .is-disabled input[type='password']::-ms-input-placeholder, input[type='password'][disabled]::-ms-input-placeholder, input[type='search'].is-disabled::-ms-input-placeholder, .is-disabled input[type='search']::-ms-input-placeholder, input[type='search'][disabled]::-ms-input-placeholder, input[type='tel'].is-disabled::-ms-input-placeholder, .is-disabled input[type='tel']::-ms-input-placeholder, input[type='tel'][disabled]::-ms-input-placeholder, input[type='text'].is-disabled::-ms-input-placeholder, .is-disabled input[type='text']::-ms-input-placeholder, input[type='text'][disabled]::-ms-input-placeholder, input[type='time'].is-disabled::-ms-input-placeholder, .is-disabled input[type='time']::-ms-input-placeholder, input[type='time'][disabled]::-ms-input-placeholder, input[type='url'].is-disabled::-ms-input-placeholder, .is-disabled input[type='url']::-ms-input-placeholder, input[type='url'][disabled]::-ms-input-placeholder, input[type='week'].is-disabled::-ms-input-placeholder, .is-disabled input[type='week']::-ms-input-placeholder, input[type='week'][disabled]::-ms-input-placeholder, input:not([type]).is-disabled::-ms-input-placeholder, .is-disabled input:not([type])::-ms-input-placeholder, input:not([type])[disabled]::-ms-input-placeholder, textarea.is-disabled::-ms-input-placeholder, .is-disabled textarea::-ms-input-placeholder, textarea[disabled]::-ms-input-placeholder, select.is-disabled::-ms-input-placeholder, .is-disabled select::-ms-input-placeholder, select[disabled]::-ms-input-placeholder {
color: #ccc;
}
input[type='color'].is-disabled::placeholder, .is-disabled input[type='color']::placeholder, input[type='color'][disabled]::placeholder, input[type='date'].is-disabled::placeholder, .is-disabled input[type='date']::placeholder, input[type='date'][disabled]::placeholder, input[type='datetime'].is-disabled::placeholder, .is-disabled input[type='datetime']::placeholder, input[type='datetime'][disabled]::placeholder, input[type='datetime-local'].is-disabled::placeholder, .is-disabled input[type='datetime-local']::placeholder, input[type='datetime-local'][disabled]::placeholder, input[type='email'].is-disabled::placeholder, .is-disabled input[type='email']::placeholder, input[type='email'][disabled]::placeholder, input[type='month'].is-disabled::placeholder, .is-disabled input[type='month']::placeholder, input[type='month'][disabled]::placeholder, input[type='number'].is-disabled::placeholder, .is-disabled input[type='number']::placeholder, input[type='number'][disabled]::placeholder, input[type='password'].is-disabled::placeholder, .is-disabled input[type='password']::placeholder, input[type='password'][disabled]::placeholder, input[type='search'].is-disabled::placeholder, .is-disabled input[type='search']::placeholder, input[type='search'][disabled]::placeholder, input[type='tel'].is-disabled::placeholder, .is-disabled input[type='tel']::placeholder, input[type='tel'][disabled]::placeholder, input[type='text'].is-disabled::placeholder, .is-disabled input[type='text']::placeholder, input[type='text'][disabled]::placeholder, input[type='time'].is-disabled::placeholder, .is-disabled input[type='time']::placeholder, input[type='time'][disabled]::placeholder, input[type='url'].is-disabled::placeholder, .is-disabled input[type='url']::placeholder, input[type='url'][disabled]::placeholder, input[type='week'].is-disabled::placeholder, .is-disabled input[type='week']::placeholder, input[type='week'][disabled]::placeholder, input:not([type]).is-disabled::placeholder, .is-disabled input:not([type])::placeholder, input:not([type])[disabled]::placeholder, textarea.is-disabled::placeholder, .is-disabled textarea::placeholder, textarea[disabled]::placeholder, select.is-disabled::placeholder, .is-disabled select::placeholder, select[disabled]::placeholder {
color: #ccc;
}
input[type='color'].parsley-error, input[type='date'].parsley-error, input[type='datetime'].parsley-error, input[type='datetime-local'].parsley-error, input[type='email'].parsley-error, input[type='month'].parsley-error, input[type='number'].parsley-error, input[type='password'].parsley-error, input[type='search'].parsley-error, input[type='tel'].parsley-error, input[type='text'].parsley-error, input[type='time'].parsley-error, input[type='url'].parsley-error, input[type='week'].parsley-error, input:not([type]).parsley-error, textarea.parsley-error, select.parsley-error {
border-color: #f30;
}
input[type='color']::-webkit-input-placeholder, input[type='date']::-webkit-input-placeholder, input[type='datetime']::-webkit-input-placeholder, input[type='datetime-local']::-webkit-input-placeholder, input[type='email']::-webkit-input-placeholder, input[type='month']::-webkit-input-placeholder, input[type='number']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder, input[type='search']::-webkit-input-placeholder, input[type='tel']::-webkit-input-placeholder, input[type='text']::-webkit-input-placeholder, input[type='time']::-webkit-input-placeholder, input[type='url']::-webkit-input-placeholder, input[type='week']::-webkit-input-placeholder, input:not([type])::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
color: #ccc;
text-transform: uppercase;
}
input[type='color']::-moz-placeholder, input[type='date']::-moz-placeholder, input[type='datetime']::-moz-placeholder, input[type='datetime-local']::-moz-placeholder, input[type='email']::-moz-placeholder, input[type='month']::-moz-placeholder, input[type='number']::-moz-placeholder, input[type='password']::-moz-placeholder, input[type='search']::-moz-placeholder, input[type='tel']::-moz-placeholder, input[type='text']::-moz-placeholder, input[type='time']::-moz-placeholder, input[type='url']::-moz-placeholder, input[type='week']::-moz-placeholder, input:not([type])::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
color: #ccc;
text-transform: uppercase;
}
input[type='color']:-ms-input-placeholder, input[type='date']:-ms-input-placeholder, input[type='datetime']:-ms-input-placeholder, input[type='datetime-local']:-ms-input-placeholder, input[type='email']:-ms-input-placeholder, input[type='month']:-ms-input-placeholder, input[type='number']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder, input[type='search']:-ms-input-placeholder, input[type='tel']:-ms-input-placeholder, input[type='text']:-ms-input-placeholder, input[type='time']:-ms-input-placeholder, input[type='url']:-ms-input-placeholder, input[type='week']:-ms-input-placeholder, input:not([type]):-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
color: #ccc;
text-transform: uppercase;
}
input[type='color']::-ms-input-placeholder, input[type='date']::-ms-input-placeholder, input[type='datetime']::-ms-input-placeholder, input[type='datetime-local']::-ms-input-placeholder, input[type='email']::-ms-input-placeholder, input[type='month']::-ms-input-placeholder, input[type='number']::-ms-input-placeholder, input[type='password']::-ms-input-placeholder, input[type='search']::-ms-input-placeholder, input[type='tel']::-ms-input-placeholder, input[type='text']::-ms-input-placeholder, input[type='time']::-ms-input-placeholder, input[type='url']::-ms-input-placeholder, input[type='week']::-ms-input-placeholder, input:not([type])::-ms-input-placeholder, textarea::-ms-input-placeholder, select::-ms-input-placeholder {
color: #ccc;
text-transform: uppercase;
}
input[type='color']::placeholder, input[type='date']::placeholder, input[type='datetime']::placeholder, input[type='datetime-local']::placeholder, input[type='email']::placeholder, input[type='month']::placeholder, input[type='number']::placeholder, input[type='password']::placeholder, input[type='search']::placeholder, input[type='tel']::placeholder, input[type='text']::placeholder, input[type='time']::placeholder, input[type='url']::placeholder, input[type='week']::placeholder, input:not([type])::placeholder, textarea::placeholder, select::placeholder {
color: #ccc;
text-transform: uppercase;
}
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
-webkit-appearance: none;
}
textarea {
min-height: 48px;
height: auto;
resize: vertical
}
textarea.parsley-error {
border-color: #f30;
}
/* чекбоксы и радио-кнопки */
input[type='checkbox'],
input[type='radio'] {
position: absolute;
clip: rect(0, 0, 0, 0)
}
input[type='checkbox'] + label, input[type='radio'] + label {
position: relative;
display: block;
margin-bottom: 24px;
padding-left: 36px;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
color: #1d1d1d;
cursor: pointer
}
input[type='checkbox'] + label.cl-grey, input[type='radio'] + label.cl-grey {
color: #999;
}
input[type='checkbox'] + label:last-of-type, input[type='radio'] + label:last-of-type {
margin-bottom: 32px;
}
input[type='checkbox'] + label::before,
input[type='checkbox'] + label::after,
input[type='radio'] + label::before,
input[type='radio'] + label::after {
content: '';
position: absolute;
display: block;
box-sizing: border-box;
transition: opacity 200ms ease;
}
input[type='checkbox'] + label::before, input[type='radio'] + label::before {
content: '';
top: -2px;
left: 0;
width: 24px;
height: 24px;
border: none;
background-color: #fff;
}
input[type='checkbox'] + label:hover, input[type='radio'] + label:hover {
color: #f30;
}
input[type='checkbox']:disabled + label, input[type='radio']:disabled + label {
color: #999;
cursor: default
}
input[type='checkbox']:disabled + label::before, input[type='radio']:disabled + label::before {
background-color: #ccc;
}
input[type='radio'] + label::before,
input[type='radio'] + label::after {
border-radius: 50%;
}
input[type='radio'] + label::after {
top: 7px;
left: 9px;
width: 6px;
height: 6px;
}
input[type='radio']:checked + label::after {
background-color: #1d1d1d;
}
input[type='checkbox'] + label::after {
top: 3px;
left: 6px;
width: 13px;
height: 13px;
}
input[type='checkbox']:checked + label::after {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='%231D1D1D'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 4.33333L4.33329 13L-4.04497e-05 8.66667L1.4444 7.22222L4.33329 10.1111L11.5555 2.88889L13 4.33333Z'/%3E %3C/svg%3E") no-repeat center;
background-size: contain;
}
/* для прямоугольных радиокнопок */
input[type='radio'] + label.radio-box {
width: 100%;
min-height: 112px;
color: #fff;
font-size: 18px;
font-size: 1.125rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
padding: 24px 24px 24px 32px;
border: 1px solid #fff;
opacity: 0.4
}
@media (max-width: 1023px) {
input[type='radio'] + label.radio-box {
min-height: 0;
padding: 24px;
margin-bottom: 16px
}
}
input[type='radio'] + label.radio-box::before,
input[type='radio'] + label.radio-box::after {
content: none;
}
input[type='radio'] + label.radio-box .icon {
display: inline-block;
margin: 0 4px;
}
input[type='radio'] + label.radio-box .icon--mastercard {
margin-left: 12px;
}
input[type='radio']:checked + label.radio-box {
opacity: 1;
cursor: default;
}
/* Стилизация кнопок */
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
background: none;
border: none;
cursor: pointer;
}
.btn {
border: none;
display: inline-block;
position: relative;
overflow: visible;
margin: 0 0 16px 0;
min-width: 200px;
padding: 0;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
text-transform: lowercase;
vertical-align: top;
transition: all 200ms ease;
/*height: 56px;*/
padding-right: 24px;
padding-left: 24px;
font-size: 18px;
font-size: 1.125rem;
line-height: 56px;
line-height: 3.5rem;
background-color: #f30;
color: #fff;
fill: #fff
}
.btn:hover,
.btn.is-hover,
.btn:focus,
.btn.is-focus,
.btn:active,
.btn.is-active {
background-color: #d02700;
color: #fff;
fill: #fff;
}
.btn.is-disabled,
.is-disabled .btn,
.btn[disabled] {
background-color: #e0e0e0;
color: #ccc;
fill: #ccc;
cursor: default;
pointer-events: none;
}
.btn.btn--block {
display: block;
width: 100%;
}
.btn.btn--block + .btn.btn--block {
margin-top: 16px;
margin-left: 0;
}
.btn.btn--white {
background-color: #fff;
color: #1d1d1d
}
.btn.btn--white:hover {
background-color: #e0e0e0;
}
.btn.btn--white.is-disabled,
.is-disabled .btn.btn--white,
.btn.btn--white[disabled] {
background-color: #e0e0e0;
color: #ccc;
fill: #ccc;
}
.btn.btn--lg {
height: 80px;
line-height: 80px;
line-height: 5rem;
font-size: 22px;
font-size: 1.375rem;
padding: 0 40px;
}
@media (max-width: 1023px) {
.btn.btn--mobile-wide {
display: block;
width: 100%
}
}
.btn-up {
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
fill: #fff;
background-color: #414141;
transition: opacity 200ms ease
}
.btn-up:hover {
opacity: 0.8;
}
.btn-close {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 44px;
height: 44px;
fill: #fff;
background-color: #111;
}
.btn-arrow {
position: relative;
display: inline-block;
width: 100px;
height: 80px;
background-color: #111;
z-index: 1;
}
.btn-arrow .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill: #fff;
}
.btn-arrow--prev {
transform: rotate(-180deg);
}
.btn-arrow.slick-disabled {
pointer-events: none;
}
.btn-arrow.slick-disabled .icon {
fill: #999;
}
.ul-list {
margin-bottom: 16px;
}
.ul-list ul,
.ul-list ol {
margin: 16px 0;
}
.ul-list li {
position: relative;
margin-bottom: 4px;
padding-left: 16px;
}
.ul-list > li::before, .ul-list ul > li::before {
content: '';
background: #fff;
display: inline-block;
position: absolute;
top: 11px;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
}
.ol-list {
counter-reset: olCounter;
margin-bottom: 32px;
}
.ol-list ol,
.ol-list ul {
counter-reset: olCounter;
margin: 16px 0;
}
.ol-list li {
position: relative;
margin-bottom: 16px;
padding-left: 24px;
}
.ol-list > li::before, .ol-list ol > li::before {
counter-increment: olCounter;
content: counter(olCounter) '.';
display: inline-block;
position: absolute;
left: 0;
}
.icon {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
text-align: center;
vertical-align: middle;
transition: fill 200ms ease-in-out;
}
.icon--up {
width: 8px;
height: 16px;
}
.icon--back {
width: 24px;
height: 16px;
transition: none;
}
.icon--done {
width: 13px;
height: 13px;
}
.icon--arrow-down {
width: 8px;
height: 5px;
}
.icon--arrow-next {
width: 5px;
height: 8px;
}
.icon--filter {
width: 18px;
height: 17px;
}
.icon--date {
width: 18px;
height: 16px;
}
.icon--close {
width: 24px;
height: 24px;
}
.icon--menu {
width: 24px;
height: 14px;
}
.icon--plus {
width: 16px;
height: 16px;
}
.icon--minus {
width: 16px;
height: 2px;
}
.icon--question,
.icon--delete {
width: 20px;
height: 20px;
}
.icon--insta {
width: 38px;
height: 38px;
}
.icon--tw {
width: 24px;
height: 20px;
}
.icon--vk {
width: 26px;
height: 15px;
}
.icon--ok {
width: 14px;
height: 24px;
}
.icon--fb {
width: 19px;
height: 38px;
}
.icon--youtube {
width: 46px;
height: 46px;
}
.icon--whatsapp {
width: 18px;
height: 18px;
}
.icon--viber {
width: 21px;
height: 21px;
}
.icon--logo {
width: 176px;
height: 123px
}
@media (max-width: 1023px) {
.icon--logo {
width: 80px;
height: 55px
}
}
.icon--flash {
width: 36px;
height: 48px;
}
.icon--new {
width: 36px;
height: 36px;
}
.icon--mastercard {
width: 26px;
height: 20px;
}
.icon--visa {
width: 29px;
height: 10px;
}
.icon--mir {
width: 35px;
height: 9px;
}
.icon--404 {
width: 176px;
height: 96px;
}
.link {
position: relative;
display: inline-block;
vertical-align: top;
color: #f30;
fill: #f30;
cursor: pointer;
text-decoration: none;
transition: all 200ms ease-in-out
}
.link:hover {
color: #d02700;
fill: #d02700;
}
.link--bernier {
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
}
.link--grey {
color: #999;
}
.link--white {
color: #fff;
fill: #fff;
}
.link--black {
color: #1d1d1d;
fill: #1d1d1d
}
.link--black:hover {
color: #f30;
fill: #f30;
}
.link--underline {
position: relative
}
.link--underline::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
height: 2px;
width: 100%;
background-color: #fff;
transition: transform 200ms ease-in-out;
transform-origin: left;
transform: scaleX(0);
}
.link--underline:hover,
.link--underline.is-active,
.link--underline.is-chosen {
color: #fff
}
.link--underline:hover::after, .link--underline.is-active::after, .link--underline.is-chosen::after {
transform: scaleX(1);
}
.link--block {
display: block;
width: 100%;
}
.link--icon-left {
transition: none;
}
.link--icon-left .icon {
margin-right: 10px;
}
.browse-happy {
background: #fff;
padding: 20px 0;
text-align: center;
}
.browse-happy strong {
color: red;
}
.browse-happy__notice {
font-size: 20px;
font-size: 1.25rem;
}
.browse-happy__security,
.browse-happy__recommend {
font-size: 12px;
font-size: 0.75rem;
}
.browse-happy__update {
font-size: 14px;
font-size: 0.875rem;
}
/* Text-align */
.text-c {
text-align: center !important;
}
.text-l {
text-align: left !important;
}
.text-r {
text-align: right !important;
}
/* Размеры шрифта */
.fz-10 {
font-size: 10px;
font-size: 0.625rem;
}
.fz-11 {
font-size: 11px;
font-size: 0.6875rem;
}
.fz-12 {
font-size: 12px;
font-size: 0.75rem;
}
.fz-13 {
font-size: 13px;
font-size: 0.8125rem;
}
.fz-14 {
font-size: 14px;
font-size: 0.875rem;
}
.fz-16 {
font-size: 16px;
font-size: 1rem;
}
.fz-18 {
font-size: 18px;
font-size: 1.125rem;
}
.ff-bernier {
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
}
.cl-grey {
color: #999;
}
.cl-red {
color: #f30;
}
.cl-white {
color: #fff;
}
.nowrap {
white-space: nowrap;
}
.filter-modal {
display: none;
position: fixed;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
-ms-flex-direction: column;
flex-direction: column;
width: 500px;
color: #fff;
background-color: #111
}
@media (max-width: 767px) {
.filter-modal {
width: 100%
}
}
.filter-modal.is-active {
display: -ms-flexbox;
display: flex
}
@media (min-width: 1024px) {
.filter-modal.is-active {
display: none
}
}
.filter-modal__title {
margin-bottom: 24px;
}
.filter-modal__close {
position: absolute;
top: 8px;
right: 8px;
}
.filter-modal__content {
padding: 40px 24px 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.filter-modal__footer {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #f30;
color: #fff;
font-family: Bernier, Arial, Helvetica, sans-serif;
font-size: 22px;
font-size: 1.375rem;
height: 80px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.filters-list {
padding-top: 32px;
padding-bottom: 32px;
font-size: 18px;
font-size: 1.125rem;
}
.filters-list__item {
margin-bottom: 16px;
}
.filters-list__item .inactive {
opacity: 0.3;
}
.shop {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
.shop__filters {
width: 312px;
padding-top: 8px
}
@media (max-width: 1479px) {
.shop__filters {
width: calc(25% - 16px)
}
}
@media (max-width: 1023px) {
.shop__filters {
display: none
}
}
.shop__filters-title {
margin-bottom: 48px;
}
.shop__main {
/* width: 66.66667%;*/
width: 70%;
padding-bottom: 56px
}
@media (max-width: 1479px) {
.shop__main {
width: calc(75% - 16px)
}
}
@media (max-width: 1023px) {
.shop__main {
width: 100%;
padding-bottom: 16px
}
}
.shop__main-title {
margin-bottom: 40px;
}
.shop__main-top {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
.shop__main-top-qt {
color: #999
}
@media (max-width: 1023px) {
.shop__main-top-qt {
display: none
}
}
.shop__main-top-filters-btn {
display: none;
width: 40px;
height: 40px;
background-color: #fff;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50%;
margin-top: -6px
}
@media (max-width: 1023px) {
.shop__main-top-filters-btn {
display: -ms-flexbox;
display: flex
}
}
.shop__main-products {
display: -ms-grid;
display: grid;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 24px 1fr 24px 1fr;
grid-template: auto / 1fr 1fr 1fr;
grid-gap: 48px 24px;
margin-bottom: 64px
}
@media (max-width: 767px) {
.shop__main-products {
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 24px 1fr;
grid-template: auto / 1fr 1fr
}
}
@media (max-width: 479px) {
.shop__main-products {
-ms-grid-rows: auto;
-ms-grid-columns: 1fr;
grid-template: auto / 1fr
}
}
.shop__main-more {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
@media (max-width: 479px) {
.shop__main-more-btn {
width: 100%
}
}
.shop__main-more-btn-up {
position: absolute;
left: 0;
top: -7px;
z-index: 15;
}
.shop__main-disclaimer {
margin-top: 112px;
margin-bottom: 0;
color: #fff
}
@media (max-width: 1023px) {
.shop__main-disclaimer {
margin-top: 40px
}
}
.shop__btn-up {
display: none;
position: fixed;
left: 24px;
bottom: 16px
}
@media (max-width: 1023px) {
.shop__btn-up {
display: block;
position: static;
margin-left: auto;
margin-top: 24px
}
}
.index-main {
position: relative;
/* высота меню + отступы */
padding-top: 291px;
overflow: hidden
}
@media (max-width: 1023px) {
.index-main {
padding-top: 130px
}
}
.index-main--about {
padding-top: 230px;
padding-bottom: 64px;
overflow: visible;
}
.index-main--new {
padding-top: 220px
}
@media (max-width: 1023px) {
.index-main--new {
padding-top: 130px
}
}
@media (min-width: 1024px) {
.index-main--bikes {
margin-bottom: 64px
}
}
.index-main__bg {
position: absolute;
z-index: 1;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.index-main__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.index-main__bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
}
.index-main--about .index-main__bg {
bottom: auto;
bottom: initial;
}
.index-main__bg--no-overlay::after {
content: none;
}
.index-main--about .index-main__bg--no-overlay img {
height: auto;
}
.index-main__container {
position: relative;
z-index: 2;
}
.index-main__hl {
max-width: 800px;
margin-bottom: 80px
}
@media (max-width: 767px) {
.index-main__hl {
margin-bottom: 136px
}
}
.index-main__text {
max-width: 490px;
}
.product {
position: relative;
display: block;
color: #fff;
}
.product__img {
display: block;
max-height: 230px;
overflow: hidden;
margin-bottom: 16px;
background-color: #232323
}
@media (max-width: 767px) {
.product__img {
height: auto
}
}
.product__img img {
display: block;
width: 100%;
}
.product__icon {
position: absolute;
top: 18px;
right: 18px;
}
.product__icon--flash {
top: 24px;
right: 24px;
}
.product__icon .icon--flash {
width: 17px;
height: 24px;
}
.product__content {
display: -ms-flexbox;
display: flex;
}
.product__content-col {
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.product__content-col:last-child {
min-width: 100px;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-left: 16px;
text-align: right;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.product__company {
display: block;
margin-bottom: 0;
color: #999;
}
.product__name {
display: block;
margin-bottom: 4px;
color: #fff;
}
.product__price {
width: 100%;
color: #fff;
font-size: 22px;
font-size: 1.375rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
margin-bottom: 0;
}
.product__price--red {
color: #f30;
}
.product__price--old {
position: relative;
width: auto;
padding-left: 7px;
padding-right: 4px;
font-size: 16px;
font-size: 1rem;
color: #999;
line-height: 1
}
.product__price--old::after {
content: '';
position: absolute;
height: 1px;
left: 0;
right: 0;
top: 50%;
background-color: #999;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/robotocondensed/Robotocondensed.woff2') format('woff2'),
url('../fonts/robotocondensed/Robotocondensed.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bernier';
src: url('../fonts/bernier/Bernierregular.woff2') format('woff2'),
url('../fonts/bernier/Bernierregular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
.news-carousel {
display: -ms-flexbox;
display: flex
}
@media (max-width: 1023px) {
.news-carousel {
margin: 0 -24px
}
}
.news-carousel__item {
position: relative;
display: block;
width: 33.333%;
padding: 48px;
height: 224px;
font-size: 22px;
font-size: 1.375rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
color: #fff;
border-left: 1px solid rgba(255, 255, 255, .2);
overflow: hidden
}
@media (max-width: 1479px) {
.news-carousel__item {
padding: 48px 40px
}
}
@media (max-width: 1023px) {
.news-carousel__item {
width: 300px;
/* padding: 0 0 0 calc($gutter-step * 3); */
border: none
/* width: 200px; */
/* height: 100px; */
/* margin-right: calc($gutter-step * 4); */
}
}
.news-carousel__item:hover {
color: #fff;
}
.news-carousel__item:last-child {
border-right: 1px solid rgba(255, 255, 255, .2)
}
@media (max-width: 1023px) {
.news-carousel__item:last-child {
border-right: none;
margin-right: 0
}
}
.news-carousel__item-img {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 200ms ease-in-out;
object-fit: cover;
pointer-events: none
}
@media (max-width: 1023px) {
.news-carousel__item-img {
opacity: 1
}
}
.news-carousel__item:hover .news-carousel__item-img {
opacity: 1;
}
.news-carousel__item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-carousel__item-img::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(
-90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, .338081) 24.97%,
rgba(0, 0, 0, .529309) 51.95%,
rgba(0, 0, 0, .7) 76.36%
);
}
.news-carousel__item-text {
position: relative;
z-index: 2;
}
.index-main-carousel {
padding-bottom: 48px;
}
.index-main-carousel__item {
text-align: center;
}
.index-main-carousel__item-text {
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
font-size: 64px;
font-size: 4rem;
line-height: 1.125;
text-align: center;
margin-bottom: 32px
}
@media (max-width: 1023px) {
.index-main-carousel__item-text {
font-size: 2rem
}
}
.index-main-carousel__item-btn {
margin-bottom: 48px;
}
.qt {
display: inline-block;
vertical-align: middle;
min-width: 25px;
height: 25px;
line-height: 25px;
line-height: 1.5625rem;
font-size: 12px;
font-size: 0.75rem;
color: #1d1d1d;
text-align: center;
border-radius: 50%;
background-color: #fff;
transition: all 200ms ease-in-out;
}
.link:hover .qt {
color: #fff;
background-color: #f30;
}
.instagram {
padding: 80px 0;
background-image: url('../img/instagram_bg.jpg');
background-size: cover
}
@media (max-width: 767px) {
.instagram {
padding: 40px 0
}
}
.instagram__hl {
margin-bottom: 80px;
text-align: center
}
@media (max-width: 767px) {
.instagram__hl {
margin-bottom: 32px
}
}
.instagram__hl span {
color: #ff9728;
background: linear-gradient(to right, #ff9728, #d13c98 50%, #5856ca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.instagram-frames {
display: -ms-grid;
display: grid;
grid-gap: 24px;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
grid-template: auto / 1fr 1fr 1fr 1fr
}
@media (max-width: 767px) {
.instagram-frames {
display: block
}
}
.instagram-frames__item {
position: relative;
overflow: hidden;
background: #111
}
@media (max-width: 767px) {
.instagram-frames__item {
margin-bottom: 32px
}
}
.instagram-frames__item-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.instagram-frames__item::after {
content: '';
display: block;
padding-bottom: 100%;
}
.instagram-frames .slick-dots li {
background-color: #111;
}
.catalogs-page__hl {
margin-bottom: 48px;
}
@media (min-width: 1024px) {
.catalogs-page__container {
width: 50%
}
}
.catalogs-page__cols {
margin-bottom: 56px
}
@media (min-width: 1024px) {
.catalogs-page__cols {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
grid-column-gap: 32px;
-webkit-column-gap: 32px;
-moz-column-gap: 32px;
column-gap: 32px
}
}
.catalogs-page__cols-item {
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
.catalogs-page__cols-item-text {
margin-bottom: 0;
fill: #fff;
}
.catalogs-page__list {
width: 75%;
margin-bottom: 24px
}
@media (max-width: 767px) {
.catalogs-page__list {
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 0
}
}
.category {
display: block;
background-color: #111;
width: calc(25% - 24px);
margin-bottom: 32px;
margin-right: 32px
}
@media (min-width: 1480px) {
.category:nth-child(4n) {
margin-right: 0;
}
}
@media (max-width: 1479px) {
.category {
width: calc(33.33333% - 21.33333px)
}
}
@media (max-width: 1479px) and (min-width: 1024px) {
.category:nth-child(3n) {
margin-right: 0;
}
}
@media (max-width: 1023px) {
.category {
width: calc(50% - 16px)
}
.category:nth-child(2n) {
margin-right: 0;
}
}
@media (max-width: 639px) {
.category {
width: 100%;
margin-right: 0
}
}
.category__all-link {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
height: 72px;
padding: 8px 16px;
color: #fff;
font-size: 24px;
font-size: 1.5rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
background-color: #000;
transition: background 200ms ease
}
.category__all-link:hover {
color: #fff;
background-color: #f30;
}
.category__product-wrapper {
padding: 0 8px 24px
}
@media (max-width: 639px) {
.category__product-wrapper {
padding: 0 8px 16px
}
}
.category__product-pic {
max-height: 208px;
overflow: hidden;
margin-bottom: 24px;
}
.category__product-pic img {
width: 100%;
display: block;
}
.category__product-company {
color: #999;
font-size: 12px;
font-size: 0.75rem;
}
.category__product-info {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 639px) {
.category__product-info {
display: block
}
}
.category__product-info p {
margin-bottom: 0;
}
.category__product-info button {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5;
}
.category__product-right {
min-width: 80px;
text-align: right;
line-height: 1.5;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-left: 8px
}
@media (max-width: 639px) {
.category__product-right {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: 0;
margin-top: 16px
}
}
.category__product-name a {
color: #fff
}
.category__product-name a:hover {
color: #f30;
}
.category__product-price {
font-family: Bernier, Arial, Helvetica, sans-serif;
}
.category__product-desc-text {
margin-right: 8px;
}
.category__product-instock {
display: inline-block;
color: #f30;
vertical-align: baseline;
white-space: nowrap;
}
.catalog-list {
display: -ms-flexbox;
display: flex;
padding-bottom: 16px;
}
.catalog-list__item {
/* три колонки */
width: calc(33.33333% - 21.33333px);
margin-right: 32px;
margin-bottom: 0;
padding-bottom: 16px
}
.catalog-list__item:nth-child(3n) {
/* margin-right: 0;*/
}
@media (max-width: 767px) {
.catalog-list__item {
width: 245px;
margin-right: 24px;
margin-bottom: 24px
}
}
@media (min-width: 768px) {
.catalog-list__item:nth-child(3n) {
margin-right: 0;
}
}
.catalog-list__item-pic {
margin-bottom: 12px;
}
.catalog-list__item-pic img {
display: block;
width: 100%;
max-height: 100%;
}
.catalog-list__item-text {
margin-bottom: 0;
}
.catalog-list__link {
display: block;
color: #fff;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: uppercase
}
.catalog-list__link:hover {
color: #f30;
}
.parsley-error {
border-color: #f30;
}
.parsley-error-message {
color: #f30;
font-size: 12px;
font-size: 0.75rem;
/* такие отступы, чтобы поместилась 1 строка ошибки без дёрганий */
margin: -27px 0 7px 0;
}
.bike-card {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 1023px) {
.bike-card {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.bike-card + .bike-card {
margin-top: 64px;
}
.bike-card__carousel {
display: -ms-flexbox;
display: flex;
width: 66.66667%
}
@media (max-width: 1023px) {
.bike-card__carousel {
width: 100%
}
}
@media (max-width: 767px) {
.bike-card__carousel {
-ms-flex-wrap: wrap;
flex-wrap: wrap
/* margin-bottom: calc($gutter-step * 3); */
}
}
.bike-card__carousel img {
display: block;
}
.bike-card__preview {
width: 19.85%
}
@media (max-width: 767px) {
.bike-card__preview {
display: none
}
}
@media (min-width: 768px) {
.bike-card__preview--left {
-ms-flex-order: -1;
order: -1
}
}
.bike-card__preview-pic {
display: block;
position: relative;
width: 100%;
cursor: pointer
}
@media (max-width: 767px) {
.bike-card__preview-pic {
width: 25%
}
}
.bike-card__preview-pic::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
transition: background 200ms ease;
}
.bike-card__preview-pic.is-active::after {
background-color: transparent;
}
.bike-card__big-pic {
width: 79.4%;
pointer-events: none
}
@media (max-width: 767px) {
.bike-card__big-pic {
width: 100%;
pointer-events: all
}
}
.bike-card__big-pic-item {
width: 100%
}
@media (max-width: 767px) {
.bike-card__big-pic-item {
margin-bottom: 16px
}
}
.bike-card__content {
width: 50%;
/* padding-top: 80px;*/
padding-left: 50px;
}
@media (max-width: 1479px) {
.bike-card__content {
padding-top: 40px
}
}
@media (max-width: 1023px) {
.bike-card__content {
padding-top: 32px;
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 767px) {
.bike-card__content {
padding-top: 16px
}
}
@media (max-width: 479px) {
.bike-card__content {
padding-top: 8px
}
}
@media (min-width: 1024px) {
.bike-card__content--left {
-ms-flex-order: -1;
order: -1;
padding-left: 0 !important;
padding-right: 50px;
}
}
.bike-card__content--pt-sm {
padding-top: 40px
}
@media (max-width: 1023px) {
.bike-card__content--pt-sm {
padding-top: 32px
}
}
@media (max-width: 479px) {
.bike-card__content--pt-sm {
padding-top: 16px
}
}
.bike-card__name {
display: inline-block;
vertical-align: top;
font-size: 32px;
font-size: 2rem;
margin-bottom: 32px
}
@media (max-width: 1023px) {
.bike-card__name {
font-size: 1.375rem;
margin-bottom: 16px
}
}
.index-page-bikes .bike-card__name,
.wrap-main--white-bg .bike-card__name {
color: #1d1d1d;
}
.bike-card__desc {
margin-bottom: 40px
}
@media (max-width: 1023px) {
.bike-card__desc {
margin-bottom: 24px
}
}
.index-page-bikes .bike-card__desc,
.wrap-main--white-bg .bike-card__desc {
color: #1d1d1d;
}
@media (max-width: 1023px) {
.bike-card__footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
}
.bike-card__price {
margin-bottom: 32px;
font-size: 24px;
font-size: 1.5rem;
font-family: Bernier, Arial, Helvetica, sans-serif
}
@media (max-width: 1023px) {
.bike-card__price {
width: 50%;
margin-bottom: 0
}
}
.index-page-bikes .bike-card__price,
.wrap-main--white-bg .bike-card__price {
color: #1d1d1d;
}
@media (max-width: 1023px) {
.bike-card__btn {
min-width: 0;
width: 50%;
margin-bottom: 0
}
}
.bike-card .slick-dots li {
background-color: #999;
opacity: 1
}
.bike-card .slick-dots li.slick-active {
background-color: #f30;
}
.field {
position: relative;
}
.field__label {
position: absolute;
top: 18px;
left: 24px;
font-size: 16px;
font-size: 1rem;
color: #999;
pointer-events: none;
transform: translateY(22px);
transition: all 200ms ease;
}
.is-filled .field__label {
font-size: 12px;
font-size: 0.75rem;
transform: translateY(0);
}
.field__calendar {
position: absolute;
top: 44px;
right: 24px;
}
.price {
display: inline-block;
vertical-align: baseline;
font-family: Bernier, Arial, Helvetica, sans-serif;
}
.price--old {
position: relative;
margin-left: 16px;
padding: 0 12px;
color: #999
}
.price--old::before {
content: '';
position: absolute;
left: 1px;
right: 2px;
top: 50%;
height: 1px;
background-color: #999;
}
.price--fz-32 {
font-size: 32px;
font-size: 2rem;
}
.spinner {
display: -ms-inline-flexbox;
display: inline-flex;
height: 40px;
border: none;
}
.spinner input[type='number'] {
width: 5ch;
padding: 0 8px;
color: #fff;
height: 100%;
border: none;
font-size: 16px;
font-size: 1rem;
line-height: 40px;
line-height: 2.5rem;
text-align: center;
outline: none;
background-color: transparent;
}
.spinner__btn {
position: relative;
width: 32px;
padding: 0;
border: none;
background: none;
outline: none;
cursor: pointer
}
.spinner__btn:disabled {
cursor: default;
pointer-events: none;
}
.spinner__icon {
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
fill: #fff;
}
.spinner__btn:hover .spinner__icon {
fill: #fff;
}
.spinner__btn:disabled .spinner__icon {
fill: #999;
}
.cart-items {
margin: 0;
overflow: auto;
}
.cart-items--page {
overflow: visible;
}
.cart-items__item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid rgba(255, 255, 255, .2)
}
@media (max-width: 639px) {
.cart-items__item {
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.cart-items__item--checkout {
border-bottom: none;
padding: 12px 0;
}
@media (max-width: 639px) {
.cart-items__item--page {
padding-top: 36px
}
}
.cart-items__item-img {
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: start;
align-self: flex-start;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 96px;
height: 72px;
overflow: hidden;
margin-right: 24px;
background-color: rgb(34, 34, 34);
transition: none
}
@media (max-width: 639px) {
.cart-items__item-img {
margin-right: 16px;
width: 56px;
height: 40px
}
}
.cart-items__item-content {
-ms-flex-positive: 1;
flex-grow: 1;
padding-right: 24px
}
@media (max-width: 639px) {
.cart-items__item-content {
-ms-flex-negative: 0;
flex-shrink: 0;
width: calc(100% - 72px);
padding-right: 0;
margin-bottom: 16px
}
}
.cart-items__item--checkout .cart-items__item-content {
-ms-flex-item-align: start;
align-self: flex-start;
margin-bottom: 0;
}
.cart-items__item-brand {
margin-bottom: 0;
color: #999;
}
.cart-items__item-name {
display: block;
margin-bottom: 8px;
}
.cart-items__item-number {
margin-bottom: 0;
color: #999;
font-size: 12px;
font-size: 0.75rem;
}
.cart-items__item-price {
margin-bottom: 0;
}
.cart-items__item-price .price {
font-size: 22px;
font-size: 1.375rem
}
@media (max-width: 1023px) {
.cart-items__item-price .price {
font-size: 1.125rem
}
}
.cart-items__item-price .price--old {
margin-left: 8px;
font-size: 16px;
font-size: 1rem;
}
.cart-items__item-spinner {
width: 23%;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media (max-width: 767px) {
.cart-items__item-spinner {
width: auto
}
}
.cart-items__item-aside {
font-size: 18px;
font-size: 1.125rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
color: #fff;
min-width: 128px;
margin-left: 8px;
text-align: right
}
@media (max-width: 639px) {
.cart-items__item-aside {
min-width: 0;
width: calc(100% - 72px);
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-left: auto;
text-align: left
}
}
.cart-items__item--page .cart-items__item-aside {
font-size: 22px;
font-size: 1.375rem
}
@media (max-width: 1023px) {
.cart-items__item--page .cart-items__item-aside {
font-size: 1.125rem
}
}
@media (max-width: 639px) {
.cart-items__item--page .cart-items__item-aside {
text-align: right;
width: auto;
min-width: 128px
}
}
.cart-items__item-aside-price {
display: inline-block;
vertical-align: top;
width: 128px;
text-align: left
}
@media (max-width: 767px) {
.cart-items__item-aside-price {
width: auto
}
}
.cart-items__item--page .cart-items__item-aside-price {
width: auto;
}
.cart-items__item-remove {
width: 20px;
height: 20px;
margin-left: 8px
}
@media (max-width: 639px) {
.cart-items__item-remove {
position: absolute;
top: 16px;
right: 0
}
}
/* @see https://atomiks.github.io/tippyjs/themes/ */
.tippy-tooltip.tooltip-theme {
background-color: #fff;
max-width: 300px;
padding: 16px 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .1)
}
@media (max-width: 479px) {
.tippy-tooltip.tooltip-theme {
max-width: 250px
}
}
.tippy-tooltip.tooltip-theme .tippy-content {
text-align: left;
font-size: 12px;
font-size: 0.75rem;
color: #1d1d1d;
}
.table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
}
/* &__row {
} */
.table__cell {
padding-top: 12px;
padding-bottom: 12px;
padding-right: 16px
}
.table__cell:last-child {
padding-right: 0;
text-align: right;
}
.table__cell--p-xs {
padding-top: 4px;
padding-bottom: 4px;
}
.table--thank-page {
max-width: 320px;
}
.cart-modal {
display: none;
position: fixed;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
-ms-flex-direction: column;
flex-direction: column;
width: 584px;
color: #fff;
background-color: #111;
opacity: 0;
transition: 200ms opacity 200ms ease
}
@media (max-width: 767px) {
.cart-modal {
width: 100%
}
}
.cart-modal.is-active {
display: -ms-flexbox;
display: flex;
opacity: 1;
}
.cart-modal__content {
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 48px 40px 0 48px
}
@media (max-width: 1023px) {
.cart-modal__content {
padding: 32px 24px 0 32px
}
}
@media (max-width: 767px) {
.cart-modal__content {
padding-left: 24px;
padding-right: 16px
}
}
.cart-modal__title {
margin-top: 0;
margin-bottom: 8px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.cart-modal__cart-items-wrapper {
padding-right: 8px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cart-modal__close {
position: absolute;
top: 24px;
right: 24px
}
@media (max-width: 767px) {
.cart-modal__close {
top: 16px;
right: 16px
}
}
.cart-modal__footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 24px 48px;
background-color: #d02700;
color: #fff
}
@media (max-width: 1023px) {
.cart-modal__footer {
padding: 16px 32px
}
}
@media (max-width: 767px) {
.cart-modal__footer {
padding: 16px 24px
}
}
.cart-modal__footer:hover {
color: #fff;
}
.cart-modal__footer-name {
margin-bottom: 0;
}
.cart-modal__footer-amount {
margin-bottom: 0;
font-weight: bold;
font-family: Bernier, Arial, Helvetica, sans-serif;
font-size: 22px;
font-size: 1.375rem;
}
.cart-modal__footer-text {
font-size: 22px;
font-size: 1.375rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
color: #fff
}
@media (max-width: 767px) {
.cart-modal__footer-text {
font-size: 1.125rem
}
}
.offer {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 20px 40px;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
font-size: 18px;
font-size: 1.125rem;
background-image: url('../img/offer.jpeg');
background-size: cover;
background-position: center center
}
@media (max-width: 639px) {
.offer {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 16px 24px;
font-size: 1rem
}
}
.offer::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background-color: #111;
opacity: 0.7;
}
.offer--mb {
margin-bottom: 64px
}
@media (max-width: 639px) {
.offer--mb {
margin-bottom: 24px
}
}
.offer__icon {
margin-right: 16px;
z-index: 1
}
@media (max-width: 639px) {
.offer__icon {
width: 17px;
height: 27px
}
}
.offer__discount {
position: relative;
z-index: 1;
color: #f30;
font-size: 64px;
font-size: 4rem;
margin-right: 32px
}
@media (max-width: 639px) {
.offer__discount {
font-size: 2rem
}
}
.offer__desc {
position: relative;
z-index: 1
}
@media (max-width: 639px) {
.offer__desc {
width: 100%
}
}
/* Spacings
Использование: добавляются классы .m-0 .m-xl .mt-xs .mv-l и т.д. (аналогично с padding)
*/
/* Переменные */
/* Margin */
.m-0 {
margin: 0 !important;
}
.m-xs {
margin: 8px !important;
}
.m-s {
margin: 16px !important;
}
.m-m {
margin: 32px !important;
}
.m-l {
margin: 48px !important;
}
.m-xl {
margin: 64px !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-xs {
margin-top: 8px !important;
}
.mt-s {
margin-top: 16px !important;
}
.mt-m {
margin-top: 32px !important;
}
.mt-l {
margin-top: 48px !important;
}
.mt-xl {
margin-top: 64px !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mr-xs {
margin-right: 8px !important;
}
.mr-s {
margin-right: 16px !important;
}
.mr-m {
margin-right: 32px !important;
}
.mr-l {
margin-right: 48px !important;
}
.mr-xl {
margin-right: 64px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-xs {
margin-bottom: 8px !important;
}
.mb-s {
margin-bottom: 16px !important;
}
.mb-m {
margin-bottom: 32px !important;
}
.mb-l {
margin-bottom: 48px !important;
}
.mb-xl {
margin-bottom: 64px !important;
}
.ml-0 {
margin-left: 0 !important;
}
.ml-xs {
margin-left: 8px !important;
}
.ml-s {
margin-left: 16px !important;
}
.ml-m {
margin-left: 32px !important;
}
.ml-l {
margin-left: 48px !important;
}
.ml-xl {
margin-left: 64px !important;
}
.mv-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.mv-xs {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.mv-s {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.mv-m {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
.mv-l {
margin-top: 48px !important;
margin-bottom: 48px !important;
}
.mv-xl {
margin-top: 64px !important;
margin-bottom: 64px !important;
}
.mh-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.mh-xs {
margin-right: 8px !important;
margin-left: 8px !important;
}
.mh-s {
margin-right: 16px !important;
margin-left: 16px !important;
}
.mh-m {
margin-right: 32px !important;
margin-left: 32px !important;
}
.mh-l {
margin-right: 48px !important;
margin-left: 48px !important;
}
.mh-xl {
margin-right: 64px !important;
margin-left: 64px !important;
}
/* Padding */
.p-0 {
padding: 0 !important;
}
.p-xs {
padding: 8px !important;
}
.p-s {
padding: 16px !important;
}
.p-m {
padding: 32px !important;
}
.p-l {
padding: 48px !important;
}
.p-xl {
padding: 64px !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pt-xs {
padding-top: 8px !important;
}
.pt-s {
padding-top: 16px !important;
}
.pt-m {
padding-top: 32px !important;
}
.pt-l {
padding-top: 48px !important;
}
.pt-xl {
padding-top: 64px !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pr-xs {
padding-right: 8px !important;
}
.pr-s {
padding-right: 16px !important;
}
.pr-m {
padding-right: 32px !important;
}
.pr-l {
padding-right: 48px !important;
}
.pr-xl {
padding-right: 64px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-xs {
padding-bottom: 8px !important;
}
.pb-s {
padding-bottom: 16px !important;
}
.pb-m {
padding-bottom: 32px !important;
}
.pb-l {
padding-bottom: 48px !important;
}
.pb-xl {
padding-bottom: 64px !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pl-xs {
padding-left: 8px !important;
}
.pl-s {
padding-left: 16px !important;
}
.pl-m {
padding-left: 32px !important;
}
.pl-l {
padding-left: 48px !important;
}
.pl-xl {
padding-left: 64px !important;
}
.pv-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.pv-xs {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.pv-s {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.pv-m {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.pv-l {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.pv-xl {
padding-top: 64px !important;
padding-bottom: 64px !important;
}
.ph-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.ph-xs {
padding-right: 8px !important;
padding-left: 8px !important;
}
.ph-s {
padding-right: 16px !important;
padding-left: 16px !important;
}
.ph-m {
padding-right: 32px !important;
padding-left: 32px !important;
}
.ph-l {
padding-right: 48px !important;
padding-left: 48px !important;
}
.ph-xl {
padding-right: 64px !important;
padding-left: 64px !important;
}
.mobile-menu {
display: none;
/* position: absolute; */
position: fixed;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding-top: 16px;
padding-bottom: 16px;
background-color: #111;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
.mobile-menu.is-active {
display: block
}
@media (min-width: 1024px) {
.mobile-menu.is-active {
display: none
}
}
.mobile-menu__close {
position: relative;
left: -12px;
}
.mobile-menu__menu {
padding-top: 24px;
}
.mobile-menu__menu-item {
margin-bottom: 8px;
font-size: 22px;
font-size: 1.375rem;
}
.mobile-menu__hr {
margin: 36px 0;
}
.mobile-menu__contacts-item {
margin-bottom: 8px;
}
/* Стилизация полей с датой (datepicker) */
.ui-datepicker {
z-index: 10 !important;
background: #fff;
border: none;
width: 300px;
padding: 24px 16px;
box-shadow: 0 0 32px rgba(0, 0, 0, .2);
}
.ui-datepicker .ui-datepicker-header {
height: 32px;
padding: 0;
line-height: 32px;
line-height: 2rem;
margin-bottom: 12px;
}
.ui-datepicker .ui-datepicker-title {
color: #1d1d1d;
text-transform: uppercase;
font-size: 13px;
font-size: 0.8125rem;
font-weight: bold;
line-height: 32px;
line-height: 2rem;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
display: inline-block;
vertical-align: top;
height: 30px;
padding: 0 8px 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
border: none;
display: block;
top: 0;
width: 32px;
height: 32px;
text-align: left;
cursor: pointer;
background: url('../img/svg/arrow_next.svg') no-repeat center;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
display: none;
}
.ui-datepicker .ui-datepicker-prev.ui-state-disabled, .ui-datepicker .ui-datepicker-next.ui-state-disabled {
opacity: 0.5;
}
.ui-datepicker .ui-datepicker-prev {
left: 0;
transform: rotate(180deg);
}
.ui-datepicker .ui-datepicker-next {
right: 0;
}
.ui-datepicker .ui-datepicker-calendar {
width: 100%;
table-layout: fixed;
margin: 0;
}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
padding: 2px 0;
text-align: center;
}
.ui-datepicker .ui-datepicker-calendar th {
padding-bottom: 12px;
font-size: 10px;
font-size: 0.625rem;
text-transform: uppercase;
color: #999;
}
.ui-datepicker .ui-datepicker-calendar td {
font-size: 13px;
font-size: 0.8125rem;
/* &.ui-datepicker-week-end {
a {
color: $cl-pink;
&:hover {
color: #fff;
}
}
} */
}
.ui-datepicker .ui-datepicker-calendar td .ui-state-default {
display: inline-block;
vertical-align: top;
width: 32px;
height: 24px;
padding: 0;
line-height: 22px;
line-height: 1.375rem;
text-align: center;
border: 1px solid transparent;
border-radius: 3px
}
.ui-datepicker .ui-datepicker-calendar td .ui-state-default.ui-state-highlight {
color: #f30;
}
.ui-datepicker .ui-datepicker-calendar td .ui-state-default.ui-state-active {
color: #fff;
background-color: #f30;
}
.ui-datepicker .ui-datepicker-calendar td .ui-state-default.ui-statu-hover {
color: #f30;
background-color: #999;
}
.ui-datepicker .ui-datepicker-calendar td a {
color: #1d1d1d
}
.ui-datepicker .ui-datepicker-calendar td a:hover {
color: #f30;
background-color: #999;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month {
color: #999;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable {
color: #999;
}
.datepicker {
position: relative;
}
.datepicker .icon {
position: absolute;
top: 11px;
right: 12px;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
line-height: 1;
bottom: 32px
}
@media (max-width: 1023px) {
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 24px
}
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
height: 16px;
width: 16px;
}
.swiper-pagination-bullet {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 1;
border-radius: 0;
background-color: transparent;
vertical-align: middle;
}
.thank-page__hl {
margin-bottom: 40px
}
@media (max-width: 1023px) {
.thank-page__hl {
margin-bottom: 16px
}
}
.thank-page__table {
max-width: 320px;
margin-bottom: 40px
}
@media (max-width: 1023px) {
.thank-page__table {
margin-bottom: 24px
}
}
.thank-page__text {
max-width: 400px;
margin-bottom: 40px
}
@media (max-width: 1023px) {
.thank-page__text {
margin-bottom: 24px
}
}
@media (max-width: 767px) {
.thank-page__btn {
display: block;
width: 100%
}
}
.checkout {
color: #fff;
}
.checkout__back-link {
margin-bottom: 56px
}
@media (max-width: 1023px) {
.checkout__back-link {
margin-bottom: 24px
}
}
.checkout__subheader {
margin-bottom: 32px;
}
.checkout__payment {
margin-bottom: 32px;
}
.checkout__payment-tooltip {
position: absolute;
top: 16px;
right: 16px;
opacity: 0.4
}
@media (max-width: 1023px) {
.checkout__payment-tooltip {
top: 24px
}
}
.checkout__payment-tooltip:hover {
opacity: 1;
}
.checkout__tabs {
margin-bottom: 56px;
}
@media (max-width: 1023px) {
.checkout__form-wrapper {
-ms-flex-order: 2;
order: 2
}
}
.checkout__collapse-body {
display: none
}
@media (min-width: 1024px) {
.checkout__collapse-body {
/* для того, чтобы перекрыть инлайновые стили, которые могут задаваться из js при ресайзе с мобилки на десктоп */
display: block !important
}
}
@media (max-width: 1023px) {
.checkout__cart {
-ms-flex-order: 1;
order: 1
}
}
.checkout__cart-total {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
font-size: 1.125rem
}
@media (min-width: 1024px) {
.checkout__cart-total {
display: none
}
}
.checkout__cart-total-btn {
position: relative;
display: inline-block;
width: 44px;
height: 44px;
fill: #fff;
}
.checkout__cart-total-btn .icon {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: transform 200ms ease;
}
.checkout__cart-total-btn.is-active .icon {
transform: translateY(-50%) rotate(180deg);
}
.checkout__form-descr {
margin-bottom: 32px;
}
.checkout__pickup-map {
width: 100%;
height: 264px;
}
.checkout__comment {
margin-bottom: 56px;
}
.form-cols {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.form-cols__col {
width: calc(50% - 16px)
}
@media (max-width: 767px) {
.form-cols__col {
width: 100%
}
}
.form-cols__col--1of3 {
width: calc(33.33333% - 10.66667px)
}
@media (max-width: 767px) {
.form-cols__col--1of3 {
width: 100%
}
}
.form-cols__col--2of3 {
width: calc(66.66667% - 21.33333px)
}
@media (max-width: 767px) {
.form-cols__col--2of3 {
width: 100%
}
}
.tabs__head {
position: relative;
display: -ms-flexbox;
display: flex;
margin-bottom: 32px
}
.tabs__head::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
height: 1px;
background-color: #fff;
}
.tabs__head-link {
min-width: 175px;
padding: 24px 32px;
font-size: 18px;
font-size: 1.125rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
color: #999;
text-align: center;
text-transform: lowercase;
border: 1px solid #111;
border-bottom-color: #fff;
transition: all 200ms ease;
cursor: pointer
}
@media (max-width: 1023px) {
.tabs__head-link {
min-width: 0;
width: 50%;
padding: 16px 24px
}
}
.tabs__head-link.is-active {
position: relative;
color: #fff;
border-color: #fff;
border-bottom-color: #111;
cursor: default;
pointer-events: none;
}
/* &__body {
} */
.tabs__item {
display: none
}
.tabs__item.is-active {
display: block;
}
.header {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
padding: 32px 0 80px;
color: #fff;
background-color: #111;
transition: background 200ms ease
}
@media (max-width: 1023px) {
.header {
padding: 16px 0 32px
}
}
.header--gradient {
background-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);
}
.header--index {
background-color: transparent
}
@media (max-width: 1023px) {
.header--index {
padding-bottom: 64px
}
}
.header.is-active {
background-color: #111
}
@media (min-width: 1024px) {
.header.is-active {
padding-bottom: 64px
}
}
.header__container {
position: relative;
z-index: 2;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header__container--dropdown {
z-index: 1;
display: none;
padding-top: 56px
}
@media (max-width: 1479px) {
.header__container--dropdown.container {
padding-top: 40px;
}
}
@media (min-width: 1024px) {
.header__container--dropdown.is-active {
display: -ms-flexbox;
display: flex
}
}
.header__col {
width: calc(33.33333% - 21.33333px)
}
@media (max-width: 1279px) {
.header__col {
-ms-flex-positive: 1;
flex-grow: 1
}
}
@media (max-width: 1023px) {
.header__col {
width: calc(50% - 40px);
-ms-flex-positive: 0;
flex-grow: 0
}
}
.header__col--logo {
text-align: center
}
@media (max-width: 1279px) {
.header__col--logo {
-ms-flex-positive: 0;
flex-grow: 0;
width: 250px
}
}
@media (max-width: 1023px) {
.header__col--logo {
width: 80px
}
}
.header__col--flex-grow {
-ms-flex-positive: 1;
flex-grow: 1;
}
.header__col-top {
padding-top: 8px;
margin-bottom: 24px
}
@media (max-width: 1023px) {
.header__col-top {
margin-bottom: 0
}
}
.header__col-top--right {
text-align: right;
}
@media (max-width: 1023px) {
.header__col-tel {
display: none
}
}
.header__col-time {
display: inline-block;
vertical-align: baseline;
color: #999;
margin-left: 32px
}
@media (max-width: 1023px) {
.header__col-time {
display: none
}
}
.header__col-menu-btn {
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-ms-flex-direction: column;
flex-direction: column;
width: 44px;
height: 44px;
fill: #fff
}
@media (min-width: 1024px) {
.header__col-menu-btn {
display: none
}
}
@media (max-width: 1023px) {
.header__col-cart {
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: top;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: end;
justify-content: flex-end;
width: 44px;
height: 44px
}
}
.header__col-cart--empty {
color: #999
}
@media (max-width: 1023px) {
.header__col-cart--empty {
width: auto;
height: auto
}
}
@media (max-width: 767px) {
.header__col-cart--empty {
font-size: 0.75rem
}
}
.header__col-cart-text {
margin-right: 8px
}
@media (max-width: 1023px) {
.header__col-cart-text {
display: none
}
}
.header__col-menu {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px;
font-size: 1.125rem
}
@media (max-width: 1023px) {
.header__col-menu {
display: none
}
}
.header__logo {
display: inline-block;
vertical-align: top;
}
.header__dropdown-col {
/* 3 колонки */
width: calc(75% - 24px);
}
.header__dropdown-col--1of4 {
/* 1 колонка */
width: calc(25% - 8px);
}
.header__dropdown-col--1of2 {
width: calc(50% - 16px);
}
.header__dropdown-col-text {
max-width: 510px;
color: #999;
margin-bottom: 32px;
}
.header__dropdown-list {
padding-top: 24px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
grid-column-gap: 32px;
-webkit-column-gap: 32px;
-moz-column-gap: 32px;
column-gap: 32px;
font-size: 18px;
font-size: 1.125rem;
}
.header__dropdown-list--no-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.header__dropdown-list-item {
margin-bottom: 16px;
}
.header__dropdown-card-link {
display: block;
padding: 40px 48px;
height: 208px;
font-family: Bernier, Arial, Helvetica, sans-serif;
font-size: 24px;
font-size: 1.5rem;
color: #fff;
background-size: cover;
}
.header__how-to-title {
font-size: 22px;
font-size: 1.375rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
margin-bottom: 24px;
}
.header__how-to-mb {
margin-bottom: 24px;
}
.header__how-to-mb0 {
margin-bottom: 0;
}
.header-placeholder {
height: 235px;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media (max-width: 1023px) {
.header-placeholder {
height: 103px
}
}
.header-placeholder--index {
height: 0;
display: none;
}
.socials {
display: -ms-inline-flexbox;
display: inline-flex;
}
.socials__item {
margin-bottom: 0;
margin-right: 32px
}
.socials__item:last-child {
margin-right: 0;
}
.socials__link {
fill: #fff;
}
.bikes-carousel {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 1023px) {
.bikes-carousel__item {
margin: 0 8px
}
.bikes-carousel__item:first-child {
margin-left: 0;
}
.bikes-carousel__item:last-child {
margin-right: 0;
}
}
.bikes-carousel__item input[type='radio'] + .bikes-carousel__item-label {
margin: 0;
padding: 0
}
.bikes-carousel__item input[type='radio'] + .bikes-carousel__item-label::before,
.bikes-carousel__item input[type='radio'] + .bikes-carousel__item-label::after {
content: none;
}
.bikes-carousel__item input[type='radio']:checked + .bikes-carousel__item-label .bikes-carousel__item-title {
color: #f30;
}
.bikes-carousel__item input[type='radio']:checked + .bikes-carousel__item-label .bikes-carousel__item-img {
opacity: 1;
}
.bikes-carousel__item-title {
margin-bottom: 0;
font-size: 32px;
font-size: 2rem;
line-height: 1;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
text-align: center;
color: #1d1d1d;
transition: color 200ms ease
}
@media (max-width: 1023px) {
.bikes-carousel__item-title {
font-size: 1.5rem
}
}
@media (min-width: 1024px) {
.bikes-carousel__item-label:hover .bikes-carousel__item-title {
/* color: $cl-global-invert; */
}
}
.bikes-carousel__item-img {
max-width: 160px;
opacity: 0.75;
margin: 0 auto;
transition: opacity 200ms ease
}
@media (max-width: 1023px) {
.bikes-carousel__item-img {
max-width: 128px
}
}
@media (min-width: 1024px) {
.bikes-carousel__item-label:hover .bikes-carousel__item-img {
opacity: 1
}
}
.accessories-selection {
padding: 48px 0;
background: #fff url('../img/white_bg.jpg') no-repeat center;
background-size: cover;
color: #1d1d1d
}
@media (max-width: 1023px) {
.accessories-selection {
padding: 24px 0
}
}
.accessories-selection__hl {
margin-bottom: 80px;
text-align: center
}
@media (max-width: 1023px) {
.accessories-selection__hl {
margin-bottom: 32px;
font-size: 1.75rem
}
}
.accessories-selection__carousel {
margin-bottom: 80px
}
@media (max-width: 1023px) {
.accessories-selection__carousel {
margin-bottom: 40px
}
}
@media (max-width: 767px) {
.accessories-selection__carousel {
margin-left: -24px;
margin-right: -24px
}
}
.accessories-selection__row {
display: -ms-flexbox;
display: flex
}
.accessories-selection__row.inactive {
position: relative;
opacity: 0.5;
}
.accessories-selection-block {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 10;
}
.accessories-selection-block.hide {
display: none;
}
@media (max-width: 1023px) {
.accessories-selection__row {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.accessories-selection__row-col {
width: calc(25% - 24px);
margin-right: 32px
}
@media (max-width: 1023px) {
.accessories-selection__row-col {
width: calc(33.33333% - 21.33333px)
}
}
@media (max-width: 767px) {
.accessories-selection__row-col {
width: 100%;
margin-right: 0
}
}
.accessories-selection__row-col:last-child {
margin-right: 0;
}
.accessories-selection__row-col--2of4 {
width: calc(50% - 48px)
}
@media (max-width: 1023px) {
.accessories-selection__row-col--2of4 {
width: calc(33.33333% - 21.33333px)
}
}
@media (max-width: 767px) {
.accessories-selection__row-col--2of4 {
width: 100%
}
}
.accessories-selection__row-btn {
height: 80px;
margin-bottom: 24px;
}
.footer {
padding-top: 40px;
padding-bottom: 32px;
color: #fff;
margin-top: auto;
background-color: #111
}
@media (max-width: 1023px) {
.footer {
padding-top: 32px;
padding-bottom: 8px
}
}
.footer__cols {
display: -ms-grid;
display: grid;
grid-column-gap: 32px;
-ms-grid-rows: auto;
-ms-grid-columns: 2fr 32px 1fr 32px 1fr;
grid-template: auto / 2fr 1fr 1fr;
margin-bottom: 48px
}
@media (max-width: 1023px) {
.footer__cols {
display: block;
margin-bottom: 0
}
}
@media (max-width: 1023px) {
.footer__cols-item {
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, .2)
}
.footer__cols-item:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
.footer__shop-title {
font-size: 18px;
font-size: 1.125rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
}
.footer__shop {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
grid-column-gap: 32px;
-webkit-column-gap: 32px;
-moz-column-gap: 32px;
column-gap: 32px
}
@media (max-width: 1023px) {
.footer__shop {
grid-column-gap: 16px;
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px
}
}
@media (max-width: 1023px) {
.footer__shop li {
margin-bottom: 8px
}
}
@media (max-width: 1023px) {
.footer__menu {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
grid-column-gap: 16px;
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px
}
}
.footer__menu li {
margin-bottom: 16px
}
.footer__menu li:last-child {
margin-bottom: 0;
}
@media (max-width: 1023px) {
.footer__hr {
margin-bottom: 8px
}
}
.footer__copyrights {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 40px
}
@media (max-width: 1023px) {
.footer__copyrights {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.footer__copyrights-socials {
-ms-flex-align: center;
align-items: center
}
@media (max-width: 767px) {
.footer__copyrights-socials {
margin-bottom: 16px
}
}
.footer__copyrights-col {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
@media (max-width: 1023px) {
.footer__copyrights-col {
width: 100%;
text-align: center;
margin-bottom: 24px
}
}
@media (max-width: 767px) {
.footer__copyrights-col {
-ms-flex-direction: column;
flex-direction: column
}
}
.footer__copyrights-col:last-child {
text-align: right
}
@media (max-width: 1023px) {
.footer__copyrights-col:last-child {
text-align: center;
-ms-flex-order: -1;
order: -1
}
}
.footer__copyrights-text {
margin-bottom: 0;
color: #999;
}
.footer__copyrights-link {
max-width: 252px;
max-height: 52px;
display: inline-block;
vertical-align: top;
margin-right: 56px
}
@media (max-width: 767px) {
.footer__copyrights-link {
margin-right: 0;
margin-bottom: 32px
}
}
.footer__copyrights-link img {
display: block;
}
.index-page-hl {
margin-top: 0;
margin-bottom: 56px;
font-size: 40px;
font-size: 2.5rem;
line-height: 1.4
}
@media (max-width: 1023px) {
.index-page-hl {
margin-bottom: 40px;
font-size: 1.75rem
}
}
.index-page-bikes {
padding: 80px 0 64px;
background-image: url('../img/instagram_bg.jpg');
background-size: cover
}
@media (max-width: 767px) {
.index-page-bikes {
padding: 40px 0
}
}
.index-page-bikes__hl {
text-align: center;
color: #1d1d1d;
}
.index-page-brands {
padding: 80px 0
}
@media (max-width: 1023px) {
.index-page-brands {
padding: 40px 0
}
}
.index-page-brands__hl {
text-align: center;
margin-bottom: 32px;
}
.index-page-contacts {
padding: 80px 0;
background-image: url('../img/contacts_bg.jpg');
background-size: cover;
margin-bottom: 40px
}
@media (max-width: 767px) {
.index-page-contacts {
padding: 32px 0;
margin-bottom: 24px
}
}
.index-page-contacts__hl {
text-align: center;
margin-bottom: 64px
}
@media (max-width: 767px) {
.index-page-contacts__hl {
margin-bottom: 32px
}
}
.index-page-contacts__cols {
display: -ms-flexbox;
display: flex
}
@media (max-width: 1023px) {
.index-page-contacts__cols {
display: block
}
}
.index-page-contacts__desc {
width: calc(25% - 8px);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
@media (max-width: 1023px) {
.index-page-contacts__desc {
display: block;
width: 100%;
margin-bottom: 32px
}
}
.index-page-contacts__how-btn {
margin-top: auto;
margin-bottom: 0;
}
.index-page-contacts__map {
height: 320px;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
margin-left: 32px
}
#map [class$="-ground-pane"] {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
@media (max-width: 1023px) {
.index-page-contacts__map {
margin-left: 0
}
}
.brands {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 1023px) {
.brands {
width: calc(100% + 48px);
margin: 0 -24px;
padding-left: 24px;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch
}
}
.brands__item {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-ms-flex-negative: 1;
flex-shrink: 1
}
@media (min-width: 1480px) {
.brands__item {
max-width: 150px
}
}
@media (max-width: 1479px) {
.brands__item {
margin-right: 24px
}
}
.brands__item:last-child {
margin-right: 0;
}
.brands__link {
display: inline-block;
}
.brands__img {
display: block;
-webkit-filter: grayscale(1);
filter: url('data:image/svg+xml;charset=utf-8,#filter');
filter: grayscale(1);
opacity: 0.5;
transition: all 200ms ease
}
@media (min-width: 1480px) {
.brands__img {
max-width: 100%;
max-height: 116px
}
}
@media (max-width: 1479px) {
.brands__img {
max-height: 50px;
max-width: 95px
}
}
.brands__link:hover .brands__img {
-webkit-filter: grayscale(0);
filter: url('data:image/svg+xml;charset=utf-8,#filter');
filter: grayscale(0);
opacity: 1;
}
.contacts {
position: relative;
padding-bottom: 96px
}
@media (max-width: 1023px) {
.contacts {
padding-bottom: 32px
}
}
.contacts__container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 1023px) {
.contacts__container {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.contacts__desc {
width: 280px;
height: 680px
}
@media (max-width: 1023px) {
.contacts__desc {
width: 100%;
height: auto;
margin-bottom: 32px
}
}
.contacts__map {
/* position: absolute; */
top: 0;
right: 0;
width: calc(66.66667% - 21.33333px);
height: 680px;
overflow: hidden
}
@media (max-width: 1023px) {
.contacts__map {
position: static;
width: 100%;
height: 352px
}
}
.contacts__map img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contacts__hl {
margin-bottom: 40px;
font-size: 32px;
font-size: 2rem;
line-height: 1.25
}
@media (max-width: 1023px) {
.contacts__hl {
margin-bottom: 24px;
font-size: 1.5rem
}
}
.contacts__addr {
margin-bottom: 32px
}
@media (max-width: 1023px) {
.contacts__addr {
margin-bottom: 24px
}
}
.contacts__tel {
margin-bottom: 24px;
}
.contacts__tel--mb0 {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.contacts__mail {
margin: 32px 0
}
}
@media (max-width: 1023px) {
.contacts__mail {
margin-bottom: 24px
}
}
.contacts__how-btn {
display: block;
width: 100%;
margin-bottom: 0;
}
.slick-dots {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin: 0 auto;
}
.slick-dots li {
margin-right: 14px;
width: 10px;
height: 10px;
border-radius: 10px;
list-style: none;
font-size: 0;
opacity: 0.2;
background-color: #fff;
cursor: pointer
}
.slick-dots li:last-child {
margin-right: 0;
}
.slick-dots li.slick-active {
opacity: 1;
background-color: #f30;
}
.page-flex-title {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 40px
}
@media (max-width: 1023px) {
.page-flex-title {
margin-bottom: 0
}
}
.page-flex-title__select {
margin-bottom: 0;
min-width: 220px
}
@media (max-width: 1023px) {
.page-flex-title__select {
margin-left: auto
}
}
.page-hl {
margin-bottom: 48px
}
@media (max-width: 1023px) {
.page-hl {
margin-bottom: 32px
}
}
.page-link-back {
margin-bottom: 40px
}
@media (max-width: 1023px) {
.page-link-back {
margin-bottom: 16px
}
}
.page-cols {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 1023px) {
.page-cols {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
@media (max-width: 1023px) {
.page-cols__col + .page-cols__col {
margin-top: 32px;
}
}
.page-cols__col--1of2 {
width: 45.83333%
}
@media (max-width: 1023px) {
.page-cols__col--1of2 {
width: 100%
}
}
.page-cols__col--8of12 {
width: 66.66667%
}
@media (max-width: 1023px) {
.page-cols__col--8of12 {
width: 100%
}
}
.page-cols__col--3of12 {
width: 25%
}
@media (max-width: 1023px) {
.page-cols__col--3of12 {
width: 100%
}
}
.page-cols__col--1of3 {
width: calc(33.33333% - 21.33333px)
}
@media (max-width: 1023px) {
.page-cols__col--1of3 {
width: 100%
}
}
.page-404 {
text-align: center;
}
.page-project__cards {
margin-bottom: 160px
}
@media (max-width: 1023px) {
.page-project__cards {
margin-bottom: 64px
}
}
.page-project__carousel {
margin-bottom: 120px
}
@media (max-width: 1023px) {
.page-project__carousel {
margin-bottom: 56px
}
}
.page-project__h2 {
margin-bottom: 80px
}
@media (max-width: 1023px) {
.page-project__h2 {
margin-bottom: 32px
}
}
.page-team {
padding: 88px 0
}
@media (max-width: 1023px) {
.page-team {
padding: 64px 0
}
}
.page-team__hl {
margin-bottom: 56px
}
@media (max-width: 1023px) {
.page-team__hl {
margin-bottom: 32px
}
}
.page-iframe {
width: 100%;
height: 500px;
margin-bottom: 48px
}
@media (max-width: 1023px) {
.page-iframe {
margin-bottom: 32px;
height: 300px
}
}
.page-projects {
margin-top: 144px
}
@media (max-width: 1023px) {
.page-projects {
margin-top: 96px
}
}
@media (max-width: 767px) {
.page-projects {
margin-top: 40px
}
}
.product-page {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 72px
}
@media (max-width: 1023px) {
.product-page {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 64px
}
}
.product-page__carousel {
position: relative;
width: 66.66667%
}
@media (max-width: 1023px) {
.product-page__carousel {
width: 100%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px
}
}
@media (max-width: 639px) {
.product-page__carousel {
width: calc(100% + 48px);
margin-left: -24px;
margin-right: -24px
}
}
.product-page__carousel-img {
width: 100%;
max-height: 632px;
overflow: hidden;
}
.product-page__carousel-img img {
width: 100%;
}
.product-page__carousel-prev {
position: absolute;
left: 0;
bottom: 0;
}
.product-page__carousel-next {
position: absolute;
left: 80px;
bottom: 0;
}
@media (max-width: 1023px) {
.product-page__carousel .slick-dots {
margin-top: 24px
}
}
.product-page__carousel-btns {
padding-top: 8px;
display: -ms-grid;
display: grid;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr;
grid-template: auto/ 1fr 1fr 1fr 1fr 1fr;
grid-gap: 8px
}
@media (max-width: 767px) {
.product-page__carousel-btns {
display: none
}
}
.product-page__carousel-btns-pic {
display: block;
position: relative;
cursor: pointer
}
.product-page__carousel-btns-pic::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
transition: background 200ms ease;
}
.product-page__carousel-btns-pic.is-active::after {
background-color: transparent;
}
.product-page__info {
width: 28%
}
@media (max-width: 1023px) {
.product-page__info {
width: 100%
}
}
@media (max-width: 1023px) {
.product-page__info-category {
display: none
}
}
/* &__help-info {
@media (--tablet-lg) {
}
} */
.product-page__category {
display: none
}
@media (max-width: 1023px) {
.product-page__category {
width: 100%;
display: block
}
}
.product-page__vendor-code {
margin-bottom: 8px;
color: #999
}
@media (max-width: 1023px) {
.product-page__vendor-code {
display: inline-block;
vertical-align: top;
margin-bottom: 16px;
margin-right: 48px
}
}
.product-page__in-stock {
fill: #999;
color: #999
}
@media (max-width: 1023px) {
.product-page__in-stock {
display: inline-block;
vertical-align: top;
margin-bottom: 16px
}
}
.product-page__price-block {
margin-top: 32px;
margin-bottom: 16px;
font-family: Bernier, Arial, Helvetica, sans-serif
}
@media (max-width: 1023px) {
.product-page__price-block {
margin-top: 0
}
}
.product-page__price {
display: inline-block;
vertical-align: baseline;
font-size: 32px;
font-size: 2rem
}
@media (max-width: 1023px) {
.product-page__price {
font-size: 1.5rem
}
}
.product-page__price + .product-page__price {
margin-left: 16px;
}
.product-page__price--old {
position: relative;
padding: 0 12px;
color: #999;
font-size: 24px;
font-size: 1.5rem
}
@media (max-width: 1023px) {
.product-page__price--old {
font-size: 1.25rem
}
}
.product-page__price--old::before {
content: '';
position: absolute;
left: 1px;
right: 2px;
top: 50%;
height: 1px;
background-color: #999;
}
.product-page__btn {
margin-bottom: 32px;
}
.product-page-desc {
/* width: 66.66667%;*/
width: 100%;
margin-bottom: 80px
}
@media (max-width: 1023px) {
.product-page-desc {
width: 100%;
margin-bottom: 64px
}
}
.similar__hl {
margin-bottom: 56px
}
@media (max-width: 1023px) {
.similar__hl {
margin-bottom: 24px
}
}
.similar__carousel {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 1023px) {
.similar__carousel {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.similar__carousel-item {
width: calc(33.33333% - 21.33333px)
}
@media (max-width: 1023px) {
.similar__carousel-item {
width: calc(50% - 16px);
margin-bottom: 32px
}
.similar__carousel-item:last-child {
margin-bottom: 0;
}
}
@media (max-width: 639px) {
.similar__carousel-item {
width: 100%
}
}
.categories-section {
padding: 80px 0 48px;
background-image: url('../img/categories_bg.jpg');
background-size: cover;
background-attachment: fixed
}
@media (max-width: 639px) {
.categories-section {
padding: 40px 0
}
}
@media (max-width: 639px) {
.categories-section .container {
padding: 0
}
}
.categories-section--index {
padding: 80px 0
}
@media (max-width: 767px) {
.categories-section--index {
padding: 40px 0
}
}
@media (max-width: 639px) {
.categories-section--index .container {
padding: 0 24px
}
}
.categories-section__hl {
margin-bottom: 64px;
text-align: center
}
@media (max-width: 639px) {
.categories-section__hl {
padding: 0 24px;
margin-bottom: 24px
}
}
.categories {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 639px) {
.categories--carousel {
padding: 0 16px
}
}
.category-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
background-color: #000;
height: 232px;
width: calc(50% - 16px);
padding: 32px;
margin-right: 32px;
margin-bottom: 32px
}
.category-item:nth-child(2n) {
margin-right: 0;
}
@media (max-width: 1023px) {
.category-item {
padding: 24px
}
}
@media (max-width: 767px) {
.category-item {
width: 100%;
margin-right: 0
}
}
.category-item:hover {
color: #fff;
}
.category-item__pic {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.category-item__pic-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}
.category-item__pic::after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .1);
transition: background 200ms ease;
}
.category-item:hover .category-item__pic::after {
background-color: rgba(0, 0, 0, .5);
}
.category-item__logo {
position: relative;
z-index: 1;
margin-bottom: 16px;
}
.category-item__title {
position: relative;
z-index: 1;
margin: 0;
}
/* select2 */
.select2-container {
display: block;
margin: 0 0 24px 0;
font-size: 16px;
font-size: 1rem;
text-align: left;
text-transform: uppercase;
box-shadow: 0 6px 8px rgba(0, 0, 0, .15);
}
.wrap-main--white-bg .select2-container {
box-shadow: none;
}
.select2-container.select2 {
width: 100% !important;
}
.select2-container {
/* &.select2-container--focus,
&.select2-container--open {
.select2-selection--single {
border-color: $cl-green;
}
} */
}
.select2-container .select2-selection--single {
border: none;
border-radius: 0;
box-shadow: none;
height: 80px;
transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding: 40px 24px 16px;
}
.select2-container .select2-selection--single .select2-selection__placeholder {
color: #999;
text-transform: uppercase;
}
.select2-container .select2-selection--single .select2-selection__arrow {
top: auto;
top: initial;
bottom: 8px;
width: 38px;
height: 38px;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
position: absolute;
top: 20px;
right: 25px;
width: 8px;
height: 5px;
border: none;
background: url('../img/svg/arrow_down.svg') no-repeat center;
transition: transform 200ms ease-in-out;
}
.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
transform: rotate(180deg);
}
.select2-container.select2-container--disabled .select2-selection--single {
background: transparent;
color: #999;
}
.select2-container.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
border-top-color: #e0e0e0;
}
.select2-container.select2-container--disabled.select2-container--focus .select2-selection--single, .select2-container.select2-container--disabled.select2-container--open .select2-selection--single {
border-color: #e0e0e0;
}
.select2-container .select2-search--dropdown .select2-search__field {
width: calc(100% - 32px);
height: 30px;
margin: 8px 16px 4px;
padding: 4px 10px;
border: none;
}
.select2-container .select2-results {
padding-bottom: 16px;
}
.select2-container .select2-results__option {
color: #1d1d1d;
list-style: none outside;
margin: 0;
padding: 8px 24px;
}
.select2-container .select2-results__option[aria-disabled] {
display: none;
}
.select2-container .select2-results__option--highlighted[aria-selected] {
background: transparent;
color: #1d1d1d
}
.select2-container .select2-results__option--highlighted[aria-selected]:hover {
background: #e0e0e0;
}
.select2-container .select2-results__option[aria-selected='true'] {
background: transparent;
color: #999
}
.select2-container .select2-results__option[aria-selected='true']:hover {
background: #e0e0e0;
}
.select2-dropdown {
border: none;
border-radius: 0;
font-size: 16px;
font-size: 1rem;
}
.select2-transparent .select2-container--default .select2-selection--single {
background-color: transparent;
color: #1d1d1d;
text-align: center;
text-transform: none;
height: auto;
}
.select2-transparent .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-top: 0;
padding-right: 24px;
color: #1d1d1d;
}
.select2-transparent .select2-container--default .select2-selection--single .select2-selection__arrow {
right: -10px;
bottom: 11px;
}
.select2-transparent .select2-container--default .select2-selection--single .select2-selection__arrow b {
background: url('../img/svg/arrow_down.svg') no-repeat center;
}
.team {
display: -ms-grid;
display: grid;
grid-row-gap: 88px;
grid-column-gap: 32px;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
grid-template: auto / 1fr 1fr 1fr 1fr
}
@media (max-width: 1023px) {
.team {
grid-row-gap: 48px;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template: auto / 1fr 1fr 1fr
}
}
@media (max-width: 767px) {
.team {
grid-row-gap: 32px;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr 1fr;
grid-template: auto / 1fr 1fr
}
}
@media (max-width: 479px) {
.team {
grid-row-gap: 24px;
grid-column-gap: 24px;
-ms-grid-rows: auto;
-ms-grid-columns: 1fr;
grid-template: auto / 1fr
}
}
.team__member {
margin: 0
}
@media (max-width: 479px) {
.team__member {
display: -ms-grid;
display: grid;
grid-column-gap: 24px;
-ms-grid-rows: auto 1fr;
grid-template-rows: auto 1fr;
-ms-grid-columns: 96px 1fr;
grid-template-columns: 96px 1fr
}
}
.team__member-photo {
overflow: hidden;
max-height: 360px
}
@media (max-width: 479px) {
.team__member-photo {
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 2;
grid-row-end: 3
}
}
.team__member-photo img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.team__member-name {
margin-bottom: 8px
}
@media (max-width: 479px) {
.team__member-name {
margin-top: 4px
}
}
.team__member-job {
margin-bottom: 0;
}
.projects {
display: -ms-grid;
display: grid;
-ms-grid-rows: auto;
grid-template-rows: auto;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 32px
}
@media (max-width: 1023px) {
.projects {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr
}
}
@media (max-width: 767px) {
.projects {
display: block
}
}
.projects .slick-dots {
margin-top: 24px;
}
.projects .slick-track::before,
.projects .slick-track::after {
content: none !important;
}
.project {
position: relative;
height: 396px;
overflow: hidden
}
@media (max-width: 1023px) {
.project {
height: 350px
}
}
@media (max-width: 767px) {
.project {
height: 300px;
margin: 0 12px
}
}
@media (max-width: 639px) {
.project {
margin: 0
}
}
.project__link {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
background-color: #111;
cursor: pointer
}
.project__link:hover::after {
background-color: transparent;
pointer-events: none;
}
.project__link::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 96px);
background-color: rgba(0, 0, 0, .3);
transition: background 200ms ease;
}
.project__link-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
max-width: auto;
transition: transform 200ms ease-in-out;
}
.project__link:hover .project__link-bg {
transform: scale(1.1);
}
.project__link-info {
position: relative;
margin-top: auto;
display: -ms-flexbox;
display: flex;
height: 96px;
color: #fff;
background-color: rgba(0, 0, 0, .7);
transition: all 200ms ease;
}
.project__link:hover .project__link-info {
background-color: #f30;
}
.project__link-info-date {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
padding: 0 16px;
text-align: right
}
.project__link-info-date::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #c4c4c4;
opacity: 0.3;
}
.project__link-info-year {
display: block;
font-size: 16px;
font-size: 1rem;
font-weight: bold;
}
.project__link-info-month {
font-size: 14px;
font-size: 0.875rem;
white-space: nowrap;
}
.project__link-name {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
padding: 0 16px;
/*
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
*/
font-size: 1.125rem;
font-family: Bernier, Arial, Helvetica, sans-serif;
text-transform: lowercase;
font-weight: 400;
}
.pictures__carousel {
position: relative;
margin-bottom: 8px;
}
.pictures__carousel-slide {
height: 536px;
margin-right: 16px
}
@media (max-width: 1023px) {
.pictures__carousel-slide {
height: 350px
}
}
@media (max-width: 767px) {
.pictures__carousel-slide {
height: 192px;
margin: 0 8px
}
}
.pictures__carousel-slide-img {
height: 100%
}
@media (max-width: 767px) {
.pictures__carousel-slide-img {
height: auto
max-height: 100%;
margin: 0 auto;
}
}
.pictures__carousel-btn-next,
.pictures__carousel-btn-prev {
width: 72px;
height: 64px;
position: absolute;
top: 236px
}
@media (max-width: 1023px) {
.pictures__carousel-btn-next,
.pictures__carousel-btn-prev {
top: 143px
}
}
.pictures__carousel-btn-prev {
left: 0;
}
.pictures__carousel-btn-next {
right: 0;
}
@media (max-width: 767px) {
.pictures__carousel .slick-dots {
margin-top: 24px
}
}
.pictures__thumbs {
display: -ms-flexbox;
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch
}
@media (max-width: 1023px) {
.pictures__thumbs {
display: none
}
}
.pictures__thumbs::-webkit-scrollbar {
width: 1px !important;
height: 1px !important;
background: transparent;
}
.pictures__thumbs::-webkit-scrollbar-thumb {
background-color: transparent !important;
}
.pictures__thumbs-item {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 107px;
height: 72px;
text-align: center;
position: relative;
cursor: pointer;
}
.pictures__thumbs-item-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.pictures__thumbs-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
transition: background 200ms ease;
}
.pictures__thumbs-item.is-active {
cursor: default
}
.pictures__thumbs-item.is-active::after {
background-color: transparent;
}
.wrap-main {
width: 100%;
position: relative;
min-width: 320px;
margin: 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.wrap-main--white-bg {
background-image: url('../img/instagram_bg.jpg');
background-size: cover;
background-attachment: fixed
}
}
.wrap-main--white-bg {
background-color: #fff;
padding-top: 235px;
color: #1d1d1d
}
@media (max-width: 1023px) {
.wrap-main--white-bg {
padding-top: 135px
}
}
@media (min-width: 1024px) {
.wrap-main--black-bg {
background-image: url('../img/categories_bg.jpg');
background-size: cover;
background-attachment: fixed
}
}
.wrap-main--black-bg {
padding-top: 235px
}
@media (max-width: 1023px) {
.wrap-main--black-bg {
padding-top: 135px
}
}
.container {
position: relative;
z-index: 9;
min-width: 320px;
max-width: 1600px;
margin: 0 auto;
padding-left: calc(7.14286% - 7.42857px);
padding-right: calc(7.14286% - 7.42857px)
}
@media (max-width: 1279px) {
.container {
padding: 0 32px
}
}
@media (max-width: 1023px) {
.container {
padding: 0 24px
}
}
.container--mb {
margin-bottom: 128px
}
@media (max-width: 1023px) {
.container--mb {
margin-bottom: 64px
}
}
.container__inner {
max-width: 800px;
margin: 0 auto;
}
.section {
position: relative;
}
.section__hl {
margin: 0 0 32px 0;
text-align: center;
}
.hidden {
display: none;
}
/*# sourceMappingURL=internal.css.map */
.product-page__carousel-btns-pic,
.bike-card__preview-pic { overflow: hidden; }
.product-page__carousel-btns-pic img,
.bike-card__preview-pic img {
transition: 0.5s all ease;
transform: scale(1.1);
}
.product-page__carousel-btns-pic:after,
.bike-card__preview-pic:after { transition: 0.5s all ease; }
.product-page__carousel-btns-pic:hover:after,
.bike-card__preview-pic:hover:after {
opacity: 0.8;
}
.product-page__carousel-btns-pic:hover img,
.bike-card__preview-pic:hover img {
transform: scale(1.2);
}
.instagram-frames__item img {
transition: 1s all ease;
}
.instagram-frames:hover img { opacity: 0.5; }
.instagram-frames__item:hover img {
opacity: 1;
transform: scale(1.2);
/* -moz-transform: rotate(5deg) scale(1.2);
-o-transform: rotate(5deg) scale(1.2);
-webkit-transform: rotate(5deg) scale(1.2);
*/
-webkit-filter: contrast(125%);
}
.bg-about_us img {
bottom: 0 !important;
position: absolute !important;
height: auto !important;
}
.bg-about_us:after { display: none !important; }
.addInformulsStyle {
bottom: calc(50% - 40px) !important;
background-color: rgba(0, 0, 0, 0.5) !important;
transition: 0.2s all;
width: 40px !important;
}
.addInformulsStyle:hover {
bottom: calc(50% - 40px) !important;
background-color: rgba(0, 0, 0, 1) !important;
width: 100px !important;
}
.product-page__carousel-prev.addInformulsStyle {
transform: rotate(0deg);
}
.product-page__carousel-next.addInformulsStyle {
left: calc(100% - 40px) !important;
transform: rotate(-180deg);
}
.product-page__carousel-next.addInformulsStyle:hover {
left: calc(100% - 100px) !important;
}
/*
.price,
.cart-items__item-aside,
.bike-card__price,
.product-page__price-block,
.product__price {
font-family: 'Roboto Condensed', sans-serif !important;
}
.price,
.cart-items__item-aside,
.bike-card__price,
.product-page__price-block { font-weight: 600; }
*/
span.rub_rc {
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 500;
}
@media (max-width: 760px) {
.bike-card__desc {
display: none;
}
}
.shop__main-product .product__price--red .rub_rc {
font-size: 90%;
}