/* 
==============================================
    CONTENT OF THE FILE
==============================================

    1. RESET DEFAULT BROWSER STYLES
    2. FONTS
    3. GENERAL STYLES
        3.1 Scrollbar
        3.2 Sections 
        3.3 Columns sections
        3.4 Page Content block
        3.5 Section arrow down
    4. HOME PAGE
        4.1 Header
    5. NIMBUS PAGE
    6. DROPLETS PAGE

*/












#zd-preloader {
    background: #222;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#zd-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}














/*
==============================================
    1. RESET DEFAULT BROWSER STYLES
==============================================
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:0}




















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

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













/*
==============================================
    3. GENERAL STYLES
==============================================
*/

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    font-family: 'FuturaFuturisC', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    overflow-x: hidden;
}
html.overflow-hidden,
body.overflow-hidden {
    overflow: hidden;
}
img,
svg {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}

p {
    margin-bottom: 20px;
}
p:last-child {
    margin-bottom: 0;
}

a {
    -webkit-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.zd-body-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


.zd-container {
    width: 100%;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}
.zd-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 7;
}
.zd-revert-section .zd-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.max-height-420 {
    max-height: 420px;
}





/*
* 3.1 Scrollbar
*/
*::-webkit-scrollbar {
    width: 3px;
}
   
*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
   
*::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 50px;
}


/* Bucketing Scrollbar */
.droplets-page .data-text-wrapper::-webkit-scrollbar-thumb,
.bucketing-page .data-text-wrapper::-webkit-scrollbar-thumb {
    background-color: #bbb;
}








/* 
* 3.2 Sections 
*/
.zd-section {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 100px 65px;
}
.zd-section-with-header {
    flex-direction: column;
    align-items: stretch;
}
.zd-section.content-right {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.full-height-section {
    height: 100vh;
}
.full-height-video-section .data-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
/*zd-section-with-header 
zd-section-with-footer*/

.min-height-section {
    min-height: 100vh;
}

.zd-content-wrapper {
    position: relative;
    z-index: 11;
    height: 100%;
}










/*
* 3.3 Columns sections
*/
.zd-section .zd-row .zd-col-1 {
    width: 100%;
    max-width: 630px;
    margin-right: 80px;
}
.zd-revert-section .zd-row .zd-col-1 {
    margin-right: 0;
    margin-left: 80px;
}
.zd-section .zd-row .zd-col-2 {
    width: 100%;
    max-width: 550px;
}
.zd-section .zd-row video {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    border-radius: 20px;
}










/*
* 3.4 Page Content block
*/
.zd-content-block {
    width: 100%;
    max-width: 550px;
}
.zd-content-block .data-title {
    font-family: 'FuturaFuturisCameoExtraBoldC', sans-serif;
    font-weight: 800;
    font-size: 72px;
    line-height: 83px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    letter-spacing: -1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.zd-content-block.blue-color .data-title {
    color: #85D3FF;
}
.zd-content-block.white-color .data-title {
    color: #fff;
}
.zd-content-block.purple-color .data-title {
    color: #BD99FF;
}

.zd-content-block .data-title span {
    display: inline-block;
    position: relative;
}
.zd-content-block .data-title span:before,
.zd-content-block .data-title span:after {
    content: '';
    position: absolute;
    display: block;
    width: 300%;
    height: 100%;
    top: 0;
}
.zd-content-block.blue-color .data-title span:before,
.zd-content-block.blue-color .data-title span:after {
    background: #85D3FF;
}
.zd-content-block.white-color .data-title span:before,
.zd-content-block.white-color .data-title span:after {
    background: #fff;
}
.zd-content-block.purple-color .data-title span:before,
.zd-content-block.purple-color .data-title span:after {
    background: #BD99FF;
}

.zd-content-block .data-title span:before {
    left: 0;
    -webkit-transform: translateX(calc(-100% + 1px));
        -ms-transform: translateX(calc(-100% + 1px));
            transform: translateX(calc(-100% + 1px));
}
.zd-content-block .data-title span:after {
    right: 0;
    -webkit-transform: translateX(calc(100% - 1px));
        -ms-transform: translateX(calc(100% - 1px));
            transform: translateX(calc(100% - 1px));
}
.zd-content-block .data-content-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    color: #000;
    padding: 30px;
    border-radius: 0 0 10px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-height: calc(100% - 83px); /* 83 - height of heading  */
    background: rgba(255, 255, 255, 0.15);
    -webkit-box-shadow: 0px 0px 25px rgb(164 164 164 / 15%);
    box-shadow: 0px 0px 25px rgb(164 164 164 / 15%);
}
.nimbus-page .zd-content-block .data-content-body {
    color: #fff;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    background: rgba(189, 153, 255, 0.15);
}
.droplets-page .zd-content-block .data-content-body {
    background: rgba(255, 255, 255, 0.15);
}


.zd-content-block .data-content-body .data-text-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow-y: auto;
    padding-right: 5px;
}
.zd-content-block .data-content-body .data-link-wrapper {
    margin-top: 30px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.zd-content-block .data-link-wrapper a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    text-decoration: none;
}
.zd-content-block .data-link-wrapper a svg {
    margin-right: 10px;
}
.zd-content-block .data-link-wrapper a span {
    border-bottom: 1px solid transparent;
        -webkit-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-block;
}

.zd-content-block.blue-color .data-link-wrapper a {
    color: #85D3FF;
}
.zd-content-block.blue-color .data-link-wrapper a:hover span {
    border-bottom-color: #85D3FF;
}

.zd-content-block.white-color .data-link-wrapper a {
    color: #fff;
}
.zd-content-block.white-color .data-link-wrapper a:hover span {
    border-bottom-color: #fff;
}

.zd-content-block.purple-color .data-link-wrapper a {
    color: #BD99FF;
}
.zd-content-block.purple-color .data-link-wrapper a:hover span {
    border-bottom-color: #BD99FF;
}









/*
* 3.5 Section arrow down
*/
.section-arrow-down {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: 20px;
    -webkit-animation-name: arrow_down_animation;
            animation-name: arrow_down_animation;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    z-index: 99;
}
.section-arrow-down svg {
    width: 25px;
}

.section-arrow-down.white-color svg {
    fill: #fff;
}

@-webkit-keyframes arrow_down_animation{
    0%{
        bottom: 0px;
    }
    50%{
        bottom: 20px;
    }
    100%{
        bottom: 0px;
    }
}

@keyframes arrow_down_animation{
    0%{
        bottom: 0px;
    }
    50%{
        bottom: 20px;
    }
    100%{
        bottom: 0px;
    }
}





/*
* 3.6 Arrow Back Home
*/
.zd-arrow-back {
    position: absolute;
    z-index: 9;
    top: 40px;
    left: 40px;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding:8px;
    border-radius: 50%;
}
.zd-arrow-back span {
    border-bottom: 1px solid transparent;
    transition: all .25s ease-in-out;
}
.zd-arrow-back.blue-color {
    background-color: #85D3FF;
}
.zd-arrow-back.purple-color {
    background-color: #BD99FF;
}
/*.zd-arrow-back svg {
    margin-right: 10px;
}*/
/*.zd-arrow-back:hover {

}*/
.zd-arrow-back.blue-color:hover span {
    border-color: #85D3FF;
}























/*
==============================================
    4. HOME PAGE
==============================================
*/


/*
* 4.1 Header
*/
.zd-main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: rgba(250, 250, 250, .4);
    /*background: rgba(255, 255, 255, .4);*/
    /*background: #fff;*/
    /*box-shadow: 0 0 15px rgba(0, 0, 0, .1);*/
    padding: 10px 0;
    font-size: 18px;
    /*height: 45px;*/
    opacity: 0;
    transition: all .25s ease-in-out;
    /*background-image: url('../img/header-background.jpg');*/
}
.zd-video-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    z-index: -1;
    /*display: none;*/
}
.zd-video-header video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.zd-main-header:hover {
    opacity: 1;
}
.zd-main-header .data-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.zd-main-header .data-content-wrapper .zd-col-1 {
    margin-right: 50px;
    width: 100%;
    flex: 1 1 auto;
}
.zd-main-header .data-content-wrapper .zd-col-2 {
    flex: 0 0 auto;   
}

.zd-header-buttons-wrapper {
    display: flex;
    align-items: center;
}
.zd-header-buttons-wrapper .zd-header-button-item {
    margin-right: 20px;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    /*background: rgba(2,113,175, 1);*/
    color: #fff;
    padding: 3px 15px;
    border-radius: 20px;

    background: rgb(136,211,240);
    background: linear-gradient(43deg, rgba(136,211,240,1) 0%, rgba(126,86,177,1) 99%);
}
.zd-header-buttons-wrapper .zd-header-button-item:nth-child(1) {
    background: #FBD46B;
}
.zd-header-buttons-wrapper .zd-header-button-item:nth-child(2) {
    background: #E76D8D;
}
.zd-header-buttons-wrapper .zd-header-button-item:hover {
    /*background: #000;*/
}

.zd-social-links-wrapper {
    display: flex;
    align-items: center;
}
.zd-social-links-wrapper li:first-child .zd-social-link-item {
    margin-left: 0;
}
.zd-social-link-item {
    padding: 7px;
    /*background: rgba(2,113,175, 1);*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin-left: 10px;
    transition: all .25s ease-in-out;

    background: #596B8F
}
.zd-social-link-item svg {
    width: 15px;
    height: 15px;
    fill: #fff;
    transition: all .25s ease-in-out;
}
/*.zd-social-link-item:hover {
    background: #000;
}
.zd-social-link-item:hover svg {
    fill: #fff;
}*/
/*.zd-main-header .main-navigation ul {
    display: flex;
}
.zd-main-header .main-navigation ul li {
    margin-left: 60px;
}
.zd-main-header .main-navigation ul li:first-child {
    margin-left: 0;
}
.zd-main-header .main-navigation a {
    color: #000;
    text-decoration: none;
}
.zd-main-header .main-navigation a.active {
    color: #E75F55;
    border-bottom: 1px solid #E75F55;
}*/


body.home-page .zd-section {
    padding: 0;
}
.zd-page-items-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
}
.zd-page-items-wrapper .zd-page-item {
    display: flex;
    height: 100%;
    max-height: 33.3%;
    width: 100%;
    text-decoration: none;
    font-weight: 800;
    font-size: 144px;
    line-height: 166px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-transform: uppercase;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fff;
    opacity: 0;
}
.zd-page-items-wrapper .zd-page-item:hover {
    opacity: .5;
}
.zd-page-items-wrapper .zd-page-item .data-section-title:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
}

.zd-page-items-wrapper .zd-page-item.nimbus,
.zd-page-items-wrapper .zd-page-item.nimbus .data-section-title:before {
    background: rgba(0,73,83, 1);
}
.zd-page-items-wrapper .zd-page-item.nimbus .data-section-title {
    color: #004953;
}

.zd-page-items-wrapper .zd-page-item.droplets,
.zd-page-items-wrapper .zd-page-item.droplets .data-section-title:before {
    background: rgba(0,18,83, 1);
}
.zd-page-items-wrapper .zd-page-item.droplets .data-section-title {
    color: #001253;
}

.zd-page-items-wrapper .zd-page-item.bucketing,
.zd-page-items-wrapper .zd-page-item.bucketing .data-section-title:before {
    background: rgba(2,113,175, 1);
}
.zd-page-items-wrapper .zd-page-item.bucketing .data-section-title {
    color: rgba(2,113,175, 1);
}

.zd-page-items-wrapper .zd-page-item .data-section-title {
    font-family: 'FuturaFuturisCameoExtraBoldC', sans-serif;
    color: #004953;
    background: #fff;
    letter-spacing: -3px;
    line-height: 1;
    position: relative;
}




/*
* 4.2 Footer
*/
.zd-main-footer {
    /*height: 35px;*/
    padding: 8px 0;
    background: #fff;
    z-index: 9;
    position: relative;
}
.zd-main-footer .data-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.zd-developed-by a {
    color: #22aefd;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.zd-developed-by a:hover {
    border-bottom-color: #22aefd;
}













/*
==============================================
    5. NIMBUS PAGE
==============================================
*/
.nimbus-page .zd-content-block {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

















/*
==============================================
    6. DROPLETS PAGE
==============================================
*/
.droplets-page .blue-shadow {
    position: relative;
}
.droplets-page .blue-shadow:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: -o-linear-gradient(left, #48ADEF 0%, rgba(72, 173, 239, 0) 16.31%), -o-linear-gradient(bottom, #48ADEF 0%, rgba(72, 173, 239, 0) 13.56%), -o-linear-gradient(270.56deg, #48ADEF 0.48%, rgba(72, 173, 239, 0) 11.73%), -o-linear-gradient(right, #48ADEF 0%, rgba(72, 173, 239, 0) 25.27%);
    background: linear-gradient(90deg, #48ADEF 0%, rgba(72, 173, 239, 0) 16.31%), linear-gradient(0deg, #48ADEF 0%, rgba(72, 173, 239, 0) 13.56%), linear-gradient(179.44deg, #48ADEF 0.48%, rgba(72, 173, 239, 0) 11.73%), linear-gradient(270deg, #48ADEF 0%, rgba(72, 173, 239, 0) 25.27%);
}




















/*
==============================================
    7. BUCKETING PAGE
==============================================
*/
.zd-video-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -220px;
    width: 100%;
    overflow-x: hidden;
}
.zd-video-footer video {
    opacity: 0.25;
    width: 100%;
    min-width: 1920px;
    -o-object-fit: cover;
    object-fit: cover;
}
.zd-video-footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 225px;
    z-index: 3;
    background: -o-linear-gradient(top, #FFFFFF 0%, rgba(255, 255, 255, 0) 82.64%);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(82.64%, rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 82.64%);
}