*{
    box-sizing:border-box;
}
h1{
    font-size: 60px;
}
h2{
    font-size: 50px;
}
h3{
    font-size: 45px;
}
.zw-product-header{
    background: #256da8;
}
#mini-panel-product_menu .menu-icon-help-header .product-title a,#mini-panel-product_menu .product-nav-links .menu>li>a,.main-container-wrapper #mini-panel-product_menu .menu-icon-help-header .product-title a{
    color:#fff;
}
.expanded.dropdown .caret{
    background-position: -168px 0px;
}
.product-title .product-icon{
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}
li.zmenu-submenu h5{
    color: #000;
}
/*tour-banner*/
.banner-section{
    background: transparent radial-gradient(closest-side at 50% 50%, #1587E6 0%, #256CA7 100%) 0% 0% no-repeat padding-box;
    padding:170px 0px 360px ;
    color:#fff;
    overflow: hidden;
    margin-top:-10px;
}
.tour-banner{
    display: flex;
}
.tour-banner h1:first-child{
    margin:0;
}
.tour-banner>div{
    width: 50%;
    position: relative;
    z-index:1;
}
.banner-cont{
    margin-top:30px;
}
.back-black.cta-btn{
    background:#000000;
}
.back-black{
    border-radius: 4px;
    padding: 15px 38px;
}
.tour-arrow1 svg{
    position: absolute;
    top: -10%;
    left: -41%;
}
.tour-arrow2 svg{
    position: absolute;
    top: -22%;
    left: -57%;
    z-index: -1;
}
.banner-image::before{
    content: '';
    position: absolute;
    width: 571px;
    height: 571px;
    background: #16619F;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0);
    opacity:0;
}
.banner-outer{
    background: #49a1ea;
    padding:35px 25px 25px;
    border-radius: 5px;
    position: relative;
    opacity:0;
    transform: translateX(150px);
}
.dots{
    position: absolute;
    left: 15px;
    top: 12px;
    display: flex;
}
.dots .dot1{
    width: 11px;
    height:11px;
    border-radius: 50%;
    background:#89c7fb;
    opacity: 1;
    margin-right: 3px;
}   
.banner-inner{
    background: #fff;
    position: relative;
    display: flex;
    border: 1px solid #6A6A6A;
    border-radius: 5px;
}
.banner-inner .nav-list li.active{
    border-radius: 4px 0px 0px 0px;
}
.banner-inner .sidenav{
    border-radius: 5px 0px 0px 0px;
}
.banner-inner::after{
    content: '+';
    position: absolute;
    font-size: 38px;
    background-color: #E5614F;
    padding: 1px 20px;
    border-radius: 3px;
    left: 2%;
    bottom: -11%;
    opacity: 0;
    transform:scale(0.5);
}
.sidenav{
    width:50px;
    background: #22252B;
}
.sign-area{
    padding: 20px;
    position: relative;
    width:540px;
}
.nav-list{
    display: block;
}
.nav-list li{
    width:50px;
    padding: 15px 15px 13px;
    box-sizing: border-box;
}
.nav-list li.active{
    background: none;
}
 .nav-list li span{
    background: url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat;
    background-size: 799px 55px;
    display: inline-block;
}
.nav-list li span.category{
    background-position: -596px -20px;
    width: 17px;
	height: 17px;
}
.banner-inner .nav-list li span.category{
    transform: scale(1.2);
}
.nav-list li span.category.one{
    background-position: -658px -16px;
    background-size: 770px 55px;
    width: 26px;
    height: 25px;
}
.nav-list li span.category.two{
    background-position: -689px -15px;
    background-size: 770px 55px;
    width: 26px;
    height: 25px;
}
.nav-list li span.category.three{
    background-position: -721px -15px;
    background-size: 770px 55px;
    width: 26px;
    height: 25px;
}
.sidenav .nav-list li span.cat{
    background-position: -655px -16px;      
}
.sidenav .nav-list li span.home{
    background-position: -776px -18px;      
}
.nav-list li span.cat{
    background-position: 0 -16px;
    width: 23px;
    height: 22px;
}
.nav-list li span.home{
    background-position: -135px -19px;
    width: 22px;
	height: 20px;
}
.nav-list li span.book{
    background-position: -50px -18px;
    width: 18px;
	height: 21px;
}
.nav-list li span.form{
    background-position: -68px -21px;
    width: 18px;
    height: 15px;   
}
.nav-list li span.link{
    background-position: -89px -19px;
    width: 19px;
	height: 21px;
}
.nav-list li span.setting{
    background-position: -113px -21px;
    width: 18px;
	height: 18px;
}
.top-search{
    display: flex;
    justify-content: space-between;
}
.search-left{
    display: flex;
    opacity: 0;
}
.search-left .top-head{
    font-size: 12px;
    font-family: var(--primaryfont-semibold);
    color: #000;
}
.smile-wrap{
    position: relative;
    max-width: 70%;
    margin: -60% auto 0;
    transform: scale(0.5);
    opacity: 0;
}
.smile-wrap::after{
    content: '';
    position: absolute;
    background: url(/sites/zweb/images/sign/smile.png) no-repeat;
    background-size: 100%;
    width: 68px;
    height: 68px;
    right: -12%;
    bottom: -10%;
    transform: scale(0.7);
}
.sign-section{
    max-width: 330px;
    margin: 70px auto 90px;
    text-align: center;
    position: relative;
}
.sign-sec-inner{
    border: 2px dashed #bbb8b8;
    padding:30px 0px;
    opacity: 0;
    transform: translate(75px,80px);
    border-radius: 5px;
}
.sign-sec-inner svg{
    position: relative;
    left:7px;
}
.sign-sec-inner::after{
    content: '';
    position: absolute;
    background: url(/sites/zweb/images/sign/anchor.png) no-repeat;
    background-size: 100%;
    bottom: -13px;
    right: -13px;
    width: 25px;
    height: 25px;
}
.top-search-icon{
    width: 230px;
    height:18px;
    background: #F7F7F7;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    position: relative;
    margin-left: 15px;
}
.top-search-icon::after{
    content: '';
    position: absolute;
    background: url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat -502px -23px;
    background-size: 799px 55px;
    width: 9px;
    height: 9px;
    right: 10px;
    top: 4px;   
}
.top-search-icon2{
    position: relative;
    width: 220px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #CECECE;
    border-radius: 20px;
}
.top-search-icon2::after{
    content: '';
    position: absolute;
    background: url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat -513px -20px;
    background-size: 799px 55px     ;
    width: 15px;
    height: 15px;
    right: 15px;
    top: 7px;   
}
.feature-image-top{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.smile-small{
    max-width: 40px;
    margin-left:40px;
    max-height: 40px;
}
.finsihed{
    color:#FFCE00;
}
/*features-section*/
.feature-section{
    margin-top: -8%;
}
.feature-box{
    display: flex;
    color:#fff;
    margin-bottom: 35px;
}
.feature-box>div{
    width: 50%;
}
.feature-cont{
    display: flex;
    border-radius: 10px 0px 0px 10px;
}
.feature-image{
    background:#fff;
    border-radius: 0px 10px 10px 0px;
    border: 1px solid #707070;
    padding: 40px 40px 50px;
    border-left: none;
    overflow: hidden;
}
.feature-list{
    width: 72px;
    background:#0B6B9F;
    border-radius: 10px 0px 0px 10px;
    border:1px solid #004972;
}
.feature-list .nav-list li{
    width: 62px;
    padding: 15px;
    text-align: center;
}
.feature-list .nav-list li:nth-child(1){
    border-radius: 10px 0px 0px 0px;
    padding: 15px 15px 12px;
}
.feature-list .nav-list li.active{
    background:#08537C;
}
.feature-list-cont{
    padding: 200px 125px 220px;
    background: transparent radial-gradient(closest-side at 50% 50%, #2CA7E4 0%, #3ABEE7 100%) 0% 0% no-repeat padding-box;
    position: relative;
}
.dash-box-img{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin:75px 0px 15px;
}
.dash-box-img>div{
    width: 40%;
    position: relative;
}
.dash-icons{
    margin: 5px 0px 0px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dash-icons li{
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: scale(0.5);
}
.dash-icons li:not(last-child){
    margin-right:15px;
}
.dash-icons li .bg-round{
    width: 64px;
    height: 64px;
    padding: 15px;
    border-radius: 50px;
    border: 1px solid #F8C2C2;
    background:#FFE3E3;
    position: relative;
    display: flex;
    align-items: center;
}
.dash-icons li span{
    background:url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat;
    background-size: 799px 55px;
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.dash-icons li span.work-drive{
    background-position: -185px -13px;
    width: 29px;
    height: 29px;
}
.dash-icons li span.one-drive{
    background-position: -218px -15px;
    width: 41px;
	height: 26px;
}
.dash-icons li span.google-drive{
    background-position: -262px -14px;
    width: 33px;
	height: 28px;
}
.dash-icons li span.drop-box{
    background-position: -298px -14px;
    width: 37px;
	height: 31px;
}
.dash-icons li span.watsup{
    background-position: -386px -9px;
    width: 38px;
	height: 37px;
}
.dash-icons li span.multi{
    background-position: -428px -13px;
    width: 32px;
	height: 32px;
}
.dash-icons li span.gmail{
    background-position: -466px -12px;
    width: 34px;
    height: 32px;
}
.dash-icons li .bg-round.bg-blue{
    background:#E6F7FF;
    border-color: #C2E7F8;
}
.dash-icons li .bg-round.bg-ylw{
    background:#FFF0D1;
    border-color: #EFCD88;
}
.dash-icons li .bg-round.bg-vlt{
    background:#DDE9FF;
    border-color: #9FBBF0;
}
.dash-icons li .bg-round.bg-grn{
    background:#D9FFDE;
    border-color: #B4FABD;
}
.dash-icons li .bg-round.bg-lgt-blu{
    background:#E6F7FF;
    border-color: #D1EBF7;
}
.dash-icons li .bg-round.bg-rose{
    background:#FFCCCC;
    border-color: #FFB4B2;
}
.feature-section .nav-list li span.home{
    background-position: -25px -18px;
}
.dash-label{
    color: #000;
    font-size: 10px;
    margin-top: 8px;
}
.feature-demo{
    margin-top:100px;
    position: relative;
}
.dashboard-arrow{
    position: absolute;
    top: 75%;
    left: 6%;
}
.home-arrow{
    position: absolute;
    top: 50px;
    left: -32px;
}
.form-arrow{
    position: absolute;
    top: 86px;
    left: -202px;
}
.book-arrow{
    position: absolute;
    left: -322px;
    top: 103px;
}
.feature-4 .book-arrow{
    left: -489px;
    top: 133px;
}
.feature-5 .book-arrow{
    left: -794px;
    top: 240px;
}
.feature-6 .book-arrow{
    top: 300px;
    left: -794px;
}
/*feature-2*/
.feature-2 .feature-list{
    background:#0A6E55;
    border: 1px solid #105040;
}
.feature-2 .feature-list-cont{
    background: transparent radial-gradient(closest-side at 50% 50%, #12A381 0%, #00906C 100%) 0% 0% no-repeat padding-box;
    padding: 200px 125px 200px;
}
.feature-2 .feature-list .nav-list li.active {
    background: #105040;
}
.feature2-img-wrap{
    max-width: 350px;
    margin:90px auto 30px;
    position: relative;
}
.feature2-img-wrap .status,.status-1,.status-2{
    position: absolute;
}
.feature2-img-wrap .status{
    top: 42%;
    max-width: 110px;
    left: 10%;
    opacity: 0;
}
.feature2-img-wrap .status-1{
   top:49%;
   max-width: 400px;
   left: -6%;
   opacity: 0;
   transform:translateX(-30px);
}
.feature2-img-wrap .status-2{
    top: 66%;
    max-width: 400px;
    left: 8%;
    opacity: 0;
    transform:translateX(30px);
}
.feature-2 .nav-list li span.home{
    background-position: -135px -19px;
}
/*feature-3*/
.feature-3 .feature-list{
    background:#A3710A;
    border: 1px solid #7C540C;
}
.feature-3 .feature-list-cont{
    background: transparent radial-gradient(closest-side at 50% 50%, #FABA32 0%, #DE9906     100%) 0% 0% no-repeat padding-box;
    padding: 220px 125px 200px;
}
.feature-3 .feature-list .nav-list li.active {
    background: #744F0D;
}
.dash-box-img>div.add-receipt{
    width: 100%;
    max-width: 80%;
}
.feature-3 .nav-list li span.home{
    background-position: -159px -20px;
}
/*feature-4*/
.feature4-img-wrap{
    max-width: 400px;
    margin: 125px auto 0 40px;
    position: relative;
}
.feature-4 .dash-icons{
    margin-top: 0;
    margin-bottom: 103px;
}
.dash-icons .share-via{
    max-width: 100px;
    display: flex;
    align-items: center;
}
.feature4-img-wrap .sign-cta{
    padding:8px 17px;
    position: absolute;
    max-width: 100px;
    top: 16%;
    right: -30%;
    font-size: 10px;
    background:#E5614F;
    border: 1px solid #E5614F;
    border-radius: 2px;
    opacity: 0;
}
.feature4-img-wrap .arrow-path{
    position: absolute;
    top: 30%;
    right: -20%;
}
.feature-4 .feature-list-cont{
    padding: 220px 125px 150px;
}
/*feature-5*/
.feature5-img-wrap .graph-wrap{
   max-width: 400px;
   margin:100px auto 0px 35px;
   position: relative;
}
.feature5-img-wrap .graph-wrap .doc-status{
   position: relative;
}
.feature5-img-wrap .graph-label{
    margin:30px 0px 0px;
    text-align: center;
    position: relative;
}
.feature5-img-wrap .graph-label picture{
    position: relative;
}
.feature5-img-wrap .graph-label img{
    max-width: 350px;
}
.feature5-img-wrap .graph-label img.label-2{
    max-width: 365px;
    position: relative;
    top: -13px;
    left: -48px;
}
.feature5-img-wrap .graph-label img.label-3{
    max-width: 380px;
    position: relative;
    top: -40px;
}
.feature5-img-wrap .graph-svg{
    left: 66%;
    position: absolute;
    transform: translateX(-50%);
    top: 33.3%;
}
.tick-icon{
    background:url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat -635px -20px;
    background-size: 799px 55px;
    width: 16px;
	height: 15px;
    display: inline-block;
    position: relative;
    top: -25px;
    right: -13px;
    opacity: 0;
}
.label-2+.tick-icon{
    right: 7%;
    top: -51px;
}
.label-3+.tick-icon{
    background-position: -617px -20px;
    top: -90px;
    right: 0;
}
.doc-status-2{
    display: none;
}
.feature-5 .feature-list-cont,.feature-6 .feature-list-cont{
    padding: 220px 125px 150px;
}
/*feature-6*/
.feature6-img-wrap .org-wrap{
    max-width: 420px;
    display: flex;
    margin: 85px auto 0px 45px;
    position: relative;
}
.feature6-img-wrap .org-wrap .org-label-1{
    margin-top: 30px;
}
.feature6-img-wrap .org-wrap .org-label-2{
    position: relative;
    left:25px;
}
.feature6-img-wrap .lang-wrap{
    max-width: 420px;
    display: flex;
    justify-content: flex-end;  
    margin:0 auto 30px;
    position: relative;
}
.feature6-img-wrap .lang-wrap .org-label-3{
    max-width: 230px;
    margin: -12px 25px 0px 0px;
}
.tick-badge{
    max-width: 34px;
    position: absolute;
    left: 45%;
    top: -9%;
    opacity: 0;
    transform: scale(0.5);
}
.tick-badge::after{
    content: '';
    position: absolute;
    background: url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat -575px -20px;
    background-size: 799px 55px;
    width: 17px;
    height: 15px;
    top: 13px;
    left: 8px;
}
.setting-arrow{
    position: absolute;
    left: 46%;
    top: 7%;
}
/*tour-footer*/
.tour-footer{
    padding:120px 0px 160px;
    text-align: center;
}
.computer-icon{
    max-width: 250px;
    margin: 0 auto 30px;
}
.tour-footer h3{
    max-width: 865px;
    margin: 0 auto 35px;
}
/*animation*/
.path-1 {
    stroke: #fece2f;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke-width: 3px;
    animation: integrationdash 2s linear forwards .5s;
}
.path-2 {
    stroke:#256ca6;
    stroke-width: 5px;
    stroke-dasharray: 5;
}
.path-4{
    opacity: 0;
}
.in-view .path-4 {
    opacity: 1;
    transition: all .5s ease;
    transition-delay: 7.5s;
}
.tour-arrow3{
    left: -62%;
    position: absolute;
    top: 51%;
    opacity: 0;
}
.tour-arrow2 .path-3{
    stroke-width: 2px;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: integrationdash1 2s linear forwards 8s;
}
.in-view .setting-svg-right{
    animation:integrationdash2 2s linear forwards 1s;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
@keyframes integrationdash {
	0% {
		stroke-dashoffset: 1000
	}
	100% {
		stroke-dashoffset: 0
	}
}
@keyframes integrationdash1 {
	0% {
		stroke-dashoffset: -2000;
	}
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes integrationdash2 {
	0% {
		stroke-dashoffset: -1000
	}
	100% {
		stroke-dashoffset: 0
	}
}
.inup1,
.inup2{
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: all 1300ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
    transition: all 1300ms cubic-bezier(0.11, 0.16, 0.43, 0.86)
}
.in-view .inup1,
.in-view.inup1,
.in-view .inup2,
.in-view.inup2{
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
    .inup1{
		-webkit-transition-delay: 400ms;
		transition-delay: 400ms
	}
	.inup2 {
		-webkit-transition-delay: 600ms;
		transition-delay: 600ms
	}
.in-view.banner-image::before{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
    transition: all 1s ease;
    transition-delay: 1.5s;
}
.in-view .banner-outer{
    opacity: 1;
    transform: translateX(0);
    transition: all 1s ease;
    transition-delay: 2.5s;
}
.banner-inner .nav-list li span{
    opacity: 0;
}
.in-view .nav-list li span{
    opacity: 1;
    transition:all 1.5s ease;
    transition-delay: 3.5s;
}
.in-view .nav-list li span.cat{
    transition-delay: 3.6s;
}
.in-view .nav-list li span.home{
    transition-delay: 3.7s;
}
.in-view .nav-list li span.book{
    transition-delay: 3.8s;
}
.in-view .nav-list li span.form{
    transition-delay: 3.9s;
}
.in-view .nav-list li span.link{
    transition-delay: 4s;
}
.in-view .nav-list li span.setting{
    transition-delay: 4.1s;
}
.in-view .banner-inner .nav-list li.active{
    background:#1BA584;
    transition:all 0.5s linear;
    transition-delay: 4.3s;
}
.in-view .search-left{
    transition:all .5s ease;
    opacity: 1;
    transition-delay: 5.3s;
}
.in-view .smile-wrap{
    transition:all 0.5s ease;
    transition-delay: 5.8s;
    opacity: 1;
    transform: scale(0.8);
}
.in-view .sign-sec-inner{
    transition:all 1s ease;
    transition-delay: 6.8s;
    opacity: 1;
    transform:translate(0px)
}
.in-view .banner-inner::after{
    opacity: 1;
    transition:all .5s ease;
    transition-delay: 6.3s;
    transform: scale(1);
}
.banner-inner .nav-list li span.category{
    animation: popup .3s ease;
    animation-delay:5s;
}
@keyframes popup{
    0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.5);
	}
}
/*feature1-animations*/
.feature-box .in-view .nav-list li.active span{
    animation: popup 1s linear;
    animation-delay: .5s;
}
.send-sign{
    transform:translateY(50px);
    opacity: 0;
}
.sign-your{
    transform:translateY(-50px);
    opacity: 0;
}
.in-view .send-sign,.in-view .sign-your{
    transform: translateY(0);
    opacity: 1;
    transition:all 1s ease;
    transition-delay: 2.5s;
}
.dash-icons.in-view li{
    transition:all 1s ease;
    opacity: 1;
    transform: scale(1);
    transition-delay: 4s;
}
.dash-icons.in-view li:nth-child(2){
    transition-delay: 4.3s;
}
.dash-icons.in-view li:nth-child(3){
    transition-delay: 4.6s;
}
.dash-icons.in-view li:nth-child(4){
    transition-delay: 4.9s;
}
.in-view .dash-svg-line,.in-view .dash-svg-left1,.in-view .dash-svg-left2{
    animation: integrationdash 2s linear forwards 1s;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation-delay: 3.5s;
}
.in-view .dash-svg-left1{
    animation-delay: 1.5s;
}
.in-view .dash-svg-left2{
    animation-delay: 2s;
}    
.in-view .tour-arrow3{
    opacity: 1;
    transition-delay: 9.8s;
} 
/*feature2-animations*/
.agree-pdf{
    opacity: 0;
    transform:translateY(-50px);
}
.in-view .agree-pdf{
    opacity: 1;
    transform:translateY(0px);
    transition:all 1s ease; 
    transition-delay: 2.5s;
}
.in-view .status{
    opacity: 1;
    transition:all .5s ease;
    transition-delay: 3.5s;
}
.in-view .status-1,.in-view .status-2{
    transform:translateX(0px);
    opacity: 1;
    transition:all 1s ease;
    transition-delay: 4s;
}
/*feature-3 animaitons*/
.drag-here{
    position: absolute;
    width: 43px;
    height: 49px;
    border: 1px dashed #59B382;
    border-radius: 8px;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    opacity: 0;
}
.drag-here::before{
    content: '';
    position: absolute;
    background: url(/sites/zweb/images/sign/tour-sprite-update.png) no-repeat -339px -4px;
    background-size: 799px 55px;
    width: 43px;
	height: 50px;
    transform:translateX(25px) translateY(-15px);
}
.in-view .drag-here{
    opacity: 1;
    transition:all 1s ease;
    transition-delay: 2.5s;
}
.in-view .drag-here::before{
    transition:all 1s ease;
    transform:translate(0px,0px);
    transition-delay: 4.3s;
}
.assign-pdf,.drag-file,.add-recipients{
    opacity: 0;
}
.assign-pdf{
    transform:translateX(-30px);
}
.drag-file{
    transform:translateX(30px)
}
.in-view .assign-pdf,.in-view .drag-file{
    opacity: 1;
    transform:translateX(0px);
    transition: all 1s ease;
    transition-delay:2.3s;
}
.add-recipients{
    transform:translateY(30px);
}
.in-view .add-recipients{
    opacity: 1;
    transform:translateY(0px);
    transition:all 1s ease;
    transition-delay: 3.3s;
}
.feature-3 .in-view .dash-svg-left2{
    animation-delay: 1.8s;
}
/*feature-4 animations*/
.sign-info{
    opacity: 0;
    transform:translateY(50px);
}
.in-view .sign-info{
    opacity: 1;
    transform:translateY(0px);
    transition:all 1s ease;
    transition-delay: 2.3s;
}
.in-view .sign-cta{
    opacity: 1;
    transition:all 1s ease;
    transition-delay: 3.5s;
}
.feature-4 .dash-icons.in-view li{
    transition-delay: 4.3s;
}
.feature-4 .dash-icons.in-view li:nth-child(2){
    transition-delay: 4.5s;
}
.feature-4 .dash-icons.in-view li:nth-child(3){
    transition-delay: 4.7s;
}
.feature-4 .dash-icons.in-view li:nth-child(4){
    transition-delay: 4.9s;
}
.feature-4 .in-view .dash-svg-left2{
    animation-delay: 1.9s;
}
.in-view .singer-svg{
    animation: integrationdash 2s linear forwards 1s;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation-delay: 3.3s;
}
/*feature-5 animations*/
.doc-status{
    opacity: 0;
    transform:translateY(50px);
}
.in-view .doc-status{
    opacity: 1;
    transform:translateY(0px);
    transition:all 1s ease;
    transition-delay: 2.3s;
}
.graph-svg{
    opacity:0;
}
.in-view .graph-svg{
    opacity: 1;
    transition:all 1s ease;
    transition-delay: 3.3s;
}
.label-1,.label-2,.label-3{
    opacity: 0;
    transform: translateX(50px);
}
.label-2{
    transform: translateX(-50px);
}
.in-view .label-1,.in-view .label-2,.in-view .label-3{
    opacity: 1;
    transition:all 1s ease;
    transform: translateX(0px);
}
.in-view .label-1{
    transition-delay: 5.3s;
}
.in-view .label-2{
    transition-delay: 5.8s;
}
.in-view .label-3{
    transition-delay: 6.3s;
}
.in-view .tick-icon{
    opacity: 1;
    transition:all .5s ease;
}
.in-view .label-1+.tick-icon{
    transition-delay: 5.8s;
}
.in-view .label-2+.tick-icon{
    transition-delay: 6.3s;
}
.in-view .label-3+.tick-icon{
    transition-delay: 6.8s;
}
.feature-5 .in-view .dash-svg-left2{
    animation-delay: 1.7s;
}
/*bar-graph*/
rect{
    transition:all .3s ease;
    height: 0px;
}
.rect10{
    transform: translate(1093px,4407px);
}
.in-view rect.rect10 {
    height: 80px;
    transition-delay: 3.3s;
    transform: translate(1093px,4327px);
} 
.rect2{
    transform:translate(1112px,4407px)
}
.in-view rect.rect2{
    height:43px;
    transition-delay: 3.5s;
    transform:translate(1112px,4364px)
}
 .rect8{
    transform:translate(1151px,4407px)
}
.in-view rect.rect8{
    height:43px;
    transition-delay: 3.7s;
    transform:translate(1151px,4364px)
}
.rect9{
    transform:translate(1170px,4407px)
}
.in-view rect.rect9{
    height:43px;
    transition-delay: 3.9s;
    transform:translate(1170px,4364px)
}
.rect1{
    transform:translate(1231px,4407px);
}
.in-view rect.rect1{
    height:80px;
    transform:translate(1231px,4327px);
    transition-delay: 4.1s;
}
.rect3{
    transform:translate(1250px,4407px);
    transition:all .2s ease;
}
.in-view rect.rect3{
    height:43px;
    transition-delay: 4.3s;
    transform:translate(1250px,4364px);
}   
.rect5{
    transform:translate(1250px,4364px);
    transition:all .3s ease;
}
.in-view rect.rect5{
    height:37px;
    transform:translate(1250px,4327px);
    transition-delay: 4.4s;
}
.rect4{
    transform:translate(1269px,4407px);
    transition:all .2s ease;
}
.in-view rect.rect4{
    height:43px;
    transform:translate(1269px,4364px);
    transition-delay: 4.6s;
}
.rect6{
    transform:translate(1269px,4364px);
    transition:all .3s ease;
}
.in-view rect.rect6{
    height:72px;
    transform:translate(1269px,4292px);
    transition-delay: 4.7s;
}
.rect7{
    transform:translate(1310px,4412px);
}
.in-view rect.rect7{
    height:115px;
    transform:translate(1310px,4292px);
    transition-delay: 4.9s;
}
/*feature-6 animations*/
.org-label-1,.org-label-2,.org-label-3,.tick-badge{
    opacity: 0;
}
.in-view .org-label-1,.in-view .org-label-2,.in-view .org-label-3{
    opacity: 1;
    transition:all 1s ease;
    transform:translateY(0px);
    transition-delay: 2.3s;
}
.org-label-1{
    transform:translateX(-30px);
}
.org-label-2{
    transform:translateY(-30px);
}
.org-label-3{
    transform:translateY(30px);
}
.in-view .org-label-2{
    transform:translateX(0px);
    transition-delay: 3.3s;
}
.in-view .org-label-3{
    transition-delay: 3.8s;
}
.in-view .tick-badge{
    transform:scale(1);
    opacity: 1;
    transition:all 1s ease;
    transition-delay: 4.3s;
}
.in-view .setting-svg-right{
    animation-delay: 1s;
}
/*footer-animation*/
.in-view .computer-icon{
    animation: computer-flip  ease 1s forwards;
}
@keyframes computer-flip{
	from {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -6deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -6deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
		opacity: 1
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -2deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -2deg)
	}
	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
		opacity: 1
	}
}
/*media-queries*/
@media only screen and (max-width:1440px){
    .top-search-icon{
        width: 175px;
    }
    .tour-arrow1 svg{
        top: -3%;
        left: -31%;
    }
}
@media only screen and (max-width:1400px){
    .feature4-img-wrap{
        margin: 90px auto 0px;
    }
    .feature4-img-wrap .sign-cta{
        top: 0%;
        right: -20%;
    }
    .feature4-img-wrap .arrow-path{
        top: 20%;
        right: -10%;
    }
    .tour-arrow3{
        left: -60%;
        top: 45%;
    }   
}
@media only screen and (max-width:1300px){
    .feature4-img-wrap .sign-cta{
        right: -10%;
    }
    .feature4-img-wrap .arrow-path {
        right: 0;
    }
    .feature6-img-wrap .lang-wrap .org-label-3{
        margin: -12px 0px 0px 0px;
    }
    .tick-badge{
        left:52%;
    }
}
@media only screen and (max-width:1299px){
    h1 {
        font-size: 50px;
    }
    h2 {
        font-size: 46px;
    }
    h3 {
        font-size: 40px;
    }
    .top-search-icon{
        width: 110px;
    }    
    .smile-wrap{
        max-width: 60%;
    }
    .banner-image::before{
        width: 520px;
        height: 531px;
    }
    .feature-list-cont,.feature-2 .feature-list-cont,.feature-4 .feature-list-cont,.feature-3 .feature-list-cont{
        padding: 200px 100px;
    }
    .feature6-img-wrap .org-wrap{
        margin: 70px auto 0px;
    }
    .feature-list-cont svg{
        max-width:100%;
    }
    .form-arrow{
        left: -24%;
        top: 14%;
    }
    .book-arrow{
        left: -256px;
    }
    .feature-4 .book-arrow{
        left: -487px;
    }
    .home-arrow{
        left:0; 
    }
    .dashboard-arrow{
        top: 62%;
        left: 2%;
    }
    .tour-arrow1 svg,.tour-arrow2 svg,.tour-arrow3 svg{
        display: none;
    }
    .feature-3 .feature-list-cont,.feature-4 .feature-list-cont{
        padding: 280px 100px 120px;
    }
    .feature-6 .book-arrow,.feature-5 .book-arrow{
        left:-810px
    }
    
}
@media only screen and (max-width:1099px){
    .banner-image{
        display: none;
    }
    .tour-banner .banner-cont{
        width: 100%;
        text-align: center;
    }
    .banner-section{
        padding:70px 0 130px;
        margin-bottom: 35px;
    }
    .feature-section{
        margin-top:0;
    }
    .feature-list-cont svg{
        display: none;
    }
    .feature-image{
        padding: 40px 20px 50px;
    } 
}
@media only screen and (max-width:1024px){
    .feature-list-cont, .feature-2 .feature-list-cont{
        padding: 200px 70px;
    }
    .tour-footer {
        padding: 100px 0px 140px;
    }
    .feature2-img-wrap .status-1,.feature2-img-wrap .status-2{
        max-width: 380px;
    }
    .feature4-img-wrap .sign-cta {
        right: -6%;
    }
    .feature6-img-wrap .org-wrap .org-label-2{
        left: 15px;
        top: 12px;
    }
    .feature-4 .feature-list-cont, .feature-3 .feature-list-cont{
        padding: 200px 80px;
    }
}
@media only screen and (max-width:991px){
    h3{
        font-size: 35px;
    }
    .banner-section{
        margin-bottom: 50px;
    }
    .feature-box{
        flex-direction: column;
        max-width: 80%;
        margin:0 auto 50px;
    }
    .feature-box>div{
        width:100%;
    }
    .feature-cont{
        text-align:center;
    }
    .feature-list-cont,.feature-2 .feature-list-cont,.feature-4 .feature-list-cont, .feature-3 .feature-list-cont{
        padding: 130px 80px;
        border-radius: 0px 10px 0px 0px;
    }
    .feature-list{
        border-radius: 10px 0px 0px 0px;
    }
    .feature-image{
        border-radius: 0px 0px 10px 10px;
        border-left: 1px solid #707070;
        border-top: none;
    }
    .dash-box-img>div{
        width: 30%;
    }
    .feature-demo{
        margin-top: 50px;
    }
    .dash-box-img{
        margin: 50px 0px 0px;
    }
    .dash-icons{
        margin: 25px 0px 50px;
    }
    .dashboard-arrow {
        top: 70%;
        left: 15%;
    }
    .feature2-img-wrap{
        margin: 50px auto 0px;
    }
    .dash-box-img>div.add-receipt{
        max-width: 60%;
    }
    .feature4-img-wrap{
        margin: 60px auto 0px;
    }
    .feature4-img-wrap .sign-cta {
        right: -16%;
    }
    .feature-4 .dash-icons{
        margin-bottom: 50px;
    }
    .feature5-img-wrap .graph-wrap{
        margin: 50px auto 0px 20px;
    }
    .feature5-img-wrap .graph-label{
        margin: 30px 0px 0px;
    }
    .feature6-img-wrap .org-wrap{
        margin: 50px auto 0px;
    }
    .feature6-img-wrap .lang-wrap{
        margin: 0 auto 20px;
    }
    .in-view .send-sign,.in-view .label-1+.tick-icon,.in-view .label-2+.tick-icon,.in-view .label-3+.tick-icon,.in-view .status, .in-view .sign-your,.dashboard-arrow,.dash-icons.in-view li,.dash-icons.in-view li:nth-child(2),.dash-icons.in-view li:nth-child(3),.dash-icons.in-view li:nth-child(4),.in-view .agree-pdf,.in-view .status-1, .in-view .status-2,.in-view .assign-pdf, .in-view .drag-file,.in-view .drag-here::before,.in-view .add-recipients,.in-view .sign-info,.in-view .sign-cta,.arrow-path,.feature-4 .dash-icons.in-view li,.feature-4 .dash-icons.in-view li:nth-child(2),.feature-4 .dash-icons.in-view li:nth-child(3),.feature-4 .dash-icons.in-view li:nth-child(4),.in-view .doc-status,.in-view .graph-svg,.in-view .label-1, .in-view .label-2, .in-view .label-3,.in-view .org-label-1, .in-view .org-label-2, .in-view .org-label-3,.in-view .tick-badge,.setting-arrow,.in-view .drag-here,.in-view rect.rect1,.in-view rect.rect2,.in-view rect.rect3,.in-view rect.rect4,.in-view rect.rect5,.in-view rect.rect6,.in-view rect.rect7,.in-view rect.rect8,.in-view rect.rect9,.in-view rect.rect{
        transition-delay: unset;
    }
    .in-view .dash-svg-line,.in-view .singer-svg,.in-view .setting-svg-right{
        animation: integrationdash  linear forwards 1s;
        animation-delay: 0s;
    }
}
@media only screen and (max-width:768px){
    .feature-list-cont,.feature-2 .feature-list-cont,.feature-4 .feature-list-cont, .feature-3 .feature-list-cont{
        padding: 75px 80px;
    }
}
@media only screen and (max-width:767px){
    .feature-list .nav-list li{
        width: 52px;
        padding: 15px;
    }
    .feature-list-cont,.feature-2 .feature-list-cont,.feature-4 .feature-list-cont, .feature-3 .feature-list-cont   {
        padding: 80px;  
    }
    .drag-here{
        width: 34px;
        height: 39px;
    }
    .drag-here::before{
        transform: scale(0.8);
        left: -5px;
        top: -5px;
    }
    .in-view .drag-here::before{
        transform: scale(0.8);
    }
    .feature-list .nav-list li:nth-child(1){
        padding:15px 13px;
    }
}
@media only screen and (max-width:680px){
h1{
    font-size: 40px;
}
h2{
    font-size: 35px;
}
h3{
    font-size: 30px;
}
.feature-list-cont, .feature-2 .feature-list-cont {
    padding: 80px 30px;
}
.feature2-img-wrap .status-1, .feature2-img-wrap .status-2{
    max-width: 310px;
}
.drag-here::before {
    transform: scale(0.5);
    left: -10px;
    top: -10px;
}
.in-view .drag-here::before {
    transform: scale(0.5);
}
.drag-here{
    width:24px;
    height:29px;
}
.feature4-img-wrap{
    max-width: 300px;
}
.feature4-img-wrap .sign-cta{
    right: -7%;
}
.feature4-img-wrap .arrow-path{
    display: none;
}
.feature5-img-wrap .graph-label img{
    max-width: 300px;
}
.feature5-img-wrap .graph-label img.label-2{
    max-width: 315px;
    left: -1px;
}
.label-2+.tick-icon{
    right: -5PX;
}
.feature5-img-wrap .graph-label img.label-3{
    max-width: 330px;
}
.graph-svg,.doc-status{
    display: none;
}
.doc-status-2{
    display: block;
}
}
@media only screen and (max-width:480px){
    h1{
        font-size: 35px;
    }
    h2{
        font-size: 30px;
    }
    .banner-cont p{
        max-width: 200px;
        margin: 0 auto 20px;
    }
    .feature-box{
        max-width: 100%;
    }
    .feature-list .nav-list li{
        width: 50px;
        padding: 10px;
    }
    .feature-list-cont{
        padding: 50px 30px;
        text-align: left;
    }
    .feature-2 .feature-list-cont,.feature-3 .feature-list-cont{
        padding: 80px 30px 10px;
    }
    .feature-4 .feature-list-cont{
        padding: 60px 30px 40px;
    }
    .feature-5 .feature-list-cont{
        padding: 90px 30px 30px;
    }
    .feature-image-top{
        display: none;
    }
    .feature-image {
        padding: 30px 20px;
    }
    .dash-icons li .bg-round{
        transform: scale(0.9);
    }
    .dash-icons li:not(last-child) {
        margin-right: 5px;
    }
    .dash-icons{
        margin: 5px 0px 50px;
    }
    .dashboard-arrow{
        top: 53%;
        left: 0%;
    }
    .feature2-img-wrap .status-1, .feature2-img-wrap .status-2{
        max-width: 280px;
    }
    .feature2-img-wrap{
        margin: 0px auto 0px;
    }
    .feature2-img-wrap .status-1,.feature2-img-wrap .status-2{
        transform:translateX(-50%);
        left:50%;
    }
    .feature2-img-wrap .status-1{
        max-width: 268px;
        top: 51%;
    }
    .drag-here {
        width: 30px;
        height: 34px;
        border-radius:5px;
    }
    .drag-here::before{
        left: -7px;
        top: -8px;    
    }
    .in-view .drag-here::before {
        transform: scale(0.65);
    }
    .feature4-img-wrap .sign-cta{
       display: none;
    }
    .dash-icons.in-view li{
        transform: scale(0.8);  
    }
    .feature6-img-wrap .org-wrap{
        max-width: 300px;
        margin: 0px auto 0px 2px;
    }
    .feature6-img-wrap .lang-wrap{
        max-width: 240px;
        margin:0px 0px 20px auto;
    }
    .feature6-img-wrap .lang-wrap .org-label-3{
        max-width: 180px;
        margin: -12px 23px 0px 0px;
    }
    .tick-badge{
        left: 21%;
    }
    .tour-footer {
        padding: 40px 0px 80px;
    }
    .banner-section{
        padding: 50px 0 150px;
        margin-bottom: 0px;
    }
    .dashboard-arrow svg{
        max-width: 50%;
    }
    .feature5-img-wrap .graph-wrap{
        margin: 20px auto 0px;
    }
    .tick-icon{
        top: -25px;
        left: 50%;
        display: none;
    }
    .feature-list .nav-list li:nth-child(1){
        padding: 10px 8px 5px;
    }
    .feature-demo{
        margin-top:0;
    }
    .dash-box-img{
        margin:0px;
    }
    .dash-icons{
        margin: 0px 0px 0px;
    }
    .dash-box-img>div{
        width:45%;
    }
    .dash-box-img>div.add-receipt {
        max-width: 90%;
    }
    .feature-3 .feature-image,.feature-2 .feature-image{
        padding-bottom: 10px;
    }
    .feature4-img-wrap{
        margin:0 auto;
    }
    .feature-4 .dash-icons{
        margin-bottom: 0px;
    }
    .setting-arrow{
        left: 43%;
        top: 9%;
    }
    .feature-box{
        margin-bottom: 30px;
    }
    .feature-section{
        margin-top: -13%;
    }
    .graph-label{
        height: 180px;
    }
    .nav-list li span.form{
        background-position: -70px -21px;
    }
}
@media only screen and (max-width:375px){
    .feature6-img-wrap .lang-wrap .org-label-3{
        margin: -12px 0px 0px 0px;
    }
    .feature6-img-wrap .org-wrap{
        margin: 0 20px 0 0px;
    }
    .tick-badge {
        left: 33%;
    }
}
/*sticky-menu-for-navigation*/
.fixedtop {
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #FAFAFA;
    border-top: 1px solid #f3f2f2;
    border-bottom: 1px solid #f3f2f2;
    padding: 15px 0 15px;
    z-index: 9;
    transition: all 1s;
    opacity: 0;
}
.fixedtop li {
    display: inline-block;
    padding: 0 15px;
    font-family: var(--zf-secondary-medium);
}
.fixedtop li a {
    color: black;
}
.fixedtop li.active a { 
    font-family: var(--zf-secondary-bold);
}
@media only screen and (min-width: 1200px){
.fixedtop.active {
    top: 65px;
    opacity: 1;
}
}