.svg-defs {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ecosystem-infographic a[href="javascript:;"] {
    cursor: pointer;
}

.ecosystem-infographic__purchase-orders-text,
p.ecosystem-infographic__purchase-orders-text {
	color: #6c7279;
}
.ecosystem-infographic__payment-text,
p.ecosystem-infographic__payment-text {
	color: #1c4561;
}
.ecosystem-infographic__accounting-text,
p.ecosystem-infographic__accounting-text {
	color: #429bce;
}
.ecosystem-infographic__ecommerce-text,
p.ecosystem-infographic__ecommerce-text {
	color: #54b218;
}
.ecosystem-infographic__b2b-text,
p.ecosystem-infographic__b2b-text {
	color: #a058b8;
}
.ecosystem-infographic__sales-orders-text,
p.ecosystem-infographic__sales-orders-text {
	color: #6c7279;
}
.ecosystem-infographic__shipping-text,
p.ecosystem-infographic__shipping-text {
	color: #f6574d;
}
.ecosystem-infographic__warehouses-text,
p.ecosystem-infographic__warehouses-text {
	color: #5960ce;
}
.ecosystem-infographic__mobile-text,
p.ecosystem-infographic__mobile-text {
	color: #1c4561;
}
.ecosystem-infographic__suppliers-text,
p.ecosystem-infographic__suppliers-text {
	color: #968065;
}

@media (max-width: ) {
    .ecosystem-infographic {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .ecosystem-infographic__man-1,
    .ecosystem-infographic__lady-1,
    .ecosystem-infographic__lady-2,
    .ecosystem-infographic__arrows,
    .ecosystem-infographic__tradegecko {
    	display: none;
    }
    
    
    .ecosystem-infographic__feature {
        display: flex;
        align-items: center;
        flex-basis: 250px;
        flex-grow: 1;
        max-width: 300px;
        margin: 10px;
        margin-left: 0;
    }
    
    .ecosystem-infographic__feature-icon,
    img.ecosystem-infographic__feature-icon {
        order: -1;
        width: 80px;
        height: 80px;
        margin: 0;
        margin-right: 20px;
    }
    
    .ecosystem-infographic__feature p {
        margin: 0;
    }
    
    .ecosystem-infographic__feature-image {
        display: none;
    }
    
    
	.ecosystem-infographic__mobile {
		order: 1;
	}
	
	.ecosystem-infographic__b2b {
		order: 2;
	}
	
	.ecosystem-infographic__ecommerce {
		order: 3;
	}
	img.ecosystem-infographic__ecommerce-integrations {
	    display: none;
	}
	
	.ecosystem-infographic__sales-orders {
		order: 4;
	}
	
	.ecosystem-infographic__accounting {
		order: 5;
	}
    img.ecosystem-infographic__accounting-integrations {
	    display: none;
    }
	
	.ecosystem-infographic__payments {
		order: 6;
	}
	.ecosystem-infographic__payment-screen {
	    display: none;
	}
	
	.ecosystem-infographic__purchase-orders {
		order: 7;
	}
	
	.ecosystem-infographic__suppliers {
		order: 8;
	}
	
	.ecosystem-infographic__warehouses {
		order: 9;
	}
	
	.ecosystem-infographic__shipping {
		order: 10;
	}
}

@media (min-width: 768px) {
    .ecosystem-infographic__feature-icon,
    img.ecosystem-infographic__feature-icon {
        display: none;
        hello: face;
    }
    
    .ecosystem-infographic-container {
      position: relative;
      width: 82vw;
      min-width: 500px;
      max-width: 1170px;
      margin: 0 auto;
      background: white;
    }

    .ecosystem-infographic-wrapper {
      position: relative;
      width: 0;
      height: 0;
      padding: 29.52128% 50%;
    }
    
    .ecosystem-infographic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .ecosystem-infographic__tradegecko {
      position: absolute;
      left: 30.21277%;
      top: 26.12613%;
      width: 25.53191%;
      height: 50.63063%;
    }
    .ecosystem-infographic__tradegecko-text,
    p.ecosystem-infographic__tradegecko-text {
      position: absolute;
      bottom: 81.85053%;
      right: 68.75%;
      color: #1c4561;
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    .ecosystem-infographic__purchase-orders {
      position: absolute;
      left: 55.85106%;
      top: 6.30631%;
      width: 7.02128%;
      height: 15.31532%;
    }
    
    .ecosystem-infographic__purchase-orders-text,
    p.ecosystem-infographic__purchase-orders-text {
      position: absolute;
      bottom: 0;
      left: 100%;
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
    }
    .ecosystem-infographic__arrows {
      position: absolute;
      top: 8.10811%;
      left: 17.55319%;
      width: 74.46809%;
      height: 88.10811%;
      pointer-events: none;
    }
    .ecosystem-infographic__payment {
      position: absolute;
      top: 29.72973%;
      left: 6.91489%;
      height: 23.42342%;
      width: 18.08511%;
    }
    .ecosystem-infographic__payment-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 38.23529%;
    }
    .ecosystem-infographic__payment-screen {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 80%;
      height: auto;
    }
    .ecosystem-infographic__payment-text,
    p.ecosystem-infographic__payment-text {
      position: absolute;
      bottom: 0;
      right: 80%;
      text-align: right;
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    .ecosystem-infographic__accounting {
      position: absolute;
      top: 71.17117%;
      left: 10.42553%;
      width: 14.46809%;
      height: 18.1982%;
    }
    .ecosystem-infographic__accounting-integrations,
    .ecosystem-infographic .ecosystem-infographic__accounting-integrations {
      position: absolute;
      bottom: 0;
      left: 100%;
      height: 24.75248%;
      width: auto;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__accounting-text,
    p.ecosystem-infographic__accounting-text {
      position: absolute;
      bottom: 0;
      right: 100%;
      text-align: right;
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    .ecosystem-infographic__ecommerce {
      position: absolute;
      left: 49.89362%;
      top: 72.61261%;
      width: 14.46809%;
      height: 18.1982%;
    }
    .ecosystem-infographic__ecommerce-integrations,
    .ecosystem-infographic .ecosystem-infographic__ecommerce-integrations {
      position: absolute;
      bottom: 37.62376%;
      right: 100%;
      height: 24.75248%;
      width: auto;
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    .ecosystem-infographic__ecommerce-text,
    p.ecosystem-infographic__ecommerce-text {
      position: absolute;
      bottom: 0;
      left: 100%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__b2b {
      position: absolute;
      left: 64.68085%;
      top: 58.1982%;
      width: 14.46809%;
      height: 18.1982%;
    }
    .ecosystem-infographic__b2b-text,
    p.ecosystem-infographic__b2b-text {
      position: absolute;
      bottom: 0;
      left: 100%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__sales-orders {
      position: absolute;
      left: 82.76596%;
      top: 46.66667%;
      width: 7.02128%;
      height: 15.31532%;
    }
    .ecosystem-infographic__sales-orders-text,
    p.ecosystem-infographic__sales-orders-text {
      position: absolute;
      bottom: 0;
      left: 100%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__shipping {
      position: absolute;
      left: 70.74468%;
      top: 18.01802%;
      width: 11.2766%;
      height: 16.93694%;
    }
    .ecosystem-infographic__shipping-text,
    p.ecosystem-infographic__shipping-text {
      position: absolute;
      bottom: 16.21622%;
      left: 100%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__warehouses {
      position: absolute;
      left: 62.02128%;
      top: 30.63063%;
      width: 12.02128%;
      height: 16.03604%;
    }
    .ecosystem-infographic__warehouses-text,
    p.ecosystem-infographic__warehouses-text {
      position: absolute;
      bottom: 5.61798%;
      left: 86.72566%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__mobile {
      position: absolute;
      left: 51.2766%;
      top: 46.48649%;
      width: 12.12766%;
      height: 13.51351%;
    }
    .ecosystem-infographic__mobile-text,
    p.ecosystem-infographic__mobile-text {
      position: absolute;
      bottom: 66.66667%;
      left: 73.68421%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__suppliers {
      position: absolute;
      left: 36.17021%;
      top: 3.6036%;
      width: 10.31915%;
      height: 23.78378%;
    }
    .ecosystem-infographic__suppliers-text,
    p.ecosystem-infographic__suppliers-text {
      position: absolute;
      bottom: 26.51515%;
      left: 94.84536%;
      -webkit-transform-origin: 0% 50%;
              transform-origin: 0% 50%;
    }
    .ecosystem-infographic__man-1 {
      position: absolute;
      left: 62.23404%;
      top: 87.56757%;
      width: 2.02128%;
      height: 9.72973%;
    }
    .ecosystem-infographic__lady-1 {
      position: absolute;
      left: 76.80851%;
      top: 72.97297%;
      width: 2.02128%;
      height: 9.72973%;
    }
    .ecosystem-infographic__lady-2 {
      position: absolute;
      left: 91.70213%;
      top: 59.0991%;
      width: 2.02128%;
      height: 9.72973%;
    }
    .ecosystem-infographic__transform {
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
      transition-property: opacity, -webkit-transform, -webkit-filter;
      transition-property: transform, filter, opacity;
      transition-property: transform, filter, opacity, -webkit-transform, -webkit-filter;
      -webkit-transition-timing-function: ease-out;
              transition-timing-function: ease-out;
      -webkit-transition-duration: 0.1s;
              transition-duration: 0.1s;
      -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s;
    }
    .ecosystem-infographic__transform--iso {
      -webkit-transform: rotate(-30deg) skewX(-30deg) scaleY(0.86);
              transform: rotate(-30deg) skewX(-30deg) scaleY(0.86);
    }
    .ecosystem-infographic__transform svg {
      position: absolute;
    }
    .ecosystem-infographic__transform .ecosystem-infographic__transform-fade {
      padding: 10px;
      margin: 0;
      margin-bottom: -10px;
      white-space: pre;
      background: rgba(255, 255, 255, 0.8);
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
      -webkit-transition: -webkit-transform 0.1s;
      transition: -webkit-transform 0.1s;
      transition: transform 0.1s;
      transition: transform 0.1s, -webkit-transform 0.1s;
      pointer-events: none;
    }
    .ecosystem-infographic p {
      font-size: 12.30769px;
      line-height: 1.4;
      white-space: pre;
    }
    .ecosystem-infographic__transform--half p {
      font-size: 13.91304px;
    }
    .ecosystem-infographic:hover .ecosystem-infographic__transform, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform {
      opacity: 0.9;
      -webkit-transition-duration: 0.1s;
              transition-duration: 0.1s;
    }
    
    .ecosystem-infographic:hover .ecosystem-infographic__transform:hover, .ecosystem-infographic:hover .ecosystem-infographic__transform.mobile-hovering, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform:hover, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform.mobile-hovering {
      z-index: 1;
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
      -webkit-filter: grayscale(0);
              filter: grayscale(0);
      -webkit-transition-delay: 0s;
              transition-delay: 0s;
      opacity: 1;
      -webkit-transition: opacity ease, -webkit-transform cubic-bezier(0.3, 0.01, 0.31, 0), -webkit-filter ease;
      transition: opacity ease, -webkit-transform cubic-bezier(0.3, 0.01, 0.31, 0), -webkit-filter ease;
      transition: transform cubic-bezier(0.3, 0.01, 0.31, 0), filter ease, opacity ease;
      transition: transform cubic-bezier(0.3, 0.01, 0.31, 0), filter ease, opacity ease, -webkit-transform cubic-bezier(0.3, 0.01, 0.31, 0), -webkit-filter ease;
      -webkit-transition-duration: 0.1s;
              transition-duration: 0.1s;
    }
    .ecosystem-infographic:hover .ecosystem-infographic__transform:hover .ecosystem-infographic__transform-fade, .ecosystem-infographic:hover .ecosystem-infographic__transform.mobile-hovering .ecosystem-infographic__transform-fade, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform:hover .ecosystem-infographic__transform-fade, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform.mobile-hovering .ecosystem-infographic__transform-fade {
      -webkit-transition-delay: 0.2s;
              transition-delay: 0.2s;
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
      pointer-events: auto;
    }
    .ecosystem-infographic:hover .ecosystem-infographic__transform--half:hover, .ecosystem-infographic:hover .ecosystem-infographic__transform--half.mobile-hovering, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform--half:hover, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform--half.mobile-hovering {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
    .ecosystem-infographic:hover .ecosystem-infographic__transform--iso > svg, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform--iso > svg {
      -webkit-transition: -webkit-filter 0.2s;
      transition: -webkit-filter 0.2s;
      transition: filter 0.2s;
      transition: filter 0.2s, -webkit-filter 0.2s;
    }
    .ecosystem-infographic:hover .ecosystem-infographic__transform--iso:hover > svg, .ecosystem-infographic:hover .ecosystem-infographic__transform--iso.mobile-hovering > svg, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform--iso:hover > svg, .ecosystem-infographic.mobile-hovering .ecosystem-infographic__transform--iso.mobile-hovering > svg {
      -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
              filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    }
}

@media (min-width: 1600px) {
    .ecosystem-infographic-container {
        margin: 0 -5vw;
        width: auto;
        max-width: none;
    }
}