/*
 * Webasyst Default 4.0 theme family
 *
 * Core CSS file
 *
 * @link http://www.webasyst.com/
 * @author Webasyst LLC
 * @copyright 2015 Webasyst LLC
 * @package Webasyst
 */

/* Variables
------------ */
html {
    --transparent:                   transparent;
    --white:                           #fff;
    --black:                           #000;
    --gray:                            #808080;
    --gray1:                           #333;
    --gray2:                           #4f4f4f;
    --gray3:                           #828282;
    --gray4:                           #bdbdbd;
    --gray5:                           #e0e0e0;
    --gray6:                           #f2f2f2;
    --gray7:                           #fafafa;
    --gray20:                          #cccccc;

    --red:                             #f43434;
    --blue:                            #2f80ed;
    --green:                           #14b00e;
    --orange:                          #f2994a;
    --yellow:                          #ffcc00;
    --purple:                          #9b51e0;
    --purple-light:                    #bb6bd9;
    --text-neutral:                    #64748B 
    --gap:                             0px;

    --font-size:                       16px;
    --font-family:                     "Montserrat", sans-serif;

    --h1-size:                         2.2857rem;
    --h2-size:                         2rem;
    --h3-size:                         1.7142rem;
    --h4-size:                         1.4285rem;
    --h5-size:                         1.1428rem;
    --h6-size:                         1rem;

    --bg-color:                        var(--neutral100);
    --text-color:                      var(--black);
    --hint-color:                      var(--gray3);
    --link-color:                      var(--purple);
    --link-hover-color:                var(--red);
    --link-visited-color:              var(--purple-light);

    --header-bg-color:                 var(--transparent);
    --header-link-color:               var(--white);
    --header-link-hover-color:         var(--white);
    --header-apps-link-color:          var(--gray3);
    --header-apps-link-selected-color: var(--gray6);
    --header-cart-total-bg-color:      var(--red);

    --header-search-input-bg-color:    var(--gray5);
    --header-search-input-color:       var(--gray);

    --header-menu-bg-color:            var(--white);
    --header-menu-pages-link-color:    var(--gray1);

    --input-color:                     var(--gray1);
    --input-placeholder-color:         var(--gray);
    --input-bg-color:                  var(--white);
    --input-disabled-bg-color:         var(--gray6);
    --input-disabled-color:            var(--gray4);
    --input-border-color:              var(--gray5);

    --footer-bg-color:                 var(--white);
    --footer-color:                    var(--black);
    --footer-link-color:               var(--gray3);
    --footer-link-hover-color:         var(--link-hover-color);
    --footer-notice-color:             var(--gray4);
    --footer-divider-color:            var(--gray6);
    --footer-app-color:                var(--gray);
    --footer-subscribe-link-color:     var(--link-color);

    --shadow:                          0 5px 30px rgba(0, 0, 0, 0.06);
    --shadow1:                         0 10px 60px rgba(0, 0, 0, 0.1);
    
    /*Fivei variables*/
    
    --neutral50:  #F8FAFC;
    --neutral100: #F1F5F9;
    --neutral200: #E2E8F0;
    --neutral300: #CBD5E1;
    --neutral400: #94A3B8;
    --neutral500: #64748B;
    --neutral600: #4B5563;
    --neutral700: #374151; 
    --neutral800: #1F2937;
    --neutral900: #111827;
    
    --blue-darker:#142649;
    --blue-dark:  #203661;
    --blue-main:  #2A4477;
    --blue-80:    #485F8E;
    --blue-60:    #647AA4;
    --blue-40:    #8093BA;
    --blue-20:    #9BADCF;
    --blue-10:    #B6C6E4;
    --blue-5:     #D2DFFA;
    --blue-grdnt: background: linear-gradient(180deg, #3D64B0 0%, #2A4477 100%);

}

.color-blue-main { color: var(--blue-main) }
.color-white { color: var(--white) }

/* Reset
-------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, /* ol, ul, li, */ fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, credentials, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; }
*, ::after, ::before { box-sizing: border-box;}
.hint, .breadcrumbs, .breadcrumbs a, .breadcrumbs span.rarr, table.features tr.divider td, .bestsellers .bestsellers-header, ul.thumbs li span.summary, .review .summary, .review .summary .date, ul.albums li .count, .album-note, .credentials .username, .credentials .username a { color: var(--hint-color); }
/* Common HTML elements, fonts, and colors
------------------------------------------ */
html { height: 100vh; }
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
html,
body { font-family: var(--font-family); font-size: var(--font-size); background: var(--bg-color); line-height: 100%; color: var(--text-color); }


input[type="button"]::-moz-focus-inner { border: 0; }
input[type="submit"]::-moz-focus-inner { border: 0; }
a img { border: 0; }
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset, blockquote, figure { margin-bottom: 20px; }
h1, h2, h3, h4, h5, h6, {
    color: var(--blue-main)!important;
}
h1 { font-size: var(--h1-size) }
h2 { font-size: var(--h2-size)}
h3 { font-size: var(--h3-size) }
h4 { font-size: var(--h4-size) }
h5 { font-size: var(--h5-size) }
h6 { font-size: var(--h6-size) }
h1, h2, h3, h4 { line-height: 120%; font-weight: 400; color: var(--blue-main); }
ul, ol { padding-top: 0; }
ol { list-style: decimal; }
input, textarea, select { margin: 0; }
input, textarea { font-size: 1em; color: var(--gray1); }
select { max-width: 100%; }
input[type="button"]:focus { outline: none; outline-offset: -2px; }
fieldset { border: 1px solid var(--gray); padding: 10px; position: relative; background: var(--gray5); margin-bottom: 10px; }
fieldset p label { width: 98%; }
fieldset p input[type="text"] { width: 98%; }
fieldset p select { width: 99%; }
pre {margin-top: 16px; font-size: 90%; line-height: 24px; color: rgba(0, 0, 0, .75); background: rgba(0, 0, 0, .03); padding: 16px 20px;word-wrap: normal;}
blockquote { color: rgba(0, 0, 0, .6); font-size: 0.9em; font-style: italic; border-left: 1px solid rgba(0, 0, 0, .1);padding-left: 24px; background: var(--gray5); }
blockquote cite { font-size: 0.9em; }
hr { background-color: rgba(0, 0, 0, 0.15); height: 1px; border: 0; }
p { line-height: 1.4em; }
p a { text-decoration: underline; }
input::-webkit-input-placeholder { color: var(--input-placeholder-color); }
input:-moz-placeholder,
input::-moz-placeholder { color: var(--input-placeholder-color); }
label, button { cursor: pointer; }

/* Misc elements
---------------- */
.font-600 {font-weight:600;}
.noto-sans{font-family: 'Noto Sans', sans-serif;}
.montserrat{font-family:  "Montserrat", sans-serif;}
.main-blue {color:rgba(42, 68, 119, 1);}
.neutral{color:rgba(71, 85, 105, 1);}
.block { padding: 25px 30px; }
.inline { display: inline !important; }
.inline-link { text-decoration: none !important; display: inline-block; }
.inline-link b { border-bottom: 1px dotted; font-weight: normal; position: relative; top: -0.13em;}
.inline-link b i { font-style: normal; position: relative; top: 0.13em;}
.small { font-size: 0.9em; }
.large { font-size: 1.1em; }
.bold { font-weight: bold; }
.strike { text-decoration: line-through; }
.highlighted { background: #ffc; }
.hint { color: var(--hint-color); font-size: 0.9em; }
.hint a,
.hint:visited,
.hint a:visited { color: var(--gray3); }
.gray,
.gray .dropdown ul,
.gray a,
.gray:visited,
.gray a:visited { color: var(--gray3); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.shadowed { -moz-box-shadow: 0 5px 15px var(--gray3); -webkit-box-shadow: 0 5px 15px var(--gray3); box-shadow: 0 5px 15px var(--gray3); }
.nowrap { white-space: nowrap; }
.hr { border-top: 1px solid var(--gray20); margin-bottom: 15px; }
.uppercase { text-transform: uppercase; }
.blurred { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }
.userpic { border-radius: 50%; background-size: auto; }

.container { min-width: 650px;  margin: 0 auto; padding: 0 18px; }

.breadcrumbs { color: var(--link-color); margin-bottom: 35px; display: flex; align-items: center; gap: 10px; }
.breadcrumbs a { color: var(--gray4) !important; }
.breadcrumbs span.chevron::after { left: 0; color: var(--gray4); }

.tags { line-height: 1.6em; }
.tags a { color: var(--green) !important; display: inline !important; padding: 0 4px !important; }
.tags a:hover { color: red !important; }

.welcome { text-align: center; background: url('img/webasyst.svg') no-repeat; background-position: top center; padding-top: 300px; background-size: 256px 256px; margin-bottom: 30px; }
.welcome h1 { font-weight: normal; font-size: 2em; }

.staff { background: var(--gray4); padding: 2px 6px; color: var(--white); font-size: 0.9em; border-radius: 5px; white-space: nowrap; line-height: normal; }

.s-badge { display: inline-block; padding: 0.35em 0.45em; font-size: 90%; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 5px;}
.s-badge-rounded { border-radius: 50rem;}
.s-badge-red { background: var(--red); color: var(--white);}

.overflow-hidden { overflow: hidden !important;}
.is-hidden { display: none; }

.wa-pb-0 { padding-bottom: 0 !important; }
.wa-pb-4 { padding-bottom: 4px !important; }
.wa-pb-8 { padding-bottom: 8px !important; }
.wa-pb-16 { padding-bottom: 16px !important; }
.wa-pb-18 { padding-bottom: 18px !important; }
.wa-pb-20 { padding-bottom: 20px !important; }
.wa-pb-22 { padding-bottom: 22px !important; }
.wa-pb-24 { padding-bottom: 24px !important; }
.wa-pb-28 { padding-bottom: 28px !important; }
.wa-pb-32 { padding-bottom: 32px !important; }

.wa-pt-0 { padding-top: 0 !important; }
.wa-pt-4 { padding-top: 4px !important; }
.wa-pt-8 { padding-top: 8px !important; }
.wa-pt-16 { padding-top: 16px !important; }
.wa-pt-18 { padding-top: 18px !important; }
.wa-pt-20 { padding-top: 20px !important; }
.wa-pt-22 { padding-top: 22px !important; }
.wa-pt-24 { padding-top: 24px !important; }
.wa-pt-28 { padding-top: 28px !important; }
.wa-pt-32 { padding-top: 32px !important; }
.wa-pt-96 { padding-top: 96px !important; }
.wa-pt-180 { padding-top: 180px !important; }

.wa-pl-0 { padding-left: 0 !important; }
.wa-pl-4 { padding-left: 4px !important; }
.wa-pl-8 { padding-left: 8px !important; }
.wa-pl-16 { padding-left: 16px !important; }
.wa-pl-18 { padding-left: 18px !important; }
.wa-pl-20 { padding-left: 20px !important; }
.wa-pl-22 { padding-left: 22px !important; }
.wa-pl-24 { padding-left: 24px !important; }
.wa-pl-28 { padding-left: 28px !important; }
.wa-pl-32 { padding-left: 32px !important; }


.wa-pr-0 { padding-right: 0 !important; }
.wa-pr-4 { padding-right: 4px !important; }
.wa-pr-8 { padding-right: 8px !important; }
.wa-pr-16 { padding-right: 16px !important; }
.wa-pr-18 { padding-right: 18px !important; }
.wa-pr-20 { padding-right: 20px !important; }
.wa-pr-22 { padding-right: 22px !important; }
.wa-pr-24 { padding-right: 24px !important; }
.wa-pr-28 { padding-right: 28px !important; }
.wa-pr-32 { padding-right: 32px !important; }

.wa-mb-0 { margin-bottom: 0 !important; }
.wa-mb-4 { margin-bottom: 4px !important; }
.wa-mb-8 { margin-bottom: 8px !important; }
.wa-mb-16 { margin-bottom: 16px !important; }
.wa-mb-18 { margin-bottom: 18px !important; }
.wa-mb-20 { margin-bottom: 20px !important; }
.wa-mb-22 { margin-bottom: 22px !important; }
.wa-mb-24 { margin-bottom: 24px !important; }
.wa-mb-28 { margin-bottom: 28px !important; }
.wa-mb-32 { margin-bottom: 32px !important; }
.wa-mb-auto { margin-bottom: auto !important; }

.wa-mt-0 { margin-top: 0 !important; }
.wa-mt-4 { margin-top: 4px !important; }
.wa-mt-8 { margin-top: 8px !important; }
.wa-mt-16 { margin-top: 16px !important; }
.wa-mt-18 { margin-top: 18px !important; }
.wa-mt-20 { margin-top: 20px !important; }
.wa-mt-22 { margin-top: 22px !important; }
.wa-mt-24 { margin-top: 24px !important; }
.wa-mt-28 { margin-top: 28px !important; }
.wa-mt-32 { margin-top: 32px !important; }
.wa-mt-auto { margin-top: auto !important; }

.wa-mr-0 { margin-right: 0 !important; }
.wa-mr-4 { margin-right: 4px !important; }
.wa-mr-8 { margin-right: 8px !important; }
.wa-mr-16 { margin-right: 16px !important; }
.wa-mr-18 { margin-right: 18px !important; }
.wa-mr-20 { margin-right: 20px !important; }
.wa-mr-22 { margin-right: 22px !important; }
.wa-mr-24 { margin-right: 24px !important; }
.wa-mr-28 { margin-right: 28px !important; }
.wa-mr-32 { margin-right: 32px !important; }
.wa-mr-auto { margin-right: auto !important; }

.wa-ml-0 { margin-left: 0 !important; }
.wa-ml-4 { margin-left: 4px !important; }
.wa-ml-8 { margin-left: 8px !important; }
.wa-ml-16 { margin-left: 16px !important; }
.wa-ml-18 { margin-left: 18px !important; }
.wa-ml-20 { margin-left: 20px !important; }
.wa-ml-22 { margin-left: 22px !important; }
.wa-ml-24 { margin-left: 24px !important; }
.wa-ml-28 { margin-left: 28px !important; }
.wa-ml-32 { margin-left: 32px !important; }
.wa-ml-auto { margin-left: auto !important; }

.font-weight-normal { font-weight: normal !important; }
.font-weight-bold { font-weight: bold !important; }

.font-size-big { font-size: var(--h5-size) !important; }
.font-16 {
    font-size:16px;
}
.text-white { color: var(--white) !important; }
.text-black { color: var(--black) !important; }
.text-gray { color: var(--gray4) !important; }
.text-green { color: var(--green) !important; }
.text-orange { color: #f2994a !important; }
.bg-gray { background-color: var(--gray6) !important; }


.w-100 { width: 100% !important; }
.font-45{
    font-size:45px!important;
}

.chevron::after {
    content:        '';
    display:        inline-flex;
    border-style:   solid;
    border-width:   0 .1em 0.1em 0;
    width:          0.45em;
    height:         0.45em;
    vertical-align: middle;
    position:       relative;
    top:            0;
    left:           0.5em;
}
.chevron.down::after {
    transform: rotate(45deg);
    top:       -0.2em;
}
.chevron.right::after {
    transform: rotate(-45deg);
}

/* Card */

.cards { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0;}
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; word-wrap: break-word; background-color: var(--white); border-radius: 15px; box-shadow: var(--shadow);}
.card-img { border-top-left-radius: 15px; border-top-right-radius: 15px;}
.card-body { flex: 1 1 auto; padding: 23px;}
.card-title { display: block; font-size: 16px; font-weight: normal; line-height: 19px; margin-bottom: 10px; color: var(--black);}
.card-text { margin-top: 10px;}
.card-read-more { font-weight: 600; color: var(--link-color); display: block; text-align: right; margin-top: 22px;}

/* Buttons
---------- */



/* Navigation menus
------------------- */

ul.menu-v { margin: 0; padding: 0; }
ul.menu-v li { list-style: none; padding: 0; line-height: 1.3em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
ul.menu-v li a { padding: 13px 30px 13px 16px; display: block; text-decoration: none; }
ul.menu-v li.collapsible { background: url('img/rarr.png') no-repeat; background-position: right center; background-size: 32px 16px; }
ul.menu-v.bottom-padded { margin-bottom: 20px; }
ul.menu-v li .count { float: right; color: var(--gray3); }
ul.menu-v li .count i.icon16 { margin: 0 -5px; }

ul.menu-h { margin: 0; padding: 0; }
ul.menu-h li { list-style: none; display: inline-block; padding: 0 10px 0 0; line-height: 1.3em; display: block \9; float: left \9; }
ul.menu-h li a { display: inline-block; padding: 13px 16px 13px 16px; display: block \9; float: left \9; text-decoration: none; }

ul.tree { list-style: none; padding-left: 0; }
ul.tree li { border: none; }
ul.tree li a { padding: 5px 16px; display: block; text-decoration: none;}
ul.tree li.selected a { background: transparent; }
ul.tree ul { padding-left: 20px; list-style: none; }
ul.tree ul a { padding: 3px 6px; font-size: 90%; }

.paging-nav { text-align: center; }
.paging-nav ul { display: inline-flex; gap: 8px; font-size: 16px; list-style: none; }
.paging-nav ul li { line-height: normal; padding: 0; color: var(--gray1); }
.paging-nav ul li a { display: inline-flex; list-style: none; width: 40px; height: 40px; justify-content: center; align-items: center; line-height: normal; background: var(--white); border: 1px solid var(--gray5); border-radius: 10px; padding: 0; color: var(--gray1); }
.paging-nav ul li.selected a { border: 2px solid var(--link-color); color: var(--link-color); }

/* Sign up & Login forms
------------------------ */

.wa-auth-adapters ul { padding: 0; min-height: 16px; }
.wa-auth-adapters ul li { list-style: none; float: left; padding: 0 15px 0 0; }
.wa-auth-adapters ul li a,
.wa-auth-adapters ul li span { display: block; padding: 0px 5px; }
.wa-auth-adapters ul li a img,
.wa-auth-adapters ul li span img { position: relative; top: 10px; margin-right: 5px; }
.wa-auth-adapters p { color: #888; font-size: 0.9em; width: 80%; }
.wa-auth-adapters.wa-connect { padding-top: 20px; clear: left; }

.wa-form { float: left; margin: 10px 0; overflow: visible; }
.wa-form .wa-field { clear: left; margin: 0; padding-top: 3px; }
.wa-form .wa-field .wa-name { float: left; width: 155px; padding-top: 0.05em; padding-bottom: 10px; font-size: 0.95em; color: #888; }
.wa-form .wa-field.wa-separator { height: 10px; }
.wa-form .wa-field .wa-value { margin-left: 180px; margin-bottom: 5px; position: relative; }
.wa-form .wa-field .wa-value input.wa-error { border: 2px solid red; }
.wa-form .wa-field .wa-value .wa-error-msg { font-size: 0.9em; color: red; display: block; }
.wa-form .wa-field .wa-value input[type="text"],
.wa-form .wa-field .wa-value input[type="email"],
.wa-form .wa-field .wa-value input[type="password"] { width: 30%; min-width: 260px; margin: 0;}
.wa-form .wa-field .wa-value textarea { min-width: 300px; height: 70px; }
.wa-form .wa-field .wa-value input.wa-captcha-input, .wa-subscribe-form .wa-captcha .wa-captcha-input { min-width: 73px !important; }
.wa-form .wa-field .wa-value .wa-captcha img { margin-left: 0; }
.wa-form .wa-field .wa-value .errormsg { margin-left: 0; }
.wa-form .wa-field .wa-value.wa-submit { margin-top: 10px; }
.wa-form .wa-field .wa-value p label { display: block; margin: 0; }
.wa-form .wa-field .wa-value p { line-height: 1.6em; margin-bottom: 23px; position: relative; }
.wa-form .wa-field .wa-value p span { color: #777; font-size: 0.9em; display: block; }
.wa-form .wa-field .wa-value p i.icon16 { float: left; left: -20px; margin-top: 2px; position: absolute; }
.wa-form .wa-field .wa-value label, .wa-form .wa-field .wa-value p input { display: block; margin-bottom: 5px; }
.wa-form .wa-field .wa-value p input[type="radio"], .wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline-block; }
.wa-form .wa-field .wa-value p .field.wa-required span:after { content: " *"; color: #faa; }
.wa-form .wa-field.wa-required .wa-name:after { content: " *"; color: #faa; }
.wa-form .wa-field .wa-value select { border-radius: .7em; padding: 0.85em 2.25em 0.85em 0.75em; line-height: 1; text-overflow: ellipsis;}
.wa-signup-form .wa-form .wa-field.wa-field-email .wa-value input { min-width: 300px; }
.wa-signup-form .wa-form .wa-field.wa-field-password .wa-value input,
.wa-signup-form .wa-form .wa-field.wa-field-password_confirm .wa-value input { min-width: 200px; width: 200px; }
form .wa-form .wa-field.fld_type_checkbox { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; }
form .wa-form .wa-field.fld_type_checkbox .wa-value { margin-top: 0; margin-right: 3px; }
form .wa-form .wa-value .h-agreement-checkbox-wrapper input[type=checkbox] { position: static; }
form .wa-form .wa-value .h-agreement-checkbox-wrapper .h-agreement-checkbox-html-label { display: inline; margin-left: 10px; }

.wa-field .wa-captcha-img { margin-top: -2px; }
.wa-captcha { padding: 7px 0 10px; }
.wa-captcha p { margin: 0 !important; }
.wa-captcha strong { font-size: 1.2em; }
.wa-captcha p img { float: left !important; }
.wa-captcha .wa-captcha-refresh { font-size: 0.8em; text-decoration: underline; color: var(--gray3); }
.wa-captcha .wa-captcha-input { display: inline !important; margin-left: 10px; }
.wa-captcha .errormsg { display: inline-block; margin-left: 10px; display: block \9; float: left \9; }

input.error, textarea.error { border: 2px solid red; }
.errormsg { color: red; margin-left: 170px; display: block; }

input, textarea { background-color: var(--white); border: 1px solid var(--gray4); border-radius: 0.7rem; padding: 0.6rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--gray1); appearance: none; }
input:focus, textarea:focus { border-color: var(--gray4); outline: 0; }

input[type=checkbox],
input[type=radio] { width: 1.75em; height: 1.75em; background-color: var(--white); background-repeat: no-repeat; background-position: center; background-size: 1em; border: 1px solid var(--gray4); border-radius: .5em; appearance: none; vertical-align: middle; margin-bottom: 0.125em; padding: 0; }
input[type=radio] { border-radius: 50%;}
input:checked { border-color: var(--link-color);}
input:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M5.81 11.333c-.276.44-.682.667-1.154.667-.486 0-.866-.2-1.22-.654L.341 7.488C.118 7.208 0 6.914 0 6.594c0-.654.498-1.188 1.141-1.188.393 0 .708.147 1.023.56l2.44 3.164L9.783.667c.275-.44.63-.667 1.023-.667C11.423 0 12 .44 12 1.108c0 .294-.157.614-.328.894l-5.862 9.33Z' fill='%239B51E0'/%3E%3C/svg%3E");}
input:checked[type=radio] { box-shadow: inset 0 0 0 .285em var(--white); background-color: var(--link-color); }

select { background-color: var(--white); background-repeat: no-repeat; border: 1px solid var(--gray4); border-radius: .5em; appearance: none; vertical-align: middle; padding: 0.275em 2.25em 0.275em 0.75em; font-weight: 400; line-height: 1.15; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 9L12 15L6 9' stroke='currentColor' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 0.525em center; background-size: 16px;}
select:focus { border-color: var(--link-color); outline: 0;}


/* Multi-column layout
---------------------- */


/* Tables
--------- */

table { border-collapse: collapse; border-spacing: 0; }
table th { color: var(--gray3); padding: 0 10px 7px; }
table td { padding: 10px; border: 1px solid rgba(0, 0, 0, 0.1); }
table.not-bordered td { border: none; }

table.lined { margin-top: 25px; width: 100%; border-spacing: 0; border-collapse: collapse; }
table.lined th { padding-left: 7px; padding-right: 7px; }
table.lined td { padding: 15px 7px; border-bottom: 1px solid var(--gray5); }
table.lined td.min-width { width: 1%; }
table.lined td p { margin: 0; }
table.lined td input.numerical { width: 50px; margin-right: 5px; text-align: right; }
table.lined tr.no-border td { border: none; }
table.lined tr.thin td { padding-top: 13px; padding-bottom: 0; }
table.lined tr.service td { padding-top: 5px; padding-bottom: 5px; padding-left: 25px; font-size: 0.8em; color: #555; }

/* Customized search input look
------------------------------- */

.search { }
.search-wrapper { position: relative; }
.search input { width: 100%; float: left; height: 27px; padding-top: 0; margin-top: 1px; background: transparent; border: 0; -webkit-appearance: none; margin-right: 0; padding-left: 0; padding-right: 32px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.search input:focus { outline: 0; }
.search input[type="search" i]::-webkit-search-cancel-button { appearance: none }

.search button { width: 28px; position: absolute; border: none; outline: none; box-shadow: none; padding: 0; cursor: pointer; height: 28px; color: var(--gray2); background: transparent; top: 10px; right: 20px; }
.search button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */ border: 0; padding: 0; }
.search button:hover::after { content: none; }

/* Header: global navigation
---------------------------- */
header {
    z-index:5;
}
header #globalnav .globalnav-bar { height: 64px; }
header #globalnav .globalnav-bar .header_slogan {
    font-family: Inter;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: #94A3B8;
    display:block;
    margin-left:24px;
 }
 .rounded {
     border-radius:8px;
     overflow:hidden;
 }
 .rounded-big {
     border-radius:40px;
     overflow:hidden;
 }
 .section-padding {
     padding-top:40px;
     padding-bottom:40px;
 }
.social-icon {
    margin-right:16px;
}
.social-icon img {
    min-width:24px;
}
.icon-96 {
    max-width:96px;
    max-height:96px;
}
.top-header-link {
    color: var(--neutral500);
    margin-right: 24px;
    white-space:nowrap;

}
.header_logo{
    color: var(--neutral500);
}
.top-header-link:hover {
    color: var(--neutral700);
}

.header_bottom {
    background: var(--header-menu-bg-color);
    box-shadow: 0px 4px 6px -2px #8093BA08, 0px 9px 14px -1px #8093BA17;
    border-radius:8px;
}
.main-screen-card-big{
    max-width:488px!important;
}
.main-screen-card{
    max-width:384px!important;
}
.link-arrow, .link-download{
    color:#485F8E!important;
    font-weight:600;
    width:100%;
    display:flex;
    align-items:center;
    column-gap:8px;
}
.mobile-menu{
    background: rgba(42, 68, 119, 1)!important;
    color:rgba(182, 198, 228, 1)!important;
    height:100vh!important;
    top:90%!important;

}
.mobile-menu .top-header-link{
    color:rgba(182, 198, 228, 1)!important;
}
.mobile-menu > .uk-flex{
    border-bottom: 1px solid rgba(148, 163, 184, 1)
}
.burger-dropdown-menu{
    position:static!important;
    background:none!important;
    box-shadow:none!important;
    padding:none!important;
}
.burger-dropdown-item{
    color:rgba(226, 232, 240, 1)!important;
    line-height:24px!important;
    font-weight:500!important;
}
.burger-dropdown-menu{
    padding:0!important;
    margin-bottom:24px!important;
}
.burger-dropdown-list li{
    color:rgba(210, 223, 250, 1)!important;
}
.burger-contact-item{
    font-size:16px!important;
    line-height:24px !important;
    color:rgba(226, 232, 240, 1)!important;
    font-weight:500!important;
}
.burger-social-icons{
    column-gap:18.15px;
}
.burger-dropdown-list-item{
    font-size:14px!important;
    line-height:24px!important;
    font-weight:300!important;
    color:rgba(210, 223, 250, 1)!important;
}
.sticky-elem{
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding:23px 12px;
    background: rgba(32, 54, 97, 1);
box-shadow: 0px -10px 10px -5px rgba(0, 0, 0, 0.08);
box-shadow: 0px -20px 25px -5px rgba(0, 0, 0, 0.08);

}
.link-arrow::after{
    content:url(/wa-data/public/site/themes/fivei/img/icons/link-arrow.svg);
    display:block;
    
}
.link-download::after{
    content:url(/wa-data/public/site/themes/fivei/img/icons/download-icon.svg);
    display:block;
}

.button-team{
    display:flex!important;
    column-gap:8px;
    align-items:center;
}
.button-team::after{
    content:url(/wa-data/public/site/themes/fivei/img/icons/button-icon.svg);
    display:block;
}
    
.main-screen-card-big{
    border-radius: 24px;
    color:white;
    box-shadow: 0px 2px 4px -1px rgba(128, 147, 186, 0.04),0px 4px 6px -1px rgba(128, 147, 186, 0.08);
    background: linear-gradient(180deg, #3D64B0 0%, #2A4477 100%);

}

.main-screen-card{
    border-radius: 24px;
    box-shadow: 0px 2px 4px -1px rgba(128, 147, 186, 0.04),0px 4px 6px -1px rgba(128, 147, 186, 0.08);

}
.main-screen-buttons-wrapper{
    
    box-shadow: 0px 10px 10px -5px rgba(128, 147, 186, 0.08),0px 20px 25px -5px rgba(128, 147, 186, 0.08);
}
.dropdown{
        display:flex!important;
}
.dropdown::after{
    content:url(/wa-data/public/site/themes/fivei/img/icon-pack/dropdown-icon.svg);
    margin-left:4px;
}

.dad{
    display:grid;
    grid-template-columns: 120px 150px;
}
.new-wrapper{
    column-gap:30px
}

.bad-new{
    background: rgb(100, 122, 164);
    border-radius: 24px;
}

.good-new{
    border-radius: 24px;
    background: rgb(42, 68, 119);
}

.section-fact{
    background: linear-gradient(180.00deg, rgb(61, 100, 176),rgb(42, 68, 119) 100%);
}

.btn {
    display:block;
    text-decoration:none!important;
    white-space:nowrap;
    padding: 10px 16px;
    border-radius: 8px;
    max-width:max-content;
    outline:none;
    border:none;
}
.btn-big {
    padding: 18px 26px;
    font-size:120%;
}
.btn-small {
    padding: 5px;
}
.btn-cta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #F665A2 0%, #E0528E 100%);
    color: #fff!important;
    transition:.3s;
}
.btn-cta:hover {
    background: linear-gradient(180deg, #E0528E 0%, #F665A2 100%);
}
.cta-shadow {
    box-shadow: 0px 4px 6px -2px rgba(228, 85, 145, 0.2), 0px 10px 16px 0px rgba(228, 85, 145, 0.32);
    margin-bottom:30px;
}
.btn-blue {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15px 24px 17px;
    background: linear-gradient(180deg, #41C8FE 0%, #1EB2EE 100%);
    color: #fff!important;
    transition:.3s;
}
.btn-blue:hover {
    background: linear-gradient(180deg, #1EB2EE 0%, #41C8FE 100%);
}

.neutral400 {
    color: var(--neutral400);
}

.neutral600 {
    color: var(--neutral600);
}
.color-brandd-turqoise-darker {
    color: rgba(2, 180, 149, 1);
}
.border-blue {
    border: 1px solid rgba(210, 223, 250, 1)
}



.main-screen {
    margin-top: -170px;
    padding-top:200px;
    max-height:640px;
}
.main-screen {
    margin-top: -170px;
    padding-top:170px;
    max-height:712px;
}
.main-screen__headings{
    position:relative;
    z-index:2;
}


h1.main-heading { font-size:56px; font-weight:600; margin-top:0; }
.subheading { text-transform:uppercase; margin-bottom:0; }
.main-screen__cta {
    min-height: 352px;
    padding: 65px 180px 41px 60px;
    position:relative;
}
h1.main-heading .inner-page {
    transform: transltey(100px);
}
.main-screen__cta p {
    color: var(--neutral400);
}

.secondary-page {
    max-height:632px;
}
.secondary-page .container {
    transform: translateY(94px);
}
.font-weight-600 {
    font-weight:600;
}
.main-parallax {
    background:url(/wa-data/public/site/themes/fivei/img/main-parallax.svg);
    background-size:cover;
    background-repeat: no-repeat;
    position:absolute;
    background-position:center;
    /*background-attachment:fixed;*/
    top:0;
    right:0;
    bottom:0;
    left:0;
    pointer-events:none;
}
.main-parallax.team{
        background:url(/wa-data/public/site/themes/fivei/img/team-parallax.svg);
    background-size:100%;
    background-repeat: no-repeat;
    position:absolute;
    background-position:center;
    background-attachment:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    pointer-events:none;
}
    
}
.main-cta-wrapper {
    position:relative;
}
.main-cta-wrapper:after {
    content:"";
    display:block;
    width:180px;
    height:180px;         
    background:url(/wa-data/public/site/themes/fivei/img/bg-main-cta-after.svg);
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    backdrop-filter: blur(3px);
    filter:drop-shadow(0px 8px 7px rgba(22, 141, 208, 0.16));

}
.main-cta {
    background:url(/wa-data/public/site/themes/fivei/img/bg-main-cta.svg);
    background-size:contain;
    background-repeat: no-repeat;
    position:relative;
    z-index:2;
}
.main-cta:before {
    content:"";
    display:block;
    width:32px;
    height:32px;         
    background:url(/wa-data/public/site/themes/fivei/img/bg-main-cta-before.svg);
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    right:60px;
    top:30px;
}

.secondary-cta-wrapper {
    position:relative;
}
.secondary-cta-wrapper:after {
    content:"";
    display:block;
    width:100px;
    height:100px;         
    background:url(/wa-data/public/site/themes/fivei/img/bg-secondary-cta-after.svg);
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    z-index:1;
    right:50px;
    bottom:50px;
    backdrop-filter: blur(3px);
    filter:drop-shadow(0px 8px 7px rgba(22, 141, 208, 0.16));
}
.secondary-cta {
    background: url(/wa-data/public/site/themes/fivei/img/bg-secondary-cta.svg);
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 45px;
    padding-left: 60px;
    padding-right: 54px;
    margin-left: -20px;
    position:relative;
    z-index:2;
}

.download-link {
    color: var(--blue-main);
    padding-right:25px;
    position:relative;
    text-decoration:underline;
    font-weight:600;
    width: max-content;
}
.download-link:before {
    content:"";
    display:block;
    width:16px;
    height:16px;         
    background:url(/wa-data/public/site/themes/fivei/img/icons/icon-download.svg);
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    right:0px;

}
.section-title {
    text-align:center;
    font-weight:600;
}
.title-big {
    font-size:56px;
}
.title-devider {
    width:100%;
    position:relative;
}
.title-devider:after {
    display:block;
    content:'';
    position:absolute;
    bottom:-30px;
    height:7px;
    width:100%;
    background:url(/wa-data/public/site/themes/fivei/img/icons/divider_titles.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    
}
.fivei-list {
    list-style:none;
    padding:0;
}
.fivei-list li {
    position:relative;
    line-height:200%;
    padding-left:25px;
}
.fivei-list li:before {
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:9px;
    width:12px;
    height:12px;
    background:url(/wa-data/public/site/themes/fivei/img/icons/icon-fivei-list.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
    
}
.bg-white {
    background-color: #fff;
}
.bg-blur {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255,255,255,.3);
    /*border-image-source: linear-gradient(308.03deg, #FFFFFF 27.56%, #D6F3FF 76.01%);*/
    box-shadow: 0px 8px 20px 0px rgba(22, 141, 208, 0.16);



}

.bg-hero-main-page {
    background:url(/wa-data/public/site/themes/fivei/img/bg-hero-main-page.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}
.bg-hero-quartet {
    background:url(/wa-data/public/site/themes/fivei/img/bg-hero-quartet-min.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}
.bg-advantages {
    background:url(/wa-data/public/site/themes/fivei/img/main-page/bg-advantages-new-min.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}
.bg-main-form-section {
    background:url(/wa-data/public/site/themes/fivei/img/main-page/bg-main-form.svg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}
.bg-main-form {
    background:url(/wa-data/public/site/themes/fivei/img/bg-main-form.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
    overflow:hidden;
    border-radius:40px;
    padding:40px;
}
.page-piramide img {
    margin: -100px;
    max-width: 170%;
}
.page-figure img {
    margin-left:auto;
    max-width: 170%;
    margin-top: -100px;
}
.main-form-block {
    
    border-radius: 30px;
    border:5px solid #fff;
    overflow:hidden;
}
.main-form-block__form {
    background-color:#fff;
    padding:40px;
}
.privacy-policy {
    color: var(--neutral400);
    margin-top:30px;
}
.privacy-policy a {
    color: var(--neutral600);
}

.bg-navigator-section {
    background:url(/wa-data/public/site/themes/fivei/img/main-page/bg-navigator-section.svg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}

.card__img {
    overflow:hidden;
    max-height:200px;
}

.bg-navigator {
    background:url(/wa-data/public/site/themes/fivei/img/main-page/bg-navigator.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
}
.navigator-img {
    padding:80px;
}

.navigator-link {
    position:relative;
    min-height:300px;
}
.navigator-top {
    position:absolute;
    top:0;
}
.navigator-bottom {
    position:absolute;
    bottom:0;
}
.navigator-left {
    left:0;
    margin-left:80px;
}
.navigator-right {
    right:0;
    margin-right:80px;
}
@media screen and (max-width: 1279px) {
    .uk-grid-correction  {
        margin-left:-15px!important;
    }

    .navigator-link h3 {
        margin-bottom: 10px;
    }
    .navigator-img {
        padding:0;
    }
    .navigator-left {
        margin-left:0;
    }
    .navigator-right {
        right:0;
        margin-right:0;
    }
}
@media screen and (max-width: 767px) {
    .main-heading {
        max-width: 70%;
    }
    .page-figure {
        position: absolute;
        right: -230px;
        top: -64px;
    }
    .title-big {
        font-size:40px;
    }

    .secondary-cta {
        margin:0;
    }
    .navigator-link {
        min-height:125px;
    }
    .navigator-link h3 {
        font-size: 100%;
        margin-bottom: 10px;
    }
    .navigator-img {
        padding:0;
    }
    .section-qoute .container img {
        max-width:50px;
        margin-right: 20px;
    }
    .section-qoute .container p {
        font-size:15px;
        line-height:1.2;
    }
}

ul.fivei-faq-accordion li {
    background: #fff;
    padding:30px;
    border-radius:20px;
    border: 1px solid rgba(210, 223, 250, 1)
}
ul.fivei-faq-accordion li a {
    color: var(--blue-main)!important;
    font-weight:600;
}

ul.fivei-faq-accordion>:nth-child(n+2) {
    margin-top: 40px;
}
ul.fivei-faq-accordion li.uk-open {
    box-shadow: 0px 10px 10px -5px rgba(128, 147, 186, 0.08), 0px 20px 25px -5px rgba(128, 147, 186, 0.08);
}


/* Header: app navigation
------------------------- */

header .search { margin-left: 20px; }
header .search [type="search"], .search [type="search"] { height: 48px; background-color: var(--gray6); color: var(--header-search-input-color); border-radius: 64px; padding: 0 32px 0 16px;}
header .search [type="search"]:focus, .search [type="search"]:focus,
header .search [type="search"]:hover, .search [type="search"]:hover { background-color: var(--gray5); }

header .pages { padding: 0; margin: 0; }
header .pages li { display: inline-block; list-style: none; }
header .pages li a { display: block; color: var(--neutral400); transition: opacity 200ms linear; text-decoration:none; font-weight:600}
header .pages li a:hover { opacity: .7 }
header .pages li.selected a { font-weight: bold; border-radius: 3px; background: transparent; }
header .pages {padding-top:16px; padding-bottom:16px;}

header ul.flyout-nav li.collapsible { }
header ul.flyout-nav li.collapsible a { }
header ul.flyout-nav li .flyout { display: none; position: absolute; top: 100%; left: 0; right: 0; min-height: 150px; padding: 15px 30px; text-align: left; z-index: 101; background: var(--header-menu-bg-color); }
header ul.flyout-nav li.submenu-is-shown .flyout { display: block }

header ul.flyout-nav li .flyout a { text-transform: none; }
header ul.flyout-nav li .flyout a:hover { }
header ul.flyout-nav li .flyout ul.menu-v li { border: none; vertical-align: top; text-align: left; margin: 0 20px 20px 0; }
header ul.flyout-nav li .flyout ul.menu-v li.collapsible { background: none; }
header ul.flyout-nav li .flyout ul.menu-v li a { font-weight: bold; padding-left: 0; font-size: 1.1em; }
header ul.flyout-nav li .flyout ul.menu-v li ul.menu-v li { display: block; margin: 0; font-size: 0.9em; }
header ul.flyout-nav li .flyout ul.menu-v li ul.menu-v li a { font-weight: normal; }
header ul.flyout-nav li .flyout ul.menu-v li ul.menu-v li ul { display: none; }
header ul.flyout-nav li .flyout .departments ul.menu-v li { width: 173px; }
header ul.flyout-nav li .flyout .tags { font-size: 120%; }
header ul.flyout-nav li .flyout ul.menu-v.brands { text-align: center; }
header ul.flyout-nav li .flyout ul.menu-v.brands a { font-size: 1.2em; font-weight: normal; }

body.is-shadow-shown { position: relative; }
body.is-shadow-shown:after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .25); z-index: 99;}
body.is-shadow-shown .globalheader { position: relative; z-index: 100; }

/* Main
------- */
main { flex: 1 }
main.maincontent { margin: 0; }
/*main.maincontent .container { padding-bottom: 40px; padding-top:40px;}*/


/*CONTACTS*/
.contacts-wrapper {
    background:#fff;
    border-radius: 24px;
    margin: 40px 0;
}
.contact-block {
    display:flex;
    flex-direction:column;
}
.contact-heading {
    font-family: Noto Sans;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color:#475569;
}
.contact-line {
    margin-top:5px;
    margin-bottom:25px;
    color:#475569;
    font-weight: 400;
    font-size:14px;
}
.contact-line:last-of-type {
    margin-bottom:35px;
}
.contact-line span {
    display: block;
    margin-bottom: 10px;
}
.contact-icon {
    margin-right:20px;
    float:left;
}
.contact-link {
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color: #485F8E;

} 

/*METHOD*/
.workflow-steps-nav {
    display:flex;
    margin-bottom:40px;
    padding-left: 0;
    
}
.workflow-steps-nav li {
    list-style: none;
    border-bottom: 1px solid rgba(148, 163, 184, 1);
    padding-bottom:10px;

}
.workflow-steps-nav li.uk-active {
    border-bottom: 3px solid rgba(42, 68, 119, 1);

}
.workflow-steps-nav li a {
    font-family:  "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    text-decoration:none;
    color: rgba(148, 163, 184, 1);
    width:100%;
    display:block;
}
.workflow-steps-nav li.uk-active a {
    color: rgba(42, 68, 119, 1);

    
}
.workflow-step {
    display:flex;
    margin-bottom:30px;
    position: relative;
    
}
.step-number {
    position: relative;
    font-family: Noto Sans;
    font-weight: 600;
    line-height: 24px;
    color: rgba(71, 85, 105, 1);
    padding: 24px 50px 0 30px;
    display: flex;
}
.step-number span {
    font-size: 20px;
}
.step-number span:first-child {
    color:rgba(246, 101, 162, 1);
    padding-right:10px;
}

.workflow-step .step-number-line {
    position: absolute;
    border: 2px solid rgba(65, 200, 254, 1);
    top:30px;
    left: 150px;
    bottom:-50px;
    height: calc(100% + 30px);
}
.workflow-step .step-number-line:after {
    position:absolute;
    content:"";
    width:48px;
    height:48px;
    background: url(/wa-data/public/site/themes/fivei/img/method/step-circle.svg) center center no-repeat;
    background-size:contain;
    left: -24px;
    top: -24px;
    
}
.workflow-step:last-child .step-number-line {
    position: absolute;
    border: none;
    width:4px;
}

.workflow-step:last-child .step-number-line:after {
    position:absolute;
    content:"";
    width:64px;
    height:64px;
    background: url(/wa-data/public/site/themes/fivei/img/method/last-step-circle.svg) center center no-repeat;
    background-size:contain;
    left: -28px;
    top: -24px;
    
}

.step-decription {
    margin-left: 80px;
    padding: 24px 32px;
    border-radius: 16px;
    background:white;
    box-shadow: 0px 10px 10px -5px rgba(128, 147, 186, 0.08), 0px 20px 25px -5px rgba(128, 147, 186, 0.08);

}
.information{
    padding: 24px 32px;
    border-radius: 16px;
    background:white;
    box-shadow: 0px 10px 10px -5px rgba(128, 147, 186, 0.08), 0px 20px 25px -5px rgba(128, 147, 186, 0.08);
}
.step-heading, .information-heading {
    text-transform:uppercase;
    font-weight:600;
    font-size:20px;
    color: var(--neutral600);
}
.step-text {}

            
@media screen and (max-width: 640px) {
    .workflow-steps-nav li a {
        font-size:15px;
    }
    .step-number {
        padding:10px 0px;
        flex-direction:column;
    }
    .step-number span {
        line-height: 1;
        font-size:15px;
    }
    .workflow-step .step-number-line {
        left:64px;
        top:35px;
    }
    .workflow-step .step-number-line:after {
        width:32px;
        height:32px;
        left:-16px;
        
    }
    .workflow-step:last-child .step-number-line:after {
        width:34px;
        height:34px;
        left: -16px;
    }
    .step-decription {
        padding:16px 24px;
        margin-left: 50px;
        
    }
    .information{
                padding:16px 24px;
    }
    .step-heading, .information-heading {
        font-size:15px;
    }

}

.content { position: relative; }


.mailer-subscribe { padding: 7px 47px 32px; margin-bottom: 32px; border-bottom: 2px solid var(--footer-divider-color);}
.mailer-subscribe a { color: var(--footer-subscribe-link-color);}
.s-subscribe-section form { position: relative; }
.s-subscribe-section--title { font-size: 20px; color: var(--black) }
.s-subscribe-section--title span { display: block; font-size: 14px; color: var(--gray) }
.s-subscribe-section input { background: var(--gray6); border-radius: 64px; padding: 12px 16px; border: 0 none; outline: none; height: fit-content; }
.s-subscribe-section input:focus,
.s-subscribe-section input:hover { background: var(--gray5); }
.s-subscribe-personal-data { font-size: 12px; color: var(--gray4); }
.s-subscribe-section.is-extended .s-hidden { display: block; }
.s-subscribe-section .s-hidden { display: none; position: absolute; top: 100%; left: 0; width: 340px; padding: 1em; background: var(--white); z-index: 1; -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, .2); box-shadow: 0 0 16px rgba(0, 0, 0, .15); border-radius: 3px; }
.s-subscribe-section .s-hidden .wa-captcha { margin: 0; padding: 0; }
.s-subscribe-section .s-hidden .wa-captcha p { display: flex; align-items: center; }
.s-subscribe-section .s-hidden .wa-captcha p input { width: 1em; border: 1px solid var(--gray4); flex: 1 1 auto; padding: 10px 16px }
.s-subscribe-section .s-hidden .wa-captcha p img { margin: 0; }
.s-subscribe-section .s-hidden .wa-captcha p strong { margin: 0 .5em; }

.s-subscribe-section .s-hidden .wa-captcha p a { display: inline; }


/* Footer
--------- */
.footer-block {
    padding:20px;
}
footer.globalfooter { background: var(--footer-bg-color); box-shadow: var(--shadow1); z-index: 0;  min-height: 40px; color: var(--footer-color); }
footer a:hover { color: var(--footer-link-hover-color); }

footer {
    position:relative;
    padding-top:70px;
    margin-top:70px;
}
footer:before {
    display: block;
    content: "";
    width: 128px;
    height: 128px;
    background: url(/wa-data/public/site/themes/fivei/img/fivei-footer-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: -64px;
}
footer .footer_slogan {
    font-family: Inter;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: #94A3B8;
    display:block;
    margin-bottom:40px;
 }
.footer-link {
    color: var(--neutral500);
    margin-right: 24px;
    white-space:nowrap;
    margin-bottom:20px;

}
.footer-link:hover {
    color: var(--neutral700);
}

/*METHOD I*/
.section-qoute {
    padding-top:100px;
    padding-bottom:50px;
    
}
.section-qoute img {
    margin-right: 40px;
}
.section-qoute p  {
    font-family: Noto Sans;
    font-size: 28px;
    font-style: italic;
    font-weight: 500;
    line-height: 48px;
    text-align: left;
    color: rgba(42, 68, 119, 1);
    margin:0;
     }
.section-qoute span.quote-author {
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: block;
    width:100%;
    text-align:right;
    color: var(--neutral400);
}


.footer-block a.top { font-size: 20px; margin-bottom: 32px; color: var(--black) !important; display: block; }
.footer-block.contact-us { }
.footer-block.contact-us .social { display: flex; gap: 10px; margin-bottom: 16px; }
.footer-block.contact-us .social a { color: var(--black) !important; width: 32px; height: 32px; background: var(--gray6); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: opacity 200ms linear; }
.footer-block.contact-us .social a:hover { opacity: .6; }

.appfooter { position: relative; text-align: center; padding: 20px; color: var(--footer-app-color); border-top: 2px solid var(--footer-divider-color); min-height: 1.5em; margin-top: 20px; }
.appfooter .copyright { }
.appfooter .poweredby { }
.appfooter .poweredby a { text-decoration: underline; }
.appfooter .webasyst-magic-wand { display: inline-block; width: 16px; height: 16px; background: url("img/webasyst.svg") no-repeat; margin-right: 4px; position: relative; top: 2px; z-index: -1; background-size: 16px 16px; }


.s-loading-section { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(255, 255, 255, .5); z-index: 100; }
.s-loading-section .s-loading-content { display: inline-block; }

/* 16x16 Icons
-------------- */

i.icon16 { background-repeat: no-repeat; height: 16px; width: 16px; display: inline-block; text-indent: -9999px; text-decoration: none !important; background-image: url("img/icons.png"); background-size: 260px 160px /* 50% of the original size for auto @2x optimization */; }
* i.icon16 { text-decoration: none !important; vertical-align: top; margin: 0.2em 0.25em 0 0; }
.icon16.rss { background-position: -16px 0; }
.icon16.facebook { background-position: -32px 0; }
.icon16.twitter { background-position: -48px 0; }
.icon16.vk { background-position: -64px 0; }
.icon16.gplus { background-position: -80px 0; }
.icon16.pinterest { background-position: -96px 0; }
.icon16.youtube { background-position: -112px 0; }
.icon16.instagram { background-position: -128px 0; }

.icon16.userpic20 { border-radius: 50%; background-size: 20px 20px; }
.icon16.color { border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); width: 12px; height: 12px; background-image: none; }

.icon16.like { background-position: 0 -16px; margin-top: 0; }
.icon16.star,
.icon16.star-full { background-position: -16px -16px; }
.icon16.star-half { background-position: -32px -16px; }
.icon16.star-empty { background-position: -48px -16px; }
.icon16.star-hover { background-position: -64px -16px; }

.icon16.remove { background-position: -96px -16px; }
.icon16.saved { background-position: -112px -16px; }
.icon16.stock-red { background-position: -128px -16px; }
.icon16.stock-yellow { background-position: -144px -16px; }
.icon16.stock-green { background-position: -160px -16px; }
.icon16.stock-transparent { background-position: -176px -16px; }
.icon16.checkmark { background-position: -192px -16px; }
.icon16.compare { background-position: -208px -16px; }
.icon16.compare.active { background-position: -224px -16px; }

.icon16.uarr { background: url('img/uarr.png'); background-position: 0 0; background-size: 16px 16px; }

.icon16.loading { background-image: url('img/loading16.gif'); background-position: 0 0; background-size: 16px 16px; }
.icon24.loading { background-image: url('img/loading.gif'); background-size: 24px 24px; height: 24px; width: 24px; display: inline-block; }
.icon32.loading { background-image: url('img/loading.gif'); background-size: 32px 32px; height: 32px; width: 32px; display: inline-block; }

/* 10x10 Icons
-------------- */

i.icon10 { background-repeat: no-repeat; height: 10px; width: 10px; display: inline-block; text-indent: -9999px; text-decoration: none !important; background-image: url("img/icons.png"); background-size: 260px 160px; }
* i.icon10 { text-decoration: none !important; vertical-align: top; margin: 0.3em 0.1em 0 0; }
.icon10.darr { background-image: url('img/darr.png'); background-size: 16px 16px; }

.icon10.star,
.icon10.star-full { background-position: 0 -100px; }
.icon10.star-half { background-position: -10px -100px; }
.icon10.star-empty { background-position: -20px -100px; }

/* 24x24 Icons
-------------- */

i.icon24 { background-repeat: no-repeat; height: 24px; width: 24px; display: inline-block; text-indent: -9999px; text-decoration: none !important; background-image: url("img/icons.png"); background-size: 260px 160px; }
* i.icon16 { text-decoration: none !important; vertical-align: top; margin: 0.2em 0.25em 0 0; }
.icon24.rss { background-position: 0 -50px; }
.icon24.facebook { background-position: -24px -50px; }
.icon24.twitter { background-position: -48px -50px; }
.icon24.vk { background-position: -72px -50px; }
.icon24.instagram { background-position: -96px -50px; }
.icon24.youtube { background-position: -120px -50px; }
.icon24.pinterest { background-position: -144px -50px; }
.icon24.gplus { background-position: -168px -50px; }

/* My account (hide core app nav elements)
------------------------------------------ */

html.my ul.menu-h li a { padding: 5px 7px; }
html.my ul.menu-h li.selected a { color: var(--white); }

html.my .sidebar { display: none; }

/* Mobile
--------- */

.nav-negative { display: none; /* mobile-only slide-out navigation */ padding-left: 0; margin: 3rem 0 -1px 0; border-bottom: 1px solid #333; background: var(--header-bg-color); }
.nav-negative li { list-style: none; display: block; border-top: 1px solid #333; }
.nav-negative li a { font-size: 1.2em; text-decoration: none; color: var(--header-link-color) !important; display: block; padding: 15px 26px 15px 16px; }
.nav-negative li.selected a { color: var(--white) !important; text-shadow: 0 1px 0 var(--black); background: transparent; font-weight: bold; }
.nav-negative.auth li { background: var(--header-apps-link-color); display: flex; align-items: center; }
.nav-negative.search { padding: 0; height: 52px; margin-bottom: -3rem; }
.nav-negative.search .search-wrapper { height: 52px; border-radius: 0; border: none; }
.nav-negative.search input { height: 52px; font-size: 1.3em; padding-left: 14px; margin-top: 4px; padding-right: 52px; }
.nav-negative.search button { background-size: 24px 24px; height: 52px; width: 52px; background-position: 3px 15px; top: 0; right: 0; }
.nav-negative.search button:hover::after { content: none; }

@media screen and (min-width: 1279px) {
    .main-cta {
        transform: translatex(-15px);
    }
}
/* TABLET
========= */

@media screen and (min-width: 768px) and (max-width: 1279px) {
    .main-cta {
        transform: translatex(-15px);
    }

    body { -webkit-text-size-adjust: 100%; }
    .main-screen {
        max-height: fit-content;
    }

    .container { min-width:768px; max-width:1264px; padding: 0 18px; }


    .search-wrapper { }

    header.globalheader .appnav { padding-left: 0; padding-right: 0; margin-left: 25px; margin-right: 25px; }

    /* @media screen and (orientation : portrait) { */
    @media screen and (max-width: 850px) {


    }

}


/* MOBILE
========= */

@media screen and (max-width: 767px) {
    .main-screen {
        margin-top:0px;
        padding-top:100px;
        max-height: fit-content;
    }
    h1.main-heading {
        font-size:40px;
    }
    .main-cta {
        background:unset;
    }
    .main-screen__cta {
        padding: 30px;
        background: #fff;
        max-width: fit-content;
        border-radius: 20px;
        min-height:fit-content;
        margin-bottom:30px;
    }
    
    .main-cta:before {
        display:none;
    }
    .bg-main-form {
        padding:0;
    }

    .container {max-width:760px; min-width: 0; padding: 0 1rem; }

    .breadcrumbs { display: none; }

    .sidebar { }

    .content { }

    .content.with-sidebar { }

    .auth.nav-negative { display: flex; margin-top: 48px; align-items: stretch !important; border-top: 1px solid #333; justify-content: flex-end; }
    .auth.nav-negative:has(+.nav-negative +.globalheader #header-container .search) { margin-top: 86px; }
    .auth.nav-negative li { border: 0; background: none; }
    .auth.nav-negative a { padding: 8px 16px; color: #666 !important; }
    .nav-negative { display: block; margin-top: 0; }

    header #globalnav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background:#fff; }

    header #globalnav > .container { padding: 0 0.5rem; }

    header h2 { margin-right: 0 !important; overflow: hidden; margin-left: 8px; }

    header h2 a img { display: none; }

    header h2 a span { display: inline; }

    header .appnav:has(.search) { margin-top: 86px !important; margin-bottom: 0 !important; }
    header .appnav { margin-top: 58px !important; margin-bottom: 10px !important; }
    header .appnav.no-margin:has(.search) { margin-top: 0 !important; }
    header .appnav.no-margin { margin-top: 10px !important; }

    header #mobile-nav-toggle { display: block; outline: 0; }
    header #mobile-nav-toggle:hover { color: var(--yellow); }

    header #globalnav nav {/* display: none !important; */}

    header .pages { display: none }
    header .pages li { margin: 0 !important; }

    header .auth { display: none; }

    header .auth li a { font-size: 1em; }

    header .auth li a i.icon16 { margin-top: 0; }

    header .apps.unfolded { display: block; }


    header ul.flyout-nav li.submenu-is-shown > a { }

    .content img { max-width: 100%; }

    .search {
        position: fixed;
        top: 47px;
        left: 0;
        z-index: 9999;
        margin: 0 !important;
        width: 100%;
    }
    .search-wrapper { padding-right: 0; }
    .search-wrapper input {
        height: 38px !important;
        background-color: var(--header-bg-color) !important;
        border-radius: 0 !important;
    }
    .search-wrapper button {
        top: 4px;
        right: 8px;
    }

    footer.globalfooter { }

    .footer-block { }

    .footer-block#copyright { }

    .footer-block a { }

    .footer-note { }

    .appfooter { }

    .appfooter .copyright,
    .appfooter .poweredby { }

    .wa-form .wa-field .wa-name { float: none; padding-bottom: 0; margin-bottom: 5px; }
    .wa-form .wa-field .wa-value { margin-left: 0; margin-bottom: 13px; }
    .wa-form .wa-field .wa-value p span { display: block; }
    .wa-form .wa-field .wa-value input[type="text"],
    .wa-form .wa-field .wa-value input[type="email"],
    .wa-form .wa-field .wa-value input[type="password"] { min-width: 200px; }

    .wa-auth-adapters p { width: 80%; }

    .wa-captcha input.wa-captcha-input { width: 100px; }

    .errormsg { margin-left: 0; }

    table td { padding: 5px; }

    html.my ul.menu-h li a { padding: 10px; }

    .comment-form-fields label { float: left; }

    .sub-links li { font-size: 110%; margin-bottom: 5px; }

    .sidebar .likebox { display: none; }

    .connect.inline .likebox { display: block; width: auto; }

    .wa-signup-form .wa-form .wa-field.wa-field-email .wa-value input { min-width: 240px; }

    .wa-signup-form .wa-form .wa-field.wa-field-password .wa-value input,
    .wa-signup-form .wa-form .wa-field.wa-field-password_confirm .wa-value input { min-width: 160px; width: 160px; }

    .olives { padding: 10px; }

    .olives-left,
    .olives-right { background-size: 25px auto; min-height: 55px; }

    .olives-content { margin: 0 20px; font-size: 0.9em; padding: 10px; }

    .mailer-subscribe { padding-inline: 10px; }

}

/* WIDE
========= */

@media screen and (min-width: 1279px) {

    .container { max-width: 1264px; padding-left:24px; padding-right:24px; }

}

/* FOOTER NOTICE */
.footer-note { color: var(--footer-notice-color); font-size: 0.9em; }
.s-footer-notice { color: var(--footer-notice-color); margin-top: 16px; font-size: 0.9em; line-height: 1.3em; text-align: left; }
.s-footer-notice a { color: inherit; text-decoration: underline; }

/* OTHER */
.wa-login-form-actions button,
.wa-signup-form-actions button,
.wa-forgotpassword-form-actions button,
.wa-set-password-form-wrapper button,
.wa-login-form-actions [type=button],
.wa-signup-form-actions [type=button],
.wa-forgotpassword-form-actions [type=button],
.wa-set-password-form-wrapper [type=button],
.wa-login-form-actions [type=submit],
.wa-signup-form-actions [type=submit],
.wa-forgotpassword-form-actions [type=submit],
.wa-confirm-signup-button,
.wa-set-password-form-wrapper [type=submit] { font-size: 18px; font-weight: bold; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; }

.wa-login-submit { color: var(--white); }



/* GRID
========= */
.row { display: flex; flex-wrap: wrap }
.row.gap4 { --gap: 4px; gap: var(--gap); }
.row.gap6 { --gap: 6px; gap: var(--gap); }
.row.gap8 { --gap: 8px; gap: var(--gap); }
.row.gap16 { --gap: 16px; gap: var(--gap); }
.row.gap20 { --gap: 20px; gap: var(--gap); }
.row.gap32 { --gap: 32px; gap: var(--gap); }
.row.cols1 > .col { --cols-count: 1; }
.row.cols1 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 100%; }
.row.cols2 > .col { --cols-count: 2;}
.row.cols2 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 50%; }
.row.cols3 > .col { --cols-count: 3; }
.row.cols3 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 33.33333333%; }
.row.cols4 > .col { --cols-count: 4; }
.row.cols4 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 25%; }
.row.cols5 > .col { --cols-count: 5;}
.row.cols5 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 20%; }
.row.cols6 > .col { --cols-count: 6; }
.row.cols6 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 16.66666667%; }
.row.cols7 > .col { --cols-count: 7; }
.row.cols7 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 14.285714286%; }
.row.cols8 > .col { --cols-count: 8; }
.row.cols8 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 12.5%; }
.row.cols9 > .col { --cols-count: 9; }
.row.cols9 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 11.111111111%; }
.row.cols10 > .col { --cols-count: 10; }
.row.cols10 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 10%; }
.row.cols11 > .col { --cols-count: 11; }
.row.cols11 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 9.090909091%; }
.row.cols12 > .col { --cols-count: 12; }
.row.cols12 > .col:not(.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12) { --col-width: 8.33333333%; }
.col.w1 { --cols-count: 12; --col-width: 8.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w2 { --cols-count: 6; --col-width: 16.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w3 { --cols-count: 4; --col-width: 25%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w4 { --cols-count: 3; --col-width: 33.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w5 { --cols-count: 2.4; --col-width: 41.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w6 { --cols-count: 2; --col-width: 50%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w7 { --cols-count: 1.7; --col-width: 58.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w8 { --cols-count: 1.5; --col-width: 66.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w9 { --cols-count: 1.33; --col-width: 75%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w10 { --cols-count: 1.2; --col-width: 83.33333333%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w11 { --cols-count: 1.09; --col-width: 91.66666667%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
.col.w12 { --cols-count: 1; --col-width: 100%; flex: 0 0 auto; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }

.col { flex: 1 0 0; width: calc(var(--col-width) - (var(--gap) / var(--cols-count)) * (var(--cols-count) - 1)); }
:is(.row.cols1,.row.cols2,.row.cols3,.row.cols4,.row.cols5,.row.cols6,.row.cols7,.row.cols8,.row.cols9,.row.cols10,.row.cols11,.row.cols12) > .col { flex: 0 0 auto; }
/* MOBILE
========= */

@media screen and (max-width: 760px) {
    .row.cols1-mobile > .col { --cols-count: 1; --col-width: 100% !important; }

    .row.cols2-mobile > .col { --cols-count: 2; --col-width: 50% !important; }

    .row.cols3-mobile > .col { --cols-count: 3; --col-width: 33.33333333% !important; }

    .row.cols4-mobile > .col { --cols-count: 4; --col-width: 25% !important; }

    .row.cols5-mobile > .col { --cols-count: 5; --col-width: 20% !important; }

    .row.cols6-mobile > .col { --cols-count: 6; --col-width: 16.66666667% !important; }

    .row.cols7-mobile > .col { --cols-count: 7; --col-width: 14.285714286% !important; }

    .row.cols8-mobile > .col { --cols-count: 8; --col-width: 12.5% !important; }

    .row.cols9-mobile > .col { --cols-count: 9; --col-width: 11.111111111% !important; }

    .row.cols10-mobile > .col { --cols-count: 10; --col-width: 10% !important; }

    .row.cols11-mobile > .col { --cols-count: 11; --col-width: 9.090909091% !important; }

    .row.cols12-mobile > .col { --cols-count: 12; --col-width: 8.33333333% !important; }
}

/* TABLET
========= */

@media screen and (min-width: 760px) and (max-width: 1024px) {
    .row.cols1-tablet > .col { --cols-count: 1; --col-width: 100% !important; }

    .row.cols2-tablet > .col { --cols-count: 2; --col-width: 50% !important; }

    .row.cols3-tablet > .col { --cols-count: 3; --col-width: 33.33333333% !important; }

    .row.cols4-tablet > .col { --cols-count: 4; --col-width: 25% !important; }

    .row.cols5-tablet > .col { --cols-count: 5; --col-width: 20% !important; }

    .row.cols6-tablet > .col { --cols-count: 6; --col-width: 16.66666667% !important; }

    .row.cols7-tablet > .col { --cols-count: 7; --col-width: 14.285714286% !important; }

    .row.cols8-tablet > .col { --cols-count: 8; --col-width: 12.5% !important; }

    .row.cols9-tablet > .col { --cols-count: 9; --col-width: 11.111111111% !important; }

    .row.cols10-tablet > .col { --cols-count: 10; --col-width: 10% !important; }

    .row.cols11-tablet > .col { --cols-count: 11; --col-width: 9.090909091% !important; }

    .row.cols12-tablet > .col { --cols-count: 12; --col-width: 8.33333333% !important; }
}


/* MOBILE
========= */

@media screen and (max-width: 760px) {
    html {
        --h1-size: 2rem;
        --h2-size: 1.7142rem;
        --h3-size: 1.4285rem;
        --h4-size: 1.1428rem;
        --h5-size: 1rem;
        --h6-size: 1rem;
    }

    .attach { flex-direction: column !important; }
}

/* TABLET
========= */

@media screen and (min-width: 760px) and (max-width: 1024px) {
    html {
        --h1-size: 2rem;
        --h2-size: 1.7142rem;
        --h3-size: 1.4285rem;
        --h4-size: 1.1428rem;
        --h5-size: 1rem;
        --h6-size: 1rem;
    }
}

.attach {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: fit-content;
  margin-bottom: 0.5rem;
}
.attach .remove-attach {
  font-weight: 700;
  padding: 7px;
  margin-left: auto;
}
.attach [type=file] {
  cursor: pointer;
  position: relative;
  width: 290px;
  background-color: transparent;
  padding: 15px 10px 15px 20px;
  border: 2px dashed var(--gray5);
  -webkit-transition: 200ms background linear;
  -moz-transition: 200ms background linear;
  transition: 200ms background linear;
  border-radius: 10px;
  color: var(--link-color);
  box-sizing: border-box;
}
.attach::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 15px;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%22612.675px%22%20height%3D%22612.675px%22%20viewBox%3D%220%200%20612.675%20612.675%22%20style%3D%22enable-background%3Anew%200%200%20612.675%20612.675%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%0A%09%09%09%3Cpath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23777%22%20d%3D%22M581.209%2C223.007L269.839%2C530.92c-51.592%2C51.024-135.247%2C51.024-186.839%2C0c-51.592-51.023-51.592-133.737%2C0-184.761%20L363.248%2C69.04c34.402-34.009%2C90.15-34.009%2C124.553%2C0c34.402%2C34.008%2C34.402%2C89.166%2C0%2C123.174l-280.249%2C277.12%20c-17.19%2C17.016-45.075%2C17.016-62.287%2C0c-17.19-16.993-17.19-44.571%2C0-61.587L394.37%2C161.42l-31.144-30.793L114.144%2C376.975%20c-34.402%2C34.009-34.402%2C89.166%2C0%2C123.174c34.402%2C34.009%2C90.15%2C34.009%2C124.552%2C0l280.249-277.12%20c51.592-51.023%2C51.592-133.737%2C0-184.761c-51.593-51.023-135.247-51.023-186.839%2C0L36.285%2C330.784l1.072%2C1.071%20c-53.736%2C68.323-49.012%2C167.091%2C14.5%2C229.88c63.512%2C62.79%2C163.35%2C67.492%2C232.46%2C14.325l1.072%2C1.072l326.942-323.31%20L581.209%2C223.007z%22%2F%3E%0A%09%09%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  width: 20px;
  height: 100%;
  background-size: contain;
}
.attach [type=file].is-highlighted { background: #fafadf75; }
.attach [type=file]::-webkit-file-upload-button,
.attach [type=file]::file-selector-button { visibility: hidden; width: 0; }
.load-hidden {
    display:none;
}