/home/bonphmya/mercandestockages.store/wp-content/plugins/smartsupp-live-chat/assets/style.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0;
margin-block-start: 0;
margin-block-end: 0;
line-height: 1;
}
ul {
line-height: 1;
}
li {
list-style: none;
line-height: 1;
}
a {
display: inline-block;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
text-decoration: underline;
}
a:focus {
outline: none;
}
input,
label {
line-height: 1;
}
img {
display: block;
height: auto;
}
html {
font-size: 14px;
}
body {
font-family: "Poppins", sans-serif;
color: #032139;
}
@keyframes showMark {
from {
transform: rotate(45deg) scale(0);
}
to {
transform: rotate(45deg) scale(1);
}
}
@keyframes clickEffect {
0% {
transform: scale(0.5);
opacity: 0;
visibility: hidden;
}
30% {
opacity: 0.2;
visibility: visible;
}
100% {
transform: scale(1);
opacity: 0;
visibility: hidden;
}
}
@keyframes showMessage {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes rotateLoader {
from {
transform: rotate(0) translateZ(0);
}
to {
transform: rotate(720deg) translateZ(0);
}
}
@keyframes rotation {
from {
transform: rotate(0) translateZ(0);
}
to {
transform: rotate(360deg) translateZ(0);
}
}
.overflow-hidden {
width: 100%;
min-height: 1px;
overflow: hidden;
}
.text--center {
text-align: center;
}
.text--nowrap {
white-space: nowrap;
}
.font--small {
font-size: 0.78571rem;
}
.font--bold {
font-weight: 600;
}
.font--italic {
font-style: italic;
}
.font--x1 {
font-size: 1rem;
}
.font--x2 {
font-size: 1.14286rem;
}
.font--x3 {
font-size: 1.28571rem;
}
.margin--custom {
margin: 0 10%;
}
.display--none {
display: none;
}
.clear {
width: 100%;
min-height: 1px;
clear: both;
}
.clear-x1 {
width: 100%;
min-height: 1rem;
clear: both;
}
.clear-x2 {
width: 100%;
min-height: 2rem;
clear: both;
}
.clear-x3 {
width: 100%;
min-height: 3rem;
clear: both;
}
.clear-x4 {
width: 100%;
min-height: 4rem;
clear: both;
}
.clear-x5 {
width: 100%;
min-height: 5rem;
clear: both;
}
.clear-x6 {
width: 100%;
min-height: 6rem;
clear: both;
}
.clear-x7 {
width: 100%;
min-height: 7rem;
clear: both;
}
.clear-x8 {
width: 100%;
min-height: 8rem;
clear: both;
}
.clear-x9 {
width: 100%;
min-height: 9rem;
clear: both;
}
@media (max-width: 991px) {
.clear-x1-max-md {
width: 100%;
min-height: 1rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x2-max-md {
width: 100%;
min-height: 2rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x3-max-md {
width: 100%;
min-height: 3rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x4-max-md {
width: 100%;
min-height: 4rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x5-max-md {
width: 100%;
min-height: 5rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x6-max-md {
width: 100%;
min-height: 6rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x7-max-md {
width: 100%;
min-height: 7rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x8-max-md {
width: 100%;
min-height: 8rem;
clear: both;
}
}
@media (max-width: 991px) {
.clear-x9-max-md {
width: 100%;
min-height: 9rem;
clear: both;
}
}
h1 {
font-size: 1.71429rem;
font-weight: 700!important;
line-height: 2.35714rem;
margin: 1rem 0 0.5rem 0;
}
h2 {
font-size: 1.28571rem;
font-weight: 600;
line-height: 1.78571rem;
margin: 1rem 0 1rem 0;
}
p {
font-size: 0.92857rem;
font-weight: 400;
line-height: 1.85714rem;
margin-bottom: 1rem;
}
a {
color: #408fec;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
}
/* reset wp */
#wpbody-content {
margin-bottom: 0;
padding-bottom: 0;
}
.toplevel_page_smartsupp .dashicons-before img {
margin: auto;
opacity: 1!important;
}
.wrap#content {
background: #f5fbff;
margin: 0 0 0 -20px;
min-height: calc(100vh - 35px);
padding-bottom: 0;
}
@media (max-width: 782px) {
.wrap#content {
margin: 0 0 0 -10px;
}
}
.wrap#content>.wrap {
margin: 0;
}
.wrap#content>.active {
padding-bottom: 1px;
background: #fff;
}
.checkbox {
position: relative;
display: flex;
align-items: center;
margin-bottom: 1rem;
margin-top: 1rem;
cursor: pointer;
}
.checkbox__input {
height: 0;
width: 0;
opacity: 0;
}
.checkbox__title {
margin-left: 1rem;
line-height: 1.5;
text-align: left;
}
@media (max-width: 991px) {
.checkbox__title {
margin-left: 1rem;
}
}
.checkbox__title--small {
font-size: 0.78571rem;
}
.checkbox__input:disabled+.checkbox__shape+.checkbox__title {
color: #ecf0f1;
}
.checkbox__shape {
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
flex: 0 0 18px;
max-width: 18px;
position: relative;
background-color: #ffffff;
width: 18px;
height: 18px;
border: 2px solid #cbd0d4;
border-radius: 4px;
}
.checkbox__shape:before {
content: "";
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: auto;
background-color: #408fec;
border-radius: 50%;
opacity: 0;
visibility: hidden;
}
.checkbox__shape:after {
content: "";
backface-visibility: hidden;
will-change: transform;
position: absolute;
top: -2px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: 2px solid #ffffff;
border-top: none;
border-left: none;
width: 3px;
height: 6px;
transform: rotate(45deg);
z-index: 1;
}
.checkbox:hover .checkbox__input:not(:disabled)+.checkbox__shape {
border-color: #408fec;
}
.checkbox__input:checked+.checkbox__shape {
background-color: #408fec;
border-color: #408fec;
}
.checkbox__input:checked+.checkbox__shape:after {
animation: showMark 1 .2s ease;
}
.checkbox__input:not(:disabled):checked+.checkbox__shape:before {
animation: clickEffect 1 .4s ease;
}
.checkbox__input:focus+.checkbox__shape {
box-shadow: 0 0 0 3px rgba(64, 143, 236, 0.24);
}
.checkbox__input:disabled+.checkbox__shape {
background-color: #ecf0f1;
border-color: #ecf0f1;
}
.checkbox__message {
animation: showMessage 1 .3s ease;
position: absolute;
bottom: -24px;
left: 2px;
backface-visibility: hidden;
padding: 0.5rem;
font-size: 0.78571rem;
}
.checkbox__message--error {
color: #f2364f;
}
.checkbox__message--success {
color: #50c858;
}
.input {
position: relative;
display: block;
margin-bottom: 1rem;
padding: 8px 15px!important;
border: 1px solid #c7cfd9!important;
background-color: #fbfbfb!important;
min-height: 35px!important;
width: 100%;
border-radius: 4px!important;
}
.input--error .input__area:focus+.input__label {
color: #f2364f;
}
.input--error .input__area {
border-bottom-color: #f2364f;
border-left-color: #f2364f;
border-right-color: #f2364f;
}
.input--error .input__area:focus {
border-bottom-color: #f2364f;
outline: none;
}
.input--error .input__label {
color: #f2364f;
}
.input--success {
margin-bottom: 2.5rem;
}
.input--success .input__area:focus+.input__label {
color: #50c858;
}
.input--success .input__area {
border-bottom-color: #50c858;
border-left-color: #50c858;
border-right-color: #50c858;
}
.input--success .input__area:focus {
border-bottom-color: #50c858;
outline: none;
}
.input--disabled .input__area {
border-bottom-color: #ecf0f1;
border-left-color: #ecf0f1;
border-right-color: #ecf0f1;
cursor: not-allowed;
}
.input--disabled .input__label {
color: #ecf0f1;
}
.input__label {
transition: transform .2s ease, color .2s ease;
transform-origin: 0 100%;
position: absolute;
font-size: 0.92857rem;
top: 0;
bottom: 0;
left: 10px;
margin: auto;
height: 14px;
color: #cbd0d4;
cursor: text;
z-index: 1;
}
.input--active .input__label {
transform: scale(0.92) translate(-4px, -1.39286rem);
transform-origin: 0 0;
}
.input--area {
transition: border-bottom-color .2s ease;
position: relative;
display: block;
width: 100%;
font-size: 0.92857rem;
padding: 0.5rem;
z-index: 2;
background-color: #fff;
}
.input--area::placeholder {
color: #a9b0b9;
}
.input--area:focus {
border-color: #408fec;
outline: none;
}
.input__area:focus+.input__label {
color: #408fec;
}
.input__message {
animation: showMessage 1 .3s ease;
position: absolute;
bottom: -28px;
left: 2px;
backface-visibility: hidden;
padding: 0.5rem;
font-size: 0.78571rem;
text-align: left;
}
.input__message--error {
color: #f2364f;
}
.input__message--success {
color: #50c858;
}
.input__icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 18px;
height: 18px;
}
.radio {
display: flex;
align-items: center;
margin-bottom: 1rem;
cursor: pointer;
}
.radio__input {
display: none;
}
.radio__title {
margin-left: 0.5rem;
}
.radio__input:disabled+.radio__shape+.radio__title {
color: #ecf0f1;
}
.radio__shape {
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
position: relative;
background-color: #408fec;
flex: 0 0 18px;
max-width: 18px;
width: 18px;
height: 18px;
border: 2px solid #cbd0d4;
border-radius: 50%;
}
.radio__shape:before {
content: "";
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: auto;
background-color: #408fec;
border-radius: 50%;
opacity: 0;
visibility: hidden;
}
.radio__shape:after {
content: "";
transition: transform .2s ease;
backface-visibility: hidden;
will-change: transform;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: #ffffff;
border-radius: 50%;
z-index: 1;
}
.radio:hover .radio__input:not(:disabled)+.radio__shape {
border-color: #408fec;
}
.radio__input:checked+.radio__shape {
background-color: #408fec;
border-color: #408fec;
}
.radio__input:checked+.radio__shape:after {
transform: scale(0.5);
}
.radio__input:not(:disabled):checked+.radio__shape:before {
animation: clickEffect 1 .4s ease;
}
.radio__input:focus+.radio__shape {
box-shadow: 0 0 0 3px rgba(64, 143, 236, 0.24);
}
.radio__input:disabled+.radio__shape {
background-color: #ecf0f1;
border-color: #ecf0f1;
}
.select {
width: 100%;
font-size: 1rem;
padding: 0.5rem;
border-bottom: 2px solid #fbfbfb;
border-top: none;
border-left: none;
border-right: none;
height: 3rem;
line-height: 3rem;
}
.select:focus {
outline: none;
}
.btn-center {
display: block;
text-align: center;
}
.btn {
font-family: "Poppins", sans-serif;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
transition: border-color .2s ease;
position: relative;
display: inline-block;
background-color: #fbfbfb;
color: #408fec;
padding: 1.35714rem 2rem;
margin: 1rem 0;
line-height: 1;
font-size: 1rem;
font-weight: 500;
border: 1px solid #c7cfd9;
border-radius: 4px;
cursor: pointer;
}
@media (min-width: 992px) {
.btn {
white-space: nowrap;
}
}
@media (max-width: 991px) {
.btn {
line-height: 1.5;
padding: 1rem 1.5rem;
}
}
.btn:hover,
.btn:active {
border-color: #a9b0b9;
}
.btn:focus {
box-shadow: 0 0 0 3px rgba(64, 143, 236, 0.24);
outline: none;
}
.btn--min-width {
min-width: 120px;
text-align: center;
}
.btn--sm {
padding: 10px 20px;
margin: 0.5rem 0;
}
.btn--sm.btn--arrow {
padding-right: 4rem;
}
@media (min-width: 992px) {
.btn--lg {
padding: 2rem 3.5rem;
font-size: 1.28571rem;
}
}
.btn--lg.btn--arrow {
padding-right: 6rem;
}
@media (max-width: 991px) {
.btn--lg.btn--arrow {
padding-right: 3rem;
}
}
.btn--alt {
border-color: #032139;
color: #032139;
}
.btn--alt:hover,
.btn--alt:active {
border-color: #032139;
}
.btn--alt.btn--arrow:before {
background-color: #032139;
}
.btn--alt.btn--arrow:after {
border-left-color: #032139;
}
.btn--white {
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
background-color: transparent;
border-color: #ffffff;
color: #ffffff;
box-shadow: none;
}
.btn--white:hover,
.btn--white:active {
background-color: #ffffff;
color: #408fec;
border-color: #ffffff;
}
.btn--disabled {
background-color: #c7cfd9 !important;
cursor: default;
}
.btn--all-width {
width: 100%;
}
.btn--arrow {
padding-right: 4rem;
}
@media (max-width: 991px) {
.btn--arrow {
padding-right: 3rem;
}
}
.btn--arrow:hover:before {
transform: translateX(3px);
}
.btn--arrow:hover:after {
transform: translateX(3px);
}
.btn--arrow:before {
transition: transform .3s ease;
backface-visibility: hidden;
content: "";
position: absolute;
top: 0;
right: 19px;
bottom: 0;
margin: auto;
background-color: #408fec;
width: 16px;
height: 2px;
will-change: transform;
}
.btn--arrow:after {
transition: transform .3s ease;
content: "";
position: absolute;
top: 0;
right: 16px;
bottom: 0;
margin: auto;
width: 0;
height: 0;
border-left: 4px solid #408fec;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
will-change: transform;
}
.btn--link {
background-color: transparent;
border: none;
box-shadow: none;
font-weight: 400;
}
.btn--link:hover,
.btn--link:active {
color: #408fec;
}
.btn--primary,
.btn--secondary {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
transition: background-color .2s ease;
color: #ffffff;
border: 1px solid transparent;
}
.btn--primary:hover,
.btn--primary:active,
.btn--secondary:hover,
.btn--secondary:active {
border: 1px solid transparent;
}
.btn--primary:before,
.btn--secondary:before {
background-color: #ffffff;
}
.btn--primary:after,
.btn--secondary:after {
border-left-color: #ffffff;
}
.btn--primary {
background-color: #408fec;
}
.btn--primary:hover,
.btn--primary:active {
background-color: #0f73ed;
color: #ffffff;
}
.btn--secondary {
background-color: #de61a8;
}
.btn--secondary:hover,
.btn--secondary:active {
background-color: #fb53b2;
}
.alert {
padding: 1rem;
margin-bottom: 1rem;
}
.alert a {
color: #06253e;
text-decoration: underline;
}
.alert-danger {
background: #f2dede;
}
.alert-warning {
background: #fdf5d0;
color: #06253e;
}
.alert.gift {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: -2rem;
z-index: 2;
position: relative;
}
.alert.gift img {
margin-right: 1rem;
}
/* Layout
========================================================================== */
.header {
padding: 40px 24px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
.header__logo {
width: 143px;
height: 40px
}
.header-user,
.navbar-toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (max-width: 575px) {
.header {
flex-wrap: wrap;
}
}
.header-user {
display: flex;
align-items: center;
}
.header-user__avatar {
width: 32px;
height: 32px;
margin-left: 8px;
margin-right: 8px;
}
.header-user__email {
margin-right: 16px;
font-size: 13px;
}
.navbar-toggle {
width: 40px;
z-index: 20;
cursor: pointer;
padding: 5px;
border: 1px solid #e8e9eb;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(100, 105, 124, 0.04);
display: none;
}
.navbar-toggle .line {
width: calc(100% - 10px);
height: 2px;
margin: 5px;
background-color: #408fec;
transition: all 0.3s ease-in-out;
}
.navbar-toggle.navbar-on .line {
background-color: #fff;
position: relative;
width: calc(100% - 5px);
right: -1px;
}
.navbar-on div:first-child {
transform-origin: 0% 50%;
transform: rotate(45deg);
bottom: 1px;
}
.navbar-on div:last-child {
transform-origin: 0% 50%;
transform: rotate(-45deg);
bottom: -1px;
}
.navbar-on div:nth-child(2) {
background-color: transparent!important;
}
@media (min-width: 768px) {
nav {
display: block!important;
}
}
@media (max-width: 767px) {
.navbar-toggle {
display: block;
}
.hide--up-md {
display: none!important;
}
.header-user {
position: fixed;
z-index: 9;
background-color: #032139;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
display: flex;
color: white;
flex-direction: column;
justify-content: center;
}
.header-user .btn {
margin-top: 2rem;
color: #fff;
background: transparent;
}
.header-user__avatar {
margin-bottom: 1rem;
}
}
@media (max-width: 575px) {
.header-user {
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.header-user__email {
margin-right: 0;
}
}
.main {
display: flex;
padding-bottom: 3rem;
overflow: hidden;
background: #fff;
}
.main__left {
width: 50%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.main__right {
width: 50%;
}
.main__right img {
max-height: 650px;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
.main__right--all-set {
background-image: none;
}
.main__image {
max-width: 420px;
}
.main--all-set {
margin-bottom: 0;
padding-bottom: 0;
}
@media (max-width: 1199px) {
.main {
padding-bottom: 8.57143rem;
}
.main--all-set {
margin-bottom: 0;
}
.main__left {
width: 60%;
}
.main--all-set .main__left {
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start;
align-items: center;
width: 50%;
}
.main__right {
width: 40%;
}
.main--all-set .main__right {
width: 50%;
padding-right: 27px;
}
.main__image {
max-width: 100%;
}
}
@media (max-width: 991px) {
.main {
padding-bottom: 6.42857rem;
}
.main--all-set {
margin-bottom: 0;
padding-bottom: 1.5rem;
}
.main__left {
width: 70%;
}
.main--all-set .main__left {
width: 50%;
}
.main__right {
width: 30%;
}
.main--all-set .main__right {
width: 50%;
}
}
@media (max-width: 767px) {
.main {
padding-bottom: 4.28571rem;
}
.main--all-set {
margin-bottom: 0;
}
.main__left {
width: 80%;
}
.main--all-set .main__left {
width: 100%;
}
.main__right {
width: 20%;
}
.main--all-set .main__right {
display: none;
}
}
@media (max-width: 575px) {
.main {
padding-bottom: 2.14286rem;
}
.main--all-set {
margin-bottom: 0;
}
.main__left {
width: 100%;
}
.main__right {
display: none;
}
}
.main-form {
text-align: center;
width: 420px;
margin-right: 80px;
margin-left: 27px;
}
.main-form__h1 {
margin-bottom: 1rem!important;
}
.main-form__top-text {
margin-bottom: 26px;
margin-top: -1rem;
}
.main-form__top-text.js-login-form,
.checkbox.js-login-form {
display: none;
}
.main-form__bottom-text {
font-size: 11px;
margin-top: 0;
}
.main-form__bottom-text.js-register-form .js-login,
.main-form__bottom-text.js-login-form .js-register {
display: none;
}
@media (max-width: 575px) {
.main-form {
width: 100%;
margin-left: 27px;
margin-right: 27px;
}
}
.main-all-set {
max-width: 320px;
text-align: center;
margin-right: 80px;
padding-top: 0;
}
.main-all-set__h1 {
margin-bottom: 1rem;
}
.main-all-set__text {
font-size: 15px;
margin-bottom: 6px;
}
.main-all-set__bottom-text {
font-size: 11px;
margin-top: 0;
max-width: 100%;
text-align: center;
}
@media (max-width: 1199px) {
.main-all-set {
padding-top: 0;
}
}
@media (max-width: 767px) {
.main-all-set {
max-width: 100%;
width: 100%;
margin-right: 0;
padding-top: 40px;
text-align: center;
}
}
.features {
background: #fff;
padding-bottom: 25px;
}
.features__header {
color: #fb53b2;
letter-spacing: 1px;
}
.features__container {
display: flex;
justify-content: center;
}
.features__item {
max-width: 290px;
margin: 0 25px 35px;
text-align: center;
}
.features__item img {
max-width: 100%;
}
.features__item-image {
max-width: 100%;
margin-bottom: 31px;
}
.features__all {
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 991px) {
.features__container {
flex-wrap: wrap;
}
.features__item {
width: 280px;
}
}
.clients {
position: relative;
max-width: 100%;
overflow: hidden;
margin-top: 25px;
padding: 25px 15px;
background-color: #f5fbff;
}
.clients__container {
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 2;
position: relative;
}
.clients__pretitle {
font-size: 10px;
color: #fb53b2;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
.clients__logos {
max-width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.clients__logos img {
height: 100px;
margin: 0 1rem;
}
.advanced {
max-width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #F9F9FB;
margin-bottom: 70px;
}
.advanced__header {
height: 47px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 27px;
cursor: pointer;
}
.advanced__caret {
position: relative;
margin-right: 2px;
width: 20px;
height: 5px;
transform: rotateX(180deg);
transition: all .3s ease;
}
.advanced__header.closed .advanced__caret {
transform: rotateX(0deg);
}
.advanced__caret::before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 5px solid #000000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.advanced__caret::after {
content: '';
position: absolute;
left: 2px;
top: 0;
border-top: 3px solid #fff;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.isCollapsed .advanced__caret {
height: 10px;
}
.isCollapsed .advanced__caret::before {
top: 0;
left: 0;
border-left: 5px solid #000000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.isCollapsed .advanced__caret::after {
left: 0;
top: 2px;
border-left: 3px solid #fff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.advanced__content {
padding: 8px 27px 14px;
}
.isCollapsed .advanced__content {
display: none;
}
.advanced__bottom {
display: flex;
justify-content: flex-start;
align-items: center;
}
.saved {
padding-left: 16px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.saved__img {
width: 25px;
height: 25px;
margin-right: 8px;
}
.saved__text {
margin: auto
}
@media (max-width: 991px) {
.advanced {
max-width: calc(100% - 48px);
}
}
@media (max-width: 767px) {
.advanced__header,
.saved {
justify-content: center;
}
p.advanced__text,
.advanced__bottom {
text-align: center;
}
.advanced__bottom .btn {
margin-left: auto;
margin-right: auto;
}
}