/*! Pickr 1.7.2 MIT | https://github.com/Simonwep/pickr */
.pickr .pcr-button:after,
.pickr .pcr-button:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.15em;
}
.pcr-app .pcr-swatches > button:hover {
-webkit-filter: brightness(1.05);
}
.pcr-app .pcr-swatches > button:not(.pcr-active) {
box-shadow: none;
}
.pcr-app .pcr-interaction input:hover {
-webkit-filter: brightness(0.975);
}
.pcr-app .pcr-interaction .pcr-result {
text-align: left;
}
.pcr-app .pcr-interaction .pcr-result::-moz-selection {
background: #4285f4;
color: #fff;
}
.pcr-app .pcr-interaction .pcr-cancel:hover,
.pcr-app .pcr-interaction .pcr-clear:hover,
.pcr-app .pcr-interaction .pcr-save:hover {
-webkit-filter: brightness(0.925);
}
.pcr-app .pcr-selection .pcr-color-chooser,
.pcr-app .pcr-selection .pcr-color-opacity,
.pcr-app .pcr-selection .pcr-color-palette,
.pcr-app .pcr-selection .pcr-picker {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.pcr-app[data-theme='classic'] {
width: 28.5em;
max-width: 95vw;
padding: 0.8em;
}
.pcr-app[data-theme='classic'] .pcr-selection {
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview {
position: relative;
z-index: 1;
width: 2em;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 0.75em;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 0.5em;
border-radius: 0.15em;
z-index: -1;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-last-color {
cursor: pointer;
transition:
background-color 0.3s,
box-shadow 0.3s;
border-radius: 0.15em 0.15em 0 0;
z-index: 2;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-current-color {
border-radius: 0 0 0.15em 0.15em;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-current-color,
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-last-color {
background: currentColor;
width: 100%;
height: 50%;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-palette {
width: 100%;
height: 8em;
z-index: 1;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-palette .pcr-palette {
flex-grow: 1;
border-radius: 0.15em;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-palette .pcr-palette:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 0.5em;
border-radius: 0.15em;
z-index: -1;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser,
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity {
margin-left: 0.75em;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser .pcr-picker,
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity .pcr-picker {
left: 50%;
transform: translateX(-50%);
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser .pcr-slider,
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity .pcr-slider {
width: 8px;
flex-grow: 1;
border-radius: 50em;
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser .pcr-slider {
background: linear-gradient(180deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}
.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity .pcr-slider {
background: linear-gradient(180deg, transparent, #000),
url('data:image/svg+xml;utf8, ');
background-size: 100%, 50%;
}
.pickr {
position: relative;
overflow: visible;
transform: translateY(0);
}
.pickr * {
box-sizing: border-box;
outline: none;
border: none;
-webkit-appearance: none;
}
.pickr .pcr-button {
position: relative;
height: 2em;
width: 2em;
padding: 0.5em;
cursor: pointer;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
sans-serif;
border-radius: 0.15em;
background: url('data:image/svg+xml;utf8, ')
no-repeat 50%;
background-size: 0;
transition: all 0.3s;
}
.pickr .pcr-button:before {
background: url('data:image/svg+xml;utf8, ');
background-size: 0.5em;
z-index: -1;
z-index: auto;
}
.pickr .pcr-button:after,
.pickr .pcr-button:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.15em;
}
.pickr .pcr-button:after {
transition: background 0.3s;
background: currentColor;
}
.pickr .pcr-button.clear {
background-size: 70%;
}
.pickr .pcr-button.clear:before {
opacity: 0;
}
.pickr .pcr-button.clear:focus {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.85),
0 0 0 3px currentColor;
}
.pickr .pcr-button.disabled {
cursor: not-allowed;
}
.pcr-app *,
.pickr * {
box-sizing: border-box;
outline: none;
border: none;
-webkit-appearance: none;
}
.pcr-app button.pcr-active,
.pcr-app button:focus,
.pcr-app input.pcr-active,
.pcr-app input:focus,
.pickr button.pcr-active,
.pickr button:focus,
.pickr input.pcr-active,
.pickr input:focus {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.85),
0 0 0 3px currentColor;
}
.pcr-app .pcr-palette,
.pcr-app .pcr-slider,
.pickr .pcr-palette,
.pickr .pcr-slider {
transition: box-shadow 0.3s;
}
.pcr-app .pcr-palette:focus,
.pcr-app .pcr-slider:focus,
.pickr .pcr-palette:focus,
.pickr .pcr-slider:focus {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.85),
0 0 0 3px rgba(0, 0, 0, 0.25);
}
.pcr-app {
position: fixed;
display: flex;
flex-direction: column;
z-index: 10000;
border-radius: 0.1em;
background: #fff;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s,
visibility 0s 0.3s;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
sans-serif;
box-shadow:
0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1),
0 0 1em 0 rgba(0, 0, 0, 0.03);
left: 0;
top: 0;
}
.pcr-app.visible {
transition: opacity 0.3s;
visibility: visible;
opacity: 1;
}
.pcr-app .pcr-swatches {
display: flex;
flex-wrap: wrap;
margin-top: 0.75em;
}
.pcr-app .pcr-swatches.pcr-last {
margin: 0;
}
@supports (display: grid) {
.pcr-app .pcr-swatches {
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fit, 1.75em);
}
}
.pcr-app .pcr-swatches > button {
font-size: 1em;
position: relative;
width: calc(1.75em - 5px);
height: calc(1.75em - 5px);
border-radius: 0.15em;
cursor: pointer;
margin: 2.5px;
flex-shrink: 0;
justify-self: center;
transition: all 0.15s;
overflow: hidden;
background: transparent;
z-index: 1;
}
.pcr-app .pcr-swatches > button:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 6px;
border-radius: 0.15em;
z-index: -1;
}
.pcr-app .pcr-swatches > button:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: currentColor;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 0.15em;
box-sizing: border-box;
}
.pcr-app .pcr-swatches > button:hover {
filter: brightness(1.05);
}
.pcr-app .pcr-interaction {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -0.2em;
}
.pcr-app .pcr-interaction > * {
margin: 0 0.2em;
}
.pcr-app .pcr-interaction input {
letter-spacing: 0.07em;
font-size: 0.75em;
text-align: center;
cursor: pointer;
color: #75797e;
background: #f1f3f4;
border-radius: 0.15em;
transition: all 0.15s;
padding: 0.45em 0.5em;
margin-top: 0.75em;
}
.pcr-app .pcr-interaction input:hover {
filter: brightness(0.975);
}
.pcr-app .pcr-interaction input:focus {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.85),
0 0 0 3px rgba(66, 133, 244, 0.75);
}
.pcr-app .pcr-interaction .pcr-result {
color: #75797e;
text-align: right;
flex: 1 1 8em;
width: 170px;
min-width: 8em;
transition: all 0.2s;
border-radius: 0.15em;
background: #f1f3f4;
cursor: text;
}
.pcr-app .pcr-interaction .pcr-result::selection {
background: #4285f4;
color: #fff;
}
.pcr-app .pcr-interaction .pcr-type.active {
color: #fff;
background: #4285f4;
}
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear,
.pcr-app .pcr-interaction .pcr-save {
width: auto;
color: #fff;
}
.pcr-app .pcr-interaction .pcr-cancel:hover,
.pcr-app .pcr-interaction .pcr-clear:hover,
.pcr-app .pcr-interaction .pcr-save:hover {
filter: brightness(0.925);
}
.pcr-app .pcr-interaction .pcr-save {
background: #4285f4;
}
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
background: #f44250;
}
.pcr-app .pcr-interaction .pcr-cancel:focus,
.pcr-app .pcr-interaction .pcr-clear:focus {
box-shadow:
0 0 0 1px hsla(0, 0%, 100%, 0.85),
0 0 0 3px rgba(244, 66, 80, 0.75);
}
.pcr-app .pcr-selection .pcr-picker {
position: absolute;
height: 18px;
width: 18px;
border: 2px solid #fff;
border-radius: 100%;
user-select: none;
}
.pcr-app .pcr-selection .pcr-color-chooser,
.pcr-app .pcr-selection .pcr-color-opacity,
.pcr-app .pcr-selection .pcr-color-palette {
position: relative;
user-select: none;
display: flex;
flex-direction: column;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.pcr-app .pcr-selection .pcr-color-chooser:active,
.pcr-app .pcr-selection .pcr-color-opacity:active,
.pcr-app .pcr-selection .pcr-color-palette:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.pcr-app[data-theme='nano'] {
width: 14.25em;
width: 100%;
max-width: 95vw;
}
.pcr-app[data-theme='nano'] .pcr-swatches {
margin-top: 0.6em;
padding: 0 0.6em;
}
.pcr-app[data-theme='nano'] .pcr-interaction {
padding: 0 0.6em 0.6em;
}
.pcr-app[data-theme='nano'] .pcr-selection {
display: grid;
grid-gap: 0.6em;
grid-template-columns: 1fr 4fr;
grid-template-rows: 5fr auto auto;
align-items: center;
height: 10.5em;
width: 100%;
align-self: flex-start;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview {
grid-area: 2/1/4/1;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 0.6em;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-last-color {
display: none;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color {
position: relative;
background: currentColor;
width: 2em;
height: 2em;
border-radius: 50em;
overflow: hidden;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 0.5em;
border-radius: 0.15em;
z-index: -1;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette {
grid-area: 1/1/2/3;
width: 100%;
height: 100%;
z-index: 1;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette {
border-radius: 0.15em;
width: 100%;
height: 100%;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 0.5em;
border-radius: 0.15em;
z-index: -1;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser {
grid-area: 2/2/2/2;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity {
grid-area: 3/2/3/2;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser,
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity {
height: 0.5em;
margin: 0 0.6em;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-picker,
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-picker {
top: 50%;
transform: translateY(-50%);
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider,
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider {
flex-grow: 1;
border-radius: 50em;
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider {
background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}
.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider {
background: linear-gradient(90deg, transparent, #000),
url('data:image/svg+xml;utf8, ');
background-size: 100%, 0.25em;
}
.pcr-app.pcr-app {
box-shadow: none;
}
.pcr-app.pcr-app .pcr-selection .pcr-picker {
height: 18px;
width: 18px;
}
.pcr-app.pcr-app .pcr-selection .pcr-color-preview {
margin-left: 0;
}
.pcr-app.pcr-app .pcr-selection .pcr-color-preview .pcr-current-color {
border-radius: 0.15em;
width: 100%;
}
.pcr-app.pcr-app .pcr-interaction {
padding: 0;
margin-bottom: 0;
}
.gpickr {
display: flex;
flex-direction: column-reverse;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
sans-serif;
user-select: none;
max-width: 100vw;
margin-bottom: 20px;
}
.gpickr * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.gpickr button {
border: none;
outline: none;
background: initial;
cursor: pointer;
}
.gpickr .gpcr-interaction {
flex-direction: column;
display: flex;
width: 12.5em;
width: 100%;
z-index: 1;
margin: 0 0 15px;
}
.gpickr .gpcr-interaction .gpcr-result {
display: none;
height: 7.9em;
width: 100%;
position: relative;
border-radius: 0.15em;
margin-bottom: 0.5em;
flex-grow: 1;
}
.gpickr .gpcr-interaction .gpcr-result:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 8px;
border-radius: 0.15em;
z-index: -1;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-angle,
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos {
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.3s;
position: absolute;
margin: auto;
opacity: 0.25;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-angle {
height: 0.35em;
width: 0.35em;
background: #fff;
border-radius: 100%;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-angle > div {
height: 2px;
width: 2em;
top: 0;
right: 0;
bottom: 0;
left: 50%;
position: absolute;
background: #fff;
border-radius: 1em;
margin: auto 0;
transform-origin: left;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-angle.gpcr-active {
opacity: 1;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos {
height: 5em;
width: 5em;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
opacity: 1;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos > div {
height: 15px;
width: 15px;
border: 2px solid transparent;
position: relative;
margin: auto;
transition: all 0.3s;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos > div:not(.gpcr-active) {
cursor: pointer;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos > div:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 5px;
width: 5px;
border-radius: 100%;
background: #fff;
transition: all 0.3s;
opacity: 0.25;
margin: auto;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos > div:hover:before {
opacity: 1;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos > div.gpcr-active {
border-color: #fff;
border-radius: 100%;
}
.gpickr .gpcr-interaction .gpcr-result .gpcr-pos > div.gpcr-active:before,
.gpickr .gpcr-interaction .gpcr-result:hover .gpcr-angle {
opacity: 1;
}
.gpickr .gpcr-interaction .gpcr-mode {
height: 1.5em;
width: 1.5em;
position: relative;
top: 0.15em;
left: 0.15em;
border: 2px solid #fff;
border-radius: 0.15em;
cursor: pointer;
opacity: 0.25;
transition: all 0.3s;
}
.gpickr .gpcr-interaction .gpcr-mode:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: all 0.3s;
}
.gpickr .gpcr-interaction .gpcr-mode[data-mode='linear']:before {
height: 2px;
width: 70%;
background: #fff;
transform: rotate(45deg);
border-radius: 50em;
}
.gpickr .gpcr-interaction .gpcr-mode[data-mode='radial']:before {
height: 50%;
width: 50%;
border-radius: 100%;
border: 2px solid #fff;
}
.gpickr .gpcr-interaction .gpcr-mode[data-mode='conic']:before {
height: 0;
width: 0;
border-color: #fff #fff transparent transparent;
border-style: solid;
border-width: 5px;
}
.gpickr .gpcr-interaction .gpcr-mode:hover {
opacity: 1;
}
.gpickr .gpcr-stops {
margin-bottom: 0.75em;
}
.gpickr .gpcr-stops .gpcr-stop-preview {
height: 2em;
width: 100%;
position: relative;
border-radius: 0.15em;
overflow: hidden;
cursor: pointer;
}
.gpickr .gpcr-stops .gpcr-stop-preview:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 8px;
border-radius: 0.15em;
z-index: -1;
}
.gpickr .gpcr-stops .gpcr-stop-marker {
position: relative;
z-index: 1;
}
.gpickr .gpcr-stops .gpcr-stop-marker .gpcr-marker {
height: 12px;
width: 12px;
position: absolute;
background: currentColor;
margin: 0.15em 0 0 -5px;
border-radius: 100%;
border: 2px solid #fff;
box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.15);
transition: opacity 0.15s;
cursor: grab;
cursor: webkit-grab;
}
.gpickr .gpcr-stops .gpcr-stop-marker .gpcr-marker:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8, ');
background-size: 4px;
border-radius: 0.15em;
z-index: -1;
border-radius: 100%;
} /*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
text-decoration: none;
}
b,
strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
padding: 0;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
height: auto;
}
input[type='search'] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: 700;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
@font-face {
font-family: Inter;
src: url(https://fps.cdnpk.net/static/inter-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Inter;
src: url(https://fps.cdnpk.net/static/inter-semibold.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Inter;
src: url(https://fps.cdnpk.net/static/inter-bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Degular;
src: url(https://fps.cdnpk.net/static/degular-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Degular;
src: url(https://fps.cdnpk.net/static/degular-semibold.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
#footer {
margin: 20px 0 0;
padding: 10px 0;
border-top: 1px solid #e5e5e5;
background-color: #1f408c;
}
#header {
margin: 0 0 20px;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
background-color: #f7f7f7;
}
.animation--fade-in {
animation: fade-in 0ms cubic-bezier(1, 0, 0, 1) forwards;
}
.animation--fade-out {
animation: fade-out 0ms cubic-bezier(1, 0, 0, 1) forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
.animation--scale-in {
animation: scale-in 0ms cubic-bezier(1, 0, 0, 1) forwards;
}
.animation--scale-out {
animation: scale-out 0ms cubic-bezier(1, 0, 0, 1) forwards;
}
@keyframes scale-in {
0% {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes scale-out {
0% {
transform: scale(1);
}
to {
transfrom: scale(0);
}
}
@keyframes slide-top-in {
0% {
top: -100%;
}
to {
top: 0;
}
}
@keyframes slide-top-out {
0% {
top: 0;
}
to {
top: -100%;
}
}
@keyframes slide-bottom-in {
0% {
bottom: -100%;
}
to {
bottom: 0;
}
}
@keyframes slide-bottom-out {
0% {
bottom: 0;
}
to {
bottom: -100%;
}
}
.animation--rotate {
animation: rotate 0.6s linear infinite;
}
.checkbox.active .checkbox__indicator,
.checkbox.active .radio__indicator,
.checkbox input[type='checkbox']:checked ~ .checkbox__indicator,
.checkbox input[type='checkbox']:checked ~ .radio__indicator,
.checkbox input[type='radio']:checked ~ .checkbox__indicator,
.checkbox input[type='radio']:checked ~ .radio__indicator,
.radio.active .checkbox__indicator,
.radio.active .radio__indicator,
.radio input[type='checkbox']:checked ~ .checkbox__indicator,
.radio input[type='checkbox']:checked ~ .radio__indicator,
.radio input[type='radio']:checked ~ .checkbox__indicator,
.radio input[type='radio']:checked ~ .radio__indicator {
-webkit-transition: box-shadow background-color 0ms cubic-bezier(1, 0, 0, 1)
cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition: box-shadow 0ms cubic-bezier(1, 0, 0, 1) background-color 0ms
cubic-bezier(1, 0, 0, 1);
transition: box-shadow background-color 0ms cubic-bezier(1, 0, 0, 1)
cubic-bezier(1, 0, 0, 1) 0ms;
box-shadow: inset 0 0 0 64px #0a152f;
}
#notification-cart .notification__close .checkbox.active .checkbox__indicator i,
#notification-cart .notification__close .checkbox.active .radio__indicator i,
#notification-cart
.notification__close
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator
i,
#notification-cart
.notification__close
.checkbox
input[type='checkbox']:checked
~ .radio__indicator
i,
#notification-cart
.notification__close
.checkbox
input[type='radio']:checked
~ .checkbox__indicator
i,
#notification-cart
.notification__close
.checkbox
input[type='radio']:checked
~ .radio__indicator
i,
#notification-cart .notification__close .radio.active .checkbox__indicator i,
#notification-cart .notification__close .radio.active .radio__indicator i,
#notification-cart
.notification__close
.radio
input[type='checkbox']:checked
~ .checkbox__indicator
i,
#notification-cart
.notification__close
.radio
input[type='checkbox']:checked
~ .radio__indicator
i,
#notification-cart
.notification__close
.radio
input[type='radio']:checked
~ .checkbox__indicator
i,
#notification-cart
.notification__close
.radio
input[type='radio']:checked
~ .radio__indicator
i,
.checkbox.active .checkbox__indicator #notification-cart .notification__close i,
.checkbox.active .checkbox__indicator .icon,
.checkbox.active .checkbox__indicator .notification--alert i,
.checkbox.active .radio__indicator #notification-cart .notification__close i,
.checkbox.active .radio__indicator .icon,
.checkbox.active .radio__indicator .notification--alert i,
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator
#notification-cart
.notification__close
i,
.checkbox input[type='checkbox']:checked ~ .checkbox__indicator .icon,
.checkbox input[type='checkbox']:checked ~ .checkbox__indicator .notification--alert i,
.checkbox
input[type='checkbox']:checked
~ .radio__indicator
#notification-cart
.notification__close
i,
.checkbox input[type='checkbox']:checked ~ .radio__indicator .icon,
.checkbox input[type='checkbox']:checked ~ .radio__indicator .notification--alert i,
.checkbox
input[type='radio']:checked
~ .checkbox__indicator
#notification-cart
.notification__close
i,
.checkbox input[type='radio']:checked ~ .checkbox__indicator .icon,
.checkbox input[type='radio']:checked ~ .checkbox__indicator .notification--alert i,
.checkbox
input[type='radio']:checked
~ .radio__indicator
#notification-cart
.notification__close
i,
.checkbox input[type='radio']:checked ~ .radio__indicator .icon,
.checkbox input[type='radio']:checked ~ .radio__indicator .notification--alert i,
.notification--alert .checkbox.active .checkbox__indicator i,
.notification--alert .checkbox.active .radio__indicator i,
.notification--alert .checkbox input[type='checkbox']:checked ~ .checkbox__indicator i,
.notification--alert .checkbox input[type='checkbox']:checked ~ .radio__indicator i,
.notification--alert .checkbox input[type='radio']:checked ~ .checkbox__indicator i,
.notification--alert .checkbox input[type='radio']:checked ~ .radio__indicator i,
.notification--alert .radio.active .checkbox__indicator i,
.notification--alert .radio.active .radio__indicator i,
.notification--alert .radio input[type='checkbox']:checked ~ .checkbox__indicator i,
.notification--alert .radio input[type='checkbox']:checked ~ .radio__indicator i,
.notification--alert .radio input[type='radio']:checked ~ .checkbox__indicator i,
.notification--alert .radio input[type='radio']:checked ~ .radio__indicator i,
.radio.active .checkbox__indicator #notification-cart .notification__close i,
.radio.active .checkbox__indicator .icon,
.radio.active .checkbox__indicator .notification--alert i,
.radio.active .radio__indicator #notification-cart .notification__close i,
.radio.active .radio__indicator .icon,
.radio.active .radio__indicator .notification--alert i,
.radio
input[type='checkbox']:checked
~ .checkbox__indicator
#notification-cart
.notification__close
i,
.radio input[type='checkbox']:checked ~ .checkbox__indicator .icon,
.radio input[type='checkbox']:checked ~ .checkbox__indicator .notification--alert i,
.radio
input[type='checkbox']:checked
~ .radio__indicator
#notification-cart
.notification__close
i,
.radio input[type='checkbox']:checked ~ .radio__indicator .icon,
.radio input[type='checkbox']:checked ~ .radio__indicator .notification--alert i,
.radio
input[type='radio']:checked
~ .checkbox__indicator
#notification-cart
.notification__close
i,
.radio input[type='radio']:checked ~ .checkbox__indicator .icon,
.radio input[type='radio']:checked ~ .checkbox__indicator .notification--alert i,
.radio
input[type='radio']:checked
~ .radio__indicator
#notification-cart
.notification__close
i,
.radio input[type='radio']:checked ~ .radio__indicator .icon,
.radio input[type='radio']:checked ~ .radio__indicator .notification--alert i {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition:
opacity 0ms cubic-bezier(1, 0, 0, 1) 0ms,
-webkit-transform 0ms cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition:
opacity 0ms 0ms cubic-bezier(1, 0, 0, 1),
-moz-transform 0ms 0ms cubic-bezier(1, 0, 0, 1);
transition:
opacity 0ms cubic-bezier(1, 0, 0, 1) 0ms,
transform 0ms cubic-bezier(1, 0, 0, 1) 0ms;
opacity: 1;
}
.checkbox.active .checkbox__link,
.checkbox.active .radio__link,
.checkbox input[type='checkbox']:checked ~ .checkbox__link,
.checkbox input[type='checkbox']:checked ~ .checkbox__link,
.checkbox input[type='radio']:checked ~ .checkbox__link,
.checkbox input[type='radio']:checked ~ .checkbox__link,
.radio.active .checkbox__link,
.radio.active .radio__link,
.radio input[type='checkbox']:checked ~ .checkbox__link,
.radio input[type='checkbox']:checked ~ .checkbox__link,
.radio input[type='radio']:checked ~ .checkbox__link,
.radio input[type='radio']:checked ~ .checkbox__link {
opacity: 1;
}
.checkbox .checkbox__indicator ~ .checkbox__link,
.checkbox .checkbox__link ~ .checkbox__indicator,
.radio .radio__indicator ~ .radio__link,
.radio .radio__link ~ .radio__indicator {
margin-left: 10px;
}
.checkbox,
.radio {
cursor: pointer;
padding: 7px 0;
}
.checkbox input[type='checkbox'],
.checkbox input[type='radio'],
.radio input[type='checkbox'],
.radio input[type='radio'] {
display: none;
}
.checkbox__indicator,
.radio__indicator {
display: block;
width: 30px;
height: 30px;
border-radius: 3px;
background-color: #fff;
box-shadow: inset 0 0 0 1px #b2b2b2;
}
#notification-cart .notification__close .checkbox__indicator i,
#notification-cart .notification__close .radio__indicator i,
.checkbox__indicator #notification-cart .notification__close i,
.checkbox__indicator .icon,
.checkbox__indicator .notification--alert i,
.notification--alert .checkbox__indicator i,
.notification--alert .radio__indicator i,
.radio__indicator #notification-cart .notification__close i,
.radio__indicator .icon,
.radio__indicator .notification--alert i {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition:
opaicty 0ms cubic-bezier(1, 0, 0, 1),
-webkit-transform 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition:
opaicty 0ms cubic-bezier(1, 0, 0, 1),
-moz-transform 0ms cubic-bezier(1, 0, 0, 1);
transition:
opaicty 0ms cubic-bezier(1, 0, 0, 1),
transform 0ms cubic-bezier(1, 0, 0, 1);
opacity: 0;
width: 30px;
height: 30px;
padding: 3px;
color: #fff;
fill: #fff;
font-size: 24px;
line-height: 24px;
}
.checkbox__link,
.radio__link {
-webkit-transition: opacity 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition: opacity 0ms cubic-bezier(1, 0, 0, 1);
transition: opacity 0ms cubic-bezier(1, 0, 0, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline;
flex: 1;
height: 30px;
line-height: 30px;
}
.checkbox--inverted,
.radio--inverted {
color: #fff;
}
.checkbox--inverted input[type='checkbox']:checked + .checkbox__indicator,
.checkbox--inverted input[type='radio']:checked + .radio__indicator,
.radio--inverted input[type='checkbox']:checked + .checkbox__indicator,
.radio--inverted input[type='radio']:checked + .radio__indicator {
background-color: #fff;
}
#notification-cart
.notification__close
.checkbox--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
i,
#notification-cart
.notification__close
.checkbox--inverted
input[type='radio']:checked
+ .radio__indicator
i,
#notification-cart
.notification__close
.radio--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
i,
#notification-cart
.notification__close
.radio--inverted
input[type='radio']:checked
+ .radio__indicator
i,
.checkbox--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
#notification-cart
.notification__close
i,
.checkbox--inverted input[type='checkbox']:checked + .checkbox__indicator .icon,
.checkbox--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
.notification--alert
i,
.checkbox--inverted
input[type='radio']:checked
+ .radio__indicator
#notification-cart
.notification__close
i,
.checkbox--inverted input[type='radio']:checked + .radio__indicator .icon,
.checkbox--inverted
input[type='radio']:checked
+ .radio__indicator
.notification--alert
i,
.notification--alert
.checkbox--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
i,
.notification--alert
.checkbox--inverted
input[type='radio']:checked
+ .radio__indicator
i,
.notification--alert
.radio--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
i,
.notification--alert .radio--inverted input[type='radio']:checked + .radio__indicator i,
.radio--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
#notification-cart
.notification__close
i,
.radio--inverted input[type='checkbox']:checked + .checkbox__indicator .icon,
.radio--inverted
input[type='checkbox']:checked
+ .checkbox__indicator
.notification--alert
i,
.radio--inverted
input[type='radio']:checked
+ .radio__indicator
#notification-cart
.notification__close
i,
.radio--inverted input[type='radio']:checked + .radio__indicator .icon,
.radio--inverted input[type='radio']:checked + .radio__indicator .notification--alert i {
color: #0a152f;
}
.checkbox--xs,
.radio--xs {
padding: 14px 0;
}
.checkbox--xs .checkbox__indicator,
.checkbox--xs .radio__indicator,
.radio--xs .checkbox__indicator,
.radio--xs .radio__indicator {
width: 16px;
height: 16px;
}
#notification-cart .notification__close .checkbox--xs .checkbox__indicator i,
#notification-cart .notification__close .checkbox--xs .radio__indicator i,
#notification-cart .notification__close .radio--xs .checkbox__indicator i,
#notification-cart .notification__close .radio--xs .radio__indicator i,
.checkbox--xs .checkbox__indicator #notification-cart .notification__close i,
.checkbox--xs .checkbox__indicator .icon,
.checkbox--xs .checkbox__indicator .notification--alert i,
.checkbox--xs .radio__indicator #notification-cart .notification__close i,
.checkbox--xs .radio__indicator .icon,
.checkbox--xs .radio__indicator .notification--alert i,
.notification--alert .checkbox--xs .checkbox__indicator i,
.notification--alert .checkbox--xs .radio__indicator i,
.notification--alert .radio--xs .checkbox__indicator i,
.notification--alert .radio--xs .radio__indicator i,
.radio--xs .checkbox__indicator #notification-cart .notification__close i,
.radio--xs .checkbox__indicator .icon,
.radio--xs .checkbox__indicator .notification--alert i,
.radio--xs .radio__indicator #notification-cart .notification__close i,
.radio--xs .radio__indicator .icon,
.radio--xs .radio__indicator .notification--alert i {
width: 16px;
height: 16px;
padding: 1.6px;
font-size: 12.8px;
line-height: 12.8px;
}
.checkbox--xs .checkbox__link,
.checkbox--xs .radio__link,
.radio--xs .checkbox__link,
.radio--xs .radio__link {
height: 16px;
line-height: 16px;
}
.checkbox--sm,
.radio--sm {
padding: 12px 0;
}
.checkbox--sm .checkbox__indicator,
.checkbox--sm .radio__indicator,
.radio--sm .checkbox__indicator,
.radio--sm .radio__indicator {
width: 20px;
height: 20px;
}
#notification-cart .notification__close .checkbox--sm .checkbox__indicator i,
#notification-cart .notification__close .checkbox--sm .radio__indicator i,
#notification-cart .notification__close .radio--sm .checkbox__indicator i,
#notification-cart .notification__close .radio--sm .radio__indicator i,
.checkbox--sm .checkbox__indicator #notification-cart .notification__close i,
.checkbox--sm .checkbox__indicator .icon,
.checkbox--sm .checkbox__indicator .notification--alert i,
.checkbox--sm .radio__indicator #notification-cart .notification__close i,
.checkbox--sm .radio__indicator .icon,
.checkbox--sm .radio__indicator .notification--alert i,
.notification--alert .checkbox--sm .checkbox__indicator i,
.notification--alert .checkbox--sm .radio__indicator i,
.notification--alert .radio--sm .checkbox__indicator i,
.notification--alert .radio--sm .radio__indicator i,
.radio--sm .checkbox__indicator #notification-cart .notification__close i,
.radio--sm .checkbox__indicator .icon,
.radio--sm .checkbox__indicator .notification--alert i,
.radio--sm .radio__indicator #notification-cart .notification__close i,
.radio--sm .radio__indicator .icon,
.radio--sm .radio__indicator .notification--alert i {
width: 20px;
height: 20px;
padding: 2px;
font-size: 16px;
line-height: 16px;
}
.checkbox--sm .checkbox__link,
.checkbox--sm .radio__link,
.radio--sm .checkbox__link,
.radio--sm .radio__link {
height: 20px;
line-height: 20px;
}
.checkbox--md,
.radio--md {
padding: 7px 0;
}
.checkbox--md .checkbox__indicator,
.checkbox--md .radio__indicator,
.radio--md .checkbox__indicator,
.radio--md .radio__indicator {
width: 30px;
height: 30px;
}
#notification-cart .notification__close .checkbox--md .checkbox__indicator i,
#notification-cart .notification__close .checkbox--md .radio__indicator i,
#notification-cart .notification__close .radio--md .checkbox__indicator i,
#notification-cart .notification__close .radio--md .radio__indicator i,
.checkbox--md .checkbox__indicator #notification-cart .notification__close i,
.checkbox--md .checkbox__indicator .icon,
.checkbox--md .checkbox__indicator .notification--alert i,
.checkbox--md .radio__indicator #notification-cart .notification__close i,
.checkbox--md .radio__indicator .icon,
.checkbox--md .radio__indicator .notification--alert i,
.notification--alert .checkbox--md .checkbox__indicator i,
.notification--alert .checkbox--md .radio__indicator i,
.notification--alert .radio--md .checkbox__indicator i,
.notification--alert .radio--md .radio__indicator i,
.radio--md .checkbox__indicator #notification-cart .notification__close i,
.radio--md .checkbox__indicator .icon,
.radio--md .checkbox__indicator .notification--alert i,
.radio--md .radio__indicator #notification-cart .notification__close i,
.radio--md .radio__indicator .icon,
.radio--md .radio__indicator .notification--alert i {
width: 30px;
height: 30px;
padding: 3px;
font-size: 24px;
line-height: 24px;
}
.checkbox--md .checkbox__link,
.checkbox--md .radio__link,
.radio--md .checkbox__link,
.radio--md .radio__link {
height: 30px;
line-height: 30px;
}
.checkbox--lg,
.radio--lg {
padding: 4px 0;
}
.checkbox--lg .checkbox__indicator,
.checkbox--lg .radio__indicator,
.radio--lg .checkbox__indicator,
.radio--lg .radio__indicator {
width: 36px;
height: 36px;
}
#notification-cart .notification__close .checkbox--lg .checkbox__indicator i,
#notification-cart .notification__close .checkbox--lg .radio__indicator i,
#notification-cart .notification__close .radio--lg .checkbox__indicator i,
#notification-cart .notification__close .radio--lg .radio__indicator i,
.checkbox--lg .checkbox__indicator #notification-cart .notification__close i,
.checkbox--lg .checkbox__indicator .icon,
.checkbox--lg .checkbox__indicator .notification--alert i,
.checkbox--lg .radio__indicator #notification-cart .notification__close i,
.checkbox--lg .radio__indicator .icon,
.checkbox--lg .radio__indicator .notification--alert i,
.notification--alert .checkbox--lg .checkbox__indicator i,
.notification--alert .checkbox--lg .radio__indicator i,
.notification--alert .radio--lg .checkbox__indicator i,
.notification--alert .radio--lg .radio__indicator i,
.radio--lg .checkbox__indicator #notification-cart .notification__close i,
.radio--lg .checkbox__indicator .icon,
.radio--lg .checkbox__indicator .notification--alert i,
.radio--lg .radio__indicator #notification-cart .notification__close i,
.radio--lg .radio__indicator .icon,
.radio--lg .radio__indicator .notification--alert i {
width: 36px;
height: 36px;
padding: 3.6px;
font-size: 28.8px;
line-height: 28.8px;
}
.checkbox--lg .checkbox__link,
.checkbox--lg .radio__link,
.radio--lg .checkbox__link,
.radio--lg .radio__link {
height: 36px;
line-height: 36px;
}
.checkbox--xl,
.radio--xl {
padding: 0;
}
.checkbox--xl .checkbox__indicator,
.checkbox--xl .radio__indicator,
.radio--xl .checkbox__indicator,
.radio--xl .radio__indicator {
width: 44px;
height: 44px;
}
#notification-cart .notification__close .checkbox--xl .checkbox__indicator i,
#notification-cart .notification__close .checkbox--xl .radio__indicator i,
#notification-cart .notification__close .radio--xl .checkbox__indicator i,
#notification-cart .notification__close .radio--xl .radio__indicator i,
.checkbox--xl .checkbox__indicator #notification-cart .notification__close i,
.checkbox--xl .checkbox__indicator .icon,
.checkbox--xl .checkbox__indicator .notification--alert i,
.checkbox--xl .radio__indicator #notification-cart .notification__close i,
.checkbox--xl .radio__indicator .icon,
.checkbox--xl .radio__indicator .notification--alert i,
.notification--alert .checkbox--xl .checkbox__indicator i,
.notification--alert .checkbox--xl .radio__indicator i,
.notification--alert .radio--xl .checkbox__indicator i,
.notification--alert .radio--xl .radio__indicator i,
.radio--xl .checkbox__indicator #notification-cart .notification__close i,
.radio--xl .checkbox__indicator .icon,
.radio--xl .checkbox__indicator .notification--alert i,
.radio--xl .radio__indicator #notification-cart .notification__close i,
.radio--xl .radio__indicator .icon,
.radio--xl .radio__indicator .notification--alert i {
width: 44px;
height: 44px;
padding: 4.4px;
font-size: 35.2px;
line-height: 35.2px;
}
.checkbox--xl .checkbox__link,
.checkbox--xl .radio__link,
.radio--xl .checkbox__link,
.radio--xl .radio__link {
height: 44px;
line-height: 44px;
}
.radio .radio__indicator {
border-radius: 50%;
}
.radio--inverted input[type='radio']:checked ~ .radio__indicator,
.radio.active .radio__indicator,
.radio input[type='radio']:checked ~ .radio__indicator {
box-shadow: inset 0 0 0 5px #0a152f;
}
.dropdown {
position: relative;
display: block;
}
.dropdown select {
display: none;
}
.dropdown * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdown__container {
position: relative;
}
.dropdown__select {
position: absolute;
display: none;
width: 100%;
min-width: 200px;
margin: 10px -1px;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 0 60px rgba(20, 42, 94, 0.25);
z-index: 20;
}
.dropdown__select:after {
position: absolute;
display: block;
z-index: 2;
content: '';
}
.dropdown__select .scrollable {
overflow-x: hidden;
overflow-y: auto;
max-height: 220px;
}
.dropdown__select .group:before {
border-radius: 0;
box-shadow: none;
}
.dropdown__select .group > div > * {
border: 0 !important;
}
.dropdown__select li {
height: 44px;
margin: 0;
padding: 0 10px;
cursor: pointer;
background-color: transparent;
color: #777;
line-height: 44px;
}
.dropdown__select li:hover {
cursor: pointer;
background-color: #44b678;
color: #fff;
}
.dropdown__select li:hover i {
color: #fff;
}
.dropdown__select li:last-child {
border: none;
}
.dropdown__check li {
position: relative;
padding: 0 10px 0 35px;
}
.dropdown__check li:hover i {
color: #fff;
}
.dropdown__check li i {
position: absolute;
left: 10px;
top: 10px;
color: #424242;
}
.dropdown__search input {
max-width: calc(100% - 44px);
border-radius: 0 !important;
border-top-left-radius: 3px !important;
}
#notification-cart .notification__close .dropdown__search i,
.dropdown__search #notification-cart .notification__close i,
.dropdown__search .icon,
.dropdown__search .notification--alert i,
.notification--alert .dropdown__search i {
background: #fff;
}
.dropdown__button {
-webkit-transition: 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition: 0ms cubic-bezier(1, 0, 0, 1);
transition: 0ms cubic-bezier(1, 0, 0, 1);
height: 44px;
position: relative;
margin: 0;
padding: 0 40px 0 20px;
border: 1px solid #b2b2b2;
border-radius: 3px;
background-color: #fff;
line-height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
.dropdown__button:after {
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #777;
content: '';
}
.dropdown__button:hover {
background-color: #f7f7f7;
color: #777;
cursor: pointer;
}
.dropdown__button.active ~ .dropdown__select {
display: block;
}
.dropdown--inverted .dropdown__button {
border-color: #fff;
background-color: transparent;
color: #fff;
}
.dropdown--inverted .dropdown__button:after {
border-top-color: #fff;
}
.dropdown--inverted .dropdown__button:hover {
background-color: #fff;
color: #777;
}
.dropdown--inverted .dropdown__button:hover:after {
border-top-color: #777;
}
.dropdown--top .dropdown__select {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
.dropdown--top-left .dropdown__select {
left: 0;
}
.dropdown--top-left .dropdown__select:after {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
left: 20px;
right: auto;
}
.dropdown--top-right .dropdown__select {
right: 0;
}
.dropdown--top-right .dropdown__select:after {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
left: auto;
right: 20px;
}
.dropdown--bottom .dropdown__select {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
.dropdown--bottom-left .dropdown__select {
left: 0;
}
.dropdown--bottom-right .dropdown__select {
right: 0;
}
.dropdown--xs .dropdown__button,
.dropdown--xs .dropdown__select li {
height: 24px;
line-height: 24px;
font-size: 12px;
}
.dropdown--xs .dropdown__search input {
max-width: calc(100% - 24px);
}
.dropdown--xs .dropdown__button {
padding: 0 20px 0 5px;
}
.dropdown--xs .dropdown__button:after {
right: 5px;
}
.dropdown--sm .dropdown__button,
.dropdown--sm .dropdown__select li {
height: 34px;
line-height: 34px;
font-size: 13px;
}
.dropdown--sm .dropdown__search input {
max-width: calc(100% - 34px);
}
.dropdown--sm .dropdown__button {
padding: 0 30px 0 10px;
}
.dropdown--sm .dropdown__button:after {
right: 10px;
}
.dropdown--md .dropdown__button,
.dropdown--md .dropdown__select li {
height: 44px;
line-height: 44px;
font-size: 15px;
}
.dropdown--md .dropdown__search input {
max-width: calc(100% - 44px);
}
.dropdown--md .dropdown__button {
padding: 0 50px 0 20px;
}
.dropdown--md .dropdown__button:after {
right: 20px;
}
.dropdown--lg .dropdown__button,
.dropdown--lg .dropdown__select li {
height: 54px;
line-height: 54px;
font-size: 17px;
}
.dropdown--lg .dropdown__search input {
max-width: calc(100% - 54px);
}
.dropdown--lg .dropdown__button {
padding: 0 70px 0 30px;
}
.dropdown--lg .dropdown__button:after {
right: 30px;
}
.dropdown--xl .dropdown__button,
.dropdown--xl .dropdown__select li {
height: 64px;
line-height: 64px;
font-size: 20px;
}
.dropdown--xl .dropdown__search input {
max-width: calc(100% - 64px);
}
.dropdown--xl .dropdown__button {
padding: 0 110px 0 50px;
}
.dropdown--xl .dropdown__button:after {
right: 50px;
}
.active.dropdown--top-left .dropdown__select,
.active.dropdown--top-right .dropdown__select {
margin: 0 0 10px;
}
.dropdown--top-left .dropdown__select,
.dropdown--top-right .dropdown__select {
bottom: 100%;
}
.active.dropdown--right .dropdown__select {
margin: 0 10px 0 0;
}
.dropdown--right .dropdown__select {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 100%;
}
.active.dropdown--left .dropdown__select {
margin: 0 10px 0 0;
}
.dropdown--left .dropdown__select {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: 100%;
}
.active.dropdown--bottom-left .dropdown__select,
.active.dropdown--bottom-right .dropdown__select,
.active.dropdown--bottom .dropdown__select,
.active.dropdown--top .dropdown__select {
margin: 10px 0 0;
}
.dropdown--bottom-left .dropdown__select,
.dropdown--bottom-right .dropdown__select,
.dropdown--bottom .dropdown__select,
.dropdown--top .dropdown__select {
top: 100%;
}
input:not([type]),
input[type='color'],
input[type='date'],
input[type='datetime-local'],
input[type='datetime'],
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'],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
-webkit-transition:
border 0ms cubic-bezier(1, 0, 0, 1),
box-shadow 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition:
border 0ms cubic-bezier(1, 0, 0, 1),
box-shadow 0ms cubic-bezier(1, 0, 0, 1);
transition:
border 0ms cubic-bezier(1, 0, 0, 1),
box-shadow 0ms cubic-bezier(1, 0, 0, 1);
display: block;
width: 100%;
height: 44px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #c8c8c8;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 0 0 transparent;
color: #777;
font-size: 15px;
line-height: 24px;
}
input:not([type]):-webkit-autofill,
input[type='color']:-webkit-autofill,
input[type='date']:-webkit-autofill,
input[type='datetime-local']:-webkit-autofill,
input[type='datetime']:-webkit-autofill,
input[type='email']:-webkit-autofill,
input[type='month']:-webkit-autofill,
input[type='number']:-webkit-autofill,
input[type='password']:-webkit-autofill,
input[type='search']:-webkit-autofill,
input[type='tel']:-webkit-autofill,
input[type='text']:-webkit-autofill,
input[type='time']:-webkit-autofill,
input[type='url']:-webkit-autofill,
input[type='week']:-webkit-autofill,
textarea:-webkit-autofill {
box-shadow: inset 0 0 0 64px #fff;
}
input:not([type]):hover,
input[type='color']:hover,
input[type='date']:hover,
input[type='datetime-local']:hover,
input[type='datetime']:hover,
input[type='email']:hover,
input[type='month']:hover,
input[type='number']:hover,
input[type='password']:hover,
input[type='search']:hover,
input[type='tel']:hover,
input[type='text']:hover,
input[type='time']:hover,
input[type='url']:hover,
input[type='week']:hover,
textarea:hover {
outline: none;
border-color: #7f7f7f;
}
input:not([type]):focus,
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
input[type='datetime']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='time']:focus,
input[type='url']:focus,
input[type='week']:focus,
textarea:focus {
outline: none;
border-color: #0a152f;
}
input:not([type]):disabled,
input[type='color']:disabled,
input[type='date']:disabled,
input[type='datetime-local']:disabled,
input[type='datetime']:disabled,
input[type='email']:disabled,
input[type='month']:disabled,
input[type='number']:disabled,
input[type='password']:disabled,
input[type='search']:disabled,
input[type='tel']:disabled,
input[type='text']:disabled,
input[type='time']:disabled,
input[type='url']:disabled,
input[type='week']:disabled,
textarea:disabled {
background-color: #fff;
cursor: no-drop;
color: hsla(0, 0%, 46.7%, 0.4);
}
input:not([type]).error,
input[type='color'].error,
input[type='date'].error,
input[type='datetime-local'].error,
input[type='datetime'].error,
input[type='email'].error,
input[type='month'].error,
input[type='number'].error,
input[type='password'].error,
input[type='search'].error,
input[type='tel'].error,
input[type='text'].error,
input[type='time'].error,
input[type='url'].error,
input[type='week'].error,
textarea.error {
border-color: #ff7d6a;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: hsla(0, 0%, 46.7%, 0.4);
}
input:-moz-placeholder,
input::-moz-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder {
color: hsla(0, 0%, 46.7%, 0.4);
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: hsla(0, 0%, 46.7%, 0.4);
}
.label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
}
.label > span {
color: #7c7c7c;
font-size: 13px;
}
.label .text,
.label input:not([type]),
.label input[type='color'],
.label input[type='date'],
.label input[type='datetime-local'],
.label input[type='datetime'],
.label input[type='email'],
.label input[type='month'],
.label input[type='number'],
.label input[type='password'],
.label input[type='search'],
.label input[type='tel'],
.label input[type='text'],
.label input[type='time'],
.label input[type='url'],
.label input[type='week'],
.label textarea {
font-size: 15px;
font-weight: 400;
}
.label .text {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
margin-bottom: 10px;
color: #777;
}
.label--inline {
display: inline-block;
}
.groups__item {
border-bottom: 1px solid;
border-color: #c8c8c8;
}
.groups__item:last-child {
border: none;
}
.groups__item [class*='col__'],
.groups__item [class^='col__'] {
margin: 0 !important;
}
.groups__item label {
margin: 0;
font-size: 13px;
text-align: right;
}
.groups--pd-xs .groups__item {
margin: 0 -5px;
padding: 10px 5px;
}
.groups--mg-xs {
margin: -5px 0;
}
.groups--pd-sm .groups__item {
margin: 0 -10px;
padding: 10px;
}
.groups--mg-sm {
margin: -10px 0;
}
.groups--pd-md .groups__item {
margin: 0 -20px;
padding: 10px 20px;
}
.groups--mg-md {
margin: -20px 0;
}
.groups--pd-lg .groups__item {
margin: 0 -30px;
padding: 10px 30px;
}
.groups--mg-lg {
margin: -30px 0;
}
.groups--pd-xl .groups__item {
margin: 0 -50px;
padding: 10px 50px;
}
.groups--mg-xl {
margin: -50px 0;
}
textarea {
padding: 10px;
min-height: 176px;
line-height: 1.6;
}
.error-msg {
position: relative;
margin: 5px 0 0;
padding: 0 0 0 21px;
color: #ff7d6a;
line-height: 20px;
}
#notification-cart .notification__close .error-msg i,
.error-msg #notification-cart .notification__close i,
.error-msg .icon,
.error-msg .notification--alert i,
.notification--alert .error-msg i {
position: absolute;
top: 9px;
left: 0;
transform: translateY(-50%);
color: #ff7d6a;
}
.group {
overflow: hidden;
position: relative;
border-radius: 3px;
box-sizing: border-box;
background-color: #f7f7f7;
}
.group:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: 3px;
box-shadow: inset 0 0 0 1px #c8c8c8;
content: '';
z-index: 2;
}
.group > * {
border-right: 1px solid;
border-color: #c8c8c8;
}
.group > :last-child {
border: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.group > input {
flex: 1;
height: 100%;
margin: 0;
border: none;
}
.group > button {
position: relative;
margin: 0;
border-radius: 0;
z-index: 1;
}
.group > button:hover {
z-index: 2;
}
.group--inverted {
background-color: #fff;
color: #777;
}
.group--inverted:before {
box-shadow: none;
}
.group__context {
padding: 0 10px;
}
.group__context span {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
display: block;
}
.group__button .button {
position: relative;
border-radius: 0;
z-index: 3;
}
.group__input {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.group__input input:not([type]),
.group__input input[type='color'],
.group__input input[type='date'],
.group__input input[type='datetime-local'],
.group__input input[type='datetime'],
.group__input input[type='email'],
.group__input input[type='month'],
.group__input input[type='number'],
.group__input input[type='password'],
.group__input input[type='search'],
.group__input input[type='tel'],
.group__input input[type='text'],
.group__input input[type='time'],
.group__input input[type='url'],
.group__input input[type='week'],
.group__input textarea {
margin: 0;
border: none;
}
.group__input input {
height: 100%;
}
.switch {
background-color: #fff;
cursor: pointer;
}
.switch:hover .switch__indicator:after {
background-color: #f7f7f7;
}
.switch .switch__indicator ~ .switch__link,
.switch .switch__link ~ .switch__indicator {
margin: 0 0 0 10px;
}
.switch input[type='checkbox'],
.switch input[type='radio'] {
display: none;
}
.switch input[type='checkbox']:checked ~ .switch__indicator,
.switch input[type='radio']:checked ~ .switch__indicator {
background-color: #44b678;
}
.switch input[type='checkbox']:checked ~ .switch__indicator:before,
.switch input[type='radio']:checked ~ .switch__indicator:before {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.switch input[type='checkbox']:checked ~ .switch__indicator:after,
.switch input[type='radio']:checked ~ .switch__indicator:after {
background-color: #fff;
box-shadow: 0 0 0 1px hsla(0, 0%, 89.8%, 0);
}
.switch input[type='checkbox']:checked ~ .switch__link,
.switch input[type='radio']:checked ~ .switch__link {
color: #777;
}
.switch__indicator {
position: relative;
display: block;
background: #d8d8d8;
}
.switch__indicator:before {
top: 2px;
left: 2px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
z-index: 1;
}
.switch__indicator:after,
.switch__indicator:before {
position: absolute;
-webkit-transition: all 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 0ms cubic-bezier(1, 0, 0, 1);
transition: all 0ms cubic-bezier(1, 0, 0, 1);
content: '';
}
.switch__indicator:after {
top: 0;
left: 0;
margin: 2px;
background-color: #fff;
box-shadow: 0 1px 0 0 #9c9c9c;
z-index: 2;
}
.switch--xs .switch__indicator {
width: 24px;
height: 16px;
border-radius: 16px;
line-height: 16px;
}
.switch--xs .switch__indicator:before {
width: 20px;
height: 12px;
border-radius: 12px;
}
.switch--xs .switch__indicator:after {
width: 12px;
height: 12px;
border-radius: 12px;
}
.switch--xs .switch__link {
font-size: 12px;
}
.switch--xs input[type='checkbox']:checked ~ .switch__indicator:after,
.switch--xs input[type='radio']:checked ~ .switch__indicator:after {
left: 8px;
}
.switch--sm .switch__indicator {
width: 30px;
height: 20px;
border-radius: 20px;
line-height: 20px;
}
.switch--sm .switch__indicator:before {
width: 26px;
height: 16px;
border-radius: 16px;
}
.switch--sm .switch__indicator:after {
width: 16px;
height: 16px;
border-radius: 16px;
}
.switch--sm .switch__link {
font-size: 13px;
}
.switch--sm input[type='checkbox']:checked ~ .switch__indicator:after,
.switch--sm input[type='radio']:checked ~ .switch__indicator:after {
left: 10px;
}
.switch--md .switch__indicator {
width: 45px;
height: 30px;
border-radius: 30px;
line-height: 30px;
}
.switch--md .switch__indicator:before {
width: 41px;
height: 26px;
border-radius: 26px;
}
.switch--md .switch__indicator:after {
width: 26px;
height: 26px;
border-radius: 26px;
}
.switch--md .switch__link {
font-size: 15px;
}
.switch--md input[type='checkbox']:checked ~ .switch__indicator:after,
.switch--md input[type='radio']:checked ~ .switch__indicator:after {
left: 15px;
}
.switch--lg .switch__indicator {
width: 54px;
height: 36px;
border-radius: 36px;
line-height: 36px;
}
.switch--lg .switch__indicator:before {
width: 50px;
height: 32px;
border-radius: 32px;
}
.switch--lg .switch__indicator:after {
width: 32px;
height: 32px;
border-radius: 32px;
}
.switch--lg .switch__link {
font-size: 17px;
}
.switch--lg input[type='checkbox']:checked ~ .switch__indicator:after,
.switch--lg input[type='radio']:checked ~ .switch__indicator:after {
left: 18px;
}
.switch--xl .switch__indicator {
width: 66px;
height: 44px;
border-radius: 44px;
line-height: 44px;
}
.switch--xl .switch__indicator:before {
width: 62px;
height: 40px;
border-radius: 40px;
}
.switch--xl .switch__indicator:after {
width: 40px;
height: 40px;
border-radius: 40px;
}
.switch--xl .switch__link {
font-size: 20px;
}
.switch--xl input[type='checkbox']:checked ~ .switch__indicator:after,
.switch--xl input[type='radio']:checked ~ .switch__indicator:after {
left: 22px;
}
.upload {
overflow: hidden;
height: 44px;
margin: 0 0 10px;
border-radius: 3px;
line-height: 42px;
}
.upload__files {
border: 1px solid #b2b2b2;
border-right: none;
width: 100%;
}
.upload__files,
.upload__link {
display: table-cell;
padding: 0 20px;
}
.upload__link {
-webkit-transition: all 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 0ms cubic-bezier(1, 0, 0, 1);
transition: all 0ms cubic-bezier(1, 0, 0, 1);
position: relative;
background-color: #44b678;
color: #fff;
white-space: nowrap;
}
.upload__link:hover {
background-color: #286c47;
box-shadow: inset 0 -1px 1px rgba(20, 42, 94, 0.35);
color: #fff;
}
.upload__link--icon {
padding: 0 20px 0 44px;
}
.upload__link--icon svg {
position: absolute;
top: 50%;
left: 20px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
fill: #fff;
}
.upload--sm {
height: 34px;
line-height: 32px;
}
.upload--large {
height: 54px;
line-height: 52px;
}
.upload--inline {
display: inline-block;
}
.upload input[type='file'] {
display: none;
}
.upload label {
display: table;
width: 100%;
cursor: pointer;
}
.password {
position: relative;
}
.password--show .password__toggle i.active {
display: block;
}
.password--show .password__toggle i.inactive {
display: none;
}
.password__toggle {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background-color: #fff;
cursor: pointer;
}
.password__toggle i.active {
display: none;
}
.password input {
width: 100%;
}
.autocomplete {
position: absolute;
overflow: auto;
display: none;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
transform: translateY(-1px);
background-color: #fff;
box-shadow: 0 0 60px rgba(20, 42, 94, 0.25);
z-index: 100;
}
@media screen and (max-width: 768px) {
.autocomplete {
height: 187px;
}
}
.autocomplete__item {
height: 34px;
padding: 0 20px;
color: #7c7c7c;
text-align: left;
text-transform: lowercase;
line-height: 34px;
cursor: pointer;
}
.autocomplete__item:hover {
background-color: #f9f9f9;
}
.autocomplete__item.selected {
background-color: #eaeaea;
}
.autocomplete__item b {
color: #777;
}
.autocomplete--show {
display: block;
}
.accordion {
position: relative;
overflow: hidden;
margin: 0 0 20px;
padding: 0;
line-height: 1.6;
}
.accordion:after {
clear: both;
content: '';
display: table;
}
.accordion:not(.accordion--ready) .accordion__mobile-nav {
position: absolute;
visibility: hidden;
border-bottom: 1px solid #e5e5e5;
}
.accordion:not(.accordion--ready) .accordion__container > a,
.accordion:not(.accordion--ready) .accordion__container > button {
visibility: hidden;
}
@media screen and (min-width: 480px) {
.accordion--tabs:not(data-disable-mobile-select) .accordion__container {
display: inline;
border: none;
}
.accordion--tabs:not(data-disable-mobile-select) .accordion__content {
float: left;
border-top: 1px solid #e5e5e5;
}
.accordion--tabs:not(data-disable-mobile-select) .accordion__link:not(.nostyle) {
display: inline-block;
}
.accordion--tabs:not(data-disable-mobile-select)
.accordion__link:not(.nostyle).active {
border-bottom: 1px solid #777;
}
}
.accordion__container {
margin: 0 0 10px;
list-style: none;
}
.accordion__container:last-child {
margin-bottom: 0;
}
.accordion__content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 0 20px 10px;
}
.accordion__content p:last-child {
margin: 0;
}
.accordion__mobile-nav {
padding: 0 20px;
}
.accordion__select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
height: 44px;
border: none;
background: transparent;
text-align: center;
}
.accordion__select__wrapper {
position: relative;
display: inline-block;
padding: 0 15px 0 0;
}
.accordion__select__wrapper:after {
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #777;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
content: '';
}
.accordion__link:not(.nostyle) {
display: block;
padding: 10px 10px 10px 20px;
text-decoration: none;
color: #424242;
}
#notification-cart .notification__close .accordion__link:not(.nostyle) i,
.accordion__link:not(.nostyle) #notification-cart .notification__close i,
.accordion__link:not(.nostyle) .icon,
.accordion__link:not(.nostyle) .notification--alert i,
.notification--alert .accordion__link:not(.nostyle) i {
color: #424242;
}
.accordion__link:not(.nostyle) .state--active {
display: none;
}
#notification-cart .notification__close .accordion__link:not(.nostyle).active i,
.accordion__link:not(.nostyle).active,
.accordion__link:not(.nostyle).active #notification-cart .notification__close i,
.accordion__link:not(.nostyle).active .icon,
.accordion__link:not(.nostyle).active .notification--alert i,
.notification--alert .accordion__link:not(.nostyle).active i {
color: #0a152f;
}
.accordion__link:not(.nostyle).active .state--active {
display: block;
}
.accordion__link:not(.nostyle).active .state--inactive {
display: none;
}
.accordion__link.active + .accordion__content {
position: relative;
display: block;
}
.accordion--inverted {
color: #fff;
}
.accordion--inverted a:not(.button) {
color: hsla(0, 0%, 100%, 0.75);
}
.accordion--inverted a:not(.button).active,
.accordion--inverted a:not(.button):hover {
color: #fff;
}
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
margin: 0;
padding: 0;
border: none;
background: none;
user-select: none;
cursor: pointer;
}
.bj-button {
position: relative;
display: inline-block;
border: none;
border-radius: 3px;
text-align: center;
text-decoration: none;
cursor: pointer;
padding: 0 30px;
min-width: 44px;
height: 44px;
font-size: 15px;
line-height: 44px;
transition: 0.25s linear;
background: #336aea;
color: #fff;
}
.bj-button:hover {
background: #2955bb;
background-outline: rgba(41, 85, 187, 0.1);
box-shadow-outline: inset 0 0 0 2px #2955bb;
color-outline: #2955bb;
color: #fff;
}
.bj-button.active {
background: #1f408c;
background-outline: rgba(41, 85, 187, 0.2);
box-shadow-outline: inset 0 0 0 2px #1f408c;
color-outline: #1f408c;
color: #fff;
}
.bj-button:after {
display: table;
clear: both;
content: '';
}
.bj-button.disabled {
opacity: 0.4;
pointer-events: none;
}
.bj-button i ~ span,
.bj-button span ~ i {
margin-left: 10px;
}
.bj-button span {
float: left;
}
.bj-button i {
float: left;
color: inherit !important;
fill: inherit !important;
font-size: 18px;
}
.bj-button i:before {
display: block;
}
.bj-button--auto {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
line-height: 1 !important;
}
.bj-button--auto span {
float: none !important;
}
.active.bj-button--state .state--active,
.bj-button--state:not(.active) .state--inactive {
display: block;
}
.bj-button--state .state--active,
.bj-button--state .state--inactive {
display: none;
}
.bj-button--icon {
padding: 0 !important;
}
.bj-button--icon i {
float: inherit !important;
margin: 0 auto;
}
.bj-button--fullwidth {
-ms-display: flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
}
.bj-button--google i {
display: inline-block;
width: 18px;
height: 100%;
background: url(../images/google.f9a3cace3ba0e6931c381e3c8adc96d4.svg) no-repeat 50%;
background-size: contain;
}
.bj-button--google i:before {
display: none;
}
.defaultPrefix--xs.bj-button--google i {
width: 12px;
}
.defaultPrefix--sm.bj-button--google i {
width: 16px;
}
.defaultPrefix--md.bj-button--google i {
width: 18px;
}
.defaultPrefix--lg.bj-button--google i {
width: 20px;
}
.defaultPrefix--xl.bj-button--google i {
width: 24px;
}
.bj-button--xs {
padding: 0 20px;
min-width: 24px;
height: 24px;
font-size: 13px;
line-height: 24px;
}
.bj-button--xs i {
font-size: 12px;
}
.bj-button--sm {
padding: 0 20px;
min-width: 34px;
height: 34px;
font-size: 13px;
line-height: 34px;
}
.bj-button--sm i {
font-size: 16px;
}
.bj-button--md {
padding: 0 30px;
min-width: 44px;
height: 44px;
font-size: 15px;
line-height: 44px;
}
.bj-button--md i {
font-size: 18px;
}
.bj-button--lg {
padding: 0 30px;
min-width: 54px;
height: 54px;
font-size: 17px;
line-height: 54px;
}
.bj-button--lg i {
font-size: 20px;
}
.bj-button--xl {
padding: 0 30px;
min-width: 64px;
height: 64px;
font-size: 17px;
line-height: 64px;
}
.bj-button--xl i {
font-size: 24px;
}
.bj-button--flat {
background: #336aea;
color: #fff;
}
.bj-button--flat:focus,
.bj-button--flat:hover {
background: #2955bb;
}
.active.bj-button--flat {
background: #1f408c;
}
.active.bj-button--flat,
.bj-button--flat:focus,
.bj-button--flat:hover {
color: #fff;
}
.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #336aea;
color: #336aea;
}
.bj-button--outline:focus,
.bj-button--outline:hover {
background: rgba(41, 85, 187, 0.1);
}
.active.bj-button--outline {
background: rgba(41, 85, 187, 0.2);
}
.bj-button--outline:focus,
.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #2955bb;
}
.active.bj-button--outline {
box-shadow: inset 0 0 0 2px #1f408c;
}
.bj-button--outline:focus,
.bj-button--outline:hover {
color: #2955bb;
}
.active.bj-button--outline {
color: #1f408c;
}
.bj-button--blue {
background: #336aea;
color: #fff;
}
.bj-button--blue:focus,
.bj-button--blue:hover {
background: #2955bb;
}
.active.bj-button--blue {
background: #1f408c;
}
.active.bj-button--blue,
.bj-button--blue:focus,
.bj-button--blue:hover {
color: #fff;
}
.bj-button--yellow {
background: #feb602;
color: #fff;
}
.bj-button--yellow:focus,
.bj-button--yellow:hover {
background: #f4980a;
}
.active.bj-button--yellow {
background: #ea7e11;
}
.active.bj-button--yellow,
.bj-button--yellow:focus,
.bj-button--yellow:hover {
color: #fff;
}
.bj-button--red {
background: #ff7d6a;
color: #fff;
}
.bj-button--red:focus,
.bj-button--red:hover {
background: #eb644c;
}
.active.bj-button--red {
background: #d3482b;
}
.active.bj-button--red,
.bj-button--red:focus,
.bj-button--red:hover {
color: #fff;
}
.bj-button--green {
background: #44b678;
color: #fff;
}
.bj-button--green:focus,
.bj-button--green:hover {
background: #3b9e62;
}
.active.bj-button--green {
background: #32864c;
}
.active.bj-button--green,
.bj-button--green:focus,
.bj-button--green:hover {
color: #fff;
}
.bj-button--purple {
background: #6569bd;
color: #fff;
}
.bj-button--purple:focus,
.bj-button--purple:hover {
background: #4c50ae;
}
.active.bj-button--purple {
background: #404492;
}
.active.bj-button--purple,
.bj-button--purple:focus,
.bj-button--purple:hover {
color: #fff;
}
.bj-button--dark-blue {
background: #142a5e;
color: #fff;
}
.active.bj-button--dark-blue,
.bj-button--dark-blue:focus,
.bj-button--dark-blue:hover {
background: #142a5e;
}
.active.bj-button--dark-blue,
.bj-button--dark-blue:focus,
.bj-button--dark-blue:hover {
color: #fff;
}
.bj-button--white {
background: transparent;
box-shadow: inset 0 0 0 2px #d8d8d8;
color: #424242;
}
.bj-button--white:focus,
.bj-button--white:hover {
background: hsla(0, 0%, 96.9%, 0.1);
}
.active.bj-button--white {
background: hsla(0, 0%, 94.1%, 0.2);
}
.active.bj-button--white,
.bj-button--white:focus,
.bj-button--white:hover {
box-shadow: inset 0 0 0 2px #d8d8d8;
}
.active.bj-button--white,
.bj-button--white:focus,
.bj-button--white:hover {
color: #424242;
}
.bj-button--gray {
background: #e5e5e5;
color: #424242;
}
.bj-button--gray:focus,
.bj-button--gray:hover {
background: #d8d8d8;
}
.active.bj-button--gray {
background: #c8c8c8;
}
.active.bj-button--gray,
.bj-button--gray:focus,
.bj-button--gray:hover {
color: #424242;
}
.bj-button--light-gray {
background: #f0f0f0;
color: #424242;
}
.bj-button--light-gray:focus,
.bj-button--light-gray:hover {
background: #e5e5e5;
}
.active.bj-button--light-gray {
background: #c8c8c8;
}
.active.bj-button--light-gray,
.bj-button--light-gray:focus,
.bj-button--light-gray:hover {
color: #424242;
}
.bj-button--dark-gray {
background: #424242;
color: #fff;
}
.bj-button--dark-gray:focus,
.bj-button--dark-gray:hover {
background: #121212;
}
.active.bj-button--dark-gray {
background: #c8c8c8;
}
.active.bj-button--dark-gray,
.bj-button--dark-gray:focus,
.bj-button--dark-gray:hover,
.bj-button--facebook {
color: #fff;
}
.bj-button--facebook:focus,
.bj-button--facebook:hover {
background: #0d6fed;
}
.active.bj-button--facebook {
background: #0d68df;
}
.active.bj-button--facebook,
.bj-button--facebook:focus,
.bj-button--facebook:hover {
color: #fff;
}
.bj-button--facebook--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #d8d8d8;
color: #1877f2;
}
.bj-button--facebook--outline:focus,
.bj-button--facebook--outline:hover {
background: hsla(0, 0%, 78.4%, 0.1);
}
.active.bj-button--facebook--outline {
background: hsla(0, 0%, 78.4%, 0.2);
}
.active.bj-button--facebook--outline,
.bj-button--facebook--outline:focus,
.bj-button--facebook--outline:hover {
box-shadow: inset 0 0 0 2px #d8d8d8;
}
.active.bj-button--facebook--outline,
.bj-button--facebook--outline:focus,
.bj-button--facebook--outline:hover {
color: #424242;
}
.bj-button--whatsapp {
background: #25d366;
color: #fff;
}
.bj-button--whatsapp:focus,
.bj-button--whatsapp:hover {
background: #23c660;
}
.active.bj-button--whatsapp {
background: #20b959;
}
.active.bj-button--whatsapp,
.bj-button--whatsapp:focus,
.bj-button--whatsapp:hover {
color: #fff;
}
.bj-button--telegram {
background: #08c;
color: #fff;
}
.bj-button--telegram:focus,
.bj-button--telegram:hover {
background: #007ebd;
}
.active.bj-button--telegram {
background: #0074ad;
}
.active.bj-button--telegram,
.bj-button--telegram:focus,
.bj-button--telegram:hover,
.bj-button--twitter {
color: #fff;
}
.active.bj-button--twitter,
.bj-button--twitter:focus,
.bj-button--twitter:hover {
background: #000;
}
.active.bj-button--twitter,
.bj-button--twitter:focus,
.bj-button--twitter:hover {
color: #fff;
}
.bj-button--twitter--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #d8d8d8;
color: #000;
}
.bj-button--twitter--outline:focus,
.bj-button--twitter--outline:hover {
background: hsla(0, 0%, 78.4%, 0.1);
}
.active.bj-button--twitter--outline {
background: hsla(0, 0%, 78.4%, 0.2);
}
.active.bj-button--twitter--outline,
.bj-button--twitter--outline:focus,
.bj-button--twitter--outline:hover {
box-shadow: inset 0 0 0 2px #d8d8d8;
}
.active.bj-button--twitter--outline,
.bj-button--twitter--outline:focus,
.bj-button--twitter--outline:hover {
color: #424242;
}
.bj-button--instagram {
background: linear-gradient(29.61deg, #f38334, #da2e7d 50.39%, #6b54c6);
color: #fff;
}
.bj-button--instagram:focus,
.bj-button--instagram:hover {
background: linear-gradient(29.61deg, #e6670e, #b52064 50.39%, #513aad);
}
.active.bj-button--instagram {
background: linear-gradient(29.61deg, #f38334, #da2e7d 50.39%, #6b54c6);
}
.active.bj-button--instagram,
.bj-button--instagram:focus,
.bj-button--instagram:hover {
color: #fff;
}
.bj-button--instagram i {
margin: 0;
}
.bj-button--behance {
background: #1769ff;
color: #fff;
}
.bj-button--behance:focus,
.bj-button--behance:hover {
background: #085fff;
}
.active.bj-button--behance {
background: #0057f7;
}
.active.bj-button--behance,
.bj-button--behance:focus,
.bj-button--behance:hover {
color: #fff;
}
.bj-button--dribbble {
background: #ea4c89;
color: #fff;
}
.bj-button--dribbble:focus,
.bj-button--dribbble:hover {
background: #e83e80;
}
.active.bj-button--dribbble {
background: #e73177;
}
.active.bj-button--dribbble,
.bj-button--dribbble:focus,
.bj-button--dribbble:hover {
color: #fff;
}
.bj-button--google {
background: transparent;
box-shadow: inset 0 0 0 2px #d8d8d8;
color: #424242;
}
.bj-button--google:focus,
.bj-button--google:hover {
background: hsla(0, 0%, 78.4%, 0.1);
}
.active.bj-button--google {
background: hsla(0, 0%, 78.4%, 0.2);
}
.active.bj-button--google,
.bj-button--google:focus,
.bj-button--google:hover {
box-shadow: inset 0 0 0 2px #d8d8d8;
}
.active.bj-button--google,
.bj-button--google:focus,
.bj-button--google:hover {
color: #424242;
}
.bj-button--pinterest {
background: #cb2027;
color: #fff;
}
.bj-button--pinterest:focus,
.bj-button--pinterest:hover {
background: #be1e24;
}
.active.bj-button--pinterest {
background: #b11c22;
}
.active.bj-button--pinterest,
.bj-button--pinterest:focus,
.bj-button--pinterest:hover {
color: #fff;
}
.bj-button--youtube {
background: #b00;
color: #fff;
}
.bj-button--youtube:focus,
.bj-button--youtube:hover {
background: #ac0000;
}
.active.bj-button--youtube {
background: #9c0000;
}
.active.bj-button--youtube,
.bj-button--youtube:focus,
.bj-button--youtube:hover {
color: #fff;
}
.bj-button--link {
background: transparent;
color: #336aea;
}
.active.bj-button--link,
.bj-button--link:focus,
.bj-button--link:hover {
background: rgba(10, 21, 47, 0.1);
}
.active.bj-button--link,
.bj-button--link:focus,
.bj-button--link:hover {
color: #336aea;
}
.bj-button--link-color {
background: transparent;
color: #424242;
}
.active.bj-button--link-color,
.bj-button--link-color:focus,
.bj-button--link-color:hover {
background: rgba(10, 21, 47, 0.1);
}
.active.bj-button--link-color,
.bj-button--link-color:focus,
.bj-button--link-color:hover {
color: #336aea;
}
.bj-button--link-dark {
background: transparent;
color: #424242;
}
.active.bj-button--link-dark,
.bj-button--link-dark:focus,
.bj-button--link-dark:hover {
background: rgba(10, 21, 47, 0.1);
}
.active.bj-button--link-dark,
.bj-button--link-dark:focus,
.bj-button--link-dark:hover {
color: #424242;
}
.bj-button--link-inverted {
background: transparent;
color: #fff;
}
.active.bj-button--link-inverted,
.bj-button--link-inverted:focus,
.bj-button--link-inverted:hover {
background: hsla(0, 0%, 100%, 0.2);
}
.active.bj-button--link-inverted,
.bj-button--link-inverted:focus,
.bj-button--link-inverted:hover {
color: #fff;
}
.bj-button--link-gray {
background: transparent;
color: #b1b1b1;
}
.active.bj-button--link-gray,
.bj-button--link-gray:focus,
.bj-button--link-gray:hover {
background: rgba(10, 21, 47, 0.1);
}
.active.bj-button--link-gray,
.bj-button--link-gray:focus,
.bj-button--link-gray:hover {
color: #b1b1b1;
}
.bj-button--blue.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #336aea;
color: #336aea;
}
.bj-button--blue.bj-button--outline:focus,
.bj-button--blue.bj-button--outline:hover {
background: rgba(41, 85, 187, 0.1);
}
.bj-button--blue.active.bj-button--outline {
background: rgba(41, 85, 187, 0.2);
}
.bj-button--blue.bj-button--outline:focus,
.bj-button--blue.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #2955bb;
}
.bj-button--blue.active.bj-button--outline {
box-shadow: inset 0 0 0 2px #1f408c;
}
.bj-button--blue.bj-button--outline:focus,
.bj-button--blue.bj-button--outline:hover {
color: #2955bb;
}
.bj-button--blue.active.bj-button--outline {
color: #1f408c;
}
.bj-button--#ff0.bj-button--outline,
.bj-button--outline.bj-button--yellow {
background: transparent;
box-shadow: inset 0 0 0 2px #feb602;
color: #feb602;
}
.bj-button--#ff0.bj-button--outline:focus,
.bj-button--#ff0.bj-button--outline:hover,
.bj-button--outline.bj-button--yellow:focus,
.bj-button--outline.bj-button--yellow:hover {
background: rgba(244, 152, 10, 0.1);
}
.active.bj-button--outline.bj-button--yellow,
.bj-button--#ff0.active.bj-button--outline {
background: rgba(244, 152, 10, 0.2);
}
.bj-button--#ff0.bj-button--outline:focus,
.bj-button--#ff0.bj-button--outline:hover,
.bj-button--outline.bj-button--yellow:focus,
.bj-button--outline.bj-button--yellow:hover {
box-shadow: inset 0 0 0 2px #f4980a;
}
.active.bj-button--outline.bj-button--yellow,
.bj-button--#ff0.active.bj-button--outline {
box-shadow: inset 0 0 0 2px #ea7e11;
}
.bj-button--#ff0.bj-button--outline:focus,
.bj-button--#ff0.bj-button--outline:hover,
.bj-button--outline.bj-button--yellow:focus,
.bj-button--outline.bj-button--yellow:hover {
color: #f4980a;
}
.active.bj-button--outline.bj-button--yellow,
.bj-button--#ff0.active.bj-button--outline {
color: #ea7e11;
}
.bj-button--red.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #ff7d6a;
color: #ff7d6a;
}
.bj-button--red.bj-button--outline:focus,
.bj-button--red.bj-button--outline:hover {
background: rgba(235, 100, 76, 0.1);
}
.bj-button--red.active.bj-button--outline {
background: rgba(235, 100, 76, 0.2);
}
.bj-button--red.bj-button--outline:focus,
.bj-button--red.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #eb644c;
}
.bj-button--red.active.bj-button--outline {
box-shadow: inset 0 0 0 2px #d3482b;
}
.bj-button--red.bj-button--outline:focus,
.bj-button--red.bj-button--outline:hover {
color: #eb644c;
}
.bj-button--red.active.bj-button--outline {
color: #d3482b;
}
.bj-button--green.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #3b9e62;
color: #3b9e62;
}
.bj-button--green.bj-button--outline:focus,
.bj-button--green.bj-button--outline:hover {
background: rgba(50, 134, 76, 0.1);
}
.bj-button--green.active.bj-button--outline {
background: rgba(50, 134, 76, 0.2);
}
.bj-button--green.bj-button--outline:focus,
.bj-button--green.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #32864c;
}
.bj-button--green.active.bj-button--outline {
box-shadow: inset 0 0 0 2px #286d34;
}
.bj-button--green.bj-button--outline:focus,
.bj-button--green.bj-button--outline:hover {
color: #32864c;
}
.bj-button--green.active.bj-button--outline {
color: #286d34;
}
.bj-button--purple.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #6569bd;
color: #6569bd;
}
.bj-button--purple.bj-button--outline:focus,
.bj-button--purple.bj-button--outline:hover {
background: rgba(76, 80, 174, 0.1);
}
.bj-button--purple.active.bj-button--outline {
background: rgba(76, 80, 174, 0.2);
}
.bj-button--purple.bj-button--outline:focus,
.bj-button--purple.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #4c50ae;
}
.bj-button--purple.active.bj-button--outline {
box-shadow: inset 0 0 0 2px #404492;
}
.bj-button--purple.bj-button--outline:focus,
.bj-button--purple.bj-button--outline:hover {
color: #4c50ae;
}
.bj-button--purple.active.bj-button--outline {
color: #404492;
}
.bj-button--dark-blue.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #142a5e;
color: #142a5e;
}
.bj-button--dark-blue.bj-button--outline:focus,
.bj-button--dark-blue.bj-button--outline:hover {
background: rgba(20, 42, 94, 0.1);
}
.bj-button--dark-blue.active.bj-button--outline {
background: rgba(20, 42, 94, 0.2);
}
.bj-button--dark-blue.active.bj-button--outline,
.bj-button--dark-blue.bj-button--outline:focus,
.bj-button--dark-blue.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #142a5e;
}
.bj-button--dark-blue.active.bj-button--outline,
.bj-button--dark-blue.bj-button--outline:focus,
.bj-button--dark-blue.bj-button--outline:hover {
color: #142a5e;
}
.bj-button--gray.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #9c9c9c;
color: #9c9c9c;
}
.bj-button--gray.bj-button--outline:focus,
.bj-button--gray.bj-button--outline:hover {
background: hsla(0, 0%, 61.2%, 0.1);
}
.bj-button--gray.active.bj-button--outline {
background: hsla(0, 0%, 61.2%, 0.2);
}
.bj-button--gray.active.bj-button--outline,
.bj-button--gray.bj-button--outline:focus,
.bj-button--gray.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #9c9c9c;
}
.bj-button--gray.active.bj-button--outline,
.bj-button--gray.bj-button--outline:focus,
.bj-button--gray.bj-button--outline:hover {
color: #9c9c9c;
}
.bj-button--light-gray.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #9c9c9c;
color: #9c9c9c;
}
.bj-button--light-gray.bj-button--outline:focus,
.bj-button--light-gray.bj-button--outline:hover {
background: hsla(0, 0%, 61.2%, 0.1);
}
.bj-button--light-gray.active.bj-button--outline {
background: hsla(0, 0%, 61.2%, 0.2);
}
.bj-button--light-gray.active.bj-button--outline,
.bj-button--light-gray.bj-button--outline:focus,
.bj-button--light-gray.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #9c9c9c;
}
.bj-button--light-gray.active.bj-button--outline,
.bj-button--light-gray.bj-button--outline:focus,
.bj-button--light-gray.bj-button--outline:hover {
color: #9c9c9c;
}
.bj-button--dark-gray.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #9c9c9c;
color: #9c9c9c;
}
.bj-button--dark-gray.bj-button--outline:focus,
.bj-button--dark-gray.bj-button--outline:hover {
background: hsla(0, 0%, 61.2%, 0.1);
}
.bj-button--dark-gray.active.bj-button--outline {
background: hsla(0, 0%, 61.2%, 0.2);
}
.bj-button--dark-gray.active.bj-button--outline,
.bj-button--dark-gray.bj-button--outline:focus,
.bj-button--dark-gray.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #9c9c9c;
}
.bj-button--dark-gray.active.bj-button--outline,
.bj-button--dark-gray.bj-button--outline:focus,
.bj-button--dark-gray.bj-button--outline:hover {
color: #9c9c9c;
}
.bj-button--inverted.bj-button--outline {
background: transparent;
box-shadow: inset 0 0 0 2px #fff;
color: #fff;
}
.bj-button--inverted.bj-button--outline:focus,
.bj-button--inverted.bj-button--outline:hover {
background: hsla(0, 0%, 100%, 0.1);
}
.bj-button--inverted.active.bj-button--outline {
background: hsla(0, 0%, 100%, 0.2);
}
.bj-button--inverted.active.bj-button--outline,
.bj-button--inverted.bj-button--outline:focus,
.bj-button--inverted.bj-button--outline:hover {
box-shadow: inset 0 0 0 2px #fff;
}
.bj-button--inverted.active.bj-button--outline,
.bj-button--inverted.bj-button--outline:focus,
.bj-button--inverted.bj-button--outline:hover {
color: #fff;
}
body {
align-items: flex-start;
-ms-align-items: flex-start;
display: flex;
-ms-display: flex;
flex-direction: column;
-ms-flex-direction: column;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
overflow: auto;
height: auto;
min-height: 100vh !important;
background-color: #fff;
color: #777;
font-family: var(--font-base);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
@media (-ms-high-contrast: none) {
body {
display: block;
}
}
body > * {
width: 100%;
}
html[lang='jp'] body,
html[lang='ko'] body,
html[lang='ru'] body {
font-family: var(--non-latin-font);
}
main {
flex: 1;
-ms-flex: 1;
overflow: hidden;
}
main > :last-child {
margin-bottom: 0;
}
main section {
margin: 0 0 30px;
}
* {
box-sizing: border-box;
outline: none;
}
.checkbox,
.countdown ul,
.group,
.groups__item,
.landing--register .separator,
.notification--alert .notification__content,
.notify-wrapper .button--icon,
.profile-login .group,
.radio,
.row,
.switch {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.col,
.countdown ul .col__lg--1,
.countdown ul .col__lg--2,
.countdown ul .col__lg--3,
.countdown ul .col__lg--4,
.countdown ul .col__lg--5,
.countdown ul .col__lg--6,
.countdown ul .col__lg--7,
.countdown ul .col__lg--8,
.countdown ul .col__lg--9,
.countdown ul .col__lg--10,
.countdown ul .col__lg--11,
.countdown ul .col__lg--12,
.countdown ul .col__md--1,
.countdown ul .col__md--2,
.countdown ul .col__md--3,
.countdown ul .col__md--4,
.countdown ul .col__md--5,
.countdown ul .col__md--6,
.countdown ul .col__md--7,
.countdown ul .col__md--8,
.countdown ul .col__md--9,
.countdown ul .col__md--10,
.countdown ul .col__md--11,
.countdown ul .col__md--12,
.countdown ul .col__sm--1,
.countdown ul .col__sm--2,
.countdown ul .col__sm--3,
.countdown ul .col__sm--4,
.countdown ul .col__sm--5,
.countdown ul .col__sm--6,
.countdown ul .col__sm--7,
.countdown ul .col__sm--8,
.countdown ul .col__sm--9,
.countdown ul .col__sm--10,
.countdown ul .col__sm--11,
.countdown ul .col__sm--12,
.countdown ul .col__xl--1,
.countdown ul .col__xl--2,
.countdown ul .col__xl--3,
.countdown ul .col__xl--4,
.countdown ul .col__xl--5,
.countdown ul .col__xl--6,
.countdown ul .col__xl--7,
.countdown ul .col__xl--8,
.countdown ul .col__xl--9,
.countdown ul .col__xl--10,
.countdown ul .col__xl--11,
.countdown ul .col__xl--12,
.countdown ul .col__xs--1,
.countdown ul .col__xs--2,
.countdown ul .col__xs--3,
.countdown ul .col__xs--4,
.countdown ul .col__xs--5,
.countdown ul .col__xs--6,
.countdown ul .col__xs--7,
.countdown ul .col__xs--8,
.countdown ul .col__xs--9,
.countdown ul .col__xs--10,
.countdown ul .col__xs--11,
.countdown ul .col__xs--12,
.groups__item .col__lg--1,
.groups__item .col__lg--2,
.groups__item .col__lg--3,
.groups__item .col__lg--4,
.groups__item .col__lg--5,
.groups__item .col__lg--6,
.groups__item .col__lg--7,
.groups__item .col__lg--8,
.groups__item .col__lg--9,
.groups__item .col__lg--10,
.groups__item .col__lg--11,
.groups__item .col__lg--12,
.groups__item .col__md--1,
.groups__item .col__md--2,
.groups__item .col__md--3,
.groups__item .col__md--4,
.groups__item .col__md--5,
.groups__item .col__md--6,
.groups__item .col__md--7,
.groups__item .col__md--8,
.groups__item .col__md--9,
.groups__item .col__md--10,
.groups__item .col__md--11,
.groups__item .col__md--12,
.groups__item .col__sm--1,
.groups__item .col__sm--2,
.groups__item .col__sm--3,
.groups__item .col__sm--4,
.groups__item .col__sm--5,
.groups__item .col__sm--6,
.groups__item .col__sm--7,
.groups__item .col__sm--8,
.groups__item .col__sm--9,
.groups__item .col__sm--10,
.groups__item .col__sm--11,
.groups__item .col__sm--12,
.groups__item .col__xl--1,
.groups__item .col__xl--2,
.groups__item .col__xl--3,
.groups__item .col__xl--4,
.groups__item .col__xl--5,
.groups__item .col__xl--6,
.groups__item .col__xl--7,
.groups__item .col__xl--8,
.groups__item .col__xl--9,
.groups__item .col__xl--10,
.groups__item .col__xl--11,
.groups__item .col__xl--12,
.groups__item .col__xs--1,
.groups__item .col__xs--2,
.groups__item .col__xs--3,
.groups__item .col__xs--4,
.groups__item .col__xs--5,
.groups__item .col__xs--6,
.groups__item .col__xs--7,
.groups__item .col__xs--8,
.groups__item .col__xs--9,
.groups__item .col__xs--10,
.groups__item .col__xs--11,
.groups__item .col__xs--12,
.landing--register .separator .col__lg--1,
.landing--register .separator .col__lg--2,
.landing--register .separator .col__lg--3,
.landing--register .separator .col__lg--4,
.landing--register .separator .col__lg--5,
.landing--register .separator .col__lg--6,
.landing--register .separator .col__lg--7,
.landing--register .separator .col__lg--8,
.landing--register .separator .col__lg--9,
.landing--register .separator .col__lg--10,
.landing--register .separator .col__lg--11,
.landing--register .separator .col__lg--12,
.landing--register .separator .col__md--1,
.landing--register .separator .col__md--2,
.landing--register .separator .col__md--3,
.landing--register .separator .col__md--4,
.landing--register .separator .col__md--5,
.landing--register .separator .col__md--6,
.landing--register .separator .col__md--7,
.landing--register .separator .col__md--8,
.landing--register .separator .col__md--9,
.landing--register .separator .col__md--10,
.landing--register .separator .col__md--11,
.landing--register .separator .col__md--12,
.landing--register .separator .col__sm--1,
.landing--register .separator .col__sm--2,
.landing--register .separator .col__sm--3,
.landing--register .separator .col__sm--4,
.landing--register .separator .col__sm--5,
.landing--register .separator .col__sm--6,
.landing--register .separator .col__sm--7,
.landing--register .separator .col__sm--8,
.landing--register .separator .col__sm--9,
.landing--register .separator .col__sm--10,
.landing--register .separator .col__sm--11,
.landing--register .separator .col__sm--12,
.landing--register .separator .col__xl--1,
.landing--register .separator .col__xl--2,
.landing--register .separator .col__xl--3,
.landing--register .separator .col__xl--4,
.landing--register .separator .col__xl--5,
.landing--register .separator .col__xl--6,
.landing--register .separator .col__xl--7,
.landing--register .separator .col__xl--8,
.landing--register .separator .col__xl--9,
.landing--register .separator .col__xl--10,
.landing--register .separator .col__xl--11,
.landing--register .separator .col__xl--12,
.landing--register .separator .col__xs--1,
.landing--register .separator .col__xs--2,
.landing--register .separator .col__xs--3,
.landing--register .separator .col__xs--4,
.landing--register .separator .col__xs--5,
.landing--register .separator .col__xs--6,
.landing--register .separator .col__xs--7,
.landing--register .separator .col__xs--8,
.landing--register .separator .col__xs--9,
.landing--register .separator .col__xs--10,
.landing--register .separator .col__xs--11,
.landing--register .separator .col__xs--12,
.profile-login .group .col__lg--1,
.profile-login .group .col__lg--2,
.profile-login .group .col__lg--3,
.profile-login .group .col__lg--4,
.profile-login .group .col__lg--5,
.profile-login .group .col__lg--6,
.profile-login .group .col__lg--7,
.profile-login .group .col__lg--8,
.profile-login .group .col__lg--9,
.profile-login .group .col__lg--10,
.profile-login .group .col__lg--11,
.profile-login .group .col__lg--12,
.profile-login .group .col__md--1,
.profile-login .group .col__md--2,
.profile-login .group .col__md--3,
.profile-login .group .col__md--4,
.profile-login .group .col__md--5,
.profile-login .group .col__md--6,
.profile-login .group .col__md--7,
.profile-login .group .col__md--8,
.profile-login .group .col__md--9,
.profile-login .group .col__md--10,
.profile-login .group .col__md--11,
.profile-login .group .col__md--12,
.profile-login .group .col__sm--1,
.profile-login .group .col__sm--2,
.profile-login .group .col__sm--3,
.profile-login .group .col__sm--4,
.profile-login .group .col__sm--5,
.profile-login .group .col__sm--6,
.profile-login .group .col__sm--7,
.profile-login .group .col__sm--8,
.profile-login .group .col__sm--9,
.profile-login .group .col__sm--10,
.profile-login .group .col__sm--11,
.profile-login .group .col__sm--12,
.profile-login .group .col__xl--1,
.profile-login .group .col__xl--2,
.profile-login .group .col__xl--3,
.profile-login .group .col__xl--4,
.profile-login .group .col__xl--5,
.profile-login .group .col__xl--6,
.profile-login .group .col__xl--7,
.profile-login .group .col__xl--8,
.profile-login .group .col__xl--9,
.profile-login .group .col__xl--10,
.profile-login .group .col__xl--11,
.profile-login .group .col__xl--12,
.profile-login .group .col__xs--1,
.profile-login .group .col__xs--2,
.profile-login .group .col__xs--3,
.profile-login .group .col__xs--4,
.profile-login .group .col__xs--5,
.profile-login .group .col__xs--6,
.profile-login .group .col__xs--7,
.profile-login .group .col__xs--8,
.profile-login .group .col__xs--9,
.profile-login .group .col__xs--10,
.profile-login .group .col__xs--11,
.profile-login .group .col__xs--12,
.row .col__lg--1,
.row .col__lg--2,
.row .col__lg--3,
.row .col__lg--4,
.row .col__lg--5,
.row .col__lg--6,
.row .col__lg--7,
.row .col__lg--8,
.row .col__lg--9,
.row .col__lg--10,
.row .col__lg--11,
.row .col__lg--12,
.row .col__md--1,
.row .col__md--2,
.row .col__md--3,
.row .col__md--4,
.row .col__md--5,
.row .col__md--6,
.row .col__md--7,
.row .col__md--8,
.row .col__md--9,
.row .col__md--10,
.row .col__md--11,
.row .col__md--12,
.row .col__sm--1,
.row .col__sm--2,
.row .col__sm--3,
.row .col__sm--4,
.row .col__sm--5,
.row .col__sm--6,
.row .col__sm--7,
.row .col__sm--8,
.row .col__sm--9,
.row .col__sm--10,
.row .col__sm--11,
.row .col__sm--12,
.row .col__xl--1,
.row .col__xl--2,
.row .col__xl--3,
.row .col__xl--4,
.row .col__xl--5,
.row .col__xl--6,
.row .col__xl--7,
.row .col__xl--8,
.row .col__xl--9,
.row .col__xl--10,
.row .col__xl--11,
.row .col__xl--12,
.row .col__xs--1,
.row .col__xs--2,
.row .col__xs--3,
.row .col__xs--4,
.row .col__xs--5,
.row .col__xs--6,
.row .col__xs--7,
.row .col__xs--8,
.row .col__xs--9,
.row .col__xs--10,
.row .col__xs--11,
.row .col__xs--12 {
position: relative;
margin: 0 0 10px;
padding: 0 5px;
box-sizing: border-box;
}
.row--space-between {
justify-content: space-between;
}
.row--horizontal-center {
justify-content: center;
}
.checkbox,
.group,
.groups__item,
.notification--alert .notification__content,
.notify-wrapper .button--icon,
.radio,
.row--vertical-center,
.switch {
align-items: center;
}
.row--left {
justify-content: flex-start;
}
.row--right {
justify-content: flex-end;
}
.row--nowrap {
flex-wrap: nowrap;
}
.col--center {
align-self: center;
}
.col--top {
align-self: flex-start;
}
.col--bottom {
align-self: flex-end;
}
.col--stretch,
.group > *,
.notification__state {
align-self: stretch;
}
.container-fluid {
padding: 0 20px;
}
.container-fluid:after {
clear: both;
content: '';
display: table;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.container:after {
clear: both;
content: '';
display: table;
}
.container--sm {
max-width: 992px;
}
.countdown ul,
.groups__item,
.landing--register .separator,
.profile-login .group,
.row {
margin: 0 -5px;
}
.countdown ul .col__xs--12,
.groups__item .col__xs--12,
.landing--register .separator .col__xs--12,
.profile-login .group .col__xs--12,
.row .col__xs--12 {
width: 100%;
}
.countdown ul .col__xs--11,
.groups__item .col__xs--11,
.landing--register .separator .col__xs--11,
.profile-login .group .col__xs--11,
.row .col__xs--11 {
width: 91.66667%;
}
.countdown ul .col__xs--10,
.groups__item .col__xs--10,
.landing--register .separator .col__xs--10,
.profile-login .group .col__xs--10,
.row .col__xs--10 {
width: 83.33333%;
}
.countdown ul .col__xs--9,
.groups__item .col__xs--9,
.landing--register .separator .col__xs--9,
.profile-login .group .col__xs--9,
.row .col__xs--9 {
width: 75%;
}
.countdown ul .col__xs--8,
.groups__item .col__xs--8,
.landing--register .separator .col__xs--8,
.profile-login .group .col__xs--8,
.row .col__xs--8 {
width: 66.66667%;
}
.countdown ul .col__xs--7,
.groups__item .col__xs--7,
.landing--register .separator .col__xs--7,
.profile-login .group .col__xs--7,
.row .col__xs--7 {
width: 58.33333%;
}
.countdown ul .col__xs--6,
.groups__item .col__xs--6,
.landing--register .separator .col__xs--6,
.profile-login .group .col__xs--6,
.row .col__xs--6 {
width: 50%;
}
.countdown ul .col__xs--5,
.groups__item .col__xs--5,
.landing--register .separator .col__xs--5,
.profile-login .group .col__xs--5,
.row .col__xs--5 {
width: 41.66667%;
}
.countdown ul .col__xs--4,
.groups__item .col__xs--4,
.landing--register .separator .col__xs--4,
.profile-login .group .col__xs--4,
.row .col__xs--4 {
width: 33.33333%;
}
.countdown ul .col__xs--3,
.groups__item .col__xs--3,
.landing--register .separator .col__xs--3,
.profile-login .group .col__xs--3,
.row .col__xs--3 {
width: 25%;
}
.countdown ul .col__xs--2,
.groups__item .col__xs--2,
.landing--register .separator .col__xs--2,
.profile-login .group .col__xs--2,
.row .col__xs--2 {
width: 16.66667%;
}
.countdown ul .col__xs--1,
.groups__item .col__xs--1,
.landing--register .separator .col__xs--1,
.profile-login .group .col__xs--1,
.row .col__xs--1 {
width: 8.33333%;
}
@media screen and (min-width: 480px) {
.countdown ul .col__xs--12,
.groups__item .col__xs--12,
.landing--register .separator .col__xs--12,
.profile-login .group .col__xs--12,
.row .col__xs--12 {
width: 100%;
}
.countdown ul .col__xs--11,
.groups__item .col__xs--11,
.landing--register .separator .col__xs--11,
.profile-login .group .col__xs--11,
.row .col__xs--11 {
width: 91.66667%;
}
.countdown ul .col__xs--10,
.groups__item .col__xs--10,
.landing--register .separator .col__xs--10,
.profile-login .group .col__xs--10,
.row .col__xs--10 {
width: 83.33333%;
}
.countdown ul .col__xs--9,
.groups__item .col__xs--9,
.landing--register .separator .col__xs--9,
.profile-login .group .col__xs--9,
.row .col__xs--9 {
width: 75%;
}
.countdown ul .col__xs--8,
.groups__item .col__xs--8,
.landing--register .separator .col__xs--8,
.profile-login .group .col__xs--8,
.row .col__xs--8 {
width: 66.66667%;
}
.countdown ul .col__xs--7,
.groups__item .col__xs--7,
.landing--register .separator .col__xs--7,
.profile-login .group .col__xs--7,
.row .col__xs--7 {
width: 58.33333%;
}
.countdown ul .col__xs--6,
.groups__item .col__xs--6,
.landing--register .separator .col__xs--6,
.profile-login .group .col__xs--6,
.row .col__xs--6 {
width: 50%;
}
.countdown ul .col__xs--5,
.groups__item .col__xs--5,
.landing--register .separator .col__xs--5,
.profile-login .group .col__xs--5,
.row .col__xs--5 {
width: 41.66667%;
}
.countdown ul .col__xs--4,
.groups__item .col__xs--4,
.landing--register .separator .col__xs--4,
.profile-login .group .col__xs--4,
.row .col__xs--4 {
width: 33.33333%;
}
.countdown ul .col__xs--3,
.groups__item .col__xs--3,
.landing--register .separator .col__xs--3,
.profile-login .group .col__xs--3,
.row .col__xs--3 {
width: 25%;
}
.countdown ul .col__xs--2,
.groups__item .col__xs--2,
.landing--register .separator .col__xs--2,
.profile-login .group .col__xs--2,
.row .col__xs--2 {
width: 16.66667%;
}
.countdown ul .col__xs--1,
.groups__item .col__xs--1,
.landing--register .separator .col__xs--1,
.profile-login .group .col__xs--1,
.row .col__xs--1 {
width: 8.33333%;
}
}
@media screen and (min-width: 640px) {
.countdown ul .col__sm--12,
.groups__item .col__sm--12,
.landing--register .separator .col__sm--12,
.profile-login .group .col__sm--12,
.row .col__sm--12 {
width: 100%;
}
.countdown ul .col__sm--11,
.groups__item .col__sm--11,
.landing--register .separator .col__sm--11,
.profile-login .group .col__sm--11,
.row .col__sm--11 {
width: 91.66667%;
}
.countdown ul .col__sm--10,
.groups__item .col__sm--10,
.landing--register .separator .col__sm--10,
.profile-login .group .col__sm--10,
.row .col__sm--10 {
width: 83.33333%;
}
.countdown ul .col__sm--9,
.groups__item .col__sm--9,
.landing--register .separator .col__sm--9,
.profile-login .group .col__sm--9,
.row .col__sm--9 {
width: 75%;
}
.countdown ul .col__sm--8,
.groups__item .col__sm--8,
.landing--register .separator .col__sm--8,
.profile-login .group .col__sm--8,
.row .col__sm--8 {
width: 66.66667%;
}
.countdown ul .col__sm--7,
.groups__item .col__sm--7,
.landing--register .separator .col__sm--7,
.profile-login .group .col__sm--7,
.row .col__sm--7 {
width: 58.33333%;
}
.countdown ul .col__sm--6,
.groups__item .col__sm--6,
.landing--register .separator .col__sm--6,
.profile-login .group .col__sm--6,
.row .col__sm--6 {
width: 50%;
}
.countdown ul .col__sm--5,
.groups__item .col__sm--5,
.landing--register .separator .col__sm--5,
.profile-login .group .col__sm--5,
.row .col__sm--5 {
width: 41.66667%;
}
.countdown ul .col__sm--4,
.groups__item .col__sm--4,
.landing--register .separator .col__sm--4,
.profile-login .group .col__sm--4,
.row .col__sm--4 {
width: 33.33333%;
}
.countdown ul .col__sm--3,
.groups__item .col__sm--3,
.landing--register .separator .col__sm--3,
.profile-login .group .col__sm--3,
.row .col__sm--3 {
width: 25%;
}
.countdown ul .col__sm--2,
.groups__item .col__sm--2,
.landing--register .separator .col__sm--2,
.profile-login .group .col__sm--2,
.row .col__sm--2 {
width: 16.66667%;
}
.countdown ul .col__sm--1,
.groups__item .col__sm--1,
.landing--register .separator .col__sm--1,
.profile-login .group .col__sm--1,
.row .col__sm--1 {
width: 8.33333%;
}
}
@media screen and (min-width: 768px) {
.countdown ul .col__md--12,
.groups__item .col__md--12,
.landing--register .separator .col__md--12,
.profile-login .group .col__md--12,
.row .col__md--12 {
width: 100%;
}
.countdown ul .col__md--11,
.groups__item .col__md--11,
.landing--register .separator .col__md--11,
.profile-login .group .col__md--11,
.row .col__md--11 {
width: 91.66667%;
}
.countdown ul .col__md--10,
.groups__item .col__md--10,
.landing--register .separator .col__md--10,
.profile-login .group .col__md--10,
.row .col__md--10 {
width: 83.33333%;
}
.countdown ul .col__md--9,
.groups__item .col__md--9,
.landing--register .separator .col__md--9,
.profile-login .group .col__md--9,
.row .col__md--9 {
width: 75%;
}
.countdown ul .col__md--8,
.groups__item .col__md--8,
.landing--register .separator .col__md--8,
.profile-login .group .col__md--8,
.row .col__md--8 {
width: 66.66667%;
}
.countdown ul .col__md--7,
.groups__item .col__md--7,
.landing--register .separator .col__md--7,
.profile-login .group .col__md--7,
.row .col__md--7 {
width: 58.33333%;
}
.countdown ul .col__md--6,
.groups__item .col__md--6,
.landing--register .separator .col__md--6,
.profile-login .group .col__md--6,
.row .col__md--6 {
width: 50%;
}
.countdown ul .col__md--5,
.groups__item .col__md--5,
.landing--register .separator .col__md--5,
.profile-login .group .col__md--5,
.row .col__md--5 {
width: 41.66667%;
}
.countdown ul .col__md--4,
.groups__item .col__md--4,
.landing--register .separator .col__md--4,
.profile-login .group .col__md--4,
.row .col__md--4 {
width: 33.33333%;
}
.countdown ul .col__md--3,
.groups__item .col__md--3,
.landing--register .separator .col__md--3,
.profile-login .group .col__md--3,
.row .col__md--3 {
width: 25%;
}
.countdown ul .col__md--2,
.groups__item .col__md--2,
.landing--register .separator .col__md--2,
.profile-login .group .col__md--2,
.row .col__md--2 {
width: 16.66667%;
}
.countdown ul .col__md--1,
.groups__item .col__md--1,
.landing--register .separator .col__md--1,
.profile-login .group .col__md--1,
.row .col__md--1 {
width: 8.33333%;
}
}
@media screen and (min-width: 992px) {
.countdown ul .col__lg--12,
.groups__item .col__lg--12,
.landing--register .separator .col__lg--12,
.profile-login .group .col__lg--12,
.row .col__lg--12 {
width: 100%;
}
.countdown ul .col__lg--11,
.groups__item .col__lg--11,
.landing--register .separator .col__lg--11,
.profile-login .group .col__lg--11,
.row .col__lg--11 {
width: 91.66667%;
}
.countdown ul .col__lg--10,
.groups__item .col__lg--10,
.landing--register .separator .col__lg--10,
.profile-login .group .col__lg--10,
.row .col__lg--10 {
width: 83.33333%;
}
.countdown ul .col__lg--9,
.groups__item .col__lg--9,
.landing--register .separator .col__lg--9,
.profile-login .group .col__lg--9,
.row .col__lg--9 {
width: 75%;
}
.countdown ul .col__lg--8,
.groups__item .col__lg--8,
.landing--register .separator .col__lg--8,
.profile-login .group .col__lg--8,
.row .col__lg--8 {
width: 66.66667%;
}
.countdown ul .col__lg--7,
.groups__item .col__lg--7,
.landing--register .separator .col__lg--7,
.profile-login .group .col__lg--7,
.row .col__lg--7 {
width: 58.33333%;
}
.countdown ul .col__lg--6,
.groups__item .col__lg--6,
.landing--register .separator .col__lg--6,
.profile-login .group .col__lg--6,
.row .col__lg--6 {
width: 50%;
}
.countdown ul .col__lg--5,
.groups__item .col__lg--5,
.landing--register .separator .col__lg--5,
.profile-login .group .col__lg--5,
.row .col__lg--5 {
width: 41.66667%;
}
.countdown ul .col__lg--4,
.groups__item .col__lg--4,
.landing--register .separator .col__lg--4,
.profile-login .group .col__lg--4,
.row .col__lg--4 {
width: 33.33333%;
}
.countdown ul .col__lg--3,
.groups__item .col__lg--3,
.landing--register .separator .col__lg--3,
.profile-login .group .col__lg--3,
.row .col__lg--3 {
width: 25%;
}
.countdown ul .col__lg--2,
.groups__item .col__lg--2,
.landing--register .separator .col__lg--2,
.profile-login .group .col__lg--2,
.row .col__lg--2 {
width: 16.66667%;
}
.countdown ul .col__lg--1,
.groups__item .col__lg--1,
.landing--register .separator .col__lg--1,
.profile-login .group .col__lg--1,
.row .col__lg--1 {
width: 8.33333%;
}
}
@media screen and (min-width: 1400px) {
.countdown ul .col__xl--12,
.groups__item .col__xl--12,
.landing--register .separator .col__xl--12,
.profile-login .group .col__xl--12,
.row .col__xl--12 {
width: 100%;
}
.countdown ul .col__xl--11,
.groups__item .col__xl--11,
.landing--register .separator .col__xl--11,
.profile-login .group .col__xl--11,
.row .col__xl--11 {
width: 91.66667%;
}
.countdown ul .col__xl--10,
.groups__item .col__xl--10,
.landing--register .separator .col__xl--10,
.profile-login .group .col__xl--10,
.row .col__xl--10 {
width: 83.33333%;
}
.countdown ul .col__xl--9,
.groups__item .col__xl--9,
.landing--register .separator .col__xl--9,
.profile-login .group .col__xl--9,
.row .col__xl--9 {
width: 75%;
}
.countdown ul .col__xl--8,
.groups__item .col__xl--8,
.landing--register .separator .col__xl--8,
.profile-login .group .col__xl--8,
.row .col__xl--8 {
width: 66.66667%;
}
.countdown ul .col__xl--7,
.groups__item .col__xl--7,
.landing--register .separator .col__xl--7,
.profile-login .group .col__xl--7,
.row .col__xl--7 {
width: 58.33333%;
}
.countdown ul .col__xl--6,
.groups__item .col__xl--6,
.landing--register .separator .col__xl--6,
.profile-login .group .col__xl--6,
.row .col__xl--6 {
width: 50%;
}
.countdown ul .col__xl--5,
.groups__item .col__xl--5,
.landing--register .separator .col__xl--5,
.profile-login .group .col__xl--5,
.row .col__xl--5 {
width: 41.66667%;
}
.countdown ul .col__xl--4,
.groups__item .col__xl--4,
.landing--register .separator .col__xl--4,
.profile-login .group .col__xl--4,
.row .col__xl--4 {
width: 33.33333%;
}
.countdown ul .col__xl--3,
.groups__item .col__xl--3,
.landing--register .separator .col__xl--3,
.profile-login .group .col__xl--3,
.row .col__xl--3 {
width: 25%;
}
.countdown ul .col__xl--2,
.groups__item .col__xl--2,
.landing--register .separator .col__xl--2,
.profile-login .group .col__xl--2,
.row .col__xl--2 {
width: 16.66667%;
}
.countdown ul .col__xl--1,
.groups__item .col__xl--1,
.landing--register .separator .col__xl--1,
.profile-login .group .col__xl--1,
.row .col__xl--1 {
width: 8.33333%;
}
}
.col {
flex: 1;
}
html .bg__general--border {
color: #777;
background-color: #e5e5e5;
}
html .text__general--border {
color: #e5e5e5;
}
html a.text:hover__general--border {
color: #b2b2b2;
}
html .bg__general--border-inverted {
color: #777;
background-color: #fff;
}
html .text__general--border-inverted {
color: #fff;
}
html a.text:hover__general--border-inverted {
color: #ccc;
}
html .bg__general--form-border {
color: #777;
background-color: #c8c8c8;
}
html .text__general--form-border {
color: #c8c8c8;
}
html a.text:hover__general--form-border {
color: #959595;
}
html .bg__general--button {
color: #fff;
background-color: #44b678;
}
html .text__general--button {
color: #44b678;
}
html a.text:hover__general--button {
color: #286c47;
}
html .bg__general--button-inverted {
color: #777;
background-color: #fff;
}
html .text__general--button-inverted {
color: #fff;
}
html a.text:hover__general--button-inverted {
color: #ccc;
}
html .bg__general--heading {
color: #fff;
background-color: #424242;
}
html .text__general--heading {
color: #424242;
}
html a.text:hover__general--heading {
color: #0f0f0f;
}
html .bg__general--heading-inverted {
color: #777;
background-color: #fff;
}
html .text__general--heading-inverted {
color: #fff;
}
html a.text:hover__general--heading-inverted {
color: #ccc;
}
html .bg__general--icon {
color: #fff;
background-color: #777;
}
html .text__general--icon {
color: #777;
}
html a.text:hover__general--icon {
color: #444;
}
html .bg__general--icon-inverted {
color: #777;
background-color: #fff;
}
html .text__general--icon-inverted {
color: #fff;
}
html a.text:hover__general--icon-inverted {
color: #ccc;
}
html .bg__general--link {
color: #fff;
background-color: #0a152f;
}
html .text__general--link {
color: #0a152f;
}
html a.text:hover__general--link {
color: #000;
}
html .bg__general--link-inverted {
color: #777;
background-color: #fff;
}
html .text__general--link-inverted {
color: #fff;
}
html a.text:hover__general--link-inverted {
color: #ccc;
}
html .bg__general--shadow {
color: #fff;
background-color: #142a5e;
}
html .text__general--shadow {
color: #142a5e;
}
html a.text:hover__general--shadow {
color: #02040a;
}
html .bg__general--tabs {
color: #fff;
background-color: #777;
}
html .text__general--tabs {
color: #777;
}
html a.text:hover__general--tabs {
color: #444;
}
html .bg__general--tabs-border {
color: #777;
background-color: #dedede;
}
html .text__general--tabs-border {
color: #dedede;
}
html a.text:hover__general--tabs-border {
color: #c4c4c4;
}
html .bg__general--tabs-active {
color: #fff;
background-color: #43b276;
}
html .text__general--tabs-active {
color: #43b276;
}
html a.text:hover__general--tabs-active {
color: #358d5d;
}
html .bg__general--tabs-triangle {
color: #fff;
background-color: #777;
}
html .text__general--tabs-triangle {
color: #777;
}
html a.text:hover__general--tabs-triangle {
color: #444;
}
html .bg__general--tabs-triangle-active {
color: #777;
background-color: #e5e5e5;
}
html .text__general--tabs-triangle-active {
color: #e5e5e5;
}
html a.text:hover__general--tabs-triangle-active {
color: #b2b2b2;
}
html .bg__general--accordion {
color: #fff;
background-color: #424242;
}
html .text__general--accordion {
color: #424242;
}
html a.text:hover__general--accordion {
color: #0f0f0f;
}
html .bg__general--tags {
color: #fff;
background-color: #777;
}
html .text__general--tags {
color: #777;
}
html a.text:hover__general--tags {
color: #444;
}
html .bg__general--tags-inverted {
color: #777;
background-color: #fff;
}
html .text__general--tags-inverted {
color: #fff;
}
html a.text:hover__general--tags-inverted {
color: #ccc;
}
html .bg__general--text {
color: #fff;
background-color: #777;
}
html .text__general--text {
color: #777;
}
html a.text:hover__general--text {
color: #444;
}
html .bg__general--text-inverted {
color: #777;
background-color: #fff;
}
html .text__general--text-inverted {
color: #fff;
}
html a.text:hover__general--text-inverted {
color: #ccc;
}
html .bg__general--text-secondary {
color: #fff;
background-color: #7c7c7c;
}
html .text__general--text-secondary {
color: #7c7c7c;
}
html a.text:hover__general--text-secondary {
color: #636363;
}
html .bg__background--badge {
color: #fff;
background-color: #142a5e;
}
html .text__background--badge {
color: #142a5e;
}
html a.text:hover__background--badge {
color: #02040a;
}
html .bg__background--badge-inverted {
color: #777;
background-color: #fff;
}
html .text__background--badge-inverted {
color: #fff;
}
html a.text:hover__background--badge-inverted {
color: #ccc;
}
html .bg__background--body {
color: #777;
background-color: #fff;
}
html .text__background--body {
color: #fff;
}
html a.text:hover__background--body {
color: #ccc;
}
html .bg__background--body-inverted {
color: #fff;
background-color: #142a5e;
}
html .text__background--body-inverted {
color: #142a5e;
}
html a.text:hover__background--body-inverted {
color: #02040a;
}
html .bg__background--dropdown {
color: #777;
background-color: #fff;
}
html .text__background--dropdown {
color: #fff;
}
html a.text:hover__background--dropdown {
color: #ccc;
}
html .bg__background--footer {
color: #fff;
background-color: #1f408c;
}
html .text__background--footer {
color: #1f408c;
}
html a.text:hover__background--footer {
color: #0d1a38;
}
html .bg__background--header {
color: #777;
background-color: #f7f7f7;
}
html .text__background--header {
color: #f7f7f7;
}
html a.text:hover__background--header {
color: #c4c4c4;
}
html .bg__background--input {
color: #777;
background-color: #fff;
}
html .text__background--input {
color: #fff;
}
html a.text:hover__background--input {
color: #ccc;
}
html .bg__background--input-inverted {
color: #fff;
background-color: #142a5e;
}
html .text__background--input-inverted {
color: #142a5e;
}
html a.text:hover__background--input-inverted {
color: #02040a;
}
html .bg__background--switch {
color: #777;
background-color: #d8d8d8;
}
html .text__background--switch {
color: #d8d8d8;
}
html a.text:hover__background--switch {
color: #a5a5a5;
}
html .bg__background--modal {
color: #777;
background-color: #fff;
}
html .text__background--modal {
color: #fff;
}
html a.text:hover__background--modal {
color: #ccc;
}
html .bg__background--notification {
color: #777;
background-color: #fff;
}
html .text__background--notification {
color: #fff;
}
html a.text:hover__background--notification {
color: #ccc;
}
html .bg__background--overlay {
color: #fff;
background-color: rgba(10, 21, 47, 0.75);
}
html .text__background--overlay {
color: rgba(10, 21, 47, 0.75);
}
html a.text:hover__background--overlay {
color: rgba(1, 2, 5, 0.75);
}
html .bg__background--popover {
color: #777;
background-color: #fff;
}
html .text__background--popover {
color: #fff;
}
html a.text:hover__background--popover {
color: #ccc;
}
html .bg__background--secondary {
color: #777;
background-color: #f7f7f7;
}
html .text__background--secondary {
color: #f7f7f7;
}
html a.text:hover__background--secondary {
color: #c4c4c4;
}
html .bg__background--light {
color: #777;
background-color: #fff;
}
html .text__background--light {
color: #fff;
}
html a.text:hover__background--light {
color: #ccc;
}
html .bg__background--table {
color: #777;
background-color: #fff;
}
html .text__background--table {
color: #fff;
}
html a.text:hover__background--table {
color: #ccc;
}
html .bg__background--table-head {
color: #777;
background-color: #f2f2f2;
}
html .text__background--table-head {
color: #f2f2f2;
}
html a.text:hover__background--table-head {
color: #d8d8d8;
}
html .bg__background--table-odd {
color: #777;
background-color: #fcfcfc;
}
html .text__background--table-odd {
color: #fcfcfc;
}
html a.text:hover__background--table-odd {
color: #e3e3e3;
}
html .bg__background--tabs {
color: #777;
background-color: #fff;
}
html .text__background--tabs {
color: #fff;
}
html a.text:hover__background--tabs {
color: #ccc;
}
html .bg__background--tabs-active {
color: #777;
background-color: #f7f7f7;
}
html .text__background--tabs-active {
color: #f7f7f7;
}
html a.text:hover__background--tabs-active {
color: #c4c4c4;
}
html .bg__background--tags {
color: #777;
background-color: #fff;
}
html .text__background--tags {
color: #fff;
}
html a.text:hover__background--tags {
color: #ccc;
}
html .bg__background--tags-inverted {
color: #777;
background-color: #f7f7f7;
}
html .text__background--tags-inverted {
color: #f7f7f7;
}
html a.text:hover__background--tags-inverted {
color: #c4c4c4;
}
html .bg__background--tooltip {
color: #777;
background-color: #fff;
}
html .text__background--tooltip {
color: #fff;
}
html a.text:hover__background--tooltip {
color: #ccc;
}
html .bg__state--green {
color: #fff;
background-color: #44b678;
}
html .text__state--green {
color: #44b678;
}
html a.text:hover__state--green {
color: #286c47;
}
html .bg__state--blue {
color: #fff;
background-color: #336aea;
}
html .text__state--blue {
color: #336aea;
}
html a.text:hover__state--blue {
color: #113ea6;
}
html .bg__state--gray {
color: #fff;
background-color: #9c9c9c;
}
html .text__state--gray {
color: #9c9c9c;
}
html a.text:hover__state--gray {
color: #696969;
}
html .bg__state--red {
color: #fff;
background-color: #ff7d6a;
}
html .text__state--red {
color: #ff7d6a;
}
html a.text:hover__state--red {
color: #ff2404;
}
html .bg__state--yellow {
color: #121212;
background-color: #feb602;
}
html .text__state--yellow {
color: #feb602;
}
html a.text:hover__state--yellow {
color: #996e01;
}
html .bg__state--purple {
color: #fff;
background-color: #6569bd;
}
html .text__state--purple {
color: #6569bd;
}
html a.text:hover__state--purple {
color: #383c84;
}
html .bg__social--behance {
color: #fff;
background-color: #1769ff;
}
html .text__social--behance {
color: #1769ff;
}
html a.text:hover__social--behance {
color: #003eb0;
}
html .bg__social--dribbble {
color: #fff;
background-color: #ea4c89;
}
html .text__social--dribbble {
color: #ea4c89;
}
html a.text:hover__social--dribbble {
color: #ba1655;
}
html .bg__social--facebook {
color: #fff;
background-color: #1877f2;
}
html .text__social--facebook {
color: #1877f2;
}
html a.text:hover__social--facebook {
color: #09499b;
}
html .bg__social--google {
color: #fff;
background-color: #dd4b39;
}
html .text__social--google {
color: #dd4b39;
}
html a.text:hover__social--google {
color: #96271a;
}
html .bg__social--instagram {
color: #fff;
background-color: #c32aa3;
}
html .text__social--instagram {
color: #c32aa3;
}
html a.text:hover__social--instagram {
color: #6f185d;
}
html .bg__social--linkedin {
color: #fff;
background-color: #0a66c2;
}
html .text__social--linkedin {
color: #0a66c2;
}
html a.text:hover__social--linkedin {
color: #053361;
}
html .bg__social--pinterest {
color: #fff;
background-color: #cb2027;
}
html .text__social--pinterest {
color: #cb2027;
}
html a.text:hover__social--pinterest {
color: #731216;
}
html .bg__social--stumbleupon {
color: #fff;
background-color: #f74425;
}
html .text__social--stumbleupon {
color: #f74425;
}
html a.text:hover__social--stumbleupon {
color: #b01f06;
}
html .bg__social--telegram {
color: #fff;
background-color: #08c;
}
html .text__social--telegram {
color: #08c;
}
html a.text:hover__social--telegram {
color: #046;
}
html .bg__social--twitter {
color: #fff;
background-color: #000;
}
html .text__social--twitter,
html a.text:hover__social--twitter {
color: #000;
}
html .bg__social--vimeo {
color: #777;
background-color: #aad450;
}
html .text__social--vimeo {
color: #aad450;
}
html a.text:hover__social--vimeo {
color: #749925;
}
html .bg__social--whatsapp {
color: #fff;
background-color: #25d366;
}
html .text__social--whatsapp {
color: #25d366;
}
html a.text:hover__social--whatsapp {
color: #167c3c;
}
html .bg__social--youtube {
color: #fff;
background-color: #b00;
}
html .text__social--youtube {
color: #b00;
}
html a.text:hover__social--youtube {
color: #500;
}
html .bg__green--9 {
color: #fff;
background-color: #1e541d;
}
html .text__green--9 {
color: #1e541d;
}
html a.text:hover__green--9 {
color: #030803;
}
html .bg__green--8 {
color: #fff;
background-color: #286d34;
}
html .text__green--8 {
color: #286d34;
}
html a.text:hover__green--8 {
color: #0d2210;
}
html .bg__green--7 {
color: #fff;
background-color: #32864c;
}
html .text__green--7 {
color: #32864c;
}
html a.text:hover__green--7 {
color: #163c22;
}
html .bg__green--6 {
color: #fff;
background-color: #3b9e62;
}
html .text__green--6 {
color: #3b9e62;
}
html a.text:hover__green--6 {
color: #1f5434;
}
html .bg__green--5 {
color: #fff;
background-color: #44b678;
}
html .text__green--5 {
color: #44b678;
}
html a.text:hover__green--5 {
color: #286c47;
}
html .bg__green--4 {
color: #fff;
background-color: #52d999;
}
html .text__green--4 {
color: #52d999;
}
html a.text:hover__green--4 {
color: #23a266;
}
html .bg__green--3 {
color: #777;
background-color: #7be2b1;
}
html .text__green--3 {
color: #7be2b1;
}
html a.text:hover__green--3 {
color: #2ccb7f;
}
html .bg__green--2 {
color: #777;
background-color: #a0eac7;
}
html .text__green--2 {
color: #a0eac7;
}
html a.text:hover__green--2 {
color: #4cd896;
}
html .bg__green--1 {
color: #777;
background-color: #cbf3e0;
}
html .text__green--1 {
color: #cbf3e0;
}
html a.text:hover__green--1 {
color: #78e0af;
}
html .bg__green--900 {
color: #fff;
background-color: #1e541d;
}
html .text__green--900 {
color: #1e541d;
}
html a.text:hover__green--900 {
color: #030803;
}
html .bg__green--800 {
color: #fff;
background-color: #286d34;
}
html .text__green--800 {
color: #286d34;
}
html a.text:hover__green--800 {
color: #0d2210;
}
html .bg__green--700 {
color: #fff;
background-color: #32864c;
}
html .text__green--700 {
color: #32864c;
}
html a.text:hover__green--700 {
color: #163c22;
}
html .bg__green--600 {
color: #fff;
background-color: #3b9e62;
}
html .text__green--600 {
color: #3b9e62;
}
html a.text:hover__green--600 {
color: #1f5434;
}
html .bg__green--500 {
color: #fff;
background-color: #44b678;
}
html .text__green--500 {
color: #44b678;
}
html a.text:hover__green--500 {
color: #286c47;
}
html .bg__green--400 {
color: #fff;
background-color: #52d999;
}
html .text__green--400 {
color: #52d999;
}
html a.text:hover__green--400 {
color: #23a266;
}
html .bg__green--300 {
color: #777;
background-color: #7be2b1;
}
html .text__green--300 {
color: #7be2b1;
}
html a.text:hover__green--300 {
color: #2ccb7f;
}
html .bg__green--200 {
color: #777;
background-color: #a0eac7;
}
html .text__green--200 {
color: #a0eac7;
}
html a.text:hover__green--200 {
color: #4cd896;
}
html .bg__green--100 {
color: #777;
background-color: #cbf3e0;
}
html .text__green--100 {
color: #cbf3e0;
}
html a.text:hover__green--100 {
color: #78e0af;
}
html .bg__gray--9 {
color: #fff;
background-color: #121212;
}
html .text__gray--9 {
color: #121212;
}
html a.text:hover__gray--9 {
color: #000;
}
html .bg__gray--8 {
color: #fff;
background-color: #424242;
}
html .text__gray--8 {
color: #424242;
}
html a.text:hover__gray--8 {
color: #0f0f0f;
}
html .bg__gray--7 {
color: #fff;
background-color: #777;
}
html .text__gray--7 {
color: #777;
}
html a.text:hover__gray--7 {
color: #444;
}
html .bg__gray--6 {
color: #fff;
background-color: #9c9c9c;
}
html .text__gray--6 {
color: #9c9c9c;
}
html a.text:hover__gray--6 {
color: #696969;
}
html .bg__gray--5 {
color: #fff;
background-color: #b1b1b1;
}
html .text__gray--5 {
color: #b1b1b1;
}
html a.text:hover__gray--5 {
color: #7e7e7e;
}
html .bg__gray--4 {
color: #777;
background-color: #c8c8c8;
}
html .text__gray--4 {
color: #c8c8c8;
}
html a.text:hover__gray--4 {
color: #959595;
}
html .bg__gray--3 {
color: #777;
background-color: #d8d8d8;
}
html .text__gray--3 {
color: #d8d8d8;
}
html a.text:hover__gray--3 {
color: #a5a5a5;
}
html .bg__gray--2 {
color: #777;
background-color: #e5e5e5;
}
html .text__gray--2 {
color: #e5e5e5;
}
html a.text:hover__gray--2 {
color: #b2b2b2;
}
html .bg__gray--1 {
color: #777;
background-color: #f7f7f7;
}
html .text__gray--1 {
color: #f7f7f7;
}
html a.text:hover__gray--1 {
color: #c4c4c4;
}
html .bg__gray--900 {
color: #fff;
background-color: #121212;
}
html .text__gray--900 {
color: #121212;
}
html a.text:hover__gray--900 {
color: #000;
}
html .bg__gray--800 {
color: #fff;
background-color: #424242;
}
html .text__gray--800 {
color: #424242;
}
html a.text:hover__gray--800 {
color: #0f0f0f;
}
html .bg__gray--700 {
color: #fff;
background-color: #5b5b5b;
}
html .text__gray--700 {
color: #5b5b5b;
}
html a.text:hover__gray--700 {
color: #282828;
}
html .bg__gray--600 {
color: #fff;
background-color: #777;
}
html .text__gray--600 {
color: #777;
}
html a.text:hover__gray--600 {
color: #444;
}
html .bg__gray--500 {
color: #fff;
background-color: #9c9c9c;
}
html .text__gray--500 {
color: #9c9c9c;
}
html a.text:hover__gray--500 {
color: #696969;
}
html .bg__gray--400 {
color: #fff;
background-color: #b1b1b1;
}
html .text__gray--400 {
color: #b1b1b1;
}
html a.text:hover__gray--400 {
color: #7e7e7e;
}
html .bg__gray--300 {
color: #777;
background-color: #c8c8c8;
}
html .text__gray--300 {
color: #c8c8c8;
}
html a.text:hover__gray--300 {
color: #959595;
}
html .bg__gray--200 {
color: #777;
background-color: #d8d8d8;
}
html .text__gray--200 {
color: #d8d8d8;
}
html a.text:hover__gray--200 {
color: #a5a5a5;
}
html .bg__gray--100 {
color: #777;
background-color: #e5e5e5;
}
html .text__gray--100 {
color: #e5e5e5;
}
html a.text:hover__gray--100 {
color: #b2b2b2;
}
html .bg__gray--75 {
color: #777;
background-color: #f0f0f0;
}
html .text__gray--75 {
color: #f0f0f0;
}
html a.text:hover__gray--75 {
color: #bdbdbd;
}
html .bg__gray--50 {
color: #777;
background-color: #f7f7f7;
}
html .text__gray--50 {
color: #f7f7f7;
}
html a.text:hover__gray--50 {
color: #c4c4c4;
}
html .floatl {
float: left;
}
html .floatr {
float: right;
}
html .clear {
clear: both;
}
html .clearfix:after {
clear: both;
content: '';
display: table;
}
html .roman {
font-style: normal;
}
html .italic {
font-style: italic;
}
html .light {
font-weight: 300;
}
html .regular {
font-weight: 400;
}
html .medium {
font-weight: 500;
}
html .semibold {
font-weight: 600;
}
html .bold {
font-weight: 700;
}
html .ff--base {
font-family: var(--font-base);
}
html[lang='jp'] .ff--base,
html[lang='ko'] .ff--base,
html[lang='ru'] .ff--base {
font-family: var(--non-latin-font);
}
html .ff--title {
font-family: var(--font-title);
}
html[lang='jp'] .ff--title,
html[lang='ko'] .ff--title,
html[lang='ru'] .ff--title {
font-family: var(--non-latin-font);
}
html .alignl {
text-align: left;
}
html .alignr {
text-align: right;
}
html .alignc {
text-align: center;
}
html .font-sm,
html .font-xs {
font-size: 13px;
}
html .font-md {
font-size: 15px;
}
html .font-lg {
font-size: 17px;
}
html .font-xl {
font-size: 20px;
}
@media screen and (min-width: 480px) {
html .font-h1 {
font-size: calc(40px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
html .font-h1 {
font-size: 46px;
}
}
@media screen and (min-width: 480px) {
html .font-h2 {
font-size: calc(36px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
html .font-h2 {
font-size: 42px;
}
}
html .font-h3 {
font-size: 32px;
}
@media screen and (min-width: 480px) {
html .font-h3 {
font-size: calc(32px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
html .font-h3 {
font-size: 38px;
}
}
html .font-h4 {
font-size: 28px;
}
@media screen and (min-width: 480px) {
html .font-h4 {
font-size: calc(28px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
html .font-h4 {
font-size: 34px;
}
}
@media screen and (min-width: 480px) {
html .font-h5 {
font-size: calc(24px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
html .font-h5 {
font-size: 30px;
}
}
@media screen and (min-width: 480px) {
html .font-h6 {
font-size: calc(20px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
html .font-h6 {
font-size: 26px;
}
}
html .font-lh-sm,
html .font-lh-xs {
line-height: 13px;
}
html .font-lh-md {
line-height: 15px;
}
html .font-lh-lg {
line-height: 17px;
}
html .font-lh-xl {
line-height: 20px;
}
html .resetcase {
text-transform: none;
}
html .lowercase {
text-transform: lowercase;
}
html .uppercase {
text-transform: uppercase;
}
html .capitalize {
text-transform: capitalize;
}
html .strike {
text-decoration: line-through;
}
html .underline {
text-decoration: underline;
}
html .text-inverted {
color: #fff;
}
html .line-height-xs {
line-height: 24px;
}
html .line-height-sm {
line-height: 34px;
}
html .line-height-md {
line-height: 44px;
}
html .line-height-lg {
line-height: 54px;
}
html .line-height-xl {
line-height: 64px;
}
html .line-height-reset {
line-height: normal;
}
html body.noscript .noscript {
display: none !important;
}
html .full-width-fix {
margin: 0 -5px;
}
html .full-width-fix-i {
margin: 0 -5px !important;
}
html .full-width {
width: 100% !important;
}
html .full-height {
height: 100% !important;
}
html .invisible {
visibility: hidden;
}
html .hide {
display: none !important;
}
html .inline {
display: inline;
}
html .inline-i {
display: inline !important;
}
html .block {
display: block;
}
html .block-i {
display: block !important;
}
html .inline-block {
display: inline-block;
}
html .inline-block-i {
display: inline-block !important;
}
html .overflow-hidden {
overflow: hidden;
}
html .overflow-auto {
overflow: auto;
}
html .overflow-scroll {
overflow: scroll !important;
}
html .overflow-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html .overflow-visible {
overflow: visible;
}
html .scrollable {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
height: 100%;
}
@media screen and (max-width: 768px) {
html .scrollable {
overflow-y: scroll;
}
html .scrollable > .container,
html .scrollable > .container-fluid {
min-height: calc(100% + 10px);
}
}
html .scrollable--absolute {
position: absolute;
top: 0;
left: 0;
max-height: 100%;
}
html .v-alignc {
vertical-align: middle;
}
html .v-alignc-transform {
-webkit-transform: translateY(-25%);
-moz-transform: translateY(-25%);
-ms-transform: translateY(-25%);
-o-transform: translateY(-25%);
transform: translateY(-25%);
}
html .paragraph-readable {
max-width: 640px;
}
html .paragraph-readable--xs {
max-width: 480px;
}
html .size--xs {
height: 24px;
font-size: 12px;
line-height: 24px;
}
html .size--sm {
height: 34px;
font-size: 13px;
line-height: 34px;
}
html .size--md {
height: 44px;
font-size: 15px;
line-height: 44px;
}
html .size--lg {
height: 54px;
font-size: 17px;
line-height: 54px;
}
html .size--xl {
height: 64px;
font-size: 20px;
line-height: 64px;
}
html .mg-none-i {
margin: 0 !important;
}
html .mg-x-none-i {
margin-left: 0 !important;
margin-right: 0 !important;
}
html .mg-y-none-i {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html .mg-lv1 {
margin: 5px;
}
html .mg-lv1-i {
margin: 5px !important;
}
html .mg-top-lv1 {
margin-top: 5px;
}
html .mg-top-lv1-i {
margin-top: 5px !important;
}
html .mg-right-lv1 {
margin-right: 5px;
}
html .mg-right-lv1-i {
margin-right: 5px !important;
}
html .mg-bottom-lv1 {
margin-bottom: 5px;
}
html .mg-bottom-lv1-i {
margin-bottom: 5px !important;
}
html .mg-left-lv1 {
margin-left: 5px;
}
html .mg-left-lv1-i {
margin-left: 5px !important;
}
html .mg-lv2 {
margin: 10px;
}
html .mg-lv2-i {
margin: 10px !important;
}
html .mg-top-lv2 {
margin-top: 10px;
}
html .mg-top-lv2-i {
margin-top: 10px !important;
}
html .mg-right-lv2 {
margin-right: 10px;
}
html .mg-right-lv2-i {
margin-right: 10px !important;
}
html .mg-bottom-lv2 {
margin-bottom: 10px;
}
html .mg-bottom-lv2-i {
margin-bottom: 10px !important;
}
html .mg-left-lv2 {
margin-left: 10px;
}
html .mg-left-lv2-i {
margin-left: 10px !important;
}
html .mg-lv3 {
margin: 20px;
}
html .mg-lv3-i {
margin: 20px !important;
}
html .mg-top-lv3 {
margin-top: 20px;
}
html .mg-top-lv3-i {
margin-top: 20px !important;
}
html .mg-right-lv3 {
margin-right: 20px;
}
html .mg-right-lv3-i {
margin-right: 20px !important;
}
html .mg-bottom-lv3 {
margin-bottom: 20px;
}
html .mg-bottom-lv3-i {
margin-bottom: 20px !important;
}
html .mg-left-lv3 {
margin-left: 20px;
}
html .mg-left-lv3-i {
margin-left: 20px !important;
}
html .mg-lv4 {
margin: 30px;
}
html .mg-lv4-i {
margin: 30px !important;
}
html .mg-top-lv4 {
margin-top: 30px;
}
html .mg-top-lv4-i {
margin-top: 30px !important;
}
html .mg-right-lv4 {
margin-right: 30px;
}
html .mg-right-lv4-i {
margin-right: 30px !important;
}
html .mg-bottom-lv4 {
margin-bottom: 30px;
}
html .mg-bottom-lv4-i {
margin-bottom: 30px !important;
}
html .mg-left-lv4 {
margin-left: 30px;
}
html .mg-left-lv4-i {
margin-left: 30px !important;
}
html .mg-lv5 {
margin: 50px;
}
html .mg-lv5-i {
margin: 50px !important;
}
html .mg-top-lv5 {
margin-top: 50px;
}
html .mg-top-lv5-i {
margin-top: 50px !important;
}
html .mg-right-lv5 {
margin-right: 50px;
}
html .mg-right-lv5-i {
margin-right: 50px !important;
}
html .mg-bottom-lv5 {
margin-bottom: 50px;
}
html .mg-bottom-lv5-i {
margin-bottom: 50px !important;
}
html .mg-left-lv5 {
margin-left: 50px;
}
html .mg-left-lv5-i {
margin-left: 50px !important;
}
html .mg-none {
margin: 0;
}
html .mg-x-none {
margin-left: 0;
margin-right: 0;
}
html .mg-y-none {
margin-top: 0;
margin-bottom: 0;
}
html .pd-none-i {
padding: 0 !important;
}
html .pd-x-none-i {
padding-left: 0 !important;
padding-right: 0 !important;
}
html .pd-y-none-i {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
html .pd-lv1 {
padding: 5px;
}
html .pd-lv1-i {
padding: 5px !important;
}
html .pd-top-lv1 {
padding-top: 5px;
}
html .pd-top-lv1-i {
padding-top: 5px !important;
}
html .pd-right-lv1 {
padding-right: 5px;
}
html .pd-right-lv1-i {
padding-right: 5px !important;
}
html .pd-bottom-lv1 {
padding-bottom: 5px;
}
html .pd-bottom-lv1-i {
padding-bottom: 5px !important;
}
html .pd-left-lv1 {
padding-left: 5px;
}
html .pd-left-lv1-i {
padding-left: 5px !important;
}
html .pd-lv2 {
padding: 10px;
}
html .pd-lv2-i {
padding: 10px !important;
}
html .pd-top-lv2 {
padding-top: 10px;
}
html .pd-top-lv2-i {
padding-top: 10px !important;
}
html .pd-right-lv2 {
padding-right: 10px;
}
html .pd-right-lv2-i {
padding-right: 10px !important;
}
html .pd-bottom-lv2 {
padding-bottom: 10px;
}
html .pd-bottom-lv2-i {
padding-bottom: 10px !important;
}
html .pd-left-lv2 {
padding-left: 10px;
}
html .pd-left-lv2-i {
padding-left: 10px !important;
}
html .pd-lv3 {
padding: 20px;
}
html .pd-lv3-i {
padding: 20px !important;
}
html .pd-top-lv3 {
padding-top: 20px;
}
html .pd-top-lv3-i {
padding-top: 20px !important;
}
html .pd-right-lv3 {
padding-right: 20px;
}
html .pd-right-lv3-i {
padding-right: 20px !important;
}
html .pd-bottom-lv3 {
padding-bottom: 20px;
}
html .pd-bottom-lv3-i {
padding-bottom: 20px !important;
}
html .pd-left-lv3 {
padding-left: 20px;
}
html .pd-left-lv3-i {
padding-left: 20px !important;
}
html .pd-lv4 {
padding: 30px;
}
html .pd-lv4-i {
padding: 30px !important;
}
html .pd-top-lv4 {
padding-top: 30px;
}
html .pd-top-lv4-i {
padding-top: 30px !important;
}
html .pd-right-lv4 {
padding-right: 30px;
}
html .pd-right-lv4-i {
padding-right: 30px !important;
}
html .pd-bottom-lv4 {
padding-bottom: 30px;
}
html .pd-bottom-lv4-i {
padding-bottom: 30px !important;
}
html .pd-left-lv4 {
padding-left: 30px;
}
html .pd-left-lv4-i {
padding-left: 30px !important;
}
html .pd-lv5 {
padding: 50px;
}
html .pd-lv5-i {
padding: 50px !important;
}
html .pd-top-lv5 {
padding-top: 50px;
}
html .pd-top-lv5-i {
padding-top: 50px !important;
}
html .pd-right-lv5 {
padding-right: 50px;
}
html .pd-right-lv5-i {
padding-right: 50px !important;
}
html .pd-bottom-lv5 {
padding-bottom: 50px;
}
html .pd-bottom-lv5-i {
padding-bottom: 50px !important;
}
html .pd-left-lv5 {
padding-left: 50px;
}
html .pd-left-lv5-i {
padding-left: 50px !important;
}
html .pd-none {
padding: 0;
}
html .pd-x-none {
padding-left: 0;
padding-right: 0;
}
html .pd-y-none {
padding-top: 0;
padding-bottom: 0;
}
html .push-left {
margin-right: auto;
}
html .push-left-i {
margin-right: auto !important;
}
html .push-right {
margin-left: auto;
}
html .push-right-i {
margin-left: auto !important;
}
html .push-center {
margin-left: auto;
margin-right: auto;
}
html .push-center-i {
margin-left: auto !important;
margin-right: auto !important;
}
html .hide-desktop,
html .show-mobile,
html .show-mobile-i,
html .show-phone,
html .show-phone-i,
html .show-tablet,
html .show-tablet-i {
display: none !important;
}
@media screen and (max-width: 640px) {
html .full-width-phone {
width: 100%;
}
html .left-on-phone {
text-align: left;
}
html .nofloat-phone {
float: none;
}
html .show-phone,
html .show-phone-i {
display: inherit !important;
}
}
@media screen and (max-width: 768px) {
html .full-width-mobile {
width: 100%;
}
html .show-mobile,
html .show-mobile-i {
display: inherit !important;
}
}
@media screen and (max-width: 640px) {
html .hide-phone {
display: none !important;
}
}
@media screen and (max-width: 768px) {
html .hide-mobile {
display: none !important;
}
}
@media screen and (max-width: 992px) {
html .hide-tablet {
display: none !important;
}
html .show-tablet,
html .show-tablet-i {
display: inherit !important;
}
}
@media screen and (min-width: 992px) {
html .hide-desktop {
display: inherit !important;
}
}
html .video-wrapper {
position: relative;
overflow: hidden;
}
html .video-wrapper:before {
display: block;
padding-bottom: 56.25%;
content: '';
}
html .video-wrapper .video,
html .video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html .aspect-ratio:before {
display: block;
width: 100%;
content: '';
}
html .aspect-ratio--100:before {
padding: 0 0 100%;
}
html .aspect-ratio--75:before {
padding: 0 0 75%;
}
html .aspect-ratio--16-9:before {
padding: 0 0 56.25%;
}
html .aspect-ratio--4-3:before {
padding: 0 0 75%;
}
html .notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
html .disabled {
opacity: 0.4;
}
html .disabled,
html .disabled * {
pointer-events: none !important;
}
html .opacity-1 {
opacity: 0.1;
}
html .opacity-2 {
opacity: 0.2;
}
html .opacity-3 {
opacity: 0.3;
}
html .opacity-4 {
opacity: 0.4;
}
html .opacity-5 {
opacity: 0.5;
}
html .opacity-6 {
opacity: 0.6;
}
html .opacity-7 {
opacity: 0.7;
}
html .opacity-8 {
opacity: 0.8;
}
html .opacity-9 {
opacity: 0.9;
}
html .opacity-10 {
opacity: 1;
}
@font-face {
font-family: bobjoll;
src:
url(../images/bobjoll.202cca458fa9de5d74455893e517f85c.woff2) format('woff2'),
url(../images/bobjoll.ba26d471f735e376940674580a5e3720.woff) format('woff');
}
#notification-cart .notification__close i,
.bj-button i,
.detail .detail-content .main-icon.mainNext,
.detail .detail-content .main-icon.mainPrev,
.detail .detail-content .next-icon,
.detail .detail-content .prev-icon,
.icon,
.notification--alert i {
display: block;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
#notification-cart .notification__close i:before,
.bj-button i:before,
.detail .detail-content .main-icon.mainNext:before,
.detail .detail-content .main-icon.mainPrev:before,
.detail .detail-content .next-icon:before,
.detail .detail-content .prev-icon:before,
.icon:before,
.notification--alert i:before {
font-family: bobjoll;
font-style: normal;
font-weight: 400;
font-variant: normal;
}
#notification-cart .notification__close i,
.icon,
.notification--alert i {
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
color: #777;
fill: #777;
}
.icon--inverted {
color: #fff !important;
fill: #fff !important;
}
.icon--behance {
color: #1769ff;
fill: #1769ff;
}
.icon--dribbble {
color: #ea4c89;
fill: #ea4c89;
}
.icon--facebook {
color: #1877f2;
fill: #1877f2;
}
.icon--google {
color: #dd4b39;
fill: #dd4b39;
}
.icon--instagram {
color: #c32aa3;
fill: #c32aa3;
}
.icon--linkedin {
color: #0a66c2;
fill: #0a66c2;
}
.icon--pinterest {
color: #cb2027;
fill: #cb2027;
}
.icon--stumbleupon {
color: #f74425;
fill: #f74425;
}
.icon--telegram {
color: #08c;
fill: #08c;
}
.icon--twitter {
color: #000;
fill: #000;
}
.icon--vimeo {
color: #aad450;
fill: #aad450;
}
.icon--whatsapp {
color: #25d366;
fill: #25d366;
}
.icon--youtube {
color: #b00;
fill: #b00;
}
.icon--xs {
width: 12px;
height: 12px;
font-size: 12px;
line-height: 12px;
}
.icon--xs.icon--mg-xs {
padding: 6px;
box-sizing: content-box;
}
.icon--xs.icon--mg-sm {
padding: 11px;
box-sizing: content-box;
}
.icon--xs.icon--mg-md {
padding: 16px;
box-sizing: content-box;
}
.icon--xs.icon--mg-lg {
padding: 21px;
box-sizing: content-box;
}
.icon--xs.icon--mg-xl {
padding: 26px;
box-sizing: content-box;
}
.icon--sm {
width: 14px;
height: 14px;
font-size: 14px;
line-height: 14px;
}
.icon--sm.icon--mg-xs {
padding: 5px;
box-sizing: content-box;
}
.icon--sm.icon--mg-sm {
padding: 10px;
box-sizing: content-box;
}
.icon--sm.icon--mg-md {
padding: 15px;
box-sizing: content-box;
}
.icon--sm.icon--mg-lg {
padding: 20px;
box-sizing: content-box;
}
.icon--sm.icon--mg-xl {
padding: 25px;
box-sizing: content-box;
}
.icon--md {
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
}
.icon--md.icon--mg-xs {
padding: 4px;
box-sizing: content-box;
}
.icon--md.icon--mg-sm {
padding: 9px;
box-sizing: content-box;
}
.icon--md.icon--mg-md {
padding: 14px;
box-sizing: content-box;
}
.icon--md.icon--mg-lg {
padding: 19px;
box-sizing: content-box;
}
.icon--md.icon--mg-xl {
padding: 24px;
box-sizing: content-box;
}
.icon--lg {
width: 20px;
height: 20px;
font-size: 20px;
line-height: 20px;
}
.icon--lg.icon--mg-xs {
padding: 2px;
box-sizing: content-box;
}
.icon--lg.icon--mg-sm {
padding: 7px;
box-sizing: content-box;
}
.icon--lg.icon--mg-md {
padding: 12px;
box-sizing: content-box;
}
.icon--lg.icon--mg-lg {
padding: 17px;
box-sizing: content-box;
}
.icon--lg.icon--mg-xl {
padding: 22px;
box-sizing: content-box;
}
.icon--xl {
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
}
.icon--xl.icon--mg-xs {
padding: 0;
box-sizing: content-box;
}
.icon--xl.icon--mg-sm {
padding: 5px;
box-sizing: content-box;
}
.icon--xl.icon--mg-md {
padding: 10px;
box-sizing: content-box;
}
.icon--xl.icon--mg-lg {
padding: 15px;
box-sizing: content-box;
}
.icon--xl.icon--mg-xl {
padding: 20px;
box-sizing: content-box;
}
.icon--3d:before {
content: '\f101';
}
.icon--add-to-folder:before {
content: '\f102';
}
.icon--add-user:before {
content: '\f103';
}
.icon--addcollection:before {
content: '\f104';
}
.icon--advanced:before {
content: '\f105';
}
.icon--ai-filter:before {
content: '\f106';
}
.icon--ai-stars:before {
content: '\f107';
}
.icon--ai:before {
content: '\f108';
}
.icon--aligncenter:before {
content: '\f109';
}
.icon--alignleft:before {
content: '\f10a';
}
.icon--alignright:before {
content: '\f10b';
}
.icon--amex:before {
content: '\f10c';
}
.icon--animated-icon:before {
content: '\f10d';
}
.icon--api:before {
content: '\f10e';
}
.icon--archive:before {
content: '\f10f';
}
.icon--attribution-pen:before {
content: '\f110';
}
.icon--attribution-pencil:before {
content: '\f111';
}
.icon--background:before {
content: '\f112';
}
.icon--backwards:before {
content: '\f113';
}
.icon--base-model:before {
content: '\f114';
}
.icon--beacon-lineal:before {
content: '\f115';
}
.icon--beacon:before {
content: '\f116';
}
.icon--beginner:before {
content: '\f117';
}
.icon--behance:before {
content: '\f118';
}
.icon--blog-pencil:before {
content: '\f119';
}
.icon--blog-text:before {
content: '\f11a';
}
.icon--bold:before {
content: '\f11b';
}
.icon--book:before {
content: '\f11c';
}
.icon--bookmark-filled:before {
content: '\f11d';
}
.icon--bookmark:before {
content: '\f11e';
}
.icon--briefcase:before {
content: '\f11f';
}
.icon--broken-image:before {
content: '\f120';
}
.icon--brush:before {
content: '\f121';
}
.icon--bug:before {
content: '\f122';
}
.icon--bullet:before {
content: '\f123';
}
.icon--business-card:before {
content: '\f124';
}
.icon--calendar:before {
content: '\f125';
}
.icon--camera:before {
content: '\f126';
}
.icon--caret-down:before {
content: '\f127';
}
.icon--caret-left:before {
content: '\f128';
}
.icon--caret-right:before {
content: '\f129';
}
.icon--caret-up:before {
content: '\f12a';
}
.icon--check-round:before {
content: '\f12b';
}
#notification-cart
.notification__close
.notification--success
.notification__state
i:not(.nostyle):before,
.icon--check:before,
.icon--success:before,
.notification--alert .notification--success .notification__state i:not(.nostyle):before,
.notification--success
.notification__state
#notification-cart
.notification__close
i:not(.nostyle):before,
.notification--success .notification__state .icon:not(.nostyle):before,
.notification--success .notification__state .notification--alert i:not(.nostyle):before {
content: '\f12c';
}
.icon--checkbox:before {
content: '\f12d';
}
.icon--circle-filled:before {
content: '\f12e';
}
.icon--circle-lineal-small:before {
content: '\f12f';
}
.icon--circle-lineal:before {
content: '\f130';
}
.icon--circle:before {
content: '\f131';
}
.icon--clean:before {
content: '\f132';
}
.icon--clip:before {
content: '\f133';
}
.icon--cloud:before {
content: '\f134';
}
.icon--collapse:before {
content: '\f135';
}
.icon--collection:before {
content: '\f136';
}
.icon--comment:before {
content: '\f137';
}
.icon--cookie:before {
content: '\f138';
}
.icon--copy-image:before {
content: '\f139';
}
.icon--copyright:before {
content: '\f13a';
}
.icon--coupon:before {
content: '\f13b';
}
.icon--create-folder-filled:before {
content: '\f13c';
}
.icon--create-folder:before {
content: '\f13d';
}
.icon--credit-card:before {
content: '\f13e';
}
.icon--crop:before {
content: '\f13f';
}
.icon--cross-small:before {
content: '\f140';
}
.icon--cross:before {
content: '\f141';
}
.icon--crown-filled:before {
content: '\f142';
}
.icon--crown-lineal:before {
content: '\f143';
}
.icon--crown:before {
content: '\f144';
}
.icon--dashboard:before {
content: '\f145';
}
.icon--desktop-wallpaper:before {
content: '\f146';
}
.icon--devices:before {
content: '\f147';
}
.icon--disabled:before {
content: '\f148';
}
.icon--display-options:before {
content: '\f149';
}
.icon--dollar:before {
content: '\f14a';
}
.icon--down-small:before {
content: '\f14b';
}
.icon--down:before {
content: '\f14c';
}
.icon--download:before {
content: '\f14d';
}
.icon--dribbble:before {
content: '\f14e';
}
.icon--duplicate:before {
content: '\f14f';
}
.icon--earnings:before {
content: '\f150';
}
.icon--edit:before {
content: '\f151';
}
.icon--education:before {
content: '\f152';
}
.icon--empty:before {
content: '\f153';
}
.icon--envelope-solid:before {
content: '\f154';
}
.icon--envelope:before {
content: '\f155';
}
.icon--error-round:before {
content: '\f156';
}
#notification-cart
.notification__close
.notification--error
.notification__state
i:not(.nostyle):before,
#notification-cart
.notification__close
.notification--warning
.notification__state
i:not(.nostyle):before,
.icon--danger:before,
.icon--exclamation:before,
.icon--warning:before,
.notification--alert .notification--error .notification__state i:not(.nostyle):before,
.notification--alert .notification--warning .notification__state i:not(.nostyle):before,
.notification--error
.notification__state
#notification-cart
.notification__close
i:not(.nostyle):before,
.notification--error .notification__state .icon:not(.nostyle):before,
.notification--error .notification__state .notification--alert i:not(.nostyle):before,
.notification--warning
.notification__state
#notification-cart
.notification__close
i:not(.nostyle):before,
.notification--warning .notification__state .icon:not(.nostyle):before,
.notification--warning .notification__state .notification--alert i:not(.nostyle):before {
content: '\f157';
}
.icon--external-link:before {
content: '\f158';
}
.icon--eye-line-through:before {
content: '\f159';
}
.icon--eye:before {
content: '\f15a';
}
.icon--facebook:before {
content: '\f15b';
}
.icon--file:before {
content: '\f15c';
}
.icon--filter:before {
content: '\f15d';
}
.icon--fiverr:before {
content: '\f15e';
}
.icon--flag:before {
content: '\f15f';
}
.icon--flame:before {
content: '\f160';
}
.icon--flaticon-symbol:before {
content: '\f161';
}
.icon--flaticon-text:before {
content: '\f162';
}
.icon--flaticon:before {
content: '\f163';
}
.icon--flip:before {
content: '\f164';
}
.icon--fold:before {
content: '\f165';
}
.icon--folder:before {
content: '\f166';
}
.icon--follow-folder:before {
content: '\f167';
}
.icon--followcollection:before {
content: '\f168';
}
.icon--following:before {
content: '\f169';
}
.icon--font:before {
content: '\f16a';
}
.icon--forwards:before {
content: '\f16b';
}
.icon--fullscreen:before {
content: '\f16c';
}
.icon--globe:before {
content: '\f16d';
}
.icon--go-to-page1:before {
content: '\f16e';
}
.icon--google:before {
content: '\f16f';
}
.icon--graphic-style:before {
content: '\f170';
}
.icon--grid:before {
content: '\f171';
}
.icon--headphones:before {
content: '\f172';
}
.icon--headquarters:before {
content: '\f173';
}
.icon--heart-filled:before {
content: '\f174';
}
.icon--heart:before {
content: '\f175';
}
.icon--history:before {
content: '\f176';
}
.icon--home:before {
content: '\f177';
}
.icon--hourglass:before {
content: '\f178';
}
.icon--icon:before {
content: '\f179';
}
.icon--icons:before {
content: '\f17a';
}
.icon--images:before {
content: '\f17b';
}
.icon--inbox:before {
content: '\f17c';
}
.icon--info:before {
content: '\f17d';
}
.icon--instagram:before {
content: '\f17e';
}
.icon--interactive:before {
content: '\f17f';
}
.icon--intermediate:before {
content: '\f180';
}
.icon--interogation:before {
content: '\f181';
}
.icon--italic:before {
content: '\f182';
}
.icon--justify:before {
content: '\f183';
}
.icon--keyboard:before {
content: '\f184';
}
.icon--laptop:before {
content: '\f185';
}
.icon--layers:before {
content: '\f186';
}
.icon--left-small:before {
content: '\f187';
}
.icon--left:before {
content: '\f188';
}
.icon--license:before {
content: '\f189';
}
.icon--light-bulb:before {
content: '\f18a';
}
.icon--linkedin:before {
content: '\f18b';
}
.icon--list:before {
content: '\f18c';
}
.icon--lock-open-solid:before {
content: '\f18d';
}
.icon--lock-solid:before {
content: '\f18e';
}
.icon--lock:before {
content: '\f18f';
}
.icon--logo-symbol-old:before {
content: '\f190';
}
.icon--logo-symbol:before {
content: '\f191';
}
.icon--logo-text-old:before {
content: '\f192';
}
.icon--logo-text:before {
content: '\f193';
}
.icon--logout:before {
content: '\f194';
}
.icon--marker:before {
content: '\f195';
}
.icon--master-card:before {
content: '\f196';
}
.icon--medical-1:before {
content: '\f197';
}
.icon--medical-2:before {
content: '\f198';
}
.icon--menuburger:before {
content: '\f199';
}
.icon--menudots-vertical:before {
content: '\f19a';
}
.icon--menudots:before {
content: '\f19b';
}
.icon--minimize:before {
content: '\f19c';
}
.icon--minus-small:before {
content: '\f19d';
}
.icon--minus:before {
content: '\f19e';
}
.icon--mockup:before {
content: '\f19f';
}
.icon--move-to-folder-2:before {
content: '\f1a0';
}
.icon--move-to-folder:before {
content: '\f1a1';
}
.icon--next-small:before {
content: '\f1a2';
}
.icon--next:before {
content: '\f1a3';
}
.icon--no-people:before {
content: '\f1a4';
}
.icon--notification-filled:before {
content: '\f1a5';
}
.icon--notification:before {
content: '\f1a6';
}
.icon--o-horizontal:before {
content: '\f1a7';
}
.icon--o-panoramic:before {
content: '\f1a8';
}
.icon--o-square:before {
content: '\f1a9';
}
.icon--o-vertical:before {
content: '\f1aa';
}
.icon--opacity:before {
content: '\f1ab';
}
.icon--palette:before {
content: '\f1ac';
}
.icon--paper-plane:before {
content: '\f1ad';
}
.icon--paper-plane2:before {
content: '\f1ae';
}
.icon--paste:before {
content: '\f1af';
}
.icon--pattern:before {
content: '\f1b0';
}
.icon--pause:before {
content: '\f1b1';
}
.icon--paypal:before {
content: '\f1b2';
}
.icon--pencil:before {
content: '\f1b3';
}
.icon--phone:before {
content: '\f1b4';
}
.icon--photo:before {
content: '\f1b5';
}
.icon--picpeople-filled:before {
content: '\f1b6';
}
.icon--picpeople:before {
content: '\f1b7';
}
.icon--pinterest:before {
content: '\f1b8';
}
.icon--pixabay:before {
content: '\f1b9';
}
.icon--play:before {
content: '\f1ba';
}
.icon--plus-small:before {
content: '\f1bb';
}
.icon--plus:before {
content: '\f1bc';
}
.icon--presentation:before {
content: '\f1bd';
}
.icon--prev-small:before {
content: '\f1be';
}
.icon--prev:before {
content: '\f1bf';
}
.icon--projects:before {
content: '\f1c0';
}
.icon--prompt:before {
content: '\f1c1';
}
.icon--psd:before {
content: '\f1c2';
}
.icon--quote:before {
content: '\f1c3';
}
.icon--receipt:before {
content: '\f1c4';
}
.icon--redo:before {
content: '\f1c5';
}
.icon--reflect-horizontal:before {
content: '\f1c6';
}
.icon--reflect-vertical:before {
content: '\f1c7';
}
.icon--refresh:before {
content: '\f1c8';
}
.icon--remove-folder:before {
content: '\f1c9';
}
.icon--removecollection:before {
content: '\f1ca';
}
.icon--replace:before {
content: '\f1cb';
}
.icon--resources:before {
content: '\f1cc';
}
.icon--right-small:before {
content: '\f1cd';
}
.icon--right:before {
content: '\f1ce';
}
.icon--rotate-inverted:before {
content: '\f1cf';
}
.icon--rotate:before {
content: '\f1d0';
}
.icon--save:before {
content: '\f1d1';
}
.icon--search-by-image:before {
content: '\f1d2';
}
.icon--search-heart:before {
content: '\f1d3';
}
.icon--search:before {
content: '\f1d4';
}
.icon--security:before {
content: '\f1d5';
}
.icon--settings:before {
content: '\f1d6';
}
.icon--share:before {
content: '\f1d7';
}
.icon--shield:before {
content: '\f1d8';
}
.icon--shopping-cart:before {
content: '\f1d9';
}
.icon--shuffle:before {
content: '\f1da';
}
.icon--slidesgo:before {
content: '\f1db';
}
.icon--smiley-comment:before {
content: '\f1dc';
}
.icon--sortcollection:before {
content: '\f1dd';
}
.icon--speaker:before {
content: '\f1de';
}
.icon--spinner:before {
content: '\f1df';
}
.icon--square-lineal:before {
content: '\f1e0';
}
.icon--square:before {
content: '\f1e1';
}
.icon--squares:before {
content: '\f1e2';
}
.icon--squircle-lineal:before {
content: '\f1e3';
}
.icon--squircle:before {
content: '\f1e4';
}
.icon--star-comment:before {
content: '\f1e5';
}
.icon--star-filled:before {
content: '\f1e6';
}
.icon--star:before {
content: '\f1e7';
}
.icon--stats:before {
content: '\f1e8';
}
.icon--sticker:before {
content: '\f1e9';
}
.icon--stop:before {
content: '\f1ea';
}
.icon--stroke:before {
content: '\f1eb';
}
.icon--stumbleupon:before {
content: '\f1ec';
}
.icon--subtitles:before {
content: '\f1ed';
}
.icon--support:before {
content: '\f1ee';
}
.icon--tablet:before {
content: '\f1ef';
}
.icon--tag:before {
content: '\f1f0';
}
.icon--telegram:before {
content: '\f1f1';
}
.icon--template-alt:before {
content: '\f1f2';
}
.icon--template:before {
content: '\f1f3';
}
.icon--text-shadow:before {
content: '\f1f4';
}
.icon--thumb-down:before {
content: '\f1f5';
}
.icon--thumb-up:before {
content: '\f1f6';
}
.icon--time:before {
content: '\f1f7';
}
.icon--trash:before {
content: '\f1f8';
}
.icon--twitter:before {
content: '\f1f9';
}
.icon--underline:before {
content: '\f1fa';
}
.icon--undo:before {
content: '\f1fb';
}
.icon--unfold:before {
content: '\f1fc';
}
.icon--unlock:before {
content: '\f1fd';
}
.icon--up-small:before {
content: '\f1fe';
}
.icon--up:before {
content: '\f1ff';
}
.icon--upload-to-folder:before {
content: '\f200';
}
.icon--upload:before {
content: '\f201';
}
.icon--url:before {
content: '\f202';
}
.icon--user:before {
content: '\f203';
}
.icon--users:before {
content: '\f204';
}
.icon--vector:before {
content: '\f205';
}
.icon--video-linear:before {
content: '\f206';
}
.icon--video:before {
content: '\f207';
}
.icon--vimeo:before {
content: '\f208';
}
.icon--visa:before {
content: '\f209';
}
.icon--volume:before {
content: '\f20a';
}
.icon--warning-filled:before {
content: '\f20b';
}
.icon--whatsapp:before {
content: '\f20c';
}
.icon--world:before {
content: '\f20d';
}
.icon--youtube:before {
content: '\f20e';
}
.icon--zoom-in:before {
content: '\f20f';
}
.icon--zoom-out:before {
content: '\f210';
}
dl,
ol,
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.list {
margin: 0 0 20px;
}
.list li {
position: relative;
margin: 0 0 2.5px;
padding: 0 0 0 10px;
list-style: none;
}
.list li:before {
display: inline-block;
width: 6px;
height: 6px;
margin: 8px 10px 9px -10px;
border-radius: 50%;
background-color: #777;
vertical-align: middle;
content: '';
}
.list--xs li {
font-size: 12px;
line-height: 1.25;
}
.list--xs li:before {
margin: 4.5px 5px 0 0;
}
.list--sm li {
font-size: 13px;
line-height: 1.5;
}
.list--sm li:before {
margin: 6.5px 5px 0 0;
}
.list--md li {
font-size: 15px;
line-height: 1.6;
}
.list--md li:before {
margin: 9px 5px 0 0;
}
.list--lg li {
font-size: 17px;
line-height: 1.75;
}
.list--lg li:before {
margin: 11.5px 5px 0 0;
}
.list--xl li {
font-size: 20px;
line-height: 1.75;
}
.list--xl li:before {
margin: 14.5px 5px 0 0;
}
.list--horizontal {
display: block;
}
.list--horizontal:after {
clear: both;
content: '';
display: table;
}
.list--horizontal li {
float: left;
margin: 0 10px 0 0;
}
.list--horizontal li:last-child {
margin: 0;
}
.list--comma-separated li {
margin: 0;
padding: 0;
}
.list--comma-separated li:not(:last-child):after {
content: ',\00a0';
}
.list--comma-separated li:last-child:after {
content: '.';
}
.list--nospacing,
.list--nospacing li {
margin: 0;
}
.modal {
position: fixed;
top: 0;
left: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition:
opacity 0ms cubic-bezier(1, 0, 0, 1) 0ms,
-webkit-transform 0ms cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition:
opacity 0ms 0ms cubic-bezier(1, 0, 0, 1),
-moz-transform 0ms 0ms cubic-bezier(1, 0, 0, 1);
transition:
opacity 0ms cubic-bezier(1, 0, 0, 1) 0ms,
transform 0ms cubic-bezier(1, 0, 0, 1) 0ms;
opacity: 0;
width: 100vw;
height: 0;
padding: 0 20px;
background-color: rgba(10, 21, 47, 0.75);
text-align: center;
line-height: 100vh;
z-index: 100;
}
.modal iframe,
.modal object {
display: none;
}
.modal.scrollable {
overflow-y: scroll;
}
.modal.active {
-webkit-transition: opacity 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition: opacity 0ms cubic-bezier(1, 0, 0, 1);
transition: opacity 0ms cubic-bezier(1, 0, 0, 1);
height: 100vh;
}
.modal.active,
.modal.active > * {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.modal.active > * {
-webkit-transition: 0ms cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition: 0ms 0ms cubic-bezier(1, 0, 0, 1);
transition: 0ms cubic-bezier(1, 0, 0, 1) 0ms;
}
.modal.active iframe,
.modal.active object {
display: block;
}
.modal > * {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: 0ms cubic-bezier(1, 0, 0, 1);
-moz-transition: 0ms cubic-bezier(1, 0, 0, 1);
transition: 0ms cubic-bezier(1, 0, 0, 1);
opacity: 0;
}
.modal__container {
position: relative;
display: inline-block;
width: 100%;
max-width: 992px;
margin: 60px 0;
vertical-align: middle;
text-align: left;
line-height: 1.6;
}
.modal__container > .content {
overflow: hidden;
padding: 20px;
border-radius: 3px;
background-color: #fff;
}
.modal__close:not(.nostyle) {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: absolute;
top: 0;
right: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin: 5px;
padding: 0;
font-size: 34px;
line-height: 1;
z-index: 10;
}
.modal__close--absolute {
position: absolute;
z-index: 1;
}
.modal__close--top-left {
top: 0;
left: 0;
}
.modal__close--top-right {
top: 0;
right: 0;
}
.modal__close--bottom-left {
top: 0;
left: 0;
}
.modal__close--bottom-right {
top: 0;
right: 0;
}
.modal--full-screen {
padding: 0;
line-height: inherit;
}
.modal--full-screen .modal__container {
width: 100%;
max-width: inherit;
height: 100%;
margin: 0;
padding: 0;
background-color: #fff;
vertical-align: inherit;
}
.modal__trigger {
cursor: pointer;
}
.modal--xs .modal__container {
max-width: 480px;
}
.modal--sm .modal__container {
max-width: 640px;
}
.modal--md .modal__container {
max-width: 768px;
}
.modal--lg .modal__container {
max-width: 992px;
}
.modal--xl .modal__container {
max-width: 1400px;
}
.notifications {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
}
.notifications .notifications__bottom-center,
.notifications .notifications__bottom-left,
.notifications .notifications__bottom-right,
.notifications .notifications__center,
.notifications .notifications__top-center,
.notifications .notifications__top-left,
.notifications .notifications__top-right {
position: absolute;
}
.notifications__content {
padding-right: 29px;
}
.notifications__top-left {
top: 0;
left: 0;
}
.notifications__top-right {
top: 0;
right: 20px;
}
.notifications__top-center {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
top: 0;
left: 50%;
}
.notifications__bottom-left {
bottom: 0;
left: 0;
}
.notifications__bottom-right {
bottom: 0;
right: 20px;
}
.notifications__bottom-center {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
left: 50%;
}
.notifications__center {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.notification {
position: relative;
opacity: 0;
width: 90vw;
max-width: 680px;
min-height: 44px;
margin: 20px;
padding: 20px;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 0 60px rgba(20, 42, 94, 0.25);
pointer-events: all;
}
.notification__message {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px 44px 10px 20px;
font-size: 13px;
font-weight: 600;
}
.notification__state {
overflow: hidden;
position: relative;
top: 5px;
left: 5px;
width: 34px;
height: 34px;
border-radius: 3px;
background-color: hsla(0, 0%, 100%, 0.2);
}
#notification-cart .notification__close .notification__state i,
.notification--alert .notification__state i,
.notification__state #notification-cart .notification__close i,
.notification__state .icon,
.notification__state .notification--alert i {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notification__close:not(.nostyle) {
position: absolute;
top: 0;
right: 0;
margin: 5px;
}
.notification__triangle {
position: absolute;
}
.notification__triangle:before {
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
display: block;
content: '';
}
.notification--no-shadow {
box-shadow: none;
}
.notification--static {
width: 100%;
max-width: inherit;
margin: 0 0 20px;
}
.notification--absolute {
position: absolute;
margin: 0;
z-index: 99;
}
.notification--alert {
padding: 0;
}
.notification--alert .notification__close {
margin: 5px;
}
.notification--error {
background-color: #ff7d6a;
color: #fff;
}
.notification--error a {
color: hsla(0, 0%, 100%, 0.75);
font-weight: 700;
}
#notification-cart .notification__close .notification--error i,
.notification--alert .notification--error i,
.notification--error #notification-cart .notification__close i,
.notification--error .icon,
.notification--error .notification--alert i,
.notification--error a:hover {
color: #fff;
}
.notification--warning {
background-color: #feb602;
color: #121212;
}
.notification--warning a {
color: rgba(18, 18, 18, 0.75);
font-weight: 700;
}
#notification-cart .notification__close .notification--warning i,
.notification--alert .notification--warning i,
.notification--warning #notification-cart .notification__close i,
.notification--warning .icon,
.notification--warning .notification--alert i,
.notification--warning a:hover {
color: #121212;
}
.notification--success {
background-color: #44b678;
color: #fff;
}
.notification--success a {
color: hsla(0, 0%, 100%, 0.75);
font-weight: 700;
}
#notification-cart .notification__close .notification--success i,
.notification--alert .notification--success i,
.notification--success #notification-cart .notification__close i,
.notification--success .icon,
.notification--success .notification--alert i,
.notification--success a:hover {
color: #fff;
}
.notification--neutral {
background-color: #336aea;
color: #fff;
}
.notification--neutral a {
color: hsla(0, 0%, 100%, 0.75);
font-weight: 700;
}
#notification-cart .notification__close .notification--neutral i,
.notification--alert .notification--neutral i,
.notification--neutral #notification-cart .notification__close i,
.notification--neutral .icon,
.notification--neutral .notification--alert i,
.notification--neutral a:hover {
color: #fff;
}
.notification--hide-close .notification__close,
.notification--hide-disable .notification__disable {
display: none;
}
.notification--show {
opacity: 1;
}
.progress-bar__title {
font-size: 13px;
line-height: 24px;
color: #777;
margin-bottom: 5px;
}
.progress-bar__title-complete {
color: #3b9e62;
}
.progress-bar__wrapper {
background: #e5e5e5;
border-radius: 3px;
margin-bottom: 30px;
}
.progress-bar__value {
background: #336aea;
border-radius: 3px;
height: 5px;
width: 0;
}
.range {
-webkit-appearance: none;
width: 100%;
background-color: #e5e5e5;
height: 2px;
}
.range::-webkit-slider-runnable-track {
border-radius: 3px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 15px;
cursor: pointer;
}
.range::-moz-range-thumb {
width: 22px;
height: 22px;
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 15px;
cursor: pointer;
}
.range:focus::-webkit-slider-thumb {
transition: box-shadow 0.3s ease;
box-shadow: inset 0 0 0 6px #d8d8d8;
}
.range:focus::-moz-range-thumb {
transition: box-shadow 0.3s ease;
box-shadow: inset 0 0 0 6px #d8d8d8;
}
.range--title {
font-size: 13px;
line-height: 21px;
min-height: 21px;
color: #5b5b5b;
text-align: center;
margin: 0;
}
.range--marks {
display: flex;
justify-content: space-between;
padding: 0 10px;
color: #d8d8d8;
font-size: 10px;
}
.range--marks .mark:after {
content: '|';
}
.range--marks .mark.active {
color: #9c9c9c;
}
.copyright {
margin: 0;
font-size: 13px;
}
.type {
display: inline-block;
margin: 0 0 10px;
padding: 1px 0;
border-bottom: 1px solid #e5e5e5;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.date {
margin: 0;
color: hsla(0, 0%, 46.7%, 0.5);
}
.author,
.read-more {
font-size: 13px;
}
.read-more {
position: relative;
padding: 0 5px 0 0;
color: #0a152f;
font-weight: 700;
text-transform: uppercase;
}
hr {
width: 3em;
height: 1px;
margin: 0 0 20px;
border: none;
background-color: #e5e5e5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 20px 0;
padding: 0;
color: #424242;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
line-height: 1.5;
}
h1.first,
h2.first,
h3.first,
h4.first,
h5.first,
h6.first {
margin-top: 0;
}
h1,
h2,
h3 {
line-height: 1.25;
}
h1.category,
h2.category,
h3.category,
h4.category,
h5.category,
h6.category {
padding-bottom: 5px;
border-bottom: 1px solid;
border-color: hsla(0, 0%, 46.7%, 0.15);
text-align: center;
}
.heading-inverted {
color: #fff;
}
h1 {
font-size: 40px;
}
@media screen and (min-width: 480px) {
h1 {
font-size: calc(40px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
h1 {
font-size: 46px;
}
}
h2 {
font-size: 36px;
}
@media screen and (min-width: 480px) {
h2 {
font-size: calc(36px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
h2 {
font-size: 42px;
}
}
h3 {
font-size: 32px;
}
@media screen and (min-width: 480px) {
h3 {
font-size: calc(32px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
h3 {
font-size: 38px;
}
}
h4 {
font-size: 28px;
}
@media screen and (min-width: 480px) {
h4 {
font-size: calc(28px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
h4 {
font-size: 34px;
}
}
h5 {
font-size: 24px;
}
@media screen and (min-width: 480px) {
h5 {
font-size: calc(24px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
h5 {
font-size: 30px;
}
}
h6 {
font-size: 20px;
}
@media screen and (min-width: 480px) {
h6 {
font-size: calc(20px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
h6 {
font-size: 26px;
}
}
.link--inverted,
.link--inverted:hover,
.link-inverted,
.link-inverted:hover {
color: #fff;
}
.link--inverted:hover svg,
.link-inverted:hover svg {
opacity: 0.8;
}
.active.link--inverted,
.active.link-inverted {
color: #fff;
font-weight: 700;
}
.active.link--inverted svg,
.active.link-inverted svg {
opacity: 1;
}
.link--inverted svg,
.link-inverted svg {
opacity: 0.4;
}
#notification-cart .notification__close .link--text:hover i,
#notification-cart .notification__close .link:hover i,
#notification-cart .notification__close a:hover i,
.link--text:hover,
.link--text:hover #notification-cart .notification__close i,
.link--text:hover .icon,
.link--text:hover .notification--alert i,
.link:hover,
.link:hover #notification-cart .notification__close i,
.link:hover .icon,
.link:hover .notification--alert i,
.notification--alert .link--text:hover i,
.notification--alert .link:hover i,
.notification--alert a:hover i,
a:hover,
a:hover #notification-cart .notification__close i,
a:hover .icon,
a:hover .notification--alert i {
color: #03060d;
}
.active.link,
.active.link--text,
a.active {
color: #03060d;
font-weight: 600;
}
#notification-cart .notification__close .active.link--text i,
#notification-cart .notification__close .active.link i,
#notification-cart .notification__close a.active i,
.active.link #notification-cart .notification__close i,
.active.link--text #notification-cart .notification__close i,
.active.link--text .icon,
.active.link--text .notification--alert i,
.active.link .icon,
.active.link .notification--alert i,
.notification--alert .active.link--text i,
.notification--alert .active.link i,
.notification--alert a.active i,
a.active #notification-cart .notification__close i,
a.active .icon,
a.active .notification--alert i {
color: #03060d;
}
.link,
a {
cursor: pointer;
font-weight: 600;
text-decoration: none;
}
#notification-cart .notification__close .link i,
#notification-cart .notification__close a i,
.link,
.link #notification-cart .notification__close i,
.link .icon,
.link .notification--alert i,
.notification--alert .link i,
.notification--alert a i,
a,
a #notification-cart .notification__close i,
a .icon,
a .notification--alert i {
color: #0a152f;
}
#notification-cart .notification__close .link--text i,
.link--text,
.link--text #notification-cart .notification__close i,
.link--text .icon,
.link--text .notification--alert i,
.notification--alert .link--text i {
color: #636363;
}
.text,
p {
margin: 0 0 20px;
}
.text--inverted {
color: #fff;
}
blockquote {
margin: 0;
padding-left: 20px;
border-left: 4px solid #e5e5e5;
}
figcaption {
color: #ddd;
font-size: 13px;
}
svg {
pointer-events: none;
}
@keyframes tooltipFixed__active {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
:root {
--font-base: Inter, Helvetica Neue, Helvetica, Arial, sans-serif;
--font-title: Degular, Inter, Helvetica Neue, Helvetica, Arial, sans-serif;
--non-latin-font: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.box-container {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
width: 100%;
gap: 10px;
}
.box__inner {
position: relative;
}
.box {
min-width: 315px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.box a {
display: block;
border: 1px solid #d8d8d8;
position: relative;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
}
.box a:hover {
border-color: #a5a5a5;
}
.box .box__icons-number {
font-size: 12px;
color: #777;
text-transform: uppercase;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.box .box__icons-number {
display: none;
}
}
.box .badge-license {
position: absolute;
z-index: 1;
bottom: 13px;
left: 12px;
}
.box .badge-license i:before {
width: 14px;
height: 14px;
}
@media screen and (max-width: 480px) {
.box .badge-license {
bottom: 9px;
}
}
.box .img-holder {
overflow: hidden;
}
.box .img-holder img {
display: block;
margin: auto;
height: auto;
}
.box footer {
padding: 0 12px;
position: relative;
color: #121212;
height: 44px;
line-height: 44px;
background: #fff;
font-size: 14px;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.box footer {
height: 34px;
line-height: 34px;
}
}
.box footer .avatar {
width: 32px;
height: 32px;
}
@media screen and (max-width: 480px) {
.box footer .avatar {
width: 22px;
height: 22px;
}
}
.box footer .name {
color: #121212;
font-size: 13px;
}
.box .name {
text-transform: capitalize;
}
.box.box--category .img-holder {
height: auto;
padding-bottom: 0;
}
.box.box-premium footer .name {
margin-left: 20px;
}
.box.box--bookmark .box__inner {
background-color: #fff;
border: 1px solid #c8c8c8;
}
.box.box--bookmark a {
border: none;
display: initial;
}
.box.box--bookmark footer {
color: #777;
height: auto;
line-height: normal;
}
.box.box--bookmark footer strong {
font-size: 18px;
color: #121212;
}
.box.box--bookmark footer a {
color: #424242;
font-weight: 600;
}
@media screen and (max-width: 768px) {
.box {
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
float: left;
width: calc(50% - 5px);
min-width: 0;
}
.box .badge {
display: none;
}
}
@media screen and (max-width: 480px) {
.box .img-holder {
max-width: 150px;
margin: auto;
}
}
@media screen and (max-width: 640px) {
.box--author {
min-width: 100%;
padding: 5px 0;
}
}
.box--author a .box--author-pt1 {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px;
}
.box--author a .box--author-pt1 .author-img {
max-width: inherit;
width: 54px;
height: auto;
}
.box--author a .box--author-pt1 .author-img img,
.box--author a .box--author-pt1 .author-img source {
max-width: inherit;
width: 100%;
height: auto;
border-radius: 100%;
}
.box--author a .box--author-pt1 .author-img img {
display: block;
}
.box--author a .box--author-pt1 .author-info {
flex: 1;
margin-left: 15px;
overflow: hidden;
}
.box--author a .box--author-pt1 .author-info--name {
font-size: 13px;
font-weight: 600;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #424242;
}
.box--author a .box--author-pt1 .author-info--icons {
font-size: 12px;
margin: 0;
color: #777;
}
.box--author a .box--author-pt1 .bj-button {
min-width: 81px;
}
.box--author a .box--author-pt2 {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
@media only screen and (max-width: 320px) {
.box--author a .box--author-pt2 {
justify-content: center;
}
}
.box--author a .box--author-pt2 .sprite {
min-width: 100px;
padding: 0 10px;
}
@media only screen and (max-width: 320px) {
.box--author a .box--author-pt2 .sprite:last-child {
display: none;
}
}
.box--author a .box--author-pt2 .sprite .img-wrapper {
overflow: hidden;
position: relative;
}
.box--author a .box--author-pt2 .sprite .img-wrapper:before {
display: block;
padding: 0 0 94%;
content: '';
}
.box--author a .box--author-pt2 .sprite img {
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 100%;
max-width: inherit;
}
.box--author a .box--author-pt2 .sprite.empty .img-wrapper:before {
background: #f0f0f0;
border-radius: 2px;
}
.modal-essentials {
z-index: 101;
}
.modal-essentials .modal__container {
max-width: 640px;
}
.modal-essentials .modal__container.extra {
max-width: 560px;
}
.modal-essentials__header {
background-color: #eb644c;
color: #fff;
}
.modal-essentials__headerv2 button,
.modal-essentials__headerv2 h6,
.modal-essentials__headerv2 i {
color: #eb644c;
}
.modal-essentials__content,
.modal-essentials__headerv2 i.icon--cross {
color: #0a152f;
}
.modal-essentials__content h6,
.modal-essentials__content h6 span,
.modal-essentials__content i {
color: #eb644c;
}
.modal-essentials__content a {
line-height: 1.2;
}
.modal-essentials__content a.link-contact-unpaid-teams {
color: #3b9e62;
}
.modal-essentials .modal-essentials__payment-step i.icon--spinner {
width: 100%;
}
.modal-essentials .modal-essentials__payment-step i.icon--spinner:after {
animation: rotate 0.6s linear infinite;
display: block !important;
overflow: hidden;
opacity: 1;
width: 24px;
height: 24px;
margin: 4px auto;
border-radius: 50%;
border: 2px solid hsla(0, 0%, 100%, 0.3);
border-top-color: #fff;
box-sizing: border-box;
content: '';
position: relative;
top: -6px;
}
.modal-essentials .modal-essentials__payment-step i.icon--spinner:before {
display: none;
}
.modal-essentials .countdown {
color: #0a152f;
margin-bottom: 10px;
}
.modal-essentials .countdown__description {
display: none;
}
header > #essentials button {
background-color: #eb644c;
}
header > #essentials a.my-subscription {
background-color: #2955bb;
}
header > #essentials .close-being-processed {
background-color: transparent;
}
header > #essentials .close-being-processed i:before {
color: #fff;
}
#footer {
background-color: #0a152f;
color: #9c9c9c;
padding: 50px 0 0;
font-size: 13px;
margin: 0;
border: none;
}
#footer #ot-sdk-btn,
#footer a:not(.btn):not(.bj-button) {
color: #fff;
}
#footer #ot-sdk-btn {
text-align: left;
border: none;
background: none;
font-size: 13px;
vertical-align: inherit;
margin: 0;
padding: 0;
}
#footer .footer__column {
width: 20%;
}
#footer .footer__column ul {
margin-bottom: 10px;
}
#footer .footer__column ul li {
margin-bottom: 5px;
vertical-align: top;
}
#footer .footer__column input {
display: none;
appearance: none;
-webkit-appearance: none;
}
#footer .footer__column.stickers {
margin-bottom: 30px;
}
#footer .footer__title label {
color: #fff;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 5px;
display: block;
}
#footer .footer__title label i {
color: #fff;
transform: rotate(90deg);
}
#footer .footer__legal a {
color: #9c9c9c;
}
#footer .share {
margin-bottom: 20px;
}
#footer .share li {
float: none;
display: inline-block;
}
#footer .share li a:not(.btn):not(.bj-button) {
color: #fff;
border-radius: 3px;
width: 34px;
height: 34px;
line-height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .copyright {
padding: 20px 0;
border-top: 1px solid #424242;
text-align: center;
margin-top: 20px;
}
#footer .language-selector .popover-button {
color: #fff;
}
#footer .language-selector .popover-button i {
color: #fff !important;
}
#footer .language-selector .popover-content {
width: 160px;
padding: 0;
}
#footer .language-selector .popover-content:after,
#footer .language-selector .popover-content:before {
top: 100%;
right: 15px;
}
#footer .language-selector ul {
margin: 0;
}
#footer .language-selector a:not(.btn):not(.bj-button) {
display: block;
padding: 5px;
color: #9c9c9c;
}
#footer .language-selector a:not(.btn):not(.bj-button):hover {
background-color: #f0f0f0;
}
#footer .footer__social {
text-align: right;
}
#footer .footer__projects {
background-color: rgba(66, 66, 66, 0.5);
padding: 20px 10px;
}
#footer .footer__projects strong {
color: #777;
}
#footer .footer__projects ul {
float: right;
font-weight: 700;
margin: 0;
}
#footer .footer__projects ul li {
display: inline-block;
margin-left: 20px;
}
#footer .footer__projects ul a {
font-weight: 700;
}
@media screen and (max-width: 992px) {
#footer .footer__column {
width: 33.333%;
}
#footer .footer__social {
text-align: left;
}
}
@media screen and (max-width: 640px) {
#footer {
padding: 30px 0 0;
}
#footer .footer__column {
width: 100%;
}
#footer .footer__column ul:not(.share) {
display: none;
}
#footer .footer__column input:checked + ul {
display: block;
margin-bottom: 30px;
}
#footer .footer__column ul li {
margin-bottom: 10px;
}
#footer .footer__column ul.share li {
margin: 0 5px 10px;
}
#footer .footer__column.stickers {
margin-bottom: 0;
}
#footer .footer__top a {
width: 100%;
text-align: center;
margin: 0 auto 10px;
max-width: 300px;
line-height: 1.2;
}
#footer .footer__top a.logo-flaticon {
margin-bottom: 20px;
}
#footer .footer__buttons {
margin: 0;
width: 100%;
}
#footer .footer__legal,
#footer .footer__social {
text-align: center;
}
#footer .copyright .countdown ul,
#footer .copyright .groups__item,
#footer .copyright .landing--register .separator,
#footer .copyright .profile-login .group,
#footer .copyright .row,
.countdown #footer .copyright ul,
.landing--register #footer .copyright .separator,
.profile-login #footer .copyright .group {
display: block;
text-align: center;
}
#footer .copyright .popover {
margin-top: 20px;
width: 100%;
}
#footer .copyright .popover button,
#footer .copyright .popover div {
width: 100%;
max-width: 300px;
}
#footer .footer__projects {
text-align: center;
}
#footer .footer__projects ul {
float: none;
margin-top: 20px;
}
#footer .footer__projects ul li:first-child {
margin-left: 0;
}
}
@media (max-width: 1312px) {
.collections-visible #footer .footer__column {
width: 33.333%;
}
.collections-visible #footer .footer__social {
text-align: left;
}
}
#header {
background: none;
margin: 0;
border: none;
padding: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 14;
width: 100%;
}
.header--menu {
height: 54px;
background-color: #0a152f;
padding: 0 20px;
}
.header--menu nav {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 13px;
padding: 0 20px;
}
.header--menu nav a {
font-weight: 600;
color: #d8d8d8;
}
.header--menu nav a:hover {
color: #f0f0f0;
}
.header--menu nav a.text__state--yellow {
color: #feb602;
}
.header--menu nav .uicons__header-link .badge {
color: #fff;
}
.header--menu__login {
min-width: 50px;
}
.header--menu__login .notification-center-menu-trigger {
position: relative;
}
.header--menu__login .notification-center-menu-trigger button:active,
.header--menu__login .notification-center-menu-trigger button:focus,
.header--menu__login .notification-center-menu-trigger button:hover {
text-decoration: none;
}
.header--menu__login .notification-center-menu-trigger i {
width: 54px;
line-height: 38px;
text-align: center;
}
.header--menu__login .notification-center-menu-trigger .badge {
position: absolute;
top: 0;
color: #fff;
height: 16px;
min-width: 16px;
line-height: 16px;
}
.header--menu__login #notification-center-menu-side {
position: fixed;
bottom: 0;
top: 54px;
right: 0;
border-top: 0;
margin: 0;
padding: 0;
z-index: 11;
list-style-type: none;
width: 100%;
max-width: 392px;
background: #fff;
border-radius: 10px 0 0 10px;
color: #424242;
overflow: hidden;
transition:
all 0.25s ease 0.3s,
visibility 0.25s linear 0.25s;
transform: translateX(100%);
display: flex;
flex-direction: column;
z-index: 75;
}
.header--menu__login #notification-center-menu-side.active {
visibility: visible;
transition-delay: 0.3s;
transform: translateX(0);
opacity: 1;
right: 0;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__title-container {
background: #f0f0f0;
padding: 16px;
font-weight: 600;
line-height: 24px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__title-container
i {
cursor: pointer;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__promo {
margin: 16px;
border: 1px solid #e5e5e5;
border-radius: 10px;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__promo
.notification-image {
background-image: url(../images/06dc09d23a6900f8cb4e54f46254e4d9.png);
height: 114px;
background-size: cover;
background-position: 100%;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__promo
a {
padding: 16px;
display: block;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__empty {
margin: 16px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__empty
.empty-notification-icon-container {
background: rgba(43, 196, 138, 0.5);
padding: 15px;
font-size: 24px;
border-radius: 10px;
margin: 20px;
}
.header--menu__login
#notification-center-menu-side
.notification-center-menu-side__empty
.empty-notification-icon-container
i:before {
color: #fff;
}
.header--menu__login #overlay-notifications {
display: none;
}
.header--menu__login #overlay-notifications.active {
display: block;
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.25);
left: 0;
z-index: 70;
top: 0;
}
.header--menu__login #gr_not-connected .login-register-buttons-container {
display: none;
}
.header--menu__login #gr_not-connected .login-register-user-button {
display: block;
}
@media screen and (min-width: 1400px) {
.header--menu__login #gr_not-connected .login-register-buttons-container {
display: flex;
}
.header--menu__login #gr_not-connected .login-register-user-button {
display: none;
}
}
.header--search {
box-shadow: 0 0 0 1px #d8d8d8;
background-color: #fff;
}
.header--search__inner {
padding: 10px 20px;
}
.header--search__inner .bj-button {
box-shadow: inset 0 0 0 2px #d8d8d8;
color: #424242;
box-shadow: none;
}
.header--search__inner .bj-button:focus,
.header--search__inner .bj-button:hover {
box-shadow: none;
color: #424242;
}
.header--search__inner .bj-button#button-filters,
.header--search__inner .bj-button#button-filters:focus,
.header--search__inner .bj-button#button-filters:hover {
color: #424242 !important;
box-shadow: none !important;
}
.header--search__inner .fake-search .popover .popover-content {
border: none;
color: #424242;
box-shadow:
0 2px 8px rgba(66, 66, 66, 0.06),
0 15px 30px rgba(66, 66, 66, 0.1);
padding: 0 10px;
}
.header--search__inner .fake-search .popover .popover-content hr {
width: 100%;
position: absolute;
left: 0;
}
.header--search__inner .fake-search .popover .popover-content .switch {
line-height: 44px;
}
.header--search__inner .fake-search .popover .popover-content.stickers {
min-width: 185px;
}
.header--search__inner .header--search__filters.checkbox {
padding: 7px;
}
#notification-cart
.notification__close
.header--search__inner
.header--search__filters.checkbox
i,
.header--search__inner
.header--search__filters.checkbox
#notification-cart
.notification__close
i,
.header--search__inner .header--search__filters.checkbox .icon,
.header--search__inner .header--search__filters.checkbox .notification--alert i,
.notification--alert .header--search__inner .header--search__filters.checkbox i {
padding: 0;
color: #424242;
}
@media screen and (max-width: 992px) {
.header--search__inner {
padding: 10px;
}
}
.header--search .logo {
display: none;
}
.header--search .radio-group {
font-size: 13px;
line-height: 1.6;
margin: 10px 0;
}
.header--search .radio-group .fake-radio:before {
width: 18px;
height: 18px;
}
.header--search .radio-group input[type='radio']:checked + label.fake-radio:before {
box-shadow: inset 0 0 0 4px #3b9e62;
}
.header--search .checkbox-group {
font-size: 13px;
}
.header--search .checkbox-group .fake-checkbox:before {
width: 18px;
height: 18px;
}
.header--search
.checkbox-group
input[type='checkbox']:checked
+ label.fake-checkbox:after {
width: 18px;
height: 18px;
line-height: 18px;
}
.header .popover-tools .popover-button {
cursor: pointer;
font-weight: 600;
color: #d8d8d8;
}
.header .popover-tools .popover-content {
max-width: 620px;
min-width: 570px;
padding: 20px 30px;
z-index: 5;
}
.header .popover-tools .popover-content:before {
left: 1.8em;
}
.header .popover-tools .popover-content:after {
left: 1.7em;
}
@media screen and (max-width: 992px) {
.header .popover-tools .popover-content {
padding: 10px 20px 20px 36px !important;
max-width: inherit;
min-width: inherit;
}
}
.header .popover-tools .popover-content .popover-tools-box {
margin-right: 30px;
}
.header .popover-tools .popover-content .popover-tools-box:last-child {
margin-right: 0;
max-width: 280px;
flex: 1;
}
.header .popover-tools .popover-content .popover-tools-box .menu-tools-link {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.header .popover-tools .popover-content .popover-tools-box .menu-tools-link:last-of-type {
margin-bottom: 0;
}
.header
.popover-tools
.popover-content
.popover-tools-box
.menu-tools-link:hover
span:first-child,
.header
.popover-tools
.popover-content
.popover-tools-box
.menu-tools-link:hover
span:last-child {
color: #121212;
}
.header
.popover-tools
.popover-content
.popover-tools-box
.menu-tools-link
span:first-child {
color: #424242;
font-weight: 600;
}
.header
.popover-tools
.popover-content
.popover-tools-box
.menu-tools-link
span:last-child {
color: #777;
font-weight: 400;
}
@media screen and (max-width: 992px) {
.header .popover-tools .popover-content .popover-tools-box .menu-tools-link span {
font-size: 16px;
}
}
.header .popover-tools .popover-content .popover-tools-box .text__general--heading {
margin-bottom: 15px;
}
.header
.popover-tools
.popover-content
.popover-tools-box
.text__general--heading:nth-of-type(2) {
margin-top: 20px;
}
@media screen and (max-width: 992px) {
.header .popover-tools .popover-content .popover-tools-box .text__general--heading {
margin-bottom: 0;
font-size: 14px;
}
.header
.popover-tools
.popover-content
.popover-tools-box
.text__general--heading:nth-of-type(2) {
margin-top: 10px;
}
}
@media screen and (max-width: 992px) {
.header .popover-tools .popover-content .popover-tools-box .link-api {
display: none;
}
}
.header #gr_user_menu #gr_connected.active .popover-user .popover-container:before {
border-top: unset;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.header .popover {
position: relative;
margin-right: 10px;
}
.header .popover.type-selector {
margin-right: 20px;
}
@media screen and (max-width: 640px) {
.header .popover.type-selector {
margin-right: 0;
}
}
.header .popover .popover-content {
z-index: 6;
}
@media (max-width: 1325px) {
.header .popover--more-btn .popover-content {
left: auto;
right: 0;
}
.header .popover--more-btn .popover-content:after,
.header .popover--more-btn .popover-content:before {
left: auto;
right: 1.8em;
}
}
@media screen and (min-width: 992px) {
.header .popover--more-btn:hover .popover-bridge {
background: transparent;
position: absolute;
height: 35px;
width: 100%;
z-index: 6;
}
.header .popover--more-btn:hover .popover-bridge .popover-content,
.header .popover--more-btn:hover .popover-bridge:hover .popover-content {
display: block;
margin-top: -30px;
}
}
.header .popover--lang .popover-button {
background: none;
}
.header .popover--lang .popover-button :not(img) {
display: none;
}
.header .popover--lang .popover-button.active,
.header .popover--lang .popover-button:hover {
background-color: #142a5e;
}
.header .popover--lang .popover-button img {
width: 16px;
height: auto;
}
.header .popover--lang .popover-content {
padding: 0;
width: 100%;
min-width: 110px;
text-align: left;
top: 100%;
border-radius: 3px;
}
.header .popover--lang .popover-content:after,
.header .popover--lang .popover-content:before {
display: none;
}
.header .popover--lang .popover-content a {
height: 36px;
line-height: 36px;
padding: 0 20px;
display: block;
}
.header .popover--lang .popover-content a:hover {
background-color: #f0f0f0;
}
.header .popover--lang .popover-content a.active {
font-weight: 700;
}
.header .avatar {
position: relative;
width: 36px;
height: 36px;
}
.header .avatar .premium {
position: absolute;
top: -5px;
left: -10px;
display: block;
width: 20px;
height: 20px;
border: 2px solid #feb602;
border-radius: 50%;
background-color: rgba(10, 21, 47, 0.3);
font-size: 12px;
font-weight: 400;
line-height: 14px;
text-align: center;
}
.header .avatar .premium:before {
width: 12px;
}
.header .bj-button--mobile {
cursor: pointer;
}
.header .bj-button--mobile i {
width: 54px;
text-align: center;
}
.header #main-menu__toggle {
display: none;
appearance: none;
-webkit-appearance: none;
}
@media screen and (min-width: 992px) {
.header .scrollable--menu {
overflow: visible;
}
}
@media screen and (max-width: 992px) {
.header--menu {
padding: 0;
}
.header--menu .logo {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
width: 150px;
margin-left: auto;
margin-right: auto;
}
.header--menu nav {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
font-size: 17px;
padding: 0;
}
.header--menu nav a {
width: 100%;
display: block;
margin: 0;
color: #424242;
height: 44px;
line-height: 44px;
padding: 0 30px;
}
.header--menu nav a:hover {
color: #424242;
}
.header--menu nav .link-pricing a {
white-space: nowrap;
}
.header--menu nav .bj-button {
height: 54px;
line-height: 20px;
}
.header--menu nav .bj-button--green,
.header--menu nav .bj-button--green:hover {
color: #fff;
}
.header--menu nav .bj-button--gray {
color: #121212;
box-shadow: inset 0 0 0 2px #e5e5e5;
}
.header--menu__login {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
-webkit-order: 2;
-moz-order: 2;
order: 2;
-ms-flex-order: 2;
margin-left: 0 !important;
}
.header input[type='checkbox']:checked + .main-menu {
display: block;
}
.header .bg-toggle-menu {
display: block;
position: fixed;
top: 0;
left: 320px;
width: calc(100% - 320px);
height: 100%;
background-color: rgba(20, 42, 94, 0.9);
z-index: 5;
}
.header .main-menu {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 100%;
background-color: #fff;
z-index: 16;
display: none;
}
.header .main-menu .popover,
.header .main-menu .popover * {
width: 100%;
}
.header .main-menu .popover-button {
width: 100%;
display: block;
margin: 0;
color: #424242;
height: 44px;
line-height: 44px;
padding: 0 30px;
text-align: left;
}
.header .main-menu .popover-button i {
position: absolute;
top: 0;
height: 100%;
line-height: 44px;
text-align: right;
color: #424242;
right: 30px;
}
.header .main-menu .popover-content {
position: relative;
width: 100%;
animation: none;
top: 0;
border-radius: 0;
background-color: #f7f7f7;
border: none;
box-shadow: none;
padding: 20px 30px;
}
.header .main-menu .popover-content:after,
.header .main-menu .popover-content:before {
display: none;
}
.header .main-menu .popover-content li {
margin: 0 0 15px;
}
.header .main-menu .popover-content p {
height: 44px;
line-height: 44px;
margin: 0;
}
.header .main-menu .popover-content a {
height: auto;
line-height: normal;
padding: 0;
}
.countdown .header .main-menu .popover-content ul,
.header .main-menu .popover-content .countdown ul,
.header .main-menu .popover-content .groups__item,
.header .main-menu .popover-content .landing--register .separator,
.header .main-menu .popover-content .profile-login .group,
.header .main-menu .popover-content .row,
.landing--register .header .main-menu .popover-content .separator,
.profile-login .header .main-menu .popover-content .group {
display: block;
}
.header .main-menu .popover-content .img-holder {
display: none;
}
.header .main-menu .popover--lang,
.header .main-menu .popover--lang .popover-container {
width: 100%;
}
.header .main-menu .popover--lang .popover-button {
width: 100%;
font-size: 17px;
margin-top: 10px;
}
.header .main-menu .popover--lang .popover-button :not(img) {
display: block;
}
.header .main-menu .popover--lang .popover-button.active,
.header .main-menu .popover--lang .popover-button:hover {
background: none;
}
.header .main-menu .popover--lang .popover-content a {
padding-left: 26px;
}
.header .main-menu .popover--lang img {
box-shadow: 0 0 0 1px #d8d8d8;
}
.header .menu-holder {
margin-bottom: 100px;
}
.header .menu-holder li {
width: 100%;
}
.header .menu-holder .menu--mobile__lv2 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
.header .menu-holder .menu--mobile__lv3 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
-webkit-order: 2;
-moz-order: 2;
order: 2;
-ms-flex-order: 2;
}
.header .language-selector {
margin: 10px 0 0;
}
.header .language-selector:before {
content: '';
border-top: 1px solid #e5e5e5;
display: block;
width: calc(100% - 60px);
left: 30px;
position: relative;
}
.header--search .bj-button .button--text {
display: none;
}
.header--search .bj-button .badge {
position: absolute;
top: -5px;
right: -5px;
margin: 0 !important;
}
.header--search .popover.popover-filters {
margin-right: 0;
}
.header--search .popover.popover-filters .popover-button {
padding-left: 0;
}
.header--search .popover.popover-filters .popover-button .badge {
right: 5px;
}
.header--search .popover.popover-filters .popover-button.active,
.header--search .popover.popover-filters .popover-button:focus {
background: none;
box-shadow: none;
}
}
#collections-toggle {
padding: 0 10px;
margin: 0 0 0 10px;
transition: none;
}
#collections-toggle .button--text {
margin: 0 5px 0 0;
}
#collections-toggle .badge {
background-color: #d8d8d8;
color: #121212;
margin: 0 5px 0 0;
}
#collections-toggle.limit-reached .badge {
color: #fff;
background-color: #ff7d6a;
}
#collections-toggle.limit-reached .badge.animate {
-webkit-animation: shake 1s both;
-moz-animation: shake 1s both;
animation: shake 1s both;
}
@media screen and (max-width: 992px) {
#collections-toggle {
padding: 0 0 0 10px;
margin-left: 0;
}
}
.collections-visible #collections-toggle {
display: none;
}
.modal-craft-info .modal__close {
top: 15px;
right: 15px;
}
.modal-craft-info .modal__close .icon--cross {
color: #424242;
font-size: 20px;
}
.modal-craft-info .modal__container {
max-width: 740px;
}
.modal-craft-info .modal__container .content {
padding: 0;
display: flex;
border-radius: 8px;
}
.modal-craft-info__left {
width: 250px;
background: url(../images/5e532a9b703ef88d7d500a6d9b32c452.png);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.modal-craft-info__left img {
mix-blend-mode: multiply;
}
.modal-craft-info__right {
padding: 40px 50px 40px 40px;
}
.modal-craft-info__right h6 {
margin: 0 0 10px;
}
.modal-craft-info__right > p {
color: #424242;
}
.modal-craft-info__right__item {
display: flex;
}
.modal-craft-info__right__item__image {
flex-shrink: 0;
margin-right: 20px;
width: 44px;
}
.modal-craft-info__right__item__image i:before {
width: 44px;
height: 44px;
background: rgba(74, 210, 149, 0.1);
color: #286d34;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.modal-craft-info__right__item__text p:first-child {
color: #424242;
}
.modal-craft-info__right__buttons {
display: flex;
}
.modal-craft-info__right__buttons > a {
width: 50%;
line-height: 1.2;
}
.modal-craft-info__right__buttons > a:first-child {
color: #32864c;
}
@media screen and (max-width: 768px) {
.modal-craft-info {
padding: 0;
}
.modal-craft-info__left {
display: none;
}
.modal-craft-info__right__buttons {
flex-wrap: wrap;
}
.modal-craft-info__right__buttons > a {
width: 100%;
}
.modal-craft-info__right__buttons > a:first-child {
margin-bottom: 20px;
}
}
.modal-attribution-new {
overflow-y: auto;
z-index: 305;
}
.modal-attribution-new .modal__container {
padding: 0;
}
.modal-attribution-new .modal__close {
top: 15px;
right: 15px;
}
.modal-attribution-new .modal__close .icon--cross {
color: #424242;
font-size: 20px;
}
.modal-attribution-new .content {
padding: 0;
}
.modal-attribution-new .content-header {
padding: 30px 20px 0;
text-align: center;
}
.modal-attribution-new .content-header--title {
font-size: 34px;
font-weight: 600;
color: #424242;
}
@media screen and (max-width: 768px) {
.modal-attribution-new .content-header--title {
font-size: 26px;
}
}
.modal-attribution-new .content-header--text {
font-size: 18px;
max-width: 766px;
margin: auto auto 40px;
color: #5b5b5b;
}
@media screen and (max-width: 768px) {
.modal-attribution-new .content-header--text {
font-size: 16px;
}
}
.modal-attribution-new .content-body .accordion2__menu {
width: 100%;
border-bottom: 1px solid #e5e5e5;
overflow-x: auto;
}
.modal-attribution-new .content-body .accordion2__menu .accordion2__menu__box {
display: flex;
max-width: 700px;
margin: auto;
}
.modal-attribution-new .content-body .accordion2__menu--item {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: #777;
margin: 0;
padding: 0 30px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.modal-attribution-new .content-body .accordion2__menu--item.active {
color: #424242;
border-bottom: 1px solid #424242;
}
.modal-attribution-new .content-body .accordion2__container {
padding: 0 20px;
}
.modal-attribution-new .content-body .accordion2__container .accordion2__content {
display: none;
}
.modal-attribution-new .content-body .accordion2__container .accordion2__content p {
font-size: 14px;
text-align: center;
}
.modal-attribution-new .content-body .accordion2__container .accordion2__content p span {
color: #424242;
font-weight: 600;
}
.modal-attribution-new
.content-body
.accordion2__container
.accordion2__content
p:first-of-type {
color: #424242;
font-weight: 600;
margin: 40px 0 20px;
}
.modal-attribution-new
.content-body
.accordion2__container
.accordion2__content
p:nth-of-type(2) {
max-width: 766px;
margin: auto;
}
.modal-attribution-new
.content-body
.accordion2__container
.accordion2__content
.copy-box {
max-width: 768px;
}
.modal-attribution-new .content-body .accordion2__container .accordion2__content.active {
display: block;
}
.modal-attribution-new .social-media-buttons .bj-button {
margin: 5px;
}
@media screen and (max-width: 640px) {
.modal-attribution-new .social-media-buttons .bj-button {
width: 100%;
margin: 5px 0;
}
}
.modal__banner-footer {
padding: 45px 20px;
text-align: center;
color: #fff;
background: url(../images/d798804c3a5b03431c32c95d2d202a4b.png) 50% no-repeat;
background-size: cover;
}
@media screen and (max-width: 768px) {
.modal__banner-footer {
background: #142a5e;
}
}
.modal__banner-footer--title {
font-size: 26px;
font-weight: 600;
}
@media screen and (max-width: 768px) {
.modal__banner-footer--title {
font-size: 22px;
}
}
.modal__banner-footer--text {
font-size: 18px;
max-width: 600px;
margin: auto;
}
@media screen and (max-width: 768px) {
.modal__banner-footer--text {
font-size: 16px;
}
}
.modal__banner-footer--text span {
color: #feb602;
font-weight: 700;
}
.modal__banner-footer--text a {
color: #feb602;
font-weight: 600;
}
.social-media-buttons {
display: flex;
justify-content: center;
margin: 30px 0;
flex-wrap: wrap;
}
.social-media-buttons .bj-button {
margin: 0 5px;
}
.social-media-buttons .bj-button:first-child {
margin-left: 0;
}
.social-media-buttons .bj-button:last-child {
margin-right: 0;
}
.social-media-buttons .bj-button:last-child > span {
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 640px) {
.social-media-buttons .bj-button {
width: 100%;
}
}
.social-media-buttons .attribution__text,
.social-media-buttons .copy__text {
position: absolute;
top: 0;
right: 0;
opacity: 0;
margin-top: -100%;
}
.social-media-buttons .copy__trigger span {
font-size: 14px;
display: none;
}
.social-media-buttons .copy__trigger span.active {
display: block;
}
.copy-box {
display: flex;
align-items: center;
margin: 30px auto;
}
@media screen and (max-width: 480px) {
.copy-box {
flex-direction: column;
}
}
.copy-box .copy__text {
position: absolute;
top: 0;
right: 0;
opacity: 0;
margin-top: -100%;
}
.copy-box .attribution__text {
width: 100%;
height: 44px;
line-height: 44px;
margin-bottom: 0;
margin-right: 10px;
padding: 0 10px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #9c9c9c;
font-size: 14px;
}
@media screen and (max-width: 480px) {
.copy-box .attribution__text {
margin-bottom: 10px;
margin-right: 0;
}
}
@media screen and (max-width: 480px) {
.copy-box .copy__trigger {
width: 100%;
}
}
.copy-box .copy__trigger span {
display: none;
}
.copy-box .copy__trigger span.active {
display: block;
}
#modal-attribution.modal-attribution-detail.active {
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
padding: 20px;
background-color: rgba(10, 21, 47, 0.85);
flex-direction: column;
display: flex;
justify-content: center;
}
#modal-attribution.modal-attribution-detail.active .modal-attribution__wrapper {
flex-direction: column;
justify-content: center;
flex: 1;
height: 100%;
display: flex;
}
#modal-attribution.modal-attribution-detail.active .attribution :not(span) {
color: #fff;
}
#modal-attribution.modal-attribution-detail.active .attribution h6 {
line-height: 1.5;
}
#modal-attribution.modal-attribution-detail.active .attribution > .groups__item,
#modal-attribution.modal-attribution-detail.active .attribution > .row,
#modal-attribution.modal-attribution-detail.active .countdown .attribution > ul,
#modal-attribution.modal-attribution-detail.active
.landing--register
.attribution
> .separator,
#modal-attribution.modal-attribution-detail.active .profile-login .attribution > .group,
.countdown #modal-attribution.modal-attribution-detail.active .attribution > ul,
.landing--register
#modal-attribution.modal-attribution-detail.active
.attribution
> .separator,
.profile-login #modal-attribution.modal-attribution-detail.active .attribution > .group {
max-width: max-content;
margin: 0 auto;
}
#modal-attribution.modal-attribution-detail.active
.attribution
.social-media-buttons
button:last-child {
flex-grow: 3;
}
#modal-attribution.modal-attribution-detail.active .modal__container {
background-color: transparent;
margin: 0;
max-width: unset;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
flex: 1;
}
#modal-attribution.modal-attribution-detail.active .modal__container i.icon--cross {
color: #fff;
}
@media screen and (max-width: 1400px) {
#modal-attribution.modal-attribution-detail.active .attribution {
padding-top: 30px;
text-align: center;
}
#modal-attribution.modal-attribution-detail.active .attribution .attribution__video,
#modal-attribution.modal-attribution-detail.active .attribution h6 {
display: none;
}
#modal-attribution.modal-attribution-detail.active
.attribution
.download-problems-box {
justify-content: center;
}
}
@media screen and (max-width: 992px) {
#modal-attribution.modal-attribution-detail.active .modal__container {
vertical-align: top;
}
#modal-attribution.modal-attribution-detail.active
.modal__container
.attribution
.content {
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
#modal-attribution.modal-attribution-detail.active
.attribution
.social-media-buttons
.bj-button {
margin: 0 5px;
}
#modal-attribution.modal-attribution-detail.active
.attribution
.social-media-buttons
button:last-child {
flex-grow: 1;
}
}
@media screen and (max-width: 640px) {
#modal-attribution.modal-attribution-detail.active
.attribution
.social-media-buttons {
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
}
}
.fi-modal.modal-base64 .modal-fade-screen {
background-color: rgba(10, 21, 47, 0.5);
padding-top: 0;
overflow: auto;
}
.fi-modal.modal-base64 .modal-fade-screen .modal-inner {
padding: 0;
box-shadow: 0 0 1px #121212;
text-align: center;
width: 100%;
max-width: 960px;
max-height: none;
}
.fi-modal.modal-base64 textarea {
color: #777;
padding: 0;
word-break: break-all;
overflow: hidden;
background: transparent;
border: none;
font-size: 13px;
line-height: 44px;
}
.fi-modal.modal-base64 .modal__banner-footer p {
color: #fff;
}
@media screen and (min-width: 768px) {
.fi-modal.modal-base64 .modal-state:checked + .modal-fade-screen .modal-inner {
top: 50%;
transform: scale(1) translateY(-50%);
}
}
.fi-modal .modal-base64__content {
padding: 50px;
}
@media screen and (max-width: 768px) {
.fi-modal .modal-base64__content {
padding: 20px;
}
}
.modal-confirm-copy-content .modal__container .content {
padding: 50px;
}
.modal-confirm-copy-content .modal-actions {
display: flex;
justify-content: space-between;
}
.modal-confirm-copy-content .progress-bar__title {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.modal-confirm-copy-content .completed.progress-bar__title,
.modal-confirm-copy-content .completed.progress-bar__title i:before {
color: #44b678;
}
.modal-confirm-copy-content .completed.progress-bar__value {
width: 100%;
background-color: #44b678;
animation-name: width;
animation-duration: 0.5s;
}
@keyframes width {
0% {
width: 0;
}
to {
width: 100%;
}
}
@media screen and (max-width: 992px) {
.modal-confirm-copy-content .modal-actions {
flex-wrap: wrap;
justify-content: center;
}
.modal-confirm-copy-content .modal-actions .button__cancel {
margin-bottom: 10px;
}
.modal-confirm-copy-content .modal-actions #confirm-download-button {
width: 100%;
}
}
.fi-modal.modal-download .modal-state:checked + .modal-fade-screen .modal-inner {
top: 0;
transform: none;
}
.fi-modal.modal-download .modal-fade-screen {
background-color: rgba(10, 21, 47, 0.5);
padding-top: 0;
overflow: auto;
}
.fi-modal.modal-download .modal-inner {
width: 100%;
padding: 0;
text-align: center;
max-height: none;
border-radius: 0;
}
.fi-modal.modal-download header {
padding: 20px 20px 0;
}
.fi-modal.modal-download header p {
margin: 0 10px 10px;
}
.fi-modal.modal-download header p span {
vertical-align: middle;
}
.fi-modal.modal-download header .icon-holder {
display: inline-block;
}
.fi-modal.modal-download header .icon-holder img {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
.fi-modal.modal-download header .author img {
width: 30px;
height: 30px;
display: inline-block;
vertical-align: middle;
}
.fi-modal.modal-download .modal-body {
padding: 20px 0;
}
.fi-modal.modal-download .modal-body.nopremium .column-free {
width: 100%;
}
.fi-modal.modal-download .modal-body.nopremium .column-premium {
display: none;
}
.fi-modal.modal-download .column {
width: 100%;
padding: 0 20px;
}
.fi-modal.modal-download .column-premium {
border-right: 1px solid #f0f0f0;
}
.fi-modal.modal-download .btn {
padding: 20px;
margin-bottom: 20px;
width: 100%;
color: #fff;
display: inline-block;
}
.fi-modal.modal-download .btn b {
font-size: 24px;
line-height: 1.6;
}
.fi-modal.modal-download .btn p {
margin: 0;
color: #fff;
white-space: normal;
line-height: 1.6;
}
.fi-modal.modal-download .btn span {
vertical-align: initial;
}
.fi-modal.modal-download ul li {
margin-bottom: 10px;
}
.fi-modal.modal-download ul li:last-child {
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.fi-modal.modal-download ul li:last-child {
margin-bottom: 0;
}
}
.fi-modal.modal-download .hide-phone--xs {
display: none;
}
.fi-modal.modal-download.modal-collection-pack
.modal-fade-screen
.modal-inner
.modal-body {
height: auto;
}
.fi-modal.modal-download.modal-collection-pack
.modal-fade-screen
.modal-inner
.modal-body
.column-free
p:empty,
.fi-modal.modal-download.modal-collection-pack
.modal-fade-screen
.modal-inner
.modal-body
.column-premium
p:empty {
display: none;
}
@media (min-width: 375px) {
.fi-modal.modal-download .show-phone--xs {
display: none;
}
.fi-modal.modal-download .hide-phone--xs {
display: block;
}
.fi-modal.modal-download .modal-inner {
max-width: 600px;
}
}
@media screen and (min-width: 768px) {
.fi-modal.modal-download .modal-state:checked + .modal-fade-screen .modal-inner {
top: 50%;
transform: scale(1) translateY(-50%);
}
.fi-modal.modal-download header p {
display: inline-block;
vertical-align: middle;
}
.fi-modal.modal-download .modal-inner {
max-width: 960px;
border-radius: 3px;
}
.fi-modal.modal-download .column {
width: 50%;
}
}
.modal-funnel-premium {
background: none;
pointer-events: none;
z-index: 999;
}
.modal-funnel-premium .modal__container {
width: 100%;
max-width: 730px;
vertical-align: middle;
pointer-events: all;
margin-bottom: -100%;
}
@media screen and (max-width: 768px) {
.modal-funnel-premium .modal__container {
max-width: 412px;
}
}
.modal-funnel-premium .modal__container .content {
border-radius: 5px;
box-shadow: 0 0 60px rgba(14, 42, 71, 0.25);
}
.countdown .modal-funnel-premium .modal__container ul,
.landing--register .modal-funnel-premium .modal__container .separator,
.modal-funnel-premium .modal__container .countdown ul,
.modal-funnel-premium .modal__container .groups__item,
.modal-funnel-premium .modal__container .landing--register .separator,
.modal-funnel-premium .modal__container .profile-login .group,
.modal-funnel-premium .modal__container .row,
.profile-login .modal-funnel-premium .modal__container .group {
height: 140px;
align-items: center;
justify-content: flex-end;
padding: 0 40px !important;
margin: 0 !important;
}
@media screen and (max-width: 768px) {
.countdown .modal-funnel-premium .modal__container ul,
.landing--register .modal-funnel-premium .modal__container .separator,
.modal-funnel-premium .modal__container .countdown ul,
.modal-funnel-premium .modal__container .groups__item,
.modal-funnel-premium .modal__container .landing--register .separator,
.modal-funnel-premium .modal__container .profile-login .group,
.modal-funnel-premium .modal__container .row,
.profile-login .modal-funnel-premium .modal__container .group {
height: inherit;
flex-direction: column;
justify-content: center;
padding: 30px !important;
}
}
.countdown .modal-funnel-premium .modal__container ul .img,
.landing--register .modal-funnel-premium .modal__container .separator .img,
.modal-funnel-premium .modal__container .countdown ul .img,
.modal-funnel-premium .modal__container .groups__item .img,
.modal-funnel-premium .modal__container .landing--register .separator .img,
.modal-funnel-premium .modal__container .profile-login .group .img,
.modal-funnel-premium .modal__container .row .img,
.profile-login .modal-funnel-premium .modal__container .group .img {
display: flex;
align-items: center;
width: 70px;
height: 70px;
margin: 0 40px 0 0;
position: relative;
}
@media screen and (max-width: 768px) {
.countdown .modal-funnel-premium .modal__container ul .img,
.landing--register .modal-funnel-premium .modal__container .separator .img,
.modal-funnel-premium .modal__container .countdown ul .img,
.modal-funnel-premium .modal__container .groups__item .img,
.modal-funnel-premium .modal__container .landing--register .separator .img,
.modal-funnel-premium .modal__container .profile-login .group .img,
.modal-funnel-premium .modal__container .row .img,
.profile-login .modal-funnel-premium .modal__container .group .img {
margin: 0 0 40px;
}
}
.countdown .modal-funnel-premium .modal__container ul .img i,
.landing--register .modal-funnel-premium .modal__container .separator .img i,
.modal-funnel-premium .modal__container .countdown ul .img i,
.modal-funnel-premium .modal__container .groups__item .img i,
.modal-funnel-premium .modal__container .landing--register .separator .img i,
.modal-funnel-premium .modal__container .profile-login .group .img i,
.modal-funnel-premium .modal__container .row .img i,
.profile-login .modal-funnel-premium .modal__container .group .img i {
position: absolute;
top: -15px;
left: -15px;
}
@media screen and (max-width: 768px) {
.countdown .modal-funnel-premium .modal__container ul .img i,
.landing--register .modal-funnel-premium .modal__container .separator .img i,
.modal-funnel-premium .modal__container .countdown ul .img i,
.modal-funnel-premium .modal__container .groups__item .img i,
.modal-funnel-premium .modal__container .landing--register .separator .img i,
.modal-funnel-premium .modal__container .profile-login .group .img i,
.modal-funnel-premium .modal__container .row .img i,
.profile-login .modal-funnel-premium .modal__container .group .img i {
top: inherit;
bottom: -30px;
left: 50%;
margin-left: -7px;
}
}
.countdown .modal-funnel-premium .modal__container ul .img img,
.landing--register .modal-funnel-premium .modal__container .separator .img img,
.modal-funnel-premium .modal__container .countdown ul .img img,
.modal-funnel-premium .modal__container .groups__item .img img,
.modal-funnel-premium .modal__container .landing--register .separator .img img,
.modal-funnel-premium .modal__container .profile-login .group .img img,
.modal-funnel-premium .modal__container .row .img img,
.profile-login .modal-funnel-premium .modal__container .group .img img {
width: 100%;
height: auto;
}
.countdown .modal-funnel-premium .modal__container ul .text,
.landing--register .modal-funnel-premium .modal__container .separator .text,
.modal-funnel-premium .modal__container .countdown ul .text,
.modal-funnel-premium .modal__container .groups__item .text,
.modal-funnel-premium .modal__container .landing--register .separator .text,
.modal-funnel-premium .modal__container .profile-login .group .text,
.modal-funnel-premium .modal__container .row .text,
.profile-login .modal-funnel-premium .modal__container .group .text {
flex: 1;
margin: 0;
}
@media screen and (max-width: 768px) {
.countdown .modal-funnel-premium .modal__container ul .text,
.landing--register .modal-funnel-premium .modal__container .separator .text,
.modal-funnel-premium .modal__container .countdown ul .text,
.modal-funnel-premium .modal__container .groups__item .text,
.modal-funnel-premium .modal__container .landing--register .separator .text,
.modal-funnel-premium .modal__container .profile-login .group .text,
.modal-funnel-premium .modal__container .row .text,
.profile-login .modal-funnel-premium .modal__container .group .text {
text-align: center;
}
}
.countdown .modal-funnel-premium .modal__container ul .text__items,
.landing--register .modal-funnel-premium .modal__container .separator .text__items,
.modal-funnel-premium .modal__container .countdown ul .text__items,
.modal-funnel-premium .modal__container .groups__item .text__items,
.modal-funnel-premium .modal__container .landing--register .separator .text__items,
.modal-funnel-premium .modal__container .profile-login .group .text__items,
.modal-funnel-premium .modal__container .row .text__items,
.profile-login .modal-funnel-premium .modal__container .group .text__items {
font-size: 14px;
margin: 0;
}
.countdown .modal-funnel-premium .modal__container ul .text__items:first-child,
.landing--register
.modal-funnel-premium
.modal__container
.separator
.text__items:first-child,
.modal-funnel-premium .modal__container .countdown ul .text__items:first-child,
.modal-funnel-premium .modal__container .groups__item .text__items:first-child,
.modal-funnel-premium
.modal__container
.landing--register
.separator
.text__items:first-child,
.modal-funnel-premium .modal__container .profile-login .group .text__items:first-child,
.modal-funnel-premium .modal__container .row .text__items:first-child,
.profile-login .modal-funnel-premium .modal__container .group .text__items:first-child {
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
}
.countdown .modal-funnel-premium .modal__container ul .modal__close,
.landing--register .modal-funnel-premium .modal__container .separator .modal__close,
.modal-funnel-premium .modal__container .countdown ul .modal__close,
.modal-funnel-premium .modal__container .groups__item .modal__close,
.modal-funnel-premium .modal__container .landing--register .separator .modal__close,
.modal-funnel-premium .modal__container .profile-login .group .modal__close,
.modal-funnel-premium .modal__container .row .modal__close,
.profile-login .modal-funnel-premium .modal__container .group .modal__close {
width: 177px;
height: 44px;
position: static;
padding: 0;
margin: 0 0 0 40px;
}
@media screen and (max-width: 768px) {
.countdown .modal-funnel-premium .modal__container ul .modal__close,
.landing--register .modal-funnel-premium .modal__container .separator .modal__close,
.modal-funnel-premium .modal__container .countdown ul .modal__close,
.modal-funnel-premium .modal__container .groups__item .modal__close,
.modal-funnel-premium .modal__container .landing--register .separator .modal__close,
.modal-funnel-premium .modal__container .profile-login .group .modal__close,
.modal-funnel-premium .modal__container .row .modal__close,
.profile-login .modal-funnel-premium .modal__container .group .modal__close {
margin: 20px 0 0;
}
}
.countdown .modal-funnel-premium .modal__container ul .modal__close__register,
.landing--register
.modal-funnel-premium
.modal__container
.separator
.modal__close__register,
.modal-funnel-premium .modal__container .countdown ul .modal__close__register,
.modal-funnel-premium .modal__container .groups__item .modal__close__register,
.modal-funnel-premium
.modal__container
.landing--register
.separator
.modal__close__register,
.modal-funnel-premium .modal__container .profile-login .group .modal__close__register,
.modal-funnel-premium .modal__container .row .modal__close__register,
.profile-login .modal-funnel-premium .modal__container .group .modal__close__register {
display: block;
padding: 0 10px;
border-radius: 3px;
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 44px;
}
.modal-funnel-premium.active .modal__container.slide-in {
margin-bottom: 0;
animation: slideIn 0.5s;
}
@keyframes slideIn {
0% {
margin-bottom: -100%;
}
to {
margin-bottom: 0;
}
}
.modal-license .list--check li {
position: relative;
margin: 0 0 10px;
display: flex;
}
.modal-license .list--check li i {
line-height: 1.2em;
}
.modal-license__footer {
background-color: #f7f7f7;
padding: 20px 50px;
}
.max-collections {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
overflow: auto;
padding: 0 20px;
display: none;
}
.max-collections.visible {
display: block;
}
.max-collections .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 42, 94, 0.9);
z-index: 100;
}
.max-collections h5 {
max-width: 550px;
}
.max-collections input[name='max-collections__section-trigger'] {
display: none;
appearance: none;
-webkit-appearance: none;
}
.max-collections
input[name='max-collections__section-trigger']:checked
+ .max-collections__wrapper {
transform: translateX(-50%);
}
.max-collections__container {
position: relative;
width: 100%;
max-width: 960px;
height: 650px;
background: #fff;
z-index: 100;
border-radius: 10px;
top: 50%;
margin: -325px auto 20px;
overflow: hidden;
}
.max-collections__wrapper {
width: 200%;
white-space: nowrap;
height: 650px;
transition: transform 0.3s ease-in;
}
.max-collections__step {
height: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
width: 50%;
float: left;
overflow: hidden;
white-space: normal;
}
.max-collections__second-step .max-collections__actions {
border-top: 1px solid #e5e5e5;
}
.max-collections__content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 80px;
}
.max-collections__header {
padding: 30px 80px;
}
.countdown .max-collections__header ul,
.landing--register .max-collections__header .separator,
.max-collections__header .countdown ul,
.max-collections__header .groups__item,
.max-collections__header .landing--register .separator,
.max-collections__header .profile-login .group,
.max-collections__header .row,
.profile-login .max-collections__header .group {
position: relative;
}
.max-collections__header .link--arrow {
color: #777;
position: absolute;
top: 50%;
left: 0;
margin: 0;
transform: translateY(-50%);
z-index: 1;
}
.max-collections__header .link--arrow:hover,
.max-collections__header .link--arrow i {
color: #777;
}
.max-collections__nav {
color: #c8c8c8;
}
.max-collections__actions {
padding: 30px 80px;
}
.max-collections__holder {
border: 1px solid #e5e5e5;
border-radius: 2px;
}
.max-collections__item {
height: 54px;
line-height: 54px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.max-collections__item:last-child {
border: none;
}
.max-collections__item:hover {
background-color: #f7f7f7;
}
.max-collections__item__name {
width: 140px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.max-collections__item__number {
width: 130px;
text-align: center;
}
.max-collections__item .checkbox-group {
line-height: 18px;
width: 18px;
}
.max-collections__item .checkbox-group > i {
color: transparent;
box-shadow: inset 0 0 0 1px #d8d8d8;
border-radius: 2px;
}
.max-collections__item .checkbox-group input[type='checkbox']:checked + i:before {
color: #fff;
background-color: #44b678;
border-radius: 2px;
}
.max-collections__item ul {
height: 32px;
}
.max-collections__item ul li {
display: inline-block;
margin-right: 14px;
}
.max-collections__item img {
width: 32px;
display: block;
}
.max-collections .list {
list-style-type: disc;
padding-left: 20px;
margin-bottom: 30px;
}
.max-collections .list li {
margin-bottom: 10px;
}
.max-collections .discount {
border-radius: 14px;
background-image: linear-gradient(90deg, #142a5e, #353777);
color: #fff;
padding: 30px;
}
.max-collections .discount p {
max-width: 400px;
}
.max-collections label {
cursor: pointer;
}
@media screen and (max-width: 768px) {
.max-collections__header {
padding: 30px 60px;
}
.max-collections__content {
padding: 0 60px;
}
.max-collections__actions {
padding: 30px 60px;
}
}
@media screen and (max-width: 640px) {
.max-collections {
padding: 0;
}
.max-collections__container {
border-radius: 0;
height: 100%;
margin: 0 !important;
top: 0;
}
.max-collections__wrapper {
transition-duration: 0.15s;
height: 100%;
}
.max-collections__header {
padding: 30px 20px;
}
.max-collections__content {
padding: 0 20px;
}
.max-collections__actions {
padding: 10px 20px;
border-top: 1px solid #e5e5e5;
}
.max-collections__item__checkbox {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
-webkit-order: 2;
-moz-order: 2;
order: 2;
-ms-flex-order: 2;
}
.max-collections__item__data {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 27px;
display: block !important;
height: 54px;
}
.max-collections__item__number {
text-align: left;
}
.max-collections__item__icons {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
padding: 0 10px 0 20px;
}
.max-collections__item ul li:nth-child(n + 2) {
display: none;
}
.max-collections h5 {
margin-top: 0;
}
.max-collections .discount {
padding: 20px;
}
.max-collections .discount .font-xl {
font-size: 15px;
margin-bottom: 10px;
}
.max-collections .discount .col {
flex: none;
width: 100%;
}
.max-collections .price-holder {
display: none;
}
.max-collections__second-step .max-collections__actions {
padding: 20px;
}
.max-collections__second-step .max-collections__actions .bj-button {
width: 100%;
margin: 0;
}
.max-collections__second-step .max-collections__actions .bj-button--gray {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
margin: 10px 0 0;
}
}
@media (max-height: 680px) {
.max-collections__container {
top: 0;
margin: 20px auto;
}
}
.modal-palette-not-premium-user .modal__container .content {
border-radius: 16px;
display: flex;
padding: 0;
}
.modal-palette-not-premium-user .modal__container .content .image-box {
width: 50%;
background-color: #ff0;
background: url(../images/c11742c40fb7970d8d7a99b2f738f176.png);
background-size: cover;
}
.modal-palette-not-premium-user .modal__container .content .text-box {
width: 50%;
padding: 60px 40px 40px;
}
.modal-palette-not-premium-user .modal__container .content .text-box .feature {
display: flex;
}
.modal-palette-not-premium-user .modal__container .content .text-box .feature p {
color: #121212;
}
.modal-palette-not-premium-user .modal__container .content .text-box .feature i {
color: #44b678;
}
@media screen and (max-width: 768px) {
.modal-palette-not-premium-user .modal__container .content .image-box {
display: none;
}
.modal-palette-not-premium-user .modal__container .content .text-box {
width: 100%;
}
}
.modal-premium .modal-inner {
max-width: 640px;
}
.modal-premium .flaticon-premium:before {
width: 18px;
height: 18px;
}
.modal-premium .btn {
height: 64px;
line-height: 64px;
padding: 0 24px;
}
.modal-remove-palette.active .modal__container {
max-width: 555px;
}
.modal-remove-palette.active .modal__container .content {
padding: 40px;
border-radius: 16px;
}
.modal-remove-palette.active .modal__container .modal-remove-palette-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.modal-remove-palette.active
.modal__container
.modal-remove-palette-footer
.remove-palette {
background-color: #ff7d6a;
color: #fff;
}
.modal-report .modal-inner {
max-width: 600px;
}
.modal-report .modal-inner button {
margin-left: 10px;
}
.modal-report .modal-inner .radio-holder {
margin-bottom: 20px;
}
.modal-report .modal-inner .radio-holder:after {
clear: both;
content: '';
display: table;
}
.modal-report .modal-inner .radio-holder .radio-group {
margin-bottom: 10px;
}
.modal-report .modal-inner .radio-holder .textarea-group textarea {
height: 80px;
}
@media screen and (max-width: 640px) {
.modal-report .modal-inner .radio-holder .col-6 {
width: 100%;
float: none;
}
}
.pack-view__header {
display: flex;
align-items: baseline;
padding: 30px 30px 15px;
}
.pack-view__header--title {
margin: 0;
font-size: 26px;
color: #424242;
}
@media screen and (max-width: 640px) {
.pack-view__header--title {
font-size: 22px;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
}
.pack-view__header--icons {
margin: 0 0 4px 10px;
}
@media screen and (max-width: 640px) {
.pack-view__header--icons {
margin-left: 0;
}
}
@media screen and (max-width: 992px) {
.pack-view__header {
padding: 30px 15px 15px;
}
}
@media screen and (max-width: 640px) {
.pack-view__header {
align-items: flex-start;
flex-direction: column;
padding: 30px 0 10px;
}
}
.pack-view__filters {
padding: 0 30px 15px;
overflow: auto;
}
@media screen and (max-width: 992px) {
.pack-view__filters {
padding: 0 15px 15px;
}
}
.pack-view__filters .style-link {
position: relative;
margin-right: 15px;
font-size: 16px;
border: 0 !important;
color: #9c9c9c;
display: inline-block;
}
.pack-view__filters .style-link:hover {
color: #5b5b5b;
}
.pack-view__filters .style-link:last-child {
margin-right: 0;
}
.pack-view__filters .style-link span {
height: 34px;
}
.pack-view__filters .style-link span .style-name {
height: 100%;
display: flex;
align-items: center;
border-radius: 3px;
font-size: 16px;
}
.pack-view__filters .style-link span [type='radio']:checked ~ .style-name {
color: #424242;
font-weight: 700;
}
.pack-view__filters .style-link .fake-radio {
position: absolute;
top: 0;
opacity: 0;
}
#popup-collections {
width: 405px;
background-color: #fff;
border-radius: 8px;
position: absolute !important;
right: 10px;
top: 56px;
height: auto;
margin: 0;
box-shadow: 0 0 10px rgba(31, 64, 140, 0.3);
}
#popup-collections:before {
content: '';
position: absolute;
bottom: 100%;
right: 11px;
height: 0;
width: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
transform: translate(-50%);
margin: 6px 0 0;
}
#popup-collections .popup-close {
position: absolute;
top: 0;
right: 0;
}
#notification-cart .notification__close #popup-collections .popup-close i,
#popup-collections .popup-close #notification-cart .notification__close i,
#popup-collections .popup-close .icon,
#popup-collections .popup-close .notification--alert i,
.notification--alert #popup-collections .popup-close i {
margin: 0;
width: 46px;
height: 36px;
line-height: 36px;
font-size: 26px;
color: #424242;
}
#popup-collections .popup-collections__text {
padding: 20px;
}
#popup-collections .btn {
height: 34px;
line-height: 34px;
padding: 0 1em;
font-size: 14px;
color: #fff;
}
@media screen and (max-width: 640px) {
#popup-collections {
display: none;
}
}
#notification-cart {
right: 0;
width: 480px;
height: 276px;
background: url(../images/dccc814adf3f1267219e0ffddba97cdb.jpg) no-repeat 50%;
background-size: cover;
box-shadow: 0 0 60px rgba(14, 42, 71, 0.25);
}
@media screen and (max-width: 640px) {
#notification-cart {
max-width: 100%;
background: url(../images/af3ee9a1fe4aaef6a90fcf552aad6f26.jpg) no-repeat 50%;
background-size: cover;
}
}
#notification-cart .notification__close {
color: #142a5e;
margin: 0;
}
#notification-cart .notification__content {
height: 235px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#notification-cart .notification__content img {
width: 143px;
height: auto;
}
@media screen and (max-width: 640px) {
#notification-cart .notification__content img {
width: 120px;
}
}
#notification-cart .notification__content p {
text-align: center;
margin: 0;
}
#notification-cart .notification__content p:first-of-type {
color: #5b5b5b;
margin: 10px 0 5px;
}
#notification-cart .notification__content p:first-of-type span {
color: #feb602;
font-weight: 600;
}
#notification-cart .notification__content p:first-of-type span i {
margin-right: 5px;
color: inherit;
}
#notification-cart .notification__content p:first-of-type span i:before {
vertical-align: bottom;
}
#notification-cart .notification__content p:nth-last-of-type(2) {
color: #142a5e;
font-weight: 600;
font-size: 20px;
}
@media screen and (max-width: 480px) {
#notification-cart .notification__content p:nth-last-of-type(2) {
font-size: 18px;
}
}
#notification-cart .notification__content p:nth-last-of-type(2) br {
display: none;
}
#notification-cart .notification__content p:last-of-type {
color: #142a5e;
font-size: 48px;
font-weight: 700;
line-height: 63px;
margin-bottom: 15px;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (max-width: 480px) {
#notification-cart .notification__content p:last-of-type {
font-size: 34px;
line-height: 34px;
height: 42px;
}
}
#notification-cart .notification__content .countdown-promo {
height: 63px;
}
#notification-cart .notification__content a {
background: #3b9e62;
color: #fff;
}
#notification-cart .notification__content a:hover {
text-decoration: none;
background: #32864c;
}
@media screen and (max-width: 640px) {
.autopromo-coupon-container {
width: 100%;
display: flex;
justify-content: center;
right: 0;
}
}
#notification-cookie {
background-color: #121212;
color: #fff;
}
#notification-cookie .button {
box-shadow: inset 0 0 0 100px #424242;
background-color: transparent;
}
#notification-cookie .button:hover {
box-shadow: inset 0 0 0 100px #777;
}
#notification-cart .notification__close #notification-cookie i,
#notification-cookie #notification-cart .notification__close i,
#notification-cookie .icon,
#notification-cookie .notification--alert i,
.notification--alert #notification-cookie i {
margin-bottom: 2px;
}
#notification-cookie .countdown ul,
#notification-cookie .groups__item,
#notification-cookie .landing--register .separator,
#notification-cookie .profile-login .group,
#notification-cookie .row,
.countdown #notification-cookie ul,
.landing--register #notification-cookie .separator,
.profile-login #notification-cookie .group {
justify-content: flex-start;
-ms-justify-content: flex-start;
padding: 10px 54px 10px 10px;
}
#crusade-flaticon .notification__close {
box-shadow: inset 0 0 0 100px #3b9e62 !important;
}
#crusade-flaticon .crusades__countdown li,
#crusade-flaticon .crusades__description b {
color: #3b9e62;
}
#crusade-flaticon .crusades__countdown li .countdown__description {
display: none;
}
#crusade-flaticon .crusades__discount {
background: url(../images/bg-flaticon.f04136846fda88ad9e2d230d15f5f8d2.svg) 50%
no-repeat;
}
#crusade-freepik .notification__close {
box-shadow: inset 0 0 0 100px #336aea !important;
}
#crusade-freepik .crusades__countdown li,
#crusade-freepik .crusades__description b {
color: #336aea;
}
#crusade-freepik .crusades__countdown li .countdown__description {
display: none;
}
#crusade-freepik .crusades__discount {
background: url(../images/bg-freepik.74adca9808d47c2f14a25b0d069816d7.svg) 50%
no-repeat;
}
.crusades {
padding: 0 !important;
background: #fff !important;
color: #777 !important;
}
.countdown .crusades ul > *,
.crusades .countdown ul > *,
.crusades .groups__item > *,
.crusades .landing--register .separator > *,
.crusades .profile-login .group > *,
.crusades .row > *,
.landing--register .crusades .separator > *,
.profile-login .crusades .group > * {
margin: 0 10px;
}
.crusades__countdown ul {
-ms-display: flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.crusades__countdown li {
font-size: 24px;
font-weight: 700;
line-height: 28px;
}
@media screen and (min-width: 480px) {
.crusades__countdown li {
font-size: calc(24px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
.crusades__countdown li {
font-size: 30px;
}
}
.crusades__countdown li:not(:last-child) span:after {
content: ':';
}
.crusades__countdown__description {
margin: 0;
color: #777;
font-size: 12px;
}
.crusades__description {
-ms-flex: 1;
flex: 1;
max-width: 340px;
font-size: 17px;
font-weight: 600;
text-align: center;
}
.crusades__discount {
font-size: 36px;
width: 260px;
height: 100px;
background-size: 260px auto;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 100px;
}
@media screen and (min-width: 480px) {
.crusades__discount {
font-size: calc(36px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
.crusades__discount {
font-size: 42px;
}
}
.crusades__schedule {
padding: 0 20px;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
text-align: center;
}
@media screen and (max-width: 992px) {
.crusades .container-fluid {
padding-top: 10px;
padding-bottom: 10px;
}
.crusades .crusades__discount {
display: none;
}
.crusades .crusades__description {
text-align: left;
}
.crusades .crusades__description br {
display: none;
}
}
@media screen and (max-width: 640px) {
.crusades {
text-align: center;
}
.crusades .crusades__description {
max-width: inherit;
margin: 0 0 10px;
text-align: center;
}
.crusades .crusades__schedule {
display: none;
}
.crusades .crusades__countdown ul {
-ms-justify-content: center;
justify-content: center;
}
.countdown .crusades ul,
.crusades .countdown ul,
.crusades .groups__item,
.crusades .landing--register .separator,
.crusades .profile-login .group,
.crusades .row,
.landing--register .crusades .separator,
.profile-login .crusades .group {
display: block;
}
}
.notification--topbar {
display: none;
background-color: #eb644c;
color: #fff;
padding: 13px 20px;
z-index: 6;
}
.notification--topbar.winback.being-processed {
background-color: #336aea;
}
.notification--topbar.active {
display: block;
}
.notification--topbar.winback {
background-color: #ff7d6a;
}
.countdown .notification--topbar.winback > ul i,
.landing--register .notification--topbar.winback > .separator i,
.notification--topbar.winback > .groups__item i,
.notification--topbar.winback > .row i,
.profile-login .notification--topbar.winback > .group i {
line-height: 2;
align-self: flex-start;
}
.countdown .notification--topbar.winback > ul i.icon--cross,
.landing--register .notification--topbar.winback > .separator i.icon--cross,
.notification--topbar.winback > .groups__item i.icon--cross,
.notification--topbar.winback > .row i.icon--cross,
.profile-login .notification--topbar.winback > .group i.icon--cross {
line-height: 1.2;
}
.countdown .notification--topbar.winback > ul p,
.landing--register .notification--topbar.winback > .separator p,
.notification--topbar.winback > .groups__item p,
.notification--topbar.winback > .row p,
.profile-login .notification--topbar.winback > .group p {
margin-right: 10px;
}
.countdown .notification--topbar.winback > ul .link-contact-unpaid-teams,
.landing--register .notification--topbar.winback > .separator .link-contact-unpaid-teams,
.notification--topbar.winback > .groups__item .link-contact-unpaid-teams,
.notification--topbar.winback > .row .link-contact-unpaid-teams,
.profile-login .notification--topbar.winback > .group .link-contact-unpaid-teams {
color: #fff;
}
@media screen and (max-width: 640px) {
.notification--topbar {
font-size: 13px;
}
.countdown .notification--topbar ul,
.landing--register .notification--topbar .separator,
.notification--topbar .countdown ul,
.notification--topbar .groups__item,
.notification--topbar .landing--register .separator,
.notification--topbar .profile-login .group,
.notification--topbar .row,
.profile-login .notification--topbar .group {
display: block;
}
.countdown .notification--topbar.winback.being-processed > ul,
.landing--register .notification--topbar.winback.being-processed > .separator,
.notification--topbar.winback.being-processed > .groups__item,
.notification--topbar.winback.being-processed > .row,
.profile-login .notification--topbar.winback.being-processed > .group {
padding-top: 30px;
}
.countdown .notification--topbar.winback > ul,
.landing--register .notification--topbar.winback > .separator,
.notification--topbar.winback > .groups__item,
.notification--topbar.winback > .row,
.profile-login .notification--topbar.winback > .group {
display: flex;
align-items: flex-start;
}
.countdown .notification--topbar.winback > ul .close-being-processed,
.landing--register .notification--topbar.winback > .separator .close-being-processed,
.notification--topbar.winback > .groups__item .close-being-processed,
.notification--topbar.winback > .row .close-being-processed,
.profile-login .notification--topbar.winback > .group .close-being-processed {
position: absolute;
right: 10px;
top: 0;
}
.countdown .notification--topbar.winback > ul p,
.landing--register .notification--topbar.winback > .separator p,
.notification--topbar.winback > .groups__item p,
.notification--topbar.winback > .row p,
.profile-login .notification--topbar.winback > .group p {
margin-right: 0;
}
.notification--topbar p {
margin-bottom: 10px;
}
.notification--topbar .bj-button {
height: 24px;
line-height: 24px;
}
.notification--topbar .bj-button.update-payment,
.notification--topbar .my-subscription {
width: 100%;
height: 34px;
line-height: 34px;
}
}
#header.fixed .notification--topbar {
position: relative;
}
body.topbar-active #viewport {
padding-top: 172px;
}
body.topbar-active.home--anonymous #viewport {
padding-top: 108px;
}
.sp-slidesgo b {
color: #424242;
}
.sp-slidesgo__header {
padding: 20px;
background-color: #f7f7f7;
}
.sp-slidesgo__list {
height: 183px;
overflow: hidden;
background-color: #f7f7f7;
padding: 0 20px;
}
.sp-slidesgo__element {
margin-bottom: 100px !important;
}
.sp-slidesgo__element img {
height: 168px;
margin: auto;
display: block;
width: auto;
max-width: none;
}
.sp-slidesgo__element:hover {
opacity: 0.8;
}
.countdown .sp-slidesgo ul,
.landing--register .sp-slidesgo .separator,
.profile-login .sp-slidesgo .group,
.sp-slidesgo .countdown ul,
.sp-slidesgo .groups__item,
.sp-slidesgo .landing--register .separator,
.sp-slidesgo .profile-login .group,
.sp-slidesgo .row {
margin: 0;
}
.sp-slidesgo-container {
height: 250px;
}
.errorpage.e404 {
background-color: #f7f7f7;
text-align: center;
padding: 100px 20px;
}
.errorpage.e404 .image {
width: 625px;
height: 314px;
background: url(../images/bc1f08a5a84652a40c3fb230d738717e.png) no-repeat 50%;
background-size: cover;
position: relative;
margin: auto;
}
.errorpage.e404 .ufo {
width: 70px;
height: 59px;
background: url(../images/d2a9a0a97e7a1a0962923dee76c9e753.png) no-repeat 50%;
background-size: cover;
position: absolute;
top: 70px;
right: 47px;
-webkit-animation: floatingOvni 1.5s ease-in-out infinite;
-moz-animation: floatingOvni ease-in-out 1.5s infinite;
animation: floatingOvni 1.5s ease-in-out infinite;
}
.errorpage.e404 .alien {
width: 13px;
height: 21px;
background: url(../images/29998da75cfb47d1e215154a9c05f01e.png) no-repeat 50%;
background-size: cover;
position: absolute;
bottom: 97px;
right: -2px;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-animation: alien 0.3s linear infinite;
-moz-animation: alien linear 0.3s infinite;
animation: alien 0.3s linear infinite;
}
.errorpage.e404 .estela {
width: 40px;
height: 3px;
background: url(../images/362578c5c3ec7e78844e0454917787b6.png) no-repeat 50%;
background-size: cover;
position: absolute;
bottom: 76px;
left: 144px;
-webkit-animation: estela 1s ease-in-out infinite;
-moz-animation: estela ease-in-out 1s infinite;
animation: estela 1s ease-in-out infinite;
}
.errorpage.e404 .estela:after {
content: '';
display: block;
width: 20px;
height: 3px;
position: absolute;
top: 0;
right: 0;
background-color: #072f3d;
background-image: -webkit-linear-gradient(right, #072f3d, transparent);
background-image: linear-gradient(270deg, #072f3d, transparent);
background-color: transparent;
}
.errorpage.e404 .satellite-container {
width: 0;
height: 100px;
top: 108px;
left: 20px;
position: absolute;
-webkit-animation: rotate 2s linear infinite;
-moz-animation: rotate linear 2s infinite;
animation: rotate 2s linear infinite;
}
.errorpage.e404 .satellite {
width: 65px;
height: 65px;
background: url(../images/e5fcfe7155762f37703ec95f657dd5d9.png) no-repeat 50%;
background-size: cover;
position: relative;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-animation: rotateInverse 2s linear infinite;
-moz-animation: rotateInverse linear 2s infinite;
animation: rotateInverse 2s linear infinite;
}
.errorpage.e404 h1 {
color: #142a5e;
font-size: 24px;
margin: 30px 0 50px;
}
.errorpage.e404 h1,
.errorpage.e404 h3 {
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
.errorpage.e404 h3 {
font-size: 17px;
line-height: 1.6;
}
.errorpage.e404 p {
margin-top: 20px;
}
@media screen and (max-width: 768px) {
.errorpage.e404 {
padding: 20px;
}
.errorpage.e404 .image {
width: 320px;
height: 161px;
}
.errorpage.e404 .alien,
.errorpage.e404 .estela,
.errorpage.e404 .mask,
.errorpage.e404 .satellite-container,
.errorpage.e404 .ufo {
display: none;
}
}
.errorpage.e500 {
background-color: #f7f7f7;
text-align: center;
padding: 100px 20px;
}
.errorpage.e500 .image {
width: 606px;
height: 326px;
background: url(../images/40aa595fb9d30f8604f902a598bc2a6f.png) no-repeat 50%;
background-size: cover;
position: relative;
margin: auto;
overflow: hidden;
}
.errorpage.e500 .ufo {
width: 65px;
height: 65px;
background: url(../images/d930510d2977e8f0e4c29b6ff3923faf.png) no-repeat 50%;
background-size: cover;
position: absolute;
top: 274px;
right: 63px;
-webkit-animation: floatingOvni 1.5s ease-in-out infinite;
-moz-animation: floatingOvni ease-in-out 1.5s infinite;
animation: floatingOvni 1.5s ease-in-out infinite;
}
.errorpage.e500 .alien {
width: 13px;
height: 21px;
background: url(../images/29998da75cfb47d1e215154a9c05f01e.png) no-repeat 50%;
background-size: cover;
position: absolute;
bottom: 40px;
right: 522px;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-animation: alien 0.3s linear infinite;
-moz-animation: alien linear 0.3s infinite;
animation: alien 0.3s linear infinite;
}
.errorpage.e500 .satellite-container {
width: 0;
height: 100px;
top: 108px;
left: 20px;
position: absolute;
-webkit-animation: rotate 2s linear infinite;
-moz-animation: rotate linear 2s infinite;
animation: rotate 2s linear infinite;
}
.errorpage.e500 .satellite {
width: 65px;
height: 65px;
background: url(../images/e5fcfe7155762f37703ec95f657dd5d9.png) no-repeat 50%;
background-size: cover;
position: relative;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-animation: rotateInverse 2s linear infinite;
-moz-animation: rotateInverse linear 2s infinite;
animation: rotateInverse 2s linear infinite;
}
.errorpage.e500 h1 {
color: #142a5e;
font-size: 24px;
margin: 30px 0 50px;
}
.errorpage.e500 h3 {
font-size: 18px;
line-height: 1.8;
}
.errorpage.e500 p {
margin-top: 20px;
}
.errorpage.e500 .mask {
width: 135px;
height: 9px;
background: url(../images/mask.289abd50d072baad6bdcbbd25731c61a.svg) no-repeat 50%;
background-size: cover;
position: absolute;
bottom: 0;
right: 30px;
}
@media screen and (max-width: 768px) {
.errorpage.e500 {
padding: 20px;
}
.errorpage.e500 .image {
width: 320px;
height: 172px;
}
.errorpage.e500 .alien,
.errorpage.e500 .mask,
.errorpage.e500 .satellite-container,
.errorpage.e500 .ufo {
display: none;
}
}
#subscription-upgrade-error .notification__close {
margin: 0;
background: #f4980a !important;
height: 100%;
}
#subscription-upgrade-error .notification__state {
top: 50%;
background: none;
align-self: auto;
}
.alert {
border-radius: 4px;
clear: both;
font-size: 13px;
position: relative;
width: 100%;
background-color: #142a5e;
color: #fff;
}
.alert.success {
background-color: #3b9e62;
color: #142a5e;
}
.alert.danger {
background-color: #eb644c;
color: #fff;
}
.alert.warning {
background-color: #feb602;
color: #fff;
}
.alert i {
position: absolute;
left: 0;
padding: 0 15px;
text-align: center;
height: 100%;
}
.alert i,
.alert i:before {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.alert i:before {
font-size: 15px;
position: relative;
display: block;
}
.alert a {
color: #fff;
text-decoration: underline;
font-weight: 700;
}
.alert p {
margin: 0;
display: inline-block;
vertical-align: middle;
padding: 15px 70px 15px 40px;
text-align: left;
width: 100%;
}
.alert .close-alert {
color: #fff;
font-size: 17px;
padding: 5px 15px;
border-radius: 0 4px 4px 0;
text-decoration: none;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: rgba(0, 0, 0, 0.15);
height: 100%;
}
.alert .close-alert:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #fff;
}
.alert .close-alert span {
display: block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.animated-icon-in-action {
margin: 60px auto 40px;
}
.animated-icon-in-action h2.font-h6 {
font-size: 17px;
}
.animated-icon-in-action p {
color: #5b5b5b;
}
.animated-icon-in-action p.bold,
.animated-icon-in-action p.medium {
color: #424242;
}
.animated-icon-in-action .countdown ul,
.animated-icon-in-action .groups__item,
.animated-icon-in-action .landing--register .separator,
.animated-icon-in-action .profile-login .group,
.animated-icon-in-action .row,
.countdown .animated-icon-in-action ul,
.landing--register .animated-icon-in-action .separator,
.profile-login .animated-icon-in-action .group {
margin: 0 -10px;
flex-wrap: nowrap;
}
.animated-icon-in-action .countdown ul article,
.animated-icon-in-action .groups__item article,
.animated-icon-in-action .landing--register .separator article,
.animated-icon-in-action .profile-login .group article,
.animated-icon-in-action .row article,
.countdown .animated-icon-in-action ul article,
.landing--register .animated-icon-in-action .separator article,
.profile-login .animated-icon-in-action .group article {
margin: 10px;
width: 100%;
}
.animated-icon-in-action .countdown ul article > p,
.animated-icon-in-action .groups__item article > p,
.animated-icon-in-action .landing--register .separator article > p,
.animated-icon-in-action .profile-login .group article > p,
.animated-icon-in-action .row article > p,
.countdown .animated-icon-in-action ul article > p,
.landing--register .animated-icon-in-action .separator article > p,
.profile-login .animated-icon-in-action .group article > p {
margin-bottom: 10px;
}
.animated-icon-in-action .countdown ul article img,
.animated-icon-in-action .groups__item article img,
.animated-icon-in-action .landing--register .separator article img,
.animated-icon-in-action .profile-login .group article img,
.animated-icon-in-action .row article img,
.countdown .animated-icon-in-action ul article img,
.landing--register .animated-icon-in-action .separator article img,
.profile-login .animated-icon-in-action .group article img {
padding: 4px;
}
.animated-icon-in-action .countdown ul article img.pd-none,
.animated-icon-in-action .groups__item article img.pd-none,
.animated-icon-in-action .landing--register .separator article img.pd-none,
.animated-icon-in-action .profile-login .group article img.pd-none,
.animated-icon-in-action .row article img.pd-none,
.countdown .animated-icon-in-action ul article img.pd-none,
.landing--register .animated-icon-in-action .separator article img.pd-none,
.profile-login .animated-icon-in-action .group article img.pd-none {
padding: 0;
}
.animated-icon-in-action .countdown ul article .image-example-interface,
.animated-icon-in-action .groups__item article .image-example-interface,
.animated-icon-in-action .landing--register .separator article .image-example-interface,
.animated-icon-in-action .profile-login .group article .image-example-interface,
.animated-icon-in-action .row article .image-example-interface,
.countdown .animated-icon-in-action ul article .image-example-interface,
.landing--register .animated-icon-in-action .separator article .image-example-interface,
.profile-login .animated-icon-in-action .group article .image-example-interface {
background-color: #f0f0f0;
border-radius: 12px;
min-height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.animated-icon-in-action .countdown ul article .image-example-interface > div,
.animated-icon-in-action .groups__item article .image-example-interface > div,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-interface
> div,
.animated-icon-in-action .profile-login .group article .image-example-interface > div,
.animated-icon-in-action .row article .image-example-interface > div,
.countdown .animated-icon-in-action ul article .image-example-interface > div,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-interface
> div,
.profile-login .animated-icon-in-action .group article .image-example-interface > div {
min-width: 250px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow:
0 27px 80px rgba(95, 125, 149, 0.07),
0 17.3274px 36.0449px rgba(95, 125, 149, 0.0503198),
0 10.4775px 22.3564px rgba(95, 125, 149, 0.0417275),
0 6.52814px 14.8269px rgba(95, 125, 149, 0.035),
0 3.88539px 9.31526px rgba(95, 125, 149, 0.0282725),
0 1.80585px 4.54341px rgba(95, 125, 149, 0.0196802);
border-radius: 16px;
padding: 20px 20px 20px 25px;
margin: 0 15px;
}
.animated-icon-in-action .countdown ul article .image-example-mobile-interface,
.animated-icon-in-action .groups__item article .image-example-mobile-interface,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-mobile-interface,
.animated-icon-in-action .profile-login .group article .image-example-mobile-interface,
.animated-icon-in-action .row article .image-example-mobile-interface,
.countdown .animated-icon-in-action ul article .image-example-mobile-interface,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-mobile-interface,
.profile-login .animated-icon-in-action .group article .image-example-mobile-interface {
background-color: #f0f0f0;
border-radius: 12px;
min-height: 240px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-mobile-interface
.mobile-body,
.animated-icon-in-action
.groups__item
article
.image-example-mobile-interface
.mobile-body,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-mobile-interface
.mobile-body,
.animated-icon-in-action
.profile-login
.group
article
.image-example-mobile-interface
.mobile-body,
.animated-icon-in-action .row article .image-example-mobile-interface .mobile-body,
.countdown
.animated-icon-in-action
ul
article
.image-example-mobile-interface
.mobile-body,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-mobile-interface
.mobile-body,
.profile-login
.animated-icon-in-action
.group
article
.image-example-mobile-interface
.mobile-body {
max-width: 275px;
min-width: 236px;
height: 240px;
margin: -80px 15px 0;
background-color: #f7f7f7;
box-shadow:
0 27px 80px rgba(95, 125, 149, 0.07),
0 17.3274px 36.0449px rgba(95, 125, 149, 0.0503198),
0 10.4775px 22.3564px rgba(95, 125, 149, 0.0417275),
0 6.52814px 14.8269px rgba(95, 125, 149, 0.035),
0 3.88539px 9.31526px rgba(95, 125, 149, 0.0282725),
0 1.80585px 4.54341px rgba(95, 125, 149, 0.0196802);
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-mobile-interface
.mobile-body
> p,
.animated-icon-in-action
.groups__item
article
.image-example-mobile-interface
.mobile-body
> p,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-mobile-interface
.mobile-body
> p,
.animated-icon-in-action
.profile-login
.group
article
.image-example-mobile-interface
.mobile-body
> p,
.animated-icon-in-action .row article .image-example-mobile-interface .mobile-body > p,
.countdown
.animated-icon-in-action
ul
article
.image-example-mobile-interface
.mobile-body
> p,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-mobile-interface
.mobile-body
> p,
.profile-login
.animated-icon-in-action
.group
article
.image-example-mobile-interface
.mobile-body
> p {
padding: 0 30px;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.animated-icon-in-action
.groups__item
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.animated-icon-in-action
.profile-login
.group
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.animated-icon-in-action
.row
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.countdown
.animated-icon-in-action
ul
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-mobile-interface
.mobile-body
.mobile-menu,
.profile-login
.animated-icon-in-action
.group
article
.image-example-mobile-interface
.mobile-body
.mobile-menu {
height: 100px;
background-color: #fff;
padding: 30px;
display: flex;
justify-content: space-between;
}
.animated-icon-in-action .countdown ul article .image-example-menu,
.animated-icon-in-action .groups__item article .image-example-menu,
.animated-icon-in-action .landing--register .separator article .image-example-menu,
.animated-icon-in-action .profile-login .group article .image-example-menu,
.animated-icon-in-action .row article .image-example-menu,
.countdown .animated-icon-in-action ul article .image-example-menu,
.landing--register .animated-icon-in-action .separator article .image-example-menu,
.profile-login .animated-icon-in-action .group article .image-example-menu {
background-color: #f0f0f0;
border-radius: 12px;
min-height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.animated-icon-in-action .countdown ul article .image-example-menu__container,
.animated-icon-in-action .groups__item article .image-example-menu__container,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-menu__container,
.animated-icon-in-action .profile-login .group article .image-example-menu__container,
.animated-icon-in-action .row article .image-example-menu__container,
.countdown .animated-icon-in-action ul article .image-example-menu__container,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-menu__container,
.profile-login .animated-icon-in-action .group article .image-example-menu__container {
width: 250px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow:
0 27px 80px rgba(95, 125, 149, 0.07),
0 17.3274px 36.0449px rgba(95, 125, 149, 0.0503198),
0 10.4775px 22.3564px rgba(95, 125, 149, 0.0417275),
0 6.52814px 14.8269px rgba(95, 125, 149, 0.035),
0 3.88539px 9.31526px rgba(95, 125, 149, 0.0282725),
0 1.80585px 4.54341px rgba(95, 125, 149, 0.0196802);
border-radius: 16px;
padding: 10px 0;
margin: 0 15px;
}
.animated-icon-in-action .countdown ul article .image-example-menu__item,
.animated-icon-in-action .groups__item article .image-example-menu__item,
.animated-icon-in-action .landing--register .separator article .image-example-menu__item,
.animated-icon-in-action .profile-login .group article .image-example-menu__item,
.animated-icon-in-action .row article .image-example-menu__item,
.countdown .animated-icon-in-action ul article .image-example-menu__item,
.landing--register .animated-icon-in-action .separator article .image-example-menu__item,
.profile-login .animated-icon-in-action .group article .image-example-menu__item {
padding: 10px 30px;
width: 100%;
display: flex;
align-items: center;
}
.animated-icon-in-action .countdown ul article .image-example-menu__item p,
.animated-icon-in-action .groups__item article .image-example-menu__item p,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-menu__item
p,
.animated-icon-in-action .profile-login .group article .image-example-menu__item p,
.animated-icon-in-action .row article .image-example-menu__item p,
.countdown .animated-icon-in-action ul article .image-example-menu__item p,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-menu__item
p,
.profile-login .animated-icon-in-action .group article .image-example-menu__item p {
color: #000;
}
.animated-icon-in-action .countdown ul article .image-example-menu__item:nth-child(2),
.animated-icon-in-action .groups__item article .image-example-menu__item:nth-child(2),
.animated-icon-in-action
.landing--register
.separator
article
.image-example-menu__item:nth-child(2),
.animated-icon-in-action
.profile-login
.group
article
.image-example-menu__item:nth-child(2),
.animated-icon-in-action .row article .image-example-menu__item:nth-child(2),
.countdown .animated-icon-in-action ul article .image-example-menu__item:nth-child(2),
.landing--register
.animated-icon-in-action
.separator
article
.image-example-menu__item:nth-child(2),
.profile-login
.animated-icon-in-action
.group
article
.image-example-menu__item:nth-child(2) {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.animated-icon-in-action .countdown ul article .image-example-scalable,
.animated-icon-in-action .groups__item article .image-example-scalable,
.animated-icon-in-action .landing--register .separator article .image-example-scalable,
.animated-icon-in-action .profile-login .group article .image-example-scalable,
.animated-icon-in-action .row article .image-example-scalable,
.countdown .animated-icon-in-action ul article .image-example-scalable,
.landing--register .animated-icon-in-action .separator article .image-example-scalable,
.profile-login .animated-icon-in-action .group article .image-example-scalable {
background-color: #f0f0f0;
border-radius: 12px;
min-height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.animated-icon-in-action .countdown ul article .image-example-scalable__container,
.animated-icon-in-action .groups__item article .image-example-scalable__container,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__container,
.animated-icon-in-action .profile-login .group article .image-example-scalable__container,
.animated-icon-in-action .row article .image-example-scalable__container,
.countdown .animated-icon-in-action ul article .image-example-scalable__container,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__container,
.profile-login
.animated-icon-in-action
.group
article
.image-example-scalable__container {
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow:
0 27px 80px rgba(95, 125, 149, 0.07),
0 17.3274px 36.0449px rgba(95, 125, 149, 0.0503198),
0 10.4775px 22.3564px rgba(95, 125, 149, 0.0417275),
0 6.52814px 14.8269px rgba(95, 125, 149, 0.035),
0 3.88539px 9.31526px rgba(95, 125, 149, 0.0282725),
0 1.80585px 4.54341px rgba(95, 125, 149, 0.0196802);
border-radius: 16px;
padding: 30px;
margin: 0 15px;
}
.animated-icon-in-action .countdown ul article .image-example-scalable__item,
.animated-icon-in-action .groups__item article .image-example-scalable__item,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item,
.animated-icon-in-action .profile-login .group article .image-example-scalable__item,
.animated-icon-in-action .row article .image-example-scalable__item,
.countdown .animated-icon-in-action ul article .image-example-scalable__item,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item,
.profile-login .animated-icon-in-action .group article .image-example-scalable__item {
display: flex;
flex-direction: column;
height: 100px;
}
.animated-icon-in-action .countdown ul article .image-example-scalable__item > div,
.animated-icon-in-action .groups__item article .image-example-scalable__item > div,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item
> div,
.animated-icon-in-action
.profile-login
.group
article
.image-example-scalable__item
> div,
.animated-icon-in-action .row article .image-example-scalable__item > div,
.countdown .animated-icon-in-action ul article .image-example-scalable__item > div,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item
> div,
.profile-login
.animated-icon-in-action
.group
article
.image-example-scalable__item
> div {
flex: 1;
display: flex;
align-items: center;
}
.animated-icon-in-action .countdown ul article .image-example-scalable__item p,
.animated-icon-in-action .groups__item article .image-example-scalable__item p,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item
p,
.animated-icon-in-action .profile-login .group article .image-example-scalable__item p,
.animated-icon-in-action .row article .image-example-scalable__item p,
.countdown .animated-icon-in-action ul article .image-example-scalable__item p,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item
p,
.profile-login .animated-icon-in-action .group article .image-example-scalable__item p {
text-align: center;
color: #000;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-scalable__item:nth-child(2)
img,
.animated-icon-in-action
.groups__item
article
.image-example-scalable__item:nth-child(2)
img,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item:nth-child(2)
img,
.animated-icon-in-action
.profile-login
.group
article
.image-example-scalable__item:nth-child(2)
img,
.animated-icon-in-action .row article .image-example-scalable__item:nth-child(2) img,
.countdown
.animated-icon-in-action
ul
article
.image-example-scalable__item:nth-child(2)
img,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item:nth-child(2)
img,
.profile-login
.animated-icon-in-action
.group
article
.image-example-scalable__item:nth-child(2)
img {
padding: 6px;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.animated-icon-in-action
.groups__item
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.animated-icon-in-action
.profile-login
.group
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.animated-icon-in-action
.row
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.countdown
.animated-icon-in-action
ul
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item:nth-child(2)
img.pd-none,
.profile-login
.animated-icon-in-action
.group
article
.image-example-scalable__item:nth-child(2)
img.pd-none {
padding: 0;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-scalable__item:nth-child(3)
img,
.animated-icon-in-action
.groups__item
article
.image-example-scalable__item:nth-child(3)
img,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item:nth-child(3)
img,
.animated-icon-in-action
.profile-login
.group
article
.image-example-scalable__item:nth-child(3)
img,
.animated-icon-in-action .row article .image-example-scalable__item:nth-child(3) img,
.countdown
.animated-icon-in-action
ul
article
.image-example-scalable__item:nth-child(3)
img,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item:nth-child(3)
img,
.profile-login
.animated-icon-in-action
.group
article
.image-example-scalable__item:nth-child(3)
img {
padding: 8px;
}
.animated-icon-in-action
.countdown
ul
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.animated-icon-in-action
.groups__item
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.animated-icon-in-action
.landing--register
.separator
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.animated-icon-in-action
.profile-login
.group
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.animated-icon-in-action
.row
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.countdown
.animated-icon-in-action
ul
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.landing--register
.animated-icon-in-action
.separator
article
.image-example-scalable__item:nth-child(3)
img.pd-none,
.profile-login
.animated-icon-in-action
.group
article
.image-example-scalable__item:nth-child(3)
img.pd-none {
padding: 0;
}
@media screen and (max-width: 1400px) {
.animated-icon-in-action .countdown ul,
.animated-icon-in-action .groups__item,
.animated-icon-in-action .landing--register .separator,
.animated-icon-in-action .profile-login .group,
.animated-icon-in-action .row,
.countdown .animated-icon-in-action ul,
.landing--register .animated-icon-in-action .separator,
.profile-login .animated-icon-in-action .group {
margin: 0 -10px;
flex-wrap: wrap;
}
.animated-icon-in-action .countdown ul article,
.animated-icon-in-action .groups__item article,
.animated-icon-in-action .landing--register .separator article,
.animated-icon-in-action .profile-login .group article,
.animated-icon-in-action .row article,
.countdown .animated-icon-in-action ul article,
.landing--register .animated-icon-in-action .separator article,
.profile-login .animated-icon-in-action .group article {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 640px) {
.animated-icon-in-action .countdown ul,
.animated-icon-in-action .groups__item,
.animated-icon-in-action .landing--register .separator,
.animated-icon-in-action .profile-login .group,
.animated-icon-in-action .row,
.countdown .animated-icon-in-action ul,
.landing--register .animated-icon-in-action .separator,
.profile-login .animated-icon-in-action .group {
margin: 0 -10px;
flex-wrap: wrap;
}
.animated-icon-in-action .countdown ul article,
.animated-icon-in-action .groups__item article,
.animated-icon-in-action .landing--register .separator article,
.animated-icon-in-action .profile-login .group article,
.animated-icon-in-action .row article,
.countdown .animated-icon-in-action ul article,
.landing--register .animated-icon-in-action .separator article,
.profile-login .animated-icon-in-action .group article {
width: calc(100% - 20px);
}
}
.stunning-animated-icons {
position: relative;
margin: 40px 0;
}
.stunning-animated-icons__container {
border-radius: 24px;
background-color: #f0f0f0;
background-color: #f8f9fc;
display: flex;
overflow: hidden;
padding: 60px;
position: relative;
}
.stunning-animated-icons__text {
width: 40%;
}
.stunning-animated-icons__text h5 {
color: #121212;
}
.stunning-animated-icons__text p {
color: #424242;
}
.stunning-animated-icons__video {
width: 60%;
position: absolute;
bottom: 0;
left: 45%;
}
.stunning-animated-icons__video video {
display: block;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.stunning-animated-icons {
margin: 20px 0;
}
}
@media screen and (max-width: 992px) {
.stunning-animated-icons {
margin-bottom: 0;
}
.stunning-animated-icons__container {
flex-wrap: wrap;
padding: 30px 0 0;
}
.stunning-animated-icons__text {
width: 100%;
padding: 0 20px;
text-align: center;
margin: 0 auto 20px;
max-width: 425px;
}
.stunning-animated-icons__text a {
line-height: 1.2;
}
.stunning-animated-icons__video {
width: 100%;
position: relative;
left: unset;
}
.stunning-animated-icons__video video {
width: 100%;
}
}
#modal-attribution:not(.modal-attribution-detail) .modal-attribution__wrapper {
max-width: 960px;
background-color: #fff;
padding: 0 !important;
position: relative;
display: inline-block;
width: 100%;
margin: 60px 0;
vertical-align: middle;
text-align: left;
line-height: 1.6;
}
#modal-attribution:not(.modal-attribution-detail)
.modal-attribution__wrapper
.modal__container {
margin: 0;
}
#modal-attribution .modal__container {
max-width: 960px;
background-color: #fff;
padding: 30px;
border-radius: 3px;
}
#modal-attribution .detail__download-confirmation__close {
padding: 10px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 1;
}
#modal-attribution .download-problems-box {
justify-content: flex-start;
}
#modal-attribution .download-problems-box .icon--bug {
margin-right: 5px;
font-size: 12px;
}
#modal-attribution .download-problems-box .download-problems {
justify-content: flex-start;
color: #142a5e;
text-decoration: underline;
}
#modal-attribution .download-problems-box .download-problems:hover {
color: #27dc4a;
}
#modal-attribution .banner {
background: #142a5e url(../images/bg-banner.e0c729ab2e4b5e22a9aaa9423e2cc23c.svg)
no-repeat 50%;
background-size: cover;
padding: 40px 62px;
color: #fff;
text-align: center;
}
#modal-attribution .banner h5 {
margin-bottom: 12px;
}
#modal-attribution .banner p {
color: #fff;
max-width: 560px;
margin: 0 auto;
font-size: 13px;
line-height: 1.6;
}
#modal-attribution .banner a {
color: #f4980a;
}
#modal-attribution .banner a:hover {
color: #ea7e11;
}
#modal-attribution.modal-attribution-detail .banner {
background: #f7f7f7 url(../images/93581e9a2ce6ede45dfd918b976d057a.png) no-repeat 100%;
background-size: cover;
background-position: 0;
padding: 30px;
text-align: left;
display: flex;
align-items: center;
position: relative;
width: 100%;
bottom: 0;
border-radius: 3px;
}
#modal-attribution.modal-attribution-detail .banner h6 {
color: #142a5e;
}
#modal-attribution.modal-attribution-detail .banner p {
color: #5b5b5b;
max-width: 385px;
margin: unset;
font-size: 13px;
line-height: 1.6;
}
#modal-attribution.modal-attribution-detail .banner > a {
color: #121212;
line-height: 1.2;
}
@media screen and (max-width: 768px) {
#modal-attribution.modal-attribution-detail .banner {
display: none;
}
}
@media screen and (min-width: 1400px) {
#modal-attribution.modal-attribution-detail .banner .banner {
padding: 30px 15%;
background-position: 90%;
background-size: contain;
}
}
@media screen and (max-width: 768px) {
#modal-attribution {
overflow: auto;
}
#modal-attribution .modal__container {
margin-top: 30px;
}
#modal-attribution .copy__trigger {
border-radius: 3px;
}
#modal-attribution .download-problems-box {
justify-content: center;
}
}
#modal-attribution .social-media-buttons .bj-button {
-ms-flex: 1;
flex: 1;
}
.attribution {
padding: 30px;
}
.attribution .content {
-ms-flex: 1;
flex: 1;
max-width: 770px;
margin: 0 auto 0 0 !important;
}
.attribution .content p a,
.attribution .content p button {
color: #424242;
}
.attribution .content p a:hover,
.attribution .content p button:hover {
color: #121212;
}
.attribution__video {
width: 280px;
height: auto;
margin: auto 20px 0 0;
}
@media screen and (max-width: 768px) {
.attribution__video {
display: none;
}
}
.attribution__video video {
width: 100%;
height: auto;
}
.attribution .banner {
background: #142a5e url(../images/bg-banner.e0c729ab2e4b5e22a9aaa9423e2cc23c.svg)
no-repeat 50%;
background-size: cover;
padding: 12px 62px;
color: #fff;
}
.attribution .banner h5 {
margin-bottom: 12px;
}
.attribution .banner p {
color: #fff;
margin: 0;
}
@media screen and (max-width: 768px) {
.attribution .content {
text-align: center;
}
.attribution .content button[data-modal='modal-report'] {
margin-left: auto;
margin-right: auto;
}
}
div.awesomplete > input {
display: block;
}
div.awesomplete > ul {
position: absolute;
left: 0;
z-index: 99;
min-width: 100%;
border-radius: 3px;
background: #fff;
box-shadow: 0 5px 10px rgba(18, 18, 18, 0.2);
color: #121212;
text-align: left;
padding: 10px 0;
}
div.awesomplete > ul:empty,
div.awesomplete > ul[hidden] {
display: none;
}
div.awesomplete > ul > li {
position: relative;
height: 34px;
line-height: 34px;
cursor: pointer;
padding: 0 20px;
color: #777;
}
div.awesomplete > ul > li:hover,
div.awesomplete > ul > li[aria-selected='true'] {
background: #e5e5e5;
}
div.awesomplete > ul > li mark {
background: none;
font-weight: 700;
color: #121212;
}
.badge {
background-color: #142a5e;
border-radius: 20px;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: 700;
height: 20px;
line-height: 20px;
min-width: 20px;
text-align: center;
}
.badge.badge-gray {
background-color: #e5e5e5;
color: #121212;
}
.badge.badge-white {
background-color: #fff;
color: #121212;
}
.badge.badge-error {
background-color: #eb644c;
}
.badge.badge-warning {
background-color: #feb602;
}
.badge.badge-success {
background-color: #3b9e62;
color: #121212;
}
.header-premium {
background-size: cover;
background-position: 50%;
height: 100%;
}
.header-premium .content {
max-width: 768px;
height: 100%;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.header-premium--bg2 {
overflow: hidden;
background-color: #44b678;
background-image: url(../images/bg.9edbde096a22dae8891a7c7241c11107.svg);
}
.header-premium--bg2 .content {
position: relative;
}
.header-premium--bg2 .content:before {
position: absolute;
top: 50%;
right: 100%;
width: 388px;
height: 283px;
transform: translateY(-50%);
background-image: url(../images/bg-layer.56c35092dedca7ac23142ce65282c676.svg);
background-repeat: no-repeat;
content: '';
}
@media screen and (min-width: 992px) {
.header-premium--slim .content {
max-width: 880px;
text-align: left;
}
.header-premium--slim .col {
padding: 0 20px;
}
.header-premium--slim span.font-h3 {
width: 100%;
max-width: 192px;
margin: 0 5px 0 0 !important;
padding: 0 25px 0 0 !important;
border-right: 1px solid;
border-color: hsla(0, 0%, 89.8%, 0.15);
line-height: 1.2;
text-align: right;
}
.header-premium--slim p {
line-height: 2;
}
.header-premium--slim.header-premium--bg3 span.font-h3 {
border-color: #e5e5e5;
}
}
@media screen and (max-width: 992px) {
.header-premium--slim .content {
max-width: 600px;
top: 50%;
transform: translateY(-50%);
position: relative;
height: auto;
}
.countdown .header-premium--slim ul,
.header-premium--slim .countdown ul,
.header-premium--slim .groups__item,
.header-premium--slim .landing--register .separator,
.header-premium--slim .profile-login .group,
.header-premium--slim .row,
.landing--register .header-premium--slim .separator,
.profile-login .header-premium--slim .group {
display: block;
}
.header-premium--slim p {
margin: 0 0 20px !important;
}
}
.notify-wrapper .button {
display: inline-block;
position: relative;
height: 44px;
padding: 0 1.4em;
border-radius: 3px;
box-shadow: inset 0 0 0 0 #44b678;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 44px;
cursor: pointer;
}
.notify-wrapper .button.active,
.notify-wrapper .button:hover {
box-shadow: inset 0 0 0 0 #369160;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button.active i,
#notification-cart .notification__close .notify-wrapper .button:hover i,
.notification--alert .notify-wrapper .button.active i,
.notification--alert .notify-wrapper .button:hover i,
.notify-wrapper .button.active #notification-cart .notification__close i,
.notify-wrapper .button.active .icon,
.notify-wrapper .button.active .notification--alert i,
.notify-wrapper .button:hover #notification-cart .notification__close i,
.notify-wrapper .button:hover .icon,
.notify-wrapper .button:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button.active,
.notify-wrapper .button:active {
box-shadow: inset 0 0 0 0 #c2c2c2;
}
#notification-cart .notification__close .notify-wrapper .button i,
.notification--alert .notify-wrapper .button i,
.notify-wrapper .button #notification-cart .notification__close i,
.notify-wrapper .button .icon,
.notify-wrapper .button .notification--alert i {
color: #fff;
}
.notify-wrapper .button--outline {
--color: color('default-outline', 'buttons-text');
box-shadow: inset 0 0 0 1px #44b678;
color: #44b678;
}
#notification-cart .notification__close .notify-wrapper .button--outline i,
.notification--alert .notify-wrapper .button--outline i,
.notify-wrapper .button--outline #notification-cart .notification__close i,
.notify-wrapper .button--outline .icon,
.notify-wrapper .button--outline .notification--alert i {
color: #44b678;
}
.notify-wrapper .button--outline.active,
.notify-wrapper .button--outline:hover {
box-shadow: inset 0 0 0 32px #44b678;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--outline.active i,
#notification-cart .notification__close .notify-wrapper .button--outline:hover i,
.notification--alert .notify-wrapper .button--outline.active i,
.notification--alert .notify-wrapper .button--outline:hover i,
.notify-wrapper .button--outline.active #notification-cart .notification__close i,
.notify-wrapper .button--outline.active .icon,
.notify-wrapper .button--outline.active .notification--alert i,
.notify-wrapper .button--outline:hover #notification-cart .notification__close i,
.notify-wrapper .button--outline:hover .icon,
.notify-wrapper .button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--flat {
box-shadow: inset 0 0 0 100px #44b678;
}
.notify-wrapper .button--flat.active,
.notify-wrapper .button--flat:hover {
box-shadow: inset 0 0 0 100px #369160;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--flat.active i,
#notification-cart .notification__close .notify-wrapper .button--flat:hover i,
.notification--alert .notify-wrapper .button--flat.active i,
.notification--alert .notify-wrapper .button--flat:hover i,
.notify-wrapper .button--flat.active #notification-cart .notification__close i,
.notify-wrapper .button--flat.active .icon,
.notify-wrapper .button--flat.active .notification--alert i,
.notify-wrapper .button--flat:hover #notification-cart .notification__close i,
.notify-wrapper .button--flat:hover .icon,
.notify-wrapper .button--flat:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--flat.active,
.notify-wrapper .button--flat:active {
box-shadow: inset 0 0 0 100px #235d3d;
}
.notify-wrapper .button--shadow:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
box-shadow: 0 0 30px rgba(20, 42, 94, 0.25);
content: '';
}
.notify-wrapper .button--state.active:not(:disabled) .state--inactive {
display: none;
}
.notify-wrapper .button--state.active:not(:disabled) .state--active,
.notify-wrapper .button--state:not(.active) .state--inactive {
display: block;
}
.notify-wrapper .button--state:not(.active) .state--active {
display: none;
}
.notify-wrapper .button--pill {
border-radius: 44px;
}
#notification-cart
.notification__close
.notify-wrapper
.button--icon:not(.button--icon--only)
i,
.notification--alert .notify-wrapper .button--icon:not(.button--icon--only) i,
.notify-wrapper
.button--icon:not(.button--icon--only)
#notification-cart
.notification__close
i,
.notify-wrapper .button--icon:not(.button--icon--only) .icon,
.notify-wrapper .button--icon:not(.button--icon--only) .notification--alert i {
padding-left: 0;
padding-right: 0;
}
.notify-wrapper .button--icon i,
.notify-wrapper .button--icon span {
margin-left: auto;
}
.notify-wrapper .button--icon i ~ span,
.notify-wrapper .button--icon span ~ i {
margin-left: 5px !important;
margin-right: auto;
}
.notify-wrapper .button--icon--only {
width: 44px;
padding: 0 !important;
}
.notify-wrapper .button--auto {
box-shadow: inset 0 0 0 100px #44b678;
height: auto !important;
}
.notify-wrapper .button--auto span {
line-height: 1.6;
}
.notify-wrapper .button--loading {
box-shadow: inset 0 0 0 32px #9c9c9c !important;
pointer-events: none !important;
}
.notify-wrapper .button--loading:after {
animation: rotate 0.6s linear infinite;
display: block !important;
overflow: hidden;
opacity: 1;
width: 24px;
height: 24px;
margin: 4px auto;
border-radius: 50%;
border: 2px solid hsla(0, 0%, 100%, 0.3);
border-top-color: #fff;
box-sizing: border-box;
content: '';
}
.notify-wrapper .button--loading > * {
display: none !important;
}
.notify-wrapper .button--xs {
font-size: 12px;
height: 24px;
line-height: 24px;
}
.notify-wrapper .button--xs.button--icon--only {
width: 24px;
height: 24px;
}
.notify-wrapper .button--sm {
font-size: 13px;
height: 34px;
line-height: 34px;
}
.notify-wrapper .button--sm.button--icon--only {
width: 34px;
height: 34px;
}
.notify-wrapper .button--md {
font-size: 15px;
height: 44px;
line-height: 44px;
}
.notify-wrapper .button--md.button--icon--only {
width: 44px;
height: 44px;
}
.notify-wrapper .button--lg {
font-size: 17px;
height: 54px;
line-height: 54px;
}
.notify-wrapper .button--lg.button--icon--only {
width: 54px;
height: 54px;
}
.notify-wrapper .button--xl {
font-size: 20px;
height: 64px;
line-height: 64px;
}
.notify-wrapper .button--xl.button--icon--only {
width: 64px;
height: 64px;
}
.notify-wrapper .button--default {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--default i,
.notification--alert .notify-wrapper .button--default i,
.notify-wrapper .button--default #notification-cart .notification__close i,
.notify-wrapper .button--default .icon,
.notify-wrapper .button--default .notification--alert i {
color: #fff;
}
.notify-wrapper .button--default.button--outline {
box-shadow: inset 0 0 0 1px #44b678;
color: #44b678;
}
#notification-cart
.notification__close
.notify-wrapper
.button--default.button--outline
i,
.notification--alert .notify-wrapper .button--default.button--outline i,
.notify-wrapper
.button--default.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--default.button--outline .icon,
.notify-wrapper .button--default.button--outline .notification--alert i {
color: #44b678;
}
.notify-wrapper .button--default.button--outline:hover {
box-shadow: inset 0 0 0 100px #3da36c;
}
.notify-wrapper .button--default.button--outline.active,
.notify-wrapper .button--default.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #3da36c;
}
#notification-cart
.notification__close
.notify-wrapper
.button--default.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--default.button--outline:active
i,
.notification--alert .notify-wrapper .button--default.button--outline.active i,
.notification--alert .notify-wrapper .button--default.button--outline:active i,
.notify-wrapper
.button--default.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--default.button--outline.active .icon,
.notify-wrapper .button--default.button--outline.active .notification--alert i,
.notify-wrapper
.button--default.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--default.button--outline:active .icon,
.notify-wrapper .button--default.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--default.button--flat {
box-shadow: inset 0 0 0 100px #44b678;
}
.notify-wrapper .button--default:hover {
box-shadow: inset 0 0 0 100px #3da36c;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--default:hover i,
.notification--alert .notify-wrapper .button--default:hover i,
.notify-wrapper .button--default:hover #notification-cart .notification__close i,
.notify-wrapper .button--default:hover .icon,
.notify-wrapper .button--default:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--default.active,
.notify-wrapper .button--default:active {
box-shadow: inset 0 0 0 100px #369160;
}
.notify-wrapper .button--default--hover.active,
.notify-wrapper .button--default--hover:hover {
box-shadow: inset 0 0 0 100px #3da36c !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--default--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--default--hover:hover i,
.notification--alert .notify-wrapper .button--default--hover.active i,
.notification--alert .notify-wrapper .button--default--hover:hover i,
.notify-wrapper .button--default--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--default--hover.active .icon,
.notify-wrapper .button--default--hover.active .notification--alert i,
.notify-wrapper .button--default--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--default--hover:hover .icon,
.notify-wrapper .button--default--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--default--hover.active,
.notify-wrapper .button--default--hover:active {
box-shadow: inset 0 0 0 100px #369160 !important;
}
.notify-wrapper .button--green {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--green i,
.notification--alert .notify-wrapper .button--green i,
.notify-wrapper .button--green #notification-cart .notification__close i,
.notify-wrapper .button--green .icon,
.notify-wrapper .button--green .notification--alert i {
color: #fff;
}
.notify-wrapper .button--green.button--outline {
box-shadow: inset 0 0 0 1px #44b678;
color: #44b678;
}
#notification-cart .notification__close .notify-wrapper .button--green.button--outline i,
.notification--alert .notify-wrapper .button--green.button--outline i,
.notify-wrapper .button--green.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--green.button--outline .icon,
.notify-wrapper .button--green.button--outline .notification--alert i {
color: #44b678;
}
.notify-wrapper .button--green.button--outline:hover {
box-shadow: inset 0 0 0 100px #44b678;
}
.notify-wrapper .button--green.button--outline.active,
.notify-wrapper .button--green.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #44b678;
}
#notification-cart
.notification__close
.notify-wrapper
.button--green.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--green.button--outline:active
i,
.notification--alert .notify-wrapper .button--green.button--outline.active i,
.notification--alert .notify-wrapper .button--green.button--outline:active i,
.notify-wrapper
.button--green.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--green.button--outline.active .icon,
.notify-wrapper .button--green.button--outline.active .notification--alert i,
.notify-wrapper
.button--green.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--green.button--outline:active .icon,
.notify-wrapper .button--green.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--green.button--flat {
box-shadow: inset 0 0 0 100px #44b678;
}
.notify-wrapper .button--green:hover {
box-shadow: inset 0 0 0 100px #44b678;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--green:hover i,
.notification--alert .notify-wrapper .button--green:hover i,
.notify-wrapper .button--green:hover #notification-cart .notification__close i,
.notify-wrapper .button--green:hover .icon,
.notify-wrapper .button--green:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--green.active,
.notify-wrapper .button--green:active {
box-shadow: inset 0 0 0 100px #3b9e62;
}
.notify-wrapper .button--green--hover.active,
.notify-wrapper .button--green--hover:hover {
box-shadow: inset 0 0 0 100px #44b678 !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--green--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--green--hover:hover i,
.notification--alert .notify-wrapper .button--green--hover.active i,
.notification--alert .notify-wrapper .button--green--hover:hover i,
.notify-wrapper .button--green--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--green--hover.active .icon,
.notify-wrapper .button--green--hover.active .notification--alert i,
.notify-wrapper .button--green--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--green--hover:hover .icon,
.notify-wrapper .button--green--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--green--hover.active,
.notify-wrapper .button--green--hover:active {
box-shadow: inset 0 0 0 100px #3b9e62 !important;
}
.notify-wrapper .button--blue {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--blue i,
.notification--alert .notify-wrapper .button--blue i,
.notify-wrapper .button--blue #notification-cart .notification__close i,
.notify-wrapper .button--blue .icon,
.notify-wrapper .button--blue .notification--alert i {
color: #fff;
}
.notify-wrapper .button--blue.button--outline {
box-shadow: inset 0 0 0 1px #336aea;
color: #336aea;
}
#notification-cart .notification__close .notify-wrapper .button--blue.button--outline i,
.notification--alert .notify-wrapper .button--blue.button--outline i,
.notify-wrapper .button--blue.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--blue.button--outline .icon,
.notify-wrapper .button--blue.button--outline .notification--alert i {
color: #336aea;
}
.notify-wrapper .button--blue.button--outline:hover {
box-shadow: inset 0 0 0 100px #336aea;
}
.notify-wrapper .button--blue.button--outline.active,
.notify-wrapper .button--blue.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #336aea;
}
#notification-cart
.notification__close
.notify-wrapper
.button--blue.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--blue.button--outline:active
i,
.notification--alert .notify-wrapper .button--blue.button--outline.active i,
.notification--alert .notify-wrapper .button--blue.button--outline:active i,
.notify-wrapper
.button--blue.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--blue.button--outline.active .icon,
.notify-wrapper .button--blue.button--outline.active .notification--alert i,
.notify-wrapper
.button--blue.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--blue.button--outline:active .icon,
.notify-wrapper .button--blue.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--blue.button--flat,
.notify-wrapper .button--blue:hover {
box-shadow: inset 0 0 0 100px #336aea;
}
#notification-cart .notification__close .notify-wrapper .button--blue:hover i,
.notification--alert .notify-wrapper .button--blue:hover i,
.notify-wrapper .button--blue:hover,
.notify-wrapper .button--blue:hover #notification-cart .notification__close i,
.notify-wrapper .button--blue:hover .icon,
.notify-wrapper .button--blue:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--blue.active,
.notify-wrapper .button--blue:active {
box-shadow: inset 0 0 0 100px #2955bb;
}
.notify-wrapper .button--blue--hover.active,
.notify-wrapper .button--blue--hover:hover {
box-shadow: inset 0 0 0 100px #336aea !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--blue--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--blue--hover:hover i,
.notification--alert .notify-wrapper .button--blue--hover.active i,
.notification--alert .notify-wrapper .button--blue--hover:hover i,
.notify-wrapper .button--blue--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--blue--hover.active .icon,
.notify-wrapper .button--blue--hover.active .notification--alert i,
.notify-wrapper .button--blue--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--blue--hover:hover .icon,
.notify-wrapper .button--blue--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--blue--hover.active,
.notify-wrapper .button--blue--hover:active {
box-shadow: inset 0 0 0 100px #2955bb !important;
}
.notify-wrapper .button--gray {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--gray i,
.notification--alert .notify-wrapper .button--gray i,
.notify-wrapper .button--gray #notification-cart .notification__close i,
.notify-wrapper .button--gray .icon,
.notify-wrapper .button--gray .notification--alert i {
color: #fff;
}
.notify-wrapper .button--gray.button--outline {
box-shadow: inset 0 0 0 1px #9c9c9c;
color: #9c9c9c;
}
#notification-cart .notification__close .notify-wrapper .button--gray.button--outline i,
.notification--alert .notify-wrapper .button--gray.button--outline i,
.notify-wrapper .button--gray.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--gray.button--outline .icon,
.notify-wrapper .button--gray.button--outline .notification--alert i {
color: #9c9c9c;
}
.notify-wrapper .button--gray.button--outline:hover {
box-shadow: inset 0 0 0 100px #777;
}
.notify-wrapper .button--gray.button--outline.active,
.notify-wrapper .button--gray.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #777;
}
#notification-cart
.notification__close
.notify-wrapper
.button--gray.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--gray.button--outline:active
i,
.notification--alert .notify-wrapper .button--gray.button--outline.active i,
.notification--alert .notify-wrapper .button--gray.button--outline:active i,
.notify-wrapper
.button--gray.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--gray.button--outline.active .icon,
.notify-wrapper .button--gray.button--outline.active .notification--alert i,
.notify-wrapper
.button--gray.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--gray.button--outline:active .icon,
.notify-wrapper .button--gray.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--gray.button--flat {
box-shadow: inset 0 0 0 100px #9c9c9c;
}
.notify-wrapper .button--gray:hover {
box-shadow: inset 0 0 0 100px #777;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--gray:hover i,
.notification--alert .notify-wrapper .button--gray:hover i,
.notify-wrapper .button--gray:hover #notification-cart .notification__close i,
.notify-wrapper .button--gray:hover .icon,
.notify-wrapper .button--gray:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--gray.active,
.notify-wrapper .button--gray:active {
box-shadow: inset 0 0 0 100px #424242;
}
.notify-wrapper .button--gray--hover.active,
.notify-wrapper .button--gray--hover:hover {
box-shadow: inset 0 0 0 100px #777 !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--gray--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--gray--hover:hover i,
.notification--alert .notify-wrapper .button--gray--hover.active i,
.notification--alert .notify-wrapper .button--gray--hover:hover i,
.notify-wrapper .button--gray--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--gray--hover.active .icon,
.notify-wrapper .button--gray--hover.active .notification--alert i,
.notify-wrapper .button--gray--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--gray--hover:hover .icon,
.notify-wrapper .button--gray--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--gray--hover.active,
.notify-wrapper .button--gray--hover:active {
box-shadow: inset 0 0 0 100px #424242 !important;
}
.notify-wrapper .button--red {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--red i,
.notification--alert .notify-wrapper .button--red i,
.notify-wrapper .button--red #notification-cart .notification__close i,
.notify-wrapper .button--red .icon,
.notify-wrapper .button--red .notification--alert i {
color: #fff;
}
.notify-wrapper .button--red.button--outline {
box-shadow: inset 0 0 0 1px #ff7d6a;
color: #ff7d6a;
}
#notification-cart .notification__close .notify-wrapper .button--red.button--outline i,
.notification--alert .notify-wrapper .button--red.button--outline i,
.notify-wrapper .button--red.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--red.button--outline .icon,
.notify-wrapper .button--red.button--outline .notification--alert i {
color: #ff7d6a;
}
.notify-wrapper .button--red.button--outline:hover {
box-shadow: inset 0 0 0 100px #ff7d6a;
}
.notify-wrapper .button--red.button--outline.active,
.notify-wrapper .button--red.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #ff7d6a;
}
#notification-cart
.notification__close
.notify-wrapper
.button--red.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--red.button--outline:active
i,
.notification--alert .notify-wrapper .button--red.button--outline.active i,
.notification--alert .notify-wrapper .button--red.button--outline:active i,
.notify-wrapper
.button--red.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--red.button--outline.active .icon,
.notify-wrapper .button--red.button--outline.active .notification--alert i,
.notify-wrapper
.button--red.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--red.button--outline:active .icon,
.notify-wrapper .button--red.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--red.button--flat,
.notify-wrapper .button--red:hover {
box-shadow: inset 0 0 0 100px #ff7d6a;
}
#notification-cart .notification__close .notify-wrapper .button--red:hover i,
.notification--alert .notify-wrapper .button--red:hover i,
.notify-wrapper .button--red:hover,
.notify-wrapper .button--red:hover #notification-cart .notification__close i,
.notify-wrapper .button--red:hover .icon,
.notify-wrapper .button--red:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--red.active,
.notify-wrapper .button--red:active {
box-shadow: inset 0 0 0 100px #eb644c;
}
.notify-wrapper .button--red--hover.active,
.notify-wrapper .button--red--hover:hover {
box-shadow: inset 0 0 0 100px #ff7d6a !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--red--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--red--hover:hover i,
.notification--alert .notify-wrapper .button--red--hover.active i,
.notification--alert .notify-wrapper .button--red--hover:hover i,
.notify-wrapper .button--red--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--red--hover.active .icon,
.notify-wrapper .button--red--hover.active .notification--alert i,
.notify-wrapper .button--red--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--red--hover:hover .icon,
.notify-wrapper .button--red--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--red--hover.active,
.notify-wrapper .button--red--hover:active {
box-shadow: inset 0 0 0 100px #eb644c !important;
}
.notify-wrapper .button--yellow {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--yellow i,
.notification--alert .notify-wrapper .button--yellow i,
.notify-wrapper .button--yellow #notification-cart .notification__close i,
.notify-wrapper .button--yellow .icon,
.notify-wrapper .button--yellow .notification--alert i {
color: #fff;
}
.notify-wrapper .button--yellow.button--outline {
box-shadow: inset 0 0 0 1px #feb602;
color: #feb602;
}
#notification-cart .notification__close .notify-wrapper .button--yellow.button--outline i,
.notification--alert .notify-wrapper .button--yellow.button--outline i,
.notify-wrapper .button--yellow.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--yellow.button--outline .icon,
.notify-wrapper .button--yellow.button--outline .notification--alert i {
color: #feb602;
}
.notify-wrapper .button--yellow.button--outline:hover {
box-shadow: inset 0 0 0 100px #f4980a;
}
.notify-wrapper .button--yellow.button--outline.active,
.notify-wrapper .button--yellow.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #f4980a;
}
#notification-cart
.notification__close
.notify-wrapper
.button--yellow.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--yellow.button--outline:active
i,
.notification--alert .notify-wrapper .button--yellow.button--outline.active i,
.notification--alert .notify-wrapper .button--yellow.button--outline:active i,
.notify-wrapper
.button--yellow.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--yellow.button--outline.active .icon,
.notify-wrapper .button--yellow.button--outline.active .notification--alert i,
.notify-wrapper
.button--yellow.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--yellow.button--outline:active .icon,
.notify-wrapper .button--yellow.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--yellow.button--flat {
box-shadow: inset 0 0 0 100px #feb602;
}
.notify-wrapper .button--yellow:hover {
box-shadow: inset 0 0 0 100px #f4980a;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--yellow:hover i,
.notification--alert .notify-wrapper .button--yellow:hover i,
.notify-wrapper .button--yellow:hover #notification-cart .notification__close i,
.notify-wrapper .button--yellow:hover .icon,
.notify-wrapper .button--yellow:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--yellow.active,
.notify-wrapper .button--yellow:active {
box-shadow: inset 0 0 0 100px #f4980a;
}
.notify-wrapper .button--yellow--hover.active,
.notify-wrapper .button--yellow--hover:hover {
box-shadow: inset 0 0 0 100px #f4980a !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--yellow--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--yellow--hover:hover i,
.notification--alert .notify-wrapper .button--yellow--hover.active i,
.notification--alert .notify-wrapper .button--yellow--hover:hover i,
.notify-wrapper .button--yellow--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--yellow--hover.active .icon,
.notify-wrapper .button--yellow--hover.active .notification--alert i,
.notify-wrapper .button--yellow--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--yellow--hover:hover .icon,
.notify-wrapper .button--yellow--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--yellow--hover.active,
.notify-wrapper .button--yellow--hover:active {
box-shadow: inset 0 0 0 100px #f4980a !important;
}
.notify-wrapper .button--purple {
--color: color($color, 'buttons-text');
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--purple i,
.notification--alert .notify-wrapper .button--purple i,
.notify-wrapper .button--purple #notification-cart .notification__close i,
.notify-wrapper .button--purple .icon,
.notify-wrapper .button--purple .notification--alert i {
color: #fff;
}
.notify-wrapper .button--purple.button--outline {
box-shadow: inset 0 0 0 1px #6569bd;
color: #6569bd;
}
#notification-cart .notification__close .notify-wrapper .button--purple.button--outline i,
.notification--alert .notify-wrapper .button--purple.button--outline i,
.notify-wrapper .button--purple.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--purple.button--outline .icon,
.notify-wrapper .button--purple.button--outline .notification--alert i {
color: #6569bd;
}
.notify-wrapper .button--purple.button--outline:hover {
box-shadow: inset 0 0 0 100px #6569bd;
}
.notify-wrapper .button--purple.button--outline.active,
.notify-wrapper .button--purple.button--outline:active {
color: #fff;
box-shadow: inset 0 0 0 100px #6569bd;
}
#notification-cart
.notification__close
.notify-wrapper
.button--purple.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--purple.button--outline:active
i,
.notification--alert .notify-wrapper .button--purple.button--outline.active i,
.notification--alert .notify-wrapper .button--purple.button--outline:active i,
.notify-wrapper
.button--purple.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--purple.button--outline.active .icon,
.notify-wrapper .button--purple.button--outline.active .notification--alert i,
.notify-wrapper
.button--purple.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--purple.button--outline:active .icon,
.notify-wrapper .button--purple.button--outline:active .notification--alert i {
color: #fff;
}
.notify-wrapper .button--purple.button--flat {
box-shadow: inset 0 0 0 100px #6569bd;
}
.notify-wrapper .button--purple:hover {
box-shadow: inset 0 0 0 100px #6569bd;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--purple:hover i,
.notification--alert .notify-wrapper .button--purple:hover i,
.notify-wrapper .button--purple:hover #notification-cart .notification__close i,
.notify-wrapper .button--purple:hover .icon,
.notify-wrapper .button--purple:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--purple.active,
.notify-wrapper .button--purple:active {
box-shadow: inset 0 0 0 100px #4c50ae;
}
.notify-wrapper .button--purple--hover.active,
.notify-wrapper .button--purple--hover:hover {
box-shadow: inset 0 0 0 100px #6569bd !important;
color: #fff !important;
}
#notification-cart .notification__close .notify-wrapper .button--purple--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--purple--hover:hover i,
.notification--alert .notify-wrapper .button--purple--hover.active i,
.notification--alert .notify-wrapper .button--purple--hover:hover i,
.notify-wrapper .button--purple--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--purple--hover.active .icon,
.notify-wrapper .button--purple--hover.active .notification--alert i,
.notify-wrapper .button--purple--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--purple--hover:hover .icon,
.notify-wrapper .button--purple--hover:hover .notification--alert i {
color: #fff !important;
}
.notify-wrapper .button--purple--hover.active,
.notify-wrapper .button--purple--hover:active {
box-shadow: inset 0 0 0 100px #4c50ae !important;
}
.notify-wrapper .button--inverted {
--color: color($color, 'buttons-text');
color: #777;
}
#notification-cart .notification__close .notify-wrapper .button--inverted i,
.notification--alert .notify-wrapper .button--inverted i,
.notify-wrapper .button--inverted #notification-cart .notification__close i,
.notify-wrapper .button--inverted .icon,
.notify-wrapper .button--inverted .notification--alert i {
color: #777;
}
.notify-wrapper .button--inverted.button--outline {
box-shadow: inset 0 0 0 1px #fff;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--inverted.button--outline
i,
.notification--alert .notify-wrapper .button--inverted.button--outline i,
.notify-wrapper
.button--inverted.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--inverted.button--outline .icon,
.notify-wrapper .button--inverted.button--outline .notification--alert i {
color: #fff;
}
.notify-wrapper .button--inverted.button--outline:hover {
box-shadow: inset 0 0 0 100px #e5e5e5;
}
.notify-wrapper .button--inverted.button--outline.active,
.notify-wrapper .button--inverted.button--outline:active {
color: #777;
box-shadow: inset 0 0 0 100px #e5e5e5;
}
#notification-cart
.notification__close
.notify-wrapper
.button--inverted.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--inverted.button--outline:active
i,
.notification--alert .notify-wrapper .button--inverted.button--outline.active i,
.notification--alert .notify-wrapper .button--inverted.button--outline:active i,
.notify-wrapper
.button--inverted.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--inverted.button--outline.active .icon,
.notify-wrapper .button--inverted.button--outline.active .notification--alert i,
.notify-wrapper
.button--inverted.button--outline:active
#notification-cart
.notification__close
i,
.notify-wrapper .button--inverted.button--outline:active .icon,
.notify-wrapper .button--inverted.button--outline:active .notification--alert i {
color: #777;
}
.notify-wrapper .button--inverted.button--flat {
box-shadow: inset 0 0 0 100px #fff;
}
.notify-wrapper .button--inverted:hover {
box-shadow: inset 0 0 0 100px #e5e5e5;
color: #777;
}
#notification-cart .notification__close .notify-wrapper .button--inverted:hover i,
.notification--alert .notify-wrapper .button--inverted:hover i,
.notify-wrapper .button--inverted:hover #notification-cart .notification__close i,
.notify-wrapper .button--inverted:hover .icon,
.notify-wrapper .button--inverted:hover .notification--alert i {
color: #777;
}
.notify-wrapper .button--inverted.active,
.notify-wrapper .button--inverted:active {
box-shadow: inset 0 0 0 100px #e5e5e5;
}
.notify-wrapper .button--inverted--hover.active,
.notify-wrapper .button--inverted--hover:hover {
box-shadow: inset 0 0 0 100px #e5e5e5 !important;
color: #777 !important;
}
#notification-cart .notification__close .notify-wrapper .button--inverted--hover.active i,
#notification-cart .notification__close .notify-wrapper .button--inverted--hover:hover i,
.notification--alert .notify-wrapper .button--inverted--hover.active i,
.notification--alert .notify-wrapper .button--inverted--hover:hover i,
.notify-wrapper .button--inverted--hover.active #notification-cart .notification__close i,
.notify-wrapper .button--inverted--hover.active .icon,
.notify-wrapper .button--inverted--hover.active .notification--alert i,
.notify-wrapper .button--inverted--hover:hover #notification-cart .notification__close i,
.notify-wrapper .button--inverted--hover:hover .icon,
.notify-wrapper .button--inverted--hover:hover .notification--alert i {
color: #777 !important;
}
.notify-wrapper .button--inverted--hover.active,
.notify-wrapper .button--inverted--hover:active {
box-shadow: inset 0 0 0 100px #e5e5e5 !important;
}
.notify-wrapper .button--behance {
box-shadow: inset 0 0 0 0 #1769ff;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--behance i,
.notification--alert .notify-wrapper .button--behance i,
.notify-wrapper .button--behance #notification-cart .notification__close i,
.notify-wrapper .button--behance .icon,
.notify-wrapper .button--behance .notification--alert i {
color: #fff;
}
.notify-wrapper .button--behance.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #1769ff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--behance.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--behance.button--flat.button--inverted i,
.notify-wrapper
.button--behance.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--behance.button--flat.button--inverted .icon,
.notify-wrapper .button--behance.button--flat.button--inverted .notification--alert i {
color: #1769ff;
}
.notify-wrapper .button--behance.button--flat.button--inverted.active,
.notify-wrapper .button--behance.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #0050e3;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--behance.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--behance.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--behance.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--behance.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--behance.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--behance.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--behance.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--behance.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--behance.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--behance.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--behance.button--flat.button--inverted.active,
.notify-wrapper .button--behance.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #0049cf;
}
.notify-wrapper .button--behance.button--outline {
box-shadow: inset 0 0 0 1px #1769ff;
color: #1769ff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--behance.button--outline
i,
.notification--alert .notify-wrapper .button--behance.button--outline i,
.notify-wrapper
.button--behance.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--behance.button--outline .icon,
.notify-wrapper .button--behance.button--outline .notification--alert i {
color: #1769ff;
}
.notify-wrapper .button--behance.button--outline.active,
.notify-wrapper .button--behance.button--outline:hover {
box-shadow: inset 0 0 0 100px #0050e3;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--behance.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--behance.button--outline:hover
i,
.notification--alert .notify-wrapper .button--behance.button--outline.active i,
.notification--alert .notify-wrapper .button--behance.button--outline:hover i,
.notify-wrapper
.button--behance.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--behance.button--outline.active .icon,
.notify-wrapper .button--behance.button--outline.active .notification--alert i,
.notify-wrapper
.button--behance.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--behance.button--outline:hover .icon,
.notify-wrapper .button--behance.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--behance.button--outline.active,
.notify-wrapper .button--behance.button--outline:active {
box-shadow: inset 0 0 0 100px #0049cf;
}
.notify-wrapper .button--behance.button--flat {
box-shadow: inset 0 0 0 100px #1769ff;
}
.notify-wrapper .button--behance.active,
.notify-wrapper .button--behance:hover {
box-shadow: inset 0 0 0 100px #0050e3;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--behance.active i,
#notification-cart .notification__close .notify-wrapper .button--behance:hover i,
.notification--alert .notify-wrapper .button--behance.active i,
.notification--alert .notify-wrapper .button--behance:hover i,
.notify-wrapper .button--behance.active #notification-cart .notification__close i,
.notify-wrapper .button--behance.active .icon,
.notify-wrapper .button--behance.active .notification--alert i,
.notify-wrapper .button--behance:hover #notification-cart .notification__close i,
.notify-wrapper .button--behance:hover .icon,
.notify-wrapper .button--behance:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--behance.active,
.notify-wrapper .button--behance:active {
box-shadow: inset 0 0 0 100px #0049cf;
}
.notify-wrapper .button--dribbble {
box-shadow: inset 0 0 0 0 #ea4c89;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--dribbble i,
.notification--alert .notify-wrapper .button--dribbble i,
.notify-wrapper .button--dribbble #notification-cart .notification__close i,
.notify-wrapper .button--dribbble .icon,
.notify-wrapper .button--dribbble .notification--alert i {
color: #fff;
}
.notify-wrapper .button--dribbble.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #ea4c89;
}
#notification-cart
.notification__close
.notify-wrapper
.button--dribbble.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--dribbble.button--flat.button--inverted i,
.notify-wrapper
.button--dribbble.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--dribbble.button--flat.button--inverted .icon,
.notify-wrapper .button--dribbble.button--flat.button--inverted .notification--alert i {
color: #ea4c89;
}
.notify-wrapper .button--dribbble.button--flat.button--inverted.active,
.notify-wrapper .button--dribbble.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #e51e6b;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--dribbble.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--dribbble.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--dribbble.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--dribbble.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--dribbble.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--dribbble.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--dribbble.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--dribbble.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--dribbble.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--dribbble.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--dribbble.button--flat.button--inverted.active,
.notify-wrapper .button--dribbble.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #d61962;
}
.notify-wrapper .button--dribbble.button--outline {
box-shadow: inset 0 0 0 1px #ea4c89;
color: #ea4c89;
}
#notification-cart
.notification__close
.notify-wrapper
.button--dribbble.button--outline
i,
.notification--alert .notify-wrapper .button--dribbble.button--outline i,
.notify-wrapper
.button--dribbble.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--dribbble.button--outline .icon,
.notify-wrapper .button--dribbble.button--outline .notification--alert i {
color: #ea4c89;
}
.notify-wrapper .button--dribbble.button--outline.active,
.notify-wrapper .button--dribbble.button--outline:hover {
box-shadow: inset 0 0 0 100px #e51e6b;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--dribbble.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--dribbble.button--outline:hover
i,
.notification--alert .notify-wrapper .button--dribbble.button--outline.active i,
.notification--alert .notify-wrapper .button--dribbble.button--outline:hover i,
.notify-wrapper
.button--dribbble.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--dribbble.button--outline.active .icon,
.notify-wrapper .button--dribbble.button--outline.active .notification--alert i,
.notify-wrapper
.button--dribbble.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--dribbble.button--outline:hover .icon,
.notify-wrapper .button--dribbble.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--dribbble.button--outline.active,
.notify-wrapper .button--dribbble.button--outline:active {
box-shadow: inset 0 0 0 100px #d61962;
}
.notify-wrapper .button--dribbble.button--flat {
box-shadow: inset 0 0 0 100px #ea4c89;
}
.notify-wrapper .button--dribbble.active,
.notify-wrapper .button--dribbble:hover {
box-shadow: inset 0 0 0 100px #e51e6b;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--dribbble.active i,
#notification-cart .notification__close .notify-wrapper .button--dribbble:hover i,
.notification--alert .notify-wrapper .button--dribbble.active i,
.notification--alert .notify-wrapper .button--dribbble:hover i,
.notify-wrapper .button--dribbble.active #notification-cart .notification__close i,
.notify-wrapper .button--dribbble.active .icon,
.notify-wrapper .button--dribbble.active .notification--alert i,
.notify-wrapper .button--dribbble:hover #notification-cart .notification__close i,
.notify-wrapper .button--dribbble:hover .icon,
.notify-wrapper .button--dribbble:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--dribbble.active,
.notify-wrapper .button--dribbble:active {
box-shadow: inset 0 0 0 100px #d61962;
}
.notify-wrapper .button--facebook {
box-shadow: inset 0 0 0 0 #1877f2;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--facebook i,
.notification--alert .notify-wrapper .button--facebook i,
.notify-wrapper .button--facebook #notification-cart .notification__close i,
.notify-wrapper .button--facebook .icon,
.notify-wrapper .button--facebook .notification--alert i {
color: #fff;
}
.notify-wrapper .button--facebook.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #1877f2;
}
#notification-cart
.notification__close
.notify-wrapper
.button--facebook.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--facebook.button--flat.button--inverted i,
.notify-wrapper
.button--facebook.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--facebook.button--flat.button--inverted .icon,
.notify-wrapper .button--facebook.button--flat.button--inverted .notification--alert i {
color: #1877f2;
}
.notify-wrapper .button--facebook.button--flat.button--inverted.active,
.notify-wrapper .button--facebook.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #0b5fcc;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--facebook.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--facebook.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--facebook.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--facebook.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--facebook.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--facebook.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--facebook.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--facebook.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--facebook.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--facebook.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--facebook.button--flat.button--inverted.active,
.notify-wrapper .button--facebook.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #0a56b8;
}
.notify-wrapper .button--facebook.button--outline {
box-shadow: inset 0 0 0 1px #1877f2;
color: #1877f2;
}
#notification-cart
.notification__close
.notify-wrapper
.button--facebook.button--outline
i,
.notification--alert .notify-wrapper .button--facebook.button--outline i,
.notify-wrapper
.button--facebook.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--facebook.button--outline .icon,
.notify-wrapper .button--facebook.button--outline .notification--alert i {
color: #1877f2;
}
.notify-wrapper .button--facebook.button--outline.active,
.notify-wrapper .button--facebook.button--outline:hover {
box-shadow: inset 0 0 0 100px #0b5fcc;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--facebook.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--facebook.button--outline:hover
i,
.notification--alert .notify-wrapper .button--facebook.button--outline.active i,
.notification--alert .notify-wrapper .button--facebook.button--outline:hover i,
.notify-wrapper
.button--facebook.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--facebook.button--outline.active .icon,
.notify-wrapper .button--facebook.button--outline.active .notification--alert i,
.notify-wrapper
.button--facebook.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--facebook.button--outline:hover .icon,
.notify-wrapper .button--facebook.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--facebook.button--outline.active,
.notify-wrapper .button--facebook.button--outline:active {
box-shadow: inset 0 0 0 100px #0a56b8;
}
.notify-wrapper .button--facebook.button--flat {
box-shadow: inset 0 0 0 100px #1877f2;
}
.notify-wrapper .button--facebook.active,
.notify-wrapper .button--facebook:hover {
box-shadow: inset 0 0 0 100px #0b5fcc;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--facebook.active i,
#notification-cart .notification__close .notify-wrapper .button--facebook:hover i,
.notification--alert .notify-wrapper .button--facebook.active i,
.notification--alert .notify-wrapper .button--facebook:hover i,
.notify-wrapper .button--facebook.active #notification-cart .notification__close i,
.notify-wrapper .button--facebook.active .icon,
.notify-wrapper .button--facebook.active .notification--alert i,
.notify-wrapper .button--facebook:hover #notification-cart .notification__close i,
.notify-wrapper .button--facebook:hover .icon,
.notify-wrapper .button--facebook:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--facebook.active,
.notify-wrapper .button--facebook:active {
box-shadow: inset 0 0 0 100px #0a56b8;
}
.notify-wrapper .button--google {
box-shadow: inset 0 0 0 0 #dd4b39;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--google i,
.notification--alert .notify-wrapper .button--google i,
.notify-wrapper .button--google #notification-cart .notification__close i,
.notify-wrapper .button--google .icon,
.notify-wrapper .button--google .notification--alert i {
color: #fff;
}
.notify-wrapper .button--google.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #dd4b39;
}
#notification-cart
.notification__close
.notify-wrapper
.button--google.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--google.button--flat.button--inverted i,
.notify-wrapper
.button--google.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--google.button--flat.button--inverted .icon,
.notify-wrapper .button--google.button--flat.button--inverted .notification--alert i {
color: #dd4b39;
}
.notify-wrapper .button--google.button--flat.button--inverted.active,
.notify-wrapper .button--google.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #c23321;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--google.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--google.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--google.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--google.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--google.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--google.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--google.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--google.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--google.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--google.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--google.button--flat.button--inverted.active,
.notify-wrapper .button--google.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #b02e1e;
}
.notify-wrapper .button--google.button--outline {
box-shadow: inset 0 0 0 1px #dd4b39;
color: #dd4b39;
}
#notification-cart .notification__close .notify-wrapper .button--google.button--outline i,
.notification--alert .notify-wrapper .button--google.button--outline i,
.notify-wrapper .button--google.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--google.button--outline .icon,
.notify-wrapper .button--google.button--outline .notification--alert i {
color: #dd4b39;
}
.notify-wrapper .button--google.button--outline.active,
.notify-wrapper .button--google.button--outline:hover {
box-shadow: inset 0 0 0 100px #c23321;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--google.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--google.button--outline:hover
i,
.notification--alert .notify-wrapper .button--google.button--outline.active i,
.notification--alert .notify-wrapper .button--google.button--outline:hover i,
.notify-wrapper
.button--google.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--google.button--outline.active .icon,
.notify-wrapper .button--google.button--outline.active .notification--alert i,
.notify-wrapper
.button--google.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--google.button--outline:hover .icon,
.notify-wrapper .button--google.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--google.button--outline.active,
.notify-wrapper .button--google.button--outline:active {
box-shadow: inset 0 0 0 100px #b02e1e;
}
.notify-wrapper .button--google.button--flat {
box-shadow: inset 0 0 0 100px #dd4b39;
}
.notify-wrapper .button--google.active,
.notify-wrapper .button--google:hover {
box-shadow: inset 0 0 0 100px #c23321;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--google.active i,
#notification-cart .notification__close .notify-wrapper .button--google:hover i,
.notification--alert .notify-wrapper .button--google.active i,
.notification--alert .notify-wrapper .button--google:hover i,
.notify-wrapper .button--google.active #notification-cart .notification__close i,
.notify-wrapper .button--google.active .icon,
.notify-wrapper .button--google.active .notification--alert i,
.notify-wrapper .button--google:hover #notification-cart .notification__close i,
.notify-wrapper .button--google:hover .icon,
.notify-wrapper .button--google:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--google.active,
.notify-wrapper .button--google:active {
box-shadow: inset 0 0 0 100px #b02e1e;
}
.notify-wrapper .button--instagram {
box-shadow: inset 0 0 0 0 #c32aa3;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--instagram i,
.notification--alert .notify-wrapper .button--instagram i,
.notify-wrapper .button--instagram #notification-cart .notification__close i,
.notify-wrapper .button--instagram .icon,
.notify-wrapper .button--instagram .notification--alert i {
color: #fff;
}
.notify-wrapper .button--instagram.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #c32aa3;
}
#notification-cart
.notification__close
.notify-wrapper
.button--instagram.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--instagram.button--flat.button--inverted i,
.notify-wrapper
.button--instagram.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--instagram.button--flat.button--inverted .icon,
.notify-wrapper .button--instagram.button--flat.button--inverted .notification--alert i {
color: #c32aa3;
}
.notify-wrapper .button--instagram.button--flat.button--inverted.active,
.notify-wrapper .button--instagram.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #992180;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--instagram.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--instagram.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--instagram.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--instagram.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--instagram.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--instagram.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--instagram.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--instagram.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--instagram.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--instagram.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--instagram.button--flat.button--inverted.active,
.notify-wrapper .button--instagram.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #881d72;
}
.notify-wrapper .button--instagram.button--outline {
box-shadow: inset 0 0 0 1px #c32aa3;
color: #c32aa3;
}
#notification-cart
.notification__close
.notify-wrapper
.button--instagram.button--outline
i,
.notification--alert .notify-wrapper .button--instagram.button--outline i,
.notify-wrapper
.button--instagram.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--instagram.button--outline .icon,
.notify-wrapper .button--instagram.button--outline .notification--alert i {
color: #c32aa3;
}
.notify-wrapper .button--instagram.button--outline.active,
.notify-wrapper .button--instagram.button--outline:hover {
box-shadow: inset 0 0 0 100px #992180;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--instagram.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--instagram.button--outline:hover
i,
.notification--alert .notify-wrapper .button--instagram.button--outline.active i,
.notification--alert .notify-wrapper .button--instagram.button--outline:hover i,
.notify-wrapper
.button--instagram.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--instagram.button--outline.active .icon,
.notify-wrapper .button--instagram.button--outline.active .notification--alert i,
.notify-wrapper
.button--instagram.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--instagram.button--outline:hover .icon,
.notify-wrapper .button--instagram.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--instagram.button--outline.active,
.notify-wrapper .button--instagram.button--outline:active {
box-shadow: inset 0 0 0 100px #881d72;
}
.notify-wrapper .button--instagram.button--flat {
box-shadow: inset 0 0 0 100px #c32aa3;
}
.notify-wrapper .button--instagram.active,
.notify-wrapper .button--instagram:hover {
box-shadow: inset 0 0 0 100px #992180;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--instagram.active i,
#notification-cart .notification__close .notify-wrapper .button--instagram:hover i,
.notification--alert .notify-wrapper .button--instagram.active i,
.notification--alert .notify-wrapper .button--instagram:hover i,
.notify-wrapper .button--instagram.active #notification-cart .notification__close i,
.notify-wrapper .button--instagram.active .icon,
.notify-wrapper .button--instagram.active .notification--alert i,
.notify-wrapper .button--instagram:hover #notification-cart .notification__close i,
.notify-wrapper .button--instagram:hover .icon,
.notify-wrapper .button--instagram:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--instagram.active,
.notify-wrapper .button--instagram:active {
box-shadow: inset 0 0 0 100px #881d72;
}
.notify-wrapper .button--linkedin {
box-shadow: inset 0 0 0 0 #0a66c2;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--linkedin i,
.notification--alert .notify-wrapper .button--linkedin i,
.notify-wrapper .button--linkedin #notification-cart .notification__close i,
.notify-wrapper .button--linkedin .icon,
.notify-wrapper .button--linkedin .notification--alert i {
color: #fff;
}
.notify-wrapper .button--linkedin.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #0a66c2;
}
#notification-cart
.notification__close
.notify-wrapper
.button--linkedin.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--linkedin.button--flat.button--inverted i,
.notify-wrapper
.button--linkedin.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--linkedin.button--flat.button--inverted .icon,
.notify-wrapper .button--linkedin.button--flat.button--inverted .notification--alert i {
color: #0a66c2;
}
.notify-wrapper .button--linkedin.button--flat.button--inverted.active,
.notify-wrapper .button--linkedin.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #084d92;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--linkedin.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--linkedin.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--linkedin.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--linkedin.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--linkedin.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--linkedin.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--linkedin.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--linkedin.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--linkedin.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--linkedin.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--linkedin.button--flat.button--inverted.active,
.notify-wrapper .button--linkedin.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #07427e;
}
.notify-wrapper .button--linkedin.button--outline {
box-shadow: inset 0 0 0 1px #0a66c2;
color: #0a66c2;
}
#notification-cart
.notification__close
.notify-wrapper
.button--linkedin.button--outline
i,
.notification--alert .notify-wrapper .button--linkedin.button--outline i,
.notify-wrapper
.button--linkedin.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--linkedin.button--outline .icon,
.notify-wrapper .button--linkedin.button--outline .notification--alert i {
color: #0a66c2;
}
.notify-wrapper .button--linkedin.button--outline.active,
.notify-wrapper .button--linkedin.button--outline:hover {
box-shadow: inset 0 0 0 100px #084d92;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--linkedin.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--linkedin.button--outline:hover
i,
.notification--alert .notify-wrapper .button--linkedin.button--outline.active i,
.notification--alert .notify-wrapper .button--linkedin.button--outline:hover i,
.notify-wrapper
.button--linkedin.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--linkedin.button--outline.active .icon,
.notify-wrapper .button--linkedin.button--outline.active .notification--alert i,
.notify-wrapper
.button--linkedin.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--linkedin.button--outline:hover .icon,
.notify-wrapper .button--linkedin.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--linkedin.button--outline.active,
.notify-wrapper .button--linkedin.button--outline:active {
box-shadow: inset 0 0 0 100px #07427e;
}
.notify-wrapper .button--linkedin.button--flat {
box-shadow: inset 0 0 0 100px #0a66c2;
}
.notify-wrapper .button--linkedin.active,
.notify-wrapper .button--linkedin:hover {
box-shadow: inset 0 0 0 100px #084d92;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--linkedin.active i,
#notification-cart .notification__close .notify-wrapper .button--linkedin:hover i,
.notification--alert .notify-wrapper .button--linkedin.active i,
.notification--alert .notify-wrapper .button--linkedin:hover i,
.notify-wrapper .button--linkedin.active #notification-cart .notification__close i,
.notify-wrapper .button--linkedin.active .icon,
.notify-wrapper .button--linkedin.active .notification--alert i,
.notify-wrapper .button--linkedin:hover #notification-cart .notification__close i,
.notify-wrapper .button--linkedin:hover .icon,
.notify-wrapper .button--linkedin:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--linkedin.active,
.notify-wrapper .button--linkedin:active {
box-shadow: inset 0 0 0 100px #07427e;
}
.notify-wrapper .button--pinterest {
box-shadow: inset 0 0 0 0 #cb2027;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--pinterest i,
.notification--alert .notify-wrapper .button--pinterest i,
.notify-wrapper .button--pinterest #notification-cart .notification__close i,
.notify-wrapper .button--pinterest .icon,
.notify-wrapper .button--pinterest .notification--alert i {
color: #fff;
}
.notify-wrapper .button--pinterest.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #cb2027;
}
#notification-cart
.notification__close
.notify-wrapper
.button--pinterest.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--pinterest.button--flat.button--inverted i,
.notify-wrapper
.button--pinterest.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--pinterest.button--flat.button--inverted .icon,
.notify-wrapper .button--pinterest.button--flat.button--inverted .notification--alert i {
color: #cb2027;
}
.notify-wrapper .button--pinterest.button--flat.button--inverted.active,
.notify-wrapper .button--pinterest.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #9f191f;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--pinterest.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--pinterest.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--pinterest.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--pinterest.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--pinterest.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--pinterest.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--pinterest.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--pinterest.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--pinterest.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--pinterest.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--pinterest.button--flat.button--inverted.active,
.notify-wrapper .button--pinterest.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #8d161b;
}
.notify-wrapper .button--pinterest.button--outline {
box-shadow: inset 0 0 0 1px #cb2027;
color: #cb2027;
}
#notification-cart
.notification__close
.notify-wrapper
.button--pinterest.button--outline
i,
.notification--alert .notify-wrapper .button--pinterest.button--outline i,
.notify-wrapper
.button--pinterest.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--pinterest.button--outline .icon,
.notify-wrapper .button--pinterest.button--outline .notification--alert i {
color: #cb2027;
}
.notify-wrapper .button--pinterest.button--outline.active,
.notify-wrapper .button--pinterest.button--outline:hover {
box-shadow: inset 0 0 0 100px #9f191f;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--pinterest.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--pinterest.button--outline:hover
i,
.notification--alert .notify-wrapper .button--pinterest.button--outline.active i,
.notification--alert .notify-wrapper .button--pinterest.button--outline:hover i,
.notify-wrapper
.button--pinterest.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--pinterest.button--outline.active .icon,
.notify-wrapper .button--pinterest.button--outline.active .notification--alert i,
.notify-wrapper
.button--pinterest.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--pinterest.button--outline:hover .icon,
.notify-wrapper .button--pinterest.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--pinterest.button--outline.active,
.notify-wrapper .button--pinterest.button--outline:active {
box-shadow: inset 0 0 0 100px #8d161b;
}
.notify-wrapper .button--pinterest.button--flat {
box-shadow: inset 0 0 0 100px #cb2027;
}
.notify-wrapper .button--pinterest.active,
.notify-wrapper .button--pinterest:hover {
box-shadow: inset 0 0 0 100px #9f191f;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--pinterest.active i,
#notification-cart .notification__close .notify-wrapper .button--pinterest:hover i,
.notification--alert .notify-wrapper .button--pinterest.active i,
.notification--alert .notify-wrapper .button--pinterest:hover i,
.notify-wrapper .button--pinterest.active #notification-cart .notification__close i,
.notify-wrapper .button--pinterest.active .icon,
.notify-wrapper .button--pinterest.active .notification--alert i,
.notify-wrapper .button--pinterest:hover #notification-cart .notification__close i,
.notify-wrapper .button--pinterest:hover .icon,
.notify-wrapper .button--pinterest:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--pinterest.active,
.notify-wrapper .button--pinterest:active {
box-shadow: inset 0 0 0 100px #8d161b;
}
.notify-wrapper .button--stumbleupon {
box-shadow: inset 0 0 0 0 #f74425;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--stumbleupon i,
.notification--alert .notify-wrapper .button--stumbleupon i,
.notify-wrapper .button--stumbleupon #notification-cart .notification__close i,
.notify-wrapper .button--stumbleupon .icon,
.notify-wrapper .button--stumbleupon .notification--alert i {
color: #fff;
}
.notify-wrapper .button--stumbleupon.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #f74425;
}
#notification-cart
.notification__close
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--stumbleupon.button--flat.button--inverted i,
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--stumbleupon.button--flat.button--inverted .icon,
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted
.notification--alert
i {
color: #f74425;
}
.notify-wrapper .button--stumbleupon.button--flat.button--inverted.active,
.notify-wrapper .button--stumbleupon.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #e12808;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--stumbleupon.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--stumbleupon.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--stumbleupon.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--stumbleupon.button--flat.button--inverted.active,
.notify-wrapper .button--stumbleupon.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #cd2508;
}
.notify-wrapper .button--stumbleupon.button--outline {
box-shadow: inset 0 0 0 1px #f74425;
color: #f74425;
}
#notification-cart
.notification__close
.notify-wrapper
.button--stumbleupon.button--outline
i,
.notification--alert .notify-wrapper .button--stumbleupon.button--outline i,
.notify-wrapper
.button--stumbleupon.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--stumbleupon.button--outline .icon,
.notify-wrapper .button--stumbleupon.button--outline .notification--alert i {
color: #f74425;
}
.notify-wrapper .button--stumbleupon.button--outline.active,
.notify-wrapper .button--stumbleupon.button--outline:hover {
box-shadow: inset 0 0 0 100px #e12808;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--stumbleupon.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--stumbleupon.button--outline:hover
i,
.notification--alert .notify-wrapper .button--stumbleupon.button--outline.active i,
.notification--alert .notify-wrapper .button--stumbleupon.button--outline:hover i,
.notify-wrapper
.button--stumbleupon.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--stumbleupon.button--outline.active .icon,
.notify-wrapper .button--stumbleupon.button--outline.active .notification--alert i,
.notify-wrapper
.button--stumbleupon.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--stumbleupon.button--outline:hover .icon,
.notify-wrapper .button--stumbleupon.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--stumbleupon.button--outline.active,
.notify-wrapper .button--stumbleupon.button--outline:active {
box-shadow: inset 0 0 0 100px #cd2508;
}
.notify-wrapper .button--stumbleupon.button--flat {
box-shadow: inset 0 0 0 100px #f74425;
}
.notify-wrapper .button--stumbleupon.active,
.notify-wrapper .button--stumbleupon:hover {
box-shadow: inset 0 0 0 100px #e12808;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--stumbleupon.active i,
#notification-cart .notification__close .notify-wrapper .button--stumbleupon:hover i,
.notification--alert .notify-wrapper .button--stumbleupon.active i,
.notification--alert .notify-wrapper .button--stumbleupon:hover i,
.notify-wrapper .button--stumbleupon.active #notification-cart .notification__close i,
.notify-wrapper .button--stumbleupon.active .icon,
.notify-wrapper .button--stumbleupon.active .notification--alert i,
.notify-wrapper .button--stumbleupon:hover #notification-cart .notification__close i,
.notify-wrapper .button--stumbleupon:hover .icon,
.notify-wrapper .button--stumbleupon:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--stumbleupon.active,
.notify-wrapper .button--stumbleupon:active {
box-shadow: inset 0 0 0 100px #cd2508;
}
.notify-wrapper .button--telegram {
box-shadow: inset 0 0 0 0 #08c;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--telegram i,
.notification--alert .notify-wrapper .button--telegram i,
.notify-wrapper .button--telegram #notification-cart .notification__close i,
.notify-wrapper .button--telegram .icon,
.notify-wrapper .button--telegram .notification--alert i {
color: #fff;
}
.notify-wrapper .button--telegram.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #08c;
}
#notification-cart
.notification__close
.notify-wrapper
.button--telegram.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--telegram.button--flat.button--inverted i,
.notify-wrapper
.button--telegram.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--telegram.button--flat.button--inverted .icon,
.notify-wrapper .button--telegram.button--flat.button--inverted .notification--alert i {
color: #08c;
}
.notify-wrapper .button--telegram.button--flat.button--inverted.active,
.notify-wrapper .button--telegram.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #069;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--telegram.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--telegram.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--telegram.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--telegram.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--telegram.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--telegram.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--telegram.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--telegram.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--telegram.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--telegram.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--telegram.button--flat.button--inverted.active,
.notify-wrapper .button--telegram.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #005885;
}
.notify-wrapper .button--telegram.button--outline {
box-shadow: inset 0 0 0 1px #08c;
color: #08c;
}
#notification-cart
.notification__close
.notify-wrapper
.button--telegram.button--outline
i,
.notification--alert .notify-wrapper .button--telegram.button--outline i,
.notify-wrapper
.button--telegram.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--telegram.button--outline .icon,
.notify-wrapper .button--telegram.button--outline .notification--alert i {
color: #08c;
}
.notify-wrapper .button--telegram.button--outline.active,
.notify-wrapper .button--telegram.button--outline:hover {
box-shadow: inset 0 0 0 100px #069;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--telegram.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--telegram.button--outline:hover
i,
.notification--alert .notify-wrapper .button--telegram.button--outline.active i,
.notification--alert .notify-wrapper .button--telegram.button--outline:hover i,
.notify-wrapper
.button--telegram.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--telegram.button--outline.active .icon,
.notify-wrapper .button--telegram.button--outline.active .notification--alert i,
.notify-wrapper
.button--telegram.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--telegram.button--outline:hover .icon,
.notify-wrapper .button--telegram.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--telegram.button--outline.active,
.notify-wrapper .button--telegram.button--outline:active {
box-shadow: inset 0 0 0 100px #005885;
}
.notify-wrapper .button--telegram.button--flat {
box-shadow: inset 0 0 0 100px #08c;
}
.notify-wrapper .button--telegram.active,
.notify-wrapper .button--telegram:hover {
box-shadow: inset 0 0 0 100px #069;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--telegram.active i,
#notification-cart .notification__close .notify-wrapper .button--telegram:hover i,
.notification--alert .notify-wrapper .button--telegram.active i,
.notification--alert .notify-wrapper .button--telegram:hover i,
.notify-wrapper .button--telegram.active #notification-cart .notification__close i,
.notify-wrapper .button--telegram.active .icon,
.notify-wrapper .button--telegram.active .notification--alert i,
.notify-wrapper .button--telegram:hover #notification-cart .notification__close i,
.notify-wrapper .button--telegram:hover .icon,
.notify-wrapper .button--telegram:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--telegram.active,
.notify-wrapper .button--telegram:active {
box-shadow: inset 0 0 0 100px #005885;
}
.notify-wrapper .button--twitter {
box-shadow: inset 0 0 0 0 #000;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--twitter i,
.notification--alert .notify-wrapper .button--twitter i,
.notify-wrapper .button--twitter #notification-cart .notification__close i,
.notify-wrapper .button--twitter .icon,
.notify-wrapper .button--twitter .notification--alert i {
color: #fff;
}
.notify-wrapper .button--twitter.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #000;
}
#notification-cart
.notification__close
.notify-wrapper
.button--twitter.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--twitter.button--flat.button--inverted i,
.notify-wrapper
.button--twitter.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--twitter.button--flat.button--inverted .icon,
.notify-wrapper .button--twitter.button--flat.button--inverted .notification--alert i {
color: #000;
}
.notify-wrapper .button--twitter.button--flat.button--inverted.active,
.notify-wrapper .button--twitter.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #000;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--twitter.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--twitter.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--twitter.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--twitter.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--twitter.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--twitter.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--twitter.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--twitter.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--twitter.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--twitter.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--twitter.button--flat.button--inverted.active,
.notify-wrapper .button--twitter.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #000;
}
.notify-wrapper .button--twitter.button--outline {
box-shadow: inset 0 0 0 1px #000;
color: #000;
}
#notification-cart
.notification__close
.notify-wrapper
.button--twitter.button--outline
i,
.notification--alert .notify-wrapper .button--twitter.button--outline i,
.notify-wrapper
.button--twitter.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--twitter.button--outline .icon,
.notify-wrapper .button--twitter.button--outline .notification--alert i {
color: #000;
}
.notify-wrapper .button--twitter.button--outline.active,
.notify-wrapper .button--twitter.button--outline:hover {
box-shadow: inset 0 0 0 100px #000;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--twitter.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--twitter.button--outline:hover
i,
.notification--alert .notify-wrapper .button--twitter.button--outline.active i,
.notification--alert .notify-wrapper .button--twitter.button--outline:hover i,
.notify-wrapper
.button--twitter.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--twitter.button--outline.active .icon,
.notify-wrapper .button--twitter.button--outline.active .notification--alert i,
.notify-wrapper
.button--twitter.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--twitter.button--outline:hover .icon,
.notify-wrapper .button--twitter.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--twitter.button--flat,
.notify-wrapper .button--twitter.button--outline.active,
.notify-wrapper .button--twitter.button--outline:active {
box-shadow: inset 0 0 0 100px #000;
}
.notify-wrapper .button--twitter.active,
.notify-wrapper .button--twitter:hover {
box-shadow: inset 0 0 0 100px #000;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--twitter.active i,
#notification-cart .notification__close .notify-wrapper .button--twitter:hover i,
.notification--alert .notify-wrapper .button--twitter.active i,
.notification--alert .notify-wrapper .button--twitter:hover i,
.notify-wrapper .button--twitter.active #notification-cart .notification__close i,
.notify-wrapper .button--twitter.active .icon,
.notify-wrapper .button--twitter.active .notification--alert i,
.notify-wrapper .button--twitter:hover #notification-cart .notification__close i,
.notify-wrapper .button--twitter:hover .icon,
.notify-wrapper .button--twitter:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--twitter.active,
.notify-wrapper .button--twitter:active {
box-shadow: inset 0 0 0 100px #000;
}
.notify-wrapper .button--vimeo {
box-shadow: inset 0 0 0 0 #aad450;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--vimeo i,
.notification--alert .notify-wrapper .button--vimeo i,
.notify-wrapper .button--vimeo #notification-cart .notification__close i,
.notify-wrapper .button--vimeo .icon,
.notify-wrapper .button--vimeo .notification--alert i {
color: #fff;
}
.notify-wrapper .button--vimeo.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #aad450;
}
#notification-cart
.notification__close
.notify-wrapper
.button--vimeo.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--vimeo.button--flat.button--inverted i,
.notify-wrapper
.button--vimeo.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--vimeo.button--flat.button--inverted .icon,
.notify-wrapper .button--vimeo.button--flat.button--inverted .notification--alert i {
color: #aad450;
}
.notify-wrapper .button--vimeo.button--flat.button--inverted.active,
.notify-wrapper .button--vimeo.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #93c130;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--vimeo.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--vimeo.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--vimeo.button--flat.button--inverted.active
i,
.notification--alert .notify-wrapper .button--vimeo.button--flat.button--inverted:hover i,
.notify-wrapper
.button--vimeo.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--vimeo.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--vimeo.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--vimeo.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--vimeo.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--vimeo.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--vimeo.button--flat.button--inverted.active,
.notify-wrapper .button--vimeo.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #87b12c;
}
.notify-wrapper .button--vimeo.button--outline {
box-shadow: inset 0 0 0 1px #aad450;
color: #aad450;
}
#notification-cart .notification__close .notify-wrapper .button--vimeo.button--outline i,
.notification--alert .notify-wrapper .button--vimeo.button--outline i,
.notify-wrapper .button--vimeo.button--outline #notification-cart .notification__close i,
.notify-wrapper .button--vimeo.button--outline .icon,
.notify-wrapper .button--vimeo.button--outline .notification--alert i {
color: #aad450;
}
.notify-wrapper .button--vimeo.button--outline.active,
.notify-wrapper .button--vimeo.button--outline:hover {
box-shadow: inset 0 0 0 100px #93c130;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--vimeo.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--vimeo.button--outline:hover
i,
.notification--alert .notify-wrapper .button--vimeo.button--outline.active i,
.notification--alert .notify-wrapper .button--vimeo.button--outline:hover i,
.notify-wrapper
.button--vimeo.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--vimeo.button--outline.active .icon,
.notify-wrapper .button--vimeo.button--outline.active .notification--alert i,
.notify-wrapper
.button--vimeo.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--vimeo.button--outline:hover .icon,
.notify-wrapper .button--vimeo.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--vimeo.button--outline.active,
.notify-wrapper .button--vimeo.button--outline:active {
box-shadow: inset 0 0 0 100px #87b12c;
}
.notify-wrapper .button--vimeo.button--flat {
box-shadow: inset 0 0 0 100px #aad450;
}
.notify-wrapper .button--vimeo.active,
.notify-wrapper .button--vimeo:hover {
box-shadow: inset 0 0 0 100px #93c130;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--vimeo.active i,
#notification-cart .notification__close .notify-wrapper .button--vimeo:hover i,
.notification--alert .notify-wrapper .button--vimeo.active i,
.notification--alert .notify-wrapper .button--vimeo:hover i,
.notify-wrapper .button--vimeo.active #notification-cart .notification__close i,
.notify-wrapper .button--vimeo.active .icon,
.notify-wrapper .button--vimeo.active .notification--alert i,
.notify-wrapper .button--vimeo:hover #notification-cart .notification__close i,
.notify-wrapper .button--vimeo:hover .icon,
.notify-wrapper .button--vimeo:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--vimeo.active,
.notify-wrapper .button--vimeo:active {
box-shadow: inset 0 0 0 100px #87b12c;
}
.notify-wrapper .button--whatsapp {
box-shadow: inset 0 0 0 0 #25d366;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--whatsapp i,
.notification--alert .notify-wrapper .button--whatsapp i,
.notify-wrapper .button--whatsapp #notification-cart .notification__close i,
.notify-wrapper .button--whatsapp .icon,
.notify-wrapper .button--whatsapp .notification--alert i {
color: #fff;
}
.notify-wrapper .button--whatsapp.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #25d366;
}
#notification-cart
.notification__close
.notify-wrapper
.button--whatsapp.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--whatsapp.button--flat.button--inverted i,
.notify-wrapper
.button--whatsapp.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--whatsapp.button--flat.button--inverted .icon,
.notify-wrapper .button--whatsapp.button--flat.button--inverted .notification--alert i {
color: #25d366;
}
.notify-wrapper .button--whatsapp.button--flat.button--inverted.active,
.notify-wrapper .button--whatsapp.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #1da851;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--whatsapp.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--whatsapp.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--whatsapp.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--whatsapp.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--whatsapp.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--whatsapp.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--whatsapp.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--whatsapp.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--whatsapp.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--whatsapp.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--whatsapp.button--flat.button--inverted.active,
.notify-wrapper .button--whatsapp.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #1a9649;
}
.notify-wrapper .button--whatsapp.button--outline {
box-shadow: inset 0 0 0 1px #25d366;
color: #25d366;
}
#notification-cart
.notification__close
.notify-wrapper
.button--whatsapp.button--outline
i,
.notification--alert .notify-wrapper .button--whatsapp.button--outline i,
.notify-wrapper
.button--whatsapp.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--whatsapp.button--outline .icon,
.notify-wrapper .button--whatsapp.button--outline .notification--alert i {
color: #25d366;
}
.notify-wrapper .button--whatsapp.button--outline.active,
.notify-wrapper .button--whatsapp.button--outline:hover {
box-shadow: inset 0 0 0 100px #1da851;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--whatsapp.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--whatsapp.button--outline:hover
i,
.notification--alert .notify-wrapper .button--whatsapp.button--outline.active i,
.notification--alert .notify-wrapper .button--whatsapp.button--outline:hover i,
.notify-wrapper
.button--whatsapp.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--whatsapp.button--outline.active .icon,
.notify-wrapper .button--whatsapp.button--outline.active .notification--alert i,
.notify-wrapper
.button--whatsapp.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--whatsapp.button--outline:hover .icon,
.notify-wrapper .button--whatsapp.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--whatsapp.button--outline.active,
.notify-wrapper .button--whatsapp.button--outline:active {
box-shadow: inset 0 0 0 100px #1a9649;
}
.notify-wrapper .button--whatsapp.button--flat {
box-shadow: inset 0 0 0 100px #25d366;
}
.notify-wrapper .button--whatsapp.active,
.notify-wrapper .button--whatsapp:hover {
box-shadow: inset 0 0 0 100px #1da851;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--whatsapp.active i,
#notification-cart .notification__close .notify-wrapper .button--whatsapp:hover i,
.notification--alert .notify-wrapper .button--whatsapp.active i,
.notification--alert .notify-wrapper .button--whatsapp:hover i,
.notify-wrapper .button--whatsapp.active #notification-cart .notification__close i,
.notify-wrapper .button--whatsapp.active .icon,
.notify-wrapper .button--whatsapp.active .notification--alert i,
.notify-wrapper .button--whatsapp:hover #notification-cart .notification__close i,
.notify-wrapper .button--whatsapp:hover .icon,
.notify-wrapper .button--whatsapp:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--whatsapp.active,
.notify-wrapper .button--whatsapp:active {
box-shadow: inset 0 0 0 100px #1a9649;
}
.notify-wrapper .button--youtube {
box-shadow: inset 0 0 0 0 #b00;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--youtube i,
.notification--alert .notify-wrapper .button--youtube i,
.notify-wrapper .button--youtube #notification-cart .notification__close i,
.notify-wrapper .button--youtube .icon,
.notify-wrapper .button--youtube .notification--alert i {
color: #fff;
}
.notify-wrapper .button--youtube.button--flat.button--inverted {
box-shadow: inset 0 0 0 100px #fff;
color: #b00;
}
#notification-cart
.notification__close
.notify-wrapper
.button--youtube.button--flat.button--inverted
i,
.notification--alert .notify-wrapper .button--youtube.button--flat.button--inverted i,
.notify-wrapper
.button--youtube.button--flat.button--inverted
#notification-cart
.notification__close
i,
.notify-wrapper .button--youtube.button--flat.button--inverted .icon,
.notify-wrapper .button--youtube.button--flat.button--inverted .notification--alert i {
color: #b00;
}
.notify-wrapper .button--youtube.button--flat.button--inverted.active,
.notify-wrapper .button--youtube.button--flat.button--inverted:hover {
box-shadow: inset 0 0 0 100px #800;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--youtube.button--flat.button--inverted.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--youtube.button--flat.button--inverted:hover
i,
.notification--alert
.notify-wrapper
.button--youtube.button--flat.button--inverted.active
i,
.notification--alert
.notify-wrapper
.button--youtube.button--flat.button--inverted:hover
i,
.notify-wrapper
.button--youtube.button--flat.button--inverted.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--youtube.button--flat.button--inverted.active .icon,
.notify-wrapper
.button--youtube.button--flat.button--inverted.active
.notification--alert
i,
.notify-wrapper
.button--youtube.button--flat.button--inverted:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--youtube.button--flat.button--inverted:hover .icon,
.notify-wrapper
.button--youtube.button--flat.button--inverted:hover
.notification--alert
i {
color: #fff;
}
.notify-wrapper .button--youtube.button--flat.button--inverted.active,
.notify-wrapper .button--youtube.button--flat.button--inverted:active {
box-shadow: inset 0 0 0 100px #740000;
}
.notify-wrapper .button--youtube.button--outline {
box-shadow: inset 0 0 0 1px #b00;
color: #b00;
}
#notification-cart
.notification__close
.notify-wrapper
.button--youtube.button--outline
i,
.notification--alert .notify-wrapper .button--youtube.button--outline i,
.notify-wrapper
.button--youtube.button--outline
#notification-cart
.notification__close
i,
.notify-wrapper .button--youtube.button--outline .icon,
.notify-wrapper .button--youtube.button--outline .notification--alert i {
color: #b00;
}
.notify-wrapper .button--youtube.button--outline.active,
.notify-wrapper .button--youtube.button--outline:hover {
box-shadow: inset 0 0 0 100px #800;
color: #fff;
}
#notification-cart
.notification__close
.notify-wrapper
.button--youtube.button--outline.active
i,
#notification-cart
.notification__close
.notify-wrapper
.button--youtube.button--outline:hover
i,
.notification--alert .notify-wrapper .button--youtube.button--outline.active i,
.notification--alert .notify-wrapper .button--youtube.button--outline:hover i,
.notify-wrapper
.button--youtube.button--outline.active
#notification-cart
.notification__close
i,
.notify-wrapper .button--youtube.button--outline.active .icon,
.notify-wrapper .button--youtube.button--outline.active .notification--alert i,
.notify-wrapper
.button--youtube.button--outline:hover
#notification-cart
.notification__close
i,
.notify-wrapper .button--youtube.button--outline:hover .icon,
.notify-wrapper .button--youtube.button--outline:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--youtube.button--outline.active,
.notify-wrapper .button--youtube.button--outline:active {
box-shadow: inset 0 0 0 100px #740000;
}
.notify-wrapper .button--youtube.button--flat {
box-shadow: inset 0 0 0 100px #b00;
}
.notify-wrapper .button--youtube.active,
.notify-wrapper .button--youtube:hover {
box-shadow: inset 0 0 0 100px #800;
color: #fff;
}
#notification-cart .notification__close .notify-wrapper .button--youtube.active i,
#notification-cart .notification__close .notify-wrapper .button--youtube:hover i,
.notification--alert .notify-wrapper .button--youtube.active i,
.notification--alert .notify-wrapper .button--youtube:hover i,
.notify-wrapper .button--youtube.active #notification-cart .notification__close i,
.notify-wrapper .button--youtube.active .icon,
.notify-wrapper .button--youtube.active .notification--alert i,
.notify-wrapper .button--youtube:hover #notification-cart .notification__close i,
.notify-wrapper .button--youtube:hover .icon,
.notify-wrapper .button--youtube:hover .notification--alert i {
color: #fff;
}
.notify-wrapper .button--youtube.active,
.notify-wrapper .button--youtube:active {
box-shadow: inset 0 0 0 100px #740000;
}
.notify-wrapper .notify--banner .button--icon--only.notification__close {
width: 32px;
height: 32px;
}
.button--premium.button--flat {
box-shadow: inset 0 0 0 100px #feb602;
display: inline-block;
position: relative;
height: 44px;
padding: 0 1.4em;
border-radius: 3px;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 44px;
}
.button--premium {
--color: color($color, 'buttons-text');
color: #fff;
}
.button--md {
font-size: 16px;
height: 44px;
line-height: 44px;
}
.button--premium.button--flat:hover {
text-decoration: none !important;
box-shadow: inset 0 0 0 100px #fec73f;
color: #fff;
}
button.btn--follow {
box-shadow: inset 0 0 0 2px #336aea;
color: #336aea;
background: none;
}
button.btn--follow.btn-small {
font-size: 14px;
height: 34px;
padding: 0 20px;
}
button.btn--follow:hover {
background-color: rgba(51, 106, 234, 0.1);
color: #336aea;
}
button.btn--follow:focus {
background-color: rgba(51, 106, 234, 0.2);
}
button.btn--follow .state--active {
display: none;
}
button.btn--follow.active {
box-shadow: inset 0 0 0 2px #d8d8d8;
color: #424242;
background: none;
}
button.btn--follow.active .hover {
display: none;
}
button.btn--follow.active:hover {
box-shadow: inset 0 0 0 2px #ff7d6a;
background-color: rgba(255, 125, 106, 0.1);
color: #ff7d6a;
}
button.btn--follow.active:hover .normal {
display: none;
}
button.btn--follow.active:hover .hover {
display: block;
}
button.btn--follow.active:focus .normal {
display: initial;
}
button.btn--follow.active:focus .hover {
display: none;
}
button.btn--follow.active .state--active {
display: block;
}
button.btn--follow.active .state--inactive {
display: none;
}
button.btn--follow--inverted {
box-shadow: inset 0 0 0 2px #fff;
color: #fff;
}
button.btn--follow--inverted:hover {
color: #fff;
background-color: hsla(0, 0%, 100%, 0.1);
}
button.btn--follow--inverted:focus {
color: #fff;
background-color: hsla(0, 0%, 100%, 0.2);
}
button.btn--follow--inverted.active {
box-shadow: inset 0 0 0 2px #777;
color: #fff;
}
button.btn--follow--inverted.active:hover {
color: #fff;
}
button.btn--follow--inverted-alt {
box-shadow: inset 0 0 0 2px #336aea;
background-color: #336aea;
color: #fff;
}
button.btn--follow--inverted-alt:hover {
color: #fff;
background-color: #2955bb;
box-shadow: inset 0 0 0 2px #2955bb;
}
button.btn--follow--inverted-alt:focus {
color: #fff;
background-color: #1f408c;
box-shadow: inset 0 0 0 2px #1f408c;
}
button.btn--follow--inverted-alt.active {
box-shadow: inset 0 0 0 2px #777;
color: #fff;
}
button.btn--follow--inverted-alt.active :focus,
button.btn--follow--inverted-alt.active:hover {
color: #fff;
background-color: #eb644c;
box-shadow: inset 0 0 0 2px #eb644c;
}
button.btn--follow--inverted-alt.active:active,
button.btn--follow--inverted-alt.active:focus {
box-shadow: inset 0 0 0 2px #777;
color: #fff;
background-color: transparent;
}
button.btn--bookmark {
font-size: 16px;
display: block;
}
button.btn--bookmark:hover i,
button.btn--bookmark i {
color: #121212;
}
button.btn--bookmark + .tooltip__content .state--active,
button.btn--bookmark .state--active {
display: none;
}
button.btn--bookmark.active .state--active {
display: block;
}
button.btn--bookmark.active .state--inactive {
display: none;
}
button.btn--bookmark.active + .tooltip__content .state--active {
display: block;
}
button.btn--bookmark.active + .tooltip__content .state--inactive {
display: none;
}
button.button--pinterest {
color: #fff;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: center;
-moz-box-orient: center;
box-orient: center;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: center;
-moz-flex-direction: center;
flex-direction: center;
-ms-flex-direction: center;
}
button.button--pinterest:hover {
color: #fff;
background-color: rgba(203, 32, 39, 0.9);
}
button.button--pinterest:active,
button.button--pinterest:focus {
color: #fff;
background-color: #b51d23;
}
button.button--pinterest i {
font-size: 16px;
margin-right: 5px;
line-height: 34px;
}
.bj-button {
transition: none;
}
#notification-cart .notification__close .bj-button i:before,
.bj-button #notification-cart .notification__close i:before,
.bj-button .icon:before,
.bj-button .notification--alert i:before,
.notification--alert .bj-button i:before {
vertical-align: baseline !important;
fill: currentColor;
}
.bj-button--link {
font-weight: 600;
color: #286d34;
height: auto;
line-height: inherit;
font-size: inherit;
padding: 0;
vertical-align: unset;
border-radius: 0;
min-width: 0;
}
.bj-button--link:active,
.bj-button--link:focus,
.bj-button--link:hover {
color: #286d34;
text-decoration: underline;
background: none;
}
.bj-button--white {
background-color: #fff;
box-shadow: none;
}
.bj-button--white:active,
.bj-button--white:focus,
.bj-button--white:hover {
background-color: #f7f7f7;
box-shadow: none;
}
.button--loading-download {
pointer-events: none !important;
animation: loadingDownloadFree 2s linear infinite;
position: relative;
}
.button--loading-download .text-downloading {
animation: fade-in 0.7s linear forwards;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
margin: 0;
}
.button--loading-download.bj-button--yellow,
.button--loading-download.btn-premium {
animation: loadingDownloadPremium 2s linear infinite;
}
.button--loading-download.bj-button--gray {
animation: loadingDownloadGray 2s linear infinite;
}
.button--loading-download > * {
pointer-events: none !important;
}
.button--loading-download > :not(.text-downloading) {
opacity: 0;
}
@keyframes loadingDownloadFree {
0% {
background: #44b678;
}
50% {
background: #3b9e62;
}
to {
background: #44b678;
}
}
@keyframes loadingDownloadPremium {
0% {
background: #feb602;
}
50% {
background: #f4980a;
}
to {
background: #feb602;
}
}
@keyframes loadingDownloadGray {
0% {
background: #f7f7f7;
}
50% {
background: #e5e5e5;
}
to {
background: #f7f7f7;
}
}
.grecaptcha-badge {
opacity: 0;
pointer-events: none;
}
.code-browser {
border-radius: 4px;
overflow: hidden;
box-shadow: 0 0 20px rgba(31, 64, 140, 0.3);
}
.code-browser__header {
background-color: #f0f0f0;
height: 24px;
}
.code-browser__header span {
background-color: #d8d8d8;
border-radius: 50%;
margin: 8px 0 0 10px;
width: 9px;
height: 9px;
display: block;
float: left;
}
.code-browser__content {
background-color: #121212;
padding: 20px 10px;
}
code {
font-family:
Consolas,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
color: #fff;
white-space: pre-line;
word-break: break-word;
font-weight: 700;
}
code .red {
color: #ff7d6a;
}
code .green {
color: #44b678;
}
code .yellow {
color: #fff4d9;
}
code .blue {
color: #e1e9fc;
}
code .purple {
color: #d5d6f2;
}
.mono {
font-family:
Consolas,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
.collections__tour {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 999;
color: #777;
overflow: auto;
border-left: 1px solid #f0f0f0;
}
.collections__tour .button__close {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
line-height: 44px;
}
.collections__tour .button__close i {
display: inline-block;
color: #424242;
}
.collections__tour__content {
width: 100%;
max-width: 280px;
margin: 40px auto 0;
}
.collections__tour__item {
font-size: 13px;
border-bottom: 1px solid #f0f0f0;
padding: 10px 0;
}
.collections__tour__item:last-child {
border-bottom: none;
}
.collections__tour__item input[type='checkbox'] {
display: none;
appearance: none;
-webkit-appearance: none;
}
.collections__tour__item input[type='checkbox']:checked + label .icon--plus {
display: none;
}
.collections__tour__item input[type='checkbox']:checked + label .icon--minus {
display: block;
}
.collections__tour__item input[type='checkbox']:checked ~ div {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
.collections__tour__item input[type='checkbox']:checked ~ div p {
transform: none;
opacity: 1;
transition:
transform 0.3s ease-in,
opacity 0.3s ease-in;
}
.collections__tour__item label {
cursor: pointer;
display: block;
position: relative;
}
.collections__tour__item label .icon--minus,
.collections__tour__item label .icon--plus {
position: absolute;
top: 0;
right: 0;
line-height: 24px;
color: #777;
}
.collections__tour__item label .icon--plus {
display: block;
}
.collections__tour__item label .icon--minus {
display: none;
}
.collections__tour__item i {
display: inline-block;
color: #286d34;
vertical-align: middle;
margin-right: 5px;
}
.collections__tour__item span {
vertical-align: middle;
}
.collections__tour__item div {
max-height: 0;
overflow: hidden;
}
.collections__tour__item p {
margin: 0;
transform: translateY(10px);
opacity: 0;
}
.color-palette__header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 34px;
}
.color-palette__header > i {
vertical-align: -1px;
}
.color-palette__header .popover .popover-content {
border-radius: 8px;
width: unset;
min-width: 95px;
padding: 10px 15px;
}
.color-palette__header .popover .popover-content:after {
right: 5px;
}
.color-palette__header .popover .popover-content:before {
right: 7px;
}
.color-palette__header .popover .popover-content li label {
cursor: pointer;
white-space: nowrap;
}
.color-palette__header .popover .popover-content li:nth-child(2) span {
color: #eb644c;
white-space: nowrap;
}
.color-palette div[class^='color-palette-wrapper'] {
position: relative;
min-height: 34px;
}
.color-palette div[class^='color-palette-wrapper'] .tooltip__content {
left: 0;
transform: unset;
}
.color-palette div[class^='color-palette-wrapper'] .swatches {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.color-palette div[class^='color-palette-wrapper'] .swatches .swatch {
display: inline-block;
}
.color-palette div[class^='color-palette-wrapper'] .swatches .swatch .color {
position: relative;
display: block;
width: 34px;
height: 34px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(29, 38, 45, 0.1);
cursor: pointer;
}
.color-palette div[class^='color-palette-wrapper'] .swatches .swatch .color i {
position: absolute;
color: #424242;
background-color: #fff;
box-shadow: inset 0 0 0 1px #b1b1b1;
border-radius: 100%;
right: -5px;
top: -5px;
}
.color-palette div[class^='color-palette-wrapper'] .swatches .swatch .color i:hover {
background-color: #ff7d6a;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(29, 38, 45, 0.1);
}
.color-palette div[class^='color-palette-wrapper'] .swatches .swatch:nth-child(6n) {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.color-palette div[class^='color-palette-wrapper'] .swatches .swatch:nth-child(6n) {
margin-right: 10px;
}
}
.color-palette div[class^='color-palette-wrapper'] .palette-edit-color-picker {
display: inline;
vertical-align: top;
margin-right: 10px;
float: left;
}
.color-palette
div[class^='color-palette-wrapper']
.palette-edit-color-picker
button:after {
border-top: 6px solid #142a5e;
}
.color-palette
div[class^='color-palette-wrapper']
.palette-edit-color-picker
.tooltip__content
.content {
background-color: #142a5e;
width: 240px;
}
.color-palette
div[class^='color-palette-wrapper']
.palette-edit-color-picker
.tooltip__content
.content
span {
white-space: break-spaces;
}
.color-palette div[class^='color-palette-wrapper'] .pcr-app[data-theme='classic'] {
top: 36px !important;
}
.color-palette div[class^='color-palette-wrapper'] .pcr-app .pcr-interaction {
margin: 0;
}
.color-palette div[class^='color-palette-wrapper'] .pcr-app .pcr-interaction .pcr-result {
width: 100%;
text-align: center;
margin-left: 0;
}
.color-palette .save-cancel-buttons {
display: flex;
}
.color-palette .save-cancel-buttons .cancel-edition:active,
.color-palette .save-cancel-buttons .cancel-edition:hover,
.color-palette .save-cancel-buttons .save-palette:active,
.color-palette .save-cancel-buttons .save-palette:hover {
text-decoration: none;
}
.color-palette .save-cancel-buttons .cancel-edition {
color: #424242;
}
.detail__editor__options.detail__editor__colors {
position: relative;
}
.pickr button.pcr-button {
visibility: hidden;
width: 0;
height: 0;
padding: 0;
display: block;
}
.pcr-app[data-theme='classic'] {
width: 100%;
margin-bottom: 20px;
box-shadow: none;
padding: 0;
background: none;
position: static;
min-width: 200px;
}
.pcr-app[data-theme='classic'] .pcr-swatches {
margin: 0;
position: absolute;
bottom: 9px;
left: 11px;
}
.pcr-app .pcr-interaction .pcr-result {
background: #fff;
border: 1px solid #e5e5e5;
width: 100px;
min-width: 0;
padding: 0 6px;
height: 24px;
line-height: 24px;
flex: none;
margin-left: auto;
margin-top: 10px;
outline: none;
}
.pcr-app .pcr-interaction .pcr-result:focus {
border-color: #67879d;
box-shadow: none;
}
.gpickr .pcr-app .pcr-interaction .pcr-result {
text-align: right;
width: 170px;
}
.pickers-wrapper {
position: relative;
}
.color-picker-btn,
.color-picker-wrapper,
.color-stroke-picker-wrapper {
background: url(../images/6efbf737bf7123a43ef3a4c3d4419c24.png) 50% no-repeat;
background-size: 100%;
width: 32px;
height: 32px;
border-radius: 50%;
margin-bottom: 20px;
cursor: pointer;
}
.pcr-app[data-theme='classic'],
.pcr-app[data-theme='nano'] {
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
background: #fff;
box-shadow: 0 0 60px rgba(14, 42, 71, 0.25);
position: absolute;
top: 100% !important;
left: 0 !important;
margin-top: 10px;
}
.pcr-app[data-theme='classic']:before,
.pcr-app[data-theme='nano']:before {
font-size: 1.4em;
display: block;
width: 0;
height: 0;
content: '';
pointer-events: none;
border-right: 10px solid transparent;
border-bottom: 10px solid #999;
border-left: 10px solid transparent;
position: absolute;
top: -0.45em;
left: 4px;
}
.pcr-app[data-theme='classic']:after,
.pcr-app[data-theme='nano']:after {
font-size: 1.4em;
display: block;
width: 0;
height: 0;
content: '';
pointer-events: none;
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
border-left: 12px solid transparent;
position: absolute;
top: -0.45em;
left: 2px;
}
.detail__editor__forms .pcr-app[data-theme='classic'],
.pcr-app[data-theme='nano'] {
margin-top: 0;
}
.pcr-app[data-theme='nano']:after,
.pcr-app[data-theme='nano']:before {
display: none;
}
.color-picker-btn {
padding: 12px;
}
.copy-holder {
margin: 0 0 10px;
}
.copy-holder input {
position: absolute;
top: 0;
left: 0;
margin-top: -100%;
opacity: 0;
pointer-events: none;
}
.copy-holder .attribution_text {
flex: 1;
display: block;
height: 44px;
line-height: 44px;
font-size: 13px;
border-radius: 3px 0 0 3px;
background-color: #f7f7f7;
color: #9c9c9c;
border: 1px solid #e5e5e5;
padding: 0 1em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.copy-holder button {
border-radius: 0 3px 3px 0;
height: 44px;
line-height: 44px;
padding: 0 20px;
font-size: 13px;
}
.copy-holder button > span {
display: none;
}
.copy-holder button > span.active {
display: block;
}
.copy-holder button i {
height: 44px;
line-height: 44px;
}
.countdown ul {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.countdown li .countdown__value:after {
content: ':';
margin: 0 5px;
}
.countdown li:last-child .countdown__value:after {
display: none;
}
.countdown__value {
display: block;
font-size: 20px;
}
@media screen and (min-width: 480px) {
.countdown__value {
font-size: calc(20px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
.countdown__value {
font-size: 26px;
}
}
.detail__mobile-holder {
padding: 10px 0 20px;
}
.detail__mobile-holder .download-action {
display: grid;
gap: 10px;
grid-template-columns: repeat(9, 1fr);
grid-template-areas: 'png png png svg svg svg copy formats share' 'addtc addtc addtc addtc addtc addtc addtc addtc addtc';
}
.detail__mobile-holder .download-action-without-copy-paste {
grid-template-columns: repeat(8, 1fr);
grid-template-areas: 'png png png svg svg svg formats share' 'addtc addtc addtc addtc addtc addtc addtc addtc';
}
.detail__mobile-holder .download-action .btn-copy,
.detail__mobile-holder .download-action .btn-formats,
.detail__mobile-holder .download-action .btn-share {
justify-self: center;
}
.detail__mobile-holder .download-action .btn-png,
.detail__mobile-holder .download-action .btn-svg {
grid-area: png;
}
.countdown .detail__mobile-holder .download-action .btn-png ul,
.countdown .detail__mobile-holder .download-action .btn-svg ul,
.detail__mobile-holder .download-action .btn-png .countdown ul,
.detail__mobile-holder .download-action .btn-png .groups__item,
.detail__mobile-holder .download-action .btn-png .landing--register .separator,
.detail__mobile-holder .download-action .btn-png .profile-login .group,
.detail__mobile-holder .download-action .btn-png .row,
.detail__mobile-holder .download-action .btn-svg .countdown ul,
.detail__mobile-holder .download-action .btn-svg .groups__item,
.detail__mobile-holder .download-action .btn-svg .landing--register .separator,
.detail__mobile-holder .download-action .btn-svg .profile-login .group,
.detail__mobile-holder .download-action .btn-svg .row,
.landing--register .detail__mobile-holder .download-action .btn-png .separator,
.landing--register .detail__mobile-holder .download-action .btn-svg .separator,
.profile-login .detail__mobile-holder .download-action .btn-png .group,
.profile-login .detail__mobile-holder .download-action .btn-svg .group {
margin: unset;
}
.detail__mobile-holder .download-action .btn-svg {
grid-area: svg;
}
.detail__mobile-holder .download-action .btn-svg .popover-svg-header {
display: flex;
align-items: center;
}
.detail__mobile-holder .download-action .btn-copy {
grid-area: copy;
}
.detail__mobile-holder .download-action .btn-formats {
grid-area: formats;
}
.detail__mobile-holder .download-action .btn-share {
grid-area: share;
}
.detail__mobile-holder .download-action .btn-share .popover-button > span {
display: none;
}
.detail__mobile-holder .download-action .btn-share ul.popover-content {
padding: 10px;
right: -10px;
z-index: 5;
}
.detail__mobile-holder .download-action .btn-addtc {
grid-area: addtc;
}
.detail__mobile-holder .download-action .popover-button {
min-width: 44px;
}
#notification-cart
.notification__close
.detail__mobile-holder
.download-action
.popover-button
i,
.detail__mobile-holder
.download-action
.popover-button
#notification-cart
.notification__close
i,
.detail__mobile-holder .download-action .popover-button .icon,
.detail__mobile-holder .download-action .popover-button .notification--alert i,
.notification--alert .detail__mobile-holder .download-action .popover-button i {
width: unset;
}
.detail__mobile-holder .download-action.copy-svg-png {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-copy,
.detail__mobile-holder .download-action.copy-svg-png .btn-formats,
.detail__mobile-holder .download-action.copy-svg-png .btn-share {
justify-self: center;
flex: unset;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-png,
.detail__mobile-holder .download-action.copy-svg-png .btn-svg {
flex: unset;
width: calc(50% - 5px);
}
.countdown .detail__mobile-holder .download-action.copy-svg-png .btn-png ul,
.countdown .detail__mobile-holder .download-action.copy-svg-png .btn-svg ul,
.detail__mobile-holder .download-action.copy-svg-png .btn-png .countdown ul,
.detail__mobile-holder .download-action.copy-svg-png .btn-png .groups__item,
.detail__mobile-holder
.download-action.copy-svg-png
.btn-png
.landing--register
.separator,
.detail__mobile-holder .download-action.copy-svg-png .btn-png .profile-login .group,
.detail__mobile-holder .download-action.copy-svg-png .btn-png .row,
.detail__mobile-holder .download-action.copy-svg-png .btn-svg .countdown ul,
.detail__mobile-holder .download-action.copy-svg-png .btn-svg .groups__item,
.detail__mobile-holder
.download-action.copy-svg-png
.btn-svg
.landing--register
.separator,
.detail__mobile-holder .download-action.copy-svg-png .btn-svg .profile-login .group,
.detail__mobile-holder .download-action.copy-svg-png .btn-svg .row,
.landing--register
.detail__mobile-holder
.download-action.copy-svg-png
.btn-png
.separator,
.landing--register
.detail__mobile-holder
.download-action.copy-svg-png
.btn-svg
.separator,
.profile-login .detail__mobile-holder .download-action.copy-svg-png .btn-png .group,
.profile-login .detail__mobile-holder .download-action.copy-svg-png .btn-svg .group {
margin: unset;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-svg .popover-svg-header {
display: flex;
align-items: center;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-copy.detail__copypng,
.detail__mobile-holder .download-action.copy-svg-png .btn-copy.detail__copysvg {
flex: unset;
width: calc(50% - 5px);
}
.detail__mobile-holder .download-action.copy-svg-png .btn-copy.detail__copypng button,
.detail__mobile-holder .download-action.copy-svg-png .btn-copy.detail__copysvg button {
width: 100%;
font-size: 14px;
}
.detail__mobile-holder
.download-action.copy-svg-png
.btn-copy.detail__copypng
button.bj-button--secondary:focus,
.detail__mobile-holder
.download-action.copy-svg-png
.btn-copy.detail__copysvg
button.bj-button--secondary:focus {
background: #e5e5e5;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-addtc,
.detail__mobile-holder .download-action.copy-svg-png .btn-formats,
.detail__mobile-holder .download-action.copy-svg-png .btn-share {
flex: unset;
flex-grow: 1;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-addtc .bj-button--link,
.detail__mobile-holder .download-action.copy-svg-png .btn-formats .bj-button--link,
.detail__mobile-holder .download-action.copy-svg-png .btn-share .bj-button--link {
color: #424242;
font-weight: 400;
font-size: 13px;
padding: 10px;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-addtc button:hover,
.detail__mobile-holder .download-action.copy-svg-png .btn-formats button:hover,
.detail__mobile-holder .download-action.copy-svg-png .btn-share button:hover {
text-decoration: none;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-formats .popover-button,
.detail__mobile-holder .download-action.copy-svg-png .btn-formats .popover-container {
width: 100%;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-formats .popover-button > span,
.detail__mobile-holder
.download-action.copy-svg-png
.btn-formats
.popover-container
> span {
display: block;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-share .popover-button,
.detail__mobile-holder .download-action.copy-svg-png .btn-share .popover-container {
width: 100%;
height: 100%;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-share .popover-button > span,
.detail__mobile-holder
.download-action.copy-svg-png
.btn-share
.popover-container
> span {
display: block;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-share ul.popover-content {
padding: 10px;
right: -10px;
z-index: 5;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-addtc .add-to-collection {
height: 100%;
}
.detail__mobile-holder .download-action.copy-svg-png .popover-button {
min-width: 44px;
line-height: 34px;
}
#notification-cart
.notification__close
.detail__mobile-holder
.download-action.copy-svg-png
.popover-button
i,
.detail__mobile-holder
.download-action.copy-svg-png
.popover-button
#notification-cart
.notification__close
i,
.detail__mobile-holder .download-action.copy-svg-png .popover-button .icon,
.detail__mobile-holder
.download-action.copy-svg-png
.popover-button
.notification--alert
i,
.notification--alert
.detail__mobile-holder
.download-action.copy-svg-png
.popover-button
i {
width: unset;
}
@media screen and (max-width: 992px) {
.detail__mobile-holder .download-action.copy-svg-png {
flex-wrap: nowrap;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-addtc button {
background-color: #e5e5e5;
border-radius: 3px;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-addtc button:hover {
background-color: #d8d8d8;
}
.detail__mobile-holder .download-action.copy-svg-png .btn-share button {
border-radius: 3px;
box-shadow: inset 0 0 0 2px #d8d8d8;
}
.detail__mobile-holder .download-action.copy-svg-png .popover-button {
line-height: inherit;
}
}
.detail__mobile-holder.only-share
.download-action.copy-svg-png
.download-action.copy-svg-png
.btn-formats,
.detail__mobile-holder.only-share
.download-action.copy-svg-png
.download-action.copy-svg-png
.btn-share {
width: calc(50% - 5px);
}
@media screen and (max-width: 992px) {
.detail__mobile-holder.only-share .download {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: 'png svg share';
}
.detail__mobile-holder.only-share .download .btn-share .popover-button > span {
display: block;
}
}
@media screen and (max-width: 768px) {
.detail__mobile-holder.only-share .download {
grid-template-columns: 1fr 1fr auto;
grid-template-areas: 'png svg share';
}
.detail__mobile-holder.only-share .download .btn-share .popover-button > span {
display: none;
}
}
.detail__mobile-holder.download-extended .download-action {
display: grid;
gap: 10px;
grid-template-columns: 1fr auto auto;
grid-template-areas: 'png copy share';
}
@media screen and (max-width: 992px) {
.detail__mobile-holder.download-extended .download {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'png share';
}
.detail__mobile-holder.download-extended .download .btn-share .popover-button > span {
display: block;
}
}
@media screen and (max-width: 768px) {
.detail__mobile-holder.download-extended .download {
grid-template-columns: 1fr auto;
grid-template-areas: 'png share';
}
.detail__mobile-holder.download-extended .download .btn-share .popover-button > span {
display: none;
}
}
@media screen and (max-width: 992px) {
.detail__mobile-holder {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 12;
padding: 10px 20px;
border-top: 1px solid #e5e5e5;
}
.detail__mobile-holder .download {
grid-template-columns: 1fr 1fr auto auto;
grid-template-areas: 'png svg addtc share';
}
.detail__mobile-holder .download .not-mobile {
display: none !important;
}
.detail__mobile-holder .premium-icon__button .fi-not-premium-icon {
margin: 0;
}
.detail__mobile-holder .premium-icon__button .fi-not-premium-icon > div {
padding: 0 10px 0 0;
}
.detail__mobile-holder .detail__copypng,
.detail__mobile-holder .detail__copysvg {
display: none;
}
.detail__mobile-holder .btn-upgrade {
padding: 0 20px !important;
height: 44px !important;
line-height: 44px !important;
}
.detail__mobile-holder .btn-upgrade span {
font-size: 16px;
margin: 0;
line-height: 44px;
}
.detail__mobile-holder .popover-share .popover-content {
bottom: 50px;
top: auto;
}
.detail__mobile-holder .popover-share .popover-content:before {
border-bottom: none;
border-top: 10px solid #999;
top: auto;
bottom: -0.45em;
}
.detail__mobile-holder .popover-share .popover-content:after {
border-bottom: none;
border-top: 10px solid #fff;
top: auto;
bottom: -0.45em;
}
}
@media screen and (max-width: 768px) {
.detail__mobile-holder .download {
grid-template-columns: 1fr 1fr auto auto;
}
}
@media (max-width: 768px) {
.detail__mobile-holder .add-to-collection {
width: 44px !important;
padding: 0;
}
}
@media (max-width: 992px) {
.view--detail .detail {
position: relative;
padding-bottom: 50px;
}
.view--detail .detail.footer-visible .detail__mobile-holder {
position: absolute;
}
}
.download.svg-editable .btn-size .btn,
.download.svg-editable .btn-svg .btn {
border-radius: 3px 0 0 3px;
}
.download.svg-editable .btn-size .popover-content .size li a.active,
.download.svg-editable .btn-size span.badge,
.download.svg-editable .btn-svg .popover-content .size li a.active,
.download.svg-editable .btn-svg span.badge {
border-radius: 3px;
}
.detail__editor {
border-bottom: 1px solid #e5e5e5;
position: relative;
}
.detail__editor__header {
border-bottom: 1px solid #f0f0f0;
height: 64px;
padding: 0 10px;
position: relative;
z-index: 3;
}
.detail__editor__header .link--arrow,
.detail__editor__header .link--arrow i {
color: #424242;
}
.detail__editor__body {
background-color: #f7f7f7;
}
.detail__editor__controls button:focus {
color: #9c9c9c;
}
.detail__editor__menu {
padding: 10px;
border-right: 1px solid #f0f0f0;
background-color: #fff;
}
.detail__editor__menu label {
width: 68px;
text-align: center;
color: #9c9c9c;
font-size: 12px;
border-radius: 3px;
padding: 10px 5px;
display: block;
margin: 0;
font-weight: 600;
cursor: pointer;
}
.detail__editor__menu label i {
color: #9c9c9c;
}
.detail__editor__menu label:hover,
.detail__editor__menu label:hover i {
color: #424242;
}
.detail__editor__menu label.active {
color: #424242;
background-color: #f0f0f0;
}
.detail__editor__menu label.active i {
color: #424242;
}
.detail__editor__submenu {
padding: 20px;
border-right: 1px solid #f0f0f0;
width: 300px;
background-color: #fff;
min-height: 520px;
}
.detail__editor__submenu input[type='radio'] {
display: none;
appearance: none;
-webkit-appearance: none;
}
.detail__editor__submenu input[type='radio']:checked + .detail__editor__options {
display: block;
}
.detail__editor__submenu .detail__editor__options {
display: none;
}
.detail__editor__submenu
.detail__editor__options.detail__editor__stroke
.stroke-width-number {
display: flex;
gap: 5px;
}
.detail__editor__submenu .pcr-picker {
box-shadow: 0 0 2px #777;
}
.detail__editor__canvas {
margin: 0;
padding: 0;
position: static;
}
.detail__editor__colors .popover-button {
width: 34px;
height: 34px;
border-radius: 3px;
padding: 0;
}
.detail__editor__icon-wrapper {
width: 300px;
margin: 16px auto 50px;
}
.detail__editor__icon-wrapper button {
background: none;
color: #9c9c9c;
}
.detail__editor__icon-wrapper button:hover {
background-color: #e5e5e5;
color: #424242;
}
.detail__editor__icon-holder {
background-color: #fff;
background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 0),
linear-gradient(-45deg, #e5e5e5 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #e5e5e5 0),
linear-gradient(-45deg, transparent 75%, #e5e5e5 0);
background-size: 20px 20px;
background-position:
0 0,
0 10px,
10px -10px,
-10px 0;
width: 300px;
height: 300px;
margin-top: 10px;
border: 1px solid #d8d8d8;
box-shadow: 0 2px 4px rgba(18, 18, 18, 0.1);
}
.detail__editor__icon-holder svg {
width: 100%;
height: 100%;
}
.detail__editor__icon-holder svg.hovered-paths :not(g),
.detail__editor__icon-holder svg.selected-paths :not(g) {
opacity: 0.4;
}
.detail__editor__icon-holder svg.hovered-paths :not(g).active-path,
.detail__editor__icon-holder svg.hovered-paths :not(g).hovered-path,
.detail__editor__icon-holder svg.selected-paths :not(g).active-path,
.detail__editor__icon-holder svg.selected-paths :not(g).hovered-path {
cursor: pointer;
opacity: 1;
}
.detail__editor__sizes {
display: none;
margin-top: 10px;
position: absolute;
background: #fff;
z-index: 1;
left: 0;
left: -9px;
top: 100%;
width: calc(100% + 17px);
padding: 0 10px 10px;
}
.detail__editor__sizes a {
height: 44px;
}
.detail__editor .popover--download .popover-content {
width: 160px;
}
.detail__editor .popover--download .bj-button {
width: 100%;
}
.detail__editor .popover--download input[type='checkbox'] {
display: none;
appearance: none;
-webkit-appearance: none;
}
.detail__editor .popover--download input[type='checkbox']:checked + div {
display: block;
}
.detail__editor .popover--download li {
position: relative;
}
.detail__editor .alert {
max-width: 300px;
position: absolute;
top: 75px;
right: 10px;
z-index: 1;
}
.detail__editor .alert p {
padding: 1em 1em 1em 3em;
}
.detail__editor .alert a + p {
padding: 1em 4.5em 1em 3em;
}
.detail__editor .only_registered {
position: absolute;
top: 0;
left: 0;
background: hsla(0, 0%, 100%, 0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.detail__editor .only_registered .alert {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
}
.detail__editor .colors {
margin: 0 0 20px;
}
.detail__editor .colors li {
margin: 0 10px 10px 0;
}
.detail__editor .colors li:nth-child(6n) {
margin-right: 0;
}
.detail__editor .colors button {
width: 34px;
height: 34px;
border-radius: 3px;
padding: 0;
box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.1);
}
.detail__editor .colors button.active {
box-shadow:
inset 0 0 0 1px rgba(18, 18, 18, 0.1),
0 0 0 2px #fff,
0 0 0 4px #3b9e62;
}
.detail__editor .btn-group {
display: inline-block;
box-shadow: 0 0 0 1px #e5e5e5;
border-radius: 4px;
}
.detail__editor .btn-group .tooltip {
float: left;
}
.detail__editor .btn-group .tooltip:last-of-type button {
border-right: 0;
}
.detail__editor .btn-group button {
border-radius: 0;
border-right: 1px solid #e5e5e5;
background: none;
}
.detail__editor .btn-group button:hover {
background-color: #f0f0f0;
}
.detail__editor .btn-group button i {
color: #424242;
}
.detail__editor .btn-group button[data-values='none'] i {
color: #b1b1b1;
}
@media screen and (max-width: 480px) {
.detail__editor__header #save_into_active span {
display: none;
}
}
@media screen and (max-width: 768px) {
.detail__editor {
position: fixed;
top: 0;
left: 0;
background: #fff;
z-index: 15;
height: 100%;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
.detail__editor__header {
height: 54px;
padding: 0 15px;
position: relative;
z-index: 2;
}
.detail__editor__header .bj-button {
height: 34px;
line-height: 34px;
padding: 0 10px;
}
.detail__editor__header .add-to-collection {
padding: 0;
}
.detail__editor__body {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
height: calc(100% - 54px);
}
.detail__editor__menu {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
-webkit-order: 2;
-moz-order: 2;
order: 2;
-ms-flex-order: 2;
padding: 0;
border-top: 1px solid #f0f0f0;
border-right: none;
}
.detail__editor__menu ul {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.detail__editor__menu li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.detail__editor__menu label {
width: 100%;
border-radius: 0;
font-size: 11px;
}
.detail__editor__menu i {
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
}
.detail__editor__submenu {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
overflow: auto;
min-height: 0;
}
.detail__editor__canvas {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
width: 100%;
}
.detail__editor__icon-wrapper {
width: 180px;
margin: 10px auto;
}
.detail__editor__icon-holder {
width: 180px;
height: 180px;
}
.detail__editor__controls {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.detail__editor__controls > * {
margin: 0 5px;
}
.detail__editor .alert {
position: relative;
top: 0;
max-width: none;
right: 0;
border-radius: 0;
font-size: 13px;
}
.detail__editor .alert p {
padding: 10px 10px 10px 45px;
}
.detail__editor .only_registered .alert {
max-width: calc(100% - 40px);
}
.detail__editor .colors {
display: block;
white-space: nowrap;
overflow: auto;
margin-left: -4px;
padding: 4px;
}
.detail__editor .colors li {
display: inline-block;
}
.detail__editor .colors li:nth-child(6n) {
margin-right: 10px;
}
}
.detail__editor input[type='range'] {
height: 24px;
display: block;
-webkit-appearance: none;
width: 100%;
}
.detail__editor input[type='range']:focus {
outline: none;
}
.detail__editor input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0 0 0 #000;
background: #e5e5e5;
border-radius: 1px;
border: 0 solid #000;
}
.detail__editor input[type='range']::-webkit-slider-thumb {
box-shadow: 0 0 2px #777;
border: 2px solid #fff;
height: 18px;
width: 18px;
border-radius: 25px;
background: #3b9e62;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6.5px;
}
.detail__editor input[type='range']:focus::-webkit-slider-runnable-track {
background: #e5e5e5;
}
.detail__editor input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0 0 0 #000;
background: #e5e5e5;
border-radius: 1px;
border: 0 solid #000;
}
.detail__editor input[type='range']::-moz-range-thumb {
box-shadow: 0 0 2px #777;
border: 2px solid #fff;
height: 18px;
width: 18px;
border-radius: 25px;
background: #3b9e62;
cursor: pointer;
}
.detail__editor input[type='range']::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
.detail__editor input[type='range']::-ms-fill-lower,
.detail__editor input[type='range']::-ms-fill-upper {
background: #e5e5e5;
border-radius: 2px;
box-shadow: 0 0 0 #000;
}
.detail__editor input[type='range']::-ms-thumb {
margin-top: 1px;
box-shadow: 0 0 2px #777;
border: 2px solid #fff;
height: 18px;
width: 18px;
border-radius: 25px;
background: #3b9e62;
cursor: pointer;
}
.detail__editor input[type='range']:focus::-ms-fill-lower,
.detail__editor input[type='range']:focus::-ms-fill-upper {
background: #e5e5e5;
}
.icon--flip.flip-vertical {
transform: rotate(90deg);
}
.icon--rotate.rotate--left {
transform: scaleX(-1);
}
.form-feedback {
margin-top: 10px;
margin-bottom: 20px;
}
.form-feedback > div {
display: inline-block;
border: 1px dashed #d8d8d8;
padding: 12px;
border-radius: 4px;
}
.form-feedback > div span {
display: inline-block;
margin-right: 10px;
font-size: 14px;
}
.form-feedback .popover-content {
width: 320px;
font-size: 14px;
}
.form-feedback .popover-content textarea {
border: 1px solid #f0f0f0;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
height: 100px;
}
.form-feedback .popover-content button {
width: 50%;
float: left;
height: 42px;
line-height: 42px;
padding: 0;
}
@media screen and (max-width: 480px) {
.form-feedback span {
display: block;
}
}
.collections .form-feedback .popover-content {
width: 300px;
left: 50%;
margin-left: -150px;
}
.collections .form-feedback .popover-content:before {
right: 50%;
margin-right: -11px;
}
.collections .form-feedback .popover-content:after {
right: 50%;
margin-right: -13px;
}
.popover.popover-filters {
position: relative;
margin-right: 10px;
}
.popover.popover-filters .popover-button .button--text {
margin: 0 5px 0 0;
}
.popover.popover-filters .popover-button .badge {
height: 20px;
line-height: 20px;
padding: 0;
background-color: #c8c8c8;
color: #121212;
font-size: 11px;
min-width: 20px;
margin: 0 5px 0 0;
z-index: 1;
}
.popover.popover-filters .popover-content {
width: 300px;
padding: 0;
overflow-y: auto;
max-height: calc(100% - 118px);
position: fixed;
top: 118px;
left: 10px;
}
.popover.popover-filters .popover-content:before {
left: 16px;
}
.popover.popover-filters .popover-content:after {
left: 14px;
}
.popover.popover-filters .tag {
height: 22px;
line-height: 22px;
padding: 0 5px;
box-shadow: 0 0 0 1px #44b678;
border-radius: 2px;
color: #0a152f;
font-weight: 700;
font-size: 12px;
}
.popover.popover-filters .tooltip__trigger:after {
opacity: 0;
}
.popover.popover-filters .popover-filters__apply {
position: fixed;
bottom: 0;
left: 0;
width: 250px;
padding: 10px;
background-color: #fff;
border-top: 1px solid #e5e5e5;
display: none;
}
@media screen and (max-width: 992px) {
.popover.popover-filters .popover-content {
left: 0;
}
}
.popover .in-search .popover-filters .popover-content {
top: 168px;
height: calc(100% - 168px);
position: fixed;
left: 0;
overflow: auto;
border-radius: 0;
border: none;
animation: none;
}
.view--pack .popover.popover-filters .popover-content {
height: auto;
}
body,
html {
height: 100%;
display: block;
}
body {
overflow-y: scroll;
}
body.overflow-hidden #viewport {
-webkit-filter: blur(5px);
filter: blur(5px);
}
body.overflow {
overflow: hidden;
}
@media screen and (max-width: 768px) {
body.overflow--mobile {
overflow: hidden;
}
}
::-moz-selection {
background-color: rgba(82, 217, 153, 0.5);
}
::selection {
background-color: rgba(82, 217, 153, 0.5);
}
img {
max-width: 100%;
}
#ot-sdk-btn-floating {
display: none;
}
#onetrust-banner-sdk.otFlat {
transform: translateY(100%);
transition: transform 0.6s ease-in;
}
#onetrust-banner-sdk.otFlat.active {
transform: translateY(0);
}
#cky-consent {
transform: translateY(100%);
transition: transform 0.6s ease-in;
}
#cky-consent.active {
transform: translateY(0);
}
#g_id_onload {
position: fixed;
top: 45px;
right: 20px;
width: auto;
z-index: 99999;
}
#gr_user_menu {
min-width: 60px;
}
@media screen and (min-width: 992px) {
#gr_user_menu {
height: 36px;
}
}
#gr_user_menu #gr_connected {
display: none;
height: 36px;
}
#gr_user_menu #gr_connected .popover-user .popover-container {
position: relative;
padding-right: 14px;
}
#gr_user_menu #gr_connected .popover-user .popover-container:before {
position: absolute;
top: 50%;
right: 2px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 0;
width: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
content: '';
}
#gr_user_menu #gr_connected .popover-user .popover-content {
padding: 0;
width: 360px;
}
@media screen and (max-width: 480px) {
#gr_user_menu #gr_connected .popover-user .popover-content {
width: 320px;
}
}
#gr_user_menu #gr_connected .popover-user .popover-content .popover-user-top {
padding: 16px;
border-bottom: 1px solid #d8d8d8;
}
#gr_user_menu #gr_connected .popover-user .popover-content .popover-user-top:after {
clear: both;
content: '';
display: table;
}
#gr_user_menu
#gr_connected
.popover-user
.popover-content
.popover-user-top
.avatar-holder {
float: left;
margin-right: 10px;
display: block;
width: 64px;
height: 64px;
border-radius: 100%;
overflow: hidden;
}
#gr_user_menu #gr_connected .popover-user .popover-content .popover-user-top .user-data {
float: left;
width: 180px;
}
#gr_user_menu
#gr_connected
.popover-user
.popover-content
.popover-user-top
.user-data
span {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
display: block;
font-size: 16px;
margin-bottom: 10px;
font-weight: 700;
color: #4a4a4a;
}
#gr_user_menu
#gr_connected
.popover-user
.popover-content
.popover-user-top
.user-data
.btn {
color: #fff;
}
#gr_user_menu #gr_connected .popover-user .popover-content .user__links li {
position: relative;
}
#gr_user_menu #gr_connected .popover-user .popover-content .user__links li > a,
#gr_user_menu #gr_connected .popover-user .popover-content .user__links li button {
display: flex;
align-items: center;
border: none;
height: 36px;
padding: 0 20px;
font-size: 14px;
color: #0a152f;
}
#gr_user_menu #gr_connected .popover-user .popover-content .user__links i {
color: #424242;
margin-right: 10px;
}
#gr_user_menu #gr_connected .popover-user .popover-content .tooltip i {
color: #c8c8c8;
}
#gr_user_menu #gr_connected .popover-user .popover-content .user__subscription {
padding: 0 20px 10px;
}
#gr_user_menu #gr_connected .popover-user .popover-content .subscription-type {
color: #777;
margin-left: 10px;
}
#gr_user_menu #gr_connected .popover-user .popover-content hr {
background-color: #e5e5e5;
margin: 0;
width: 100%;
}
#gr_user_menu #gr_connected .popover-user .popover-content .downloads__number {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
#gr_user_menu #gr_connected .popover-user .popover-content .downloads__number .badge {
padding: 0 5px;
}
.header-author-searcher {
width: 100%;
display: flex;
flex-wrap: nowrap;
position: relative;
}
.header-author-searcher .author-tabs-component__tabs {
overflow: hidden;
display: flex;
}
.header-author-searcher .author-tabs-component__tabs.center {
justify-content: center;
}
.header-author-searcher .author-tabs-component__links {
padding: 0 10px 18px;
color: #777;
background-color: transparent;
border-radius: 0;
border-bottom: 1px solid transparent;
}
.header-author-searcher .author-tabs-component__links:hover {
background-color: transparent;
color: #424242;
}
.header-author-searcher .author-tabs-component__links.active {
background-color: transparent;
border-bottom: 1px solid #424242;
color: #424242;
z-index: 1;
}
.header-author-searcher .author-tabs-component hr {
width: 100%;
position: absolute;
left: 0;
margin-top: -1px;
}
.header-author-searcher .search-style-word {
margin-left: auto;
margin-top: -20px;
}
.header-author-searcher .search-style-word .search-holder .fake-search .popover-button {
height: 34px;
line-height: 34px;
padding: 0 10px;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-button
span {
min-width: unset;
padding: 0 5px 0 10px;
}
.header-author-searcher .search-style-word .search-holder .fake-search .popover-content {
border: 1px solid #e5e5e5;
color: #777;
padding: 10px;
border-radius: 3px;
z-index: 10;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul {
max-height: 275px;
overflow-y: scroll;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li {
height: 42px;
padding: 0 10px;
display: flex;
align-items: center;
cursor: pointer;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li:hover {
background-color: #f0f0f0;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li
span {
display: none;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li.active {
background: rgba(74, 210, 149, 0.1);
color: #286d34;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li.active
span {
display: inline;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li.active
span:before {
color: #286d34;
}
.header-author-searcher .search-style-word .search-holder .fake-search input {
padding: 0 10px;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.clean-search__button,
.header-author-searcher .search-style-word .search-holder .fake-search .search__button {
width: 34px;
margin: unset;
height: 100%;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.clean-search__button
i:before,
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.search__button
i:before {
color: #424242;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.awesomplete
.text {
font-size: 14px;
}
.header-author-searcher .search-style-word .search-holder .fake-search.ios .awesomplete {
height: 34px;
display: flex;
align-items: center;
padding: 15px 0;
cursor: text;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search.ios
.awesomplete
input {
height: 100%;
line-height: normal;
}
.header-author-searcher
.search-style-word
.search-holder
.fake-search.ios
.awesomplete
ul {
top: 34px;
}
.header-author-searcher.no-tabs {
margin-top: -40px;
}
.header-author-searcher.no-tabs .search-style-word {
margin-top: 20px;
margin-bottom: 20px;
}
.header-author-searcher.no-tabs hr {
bottom: 0;
}
@media screen and (max-width: 640px) {
.header-author-searcher
.search-style-word
.search-holder
.fake-search
.popover-button
span {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media screen and (max-width: 992px) {
.header-author-searcher {
flex-wrap: wrap;
}
.header-author-searcher .tabs-component {
width: 100%;
}
.header-author-searcher .tabs-component__tabs {
justify-content: center;
}
.header-author-searcher .tabs-component__links {
padding: 0 10px 10px;
}
.header-author-searcher .search-style-word {
margin: 20px auto 0;
width: 100%;
}
.header-author-searcher .tabs-component ~ .search-style-word {
margin: 20px auto;
}
.header-author-searcher.no-tabs {
margin-top: 0;
}
.header-author-searcher.no-tabs .search-style-word {
margin-top: 20px;
margin-bottom: 20px;
}
.header-author-searcher.no-tabs hr {
top: 0;
bottom: unset;
}
}
.hero--section {
position: relative;
overflow: hidden;
background-color: #f7f7f7;
padding: 40px 0;
margin-bottom: 45px;
min-height: 300px;
}
.hero--section .container .content h1 {
color: #0a152f;
margin: 0 0 10px;
}
.hero--section .container .content p {
color: #5b5b5b;
}
.hero--section__text {
max-width: 580px;
}
.hero--section__text .hero--section__buttons-section a {
padding: 0 25px;
display: block !important;
}
.hero--section__text .hero--section__buttons-section a span {
float: none;
}
.hero--section__image--icons,
.hero--section__image--stickers {
position: unset;
}
.hero--section__image--icons img,
.hero--section__image--stickers img {
position: absolute;
bottom: 0;
left: 55%;
}
.hero--section__image--icons img {
top: -40%;
filter: drop-shadow(12px 15px 40px rgba(207, 217, 224, 0.5));
}
.hero--section__image--stickers img {
bottom: -30px;
max-width: unset;
left: 50%;
}
.hero--section .shadow {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(
180deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.01%,
rgba(0, 0, 0, 0.03)
);
}
@media screen and (max-width: 1400px) {
.hero--section .container .content {
padding: 0;
}
}
@media screen and (max-width: 992px) {
.hero--section {
padding: 40px 0;
}
}
@media screen and (max-width: 768px) {
.hero--section a {
text-transform: capitalize;
}
.hero--section__image--icons img {
top: -13%;
}
}
@media screen and (max-width: 640px) {
.hero--section {
margin-bottom: 30px;
}
.hero--section__text {
text-align: center;
}
.hero--section__text .hero--section__buttons-section {
justify-content: center;
}
.hero--section__image--icons,
.hero--section__image--stickers {
display: none;
}
}
.icon--premium:before {
display: inline-block;
width: 16px;
height: 16px;
background: url(../images/crown.b2abc241d531de58992ce1805cfbe66f.svg) 50% no-repeat;
background-size: 100%;
content: '';
}
.icon--premium--white:before {
background: url(../images/crown-white.8621980e677eabbd8af4add6e7b108ea.svg) 50%
no-repeat;
}
.icon--premium.icon--xs:before {
width: 12px;
height: 12px;
}
.icon--premium.icon--sm:before {
width: 14px;
height: 14px;
}
.icon--premium.icon--md:before {
width: 16px;
height: 16px;
}
.icon--premium.icon--lg:before {
width: 20px;
height: 20px;
}
.icon--premium.icon--xl:before {
width: 24px;
height: 24px;
}
.icon--edit-alt:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MjAgNjIwIj48cGF0aCBmaWxsPSIjMUQyNjJEIiBkPSJNNjAwIDM0LjJMNTg1LjkgMjBDNTYwLjUtNS4zIDUxOS4zLTUuMyA0OTQgMjBsLTk2IDk2aC0uMUwzNjAgMTUzLjloLjFMMTY0LjQgMzQ5LjZjLTQuNyA0LjctNy4zIDExLTcuMyAxNy43VjQzOGMwIDEzLjggMTEuMiAyNSAyNSAyNWg3MC43YzYuNiAwIDEzLTIuNiAxNy43LTcuM0w0NjYuMSAyNjBsMzcuOS0zNy45IDk2LTk2YzI1LjQtMjUuNCAyNS40LTY2LjYgMC05MS45ek0yNDIuNCA0MTNIMjA3di0zNS40bDI2Mi4xLTI2Mi4xIDM1LjQgMzUuNEwyNDIuNCA0MTN6TTU2NC43IDkwLjdMNTQwIDExNS40IDUwNC42IDgwbDI0LjctMjQuN2M1LjgtNS44IDE1LjQtNS44IDIxLjIgMGwxNC4xIDE0LjFjNS45IDYgNS45IDE1LjUuMSAyMS4zeiIvPjxwYXRoIGZpbGw9IiMxMjczRUIiIGQ9Ik00MjIuNSA1MDQuNGMtNDEgNDEtOTUuNSA2My42LTE1My41IDYzLjZ2NTFjNzEuNiAwIDEzOC45LTI3LjkgMTg5LjUtNzguNUw0MjguMSA1MTBsLTUuNi01LjZ6Ii8+PHBhdGggZmlsbD0iIzQ5NDlFNyIgZD0iTTQ4NiAzNTAuOWMwIDU4LTIyLjYgMTEyLjUtNjMuNiAxNTMuNWwzNi4xIDM2LjFDNTA5LjEgNDg5LjkgNTM3IDQyMi42IDUzNyAzNTFoLTUxeiIvPjxwYXRoIGZpbGw9IiM2NEFGRkIiIGQ9Ik0yNjkgNTY4Yy01OCAwLTExMi41LTIyLjYtMTUzLjUtNjMuNmwtMzYuMSAzNi4xYzUwLjcgNTAuNiAxMTggNzguNSAxODkuNiA3OC41di01MXoiLz48cGF0aCBmaWxsPSIjMkQyREFFIiBkPSJNNDgwLjUgMzAyLjJjMy42IDE1LjkgNS41IDMyLjIgNS41IDQ4LjhoNTFjMC0zMC45LTUuMy02MS4yLTE1LjQtODkuOGwtNDEuMSA0MXoiLz48cGF0aCBmaWxsPSIjRDMzMjMyIiBkPSJNMjY5IDEzMy45YzE2LjYgMCAzMyAxLjkgNDguOSA1LjVMMzU5IDk4LjNjLTI4LjctMTAuMi01OS0xNS41LTg5LjktMTUuNXY1MS4xeiIvPjxwYXRoIGZpbGw9IiNGQjUyNTIiIGQ9Ik0xMTUuNSAxOTcuNWM0MS00MSA5NS41LTYzLjYgMTUzLjUtNjMuNnYtNTFjLTcxLjYgMC0xMzguOSAyNy45LTE4OS41IDc4LjVsMzYgMzYuMXoiLz48cGF0aCBmaWxsPSIjNjlFNzgxIiBkPSJNMTE1LjUgNTA0LjRjLTQxLTQxLTYzLjYtOTUuNS02My42LTE1My41SDFjMCA3MS42IDI3LjkgMTM4LjkgNzguNSAxODkuNWwzNi0zNnoiLz48cGF0aCBmaWxsPSIjRkZCMjI5IiBkPSJNMTE1LjUgMTk3LjVsLTM2LjEtMzYuMUMyOC45IDIxMiAxIDI3OS40IDEgMzUwLjloNTFjMC01Ny45IDIyLjUtMTEyLjQgNjMuNS0xNTMuNHoiLz48L3N2Zz4=);
background-size: 100%;
}
.modal-download-detail {
position: absolute;
left: 0;
z-index: 5;
width: 100%;
transition: bottom 1s;
padding: 10px 0 5px;
opacity: 0;
transition: opacity 0.2s linear;
}
.modal-download-detail__content {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(55, 73, 87, 0.1);
position: relative;
}
.modal-download-detail__content #download-free,
.modal-download-detail__content > a {
width: 100%;
line-height: 1.2;
}
.modal-download-detail__content > p {
display: flex;
align-items: center;
color: #5b5b5b;
}
.modal-download-detail__content > p.font-md,
.modal-download-detail__content > p .modal__trigger {
color: #424242;
}
.modal-download-detail__content hr {
width: 100%;
}
.modal-download-detail__content .button--close {
position: absolute;
top: 0;
right: 0;
width: unset;
}
.modal-download-detail__content .button--close:hover {
color: unset;
background-color: unset;
}
@media screen and (max-width: 992px) {
.modal-download-detail.transition--mobile {
bottom: 0;
left: 0;
}
}
@media screen and (max-width: 992px) {
.modal-download-detail {
padding: 0;
position: fixed;
bottom: -500px;
z-index: 20;
transition: bottom 1s ease-in-out;
}
.modal-download-detail__content {
box-shadow: none;
border-top: 1px solid #e5e5e5;
}
}
.detail.new-detail {
max-width: 1440px;
padding: 0 60px;
margin: 0 auto;
}
.detail.new-detail .detail__inner .detail__top {
padding-top: 30px;
border-bottom: none;
}
.detail.new-detail .detail__inner .detail__top .detail__content {
border-radius: 12px;
background-color: #f7f7f7;
text-align: center;
}
.detail.new-detail .detail__inner .detail__top .detail__content.bg-white {
background-color: #fff;
}
@media screen and (max-width: 992px) {
.detail.new-detail .detail__inner .detail__top .detail__content.bg-white {
border-right: none;
border-bottom: 1px solid #e5e5e5;
border-radius: 0;
}
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail__icon__holder
.main-icon-without-slide {
padding: 90px;
}
@media screen and (max-width: 768px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail__icon__holder
.main-icon-without-slide {
padding: 30px;
}
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail__icon__holder
.sticker--shadow
img {
filter: drop-shadow(0 0 2px rgba(55, 73, 87, 0.15))
drop-shadow(0 2px 5px rgba(55, 73, 87, 0.2));
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail__icon__holder
.icon-mp4-container {
display: flex;
justify-content: center;
align-items: center;
width: 286px;
height: 286px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 8px;
margin: 30px auto;
}
.detail.new-detail .detail__inner .detail__top .detail__content__inner .detail-styles {
position: absolute;
height: 80%;
top: 50%;
transform: translateY(-50%);
left: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
img {
display: block;
width: unset;
height: unset;
pointer-events: none;
}
.detail.new-detail .detail__inner .detail__top .detail__content__inner .detail-styles ul {
display: flex;
flex-direction: column;
align-items: center;
padding-right: 10px;
overflow: auto;
white-space: nowrap;
border-radius: 3px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
ul::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
ul::-webkit-scrollbar-track {
border-radius: 10px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
ul::-webkit-scrollbar-thumb {
background: #e5e5e5;
border-radius: 10px;
height: 30px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
ul::-webkit-scrollbar-thumb:hover {
background: #d8d8d8;
}
@media screen and (max-width: 640px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
ul {
flex-direction: row;
}
}
.detail.new-detail .detail__inner .detail__top .detail__content__inner .detail-styles li {
display: inline-block;
position: relative;
width: 62px;
margin-bottom: 5px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
li:last-child {
border: none;
}
.detail.new-detail .detail__inner .detail__top .detail__content__inner .detail-styles a {
display: block;
width: 62px;
height: 62px;
padding: 15px;
border-radius: 6px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
a:hover {
background-color: hsla(0, 0%, 89.8%, 0.65);
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
a.active {
overflow: hidden;
box-shadow: inset 0 0 0 1px #44b678;
border-bottom: unset;
}
@media (max-width: 480px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles {
margin-bottom: 10px;
}
}
.detail.new-detail .detail__inner .detail__top .detail__content .detail__content__inner {
height: 100%;
width: 100%;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.edit-animated-icon {
margin-left: auto;
display: flex;
align-items: center;
color: #424242;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.edit-animated-icon
.icon--edit-alt:before {
margin-top: 7px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.edit-animated-icon
b {
color: #44b678;
}
@media (max-width: 1200px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.edit-animated-icon {
margin-left: 10px;
padding: 0 10px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.edit-animated-icon
span {
display: none;
}
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word {
width: 100%;
padding: 10px 0;
background: #fff;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search {
height: 34px;
line-height: 34px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-button {
height: 34px;
line-height: 34px;
padding: 0 10px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-button
span {
min-width: unset;
padding: 0 5px 0 10px;
}
@media screen and (max-width: 480px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-button
span {
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content {
border: 1px solid #e5e5e5;
color: #777;
padding: 10px;
border-radius: 3px;
z-index: 10;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul {
max-height: 275px;
overflow-y: scroll;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li {
height: 42px;
padding: 0 10px;
display: flex;
align-items: center;
cursor: pointer;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li:hover {
background-color: #f0f0f0;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li
span {
display: none;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li.active {
background: rgba(74, 210, 149, 0.1);
color: #286d34;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li.active
span {
display: inline;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.popover-content
ul
li.active
span:before {
color: #286d34;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
input {
padding: 0 10px;
height: 34px;
line-height: 34px;
text-overflow: ellipsis;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.clean-search__button,
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.search__button {
width: 34px;
margin: unset;
height: 100%;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.clean-search__button
i:before,
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.search__button
i:before {
color: #424242;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search
.awesomplete
.text {
font-size: 14px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search.ios
.awesomplete {
height: 34px;
display: flex;
align-items: center;
padding: 15px 0;
cursor: text;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search.ios
.awesomplete
input {
height: 100%;
line-height: normal;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content
.detail__content__inner
.search-style-word
.search-holder
.fake-search.ios
.awesomplete
ul {
top: 34px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar {
margin-left: 70px;
width: 441px;
position: relative;
}
@media (max-width: 1312px) {
.collections-visible .detail.new-detail .detail__inner .detail__top .detail__sidebar {
margin-left: 0;
width: 100%;
}
.collections-visible
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.download-action
.copypng--button,
.collections-visible
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.download-action
.popover-button,
.collections-visible
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.download-action
.popover-container {
width: 100%;
}
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar h1 {
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
font-size: 15px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft {
margin-bottom: 20px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__container {
max-width: 470px;
background-color: #142a5e;
border-radius: 8px;
padding: 10px;
display: flex;
align-items: center;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__image {
width: 140px;
height: 140px;
flex-shrink: 0;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
background-position-x: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__image img {
mix-blend-mode: multiply;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__text {
padding: 10px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__text p {
color: #f7f7f7;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.banner-craft__text
p
.badge {
border-radius: 3px;
background: #44b678;
padding: 0 5px;
font-size: 10px;
height: 18px;
color: #142a5e;
display: inline-flex;
justify-content: center;
align-items: center;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.banner-craft__text
p
> a {
color: #52d999;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__text > a,
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.banner-craft__text
button {
width: 100%;
line-height: 1.2;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.banner-craft__spinner.circle-spinner {
margin: 0 10px;
}
@media screen and (max-width: 992px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.banner-craft__container {
margin: 20px auto;
}
}
@media screen and (max-width: 480px) {
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.banner-craft__container {
flex-direction: column;
align-items: center;
text-align: center;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .banner-craft__image {
margin-bottom: 20px;
height: 130px;
}
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .detail__mobile-holder {
padding: 10px 0 20px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar .author__holder {
padding: 10px 0;
}
.countdown
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.author
> ul,
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.author
> .groups__item,
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.author
> .row,
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.countdown
.author
> ul,
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.landing--register
.author
> .separator,
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.profile-login
.author
> .group,
.landing--register
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.author
> .separator,
.profile-login
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.author__holder
.author
> .group {
margin: 0;
}
.detail.new-detail .detail__inner .search-other-categories {
color: #424242;
font-size: 17px;
}
.detail.new-detail .detail__inner .search-other-categories h2 {
font-size: 17px;
}
.detail.new-detail .detail__inner .related .related-header h2,
.detail.new-detail .detail__inner .related .related-header p {
color: #424242;
text-align: left;
font-weight: 700;
font-size: 17px;
}
.detail.new-detail .detail__inner .related .related-header .link--arrow.ai-most {
padding: 0;
}
.detail.new-detail .detail__inner .related .related-header .link--arrow.ai-most:hover {
background: none;
}
.detail.new-detail .detail__inner .detail-footer .tags {
margin-top: 12px;
}
.detail.new-detail .detail__inner .form-feedback {
margin: 0 0 24px;
}
.detail.new-detail .detail__inner .detail-footer > p {
color: #424242;
font-weight: 700;
}
.detail.new-detail .detail__inner .detail-footer .tags {
justify-content: start;
}
.detail.new-detail .detail__inner .detail-footer .tags li {
margin: 0 4px 4px 0;
}
.detail.new-detail.uicon .detail__inner .detail__top .detail__content {
transition: all 0.3s ease-in-out;
margin: 0;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker {
position: relative;
margin-left: auto;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.color-picker-wrapper {
width: 20px;
margin-bottom: 0;
margin-left: 20px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-app[data-theme='classic'],
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-app[data-theme='nano'] {
left: unset !important;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-app[data-theme='classic']:after,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-app[data-theme='nano']:after {
left: 16px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-app[data-theme='classic']:before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-app[data-theme='nano']:before {
left: 18px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-swatches
button {
cursor: default;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-swatches
button:disabled,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.uicon-edit-color-picker
.pcr-swatches
button[disabled] {
opacity: 1 !important;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail__icon__inner {
min-height: 480px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail__icon__inner
.icon-png-container {
padding-bottom: 80px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail__icon__inner
.icon-png-container
img {
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%)
contrast(85%);
}
@media screen and (max-width: 640px) {
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail__icon__inner {
min-height: unset;
flex-direction: column;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail__icon__inner
.icon-png-container {
padding-bottom: 0;
}
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail_equivalent_icons
a {
background-color: #f7f7f7;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content
.detail_equivalent_icons
a
img {
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%)
contrast(85%);
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail__header--logo {
display: flex;
align-items: center;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail__header--logo
.tooltip__trigger:after {
border-bottom: 6px solid #fff !important;
z-index: 400;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail__header--logo
.tooltip__content
.content {
padding: 20px;
width: 280px;
background-color: #fff;
color: #777;
white-space: normal;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail__header--logo
.tooltip__content:hover {
display: block;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group {
background-color: #fff;
flex-wrap: nowrap;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__input {
border: none;
align-self: center;
width: calc(100% - 54px);
}
#notification-cart
.notification__close
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
#notification-cart
.notification__close
.notification--success
.notification__state
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.icon--check,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.icon--success,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--alert
.notification--success
.notification__state
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--success
.notification__state
#notification-cart
.notification__close
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--success
.notification__state
.icon:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--success
.notification__state
.notification--alert
i:not(.nostyle),
.notification--alert
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle),
.notification--success
.notification__state
#notification-cart
.notification__close
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle),
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.icon:not(.nostyle),
.notification--success
.notification__state
.notification--alert
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle) {
display: none;
}
#notification-cart
.notification__close
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle):before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
#notification-cart
.notification__close
.notification--success
.notification__state
i:not(.nostyle):before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.icon--check:before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.icon--success:before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--alert
.notification--success
.notification__state
i:not(.nostyle):before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--success
.notification__state
#notification-cart
.notification__close
i:not(.nostyle):before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--success
.notification__state
.icon:not(.nostyle):before,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.notification--success
.notification__state
.notification--alert
i:not(.nostyle):before,
.notification--alert
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle):before,
.notification--success
.notification__state
#notification-cart
.notification__close
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle):before,
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
.icon:not(.nostyle):before,
.notification--success
.notification__state
.notification--alert
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context
i:not(.nostyle):before {
font-size: 22px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied {
background-color: #44b678;
border-radius: 3px;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
i {
color: #fff !important;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.icon--duplicate {
display: none;
}
#notification-cart
.notification__close
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
#notification-cart
.notification__close
.notification--success
.notification__state
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.icon--check,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.icon--success,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.notification--alert
.notification--success
.notification__state
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.notification--success
.notification__state
#notification-cart
.notification__close
i:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.notification--success
.notification__state
.icon:not(.nostyle),
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.notification--success
.notification__state
.notification--alert
i:not(.nostyle),
.notification--alert
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
i:not(.nostyle),
.notification--success
.notification__state
#notification-cart
.notification__close
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
i:not(.nostyle),
.notification--success
.notification__state
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
.icon:not(.nostyle),
.notification--success
.notification__state
.notification--alert
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group__context.copied
i:not(.nostyle) {
display: block;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
button.bj-button--ghost:hover {
color: #44b678;
background-color: transparent;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
button:focus {
color: #424242;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
code {
color: #424242;
font-size: 13px;
font-weight: 400;
padding: 10px 15px;
display: flex;
overflow: hidden;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
code
span {
display: inline-block;
white-space: nowrap;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
code
.purple {
color: #353777;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
code
.yellow {
color: #fec73f;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group
code
.green {
color: #286d34;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-class
.group:before {
box-shadow: inset 0 0 0 1px #e5e5e5;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-share {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: 'copy share';
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-share
.btn-copy {
grid-area: copy;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-share
.btn-share {
grid-area: share;
}
@media screen and (max-width: 480px) {
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.copy-share
button {
padding: 0;
}
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'png svg android ios';
}
.countdown
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
ul,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.countdown
ul,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.groups__item,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.landing--register
.separator,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.profile-login
.group,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.row,
.landing--register
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.separator,
.profile-login
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.group {
margin: 0;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.btn-png {
grid-area: png;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.btn-svg {
grid-area: svg;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.btn-android {
grid-area: android;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.btn-ios {
grid-area: ios;
}
@media screen and (max-width: 480px) {
.countdown
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
ul,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.countdown
ul,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.groups__item,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.landing--register
.separator,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.profile-login
.group,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.row,
.landing--register
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.separator,
.profile-login
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
> [class^='btn-']
.group {
flex-wrap: nowrap;
}
}
@media screen and (max-width: 480px) {
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.download-action
.btn {
font-size: 14px;
padding: 5px;
}
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.download-cdn
.group--inputs-cdn,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.download-cdn
.group--inputs-npm,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.package-manager
.group--inputs-cdn,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.package-manager
.group--inputs-npm {
max-width: 85%;
background-color: #fff;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.download-cdn
.group--inputs-cdn
.group__input,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.download-cdn
.group--inputs-npm
.group__input,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.package-manager
.group--inputs-cdn
.group__input,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.package-manager
.group--inputs-npm
.group__input {
border-right: none;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.download-cdn
.group--inputs-cdn
.group__input
input,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.download-cdn
.group--inputs-npm
.group__input
input,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.package-manager
.group--inputs-cdn
.group__input
input,
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__container
.package-manager
.group--inputs-npm
.group__input
input {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__link {
padding: 10px 0;
border-bottom: 1px solid #d8d8d8;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.accordion__content {
padding: 10px 0;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.no-registered {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
border-radius: 8px;
padding: 40px;
background: #d5f2eb;
background: linear-gradient(120deg, #d5f2eb, #dbeefa 50%, #eef7fe);
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__sidebar
.uicon-detail-download
.no-registered
p {
color: #424242;
}
.detail.new-detail.uicon .detail__inner .detail__top .detail__sidebar .uicon-version {
font-size: 10px;
padding: 5px 0 10px;
}
.detail.new-detail.uicon .detail__inner > section {
max-width: unset;
margin-bottom: 70px;
}
.detail.new-detail.uicon .detail__inner > section > .container {
padding: 0 20px;
}
.detail.new-detail.uicon .detail__inner > section.related.related-tags .uicons__related {
margin-bottom: 70px;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.uicons__related--header {
max-width: unset;
margin: unset;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.uicons__related--header
h2 {
color: #424242;
display: block;
margin-right: 10px;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.uicons__related--header
.link--arrow.ui-most {
padding: 0;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.uicons__related--header
.link--arrow.ui-most:hover {
background: none;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: row dense;
grid-gap: 18px;
margin-bottom: 20px;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
> li:not(.icon__detail--container) {
min-width: 100%;
position: relative;
overflow: hidden;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
@media screen and (min-width: 768px) {
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
> li:not(.icon__detail--container):not(.active):not(
.icon__detail--container
):hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px 0 rgba(32, 32, 149, 0.1);
z-index: 1;
}
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
> li:not(.icon__detail--container).active
a:before {
transform: scale(2);
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
> li:not(.icon__detail--container)
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
> li:not(.icon__detail--container)
a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f7f7f7;
border-radius: 100%;
transform: scale(0);
transition: transform 0.3s ease;
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
> li:not(.icon__detail--container)
img {
top: 50%;
position: relative;
margin: -13px auto auto;
width: 26px;
height: 26px;
left: unset;
transform: translateY(-50%);
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%)
contrast(85%);
}
.detail.new-detail.uicon
.detail__inner
> section.related.related-tags
.icons.uicons-list
.circle-spinner {
grid-column-start: 1;
grid-column-end: five;
width: 35px;
height: 35px;
}
.detail.new-detail.uicon ~ .container {
max-width: 1440px;
}
.detail.new-detail.uicon ~ .container .uicons__related--header {
max-width: unset;
}
.detail.new-detail.uicon ~ .container .uicons__related .uicons__icons {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: row dense;
grid-gap: 18px;
margin-bottom: 20px;
}
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container) {
min-width: 100%;
position: relative;
overflow: hidden;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
@media screen and (min-width: 768px) {
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container):not(.active):not(
.icon__detail--container
):hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px 0 rgba(32, 32, 149, 0.1);
z-index: 1;
}
}
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container):before {
content: '';
display: block;
width: 100%;
padding: 0 0 100%;
}
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container).active
a:before {
transform: scale(2);
}
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container)
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container)
a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f7f7f7;
border-radius: 100%;
transform: scale(0);
transition: transform 0.3s ease;
}
.detail.new-detail.uicon
~ .container
.uicons__related
.uicons__icons
> li:not(.icon__detail--container)
img {
top: 50%;
position: relative;
margin: -13px auto auto;
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%)
contrast(85%);
}
.detail.new-detail.uicon ~ .container .uicons__related .uicons__icons .circle-spinner {
grid-column-start: 1;
grid-column-end: five;
width: 35px;
height: 35px;
}
@media screen and (max-width: 768px) {
.detail.new-detail.uicon ~ .container .uicons__related .container {
padding: 0 20px;
}
.detail.new-detail.uicon ~ .container .uicons__related .container .uicons__icons {
width: calc(100% + 20px);
margin-left: -10px;
}
}
.detail.new-detail.uicon ~ .container .doubts-support,
.detail.new-detail.uicon ~ .container .find-best-icon-font,
.detail.new-detail.uicon ~ .container .icon__font__in__action {
max-width: unset;
}
.detail.new-detail.uicon ~ .container .doubts-support .container {
padding: 0;
}
@media screen and (max-width: 992px) {
.detail.new-detail {
padding: 0 40px;
}
.detail.new-detail:not(.uicon)
.detail__inner
.detail__top
.detail__sidebar
.detail__mobile-holder
.download
.btn-size
.popover-bottom
.popover-content {
bottom: 50px;
top: unset;
animation: popover-inverse 0.2s ease-in-out;
}
@keyframes popover-inverse {
0% {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.detail.new-detail:not(.uicon)
.detail__inner
.detail__top
.detail__sidebar
.detail__mobile-holder
.download
.btn-size
.popover-bottom
.popover-content:after,
.detail.new-detail:not(.uicon)
.detail__inner
.detail__top
.detail__sidebar
.detail__mobile-holder
.download
.btn-size
.popover-bottom
.popover-content:before {
bottom: -0.45em;
top: unset;
border-bottom: unset;
border-top: 12px solid #fff;
}
.detail.new-detail.uicon .detail__inner .detail__top .detail__content__inner {
min-height: 500px;
}
.detail.new-detail.uicon .detail__inner .detail__top .detail__sidebar {
margin-left: 0;
padding: 40px 0 0;
}
.detail.new-detail .detail__inner .detail__top {
display: block;
}
.detail.new-detail .detail__inner .detail__top .detail__content {
margin-bottom: 40px;
}
.detail.new-detail .detail__inner .detail__top .detail__sidebar {
margin: 0 auto;
width: 100%;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__sidebar
.detail__mobile-holder {
padding: 20px;
}
}
@media screen and (max-width: 640px) {
.detail.new-detail {
padding: 0 20px;
}
.detail.new-detail.uicon .detail__inner .detail__top .detail__content__inner {
min-height: unset;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content__inner
.detail-styles {
-ms-overflow-style: none;
scrollbar-width: none;
transform: unset;
overflow-x: auto;
width: 100%;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content__inner
.detail-styles::-webkit-scrollbar {
display: none;
}
.detail.new-detail.uicon
.detail__inner
.detail__top
.detail__content__inner
.detail-styles
ul {
padding: 0 30px;
overflow: auto;
width: 80%;
}
.detail.new-detail .detail__inner .detail__top .detail__content {
margin-bottom: 40px;
}
.detail.new-detail
.detail__inner
.detail__top
.detail__content__inner
.detail-styles {
position: static;
height: unset;
}
}
@media screen and (max-width: 480px) {
.detail.new-detail:not(.uicon)
.detail__inner
.detail__top
.detail__sidebar
.detail__mobile-holder
.download
.btn-size
.popover-button {
min-width: 34px;
}
.detail.new-detail:not(.uicon)
.detail__inner
.detail__top
.detail__sidebar
.detail__mobile-holder
.download
.btn-size
.popover-button
> span {
display: none;
}
}
.detail.new-detail .related-tags-styles {
margin-bottom: 45px;
}
.detail.new-detail .related-tags-styles header p {
color: #424242;
font-weight: 700;
}
.detail.new-detail .cards-products-home.circles {
width: fit-content;
margin: 40px auto 60px;
display: grid;
grid-template-columns: repeat(4, minmax(80px, 200px));
gap: 30px;
text-align: center;
}
.detail.new-detail
.cards-products-home.circles
a:hover
.cards-products-home__item
.cards-products-home__item__image
img,
.detail.new-detail
.cards-products-home.circles
a:hover
.cards-products-home__item
.cards-products-home__item__image
video {
transform: scale(1.05);
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__image
.circle {
width: 120px;
height: 120px;
background: linear-gradient(218.58deg, #44b678 11.5%, #cbf3e0 87.95%);
border-radius: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__image
.circle
.image {
width: 114px;
height: 114px;
border: 4px solid #fff;
border-radius: 50%;
margin: 0 auto;
z-index: 5;
overflow: hidden;
background: linear-gradient(110.49deg, #f0f0f0 26.28%, #f0f1ff 94.17%);
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__image
img,
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__image
video {
transition: all 0.2s ease-in-out;
width: 100%;
height: auto;
display: block;
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__text {
color: #424242;
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__text
h6 {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
@supports (-webkit-line-clamp: 2) {
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__text
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
@media screen and (max-width: 992px) {
.detail.new-detail .cards-products-home.circles {
grid-template-columns: unset;
grid-template-areas: 'icons-circle icons-circle uicons-circle uicons-circle ' 'aicons-circle aicons-circle stickers-circle stickers-circle';
}
.detail.new-detail .cards-products-home.circles .icons-circle {
grid-area: icons-circle;
}
.detail.new-detail .cards-products-home.circles .uicons-circle {
grid-area: uicons-circle;
}
.detail.new-detail .cards-products-home.circles .aicons-circle {
grid-area: aicons-circle;
}
.detail.new-detail .cards-products-home.circles .stickers-circle {
grid-area: stickers-circle;
}
}
@media screen and (max-width: 640px) {
.detail.new-detail .cards-products-home.circles .aicons-circle,
.detail.new-detail .cards-products-home.circles .icons-circle,
.detail.new-detail .cards-products-home.circles .stickers-circle,
.detail.new-detail .cards-products-home.circles .uicons-circle {
max-width: 80px;
}
.detail.new-detail .cards-products-home.circles .cards-products-home__item h6 {
font-size: 13px;
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__image
.circle {
width: 64px;
height: 64px;
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__image
.circle
.image {
width: 60px;
height: 60px;
border: 2px solid #fff;
}
.detail.new-detail
.cards-products-home.circles
.cards-products-home__item
.cards-products-home__item__text
p {
display: none;
}
}
@media screen and (max-width: 1400px) {
.detail.new-detail .collections.visible ~ .container .cards-products-home__item h6 {
font-size: 13px;
}
.detail.new-detail
.collections.visible
~ .container
.cards-products-home__item
.cards-products-home__item__image
.circle {
width: 64px;
height: 64px;
}
.detail.new-detail
.collections.visible
~ .container
.cards-products-home__item
.cards-products-home__item__image
.circle
.image {
width: 60px;
height: 60px;
border: 2px solid #fff;
}
.detail.new-detail
.collections.visible
~ .container
.cards-products-home__item
.cards-products-home__item__text
p {
display: none;
}
}
.detail .spirit-a.bg-aqua {
border-radius: 12px;
height: unset;
}
.detail .spirit-a.bg-aqua #unicorn .unicorn section .unicorn__row {
justify-content: space-between;
}
.detail .spirit-a.bg-aqua #unicorn header {
background: none;
justify-content: flex-start;
}
@media screen and (max-width: 640px) {
.detail .spirit-a.bg-aqua {
display: none;
}
}
.content.detail .detail.new-detail {
padding: 0;
}
.content.detail .detail.new-detail .detail__top {
padding: 20px 20px 0;
}
.content.detail .detail.new-detail .related-tags-styles {
min-height: 490px;
}
.new-headers h1 {
margin: 0.67em 0 5px;
}
@media screen and (max-width: 640px) {
.new-headers h1 {
font-size: 26px;
}
.new-headers p {
font-size: 14px;
}
}
.notification .button {
background-color: transparent !important;
}
.notification i[class*='icon']:before,
.notification i[class~='icon']:before {
vertical-align: inherit;
}
@media (max-width: 1120px) {
.view--pack .banner--quechua {
display: none !important;
}
}
@media (max-width: 992px) {
.view--detail .banner--quechua {
display: none !important;
}
}
.notification--alert i {
color: #fff;
}
.notification--alert .notification__close {
margin: 0;
line-height: 44px;
padding: 0 15px;
height: 100%;
}
.notify-wrapper--bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
width: 100%;
}
.notify-wrapper .notify--banner {
padding: 10px 20px;
border-radius: 0 !important;
background: none;
color: #fff;
}
.notify-wrapper .notify--banner a {
color: #fff !important;
}
.notify-wrapper .notify--banner a:hover {
text-decoration: underline;
}
.notify-wrapper .notify--banner .notification__close {
border-radius: 50%;
top: 5px;
right: 10px;
position: absolute;
}
.link--normal {
font-weight: 600;
color: #286d34;
}
.link--normal:hover {
color: #286d34;
text-decoration: underline;
}
.link--arrow {
padding: 0 10px;
height: 44px;
display: inline-flex;
align-items: center;
font-weight: 700;
color: #286d34;
}
.link--arrow--sm {
font-size: 13px;
height: 34px;
}
.link--arrow--md {
font-size: 15px;
}
.link--arrow:hover {
color: #286d34;
background: rgba(74, 210, 149, 0.1);
}
.link--arrow:hover i {
color: #286d34;
}
.link--arrow span ~ i {
margin-left: 10px;
}
.link--arrow i {
color: inherit;
}
.link--arrow i ~ span {
margin-left: 10px;
}
.link--arrow.special {
color: #fff;
}
.link--arrow.special i {
color: inherit;
}
.link--arrow.special:hover {
background: hsla(0, 0%, 100%, 0.1);
}
.link--arrow.special:hover i {
color: inherit;
}
.link--square {
padding: 0;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
color: #424242;
}
.link--square:hover {
background: #e5e5e5;
color: #424242;
}
.link--square:visited {
color: #424242;
}
.link--square[disabled] {
color: #c8c8c8;
}
.link--square[disabled]:hover {
background: none;
color: #c8c8c8;
}
.link--square i {
margin-bottom: -4px;
}
.link--square.special {
color: #fff;
}
.link--square.special:hover {
background: hsla(0, 0%, 100%, 0.1);
}
.link--square.special:visited {
color: #fff;
}
.link--square.special[disabled] {
color: #777;
}
.link--square.special[disabled]:hover {
background: none;
color: #777;
}
.tag--filter {
height: 31px;
display: inline-flex;
align-items: center;
border-radius: 3px;
padding: 0 10px;
background: #f0f0f0;
}
.tag--filter p {
margin: 0;
font-size: 14px;
color: #5b5b5b;
}
.tag--filter i {
color: #5b5b5b;
font-weight: 600;
font-size: 11px;
margin-left: 5px;
margin-bottom: -2px;
cursor: pointer;
}
.tag--related {
height: 27px;
display: inline-flex;
align-items: center;
border-radius: 3px;
padding: 0 10px;
color: #5b5b5b;
font-size: 13px;
border: 1px solid #c8c8c8;
}
.tag--related:hover {
color: #777;
background: hsla(0, 0%, 100%, 0.1);
}
.new--badge {
font-size: 12px;
color: #777;
text-transform: uppercase;
font-weight: 600;
}
.bj-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
font-weight: 600;
}
.bj-button--primary {
color: #fff !important;
background: #44b678;
}
.bj-button--primary:hover {
background: #3b9e62;
color: #fff;
}
.bj-button--primary:active {
background: #286d34;
color: #fff;
}
.bj-button--primary.bj-button--outline {
background: none;
color: #44b678 !important;
box-shadow: inset 0 0 0 2px #44b678;
}
.bj-button--primary.bj-button--outline:hover {
background: rgba(74, 210, 149, 0.1);
color: #44b678;
box-shadow: inset 0 0 0 2px #44b678;
}
.bj-button--primary.bj-button--outline:active {
background: rgba(74, 210, 149, 0.2);
}
.bj-button--transparent,
.bj-button--transparent:active,
.bj-button--transparent:focus,
.bj-button--transparent:hover {
color: #424242;
background: none;
}
.bj-button--secondary {
background: #e5e5e5;
color: #424242 !important;
}
.bj-button--secondary:hover {
background: #d8d8d8;
}
.bj-button--secondary.active,
.bj-button--secondary:focus {
background: #c8c8c8;
}
.bj-button--secondary.bj-button--outline {
background: none;
color: #424242 !important;
box-shadow: inset 0 0 0 2px #d8d8d8;
}
.bj-button--secondary.bj-button--outline:hover {
background: rgba(207, 217, 224, 0.1);
}
.bj-button--secondary.bj-button--outline:active {
background: rgba(207, 217, 224, 0.2);
}
.bj-button--square {
width: 44px;
height: 44px;
padding: 0;
}
.bj-button--pinterest-red {
background: #cb2027;
}
.bj-button--pinterest-red:hover {
background: rgba(203, 32, 39, 0.9);
}
.bj-button--facebook {
background: #1877f2;
}
.bj-button--facebook:hover {
background: #0d6ae4;
}
.bj-button--twitter,
.bj-button--twitter:hover {
background: #000;
}
.bj-button--follow-author {
color: #fff;
}
.bj-button--follow-author .state--active {
display: none;
}
.bj-button--follow-author.active {
background: none;
box-shadow: inset 0 0 0 2px #777;
color: #424242;
}
.bj-button--follow-author.active .hover {
display: none;
}
.bj-button--follow-author.active:hover {
background: #eb644c;
box-shadow: inset 0 0 0 2px #eb644c;
color: #fff;
}
.bj-button--follow-author.active:hover .normal {
display: none;
}
.bj-button--follow-author.active:hover .hover {
display: block;
}
.bj-button--follow-author.active:focus {
background: none;
box-shadow: inset 0 0 0 2px #777;
}
.bj-button--follow-author.active:focus .normal {
display: block;
}
.bj-button--follow-author.active:focus .hover {
display: none;
}
.bj-button--follow-author.active .state--active {
display: block;
}
.bj-button--follow-author.active .state--inactive {
display: none;
}
.bj-button--ghost {
background-color: transparent;
padding: 0 20px;
color: #424242;
font-size: 15px;
}
.bj-button--ghost:hover {
color: #424242;
background-color: #f0f0f0;
}
.bj-button i {
font-size: 16px;
}
.bj-button i.flaticon-pinterest {
color: #cb2027 !important;
}
.bj-button i.flaticon-pinterest--light {
color: #fff !important;
}
.bj-button span {
margin: 0;
padding: 0;
}
.bg__social--instagram {
background: linear-gradient(29.61deg, #f38334, #da2e7d 50.39%, #6b54c6);
}
html .medium {
font-weight: 600;
}
.pagination-bar {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 93px;
}
.pagination-bar__item {
flex: 1;
}
.pagination-bar__item:nth-of-type(2) {
flex: 2;
}
@media screen and (max-width: 768px) {
.pagination-bar__item:first-of-type,
.pagination-bar__item:nth-of-type(3) {
display: none;
}
}
.pagination-bar__item .pagination {
text-align: center;
margin: 10px 5px 40px;
}
.pagination-bar__item .pagination a {
margin: 5px;
}
@media screen and (max-width: 640px) {
.pagination-bar__item .pagination {
margin: 10px 5px 30px;
}
.pagination-bar__item .pagination a {
flex: 1;
-ms-flex: 1;
padding: 0 20px;
}
}
.pagination-bar__item .pagination-right-buttons {
justify-content: flex-end;
}
.pagination-bar__item .pagination-center-buttons {
justify-content: center;
}
.pagination-bar__item .pagination-center-buttons,
.pagination-bar__item .pagination-right-buttons {
display: flex;
align-items: center;
padding-right: 10px;
}
.pagination-bar__item .pagination-center-buttons .form-box,
.pagination-bar__item .pagination-right-buttons .form-box {
display: flex;
align-items: center;
margin: 20px 0 40px;
}
.pagination-bar__item .pagination-center-buttons .form-box [name='pagination-page'],
.pagination-bar__item .pagination-right-buttons .form-box [name='pagination-page'] {
border: 1px solid #d8d8d8;
width: 50px;
height: 33px;
text-align: center;
padding: 0;
margin: 0 10px 0 0;
}
.pagination-bar__item .pagination-center-buttons .form-box .pagination-buttons,
.pagination-bar__item .pagination-right-buttons .form-box .pagination-buttons {
display: flex;
margin-left: 10px;
}
.pagination-bar__item
.pagination-center-buttons
.form-box
.pagination-buttons
.pagination-next,
.pagination-bar__item
.pagination-center-buttons
.form-box
.pagination-buttons
.pagination-prev,
.pagination-bar__item
.pagination-right-buttons
.form-box
.pagination-buttons
.pagination-next,
.pagination-bar__item
.pagination-right-buttons
.form-box
.pagination-buttons
.pagination-prev {
display: flex;
align-items: center;
justify-content: center;
height: 33px;
width: 28px;
background: #e5e5e5;
color: #424242;
}
.pagination-bar__item
.pagination-center-buttons
.form-box
.pagination-buttons
.pagination-next
.flaticon-next,
.pagination-bar__item
.pagination-center-buttons
.form-box
.pagination-buttons
.pagination-next
.flaticon-prev,
.pagination-bar__item
.pagination-center-buttons
.form-box
.pagination-buttons
.pagination-prev
.flaticon-next,
.pagination-bar__item
.pagination-center-buttons
.form-box
.pagination-buttons
.pagination-prev
.flaticon-prev,
.pagination-bar__item
.pagination-right-buttons
.form-box
.pagination-buttons
.pagination-next
.flaticon-next,
.pagination-bar__item
.pagination-right-buttons
.form-box
.pagination-buttons
.pagination-next
.flaticon-prev,
.pagination-bar__item
.pagination-right-buttons
.form-box
.pagination-buttons
.pagination-prev
.flaticon-next,
.pagination-bar__item
.pagination-right-buttons
.form-box
.pagination-buttons
.pagination-prev
.flaticon-prev {
position: relative;
top: 2px;
}
@media screen and (max-width: 640px) {
.pagination-bar.container {
padding: 0 10px;
}
}
.relateds-bar {
margin: 30px 0 10px;
}
.relateds-bar .related-search {
display: block;
}
.relateds-bar .related-search-box {
white-space: nowrap;
overflow: auto;
display: flex;
flex-wrap: wrap;
}
.relateds-bar .related-search-box a {
height: 28px;
line-height: 23px;
padding: 0 5px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 13px;
color: #777;
border: 2px solid #d8d8d8;
border-radius: 3px;
}
.search-data.no-results {
display: flex;
justify-content: flex-end;
}
.search-data.no-results .popover-share {
margin: 20px 10px;
}
.search-data.packs-data .packs-data--box,
.search-data.packs-data .packs-data--box .search-data--box {
display: flex;
}
.search-data.packs-data .packs-data--box .search-data--box .total-search-result {
display: flex;
align-items: center;
margin-right: 20px;
align-items: baseline;
flex-wrap: wrap;
}
.search-data.packs-data .packs-data--box .search-data--box .total-search-result h1 {
margin: 0 0 10px;
}
.search-data.packs-data
.packs-data--box
.search-data--box
.total-search-result.icons-result
> div {
display: flex;
align-items: center;
}
.search-data.packs-data .packs-data--box .search-data--box .link--tag-stickers i {
color: #286d34;
}
.search-data.packs-data .packs-data--box .search-data--box .tags {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.search-data.packs-data .packs-data--box .search-data--box .tags li {
display: inline-flex;
align-items: center;
background: #f0f0f0;
color: #5b5b5b;
font-size: 14px;
border-radius: 3px;
margin: 0 5px 0 0;
padding: 5px;
}
@media screen and (max-width: 768px) {
.search-data.packs-data .packs-data--box .search-data--box .tags li {
margin: 8px 5px 0 0;
}
}
.search-data.packs-data .packs-data--box .search-data--box .tags li .filters_delete_tag {
color: #424242;
margin-left: 5px;
font-size: 16px;
font-weight: 700;
}
.search-data.packs-data .packs-data--box .search-data--box .tags li.delete-all {
background: none;
padding: 0;
}
@media screen and (max-width: 480px) {
.search-data.packs-data .packs-data--box .search-data--box .tags li.delete-all {
display: none;
}
}
.search-data.packs-data
.packs-data--box
.search-data--box
.tags
li.delete-all
.filters_delete_all {
width: auto;
font-weight: 400;
font-size: 14px;
color: #5b5b5b;
text-decoration: underline;
}
.search-data.packs-data
.packs-data--box
.search-data--box
.tags
li.delete-all
.filters_delete_all:hover {
color: #eb644c;
}
.search-data.packs-data .packs-data--box .search-data--box .popover-share {
position: static;
}
.search-data.packs-data .packs-data--box .search-data--box:first-child {
flex: 1;
}
@media screen and (max-width: 768px) {
.search-data.packs-data .packs-data--box .search-data--box:first-child {
align-items: flex-start;
}
}
.search-data.packs-data .packs-data--box .popover-share .popover-content {
z-index: 10;
}
.search-data.packs-data .origin-search--notice,
.search-data.packs-data .original-search {
margin-top: 5px;
font-size: 14px;
}
.search-data.packs-data .origin-search--notice {
display: flex;
flex-wrap: wrap;
background-color: rgba(252, 161, 32, 0.1);
width: fit-content;
padding: 5px 10px;
border-radius: 3px;
font-weight: 700;
}
.search-data.packs-data .origin-search--notice p {
margin-bottom: 0;
margin-right: 5px;
color: #5b5b5b;
}
.search-data.packs-data .origin-search--notice a {
color: #de6815;
}
aside.filters {
margin-right: 40px;
border-right: 1px solid #e5e5e5;
}
aside.filters ::-webkit-scrollbar {
width: 3px;
}
aside.filters ::-webkit-scrollbar-thumb {
background-color: #b1b1b1;
border-radius: 20px;
border: 3px solid transparent;
}
aside.filters ::-webkit-scrollbar-track {
background: transparent;
}
aside.filters #form_filters {
height: 100%;
}
@media screen and (max-width: 992px) {
aside.filters {
margin-right: 0;
border-right: none;
}
}
aside.filters .search-view-filters-aside {
position: sticky;
top: 118px;
display: block;
font-size: 13px;
margin-bottom: 10px;
width: 300px;
}
aside.filters .search-view-filters-aside .col {
flex: unset;
padding: 0;
margin: 0;
}
aside.filters .search-view-filters-aside .col.sort {
margin-left: auto;
}
aside.filters .search-view-filters-aside .circle-spinner {
position: absolute;
left: 45%;
top: 50%;
}
aside.filters .search-view-filters-aside .container-filters {
display: flex;
flex-wrap: wrap;
}
aside.filters .search-view-filters-aside .container-filters .filters-body {
width: 100%;
height: auto;
padding-bottom: 0;
top: 0;
}
@media screen and (max-width: 480px) {
aside.filters .search-view-filters-aside {
width: 100%;
}
}
aside.filters .search-view-filters-aside .popover .popover-button {
height: 34px;
line-height: 34px;
font-weight: 400;
padding: 0 20px;
position: relative;
color: #424242;
background-color: #e5e5e5;
flex-wrap: nowrap;
}
aside.filters .search-view-filters-aside .popover .popover-button:hover {
background-color: #d8d8d8;
color: #424242;
}
aside.filters .search-view-filters-aside .popover .popover-button:focus {
color: #424242;
}
aside.filters .search-view-filters-aside .popover .popover-button.active {
background-color: #e5e5e5;
color: #424242;
}
aside.filters .search-view-filters-aside .popover .popover-content {
right: 0;
min-width: 100%;
padding: 0 8px;
width: unset;
}
aside.filters .search-view-filters-aside .popover .popover-content .radio-group {
margin: 10px 0;
flex-wrap: nowrap;
}
aside.filters .search-view-filters-aside .popover .popover-content .radio-group label {
white-space: nowrap;
}
aside.filters .search-view-filters-aside .popover .popover-content .switch {
line-height: 44px;
flex-wrap: nowrap;
}
aside.filters .search-view-filters-aside .popover .popover-content .switch__link {
white-space: nowrap;
}
aside.filters .search-view-filters-aside .popover .popover-content:after,
aside.filters .search-view-filters-aside .popover .popover-content:before {
right: unset;
}
aside.filters .search-view-filters-aside .popover .popover-content:before {
display: none;
}
aside.filters .search-view-filters-aside__group .item {
padding: 0;
min-height: 34px;
align-items: stretch;
display: flex;
border-radius: 3px;
margin: 0;
text-transform: none;
font-weight: inherit;
white-space: nowrap;
position: relative;
}
aside.filters .search-view-filters-aside__group .item.disabled {
pointer-events: auto !important;
cursor: not-allowed !important;
}
@media screen and (max-width: 480px) {
aside.filters .search-view-filters-aside__group .item.disabled {
pointer-events: none !important;
}
}
aside.filters .search-view-filters-aside__group .item__link {
border: 1px solid #e5e5e5;
height: unset;
display: flex;
align-items: center;
padding: 0 20px;
color: #424242;
min-height: 30px;
cursor: pointer;
border-radius: 8px;
}
aside.filters .search-view-filters-aside__group .item__link:hover {
border: 1px solid #d8d8d8;
}
aside.filters .search-view-filters-aside__group input[type='checkbox'],
aside.filters .search-view-filters-aside__group input[type='radio'] {
display: none;
}
aside.filters
.search-view-filters-aside__group
input[type='checkbox']:checked
~ .item__link,
aside.filters .search-view-filters-aside__group input[type='radio']:checked ~ .item__link,
aside.filters
.search-view-filters-aside__group
label[for^='switch_search_by'].active
span {
color: #424242;
border-radius: 8px;
border: 1px solid #44b678;
}
aside.filters
.search-view-filters-aside__group
input[type='radio']:checked
~ .item__link:hover {
cursor: default;
}
aside.filters .search-view-filters-aside .popover.sort .popover-content {
right: 0;
width: unset;
}
aside.filters .search-view-filters-aside .popover.sort .popover-content:after {
right: 0.9em;
}
aside.filters .search-view-filters-aside .flaticon-choice,
aside.filters .search-view-filters-aside .flaticon-craft,
aside.filters .search-view-filters-aside .raw-filter {
margin-bottom: 20px;
}
aside.filters .search-view-filters-aside .flaticon-choice .checkbox--xs,
aside.filters .search-view-filters-aside .flaticon-craft .checkbox--xs,
aside.filters .search-view-filters-aside .raw-filter .checkbox--xs {
padding: 9px 0;
}
aside.filters
.search-view-filters-aside
.flaticon-choice
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator,
aside.filters
.search-view-filters-aside
.flaticon-craft
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator,
aside.filters
.search-view-filters-aside
.raw-filter
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator {
box-shadow: inset 0 0 0 64px #3b9e62;
}
aside.filters
.search-view-filters-aside
.flaticon-choice
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator
i:before,
aside.filters
.search-view-filters-aside
.flaticon-craft
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator
i:before,
aside.filters
.search-view-filters-aside
.raw-filter
.checkbox
input[type='checkbox']:checked
~ .checkbox__indicator
i:before {
line-height: 1.1;
}
aside.filters .search-view-filters-aside .flaticon-choice .badge,
aside.filters .search-view-filters-aside .flaticon-craft .badge,
aside.filters .search-view-filters-aside .raw-filter .badge {
border-radius: 3px;
color: #fff;
line-height: 1.1;
padding: 4px;
}
aside.filters .search-view-filters-aside .flaticon-choice .tooltip,
aside.filters .search-view-filters-aside .flaticon-craft .tooltip,
aside.filters .search-view-filters-aside .raw-filter .tooltip {
position: static;
}
aside.filters .search-view-filters-aside .flaticon-choice .tooltip .tooltip__content,
aside.filters .search-view-filters-aside .flaticon-craft .tooltip .tooltip__content,
aside.filters .search-view-filters-aside .raw-filter .tooltip .tooltip__content {
padding-bottom: 9px;
bottom: 95%;
}
aside.filters
.search-view-filters-aside
.flaticon-choice
.tooltip
.tooltip__content
.content,
aside.filters
.search-view-filters-aside
.flaticon-craft
.tooltip
.tooltip__content
.content,
aside.filters .search-view-filters-aside .raw-filter .tooltip .tooltip__content .content {
border-radius: 3px;
background-color: #fff;
color: #5b5b5b;
font-weight: 400;
white-space: normal;
width: 240px;
display: flex;
gap: 10px;
padding: 20px;
word-break: break-word;
box-shadow: 0 2px 30px rgba(29, 38, 45, 0.2);
}
aside.filters
.search-view-filters-aside
.flaticon-choice
.tooltip
.tooltip__content
.content
div,
aside.filters
.search-view-filters-aside
.flaticon-craft
.tooltip
.tooltip__content
.content
div,
aside.filters
.search-view-filters-aside
.raw-filter
.tooltip
.tooltip__content
.content
div {
flex: 1;
}
aside.filters
.search-view-filters-aside
.flaticon-choice
.tooltip
.tooltip__content
.content
a,
aside.filters
.search-view-filters-aside
.flaticon-craft
.tooltip
.tooltip__content
.content
a,
aside.filters
.search-view-filters-aside
.raw-filter
.tooltip
.tooltip__content
.content
a {
color: #286d34;
}
aside.filters .search-view-filters-aside .flaticon-choice .tooltip i,
aside.filters .search-view-filters-aside .flaticon-craft .tooltip i,
aside.filters .search-view-filters-aside .raw-filter .tooltip i {
cursor: pointer;
}
aside.filters .search-view-filters-aside .flaticon-choice .tooltip i:after,
aside.filters .search-view-filters-aside .flaticon-craft .tooltip i:after,
aside.filters .search-view-filters-aside .raw-filter .tooltip i:after {
border-top: 6px solid #fff;
z-index: 335;
bottom: 83%;
}
aside.filters .search-view-filters-aside .item-plain-color-selected .item__link {
color: #424242;
border-radius: 8px;
border: 1px solid #44b678;
}
aside.filters .search-view-filters-aside .item-plain-color-opened ~ .plain-colors {
display: flex;
}
aside.filters .search-view-filters-aside .plain-colors {
gap: 10px;
flex-wrap: wrap;
padding: 0 40px 0 5px;
display: none;
}
aside.filters .search-view-filters-aside .plain-colors-item {
display: inline;
position: relative;
width: 20px;
height: 20px;
border-radius: 100%;
border: 1px solid #d8d8d8;
cursor: pointer;
}
aside.filters .search-view-filters-aside .plain-colors-item-red {
background-color: red;
}
aside.filters .search-view-filters-aside .plain-colors-item-red span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-blue {
background-color: #00f;
}
aside.filters .search-view-filters-aside .plain-colors-item-blue span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-green {
background-color: #0f0;
}
aside.filters .search-view-filters-aside .plain-colors-item-green span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-yellow {
background-color: #ff0;
}
aside.filters .search-view-filters-aside .plain-colors-item-yellow span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-magenta {
background-color: #f0f;
}
aside.filters .search-view-filters-aside .plain-colors-item-magenta span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-cyan {
background-color: #0ff;
}
aside.filters .search-view-filters-aside .plain-colors-item-cyan span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-rose {
background-color: #ff007f;
}
aside.filters .search-view-filters-aside .plain-colors-item-rose span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-violet {
background-color: #7f00ff;
}
aside.filters .search-view-filters-aside .plain-colors-item-violet span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-azure {
background-color: #007fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-azure span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-spring-green {
background-color: #00ff7f;
}
aside.filters .search-view-filters-aside .plain-colors-item-spring-green span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-chartreuse {
background-color: #dfff00;
}
aside.filters .search-view-filters-aside .plain-colors-item-chartreuse span {
border-color: #424242;
}
aside.filters .search-view-filters-aside .plain-colors-item-orange {
background-color: orange;
}
aside.filters .search-view-filters-aside .plain-colors-item-orange span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-black {
background-color: #000;
}
aside.filters .search-view-filters-aside .plain-colors-item-black span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-gray {
background-color: grey;
}
aside.filters .search-view-filters-aside .plain-colors-item-gray span {
border-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-white {
background-color: #fff;
}
aside.filters .search-view-filters-aside .plain-colors-item-white span {
border-color: #424242;
}
aside.filters .search-view-filters-aside .plain-colors-item span {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
font-size: 0;
width: 7px;
height: 11px;
}
aside.filters .search-view-filters-aside .plain-colors-item input:checked ~ span {
border-style: solid;
border-width: 0 2px 2px 0;
transform: translate(-4px, -7px) rotate(45deg);
}
aside.filters .search-view-filters-aside > .container-filters.scroll {
overflow: auto;
padding-top: 10px;
max-height: calc(100vh - 402px);
min-height: 300px;
}
#viewport.has-scrolled
aside.filters
.search-view-filters-aside
> .container-filters.scroll,
body[data-section='404']
aside.filters
.search-view-filters-aside
> .container-filters.scroll,
body[data-section='pack-search']
aside.filters
.search-view-filters-aside
> .container-filters.scroll,
body[data-section='style-search']
aside.filters
.search-view-filters-aside
> .container-filters.scroll {
max-height: calc(100vh - 180px);
}
@media screen and (max-width: 992px) {
aside.filters .search-view-filters-aside > .container-filters.scroll {
max-height: calc(100vh - 72px);
padding-right: 10px;
}
#viewport.has-scrolled
aside.filters
.search-view-filters-aside
> .container-filters.scroll {
max-height: calc(100vh - 72px);
}
}
aside.filters .search-view-filters-aside .close {
display: flex;
align-items: center;
color: #121212;
border-bottom: 1px solid #e5e5e5;
margin-right: 20px;
}
aside.filters .search-view-filters-aside .close svg {
margin-right: 10px;
}
#notification-cart .notification__close aside.filters .search-view-filters-aside .close i,
.notification--alert aside.filters .search-view-filters-aside .close i,
aside.filters .search-view-filters-aside .close #notification-cart .notification__close i,
aside.filters .search-view-filters-aside .close .icon,
aside.filters .search-view-filters-aside .close .notification--alert i {
color: #121212;
margin-left: auto;
padding: 5px 0;
}
aside.filters .search-view-filters-aside .filters-body .filters-body__container {
position: relative;
margin-right: 20px;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__content,
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link {
padding: 0;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link {
display: flex;
align-items: center;
margin-bottom: 15px;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
svg {
margin-right: 10px;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
p {
margin: 0;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
p
+ span {
color: #44b678;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
i {
margin-left: auto;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
> i {
margin-left: unset;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
> i:before {
color: #424242;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link
.tooltip
i {
color: #b1b1b1;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-body__container
.filters-body__link.active
+ .filters-body__content {
margin-bottom: 30px;
}
aside.filters .search-view-filters-aside .filters-body .filters-body__container .title {
display: inline;
}
@media screen and (max-width: 992px) {
aside.filters .search-view-filters-aside .filters-body .filters-body__container {
margin-right: 0;
}
}
aside.filters
.search-view-filters-aside
.filters-body
.flaticon-craft
.search-view-filters-aside__group,
aside.filters
.search-view-filters-aside
.filters-body
.raw-filter
.search-view-filters-aside__group {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
aside.filters .search-view-filters-aside .filters-body .filters-applied {
margin-right: 20px;
}
aside.filters .search-view-filters-aside .filters-body .filters-applied__header {
display: flex;
justify-content: space-between;
}
aside.filters
.search-view-filters-aside
.filters-body
.filters-applied__header
.clear-all {
cursor: pointer;
display: flex;
align-items: center;
}
@media screen and (max-width: 992px) {
aside.filters .search-view-filters-aside .filters-body .filters-applied {
margin-right: 0;
}
}
aside.filters .search-view-filters-aside .filters-body .labels {
display: flex;
flex-wrap: wrap;
}
aside.filters .search-view-filters-aside .filters-body .labels .filterLabels {
max-width: 1050px;
text-align: left;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
aside.filters
.search-view-filters-aside
.filters-body
.labels
.filterLabels
.filterLabel-tag {
padding: 0 10px;
background-color: #44b678;
border-radius: 3px;
color: #fff;
cursor: pointer;
}
aside.filters
.search-view-filters-aside
.filters-body
.labels
.filterLabels
.filterLabel-tag
i {
display: inline-block;
width: unset;
height: unset;
line-height: 17px;
}
aside.filters
.search-view-filters-aside
.filters-body
.labels
.filterLabels
.filterLabel-tag
i:before {
font-weight: 700;
vertical-align: text-bottom;
margin-left: 5px;
font-size: 12px;
color: #fff;
}
aside.filters .search-view-filters-aside .filters-body hr {
margin-top: 10px;
}
aside.filters .search-view-filters-aside .search-view-filters-aside__group .item {
line-height: 1;
}
aside.filters .search-view-filters-aside .search-view-filters-aside__group .item__link {
padding: 0 15px;
min-height: 34px;
font-weight: 400;
}
aside.filters
.search-view-filters-aside
.search-view-filters-aside__group
.item__link.active {
background-color: #fff;
color: #424242;
border: 1px solid #44b678;
}
aside.filters
.search-view-filters-aside
> :not(.search-view-filters-aside__group)
.container-filters {
gap: 10px;
}
aside.filters .search-view-filters-aside .filters-applied {
margin-right: 20px;
}
aside.filters .search-view-filters-aside .filters-applied__header {
display: flex;
justify-content: space-between;
}
aside.filters .search-view-filters-aside .filters-applied__header .clear-all {
cursor: pointer;
display: flex;
align-items: center;
}
@media screen and (max-width: 992px) {
aside.filters .search-view-filters-aside .filters-applied {
margin-right: 0;
}
}
aside.filters .search-view-filters-aside .labels {
display: flex;
flex-wrap: wrap;
}
aside.filters .search-view-filters-aside .labels .filterLabels {
max-width: 1050px;
text-align: left;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
aside.filters .search-view-filters-aside .labels .filterLabels .filterLabel-tag {
padding: 0 10px;
background-color: #44b678;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
}
aside.filters .search-view-filters-aside .labels .filterLabels .filterLabel-tag i {
display: inline-block;
width: unset;
height: unset;
line-height: 17px;
}
aside.filters .search-view-filters-aside .labels .filterLabels .filterLabel-tag i:before {
font-weight: 700;
vertical-align: text-bottom;
margin-left: 5px;
font-size: 12px;
color: #fff;
}
aside.filters .search-view-filters-aside hr {
margin-top: 10px;
}
aside.filters .collapsed-filters {
display: none;
width: 80px;
position: sticky;
top: 118px;
height: fit-content;
justify-content: center;
flex-direction: column;
}
aside.filters .collapsed-filters__close {
display: flex;
flex-direction: column;
gap: 20px;
}
aside.filters .collapsed-filters__close > i {
color: #424242;
}
aside.filters .collapsed-filters__close > i:after {
display: none;
}
aside.filters .collapsed-filters__close > i.active {
position: relative;
}
aside.filters .collapsed-filters__close > i.active:after {
display: block;
position: absolute;
content: '';
width: 6px;
height: 6px;
background-color: #44b678;
top: 2px;
right: 5px;
border-radius: 100%;
}
aside.filters .collapsed-filters__item {
width: 40px;
height: 40px;
display: grid;
justify-items: center;
align-items: center;
border-radius: 10px;
border: 1px solid #d8d8d8;
}
aside.filters .collapsed-filters__item.editable_stroke svg {
fill: #e5e5e5;
}
aside.filters .collapsed-filters__item i,
aside.filters .collapsed-filters__item svg {
fill: #121212;
color: #121212;
}
aside.filters .collapsed-filters__item.active {
border: 1px solid #44b678;
}
aside.filters input[type='checkbox']#search__filters ~ .search__filters--overlay {
display: none;
}
aside.filters input[type='checkbox']#search__filters:checked ~ .search__filters--overlay {
display: block;
width: 100vw;
height: 100vh;
background: rgba(20, 42, 94, 0.9);
position: fixed;
top: 0;
z-index: 25;
animation: popover 0.2s ease-in-out;
}
@media screen and (min-width: 992px) {
aside.filters
input[type='checkbox']#search__filters:checked
~ .search__filters--overlay {
display: none;
}
}
aside.filters input[type='checkbox']#search__filters:not(:checked) ~ #form_filters {
width: 0;
height: 0;
overflow: hidden;
transition: width 0.15s linear;
}
aside.filters
input[type='checkbox']#search__filters:not(:checked)
~ #form_filters
.search-view-filters-aside {
transition: width 0.25s linear;
transition: opacity 0.15s linear;
width: 0;
opacity: 0;
}
aside.filters input[type='checkbox']#search__filters:not(:checked) ~ .collapsed-filters {
display: flex;
}
aside.filters input[type='checkbox']#search__filters:checked ~ #form_filters {
display: block;
width: 300px;
height: 100%;
overflow: unset;
transition: width 0.15s linear;
}
aside.filters
input[type='checkbox']#search__filters:checked
~ #form_filters
.search-view-filters-aside {
transition: width 0.15s linear;
transition: opacity 0.25s linear;
width: 300px;
opacity: 1;
}
aside.filters input[type='checkbox']#search__filters:checked ~ .collapsed-filters {
display: none;
}
@media screen and (max-width: 992px) {
aside.filters input[type='checkbox']#search__filters:checked ~ #form_filters,
aside.filters
input[type='checkbox']#search__filters:checked
~ .search__filters--overlay {
display: none;
}
aside.filters
input[type='checkbox']#search__filters:checked.show-filters-in-mobile
~ #form_filters {
display: block;
width: 0;
}
aside.filters
input[type='checkbox']#search__filters:checked.show-filters-in-mobile
~ .search__filters--overlay {
display: block;
}
aside.filters
input[type='checkbox']#search__filters:checked.show-filters-in-mobile
~ #form_filters
.search-view-filters-aside {
position: fixed;
top: 0;
left: 0;
z-index: 30;
background-color: #fff;
width: 300px;
animation: popover 0.2s ease-in-out;
padding: 10px 0 0 20px;
height: 100vh;
}
}
@media screen and (max-width: 640px) {
aside.filters
input[type='checkbox']#search__filters:checked.show-filters-in-mobile
~ #form_filters
.search-view-filters-aside {
width: 100%;
}
}
.search-holder .fake-search {
background-color: #f0f0f0;
height: 44px;
line-height: 44px;
border-radius: 3px;
margin: 0;
}
.search-holder .fake-search.focus {
box-shadow: inset 0 0 0 2px #f0f0f0;
}
.search-holder .fake-search .popover-button {
height: 44px;
line-height: 44px;
font-weight: 400;
padding: 0 20px;
position: relative;
color: #424242;
}
.search-holder .fake-search .popover-button:after {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 60%;
transform: translateY(-50%);
background-color: #d8d8d8;
content: '';
}
.search-holder .fake-search .popover-button span {
min-width: 60px;
}
.search-holder .fake-search .popover-content {
width: max-content;
left: 0;
top: 100%;
border-radius: 0 0 3px 3px;
padding: 10px;
min-width: 100%;
color: #777;
}
.search-holder .fake-search .popover-content:after,
.search-holder .fake-search .popover-content:before {
display: none;
}
.search-holder .fake-search button[type='submit'] {
border: none;
width: 44px;
height: 44px;
color: #424242;
box-shadow: none;
}
.search-holder .fake-search button[type='submit']:focus {
background: none;
}
.search-holder .fake-search button.clean-search__button {
position: relative;
margin: auto 0;
background: transparent;
height: 100%;
padding: 0;
width: 44px;
opacity: 0;
transition: all 0.3s ease;
}
#notification-cart
.notification__close
.search-holder
.fake-search
button.clean-search__button
i,
.notification--alert .search-holder .fake-search button.clean-search__button i,
.search-holder
.fake-search
button.clean-search__button
#notification-cart
.notification__close
i,
.search-holder .fake-search button.clean-search__button .icon,
.search-holder .fake-search button.clean-search__button .notification--alert i {
color: #424242;
margin: auto;
}
.search-holder .fake-search button.clean-search__button:after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 60%;
transform: translateY(-50%);
background-color: #d8d8d8;
}
.search-holder .fake-search button.clean-search__button.show-btn {
opacity: 1;
}
@media screen and (max-width: 640px) {
.search-holder .fake-search .tag-field__items {
display: none;
}
.search-holder .fake-search .popover-button {
padding: 0 5px 0 10px;
}
.search-holder .fake-search input[type='search'] {
padding-left: 10px;
}
.search-holder .fake-search button[type='submit'] {
padding: 0;
}
}
.search-holder input[type='search'] {
margin: 0;
padding: 0;
border: none;
background: none;
white-space: nowrap;
height: 44px;
line-height: 44px;
position: relative;
z-index: auto;
}
.search-holder .awesomplete,
.search-holder input[type='search'] {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.search-holder form {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 100%;
}
.search-holder .tag-field {
position: relative;
line-height: 24px;
height: 100%;
}
.search-holder .tag-field__item {
box-shadow: 0 0 0 1px #c8c8c8;
border-radius: 2px;
padding-left: 4px;
margin: 10px 5px 10px 0;
font-size: 13px;
}
.search-holder .tag-field__item .remove {
display: inline-block;
width: 19px;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: 700;
cursor: pointer;
}
.search-holder .tag-field__content {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
pointer-events: none !important;
font-size: 15px;
}
.search-holder .tag-field__content .autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
width: calc(100% + 30px);
margin: 0 -15px;
}
.search-holder .fake-input {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0;
white-space: nowrap;
overflow: hidden;
outline: none;
width: 200px;
}
.search-holder .fake-input br {
display: none;
}
.search-holder .fake-input * {
display: inline;
white-space: nowrap;
}
.search-holder .fake-input .search-tag {
background-color: rgba(68, 182, 120, 0.7);
color: #424242;
padding: 0 4px;
}
.section__faq {
padding: 30px 0;
}
.section__faq li {
border-radius: 4px;
border: 1px solid #d8d8d8;
position: relative;
padding: 50px 30px;
margin-bottom: 20px;
}
.section__faq__row {
padding-left: 140px;
position: relative;
}
.section__faq__row > strong {
color: #32864c;
position: absolute;
top: 0;
left: 0;
display: block;
width: 120px;
font-size: 13px;
}
.section__faq__row p {
margin: 0;
}
@media screen and (max-width: 768px) {
.section__faq li {
padding: 20px;
}
.section__faq__row {
padding-left: 0;
}
.section__faq__row > strong {
width: auto;
position: relative;
}
}
.popover-share ul.popover-content {
padding: 10px;
right: -10px;
z-index: 5;
}
.detail__mobile-holder.only-share .popover-share {
margin-left: 0;
width: 100%;
}
.detail__mobile-holder.only-share .popover-share .popover-container,
.detail__mobile-holder.only-share .popover-share .popover-container .popover-button {
width: 100%;
}
@media screen and (max-width: 992px) {
.detail__mobile-holder.only-share {
padding: 20px 10px;
}
.detail__mobile-holder.only-share > .fi-premium-icon {
margin: 0 5px;
}
}
.group-styles {
border-bottom: 1px solid #d8d8d8;
padding-bottom: 10px;
margin-top: 50px;
}
.group-styles:first-child {
margin-top: 0;
}
.group-styles__header {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.group-styles__header h2 {
display: inline-block;
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
.group-styles__info {
width: 100%;
}
@media (max-width: 1407px) {
.group-styles__info span {
display: none;
}
}
.group-styles__body {
display: flex;
align-items: center;
gap: 10px;
}
.group-styles__body > .icons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
grid-auto-flow: row dense;
align-items: end;
}
.group-styles__body > .icons .icon--item.icon-fill {
display: none;
}
.group-styles__body > .icons .icon--holder {
max-width: 190px;
margin: 0 auto;
}
.group-styles__body > .icons:not(.big) {
min-width: unset;
height: 152px;
overflow: hidden;
}
@media screen and (max-width: 992px) {
.group-styles__body > .icons:not(.big) {
height: 285px;
}
}
@media screen and (max-width: 480px) {
.group-styles__body > .icons:not(.big) {
grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
}
}
.group-styles__body > .icons:not(.big) .icon--item {
height: 140px;
}
.group-styles__body > .icons.big {
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
height: 185px;
overflow: hidden;
}
@media screen and (max-width: 992px) {
.group-styles__body > .icons.big {
height: 376px;
}
}
.group-styles__body > .icons.big .icon--item {
height: 185px;
}
.group-styles__body > .bj-button {
min-width: 145px;
}
@media screen and (max-width: 768px) {
.group-styles__body > .bj-button {
flex-grow: 0;
margin-left: auto;
}
}
@media screen and (max-width: 768px) {
.group-styles__body {
flex-wrap: wrap;
}
.group-styles__body > .bj-button {
margin-bottom: 20px;
}
}
.collections-visible .group-styles__body > .icons {
height: 125px;
overflow: hidden;
}
.star-rating {
position: relative;
display: inline-block;
overflow: hidden;
}
.star-rating i {
display: inline-block;
margin-right: 5px;
}
.star-rating i:last-child {
margin: 0;
white-space: nowrap;
overflow: hidden;
}
.star-rating .bg i {
color: #c8c8c8;
}
.star-rating .active {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
}
.star-rating .active i {
color: #feb602;
}
.tabs-sort-by-component {
margin-top: 13px;
position: relative;
}
.tabs-sort-by-component:before {
border-bottom: 1px solid #e5e5e5;
content: '';
position: absolute;
bottom: 0;
width: 100%;
}
@media screen and (max-width: 992px) {
.tabs-sort-by-component:before {
bottom: unset;
width: 100%;
top: 46px;
}
}
.tabs-sort-by-component__tabs {
overflow: visible;
display: flex;
white-space: nowrap;
}
@media screen and (max-width: 992px) {
.tabs-sort-by-component__tabs {
flex-wrap: nowrap;
overflow: auto;
margin-bottom: 80px;
}
.tabs-sort-by-component__tabs .group-by {
width: 100%;
justify-content: flex-end;
display: flex;
position: absolute;
bottom: -60px;
}
}
.tabs-sort-by-component__tabs.center {
justify-content: center;
}
.tabs-sort-by-component__links {
padding: 0 10px 10px;
color: #777;
background-color: transparent;
border-radius: 0;
border-bottom: 1px solid transparent;
line-height: 2.2;
z-index: 5;
}
.tabs-sort-by-component__links:first-child {
padding-left: 0;
}
.tabs-sort-by-component__links.active,
.tabs-sort-by-component__links:hover {
background-color: transparent;
color: #424242;
}
.tabs-sort-by-component__links.active {
border-bottom: 1px solid #424242;
}
.tabs-sort-by-component__links:focus {
color: #777;
}
.tabs-sort-by-component .switch {
flex-wrap: nowrap;
margin-top: -10px;
background-color: transparent;
}
.tabs-sort-by-component .sort-by {
margin-left: auto;
}
.tabs-sort-by-component .group-by {
margin-left: auto;
flex-wrap: nowrap;
display: flex;
}
.tabs-sort-by-component .group-by > span {
white-space: nowrap;
line-height: 34px;
color: #424242;
}
.tabs-sort-by-component .group-by .popover-container .popover-button {
background-color: #44b678;
color: #fff;
padding: 10px 20px;
flex-wrap: nowrap;
}
.tabs-sort-by-component .group-by .popover-container .popover-button span {
display: flex;
align-items: center;
}
.tabs-sort-by-component .group-by .popover-container .popover-button i {
color: #fff;
}
.tabs-sort-by-component .group-by .popover-container .popover-button.active:after,
.tabs-sort-by-component
.group-by
.popover-container
.popover-button.active
~ .tooltip__content {
display: none;
}
.tabs-sort-by-component .group-by .popover-container .tooltip__trigger:after {
left: unset;
right: 15px;
}
.tabs-sort-by-component .group-by .popover-container .tooltip__content {
width: 295px;
left: unset;
right: -146px;
}
.tabs-sort-by-component .group-by .popover-container .tooltip__content .content {
background-color: #0a152f;
padding: 25px 30px;
}
.tabs-sort-by-component .group-by .popover-container .tooltip__content .content p {
white-space: normal;
}
.tabs-sort-by-component .group-by .popover-content {
padding: 0;
right: 0;
min-width: 100%;
width: unset;
}
.tabs-sort-by-component .group-by .popover-content li label {
display: flex;
align-items: center;
width: 100%;
}
.tabs-sort-by-component .group-by .popover-content li label i {
display: inline-block;
}
.tabs-sort-by-component .group-by .popover-content li label.active,
.tabs-sort-by-component .group-by .popover-content li label.active i:before {
color: #44b678;
}
.tabs-sort-by-component .group-by .popover-content li:hover {
background-color: #f0f0f0;
}
.tabs-component {
position: relative;
}
.tabs-component:before {
border-bottom: 1px solid #e5e5e5;
content: '';
position: absolute;
bottom: 0;
width: 100%;
}
.tabs-component__tabs {
overflow-x: auto;
display: flex;
white-space: nowrap;
}
.tabs-component__tabs.center {
justify-content: center;
}
.tabs-component__links {
padding: 0 10px 10px;
color: #777;
background-color: transparent;
border-radius: 0;
border-bottom: 1px solid transparent;
line-height: 1.6;
z-index: 5;
}
.tabs-component__links:first-child {
padding-left: 0;
}
.tabs-component__links.active,
.tabs-component__links:hover {
background-color: transparent;
color: #424242;
}
.tabs-component__links.active {
border-bottom: 1px solid #424242;
}
.tabs-component__links:focus {
color: #777;
}
.tabs-component .switch {
flex-wrap: nowrap;
margin-top: -10px;
background-color: transparent;
}
.tabs-component .sort-by {
margin-left: auto;
}
.tabs-component .group-by {
margin-left: auto;
flex-wrap: nowrap;
}
.tabs-component .group-by > span {
white-space: nowrap;
line-height: 34px;
}
.tabs-component .group-by .popover-container .popover-button {
background-color: #44b678;
color: #fff;
}
.tabs-component .group-by .popover-container .popover-button span {
display: flex;
align-items: center;
}
.tabs-component .group-by .popover-container .popover-button i {
color: #fff;
}
.tabs-component .group-by .popover-container .popover-button.active:after,
.tabs-component .group-by .popover-container .popover-button.active ~ .tooltip__content {
display: none;
}
.tabs-component .group-by .popover-container .tooltip__trigger:after {
left: unset;
right: 15px;
}
.tabs-component .group-by .popover-container .tooltip__content {
width: 295px;
left: unset;
right: -146px;
}
.tabs-component .group-by .popover-container .tooltip__content .content {
background-color: #0a152f;
padding: 25px 30px;
}
.tabs-component .group-by .popover-container .tooltip__content .content p {
white-space: normal;
}
.tabs-component .group-by .popover-content {
padding: 0;
}
.tabs-component .group-by .popover-content li label {
display: flex;
align-items: center;
width: 100%;
}
.tabs-component .group-by .popover-content li label i {
display: inline-block;
}
.tabs-component .group-by .popover-content li label.active,
.tabs-component .group-by .popover-content li label.active i:before {
color: #44b678;
}
.tabs-component .group-by .popover-content li:hover {
background-color: #f0f0f0;
}
.tabs-component .group-by .popover-content:after {
right: 15px;
z-index: -1;
}
.tags-columns {
color: #424242;
display: flex;
}
.tags-columns ul {
width: 20%;
z-index: 5;
}
.tags-columns ul:last-child {
display: none;
}
.tags-columns a {
color: #424242;
}
.tags-columns a:hover {
color: #286d34;
}
@media screen and (max-width: 768px) {
.tags-columns {
flex-wrap: wrap;
}
.tags-columns ul {
width: 50%;
}
.tags-columns ul:last-child {
display: block;
}
}
#tooltip-popper {
background: #1f262c;
color: #fff;
padding: 12px 15px;
font-size: 13px;
border-radius: 2px;
z-index: 30;
display: none;
}
#tooltip-popper[data-show] {
display: block;
}
#tooltip-popper[data-popper-placement^='top'] > #arrow-popper {
bottom: -4px;
}
#tooltip-popper[data-popper-placement^='bottom'] > #arrow-popper {
top: -4px;
}
#tooltip-popper[data-popper-placement^='left'] > #arrow-popper {
right: -4px;
}
#tooltip-popper[data-popper-placement^='right'] > #arrow-popper {
left: -4px;
}
#tooltip-popper #arrow-popper {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
visibility: hidden;
}
#tooltip-popper #arrow-popper:before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
visibility: visible;
content: '';
transform: rotate(45deg);
}
.top-stickers-searches {
margin-bottom: 35px;
}
.top-stickers-searches > h2 {
color: #0a152f;
}
.top-stickers-searches__content {
display: flex;
width: calc(100% + 20px);
margin-left: -10px;
flex-wrap: wrap;
}
.top-stickers-searches__content .mask {
margin-left: 22px;
margin-right: 22px;
}
.top-stickers-searches__block {
width: 20%;
display: flex;
flex-wrap: wrap;
}
.top-stickers-searches__item {
padding: 10px;
}
.top-stickers-searches__item .content {
position: relative;
overflow: hidden;
border-radius: 8px;
height: 100%;
text-align: center;
}
.top-stickers-searches__item .content img {
margin-top: 30px;
transition: all 0.2s ease-in-out;
}
.top-stickers-searches__item .content > p {
padding: 20px;
margin: 0;
text-align: left;
}
.top-stickers-searches__item .content:hover img {
transform: scale(1.05);
}
.top-stickers-searches__block:first-child {
width: 40%;
}
.top-stickers-searches__block:first-child > div {
width: 50%;
}
.top-stickers-searches__block:first-child > div:last-child {
width: 100%;
}
.top-stickers-searches__block:first-child
.top-stickers-searches__item:first-child
.content {
background-color: #fff4d9;
}
.top-stickers-searches__block:first-child
.top-stickers-searches__item:nth-child(2)
.content {
background-color: #e1e9fc;
}
.top-stickers-searches__block:first-child
.top-stickers-searches__item:nth-child(3)
.content {
background-color: #f0f1ff;
}
.top-stickers-searches__block:nth-child(2) {
width: 20%;
}
.top-stickers-searches__block:nth-child(2) div {
width: 100%;
}
.top-stickers-searches__block:nth-child(2)
.top-stickers-searches__item:first-child
.content {
background-color: rgba(68, 182, 120, 0.2);
}
.top-stickers-searches__block:nth-child(2)
.top-stickers-searches__item:nth-child(2)
.content {
background-color: #ffece9;
}
.top-stickers-searches__block:nth-child(3) {
width: 40%;
}
.top-stickers-searches__block:nth-child(3) div {
width: 100%;
}
.top-stickers-searches__block:nth-child(3) .top-stickers-searches__item .content {
text-align: left;
padding: 60px 50px;
background-color: #f0f0f0;
}
.top-stickers-searches__block:nth-child(3) .top-stickers-searches__item .content img {
position: absolute;
bottom: 50px;
right: 30px;
}
.top-stickers-searches__block:nth-child(3) .top-stickers-searches__item .content p {
padding: 0;
margin-bottom: 20px;
color: #424242;
}
.top-stickers-searches__block:nth-child(3) .top-stickers-searches__item .content ul {
display: inline-block;
}
.top-stickers-searches__block:nth-child(3) .top-stickers-searches__item .content ul li {
padding: 10px 0;
text-align: left;
}
.top-stickers-searches__block:nth-child(3) .top-stickers-searches__item .content ul li a {
color: #424242;
}
.top-stickers-searches__block:nth-child(3)
.top-stickers-searches__item
.content
ul:last-child {
display: none;
}
@media screen and (max-width: 1400px) {
.top-stickers-searches__content img {
height: auto;
}
.top-stickers-searches__content .top-stickers-searches__block:first-child {
width: 66.6%;
}
.top-stickers-searches__content .top-stickers-searches__block:nth-child(2) {
width: 33.3%;
}
.top-stickers-searches__content .top-stickers-searches__block:nth-child(3) {
width: 100%;
}
.top-stickers-searches__content
.top-stickers-searches__block:nth-child(3)
.content
ul:last-child {
display: inline-block;
margin-left: 100px;
}
}
@media screen and (max-width: 992px) {
.top-stickers-searches__content .top-stickers-searches__block:first-child {
width: 66.6%;
}
.top-stickers-searches__content .top-stickers-searches__block:nth-child(2) {
width: 33.3%;
}
.top-stickers-searches__content
.top-stickers-searches__block:nth-child(3)
.content
ul:last-child {
display: none;
}
}
@media screen and (max-width: 768px) {
.top-stickers-searches__content .top-stickers-searches__block:first-child,
.top-stickers-searches__content .top-stickers-searches__block:nth-child(2) {
width: 100%;
}
}
@media screen and (max-width: 640px) {
.top-stickers-searches__content
.top-stickers-searches__block:first-child
.top-stickers-searches__item {
width: 100%;
}
.top-stickers-searches__content .top-stickers-searches__block:first-child .mask {
overflow: hidden;
width: 165px;
margin: auto;
}
.top-stickers-searches__content .top-stickers-searches__block:first-child .mask img {
max-width: unset;
transform-origin: 82px 82px;
}
.top-stickers-searches__content
.top-stickers-searches__block:nth-child(3)
.content
img {
display: none;
}
}
@media (max-width: 1760px) {
.collections-visible .top-stickers-searches__content img {
height: auto;
}
.collections-visible
.top-stickers-searches__content
.top-stickers-searches__block:first-child {
width: 66.6%;
}
.collections-visible
.top-stickers-searches__content
.top-stickers-searches__block:nth-child(2) {
width: 33.3%;
}
.collections-visible
.top-stickers-searches__content
.top-stickers-searches__block:nth-child(3) {
width: 100%;
}
.collections-visible
.top-stickers-searches__content
.top-stickers-searches__block:nth-child(3)
.content
ul:last-child {
display: inline-block;
margin-left: 100px;
}
}
.row-cards {
margin-bottom: 60px;
}
body.home .row-cards {
margin-bottom: 50px;
}
.row-cards__list {
margin-bottom: 40px;
}
.row-cards__list .box-container {
height: 260px;
overflow: hidden;
}
.row-cards__list .box-container .box-premium .box__inner .badge-license {
left: 20px;
bottom: 20px;
}
.row-cards__list .box-container .box-premium .box__inner footer .name {
margin-left: 20px;
}
.row-cards__list .box-container .box__inner a {
border-radius: 8px;
}
.row-cards__list .box-container .box__inner .img-holder img {
margin: 5px auto;
}
.row-cards__list .box-container .box__inner footer {
height: unset;
padding: 5px 20px;
font-size: 13px;
}
.countdown .row-cards__list .box-container .box__inner footer > ul,
.landing--register .row-cards__list .box-container .box__inner footer > .separator,
.profile-login .row-cards__list .box-container .box__inner footer > .group,
.row-cards__list .box-container .box__inner .countdown footer > ul,
.row-cards__list .box-container .box__inner .landing--register footer > .separator,
.row-cards__list .box-container .box__inner .profile-login footer > .group,
.row-cards__list .box-container .box__inner footer > .groups__item,
.row-cards__list .box-container .box__inner footer > .row {
margin: 0;
}
.countdown .row-cards__list .box-container .box__inner footer > ul .col:first-child,
.landing--register
.row-cards__list
.box-container
.box__inner
footer
> .separator
.col:first-child,
.profile-login
.row-cards__list
.box-container
.box__inner
footer
> .group
.col:first-child,
.row-cards__list .box-container .box__inner .countdown footer > ul .col:first-child,
.row-cards__list
.box-container
.box__inner
.landing--register
footer
> .separator
.col:first-child,
.row-cards__list
.box-container
.box__inner
.profile-login
footer
> .group
.col:first-child,
.row-cards__list .box-container .box__inner footer > .groups__item .col:first-child,
.row-cards__list .box-container .box__inner footer > .row .col:first-child {
padding-right: 5px;
}
.row-cards__header {
padding: 0 10px 0 0;
align-items: flex-start;
}
.row-cards__header p {
font-weight: 600;
color: #0a152f;
}
.row-cards__header h4 {
color: #0a152f;
line-height: 1.25;
}
.row-cards__header .link--arrow {
height: 35px;
margin-top: 20px;
}
@media screen and (max-width: 992px) {
.row-cards__list .box-container {
width: calc(100% + 10px);
margin-left: -5px;
margin-bottom: 22px;
height: auto;
}
.row-cards__list .box-container .box:nth-child(n + 3) {
display: none;
}
}
@media screen and (max-width: 640px) {
.row-cards__list {
margin-bottom: 30px;
}
.row-cards__list .box-container .box-premium .box__inner .badge-license {
left: 10px;
bottom: 15px;
}
.row-cards__list .box-container .box-premium .box__inner footer .name {
margin-left: 15px;
}
.row-cards__list .box-container .box__inner footer {
padding: 0 10px;
}
}
@media screen and (max-width: 480px) {
.row-cards__list .box-container .box-premium .box__inner .badge-license {
left: 10px;
bottom: 10px;
}
}
svg {
pointer-events: auto;
}
aside.filters-uicons {
margin-right: 40px;
border-right: 1px solid #e5e5e5;
}
aside.filters-uicons ::-webkit-scrollbar {
width: 3px;
}
aside.filters-uicons ::-webkit-scrollbar-thumb {
background-color: #b1b1b1;
border-radius: 20px;
border: 3px solid transparent;
}
aside.filters-uicons ::-webkit-scrollbar-track {
background: transparent;
}
@media screen and (max-width: 992px) {
aside.filters-uicons {
margin-right: 0;
border-right: none;
}
}
aside.filters-uicons .uicons-filter {
position: sticky;
top: 118px;
}
aside.filters-uicons .uicons-filter .uicons__selector {
max-height: calc(100vh - 180px);
overflow: scroll;
}
aside.filters-uicons .uicons-filter .uicons__selector--wrapper {
margin-bottom: 30px;
width: 300px;
}
aside.filters-uicons .uicons-filter .uicons__selector--wrapper .close {
display: flex;
align-items: center;
color: #424242;
border-bottom: 1px solid #e5e5e5;
margin-right: 20px;
margin-bottom: 15px;
}
aside.filters-uicons .uicons-filter .uicons__selector--wrapper .close svg {
margin-right: 10px;
}
#notification-cart
.notification__close
aside.filters-uicons
.uicons-filter
.uicons__selector--wrapper
.close
i,
.notification--alert
aside.filters-uicons
.uicons-filter
.uicons__selector--wrapper
.close
i,
aside.filters-uicons
.uicons-filter
.uicons__selector--wrapper
.close
#notification-cart
.notification__close
i,
aside.filters-uicons .uicons-filter .uicons__selector--wrapper .close .icon,
aside.filters-uicons
.uicons-filter
.uicons__selector--wrapper
.close
.notification--alert
i {
color: #424242;
margin-left: auto;
padding: 5px 0;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-search {
display: none;
box-shadow: inset 0 0 0 1px #e5e5e5;
border-radius: 3px 3px 3px 3px;
position: relative;
flex: 1;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-search .icon--search {
width: 44px;
height: 44px;
line-height: 44px;
top: 0;
left: 0;
color: #424242;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-search input {
margin: 0;
padding: 0 0 0 10px;
border: none;
background: none;
box-sizing: border-box;
flex: 1;
}
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
input:placeholder-shown
+ button {
visibility: hidden;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-search__empty {
padding: 20px;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-search__empty i {
font-size: 38px;
width: 38px;
height: 38px;
line-height: 38px;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner,
aside.filters-uicons .uicons-filter .uicons__selector__group-search,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight {
margin-bottom: 30px;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands .filters-body__link,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner .filters-body__link,
aside.filters-uicons .uicons-filter .uicons__selector__group-search .filters-body__link,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight .filters-body__link {
display: flex;
align-items: center;
margin-bottom: 15px;
}
aside.filters-uicons
.uicons-filter
.uicons__selector__group-brands
.filters-body__link
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-corner
.filters-body__link
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
.filters-body__link
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
.filters-body__link
svg {
margin-right: 10px;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands .filters-body__link p,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner .filters-body__link p,
aside.filters-uicons .uicons-filter .uicons__selector__group-search .filters-body__link p,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
.filters-body__link
p {
margin: 0;
}
aside.filters-uicons
.uicons-filter
.uicons__selector__group-brands
.filters-body__link
p
+ span,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-corner
.filters-body__link
p
+ span,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
.filters-body__link
p
+ span,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
.filters-body__link
p
+ span {
color: #44b678;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands .filters-body__link i,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner .filters-body__link i,
aside.filters-uicons .uicons-filter .uicons__selector__group-search .filters-body__link i,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
.filters-body__link
i {
margin-left: auto;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands ul,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner ul,
aside.filters-uicons .uicons-filter .uicons__selector__group-search ul,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight ul {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands ul li,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner ul li,
aside.filters-uicons .uicons-filter .uicons__selector__group-search ul li,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight ul li {
display: inline-block;
color: #424242;
fill: #424242;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands ul li input,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner ul li input,
aside.filters-uicons .uicons-filter .uicons__selector__group-search ul li input,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight ul li input {
display: none;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands ul li label,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner ul li label,
aside.filters-uicons .uicons-filter .uicons__selector__group-search ul li label,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight ul li label {
border: 1px solid #e5e5e5;
box-shadow: none;
border-radius: 8px;
color: #424242;
font-size: 14px;
height: 32px;
padding: 0 15px;
flex-wrap: nowrap;
margin-left: 0;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands ul li label:hover,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner ul li label:hover,
aside.filters-uicons .uicons-filter .uicons__selector__group-search ul li label:hover,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight ul li label:hover {
border: 1px solid #d8d8d8;
background-color: unset;
}
aside.filters-uicons .uicons-filter .uicons__selector__group-brands ul li label i svg,
aside.filters-uicons .uicons-filter .uicons__selector__group-corner ul li label i svg,
aside.filters-uicons .uicons-filter .uicons__selector__group-search ul li label i svg,
aside.filters-uicons .uicons-filter .uicons__selector__group-weight ul li label i svg {
width: 100%;
height: 100%;
fill: #424242;
}
aside.filters-uicons
.uicons-filter
.uicons__selector__group-brands
ul
li
input[type='checkbox']:checked
~ label,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-corner
ul
li
input[type='checkbox']:checked
~ label,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
ul
li
input[type='checkbox']:checked
~ label,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
ul
li
input[type='checkbox']:checked
~ label {
border: 1px solid #44b678;
background-color: inherit;
color: #424242;
box-shadow: none;
z-index: 2;
position: relative;
}
aside.filters-uicons
.uicons-filter
.uicons__selector__group-brands
ul
li
input[type='checkbox']:checked
~ label:hover
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-brands
ul
li
input[type='checkbox']:checked
~ label
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-corner
ul
li
input[type='checkbox']:checked
~ label:hover
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-corner
ul
li
input[type='checkbox']:checked
~ label
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
ul
li
input[type='checkbox']:checked
~ label:hover
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
ul
li
input[type='checkbox']:checked
~ label
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
ul
li
input[type='checkbox']:checked
~ label:hover
i
svg,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
ul
li
input[type='checkbox']:checked
~ label
i
svg {
fill: #424242;
}
aside.filters-uicons
.uicons-filter
.uicons__selector__group-brands
.search-view-filters-aside__group,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-corner
.search-view-filters-aside__group,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-search
.search-view-filters-aside__group,
aside.filters-uicons
.uicons-filter
.uicons__selector__group-weight
.search-view-filters-aside__group {
display: flex;
align-items: flex-start;
}
@media screen and (max-width: 992px) {
aside.filters-uicons .uicons-filter .uicons__selector {
max-height: calc(100vh - 72px);
}
}
@media screen and (max-width: 992px) {
aside.filters-uicons .uicons-filter {
position: fixed;
top: 0;
left: 0;
z-index: 30;
background-color: #fff;
width: 280px;
animation: popover 0.2s ease-in-out;
padding: 10px 0 0 20px;
height: 100vh;
}
}
@media screen and (max-width: 480px) {
aside.filters-uicons .uicons-filter {
width: 100%;
}
}
aside.filters-uicons .uicons-filter .filterLabels {
text-align: left;
display: block;
padding-right: 20px;
}
aside.filters-uicons .uicons-filter .filterLabels .filterLabels__header {
display: flex;
justify-content: space-between;
}
aside.filters-uicons .uicons-filter .filterLabels .filterLabels__header .clear-all {
cursor: pointer;
display: flex;
align-items: center;
}
aside.filters-uicons .uicons-filter .filterLabels .filterLabels__header .clear-all:hover {
text-decoration: none;
}
aside.filters-uicons .uicons-filter .filterLabels .filterLabels__body {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
aside.filters-uicons .uicons-filter .filterLabels .filterLabels__body .filterLabel-tag {
padding: 0 10px;
background-color: #44b678;
border-radius: 3px;
color: #fff;
cursor: pointer;
margin: 0;
display: flex;
align-items: center;
}
aside.filters-uicons .uicons-filter .filterLabels .filterLabels__body .filterLabel-tag i {
display: inline-block;
width: unset;
height: unset;
line-height: 17px;
}
aside.filters-uicons
.uicons-filter
.filterLabels
.filterLabels__body
.filterLabel-tag
i:before {
font-weight: 700;
vertical-align: text-bottom;
margin-left: 5px;
font-size: 12px;
color: #fff;
}
aside.filters-uicons
.uicons-filter
.filterLabels
.filterLabels__body
.filterLabel-tag:hover
i:before {
color: #fff;
}
aside.filters-uicons .uicons-filter .filterLabels .uicons__search {
padding-right: 20px;
}
aside.filters-uicons .collapsed-filters {
display: none;
width: 80px;
position: sticky;
top: 118px;
height: fit-content;
justify-content: center;
flex-direction: column;
}
aside.filters-uicons .collapsed-filters__close {
display: flex;
flex-direction: column;
gap: 20px;
}
aside.filters-uicons .collapsed-filters__close > i {
color: #424242;
}
aside.filters-uicons .collapsed-filters__item {
width: 40px;
height: 40px;
display: grid;
justify-items: center;
align-items: center;
border-radius: 10px;
border: 1px solid #d8d8d8;
}
aside.filters-uicons .collapsed-filters__item.editable_stroke svg {
fill: #e5e5e5;
}
aside.filters-uicons .collapsed-filters__item i,
aside.filters-uicons .collapsed-filters__item svg {
fill: #121212;
color: #121212;
}
aside.filters-uicons .collapsed-filters__item.active {
border: 1px solid #44b678;
}
@media screen and (max-width: 992px) {
aside.filters-uicons input#search__filters:checked ~ .uicons-filter {
display: block;
position: fixed;
top: 0;
background-color: #fff;
z-index: 30;
width: 280px;
animation: popover 0.2s ease-in-out;
padding: 10px 0 10px 20px;
height: 100vh;
}
#notification-cart
.notification__close
aside.filters-uicons
input#search__filters:checked
~ .uicons-filter
.close
i,
.notification--alert
aside.filters-uicons
input#search__filters:checked
~ .uicons-filter
.close
i,
aside.filters-uicons
input#search__filters:checked
~ .uicons-filter
.close
#notification-cart
.notification__close
i,
aside.filters-uicons input#search__filters:checked ~ .uicons-filter .close .icon,
aside.filters-uicons
input#search__filters:checked
~ .uicons-filter
.close
.notification--alert
i {
color: #424242;
}
aside.filters-uicons input#search__filters:checked ~ .uicons-filter .headline {
line-height: 1.9;
color: #424242;
margin-bottom: 12px;
}
aside.filters-uicons input#search__filters:checked ~ .uicons-filter hr {
width: calc(100% + 40px);
margin-left: 0;
}
aside.filters-uicons
input#search__filters:checked
~ .uicons-filter
.uicons__selector {
margin-right: 0;
}
}
aside.filters-uicons input[type='checkbox']#search__filters ~ .search__filters--overlay {
display: none;
}
aside.filters-uicons
input[type='checkbox']#search__filters:checked
~ .search__filters--overlay {
display: block;
width: 100vw;
height: 100vh;
background: rgba(20, 42, 94, 0.9);
position: fixed;
top: 0;
z-index: 25;
animation: popover 0.2s ease-in-out;
}
@media screen and (min-width: 992px) {
aside.filters-uicons
input[type='checkbox']#search__filters:checked
~ .search__filters--overlay {
display: none;
}
}
aside.filters-uicons
input[type='checkbox']#search__filters:not(:checked)
~ .uicons-filter {
display: none;
}
aside.filters-uicons
input[type='checkbox']#search__filters:not(:checked)
~ .collapsed-filters {
display: flex;
}
aside.filters-uicons input[type='checkbox']#search__filters:checked ~ .uicons-filter {
display: block;
}
aside.filters-uicons input[type='checkbox']#search__filters:checked ~ .collapsed-filters {
display: none;
}
@media screen and (max-width: 992px) {
aside.filters-uicons input[type='checkbox']#search__filters:checked ~ .uicons-filter {
display: block;
}
aside.filters-uicons
input[type='checkbox']#search__filters:checked
~ .uicons-filter
.uicons__selector--wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
aside.filters-uicons
input[type='checkbox']#search__filters:checked.show-filters-in-mobile
~ .search__filters--overlay,
aside.filters-uicons
input[type='checkbox']#search__filters:checked.show-filters-in-mobile
~ .uicons-filter {
display: block;
}
}
@media screen and (max-width: 480px) {
aside.filters-uicons input#search__filters:checked ~ .uicons-filter {
width: 100%;
}
}
.uicons__related {
margin-bottom: 70px;
}
.uicons__related .container {
padding: 0 30px;
}
.uicons__related--header .link--arrow.ui-most {
padding: 0;
}
.uicons__related--header .link--arrow.ui-most:hover {
background: none;
}
@media screen and (max-width: 768px) {
.uicons__related .container {
padding: 0 20px;
}
.uicons__related .container .uicons__icons {
width: calc(100% + 20px);
margin-left: -10px;
}
}
.icon__font__in__action h2.font-h6 {
font-size: 17px;
}
.icon__font__in__action > p {
color: #5b5b5b;
}
.icon__font__in__action--examples {
width: calc(100% + 20px);
margin-left: -10px;
}
.icon__font__in__action--examples > div {
height: 20px;
margin: 10px;
border-radius: 12px;
height: 230px;
width: calc(33% - 20px);
overflow: hidden;
}
.icon__font__in__action--examples > div:first-child {
background: linear-gradient(
115.08deg,
rgba(199, 235, 255, 0.5),
rgba(94, 178, 252, 0.5) 98.5%
);
}
.icon__font__in__action--examples > div:first-child .phone-example {
width: 284px;
border: 8px solid #424242;
box-shadow:
0 42px 109px rgba(4, 69, 143, 0.16),
0 9.38125px 24.3466px rgba(4, 69, 143, 0.0953772),
0 2.79304px 7.24861px rgba(4, 69, 143, 0.0646228);
border-radius: 32px;
height: 241px;
margin: -40px auto 0;
background-color: #e5e5e5;
position: relative;
overflow: hidden;
}
.icon__font__in__action--examples > div:first-child .phone-example--text {
height: 75px;
background-color: #f7f7f7;
position: absolute;
bottom: 58px;
width: 100%;
}
.icon__font__in__action--examples > div:first-child .phone-example--text p {
padding: 10px 30px;
}
.icon__font__in__action--examples > div:first-child .phone-example--buttons {
position: absolute;
padding: 0 30px;
background-color: #fff;
bottom: 0;
height: 58px;
width: 100%;
display: flex;
justify-content: space-between;
}
.icon__font__in__action--examples > div:first-child .phone-example--buttons > span {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.icon__font__in__action--examples > div:first-child .phone-example--buttons > span:hover {
background-color: #f7f7f7;
transition: all 0.2s ease-in;
box-shadow: inset 0 7px 1px -7px rgba(0, 0, 0, 0.4);
}
.icon__font__in__action--examples
> div:first-child
.phone-example--buttons
span:first-child {
box-shadow: inset 0 2px 0 0 #336aea;
}
.icon__font__in__action--examples
> div:first-child
.phone-example--buttons
span:first-child
img {
filter: invert(41%) sepia(50%) saturate(6906%) hue-rotate(203deg) brightness(96%)
contrast(92%);
}
.icon__font__in__action--examples > div:nth-child(2) {
background: linear-gradient(114.93deg, #ececff 2.23%, #f0f1ff 98.59%);
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example > div {
width: 235px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
text-align: left;
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example--1 {
background: #8f91cf;
box-shadow:
0 1px 2px rgba(32, 32, 149, 0.1),
0 2px 5px rgba(32, 32, 149, 0.15);
margin-bottom: 20px;
color: #fff;
transition: all 0.2s ease-in;
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example--1:hover {
transform: scale(1.02);
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example--1 img {
filter: invert(100%);
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example--2 {
background: #fff;
box-shadow:
0 1px 2px rgba(32, 32, 149, 0.1),
0 2px 5px rgba(32, 32, 149, 0.15);
color: #6569bd;
transition: all 0.2s ease-in;
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example--2:hover {
transform: scale(1.02);
}
.icon__font__in__action--examples > div:nth-child(2) .notifications-example--2 img {
filter: invert(29%) sepia(97%) saturate(4852%) hue-rotate(238deg) brightness(95%)
contrast(89%);
}
.icon__font__in__action--examples > div:nth-child(3) {
background: linear-gradient(114.93deg, #d9ffed 2.23%, #b4ffdb 98.59%);
display: flex;
align-items: center;
justify-content: center;
}
.icon__font__in__action--examples > div:nth-child(3) .menu-example {
width: 225px;
background-color: #424242;
box-shadow:
0 42px 109px rgba(0, 139, 113, 0.16),
0 9.38125px 24.3466px rgba(0, 139, 113, 0.0953772),
0 2.79304px 7.24861px rgba(0, 139, 113, 0.0646228);
border-radius: 18px;
padding: 20px;
}
.icon__font__in__action--examples > div:nth-child(3) .menu-example > div {
padding: 10px 20px;
color: #c8c8c8;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 12px;
transition: all 0.2s ease-in;
}
.icon__font__in__action--examples > div:nth-child(3) .menu-example > div:hover {
background: rgba(29, 38, 45, 0.2);
}
.icon__font__in__action--examples > div:nth-child(3) .menu-example > div:first-child {
background: rgba(29, 38, 45, 0.5);
color: #fff;
}
.icon__font__in__action--examples > div:nth-child(3) .menu-example > div:first-child img {
filter: invert(100%);
}
.icon__font__in__action--examples > div:nth-child(4) {
background: linear-gradient(
115.08deg,
rgba(255, 222, 204, 0.5),
rgba(255, 200, 175, 0.5) 98.5%
);
width: calc(40% - 20px);
display: flex;
align-items: center;
justify-content: center;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example {
width: 340px;
box-shadow:
0 42px 109px rgba(164, 25, 25, 0.16),
0 9.38125px 24.3466px rgba(164, 25, 25, 0.0953772),
0 2.79304px 7.24861px rgba(164, 25, 25, 0.0646228);
border-radius: 18px;
overflow: hidden;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example > div {
height: 85px;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example--white {
background-color: #fff;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example--white img {
filter: invert(23%) sepia(48%) saturate(302%) hue-rotate(164deg) brightness(96%)
contrast(88%);
transition: all 0.2s ease-in;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example--white img:hover {
transform: scale(1.1);
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example--black {
background-color: #424242;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example--black img {
filter: invert(100%);
transition: all 0.2s ease-in;
}
.icon__font__in__action--examples > div:nth-child(4) .sizes-example--black img:hover {
transform: scale(1.1);
}
.icon__font__in__action--examples > div:nth-child(5) {
background: linear-gradient(97.41deg, #fff3cd, #ffe28f 99.65%);
width: calc(59% - 20px);
padding: 40px 50px;
overflow: hidden;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example {
width: 700px;
border: 8px solid #424242;
border-radius: 16px;
height: 300px;
overflow: hidden;
background-color: #f7f7f7;
box-shadow:
0 42px 109px rgba(109, 82, 19, 0.16),
0 9.38125px 24.3466px rgba(109, 82, 19, 0.0953772),
0 2.79304px 7.24861px rgba(109, 82, 19, 0.0646228);
display: flex;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--sidebar {
width: 68px;
height: 100%;
background-color: #f0f0f0;
padding-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--sidebar img {
margin-bottom: 22px;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body {
height: 100%;
flex: 1;
padding: 30px;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body > p {
font-size: 20px;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body span {
margin-bottom: 15px;
color: #424242;
display: block;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body--frame {
width: 144px;
height: 140px;
background-color: #f0f0f0;
display: inline-block;
vertical-align: middle;
border-radius: 18px;
margin-right: 10px;
padding: 16px;
transition: all 0.2s ease-in;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body--frame:hover {
margin-top: -5px;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body--frame > div {
background-color: #e5e5e5;
border-radius: 50px;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
}
.icon__font__in__action--examples > div:nth-child(5) .tablet-example--body--frame.yellow {
background-color: #ffe6a7;
}
.icon__font__in__action--examples
> div:nth-child(5)
.tablet-example--body--frame.yellow
> div {
background-color: #fff4d9;
}
.icon__font__in__action--examples
> div:nth-child(5)
.tablet-example--body--frame.yellow
> div
img {
filter: invert(24%) sepia(36%) saturate(382%) hue-rotate(163deg) brightness(97%)
contrast(89%);
}
@media screen and (max-width: 992px) {
.icon__font__in__action--examples > div:first-child,
.icon__font__in__action--examples > div:nth-child(2) {
width: calc(50% - 20px);
}
.icon__font__in__action--examples > div:nth-child(3) {
width: calc(40% - 20px);
}
.icon__font__in__action--examples > div:nth-child(4) {
width: calc(60% - 20px);
}
.icon__font__in__action--examples > div:nth-child(5) {
display: none;
}
}
@media screen and (max-width: 768px) {
.icon__font__in__action {
margin-bottom: 40px;
}
.icon__font__in__action .container {
padding: 0 20px;
}
.icon__font__in__action--examples > div:first-child,
.icon__font__in__action--examples > div:nth-child(2),
.icon__font__in__action--examples > div:nth-child(3),
.icon__font__in__action--examples > div:nth-child(4) {
width: calc(100% - 20px);
}
}
@media screen and (max-width: 640px) {
.icon__font__in__action--examples > div:nth-child(4) {
display: none;
}
}
.find-best-icon-font {
max-width: 1110px;
color: #424242;
margin: 0 auto 70px;
}
.find-best-icon-font .container {
padding: 0 30px;
}
.find-best-icon-font--content {
background: linear-gradient(
98.75deg,
rgba(179, 179, 252, 0.25) 2.58%,
rgba(199, 235, 255, 0.25) 47.57%,
rgba(199, 255, 199, 0.25) 98.55%
);
border-radius: 12px;
padding: 40px 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.find-best-icon-font--content a {
line-height: 1.2;
}
@media screen and (max-width: 992px) {
.find-best-icon-font--content {
flex-direction: column;
}
.find-best-icon-font--content--text {
text-align: center;
margin-bottom: 30px;
}
}
@media screen and (max-width: 768px) {
.find-best-icon-font {
margin-bottom: 40px;
}
.find-best-icon-font .container {
padding: 0 20px;
}
}
.doubts-support {
max-width: 1110px;
margin: 0 auto;
color: #5b5b5b;
}
.doubts-support .container {
padding: 0 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 90px;
}
.doubts-support a {
color: #286d34;
}
.doubts-support--doubts,
.doubts-support--support {
width: 40%;
}
@media screen and (max-width: 768px) {
.doubts-support .container {
margin-bottom: 40px;
}
.doubts-support--doubts,
.doubts-support--support {
width: 100%;
}
}
.user-alert-container {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 500;
padding-right: 20px;
}
.user-alert-container .user-alert {
z-index: 500;
padding-right: 20px;
margin-top: 30px;
position: relative;
}
.user-alert-container .user-alert.warning i {
background-color: #feb602;
animation: sonarWarning 1.8s linear infinite;
}
.user-alert-container .user-alert.warning p {
background-color: #feb602;
color: #333;
}
.user-alert-container .user-alert.danger i {
background-color: #ff7d6a;
animation: sonarDanger 1.8s linear infinite;
}
.user-alert-container .user-alert.danger p {
background-color: #ff7d6a;
color: #fff;
}
.user-alert-container .user-alert.success i {
background-color: #44b678;
animation: sonarSuccess 1.8s linear infinite;
}
.user-alert-container .user-alert.success p {
background-color: #44b678;
color: #333;
}
.user-alert-container .user-alert i {
display: inline-block;
border-radius: 100%;
font-size: 20px;
line-height: 44px;
width: 44px;
height: 44px;
text-align: center;
color: rgba(0, 0, 0, 0.4);
}
.user-alert-container .user-alert p {
display: inline-block;
border-radius: 3px;
padding: 5px 10px;
font-size: 13px;
text-align: center;
margin: 0;
cursor: default;
position: relative;
}
.user-alert-container .user-alert p b {
color: #142a5e;
color: rgba(0, 0, 0, 0.5);
}
.user-alert-container .user-alert p a {
color: rgba(0, 0, 0, 0.5);
text-decoration: underline;
}
.user-alert-container .user-alert p button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 0 3px 3px 0;
}
.user-alert-container .user-alert p button:hover {
background: rgba(0, 0, 0, 0.5);
}
@-webkit-keyframes alien {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(10deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes alien {
0% {
-moz-transform: rotate(0deg);
}
50% {
-moz-transform: rotate(10deg);
}
to {
-moz-transform: rotate(0deg);
}
}
@keyframes alien {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes easeInBottom {
0% {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes estela {
0% {
background-position: -40px 0;
}
to {
background-position: 40px 0;
}
}
@-moz-keyframes estela {
0% {
background-position: -40px 0;
}
to {
background-position: 40px 0;
}
}
@keyframes estela {
0% {
background-position: -40px 0;
}
to {
background-position: 40px 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes floating {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(10px);
}
to {
transform: translateY(-10px);
}
}
@-webkit-keyframes floatingOvni {
0% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(40px);
}
to {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes floatingOvni {
0% {
-moz-transform: translateY(0);
}
50% {
-moz-transform: translateY(40px);
}
to {
-moz-transform: translateY(0);
}
}
@keyframes floatingOvni {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
to {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
}
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(1turn);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-ms-transform: rotate(1turn);
-o-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-webkit-keyframes rotateInverse {
0% {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
}
}
@-moz-keyframes rotateInverse {
0% {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(-1turn);
}
}
@keyframes rotateInverse {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
-moz-transform: rotate(-1turn);
-ms-transform: rotate(-1turn);
-o-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
@keyframes shake {
0%,
to {
transform: translateZ(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
}
@keyframes sonarWarning {
0% {
box-shadow: 0 0 0 0 #feb602;
}
to {
box-shadow: 0 0 0 20px rgba(254, 182, 2, 0);
}
}
@keyframes sonarDanger {
0% {
box-shadow: 0 0 0 0 #eb644c;
}
to {
box-shadow: 0 0 0 20px rgba(235, 100, 76, 0);
}
}
@keyframes sonarSuccess {
0% {
box-shadow: 0 0 0 0 #3b9e62;
}
to {
box-shadow: 0 0 0 20px rgba(59, 158, 98, 0);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.animation-spinner {
animation: spin 0.6s linear infinite;
}
.edge-content-iframe {
display: block;
padding: 1em;
box-sizing: inherit;
background: #e5e5e5;
}
.edge-content {
position: absolute;
left: 0;
min-height: 90px;
visibility: hidden;
overflow: hidden;
width: 100%;
margin: 30px 0;
background: #e5e5e5;
}
.edge-content.bn-space {
min-height: 300px;
}
.edge-content.fi-premium-edge-content-first {
padding: 0;
}
.edge-content.last-edge-content {
position: relative;
margin: 0;
border-top: 1px solid #ccc;
}
.edge-content.show {
visibility: visible;
}
.edge-content.bn-space-aside {
min-height: 300px;
}
.edge-content .edge-content-iframe {
padding: 1em 0;
}
.edge-content header {
margin-bottom: 1em;
}
.edge-content header:after {
clear: both;
content: '';
display: table;
}
.edge-content header .sponsor {
float: left;
font-size: 0.8em;
font-weight: 700;
color: #0a152f;
margin: 7px 7px 0;
}
.edge-content header .coupon {
font-size: 0.8em;
font-weight: 700;
color: #0a152f;
float: right;
}
.edge-content header .coupon .promocode {
float: none;
display: inline-block;
padding: 5px 20px;
color: #4c4c4c;
border: 1px dashed #c3c3c3;
background-color: #fff;
font-size: 14px;
font-weight: 700;
margin: 0 0 0 1em;
border-radius: 3px;
}
.edge-content header .coupon .promocode .code {
color: #e38888;
}
.edge-content .slides:after {
clear: both;
content: '';
display: table;
}
.edge-content .slides .slide {
overflow: hidden;
position: relative;
float: left;
margin: 0 1em 10em 0;
background-color: #fff;
width: 150px;
height: 150px;
}
.edge-content .slides .slide a {
width: 100%;
height: 100%;
display: block;
}
.edge-content .slides .slide a .overflow-imagen,
.edge-content .slides .slide a .overflow-imagen_large {
overflow: hidden;
position: relative;
}
.edge-content .slides .slide a .overflow-imagen_large img,
.edge-content .slides .slide a .overflow-imagen img {
max-width: none;
}
.bn-space-gads.bn-detail {
min-height: 110px;
background: #f0f0f0;
text-align: center;
margin: 10px 0;
border-radius: 8px;
display: flex;
align-items: center;
}
.couponbox.shutterstock {
right: 0;
}
.couponbox.shutterstock .cbox .input-code a {
line-height: 17px;
}
@media (max-width: 450px) {
.couponbox .cshadow {
display: none !important;
}
.couponbox .cbox {
width: 95% !important;
margin: auto;
padding: 15px !important;
}
.couponbox .cbox img {
width: 120px !important;
}
.couponbox .cbox .couponbox .close {
top: 14px;
right: 46px !important;
}
.couponbox .cbox .tt1 {
font-size: 22px !important;
line-height: 22px !important;
}
.couponbox .cbox .tt2 {
font-size: 16px !important;
}
}
.es .couponbox .cbox .tt1 {
font-size: 32px !important;
line-height: 38px !important;
}
@media (max-width: 450px) {
.es .couponbox .cbox .tt1 {
font-size: 22px !important;
line-height: 22px !important;
}
}
@media (max-width: 1344px) {
.collections-visible .a-wrapper {
display: none !important;
}
}
.detail--v2 .a-wrapper,
.search-result .a-wrapper {
background: #f0f0f0;
text-align: center;
margin: 10px 0;
border-radius: 8px;
}
.detail--v2 .a-wrapper div,
.search-result .a-wrapper div {
margin: auto;
}
.detail--v2 .a-wrapper .edge-content-iframe,
.search-result .a-wrapper .edge-content-iframe {
padding: 0;
background: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.detail--v2 .a-wrapper .edge-content-iframe.ads-slidesgo,
.search-result .a-wrapper .edge-content-iframe.ads-slidesgo {
height: auto !important;
min-height: 92px;
}
#sp-freepik {
height: 300px;
}
#sp-freepik .edge-content-iframe {
display: block;
padding: 1em;
box-sizing: inherit;
background: #e5e5e5;
height: 182px !important;
}
.spirit-a {
position: relative;
height: 291px;
}
.spirit-a.soul-p-nsba {
height: 202px;
margin-top: 20px;
}
.spirit-a.soul-p-nsba .preload {
border-radius: 8px;
}
.spirit-a .preload {
background-color: #f0f0f0;
}
#banner-autopromo.active {
position: relative;
height: 291px;
}
#banner-autopromo.active .preload {
background-color: #f0f0f0;
}
body[data-section='404'] #banner-autopromo .preload,
body[data-section='404'] .spirit-a .preload {
background-color: transparent;
}
@media screen and (max-height: 768px) {
#banner-autopromo.active,
.spirit-a {
height: 164px;
}
}
@media (max-width: 380px) {
#banner-autopromo,
.spirit-a {
height: auto;
}
}
.btn.active,
.btn:active,
.btn:hover,
button.active,
button:active,
button:hover,
input[type='button'].active,
input[type='button']:active,
input[type='button']:hover,
input[type='reset'].active,
input[type='reset']:active,
input[type='reset']:hover,
input[type='submit'].active,
input[type='submit']:active,
input[type='submit']:hover {
background-color: #3b9e62;
}
.btn.btn-gray,
button.btn-gray,
input[type='button'].btn-gray,
input[type='reset'].btn-gray,
input[type='submit'].btn-gray {
background-color: #e5e5e5;
color: #424242;
}
.btn.btn-gray.active,
.btn.btn-gray:active,
.btn.btn-gray:focus,
.btn.btn-gray:hover,
button.btn-gray.active,
button.btn-gray:active,
button.btn-gray:focus,
button.btn-gray:hover,
input[type='button'].btn-gray.active,
input[type='button'].btn-gray:active,
input[type='button'].btn-gray:focus,
input[type='button'].btn-gray:hover,
input[type='reset'].btn-gray.active,
input[type='reset'].btn-gray:active,
input[type='reset'].btn-gray:focus,
input[type='reset'].btn-gray:hover,
input[type='submit'].btn-gray.active,
input[type='submit'].btn-gray:active,
input[type='submit'].btn-gray:focus,
input[type='submit'].btn-gray:hover {
background-color: #d8d8d8;
color: #424242;
}
.btn.btn-gray.btn-outline,
button.btn-gray.btn-outline,
input[type='button'].btn-gray.btn-outline,
input[type='reset'].btn-gray.btn-outline,
input[type='submit'].btn-gray.btn-outline {
box-shadow: inset 0 0 0 2px #e5e5e5;
color: #424242;
}
.btn.btn-gray.btn-outline:hover,
button.btn-gray.btn-outline:hover,
input[type='button'].btn-gray.btn-outline:hover,
input[type='reset'].btn-gray.btn-outline:hover,
input[type='submit'].btn-gray.btn-outline:hover {
background-color: hsla(0, 0%, 84.7%, 0.1);
color: #424242;
}
.btn.btn-gray.btn-outline.active,
.btn.btn-gray.btn-outline:active,
.btn.btn-gray.btn-outline:focus,
button.btn-gray.btn-outline.active,
button.btn-gray.btn-outline:active,
button.btn-gray.btn-outline:focus,
input[type='button'].btn-gray.btn-outline.active,
input[type='button'].btn-gray.btn-outline:active,
input[type='button'].btn-gray.btn-outline:focus,
input[type='reset'].btn-gray.btn-outline.active,
input[type='reset'].btn-gray.btn-outline:active,
input[type='reset'].btn-gray.btn-outline:focus,
input[type='submit'].btn-gray.btn-outline.active,
input[type='submit'].btn-gray.btn-outline:active,
input[type='submit'].btn-gray.btn-outline:focus {
background-color: hsla(0, 0%, 84.7%, 0.2);
color: #424242;
}
.btn.btn-success,
button.btn-success,
input[type='button'].btn-success,
input[type='reset'].btn-success,
input[type='submit'].btn-success {
background-color: #44b678;
}
.btn.btn-success:focus,
.btn.btn-success:hover,
button.btn-success:focus,
button.btn-success:hover,
input[type='button'].btn-success:focus,
input[type='button'].btn-success:hover,
input[type='reset'].btn-success:focus,
input[type='reset'].btn-success:hover,
input[type='submit'].btn-success:focus,
input[type='submit'].btn-success:hover {
background-color: #3b9e62;
}
.btn.btn-success.btn-outline,
button.btn-success.btn-outline,
input[type='button'].btn-success.btn-outline,
input[type='reset'].btn-success.btn-outline,
input[type='submit'].btn-success.btn-outline {
box-shadow: inset 0 0 0 2px #44b678;
color: #44b678;
}
.btn.btn-success.btn-outline:hover,
button.btn-success.btn-outline:hover,
input[type='button'].btn-success.btn-outline:hover,
input[type='reset'].btn-success.btn-outline:hover,
input[type='submit'].btn-success.btn-outline:hover {
background-color: rgba(68, 182, 120, 0.1);
color: #44b678;
}
.btn.btn-success.btn-outline.active,
.btn.btn-success.btn-outline:active,
button.btn-success.btn-outline.active,
button.btn-success.btn-outline:active,
input[type='button'].btn-success.btn-outline.active,
input[type='button'].btn-success.btn-outline:active,
input[type='reset'].btn-success.btn-outline.active,
input[type='reset'].btn-success.btn-outline:active,
input[type='submit'].btn-success.btn-outline.active,
input[type='submit'].btn-success.btn-outline:active {
background-color: rgba(68, 182, 120, 0.2);
}
.btn.btn-warning,
button.btn-warning,
input[type='button'].btn-warning,
input[type='reset'].btn-warning,
input[type='submit'].btn-warning {
background-color: #feb602;
}
.btn.btn-warning.active,
.btn.btn-warning:active,
.btn.btn-warning:hover,
button.btn-warning.active,
button.btn-warning:active,
button.btn-warning:hover,
input[type='button'].btn-warning.active,
input[type='button'].btn-warning:active,
input[type='button'].btn-warning:hover,
input[type='reset'].btn-warning.active,
input[type='reset'].btn-warning:active,
input[type='reset'].btn-warning:hover,
input[type='submit'].btn-warning.active,
input[type='submit'].btn-warning:active,
input[type='submit'].btn-warning:hover {
background-color: #f4980a;
}
.btn.btn-warning.btn-outline,
button.btn-warning.btn-outline,
input[type='button'].btn-warning.btn-outline,
input[type='reset'].btn-warning.btn-outline,
input[type='submit'].btn-warning.btn-outline {
box-shadow: inset 0 0 0 2px #feb602;
color: #feb602;
}
.btn.btn-warning.btn-outline:hover,
button.btn-warning.btn-outline:hover,
input[type='button'].btn-warning.btn-outline:hover,
input[type='reset'].btn-warning.btn-outline:hover,
input[type='submit'].btn-warning.btn-outline:hover {
background-color: rgba(254, 182, 2, 0.1);
color: #feb602;
}
.btn.btn-warning.btn-outline.active,
.btn.btn-warning.btn-outline:active,
button.btn-warning.btn-outline.active,
button.btn-warning.btn-outline:active,
input[type='button'].btn-warning.btn-outline.active,
input[type='button'].btn-warning.btn-outline:active,
input[type='reset'].btn-warning.btn-outline.active,
input[type='reset'].btn-warning.btn-outline:active,
input[type='submit'].btn-warning.btn-outline.active,
input[type='submit'].btn-warning.btn-outline:active {
background-color: #f4980a;
}
.btn.btn-danger,
button.btn-danger,
input[type='button'].btn-danger,
input[type='reset'].btn-danger,
input[type='submit'].btn-danger {
background-color: #ff7d6a;
color: #fff;
}
.btn.btn-danger.active,
.btn.btn-danger:active,
.btn.btn-danger:hover,
button.btn-danger.active,
button.btn-danger:active,
button.btn-danger:hover,
input[type='button'].btn-danger.active,
input[type='button'].btn-danger:active,
input[type='button'].btn-danger:hover,
input[type='reset'].btn-danger.active,
input[type='reset'].btn-danger:active,
input[type='reset'].btn-danger:hover,
input[type='submit'].btn-danger.active,
input[type='submit'].btn-danger:active,
input[type='submit'].btn-danger:hover {
background-color: #eb644c;
}
.btn.btn-danger.btn-outline,
button.btn-danger.btn-outline,
input[type='button'].btn-danger.btn-outline,
input[type='reset'].btn-danger.btn-outline,
input[type='submit'].btn-danger.btn-outline {
box-shadow: inset 0 0 0 2px #ff7d6a;
color: #ff7d6a;
}
.btn.btn-danger.btn-outline:hover,
button.btn-danger.btn-outline:hover,
input[type='button'].btn-danger.btn-outline:hover,
input[type='reset'].btn-danger.btn-outline:hover,
input[type='submit'].btn-danger.btn-outline:hover {
background-color: rgba(255, 125, 106, 0.1);
color: #fff;
}
.btn.btn-danger.btn-outline.active,
.btn.btn-danger.btn-outline:active,
.btn.btn-danger.btn-outline:focus,
button.btn-danger.btn-outline.active,
button.btn-danger.btn-outline:active,
button.btn-danger.btn-outline:focus,
input[type='button'].btn-danger.btn-outline.active,
input[type='button'].btn-danger.btn-outline:active,
input[type='button'].btn-danger.btn-outline:focus,
input[type='reset'].btn-danger.btn-outline.active,
input[type='reset'].btn-danger.btn-outline:active,
input[type='reset'].btn-danger.btn-outline:focus,
input[type='submit'].btn-danger.btn-outline.active,
input[type='submit'].btn-danger.btn-outline:active,
input[type='submit'].btn-danger.btn-outline:focus {
background-color: #eb644c;
background-color: rgba(255, 125, 106, 0.2);
}
.btn.btn-outline,
button.btn-outline,
input[type='button'].btn-outline,
input[type='reset'].btn-outline,
input[type='submit'].btn-outline {
background: none;
color: #44b678;
box-shadow: inset 0 0 0 2px #44b678;
}
.btn.btn-outline:hover,
button.btn-outline:hover,
input[type='button'].btn-outline:hover,
input[type='reset'].btn-outline:hover,
input[type='submit'].btn-outline:hover {
background-color: rgba(68, 182, 120, 0.1);
color: #44b678;
}
.btn.btn-outline.active,
.btn.btn-outline:active,
.btn.btn-outline:focus,
button.btn-outline.active,
button.btn-outline:active,
button.btn-outline:focus,
input[type='button'].btn-outline.active,
input[type='button'].btn-outline:active,
input[type='button'].btn-outline:focus,
input[type='reset'].btn-outline.active,
input[type='reset'].btn-outline:active,
input[type='reset'].btn-outline:focus,
input[type='submit'].btn-outline.active,
input[type='submit'].btn-outline:active,
input[type='submit'].btn-outline:focus {
background-color: rgba(68, 182, 120, 0.2);
color: #44b678;
}
.btn.nostyle.active,
.btn.nostyle:active,
.btn.nostyle:hover,
button.nostyle.active,
button.nostyle:active,
button.nostyle:hover,
input[type='button'].nostyle.active,
input[type='button'].nostyle:active,
input[type='button'].nostyle:hover,
input[type='reset'].nostyle.active,
input[type='reset'].nostyle:active,
input[type='reset'].nostyle:hover,
input[type='submit'].nostyle.active,
input[type='submit'].nostyle:active,
input[type='submit'].nostyle:hover {
background: none;
}
.btn,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
appearance: none;
background-color: #44b678;
border: none;
border-radius: 6px;
color: #fff;
cursor: pointer;
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
font-size: 15px;
-webkit-font-smoothing: antialiased;
font-weight: 600;
line-height: 1;
padding: 0.75em 1em;
text-decoration: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
}
.btn:focus,
.btn:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
color: #fff;
}
.btn:disabled,
button:disabled,
input[type='button']:disabled,
input[type='reset']:disabled,
input[type='submit']:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn.btn-small,
button.btn-small,
input[type='button'].btn-small,
input[type='reset'].btn-small,
input[type='submit'].btn-small {
font-size: 0.8em;
padding: 0.5em 0.75em;
}
.btn.btn-pill,
button.btn-pill,
input[type='button'].btn-pill,
input[type='reset'].btn-pill,
input[type='submit'].btn-pill {
border-radius: 2em;
padding: 0.75em 1.5em;
}
.btn.nostyle,
button.nostyle,
input[type='button'].nostyle,
input[type='reset'].nostyle,
input[type='submit'].nostyle {
padding: 0;
background: none;
}
.btn i:before,
.btn span,
button i:before,
button span,
input[type='button'] i:before,
input[type='button'] span,
input[type='reset'] i:before,
input[type='reset'] span,
input[type='submit'] i:before,
input[type='submit'] span {
vertical-align: middle;
}
#notification-cart .notification__close button i:before,
.notification--alert button i:before,
button #notification-cart .notification__close i:before,
button .icon:before,
button .notification--alert i:before {
vertical-align: unset;
}
.notouch .collections-content .icons-limit:hover {
color: #e5e5e5;
}
.collections {
position: fixed;
top: 0;
right: 0;
-webkit-transition:
-webkit-transform 0.15s linear,
width 0.15s linear;
-moz-transition:
-moz-transform 0.15s linear,
width 0.15s linear;
transition:
transform 0.15s linear,
width 0.15s linear;
-webkit-transform: translateX(101%);
-moz-transform: translateX(101%);
-ms-transform: translateX(101%);
-o-transform: translateX(101%);
transform: translateX(101%);
background-color: #121212;
color: #fff;
height: 100%;
width: 320px;
z-index: 100;
}
.collections.visible {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.collections.expanded {
width: 100%;
z-index: 102;
}
.collections.expanded .paint-popover .popover-content {
width: 220px !important;
top: 24px !important;
left: 4px !important;
}
.collections.expanded .collection-section-header .tooltip .btn-pill.expand {
display: none;
}
.collections.expanded .collection-section-header .tooltip .btn-pill.collapse {
display: block;
}
.collections.loading:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #121212;
z-index: 9;
opacity: 0.3;
}
.collections.loading:after {
content: '';
-webkit-animation: spinner 0.8s linear infinite;
-moz-animation: spinner 0.8s infinite linear;
animation: spinner 0.8s linear infinite;
border: 2px solid #fff;
border-right-color: transparent;
border-radius: 100%;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 48px;
height: 48px;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
margin-left: -24px;
margin-top: -24px;
}
.collections .collection-section-header {
background-color: #0a152f;
padding: 1em;
position: relative;
z-index: 300;
}
.collections .collection-section-header .hide-collections {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #142a5e;
border-radius: 0;
color: #fff;
height: 100%;
left: 0;
padding: 1em;
}
.collections .collection-section-header .hide-collections i {
vertical-align: text-top;
}
.collections .collection-section-header span {
cursor: default;
font-weight: 700;
}
.collections .collection-section-header span:not(.badge) {
margin-left: 3em;
}
.collections .collection-section-header span.collections-number:empty {
display: none;
}
.collections .collection-section-header .tooltip {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1em;
z-index: 3;
}
.collections .collection-section-header .tooltip.expand-collapse-holder {
right: 92px;
}
@media (max-width: 768px) {
.collections .collection-section-header .tooltip.expand-collapse-holder {
display: none;
}
}
.collections .collection-section-header .tooltip.show-collections-holder {
right: 54px;
}
.collections .collection-section-header .tooltip.add-collection:after {
-webkit-transform: translateY(7px);
-moz-transform: translateY(7px);
-ms-transform: translateY(7px);
-o-transform: translateY(7px);
transform: translateY(7px);
left: auto;
right: 0;
}
.collections .collection-section-header .tooltip .btn-pill {
box-sizing: border-box;
font-size: 16px;
line-height: 32px;
width: 32px;
height: 32px;
padding: 0;
}
.collections .collection-section-header .tooltip .btn-pill.collapse {
display: none;
}
.collections .collection-section-header .tooltip .btn-pill i {
color: #fff;
margin: auto;
}
.collections .collection-section-header .dropdown-upgrade {
-webkit-transition:
opacity 0.1s linear,
visibility 0.1s linear,
-webkit-transform 0.1s linear;
-moz-transition:
opacity 0.1s linear,
visibility 0.1s linear,
-moz-transform 0.1s linear;
transition:
opacity 0.1s linear,
visibility 0.1s linear,
transform 0.1s linear;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
color: #121212;
font-size: 0.8em;
opacity: 0;
padding: 0.5em;
position: absolute;
right: 0.75em;
text-align: center;
visibility: hidden;
width: 300px;
z-index: 999999;
}
.collections .collection-section-header .dropdown-upgrade:before {
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: '';
height: 0;
position: absolute;
right: 1.4em;
top: -6px;
width: 0;
}
.collections .collection-section-header .dropdown-upgrade p {
cursor: default;
line-height: 1.2em;
}
.collections .collections-holder {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
-moz-align-content: flex-start;
align-content: flex-start;
-ms-flex-line-pack: start;
background-color: #121212;
height: calc(100% - 56px);
position: relative;
}
.collections .collections-holder.overflow {
overflow: visible;
}
.collections .collections-holder.scrollable {
overflow-y: auto;
}
.collections .collections-holder.logged .empty-collection-register {
display: none;
}
.collections .collections-holder.logged .empty-collection-registered {
display: block;
}
.collections .collection {
-webkit-transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 56px;
position: relative;
width: 100%;
}
.collections .collection.limit-reached .collection-header .badge {
background-color: #eb644c;
color: #fff;
}
.collections .collection.limit-reached .collection-content .icons-limit {
display: block;
}
.collections .collection .collection-header {
background-color: #142a5e;
cursor: pointer;
padding: 1em;
position: relative;
height: 57px;
}
.collections .collection .collection-header .locked-options {
display: none;
}
.collections .collection .collection-header span {
display: inline-block;
max-width: 74%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
font-weight: 700;
margin-right: 0.5em;
vertical-align: middle;
}
.collections .collection .collection-header .header-options,
.collections .collection .collection-header .locked-options {
position: absolute;
top: 0;
height: 100%;
font-weight: 400;
}
.collections .collection .collection-header .header-options button,
.collections .collection .collection-header .locked-options button {
height: 57px;
width: 50px;
color: #fff;
border-radius: 0;
font-size: 20px;
}
.collections .collection .collection-header .header-options button:hover,
.collections .collection .collection-header .locked-options button:hover {
background-color: #102149;
}
.collections .collection .collection-header .header-options > i,
.collections .collection .collection-header .locked-options > i {
line-height: 57px;
position: absolute;
top: 0;
left: 14px;
}
.collections .collection .collection-header .header-options {
right: 0;
}
.collections
.collection
.collection-header
.header-options
.popover-container.menu-options {
z-index: 999;
}
.collections .collection .collection-header .locked-options {
left: 0;
}
.collections .collection .collection-header .locked-options i {
color: #eb644c;
}
.collections
.collection
.collection-header
.popover:not(.popover-top)
.menu-options
.popover-content {
top: 58px;
bottom: auto;
}
.collections
.collection
.collection-header
.popover:not(.popover-top)
.menu-options
.popover-content
a {
color: #52d999;
}
.collections .collection .collection-header .popover .menu-options .popover-content {
padding: 5px 0;
z-index: 2;
}
.collections
.collection
.collection-header
.popover
.menu-options
.popover-content:before {
right: 14px;
}
.collections
.collection
.collection-header
.popover
.menu-options
.popover-content:after {
right: 12px;
}
.collections .collection .collection-header .popover hr {
margin: 8px 0;
}
.collections .collection .collection-header .option-buttons li {
display: block;
}
.collections .collection .collection-header .option-buttons li:hover {
background: none;
}
.collections .collection .collection-header .option-buttons button {
font-size: 13px;
height: 32px;
font-weight: 600;
text-align: left;
border: none;
border-radius: 0;
float: none;
color: #121212;
padding: 0 8px;
display: flex;
align-items: center;
gap: 5px;
width: 100%;
}
.collections .collection .collection-header .option-buttons button.delete-collection {
color: #eb644c;
}
.collections .collection .collection-header .option-buttons button:hover {
color: #1f408c;
background: none;
}
.collections .collection .collection-header .option-buttons button i {
width: 20px;
display: inline-block;
}
.collections .collection .collection-header .edit-name {
position: absolute;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
}
.collections .collection .collection-header .edit-name input {
background-color: #0a152f;
border: none;
font-weight: 700;
height: 100%;
padding: 1em 3em 1em 1em;
z-index: 1;
color: #fff;
width: 100%;
}
.collections .collection .collection-header .edit-name button {
position: absolute;
top: 0;
right: 0;
color: #3b9e62;
height: 100%;
width: 50px;
display: block;
margin: 0;
z-index: 1;
font-weight: 400;
}
.collections .collection .collection-header .edit-name.active {
display: block;
z-index: 999;
}
.collections .collection .collection-header .edit-name.active button {
background: #0a152f;
}
.collections .collection .collection-header.hovered {
background-color: #183373;
}
.collections .collection .collection-header.hovered button {
display: block;
}
.collections .collection .collection-content {
-webkit-transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
background-color: #fff;
box-shadow: inset 0 -1px 1px #142a5e;
height: 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.collections .collection .collection-content.nologged-limit-reached {
display: none;
}
.collections .collection .collection-content.edit-mode .collection-options,
.collections .collection .collection-content.sort-mode .collection-options {
z-index: 256;
}
.collections .collection .collection-content .upgrade_btn {
display: none;
}
.collections .collection .collection-content .collection-options {
z-index: 258;
}
.collections .collection .collection-content .collection-options.no-icons {
display: none;
}
.collections .collection .collection-content .collection-options > ul:after {
clear: both;
content: '';
display: table;
}
.collections .collection .collection-content .collection-options > ul > li {
float: left;
}
.collections
.collection
.collection-content
.collection-options
> ul
> li
.popover-content {
width: auto;
min-width: 200px;
}
.collections
.collection
.collection-content
.collection-options
> ul
> li
.popover-content:before {
right: 15px;
}
.collections
.collection
.collection-content
.collection-options
> ul
> li
.popover-content:after {
right: 13px;
}
.collections
.collection
.collection-content
.collection-options
> ul
> li
.popover-button,
.collections .collection .collection-content .collection-options > ul > li > button {
border-radius: 0;
padding: 0;
width: 40px;
height: 41px;
line-height: 41px;
font-weight: 400;
color: #121212;
}
.collections
.collection
.collection-content
.collection-options
> ul
> li
.popover-button.popover-button,
.collections
.collection
.collection-content
.collection-options
> ul
> li
> button.popover-button {
width: 50px;
}
.collections .collection .collection-content .header-edit,
.collections .collection .collection-content .header-sort {
-webkit-transition:
top 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition:
top 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition:
top 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
background-color: #e5e5e5;
box-shadow: 1px -1px 0 1px #142a5e;
opacity: 0;
padding: 0 12px;
position: absolute;
top: -44px;
width: 100%;
height: 42px;
line-height: 42px;
z-index: 257;
}
.collections .collection .collection-content .header-edit:after,
.collections .collection .collection-content .header-sort:after {
clear: both;
content: '';
display: table;
}
.collections .collection .collection-content .header-edit b,
.collections .collection .collection-content .header-sort b {
color: #0a152f;
}
.collections .collection .collection-content .header-edit button,
.collections .collection .collection-content .header-sort button {
padding: 6px 20px;
position: relative;
top: 8px;
}
.collections .collection .collection-content .icons-limit {
background: #eb644c;
cursor: default;
display: none;
display: block;
font-size: 0.9em;
line-height: 1em;
padding: 0.5em;
text-align: center;
margin-bottom: 3px;
}
.collections .collection .collection-content .icons-limit a {
color: #fff;
}
.collections .collection .collection-content .icons-limit a b {
text-decoration: underline;
}
.collections .collection .collection-content .premium-advise {
background: #0a152f;
border-radius: 3px;
color: #fff;
font-size: 0.8em;
left: 1em;
line-height: 1.2em;
padding: 0.5em 1.5em 0.5em 0.5em;
position: absolute;
text-align: center;
top: 9em;
z-index: 260;
}
.collections .collection .collection-content .premium-advise:before {
border-bottom: 6px solid #333;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: '';
height: 0;
left: 2.5em;
position: absolute;
top: -6px;
width: 0;
}
.collections .collection .collection-content .premium-advise button {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
height: 100%;
padding: 0.5em;
position: absolute;
right: 0;
top: 50%;
}
.collections .collection .collection-content ul.icons {
height: 100%;
margin: 0;
overflow-y: scroll;
padding: 0 4px;
}
.collections .collection .collection-content ul.icons > li {
min-width: 70px;
-webkit-animation: iconUp 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
-moz-animation: iconUp 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation: iconUp 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.collections .collection .collection-content ul.icons > li:hover {
z-index: 300;
}
.collections .collection .collection-content ul.icons > li img,
.collections .collection .collection-content ul.icons > li svg {
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
}
.collections .collection .collection-content ul.icons > li[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: element;
-webkit-user-drag: element;
}
.collections .collection .collection-content ul.icons > li.icon-upload {
z-index: 250;
margin: 0;
}
.collections .collection .collection-content ul.icons > li.icon-upload:after {
content: '';
display: block;
padding-bottom: 100%;
}
.collections .collection .collection-content ul.icons > li.icon-upload[disabled] label {
cursor: not-allowed;
}
.collections .collection .collection-content ul.icons > li.icon-upload .tooltip {
width: 100%;
height: 100%;
bottom: 0;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 3;
}
.collections
.collection
.collection-content
ul.icons
> li.icon-upload
.tooltip
.tooltip__content {
padding-left: 4px;
}
.collections .collection .collection-content ul.icons > li.icon-upload label {
border: 2px dashed #142a5e;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
color: #142a5e;
}
.collections .collection .collection-content ul.icons > li.icon-upload label:hover {
border-color: #9c9c9c;
color: #9c9c9c;
}
.collections .collection .collection-content ul.icons > li.icon-upload label span {
font-size: 12px;
padding: 4px;
font-weight: 700;
text-align: center;
display: block;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.collections .collection .collection-content ul.icons > li.icon-upload label input {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.collections .collection .collection-content ul.icons > li .personal-icon--text {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 10px;
line-height: 10px;
color: #142a5e;
}
.collections .collection .collection-content ul.icons > li.selected .icon--holder {
background: none;
box-shadow: none;
border: none;
}
.collections .collection .collection-content ul.icons > li.locked .flaticon-premium,
.collections
.collection
.collection-content
ul.icons
> li.personal-icon
.personal-icon--text {
display: block;
}
.collections .collection .collection-content ul.icons > li.locked .edit {
display: none;
}
.collections .collection .collection-content ul.icons > li .flaticon-premium {
display: none;
position: absolute;
font-size: 12px;
line-height: 12px;
z-index: 1;
top: 4px;
left: 4px;
}
.collections .collection .collection-content ul.icons > li .flaticon-premium:before {
width: 12px;
height: 12px;
}
.collections .collection .collection-content ul.icons > li .btn {
width: 32px;
height: 32px;
line-height: 32px;
top: 3px;
right: 3px;
}
.collections .collection .collection-content ul.icons > li .btn:before {
line-height: 32px;
}
.collections .collection .collection-content ul.icons > li .icon-options {
top: 38px;
right: 3px;
}
.collections .collection .collection-content ul.icons > li .edit {
display: none;
padding-right: 44px;
position: relative;
}
.collections .collection .collection-content ul.icons > li .edit > input {
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
color: #121212;
font-size: 0.8em;
padding: 1em 0.5em;
}
.collections .collection .collection-content ul.icons > li .edit .popover {
position: absolute;
top: 50%;
right: 2em;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.collections
.collection
.collection-content
ul.icons
> li
.edit
.popover
.popover-button {
padding: 1em;
}
.collections
.collection
.collection-content
ul.icons
> li
.edit
.popover
.popover-content {
margin-bottom: 45px;
right: -10px;
top: 18px;
width: 215px;
}
.collections .collection .collection-content ul.icons > li .edit label {
position: absolute;
top: 50%;
right: 40px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0.5em;
margin: 0;
font-weight: 700;
cursor: pointer;
color: #0a152f;
}
.collections .collection .collection-content ul.icons > li .edit label input {
display: none;
}
.collections .collection .collection-content ul.icons > li .edit .collection-icon-delete {
right: 0;
width: 44px;
height: 44px;
}
.collections .collection .collection-content ul.icons > li .edit .collection-icon-delete,
.collections .collection .collection-content ul.icons > li .edit .popover-button {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.collections .collection .collection-content ul.icons > li .edit .popover-button {
right: 40px;
padding: 0.5em;
}
.collections .collection .collection-content .overlay-drop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 20px 20px;
background: #fff;
z-index: 300;
display: none;
border-left: 1px solid #e5e5e5;
overflow: hidden;
}
.collections .collection .collection-content .overlay-drop.upgrade .drop,
.collections .collection .collection-content .overlay-drop > div.register,
.collections .collection .collection-content .overlay-drop > div.upgrade {
display: none;
}
.collections .collection .collection-content .overlay-drop.upgrade .upgrade {
display: block;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons {
width: 100%;
max-width: 250px;
margin: 41px auto 0;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
.close {
display: flex;
justify-content: space-between;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
.close
.flaticon-cross {
color: #424242;
font-size: 18px;
cursor: pointer;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
p {
margin: 0 0 5px;
color: #777;
font-size: 13px;
text-align: center;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
p.register-title {
width: 100%;
margin: 15px auto;
font-weight: 600;
font-size: 17px !important;
color: #424242;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
p.register-check {
text-align: left;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
p.register-check
.flaticon-check {
color: #3b9e62;
margin-right: 10px;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
p
a {
color: #424242;
font-weight: 600;
}
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons
a {
margin: 20px 0;
}
.collections .collection .collection-content .overlay-drop.register .drop,
.collections
.collection
.collection-content
.overlay-drop.upgrade
.upgrade
.max-custom-icons.limit-reached {
display: none;
}
.collections .collection .collection-content .overlay-drop.register .register {
display: block;
}
.collections .collection .collection-content .overlay-drop .drop {
height: 100%;
}
.collections .collection .collection-content .overlay-drop .drop--box {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #142a5e;
}
.collections .collection .collection-content .overlay-drop .drop i:not(.flaticon-check) {
font-size: 48px;
height: 48px;
width: 48px;
line-height: 48px;
margin-bottom: 10px;
display: block;
}
.collections .collection .collection-content .overlay-drop .register {
height: 100%;
}
.collections .collection .collection-content .overlay-drop .register--box {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #142a5e;
text-align: center;
}
.collections .collection .collection-content .overlay-drop .register--box p {
color: #424242;
font-size: 14px;
}
.collections .collection .collection-content .overlay-drop .register--box p:first-child {
margin: 0;
}
.collections .collection .collection-content .collection-share {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 100%, 0.9);
padding: 1em;
z-index: 300;
box-shadow: inset 0 -1px 1px #142a5e;
display: none;
}
.collections .collection .collection-content .collection-share.visible {
display: block;
}
.collections .collection .collection-content .collection-share .collection-share-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color: #0a152f;
text-align: center;
max-width: 320px;
margin: auto;
}
.collections .collection .collection-content .collection-share .form-feedback {
margin-top: 30px;
}
.collections .collection .collection-content .collection-share .close {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 28px;
color: #121212;
font-weight: 400;
}
.collections .collection .collection-content .collection-share input {
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
font-size: 0.8em;
margin-top: 20px;
}
.collections .collection .collection-content .collection-share ul:after {
clear: both;
content: '';
display: table;
}
.collections .collection .collection-content .collection-share ul li {
float: left;
width: 33.3333%;
}
.collections .collection .collection-content .collection-share ul li button {
border: none;
border-radius: 0;
width: 100%;
}
.collections .collection .collection-content .collection-share ul li button i {
color: #fff;
font-weight: 400;
}
.collections
.collection
.collection-content
.collection-share
ul
li
button.bg-twitter:hover {
background-color: #000 !important;
}
.collections
.collection
.collection-content
.collection-share
ul
li
button.bg-facebook:hover {
background-color: #1877f2 !important;
}
.collections
.collection
.collection-content
.collection-share
ul
li
button.bg-pinterest:hover {
background-color: #cb2027 !important;
}
.collections .collection .collection-content .collection-share ul li:first-child button {
border-radius: 4px 0 0 4px;
}
.collections .collection .collection-content .collection-share ul li:last-child button {
border-radius: 0 4px 4px 0;
}
.collections .collection .collection-content .collection-backup {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 100%, 0.9);
padding: 1em;
z-index: 300;
box-shadow: inset 0 -1px 1px #142a5e;
display: none;
}
.collections .collection .collection-content .collection-backup.visible {
display: block;
}
.collections
.collection
.collection-content
.collection-backup
.collection-backup-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color: #0a152f;
text-align: center;
max-width: 320px;
margin: auto;
}
.collections
.collection
.collection-content
.collection-backup
.collection-backup-content
.tooltip {
margin-bottom: 20px;
}
.collections .collection .collection-content .collection-backup .close {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 28px;
color: #121212;
}
.collections .collection .collection-content .empty-collection {
color: #121212;
height: 100%;
padding: 0 10px;
position: relative;
text-align: center;
display: none;
}
.collections .collection .collection-content .download-holder {
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
background-color: #fff;
box-shadow: inset 0 -1px 1px #142a5e;
padding: 1em;
text-align: center;
width: 100%;
z-index: 257;
}
.collections .collection .collection-content .collection-download {
position: absolute;
bottom: -1em;
left: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
box-shadow: inset 0 -1px 1px #142a5e;
color: #121212;
height: 0;
overflow: hidden;
overflow-y: scroll;
text-align: center;
width: 100%;
z-index: 258;
}
.collections .collection .collection-content .collection-download header {
padding: 1em;
position: relative;
}
.collections .collection .collection-content .collection-download header b {
display: block;
}
.collections .collection .collection-content .collection-download header button {
position: absolute;
top: 0.3em;
right: 0.5em;
color: #121212;
font-size: 2em;
font-weight: 400;
}
.collections .collection .collection-content .collection-download ul.download {
padding: 1em;
text-align: center;
max-width: 320px;
margin: auto;
}
.collections .collection .collection-content .collection-download ul.download li {
display: block;
margin: 0 0 1em;
}
.collections .collection .collection-content .collection-download ul.download li:after,
.collections .collection .collection-content .collection-download ul.download li:before {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.collections .collection .collection-content .collection-download ul.download li:before {
display: none;
}
.collections .collection .collection-content .collection-download ul.download li:after {
height: auto;
line-height: 1em;
padding-bottom: 11px;
max-width: 80%;
white-space: normal;
width: 320px;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li
.tooltip__content {
width: 100%;
white-space: normal;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.extra-info
button {
width: calc(100% - 30px);
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.extra-info
a {
position: absolute;
top: 0;
right: 0;
display: block;
width: 30px;
line-height: 40px;
color: #0a152f;
text-align: right;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.customize {
margin: 0;
display: none;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.customize.active {
margin: -8px 0 1em;
padding: 0.5em;
border-radius: 4px;
overflow: visible;
position: relative;
display: block;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.customize.active:before {
content: '';
left: 1em;
top: -8px;
width: 0;
height: 0;
display: block;
border-bottom: 8px solid #0a152f;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-radius: 2px;
position: absolute;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.customize
span {
display: block;
font-size: 0.9em;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.customize
ul.size {
margin-top: 0.5em;
}
.collections
.collection
.collection-content
.collection-download
ul.download
li.customize
ul.size
li {
margin-bottom: 0;
}
.collections .collection .collection-content .collection-download ul.download li a,
.collections .collection .collection-content .collection-download ul.download li button {
box-sizing: border-box;
display: block;
text-align: center;
}
.collections .collection .collection-content .collection-download .customize {
background: #0a152f;
color: #fff;
}
.collections .collection .collection-content .collection-download.active {
height: 100%;
overflow: auto;
bottom: 0;
}
.collections .collection .paint-popover .popover-content {
top: 36px;
z-index: 300;
}
.collections .collection .paint-popover .popover-content:after,
.collections .collection .paint-popover .popover-content:before {
display: none;
}
@media (max-width: 1024px) {
.collections .collection .paint-popover .popover-content {
right: auto;
left: 0;
}
}
.collections .collection .paint-popover .color-selector {
margin-bottom: 7px;
}
.collections .collection .paint-popover .color-selector li:hover {
background: none;
}
.collections .collection.expanded {
height: 100%;
}
.collections .collection.expanded.nologged-limit-reached {
background: #fff;
box-shadow: inset 0 -1px 1px #142a5e;
}
@media (min-width: 480px) {
.collections .collection.expanded.collection-height-1 {
height: calc(100% - 56px);
}
.collections .collection.expanded.collection-height-2 {
height: calc(100% - 112px);
}
}
.collections .collection.expanded .collection-header {
z-index: 258;
}
.collections .collection.expanded .collection-content {
overflow: visible;
height: calc(100% - 56px);
padding-bottom: 115px;
}
.collections .collection.expanded .collection-content.edit-mode {
padding-bottom: 39px;
}
.collections .collection.expanded .collection-content.edit-mode .header-edit {
opacity: 1;
top: 0;
}
.collections .collection.expanded .collection-content.edit-mode ul.icons {
padding: 1em 0;
}
.collections .collection.expanded .collection-content.edit-mode ul.icons > li {
-webkit-animation: none;
-moz-animation: none;
animation: none;
height: auto;
margin: 0.3em 0;
padding: 0;
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
width: 100%;
}
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li
.icon--holder {
padding-left: 55px;
background: none;
border: none;
box-shadow: none;
}
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li
.icon--holder:after {
display: none;
}
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li
.icon--holder
> img,
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li
.icon--holder
> svg {
left: 0;
top: 0;
margin: 6px 10px;
width: 32px;
height: 32px;
}
.collections .collection.expanded .collection-content.edit-mode ul.icons > li .edit {
display: block;
}
.collections .collection.expanded .collection-content.edit-mode ul.icons > li .view {
width: 48px;
height: 48px;
}
.collections .collection.expanded .collection-content.edit-mode ul.icons > li.icon-fill,
.collections .collection.expanded .collection-content.edit-mode ul.icons > li.icon-upload,
.collections .collection.expanded .collection-content.edit-mode ul.icons > li.locked,
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li
.personal-icon--text,
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li:hover
.icon-options,
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li:hover
.overlay {
display: none;
}
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
> li.whitebg
svg {
background: #142a5e;
}
.collections
.collection.expanded
.collection-content.edit-mode
ul.icons
~ .download-holder {
-webkit-transform: translateY(75px);
-moz-transform: translateY(75px);
-ms-transform: translateY(75px);
-o-transform: translateY(75px);
transform: translateY(75px);
opacity: 0;
}
.collections .collection.expanded .collection-content.edit-mode .collection-download {
display: none;
}
.collections
.collection.expanded
.collection-content:not(.edit-mode)
ul.icons
.icon--item.whitebg {
background-color: #142a5e;
}
.collections .collection.expanded .collection-content.sort-mode {
padding-bottom: 39px;
}
.collections .collection.expanded .collection-content.sort-mode .header-sort {
opacity: 1;
top: 0;
}
.collections .collection.expanded .collection-content.sort-mode ul.icons {
padding: 10px 0;
}
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li:not(.icon-upload) {
cursor: move;
-webkit-animation: none;
-moz-animation: none;
animation: none;
}
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li:not(.icon-upload)
.overlay,
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li:not(.icon-upload)
.popover {
display: none;
}
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li:not(.icon-upload).dragHover {
box-shadow: 0 0 0 3px #3b9e62;
}
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li.icon-upload
label {
opacity: 0.2;
cursor: not-allowed;
}
.collections .collection.expanded .collection-content.sort-mode ul.icons > li.first-icon {
cursor: auto;
}
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li.first-icon.dragHover,
.collections
.collection.expanded
.collection-content.sort-mode
ul.icons
> li.first-icon:hover {
box-shadow: none;
}
.collections .collection.expanded .collection-content.sort-mode .download-wrapper {
display: none;
}
.collections .collection.expanded.limit-reached .collection-content {
padding-bottom: 157px;
}
.collections .collection.expanded.limit-reached .collection-content.edit-mode {
padding-bottom: 82px;
}
.collections .collection.expanded.empty ul.icons {
display: none;
}
.collections .collection.expanded.empty .collection-content {
padding-bottom: 42px;
}
@media (max-width: 480px) {
.collections .collection.expanded.empty .collection-content {
padding-bottom: 0;
}
}
.collections .collection.expanded.empty .empty-collection {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
overflow: auto;
}
.collections .collection.expanded.empty .empty-collection .empty-collection-content {
margin-bottom: 10px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.collections .collection.expanded.empty .empty-collection .empty-collection-content p {
font-size: 13px;
}
.collections
.collection.expanded.empty
.empty-collection
.empty-collection-content
label {
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.collections .collection.expanded.empty .empty-collection .empty-collection-content img {
display: block;
margin: 0 auto 12px;
}
.collections .collection.expanded.empty .download-wrapper {
display: none;
}
.collections .collection .empty-collection-gtm {
margin-bottom: 10px;
overflow: hidden;
}
.collections .collection.locked .collection-header {
background-color: #0a152f;
}
.collections .collection.locked .collection-header .collection-name {
max-width: 63%;
margin-left: 22px;
}
.collections .collection.locked .collection-header .locked-options {
display: block;
}
.collections .collection.locked .popover-locked {
font-size: 12px;
text-align: center;
padding: 8px;
}
.collections .collection.locked.expanded .collection-content {
padding-bottom: 0;
}
.collections .collection.locked.expanded .collection-content ul.icons {
height: calc(100% - 50px);
}
.collections .collection.locked.expanded .collection-content .collection-options {
display: none;
}
.collections .collection.locked.expanded .collection-content .upgrade_btn {
display: block;
width: calc(100% - 8px);
text-align: center;
margin: 0 auto 8px;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
}
.collections .collection.locked.expanded .collection-content .download-wrapper {
display: none;
}
.collections .collection.locked .empty-collection {
height: calc(100% - 51px);
}
.collections .popover.popover-right .popover-content {
left: -15px;
}
.collections .popover.popover-right .popover-content:before {
left: 19px !important;
}
.collections .popover.popover-right .popover-content:after {
left: 17px !important;
}
.collections .popover.popover-left .popover-content:before {
right: 6px !important;
}
.collections .popover.popover-left .popover-content:after {
right: 4px !important;
}
.collections .empty-collection-register {
width: 100%;
max-width: 250px;
margin: 41px auto 0;
}
.collections .empty-collection-register.icons-collection-noregister {
display: none;
}
.collections .empty-collection-register.icons-collection-noregister.limit-reached {
display: block;
}
.collections .empty-collection-register.icons-collection-noregister .close {
display: flex;
justify-content: space-between;
}
.collections
.empty-collection-register.icons-collection-noregister
.close
.flaticon-cross {
color: #424242;
font-size: 18px;
cursor: pointer;
}
.collections .empty-collection-register p {
margin: 0 0 5px;
color: #777;
font-size: 14px;
text-align: center;
}
.collections .empty-collection-register p.register-title {
width: 100%;
margin: 15px auto;
font-weight: 600;
font-size: 17px !important;
color: #424242;
}
.collections .empty-collection-register p.register-check {
text-align: left;
}
.collections .empty-collection-register p.register-check .flaticon-check {
color: #3b9e62;
margin-right: 10px;
}
.collections .empty-collection-register a {
margin: 20px 0;
line-height: 16px;
}
.collections .empty-collection-register.limit-reached,
.collections .empty-collection-registered {
display: none;
}
.collections ul.size {
display: inline-block;
}
.collections ul.size:after {
clear: both;
content: '';
display: table;
}
.collections ul.size li {
float: left;
}
.collections ul.size li .btn {
padding: 0 8px;
}
.collections ul.size li button {
border-radius: 0;
height: 24px;
border-right: 1px solid #44b678;
}
.collections ul.size li:first-child button {
border-radius: 4px 0 0 4px;
}
.collections ul.size li:last-child {
border: none;
}
.collections ul.size li:last-child button {
border-radius: 0 4px 4px 0;
border: none;
}
.collections-overlay {
position: fixed;
top: 0;
right: -100%;
background: rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
width: 100%;
z-index: 98;
}
@media (max-width: 1024px) {
#viewport .collections-overlay {
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
display: block;
opacity: 0;
}
#viewport.collections-visible {
height: 100%;
overflow: hidden;
}
#viewport.collections-visible .collections,
#viewport.collections-visible .collections.visible {
-webkit-transition: right 0.25s ease-in-out;
-moz-transition: right 0.25s ease-in-out;
transition: right 0.25s ease-in-out;
height: 100%;
width: 100%;
}
#viewport.collections-visible .collections.visible + .collections-overlay {
opacity: 1;
right: 0;
}
}
.customize {
height: 0;
padding: 0;
overflow: hidden;
-webkit-transform: perspective(500px) rotateX(-90deg);
-moz-transform: perspective(500px) rotateX(-90deg);
-ms-transform: perspective(500px) rotateX(-90deg);
-o-transform: perspective(500px) rotateX(-90deg);
transform: perspective(500px) rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition:
-webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition:
-moz-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition:
transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.customize .close-customize {
position: absolute;
top: 0;
right: 0.5em;
color: #fff;
font-size: 1.6;
cursor: pointer;
}
.customize .color-selector {
margin-bottom: 1em;
}
.customize .size {
margin-top: 1em;
}
.customize.active {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
height: auto;
padding: 1em;
}
.collection.locked .collection-content .collection_icons_list {
height: calc(100% - 170px) !important;
padding-top: 10px !important;
}
.collection.locked .collection-content .empty-collection {
display: none !important;
}
.collection-locked-inside {
padding-top: 10px;
}
.collection-locked-inside .collection-locked {
max-width: 298px;
display: flex;
background: rgba(255, 178, 41, 0.1);
margin: 0 auto;
padding: 15px 15px 20px;
border-radius: 6px;
}
#notification-cart
.notification__close
.notification--error
.notification__state
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
#notification-cart
.notification__close
.notification--warning
.notification__state
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
#notification-cart
.notification__close
.notification--error
.notification__state
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
#notification-cart
.notification__close
.notification--warning
.notification__state
i:not(.nostyle),
.collection-locked-inside .collection-locked-box .icon--danger,
.collection-locked-inside .collection-locked-box .icon--exclamation,
.collection-locked-inside .collection-locked-box .icon--warning,
.collection-locked-inside
.collection-locked-box
.notification--alert
.notification--error
.notification__state
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--alert
.notification--warning
.notification__state
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--error
.notification__state
#notification-cart
.notification__close
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--error
.notification__state
.icon:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--error
.notification__state
.notification--alert
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--warning
.notification__state
#notification-cart
.notification__close
i:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--warning
.notification__state
.icon:not(.nostyle),
.collection-locked-inside
.collection-locked-box
.notification--warning
.notification__state
.notification--alert
i:not(.nostyle),
.notification--alert
.notification--error
.notification__state
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
.notification--alert
.notification--warning
.notification__state
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
.notification--error
.notification__state
#notification-cart
.notification__close
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
.notification--error
.notification__state
.collection-locked-inside
.collection-locked-box
.icon:not(.nostyle),
.notification--error
.notification__state
.notification--alert
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
.notification--warning
.notification__state
#notification-cart
.notification__close
.collection-locked-inside
.collection-locked-box
i:not(.nostyle),
.notification--warning
.notification__state
.collection-locked-inside
.collection-locked-box
.icon:not(.nostyle),
.notification--warning
.notification__state
.notification--alert
.collection-locked-inside
.collection-locked-box
i:not(.nostyle) {
color: #feb602;
margin-top: 2px;
}
.collection-locked-inside .collection-locked-box--title {
color: #424242;
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
}
.collection-locked-inside .collection-locked-box--text {
color: #5b5b5b;
font-size: 14px;
margin-bottom: 20px;
}
.collection-locked-inside .collection-locked-box .icon--cross {
color: #9c9c9c;
margin-top: 2px;
cursor: pointer;
}
.collection-locked-inside .collection-locked-box:first-child {
margin-right: 10px;
}
.collection-locked-inside .collection-locked-box:last-child {
margin-left: 15px;
}
.collection-locked-outside {
padding: 10px 0;
margin: 0 auto;
}
.collection-locked-outside .collection-locked {
max-width: 298px;
display: flex;
background: #fff7e9;
padding: 15px 15px 20px;
border-radius: 6px;
}
#notification-cart
.notification__close
.notification--error
.notification__state
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
#notification-cart
.notification__close
.notification--warning
.notification__state
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
#notification-cart
.notification__close
.notification--error
.notification__state
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
#notification-cart
.notification__close
.notification--warning
.notification__state
i:not(.nostyle),
.collection-locked-outside .collection-locked-box .icon--danger,
.collection-locked-outside .collection-locked-box .icon--exclamation,
.collection-locked-outside .collection-locked-box .icon--warning,
.collection-locked-outside
.collection-locked-box
.notification--alert
.notification--error
.notification__state
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--alert
.notification--warning
.notification__state
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--error
.notification__state
#notification-cart
.notification__close
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--error
.notification__state
.icon:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--error
.notification__state
.notification--alert
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--warning
.notification__state
#notification-cart
.notification__close
i:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--warning
.notification__state
.icon:not(.nostyle),
.collection-locked-outside
.collection-locked-box
.notification--warning
.notification__state
.notification--alert
i:not(.nostyle),
.notification--alert
.notification--error
.notification__state
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
.notification--alert
.notification--warning
.notification__state
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
.notification--error
.notification__state
#notification-cart
.notification__close
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
.notification--error
.notification__state
.collection-locked-outside
.collection-locked-box
.icon:not(.nostyle),
.notification--error
.notification__state
.notification--alert
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
.notification--warning
.notification__state
#notification-cart
.notification__close
.collection-locked-outside
.collection-locked-box
i:not(.nostyle),
.notification--warning
.notification__state
.collection-locked-outside
.collection-locked-box
.icon:not(.nostyle),
.notification--warning
.notification__state
.notification--alert
.collection-locked-outside
.collection-locked-box
i:not(.nostyle) {
color: #feb602;
margin-top: 2px;
}
.collection-locked-outside .collection-locked-box--title {
color: #424242;
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
}
.collection-locked-outside .collection-locked-box--text {
color: #5b5b5b;
font-size: 14px;
margin-bottom: 20px;
}
.collection-locked-outside .collection-locked-box:first-child {
margin-right: 10px;
}
.modal_delete_collection .modal-inner {
max-width: 560px;
width: 100%;
}
.color-selector {
text-align: center;
margin-left: -3px;
width: calc(100% + 6px);
}
.color-selector:after {
clear: both;
content: '';
display: table;
}
.color-selector li {
display: inline-block;
padding: 3px;
}
.color-selector li button {
padding: 0;
width: 20px;
height: 20px;
border: none;
border-radius: 100%;
background: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.color-selector li button.green {
background-color: #91dc5a;
}
.color-selector li button.blue {
background-color: #006df0;
}
.color-selector li button.purple {
background-color: #933ec5;
}
.color-selector li button.yellow {
background-color: #ffda44;
}
.color-selector li button.red {
background-color: #d80027;
}
.color-selector li button.black {
background-color: #000;
box-shadow: 0 0 0 1px #5f5f5f;
}
.color-selector li button.white {
background-color: #fff;
box-shadow: 0 0 1px #142a5e;
}
.color-selector li button.selected:after {
content: '';
width: 10px;
height: 10px;
display: block;
background-color: #fff;
border-radius: 50%;
margin: 5px;
}
.color-selector li button.selected.white:after {
background-color: #121212;
}
.popover-colorpicker .popover-content {
width: 208px;
}
.colpick {
position: absolute;
width: 346px;
height: 170px;
overflow: hidden;
display: none;
font-family: Arial, Helvetica, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.colpick_color {
overflow: hidden;
outline: 1px solid #aaa;
}
.colpick_color,
.colpick_color_overlay1 {
position: absolute;
left: 0;
top: 0;
width: 156px;
height: 156px;
}
.colpick_color_overlay1 {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";
background: -moz-linear-gradient(left, #fff 0, hsla(0, 0%, 100%, 0) 100%);
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #fff),
color-stop(100%, hsla(0, 0%, 100%, 0))
);
background: -webkit-linear-gradient(left, #fff, hsla(0, 0%, 100%, 0));
background: -o-linear-gradient(left, #fff 0, hsla(0, 0%, 100%, 0) 100%);
background: -ms-linear-gradient(left, #fff 0, hsla(0, 0%, 100%, 0) 100%);
background: linear-gradient(90deg, #fff 0, hsla(0, 0%, 100%, 0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#ffffff",endColorstr="#00ffffff");
}
.colpick_color_overlay2 {
position: absolute;
left: 0;
top: 0;
width: 156px;
height: 156px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";
background: -moz-linear-gradient(top, transparent 0, #000 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, transparent),
color-stop(100%, #000)
);
background: -webkit-linear-gradient(top, transparent, #000);
background: -o-linear-gradient(top, transparent 0, #000 100%);
background: -ms-linear-gradient(top, transparent 0, #000 100%);
background: linear-gradient(180deg, transparent 0, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#000000",GradientType=0);
}
.colpick_selector_outer {
background: none;
position: absolute;
width: 11px;
height: 11px;
margin: -6px 0 0 -6px;
border: 1px solid #000;
border-radius: 50%;
}
.colpick_selector_inner {
position: absolute;
width: 9px;
height: 9px;
border: 1px solid #fff;
border-radius: 50%;
}
.colpick_hue {
position: absolute;
top: 0;
left: 170px;
width: 19px;
height: 156px;
border: 1px solid #aaa;
}
.colpick_hue_arrs {
position: absolute;
left: -8px;
width: 35px;
height: 7px;
margin: -7px 0 0;
}
.colpick_hue_larr {
border-left: 7px solid #858585;
}
.colpick_hue_larr,
.colpick_hue_rarr {
position: absolute;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.colpick_hue_rarr {
right: 0;
border-right: 7px solid #858585;
}
.colpick_new_color {
left: 207px;
}
.colpick_current_color,
.colpick_new_color {
position: absolute;
top: 6px;
width: 60px;
height: 27px;
background: red;
border: 1px solid #8f8f8f;
}
.colpick_current_color {
left: 277px;
}
.colpick_field,
.colpick_hex_field {
position: absolute;
height: 27px;
width: 60px;
overflow: hidden;
color: #b8b8b8;
font-size: 12px;
border: 1px solid #bdbdbd;
}
.colpick_rgb_r {
top: 40px;
left: 207px;
}
.colpick_rgb_g {
top: 67px;
left: 207px;
}
.colpick_rgb_b {
top: 94px;
left: 207px;
}
.colpick_hsb_h {
top: 40px;
left: 277px;
}
.colpick_hsb_s {
top: 67px;
left: 277px;
}
.colpick_hsb_b {
top: 94px;
left: 277px;
}
.colpick_hex_field {
width: 68px;
left: 72px;
top: 168px;
}
.colpick_focus {
border-color: #999;
}
.colpick_field_letter {
position: absolute;
width: 17px;
height: 20px;
line-height: 20px;
background: #efefef;
border-right: 1px solid #bdbdbd;
font-weight: 700;
color: #777;
z-index: 1;
text-align: center;
}
.colpick_field input,
.colpick_hex_field input {
position: absolute;
right: 11px;
margin: 0;
padding: 0;
height: 20px;
line-height: 20px;
background: transparent;
border: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #555;
text-align: right;
outline: none;
}
.colpick_hex_field input {
right: 4px;
}
.colpick_field_arrs {
position: absolute;
top: 0;
right: 0;
width: 9px;
height: 21px;
}
.colpick_field_uarr {
top: 5px;
border-bottom: 4px solid #959595;
}
.colpick_field_darr,
.colpick_field_uarr {
position: absolute;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.colpick_field_darr {
bottom: 5px;
border-top: 4px solid #959595;
}
.colpick_submit {
position: absolute;
left: 207px;
top: 149px;
width: 130px;
height: 22px;
line-height: 22px;
background: #efefef;
text-align: center;
color: #555;
font-size: 12px;
font-weight: 700;
border: 1px solid #bdbdbd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.colpick_submit:hover {
background: #f3f3f3;
border-color: #999;
cursor: pointer;
}
.colpick_full_ns .colpick_current_color,
.colpick_full_ns .colpick_submit {
display: none;
}
.colpick_full_ns .colpick_new_color {
width: 130px;
height: 25px;
}
.colpick_full_ns .colpick_hsb_h,
.colpick_full_ns .colpick_rgb_r {
top: 42px;
}
.colpick_full_ns .colpick_hsb_s,
.colpick_full_ns .colpick_rgb_g {
top: 73px;
}
.colpick_full_ns .colpick_hsb_b,
.colpick_full_ns .colpick_rgb_b {
top: 104px;
}
.colpick_full_ns .colpick_hex_field {
top: 135px;
}
.colpick_rgbhex .colpick_hsb_b,
.colpick_rgbhex .colpick_hsb_h,
.colpick_rgbhex .colpick_hsb_s {
display: none;
}
.colpick_rgbhex {
width: 282px;
}
.colpick_rgbhex .colpick_field,
.colpick_rgbhex .colpick_submit {
width: 68px;
}
.colpick_rgbhex .colpick_new_color {
width: 34px;
border-right: none;
}
.colpick_rgbhex .colpick_current_color {
width: 34px;
left: 240px;
border-left: none;
}
.colpick_rgbhex_ns .colpick_current_color,
.colpick_rgbhex_ns .colpick_submit {
display: none;
}
.colpick_rgbhex_ns .colpick_new_color {
width: 68px;
border: 1px solid #8f8f8f;
}
.colpick_rgbhex_ns .colpick_rgb_r {
top: 42px;
}
.colpick_rgbhex_ns .colpick_rgb_g {
top: 73px;
}
.colpick_rgbhex_ns .colpick_rgb_b {
top: 104px;
}
.colpick_rgbhex_ns .colpick_hex_field {
top: 135px;
}
.colpick_hex .colpick_hsb_b,
.colpick_hex .colpick_hsb_h,
.colpick_hex .colpick_hsb_s,
.colpick_hex .colpick_rgb_b,
.colpick_hex .colpick_rgb_g,
.colpick_hex .colpick_rgb_r {
display: none;
}
.colpick_hex {
width: 206px;
height: 201px;
}
.colpick_hex .colpick_hex_field {
width: 72px;
height: 27px;
top: 168px;
left: 77px;
}
.colpick_hex .colpick_hex_field div,
.colpick_hex .colpick_hex_field input {
height: 25px;
line-height: 25px;
box-shadow: none;
border: none;
}
.colpick_hex .colpick_new_color {
left: 0;
top: 168px;
width: 30px;
border-right: none;
}
.colpick_hex .colpick_current_color {
left: 39px;
top: 168px;
width: 30px;
border-left: none;
}
.colpick_hex .colpick_submit {
left: 164px;
top: 168px;
width: 30px;
height: 25px;
line-height: 25px;
}
.colpick_hex_ns .colpick_current_color,
.colpick_hex_ns .colpick_submit {
display: none;
}
.colpick_hex_ns .colpick_hex_field {
width: 80px;
}
.colpick_hex_ns .colpick_new_color {
width: 60px;
border: 1px solid #8f8f8f;
}
.colpick_dark {
background: #161616;
border-color: #2a2a2a;
}
.colpick_dark .colpick_color {
outline-color: #333;
}
.colpick_dark .colpick_hue {
border-color: #555;
}
.colpick_dark .colpick_field,
.colpick_dark .colpick_hex_field {
background: #101010;
border-color: #2d2d2d;
}
.colpick_dark .colpick_field_letter {
background: #131313;
border-color: #2d2d2d;
color: #696969;
text-align: center;
}
.colpick_dark .colpick_field input,
.colpick_dark .colpick_hex_field input {
color: #7a7a7a;
}
.colpick_dark .colpick_field_uarr {
border-bottom-color: #696969;
}
.colpick_dark .colpick_field_darr {
border-top-color: #696969;
}
.colpick_dark .colpick_focus {
border-color: #444;
}
.colpick_dark .colpick_submit {
background: #131313;
border-color: #2d2d2d;
color: #7a7a7a;
}
.colpick_dark .colpick_submit:hover {
background-color: #101010;
border-color: #444;
}
.detail .detail-content .main-icon,
.detail .detail-content .next-icon.nextMain,
.detail .detail-content .prev-icon.prevMain {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 256px;
margin: -178px 0 0 -128px;
width: 256px;
}
.detail .detail-content .main-icon img,
.detail .detail-content .main-icon svg,
.detail .detail-content .next-icon.nextMain img,
.detail .detail-content .next-icon.nextMain svg,
.detail .detail-content .prev-icon.prevMain img,
.detail .detail-content .prev-icon.prevMain svg {
height: 100%;
width: 100%;
}
.detail .detail-content .main-icon.mainPrev,
.detail .detail-content .prev-icon,
.detail .detail-content .prev-icon-2.prevIn {
left: 0;
}
.detail .detail-content .main-icon.mainPrev img,
.detail .detail-content .prev-icon-2.prevIn img,
.detail .detail-content .prev-icon img {
height: auto;
width: 100%;
}
.detail .detail-content .next-icon-2.prevPos,
.detail .detail-content .prev-icon-2,
.detail .detail-content .prev-icon.prevOut {
left: -100px;
}
.detail .detail-content .main-icon.mainNext,
.detail .detail-content .next-icon,
.detail .detail-content .next-icon-2.nextIn {
left: 100%;
margin-left: -68px;
}
.detail .detail-content .main-icon.mainNext img,
.detail .detail-content .next-icon-2.nextIn img,
.detail .detail-content .next-icon img {
height: auto;
width: 100%;
}
.detail .detail-content .next-icon-2,
.detail .detail-content .next-icon.nextOut,
.detail .detail-content .prev-icon-2.nextPos {
left: calc(100% + 100px);
}
.notouch .author a:hover {
color: #4c5b5c;
}
.notouch .detail .detail-content .prev:hover .flaticon-arrow_left {
padding-left: 0;
}
.notouch .detail .detail-content .next:hover .flaticon-arrow_right {
padding-left: 24px;
}
.detail {
margin: 0 auto;
}
.detail[data-icon_type='animated-icon'] #download-free {
width: 30%;
}
.detail .detail-header .text-link {
border: none;
}
.detail .detail-header .container {
padding: 0 12px;
}
.detail .detail-header h1 {
font-size: 18px;
margin: 0;
}
.detail .detail-header .detail-header--right {
margin-left: auto;
}
.detail .detail-header .detail-header--right .group {
margin-left: 10px;
}
.detail .detail-header .btn-share {
height: 42px;
}
.detail .detail-content {
box-sizing: inherit;
margin: 40px 1em 10px;
}
.detail .detail-content .container {
overflow: hidden;
}
.detail .detail-content .gallery {
position: relative;
min-height: 350px;
}
.detail .detail-content .img-version,
.detail .detail-content .svg-version {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.detail .detail-content .svg-version {
filter: alpha(opacity=0);
opacity: 0;
}
.detail .detail-content .svg-version.active {
filter: alpha(opacity=100);
opacity: 1;
}
.detail .detail-content .svg-version.active + .img-version {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.detail .detail-content .svg-version.light-icons svg {
background: #0b1734;
border-radius: 0.7em;
}
.detail .detail-content .next-icon,
.detail .detail-content .prev-icon {
filter: alpha(opacity=0);
opacity: 0;
}
.detail .detail-content .next-icon-2.prevPos,
.detail .detail-content .prev-icon-2.nextPos {
-webkit-transition-duration: 0ms;
-moz-transition-duration: 0ms;
transition-duration: 0ms;
}
.detail .detail-content .next,
.detail .detail-content .prev {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 136px;
height: 68px;
margin-top: -30px;
z-index: 1;
color: #9c9c9c;
}
.detail .detail-content .next i,
.detail .detail-content .prev i {
opacity: 0;
filter: alpha(opacity=0);
float: left;
width: 68px;
height: 68px;
font-size: 3em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.detail .detail-content .next span,
.detail .detail-content .prev span {
display: block;
float: left;
width: 68px;
height: 68px;
border: 2px solid #e5e5e5;
border-radius: 0.5em;
}
.detail .detail-content .prev {
left: 0;
}
.detail .detail-content .prev i {
padding-left: 24px;
}
.detail .detail-content .next {
right: 0;
}
.detail .detail-content .next i {
padding-left: 0;
}
.detail .detail-content .img-loader {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 1;
filter: alpha(opacity=100);
margin-top: -30px;
margin-left: 10px;
}
.detail .detail-content .img-loader:first-child {
left: 10px;
}
.detail .detail-content .img-loader:nth-child(2) {
right: 10px;
}
.detail .detail-content .icon-actions {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.detail .detail-content .icon-actions > div {
margin-top: 20px;
}
.detail .detail-content .icon-actions .btn-square {
width: 38px;
height: 38px;
position: relative;
top: 0;
left: 0;
display: inline-block;
margin-left: 4px;
box-shadow: 0 0 0 2px #e5e5e5;
}
@media (max-width: 640px) {
.detail .detail-content {
width: calc(100% + 176px);
margin-left: -88px;
}
}
@media (max-width: 1200px) {
.detail {
width: 100%;
}
.detail .detail-header .group-category,
.detail .detail-header .group-pack {
display: none;
}
}
.detail .detail-footer {
min-height: 83px;
}
.detail .detail-footer h2 {
font-size: 17px;
}
.detail .detail-footer .tags {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
margin-top: 24px;
}
.detail .detail-footer .tags li {
display: block;
margin: 0 2px 4px;
}
@media (max-width: 768px) {
.detail {
overflow: hidden;
}
}
@media (max-width: 480px) {
.detail .detail-header {
padding: 6px 0 0;
}
.countdown .detail .detail-header ul,
.detail .detail-header .countdown ul,
.detail .detail-header .groups__item,
.detail .detail-header .landing--register .separator,
.detail .detail-header .profile-login .group,
.detail .detail-header .row,
.landing--register .detail .detail-header .separator,
.profile-login .detail .detail-header .group {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.detail .detail-header--right {
width: 100%;
}
.detail .detail-footer .tags {
font-size: 0.9em;
}
}
@media (max-width: 320px) {
.detail .detail-content .next i,
.detail .detail-content .prev i {
font-size: 2em;
}
.detail .detail-footer .download:after {
clear: both;
content: '';
display: table;
}
.detail .detail-footer .download li {
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
}
.detail .detail-footer .download li.fake {
display: none !important;
}
}
.related #sp-freepik {
height: auto;
}
@media (max-width: 1344px) {
.collections-visible .detail {
width: 100%;
}
}
.loaded .detail-content .next-icon,
.loaded .detail-content .prev-icon {
opacity: 1;
filter: alpha(opacity=0);
}
.loaded .detail-content .next i,
.loaded .detail-content .prev i {
opacity: 1;
}
.loaded .detail-content .img-loader {
opacity: 0;
filter: alpha(opacity=100);
}
#detail-overlay {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
display: none;
width: 100%;
height: 0%;
background: rgba(10, 21, 47, 0.9);
z-index: 100;
}
@media (max-width: 1200px) {
#detail-overlay #detail-navbar {
display: none;
}
}
#detail-overlay.premium-lock .detail .detail-content {
min-height: 234px;
padding-bottom: 0;
}
#detail-overlay.loading {
display: block;
height: 100%;
}
#detail-overlay.ready .detail__inner {
opacity: 1;
}
@media (max-width: 1200px) {
#detail-overlay.ready .detail__inner {
margin-top: 0;
border-radius: 0;
}
}
#detail-overlay.ready.loading .circle-spinner {
display: none;
}
#detail-overlay #detail-wrapper {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
background: transparent;
z-index: 2;
}
@media (max-width: 1200px) {
#detail-overlay #detail-wrapper {
padding-top: 0;
}
}
#detail-overlay #detail-content {
padding: 0 72px;
}
@media (max-width: 1200px) {
#detail-overlay #detail-content {
padding: 0;
}
}
@media (max-width: 1120px) {
#detail-overlay #detail {
padding-bottom: 85px;
}
}
#detail-overlay .detail__inner {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
opacity: 0;
background: #fff;
position: relative;
overflow: hidden;
}
#detail-overlay .detail__inner .detail-footer {
min-height: 83px;
}
#detail-overlay .detail__inner .detail-footer h2 {
font-size: 17px;
}
#detail-overlay .detail__inner #fi-premium-s-p {
border-radius: 0 0 10px 10px;
overflow: hidden;
}
@media (min-width: 1025px) {
#detail-overlay .detail__inner {
margin: 10px auto;
border-radius: 10px;
}
}
@media (min-width: 1200px) {
#detail-overlay .detail__inner {
width: 100%;
max-width: 1400px;
}
}
@media (max-width: 1200px) {
#detail-overlay .detail__inner .detail-header .group-category,
#detail-overlay .detail__inner .detail-header .group-pack {
display: none;
}
}
@media (max-width: 1200px) {
#detail-overlay .detail__inner {
max-width: none;
}
}
#detail-overlay #detail-close {
position: fixed;
top: 10px;
left: 50%;
margin-left: 700px;
width: 64px;
height: 64px;
font-weight: 400;
z-index: 3;
}
@media (max-width: 1544px) {
#detail-overlay #detail-close {
position: absolute;
top: 20px;
right: 20px;
left: auto;
margin-left: 0;
width: 44px;
height: 44px;
}
}
#detail-overlay #detail-close:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 44px;
content: '\d7';
}
#detail-overlay .detail-nav {
width: 64px;
height: 64px;
color: #fff;
font-size: 32px;
text-align: center;
line-height: 64px;
cursor: pointer;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
#detail-overlay .detail-nav#detail-prev {
margin-left: -764px;
}
#detail-overlay .detail-nav#detail-next {
margin-left: 700px;
}
@media (max-width: 1544px) {
#detail-overlay .detail-nav#detail-prev {
left: 10px;
margin-left: 0;
}
#detail-overlay .detail-nav#detail-next {
left: auto;
right: 10px;
}
#detail-overlay .detail-nav:before {
line-height: 44px;
}
}
#detail-overlay .circle-spinner {
border-color: #fff transparent #fff #fff;
width: 120px;
height: 120px;
border-width: 4px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
z-index: 1;
}
#detail-overlay .circle-spinner.related {
display: block !important;
border: 2px solid #121212;
border-right-color: transparent;
top: 60%;
width: 35px;
height: 35px;
position: relative;
margin: 0 auto;
left: unset;
}
@media (max-width: 940px) {
.collections-visible .detail .detail-content .next-icon,
.collections-visible .detail .detail-content .prev-icon {
display: none;
}
}
@media (max-width: 960px) {
.collections-visible .detail .detail-content {
width: calc(100% + 176px);
margin-left: -88px;
}
}
@media (max-width: 800px) {
.collections-visible .detail .detail-footer .tags {
font-size: 0.9em;
}
}
body.isIE .detail .detail-content .img-loader,
body.isIE .detail .detail-content .next,
body.isIE .detail .detail-content .prev {
display: none !important;
}
.detail__content .button--pinterest {
height: 34px;
line-height: 34px;
padding: 0 20px;
font-size: 13px;
z-index: 1;
}
.detail__content .btn-edit-icon {
z-index: 1;
height: 36px;
padding: 0 20px;
margin-left: auto;
}
@media (max-width: 1200px) {
.detail__content .btn-edit-icon {
margin-left: 10px;
padding: 0 10px;
}
.detail__content .btn-edit-icon i {
margin: auto;
}
.detail__content .btn-edit-icon span {
display: none;
}
}
.detail__content .detail__icon__holder {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
position: relative;
}
.detail__content .detail__icon__holder .close-detail {
display: none;
width: 34px;
height: 34px;
line-height: 34px;
font-size: 20px;
color: #424242;
margin-left: auto;
}
@media (max-width: 1200px) {
.detail__content .detail__icon__holder .close-detail {
display: block;
}
}
.detail__content .detail__icon__holder .detail__nav--next,
.detail__content .detail__icon__holder .detail__nav--prev {
display: none;
align-items: center;
justify-content: center;
position: absolute;
width: 40px;
height: 40px;
font-size: 22px;
color: #424242;
}
@media (max-width: 1200px) {
.detail__content .detail__icon__holder .detail__nav--next,
.detail__content .detail__icon__holder .detail__nav--prev {
display: flex;
position: absolute;
z-index: 1;
}
.detail__content .detail__icon__holder .detail__nav--next.detail__nav--prev,
.detail__content .detail__icon__holder .detail__nav--prev.detail__nav--prev {
top: 50%;
left: 0;
margin-top: -20px;
}
.detail__content .detail__icon__holder .detail__nav--next.detail__nav--next,
.detail__content .detail__icon__holder .detail__nav--prev.detail__nav--next {
top: 50%;
right: 0;
margin-top: -20px;
}
}
.detail__content .detail__icon__inner {
touch-action: auto !important;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.detail__content .detail__icon__inner img {
height: auto;
}
.detail__content .detail__icon__inner .animated-icon {
display: flex;
justify-content: center;
align-items: center;
}
.detail__content .next,
.detail__content .prev {
color: #0a152f;
font-size: 32px;
}
.detail__content .main-icon img {
display: block;
margin: auto;
}
@media screen and (max-width: 992px) {
.detail__content {
margin: 20px 20px 0;
}
}
.premium-user .download .btn {
background-color: #feb602;
color: #fff;
}
.premium-user .download .btn:hover {
background-color: #f4980a;
}
.premium-user .download .btn.active,
.premium-user .download .btn:active {
background-color: #ea7e11;
}
.premium-user .download .btn.btn-outline {
box-shadow: inset 0 0 0 2px #feb602;
color: #feb602;
background: none;
}
.premium-user .download .btn.btn-outline:hover {
background-color: #feb602;
color: #fff;
}
.premium-user .download .btn.btn-outline.active,
.premium-user .download .btn.btn-outline:active {
background-color: #f4980a;
}
.premium-user .download .btn-size .popover-button {
box-shadow: none;
color: #fff;
background: #f4980a;
}
.download .btn-size {
-webkit-box-flex: 1.5;
-moz-box-flex: 1.5;
box-flex: 1.5;
-webkit-flex: 1.5;
-moz-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
}
.download .btn-size .btn {
padding: 0.75em 0;
border-radius: 6px 0 0 6px;
}
.download .btn-size .popover-button {
font-size: 10px;
padding: 0 3px;
border-radius: 0 6px 6px 0;
box-shadow: none;
height: 44px;
background: #3b9e62;
color: #fff;
min-width: 44px;
}
.download .btn-size .popover-content {
width: 64px;
z-index: 5;
}
.download .btn-size .popover-content a {
display: block;
padding: 5px;
}
.download .btn-size span {
vertical-align: bottom;
}
.download .btn-size i,
.download .btn-size span {
height: 44px;
line-height: 44px;
display: inline-block;
}
.download .btn-svg {
-webkit-box-flex: 1.5;
-moz-box-flex: 1.5;
box-flex: 1.5;
-webkit-flex: 1.5;
-moz-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
}
.download .btn-svg .btn[data-format='raw-svg'] {
border-radius: 6px 0 0 6px;
}
.download .btn-svg .btn {
padding: 0.75em 0;
border-radius: 6px;
}
.download .btn-svg .btn.bj-button--primary + .popover .popover-button {
background-color: #3b9e62;
}
.download .btn-svg .btn.btn-warning + .popover .popover-button {
background-color: #feb602;
}
.download .btn-svg .popover-button {
font-size: 10px;
padding: 0 3px;
border-radius: 0 6px 6px 0;
box-shadow: none;
height: 44px;
color: #fff;
}
.download .btn-svg .popover-content {
width: 282px;
z-index: 5;
padding: 0;
color: #b1b1b1;
}
.download .btn-svg .popover-content:before {
right: 11px;
}
.download .btn-svg .popover-content:after {
right: 9px;
}
.download .btn-svg .popover-content li a {
display: flex;
align-items: flex-start;
gap: 10px;
}
.download .btn-svg .popover-content li a svg {
width: 25px;
}
.download .btn-svg .popover-content li a div {
flex: 1;
color: #424242;
}
.download .btn-svg .popover-content li a div span {
height: unset;
line-height: unset;
vertical-align: baseline;
}
.download .btn-svg .popover-content li a div .badge {
background-color: #52d999;
color: #fff;
border-radius: 6px;
line-height: 1.1;
padding: 4px;
}
.download .btn-svg .popover-content li a div p {
font-weight: 400;
}
.download .btn-svg .popover-content li:hover {
background-color: #f0f0f0;
}
.download .btn-svg .popover-content li:hover svg path:first-child {
fill: #fff;
}
.download .btn-svg span {
height: 44px;
line-height: 44px;
display: inline-block;
vertical-align: bottom;
}
.download .popover--download .popover-button {
padding: 0.75em 0;
}
.download .popover--download .popover-content {
width: 140px;
right: -12px;
}
.download .popover--download a {
display: block;
}
.download.svg-editable .btn-size,
.download.svg-editable .btn-svg {
-webkit-box-flex: 1.5;
-moz-box-flex: 1.5;
box-flex: 1.5;
-webkit-flex: 1.5;
-moz-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
}
.download.svg-editable .btn-size .btn,
.download.svg-editable .btn-svg .btn {
padding: 0.75em 0;
border-radius: 6px 0 0 6px;
white-space: normal;
}
.download.svg-editable .btn-size .popover-button,
.download.svg-editable .btn-svg .popover-button {
font-size: 10px;
padding: 0 3px;
border-radius: 0 3px 3px 0;
box-shadow: none;
height: 44px;
background: #3b9e62;
color: #fff;
}
.download.svg-editable .btn-size .popover-button.btn-warning,
.download.svg-editable .btn-svg .popover-button.btn-warning {
background: #feb602;
}
.download.svg-editable .btn-size .popover-content,
.download.svg-editable .btn-svg .popover-content {
width: auto;
padding: 20px 0 10px;
}
.download.svg-editable .btn-size .popover-content p,
.download.svg-editable .btn-svg .popover-content p {
color: #9c9c9c;
line-height: 1.4;
}
.download.svg-editable .btn-size .popover-content > p,
.download.svg-editable .btn-svg .popover-content > p {
margin-bottom: 5px;
padding: 0 20px;
}
.download.svg-editable .btn-size .popover-content > a,
.download.svg-editable .btn-svg .popover-content > a {
padding: 10px 20px;
display: block;
background-color: transparent;
border-radius: 0;
}
.download.svg-editable .btn-size .popover-content > a:hover,
.download.svg-editable .btn-svg .popover-content > a:hover {
background-color: #f7f7f7;
}
.download.svg-editable .btn-size .popover-content .size,
.download.svg-editable .btn-svg .popover-content .size {
display: flex;
padding: 0 20px;
}
.download.svg-editable .btn-size .popover-content .size li a,
.download.svg-editable .btn-svg .popover-content .size li a {
display: block;
padding: 5px 10px;
}
.download.svg-editable .btn-size .popover-content .size li a.active,
.download.svg-editable .btn-svg .popover-content .size li a.active {
background-color: #f0f0f0;
border-radius: 6px;
}
.download.svg-editable .btn-size .popover-content .size li a:hover,
.download.svg-editable .btn-svg .popover-content .size li a:hover {
background-color: #f7f7f7;
}
.download.svg-editable .btn-size span,
.download.svg-editable .btn-svg span {
height: 44px;
line-height: 44px;
display: inline-block;
vertical-align: bottom;
}
.download.svg-editable .btn-size span.badge,
.download.svg-editable .btn-svg span.badge {
background-color: #44b678;
border-radius: 6px;
padding: 0 5px;
font-size: 12px;
height: 20px;
line-height: 20px;
vertical-align: top;
color: #fff;
}
.download.svg-editable .btn-size i,
.download.svg-editable .btn-svg i {
height: 44px;
line-height: 44px;
display: inline-block;
}
.download.svg-editable .btn-size .popover-content {
left: -135px;
width: fit-content;
padding: 20px 0;
}
.download.svg-editable .btn-size .popover-content:before {
left: 135px;
}
.download.svg-editable .btn-size .popover-content:after {
left: 133px;
}
.download.svg-editable .btn-svg .btn > i:before {
margin-top: -2px;
}
.download.svg-editable .btn-svg .popover-content {
width: 350px;
}
.download.svg-editable .btn-svg .popover-content:before {
right: 1px;
}
.download.svg-editable .btn-svg .popover-content:after {
right: -1px;
}
.download.svg-editable .btn-svg .popover-content .font-md {
color: #424242;
}
.download.svg-editable .btn-svg i {
line-height: unset;
height: unset;
}
.download.svg-editable .btn-svg i:before {
margin-top: -9px;
}
.download.svg-editable .popover--download .popover-button {
padding: 0.75em 0;
}
.download.svg-editable .popover--download .popover-content {
width: auto;
right: 0;
padding: 20px 0 10px;
}
.download.svg-editable .popover--download .popover-content > ul > p {
padding: 0 20px;
margin-bottom: 5px;
}
.download.svg-editable .popover--download .popover-content > ul li a {
padding: 10px 20px;
}
.download.svg-editable .popover--download .popover-content > ul li a:hover {
background-color: #f7f7f7;
}
.download.svg-editable .popover--download .popover-content:before {
right: 12px;
}
.download.svg-editable .popover--download .popover-content:after {
right: 10px;
}
.download.svg-editable .popover--download .popover-content p {
color: #9c9c9c;
}
.download.svg-editable .popover--download a {
display: flex;
}
.download.svg-editable .popover--download a.btn {
padding: 0;
background-color: transparent;
}
.download.svg-editable .popover--download a.btn i:before {
vertical-align: baseline;
margin-top: -1px;
}
.download.svg-editable .popover--download a.btn p {
color: #424242;
}
.download.svg-editable .popover--download a.btn p span {
vertical-align: top;
color: #5b5b5b;
}
.detail__sidebar__pack {
max-width: 470px;
margin: auto;
border-bottom: 1px solid #e5e5e5;
}
.detail__sidebar__pack .pack-box {
flex-wrap: nowrap;
}
.detail__sidebar__pack .pack-box .pack-holder {
width: 150px;
height: 0;
padding-bottom: 100px;
overflow: hidden;
margin-right: 10px;
}
@media (max-width: 450px) {
.detail__sidebar__pack .pack-box .pack-holder {
height: 135px;
}
.detail__sidebar__pack .pack-box .pack-holder img {
width: 215px;
height: auto;
max-width: inherit;
}
}
.detail__sidebar__pack .pack-box .pack-register {
flex: 1;
}
.detail__sidebar__pack .pack-box .bj-button {
background-color: #142a5e;
padding: 0 10px;
}
.detail__sidebar__pack .pack-box .bj-button:hover {
background-color: #0a152f;
}
.detail__sidebar__pack .pack-box .bj-button.mobile {
display: none !important;
}
@media (max-width: 360px) {
.detail__sidebar__pack .pack-box .bj-button.normal {
display: none !important;
}
.detail__sidebar__pack .pack-box .bj-button.mobile {
display: inline-flex !important;
}
}
.detail__sidebar__banner-premium.test--a {
padding: 20px 20px 0;
}
.detail__sidebar__banner-premium.test--a a {
color: #142a5e;
padding: 10px 20px 10px 10px;
background-color: rgba(254, 182, 2, 0.1);
border-radius: 6px;
display: block;
}
.detail__sidebar__banner-premium.test--b a {
color: #777;
display: block;
padding: 20px;
border-bottom: 1px solid #e5e5e5;
}
.detail__sidebar__banner-premium.test--b a strong {
color: #424242;
}
.detail__sidebar__banner-premium.test--b a span {
color: #ea7e11;
}
.detail__sidebar__banner-premium.cart {
padding: 20px 20px 0;
}
.detail__sidebar__banner-premium.cart a {
color: #142a5e;
padding: 10px 20px 10px 10px;
background-color: rgba(254, 182, 2, 0.1);
border-radius: 6px;
display: block;
}
.detail__sidebar__banner-premium i {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ffb229;
color: #fff;
border-radius: 100%;
}
.detail__sidebar__banner-premium i:before {
content: '';
display: block;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FF7E00' d='M4.3 6.594L0 3.682l1.464 8.37h12.914l1.48-8.386-4.3 2.928L7.914.892z'/%3E%3Cpath fill='%23FFF' d='M4.3 6.595L0 3.682l1.464 8.37h12.915l1.48-8.386-4.301 2.929L7.913.892z'/%3E%3Cpath fill='%23FF9200' d='M1.563 15.89h12.732v-2.425H1.563z'/%3E%3Cpath fill='%23FFF' d='M1.563 15.89h12.732v-2.425H1.563z'/%3E%3C/g%3E%3C/svg%3E");
background-size: 100%;
width: 16px;
height: 16px;
margin: auto;
position: relative;
top: 10px;
}
@media (max-width: 420px) {
.detail__sidebar__banner-premium {
text-align: center;
}
.detail__sidebar__banner-premium i {
display: none;
}
.detail__sidebar__banner-premium .col {
flex: none;
width: 100%;
}
.detail__sidebar__banner-premium span {
background-color: #ffb229;
color: #fff;
height: 32px;
line-height: 32px;
border-radius: 6px;
padding: 0 10px;
margin: 10px auto 0;
}
.detail__sidebar__banner-premium.test--b a span {
color: #fff;
}
}
@media (max-width: 992px) {
.detail__sidebar {
width: 100%;
}
body[data-section='icon-detail'] .detail__sidebar {
padding: 20px 0;
}
}
.detail__sidebar .add-to-collection.btn-danger {
box-shadow: inset 0 0 0 2px #ff7d6a;
color: #ff7d6a;
background: none;
}
.detail__sidebar .add-to-collection.btn-danger:hover {
background-color: rgba(255, 125, 106, 0.1);
}
.detail__sidebar .add-to-collection.btn-danger.active,
.detail__sidebar .add-to-collection.btn-danger:active,
.detail__sidebar .add-to-collection.btn-danger:focus {
background-color: rgba(255, 125, 106, 0.2);
}
.detail__sidebar .btn-square {
width: 44px;
height: 44px;
position: relative;
top: 0;
left: 0;
display: inline-block;
padding: 0;
box-shadow: inset 0 0 0 2px #e5e5e5;
}
.detail__sidebar .list--check {
padding-left: 20px;
}
.detail__sidebar .author__holder {
border-top: 1px solid #e5e5e5;
padding: 10px 0;
}
.detail__sidebar .more-icons {
border-top: 1px solid #e5e5e5;
}
.detail__sidebar .more-icons p:last-child {
margin-bottom: 0;
}
.detail__sidebar .more-icons a {
text-transform: capitalize;
}
.detail__sidebar .fi-not-premium-icon {
width: 100%;
}
.detail__sidebar .attr-required {
color: #424242;
}
.detail__sidebar .license .editorial-license {
text-align: left;
line-height: 1.4;
padding: 10px;
background: rgba(74, 210, 149, 0.1);
border-radius: 6px;
}
.detail__sidebar .license .editorial-license h6 {
margin: 0 0 5px;
}
.detail__sidebar .license .editorial-license .link--text {
color: #286d34;
}
@media (max-width: 1312px) {
.collections-visible .detail__top {
display: flex;
flex-direction: column;
}
.collections-visible .detail__sidebar {
width: 100%;
}
}
.btn-upgrade {
padding: 20px 30px !important;
white-space: normal;
width: 100%;
height: auto !important;
line-height: normal !important;
font-size: 14px;
display: block;
}
.btn-upgrade .mobile-copy {
display: none;
}
.btn-upgrade span {
display: block;
font-size: 30px;
line-height: 30px;
margin-bottom: 5px;
}
.btn-upgrade i {
vertical-align: text-top;
font-weight: 400;
}
.ssm_adunit_container {
position: relative;
}
.following {
background-color: #f7f7f7;
padding-bottom: 40px;
}
.following .list-options .label-switch,
.following .list-options .popover-filters {
display: none;
}
.following .following__list {
margin: 20px 0;
min-height: 380px;
}
.following .following__block {
max-width: 1024px;
margin: 10px auto;
border: 1px solid #e5e5e5;
background-color: #fff;
padding: 20px;
}
.following .avatarAndName {
width: 100%;
}
.following .avatarAndName a {
display: flex;
align-items: center;
}
.following .avatarAndName a .avatar {
width: 32px;
height: 32px;
}
.following .avatarAndName p {
margin: 0;
}
.following p {
margin-bottom: 6px;
}
.following p a {
color: #121212;
}
.following .followers__data {
font-size: 14px;
}
.following .followers__number {
font-size: 14px;
margin-left: 10px;
}
.following .following__data {
margin-right: 20px;
width: 260px;
}
.countdown .following .following__data ul,
.following .following__data .countdown ul,
.following .following__data .groups__item,
.following .following__data .landing--register .separator,
.following .following__data .profile-login .group,
.following .following__data .row,
.landing--register .following .following__data .separator,
.profile-login .following .following__data .group {
margin: 0;
}
.following .following__packs {
height: 93px;
overflow: hidden;
margin: 0;
}
.following .following__packs a {
max-width: 128px;
border: 1px solid #e5e5e5;
margin: 0 6px 100%;
}
.following .following__packs a:first-child {
margin-left: 0;
}
.following .pagination {
margin: 20px 0 0;
}
@media screen and (max-width: 768px) {
.following .following__data {
margin-bottom: 20px;
margin-right: 0;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.following .following__packs {
height: auto;
}
.following .following__packs a {
margin-bottom: 0;
max-width: none;
width: 30%;
}
.following .following__packs a:nth-child(n + 4) {
display: none;
}
.following .following__packs a:nth-child(3) {
margin-right: 0;
}
}
.following .empty-search .paragraph-readable {
max-width: 400px;
}
.following .empty-search .paragraph-readable a {
color: #3b9e62;
font-weight: 600;
}
.best-authors__box-holder {
max-width: 260px;
min-width: 190px;
padding: 0 10px;
}
.best-authors__box {
background-color: #fff;
box-shadow: 0 0 9px #e5e5e5;
}
.best-authors__box__bottom {
padding: 35px 20px 20px;
position: relative;
}
.best-authors__box__bottom .countdown ul .col p,
.best-authors__box__bottom .groups__item .col p,
.best-authors__box__bottom .landing--register .separator .col p,
.best-authors__box__bottom .profile-login .group .col p,
.best-authors__box__bottom .row .col p,
.countdown .best-authors__box__bottom ul .col p,
.landing--register .best-authors__box__bottom .separator .col p,
.profile-login .best-authors__box__bottom .group .col p {
display: flex;
flex-direction: column;
}
.best-authors__box .avatar {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -25px;
top: -25px;
}
.best-authors__box .avatar img {
width: 50px;
height: 50px;
}
@media (max-width: 1344px) {
.collections-visible .following .list-options {
height: 50px;
}
}
#form_valuation {
opacity: 1;
position: fixed;
left: 0;
top: 50%;
text-align: center;
z-index: 15;
background-color: #fff;
width: 320px;
padding: 20px;
max-width: calc(100% - 30px);
transform: translateX(-100%);
transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
animation-name: npsanimation;
animation-duration: 1s;
}
@keyframes npsanimation {
0% {
transform: translateX(-100%);
}
25% {
transform: translateX(calc(-100% - 21px));
}
50% {
transform: translateX(-100%);
}
to {
transform: translateX(calc(-100% - 21px));
}
}
#form_valuation.active {
transform: translateX(0);
box-shadow: 0 0 30px rgba(34, 34, 34, 0.25);
}
#form_valuation #calification_panel a {
display: block;
}
#form_valuation .faces-survey a {
transition: transform 0.1s ease-in-out;
margin: 0 10px;
}
#form_valuation .faces-survey a:hover {
transform: translateY(-5px);
}
#form_valuation .nps-survey a {
flex: 1;
height: 24px;
line-height: 24px;
background: #fff;
background-color: #e5e5e5;
color: #424242;
border-radius: 6px;
margin: 0 1px;
font-size: 13px;
}
#form_valuation .nps-survey a:hover {
background-color: #f0f0f0;
}
#form_valuation #open_panel {
position: absolute;
border-radius: 0 6px 6px 0;
background-color: #1f408c;
top: 0;
left: 100%;
cursor: pointer;
height: 100%;
}
#form_valuation #open_panel:hover {
background-color: #142a5e;
}
#form_valuation #open_panel #button_panel {
display: flex;
align-items: center;
height: 100%;
}
#form_valuation #open_panel #button_panel i {
width: 12px;
}
#form_valuation #open_panel #button_panel i:before {
margin-left: -2px;
}
#form_valuation #trustpilotNPS a {
display: block;
}
#form_valuation textarea {
min-height: 120px;
font-size: 13px;
}
.checkbox-group {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start;
}
.checkbox-group input[type='checkbox'] {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.checkbox-group input[type='checkbox']:checked + .fake-checkbox:before {
box-shadow: inset 0 0 0 64px #44b678;
}
.checkbox-group input[type='checkbox']:checked + .fake-checkbox:after {
content: '\f121';
font-family: bobjoll;
position: absolute;
top: 0;
left: 0;
color: #fff;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}
.checkbox-group label {
cursor: pointer;
margin: 0;
}
.checkbox-group .fake-checkbox {
position: relative;
margin-right: 5px;
padding: 0;
}
.checkbox-group .fake-checkbox:before {
content: '';
border-radius: 2px;
width: 22px;
height: 22px;
display: inline-block;
box-shadow: inset 0 0 0 1px #d8d8d8;
}
.radio-group {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start;
}
.radio-group input[type='radio'] {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.radio-group input[type='radio']:checked + label.fake-radio:before {
box-shadow: inset 0 0 0 7px #44b678;
}
.radio-group label {
cursor: pointer;
margin: 0;
}
.radio-group .fake-radio {
cursor: pointer;
position: relative;
margin-right: 5px;
padding: 0;
}
.radio-group .fake-radio:before {
content: '';
border-radius: 50%;
width: 22px;
height: 22px;
display: inline-block;
box-shadow: inset 0 0 0 1px #d8d8d8;
}
.form span.error,
form span.error {
display: inline-block;
-webkit-transform: translateX(-50%) translateY(-22px);
-moz-transform: translateX(-50%) translateY(-22px);
-ms-transform: translateX(-50%) translateY(-22px);
-o-transform: translateX(-50%) translateY(-22px);
transform: translateX(-50%) translateY(-22px);
position: relative;
color: #eb644c;
font-size: 0.8em;
padding: 0 0.3em;
opacity: 0;
background: #fff;
left: 50%;
max-width: 95%;
margin-bottom: -19px;
text-align: center;
}
.form span.error input,
form span.error input {
border-color: #eb644c;
}
.unscrollable {
overflow: hidden;
}
.disabled {
opacity: 0.6;
cursor: none !important;
pointer-events: none;
}
.text-link {
color: #121212;
border-bottom: 1px solid #3b9e62;
font-weight: 600;
}
.text-link:hover {
color: #142a5e;
cursor: pointer;
}
.hidden {
display: none !important;
}
.danger,
.error {
color: #eb644c;
}
.premium {
color: #feb602;
text-transform: none;
}
.bg-medium-gray h1 {
color: #fff;
}
.google {
color: #dd4b39;
}
.facebook {
color: #1877f2;
}
.twitter {
color: #000;
}
.pinterest {
color: #cb2027;
}
.bg-facebook {
background-color: #1877f2 !important;
}
.bg-twitter {
background-color: #000 !important;
}
.bg-pinterest {
background-color: #cb2027;
}
.bg-instagram {
background-color: #c32aa3;
}
.bg-youtube {
background-color: #b00;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.fullwidth {
width: 100%;
}
.avatar,
.block {
display: block;
}
.avatar {
width: 110px;
height: 110px;
border-radius: 100%;
background-size: 100%;
}
.avatar img {
border-radius: 100%;
width: 100%;
height: auto;
}
.avatar.avatar-80 {
width: 70px;
height: 70px;
}
.avatar.avatar-60 {
width: 54px;
height: 54px;
}
.avatar.avatar-40 {
display: block;
width: 44px;
height: 44px;
border-radius: 100%;
background-size: 100%;
}
.home--anonymous #viewport {
padding-top: 54px;
}
.home--anonymous #viewport.collections-visible .header .header--search {
width: 100%;
}
.home--anonymous .header .header--search {
background: none;
box-shadow: none;
position: absolute;
width: 100%;
}
.home--anonymous .header .header--search .logo,
.home--anonymous .header .header--search .search-holder {
display: none;
}
.home--anonymous .header #collections-toggle {
margin-left: auto;
color: #fff;
box-shadow: inset 0 0 0 2px #fff;
padding: 0 5px;
background-color: #0a152f;
}
.home--anonymous .logo-positive {
display: none;
}
.home--anonymous.hero--white .header #collections-toggle {
color: #0a152f;
background: none;
box-shadow: inset 0 0 0 2px #0a152f;
}
.home--anonymous.hero--white .hero.hero--home .content .search-holder .fake-search {
background-color: #eff3f6;
}
.home--anonymous.hero--white
.hero.hero--home
.content
.search-holder
.fake-search
input:placeholder {
color: #424242;
}
.home--anonymous.hero--white
.hero.hero--home
.content
.search-holder
.fake-search
button[type='submit'] {
background-color: #52d999;
color: #fff;
}
.home--anonymous.hero--white
.search-holder
.fake-search
button.clean-search__button:after {
display: none;
}
.home--anonymous.hero--white .home__tags a {
color: #424242;
}
.home .packs-new h3 {
color: #0a152f;
}
@media screen and (max-width: 768px) {
.home section.container,
.home section.home-section > .container {
padding: 0 20px;
}
}
.home .premium-packs h3 i:before {
width: 18px;
height: 18px;
}
.home .premium-packs header a,
.home .premium-packs header a:hover {
color: #fff;
}
section.blog img {
display: block;
}
@supports (object-fit: cover) {
section.blog img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.notouch .icons small {
font-size: 10px;
}
.notouch .icons .icon--item:hover .icon-options,
.notouch .icons .icon--item:hover .overlay {
display: block;
}
.notouch .icons .icon--item:hover.locked:hover .flaticon-lock,
.notouch .icons .icon--item:hover.locked:hover .overlay .view,
.notouch .icons .icon--item:hover.personal-icon:hover .flaticon-lock,
.notouch .icons .icon--item:hover.personal-icon:hover .overlay .view {
display: none;
}
.notouch .icons .icon--item .flaticon-selection:hover {
opacity: 1;
}
.icons .icon--holder {
width: 100%;
height: 100%;
border: 1px solid #fff;
position: relative;
}
.icons .icon--item.hover .icon-options,
.icons .icon--item.hover .overlay {
display: block;
}
.icons .icon--item.hover.locked:hover .flaticon-lock,
.icons .icon--item.hover.locked:hover .overlay .view,
.icons .icon--item.hover.personal-icon:hover .flaticon-lock,
.icons .icon--item.hover.personal-icon:hover .overlay .view {
display: none;
}
.icons .icon--item .overlay .icon--item__context-menu {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.icons .icon--item .overlay .icon--item__context-menu li {
margin: 5px;
}
.icons .icon--item .overlay .icon--item__context-menu li:nth-child(2) {
margin-top: 0;
margin-bottom: 0;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.tooltip__content {
white-space: normal;
width: 230px;
text-align: left;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.tooltip__content
.content {
display: flex;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.tooltip__content
.content
i {
color: #fff;
line-height: 1.7;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.tooltip__content
.content
span {
font-size: 12px;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-container
.popover-button.active:after,
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-container
.popover-button.active
~ .tooltip__content {
display: none;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-content {
width: max-content;
top: 35px;
z-index: 4444;
pointer-events: all;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-content:after {
right: 0.2em;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-content:before {
right: 0.25em;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-content
> div {
display: flex;
flex-direction: column;
pointer-events: all;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-content
> div
button {
width: 100%;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(2).copy-png-svg-list
.popover-content
> div
span {
font-size: 12px;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.tooltip__content {
white-space: normal;
text-align: left;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.tooltip__content
.content {
display: flex;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.tooltip__content
.content
i {
color: #fff;
line-height: 1.7;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.tooltip__content
.content
span {
font-size: 12px;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-container
.popover-button.active:after,
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-container
.popover-button.active
~ .tooltip__content {
display: none;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content {
width: max-content;
top: 35px;
z-index: 4444;
pointer-events: all;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content:after {
right: 0.2em;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content:before {
right: 0.25em;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content
> div {
display: flex;
flex-direction: column;
pointer-events: all;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content
> div
span {
font-size: 12px;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content
ul
li {
margin: 0;
}
.icons
.icon--item
.overlay
.icon--item__context-menu
li:nth-child(3).download-png-svg-list
.popover-content
button {
width: 100%;
}
.icons .icon--item .overlay .icon--item__context-menu li button {
width: 34px;
height: 34px;
pointer-events: all;
}
.icons .icon--item .flaticon-selection:hover {
opacity: 1;
}
.icons .icon--item.sticker--shadow img.lazyload--done {
filter: drop-shadow(0 0 2px rgba(55, 73, 87, 0.15))
drop-shadow(0 2px 5px rgba(55, 73, 87, 0.2));
}
.search-result .icons .icon--item.whitebg {
background: #142a5e;
}
.search-result .icons .icon--item.whitebg.selected {
border-color: #fff;
}
.search-result .icons .icon--item[data-icon_type='uicon'] {
min-width: 100%;
}
.search-result .icons .icon--item[data-icon_type='uicon'] img {
width: 32px;
height: 32px;
transform: translate(-50%, -50%);
margin: unset;
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%)
contrast(85%);
}
.search-result .icons.uicons-list {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-flow: row dense;
grid-gap: 18px;
}
.icons {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start;
-webkit-align-content: start;
-moz-align-content: start;
align-content: start;
-ms-flex-line-pack: start;
width: 100%;
gap: 5px;
}
.icons.big .icon--item {
min-width: 160px;
}
.icons.big .icon--item img,
.icons.big .icon--item svg {
width: 128px;
height: 128px;
margin: -64px 0 0 -64px;
}
.icons .icon--item {
min-width: 140px;
max-width: 100%;
flex: 1;
position: relative;
}
.icons .icon--item .icon--holder:after {
content: '';
padding-bottom: 100%;
display: block;
}
.icons .icon--item img,
.icons .icon--item svg {
width: 64px;
height: 64px;
position: absolute;
top: 50%;
left: 50%;
margin: -32px 0 0 -32px;
}
.icons .icon--item .tooltip.icon--item__premium-badge {
position: absolute;
bottom: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 3;
}
.icons .icon--item .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 3;
display: none;
background-color: hsla(0, 0%, 89.8%, 0.8);
pointer-events: none;
}
.icons .icon--item .btn {
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
background-color: hsla(0, 0%, 100%, 0.7);
color: #121212;
}
.icons .icon--item .btn:hover {
background-color: #fff;
}
.icons .icon--item i {
color: #121212;
}
.icons .icon--item .icon-options {
position: absolute;
top: 52px;
right: 6px;
display: none;
z-index: 4;
}
.icons .icon--item .icon-options .btn {
border: none;
}
.icons .icon--item .icon-options .popover-content {
padding: 8px 0;
top: 35px;
}
.icons .icon--item .icon-options .popover-content li > a,
.icons .icon--item .icon-options .popover-content li > button {
font-size: 13px;
padding: 0 8px;
line-height: 28px;
display: block;
color: #0a152f;
width: 100%;
text-align: left;
}
.icons .icon--item .icon-options .popover-content li > a:hover,
.icons .icon--item .icon-options .popover-content li > button:hover {
background-color: #f0f0f0;
}
.icons .icon--item .icon-options .popover-content i {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.icons .icon--item .icon-options .popover-content hr {
margin: 8px 0;
width: 100%;
}
.icons .icon--item .icon-options.popover-left .popover-content:before {
right: 9px;
}
.icons .icon--item .icon-options.popover-left .popover-content:after {
right: 7px;
}
.icons .icon--item .icon-options.popover-right .popover-content:before {
left: 9px;
}
.icons .icon--item .icon-options.popover-right .popover-content:after {
left: 7px;
}
.icons .icon--item .view {
color: #fff;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
height: 100%;
}
.icons .icon--item .flaticon-selection,
.icons .icon--item .icon--premium {
font-size: 13px;
}
.icons .icon--item .flaticon-selection:before,
.icons .icon--item .icon--premium:before {
width: 14px;
height: 14px;
}
.icons .icon--item .flaticon-selection {
opacity: 0.5;
color: #121212;
font-weight: 700;
}
.icons .icon--item .icon-name {
margin-top: 1em;
font-size: 0.8em;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.icons .icon--item.selected .icon--holder {
background-color: #f0f0f0;
box-shadow: inset 0 0 0 1px #d8d8d8;
}
.icons .icon--item.selected .overlay .add-remove {
background-color: rgba(235, 100, 76, 0.7);
color: #fff;
}
.icons .icon--item.selected .overlay .add-remove:hover {
background-color: #eb644c;
}
.icons .icon--item.error {
border: 2px dashed #eb644c;
color: #eb644c;
}
.icons .icon--item.uploaded .overlay .add-remove {
background-color: rgba(235, 100, 76, 0.8);
color: #fff;
height: 100%;
}
.icons .icon--item.uploaded.remove {
-webkit-animation: removeIcon 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
-moz-animation: removeIcon 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation: removeIcon 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.icons .icon--item.uploaded .icon-name {
position: absolute;
left: 0;
bottom: -2em;
width: 100%;
}
.icons .icon--item.icon-fill {
height: 0;
}
.icons .icon--item .add-more {
padding: 1em;
}
.icons .icon--item .add-more button {
width: 6em;
height: 6em;
border-radius: 100%;
position: relative;
}
.icons .icon--item .add-more button span {
position: absolute;
left: 0;
width: 100%;
font-size: 0.8em;
}
.icons .icon--item .add-more button:before {
position: absolute;
top: 0.5em;
bottom: 0;
font-size: 2em;
left: 0;
width: 100%;
}
.icons .animated--icon {
display: flex;
transition: box-shadow 0.2s ease-in-out;
}
.icons .animated--icon .link-icon-detail {
display: flex;
justify-content: center;
}
.icons .animated--icon .link-icon-detail img {
padding: 7.5px;
}
.icons .animated--icon .link-icon-detail img.pd-none {
padding: 0 !important;
}
.icons .animated--icon i {
position: absolute;
color: #777;
top: 15px;
left: 15px;
transition: opacity 0.2s ease-in-out;
}
@media screen and (min-width: 992px) {
.icons .animated--icon:hover {
box-shadow:
0 1px 4px rgba(55, 73, 87, 0.1),
0 5px 10px rgba(55, 73, 87, 0.15);
z-index: 2;
}
.icons .animated--icon:hover i {
opacity: 0;
}
}
@media (min-width: 1121px) {
#viewport:not(.collections-visible) .col--icons {
max-width: calc(100% - 470px);
}
}
@media (max-width: 480px) {
.col--icons {
padding: 0;
}
.icons .icon--item {
min-width: 33.33%;
}
}
@media (max-width: 360px) {
.icons .icon--item img {
width: 54px;
height: 54px;
margin: -27px 0 0 -27px;
}
}
@keyframes removeIcon {
0% {
transform: scale(1);
}
20% {
transform: scale(1.1);
}
to {
transform: scale(0);
}
}
@keyframes iconUp {
0% {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.circle-spinner:not(:required) {
animation: spinner 0.8s linear infinite;
border: 2px solid #121212;
border-right-color: transparent;
border-radius: 100%;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 18px;
height: 18px;
vertical-align: middle;
margin: 20px 10px 40px;
}
.loader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #142a5e;
background: rgba(10, 21, 47, 0.9);
z-index: 300;
}
.loader .circle-spinner:not(:required) {
border-color: #fff transparent #fff #fff;
width: 120px;
height: 120px;
border-width: 4px;
position: fixed;
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
}
.loader svg {
width: 54px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fi-modal label {
cursor: pointer;
margin-bottom: 0;
}
.fi-modal label img {
border-radius: 150px;
display: block;
max-width: 300px;
}
.fi-modal .modal-body:after {
clear: both;
content: '';
display: table;
}
.fi-modal .modal-state {
display: none;
}
.fi-modal .modal-trigger {
padding: 0.8em 1em;
}
.fi-modal .modal-fade-screen {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.85);
padding-top: 0.6em;
text-align: left;
z-index: 302;
display: none;
}
@media (min-width: 53.75em) {
.fi-modal .modal-fade-screen {
padding-top: 10em;
}
}
.fi-modal .modal-fade-screen .modal-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.fi-modal .modal-close {
position: absolute;
top: 1.5em;
right: 1.5em;
height: 1.5em;
width: 1.5em;
background: #fff;
cursor: pointer;
}
.fi-modal .modal-close:after,
.fi-modal .modal-close:before {
position: absolute;
top: 3px;
right: 3px;
bottom: 0;
left: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
height: 1.5em;
width: 0.15em;
background: #c8c8c8;
content: '';
display: block;
margin: -3px 0 0 -1px;
}
.fi-modal .modal-close:hover:after,
.fi-modal .modal-close:hover:before {
background: #b1b1b1;
}
.fi-modal .modal-close:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.fi-modal .modal-inner {
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
background: #fff;
border-radius: 6px;
margin: auto;
max-height: 95%;
overflow-x: hidden;
overflow-y: auto;
padding: 1.5em;
position: relative;
width: 95%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
.fi-modal .modal-inner img {
max-width: 100%;
height: auto;
}
@media (min-width: 40em) {
.fi-modal .modal-inner {
max-height: 90%;
padding: 3em;
width: 60%;
}
.fi-modal .modal-inner-big {
width: 70%;
}
}
@media (min-width: 53.75em) {
.fi-modal .modal-inner {
width: 50%;
}
.fi-modal .modal-inner-big {
width: 60%;
}
}
@media (min-width: 40em) {
.fi-modal .modal-inner .modal-content {
-webkit-columns: 2 8em;
-moz-columns: 2 8em;
columns: 8em 2;
}
}
.fi-modal .modal-inner a.cta {
color: #fff;
display: inline-block;
margin-right: 0.5em;
margin-top: 1em;
}
.fi-modal .modal-inner a.cta:last-child {
padding: 0 2em;
}
.fi-modal .modal-state:checked + .modal-fade-screen {
display: block;
}
.fi-modal .modal-state:checked + .modal-fade-screen .modal-inner {
top: 0.5em;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.modal-open {
overflow: hidden;
}
.pack-view aside {
width: 470px;
position: relative;
z-index: 2;
}
.pack-view aside .sidebar-holder {
position: sticky;
top: 110px;
max-width: 470px;
}
.pack-view aside h1 {
font-size: 18px;
}
.pack-view aside .pinterest--button i {
color: #cb2027 !important;
}
.pack-view aside .modal-download-detail {
padding: 0 20px 5px;
}
.pack-view aside #pack-lincense .attr-required {
color: #424242;
}
.pack-view aside .sidebar-holder .not-pattern > div {
display: flex;
}
.pack-view aside .sidebar-holder .not-pattern > div > div:first-child {
flex-grow: 1;
}
.pack-view aside .sidebar-holder .not-pattern .bj-button {
padding: 0 20px;
}
.pack-view aside .sidebar__formats {
margin-top: 10px;
border-top: 1px solid #e5e5e5;
}
.pack-view aside .sidebar__formats p :first-child {
color: #424242;
font-weight: 600;
}
.pack-view aside .sidebar__author {
padding: 10px 0;
border-top: 1px solid #e5e5e5;
}
.pack-view aside .share {
margin-left: 0;
}
.pack-view aside .btn-square {
width: 44px;
height: 44px;
padding: 0;
}
.pack-view aside .a-wrapper {
overflow: hidden;
}
.pack-view .style-link {
border-top: 1px solid #e5e5e5;
}
.pack-view .style-link a.link--normal,
.pack-view .style-link span.mg-right-lv1 {
font-size: 13px;
}
.pack-view .search-result {
min-height: 400px;
}
.pack-view .sidebar__download__buttons .bj-button--primary span.desktop {
display: block;
line-height: 1.2;
}
@media (max-width: 380px) {
.pack-view .sidebar__download__buttons .bj-button--primary span.desktop {
display: none;
}
}
.pack-view .sidebar__download__buttons .bj-button--primary span.mobile {
display: none;
}
@media (max-width: 380px) {
.pack-view .sidebar__download__buttons .bj-button--primary span.mobile {
display: block;
}
}
@media (max-width: 1120px) {
.pack-view .search-result {
min-height: 0;
}
.pack-view aside {
width: 100%;
border-top: 1px solid #e5e5e5;
border-left: none;
z-index: 11;
padding-bottom: 85px;
}
.pack-view aside .sidebar-holder {
position: relative;
max-width: unset;
top: unset;
padding: 10px 0 20px;
}
.pack-view aside .modal-download-detail {
padding: 0 0 5px;
bottom: 0;
}
.pack-view aside .sidebar__author {
border: none;
}
.pack-view aside.footer-visible .sidebar__download__buttons {
position: absolute;
bottom: -45px;
padding: 10px 55px 10px 0;
}
.pack-view aside.footer-visible .share {
position: absolute;
bottom: -35px;
right: 0;
}
.pack-view .sidebar__download {
width: 100%;
}
.pack-view .sidebar__download > div {
padding: 0 !important;
}
.pack-view .sidebar__download__buttons {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #fff;
border-top: 1px solid #e5e5e5;
padding: 10px 74px 10px 20px;
z-index: 4;
}
.pack-view .sidebar__download__buttons .btn-upgrade {
height: 44px !important;
line-height: 44px !important;
padding: 0 1em !important;
}
.pack-view .sidebar__download__buttons .btn-upgrade .desktop-copy {
display: none;
}
.pack-view .sidebar__download__buttons .btn-upgrade .mobile-copy {
display: block;
font-size: 16px;
}
.pack-view .sidebar__download__buttons .col {
margin-bottom: 0;
max-width: 400px;
}
.pack-view .sidebar__download__buttons .tooltip__content {
top: auto;
bottom: 100%;
padding: 0 0 0.75em;
width: 100%;
}
.pack-view .sidebar-holder.bottom {
padding-bottom: 80px;
}
.pack-view .sidebar-holder.bottom .popover-share {
display: none;
}
.pack-view .sidebar-holder.bottom .sidebar__download__buttons {
position: absolute;
padding: 20px;
}
.pack-view .sidebar-holder .not-pattern > div {
display: flex;
}
.pack-view .sidebar__license-formats {
padding: 0 0 6px;
min-height: 140px;
border-bottom: 1px solid #e5e5e5;
}
.pack-view .patterns--button,
.pack-view .pinterest--button {
display: none;
}
.pack-view .popover-share {
position: fixed;
right: 20px;
bottom: 10px;
z-index: 4;
}
.pack-view .style-link {
font-size: 14px;
text-align: center;
}
.pack-view .popover-share .popover-content {
top: auto;
bottom: 100%;
margin-bottom: 10px;
}
.pack-view .popover-share .popover-content:before {
border-top: 10px solid #000;
border-bottom: none;
top: auto;
bottom: -0.45em;
}
.pack-view .popover-share .popover-content:after {
border-top: 12px solid #fff;
border-bottom: none;
top: auto;
bottom: -0.45em;
}
}
@media (max-width: 680px) {
.countdown .pack-view aside > ul > div,
.landing--register .pack-view aside > .separator > div,
.pack-view .countdown aside > ul > div,
.pack-view .landing--register aside > .separator > div,
.pack-view .profile-login aside > .group > div,
.pack-view aside > .groups__item > div,
.pack-view aside > .row > div,
.profile-login .pack-view aside > .group > div {
width: 100%;
border-left: none;
margin: 0 !important;
}
.pack-view aside .sidebar__license-formats {
padding: 0;
min-height: 0;
}
}
@media (max-width: 1440px) {
.collections-visible .pack-view .search-result {
min-height: 0;
}
.collections-visible .pack-view aside {
width: 100%;
border-top: 1px solid #e5e5e5;
}
.collections-visible .pack-view aside .sidebar-holder {
max-width: unset;
}
.collections-visible .pack-view .sidebar__download {
width: 50%;
padding-right: 20px;
}
.collections-visible .pack-view .sidebar__license-formats {
width: 50%;
border-left: 1px solid #e5e5e5;
min-height: 140px;
padding: 6px 0 6px 20px;
}
.collections-visible .pack-view .sidebar__author {
width: 50%;
margin-top: -32px;
padding-right: 20px;
}
.collections-visible .pack-view .style-link {
font-size: 14px;
text-align: center;
}
.collections-visible .pack-view__premium .sidebar__author {
margin-top: 0;
}
}
@media (max-width: 1120px) {
.collections-visible .pack-view aside {
padding-bottom: 85px;
}
.collections-visible .pack-view aside.footer-visible .sidebar__download__buttons {
position: absolute;
width: 100%;
}
.collections-visible .pack-view aside.footer-visible .share {
position: absolute;
}
.collections-visible .pack-view .sidebar__download__buttons {
width: calc(100% - 320px);
}
}
@media (min-width: 1120px) {
#viewport:not(.collections-visible) .pack-view .sidebar-holder.fixed {
position: fixed;
top: 64px;
right: 0;
width: 470px;
}
#viewport:not(.collections-visible) .pack-view .sidebar-holder.fixed-bottom {
position: absolute;
bottom: 0;
right: 0;
width: 470px;
}
}
@media (min-width: 1441px) {
#viewport.collections-visible .pack-view .sidebar-holder.fixed {
position: fixed;
top: 106px;
right: 320px;
width: 470px;
}
#viewport.collections-visible .pack-view .sidebar-holder.fixed-bottom {
position: absolute;
bottom: 0;
right: 0;
width: 470px;
}
}
.popover {
display: inline-block;
}
.popover .popover-container {
position: relative;
display: inline-block;
}
.popover .popover-content {
position: absolute;
z-index: 1;
top: 50px;
right: 0;
display: none;
overflow: visible;
width: 228px;
margin: 0;
padding: 8px;
border: 1px solid #e5e5e5;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 60px rgba(14, 42, 71, 0.25);
animation: popover 0.2s ease-in-out;
}
.popover .popover-content:before {
border-right: 10px solid transparent;
border-bottom: 10px solid #999;
border-left: 10px solid transparent;
right: 0.97em;
}
.popover .popover-content:after,
.popover .popover-content:before {
font-size: 1.4em;
display: block;
width: 0;
height: 0;
content: '';
pointer-events: none;
position: absolute;
top: -0.45em;
}
.popover .popover-content:after {
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
border-left: 12px solid transparent;
right: 0.9em;
}
.popover .show-menu {
display: block;
}
.popover-top .popover-content {
top: auto;
bottom: 50px;
}
.popover-top .popover-content:before {
border-top: 10px solid #000;
border-bottom: none;
position: absolute;
top: 1em;
right: -0.45em;
}
.popover-top .popover-content:after {
border-top: 12px solid #fff;
border-bottom: none;
position: absolute;
top: 0.9em;
right: -0.45em;
}
.popover-right .popover-content {
right: auto;
left: 0;
}
.popover-right .popover-content:before {
position: absolute;
left: 0.95em;
}
.popover-right .popover-content:after {
position: absolute;
left: 0.85em;
}
.popover-hover .popover-button:hover ~ .popover-content {
display: block;
}
@keyframes popover {
0% {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.icons-search-result {
visibility: hidden;
}
.search-result {
position: relative;
margin-bottom: 20px;
margin-top: 20px;
}
.search-result .personal-icon {
border: 2px dashed #e5e5e5;
pointer-events: none;
}
.search-result .personal-icon:hover .overlay {
display: none;
}
.search-result .stickers-404 {
width: 100%;
}
.search-result .stickers-404 h6 {
flex: 1;
}
@media screen and (max-width: 480px) {
.search-result .stickers-404 {
flex-wrap: wrap;
}
.search-result .stickers-404 h6 {
width: 100%;
flex: unset;
}
.search-result .stickers-404 > a {
margin-left: 10px;
}
}
.search-view__top-stickers-searches > .container {
max-width: unset;
}
.icons-search-empty-result {
visibility: hidden;
}
#didyoumean {
margin-top: 6em;
}
.search-data + #didyoumean {
margin-top: 12px;
}
.search-pack-result-icons,
.search-pack-result-text {
margin: 1em;
text-align: center;
display: block;
}
.search-pack-result {
position: relative;
height: 206px;
overflow: hidden;
}
@media (max-width: 1024px) {
.search-pack-result {
margin-top: 0;
}
}
.search-pack-result:empty {
display: none;
}
.search-pack-result:not(.similar-packs) .box a {
overflow: hidden;
}
.search-pack-result:not(.similar-packs) .box a footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: none;
}
.search-pack-result:not(.similar-packs) .box:hover a footer {
display: block;
}
.search-pack-result.similar-packs {
height: auto;
overflow: hidden;
background-color: #f7f7f7;
border-top: 1px solid #e5e5e5;
padding: 20px 15px;
}
.search-pack-result.similar-packs p {
margin: 0;
padding: 16px 0 5px;
}
.search-pack-result.similar-packs .box .overlay-more {
top: 10px;
left: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
@media (max-width: 768px) {
.search-pack-result.similar-packs .box .overlay-more {
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
}
.search-pack-result.similar-packs footer:after {
clear: both;
content: '';
display: table;
}
@media (max-width: 480px) {
.search-pack-result.similar-packs {
overflow-y: hidden;
}
}
.search-pack-result > p {
width: 100%;
margin: 1em 0 0;
text-align: center;
}
.search-pack-result > p a {
text-decoration: underline;
}
.search-pack-result .box-scroll {
overflow: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.search-pack-result .box {
position: relative;
max-width: 400px;
}
.search-pack-result .box .overlay-more {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 42, 94, 0.7);
color: #fff;
z-index: 2;
text-align: center;
font-size: 1.4em;
border: none;
}
.search-pack-result .box .overlay-more:hover {
background-color: rgba(20, 42, 94, 0.6);
}
.search-pack-result .box .overlay-more span {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
height: 24px;
font-size: 18px;
text-align: center;
line-height: 24px;
}
.premium-autop {
position: relative;
color: #fff;
height: 300px;
background: url(../images/bg-dark.0bdb2531120fe921a96f449a1d55be74.svg) no-repeat 50%;
background-size: cover;
}
.premium-autop:before {
position: absolute;
top: 50%;
left: 50%;
width: 450px;
height: 297px;
transform: translateY(-50%);
margin-left: -670px;
background-image: url(../images/computer.e5a68dc204005f3ecb76f91ff9549b19.svg);
background-repeat: no-repeat;
content: '';
}
.premium-autop .premium {
display: inline-flex;
align-items: baseline;
gap: 5px;
}
.premium-autop .premium i {
color: inherit;
}
.search-data {
position: relative;
margin-top: 10px;
}
.search-data--packs {
margin-top: 0;
}
.search-data #total_icon_badge,
.search-data h1 {
margin-right: 6px;
padding-right: 0;
font-size: 20px;
margin-bottom: 0;
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
color: #424242;
align-self: baseline;
}
.search-data strong {
color: #0a152f;
}
.list-header {
padding: 20px;
position: relative;
background-color: #142a5e;
color: #fff;
}
.list-header:after {
clear: both;
content: '';
display: table;
}
.list-header.collection-header {
background-color: #fff;
}
.list-header .share {
position: absolute;
top: 24px;
right: 24px;
}
.list-header .share .popover-content i:before {
vertical-align: middle;
}
.list-header .list-header-title .tooltip__content {
padding-left: 0;
}
.list-header .list-header-title h1 {
display: inline;
font-size: 26px;
line-height: 34px;
margin-right: 10px;
padding-right: 0;
color: #0a152f;
}
@media (max-width: 480px) {
.list-header .list-header-title h1 {
margin-right: 5px;
}
}
.list-header .list-header-title h1 i {
font-size: 20px;
}
.list-header .list-header-title h1 i:before {
width: 26px;
height: 26px;
}
.list-header .list-header-title h2 {
margin: 0 6px 0 0;
display: inline-block;
font-size: 22px;
line-height: unset;
}
.list-header .list-header-title h2 .badge {
color: #777;
background-color: unset;
font-weight: 400;
}
.list-header .list-header-title .flaticon-premium {
display: flex;
margin-right: 5px;
}
.list-header .list-header-title .flaticon-premium:before {
width: 20px;
height: 20px;
}
@media (max-width: 480px) {
.list-header .list-header-title .flaticon-premium:before {
width: 18px;
height: 18px;
}
}
.list-header .list-header-title__box {
display: flex;
align-items: center;
}
.list-header .list-header-title__box .badge_type {
margin-right: 12px;
font-size: 26px;
text-transform: capitalize;
}
@media (max-width: 480px) {
.list-header .list-header-title__box .badge_type {
font-size: 1.4em;
}
}
.list-header .list-header-title .btn-like {
height: 26px;
width: 26px;
margin-bottom: 12px;
padding: 0;
background: #fff;
position: relative;
display: inline-block;
}
.list-header .fetch-collection-wrapper {
margin-top: 2em;
float: right;
}
.list-header h1 {
margin: 0;
}
.list-header h1 b {
color: #3b9e62;
}
.list-header h1 .badge {
font-size: 0.5em;
}
.list-header .formats {
clear: both;
float: left;
margin-top: 0.5em;
}
.list-header .back {
position: absolute;
right: 2em;
bottom: 2em;
}
.list-header .tagline {
clear: both;
margin-top: 24px;
}
.list-header .author {
position: relative;
clear: both;
float: left;
}
.list-header .author:after {
clear: both;
content: '';
display: table;
}
.list-header .author .image-profile {
margin-right: 10px;
}
.list-header .author .text-profile p {
margin: 0;
display: inline;
color: #424242;
}
.list-header .author .text-profile b {
color: #424242;
}
.list-header .author .text-profile a {
color: #286d34;
}
.list-header .author .text-profile.license {
font-size: 0.9em;
}
.list-header.top-icons-header {
background-color: #eb644c;
color: #fff;
}
.list-header.top-icons-header h1 {
color: #fff;
}
.list-header.latest-icons-header {
background-color: #336aea;
color: #fff;
}
.list-header.latest-icons-header h1 {
color: #fff;
}
@media (max-width: 1024px) {
.list-header .list-header--wrapper .list-header-title {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.list-header h1,
.list-header h2 {
font-size: 1.6;
text-align: center;
float: none;
padding-right: 0;
}
.list-header .formats {
float: none;
text-align: center;
}
.list-header .share {
margin: 0;
}
.list-header .share li {
float: none;
display: inline-block;
}
.list-header .share li a {
font-size: 0.8em;
line-height: 2.3em;
}
.list-header .share:before {
position: relative;
left: -5px;
top: 3px;
}
.list-header .tagline {
text-align: center;
margin-top: 1em;
}
.list-header .author .avatar {
display: inline-block;
vertical-align: middle;
position: relative;
}
.list-header .author p {
padding: 0;
font-size: 0.9em;
}
.list-header.author-header .author .author-info {
padding: 0;
}
.list-header.author-header .author .author-info ul.author-links {
text-align: center;
}
.list-header.author-header .author .author-info ul.author-links li {
float: none;
display: inline-block;
margin-left: -4px;
}
.list-header.pack-header .author {
padding-right: 0;
}
.list-header.pack-header .back {
right: 50%;
transform: translateX(50%);
bottom: 1em;
}
}
@media screen and (max-width: 640px) {
.list-header.collection-header {
padding-bottom: 2em;
}
.list-header .author,
.list-header .fetch-collection-wrapper {
float: none;
}
}
@media screen and (max-width: 480px) {
.list-header {
padding: 1em;
}
.list-header .list-header-title h1,
.list-header .list-header-title h2 {
font-size: 1.4em;
}
.list-header .formats,
.list-header .tagline {
font-size: 0.9em;
}
}
.list-options {
position: relative;
width: 100%;
height: 50px;
padding: 0 10px;
background-color: #f0f0f0;
}
.list-options:after {
clear: both;
content: '';
display: table;
}
.list-options.in-search {
display: none;
}
.list-options .btn-share {
line-height: 0;
}
.list-options .tooltip.hidden {
display: flex !important;
}
.list-options .tooltip.hidden:hover .tooltip__content,
.list-options .tooltip.hidden:hover .tooltip__trigger:after {
display: none;
}
.list-options .tooltip__content .content {
padding: 12px;
}
.list-options > form {
display: block;
float: left;
}
.list-options > form .popover-button,
.list-options > form > :not(.popover) {
line-height: 36px;
}
.list-options > form > * {
float: left;
height: 36px;
}
.list-options #popover-equivalents {
right: auto;
left: 0;
z-index: 3;
}
.list-options #popover-equivalents:before {
left: 10px;
}
.list-options #popover-equivalents:after {
left: 8px;
}
.list-options #popover-equivalents a {
color: #0a152f;
}
.list-options .premium-advise {
position: absolute;
left: 1em;
font-size: 0.8em;
width: 240px;
margin-top: 2.5em;
line-height: 1.2em;
color: #fff;
background: #0a152f;
padding: 0.5em 1.5em 0.5em 0.5em;
border-radius: 6px;
text-align: center;
z-index: 3;
}
.list-options .premium-advise:before {
content: '';
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
position: absolute;
top: -6px;
left: 0.5em;
}
.list-options .premium-advise button {
color: #fff;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0.5em;
height: 100%;
}
.list-options .color-selector-wrapper {
display: none;
height: 36px;
margin-right: 2em;
font-size: 0;
line-height: 36px;
}
.list-options .color-selector-wrapper:after {
clear: both;
content: '';
display: table;
}
.list-options .color-selector-wrapper .color-selector {
-webkit-transition:
opacity 0.1s linear,
-webkit-transform 0.1s linear;
-moz-transition:
opacity 0.1s linear,
-moz-transform 0.1s linear;
transition:
opacity 0.1s linear,
transform 0.1s linear;
position: relative;
display: inline-block;
width: 24px;
height: 24px;
margin: 0 6px 0 0;
padding: 2px;
border-radius: 25px;
vertical-align: middle;
cursor: pointer;
}
.list-options .color-selector-wrapper .color-selector:before {
position: absolute;
top: 0;
left: 0;
height: 10px;
width: 10px;
-webkit-transition: 0.25s linear;
-moz-transition: 0.25s linear;
transition: 0.25s linear;
opacity: 0;
display: block;
margin: 7px;
border-radius: 50%;
background-color: #fff;
content: '';
}
.list-options .color-selector-wrapper .color-selector.active:before {
opacity: 1;
}
.list-options .color-selector-wrapper .color-selector:hover:before {
opacity: 0.6;
}
.list-options .color-selector-wrapper .color-selector[data-type='multicolor'] {
background-image: url(../images/6efbf737bf7123a43ef3a4c3d4419c24.png);
background-size: cover;
}
.list-options .color-selector-wrapper .color-selector[data-type='monocolor'] {
background-color: #000;
}
@media (min-width: 1024px) {
.list-options .color-selector-wrapper {
display: inline-block;
}
}
.list-options .label-switch {
margin: 0;
vertical-align: sub;
}
.list-options .infinite_scroll,
.list-options .label-switch[for='selection'] {
margin-right: 1em;
}
.list-options .popover-color {
margin-right: 2em;
}
.list-options .popover-filter .color_filter {
display: none;
}
@media (max-width: 1024px) {
.list-options .popover-filter .color_filter {
display: block;
}
}
@media (max-width: 1024px) {
.list-options {
font-size: 0.9em;
}
.list-options .label-switch {
vertical-align: bottom;
}
.list-options .label-switch[for='selection'] {
margin-right: 1em;
}
}
@media (max-width: 480px) {
.list-options .infinite_scroll {
margin-right: 0;
}
.list-options .page-counter {
display: none;
}
.list-options .search_in_pack_wrapper {
margin: 0;
}
.list-options .search_in_pack_wrapper span.input-group input {
width: 180px;
}
}
@media (max-height: 800px) {
.list-options.in-search .tooltip__content,
.list-options.in-search .tooltip__trigger:after {
visibility: hidden;
}
}
.grid_selector .radio-group {
display: inline-block;
margin: 0;
padding: 0;
}
.grid_selector .radio-group label {
text-align: center;
display: block;
color: #e5e5e5;
}
.grid_selector .radio-group label i {
width: 26px;
height: 26px;
line-height: 26px;
}
.grid_selector .radio-group input {
display: none;
}
.grid_selector .radio-group input:checked ~ label {
border-radius: 6px;
background-color: #e5e5e5;
color: #424242;
}
.popover-equivalents .popover-button {
color: #777;
}
.popover-equivalents > span {
display: none;
}
.user-bar {
background-color: #e5e5e5;
padding: 0.5em;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.user-bar .wrapper {
margin: 0 auto;
position: relative;
}
.user-bar .wrapper:after {
clear: both;
content: '';
display: table;
}
.user-bar .badges {
vertical-align: middle;
}
.user-bar .badges li {
margin: 0 0.2em;
}
.user-bar .badges li img {
max-width: 38px;
max-height: 38px;
vertical-align: middle;
}
.user-bar .btn-follow {
position: absolute;
right: 0;
top: 0;
width: 180px;
}
.user-bar .btn-follow.active span:nth-child(2) {
display: none;
}
.user-bar .btn-follow.active:hover {
background-color: #eb644c;
border-color: #d3482b;
color: #fff;
}
.user-bar .btn-follow.active:hover span:first-child {
display: none;
}
.user-bar .btn-follow.active:hover span:nth-child(2) {
display: block;
}
@media (max-width: 1024px) {
.user-bar .btn-follow {
position: relative;
right: auto;
margin-top: 1em;
clear: both;
}
}
@media (max-width: 480px) {
.user-bar .btn-follow {
width: 100%;
}
}
.loader-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: hsla(0, 0%, 100%, 0.7);
z-index: 2;
display: none;
}
@media (min-width: 1024px) {
#viewport:not(.collections-visible) .list-options .fake-popover {
margin: 0;
}
#viewport:not(.collections-visible) .list-options .fake-popover .popover-container {
height: 50px;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-button {
display: none;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content {
animation: none;
position: relative;
top: 0;
right: 0;
display: block;
width: auto;
padding: 0;
border: none;
background: none;
box-shadow: none;
text-align: center;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content:after,
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content:before {
display: none;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group {
display: inline-block;
font-size: 1em;
padding-left: 0;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
label {
display: block;
margin: 0;
padding: 0 0.5em;
line-height: 50px;
position: relative;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
label:hover {
color: #1d3d88;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
.fake-radio {
display: none;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
input[type='radio']:checked
+ label
+ label:before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #0a152f;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover
.popover-container
> * {
height: 50px;
}
#viewport:not(.collections-visible)
.list-options
.fake-popover.popover-equivalents
> span {
display: inline-block;
}
}
@media (max-width: 1344px) {
.collections-visible .list-header .list-header-title {
float: none;
padding-right: 0;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.collections-visible .list-header .formats {
float: none;
text-align: center;
}
.collections-visible .list-header .tagline {
text-align: center;
margin-top: 1em;
}
.collections-visible .list-header .download-pack {
float: none;
margin-top: 1em;
}
.collections-visible .list-header.author-header .author .author-info {
padding: 0;
}
.collections-visible .list-header.author-header .author .author-info ul.author-links {
text-align: center;
}
.collections-visible
.list-header.author-header
.author
.author-info
ul.author-links
li {
float: none;
display: inline-block;
margin-left: -4px;
}
.collections-visible .list-header.pack-header .author {
padding-right: 0;
}
.collections-visible .list-header.pack-header .back {
right: 50%;
transform: translateX(50%);
bottom: 1em;
}
}
@media (max-width: 800px) {
.collections-visible .list-header {
padding: 1em;
}
.collections-visible .list-header h1,
.collections-visible .list-header h2 {
font-size: 1.2em;
}
.collections-visible .list-header .author {
margin-top: 1em;
}
}
@media (max-width: 1344px) {
.collections-visible .list-options {
font-size: 0.9em;
padding: 0 1em;
height: auto;
}
.collections-visible .list-options .label-switch {
margin-right: 1em;
vertical-align: bottom;
}
}
@media (min-width: 1360px) {
.collections-visible .list-options .fake-popover {
margin: 0;
}
.collections-visible .list-options .fake-popover .popover-container {
height: 50px;
}
.collections-visible .list-options .fake-popover .popover-container .popover-button {
display: none;
}
.collections-visible .list-options .fake-popover .popover-container .popover-content {
animation: none;
position: relative;
top: 0;
right: 0;
display: block;
width: auto;
padding: 0;
border: none;
background: none;
box-shadow: none;
text-align: center;
}
.collections-visible
.list-options
.fake-popover
.popover-container
.popover-content:after,
.collections-visible
.list-options
.fake-popover
.popover-container
.popover-content:before {
display: none;
}
.collections-visible
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group {
display: inline-block;
font-size: 1em;
padding-left: 0;
}
.collections-visible
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
label {
display: block;
margin: 0;
padding: 0 0.5em;
line-height: 50px;
position: relative;
}
.collections-visible
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
.fake-radio {
display: none;
}
.collections-visible
.list-options
.fake-popover
.popover-container
.popover-content
.radio-group
input[type='radio']:checked
+ label
+ label:before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #142a5e;
}
.collections-visible .list-options .fake-popover .popover-container > * {
height: 50px;
}
.collections-visible .list-options .fake-popover.popover-equivalents > span {
display: inline-block;
}
}
@media (max-width: 1344px) {
.collections-visible .related-search,
.collections-visible .search-data ul.tags li {
display: none;
}
.collections-visible .search-data ul.tags li.delete-all {
display: inline-block;
}
}
.slider .slider__nav {
text-align: center;
}
.slider .slider__nav li {
max-width: 25%;
padding: 12px;
}
.slider .slider__nav a {
padding: 12px;
background-color: #fff;
color: #121212;
}
.slider .slider__nav a.active,
.slider .slider__nav a:hover {
box-shadow: 0 0 20px rgba(95, 125, 149, 0.3);
color: #121212;
}
.slider .slider__nav p {
margin: 0;
}
.slider .slider__items {
position: relative;
}
.slider .slider__items li {
display: none;
padding: 24px 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.slider .slider__items li.active {
display: block;
}
.slider .laptop {
min-height: 0;
}
.tooltip {
position: relative;
}
.tooltip:hover .tooltip__trigger--always:after,
.tooltip:hover .tooltip__trigger--always ~ .tooltip__content,
.tooltip:hover .tooltip__trigger--disabled[disabled]:after,
.tooltip:hover .tooltip__trigger--disabled[disabled] ~ .tooltip__content,
.tooltip:hover .tooltip__trigger--enabled:not(disabled):after,
.tooltip:hover .tooltip__trigger--enabled:not(disabled) ~ .tooltip__content {
display: block;
}
.tooltip:hover
.tooltip__trigger--always
~ .tooltip__content:not(.tooltip__content--permanent):hover,
.tooltip:hover
.tooltip__trigger--disabled[disabled]
~ .tooltip__content:not(.tooltip__content--permanent):hover,
.tooltip:hover
.tooltip__trigger--enabled:not(disabled)
~ .tooltip__content:not(.tooltip__content--permanent):hover {
display: none;
}
.tooltip__content {
position: absolute;
display: none;
color: #fff;
font-size: 12px;
text-align: center;
white-space: nowrap;
z-index: 333;
}
.tooltip__content .content {
padding: 6px 12px;
border-radius: 6px;
background-color: #121212;
box-shadow: 0 2px 60px rgba(18, 18, 18, 0.2);
}
.tooltip__content .content p {
margin-bottom: 4px;
}
.tooltip__trigger {
position: relative;
}
.tooltip__trigger:after {
display: none;
content: '';
z-index: 323;
}
.tooltip--box .tooltip__content {
width: 300px;
color: #121212;
white-space: inherit;
}
.tooltip--box .tooltip__content .content {
background-color: #fff;
}
.tooltip--box.tooltip--top-left .tooltip__trigger:after,
.tooltip--box.tooltip--top-right .tooltip__trigger:after,
.tooltip--box.tooltip--top .tooltip__trigger:after {
border-top-color: #fff;
}
.tooltip--box.tooltip--bottom-left .tooltip__trigger:after,
.tooltip--box.tooltip--bottom-right .tooltip__trigger:after,
.tooltip--box.tooltip--bottom .tooltip__trigger:after {
border-bottom-color: #fff;
}
.tooltip--left .tooltip__content,
.tooltip--right .tooltip__content {
top: 50%;
transform: translateY(-50%);
}
.tooltip--left .tooltip__content {
right: 100%;
padding-right: 10px;
}
.tooltip--left .tooltip__trigger:after {
position: absolute;
top: 50%;
right: 100%;
height: 0;
width: 0;
border-bottom: 6px solid transparent;
border-left: 6px solid #121212;
border-top: 6px solid transparent;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 4px 0 0;
}
.tooltip--right .tooltip__content {
left: 100%;
padding-left: 10px;
}
.tooltip--right .tooltip__trigger:after {
position: absolute;
top: 50%;
left: 100%;
height: 0;
width: 0;
border-bottom: 6px solid transparent;
border-right: 6px solid #121212;
border-top: 6px solid transparent;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 0 0 4px;
}
.tooltip--top-left .tooltip__content,
.tooltip--top-right .tooltip__content,
.tooltip--top .tooltip__content {
bottom: 100%;
padding: 0 0 10px;
}
.tooltip--top-left .tooltip__trigger:after,
.tooltip--top-right .tooltip__trigger:after,
.tooltip--top .tooltip__trigger:after {
position: absolute;
bottom: 100%;
left: 50%;
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #121212;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
margin: 0 0 6px;
}
.tooltip--top .tooltip__content {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
.tooltip--top-left .tooltip__content {
left: 0;
}
.tooltip--top-right .tooltip__content {
right: 0;
}
.tooltip--bottom-left .tooltip__content,
.tooltip--bottom-right .tooltip__content,
.tooltip--bottom .tooltip__content {
top: 100%;
padding: 10px 0 0;
}
.tooltip--bottom-left .tooltip__trigger:after,
.tooltip--bottom-right .tooltip__trigger:after,
.tooltip--bottom .tooltip__trigger:after {
position: absolute;
top: 100%;
left: 50%;
height: 0;
width: 0;
border-bottom: 6px solid #121212;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
margin: 6px 0 0;
}
.tooltip--bottom .tooltip__content {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
.tooltip--bottom-left .tooltip__content {
left: 0;
}
.tooltip--bottom-right .tooltip__content {
right: 0;
}
#viewport {
width: 100%;
background-color: #fff;
min-height: 100%;
position: relative;
padding-top: 118px;
}
@media (min-width: 1024px) {
#viewport.collections-visible,
#viewport.collections-visible #header {
width: -webkit-calc(100% - 320px);
width: calc(100% - 320px);
}
}
.author-style {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-end;
padding: 45px 0 20px;
border-bottom: 1px solid #d8d8d8;
}
.author-style .author-style__info .go-back {
display: flex;
color: #b1b1b1;
}
.author-style .author-style__info .go-back i {
color: #b1b1b1;
}
.author-style .author-style__info .go-back:hover,
.author-style .author-style__info .go-back:hover i {
color: #9c9c9c;
}
.author-style .author-style__info .author-style__info__headline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.author-style .author-style__search {
width: 35%;
}
.author-style .author-style__search .search-holder .fake-search {
border-radius: 8px;
}
.author-style .author-style__search i {
color: #424242 !important;
}
@media screen and (max-width: 768px) {
.author-style {
padding: 20px 0;
flex-wrap: wrap;
}
.author-style .author-style__search {
width: 100%;
}
}
.container.sticky {
position: sticky;
top: 119px;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
}
.container.sticky + .search-data {
display: none;
}
.author__header {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
padding: 40px 0 30px;
}
@media screen and (max-width: 992px) {
.author__header {
height: inherit;
overflow: visible;
padding: 20px 0 30px;
}
}
.author__header__content .container {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-pack: justify;
-moz-box-pack: justify;
box-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
-ms-flex-pack: justify;
}
@media screen and (max-width: 992px) {
.author__header__content .container {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
}
.author__header__content .avatar-info-holder {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
margin: 0;
}
}
.author__header__content .avatar-info-holder .avatar-holder {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: start;
-moz-align-items: start;
-ms-align-items: start;
-o-align-items: start;
align-items: start;
-ms-flex-align: start;
margin-right: 40px;
z-index: 10;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .avatar-holder {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
margin: 0;
text-align: center;
}
}
.author__header__content .avatar-info-holder .avatar-holder .avatar {
width: 80px;
height: 80px;
border-radius: 100%;
box-shadow: 0 0 1px 1px #d8d8d8;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .avatar-holder .avatar {
width: 48px;
height: 48px;
margin-bottom: 10px;
}
}
.author__header__content .avatar-info-holder .avatar-holder > div a,
.author__header__content .avatar-info-holder .avatar-holder > div button {
display: block;
margin-left: 20px;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .avatar-holder > div a,
.author__header__content .avatar-info-holder .avatar-holder > div button {
margin-left: 0;
}
.author__header__content .avatar-info-holder .avatar-holder > div a button,
.author__header__content .avatar-info-holder .avatar-holder > div button button {
margin-top: unset;
}
}
.author__header__content .avatar-info-holder .avatar-holder .author-name {
font-weight: 700;
color: #424242;
}
.author__header__content .avatar-info-holder .avatar-holder .author-web {
font-size: 15px;
color: #777;
font-weight: 400;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .avatar-holder .author-web {
font-size: 14px;
}
}
.author__header__content .avatar-info-holder .info-holder {
display: flex;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .info-holder {
margin: 20px 0;
text-align: center;
}
}
.author__header__content .avatar-info-holder .info-holder-icons,
.author__header__content .avatar-info-holder .info-holder-packs,
.author__header__content .avatar-info-holder .info-holder-social {
margin: 0 15px;
}
.author__header__content .avatar-info-holder .info-holder-icons i,
.author__header__content .avatar-info-holder .info-holder-packs i,
.author__header__content .avatar-info-holder .info-holder-social i {
height: 26px;
line-height: 24px;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .info-holder-icons,
.author__header__content .avatar-info-holder .info-holder-packs,
.author__header__content .avatar-info-holder .info-holder-social {
margin: 0 10px;
}
.author__header__content .avatar-info-holder .info-holder-icons ul,
.author__header__content .avatar-info-holder .info-holder-packs ul,
.author__header__content .avatar-info-holder .info-holder-social ul {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
}
.author__header__content .avatar-info-holder .info-holder p {
margin: 0;
}
@media screen and (max-width: 992px) {
.author__header__content .avatar-info-holder .info-holder p {
font-size: 14px;
}
}
.author__header__content .avatar-info-holder .info-holder p.uppercase {
color: #424242;
font-size: 13px;
font-weight: 600;
}
.author__header__content .avatar-info-holder .info-holder a {
color: #d8d8d8;
}
.author__header__content .button-holder {
display: flex;
align-items: center;
}
.author__header__content .button-holder .popover-share {
margin-left: 10px;
margin-right: 0;
}
.author__header__content .button-holder .popover-share .bj-button.active {
background: #e5e5e5;
}
.author__header__content .button-holder .bj-button--pinterest-red {
margin-left: 5px;
}
.author__header__content .button-holder .bj-button--follow-author {
margin-right: 5px;
}
@media screen and (max-width: 992px) {
.author__header__content .button-holder .bj-button {
height: 34px;
line-height: 34px;
padding: 0 20px;
font-size: 13px;
}
.author__header__content .button-holder .bj-button.bj-button--square {
width: 34px;
min-width: 0;
padding: 0;
}
}
.author__style:first-child {
margin-top: 22px;
}
.author__style__header {
padding: 0 10px;
margin-bottom: 10px !important;
}
.author__style__header .badge {
color: #fff;
height: 36px;
line-height: 36px;
padding: 0 22px;
font-size: 14px;
}
.author__style__header p.font-h6 {
font-size: 20px;
line-height: 1.5;
}
.author__style__header p.font-h6 a {
font-weight: 700;
}
.author__style__header .col span {
display: inline-block;
font-size: 17px;
}
.author__style--list {
margin-bottom: 22px;
}
.author__style--list .box-container {
height: 244px;
overflow: hidden;
}
@media screen and (max-width: 992px) {
.author__style .box-container {
width: calc(100% + 10px);
margin-left: -5px;
}
.author__style--list .box-container {
margin-bottom: 22px;
height: auto;
}
.author__style--list .box-container .box:nth-child(n + 3) {
display: none;
}
}
.author .username {
font-weight: 600;
color: #142a5e;
display: block;
}
.author .resources {
font-size: 12px;
line-height: 1.75;
color: #777;
display: block;
}
.author a:hover .resources {
text-decoration: underline;
}
.author__header + .search-data {
display: none;
}
.tooltip--bookmarks.new .new-function-popup {
display: block;
}
.tooltip--bookmarks.new .tooltip__content,
.tooltip--bookmarks.new .tooltip__trigger:after {
display: none !important;
}
.new-function-popup {
width: 360px;
border-radius: 6px;
background: #fff url(../images/bookmark-new.d50a0c1c9073638a42346e863f86ddfc.svg)
no-repeat;
background-size: auto 100%;
box-shadow: 0 0 10px rgba(18, 18, 18, 0.2);
padding: 20px 20px 20px 140px;
position: absolute;
top: 100%;
right: -20px;
z-index: 1;
margin-top: 10px;
display: none;
}
.new-function-popup:before {
content: '';
position: absolute;
bottom: 100%;
right: 16px;
height: 0;
width: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
transform: translate(-50%);
margin: 6px 0 0;
}
.new-function-popup .button {
color: #fff;
}
.new-function-popup .button,
.new-function-popup .button:hover {
box-shadow: inset 0 0 0 100px #142a5e !important;
}
.new-function-popup a {
color: #777;
}
@media (max-width: 890px) {
.new-function-popup {
left: -20px;
}
.new-function-popup:before {
left: 28px;
border-bottom-color: #40c585;
}
}
@media (max-width: 1210px) {
.collections-visible .new-function-popup {
left: -20px;
}
.collections-visible .new-function-popup:before {
left: 28px;
border-bottom-color: #40c585;
}
}
.bookmarks {
background-color: #f7f7f7;
}
.bookmarks .following__list {
min-height: 380px;
padding-top: 20px;
}
.bookmarks .list-options .label-switch,
.bookmarks .list-options .popover-filters {
display: none;
}
.list-options .following__links {
height: 50px;
line-height: 50px !important;
float: none;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.list-options .following__links a {
padding: 0 10px;
color: #777;
}
.list-options .following__links a.active {
color: #424242;
}
#cancellation {
background-color: #f7f7f7;
min-height: 650px;
}
.cancellation {
background-color: #f7f7f7;
padding: 0 20px;
overflow: hidden;
}
.cancellation .profile-menu {
border-bottom: 1px solid #e5e5e5;
padding-top: 20px;
text-align: center;
margin-bottom: 30px;
}
.cancellation .profile-menu li {
margin: 0 20px;
}
.cancellation .profile-menu li.active {
border-bottom: 1px solid #777;
}
.cancellation .profile-menu a {
padding: 10px;
display: block;
color: #424242;
}
.cancellation .profile-menu i {
display: inline-block;
color: #424242;
margin-right: 5px;
}
.cancellation__steps {
width: 300px;
margin: 50px auto 0;
}
.cancellation__steps ul {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.cancellation__steps li {
flex: 1;
position: relative;
margin: 0;
padding: 5px;
color: #9c9c9c;
font-size: 13px;
text-align: center;
}
.cancellation__steps li.active {
color: #424242;
}
.cancellation__steps .progress {
overflow: hidden;
position: relative;
width: 100%;
height: 3px;
border-radius: 6px;
}
.cancellation__steps .progress:after,
.cancellation__steps .progress__bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.cancellation__steps .progress:after {
z-index: 1;
background-color: #d8d8d8;
content: '';
}
.cancellation__steps .progress__bar {
z-index: 2;
background-image: linear-gradient(90deg, #44b678, rgba(68, 182, 120, 0.5));
}
.cancellation__form {
max-width: 680px;
margin: 0 auto;
padding: 50px 0;
text-align: center;
position: relative;
}
.cancellation__form:after {
content: '';
display: block;
width: 203px;
height: 271px;
background: url(../images/piki-sad.3fe254fa1feddd0bd7cdf8bdc9bbe588.svg) no-repeat;
position: absolute;
bottom: 100px;
right: -150px;
}
.cancellation__form label {
display: block;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.cancellation__form:after {
display: none;
}
}
.cancellation .options {
text-align: left;
max-width: 450px;
margin: 0 auto 30px;
}
.cancellation .radio-group {
font-size: 15px;
color: #424242;
cursor: pointer;
padding-left: 30px;
margin-bottom: 20px;
}
.cancellation .radio-group:hover label.fake-radio:before {
box-shadow: inset 0 0 0 1px #b1b1b1;
}
.cancellation .radio-group label.fake-radio {
width: 22px;
margin-right: 5px;
}
.cancellation .radio-group label.fake-radio:before {
width: 22px;
height: 22px;
box-shadow: inset 0 0 0 1px #c8c8c8;
}
.cancellation .radio-group input[type='radio']:checked + label.fake-radio:before {
box-shadow: inset 0 0 0 7px #44b678;
}
.cancellation__banner {
max-width: 800px;
width: 100%;
height: 300px;
background: url(../images/e98d1733e572b56e9f86972bb66b5797.jpg) no-repeat;
background-size: cover;
margin: 0 auto 30px;
display: block;
padding: 20px;
}
@media screen and (max-width: 768px) {
.cancellation__banner {
max-width: 320px;
background: url(../images/a8d1306b317de109c4c77ad39159d9e5.jpg) no-repeat;
}
.cancellation__banner p {
font-size: 17px;
}
}
.cancellation__options__footer {
width: 1230px;
height: 525px;
background: url(../images/afba6f1c9b623d0bda2fd8aaa1c52f9e.png) no-repeat;
position: relative;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 480px) {
.cancellation__options__footer {
width: 522px;
height: 416px;
background: url(../images/f689f5a22b8dcc29c7b00ba4bf3ab1c5.png) no-repeat;
}
}
.cancellation__buttons {
margin: 0 0 50px;
}
@media screen and (max-width: 480px) {
.cancellation__buttons div {
width: 100%;
margin: 10px 0;
text-align: center;
}
.cancellation__buttons .bj-button {
min-width: 180px;
}
}
.cancellation__form__support__holder {
margin-top: 50px;
}
.cancellation__form__support input[type='email'],
.cancellation__form__support input[type='text'] {
height: 44px;
line-height: 44px;
padding: 0 10px;
}
.cancellation__form__support textarea {
padding: 10px;
height: 100px;
}
.cancellation__form__support input[type='email'],
.cancellation__form__support input[type='text'],
.cancellation__form__support textarea {
border: 1px solid #c8c8c8;
border-radius: 2px;
}
.cancellation__form__support input[type='email']:hover,
.cancellation__form__support input[type='text']:hover,
.cancellation__form__support textarea:hover {
border-color: #9c9c9c;
}
@media screen and (max-width: 480px) {
.cancellation__form__support .col {
width: 100%;
padding: 0 !important;
flex: none;
}
}
.cancellation__features {
margin-top: 50px;
}
.cancellation__features .container {
padding: 0;
max-width: 1200px;
}
@media screen and (max-width: 992px) {
.cancellation__features .feature {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 20px;
}
.cancellation__features .text-holder {
text-align: left;
flex: 1;
padding-right: 0;
}
}
.cancellation__thanks {
padding-top: 100px;
}
.cancellation .quality--img {
max-width: 1259px;
position: relative;
left: 50%;
margin-left: -630px;
display: block;
}
@media screen and (max-width: 640px) {
.cancellation .quality--img {
max-width: 522px;
margin-left: -261px;
}
}
.ghost-collection {
width: 320px;
height: 502px;
margin: 20px auto;
background: url(../images/b9c47da8b8395f29ce5c2980161b8ad1.png) no-repeat;
background-size: cover;
}
.ghost-collection img {
position: relative;
top: 200px;
animation: floating 2s ease-in-out infinite;
}
.downloads-limit {
padding: 100px 20px;
max-width: 950px;
margin: auto;
}
.downloads-limit .list--check {
text-align: left;
}
.downloads-limit .list--check li {
display: flex;
margin-bottom: 10px;
}
.downloads-limit .list--check li i {
line-height: 1.2em;
}
.downloads-limit.limit--registered {
max-width: 1100px;
}
.downloads-limit.limit--registered .limit-icon {
position: relative;
}
.downloads-limit.limit--registered .limit-icon img {
max-width: 427px;
display: block;
margin: auto;
}
.downloads-limit.limit--registered .limit-collection img {
max-width: 404px;
display: block;
margin: auto;
}
.downloads-limit.limit--registered .icon-holder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
background-color: #fff;
box-shadow: 10px 10px 20px 0 rgba(8, 25, 43, 0.1);
border-radius: 10px;
padding: 46px;
}
.downloads-limit.limit--registered .icon-holder img {
width: 100%;
height: auto;
}
.downloads-limit.limit--registered .icon-holder:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkE4QzAwIiBkPSJNMS41MjYgMTAuNzY5aDExLjIxOHYyLjYwM0gxLjUyNnoiLz48cGF0aCBmaWxsPSIjRkY4QzAwIiBkPSJNMS4zNzcgOC43MDVMNy4wMTYuMDYxbDUuNzQxIDguNjQ0eiIvPjxwYXRoIGZpbGw9IiNFREE1MDAiIGQ9Ik0xMi42NzQgMTAuMTA0bDEuMzEzLTcuNjM0TDIuODIyIDkuODAyeiIvPjxwYXRoIGZpbGw9IiNGRUM0MDAiIGQ9Ik0xLjMzNSAxMC4wNThMLjA3NSAyLjQzM2wxMC40MjggNy42MjV6Ii8+PC9nPjwvc3ZnPg==)
50% no-repeat;
background-color: #fff;
background-size: 20px;
padding: 27px;
border-radius: 8px;
position: absolute;
left: -27px;
top: -27px;
box-shadow: 5px 5px 10px 0 rgba(8, 25, 43, 0.1);
}
@media screen and (max-width: 992px) {
.downloads-limit.limit--registered .limit-icon img {
max-width: 342px;
}
.downloads-limit.limit--registered .limit-collection img {
max-width: 341px;
}
.downloads-limit.limit--registered .icon-holder {
width: 115px;
height: 115px;
padding: 20px;
}
.downloads-limit.limit--registered .icon-holder:before {
background-size: 14px;
padding: 19px;
border-radius: 5px;
left: -19px;
top: -19px;
}
.downloads-limit.limit--registered .limit__text {
text-align: center;
margin-top: 20px;
}
.downloads-limit.limit--registered ul {
max-width: 400px;
margin: auto;
}
.downloads-limit.limit--registered .button-holder {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
box-shadow: 0 0 9px 0 rgba(8, 25, 43, 0.1);
background-color: #fff;
z-index: 1;
}
.downloads-limit.limit--registered .button-holder a {
width: 100%;
margin: 0;
}
}
@media screen and (max-width: 768px) {
.downloads-limit.limit--registered {
padding: 20px;
}
.downloads-limit.limit--registered .limit__image {
display: none;
}
}
.downloads-limit.limit--guest {
max-width: 1100px;
}
.downloads-limit.limit--guest .limit-icon img {
max-width: 435px;
display: block;
margin: auto;
}
.downloads-limit.limit--guest .limit-collection img {
max-width: 404px;
display: block;
margin: auto;
}
.downloads-limit.limit--guest .icon-holder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 10px 10px 20px 0 rgba(8, 25, 43, 0.1);
border-radius: 10px;
padding: 40px;
}
.downloads-limit.limit--guest .icon-holder img {
width: 100%;
height: auto;
}
@media screen and (max-width: 992px) {
.downloads-limit.limit--guest .limit-icon img {
max-width: 342px;
}
.downloads-limit.limit--guest .limit-collection img {
max-width: 341px;
}
.downloads-limit.limit--guest .icon-holder {
width: 115px;
height: 115px;
padding: 20px;
}
.downloads-limit.limit--guest .limit__text {
text-align: center;
margin-top: 20px;
}
.downloads-limit.limit--guest ul {
max-width: 400px;
margin: auto;
}
.downloads-limit.limit--guest .button-holder {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
box-shadow: 0 0 9px 0 rgba(8, 25, 43, 0.1);
background-color: #fff;
z-index: 1;
}
.downloads-limit.limit--guest .button-holder a {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.downloads-limit.limit--guest {
padding: 20px;
}
.downloads-limit.limit--guest .limit__image {
display: none;
}
}
.downloads-limit .btn {
height: 54px;
line-height: 54px;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.downloads-limit {
padding: 50px 20px;
}
.downloads-limit .limit__image {
display: none;
}
}
.empty-search.icons-search .container {
margin: 0 auto;
}
.empty-search .container {
max-width: 974px;
margin: 80px auto;
padding: 0 60px;
}
.empty-search .list {
list-style: disc;
padding-left: 20px;
}
.empty-search .list li {
margin-bottom: 20px;
}
.empty-search .category-box {
width: 273px;
margin: auto;
display: block;
position: relative;
}
.empty-search .category-box img {
width: 100%;
display: block;
}
.empty-search .category-box p {
position: absolute;
bottom: 10px;
left: 10px;
margin: 0;
color: #fff;
font-weight: 600;
font-size: 17px;
line-height: 1.6;
}
.empty-search .categories {
column-count: 4;
}
.empty-search .categories a {
color: #777;
}
@media screen and (max-width: 768px) {
.empty-search {
margin-top: 40px;
}
.empty-search .row--categories {
margin-bottom: 50px;
}
.empty-search .hide-mobile {
display: none !important;
}
}
.empty-search .sponsor a {
color: red;
}
body[data-section='404'] .spirit-a {
height: 417px;
}
body[data-section='404'] .spirit-a:not([data-section='empty']) {
height: 291px;
}
@media screen and (max-width: 1280px) {
body[data-section='404']
.spirit-a:not([data-section='detail']):not([data-section='empty']) {
height: 533px;
}
}
@media screen and (max-height: 768px) {
body[data-section='404']
.spirit-a:not([data-section='detail']):not([data-section='empty']) {
height: 290px;
}
}
@media screen and (max-height: 768px) and (max-width: 1280px) {
body[data-section='404']
.spirit-a:not([data-section='detail']):not([data-section='empty']) {
height: 417px;
}
}
.error302 {
padding: 100px 20px;
max-width: 850px;
margin: auto;
}
.error302 .img--icon {
box-shadow: 10px 10px 20px 0 rgba(10, 21, 47, 0.1);
border-radius: 10px;
width: 180px;
height: 180px;
text-align: center;
padding: 20px;
}
.error302 .img--icon img {
position: relative;
top: 50%;
margin-top: -64px;
}
.error302 .img--pack {
max-width: 320px;
box-shadow: 0 0 0 1px #e5e5e5;
overflow: hidden;
padding: 10px;
height: 205px;
margin: auto;
}
.error302 .col__text {
width: 100%;
max-width: 400px;
margin-left: 80px;
}
#notification-cart .notification__close .error302 button i:before,
.error302 button #notification-cart .notification__close i:before,
.error302 button .icon:before,
.error302 button .notification--alert i:before,
.notification--alert .error302 button i:before {
vertical-align: middle;
}
@media screen and (max-width: 768px) {
.error302 {
padding: 40px 20px;
margin-bottom: 20px;
}
.error302 .col__img {
width: 100%;
text-align: center;
}
.error302 .img--icon {
margin: auto;
}
.error302 .col__text {
margin: 20px auto 0;
flex: none;
}
}
.home-icons {
color: #0a152f;
}
.countdown .home-icons .popular-styles ul,
.home-icons .popular-styles .countdown ul,
.home-icons .popular-styles .groups__item,
.home-icons .popular-styles .landing--register .separator,
.home-icons .popular-styles .profile-login .group,
.home-icons .popular-styles .row,
.landing--register .home-icons .popular-styles .separator,
.profile-login .home-icons .popular-styles .group {
width: calc(100% + 30px);
margin-left: -15px;
justify-content: center;
}
.countdown .home-icons .popular-styles ul > div,
.home-icons .popular-styles .countdown ul > div,
.home-icons .popular-styles .groups__item > div,
.home-icons .popular-styles .landing--register .separator > div,
.home-icons .popular-styles .profile-login .group > div,
.home-icons .popular-styles .row > div,
.landing--register .home-icons .popular-styles .separator > div,
.profile-login .home-icons .popular-styles .group > div {
padding: 0 15px;
margin-bottom: 30px;
}
.home-icons .popular-styles__item {
position: relative;
background: linear-gradient(115.78deg, #2955bb -7.64%, #b8cbf8 104.5%);
border-radius: 16px;
overflow: hidden;
height: 260px;
box-shadow:
0 2px 8px rgba(55, 73, 87, 0.1),
0 15px 30px rgba(55, 73, 87, 0.15);
transition: all 0.2s ease-in-out;
}
.home-icons .popular-styles__item p {
position: absolute;
padding: 25px 30px 20px;
color: #fff;
}
.home-icons .popular-styles__item img {
max-width: unset;
position: relative;
top: 80px;
left: 40px;
transform: rotate(-8deg);
transition: all 0.2s ease-in-out;
}
.home-icons .popular-styles__item:hover {
box-shadow:
0 2px 12px rgba(55, 73, 87, 0.1),
0 25px 50px rgba(55, 73, 87, 0.15);
transform: translateY(-2px);
}
.home-icons .popular-styles__item:hover img {
max-width: unset;
position: relative;
left: 40px;
transform: rotate(0deg);
}
.countdown
.home-icons
.popular-styles
.container
ul
> div:first-child
.popular-styles__item,
.home-icons
.popular-styles
.container
.countdown
ul
> div:first-child
.popular-styles__item,
.home-icons
.popular-styles
.container
.groups__item
> div:first-child
.popular-styles__item,
.home-icons
.popular-styles
.container
.landing--register
.separator
> div:first-child
.popular-styles__item,
.home-icons
.popular-styles
.container
.profile-login
.group
> div:first-child
.popular-styles__item,
.home-icons .popular-styles .container .row > div:first-child .popular-styles__item,
.landing--register
.home-icons
.popular-styles
.container
.separator
> div:first-child
.popular-styles__item,
.profile-login
.home-icons
.popular-styles
.container
.group
> div:first-child
.popular-styles__item {
background: linear-gradient(115.78deg, #2955bb -7.64%, #b8cbf8 104.5%);
}
.countdown
.home-icons
.popular-styles
.container
ul
> div:nth-child(2)
.popular-styles__item,
.home-icons
.popular-styles
.container
.countdown
ul
> div:nth-child(2)
.popular-styles__item,
.home-icons
.popular-styles
.container
.groups__item
> div:nth-child(2)
.popular-styles__item,
.home-icons
.popular-styles
.container
.landing--register
.separator
> div:nth-child(2)
.popular-styles__item,
.home-icons
.popular-styles
.container
.profile-login
.group
> div:nth-child(2)
.popular-styles__item,
.home-icons .popular-styles .container .row > div:nth-child(2) .popular-styles__item,
.landing--register
.home-icons
.popular-styles
.container
.separator
> div:nth-child(2)
.popular-styles__item,
.profile-login
.home-icons
.popular-styles
.container
.group
> div:nth-child(2)
.popular-styles__item {
background: linear-gradient(115.74deg, #f4980a -6.1%, #ffe6a7 101.85%);
}
.countdown
.home-icons
.popular-styles
.container
ul
> div:nth-child(3)
.popular-styles__item,
.home-icons
.popular-styles
.container
.countdown
ul
> div:nth-child(3)
.popular-styles__item,
.home-icons
.popular-styles
.container
.groups__item
> div:nth-child(3)
.popular-styles__item,
.home-icons
.popular-styles
.container
.landing--register
.separator
> div:nth-child(3)
.popular-styles__item,
.home-icons
.popular-styles
.container
.profile-login
.group
> div:nth-child(3)
.popular-styles__item,
.home-icons .popular-styles .container .row > div:nth-child(3) .popular-styles__item,
.landing--register
.home-icons
.popular-styles
.container
.separator
> div:nth-child(3)
.popular-styles__item,
.profile-login
.home-icons
.popular-styles
.container
.group
> div:nth-child(3)
.popular-styles__item {
background: linear-gradient(115.74deg, #6569bd -6.1%, #8fadf4 101.85%);
}
.countdown
.home-icons
.popular-styles
.container
ul
> div:nth-child(4)
.popular-styles__item,
.home-icons
.popular-styles
.container
.countdown
ul
> div:nth-child(4)
.popular-styles__item,
.home-icons
.popular-styles
.container
.groups__item
> div:nth-child(4)
.popular-styles__item,
.home-icons
.popular-styles
.container
.landing--register
.separator
> div:nth-child(4)
.popular-styles__item,
.home-icons
.popular-styles
.container
.profile-login
.group
> div:nth-child(4)
.popular-styles__item,
.home-icons .popular-styles .container .row > div:nth-child(4) .popular-styles__item,
.landing--register
.home-icons
.popular-styles
.container
.separator
> div:nth-child(4)
.popular-styles__item,
.profile-login
.home-icons
.popular-styles
.container
.group
> div:nth-child(4)
.popular-styles__item {
background: linear-gradient(115.74deg, #eb644c -6.1%, #ffd8d2 101.85%);
}
.countdown
.home-icons
.popular-styles
.container
ul
> div:nth-child(5)
.popular-styles__item,
.home-icons
.popular-styles
.container
.countdown
ul
> div:nth-child(5)
.popular-styles__item,
.home-icons
.popular-styles
.container
.groups__item
> div:nth-child(5)
.popular-styles__item,
.home-icons
.popular-styles
.container
.landing--register
.separator
> div:nth-child(5)
.popular-styles__item,
.home-icons
.popular-styles
.container
.profile-login
.group
> div:nth-child(5)
.popular-styles__item,
.home-icons .popular-styles .container .row > div:nth-child(5) .popular-styles__item,
.landing--register
.home-icons
.popular-styles
.container
.separator
> div:nth-child(5)
.popular-styles__item,
.profile-login
.home-icons
.popular-styles
.container
.group
> div:nth-child(5)
.popular-styles__item {
background: linear-gradient(115.74deg, #3b9e62 -6.1%, #abffad 101.85%);
}
.countdown
.home-icons
.popular-styles
.container
ul
> div:nth-child(6)
.popular-styles__item,
.home-icons
.popular-styles
.container
.countdown
ul
> div:nth-child(6)
.popular-styles__item,
.home-icons
.popular-styles
.container
.groups__item
> div:nth-child(6)
.popular-styles__item,
.home-icons
.popular-styles
.container
.landing--register
.separator
> div:nth-child(6)
.popular-styles__item,
.home-icons
.popular-styles
.container
.profile-login
.group
> div:nth-child(6)
.popular-styles__item,
.home-icons .popular-styles .container .row > div:nth-child(6) .popular-styles__item,
.landing--register
.home-icons
.popular-styles
.container
.separator
> div:nth-child(6)
.popular-styles__item,
.profile-login
.home-icons
.popular-styles
.container
.group
> div:nth-child(6)
.popular-styles__item {
background: linear-gradient(115.74deg, #1f408c -6.1%, #8f91cf 100.57%);
}
.home-icons .emojis__banner {
overflow: hidden;
position: relative;
margin: 50px 0 100px;
border-radius: 10px;
}
.countdown .home-icons .emojis__banner ul,
.home-icons .emojis__banner .countdown ul,
.home-icons .emojis__banner .groups__item,
.home-icons .emojis__banner .landing--register .separator,
.home-icons .emojis__banner .profile-login .group,
.home-icons .emojis__banner .row,
.landing--register .home-icons .emojis__banner .separator,
.profile-login .home-icons .emojis__banner .group {
padding: 50px 60px;
background-color: #f7f7f7;
}
.home-icons .emojis__banner__text {
width: 45%;
}
.home-icons .emojis__banner__text h5 {
color: #0a152f;
}
.home-icons .emojis__banner__text p {
color: #5b5b5b;
}
.home-icons .emojis__banner__image {
width: 55%;
position: unset;
}
.home-icons .emojis__banner__image img {
display: block;
height: auto;
position: absolute;
bottom: -165px;
left: 50%;
max-width: unset;
}
.home-icons .emojis__banner__image .purple {
top: -165px;
left: 72%;
}
.home-icons .emojis__banner__image .green {
left: 45%;
}
.home-icons .emojis__banner__image .yellow {
left: 67%;
}
.home-icons .section-logos {
text-align: center;
margin-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.home-icons .section-logos h5 {
margin-top: 0;
color: #142a5e;
}
.home-icons .section-logos > p {
margin: 0 auto 30px;
color: #5b5b5b;
}
.countdown .home-icons .section-logos ul,
.home-icons .section-logos .countdown ul,
.home-icons .section-logos .groups__item,
.home-icons .section-logos .landing--register .separator,
.home-icons .section-logos .profile-login .group,
.home-icons .section-logos .row,
.landing--register .home-icons .section-logos .separator,
.profile-login .home-icons .section-logos .group {
width: calc(100% + 20px);
margin-left: -10px;
margin-bottom: 30px;
justify-content: center;
}
.countdown .home-icons .section-logos ul > div,
.home-icons .section-logos .countdown ul > div,
.home-icons .section-logos .groups__item > div,
.home-icons .section-logos .landing--register .separator > div,
.home-icons .section-logos .profile-login .group > div,
.home-icons .section-logos .row > div,
.landing--register .home-icons .section-logos .separator > div,
.profile-login .home-icons .section-logos .group > div {
padding: 10px;
width: 12.5%;
}
.countdown .home-icons .section-logos ul > div a,
.home-icons .section-logos .countdown ul > div a,
.home-icons .section-logos .groups__item > div a,
.home-icons .section-logos .landing--register .separator > div a,
.home-icons .section-logos .profile-login .group > div a,
.home-icons .section-logos .row > div a,
.landing--register .home-icons .section-logos .separator > div a,
.profile-login .home-icons .section-logos .group > div a {
background-color: #f7f7f7;
transition: background-color 0.2s ease;
display: block;
width: 152px;
height: 144px;
border-radius: 8px;
position: relative;
}
.countdown .home-icons .section-logos ul > div a img,
.home-icons .section-logos .countdown ul > div a img,
.home-icons .section-logos .groups__item > div a img,
.home-icons .section-logos .landing--register .separator > div a img,
.home-icons .section-logos .profile-login .group > div a img,
.home-icons .section-logos .row > div a img,
.landing--register .home-icons .section-logos .separator > div a img,
.profile-login .home-icons .section-logos .group > div a img {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%) translateY(-20%);
pointer-events: none;
}
.countdown .home-icons .section-logos ul > div a p,
.home-icons .section-logos .countdown ul > div a p,
.home-icons .section-logos .groups__item > div a p,
.home-icons .section-logos .landing--register .separator > div a p,
.home-icons .section-logos .profile-login .group > div a p,
.home-icons .section-logos .row > div a p,
.landing--register .home-icons .section-logos .separator > div a p,
.profile-login .home-icons .section-logos .group > div a p {
position: absolute;
bottom: 30px;
width: 100%;
text-align: center;
pointer-events: none;
}
.countdown .home-icons .section-logos ul a:hover,
.home-icons .section-logos .countdown ul a:hover,
.home-icons .section-logos .groups__item a:hover,
.home-icons .section-logos .landing--register .separator a:hover,
.home-icons .section-logos .profile-login .group a:hover,
.home-icons .section-logos .row a:hover,
.landing--register .home-icons .section-logos .separator a:hover,
.profile-login .home-icons .section-logos .group a:hover {
background-color: #f0f0f0;
}
.home-icons .top-icon-search ul {
width: 20%;
margin-bottom: 0;
}
.home-icons .top-icon-search ul li a {
color: #424242;
}
.home-icons .top-icon-search ul li a:hover {
color: #286d34;
}
.home-icons .top-icon-search ul:last-child {
display: none;
}
@media screen and (max-width: 1400px) {
.home-icons .popular-styles__item img {
left: 50%;
transform: translateX(-50%) rotate(-8deg);
}
.home-icons .popular-styles__item:hover img {
left: 50%;
transform: translateX(-50%) rotate(0deg);
}
.countdown .home-icons .section-logos ul,
.home-icons .section-logos .countdown ul,
.home-icons .section-logos .groups__item,
.home-icons .section-logos .landing--register .separator,
.home-icons .section-logos .profile-login .group,
.home-icons .section-logos .row,
.landing--register .home-icons .section-logos .separator,
.profile-login .home-icons .section-logos .group {
max-width: 688px;
}
.countdown .home-icons .section-logos ul > div,
.home-icons .section-logos .countdown ul > div,
.home-icons .section-logos .groups__item > div,
.home-icons .section-logos .landing--register .separator > div,
.home-icons .section-logos .profile-login .group > div,
.home-icons .section-logos .row > div,
.landing--register .home-icons .section-logos .separator > div,
.profile-login .home-icons .section-logos .group > div {
width: unset;
}
}
@media screen and (max-width: 992px) {
.home-icons .popular-styles__item img {
left: 40px;
transform: rotate(-8deg);
}
.home-icons .popular-styles__item:hover img {
left: 40px;
transform: rotate(0deg);
}
.countdown .home-icons .emojis__banner ul,
.home-icons .emojis__banner .countdown ul,
.home-icons .emojis__banner .groups__item,
.home-icons .emojis__banner .landing--register .separator,
.home-icons .emojis__banner .profile-login .group,
.home-icons .emojis__banner .row,
.landing--register .home-icons .emojis__banner .separator,
.profile-login .home-icons .emojis__banner .group {
padding: 50px 40px;
}
.home-icons .emojis__banner__image,
.home-icons .emojis__banner__text {
width: 50%;
}
.home-icons .emojis__banner__image img {
bottom: -135px;
left: 55%;
}
}
@media screen and (max-width: 768px) {
.home-icons .emojis__banner {
margin: 30px 0 80px;
}
.home-icons .emojis__banner__image img {
bottom: -125px;
left: 55%;
}
.countdown .home-icons .section-logos ul,
.home-icons .section-logos .countdown ul,
.home-icons .section-logos .groups__item,
.home-icons .section-logos .landing--register .separator,
.home-icons .section-logos .profile-login .group,
.home-icons .section-logos .row,
.landing--register .home-icons .section-logos .separator,
.profile-login .home-icons .section-logos .group {
max-width: 516px;
justify-content: center;
}
.home-icons .top-icon-search ul {
width: 50%;
}
.home-icons .top-icon-search ul:last-child {
display: block;
}
}
@media screen and (max-width: 640px) {
.home-icons .popular-styles,
.home-icons .top-icon-search {
padding-top: 10px;
}
.home-icons .popular-styles > .container > p,
.home-icons .top-icon-search > .container > p {
margin-bottom: 20px;
}
.home-icons .emojis__banner {
margin: 30px 0 40px;
}
.countdown .home-icons .emojis__banner ul,
.home-icons .emojis__banner .countdown ul,
.home-icons .emojis__banner .groups__item,
.home-icons .emojis__banner .landing--register .separator,
.home-icons .emojis__banner .profile-login .group,
.home-icons .emojis__banner .row,
.landing--register .home-icons .emojis__banner .separator,
.profile-login .home-icons .emojis__banner .group {
padding: 30px;
}
.home-icons .emojis__banner__text {
width: 100%;
text-align: center;
}
.home-icons .emojis__banner__text p {
font-size: 14px;
}
.home-icons .emojis__banner__image {
width: 100%;
height: 200px;
}
.home-icons .emojis__banner__image img {
bottom: -405px;
left: -50%;
}
.home-icons .emojis__banner__image .purple {
top: 95px;
left: 65%;
}
.home-icons .emojis__banner__image .green {
left: -25%;
bottom: -190px;
}
.home-icons .emojis__banner__image .yellow {
left: 15%;
bottom: -245px;
}
.home-icons .section-logos {
margin-bottom: 40px;
}
.home-icons .section-logos > p {
font-size: 14px;
}
.countdown .home-icons .section-logos ul,
.home-icons .section-logos .countdown ul,
.home-icons .section-logos .groups__item,
.home-icons .section-logos .landing--register .separator,
.home-icons .section-logos .profile-login .group,
.home-icons .section-logos .row,
.landing--register .home-icons .section-logos .separator,
.profile-login .home-icons .section-logos .group {
max-width: 325px;
}
.countdown .home-icons .section-logos ul > div,
.home-icons .section-logos .countdown ul > div,
.home-icons .section-logos .groups__item > div,
.home-icons .section-logos .landing--register .separator > div,
.home-icons .section-logos .profile-login .group > div,
.home-icons .section-logos .row > div,
.landing--register .home-icons .section-logos .separator > div,
.profile-login .home-icons .section-logos .group > div {
padding: 5px;
}
.countdown .home-icons .section-logos ul > div a,
.home-icons .section-logos .countdown ul > div a,
.home-icons .section-logos .groups__item > div a,
.home-icons .section-logos .landing--register .separator > div a,
.home-icons .section-logos .profile-login .group > div a,
.home-icons .section-logos .row > div a,
.landing--register .home-icons .section-logos .separator > div a,
.profile-login .home-icons .section-logos .group > div a {
display: block;
width: 87px;
height: 87px;
}
.countdown .home-icons .section-logos ul > div a img,
.home-icons .section-logos .countdown ul > div a img,
.home-icons .section-logos .groups__item > div a img,
.home-icons .section-logos .landing--register .separator > div a img,
.home-icons .section-logos .profile-login .group > div a img,
.home-icons .section-logos .row > div a img,
.landing--register .home-icons .section-logos .separator > div a img,
.profile-login .home-icons .section-logos .group > div a img {
width: 24px;
height: 24px;
top: 25%;
}
.countdown .home-icons .section-logos ul > div a p,
.home-icons .section-logos .countdown ul > div a p,
.home-icons .section-logos .groups__item > div a p,
.home-icons .section-logos .landing--register .separator > div a p,
.home-icons .section-logos .profile-login .group > div a p,
.home-icons .section-logos .row > div a p,
.landing--register .home-icons .section-logos .separator > div a p,
.profile-login .home-icons .section-logos .group > div a p {
font-size: 13px;
bottom: 20px;
}
}
@media screen and (max-width: 480px) {
.home-icons .popular-styles__item {
height: 180px;
}
.home-icons .popular-styles__item p {
font-size: 14px;
}
.home-icons .popular-styles__item img {
width: 165px;
height: auto;
}
.home-icons .emojis__banner__image img {
bottom: -355px;
left: -62%;
}
}
.collections-visible .section-logos .countdown ul,
.collections-visible .section-logos .groups__item,
.collections-visible .section-logos .landing--register .separator,
.collections-visible .section-logos .profile-login .group,
.collections-visible .section-logos .row,
.countdown .collections-visible .section-logos ul,
.landing--register .collections-visible .section-logos .separator,
.profile-login .collections-visible .section-logos .group {
max-width: 688px;
}
.collections-visible .section-logos .countdown ul > div,
.collections-visible .section-logos .groups__item > div,
.collections-visible .section-logos .landing--register .separator > div,
.collections-visible .section-logos .profile-login .group > div,
.collections-visible .section-logos .row > div,
.countdown .collections-visible .section-logos ul > div,
.landing--register .collections-visible .section-logos .separator > div,
.profile-login .collections-visible .section-logos .group > div {
width: unset;
}
@media screen and (max-width: 1400px) {
.collections-visible .home-icons .emojis__banner__image img {
bottom: -100px;
}
.collections-visible .section-logos .countdown ul,
.collections-visible .section-logos .groups__item,
.collections-visible .section-logos .landing--register .separator,
.collections-visible .section-logos .profile-login .group,
.collections-visible .section-logos .row,
.countdown .collections-visible .section-logos ul,
.landing--register .collections-visible .section-logos .separator,
.profile-login .collections-visible .section-logos .group {
max-width: 516px;
justify-content: center;
}
.collections-visible .section-logos .countdown ul .hide-mobile,
.collections-visible .section-logos .groups__item .hide-mobile,
.collections-visible .section-logos .landing--register .separator .hide-mobile,
.collections-visible .section-logos .profile-login .group .hide-mobile,
.collections-visible .section-logos .row .hide-mobile,
.countdown .collections-visible .section-logos ul .hide-mobile,
.landing--register .collections-visible .section-logos .separator .hide-mobile,
.profile-login .collections-visible .section-logos .group .hide-mobile {
display: none;
}
}
.landing--iconfonts-sprites header {
background-color: #142a5e;
padding: 50px 0;
margin-bottom: 50px;
}
.landing--iconfonts-sprites .container {
max-width: 1100px;
}
.landing--iconfonts-sprites .features {
margin-bottom: 50px;
}
.landing--iconfonts-sprites .tutorial__text {
max-width: 400px;
padding: 0 20px;
}
.landing--iconfonts-sprites .tutorial__image img {
border: 1px solid #e5e5e5;
}
.countdown .landing--iconfonts-sprites .tutorial ul,
.landing--iconfonts-sprites .tutorial .countdown ul,
.landing--iconfonts-sprites .tutorial .groups__item,
.landing--iconfonts-sprites .tutorial .landing--register .separator,
.landing--iconfonts-sprites .tutorial .profile-login .group,
.landing--iconfonts-sprites .tutorial .row,
.landing--register .landing--iconfonts-sprites .tutorial .separator,
.profile-login .landing--iconfonts-sprites .tutorial .group {
padding: 50px 20px 0;
}
.countdown .landing--iconfonts-sprites .tutorial ul:nth-child(2n),
.landing--iconfonts-sprites .tutorial .countdown ul:nth-child(2n),
.landing--iconfonts-sprites .tutorial .groups__item:nth-child(2n),
.landing--iconfonts-sprites .tutorial .landing--register .separator:nth-child(2n),
.landing--iconfonts-sprites .tutorial .profile-login .group:nth-child(2n),
.landing--iconfonts-sprites .tutorial .row:nth-child(2n),
.landing--register .landing--iconfonts-sprites .tutorial .separator:nth-child(2n),
.profile-login .landing--iconfonts-sprites .tutorial .group:nth-child(2n) {
background-color: #d8d8d8;
}
@media screen and (max-width: 768px) {
.landing--iconfonts-sprites .tutorial__text {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
margin-bottom: 10px;
}
.landing--iconfonts-sprites .tutorial__image {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
}
.page-pricing {
padding-top: 0 !important;
}
.page-pricing #viewport {
padding-top: 54px;
}
.page-pricing #header {
z-index: 2;
position: absolute;
margin: 0;
padding: 0;
border: none;
}
.countdown .page-pricing #header ul,
.landing--register .page-pricing #header .separator,
.page-pricing #header .countdown ul,
.page-pricing #header .groups__item,
.page-pricing #header .landing--register .separator,
.page-pricing #header .profile-login .group,
.page-pricing #header .row,
.profile-login .page-pricing #header .group {
padding: 0;
}
.page-pricing #header .menu-holder > li:not(.language-selector) {
display: none;
}
@media screen and (max-width: 992px) {
.page-pricing #header .menu-holder > li:not(.language-selector) {
display: block;
}
}
.page-pricing #header .popover-tools .popover-button {
padding: 0 30px;
}
.page-pricing .header--menu {
margin: 0;
}
.page-pricing .header--search,
.page-pricing .header.fixed .header--search {
display: none;
}
.pricing__hero {
overflow: hidden;
position: relative;
z-index: 1;
background: url(../images/hero.9edbde096a22dae8891a7c7241c11107.svg);
background-size: cover;
color: #fff;
}
.pricing__hero .content {
position: relative;
padding: 50px 20px;
max-width: 768px;
margin: auto;
text-align: center;
}
.pricing__hero .content:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
width: 320px;
height: 283px;
transform: translateY(-50%);
background-image: url(../images/computer.56c35092dedca7ac23142ce65282c676.svg);
}
.pricing__hero h3 {
font-weight: 400;
margin-bottom: 10px;
color: #fff;
}
.pricing__hero p {
margin: 0;
font-size: 17px;
}
.pricing__hero .premium {
white-space: nowrap;
}
.pricing__hero.free-png {
background: #142a5e;
min-height: 219px;
display: flex;
align-items: center;
justify-content: center;
}
.pricing__hero.free-png h5 {
padding: 0 20px;
margin: 0 auto 20px;
}
.pricing__hero.free-png p {
padding: 0 30px;
}
.pricing__hero.free-png p span {
color: #feb602;
display: inline-flex;
gap: 5px;
align-items: baseline;
}
.pricing__hero.free-png p span i {
display: inline;
color: inherit;
}
.pricing__hero.free-png .image-left,
.pricing__hero.free-png .image-right {
position: absolute;
top: 0;
}
.pricing__hero.free-png .image-left {
left: 0;
}
.pricing__hero.free-png .image-right {
right: 0;
}
.pricing__hero.free-png .ball-blue,
.pricing__hero.free-png .ball-green {
position: absolute;
bottom: -10px;
}
.pricing__hero.free-png .ball-blue {
left: 0;
}
.pricing__hero.free-png .ball-green {
right: 0;
}
@media (max-width: 1200px) {
.pricing__hero.free-png .image-left {
transform: translateX(-50%);
}
.pricing__hero.free-png .image-right {
transform: translateX(50%);
}
.pricing__hero.free-png .ball-blue {
transform: translateX(-20%);
}
.pricing__hero.free-png .ball-green {
transform: translateX(20%);
}
}
@media screen and (max-width: 768px) {
.pricing__hero.free-png .image-left,
.pricing__hero.free-png .image-right {
display: none;
}
}
.pricing__pack {
margin-top: 20px;
}
.pricing__pack h6 {
color: #142a5e;
}
.pricing__pack--left {
position: relative;
top: 10px;
}
.pricing__pack--left img {
max-width: 200px;
margin-right: 20px;
box-shadow: 0 1px 5px #c8c8c8;
}
.pricing__pack--right {
height: 160px;
margin-top: -10px;
}
@media screen and (max-width: 768px) {
.pricing__pack h6 {
margin: 0;
}
.pricing__pack--left {
top: 0;
}
.pricing__pack--left img {
max-width: 100px;
}
}
.pricing .container {
max-width: 1200px;
}
.pricing__tables {
background-color: #f0f0f0;
}
.pricing__tables .container {
max-width: 1200px;
padding: 20px;
}
.pricing__tables .container .col__table {
padding-right: 10px;
}
.pricing__tables .container .col__box {
padding-left: 10px;
}
.pricing__tables .table {
box-shadow: 0 1px 5px #c8c8c8;
border: 1px solid #e5e5e5;
border-radius: 6px;
background-color: #fff;
}
.pricing__tables .table thead {
border-bottom: 1px solid #e5e5e5;
font-size: 12px;
}
.pricing__tables .table td,
.pricing__tables .table th {
height: 44px;
padding: 0 0 0 20px;
}
.pricing__tables .table td:nth-child(2),
.pricing__tables .table td:nth-child(3),
.pricing__tables .table th:nth-child(2),
.pricing__tables .table th:nth-child(3) {
text-align: center;
}
.pricing__tables .table td {
color: #424242;
font-size: 13px;
}
.pricing__tables .plans {
border: 1px solid #e5e5e5;
box-shadow: 0 1px 5px #c8c8c8;
border-radius: 6px;
background: #fff;
margin: 0 0 20px;
cursor: pointer;
}
.pricing__tables .plans:hover {
border-color: #d8d8d8;
}
.pricing__tables .plans:last-child {
margin: 0;
}
.pricing__tables .plans .ribbon {
position: relative;
display: inline-block;
min-width: 200px;
height: 24px;
line-height: 24px;
margin-top: 20px;
padding-left: 20px;
background: #32864c;
font-size: 12px;
color: #fff;
}
.pricing__tables .plans .ribbon:after {
position: absolute;
top: 50%;
right: -12px;
transform: translateY(-50%) rotate(45deg);
width: 24px;
height: 24px;
background: #fff;
content: '';
}
.pricing__tables .plans .ribbon + .content {
padding-top: 10px;
}
.pricing__tables .plans .content {
position: relative;
padding: 20px 190px 20px 20px;
}
.pricing__tables .plans span {
display: block;
}
.pricing__tables .plans .title {
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
color: #0a152f;
}
.pricing__tables .plans .price strong {
color: #3b9e62;
}
.pricing__tables .plans .price small {
font-size: 13px;
color: #0a152f;
font-weight: 400;
}
.pricing__tables .plans .info {
font-size: 12px;
color: #777;
line-height: 1.75;
}
.pricing__tables .plans .info b {
color: #0a152f;
}
.pricing__tables .plans .vat {
color: #0a152f;
font-size: 10px;
line-height: 1.75;
}
.pricing__tables .plans .bj-button {
position: absolute;
top: 50%;
right: 1.5em;
transform: translateY(-50%);
cursor: pointer;
}
@media screen and (max-width: 768px) {
.pricing__tables .container .col__table {
padding: 0 5px;
margin-bottom: 20px;
}
.pricing__tables .container .col__table img {
width: 20px;
height: 20px;
}
.pricing__tables .container .col__box {
padding: 0 5px;
}
.pricing__tables .table th:nth-child(2),
.pricing__tables .table th:nth-child(3) {
font-size: 11px;
padding: 0 5px;
}
.pricing__tables .table td {
padding: 0;
}
.pricing__tables .table td:first-child {
padding: 0 10px;
}
}
@media screen and (max-width: 640px) {
.pricing__tables .plans {
overflow: hidden;
position: relative;
}
.pricing__tables .plans .content {
padding: 20px;
text-align: center;
}
.pricing__tables .plans .content .bj-button {
position: relative;
transform: none;
top: inherit;
right: inherit;
margin-top: 10px;
}
.pricing__tables .plans .ribbon {
transform: rotate(-45deg);
text-align: center;
padding: 0;
position: absolute;
left: -65px;
top: 0;
}
}
.pricing__advantages {
text-align: center;
margin: 50px 0 20px;
}
.pricing__advantages img {
max-width: 96px;
height: 96px;
}
@media screen and (max-width: 640px) {
.pricing__advantages {
text-align: left;
}
.pricing__advantages img {
max-width: 100%;
height: auto;
}
.pricing__advantages h6 {
font-size: 18px;
margin: 0 0 10px;
}
}
.pricing__twitter {
background-color: #f0f0f0;
padding: 50px 0;
}
.pricing__twitter .avatar {
width: 44px;
height: 44px;
margin: 0 10px 0 0;
}
.pricing__twitter .avatar img {
width: auto;
height: 100%;
object-fit: cover;
}
.pricing__twitter .name {
margin: 0 0 5px;
color: #424242;
font-weight: 600;
}
.pricing__twitter .username {
color: #9c9c9c;
}
.pricing__twitter .likes {
position: relative;
margin: 0 30px 0 0;
padding-left: 17px;
}
.pricing__twitter .likes i {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.pricing__twitter .container {
text-align: center;
}
.pricing__twitter article .content {
position: relative;
padding: 20px 20px 64px;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(95, 125, 149, 0.3);
text-align: left;
}
.pricing__twitter article footer,
.pricing__twitter article header,
.pricing__twitter article section {
display: flex;
align-items: center;
}
.pricing__twitter article footer p,
.pricing__twitter article header p,
.pricing__twitter article section p {
margin: 0;
}
.pricing__twitter article footer:not(footer),
.pricing__twitter article header:not(footer),
.pricing__twitter article section:not(footer) {
margin: 0 0 20px;
}
.pricing__twitter article header span {
display: block;
}
.pricing__twitter article header p {
margin: 0;
line-height: 1;
}
.pricing__twitter article section {
color: #424242;
font-weight: 600;
}
.pricing__twitter article footer {
position: absolute;
bottom: 0;
left: 0;
height: 44px;
padding: 20px;
color: #b1b1b1;
line-height: 44px;
}
.pricing__swiper {
overflow: hidden;
margin: 0 -10px;
}
.pricing__swiper article {
padding: 10px;
}
.pricing__swiper > div {
display: flex;
flex-wrap: nowrap;
}
.pricing__swiper > div article,
.pricing__swiper > div article .content {
height: 100%;
}
.pricing__swiper ~ .swiper__navigation {
display: block;
}
.premium__plans {
text-align: center;
margin: 50px 0;
}
.premium__plans__box-holder:first-child {
margin: 0 20px 0 auto;
}
.premium__plans__box-holder:first-child .premium__plans__box {
margin-left: auto;
}
.premium__plans__box-holder:last-child {
margin: 0 auto 0 20px;
}
.premium__plans__box {
width: 300px;
}
.premium__plans__box__inner {
background-color: #fff;
box-shadow: 0 0 10px rgba(95, 125, 149, 0.3);
border-radius: 6px;
padding: 50px 20px;
height: 100%;
position: relative;
}
.premium__plans__box__inner .uppercase {
letter-spacing: 1px;
}
.premium__plans__box__price {
font-size: 56px;
line-height: 56px;
text-align: left;
}
.premium__plans__box__price__info-wrap {
font-size: 16px;
line-height: normal;
margin-left: 5px;
}
.premium__plans .price-original + .premium__plans__box__price {
border-left: 1px solid #e5e5e5;
padding-left: 10px;
}
.premium__plans .ribbon {
width: 125px;
height: 98px;
overflow: hidden;
position: absolute;
top: -5px;
right: -5px;
}
.premium__plans .ribbon:after,
.premium__plans .ribbon:before {
content: '';
position: absolute;
display: block;
border-color: transparent transparent #de6815 #de6815;
border-style: solid;
border-width: 2px;
}
.premium__plans .ribbon:before {
top: 0;
left: 27px;
}
.premium__plans .ribbon:after {
bottom: 0;
right: 0;
}
.premium__plans .ribbon span {
position: absolute;
display: block;
width: 226px;
padding: 4px 0;
background-color: #feb602;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
left: -25px;
top: 30px;
font-size: 13px;
transform: rotate(45deg);
line-height: 18px;
font-weight: 700;
}
.premium__plans .tooltip__content {
width: 260px;
white-space: normal;
}
.premium__plans .vat {
font-size: 11px;
}
@media screen and (max-width: 768px) {
.premium__plans.premium__plans--two-products .premium__plans__box-holder {
margin: 0;
}
.premium__plans.premium__plans--two-products
.premium__plans__box-holder:first-child
.premium__plans__box {
margin: 0 10px 0 auto;
}
.premium__plans.premium__plans--two-products
.premium__plans__box-holder:last-child
.premium__plans__box {
margin: 0 auto 0 10px;
}
}
@media screen and (max-width: 640px) {
.premium__plans.premium__plans--two-products .premium__plans__box-holder {
width: 100%;
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
}
.premium__plans.premium__plans--two-products .premium__plans__box-holder:first-child {
margin: 0;
}
.premium__plans.premium__plans--two-products
.premium__plans__box-holder:first-child
.premium__plans__box {
margin: 0 auto;
}
.premium__plans.premium__plans--two-products .premium__plans__box-holder:last-child {
margin: 0 0 20px;
}
.premium__plans.premium__plans--two-products
.premium__plans__box-holder:last-child
.premium__plans__box {
margin: 0 auto;
}
.premium__plans.premium__plans--two-products .premium__plans__box--monthly {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
.premium__plans.premium__plans--two-products .premium__plans__box--annual {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
}
}
.premium__plans.premium__plans--three-products .premium__plans__box {
margin: 0 10px;
}
@media screen and (max-width: 1400px) {
.premium__plans.premium__plans--three-products .premium__plans__box {
margin: 0 5px;
}
}
@media screen and (max-width: 992px) {
.premium__plans.premium__plans--three-products .premium__plans__box-holder {
width: 100%;
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
margin: 0 0 20px;
}
.premium__plans.premium__plans--three-products
.premium__plans__box-holder
.premium__plans__box {
margin: 0 auto;
}
}
.tags-page .tags-letter {
margin-bottom: 50px;
}
.tags-page .tags-letter li {
margin: 0 10px 10px 0;
}
.tags-page .tags-letter li:last-child {
margin-right: 0;
}
.tags-page .tags-letter li a {
display: flex;
justify-content: center;
align-items: center;
background-color: #e5e5e5;
border-radius: 6px;
border: 1px solid #d8d8d8;
color: #0a152f;
font-size: 13px;
height: 34px;
width: 34px;
line-height: 34px;
text-align: center;
}
.tags-page .tags-letter li a:hover {
background-color: #d8d8d8;
}
.tags-page .tags-letter li.active a {
background-color: #142a5e;
color: #fff;
border-color: #142a5e;
cursor: default;
}
.tags-page ul.tags {
-webkit-columns: 3;
-moz-columns: 3;
column-count: 3;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
-webkit-column-rule: 1px dotted #e5e5e5;
-moz-column-rule: 1px dotted #e5e5e5;
column-rule: 1px dotted #e5e5e5;
margin-bottom: 50px;
}
.tags-page ul.tags li {
margin-bottom: 10px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.tags-page ul.tags li a,
.tags-page ul.tags li span {
display: inline-block;
border-radius: 6px;
color: #fff;
padding: 0 10px;
font-size: 13px;
height: 24px;
line-height: 24px;
}
.tags-page ul.tags li a {
background-color: #0a152f;
}
.tags-page ul.tags li span {
background-color: #e5e5e5;
margin-left: auto;
color: #0a152f;
}
.tags-page .pagination {
margin-bottom: 50px;
}
@media screen and (max-width: 992px) {
.tags-page ul.tags {
-webkit-columns: 2;
-moz-columns: 2;
column-count: 2;
}
}
@media screen and (max-width: 640px) {
.tags-page ul.tags {
-webkit-columns: 1;
-moz-columns: 1;
column-count: 1;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
-webkit-column-rule: none;
-moz-column-rule: none;
column-rule: none;
}
}
.landing-whats-new,
.landing-whats-new .main {
overflow: unset;
}
.landing-whats-new .container {
max-width: 1025px;
}
.landing-whats-new .container > hr {
width: 100%;
}
.landing-whats-new__menu-toggle {
width: 265px;
position: sticky;
position: -webkit-sticky;
margin-right: 50px;
top: 120px;
}
.landing-whats-new__menu-toggle label {
display: none;
align-items: center;
}
.landing-whats-new__menu-toggle input {
display: none;
}
.landing-whats-new__sidebar {
background-color: #fff;
padding: 10px 0;
border-radius: 6px;
margin: 0;
}
.landing-whats-new__sidebar a {
height: 34px;
line-height: 34px;
padding: 0 20px;
font-size: 13px;
position: relative;
display: block;
font-weight: 400;
}
.landing-whats-new__sidebar a.active {
color: #3b9e62;
font-weight: 700;
}
.landing-whats-new__sidebar li:first-child span {
font-weight: 700;
padding: 0 20px;
color: #424242;
line-height: 34px;
}
.landing-whats-new__text {
width: 100%;
}
.landing-whats-new__text .popover-button {
padding-left: 0;
}
.landing-whats-new__article {
padding: 10px 0 30px;
margin-bottom: 30px;
border-bottom: 1px solid #e5e5e5;
}
.landing-whats-new__article img {
width: 100%;
border-radius: 8px;
object-fit: cover;
}
.landing-whats-new__article footer .share li {
display: inline-block;
}
.landing-whats-new__article footer .share li:not(:first-child) a {
padding: 0 20px;
color: #424242;
}
.landing-whats-new__article:last-child {
border-bottom: none;
}
@media screen and (max-width: 992px) {
.landing-whats-new .container {
max-width: 750px;
}
.landing-whats-new__menu-toggle {
width: 100%;
position: relative;
top: unset;
margin-bottom: 20px;
}
.landing-whats-new__menu-toggle label {
display: flex;
align-items: center;
cursor: pointer;
width: fit-content;
}
.landing-whats-new__menu-toggle .landing-whats-new__sidebar__wrapper {
display: none;
}
.landing-whats-new__menu-toggle .landing-whats-new__sidebar__wrapper:before {
font-size: 1.4em;
display: block;
width: 0;
height: 0;
content: '';
pointer-events: none;
position: absolute;
top: -0.45em;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
.landing-whats-new__menu-toggle input:checked + .landing-whats-new__sidebar__wrapper {
display: block;
position: absolute;
width: unset;
border-radius: 6px;
z-index: 1;
top: 45px;
left: 0;
overflow: visible;
margin: 0;
padding: 8px;
background: #fff;
box-shadow: 0 0 60px rgba(14, 42, 71, 0.25);
animation: popover 0.2s ease-in-out;
}
.landing-whats-new__article img {
height: auto;
}
}
@media screen and (max-width: 640px) {
.landing-whats-new__article img {
border-radius: 6px;
}
}
.landing--affiliate .button--green {
box-shadow: inset 0 0 0 100px #3b9e62;
}
.landing--affiliate .button--green:hover {
box-shadow: inset 0 0 0 100px #32864c;
color: #fff;
}
.landing--affiliate section {
position: relative;
}
.landing--affiliate .hero {
background: url(../images/bg-header.569fc65bd651f42913fde626cb699cb2.svg) no-repeat
50%;
background-size: cover;
text-align: left;
padding: 80px;
margin: 0;
}
.landing--affiliate .hero p {
max-width: 510px;
color: #e5e5e5;
}
.landing--affiliate .logo {
display: inline-block;
margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
.landing--affiliate .logo {
width: auto;
}
}
.landing--affiliate .benefits {
padding: 80px 0;
margin: 0;
}
.landing--affiliate .benefits .container {
max-width: 1115px;
}
.landing--affiliate .benefits__holder {
max-width: 570px;
margin: auto;
}
.landing--affiliate .why-us {
background-color: #f7f7f7;
padding: 40px;
margin: 0;
}
.landing--affiliate .join {
background: url(../images/bg-join.018f25f4b54195b0c2a21c80d0a6be73.svg) no-repeat 50%;
background-size: cover;
padding: 70px 0;
margin: 0;
}
.landing--affiliate #footer {
background: #0a152f;
min-height: 0;
margin: 0;
border: none;
}
.landing--affiliate #footer div {
position: relative;
}
.landing--affiliate #footer li {
display: inline-block;
}
.landing--affiliate #footer li a {
color: #fff;
font-weight: 400;
}
.landing--affiliate #footer li span {
display: inline-block;
margin: 0 10px;
}
@media screen and (max-width: 992px) {
.landing--affiliate,
.landing--affiliate .hero {
text-align: center;
}
.landing--affiliate .hero p {
margin-left: auto;
margin-right: auto;
}
.landing--affiliate .text__holder {
order: 1;
}
.landing--affiliate .img__holder {
order: 0;
}
.landing--affiliate .benefits {
padding: 60px 0;
}
.landing--affiliate .why-us .container {
max-width: 600px;
}
}
@media screen and (max-width: 640px) {
.landing--affiliate .hero {
padding: 40px;
}
.landing--affiliate .hero p {
display: block;
}
.landing--affiliate .benefits {
padding: 40px 0;
}
.landing--affiliate .benefits__holder,
.landing--affiliate .benefits img {
max-width: 280px;
}
.landing--affiliate .why-us .container {
text-align: center;
}
.landing--affiliate .join {
padding: 40px 0;
}
}
.landing-api.overflow-hidden #viewport {
filter: none;
-webkit-filter: none;
}
.landing-api #viewport {
padding-top: 0;
background: #0a152f;
}
.landing-api .header {
height: 56px;
line-height: 56px;
padding: 0 20px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.landing-api .navigation ul li {
display: inline-block;
margin-left: 30px;
}
.landing-api .navigation ul a {
color: #f7f7f7;
}
.landing-api .navigation ul a:hover {
color: #c8c8c8;
}
.landing-api .navigation .user-info {
font-size: 20px;
}
#notification-cart .notification__close .landing-api .navigation .user-info i,
.landing-api .navigation .user-info #notification-cart .notification__close i,
.landing-api .navigation .user-info .icon,
.landing-api .navigation .user-info .notification--alert i,
.notification--alert .landing-api .navigation .user-info i {
color: #44b678;
}
.landing-api .trigger__button,
.landing-api .trigger__close {
display: none;
}
.landing-api .trigger__close {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
line-height: 44px;
}
.landing-api .avatar {
display: block;
width: 42px;
height: 42px;
}
.landing-api .hero {
text-align: left;
background: url(../images/bg-api.8cfdf3e7232bcd74d56ea2719f4c6b92.svg) no-repeat 100%
0;
padding: 160px 0;
}
.landing-api .hero .links-content {
display: inline-block;
}
.landing-api .hero .links-content__buttons {
display: flex;
}
.landing-api .hero .links-content__buttons a {
display: block;
line-height: 1.2;
}
.landing-api .hero .links-content__buttons .documentation-v2:hover {
color: #c8c8c8;
}
.landing-api .screen-holder {
position: relative;
background-color: #f0f0f0;
border-radius: 4px;
padding: 0;
}
.landing-api .code-browser {
position: absolute;
left: -44px;
bottom: -60px;
max-width: 450px;
font-size: 13px;
}
.landing-api .code-browser__header {
background-color: #1f408c;
}
.landing-api .code-browser__header span {
background-color: #142a5e;
}
.landing-api .code-browser__content {
text-align: left;
background-color: #0a152f;
}
.landing-api .code-browser code {
white-space: pre;
}
.landing-api .screen {
width: 74%;
border-radius: 6px;
}
.landing-api .sidebar-holder img {
width: 24.2%;
position: absolute;
top: 0;
right: 1%;
transition:
opacity 0ms ease-in,
transform 0.3s ease-in;
transform: translateY(20px);
opacity: 0;
}
.landing-api .sidebar-holder img.active {
transform: none;
opacity: 1;
}
.landing-api .mobile-screens {
position: relative;
width: 60%;
margin: -50px 20px 100px auto;
}
.landing-api .mobile-screens img {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition:
opacity 0ms ease-in,
transform 0.3s ease-in;
transform: translateY(20px);
opacity: 0;
border-radius: 4px;
box-shadow: 0 0 10px rgba(31, 64, 140, 0.2);
}
.landing-api .mobile-screens img.active {
transform: none;
opacity: 1;
}
.landing-api .features {
padding: 0 20px;
color: #fff;
}
.landing-api .features .features__inner {
padding: 50px 60px;
max-width: 1365px;
margin: 0 auto;
border-radius: 16px;
background-color: #142a5e;
position: relative;
}
.landing-api .features .features__inner i {
font-size: 24px;
line-height: 44px;
width: 30px;
height: 30px;
}
@media screen and (min-width: 480px) {
.landing-api .features .features__inner i {
font-size: calc(24px + (600vw - 2880px) / 920);
}
}
@media screen and (min-width: 1400px) {
.landing-api .features .features__inner i {
font-size: 30px;
}
}
.landing-api .features .features__inner b {
color: #52d999;
}
.landing-api .features .features__inner span {
color: #52d999;
font-size: 65px;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
.landing-api .examples {
padding: 100px 0;
}
.landing-api .examples .container {
max-width: 900px;
}
.landing-api .examples .examples__nav {
text-align: center;
margin-bottom: 30px;
display: inline-block;
}
.landing-api .examples .examples__nav li {
display: inline-block;
padding: 0 20px;
}
.landing-api .examples .examples__nav li label {
display: block;
cursor: pointer;
font-weight: 600;
height: 34px;
line-height: 34px;
padding: 0 10px;
}
.landing-api .examples .examples__nav hr {
width: 100%;
margin-top: -1px;
background-color: #142a5e;
}
.landing-api .examples input {
display: none;
appearance: none;
}
.landing-api .examples input:first-of-type:checked ~ .examples__nav li:first-child {
border-bottom: 1px solid #44b678;
color: #52d999;
}
.landing-api .examples input:first-of-type:checked ~ .examples__content li:first-child {
display: block;
}
.landing-api .examples input:nth-of-type(2):checked ~ .examples__nav li:nth-child(2) {
border-bottom: 1px solid #44b678;
color: #52d999;
}
.landing-api .examples input:nth-of-type(2):checked ~ .examples__content li:nth-child(2) {
display: block;
}
.landing-api .examples input:nth-of-type(3):checked ~ .examples__nav li:nth-child(3) {
border-bottom: 1px solid #44b678;
color: #52d999;
}
.landing-api .examples input:nth-of-type(3):checked ~ .examples__content li:nth-child(3) {
display: block;
}
.landing-api .examples .code-holder {
background-color: #142a5e;
}
.landing-api .examples .code-holder pre {
padding: 30px;
text-align: left;
}
.landing-api .examples .examples__content {
border-radius: 4px;
box-shadow: 0 0 10px rgba(31, 64, 140, 0.2);
overflow: hidden;
}
.landing-api .examples .examples__content li {
display: none;
}
.landing-api .examples .example-result {
background-color: #fff;
}
.landing-api .pricing {
padding: 100px 0;
}
.landing-api .pricing .container {
max-width: 1400px;
}
.landing-api .pricing__block {
border-radius: 16px;
padding: 40px;
margin: 0 25px 20px;
}
.landing-api .pricing__block ul {
text-align: left;
}
.landing-api .pricing__block > a {
width: 100%;
}
.landing-api .pricing__block:first-child {
margin: 0;
padding: 0;
}
.landing-api .pricing__block:nth-child(2),
.landing-api .pricing__block:nth-child(3) {
display: flex;
flex-direction: column;
}
.landing-api .pricing__block:nth-child(2) ul,
.landing-api .pricing__block:nth-child(3) ul {
flex: 1;
}
.landing-api .pricing__block:nth-child(2) > a,
.landing-api .pricing__block:nth-child(3) > a {
align-self: flex-end;
}
.landing-api .pricing__block:nth-child(2) {
background-color: #142a5e;
max-width: 370px;
}
.landing-api .pricing__block:nth-child(3) {
background-color: #44b678;
max-width: 370px;
}
.landing-api .pricing__block:nth-child(3) > a {
background-color: #142a5e;
}
@media screen and (max-width: 992px) {
.landing-api .pricing__block {
flex: unset;
}
.landing-api .pricing__block:first-child {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.landing-api .pricing__block:nth-child(2),
.landing-api .pricing__block:nth-child(3) {
margin: 0 10px 20px;
width: calc(50% - 20px);
width: calc(100% - 20px);
}
}
.landing-api .modal-api-key .content {
padding: 50px;
}
@media screen and (max-width: 640px) {
.landing-api .modal-api-key .content {
padding: 50px 20px;
}
}
.landing-api .api-key {
margin: 50px auto 20px;
max-width: 550px;
}
.landing-api .api-key__box {
background-color: #142a5e;
border-radius: 4px;
height: 68px;
line-height: 68px;
overflow: hidden;
}
.landing-api .api-key__key {
color: #d8d8d8;
font-size: 17px;
}
.landing-api .api-key button {
height: 68px;
line-height: 68px;
width: 32px;
}
@media screen and (max-width: 640px) {
.landing-api .api-key__key {
font-size: 13px;
}
}
.landing-api #footer {
min-height: 0;
margin: 0;
padding: 0;
}
.landing-api #footer div {
position: relative;
}
.landing-api #footer li {
display: inline-block;
}
.landing-api #footer li a {
color: #424242;
font-weight: 400;
}
.landing-api #footer li span {
display: inline-block;
margin: 0 10px;
}
@media screen and (max-width: 1400px) {
.landing-api .features__inner {
text-align: center;
}
.countdown .landing-api .features__inner ul div:first-child,
.landing--register .landing-api .features__inner .separator div:first-child,
.landing-api .features__inner .countdown ul div:first-child,
.landing-api .features__inner .groups__item div:first-child,
.landing-api .features__inner .landing--register .separator div:first-child,
.landing-api .features__inner .profile-login .group div:first-child,
.landing-api .features__inner .row div:first-child,
.profile-login .landing-api .features__inner .group div:first-child {
margin-bottom: 30px;
}
}
@media screen and (max-width: 992px) {
.landing-api .hero {
text-align: center;
}
.landing-api .hero .container {
max-width: 670px;
}
.landing-api .hero__text {
max-width: 530px;
margin: 0 auto 80px;
}
.landing-api .hero__text .documentation-v2 {
text-align: left;
}
.landing-api .examples {
padding: 60px 0;
}
}
@media screen and (max-width: 768px) {
.landing-api .trigger__button,
.landing-api .trigger__close {
display: block;
}
.landing-api .hero {
background-position-x: -35%;
}
.landing-api #menu-api {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a152f;
z-index: 1;
}
.landing-api #menu-api.active {
display: block;
}
.landing-api #menu-api ul {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.landing-api #menu-api li {
display: block;
text-align: center;
margin: 0;
}
.landing-api .code-browser {
position: relative;
left: 0;
bottom: 0;
max-width: none;
}
.landing-api .screen-holder {
background: none;
}
.landing-api .features .features__inner {
box-shadow: none;
margin: 0;
padding: 40px 20px;
}
.landing-api .features .features__inner i {
display: none;
}
.landing-api .features .features__inner span {
font-size: 42px;
}
.landing-api .features .features__inner span + p {
font-size: 14px;
}
.landing-api .what-is {
margin: 60px 0;
}
.landing-api .pricing {
padding: 60px 0;
}
}
@media screen and (max-width: 640px) {
.landing-api .hero .links-content {
flex-wrap: wrap;
}
.landing-api .hero .links-content__buttons {
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.landing-api .hero .links-content__buttons .container-left {
width: 100%;
}
.landing-api .hero .links-content__buttons a {
margin-right: 0;
}
.landing-api .hero .links-content__buttons .documentation-v2 {
text-align: center;
margin-bottom: 20px;
}
}
@media screen and (max-width: 480px) {
.landing-api .logo {
width: auto;
}
}
body[data-trigger='menu-api'] {
overflow: hidden;
}
.typed-cursor {
opacity: 1;
margin-bottom: -2px;
height: 15px;
border-left: 7px solid #fff;
animation: blinker 0.9s steps(2, start) infinite;
}
@keyframes typed-cursor {
to {
visibility: hidden;
}
}
.landing--collections main {
overflow: hidden;
}
.landing--collections #header {
padding: 20px 0;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
}
.landing--collections section {
position: relative;
}
.landing--collections .hero {
background: none;
text-align: left;
padding: 80px;
margin: 0;
color: #777;
}
.landing--collections .hero h2 {
max-width: 400px;
}
@media screen and (min-width: 768px) {
.landing--collections .hero h2 {
font-size: 44px;
}
}
.landing--collections .hero p {
max-width: 470px;
}
.landing--collections .features {
margin-bottom: 100px;
}
.landing--collections .features .container {
position: relative;
padding: 0 40px;
}
.landing--collections .feature {
border-radius: 8px;
box-shadow: 0 0 10px rgba(51, 106, 234, 0.2);
text-align: center;
background-color: #fff;
}
.landing--collections .form {
position: absolute;
pointer-events: none;
}
.landing--collections .form--left {
left: -845px;
top: -479px;
}
.landing--collections .form--right {
right: -615px;
top: -320px;
}
.landing--collections .features__text p {
max-width: 585px;
}
.landing--collections .examples {
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.landing--collections .examples .col__lg--6:first-child {
padding-right: 50px;
}
.landing--collections .examples .col__lg--6:last-child {
padding-left: 50px;
}
.landing--collections .examples p {
max-width: 430px;
}
.landing--collections .example-iconfont {
width: 70%;
margin: -7% 21% 0;
}
.landing--collections .example-svg-sprite {
width: 52%;
margin: -7% 17% 0;
}
.landing--collections .icon-example--iconfont {
margin: -12px 12px 0;
}
.landing--collections .icon-example--svg-sprite {
position: absolute;
bottom: -4%;
right: 5%;
}
.landing--collections .icon-example {
padding: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 10px rgba(51, 106, 234, 0.2);
text-align: center;
font-family:
Consolas,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
display: inline-block;
font-size: 14px;
}
.landing--collections .try {
background-image: linear-gradient(-84deg, #82f08f, #1ebe83);
position: relative;
padding-top: 500px;
margin-top: -500px;
}
.landing--collections .try:before {
content: '';
background: url(../images/mask.6009aaf55d87f93a5ce4bce293a7fbac.svg) no-repeat bottom;
display: block;
width: 100%;
height: 326px;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.landing--collections .try .container {
position: relative;
z-index: 1;
}
.landing--collections .try p {
max-width: 500px;
margin: 0 auto 40px;
}
.landing--collections .try .button {
box-shadow: inset 0 0 0 100px #142a5e;
}
.landing--collections .try .button:hover {
box-shadow: inset 0 0 0 100px #142a5e;
color: #fff;
}
.landing--collections video {
width: 100%;
height: auto;
max-width: 970px;
display: block;
margin: auto;
}
.landing--collections #footer {
border: none;
position: relative;
background: none;
min-height: 0;
margin: 0;
}
.landing--collections #footer:before {
content: '';
background: url(../images/footer.59e7e73c4d94fb9058075835c39943f8.svg) no-repeat
bottom;
display: block;
width: 100%;
height: 652px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.landing--collections #footer div {
position: relative;
}
.landing--collections #footer li {
display: inline-block;
}
.landing--collections #footer li a {
color: #fff;
font-weight: 400;
}
.landing--collections #footer li span {
display: inline-block;
margin: 0 10px;
}
@media screen and (max-width: 992px) {
.landing--collections .features {
margin-bottom: 40px;
}
.landing--collections .features .container {
padding: 0 80px;
}
.landing--collections .features .col.col--stretch,
.landing--collections .features .col.notification__state,
.landing--collections .features .group > .col {
width: 100%;
flex: none;
margin-bottom: 30px;
}
.landing--collections .features img {
margin: 0;
}
.landing--collections .features .feature {
display: flex;
}
.landing--collections .features .feature__text {
text-align: left;
margin-left: 30px;
}
.landing--collections .examples,
.landing--collections .features__text {
padding: 0 80px;
}
.landing--collections .examples .col__lg--6:first-child {
padding: 0;
margin-bottom: 30px;
}
.landing--collections .examples .col__lg--6:last-child {
padding: 0;
}
}
@media screen and (max-width: 768px) {
.landing--collections .hero {
text-align: center;
padding: 0;
}
.landing--collections .hero h2,
.landing--collections .hero p {
margin-left: auto;
margin-right: auto;
}
.landing--collections .features .container {
padding: 0;
}
.landing--collections .feature__holder {
padding: 0 20px;
}
.landing--collections .examples,
.landing--collections .features__text {
padding: 0;
}
.landing--collections .example-svg-sprite {
width: 90%;
margin: -15px auto;
}
.landing--collections .icon-example--iconfont {
margin: -12px -91px 0;
left: 50%;
position: relative;
}
.landing--collections .icon-example--svg-sprite {
position: relative;
margin: -10px -70px 0;
left: 50%;
}
}
@media screen and (max-width: 640px) {
.landing--collections .hero p {
display: block;
}
.landing--collections .features img {
width: 114px;
}
}
@media screen and (max-width: 480px) {
.landing--collections .logo {
width: auto;
}
}
.landing--coronavirus .button:focus,
.landing--coronavirus .button:hover {
color: #fff !important;
}
.landing--coronavirus #header {
border: none;
background: none;
padding: 20px;
margin: 0 0 50px;
position: relative;
}
@media screen and (max-width: 768px) {
.landing--coronavirus #header {
text-align: center;
margin: 0;
}
}
.landing--coronavirus .logo {
display: inline-block;
}
@media screen and (max-width: 480px) {
.landing--coronavirus .logo {
width: auto;
}
}
.landing--coronavirus section {
margin: 0;
}
.landing--coronavirus .container {
max-width: 1120px;
position: relative;
z-index: 1;
}
.landing--coronavirus .hero {
position: relative;
margin-bottom: 30px;
}
.landing--coronavirus .hero:before {
content: '';
display: block;
width: 100%;
height: 80%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(180deg, #fff, #f0f0f0);
}
.landing--coronavirus .hero img {
max-width: 530px;
width: 100%;
margin: auto;
}
@media screen and (max-width: 768px) {
.landing--coronavirus .hero {
text-align: center;
}
.landing--coronavirus .hero h2 {
margin-top: 0;
}
}
.landing--coronavirus .coronavirus__icons {
margin-bottom: 50px;
}
.landing--coronavirus .coronavirus__title {
color: #8f91cf;
}
.landing--coronavirus .coronavirus__icon {
padding: 10px;
max-width: 180px;
min-width: 180px;
}
.landing--coronavirus .coronavirus__icon a {
text-align: center;
display: block;
border-radius: 24px;
background-color: #fff;
transition: box-shadow 0.1s ease-in-out;
padding: 30px 10px;
}
.landing--coronavirus .coronavirus__icon a:hover {
box-shadow: 5px 5px 20px 0 rgba(31, 64, 140, 0.1);
}
.landing--coronavirus .coronavirus__icon__img {
width: 50px;
height: 50px;
margin: 0 auto 20px;
}
.landing--coronavirus .coronavirus__icon__img img {
display: block;
margin: auto;
}
@media screen and (max-width: 768px) {
.landing--coronavirus .coronavirus__icons {
margin-bottom: 40px;
}
.landing--coronavirus .coronavirus__icon {
max-width: 160px;
min-width: 160px;
}
}
.landing--coronavirus .prevent {
padding: 80px 0;
position: relative;
overflow: hidden;
}
.landing--coronavirus .prevent:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #f7f7f7;
}
.landing--coronavirus .prevent .use-icons {
margin-top: 50px;
}
.landing--coronavirus .prevent .use-icons h3,
.landing--coronavirus .prevent .use-icons p {
max-width: 460px;
}
@media screen and (max-width: 768px) {
.landing--coronavirus .prevent {
padding: 40px 0 0;
}
.landing--coronavirus .prevent .use-icons {
margin-top: 0;
}
}
.landing--coronavirus .banner {
margin-bottom: 100px;
position: relative;
}
.landing--coronavirus .banner:before {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background-color: #f7f7f7;
}
.landing--coronavirus .banner .container {
background: url(../images/banner.db29c935b66d9414db7c6de304198980.svg) no-repeat;
background-size: cover;
padding: 50px 50px 0;
border-radius: 10px;
}
.landing--coronavirus .banner__img {
padding-right: 50px;
position: relative;
}
.landing--coronavirus .banner__img img {
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 30px);
}
.landing--coronavirus .banner .button {
background-color: #142a5e;
margin-bottom: 50px;
}
.landing--coronavirus .banner .button:hover {
background-color: #142a5e;
}
@media screen and (max-width: 992px) {
.landing--coronavirus .banner {
text-align: center;
padding: 0 20px;
}
.landing--coronavirus .banner__img {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
padding-right: 0;
}
.landing--coronavirus .banner__img img {
position: relative;
width: 100%;
}
.landing--coronavirus .banner__text {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
}
}
.landing--coronavirus #footer {
background: #0a152f;
color: #fff;
min-height: auto;
margin: 0;
border: none;
}
.landing--coronavirus #footer p {
font-size: 15px;
}
.landing--coronavirus #footer div {
position: relative;
}
.landing--coronavirus #footer li {
display: inline-block;
}
.landing--coronavirus #footer li span {
margin: 0 5px;
}
.landing-craft h6 {
color: #142a5e;
}
.landing-craft__hero {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
}
.landing-craft__hero__text {
width: 50%;
max-width: 510px;
}
.landing-craft__hero__text .pre-title {
color: #286d34;
}
.landing-craft__hero__text h1 {
margin-bottom: 20px;
color: #142a5e;
font-size: 48px;
}
.landing-craft__hero__text p {
color: #424242;
}
.landing-craft__hero__image {
width: 50%;
text-align: center;
}
@media screen and (max-width: 768px) {
.landing-craft__hero {
margin-bottom: 50px;
flex-wrap: wrap;
}
.landing-craft__hero__text {
max-width: unset;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.landing-craft__hero__text h1 {
font-size: 40px;
}
.landing-craft__hero__image {
width: 100%;
}
}
@media screen and (max-width: 480px) {
.landing-craft__hero {
margin-bottom: 30px;
}
.landing-craft__hero__text .pre-title {
font-size: 0.82em;
}
.landing-craft__hero__text h1 {
font-size: 1.92em;
}
.landing-craft__hero__text p {
font-size: 14px;
}
}
.landing-craft__where {
padding: 50px;
margin-bottom: 80px;
background-color: rgba(74, 210, 149, 0.1);
display: flex;
justify-content: space-between;
border-radius: 20px;
}
.landing-craft__where h6 {
max-width: 270px;
width: 30%;
}
.landing-craft__where .where__item {
width: 33%;
display: flex;
}
.landing-craft__where .where__item__image {
flex-shrink: 0;
margin-right: 20px;
width: 44px;
}
.landing-craft__where .where__item__image i:before {
width: 44px;
height: 44px;
background-color: #3b9e62;
color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.landing-craft__where .where__item__text p:first-child {
color: #142a5e;
}
@media screen and (max-width: 992px) {
.landing-craft__where {
flex-wrap: wrap;
}
.landing-craft__where h6 {
max-width: unset;
width: 100%;
margin-bottom: 30px;
}
.landing-craft__where .where__item {
width: 46%;
}
}
@media screen and (max-width: 640px) {
.landing-craft__where {
padding: 30px;
}
.landing-craft__where .where__item {
margin-bottom: 20px;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.landing-craft__where {
margin-bottom: 30px;
}
.landing-craft__where .where__item__image {
display: none;
}
}
.landing-craft__questions {
padding: 30px 60px;
background-color: #44b678;
border-radius: 15px;
color: #f7f7f7;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
}
.landing-craft__questions__text {
margin-right: 20px;
}
.landing-craft__questions__text h6 {
color: #f7f7f7;
margin: 0 0 10px;
}
.landing-craft__questions a {
flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.landing-craft__questions {
margin-bottom: 40px;
padding: 30px 40px;
flex-direction: column;
justify-content: center;
}
.landing-craft__questions__text {
text-align: center;
margin-right: 0;
margin-bottom: 30px;
}
}
@media screen and (max-width: 480px) {
.landing-craft__questions {
padding: 30px;
margin-bottom: 30px;
}
.landing-craft__questions a {
width: 100%;
}
}
.landing-craft__comparison {
margin-top: 30px;
margin-bottom: 80px;
}
.landing-craft__comparison input[type='radio'],
.landing-craft__comparison input[type='radio'].r-advantages ~ .advantages,
.landing-craft__comparison input[type='radio'].r-cantdo ~ .cantdo {
display: none;
}
.landing-craft__comparison input[type='radio'].r-advantages:checked ~ .advantages,
.landing-craft__comparison input[type='radio'].r-cantdo:checked ~ .cantdo {
display: grid;
}
.landing-craft__comparison
input[type='radio'].r-advantages:checked
~ .tabs
.item__link.advantages__button,
.landing-craft__comparison
input[type='radio'].r-cantdo:checked
~ .tabs
.item__link.cantdo__button {
background-color: #fff;
color: #424242;
border-radius: 6px;
}
.landing-craft__comparison
input[type='radio'].r-advantages:checked
~ .tabs
.item__link.advantages__button:hover,
.landing-craft__comparison
input[type='radio'].r-cantdo:checked
~ .tabs
.item__link.cantdo__button:hover {
border: 2px solid #e5e5e5;
}
.landing-craft__comparison .tabs {
align-items: stretch;
background-color: #e5e5e5;
border-radius: 6px;
flex-wrap: nowrap;
margin: 0 auto 30px;
overflow: hidden;
width: fit-content;
}
.landing-craft__comparison .tabs .item {
padding: 0;
min-height: 34px;
align-items: stretch;
display: flex;
border-radius: 6px;
margin: 0;
text-transform: none;
font-weight: 600;
white-space: nowrap;
}
.landing-craft__comparison .tabs .item__link {
border: 2px solid #e5e5e5;
background-color: #e5e5e5;
height: unset;
display: flex;
align-items: center;
padding: 0 20px;
color: #5b5b5b;
min-height: 30px;
cursor: pointer;
border-radius: 6px;
}
.landing-craft__comparison .tabs .item__link:hover {
background-color: #d8d8d8;
border: 2px solid #d8d8d8;
}
#notification-cart .notification__close .landing-craft__comparison .tabs i,
.landing-craft__comparison .tabs #notification-cart .notification__close i,
.landing-craft__comparison .tabs .icon,
.landing-craft__comparison .tabs .notification--alert i,
.notification--alert .landing-craft__comparison .tabs i {
padding-left: 10px;
}
#notification-cart
.notification__close
.notification--success
.notification__state
.landing-craft__comparison
.tabs
i:not(.nostyle):before,
.landing-craft__comparison
.tabs
#notification-cart
.notification__close
.notification--success
.notification__state
i:not(.nostyle):before,
.landing-craft__comparison .tabs .icon--check:before,
.landing-craft__comparison .tabs .icon--success:before,
.landing-craft__comparison
.tabs
.notification--alert
.notification--success
.notification__state
i:not(.nostyle):before,
.landing-craft__comparison
.tabs
.notification--success
.notification__state
#notification-cart
.notification__close
i:not(.nostyle):before,
.landing-craft__comparison
.tabs
.notification--success
.notification__state
.icon:not(.nostyle):before,
.landing-craft__comparison
.tabs
.notification--success
.notification__state
.notification--alert
i:not(.nostyle):before,
.notification--alert
.notification--success
.notification__state
.landing-craft__comparison
.tabs
i:not(.nostyle):before,
.notification--success
.notification__state
#notification-cart
.notification__close
.landing-craft__comparison
.tabs
i:not(.nostyle):before,
.notification--success
.notification__state
.landing-craft__comparison
.tabs
.icon:not(.nostyle):before,
.notification--success
.notification__state
.notification--alert
.landing-craft__comparison
.tabs
i:not(.nostyle):before {
color: #32864c;
}
.landing-craft__comparison .tabs .icon--cross:before {
color: #ff7d6a;
}
.landing-craft__comparison .table_content {
display: grid;
color: #424242;
grid-template-areas: 'd d d f' 'g g g i' 'j j j l' 'm m m o' 'p p p r' 's s s u';
grid-template-columns: 1fr 1fr 1fr 0.7fr;
}
.landing-craft__comparison .table_content > div {
padding: 20px;
}
.landing-craft__comparison .table_content div[class^='header'] {
font-weight: 700;
text-align: center;
}
.landing-craft__comparison .table_content .green-line {
grid-area: 1/4/8/5;
border: 1px solid #44b678;
border-radius: 20px;
z-index: 10;
}
.landing-craft__comparison .table_content .red-line {
grid-area: 1/4/8/5;
border: 1px solid #ff7d6a;
border-radius: 20px;
z-index: 10;
}
.landing-craft__comparison .table_content .gray-line {
grid-area: 1/1/8/5;
border: 1px solid #e5e5e5;
border-radius: 20px;
z-index: 5;
}
.landing-craft__comparison .table_content div[class$='-craft'],
.landing-craft__comparison .table_content div[class$='-regular'] {
text-align: center;
display: flex;
align-items: center;
}
.landing-craft__comparison .table_content.advantages div[class^='fifth'],
.landing-craft__comparison .table_content div[class^='first'],
.landing-craft__comparison .table_content div[class^='forth'],
.landing-craft__comparison .table_content div[class^='second'],
.landing-craft__comparison .table_content div[class^='third'] {
border-bottom: 1px solid #e5e5e5;
}
.landing-craft__comparison .table_content .first-text {
grid-area: d;
}
.landing-craft__comparison .table_content .first-craft {
grid-area: f;
}
.landing-craft__comparison .table_content .second-text {
grid-area: g;
}
.landing-craft__comparison .table_content .second-craft {
grid-area: i;
}
.landing-craft__comparison .table_content .third-text {
grid-area: j;
}
.landing-craft__comparison .table_content .third-craft {
grid-area: l;
}
.landing-craft__comparison .table_content .forth-text {
grid-area: m;
}
.landing-craft__comparison .table_content .forth-craft {
grid-area: o;
}
.landing-craft__comparison .table_content .fifth-text {
grid-area: p;
}
.landing-craft__comparison .table_content .fifth-craft {
grid-area: r;
}
.landing-craft__comparison .table_content .sixth-text {
grid-area: s;
}
.landing-craft__comparison .table_content .sixth-craft {
grid-area: u;
}
#notification-cart
.notification__close
.notification--success
.notification__state
.landing-craft__comparison
.table_content
i:not(.nostyle):before,
.landing-craft__comparison
.table_content
#notification-cart
.notification__close
.notification--success
.notification__state
i:not(.nostyle):before,
.landing-craft__comparison .table_content .icon--check:before,
.landing-craft__comparison .table_content .icon--success:before,
.landing-craft__comparison
.table_content
.notification--alert
.notification--success
.notification__state
i:not(.nostyle):before,
.landing-craft__comparison
.table_content
.notification--success
.notification__state
#notification-cart
.notification__close
i:not(.nostyle):before,
.landing-craft__comparison
.table_content
.notification--success
.notification__state
.icon:not(.nostyle):before,
.landing-craft__comparison
.table_content
.notification--success
.notification__state
.notification--alert
i:not(.nostyle):before,
.notification--alert
.notification--success
.notification__state
.landing-craft__comparison
.table_content
i:not(.nostyle):before,
.notification--success
.notification__state
#notification-cart
.notification__close
.landing-craft__comparison
.table_content
i:not(.nostyle):before,
.notification--success
.notification__state
.landing-craft__comparison
.table_content
.icon:not(.nostyle):before,
.notification--success
.notification__state
.notification--alert
.landing-craft__comparison
.table_content
i:not(.nostyle):before {
color: #32864c;
}
.landing-craft__comparison .table_content .icon--cross:before {
color: #ff7d6a;
}
@media screen and (max-width: 768px) {
.landing-craft__comparison .table_content {
margin-bottom: 50px;
}
}
@media screen and (max-width: 480px) {
.landing-craft__comparison .table_content {
margin-bottom: 30px;
}
.landing-craft__comparison .table_content > div {
padding: 5px;
font-size: 0.82em;
}
.landing-craft__comparison .table_content .green-line {
border-radius: 8px;
}
.landing-craft__comparison .table_content .gray-line {
border-radius: 8px 0 8px 8px;
}
}
.landing-craft__comparison .summary-text {
text-align: center;
max-width: 610px;
margin: 0 auto;
color: #424242;
font-size: 12px;
}
.landing-craft__comparison .summary-text a {
color: #32864c;
}
.landing-craft__faq {
padding: 30px 0;
}
.landing-craft__faq li {
border-radius: 4px;
border: 1px solid #d8d8d8;
position: relative;
padding: 50px 30px;
margin-bottom: 20px;
}
.landing-craft__faq a {
color: #286d34;
}
.landing-craft__faq__row {
padding-left: 140px;
position: relative;
}
.landing-craft__faq__row > strong {
color: #32864c;
position: absolute;
top: 0;
left: 0;
display: block;
width: 120px;
font-size: 13px;
}
.landing-craft__faq__row p {
margin: 0;
}
@media screen and (max-width: 768px) {
.landing-craft__faq li {
padding: 20px;
}
.landing-craft__faq__row {
padding-left: 0;
}
.landing-craft__faq__row > strong {
width: auto;
position: relative;
}
}
.craft-licenses {
background-color: #f7f7f7;
}
.craft-licenses__list {
background-color: #fff;
width: 100%;
padding: 30px;
border-radius: 8px;
}
.craft-licenses__list .table_content {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.craft-licenses__list .table_content > div {
padding: 15px 30px;
}
.craft-licenses__list .table_content > div[class^='table-header'] {
font-weight: 700;
text-transform: uppercase;
}
.craft-licenses__list .table_content > div:not([class^='table-header']) {
align-items: center;
border-top: 1px solid #e5e5e5;
display: flex;
}
.craft-licenses__list .table_content .license a,
.craft-licenses__list .table_content .license button {
padding: 0 20px;
}
.craft-licenses__list .table_content .download button {
align-items: center;
display: flex;
padding: 0 20px;
}
.craft-licenses__list .table_content .download button i {
color: #fff;
}
.craft-licenses__list .table_content .download .popover .popover-content {
right: unset;
width: 100%;
top: 44px;
border: none;
}
.craft-licenses__list .table_content .download .popover .popover-content:after,
.craft-licenses__list .table_content .download .popover .popover-content:before,
.craft-licenses__list .table_content .download .popover .popover-content input {
display: none;
}
.craft-licenses__list
.table_content
.download
.popover
.popover-content
input[type='checkbox']:checked
+ div {
display: block;
}
.craft-licenses__list .table_content .download .popover .popover-content a,
.craft-licenses__list .table_content .download .popover .popover-content label {
width: 100%;
}
.craft-licenses__list
.table_content
.download
.popover
.popover-content
label
.icon--caret-down {
position: absolute;
right: 20px;
}
.craft-licenses__list .table_content .download .popover .popover-content .sizes {
display: none;
margin-top: 10px;
}
.craft-licenses__list .table_content.gray-line {
border: 1px solid #e5e5e5;
border-top: none;
border-radius: 6px;
}
.craft-licenses__list .table_content .pending {
color: #f4980a;
}
#notification-cart .notification__close .craft-licenses__list .table_content .pending i,
.craft-licenses__list .table_content .pending #notification-cart .notification__close i,
.craft-licenses__list .table_content .pending .icon,
.craft-licenses__list .table_content .pending .notification--alert i,
.notification--alert .craft-licenses__list .table_content .pending i {
color: #f4980a;
padding-left: 5px;
vertical-align: text-bottom;
}
.craft-licenses__list .table_content .pending .tooltip__content .content {
background-color: #fff;
color: #5b5b5b;
}
.craft-licenses__list .table_content .pending .tooltip__trigger:after {
border-top: 6px solid #fff !important;
z-index: 400;
}
@media screen and (max-width: 992px) {
.craft-licenses__list .table_content {
grid-template-columns: 1fr 115px 115px;
}
.craft-licenses__list .table_content .table-header:nth-child(2) {
display: none;
}
.craft-licenses__list .table_content .table-header:not(:first-child) {
padding: 15px 0;
}
.craft-licenses__list .table_content > div:not([class^='table-header']).pack {
display: none !important;
}
.craft-licenses__list .table_content > div {
padding: 15px 20px;
}
.craft-licenses__list .table_content .download,
.craft-licenses__list .table_content .license {
padding: 0;
}
}
.craft-licenses .empty {
text-align: center;
height: calc(100vh - 200px);
}
.craft-licenses .empty a {
color: #286d34;
}
.page-craft-purchases {
padding-top: 0 !important;
}
.page-craft-purchases #viewport {
padding-top: 54px;
}
.landing-follow #header {
padding: 20px 0;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
}
.landing-follow main {
background: url(../images/form3.8278f5157620fd86bc6550a7f9864945.svg) no-repeat bottom;
overflow: hidden;
}
.landing-follow section .easeInBottom {
opacity: 0;
transform: translateY(100px);
}
.landing-follow #animation--intro {
position: absolute;
top: 50%;
left: 0;
width: 820px;
height: 625px;
transform: translateY(-50%);
}
.landing-follow #animation--features {
position: absolute;
top: 50%;
left: 0;
width: 675px;
height: 564px;
transform: translateY(-50%);
}
.landing-follow #animation--footer {
width: 1319px;
height: 580px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.landing-follow .footer__image {
position: relative;
z-index: 1;
}
.landing-follow #footer {
min-height: 185px;
background: url(../images/footer.89fe9bc9a2f9e738910ab90358d4b255.svg) no-repeat
bottom;
border: none;
position: relative;
}
.landing-follow #footer div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 20px 10px;
}
.landing-follow #footer ul {
margin-top: 10px;
}
.landing-follow #footer li {
display: inline-block;
}
.landing-follow #footer li a {
color: #9c9c9c;
font-weight: 400;
}
.landing-follow #footer li a:not(.btn):not(.bj-button) {
color: #9c9c9c;
}
.landing-follow #footer li a:not(.btn):not(.bj-button):hover {
color: #777;
}
.landing-follow #footer li span {
display: inline-block;
margin: 0 10px;
}
@media screen and (min-width: 768px) {
.landing-follow .section--full {
height: 100vh;
min-height: 800px;
}
.landing-follow .features__form {
position: relative;
}
.landing-follow .features__form--inner {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
}
@media screen and (max-width: 768px) {
.landing-follow main {
background-size: 4600px;
text-align: center;
}
.landing-follow .features__form {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
.landing-follow #animation--features,
.landing-follow #animation--intro {
width: 100%;
top: 0;
height: auto;
transform: none;
}
.landing-follow #animation--footer {
width: 600px;
height: auto;
}
}
.landing-gsuite main {
overflow: hidden;
}
.landing-gsuite .container {
max-width: 1100px;
}
@media screen and (max-width: 480px) {
.landing-gsuite .logo {
width: auto;
}
}
.landing-gsuite #header {
border: none;
background: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
padding: 20px 0;
}
@media screen and (max-width: 768px) {
.landing-gsuite #header {
position: absolute;
}
}
.landing-gsuite .hero {
margin: 150px 0 60px;
position: relative;
}
.landing-gsuite .hero:before {
content: '';
display: block;
position: absolute;
top: -150px;
right: 0;
width: 276px;
height: 384px;
background: url(../images/top-right.14bb0587a5333e9f0534235ad37ff2c2.svg) no-repeat
50%;
z-index: -1;
}
.landing-gsuite .hero:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 405px;
height: 818px;
background: url(../images/top-left.43e2fae97358870614abc2132446034a.svg) no-repeat 50%;
z-index: -1;
}
@media screen and (max-width: 992px) {
.landing-gsuite .hero:after {
left: -100px;
}
}
@media screen and (max-width: 1400px) {
.landing-gsuite .hero:after {
left: -200px;
}
}
@media screen and (max-width: 768px) {
.landing-gsuite .hero {
margin-bottom: 100px;
}
.landing-gsuite .hero:before {
top: -100px;
right: -100px;
}
.landing-gsuite .hero:after {
left: -300px;
}
}
.landing-gsuite .example {
margin-bottom: 70px;
}
.landing-gsuite .example video {
width: 100%;
height: auto;
max-width: 1100px;
display: block;
margin: auto;
box-shadow: 10px 10px 20px 0 rgba(8, 25, 43, 0.15);
border-radius: 4px;
}
.landing-gsuite .steps {
background-color: #142a5e;
counter-reset: steps;
padding: 0 0 100px;
position: relative;
margin: 0;
}
.landing-gsuite .steps:before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 500px;
background: url(../images/blue-form.c89a8201a09df90906536b278c96193f.svg) no-repeat
50%;
margin-bottom: -2px;
z-index: -1;
}
.landing-gsuite .steps p:first-child {
color: #c8c8c8;
}
.landing-gsuite .steps__item {
position: relative;
max-width: 255px;
margin: auto;
}
.landing-gsuite .steps__content {
position: relative;
}
.landing-gsuite .steps__content:before {
counter-increment: steps;
content: counter(steps);
position: absolute;
top: 0;
right: 0;
font-size: 200px;
font-weight: 700;
color: #1f408c;
line-height: 135px;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
.landing-gsuite .steps__content * {
position: relative;
color: #fff;
}
@media screen and (max-width: 992px) {
.landing-gsuite .steps {
padding: 0 0 40px;
}
.landing-gsuite .steps__item {
flex: none;
width: 100%;
max-width: none;
margin-bottom: 40px;
max-width: 500px;
}
.landing-gsuite .steps__content:before {
font-size: 100px;
line-height: 100px;
}
}
.landing-gsuite .applications {
padding: 100px 0;
margin: 0;
}
.landing-gsuite .applications__content {
padding: 0 30px;
}
.landing-gsuite .applications h2 {
max-width: 430px;
margin: 0 auto 80px;
}
@media screen and (max-width: 768px) {
.landing-gsuite .applications {
padding: 40px 0;
}
.landing-gsuite .applications h2 {
margin-bottom: 40px;
}
.landing-gsuite .applications__content {
padding: 0;
}
.landing-gsuite .applications__text {
font-size: 12px;
}
.landing-gsuite .applications .font-h6 {
font-size: 17px;
}
}
.landing-gsuite .blocks {
margin-top: 100px;
}
.landing-gsuite .blocks__item {
margin-bottom: 140px;
}
.landing-gsuite .blocks__item--search .blocks__image:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 718px;
height: 678px;
background: url(../images/search-form.ecf422cac0e1b913252e6f5940d7c746.svg) no-repeat
50%;
z-index: -1;
}
.landing-gsuite .blocks__item--style .blocks__image:before {
content: '';
display: block;
position: absolute;
top: -120px;
right: 65px;
width: 718px;
height: 678px;
background: url(../images/style-form.f66a973719139d2e124ac63bee7f0c55.svg) no-repeat
50%;
z-index: -1;
}
.landing-gsuite .blocks__item--color .blocks__image:before {
content: '';
display: block;
position: absolute;
top: -50px;
left: -100px;
width: 612px;
height: 578px;
background: url(../images/color-form.0b0db62c2330ec339a9416761d3a6001.svg) no-repeat
50%;
z-index: -1;
}
@media screen and (max-width: 768px) {
.landing-gsuite .blocks {
margin-top: 40px;
}
.landing-gsuite .blocks__item {
margin-bottom: 40px;
}
.landing-gsuite .blocks__text {
-webkit-box-ordinal-group: 0;
-moz-box-ordinal-group: 0;
box-ordinal-group: 0;
-webkit-order: 0;
-moz-order: 0;
order: 0;
-ms-flex-order: 0;
}
.landing-gsuite .blocks__image {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
}
.landing-gsuite .testimonial {
padding: 100px 0;
background: url(../images/bg-testimonial.4658c1b9bdcdf5d684395892396a3f79.svg)
no-repeat 50%;
background-size: cover;
margin: 0;
}
.landing-gsuite .testimonial__holder {
max-width: 625px;
margin: auto;
}
.landing-gsuite .testimonial__holder:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 460px;
height: 450px;
background: url(../images/testimonial-form.0ab5781157e0ae12528d659250534f9a.svg)
no-repeat 50%;
z-index: -1;
}
.landing-gsuite .testimonial__swiper {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 30px 0 rgba(8, 25, 43, 0.1);
overflow: hidden;
}
@media screen and (max-width: 992px) {
.landing-gsuite .testimonial {
text-align: center;
padding: 40px 0;
}
.landing-gsuite .testimonial__holder:before {
margin-top: 40px;
}
.landing--register .landing-gsuite .testimonial a.separator,
.landing-gsuite .testimonial .landing--register a.separator,
.landing-gsuite .testimonial .profile-login a.group,
.landing-gsuite .testimonial a.groups__item,
.landing-gsuite .testimonial a.row,
.profile-login .landing-gsuite .testimonial a.group {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
margin-bottom: 40px;
}
}
.landing-gsuite .swiper__item {
position: relative;
text-align: left;
}
.landing-gsuite .swiper__item:before {
content: open-quote;
position: absolute;
top: -2px;
left: 24px;
color: #f0f0f0;
font-size: 160px;
line-height: 160px;
z-index: 1;
}
.landing-gsuite .swiper__item .content {
padding: 50px;
position: relative;
z-index: 2;
}
.landing-gsuite .swiper__item .avatar {
width: 50px;
height: 50px;
}
.landing-gsuite .swiper__navigation {
position: absolute;
bottom: 50px;
right: 50px;
}
.landing-gsuite .swiper__navigation button:hover {
background: none;
}
@media screen and (max-width: 640px) {
.landing-gsuite .swiper__item .content {
padding: 30px 30px 60px;
}
.landing-gsuite .swiper__item .content .font-lg {
font-size: 15px;
}
.landing-gsuite .swiper__navigation {
right: 30px;
bottom: 30px;
}
}
.landing-gsuite .features {
padding: 100px 0;
margin: 0;
}
.landing-gsuite .features h2 {
margin-bottom: 80px;
}
.landing-gsuite .features li {
margin-bottom: 20px;
max-width: 380px;
}
.landing-gsuite .features .circles-holder img:nth-child(n + 2) {
position: absolute;
top: 0;
left: 0;
animation: floating 5s ease-in-out infinite;
}
.landing-gsuite .features .circles-holder img:nth-child(3) {
animation-delay: 1s;
}
.landing-gsuite .features .circles-holder img:nth-child(4) {
animation-delay: 2s;
}
.landing-gsuite .features .circles-holder img:nth-child(5) {
animation-delay: 3s;
}
.landing-gsuite .features .circles-holder img:nth-child(6) {
animation-delay: 4s;
}
@media screen and (max-width: 768px) {
.landing-gsuite .features {
padding: 40px 0;
}
.landing-gsuite .features h2 {
margin-bottom: 40px;
}
}
.landing-gsuite .banner {
margin-bottom: 100px;
}
.landing-gsuite .banner__container {
border-radius: 10px;
background: url(../images/banner.b693309fa4a499c506223a3c09d870ab.svg) no-repeat 50%;
background-size: cover;
}
.landing-gsuite .banner__content {
max-width: 620px;
margin: auto;
padding: 50px 30px;
}
@media screen and (max-width: 768px) {
.landing-gsuite .banner {
margin-bottom: 40px;
}
.landing-gsuite .banner__content {
padding: 30px;
}
}
.landing-gsuite .slide-in {
position: absolute;
top: 0;
left: 0;
}
.landing-gsuite .active .slide-in {
transform: none;
}
.landing-gsuite a:not(.btn):not(.bj-button).button:hover {
color: #fff;
}
@media screen and (min-width: 768px) {
.landing-gsuite .slide-in {
transform: translateY(100px);
transition: transform 1s ease-in-out;
}
}
.landing-gsuite .nowrap {
white-space: nowrap;
}
.landing-gsuite #footer {
background: #0a152f;
color: #fff;
min-height: auto;
margin: 0;
border: none;
padding: 10px 0;
}
.landing-gsuite #footer p {
font-size: 15px;
}
.landing-gsuite #footer div {
position: relative;
}
.landing-gsuite #footer li {
display: inline-block;
}
.landing-gsuite #footer li span {
margin: 0 5px;
}
.landing--icons-editor #header {
background: none;
border-bottom: 1px solid hsla(0, 0%, 100%, 0.15);
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
padding: 20px;
}
.landing--icons-editor .hero {
background-size: 800% 800%;
padding-top: 180px;
position: relative;
}
.landing--icons-editor .hero .gradient {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.landing--icons-editor .hero .gradient--green {
background: linear-gradient(270deg, #8df690, #3b9e62);
}
.landing--icons-editor .hero .gradient--purple {
animation: editorHero 20s ease infinite;
background: linear-gradient(270deg, #8f91cf, #353777);
}
.landing--icons-editor .hero div {
position: relative;
z-index: 1;
}
.landing--icons-editor .hero a,
.landing--icons-editor .hero a:hover {
box-shadow: inset 0 0 0 100px #142a5e;
}
.landing--icons-editor .hero a:active,
.landing--icons-editor .hero a:focus {
box-shadow: inset 0 0 0 100px #1f408c;
}
.landing--icons-editor .hero img {
max-width: 1000px;
width: 100%;
}
.landing--icons-editor .hero:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -1px;
height: 325px;
width: 100%;
background: url(../images/mask.8d07ceb5d38787297169fdfa2f1e9beb.svg) repeat-x -175px;
}
.landing--icons-editor .steps {
margin-bottom: 200px;
padding-top: 100px;
}
.landing--icons-editor .steps ol {
counter-reset: steps-counter;
}
.landing--icons-editor .steps ol li {
counter-increment: steps-counter;
position: relative;
padding-left: 70px;
margin-bottom: 50px;
}
.landing--icons-editor .steps ol li:before {
content: counter(steps-counter);
color: #f0f0f0;
font-weight: 700;
font-size: 40px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #f0f0f0;
display: block;
text-align: center;
line-height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
.landing--icons-editor .example {
margin-bottom: 100px;
}
.landing--icons-editor .example input {
display: none;
appearance: none;
}
.landing--icons-editor .example input:first-of-type:checked ~ .slider li:first-child img {
opacity: 1;
}
.landing--icons-editor
.example
input:first-of-type:checked
~ .slider__controls
li:first-child
label {
box-shadow: inset 0 0 0 2px #424242;
}
.landing--icons-editor
.example
input:nth-of-type(2):checked
~ .slider
li:nth-child(2)
img {
opacity: 1;
}
.landing--icons-editor
.example
input:nth-of-type(2):checked
~ .slider__controls
li:nth-child(2)
label {
box-shadow: inset 0 0 0 2px #424242;
}
.landing--icons-editor
.example
input:nth-of-type(3):checked
~ .slider
li:nth-child(3)
img {
opacity: 1;
}
.landing--icons-editor
.example
input:nth-of-type(3):checked
~ .slider__controls
li:nth-child(3)
label {
box-shadow: inset 0 0 0 2px #424242;
}
.landing--icons-editor .slider {
padding: 0;
}
.landing--icons-editor .slider li {
position: absolute;
top: 0;
left: 0;
padding: 72px 52px;
width: 100%;
}
.landing--icons-editor .slider img {
display: block;
box-shadow: 0 0 10px rgba(31, 64, 140, 0.15);
margin: auto;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.landing--icons-editor .slider__controls {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.landing--icons-editor .slider__controls label {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 20px 0;
cursor: pointer;
}
.landing--icons-editor .slider__controls label[for='slider--green'] {
background-color: #7be2b1;
}
.landing--icons-editor .slider__controls label[for='slider--purple'] {
background-color: #d5d6f2;
}
.landing--icons-editor .slider__controls label[for='slider--yellow'] {
background-color: #ffe6a7;
}
.landing--icons-editor .selector {
margin: -36px auto 0;
display: block;
}
.landing--icons-editor #footer {
background: none;
min-height: 185px;
border: none;
position: relative;
margin: 0;
padding: 0;
}
.landing--icons-editor #footer div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.landing--icons-editor #footer .editor-screen {
position: relative;
z-index: 2;
max-width: 100%;
}
.landing--icons-editor #footer .footer--back {
background: url(../images/footer-back.24923a5480e5a67d90fb62f57f9f3a95.svg) no-repeat
bottom;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.landing--icons-editor #footer .footer--front {
background: url(../images/footer-front.a623a7df5d5f0bb4564127957074a6c6.svg) no-repeat
bottom;
z-index: 3;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.landing--icons-editor #footer .footer--text {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 4;
padding: 20px 20px 10px;
}
.landing--icons-editor #footer ul {
margin-top: 10px;
}
.landing--icons-editor #footer li {
display: inline-block;
}
.landing--icons-editor #footer li a {
color: #fff;
font-weight: 400;
}
.landing--icons-editor #footer li span {
display: inline-block;
margin: 0 10px;
}
@media screen and (max-width: 1400px) {
.landing--icons-editor .hero img,
.landing--icons-editor .steps img {
height: auto;
}
}
@media screen and (max-width: 768px) {
.landing--icons-editor #header {
position: absolute;
}
.landing--icons-editor h4 {
text-align: center;
}
.landing--icons-editor ol {
padding: 0 50px;
}
.landing--icons-editor .steps {
padding-top: 25px;
margin-bottom: 50px;
}
.landing--icons-editor .steps img {
max-width: 100%;
}
.landing--icons-editor .example .example__text {
order: 0;
text-align: center;
margin-bottom: 50px;
}
.landing--icons-editor .example .example__slider {
order: 1;
}
}
@media screen and (max-width: 640px) {
.landing--icons-editor .hero {
padding-top: 120px;
}
.landing--icons-editor ol {
padding: 0;
}
.landing--icons-editor .footer--text {
font-size: 12px;
}
}
@media screen and (max-width: 480px) {
.landing--icons-editor .logo {
width: auto;
}
}
section .easeInBottom {
opacity: 0;
transform: translateY(100px);
}
section .easeInBottom h2 {
font-size: 44px;
}
@media screen and (max-width: 768px) {
section .easeInBottom h2 {
font-size: 36px;
}
}
section.active .easeInBottom {
animation: easeInBottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
section.active .easeInBottom.delay--1 {
animation-delay: 0.3s;
}
section.active .easeInBottom.delay--2 {
animation-delay: 0.45s;
}
section.active .easeInBottom.delay--3 {
animation-delay: 0.6s;
}
@keyframes editorHero {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.landing--pattern main {
overflow: hidden;
}
.landing--pattern #header {
border: none;
background: none;
padding: 20px;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
@media screen and (max-width: 640px) {
.landing--pattern #header {
text-align: center;
}
}
.landing--pattern .logo {
display: inline-block;
}
@media screen and (max-width: 480px) {
.landing--pattern .logo {
width: auto;
}
}
.landing--pattern section {
margin: 0;
}
.landing--pattern .container {
max-width: 1080px;
position: relative;
z-index: 1;
}
.landing--pattern .hero {
background: url(../images/bg-hero.e69e2d4221d409512ded82bf5757646e.svg);
padding: 90px 0 0;
}
.landing--pattern .hero:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #8f91cf 0, #8f91cf 50%, transparent);
}
.landing--pattern .hero .container {
position: relative;
z-index: 1;
}
.landing--pattern .hero p {
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.landing--pattern .hero img {
box-shadow: 0 0 20px rgba(8, 25, 43, 0.5);
position: relative;
top: 70px;
}
.landing--pattern .features {
background-color: #0a152f;
padding: 170px 0 100px;
position: relative;
}
.landing--pattern .features:before {
width: 132px;
height: 403px;
left: 0;
background: url(../images/form-blue-left.48bda3518801d203d5dd1bb10879c23d.svg)
no-repeat;
background-size: 100%;
}
.landing--pattern .features:after,
.landing--pattern .features:before {
content: '';
display: block;
position: absolute;
bottom: 0;
pointer-events: none;
}
.landing--pattern .features:after {
width: 244px;
height: 308px;
right: 0;
background: url(../images/form-blue-right.0516ef15ba96231ecc46fc8f857f82ed.svg)
no-repeat;
background-size: 100%;
}
.landing--pattern .features i {
color: #8f91cf;
}
.landing--pattern .features p:not(.text-inverted) {
color: #b1b1b1;
max-width: 420px;
}
@media screen and (max-width: 768px) {
.landing--pattern .features:before {
left: -100px;
}
.landing--pattern .features:after {
right: -200px;
}
.landing--pattern .features__feature {
margin-bottom: 30px !important;
}
.landing--pattern .features i {
width: 20px;
height: 20px;
font-size: 20px;
line-height: 20px;
margin: 10px 20px 0 0;
}
}
@media screen and (max-width: 640px) {
.landing--pattern .features {
padding: 120px 0 0;
}
.landing--pattern .features:after,
.landing--pattern .features:before {
display: none;
}
}
.landing--pattern .edit-formats {
padding-top: 100px;
}
.landing--pattern .edit-formats p {
max-width: 480px;
}
@media screen and (max-width: 768px) {
.landing--pattern .edit-formats {
text-align: center;
}
.landing--pattern .edit-formats__image {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
-webkit-order: 2;
-moz-order: 2;
order: 2;
-ms-flex-order: 2;
}
.landing--pattern .edit-formats__text {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
.countdown .landing--pattern .edit-formats ul,
.landing--pattern .edit-formats .countdown ul,
.landing--pattern .edit-formats .groups__item,
.landing--pattern .edit-formats .landing--register .separator,
.landing--pattern .edit-formats .profile-login .group,
.landing--pattern .edit-formats .row,
.landing--register .landing--pattern .edit-formats .separator,
.profile-login .landing--pattern .edit-formats .group {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.landing--pattern .edit-formats p {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 640px) {
.landing--pattern .edit-formats {
padding: 40px 0;
}
}
.landing--pattern .inspired {
padding: 100px 0;
background-color: #f7f7f7;
position: relative;
margin-top: 140px;
}
.landing--pattern .inspired:before {
content: '';
display: block;
width: 333px;
height: 538px;
position: absolute;
left: 0;
bottom: 0;
pointer-events: none;
background: url(../images/form-gray-left.b95daaa6b2e1b83e83304a02ef4e01b7.svg)
no-repeat;
background-size: 100%;
}
.landing--pattern .inspired:after {
content: '';
display: block;
width: 260px;
height: 333px;
position: absolute;
right: 0;
top: 0;
pointer-events: none;
background: url(../images/form-gray-right.76ab48faf4776c8bb9d2a9fe666d7451.svg)
no-repeat;
background-size: 100%;
}
.landing--pattern .inspired p {
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.landing--pattern .inspired .carousel {
position: relative;
pointer-events: none;
height: 368px;
margin-top: 70px;
}
.landing--pattern .inspired .carousel__content {
background-repeat: repeat-x;
background-size: contain;
height: 368px;
position: absolute;
top: 0;
left: -1940px;
width: 5820px;
background-image: url(../images/0146b9d0da118f525288734bbf39dc99.png);
animation: carouselPattern 30s linear infinite;
}
@media screen and (max-width: 1400px) {
.landing--pattern .inspired:before {
left: -200px;
}
.landing--pattern .inspired:after {
right: -200px;
}
}
@media screen and (max-width: 992px) {
.landing--pattern .inspired:after,
.landing--pattern .inspired:before {
display: none;
}
.landing--pattern .inspired .carousel {
height: 304px;
}
.landing--pattern .inspired .carousel__content {
height: 304px;
animation: carouselPatternTablet 30s linear infinite;
}
}
@media screen and (max-width: 768px) {
.landing--pattern .inspired .carousel {
height: 152px;
margin-top: 40px;
}
.landing--pattern .inspired .carousel__content {
height: 152px;
animation: carouselPatternMobile 30s linear infinite;
}
}
@media screen and (max-width: 640px) {
.landing--pattern .inspired {
padding: 40px 0;
margin-top: 40px;
}
}
.landing--pattern .end {
background: url(../images/bg-bottom.0d64161ec38737720285872304b422ed.svg);
padding: 120px 0;
position: relative;
}
.landing--pattern .end:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #142a5e, transparent);
}
.landing--pattern .end .container {
position: relative;
z-index: 1;
}
.landing--pattern .end p {
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.landing--pattern .end .font-h4 {
max-width: 590px;
}
@media screen and (max-width: 640px) {
.landing--pattern .end {
padding: 60px 0;
}
}
.landing--pattern #footer {
background: #0a152f;
color: #fff;
min-height: auto;
margin: 0;
border: none;
padding: 0;
}
.landing--pattern #footer p {
font-size: 15px;
}
.landing--pattern #footer div {
position: relative;
}
.landing--pattern #footer li {
display: inline-block;
}
.landing--pattern #footer li span {
margin: 0 5px;
}
@keyframes carouselPattern {
0% {
transform: translateX(0);
}
to {
transform: translateX(1940px);
}
}
@keyframes carouselPatternTablet {
0% {
transform: translateX(0);
}
to {
transform: translateX(1600px);
}
}
@keyframes carouselPatternMobile {
0% {
transform: translateX(0);
}
to {
transform: translateX(800px);
}
}
.landing--register {
height: 100vh;
}
.landing--register .row--main {
height: 100%;
}
.landing--register .left {
height: 100%;
max-height: 100vh;
min-width: 40%;
transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.landing--register .left__content {
max-width: 680px;
margin: auto;
padding: 30px 80px;
height: 100%;
}
.landing--register .right {
background-color: grey;
height: 100%;
flex: 1;
position: relative;
}
.landing--register .form-holder {
max-width: 340px;
margin: auto;
position: relative;
z-index: 2;
}
.landing--register .form-holder .section-switch {
display: none;
appearance: none;
-webkit-appearance: none;
}
.landing--register .social-holder a {
padding: 0;
}
.landing--register .separator {
margin: 10px 0;
}
.landing--register .separator:after,
.landing--register .separator:before {
content: '';
flex: 1;
height: 1px;
background-color: #c8c8c8;
align-self: center;
}
.landing--register .separator span {
display: block;
width: 36px;
}
.landing--register .bj-button--google {
background-color: #fff;
box-shadow: inset 0 0 0 1px #c8c8c8;
}
.landing--register .bj-button--google:hover {
background-color: #f7f7f7;
}
.landing--register .icon--google:before {
content: '';
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTEzLjQ3IDMwOS40MDhMOTUuNjQ4IDM3NS45NGwtNjUuMTM5IDEuMzc4QzExLjA0MiAzNDEuMjExIDAgMjk5LjkgMCAyNTZjMC00Mi40NTEgMTAuMzI0LTgyLjQ4MyAyOC42MjQtMTE3LjczMmguMDE0TDg2LjYzIDE0OC45bDI1LjQwNCA1Ny42NDRjLTUuMzE3IDE1LjUwMS04LjIxNSAzMi4xNDEtOC4yMTUgNDkuNDU2LjAwMiAxOC43OTIgMy40MDYgMzYuNzk3IDkuNjUxIDUzLjQwOHoiIGZpbGw9IiNmYmJiMDAiLz48cGF0aCBkPSJNNTA3LjUyNyAyMDguMTc2QzUxMC40NjcgMjIzLjY2MiA1MTIgMjM5LjY1NSA1MTIgMjU2YzAgMTguMzI4LTEuOTI3IDM2LjIwNi01LjU5OCA1My40NTEtMTIuNDYyIDU4LjY4My00NS4wMjUgMTA5LjkyNS05MC4xMzQgMTQ2LjE4N2wtLjAxNC0uMDE0LTczLjA0NC0zLjcyNy0xMC4zMzgtNjQuNTM1YzI5LjkzMi0xNy41NTQgNTMuMzI0LTQ1LjAyNSA2NS42NDYtNzcuOTExaC0xMzYuODlWMjA4LjE3NmgyNDUuODk5eiIgZmlsbD0iIzUxOGVmOCIvPjxwYXRoIGQ9Ik00MTYuMjUzIDQ1NS42MjRsLjAxNC4wMTRDMzcyLjM5NiA0OTAuOTAxIDMxNi42NjYgNTEyIDI1NiA1MTJjLTk3LjQ5MSAwLTE4Mi4yNTItNTQuNDkxLTIyNS40OTEtMTM0LjY4MWw4Mi45NjEtNjcuOTFjMjEuNjE5IDU3LjY5OCA3Ny4yNzggOTguNzcxIDE0Mi41MyA5OC43NzEgMjguMDQ3IDAgNTQuMzIzLTcuNTgyIDc2Ljg3LTIwLjgxOGw4My4zODMgNjguMjYyeiIgZmlsbD0iIzI4YjQ0NiIvPjxwYXRoIGQ9Ik00MTkuNDA0IDU4LjkzNmwtODIuOTMzIDY3Ljg5NkMzMTMuMTM2IDExMi4yNDYgMjg1LjU1MiAxMDMuODIgMjU2IDEwMy44MmMtNjYuNzI5IDAtMTIzLjQyOSA0Mi45NTctMTQzLjk2NSAxMDIuNzI0bC04My4zOTctNjguMjc2aC0uMDE0QzcxLjIzIDU2LjEyMyAxNTcuMDYgMCAyNTYgMGM2Mi4xMTUgMCAxMTkuMDY4IDIyLjEyNiAxNjMuNDA0IDU4LjkzNnoiIGZpbGw9IiNmMTQzMzYiLz48L3N2Zz4=);
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
display: block;
width: 16px;
height: 16px;
}
.landing--register .welcome {
display: none;
padding: 20px;
height: 100%;
}
.landing--register .welcome .img-welcome {
margin: 70px auto 60px;
display: block;
}
.landing--register .welcome__text {
max-width: 340px;
margin: auto;
}
.landing--register.finished .left {
width: 100%;
height: 100%;
}
.landing--register.finished .left__content {
display: none;
}
.landing--register.finished .welcome {
display: block;
}
@media screen and (max-width: 1400px) {
.landing--register .left__content {
max-width: 540px;
padding: 30px;
}
}
@media screen and (max-width: 992px) {
.landing--register .row--main {
flex-direction: column-reverse;
}
.landing--register .left {
height: auto;
width: 100%;
}
.landing--register .left__content {
padding-bottom: 0;
}
.landing--register .right {
width: 100%;
height: auto;
}
.landing--register .right:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #0a152f;
opacity: 0.1;
z-index: 1;
}
.landing--register header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 50px 30px;
z-index: 1;
color: #fff;
z-index: 2;
}
.landing--register header p {
color: #fff;
}
.landing--register .form-holder input:checked + .social-holder,
.landing--register .profile-login {
display: none;
}
.landing--register .form-holder input:checked ~ .profile-login {
display: block;
}
.landing--register .form-holder input:checked ~ label {
display: none !important;
}
.landing--register .form-holder input:checked ~ .already {
display: none;
}
}
@media screen and (max-width: 768px) {
.landing--register header {
padding: 30px;
}
.landing--register .right:before {
opacity: 0.5;
}
}
@media screen and (max-width: 640px) {
.landing--register .logo {
width: 120px;
margin: auto;
}
.landing--register .left .left__content {
padding: 20px 30px 0;
}
}
.profile-login {
position: relative;
}
.profile-login label[for='email-signup'] {
position: absolute;
top: 0;
left: 0;
margin: 5px;
}
.profile-login .group {
overflow: visible;
background-color: #fff;
margin: 0 0 10px;
position: relative;
border-radius: 6px;
}
.profile-login .group:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: 6px;
box-shadow: inset 0 0 0 1px #d8d8d8;
content: '';
z-index: 2;
}
.profile-login .group > * {
border-right: 1px solid;
border-color: #c8c8c8;
align-self: stretch;
}
.profile-login .group__context {
padding: 0;
}
.profile-login .group__input input {
flex: 1;
height: 44px;
margin: 0;
border: none;
padding: 0 10px;
line-height: 44px;
}
.profile-login .group .password {
flex: 1;
}
.profile-login .group .password__toggle {
right: 0;
}
.profile-login .group > input {
flex: 1;
height: 44px;
margin: 0;
border: none;
padding: 0 10px;
line-height: 44px;
}
.profile-login .group > :last-child {
border: none;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.register-slider {
height: 100%;
}
.register-slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.register-slider li.active {
opacity: 1;
pointer-events: all;
}
.register-slider__img {
height: 100%;
}
.register-slider__img img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.register-slider__text {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 70px 60px 90px;
color: #fff;
background-image: linear-gradient(180deg, transparent 0, #0a152f);
}
.register-slider__nav {
position: absolute;
left: 60px;
bottom: 50px;
}
.register-slider__nav li {
margin-right: 20px;
}
.register-slider__nav li:last-child {
margin-right: 0;
}
.register-slider__nav li button {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: hsla(0, 0%, 100%, 0.6);
}
.register-slider__nav li button:hover {
background-color: hsla(0, 0%, 100%, 0.8);
}
.register-slider__nav li.active button {
background-color: #3b9e62;
}
.register-slider__arrows {
position: absolute;
right: 60px;
bottom: 50px;
border: 1px solid #fff;
}
.register-slider__arrows button {
border-radius: 0;
}
.register-slider__arrows button:hover {
background-color: hsla(0, 0%, 100%, 0.2);
}
.register-slider__arrows button:first-child {
border-right: 1px solid #fff;
}
@media screen and (max-width: 992px) {
.register-slider__text {
display: none;
}
.register-slider__nav {
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 2;
}
}
.landing--styles main {
overflow: hidden;
}
.landing--styles section {
position: relative;
}
.landing--styles .form {
position: absolute;
z-index: -1;
pointer-events: none;
max-width: none;
}
.landing--styles #header {
background: none;
border: none;
padding: 20px 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
@media screen and (max-width: 768px) {
.landing--styles #header {
position: absolute;
}
}
@media screen and (max-width: 480px) {
.landing--styles .logo {
width: auto;
}
}
.landing--styles .hero {
padding: 120px 0;
}
.landing--styles .hero .form {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.landing--styles .hero p {
color: #c8c8c8;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.landing--styles .hero .cards {
position: relative;
left: 50%;
transform: translateX(-50%) rotate(-9deg);
white-space: nowrap;
text-align: center;
top: 150px;
}
@media screen and (max-width: 768px) {
.landing--styles .hero .cards {
margin-left: -300px;
}
}
.landing--styles .hero .card {
display: inline-block;
margin: 0 10px;
box-shadow: 17px 15px 23px rgba(29, 38, 45, 0.17);
border-radius: 12px;
opacity: 0;
animation:
card 2.8s ease-in-out infinite,
fadeIn 0.8s ease-in-out forwards;
}
.landing--styles .hero .card:first-child {
animation-delay: 0.15s;
}
.landing--styles .hero .card:nth-child(2) {
animation-delay: 0.3s;
}
.landing--styles .hero .card:nth-child(3) {
animation-delay: 0.45s;
}
.landing--styles .hero .card:nth-child(4) {
animation-delay: 0.6s;
}
.landing--styles .hero .card:nth-child(5) {
animation-delay: 0.75s;
}
.landing--styles .hero .card:nth-child(6) {
animation-delay: 0.9s;
}
@media screen and (max-width: 768px) {
.landing--styles .hero .card {
width: 200px;
margin: 0 5px;
}
}
@media screen and (max-width: 480px) {
.landing--styles .hero .card {
width: 160px;
}
}
.landing--styles .styles {
margin-top: 100px;
padding-top: 100px;
}
.landing--styles .styles .box-styles > div {
padding: 0 10px;
}
.landing--styles .styles .box-style {
border-radius: 6px;
background-color: #fff;
box-shadow: 0 0 10px rgba(29, 38, 45, 0.1);
}
@media screen and (max-width: 768px) {
.landing--styles .styles {
margin-top: 0;
}
.landing--styles .styles .box-style {
margin-bottom: 10px;
}
.landing--styles .styles .box-style img {
width: 80px;
}
.landing--styles .styles .box-style .text-holder {
text-align: left;
}
}
.landing--styles .search {
margin: 250px 0 150px;
}
.landing--styles .search .laptop {
position: relative;
}
.landing--styles .search .laptop .screen {
position: absolute;
top: 5%;
left: 50%;
width: 76%;
transform: translateX(-50%);
}
@media screen and (max-width: 992px) {
.landing--styles .search {
text-align: center;
margin: 130px 0 60px;
}
.landing--styles .search .text-holder {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
-ms-flex-order: 1;
}
.landing--styles .search .laptop-holder {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
-webkit-order: 2;
-moz-order: 2;
order: 2;
-ms-flex-order: 2;
}
}
@media screen and (max-width: 640px) {
.landing--styles .search {
margin: 44px 0 120px;
}
}
.landing--styles #footer {
border: none;
position: relative;
background: none;
min-height: 0;
}
.landing--styles #footer div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.landing--styles #footer .form {
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-left: -100px;
}
.landing--styles #footer li {
display: inline-block;
}
.landing--styles #footer li a {
color: #fff;
font-weight: 400;
}
.landing--styles #footer li span {
display: inline-block;
margin: 0 10px;
}
@media screen and (max-width: 768px) {
.landing--styles #footer .form {
margin-left: -360px;
}
}
@keyframes card {
0% {
transform: translateY(0);
box-shadow: 17px 15px 23px rgba(29, 38, 45, 0.17);
}
50% {
transform: translateY(10px);
box-shadow: 9px 42px 31px rgba(29, 38, 45, 0.17);
}
to {
transform: translateY(0);
box-shadow: 17px 15px 23px rgba(29, 38, 45, 0.17);
}
}
.container,
.container.groups__item,
.container.row,
.countdown ul.container,
.landing--register .container.separator,
.profile-login .container.group {
max-width: 1520px;
padding: 0 20px;
margin: 0 auto;
}
.countdown ul,
.groups__item,
.landing--register .separator,
.profile-login .group,
.row {
margin: 0;
}
.container.filters-inside-view {
display: flex;
}
.container.filters-inside-view:after {
display: none;
}
.container.filters-inside-view .list-content {
width: 100%;
}
@media screen and (max-width: 992px) {
.container.filters-inside-view .list-content {
padding-left: 0;
border-left: none;
}
}
@media screen and (max-width: 992px) {
input#search__filters:checked ~ .container {
padding: 0;
}
input#search__filters:checked ~ .container .search-view-filters {
display: block;
}
input#search__filters:checked ~ .container .search-view-filters .item__link img {
display: none;
}
}
body[data-section$='-search'] #viewport > .container,
body[data-section='404'] #viewport > .container {
max-width: unset;
}
.bj-button {
border-radius: 6px;
}
.bj-button i,
.bj-button i:before {
font-size: 15px;
}
.bj-button--primary,
.bj-button--primary:active,
.bj-button--primary:focus,
.bj-button--primary:hover,
.bj-button--primary:visited,
.bj-button--yellow,
.bj-button--yellow:active,
.bj-button--yellow:focus,
.bj-button--yellow:hover,
.bj-button--yellow:visited,
.btn-warning,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.btn-warning:visited {
color: #121212;
}
html h6 {
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
html .font-h1 {
font-size: 40px;
line-height: 1.25;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (min-width: 768px) {
html .font-h1 {
font-size: 48px;
}
}
html .font-h2 {
font-size: 36px;
line-height: 1.25;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (min-width: 768px) {
html .font-h2 {
font-size: 44px;
}
}
html .font-h3 {
font-size: 36px;
line-height: 1.25;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (min-width: 768px) {
html .font-h3 {
font-size: 40px;
}
}
html .font-h4 {
font-size: 32px;
line-height: 1.25;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (min-width: 640px) {
html .font-h4 {
font-size: 36px;
}
}
html .font-h5 {
font-size: 24px;
line-height: 1.25;
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (min-width: 640px) {
html .font-h5 {
font-size: 32px;
font-family:
Degular,
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
}
html .font-h6 {
font-size: 20px;
line-height: 1.5;
font-family:
Inter,
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
@media screen and (min-width: 640px) {
html .font-h6 {
font-size: 24px;
line-height: 1.25;
}
}
#notification-cart .notification__close html i,
.notification--alert html i,
html #notification-cart .notification__close i,
html .icon,
html .notification--alert i {
font-size: 15px;
}
/*# sourceMappingURL=fi-style.264315e920a048579364.css.map */