.zm-about-wrapper * {
  box-sizing: border-box;
}

/* banner section */

.banner-wrap {
  position: relative;
}

.banner-section {
  padding: 80px 0;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.banner-section h1 {
  font-size: 46px;
  margin-bottom: 30px;
}

.banner-section a {
  color: #0129CE;
  font-family: var(--zf-secondary-medium);
}

span.animtext {
  font-size: 150px;
  font-family: var(--primaryfont-bold);
  position: absolute;
  bottom: -59px;
  left: -10px;
  color: #fff;
  text-shadow: 0px 0px 2px #cecece;
  z-index: -1;
}

.slideup1,
.slideup2,
.slideup3,
.slideup4,
.slideup5 {
  -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);
}

.slideup1 {
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}

.slideup2 {
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
}

.slideup3 {
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}

.slideup4 {
  -webkit-transition-delay: 800ms;
  transition-delay: 800ms;
}

.slideup5 {
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.in-view .slideup1,
.in-view .slideup2,
.in-view .slideup3,
.in-view .slideup4,
.in-view .slideup5 {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

/* overview section */

.overview-section {
  background: #F2F4F7;
  padding: 80px 0;
  position: relative;
}

.overview-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.overview-box>div {
  width: 50%;
}

.vid-part {
  padding-right: 20px;
}

.vid-part>div {
  max-width: 585px;
  position: relative;
}

.vid-part>div:before {
  content: '';
  position: absolute;
  left: -30px;
  bottom: -35px;
  background: url(/sites/zweb/images/marketplace/about-dotted-big.png);
  background-size: 309px auto;
  background-repeat: no-repeat;
  width: 309px;
  height: 250px;
  z-index: 0;
}

.vid-part>div img {
  display: block;
  position: relative;
}

.vid-part>div strong {
  font-family: var(--zf-primary-semibold), sans-serif;
  color: #fff;
  font-weight: normal;
}

.vid-title {
  position: absolute;
  top: 20px;
  left: 40px;
}

.vid-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 16px;
  width: 110px;
  height: 25px;
  cursor: pointer;
}

.toggle-filter {
  position: absolute;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  bottom: 0;
  right: 110%;
}

.toggle-filter:before {
  position: absolute;
  content: '';
  width: 25px;
  height: 25px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  border: 2px solid #fff;
  -webkit-animation: wave 2s forwards infinite;
  animation: wave 2s forwards infinite;
  border-radius: 100%;
}

@-webkit-keyframes wave {
  0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.8), 0px 0px 25px 10px rgba(255, 255, 255, 0.3);
  }

  100% {
      -webkit-transform: scale(1.8);
      transform: scale(1.8);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      box-shadow: none;
  }
}

@keyframes wave {
  0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.8), 0px 0px 25px 10px rgba(255, 255, 255, 0.3);
  }

  100% {
      -webkit-transform: scale(1.8);
      transform: scale(1.8);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      box-shadow: none;
  }
}

.toggle-filter:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent transparent transparent #FF5201;
  border-width: 6px 8px;
  width: 0px;
  height: 0px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
}

.wtch-btn {
  border-bottom: 1px solid;
}

.cont-part {
  padding-left: 20px;
  max-width: 480px;
}

.cont-part h2 {
  font-family: var(--primaryfont-bold);
  max-width: 350px;
}

.cont-part a {
  display: inline-block;
  font-family: var(--zf-primary-semibold), sans-serif;
  padding: 12px 30px;
  text-align: center;
  margin: 0;
  background: #f0483e;
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 1;
  font-size: 15px;
}

/* extensions section*/

.extension-section {
  padding: 80px 0;
}

.extension-section ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.extension-section ul:before {
  content: '';
  position: absolute;
  right: -8px;
  top: 0;
  background: url(/sites/zweb/images/marketplace/about-dotted-small.png);
  background-size: 118px auto;
  background-repeat: no-repeat;
  width: 118px;
  height: 118px;
  z-index: 0;
}

.extension-section ul li {
  width: 31.33%;
  background: #ccc;
  padding: 40px 0;
  margin: 15px 2%;
  position: relative;
}

.extension-section ul li:before {
  content: '';
  background: #444;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  transition: -webkit-transform .5s ease;
  -webkit-transition: -webkit-transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease;
}

.extension-section ul li:hover:before {
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.extension-section ul li:after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: #0000000d;
  position: absolute;
  bottom: 0;
}

.extension-section ul li:first-child {
  background: #E2F1FF;
}

.extension-section ul li:nth-child(2) {
  background: #E0FCE7;
}

.extension-section ul li:nth-child(3) {
  background: #FFE8E8;
}

.extension-section ul li:nth-child(4) {
  background: #FFF5E2;
}

.extension-section ul li:last-child {
  background: #EEE5FF;
}

.extension-section ul li:first-child:before {
  background: #85bbea;
}

.extension-section ul li:nth-child(2):before {
  background: #83d9ab;
}

.extension-section ul li:nth-child(3):before {
  background: #f49090;
}

.extension-section ul li:nth-child(4):before {
  background: #eabb85;
}

.extension-section ul li:last-child:before {
  background: #b994e5;
}

.extension-section ul li:nth-child(3n+1) {
  margin: 15px 0;
}

.extension-section ul li:nth-child(3n) {
  margin: 15px 0;
}

.ext-box {
  max-width: 230px;
  margin: 0 auto;
}

.ext-box h3 {
  font-size: 22px;
}

.ext-box h3 span {
  display: block;
  font-family: var(--primaryfont-regular);
}

.plus-icon {
  width: 15px;
  height: 15px;
  border: 1px solid;
  color: #444444;
  position: absolute;
  right: 20px;
}

.ext-box a {
  color: #000;
}

.plus-icon:hover {
  color: #03a9f5;
}

.plus-icon:before,
.plus-icon:after {
  content: '';
  display: block;
  width: 7px;
  height: 1px;
  background: #444;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.plus-icon:hover:before,
.plus-icon:hover:after {
  background: #03a9f5;
}

.plus-icon:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

[class|=zicon] {
  background: var(--product-icons) no-repeat;
  background-size: var(--zp-i-bs);
  width: var(--zp-i-w);
  height: var(--zp-i-h);
  content: '';
  display: block;
    margin: 0 0 15px;
}

.zicon-crm {
  background-position: var(--zp-crm-bp);
}

.zicon-desk {
  background-position: var(--zp-desk-bp);
}

.zicon-recruit {
  background-position: var(--zp-recruit-bp);
}

.zicon-mail {
  background-position: var(--zp-mail-bp);
}

.zicon-search {
  background: none;
  position: relative;
}

.zicon-search:before {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -5px;
  bottom: 0;
  left: -5px;
  right: 0;
  margin: auto;
  border: 2px solid #ac6abe;
  content: '';
  border-radius: 100%;
}

.zicon-search:after {
  width: 2px;
  height: 10px;
  content: '';
  background: #ac6abe;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom: 7px;
  right: 12px;
}

@media all and (max-width: 1440px) {
  span.animtext {
      font-size: 120px;
      bottom: -45px;
      left: 0px;
  }
}

@media all and (max-width:1199px) {
  span.animtext {
      display: none;
  }

  .cont-part {
      padding-left: 30px;
      max-width: 540px;
  }

  .vid-part>div:before {
      bottom: -25px;
  }
}

@media all and (max-width:991px) {
  .banner-section {
      padding: 40px 0;
      max-width: 650px;
  }

  .banner-section h1 {
      font-size: 36px;
  }

  .vid-part>div:before {
      width: 190px;
      height: 150px;
  }

  .extension-section ul li {
      width: 48%;
  }

  .extension-section ul li:nth-child(2n) {
      margin: 15px 0;
  }

  .extension-section ul li:nth-child(2n+1) {
      margin: 15px 15px 15px 0;
  }
}

@media all and (max-width:767px) {
  .banner-section {
      padding: 40px 20px;
  }

  .overview-box {
      display: block;
  }

  .overview-box>div {
      width: 100%;
  }

  .vid-part {
      padding-right: 0;
  }

  .vid-part>div:before {
      top: -20px;
      left: -20px;
  }

  .vid-title {
      left: 0;
      width: 100%;
      text-align: center;
  }

  .cont-part {
      padding-left: 0;
      padding-top: 40px;
  }

  .extension-section ul:before {
      right: -10px;
  }
}

@media all and (max-width:640px) {
  .banner-section h1 {
      font-size: 26px;
      margin-bottom: 20px;
  }

  .vid-part>div:before {
      top: -20px;
      left: -10px;
  }

  .extension-section ul {
      max-width: 320px;
  }

  .extension-section ul li {
      width: 100%;
  }

  .extension-section ul:before {
      right: -18px;
      top: -15px;
  }

  .extension-section ul li:nth-child(2n+1) {
      margin: 0;
  }
}