a.act-btn.logged {
	display: none;
}
a.act-btn.login {
	display: inline-block;
}
.body-umain a.act-btn.logged {
	display: inline-block;
}
.body-umain a.act-btn.login {
	display: none;
}
.container {
    margin: 0px auto 80px;
}
.content-wrap {
	max-width: 1000px;
	margin: auto;
}
.content-wrap .two-col{
	margin:auto;
	padding: 60px  80px;
	display:  table;
}
.content-wrap.banner-wrap{
	text-align: center;
	padding: 20px 0px;
}
.banner-wrap h1 {
	padding: 70px 0 0px;
}
.banner-wrap p, .banner-wrap h1 {
	width: 90%;
	margin: auto;
    padding: 30px 0px 10px;
}
.banner-wrap img{
	width: 90%;
    max-width: 850px;
    margin: 60px auto 40px;
}
.banner-wrap p, .center-image .cont-area p {
	padding: 20px 10px;
	max-width: 700px;
}
.act-btn {
    background: #f0483e;
    color: #fff;
}
.bg-gradient{
	background: linear-gradient(0deg, #FFFFFF 0%, #F0F7FF 100%);
	padding-top: 70px;
}
.one-col h2 {
    padding: 40px 0px 50px;
    max-width: 800px;
    margin: auto;
}
.two-col {
    display:  inline-block;
}
.one-col h2, .center-image .cont-area p,.page-area {
	 text-align: center;
	 margin:auto;
}
.two-col .image-part,.two-col .cont-area{
    display:  table-cell;
    width: 50%;
    vertical-align:  middle;
}
.two-col .cont-area{
	padding-left:0px;
}
.two-col .image-part img,.one-col .image-part img{
	box-shadow:  unset;
}
.two-col .image-part img {
    width: 90%;
    max-width: 327px;
}
.two-col.right-image .image-part img {
    float:right;
}
.center-image .image-part {
    width: 90%;
    margin:auto;
}
.cont-slider {
    width: 450px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 0 14px 0 rgba(0,0,0,0.05);
}
.cont-slider {
    width: 350px;
    padding: 40px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 0 14px 0 rgba(0,0,0,0.05);
    }
.center-image .cont-slider {
    position: absolute;
    bottom: -40px;
    right: 0;
}
.button-wrap span {
    width: 21px;
    height: 18px;
    display:  inline-block;
    overflow:  hidden;
    background-size: 100px auto;
    transform: scale(1.4);
}
.button-wrap span.right-btn{
 background-position: -78px 0px;
 margin-left: 10px;
}
.button-wrap span.left-btn{
 background-position: -25px 0px;
}
span.button-wrap {
    display:  inline-block;
    float: right;
}

.page-area>a {
    text-decoration:  underline;
    margin: 60px;
    display:  inline-block;
}
.page-area {
    padding-bottom: 100px;
}
.page-area h4 {
    padding-bottom: 20px;
}
@media only screen and (max-width:1100px)
{
	section.zgray-bg{
		overflow:hidden;
	}
}
@media only screen and (max-width:1000px){
.two-col .image-part, .two-col .cont-area{
    width: 50% !important;
    float:  unset;
}
.container {
    margin: 0px auto 0px;
}
.bg-gradient {
    padding-top: 40px;
}
}
@media only screen and (max-width:768px){
	.content-wrap .two-col{
		display:block;
		width: 80%;
		overflow:hidden;
		padding:unset;
		text-align:center;
		margin:  40px auto;
	}

.two-col .image-part, .two-col .cont-area{
    width: 100% !important;
    float:  unset;
    display:block;
    overflow:hidden;
}
.two-col.right-image .image-part img,.two-col.left-image .image-part img{
	margin: 40px auto 0px;
	text-align:center;
	float:unset;
	 opacity:1;
	transform: translateY(0%);  
     -webkit-transition: opacity 2s;
    animation-name:unset;
}
h4{
	margin-bottom:10px
}
.bottom-cta-wrap .content-wrap{
		padding: 30px 0px;
}
}

@media only screen and (max-width:725px){
	.zfeature-list{
		margin-top: 40px;
	}	
}

.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
}
.blue h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
.slick-slider {
  margin: 30px auto 50px;
}
.slick-slide,.zfeature-list{
    /* overflow: hidden; */
}
.slick-slide,.zfeature-list:focus{
	outline:none;
}
.zfeature-list h3,.zfeature-list p{
    text-align:center;
}
.zfeature-list span{
	width: 50px;
	height: 34px;
	display:block;
	background: url("/sites/zweb/images/connect/connect-integrations-flow-2x.png") 0px 0px no-repeat;
	background-size: 600px auto !important;
	margin: 20px auto 20px;
}
span.buffer-icon {
    background-position: -201px 0px;
}

span.desk-icon {
    background-position: -249px 0px;
}

span.evev-icon {
    background-position: -160px 0px;
    transform: scale(1.2);
}

span.hubspot-icon {
    background-position: -298px 0px;
    width: 100px;
}

span.zendesk-icon {
    background-position: -408px 0px;
    width: 168px;
}
section.bottom-cta-wrap h3 {
    margin-bottom: 25px;
}
ul.slick-dots {
    margin-top: 10px;
}
.slick-slide:not(.slick-current){
    user-select: none;
     -webkit-transition: opacity 0.5s;
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: cubic-bezier(0.56, 0.05, 1, 0.99);
}
.slick-next, .slick-prev{
	top: 40%;
	background: url("/sites/zweb/images/connect/connect-integrations-flow-2x.png") 0px 0px no-repeat;
	background-size: 600px auto !important;
}
.slick-next:before,.slick-next:after,.slick-prev:before,.slick-prev:after{
	display:none
}
.slick-prev{
	left: -4%;
	background-position: -100px 0px;
}
.slick-next{
	right: -4%;
	background-position: -128px 0px;
}
section.zgray-bg {
    background-color: #FAFAFA;
    padding: 50px 0px 80px;
    margin-top: 50px;
}
.bottom-cta-wrap {
    margin: 20px auto 0px;
}
.bottom-cta-wrap h1{
	margin-bottom:40px
}

.slick-dots li.slick-active {
    background: #040404;
    width: 6px;
    height: 6px;
    border: 1px solid #000000
}

.left-image .image-part img {
    transform: translateX(-50%);
    opacity:0;
}

.right-image .image-part img {
    transform: translateX(50%);
    opacity:0;
}
p.center-text {
    text-align: center; 
}
p.center-text a{
    color: black;
    font-family: var(--zf-primary-semibold), Arial, Helvetica, sans-serif;
    padding: 10px 0 5px;
    color: #03a9f5;
    border-bottom: 1px solid #03a9f5;
}
.animated .image-part img {
 	transition: opacity 2s;
	animation-duration: 2s;
	 transform: translateX(0%);
}

.animated .right-image .image-part img{
     opacity:1;
     -webkit-transition: opacity 2s;
    animation-name: fadeout-right;  
}

.animated .left-image .image-part img{
     opacity:1;
     -webkit-transition: opacity 2s;
    animation-name: fadeout-left;  
}


@-webkit-keyframes fadeout-left{
    0%{
      transform: translateX(-50%);  
    }
    100%{
      transform: translateX(0%);  
    }
}

@keyframes fadeout-left{
    0%{
      transform: translateX(-50%);  
    }
    100%{
      transform: translateX(0%);  
    }
}

@-webkit-keyframes fadeout-right{
    0%{
      transform: translateX(50%);  
    }
    100%{
      transform: translateX(0%);  
    }
}

@keyframes fadeout-right{
    0%{
      transform: translateX(50%);  
    }
    100%{
      transform: translateX(0%);  
    }
}

.banner-wrap  img{
	animation-name: fadeout-center; 
	opacity:1; 
	animation-duration:4s;
	 transform: translateX(0%);
}
@-webkit-keyframes fadeout-center{
    0%{
      transform: translateY(20%);  
      opacity:0;
    }
    100%{
      transform: translateY(0%);
      opacity:1;
    }
}
@keyframes fadeout-center{
    0%{
      transform: translateY(20%); 
       opacity:0; 
    }
    100%{
      transform: translateY(0%);  
       opacity:1;
    }
}