*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.zw-product-header {
    background: #fff;
}
.content-wrap {
    max-width: 1170px;
}
.header-top a, .feature-item a {
    font-family: var(--zf-primary-bold);
}
.mob-img {
    display: none;
}
.header-top {
    padding: 90px 0 0;
}
.header-top .content-wrap, .feature-item .content-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.feature-item {
    padding: 90px 0;
}
.feature-item .content-wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.feature-item .img-part {
    width: 55%;
    text-align: center;
}
.feature-item .cont-part {
    width: 40%;
}
.feature-item .img-part img {
    max-width: 500px;
    width: 100%;
}
#feat4 img.subimg {
    position: absolute;
    right: 0;
    max-width: 300px;
    bottom: 60px;
}
.header-top .cont-part {
    width: 60%;
}
.header-top span {
    color: #f0483e;
    font-family: var(--zf-primary-bold);
}
#feat2 .img-part:before{
    content: '';
    position: absolute;
    bottom: -130px;
    left: 280px;
    background: url(/sites/zweb/images/workerly/zr-seamless-integrations-img1.png) no-repeat;
    background-size: 150px auto;
    width: 300px;
    height: 200px;
    z-index: 1;
}
.header-top .cont-part p {
    margin-bottom: 30px;
}
.header-top h1, .mid-section h2, .feature-item h2, .bottom-cta-section h2 {
    font-family: var(--zf-secondary-regular);
}
.header-top h1 {
    font-size: 60px;
}
.header-top .img-part {
    width: 40%;
    position: relative;
}
.header-top .img-part:before{
    background: url(/sites/zweb/images/workerly/zwsign-header-img-bg.png) no-repeat;
    background-size: 110px auto;
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 110px;
    height: 200px;
    z-index: -1;
}
.header-top .img-part:after {
    content: '';
    position: absolute;
    bottom: -50px;
    width: 330px;
    height: 50px;
    background: #fff;
    z-index: 99;
    left: 72px;
}
.header-top .img-part img {
    position: relative;
    bottom: -63px;
    z-index: -1;
}
.header-top .img-part img.sign-img {
    position: absolute;
    bottom: 6px;
    left: 70px;
    width: 130px;
    z-index: -1;
    -webkit-transition: 1s width linear;
    -o-transition: 1s width linear;
    transition: 1s width linear;
}
.header-top .img-part span {
    position: relative;
    display: block;
    width: 244px;
    height: 0;
}
.header-top .img-part span:before {
    content: '';
    background: #e4f9f8;
    width: 178px;
    height: 53px;
    position: absolute;
    bottom: 5px;
    right: 21px;
    z-index: 3;
}
.header-top .animated .img-part span:before{
    -webkit-animation: 1500ms sign linear forwards 500ms;
    animation: 1500ms sign linear forwards 500ms;
}
@-webkit-keyframes sign{
    0%{
        width: 180px;
   }
    30%{
        width: 160px;
   }
    60%{
        width: 100px;
   }
    90%{
        width: 50px;
   }
    100%{
        width: 0px;
   }
}
@keyframes sign{
    0%{
        width: 180px;
   }
    30%{
        width: 160px;
   }
    60%{
        width: 100px;
   }
    90%{
        width: 50px;
   }
    100%{
        width: 0px;
   }
}
.mid-section {
    background: #313131;
    padding: 180px 0 150px 0px;
    color: #fff;
    margin-bottom: 50px;
}
.mid-section .col-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.mid-section .col-block {
    width: 33.3333%;
    padding: 30px;
}
.mid-section .cont-wrap {
    max-width: 700px;
    margin: 0 auto 80px;
    text-align: center;
}
.feature-item .cont-wrap{
    max-width: 790px;
    margin: 0 auto 120px;
    text-align: center;
}
.feature-item .cont-wrap p{
    max-width: 700px;
    margin: 0 auto;
}
.mid-section h2 {
    font-size: 50px;
}
.mid-section h3 {
    font-family: var(--zf-secondary-medium);
    font-size: 32px;
}
.mid-section h3 span {
    display: block;
}
.mid-section img {
    margin-bottom: 40px;
}
.feature-item h2 {
    font-size: 46px;
}
.feature-item .image-part {
    width: 55%;
}
.bottom-cta-section .content-wrap {
    background: #313131;
    padding: 80px 0;
    text-align: center;
    color: #fff;
}
.bottom-cta-section h2 {
    font-size: 44px;
}
.small-txt {
    font-size: 14px;
    max-width: 600px;
    margin: 30px auto;
}
img{
    width: 100%;
}
.img-wrap {
    min-height: 240px;
}
.mid-section img {
    max-width: 190px;
}
.mid-section img.icon1 {
    max-width: 260px;
}
.mid-section img.icon2{
    max-width: 150px;
}
/* .icon3 {
    max-width: 155px;
}
*/
.bottom-cta-section {
    margin: 100px 0;
}
.feature-item .img-part {
    position: relative;
}
.feature-item .img-part img.subimg {
    position: absolute;
    box-shadow: 6px 8px 22px 3px rgba(128, 128, 128, 0.1);
    -webkit-box-shadow: 6px 8px 22px 3px rgba(128, 128, 128, 0.1);
}
#feat2 img.subimg{
    bottom: -55px;
    max-width: 320px;
    right: 0px;
}
#feat1 img.subimg {
    bottom: 170px;
    max-width: 230px;
    left: 40px;
}
#feat1 img.subimg.two {
    left: unset;
    top: 150px;
    right: 0px;
    max-width: 240px;
}
#feat3 img.subimg {
    bottom: 30px;
    left: 90px;
    max-width: 530px;
}
.image-part>div img, .image-part>div video{
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* dev */
.zw-other-lang .bottom-cta-section h2 {
    max-width: 600px;
    margin: 0 auto 40px;
}
@media screen and (min-width: 1400px) and (max-width: 1599px){
    .header-top h1 {
        font-size: 54px;
        max-width: 600px;
   }
    .header-top{
        padding: 60px 0 0;
   }
    .mid-section {
        padding: 130px 0 90px;
   }
    .feature-item h2 {
        font-size: 40px;
   }
}
@media screen and (min-width: 1400px){
    .act-btn {
        padding: 15px 40px;
   }
    .header-top .cont-part p {
        max-width: 580px;
   }
}
@media screen and (max-width: 1500px){
    #feat2 .img-part:before{
        content: none;
   }
}
@media screen and (max-width: 1400px){
    .header-top .img-part:after {
        content: none;
   }
    .feature-item .content-wrap {
        padding: 50px 0 0;
   }
    .bottom-cta-section h2 {
        max-width: 600px;
        margin: 0 auto 40px;
   }
    .header-top .cont-part p {
        max-width: 570px;
   }
    .header-top .content-wrap {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
   }
    .mid-section {
        margin-bottom: 0;
        padding: 100px 0;
   }
    .header-top h1 {
        font-size: 54px;
   }
    .mid-section h2, .feature-item h2, .bottom-cta-section h2{
        font-size: 46px;
   }
}
@media screen and (max-width: 1300px){
    .large-img, .sign-img {
        display: none;
   }
    .mob-img{
        display: inline-block;
   }
    .header-top .img-part span:before{
        content: none;
   }
}
@media screen and (min-width: 1199px) and (max-width: 1300px){
    .header-top h1 {
        font-size: 50px;
   }
    .header-top .cont-part {
        width: 55%;
        max-width: 610px;
   }
    .header-top {
        padding: 50px 0 0;
   }
    .mid-section {
        padding: 80px 0 50px;
   }
    .mid-section h2, .features-item h2 {
        font-size: 40px;
   }
    .bottom-cta-section h2 {
        font-size: 42px;
   }
}
@media screen and (min-width: 992px){
    .feature-item.left-image .content-wrap>div.cont-part {
        padding-left: 90px;
   }
    .feature-item.right-image .content-wrap>div.cont-part{
        padding-right: 90px;
   }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .header-top h1 {
        font-size: 50px;
   }
    .header-top {
        padding: 40px 0 0;
   }
    .header-top .cont-part p {
        margin-right: 40px;
   }
    .feature-item.left-image .content-wrap>div.cont-part {
        padding-left: 40px;
   }
    .feature-item.right-image .content-wrap>div.cont-part {
        padding-right: 40px;
   }
    .feature-item {
        padding: 60px 0;
   }
    #feat3 img.subimg{
        max-width: 470px;
   }
}
@media screen and (max-width: 991px){
    .header-top h1 {
        font-size: 42px;
   }
    .feature-item .cont-wrap{
        margin: 0 auto 80px;
   }
    .header-top .img-part img{
        bottom: -44px;
   }
    .mid-section img{
        margin-bottom: 10px;
   }
    .header-top .img-part, .header-top .cont-part {
        width: 100%;
        text-align: center;
   }
    .header-top .cont-part {
        max-width: 500px;
        margin: 0 auto 40px;
   }
    .header-top .img-part:before {
        content: none;
   }
    .header-top .img-part img {
        max-width: 500px;
   }
    .mid-section h2, .feature-item h2 {
        font-size: 36px;
   }
    .mid-section .col-block {
        width: 50%;
   }
    .icon2 {
        max-width: 120px;
   }
    .mid-section h3 {
        font-size: 28px;
   }
    .mid-section .col-wrap {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
   }
    .mid-section {
        padding: 80px 0 100px;
   }
    .bottom-cta-section h2 {
        font-size: 38px;
   }
    .bottom-cta-section .content-wrap {
        padding: 80px 20px;
   }
    .feature-item .image-part {
        width: 100%;
   }
    .feature-item .cont-part {
        width: 100%;
   }
    #feat2 img.subimg, #feat3 img.subimg, #feat1 img.subimg {
        display: none;
   }
    #feat1 img.subimg.two{
        top: 140px;
        right: 90px;
        max-width: 290px;
   }
    #feat4 img.subimg{
        right: 40px;
        max-width: 320px;
        bottom: 80px;
   }
    #feat1 img.subimg.two {
        display: inline-block;
   }
    .feature-item .img-part, .feature-item .cont-part{
        width: 100%;
   }
    .feature-item .cont-part {
        max-width: 500px;
        margin: 0 auto 50px;
        text-align: center;
   }
    .feature-item {
        padding: 30px 0 0;
   }
    .feature-item .cont-part {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
   }
    .feature-item .img-part {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
   }
    .header-top {
        padding: 60px 0 0;
   }

    .i18n-de .bottom-cta-section h2 {
        font-size: 29px;
   }
   
    .i18n-nl .bottom-cta-section h2 {
        font-size: 36px;
   
}

}
@media screen and (max-width: 767px){
    .bottom-cta-section .content-wrap {
        width: 100%;
   }
    .mid-section .col-block {
        width: 100%;
        text-align: center;
        max-width: 500px;
        margin: 0 auto;
   }
    .header-top .img-part img {
        max-width: 290px;
   }
    .bottom-cta-section {
        margin-bottom: 0;
   }
    .header-top {
        padding: 50px 0 0;
   }
    #feat1 img.subimg.two {
        right: 0;
   }
    .img-wrap{
        min-height: 0;
   }
    #feat4 img.subimg{
        right: 0;
        max-width: 320px;
        bottom: 80px;
   }
}
@media screen and (max-width: 480px){
    .feature-item .img-part img, .header-top .img-part img {
        max-width: 90%;
   }
    #feat1 img.subimg.two, #feat4 img.subimg{
        max-width: 220px;
        right: 30px;
   }

    #feat1 img.subimg.two, #feat4 img.subimg {
        max-width: 170px;
   }

   .zw-other-lang .header-top h1 {
    font-size: 28px;
}
.zw-other-lang .mid-section h2, .zw-other-lang .feature-item h2, .zw-other-lang .bottom-cta-section h2 {
    font-size: 26px;
}
.header-top h1 {
    font-size: 32px;
}
.mid-section h2, .feature-item h2, .bottom-cta-section h2{
    font-size: 28px;
}
.zw-other-lang .mid-section h3 {
    font-size: 24px;
}
.mid-section h3 {
    font-size: 26px;
}


}
@media screen and (max-width: 320px){
    #feat1 img.subimg.two, #feat4 img.subimg {
        display: none;
   }
}
/* de start */
@media (min-width: 1400px) {
    .i18n-de .header-top .cont-part h1 {
        font-size: 48px;
   }
}
@media (min-width: 991px) and (max-width: 1399px){
    .i18n-de .header-top .cont-part h1 {
        font-size: 40px;
   }
}


/* de end */
/* id start */
/* @media (min-width: 991px) and (max-width: 1099px) {
    .i18n-id a.act-btn.cta-btn {
        margin-bottom: 20px;
   }
}
*/
/* id end */
/* fr start */
/* @media (min-width: 991px) and (max-width: 1600px) {
    .i18n-fr a.act-btn.cta-btn {
        margin-bottom: 20px;
   }
}
*/
/* fr end */
/* ar start */
.i18n-ar .mid-section .cont-wrap h2,.i18n-ar .mid-section .cont-wrap p,.i18n-ar .feature-item .cont-wrap h2,.i18n-ar .feature-item .cont-wrap ,.i18n-ar .bottom-cta-section .content-wrap h2,.i18n-ar .bottom-cta-section .content-wrap p,.i18n-ar div#feat1 p {
    text-align: center;
}
.i18n-ar div#feat1 .cont-part p {
    text-align: right;
}
@media (min-width: 992px) {
    .i18n-ar .feature-item.left-image .content-wrap>div.cont-part {
        padding-right: 90px;
        padding-left: 0;
   }
    .feature-item.right-image .content-wrap>div.cont-part {
        padding-left: 90px;
        padding-right: 0;
   }
}
@media (max-width: 991px) {
    .i18n-ar .header-top h1,.i18n-ar .header-top p,.i18n-ar .feature-item .cont-wrap p,.i18n-ar .feature-item .cont-part p,.i18n-ar .feature-item .cont-part h2,.i18n-ar .mid-section .col-wrap .col-block .img-wrap,.i18n-ar .mid-section .col-block h3,.i18n-ar .mid-section .col-wrap .col-block p,.i18n-ar div#feat1 .cont-part p {
        text-align: center;
   }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .i18n-ar .header-top .cont-part p {
        margin-left: 40px;
        margin-right: unset;
   }
}
/* ar end */
/* nl start */
/* @media (min-width: 991px) and (max-width: 1099px) {
    .i18n-nl a.act-btn.cta-btn {
        margin-bottom: 20px;
   }
}
*/


/* nl end */
/* es-xl start */
/* @media (min-width: 991px) and (max-width: 1600px) {
    .i18n-es-xl a.act-btn.cta-btn {
        margin-bottom: 20px;
   }
}
*/
/* es-xl end */
/* pt-br end */
/* @media (min-width: 991px) and (max-width: 1600px) {
    .i18n-pt-br a.act-btn.cta-btn {
        margin-bottom: 20px;
   }
}
*/
/* pt-br end */
/* vi end */
/* @media (min-width: 991px) and (max-width: 1099px) {
    .i18n-vi a.act-btn.cta-btn {
        margin-bottom: 20px;
   }
}
*/
/* vi end */
/* other lang dev start */
@media screen and (min-width: 1400px) {
    .zw-other-lang h1 {
        font-size: 47px;
   }
    .i18n-fr h1 {
        font-size: 52px;
   }
}
.zw-other-lang .header-top .content-wrap {
    align-items: flex-end;
}
.zw-other-lang .header-top .act-btn {
    margin-bottom: 70px;
}
@media screen and (max-width: 1399px) {
    .zw-other-lang .header-top .img-part img.sign-img {
        bottom: 0;
   }
}
@media screen and (max-width: 991px){
    .zw-other-lang .header-top .act-btn {
        margin-bottom: 0px;
   }
}

/* other lang dev end */