@import url("ci-main.css");
/* #region ##################################### GLOBALS ############################################### */
/* #region ======================= Fonts ========================== */
@font-face {
    font-family: 'SFUIDisplay';
    src: url('../fonts/SFUIDisplay-Bold.eot');
    src: url('../fonts/SFUIDisplay-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SFUIDisplay-Bold.woff2') format('woff2'), url('../fonts/SFUIDisplay-Bold.woff') format('woff'), url('../fonts/SFUIDisplay-Bold.ttf') format('truetype'), url('../fonts/SFUIDisplay-Bold.svg#SFUIDisplay-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFUIDisplay';
    src: url('../fonts/SFUIDisplay-Regular.eot');
    src: url('../fonts/SFUIDisplay-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/SFUIDisplay-Regular.woff2') format('woff2'), url('../fonts/SFUIDisplay-Regular.woff') format('woff'), url('../fonts/SFUIDisplay-Regular.ttf') format('truetype'), url('../fonts/SFUIDisplay-Regular.svg#SFUIDisplay-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.hidden {
    display: none !important;
}

.urbanist-100 {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.urbanist-800 {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}


/* #endregion ==================== Fonts ========================== */
/* #region ====================== Layout ========================== */
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: 'Urbanist';
    font-weight: 400;
    min-width: 280px;
}

body {
    overflow: auto
}

    body.modal-open {
        overflow: hidden;
    }

div, section {
    box-sizing: border-box;
}

.header {
    position: fixed;
}

.site-body {
    min-height: 100%;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    transition: filter 0.2s ease;
    -webkit-transition: -webkit-filter 0.2s ease;
    -moz-transition: -moz-filter 0.2s ease;
    -ms-transition: -ms-filter 0.2s ease;
}

    .site-body.blured {
        -webkit-filter: blur(9px);
        -moz-filter: blur(9px);
        -ms-filter: blur(9px);
        -o-filter: blur(9px);
        filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='svgBlur' x='-5%' y='-5%' width='110%' height='110%'><feGaussianBlur in='SourceGraphic' stdDeviation='5'/></filter></svg>#svgBlur");
        filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius = '9');
        filter: blur(9px);
        transition: filter 0.2s ease;
        -webkit-transition: -webkit-filter 0.2s ease;
        -moz-transition: -moz-filter 0.2s ease;
        -ms-transition: -ms-filter 0.2s ease;
    }

.wrapper {
    min-height: 100%;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    transition: filter 0.2s ease;
    -webkit-transition: -webkit-filter 0.2s ease;
    -moz-transition: -moz-filter 0.2s ease;
    -ms-transition: -ms-filter 0.2s ease;
}

.footer {
    margin-top: -313px;
    height: 313px;
}

.white-spacing {
    width: 100%;
    height: 310px;
}

.clearfix {
    clear: both;
    width: 100%;
    display: block;
    height: 0px;
}

.inner {
    display: block;
    width: 100%;
    position: relative;
}

.wrapper.blured {
    -webkit-filter: blur(9px);
    -moz-filter: blur(9px);
    -ms-filter: blur(9px);
    -o-filter: blur(9px);
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='svgBlur' x='-5%' y='-5%' width='110%' height='110%'><feGaussianBlur in='SourceGraphic' stdDeviation='5'/></filter></svg>#svgBlur");
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius = '9');
    filter: blur(9px);
    transition: filter 0.2s ease;
    -webkit-transition: -webkit-filter 0.2s ease;
    -moz-transition: -moz-filter 0.2s ease;
    -ms-transition: -ms-filter 0.2s ease;
}
/* #endregion ==================== Layout ========================= */
/* #region ====================== Captions ======================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Chicle', cursive;
}
/* #endregion =================== Captions ======================== */
/* #region ====================== Buttons ========================= */
.btn {
    display: block;
    font-size: 20px;
    text-align: center;
    border-radius: 10px;
    width: auto;
    padding: 25px 50px 25px 50px;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
}

    .btn:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease;
        -webkit-transition: opacity 0.2s ease;
    }

.btn-inline {
    display: inline-block !important;
}

.btn-primary {
    color: #FFFFFF;
    background-color: #DD6E5C;
}
/* #endregion =================== Buttons ========================= */
/* #region =================== Typographics ======================= */
/* #region Colors */
.text-color-base {
    color: #606060 !important;
}

.text-color-muted {
    color: #A1A1A1 !important;
}

.text-color-alt {
    color: #FFFFFF !important;
}

.text-color-primary {
    color: #DD6E5C !important;
}
/* #endregion Colors */
/* #region Sizes */
.ci-size-6 {
    font-size: 6px !important;
}

.ci-size-8 {
    font-size: 8px !important;
}

.ci-size-9 {
    font-size: 9px !important;
}

.ci-size-10 {
    font-size: 10px !important;
}

.ci-size-11 {
    font-size: 11px !important;
}

.ci-size-12 {
    font-size: 12px !important;
}

.ci-size-14 {
    font-size: 14px !important;
}

.ci-size-16 {
    font-size: 16px !important;
}

.ci-size-18 {
    font-size: 18px !important;
}

.ci-size-20 {
    font-size: 20px !important;
}

.ci-size-22 {
    font-size: 22px !important;
}

.ci-size-24 {
    font-size: 24px !important;
}

.ci-size-26 {
    font-size: 26px !important;
}

.ci-size-28 {
    font-size: 28px !important;
}

.ci-size-30 {
    font-size: 30px !important;
}

.ci-size-32 {
    font-size: 32px !important;
}

.ci-size-36 {
    font-size: 36px !important;
}

.ci-size-48 {
    font-size: 48px !important;
}

.ci-size-60 {
    font-size: 60px !important;
}

.ci-size-64 {
    font-size: 64px !important;
}

.ci-size-72 {
    font-size: 72px !important;
}

.ci-size-96 {
    font-size: 96px !important;
}

.ci-size-128 {
    font-size: 128px !important;
}

.ci-size-256 {
    font-size: 256px !important;
}

.ci-size-512 {
    font-size: 512px !important;
}

.ci-size-0x5 {
    font-size: 0.5em !important;
}

.ci-size-1x {
    font-size: 1em !important;
}

.ci-size-1x5 {
    font-size: 1.5em !important;
}

.ci-size-2x {
    font-size: 2em !important;
}

.ci-size-2x5 {
    font-size: 2.5em !important;
}

.ci-size-3x {
    font-size: 3em !important;
}

.ci-size-3x5 {
    font-size: 3.5em !important;
}

.ci-size-4x {
    font-size: 4em !important;
}

.ci-size-4x5 {
    font-size: 4.5em !important;
}

.ci-size-5x {
    font-size: 5em !important;
}

/* #endregion Sizes */
/* #region Paddings */
.ci-padding-0, .ci-xs-padding-0 {
    padding: 0px !important;
}

.ci-padding-1, .ci-xs-padding-1 {
    padding: 1px !important;
}

.ci-padding-2, .ci-xs-padding-2 {
    padding: 2px !important;
}

.ci-padding-3, .ci-xs-padding-3 {
    padding: 3px !important;
}

.ci-padding-4, .ci-xs-padding-4 {
    padding: 4px !important;
}

.ci-padding-5, .ci-xs-padding-5 {
    padding: 5px !important;
}

.ci-padding-6, .ci-xs-padding-6 {
    padding: 6px !important;
}

.ci-padding-7, .ci-xs-padding-7 {
    padding: 7px !important;
}

.ci-padding-8, .ci-xs-padding-8 {
    padding: 8px !important;
}

.ci-padding-9, .ci-xs-padding-9 {
    padding: 9px !important;
}

.ci-padding-10, .ci-xs-padding-10 {
    padding: 10px !important;
}

.ci-padding-20, .ci-xs-padding-20 {
    padding: 20px !important;
}

.ci-padding-30, .ci-xs-padding-30 {
    padding: 30px !important;
}

.ci-padding-40, .ci-xs-padding-40 {
    padding: 40px !important;
}

.ci-padding-50, .ci-xs-padding-50 {
    padding: 50px !important;
}

.ci-padding-60, .ci-xs-padding-60 {
    padding: 60px !important;
}

.ci-padding-70, .ci-xs-padding-70 {
    padding: 70px !important;
}

.ci-padding-80, .ci-xs-padding-80 {
    padding: 80px !important;
}

.ci-padding-90, .ci-xs-padding-90 {
    padding: 90px !important;
}

.ci-padding-100, .ci-xs-padding-100 {
    padding: 100px !important;
}

.ci-padding-150, .ci-xs-padding-150 {
    padding: 150px !important;
}

.ci-padding-200, .ci-xs-padding-200 {
    padding: 200px !important;
}

.ci-padding-250, .ci-xs-padding-250 {
    padding: 250px !important;
}

.ci-padding-300, .ci-xs-padding-300 {
    padding: 300px !important;
}

.ci-padding-x-0, .ci-xs-padding-x-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.ci-padding-x-1, .ci-xs-padding-x-1 {
    padding-left: 1px !important;
    padding-right: 1px !important;
}

.ci-padding-x-2, .ci-xs-padding-x-2 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.ci-padding-x-3, .ci-xs-padding-x-3 {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.ci-padding-x-4, .ci-xs-padding-x-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.ci-padding-x-5, .ci-xs-padding-x-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.ci-padding-x-6, .ci-xs-padding-x-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.ci-padding-x-7, .ci-xs-padding-x-7 {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.ci-padding-x-8, .ci-xs-padding-x-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.ci-padding-x-9, .ci-xs-padding-x-9 {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.ci-padding-x-10, .ci-xs-padding-x-10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.ci-padding-x-20, .ci-xs-padding-x-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.ci-padding-x-30, .ci-xs-padding-x-30 {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.ci-padding-x-40, .ci-xs-padding-x-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.ci-padding-x-50, .ci-xs-padding-x-50 {
    padding-left: 50px !important;
    padding-right: 50px !important;
}

.ci-padding-x-60, .ci-xs-padding-x-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

.ci-padding-x-70, .ci-xs-padding-x-70 {
    padding-left: 70px !important;
    padding-right: 70px !important;
}

.ci-padding-x-80, .ci-xs-padding-x-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
}

.ci-padding-x-90, .ci-xs-padding-x-90 {
    padding-left: 90px !important;
    padding-right: 90px !important;
}

.ci-padding-x-100, .ci-xs-padding-x-100 {
    padding-left: 100px !important;
    padding-right: 100px !important;
}

.ci-padding-x-150, .ci-xs-padding-x-150 {
    padding-left: 150px !important;
    padding-right: 150px !important;
}

.ci-padding-x-200, .ci-xs-padding-x-200 {
    padding-left: 200px !important;
    padding-right: 200px !important;
}

.ci-padding-x-250, .ci-xs-padding-x-250 {
    padding-left: 250px !important;
    padding-right: 250px !important;
}

.ci-padding-x-300, .ci-xs-padding-x-300 {
    padding-left: 300px !important;
    padding-right: 300px !important;
}

.ci-padding-y-0, .ci-xs-padding-y-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.ci-padding-y-1, .ci-xs-padding-y-1 {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.ci-padding-y-2, .ci-xs-padding-y-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.ci-padding-y-3, .ci-xs-padding-y-3 {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.ci-padding-y-4, .ci-xs-padding-y-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.ci-padding-y-5, .ci-xs-padding-y-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.ci-padding-y-6, .ci-xs-padding-y-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.ci-padding-y-7, .ci-xs-padding-y-7 {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.ci-padding-y-8, .ci-xs-padding-y-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ci-padding-y-9, .ci-xs-padding-y-9 {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.ci-padding-y-10, .ci-xs-padding-y-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.ci-padding-y-20, .ci-xs-padding-y-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.ci-padding-y-30, .ci-xs-padding-y-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.ci-padding-y-40, .ci-xs-padding-y-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.ci-padding-y-50, .ci-xs-padding-y-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.ci-padding-y-60, .ci-xs-padding-y-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.ci-padding-y-70, .ci-xs-padding-y-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.ci-padding-y-80, .ci-xs-padding-y-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.ci-padding-y-90, .ci-xs-padding-y-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.ci-padding-y-100, .ci-xs-padding-y-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.ci-padding-y-150, .ci-xs-padding-y-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

.ci-padding-y-200, .ci-xs-padding-y-200 {
    padding-top: 200px !important;
    padding-bottom: 200px !important;
}

.ci-padding-y-250, .ci-xs-padding-y-250 {
    padding-top: 250px !important;
    padding-bottom: 250px !important;
}

.ci-padding-y-300, .ci-xs-padding-y-300 {
    padding-top: 300px !important;
    padding-bottom: 300px !important;
}

.ci-padding-l-0, .ci-xs-padding-l-0 {
    padding-left: 0px !important;
}

.ci-padding-l-1, .ci-xs-padding-l-1 {
    padding-left: 1px !important;
}

.ci-padding-l-2, .ci-xs-padding-l-2 {
    padding-left: 2px !important;
}

.ci-padding-l-3, .ci-xs-padding-l-3 {
    padding-left: 3px !important;
}

.ci-padding-l-4, .ci-xs-padding-l-4 {
    padding-left: 4px !important;
}

.ci-padding-l-5, .ci-xs-padding-l-5 {
    padding-left: 5px !important;
}

.ci-padding-l-6, .ci-xs-padding-l-6 {
    padding-left: 6px !important;
}

.ci-padding-l-7, .ci-xs-padding-l-7 {
    padding-left: 7px !important;
}

.ci-padding-l-8, .ci-xs-padding-l-8 {
    padding-left: 8px !important;
}

.ci-padding-l-9, .ci-xs-padding-l-9 {
    padding-left: 9px !important;
}

.ci-padding-l-10, .ci-xs-padding-l-10 {
    padding-left: 10px !important;
}

.ci-padding-l-20, .ci-xs-padding-l-20 {
    padding-left: 20px !important;
}

.ci-padding-l-30, .ci-xs-padding-l-30 {
    padding-left: 30px !important;
}

.ci-padding-l-40, .ci-xs-padding-l-40 {
    padding-left: 40px !important;
}

.ci-padding-l-50, .ci-xs-padding-l-50 {
    padding-left: 50px !important;
}

.ci-padding-l-60, .ci-xs-padding-l-60 {
    padding-left: 60px !important;
}

.ci-padding-l-70, .ci-xs-padding-l-70 {
    padding-left: 70px !important;
}

.ci-padding-l-80, .ci-xs-padding-l-80 {
    padding-left: 80px !important;
}

.ci-padding-l-90, .ci-xs-padding-l-90 {
    padding-left: 90px !important;
}

.ci-padding-l-100, .ci-xs-padding-l-100 {
    padding-left: 100px !important;
}

.ci-padding-l-150, .ci-xs-padding-l-150 {
    padding-left: 150px !important;
}

.ci-padding-l-200, .ci-xs-padding-l-200 {
    padding-left: 200px !important;
}

.ci-padding-l-250, .ci-xs-padding-l-250 {
    padding-left: 250px !important;
}

.ci-padding-l-300, .ci-xs-padding-l-300 {
    padding-left: 300px !important;
}

.ci-padding-r-0, .ci-xs-padding-r-0 {
    padding-right: 0px !important;
}

.ci-padding-r-1, .ci-xs-padding-r-1 {
    padding-right: 1px !important;
}

.ci-padding-r-2, .ci-xs-padding-r-2 {
    padding-right: 2px !important;
}

.ci-padding-r-3, .ci-xs-padding-r-3 {
    padding-right: 3px !important;
}

.ci-padding-r-4, .ci-xs-padding-r-4 {
    padding-right: 4px !important;
}

.ci-padding-r-5, .ci-xs-padding-r-5 {
    padding-right: 5px !important;
}

.ci-padding-r-6, .ci-xs-padding-r-6 {
    padding-right: 6px !important;
}

.ci-padding-r-7, .ci-xs-padding-r-7 {
    padding-right: 7px !important;
}

.ci-padding-r-8, .ci-xs-padding-r-8 {
    padding-right: 8px !important;
}

.ci-padding-r-9, .ci-xs-padding-r-9 {
    padding-right: 9px !important;
}

.ci-padding-r-10, .ci-xs-padding-r-10 {
    padding-right: 10px !important;
}

.ci-padding-r-20, .ci-xs-padding-r-20 {
    padding-right: 20px !important;
}

.ci-padding-r-30, .ci-xs-padding-r-30 {
    padding-right: 30px !important;
}

.ci-padding-r-40, .ci-xs-padding-r-40 {
    padding-right: 40px !important;
}

.ci-padding-r-50, .ci-xs-padding-r-50 {
    padding-right: 50px !important;
}

.ci-padding-r-60, .ci-xs-padding-r-60 {
    padding-right: 60px !important;
}

.ci-padding-r-70, .ci-xs-padding-r-70 {
    padding-right: 70px !important;
}

.ci-padding-r-80, .ci-xs-padding-r-80 {
    padding-right: 80px !important;
}

.ci-padding-r-90, .ci-xs-padding-r-90 {
    padding-right: 90px !important;
}

.ci-padding-r-100, .ci-xs-padding-r-100 {
    padding-right: 100px !important;
}

.ci-padding-r-150, .ci-xs-padding-r-150 {
    padding-right: 150px !important;
}

.ci-padding-r-200, .ci-xs-padding-r-200 {
    padding-right: 200px !important;
}

.ci-padding-r-250, .ci-xs-padding-r-250 {
    padding-right: 250px !important;
}

.ci-padding-r-300, .ci-xs-padding-r-300 {
    padding-right: 300px !important;
}

.ci-padding-t-0, .ci-xs-padding-t-0 {
    padding-top: 0px !important;
}

.ci-padding-t-1, .ci-xs-padding-t-1 {
    padding-top: 1px !important;
}

.ci-padding-t-2, .ci-xs-padding-t-2 {
    padding-top: 2px !important;
}

.ci-padding-t-3, .ci-xs-padding-t-3 {
    padding-top: 3px !important;
}

.ci-padding-t-4, .ci-xs-padding-t-4 {
    padding-top: 4px !important;
}

.ci-padding-t-5, .ci-xs-padding-t-5 {
    padding-top: 5px !important;
}

.ci-padding-t-6, .ci-xs-padding-t-6 {
    padding-top: 6px !important;
}

.ci-padding-t-7, .ci-xs-padding-t-7 {
    padding-top: 7px !important;
}

.ci-padding-t-8, .ci-xs-padding-t-8 {
    padding-top: 8px !important;
}

.ci-padding-t-9, .ci-xs-padding-t-9 {
    padding-top: 9px !important;
}

.ci-padding-t-10, .ci-xs-padding-t-10 {
    padding-top: 10px !important;
}

.ci-padding-t-20, .ci-xs-padding-t-20 {
    padding-top: 20px !important;
}

.ci-padding-t-30, .ci-xs-padding-t-30 {
    padding-top: 30px !important;
}

.ci-padding-t-40, .ci-xs-padding-t-40 {
    padding-top: 40px !important;
}

.ci-padding-t-50, .ci-xs-padding-t-50 {
    padding-top: 50px !important;
}

.ci-padding-t-60, .ci-xs-padding-t-60 {
    padding-top: 60px !important;
}

.ci-padding-t-70, .ci-xs-padding-t-70 {
    padding-top: 70px !important;
}

.ci-padding-t-80, .ci-xs-padding-t-80 {
    padding-top: 80px !important;
}

.ci-padding-t-90, .ci-xs-padding-t-90 {
    padding-top: 90px !important;
}

.ci-padding-t-100, .ci-xs-padding-t-100 {
    padding-top: 100px !important;
}

.ci-padding-t-150, .ci-xs-padding-t-150 {
    padding-top: 150px !important;
}

.ci-padding-t-200, .ci-xs-padding-t-200 {
    padding-top: 200px !important;
}

.ci-padding-t-250, .ci-xs-padding-t-250 {
    padding-top: 250px !important;
}

.ci-padding-t-300, .ci-xs-padding-t-300 {
    padding-top: 300px !important;
}

.ci-padding-b-0, .ci-xs-padding-b-0 {
    padding-bottom: 0px !important;
}

.ci-padding-b-1, .ci-xs-padding-b-1 {
    padding-bottom: 1px !important;
}

.ci-padding-b-2, .ci-xs-padding-b-2 {
    padding-bottom: 2px !important;
}

.ci-padding-b-3, .ci-xs-padding-b-3 {
    padding-bottom: 3px !important;
}

.ci-padding-b-4, .ci-xs-padding-b-4 {
    padding-bottom: 4px !important;
}

.ci-padding-b-5, .ci-xs-padding-b-5 {
    padding-bottom: 5px !important;
}

.ci-padding-b-6, .ci-xs-padding-b-6 {
    padding-bottom: 6px !important;
}

.ci-padding-b-7, .ci-xs-padding-b-7 {
    padding-bottom: 7px !important;
}

.ci-padding-b-8, .ci-xs-padding-b-8 {
    padding-bottom: 8px !important;
}

.ci-padding-b-9, .ci-xs-padding-b-9 {
    padding-bottom: 9px !important;
}

.ci-padding-b-10, .ci-xs-padding-b-10 {
    padding-bottom: 10px !important;
}

.ci-padding-b-20, .ci-xs-padding-b-20 {
    padding-bottom: 20px !important;
}

.ci-padding-b-30, .ci-xs-padding-b-30 {
    padding-bottom: 30px !important;
}

.ci-padding-b-40, .ci-xs-padding-b-40 {
    padding-bottom: 40px !important;
}

.ci-padding-b-50, .ci-xs-padding-b-50 {
    padding-bottom: 50px !important;
}

.ci-padding-b-60, .ci-xs-padding-b-60 {
    padding-bottom: 60px !important;
}

.ci-padding-b-70, .ci-xs-padding-b-70 {
    padding-bottom: 70px !important;
}

.ci-padding-b-80, .ci-xs-padding-b-80 {
    padding-bottom: 80px !important;
}

.ci-padding-b-90, .ci-xs-padding-b-90 {
    padding-bottom: 90px !important;
}

.ci-padding-b-100, .ci-xs-padding-b-100 {
    padding-bottom: 100px !important;
}

.ci-padding-b-150, .ci-xs-padding-b-150 {
    padding-bottom: 150px !important;
}

.ci-padding-b-200, .ci-xs-padding-b-200 {
    padding-bottom: 200px !important;
}

.ci-padding-b-250, .ci-xs-padding-b-250 {
    padding-bottom: 250px !important;
}

.ci-padding-b-300, .ci-xs-padding-b-300 {
    padding-bottom: 300px !important;
}
/* #endregion Paddings */
/* #region Lists */
.list {
    display: block;
    margin: 0px;
    padding: 0px;
    list-style: none;
    padding-left: 15px;
}

    .list > li {
        display: block;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-left: 15px;
        position: relative;
    }

        .list > li:before {
            content: '';
            position: absolute;
            top: 6px;
            left: 0px;
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #DD6E5C;
        }
/* #endregion Lists */
/* #endregion ================ Typographics ======================= */
/* #endregion ################################## GLOBALS ############################################### */
/* #region ============================== Scrolling ===================================== */
.scroll-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.scroll-section {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
}

.usual-section {
    scroll-snap-align: start;
    height: auto;
}
/* #endregion ========================== /Scrolling ===================================== */
/* #region =========================== Section: Video =================================== */
.video-section {
    display: flex;
    align-items: center;
    overflow: hidden;
}

    .video-section .container {
        text-align: center;
        width: 100%;
        padding-inline: 40px;
    }

    .video-section h2 {
        font-size: 48px;
        color: #DD6E5C;
        max-width: 550px;
        margin-inline: auto;
        font-weight: 400;
        margin-block-end: 20px;
    }

    .video-section p {
        font-size: 28px;
        color: #606060;
        max-width: 550px;
        margin-inline: auto;
    }

    .video-section video {
        width: auto;
        height: 700px;
        border-radius: 30px;
    }

.video-wrapper {
    display: inline-block;
    overflow: hidden;
    border-radius: 30px;
}






@media (max-height: 1060px) {
    .video-section video {
        width: auto;
        height: 600px;
    }
}


@media (max-height: 900px) {
    .video-section video {
        width: auto;
        height: 500px;
    }

    .video-section h2 {
        font-size: 36px;
    }

    .video-section p {
        font-size: 22px;
    }
}

@media (max-height: 800px) {
    .video-section video {
        width: auto;
        height: 400px;
    }
}

@media (max-height: 700px) {
    .video-section video {
        width: auto;
        height: 350px;
    }
}

@media (max-height: 600px) {
    .video-section video {
        width: auto;
        height: 300px;
    }
}

@media (max-width: 480px) {
    .video-section video {
        width: 100%;
        height: auto;
    }

    .video-section h2 {
        font-size: 36px;
    }

    .video-section p {
        font-size: 22px;
    }
}

@media (max-width: 480px) and (max-height: 1000px) {
    .video-section video {
        width: 80%;
        height: auto;
    }
}

@media (max-width: 480px) and (max-height: 800px) {
    .video-section video {
        width: 60%;
        height: auto;
    }
}

@media (max-width: 400px) {
    .video-section h2 {
        font-size: 28px;
    }

    .video-section p {
        font-size: 18px;
    }
}

/* #endregion ======================= /Section: Video =================================== */
/* #region ============================== Scrollbars ==================================== */
.scrollbar-vertical {
    overflow-y: auto;
}

    .scrollbar-vertical .mCSB_inside > .mCSB_container {
        margin-right: 20px;
    }

    .scrollbar-vertical .mCSB_scrollTools {
        background-color: transparent;
        width: 20px;
    }

.scrollbar-horizontal .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    background-color: #ebeef0;
    height: 10px;
}

.scrollbar-vertical .mCSB_scrollTools .mCSB_draggerRail {
    background-image: none;
    background-color: transparent;
}

.scrollbar-horizontal .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    margin: 4px 0px;
    background-image: none;
    background-color: transparent;
}

.scrollbar-vertical .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(164, 171, 181, 1);
    border-radius: 20px;
    width: 10px;
}

.scrollbar-horizontal .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    margin: 3px auto;
    background-color: rgba(164, 171, 181, 1);
    border-radius: 0px;
}

.scrollbar-vertical .mCSB_scrollTools a + .mCSB_draggerContainer {
    margin: 10px 0px;
}

.scrollbar-vertical .mCSB_scrollTools .mCSB_buttonUp, .scrollbar-vertical .mCSB_scrollTools .mCSB_buttonDown {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    font-size: 10px;
    opacity: 1;
    height: 10px;
}

    .scrollbar-vertical .mCSB_scrollTools .mCSB_buttonUp:before, .scrollbar-vertical .mCSB_scrollTools .mCSB_buttonDown:before {
        margin-left: 2px;
        margin-top: 1.5px;
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        vertical-align: middle;
        background-image: url("../images/ci-villagespaces-base.svg");
        background-repeat: no-repeat;
        background-size: 12em 1em;
        font-size: 0.6em;
        opacity: 0.6;
        position: absolute;
    }

    .scrollbar-vertical .mCSB_scrollTools .mCSB_buttonUp:before {
        background-position: -2em 0em;
    }

    .scrollbar-vertical .mCSB_scrollTools .mCSB_buttonDown:before {
        background-position: -3em 0em;
    }


/* #endregion ===================== Scrollbars ==================================== */
/* #region =============================== Modals ======================================= */
.modal-window {
    display: none;
}

    .modal-window.visible {
        display: block;
        position: fixed;
        top: calc(50% - 400px);
        left: calc(50% - 600px);
        width: 1200px;
        height: 800px;
        background-color: #FFFFFF;
        z-index: 9999;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 45px;
        border-radius: 20px;
    }

    .modal-window .inner {
        display: block;
        width: 100%;
        height: 100%;
    }

    .modal-window .modal-header {
        display: block;
        text-align: center;
        font-family: 'Chicle';
        color: #606060;
        font-size: 48px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-top: 20px;
        padding-bottom: 20px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

        .modal-window .modal-header .close-btn {
            display: block;
            position: absolute;
            top: 0px;
            right: 9px;
            width: 60px;
            height: 60px;
            text-align: center;
            border: 0px none transparent;
            padding: 0px;
            background-color: transparent;
            opacity: 1;
            transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
        }

            .modal-window .modal-header .close-btn:hover {
                opacity: 0.6;
                transition: opacity 0.2s ease;
                -webkit-transition: opacity 0.2s ease;
            }

            .modal-window .modal-header .close-btn:active, .modal-window .modal-header .close-btn:focus {
                outline: none;
            }

            .modal-window .modal-header .close-btn span {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
            }

            .modal-window .modal-header .close-btn i {
                display: block;
                width: 32px;
                height: 3px;
                background-color: #606060;
                position: absolute;
                left: calc(50% - 16px);
                top: calc(50% - 3px);
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }

                .modal-window .modal-header .close-btn i + i {
                    left: calc(50% - 16px);
                    top: calc(50% - 3px);
                    transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                }

    .modal-window .modal-body {
        width: 100%;
        height: 100%;
        padding-top: 118px;
        padding-bottom: 20px;
    }

        .modal-window .modal-body .container {
            padding-left: 40px;
            padding-right: 40px;
        }

    .modal-window h3 {
        font-family: 'SFUIDisplay';
        font-size: 36px;
        color: #606060;
        font-weight: bold;
        margin: 0px;
        text-transform: uppercase;
    }

    .modal-window h4 {
        font-family: 'SFUIDisplay';
        font-size: 28px;
        color: #606060;
        font-weight: normal;
        margin: 0px;
    }

    .modal-window p {
        margin: 0px;
        font-size: 18px;
    }

        .modal-window p b {
            padding-right: 10px;
        }

    .modal-window a {
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
    }

        .modal-window a.small {
            text-transform: lowercase;
        }

@media (max-width: 1300px) {
    .modal-window.visible {
        left: calc(50% - 400px);
        width: 800px;
        height: 800px;
        border-radius: 20px;
    }
}

@media (max-width: 900px) {
    .modal-window.visible {
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        border-radius: 0px;
    }
}

@media (max-width: 650px) {
    .modal-window .modal-header {
        display: block;
        text-align: center;
        font-family: 'Chicle';
        color: #606060;
        font-size: 32px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-top: 10px;
        padding-bottom: 10px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

        .modal-window .modal-header .close-btn {
            display: block;
            position: absolute;
            top: 0px;
            right: 9px;
            width: 40px;
            height: 40px;
            text-align: center;
            border: 0px none transparent;
            padding: 0px;
            background-color: transparent;
            opacity: 1;
            transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
        }

    .modal-window .modal-body {
        width: 100%;
        height: 100%;
        padding-top: 78px;
        padding-bottom: 20px;
    }

        .modal-window .modal-body .container {
            padding-left: 20px;
            padding-right: 20px;
        }
}

@media (max-width: 450px) {
    .modal-window .modal-header {
        display: block;
        text-align: center;
        font-family: 'Chicle';
        color: #606060;
        font-size: 28px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-top: 10px;
        padding-bottom: 10px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

        .modal-window .modal-header .close-btn {
            display: block;
            position: absolute;
            top: 0px;
            right: 9px;
            width: 36px;
            height: 36px;
            text-align: center;
            border: 0px none transparent;
            padding: 0px;
            background-color: transparent;
            opacity: 1;
            transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
        }

            .modal-window .modal-header .close-btn i {
                width: 22px;
                height: 3px;
                left: calc(50% - 11px);
                top: calc(50% - 2px);
            }

                .modal-window .modal-header .close-btn i + i {
                    left: calc(50% - 11px);
                    top: calc(50% - 2px);
                    transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                }

    .modal-window .modal-body {
        width: 100%;
        height: 100%;
        padding-top: 68px;
        padding-bottom: 20px;
    }

    .modal-window h3 {
        font-family: 'SFUIDisplay';
        font-size: 24px;
        color: #606060;
        font-weight: bold;
        margin: 0px;
        text-transform: uppercase;
    }

    .modal-window p {
        font-size: 14px;
    }
}

@media (min-width: 900px) and (max-height: 850px) {
    .modal-window.visible {
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        border-radius: 0px;
    }

    .modal-window .modal-body .container {
        padding: 0px;
        margin: 0px auto;
        width: 850px;
    }
}

@media (min-width: 1200px) and (max-height: 850px) {

    .modal-window .modal-body .container {
        padding: 0px;
        margin: 0px auto;
        width: 1000px;
    }
}


@media (min-width: 1600px) and (max-height: 850px) {

    .modal-window .modal-body .container {
        padding: 0px;
        margin: 0px auto;
        width: 1200px;
    }
}
/* #endregion ============================ Modals ======================================= */
/* #region ============================ Section: Start ================================== */
/* #region -------- Background -------- */
.section-start {
    position: relative;
    display: block;
    background-color: #70CDE1;
    background: linear-gradient(180deg, #70CDE1 8.85%, rgba(143, 205, 224, 0.12) 99.99%, rgba(59, 178, 216, 0) 100%);
    width: 100%;
    height: 120vh;
    overflow: hidden;
    min-height: 600px;
}

    .section-start .section-footer {
        position: absolute;
        width: 100%;
        height: 500px;
        background: url(../images/clipart-section-start-bottombg-1.svg) no-repeat center bottom, url(../images/clipart-section-start-bottombg-2.svg) no-repeat center bottom transparent;
        background-size: 100% auto;
        bottom: -2px;
        left: 0px;
        z-index: 3;
    }

    .section-start .static-bg {
        position: absolute;
        width: 100%;
        height: 120vh;
        bottom: 1px;
        left: 0px;
        background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
        background-size: 100% auto;
        z-index: 1;
    }

@media (orientation: portrait) {
    .section-start {
        height: 110vh;
    }

        .section-start .static-bg {
            height: 110vh;
            background-size: auto 700px;
        }
}

.section-start .cloud-bg {
    display: block;
    position: absolute;
    width: 6000px;
    height: 800px;
    background-color: transparent;
    background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
    background-size: contain;
    z-index: 0;
    bottom: 40vh;
    animation: start-cloud-bg 300s linear 0s infinite;
    -webkit-animation: start-cloud-bg 300s linear 0s infinite;
}

@keyframes start-cloud-bg {
    0% {
        opacity: 0;
        background-position-x: 0px;
    }

    1% {
        opacity: 0.4;
    }

    99% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        background-position-x: -9999px;
    }
}

@-webkit-keyframes start-cloud-bg {
    0% {
        opacity: 0;
        background-position-x: 0px;
    }

    1% {
        opacity: 0.4;
    }

    99% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        background-position-x: -9999px;
    }
}

.section-start .cloud-1 {
    display: block;
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: transparent;
    background: url(../images/clipart-section-start-cloud-2.svg) no-repeat center center;
    background-size: contain;
    z-index: 0;
    bottom: 70vh;
    animation: start-cloud 50s linear 0s infinite;
    -webkit-animation: start-cloud 50s linear 0s infinite;
}

.section-start .cloud-2 {
    display: block;
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: transparent;
    background: url(../images/clipart-section-start-cloud-1.svg) no-repeat center center;
    background-size: contain;
    z-index: 0;
    bottom: 80vh;
    animation: start-cloud 45s linear 15s infinite;
    -webkit-animation: start-cloud 45s linear 15s infinite;
    opacity: 0;
}

.section-start .cloud-3 {
    display: block;
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: transparent;
    background: url(../images/clipart-section-start-cloud-3.svg) no-repeat center center;
    background-size: contain;
    z-index: 0;
    bottom: 95vh;
    animation: start-cloud 40s linear 35s infinite;
    -webkit-animation: start-cloud 40s linear 35s infinite;
    opacity: 0;
}

@keyframes start-cloud {
    0% {
        right: -350px;
        opacity: 1;
    }

    100% {
        right: 100%;
        opacity: 1;
    }
}

@-webkit-keyframes start-cloud {
    0% {
        right: -350px;
        opacity: 1;
    }

    100% {
        right: 100%;
        opacity: 1;
    }
}

@media (max-width: 1600px) {
    .section-start .cloud-1,
    .section-start .cloud-2,
    .section-start .cloud-3 {
        width: 250px;
        height: 250px;
    }

    @keyframes start-cloud {
        0% {
            right: -250px;
            opacity: 1;
        }

        100% {
            right: 100%;
            opacity: 1;
        }
    }

    @-webkit-keyframes start-cloud {
        0% {
            right: -250px;
            opacity: 1;
        }

        100% {
            right: 100%;
            opacity: 1;
        }
    }

    .section-start .cloud-bg {
        width: 4000px;
        height: 600px;
    }
}

@media (max-width: 2100px) {
    .section-start .cloud-bg {
        animation: start-cloud-bg 400s linear 0s infinite;
        -webkit-animation: start-cloud-bg 400s linear 0s infinite;
    }

    .section-start .cloud-1 {
        animation: start-cloud 40s linear 0s infinite;
        -webkit-animation: start-cloud 40s linear 0s infinite;
    }

    .section-start .cloud-2 {
        animation: start-cloud 35s linear 10s infinite;
        -webkit-animation: start-cloud 35s linear 10s infinite;
    }

    .section-start .cloud-3 {
        animation: start-cloud 30s linear 20s infinite;
        -webkit-animation: start-cloud 30s linear 20s infinite;
    }
}

@media (max-width: 1400px) {
    .section-start .cloud-bg {
        animation: start-cloud-bg 500s linear 0s infinite;
        -webkit-animation: start-cloud-bg 500s linear 0s infinite;
    }

    .section-start .cloud-1 {
        animation: start-cloud 35s linear 0s infinite;
        -webkit-animation: start-cloud 35s linear 0s infinite;
    }

    .section-start .cloud-2 {
        animation: start-cloud 30s linear 10s infinite;
        -webkit-animation: start-cloud 30s linear 10s infinite;
    }

    .section-start .cloud-3 {
        animation: start-cloud 25s linear 20s infinite;
        -webkit-animation: start-cloud 25s linear 20s infinite;
    }
}

@media (max-width: 1000px) {
    .section-start .cloud-bg {
        animation: start-cloud-bg 600s linear 0s infinite;
        -webkit-animation: start-cloud-bg 600s linear 0s infinite;
    }

    .section-start .cloud-1 {
        animation: start-cloud 30s linear 0s infinite;
        -webkit-animation: start-cloud 30s linear 0s infinite;
    }

    .section-start .cloud-2 {
        animation: start-cloud 25s linear 10s infinite;
        -webkit-animation: start-cloud 25s linear 10s infinite;
    }

    .section-start .cloud-3 {
        animation: start-cloud 20s linear 20s infinite;
        -webkit-animation: start-cloud 20s linear 20s infinite;
    }
}

@media (max-width: 700px) {
    .section-start .cloud-bg {
        animation: start-cloud-bg 700s linear 0s infinite;
        -webkit-animation: start-cloud-bg 700s linear 0s infinite;
    }

    .section-start .cloud-1 {
        animation: start-cloud 25s linear 0s infinite;
        -webkit-animation: start-cloud 25s linear 0s infinite;
    }

    .section-start .cloud-2 {
        animation: start-cloud 20s linear 10s infinite;
        -webkit-animation: start-cloud 20s linear 10s infinite;
    }

    .section-start .cloud-3 {
        animation: start-cloud 15s linear 20s infinite;
        -webkit-animation: start-cloud 15s linear 20s infinite;
    }
}

@media (max-height: 800px) {
    .section-start {
        height: 850px;
    }

        .section-start .cloud-bg {
            width: 6000px;
            height: 800px;
            background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
            background-size: contain;
            z-index: 0;
            bottom: 40%;
        }

        .section-start .static-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 1px;
            left: 0px;
            background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
            background-size: 100% auto;
            z-index: 1;
        }

        .section-start .cloud-1 {
            width: 250px;
            height: 250px;
            background-size: contain;
            bottom: 60%;
        }

        .section-start .cloud-2 {
            width: 250px;
            height: 250px;
            background-size: contain;
            bottom: 65%;
        }

        .section-start .cloud-3 {
            width: 250px;
            height: 250px;
            background-size: contain;
            bottom: 70%;
        }
}

@media (max-height: 800px) and (max-width: 1700px) {
    .section-start .cloud-bg {
        width: 5000px;
        height: 700px;
        background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
        background-size: contain;
        z-index: 0;
        bottom: 35%;
    }

    .section-start .cloud-1 {
        width: 250px;
        height: 250px;
        background-size: contain;
        bottom: 50%;
    }

    .section-start .cloud-2 {
        width: 250px;
        height: 250px;
        background-size: contain;
        bottom: 55%;
    }

    .section-start .cloud-3 {
        width: 250px;
        height: 250px;
        background-size: contain;
        bottom: 60%;
    }
}

@media (max-height: 800px) and (max-width: 1400px) {
    .section-start .cloud-bg {
        width: 5000px;
        height: 700px;
        background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
        background-size: contain;
        z-index: 0;
        bottom: 25%;
    }

    .section-start .cloud-1 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 40%;
    }

    .section-start .cloud-2 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 50%;
    }

    .section-start .cloud-3 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 60%;
    }
}

@media (max-height: 800px) and (max-width: 1200px) {
    .section-start .cloud-bg {
        width: 4000px;
        height: 600px;
        background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
        background-size: contain;
        z-index: 0;
        bottom: 25%;
    }

    .section-start .cloud-1 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 40%;
    }

    .section-start .cloud-2 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 60%;
    }

    .section-start .cloud-3 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 70%;
    }
}

@media (max-height: 800px) and (max-width: 800px) {
    .section-start .cloud-bg {
        width: 4000px;
        height: 600px;
        background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
        background-size: contain;
        z-index: 0;
        bottom: 25%;
    }

    .section-start .cloud-1 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 40%;
    }

    .section-start .cloud-2 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 60%;
    }

    .section-start .cloud-3 {
        width: 200px;
        height: 200px;
        background-size: contain;
        bottom: 70%;
    }

    .section-start .static-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 1px;
        left: 0px;
        background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
        background-size: auto 40%;
        z-index: 1;
    }
}

@media (max-width: 451px) and (max-height: 850px) {
    .section-start {
        height: 850px;
    }

        .section-start .static-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 1px;
            left: 0px;
            background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
            background-size: auto 40%;
            z-index: 1;
        }

        .section-start .cloud-bg {
            width: 4000px;
            height: 600px;
            background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
            background-size: contain;
            z-index: 0;
            bottom: 20%;
            animation: start-cloud-bg 800s linear 0s infinite;
            -webkit-animation: start-cloud-bg 800s linear 0s infinite;
        }

        .section-start .cloud-1 {
            width: 200px;
            height: 200px;
            background-size: contain;
            bottom: 40%;
            animation: start-cloud 30s linear 0s infinite;
            -webkit-animation: start-cloud 30s linear 0s infinite;
        }

        .section-start .cloud-2 {
            width: 200px;
            height: 200px;
            background-size: contain;
            bottom: 60%;
            animation: start-cloud 25s linear 10s infinite;
            -webkit-animation: start-cloud 25s linear 10s infinite;
        }

        .section-start .cloud-3 {
            width: 200px;
            height: 200px;
            background-size: contain;
            bottom: 70%;
            animation: start-cloud 20s linear 20s infinite;
            -webkit-animation: start-cloud 20s linear 20s infinite;
        }
}

@media (max-width: 451px) and (max-height: 750px) {
    .section-start {
        height: 750px;
    }

        .section-start .static-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 1px;
            left: 0px;
            background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
            background-size: auto 40%;
            z-index: 1;
        }

        .section-start .cloud-bg {
            width: 4000px;
            height: 600px;
            background: url(../images/clipart-section-start-cloud-bg.svg) repeat-x center center;
            background-size: contain;
            z-index: 0;
            bottom: 20%;
            animation: start-cloud-bg 800s linear 0s infinite;
            -webkit-animation: start-cloud-bg 800s linear 0s infinite;
        }

        .section-start .cloud-1 {
            width: 200px;
            height: 200px;
            background-size: contain;
            bottom: 40%;
            animation: start-cloud 30s linear 0s infinite;
            -webkit-animation: start-cloud 30s linear 0s infinite;
        }

        .section-start .cloud-2 {
            width: 200px;
            height: 200px;
            background-size: contain;
            bottom: 60%;
            animation: start-cloud 25s linear 10s infinite;
            -webkit-animation: start-cloud 25s linear 10s infinite;
        }

        .section-start .cloud-3 {
            width: 200px;
            height: 200px;
            background-size: contain;
            bottom: 70%;
            animation: start-cloud 20s linear 20s infinite;
            -webkit-animation: start-cloud 20s linear 20s infinite;
        }
}

@media (max-width: 451px) and (max-height: 650px) {
    .section-start {
        height: 650px;
    }

        .section-start .static-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 1px;
            left: 0px;
            background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
            background-size: auto 50%;
            z-index: 1;
        }
}

@media (max-width: 451px) and (max-height: 550px) {
    .section-start {
        height: 550px;
    }

        .section-start .static-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 1px;
            left: 0px;
            background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
            background-size: auto 50%;
            z-index: 1;
        }
}

@media (max-width: 451px) and (max-height: 500px) {
    .section-start {
        height: 500px;
    }

        .section-start .static-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 1px;
            left: 0px;
            background: url(../images/clipart-start-section-bg.svg) no-repeat center bottom;
            background-size: auto 60%;
            z-index: 1;
        }
}

@media (max-width: 451px) and (max-height: 450px) {
    .section-start {
        height: 450px;
    }
}
/* #endregion ----- Background -------- */
.section-start .header {
    display: flex;
    position: absolute;
    z-index: 40;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 120px;
    align-items: center;
    padding-inline: 50px;
}

    .section-start .header .left-side,
    .section-start .header .right-side {
        width: 100%;
        height: 100%;
    }

    .section-start .header .left-side {
        display: flex;
        align-items: center;
    }

        .section-start .header .left-side h1 {
            color: #FFFFFF;
            font-size: 44px;
            display: inline-block;
            line-height: 100%;
            margin: 0px;
            padding: 0px;
            font-weight: 400;
        }

    .section-start .header .right-side {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content:end;
    }

.section-start .btn-install {
    display: inline-block;
    color: #ffffff;
    background-color: #606060;
    border-radius: 50px;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    padding-inline: 40px;
    padding-block: 20px;
}

.section-start .container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 30;
    padding-bottom: 240px;
    padding-top: 50px;
}

.message-block {
    position: absolute;
    width: 600px;
}

    .message-block .message-panel {
        display: block;
        width: 100%;
        background-color: #ffffff;
        border-radius: 30px;   
        padding-inline: 40px;
        padding-block: 40px;
    }

    .message-block h3 {
        font-size: 54px;
        display: block;
        text-align: center;
        color: #DD6E5C;
        margin: 0px;
        font-weight: 400;
    }

    .message-block p {
        font-size: 34px;
        color: #606060;
        text-align: center;
        font-weight: 400;
        padding: 0px;
        margin: 0px;
        margin-block: 20px;
    }

    .message-block .avatar {
        display: block;
        margin-inline: auto;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background-color: rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .message-block .avatar.avatar-1 {
        background: url('../images/user-1.png') no-repeat center center;
        background-size: contain;
    }

        .message-block .avatar.avatar-2 {
            background: url('../images/user-2.png') no-repeat center center;
            background-size: contain;
        }

        .message-block .avatar.avatar-3 {
            background: url('../images/user-3.png') no-repeat center center;
            background-size: contain;
        }

        .message-block .avatar.avatar-4 {
            background: url('../images/user-4.png') no-repeat center center;
            background-size: contain;
        }

    .message-block .corner {
        display: block;
        width: 104px;
        height: 172px;
        background: url('../images/corner.svg') no-repeat center center transparent;
        background-size: 100% 100%;
        margin-inline: auto;
    }

    .message-block.message-2 .corner,
    .message-block.message-4 .corner {
        transform: rotateY(180deg);
    }


    .message-block.message-1 {
        opacity: 0;
        animation: message-block-1 20s ease-in-out infinite;
    }

    .message-block.message-2 {
        opacity: 0;
        animation: message-block-2 20s ease-in-out infinite;
    }

    .message-block.message-3 {
        opacity: 0;
        animation: message-block-3 20s ease-in-out infinite;
    }

    .message-block.message-4 {
        opacity: 0;
        animation: message-block-4 20s ease-in-out infinite;
    }

@media (max-width: 600px) {
    .section-start .header {
        padding-inline: 20px;
    }

        .section-start .header .left-side h1 {
            font-size: 32px;
        }


    .section-start .btn-install {
        font-weight: 800;
        font-size: 12px;
        padding-inline: 30px;
        padding-block: 10px;
    }

    .section-start .header {
        height: 80px;
    }
}

@media (max-height: 850px) {
    .message-block .corner {     
        width: 104px;
        height: 104px;
    }

    .message-block .avatar {
        width: 90px;
        height: 90px;
    }

    .message-block h3 {
        font-size: 36px;
    }

    .section-start .container {
        padding-bottom: 300px;
        padding-top: 50px;
    }

    .message-block p {
        font-size: 22px;
    }
}

@media (max-width: 934px) {
    .section-start .container {
        padding-bottom: 50px;
        padding-top: 0px;
    }

    .message-block {
        width: 400px;
    }

        .message-block p {
            font-size: 28px;
        }
}

@media (max-width: 450px) {
    .message-block .message-panel {
        padding-inline: 20px;
        padding-block: 20px;
    }

    .section-start .container {
        padding-bottom: 50px;
        padding-top: 0px;
    }

    .message-block h3 {
        font-size: 28px;
    }

    .message-block {
        width: 300px;
    }

        .message-block p {
            font-size: 18px;
        }
}

@keyframes message-block-1 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    1% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    24% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    25% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}

@keyframes message-block-2 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    25% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    26% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    49% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    50% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}

@keyframes message-block-3 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    50% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    51% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    74% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    75% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}

@keyframes message-block-4 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    75% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    76% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    99% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}


/* #endregion ========================= Section: Start ================================== */
/* #region ============================ Section: Download =============================== */
.section-download {
    display: block;
    position: relative;
    width: 100%;
}

    .section-download .section-header {
        display: block;
        height: 100px;
        position: relative;
        width: 100%;
        background: url(../images/clipart-section-download-topbg2.svg) no-repeat center bottom, url(../images/clipart-section-download-topbg1.svg) no-repeat center bottom transparent;
        background-size: 100% auto;
        background-color: #FFFFFF;
    }

    .section-download .section-footer {
        display: block;
        height: 190px;
        position: relative;
        width: 100%;
        background: url(../images/clipart-section-download-bottombg2.svg) no-repeat center top, url(../images/clipart-section-download-bottombg1.svg) no-repeat center top transparent;
        background-size: 100% auto;
    }

    .section-download .section-body {
        background-color: #ECECEC;
        margin-top: -2px;
        padding-block: 60px;
    }

    .section-download .container {
        width: 1600px;
        position: relative;
        margin: 0px auto;
    }

    .section-download h2 {
        font-size: 64px;
        color: #DD6E5C;
        text-align: center;
        margin: 0px;
        padding: 0px;
        padding-top: 0px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .section-download .btn-dowload {
        display: block;
        width: 250px;
        height: 90px;
        background: url('../images/button-appstore.svg') no-repeat center center transparent;
        background-size: contain;
        margin-inline: auto;
        opacity: 1;
        transition: opacity 0.1s ease-in-out;
        margin-top: 80px;
    }

        .section-download .btn-dowload:hover {
            opacity: 0.6;
            transition: opacity 0.1s ease-in-out;
        }

    .section-download .willage {
        display: block;
        width: 100%;
        height: 940px;
        background: url("../images/willage.png") no-repeat center center transparent;
        background-size: contain;
        margin-top: 40px;
        margin-bottom: 40px;
    }


@media (max-width: 1650px) {
    .section-download .container {
        width: 1200px;
    }

    .section-download .willage {
        width: 100%;
        height: 710px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 1250px) {
    .section-download .container {
        width: 992px;
    }

    .section-download .willage {
        width: 100%;
        height: 580px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .section-download .willage {
        width: 100%;
        height: 720px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }
}

@media (max-width: 992px) {
    .section-download .container {
        width: 768px;
    }

    .section-download .btn-dowload {
        width: 210px;
        height: 75px;
    }

    .section-download .willage {
        width: 100%;
        height: 450px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .section-download .willage {
        width: 100%;
        height: 720px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }
}

@media (max-width: 800px) {
    .section-download .willage {
        width: 100%;
        height: 720px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }

    .section-download .container {
        width: 100%;
        padding-inline: 20px;
    }
}

@media (max-width: 700px) {
    .section-download .willage {
        width: 100%;
        height: 720px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }

    .section-download .btn-dowload {
        margin-top: 40px;
    }
}

@media (max-width: 600px) {
    .section-download h2 {
        font-size: 48px;
    }

    .section-download .willage {
        width: 100%;
        height: 720px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }
}

@media (max-width: 550px) {
    .section-download .willage {
        width: 100%;
        height: 320px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .section-download .btn-dowload {
        margin-top: 60px;
    }

    .section-download .willage {
        width: 100%;
        height: 600px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }
}

@media (max-width: 450px) {
    .section-download .btn-dowload {
        width: 180px;
        height: 64px;
        margin-top: 60px;
    }

    .section-download .willage {
        width: 100%;
        height: 600px;
        margin-top: 40px;
        margin-bottom: 0px;
        background-size: auto 100%;
    }
}

/* #endregion ======================== /Section: Download =============================== */
/* #region ============================== Section: FAQs ================================= */
.section-faqs {
    display: block;
    width: 100%;
    position: relative;
}

    .section-faqs .section-footer {
        display: block;
        height: 190px;
        position: relative;
        width: 100%;
        background: url(../images/clipart-section-footer-topbg1.svg) no-repeat center bottom, url(../images/clipart-section-footer-topbg2.svg) no-repeat center bottom transparent;
        background-size: 100% auto;
        border-bottom: 2px solid #4B4D59;
        margin-top: -130px;
    }

    .section-faqs .container {
        width: 800px;
        margin: 0px auto;
    }


    .section-faqs h2 {
        text-align: center;
        font-size: 64px;
        color: #606060;
        margin-bottom: 100px;
        margin-top: 100px;
        width: 200px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-faqs .screens {
        display: block;
        width: 100%;
        height: 600px;
        background-image: url("../images/img-footer.png");
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 120px;
    }

.section-faqs {
    display: block;
    width: 100%;
}

    .section-faqs .faq-item {
        display: block;
    }


        .section-faqs .faq-item .faq-question {
            font-size: 36px;
            color: #DD6E5C;
            font-family: 'Chicle';
            margin-bottom: 30px;
            margin-top: 30px;
            cursor: pointer;
            opacity: 1;
            transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
        }

            .section-faqs .faq-item .faq-question:hover {
                opacity: 0.8;
                transition: opacity 0.2s ease;
                -webkit-transition: opacity 0.2s ease;
            }

        .section-faqs .faq-item .faq-answer {
            font-size: 18px;
            color: #A1A1A1;
            overflow: hidden;
            height: 0px;
            margin-bottom: 0px;
            opacity: 0;
            transition: margin-bottom 0.2s ease, height 0.2s ease, opacity 0.4s ease;
            -webkit-transition: margin-bottom 0.2s ease, height 0.2s ease, opacity 0.4s ease;
        }

        .section-faqs .faq-item.expanded .faq-answer {
            height: auto;
            margin-bottom: 30px;
            opacity: 1;
            transition: margin-bottom 0.2s ease, height 0.2s ease, opacity 0.4s ease;
            -webkit-transition: margin-bottom 0.2s ease, height 0.2s ease, opacity 0.4s ease;
        }

        .section-faqs .faq-item .faq-answer span {
            color: #606060;
            font-weight: 600;
        }

        .section-faqs .faq-item .faq-answer a {
            color: #DD6E5C;
        }

.section-download .section-header {
    height: 200px;
}

@media (max-width: 2350px) {
    .section-faqs .section-footer {
        height: 190px;
        border-bottom: 2px solid #4B4D59;
        margin-top: -150px;
    }

    .section-download .section-header {
        height: 160px;
    }
}

@media (max-width: 2000px) {
    .section-faqs .section-footer {
        height: 190px;
        border-bottom: 2px solid #4B4D59;
        margin-top: -180px;
    }

    .section-download .section-header {
        height: 130px;
    }
}

@media (max-width: 1550px) {
    .section-download .section-header {
        height: 100px;
    }
}

@media (max-width: 950px) {
    .section-download .section-header {
        height: 70px;
    }

    .section-faqs .container {
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }

    .section-faqs .screens {
        display: block;
        width: 100%;
        height: 400px;
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .section-download .section-footer {
        height: 100px;
    }
}

@media (max-width: 600px) {
    .section-download .section-header {
        height: 50px;
    }

    .section-faqs .screens {
        margin-top: 0px;
    }

    .section-faqs h2 {
        font-size: 48px;
        margin-bottom: 60px;
    }

    .section-faqs h2 {
        text-align: center;
        color: #606060;
        margin-bottom: 100px;
        margin-top: 50px;
        width: 200px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-download .section-header {
        height: 60px;
    }
}

@media (max-width: 450px) {
    .section-faqs .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-faqs .screens {
        height: 300px;
    }

    .section-faqs .faq-item .faq-question {
        font-size: 28px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
}

/* #endregion ========================== /Section: FAQs ================================= */
/* #region ========================== Section: Footer Logo ============================== */
.section-footer-logo {
    display: block;
    width: 100%;
    background-color: #ffffff;
}

    .section-footer-logo .content {
        display: block;
        width: 100%;
        font-size: 114px;
        color: #606060;
        margin-block: 200px;
        text-align: center;
    }

@media (max-width: 850px) {
    .section-footer-logo .content {
        font-size: 90px;
    }
}

@media (max-width: 550px) {
    .section-footer-logo .content {
        font-size: 60px;
    }
}

@media (max-width: 400px) {
    .section-footer-logo .content {
        font-size: 40px;
        margin-block: 150px;
    }
}
/* #endregion ====================== /Section: Footer Logo ============================== */
/* #region ============================= Section: Footer ================================ */
.footer {
    background-color: rgba(0,0,0, 0.03);
    color: #606060;
    margin-top: 0px;
    height: auto;
}

    .footer .content {
        display: flex;
        height: 100px;
        align-items: center;
        padding-inline: 50px;
    }

        .footer .content .left-side {
            width: 100%;
        }

        .footer .content .right-side {
            width: 100%;
            text-align: right;
        }

    .footer .social {
        display: inline-block;
        width: 40px;
        height: 40px;
    }

        .footer .social + .social {
            margin-inline-start: 5px;
        }

        .footer .social.linkedin {
            background: url('../images/icon-linkedin.svg') no-repeat center center transparent;
            background-size: contain;
        }

        .footer .social.tiktok {
            background: url('../images/icon-tiktok.svg') no-repeat center center transparent;
            background-size: contain;
        }

    .footer .right-side a {
        display: inline-block;
        color: #606060;
        font-size: 16px;
        text-decoration: none;
        padding-block: 4px;
    }

        .footer .right-side a:hover {
            color: #DD6E5C;
        }

        .footer .right-side a + a {
            margin-inline-start: 15px;
        }

@media (max-width: 400px) {
    .footer .content {
        display: flex;
        height: 100px;
        align-items: center;
        padding-inline: 20px;
    }
}
/* #endregion ========================= /Section: Footer ================================ */