/* IMPORT */
@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');
*/
@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../elements/fonts/icon_font.woff2) format('woff2');
}


/* CSS VARIABLES */
:root {
    
/*COLORS*/
    --white-color: #FFF;
    --primary-color: #21b0a3;
    --primary-color-light-1: #F2FCF9;
    --primary-color-light-2: #DDF7EF;
    --primary-color-light-3: #AAEBD6;
    --primary-color-light-4: #55D8AE;
    --primary-color-dark-1: #0f746b;
    --primary-color-dark-2: #0C4D38;
    --primary-color-gradient: linear-gradient(132deg, #20cc95 -20%, #205ccc 120%);
    --secondary-color: #0C1516;
    --gray-light-1: #F7F8F8;
    --gray-light-2: #E9EBEB;
    --gray-light-3: #AFB7B7;
    --gray-light-4: #818E8F;
    --gray: #203739;
    --gray-dark-1: #192A2C;
    --blue: #2078BE;
    --blue-light: #E6EFF9;
    --blue-dark: #0C60A3;
    --yellow: #F4B62C;
    --yellow-light: #FDF4E0;
    --red: #FA1631;
    --red-light: #FEDDE1;
    --overlay-color: radial-gradient(circle, #afc8cb 0%, #203739 100%);

    
/*SHADOWS*/
    --primary-shadow: 0px 16px 16px rgba(4, 154, 106, 0.44);
    --red-shadow: 0px 16px 16px rgba(250, 22, 49, 0.32);
    --normal-shadow: 0px 12px 24px rgba(0, 0, 0, 0.08);
    --small-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
    --large-shadow: 0px 16px 16px rgba(0, 0, 0, 0.16);
    
    
/*RADIUS*/
    --small-radius: 4px;
    --normal-radius: 8px;
    --large-radius: 12px;
    
    
/*FONTS*/
    --h1: 64px;
    --h1-height: 68px;
    --h2: 48px;
    --h2-height: 52px;
    --h3: 24px;
    --h3-height: 28px;
    --h4: 18px;
    --h4-height: 24px;
    --h5: 16px;
    --h5-height: 20px;
    --normal-font: 16px;
    --normal-font-height: 20px;
    --small-font: 14px;
    --small-font-height: 18px;
    --tiny-font: 12px;
    --tiny-font-height: 16px;
    
    
/*SPACES*/
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-72: 72px;
    --space-4: 4px;
    --space-12: 12px;
    --space-20: 20px;
    --space-btn: 12px 24px;
    --space-box-modal: 32px 40px;
    --space-box-huge: 40px;
    --space-box: 32px;
    --space-box-small: 24px;
    --space-box-tiny: 16px;

    
/*SIZES*/
    --desktop-content-width : 1140px;

    
/* TRANSITIONS */
    --basic-move: all 0.34s cubic-bezier(0, 0.99, 1, 1);
}


/* CSS DEFAULT */
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, vat, 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, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
    font-family: 'Nunito Sans', sans-serif;
	font-size: var(--normal-font);
    line-height: var(--normal-font-height);
    font-weight: --normal-font-height;
	vertical-align: baseline;
	text-decoration:none;
	outline: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body {
    color: var(--secondary-color);
    background-color: var(--white-color);
    overflow-x: hidden;
    padding-top: 100px;
}

body.no-scroll {
    overflow: hidden;
}


/* ICONS */
.icon {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* ALIGN SYSTEM */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.m-auto { margin-left: auto; margin-right: auto; }


/* CONTROLL SYSTEM */
.hide { display: none !important; }
.disabled { opacity: 0.24; pointer-events: none; }
.invisible { opacity: 0; pointer-events: none; }
.invisible-hide { height: 0; width: 0; overflow: hidden; opacity: 0; pointer-events: none; }
body.no-scroll { overflow: hidden; }


/* MARGIN AND GRID SYSTEM */
.container {
    display: block;
    width: 100%;
    max-width: var(--desktop-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-24);
    padding-right: var(--space-24);
}

.container.general-cont-padding {
    padding-top: var(--space-72);
    padding-bottom: var(--space-72);
}

.mt4 {margin-top: var(--space-4);}
.mt8 {margin-top: var(--space-8);}
.mt12 {margin-top: var(--space-12);}
.mt16 {margin-top: var(--space-16);}
.mt20 {margin-top: var(--space-20);}
.mt24 {margin-top: var(--space-24);}
.mt32 {margin-top: var(--space-32);}
.mt40 {margin-top: var(--space-40);}
.mt48 {margin-top: var(--space-48);}
.mt56 {margin-top: var(--space-56);}
.mt64 {margin-top: var(--space-64);}
.mt72 {margin-top: var(--space-72);}

.mb4 {margin-bottom: var(--space-4);}
.mb8 {margin-bottom: var(--space-8);}
.mb12 {margin-bottom: var(--space-12);}
.mb16 {margin-bottom: var(--space-16);}
.mb20 {margin-bottom: var(--space-20);}
.mb24 {margin-bottom: var(--space-24);}
.mb32 {margin-bottom: var(--space-32);}
.mb40 {margin-bottom: var(--space-40);}
.mb48 {margin-bottom: var(--space-48);}
.mb56 {margin-bottom: var(--space-56);}
.mb64 {margin-bottom: var(--space-64);}
.mb72 {margin-bottom: var(--space-72);}

.ml4 {margin-left: var(--space-4);}
.ml8 {margin-left: var(--space-8);}
.ml12 {margin-left: var(--space-12);}
.ml16 {margin-left: var(--space-16);}
.ml20 {margin-left: var(--space-20);}
.ml24 {margin-left: var(--space-24);}
.ml32 {margin-left: var(--space-32);}
.ml40 {margin-left: var(--space-40);}
.ml48 {margin-left: var(--space-48);}
.ml56 {margin-left: var(--space-56);}
.ml64 {margin-left: var(--space-64);}
.ml72 {margin-left: var(--space-72);}

.mr4 {margin-right: var(--space-4);}
.mr8 {margin-right: var(--space-8);}
.mr12 {margin-right: var(--space-12);}
.mr16 {margin-right: var(--space-16);}
.mr20 {margin-right: var(--space-20);}
.mr24 {margin-right: var(--space-24);}
.mr32 {margin-right: var(--space-32);}
.mr40 {margin-right: var(--space-40);}
.mr48 {margin-right: var(--space-48);}
.mr56 {margin-right: var(--space-56);}
.mr64 {margin-right: var(--space-64);}
.mr72 {margin-right: var(--space-72);}

.grid {
    box-sizing:border-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:flex;
    -webkit-flex:0 1 auto;
    -ms-flex:0 1 auto;
    -webkit-box-flex:0;
    flex:0 1 auto;
    -webkit-flex-direction:row;
    -ms-flex-direction:row;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    flex-direction:row;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.grid.grid-nogutter {
    margin-left: 0;
    margin-right: 0;
}

.grid.grid-nogutter > .col {
    padding-left: 0;
    padding-right: 0;
}

.grid.grid-large-gutter {
    margin-left: -16px;
    margin-right: -16px;
}

.grid.grid-large-gutter > .col {
    padding: 0 16px 0 16px;
}

.grid.grid-small-gutter {
    margin-left: -4px;
    margin-right: -4px;
}

.grid.grid-small-gutter > .col {
    padding: 0 4px 0 4px;
}

.col {
    box-sizing:border-box;
    -webkit-flex:0 0 auto;
    -ms-flex:0 0 auto;
    flex:0 0 auto;
    -webkit-flex-grow:1;
    -ms-flex-positive:1;
    -webkit-box-flex:1;
    flex-grow:1;
    -ms-flex-preferred-size:0;
    -webkit-flex-basis:0;
    flex-basis:0;
    max-width:100%;
    min-width:0;
    padding: 0 8px 0 8px;
}

.sm-visible, 
.xs-visible,
.sm-visible-flex,
.xs-visible-flex,
.sm-visible-inline,
.xs-visible-inline { 
    display: none !important; 
}

.col-align-top {
    -webkit-align-self:flex-start;
    -ms-flex-item-align:start;
    align-self:flex-start
}

.col-align-bottom {
    align-self:flex-end
}

.col-align-middle {
    -webkit-align-self:center;
    -ms-flex-item-align:center;
    align-self:center
}

.col-top {
    justify-content:flex-start !important;
    flex-direction:column;
    display:flex
}

.col-bottom {
    justify-content:flex-end !important;
    flex-direction:column;
    display:flex
}

.col-middle {
    justify-content:center;
    flex-direction:column;
    display:flex
}

.grid-start {
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start
}

.grid-center {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}

.grid-end {
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end
}

.grid-around {
    justify-content:space-around
}

.grid-between {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}

.col-first {
    -webkit-box-ordinal-group:0;
    -ms-flex-order:-1;
    order:-1
}

.col-last {
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1
}

.grid-reverse {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    -ms-flex-direction:row-reverse;
    flex-direction:row-reverse
}

.col-fixed { flex:initial }
.col-grow-2 { flex-grow:2 }
.col-grow-3 { flex-grow:3 }
.col-grow-4 { flex-grow:4 }
.col-grow-5 { flex-grow:5 }
.col-grow-6 { flex-grow:6 }
.col-grow-7 { flex-grow:7 }
.col-grow-8 { flex-grow:8 }
.col-grow-9 { flex-grow:9 }
.col-grow-10 { flex-grow:10 }
.col-grow-11 { flex-grow:11 }

.col-1 {
    -ms-flex-preferred-size:8.33333%;
    -webkit-flex-basis:8.33333%;
    flex-basis:8.33333%;
    max-width:8.33333%
}

.col-2 {
    -ms-flex-preferred-size:16.66667%;
    -webkit-flex-basis:16.66667%;
    flex-basis:16.66667%;
    max-width:16.66667%
}

.col-3 {
    -ms-flex-preferred-size:25%;
    -webkit-flex-basis:25%;
    flex-basis:25%;
    max-width:25%
}

.col-4 {
    -ms-flex-preferred-size:33.33333%;
    -webkit-flex-basis:33.33333%;
    flex-basis:33.33333%;
    max-width:33.33333%
}

.col-5 {
    -ms-flex-preferred-size:41.66667%;
    -webkit-flex-basis:41.66667%;
    flex-basis:41.66667%;
    max-width:41.66667%
}

.col-6 {
    -ms-flex-preferred-size:50%;
    -webkit-flex-basis:50%;
    flex-basis:50%;
    max-width:50%
}

.col-7 {
    -ms-flex-preferred-size:58.33333%;
    -webkit-flex-basis:58.33333%;
    flex-basis:58.33333%;
    max-width:58.33333%
}

.col-8{
    -ms-flex-preferred-size:66.66667%;
    -webkit-flex-basis:66.66667%;
    flex-basis:66.66667%;
    max-width:66.66667%
}

.col-9 {
    -ms-flex-preferred-size:75%;
    -webkit-flex-basis:75%;
    flex-basis:75%;
    max-width:75%
}

.col-10 {
    -ms-flex-preferred-size:83.33333%;
    -webkit-flex-basis:83.33333%;
    flex-basis:83.33333%;
    max-width:83.33333%
}

.col-11 {
    -ms-flex-preferred-size:91.66667%;
    -webkit-flex-basis:91.66667%;
    flex-basis:91.66667%;
    max-width:91.66667%
}

.col-12 {
    -ms-flex-preferred-size:100%;
    -webkit-flex-basis:100%;
    flex-basis:100%;
    max-width:100%
}

@media all and (max-width: 1024px) {
    .sm-mt4 {margin-top: var(--space-4);}
    .sm-mt8 {margin-top: var(--space-8);}
    .sm-mt12 {margin-top: var(--space-12);}
    .sm-mt16 {margin-top: var(--space-16);}
    .sm-mt20 {margin-top: var(--space-20);}
    .sm-mt24 {margin-top: var(--space-24);}
    .sm-mt32 {margin-top: var(--space-32);}
    .sm-mt40 {margin-top: var(--space-40);}
    .sm-mt48 {margin-top: var(--space-48);}
    .sm-mt56 {margin-top: var(--space-56);}
    .sm-mt64 {margin-top: var(--space-64);}
    .sm-mt72 {margin-top: var(--space-72);}
    
    .sm-mb4 {margin-bottom: var(--space-4);}
    .sm-mb8 {margin-bottom: var(--space-8);}
    .sm-mb12 {margin-bottom: var(--space-12);}
    .sm-mb16 {margin-bottom: var(--space-16);}
    .sm-mb20 {margin-bottom: var(--space-20);}
    .sm-mb24 {margin-bottom: var(--space-24);}
    .sm-mb32 {margin-bottom: var(--space-32);}
    .sm-mb40 {margin-bottom: var(--space-40);}
    .sm-mb48 {margin-bottom: var(--space-48);}
    .sm-mb56 {margin-bottom: var(--space-56);}
    .sm-mb64 {margin-bottom: var(--space-64);}
    .sm-mb72 {margin-bottom: var(--space-72);}
    
    .sm-ml4 {margin-left: var(--space-4);}
    .sm-ml8 {margin-left: var(--space-8);}
    .sm-ml12 {margin-left: var(--space-12);}
    .sm-ml16 {margin-left: var(--space-16);}
    .sm-ml20 {margin-left: var(--space-20);}
    .sm-ml24 {margin-left: var(--space-24);}
    .sm-ml32 {margin-left: var(--space-32);}
    .sm-ml40 {margin-left: var(--space-40);}
    .sm-ml48 {margin-left: var(--space-48);}
    .sm-ml56 {margin-left: var(--space-56);}
    .sm-ml64 {margin-left: var(--space-64);}
    .sm-ml72 {margin-left: var(--space-72);}
    
    .sm-mr4 {margin-right: var(--space-4);}
    .sm-mr8 {margin-right: var(--space-8);}
    .sm-mr12 {margin-right: var(--space-12);}
    .sm-mr16 {margin-right: var(--space-16);}
    .sm-mr20 {margin-right: var(--space-20);}
    .sm-mr24 {margin-right: var(--space-24);}
    .sm-mr32 {margin-right: var(--space-32);}
    .sm-mr40 {margin-right: var(--space-40);}
    .sm-mr48 {margin-right: var(--space-48);}
    .sm-mr56 {margin-right: var(--space-56);}
    .sm-mr64 {margin-right: var(--space-64);}
    .sm-mr72 {margin-right: var(--space-72);}
    
    .sm-left { text-align: left; }
    .sm-right { text-align: right; }
    .sm-center { text-align: center; }
    .sm-m-auto { margin-left: auto; margin-right: auto; }
    .sm-hide { display: none; }
    .sm-visible { display: block !important; }
    .sm-visible-flex { display: flex !important; }
    .sm-visible-inline { display: inline-block !important; }
    .sm-col-fixed { flex:initial }
    .sm-btn-fluid { width: 100%; display: block; }
    .grid.sm-grid-small-gutter {
        margin-left: -4px;
        margin-right: -4px;
    }
    .grid.sm-grid-nogutter {
        margin-left: 0;
        margin-right: 0;
    }
    .grid.sm-grid-nogutter > .col {
        padding-left: 0;
        padding-right: 0;
    }
    .sm-col-align-top {
        -webkit-align-self:flex-start;
        -ms-flex-item-align:start;
        align-self:flex-start
    }
    .sm-col-align-bottom {
        align-self:flex-end
    }
    .sm-col-align-middle {
        -webkit-align-self:center;
        -ms-flex-item-align:center;
        align-self:center
    }
    .sm-col-top {
        justify-content:flex-start !important;
        flex-direction:column;
        display:flex
    }
    .sm-col-bottom {
        justify-content:flex-end !important;
        flex-direction:column;
        display:flex
    }
    .sm-col-middle {
        justify-content:center;
        flex-direction:column;
        display:flex
    }
    .sm-grid-start {
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start
    }
    .sm-grid-center {
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center
    }
    .sm-grid-end {
        -webkit-box-pack:end;
        -ms-flex-pack:end;
        justify-content:flex-end
    }
    .sm-grid-around {
        justify-content:space-around
    }
    .sm-grid-between {
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    .sm-col-first {
        -webkit-box-ordinal-group:0;
        -ms-flex-order:-1;
        order:-1
    }
    .sm-col-last {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
    .sm-order-1 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
    .sm-order-2 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        order:2
    }
    .sm-order-3 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:3;
        order:3
    }
    .sm-order-4 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:4;
        order:4
    }
    .sm-order-5 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:5;
        order:5
    }
    .sm-order-6 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:6;
        order:6
    }
    .sm-grid-reverse {
        -webkit-box-orient:horizontal;
        -webkit-box-direction:reverse;
        -ms-flex-direction:row-reverse;
        flex-direction:row-reverse
    }
    .sm-col-1 {
        -ms-flex-preferred-size:8.33333%;
        -webkit-flex-basis:8.33333%;
        flex-basis:8.33333%;
        max-width:8.33333%
    }
    .sm-col-2 {
        -ms-flex-preferred-size:16.66667%;
        -webkit-flex-basis:16.66667%;
        flex-basis:16.66667%;
        max-width:16.66667%
    }
    .sm-col-3 {
        -ms-flex-preferred-size:25%;
        -webkit-flex-basis:25%;
        flex-basis:25%;
        max-width:25%
    }
    .sm-col-4 {
        -ms-flex-preferred-size:33.33333%;
        -webkit-flex-basis:33.33333%;
        flex-basis:33.33333%;
        max-width:33.33333%
    }
    .sm-col-5 {
        -ms-flex-preferred-size:41.66667%;
        -webkit-flex-basis:41.66667%;
        flex-basis:41.66667%;
        max-width:41.66667%
    }
    .sm-col-6 {
        -ms-flex-preferred-size:50%;
        -webkit-flex-basis:50%;
        flex-basis:50%;
        max-width:50%
    }
    .sm-col-7{
        -ms-flex-preferred-size:58.33333%;
        -webkit-flex-basis:58.33333%;
        flex-basis:58.33333%;
        max-width:58.33333%
    }
    .sm-col-8 {
        -ms-flex-preferred-size:66.66667%;
        -webkit-flex-basis:66.66667%;
        flex-basis:66.66667%;
        max-width:66.66667%
    }
    .sm-col-9 {
        -ms-flex-preferred-size:75%;
        -webkit-flex-basis:75%;
        flex-basis:75%;
        max-width:75%
    }
    .sm-col-10{
        -ms-flex-preferred-size:83.33333%;
        -webkit-flex-basis:83.33333%;
        flex-basis:83.33333%;
        max-width:83.33333%
    }
    .sm-col-11{
        -ms-flex-preferred-size:91.66667%;
        -webkit-flex-basis:91.66667%;
        flex-basis:91.66667%;
        max-width:91.66667%
    }
    .sm-col-12 {
        -ms-flex-preferred-size:100%;
        -webkit-flex-basis:100%;
        flex-basis:100%;
        max-width:100%
    }
    .col-sm {
        flex:100%;
        max-width:100%
    }
}

@media all and (max-width: 740px) {
    .xs-mt4 {margin-top: var(--space-4);}
    .xs-mt8 {margin-top: var(--space-8);}
    .xs-mt12 {margin-top: var(--space-12);}
    .xs-mt16 {margin-top: var(--space-16);}
    .xs-mt20 {margin-top: var(--space-20);}
    .xs-mt24 {margin-top: var(--space-24);}
    .xs-mt32 {margin-top: var(--space-32);}
    .xs-mt40 {margin-top: var(--space-40);}
    .xs-mt48 {margin-top: var(--space-48);}
    .xs-mt56 {margin-top: var(--space-56);}
    .xs-mt64 {margin-top: var(--space-64);}
    .xs-mt72 {margin-top: var(--space-72);}
    
    .xs-mb4 {margin-bottom: var(--space-4);}
    .xs-mb8 {margin-bottom: var(--space-8);}
    .xs-mb12 {margin-bottom: var(--space-12);}
    .xs-mb16 {margin-bottom: var(--space-16);}
    .xs-mb20 {margin-bottom: var(--space-20);}
    .xs-mb24 {margin-bottom: var(--space-24);}
    .xs-mb32 {margin-bottom: var(--space-32);}
    .xs-mb40 {margin-bottom: var(--space-40);}
    .xs-mb48 {margin-bottom: var(--space-48);}
    .xs-mb56 {margin-bottom: var(--space-56);}
    .xs-mb64 {margin-bottom: var(--space-64);}
    .xs-mb72 {margin-bottom: var(--space-72);}
    
    .xs-ml4 {margin-left: var(--space-4);}
    .xs-ml8 {margin-left: var(--space-8);}
    .xs-ml12 {margin-left: var(--space-12);}
    .xs-ml16 {margin-left: var(--space-16);}
    .xs-ml20 {margin-left: var(--space-20);}
    .xs-ml24 {margin-left: var(--space-24);}
    .xs-ml32 {margin-left: var(--space-32);}
    .xs-ml40 {margin-left: var(--space-40);}
    .xs-ml48 {margin-left: var(--space-48);}
    .xs-ml56 {margin-left: var(--space-56);}
    .xs-ml64 {margin-left: var(--space-64);}
    .xs-ml72 {margin-left: var(--space-72);}
    
    .xs-mr4 {margin-right: var(--space-4);}
    .xs-mr8 {margin-right: var(--space-8);}
    .xs-mr12 {margin-right: var(--space-12);}
    .xs-mr16 {margin-right: var(--space-16);}
    .xs-mr20 {margin-right: var(--space-20);}
    .xs-mr24 {margin-right: var(--space-24);}
    .xs-mr32 {margin-right: var(--space-32);}
    .xs-mr40 {margin-right: var(--space-40);}
    .xs-mr48 {margin-right: var(--space-48);}
    .xs-mr56 {margin-right: var(--space-56);}
    .xs-mr64 {margin-right: var(--space-64);}
    .xs-mr72 {margin-right: var(--space-72);}
    
    .xs-left { text-align: left; }
    .xs-right { text-align: right; }
    .xs-center { text-align: center; }
    .xs-m-auto { margin-left: auto; margin-right: auto; }
    .xs-hide { display: none; }
    .xs-visible { display: block !important; }
    .xs-visible-flex { display: flex !important; }
    .xs-visible-inline { display: inline-block !important; }
    .xs-col-fixed { flex:initial }
    .xs-btn-fluid { width: 100%; display: block; }
    .grid.xs-grid-small-gutter {
        margin-left: -4px;
        margin-right: -4px;
    }
    .grid.xs-grid-small-gutter > .col {
        padding: 0 4px 0 4px;
    }
    .grid.xs-grid-nogutter {
        margin-left: 0;
        margin-right: 0;
    }
    .grid.xs-grid-nogutter > .col {
        padding-left: 0;
        padding-right: 0;
    }
    .xs-col-align-top {
        -webkit-align-self:flex-start;
        -ms-flex-item-align:start;
        align-self:flex-start
    }
    .xs-col-align-bottom {
        align-self:flex-end
    }
    .xs-col-align-middle {
        -webkit-align-self:center;
        -ms-flex-item-align:center;
        align-self:center
    }
    .xs-col-top {
        justify-content:flex-start !important;
        flex-direction:column;
        display:flex
    }
    .xs-col-bottom {
        justify-content:flex-end !important;
        flex-direction:column;
        display:flex
    }
    .xs-col-middle {
        justify-content:center;
        flex-direction:column;
        display:flex
    }
    .xs-grid-start {
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start
    }
    .xs-grid-center {
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center
    }
    .xs-grid-end {
        -webkit-box-pack:end;
        -ms-flex-pack:end;
        justify-content:flex-end
    }
    .xs-grid-around {
        justify-content:space-around
    }
    .xs-grid-between {
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    .xs-col-first {
        -webkit-box-ordinal-group:0;
        -ms-flex-order:-1;
        order:-1
    }
    .xs-col-last {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
    .xs-order-1 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
    .xs-order-2 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        order:2
    }
    .xs-order-3 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:3;
        order:3
    }
    .xs-order-4 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:4;
        order:4
    }
    .xs-order-5 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:5;
        order:5
    }
    .xs-order-6 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:6;
        order:6
    }
    .xs-grid-reverse {
        -webkit-box-orient:horizontal;
        -webkit-box-direction:reverse;
        -ms-flex-direction:row-reverse;
        flex-direction:row-reverse
    }
    .xs-col-1 {
        -ms-flex-preferred-size:8.33333%;
        -webkit-flex-basis:8.33333%;
        flex-basis:8.33333%;
        max-width:8.33333%
    }
    .xs-col-2 {
        -ms-flex-preferred-size:16.66667%;
        -webkit-flex-basis:16.66667%;
        flex-basis:16.66667%;
        max-width:16.66667%
    }
    .xs-col-3 {
        -ms-flex-preferred-size:25%;
        -webkit-flex-basis:25%;
        flex-basis:25%;
        max-width:25%
    }
    .xs-col-4 {
        -ms-flex-preferred-size:33.33333%;
        -webkit-flex-basis:33.33333%;
        flex-basis:33.33333%;
        max-width:33.33333%
    }
    .xs-col-5 {
        -ms-flex-preferred-size:41.66667%;
        -webkit-flex-basis:41.66667%;
        flex-basis:41.66667%;
        max-width:41.66667%
    }
    .xs-col-6 {
        -ms-flex-preferred-size:50%;
        -webkit-flex-basis:50%;
        flex-basis:50%;
        max-width:50%
    }
    .xs-col-7{
        -ms-flex-preferred-size:58.33333%;
        -webkit-flex-basis:58.33333%;
        flex-basis:58.33333%;
        max-width:58.33333%
    }
    .xs-col-8 {
        -ms-flex-preferred-size:66.66667%;
        -webkit-flex-basis:66.66667%;
        flex-basis:66.66667%;
        max-width:66.66667%
    }
    .xs-col-9 {
        -ms-flex-preferred-size:75%;
        -webkit-flex-basis:75%;
        flex-basis:75%;
        max-width:75%
    }
    .xs-col-10{
        -ms-flex-preferred-size:83.33333%;
        -webkit-flex-basis:83.33333%;
        flex-basis:83.33333%;
        max-width:83.33333%
    }
    .xs-col-11{
        -ms-flex-preferred-size:91.66667%;
        -webkit-flex-basis:91.66667%;
        flex-basis:91.66667%;
        max-width:91.66667%
    }
    .xs-col-12 {
        -ms-flex-preferred-size:100%;
        -webkit-flex-basis:100%;
        flex-basis:100%;
        max-width:100%
    }
    .col-xs {
        flex:100%;
        max-width:100%
    }
}


/* FONTS */
h1, .h1 {
    font-size: var(--h1);
    line-height: var(--h1-height);
    font-weight: 800;
}

h2, .h2 {
    font-size: var(--h2);
    line-height: var(--h2-height);
    font-weight: 800;
}

h3, .h3 {
    font-size: var(--h3);
    line-height: var(--h3-height);
    font-weight: 800;
}

h4, .h4 {
    font-size: var(--h4);
    line-height: var(--h4-height);
    font-weight: 700;
}

h5, .h5 {
    font-size: var(--h5);
    line-height: var(--h5-height);
    font-weight: 700;
    text-transform: uppercase;
}

b {
    font-weight: 700;
}

a {
    color: var(--blue);
    cursor: pointer;
}

a:hover  {
    color: var(--primary-color-dark-1);
}

a.primary-link {
    color: var(--primary-color);
}

a.primary-link:hover  {
    color: var(--primary-color-dark-1);
}

.highlight-text {
    color: var(--primary-color);
}

.text-red {
    color: var(--red);
}

.text-blue {
    color: var(--blue);
}

.text-green {
    color: var(--green);
}

.text-gray {
    color: var(--gray-light-4);
}

.small-text {
    font-size: var(--small-font);
    line-height: var(--small-font-height);
}

.small-text-gray {
    font-size: var(--small-font);
    color: var(--gray-light-3);
}

.tiny-text {
    font-size: var(--tiny-font);
    line-height: var(--tiny-font-height);
}

.text-cut-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-cut-line-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-cut-line-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-cut-line-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.text-cut-line-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.text-cut-line-6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.text-cut-line-7 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.text-cut-line-8 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

.indent {
    position: relative;
    padding-left: var(--space-24);
}

.indent:after {
    display: block;
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    border-radius: var(--normal-radius);
    background-color: var(--primary-color-light-2);
}


/* SEPAS */
.sepa {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--gray-light-2);
}


/* LOADING */
.loading:after {
    display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 24px;
    border: 3px solid var(--primary-color);
    border-left-color: transparent;
    vertical-align: middle;
    margin-left: var(--space-8);
    animation: spin 1600ms infinite linear;
}

#modal_loading {
    transform: none;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
    background-color: transparent;
}

#modal_loading  .loading-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* LOADING RING */
.loading-ring {
    overflow: visible;
    stroke-width: 6px;
}

.loading-ring .bg {
    stroke: var(--gray-light-2);
    transition: var(--basic-move);
    stroke-linecap: round;
}

.loading-ring .result-circle {
    stroke-dasharray: 10 20;
    stroke: var(--primary-color);
    transition: var(--basic-move);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
}


/* BUTTONS */
.btn {
    display: inline-block;
    color: var(--secondary-color);
    background-color: var(--gray-light-2);
    border-radius: var(--normal-radius);
    padding: var(--space-btn);
    font-weight: 900;
    text-align: center;
    transition: var(--basic-move);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--normal-font);
    outline: none;
    border: 0;
    box-sizing: border-box;
}

.btn span {
    vertical-align: middle;
}

.btn:hover {
    background-color: var(--gray-light-2);
    transform: scale(0.98);
    color: var(--primary-color);
}

.btn .icon {
    color: var(--secondary-color);
}

.btn.btn-primary {
    color: var(--white-color);
    background: var(--primary-color-gradient);
}

.btn.btn-primary .icon {
    color: var(--white-color);
}

.btn.btn-primary-light {
    color: var(--primary-color);
    background: var(--primary-color-light-1);
}

.btn.btn-primary-light .icon {
    color: var(--primary-color);
}

.btn.loading {
    pointer-events: none !important;
    background-color: var(--primary-color-light-4) !important;
    box-shadow: 0px 0px 0px rgba(35, 38, 170, 0) !important;
    color: var(--white-color) !important;
    border: 0;
    animation: pulse 1600ms infinite linear;
}

.btn.loading:after {
    border-color: var(--primary-color);
    border-left-color: transparent;
}

.btn.btn-primary:hover {
    background: linear-gradient(132deg, #20cc95 -90%, #205ccc 120%);
}

.btn.btn-primary-light:hover {
    background-color: var(--primary-color-light-2);
}

.btn.btn-primary-shadow {
    color: var(--white-color);
    background: var(--primary-color-gradient);
    box-shadow: 0px 22px 24px rgba(146, 154, 151, 0.32);
}

.btn.btn-primary-shadow:hover {
    background: linear-gradient(132deg, #20cc95 -90%, #205ccc 120%);
    box-shadow: 0px 0px 0px rgba(35, 38, 170, 0);
}

.btn.btn-outline {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: transparent;
}

.btn.btn-outline:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.btn.btn-primary-outline {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: transparent;
}

.btn.btn-primary-outline:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.btn.btn-outline-white {
    color: var(--white-color);
    border: 1px solid var(--white-color);
    background-color: transparent;
}

.btn.btn-outline-white:hover {
    color: var(--secondary-color);
    background-color: var(--white-color);
}

.btn.btn-white {
    color: var(--primary-color);
    background-color: var(--white-color);
}

.btn.btn-white:hover {
    background-color: var(--primary-color-light-2);
}

.btn.btn-yellow {
    color: var(--primary-color);
    background-color: var(--yellow);
}

.btn.btn-yellow:hover {
    filter: brightness(96%);
}

.btn.btn-red {
    color: var(--red);
    background-color: var(--red-light);
}

.btn.btn-red:hover {
    filter: brightness(96%);
}

.btn.btn-red-strong {
    color: var(--white-color);
    background-color: var(--red);
}

.btn.btn-red-strong:hover {
    filter: brightness(96%);
}

.btn-fluid {
    width: 100%;
    display: block;
}

.btn-fluid-limited {
    width: 100%;
    max-width: 320px;
    display: inline-block;
}

.btn-fluid-limited-short {
    width: 100%;
    max-width: 180px;
    display: inline-block;
}


/* INPUTS */
input::-webkit-input-placeholder {
    color: var(--gray-light-4);
    font-family: 'Nunito Sans', sans-serif;
}

input::-webkit-calendar-picker-indicator {
  display: none;
}

input[type=text],
input[type=number],
input[type=password],
input[type=date],
textarea,
select, .datalist-cont input {
    width: 100%;
    display: block;
    color: var(--secondary-color);
    border: 1px solid var(--gray-light-3);
    background-color: transparent;
    border-radius: var(--normal-radius);
    padding: var(--space-btn);
    transition: var(--basic-move);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--normal-font);
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
    line-height: var(--normal-font-height);

}

input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=date]:focus,
textarea:focus {
    border: 1px solid var(--primary-color);
}

.input-with-icon input::-webkit-input-placeholder {
    color: var(--gray-light-3);
}

.input-limited {
    max-width: 320px;
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    width: 100%;
}

.input-with-icon span {
    position: absolute;
    right: var(--space-16);
    top: 50%;
    transform: translate(0, -50%);
    color: var(--gray-light-3);
    cursor: pointer;
    transition: var(--basic-move);
    z-index: 2;
}

.input-with-icon.input-icon-bg span {
    right: 1px;
    top: 1px;
    height: calc(100% - 2px);
    line-height: calc( var(--space-16)*2 + 14px );
    transform: translate(0, 0);
    width: calc( var(--space-16)*2 + 24px );
    text-align: center;
    border-left: 1px solid var(--primary-color);
    background-color: var(--primary-color-light-1);
    border-top-right-radius: calc( var(--normal-radius) - 1px );
    border-bottom-right-radius: calc( var(--normal-radius) - 1px );
    transition: var(--basic-move);

}

.input-with-icon.input-icon-bg span:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-left: 1px solid var(--primary-color);
}

.input-with-icon.icon-first span {
    display: inline-block;
    pointer-events: none;
    left: var(--space-16);
}

.input-with-icon.icon-first input {
    padding-left: calc( 24px + var(--space-16) + var(--space-8) );
}

.input-with-icon select + span, .datalist-cont span {
    pointer-events: none;
}

.input-white,
.input-with-icon.input-white input,
.input-with-icon.input-white select {
    color: var(--white-color);
    border-color: var(--white-color);
}

.input-with-icon.input-white .icon {
    color: var(--white-color);
}

.input-white input::-webkit-input-placeholder,
input.input-white::-webkit-input-placeholder   {
    color: var(--primary-color-light-4);
}

select.minimal-select {
    color: var(--primary-color);
    border: none;
    display: inline-block;
    width: auto;
    padding: 0;
    cursor: pointer;
}


/* CHECKBOX */
.checkbox {
	display: inline-block;
	cursor: pointer;
}

.checkbox .status {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.checkbox input {
	display: none;
}
.checkbox:active input:checked {
	border-color: var(--primary-color);
}

.checkbox input:checked + .status .checked {
	z-index: 2;
	transform: scale(1);
	opacity: 1;
	border-radius: 4px;
}

.checkbox input:checked + .status .default {
	border-color: var(--primary-color);
}

.checkbox input:checked + .status .checked svg {
	z-index: 2;
	transform: scale(1);
	opacity: 1;
}

.checkbox .default,
.checkbox .checked {
	position: absolute;
	top: -2px;
	left: -2px;
	width: 20px;
	height: 20px;
	border-radius: 2px;
}

.checkbox .default {
	background: transparent;
	z-index: 1;
	border: 2px solid var(--gray-light-4);
	border-radius: 4px;
	top: -2px;
	left: -2px;

}

.checkbox .checked {
	z-index: 0;
	opacity: 0;
	background: var(--primary-color);
	text-align: center;
	color: #fff;
	line-height: 20px;
	transition: var(--basic-move);
}

.checkbox .checked svg {
	width: 14px;
	height: 14px;
	transform: scale(0);
	margin-top: 3px;
	fill: none;
	transition: var(--basic-move);
}

.checkbox .checked svg path {
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.checkbox span {
    vertical-align: middle;
}

.checkbox.checkbox-black .default {
	border-color: var(--primary-color-light-2);
}

.checkbox.checkbox-black span {
	color:var(--primary-color-light-2);
}


/* ICON BUTTONS */
.icon-btn {
    display: inline-block;
    background-color: var(--gray-light-2);
    border-radius: var(--normal-radius);
    padding: var(--space-8);
    transition: var(--basic-move);
    cursor: pointer;
    border-radius: 64px;
}

.icon-btn:hover {
    background-color: var(--gray-light-1);
    transform: scale(0.98);
    color: var(--primary-color);
}

.icon-btn.icon-btn-trans {
    background-color: transparent;
}

.icon-btn.icon-btn-primary {
    background-color: var(--primary-color);
}

.icon-btn.icon-btn-primary span {
    color: var(--white-color);
}

.icon-btn.icon-btn-primary:hover {
    background-color: var(--primary-color-dark-1);
}

.icon-btn.icon-btn-primary-shadow {
    background-color: var(--primary-color);
    box-shadow: var(--primary-shadow);
}

.icon-btn.icon-btn-primary-shadow span {
    color: var(--white-color);
}

.icon-btn.icon-btn-primary-shadow:hover {
    box-shadow: 0px 0px 0px rgba(35, 38, 170, 0);
}

.icon-btn.icon-btn-red-shadow {
    background-color: var(--red);
    box-shadow: var(--red-shadow);
}

.icon-btn.icon-btn-red-shadow span {
    color: var(--white-color);
}

.icon-btn.icon-btn-red-shadow:hover {
    box-shadow: 0px 0px 0px rgba(250, 22, 49, 0);
}

.icon-btn.icon-btn-primary-overlay {
    background-color: var(--primary-color-light-4);
}

.icon-btn.icon-btn-primary-overlay span {
    color: var(--white-color);
}

.icon-btn.icon-btn-trans {
    background-color: transparent;
}

.icon-btn.icon-btn-trans:hover span {
    color: var(--secondary-color);
}

.icon-btn.icon-btn-trans:hover {
    background-color: var(--gray-light-2);
}

.icon-btn.icon-btn-small {
    padding: var(--space-4);
}

.icon-btn.icon-btn-small span {
    font-size: 21px;
}

.icon-btn.icon-btn-large {
    padding: var(--space-16);
}

.icon-btn.icon-btn-brick {
    border-radius: var(--normal-radius);
    padding: var(--space-8) var(--space-16);
}

.icon-btn.icon-btn-brick span {
    color: var(--primary-color);
}

.icon-btn.icon-btn-brick.icon-btn-primary span {
    color: var(--white-color);
}

.float-icon {
    position: absolute;
    top: var(--space-24);
    right: var(--space-24);
}


/* TOB BAR */
.top-bar {
    position: fixed;
    max-width: 640px;
    width: 100%;
	top: -260px;
	left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
	background-color: var(--white-color);
    padding: var(--space-24);
    box-sizing: border-box;
    box-shadow: var(--large-shadow);
    z-index: 104;
    color: var(--secondary-color);
    border-radius: var(--large-radius);
    transition: all 0.4s ease-in;
}

.top-bar.active {
    top: 6%;
	transition: var(--basic-move);
}

.top-bar .content {
    display: inline-block;
	vertical-align: text-top;
	width: calc(100% - 64px);
	box-sizing: border-box;
}

.top-bar .custom-content:empty {
	display:none;
}

.top-bar .custom-content {
	width: 100%;
	display: inline-block;
	padding-top: var(--space-8);
}

.top-bar i.info-icon {
	margin-right: var(--space-8);
	color: var(--primary-color);
}

.top-bar i.close {
    position: absolute;
    top: calc(50% - 18px);
    right: var(--space-16);
}

.top-bar.red,
.top-bar.red i.close {
    background-color: var(--red-light);
}

.top-bar.red i.icon,
.top-bar.red .content,
.top-bar.red i.close  {
    color: var(--red);
}


/* BOXES */
.box {
    padding: var(--space-box);
    border-radius: var(--large-radius);
    background-color: var(--white-color);
}

.box.box-shadow {
    box-shadow: var(--normal-shadow);
}

.box.box-highlight {
    background-color: var(--gray-light-1);
}

.box.box-highlight-2 {
    background-color: var(--gray-light-2);
}

.box.box-highlight-primary {
    background-color: var(--primary-color-light-1);
}

.box-solid-highlight {
    border: 1px solid var(--gray-light-2);
}

.box.box-inline {
   display: inline-block;
}

.box.box-small {
    padding: var(--space-box-small);
}

.box.box-tiny {
    padding: var(--space-box-tiny);
}

.box.box-huge {
    padding: var(--space-box-huge);
}

.box.box-trans {
    background-color: transparent;
 } 

.box.box-title-hlight {
    position: relative;
}

.box.box-title-hlight::after {
    display: block;
    content: "";
    width: 8px;
    height: calc( var(--h1) - 4px );
    border-radius: var(--normal-radius);
    position: absolute;
    left: 0;
    top: calc( 2px + var( --space-32) );
    background-color: var( --primary-color);
}

.box.box-huge.box-title-hlight::after {
    display: block;
    content: "";
    width: 8px;
    height: calc( var(--h1) - 4px );
    border-radius: var(--normal-radius);
    position: absolute;
    left: 0;
    top: calc( 2px + var( --space-40) );
    background-color: var( --primary-color);
}


/* OWL CAROUSEL */
.owl-carousel .owl-item {
    display: inline-block;
}

.owl-carousel .owl-nav.disabled {
    display: none;
}

.owl-carousel .owl-dots {
    margin-top: var(--space-8);
    display: none;
}

.owl-carousel .owl-dots .owl-dot {
    background-color: rgb(255 255 255 / 12%);
    border-radius: 24px;
    width: 12px;
    height: 12px;
    border: 0;
    padding: 0;
    margin: 0px var(--space-4);
}

.owl-carousel .owl-dots .owl-dot.active {
    background-color: rgb(255 255 255 / 32%);
}


/* LOGIN VIEW */
.login-view {
    padding-top: 0;
}

.login-view h1 {
    font-size: 34px;
    line-height: 40px;
    font-weight: 800; 
}

.login-view h1 span {
    display: block;
    font-size: 48px;
    line-height: 48px;
    font-weight: 300; 
}

.login-view .crea-box,
.login-view .form-box {
    position: relative;
    min-height: 100vh;
}

.login-view .form-box .form-wrap .logo {
    max-width: 170px;
}

.login-view .form-box .bottom-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.login-view .form-box .form-wrap {
    width: 100%;
    padding: var(--space-24);
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -120px;
}

.login-view .form-box .form-wrap.confirmation-wrap {
    max-width: 480px;
    margin-top: 0;
}

.login-view .form-box .confirmation-wrap .confirmation-content {
    padding: var(--space-24) var(--space-32);
    border: 2px solid var(--gray-light-2);
    border-radius: var(--large-radius);
}

.login-view .form-box .confirmation-wrap .confirmation-crea {
    margin-bottom: -16px;
}

.login-view .crea-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--primary-color-gradient);
    -webkit-clip-path: polygon(100% 0, 78% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 78% 100%, 0 100%, 0 0);
}

.login-view .crea-wrap {
    max-width: 600px;
    margin-left: auto;
    color: var(--white-color);
    padding: var(--space-24);
}

.login-view .crea-wrap .desktop-app-crea {
    position: relative;
    width: 145%;
    margin-top: -15%;
    margin-bottom: -24%;
    margin-left: -22%;
    z-index: 2;
}

.login-view .rating-items {
    position: relative;
}

.login-view .rating-item .avatar-img {
    display: block;
    border: 2px solid var(--white-color);
    border-radius: 88px;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.login-view .rating-item b,
.login-view .rating-item i {
    color: var(--secondary-color);
}

.login-view .rating-item .trustpilot-star {
    display: inline-block;
    margin-top: calc(0px - var(--space-24));
    margin-right: calc(0px - var(--space-12));
}

.login-view .rating-item {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #a7dce3 0%, #fff 100%);
    box-shadow: 0px 8px 19px rgb(0 0 0 / 8%)
}

.login-view .rating-items .quote {
    position: absolute;
    top: -42%;
    left: -14%;
    z-index: -1;
}

.login-view .crea-wrap .trust-icon {
    vertical-align: text-top;
    margin-left: var(--space-12);
}

.login-view .owl-carousel {
    overflow: hidden;
    padding: 0px 23px;
    padding-bottom: 20px;
    margin-left: -24px;
    width: calc(100% + 48px);
}


/* RESPONSIVE CHANGES */
@media all and (max-width: 1024px) {
    .login-view .form-box .form-wrap {
        margin-top: 0;
    }
    .login-view .form-box .bottom-box {
        position: static;
        margin-top: var(--space-32);
    }
}

@media all and (max-width: 740px) {

    :root {
        --h1: 34px;
        --h1-height: 34px;
        --h2: 24px;
        --h2-height: 28px;
        --h3: 18px;
        --h3-height: 24px;
        --h4: 14px;
        --h4-height: 20px;
        --normal-font: 16px;
        --normal-font-height: 20px;
        --small-font: 12px;
        --small-font-height: 16px;
    }

    /* MODAL */
    .modal.invisible {
        max-width: 100%;
        top: auto;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: var(--space-24);
        -ms-transform: scale(1) translate(0%, 100%);
        transform: scale(1) translate(0%, 100%);
    }
    .modal {
        max-width: 100%;
        top: auto;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: var(--space-24);
        -ms-transform: scale(1) translate(0%, 0%);
        transform: scale(1) translate(0%, 0%);
    }
    .modal,
    .modal.modal.modal-fix-width {
        width: 100%;
        max-width: 100%;
    }

}