/* Hero replicas of the old Revolution Slider / LayerSlider heroes.
   Generated by tools/gen_heroes.py (2026-10-26) from the live heroes; the
   per-hero rules are scoped to .eko4-hero-<page>. Shared model: */

.eko4-hero { position: relative; overflow: hidden; width: 100%;
  height: calc(var(--eko4-hero-gh) * var(--eko4-hero-s, 1) * 1px); }
.eko4-hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.eko4-hero-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.eko4-hero-grid { position: absolute; top: 0;
  left: calc((100% - var(--eko4-hero-gw) * var(--eko4-hero-s, 1) * 1px) / 2);
  width: calc(var(--eko4-hero-gw) * 1px); height: calc(var(--eko4-hero-gh) * 1px);
  transform: scale(var(--eko4-hero-s, 1)); transform-origin: 0 0; }
.eko4-hl-wrap { position: absolute; }
.eko4-hero:not(.eko4-hero-rev) .eko4-hl { position: relative; margin: 0; }
.eko4-hero-waiting .eko4-hl, .eko4-hero-waiting .eko4-ch { opacity: 0; }

/* Revolution Slider heroes: no scaled grid -- normal-pages.js sizes each
   layer and places it in px from the hero's top left, as the slider did,
   and sets the hero's height. */
.eko4-hero-rev .eko4-hero-grid { left: 0; width: 100%; height: 100%; transform: none; }

@keyframes eko4-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eko4-hero-up { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes eko4-hero-fromleft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes eko4-hero-fromright { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes eko4-hero-ls-in { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }

/* hero: about-us */
.eko4-hero-about-us .eko4-hero-bg { background-image: url("/wp-content/uploads/2015/03/MediaCityUK-day-time12.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-about-us.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) 500ms both; }

/* hero: blog */
.eko4-hero-blog .eko4-hero-bg { background-image: url("/wp-content/uploads/2015/03/MediaCityUK-day-time12.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-blog.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-fromleft 800ms cubic-bezier(0.23, 1, 0.32, 1) 1100ms both; }

/* hero: developers */
.eko4-hero-developers .eko4-hero-bg { background-image: url("/wp-content/uploads/2015/03/testimonials-background2.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.eko4-hero-developers .eko4-hl-1 { left: 525.00px; top: 250.00px; }
.eko4-hero-developers .eko4-hl-1 > .eko4-hl { font-size: 42px; line-height: normal; font-family: Helvetica, "Segoe UI", Arial, sans-serif; font-weight: 600; color: rgb(235, 49, 54); white-space: nowrap; text-align: center; }
.eko4-hero-developers.is-ready .eko4-hl-1 > .eko4-hl { animation: eko4-hero-ls-in 1000ms cubic-bezier(0.86, 0, 0.07, 1) 300ms both; }
.eko4-hero-developers .eko4-hl-2 { left: 582.50px; top: 190.00px; }
.eko4-hero-developers .eko4-hl-2 > .eko4-hl { font-size: 42px; line-height: normal; font-family: Helvetica, "Segoe UI", Arial, sans-serif; font-weight: 600; color: rgb(255, 255, 255); white-space: nowrap; text-align: center; }
.eko4-hero-developers.is-ready .eko4-hl-2 > .eko4-hl { animation: eko4-hero-ls-in 1000ms cubic-bezier(0.86, 0, 0.07, 1) 0ms both; }

/* hero: digital-marketing */
.eko4-hero-digital-marketing .eko4-hero-bg { background-image: url("/wp-content/uploads/2014/04/bg1.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-2 .eko4-hl { animation: eko4-hero-fromright 800ms cubic-bezier(0.86, 0, 0.07, 1) 2000ms both; }
@keyframes eko4-digital-marketing-loop-3 { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
.eko4-hero-digital-marketing.is-ready .eko4-hl-3 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-digital-marketing-loop-3 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3300ms infinite alternate both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-3 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2500ms both; }
@keyframes eko4-digital-marketing-loop-4 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.eko4-hero-digital-marketing.is-ready .eko4-hl-4 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-digital-marketing-loop-4 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3400ms infinite alternate both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-4 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2600ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-5 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 4900ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-6 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 5400ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-7 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.23, 1, 0.32, 1) 3100ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-8 .eko4-hl { animation: eko4-hero-fromleft 800ms cubic-bezier(0.23, 1, 0.32, 1) 3600ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-9 .eko4-hl { animation: eko4-hero-fade 700ms cubic-bezier(0.23, 1, 0.32, 1) 4100ms both; }
.eko4-hero-digital-marketing.is-ready .eko4-hl-10 .eko4-hl { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) 4850ms both; }

/* hero: home */
.eko4-hero-home.is-ready .eko4-hl-1 .eko4-ch { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) both; }
.eko4-hero-home.is-ready .eko4-hl-2 .eko4-hl { animation: eko4-hero-fade 1000ms cubic-bezier(0.77, 0, 0.175, 1) 6200ms both; }
.eko4-hero-home.is-ready .eko4-hl-3 .eko4-hl { animation: eko4-hero-fade 1000ms cubic-bezier(0.77, 0, 0.175, 1) 7200ms both; }

/* hero: internship */
.eko4-hero-internship .eko4-hero-bg { background-image: url("/wp-content/uploads/2015/03/testimonials-background2.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.eko4-hero-internship .eko4-hl-1 { left: 538.00px; top: 250.00px; }
.eko4-hero-internship .eko4-hl-1 > .eko4-hl { font-size: 42px; line-height: normal; font-family: Helvetica, "Segoe UI", Arial, sans-serif; font-weight: 600; color: rgb(235, 49, 54); white-space: nowrap; text-align: center; }
.eko4-hero-internship.is-ready .eko4-hl-1 > .eko4-hl { animation: eko4-hero-ls-in 1000ms cubic-bezier(0.86, 0, 0.07, 1) 300ms both; }
.eko4-hero-internship .eko4-hl-2 { left: 582.50px; top: 190.00px; }
.eko4-hero-internship .eko4-hl-2 > .eko4-hl { font-size: 42px; line-height: normal; font-family: Helvetica, "Segoe UI", Arial, sans-serif; font-weight: 600; color: rgb(255, 255, 255); white-space: nowrap; text-align: center; }
.eko4-hero-internship.is-ready .eko4-hl-2 > .eko4-hl { animation: eko4-hero-ls-in 1000ms cubic-bezier(0.86, 0, 0.07, 1) 0ms both; }

/* hero: responsive-web-design */
.eko4-hero-responsive-web-design .eko4-hero-bg { background-image: url("/wp-content/uploads/2014/04/bg1.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-2 .eko4-hl { animation: eko4-hero-fromright 800ms cubic-bezier(0.86, 0, 0.07, 1) 2000ms both; }
@keyframes eko4-responsive-web-design-loop-3 { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-3 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-responsive-web-design-loop-3 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3300ms infinite alternate both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-3 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2500ms both; }
@keyframes eko4-responsive-web-design-loop-4 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-4 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-responsive-web-design-loop-4 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3400ms infinite alternate both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-4 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2600ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-5 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 4900ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-6 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 5400ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-7 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.23, 1, 0.32, 1) 3100ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-8 .eko4-hl { animation: eko4-hero-fromleft 800ms cubic-bezier(0.23, 1, 0.32, 1) 3600ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-9 .eko4-hl { animation: eko4-hero-fade 700ms cubic-bezier(0.23, 1, 0.32, 1) 4100ms both; }
.eko4-hero-responsive-web-design.is-ready .eko4-hl-10 .eko4-hl { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) 4800ms both; }

/* hero: sales */
.eko4-hero-sales .eko4-hero-bg { background-image: url("/wp-content/uploads/2015/03/testimonials-background2.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.eko4-hero-sales .eko4-hl-1 { left: 585.00px; top: 250.00px; }
.eko4-hero-sales .eko4-hl-1 > .eko4-hl { font-size: 42px; line-height: normal; font-family: Helvetica, "Segoe UI", Arial, sans-serif; font-weight: 600; color: rgb(235, 49, 54); white-space: nowrap; text-align: center; }
.eko4-hero-sales.is-ready .eko4-hl-1 > .eko4-hl { animation: eko4-hero-ls-in 1000ms cubic-bezier(0.86, 0, 0.07, 1) 300ms both; }
.eko4-hero-sales .eko4-hl-2 { left: 582.50px; top: 190.00px; }
.eko4-hero-sales .eko4-hl-2 > .eko4-hl { font-size: 42px; line-height: normal; font-family: Helvetica, "Segoe UI", Arial, sans-serif; font-weight: 600; color: rgb(255, 255, 255); white-space: nowrap; text-align: center; }
.eko4-hero-sales.is-ready .eko4-hl-2 > .eko4-hl { animation: eko4-hero-ls-in 1000ms cubic-bezier(0.86, 0, 0.07, 1) 0ms both; }

/* hero: urgent-website-fix-service */
.eko4-hero-urgent-website-fix-service .eko4-hero-bg { background-image: url("/wp-content/uploads/2014/04/bg1.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-2 .eko4-hl { animation: eko4-hero-fromright 800ms cubic-bezier(0.86, 0, 0.07, 1) 2000ms both; }
@keyframes eko4-urgent-website-fix-service-loop-3 { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-3 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-urgent-website-fix-service-loop-3 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3300ms infinite alternate both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-3 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2500ms both; }
@keyframes eko4-urgent-website-fix-service-loop-4 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-4 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-urgent-website-fix-service-loop-4 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3400ms infinite alternate both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-4 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2600ms both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-5 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 4900ms both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-6 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 5400ms both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-7 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.23, 1, 0.32, 1) 3100ms both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-8 .eko4-hl { animation: eko4-hero-up 300ms cubic-bezier(0.23, 1, 0.32, 1) 4430ms both; }
.eko4-hero-urgent-website-fix-service.is-ready .eko4-hl-9 .eko4-hl { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) 4830ms both; }

/* hero: website-audit */
.eko4-hero-website-audit .eko4-hero-bg { background-image: url("/wp-content/uploads/2014/04/bg1.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-website-audit.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms both; }
.eko4-hero-website-audit.is-ready .eko4-hl-2 .eko4-hl { animation: eko4-hero-fromright 800ms cubic-bezier(0.86, 0, 0.07, 1) 2000ms both; }
@keyframes eko4-website-audit-loop-3 { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
.eko4-hero-website-audit.is-ready .eko4-hl-3 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-website-audit-loop-3 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3300ms infinite alternate both; }
.eko4-hero-website-audit.is-ready .eko4-hl-3 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2500ms both; }
@keyframes eko4-website-audit-loop-4 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.eko4-hero-website-audit.is-ready .eko4-hl-4 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-website-audit-loop-4 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3400ms infinite alternate both; }
.eko4-hero-website-audit.is-ready .eko4-hl-4 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2600ms both; }
.eko4-hero-website-audit.is-ready .eko4-hl-5 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 4900ms both; }
.eko4-hero-website-audit.is-ready .eko4-hl-6 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 5400ms both; }
.eko4-hero-website-audit.is-ready .eko4-hl-7 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.23, 1, 0.32, 1) 3100ms both; }
.eko4-hero-website-audit.is-ready .eko4-hl-8 .eko4-hl { animation: eko4-hero-fade 700ms cubic-bezier(0.23, 1, 0.32, 1) 4100ms both; }
.eko4-hero-website-audit.is-ready .eko4-hl-9 .eko4-hl { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) 4900ms both; }

/* hero: website-support-maintenance */
.eko4-hero-website-support-maintenance .eko4-hero-bg { background-image: url("/wp-content/uploads/2014/04/bg1.jpg"); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-1 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.77, 0, 0.175, 1) 1500ms both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-2 .eko4-hl { animation: eko4-hero-fromright 800ms cubic-bezier(0.86, 0, 0.07, 1) 2000ms both; }
@keyframes eko4-website-support-maintenance-loop-3 { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-3 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-website-support-maintenance-loop-3 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3300ms infinite alternate both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-3 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2500ms both; }
@keyframes eko4-website-support-maintenance-loop-4 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-4 > .tp-loop-wrap { transform-origin: 50% 50%; animation: eko4-website-support-maintenance-loop-4 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3400ms infinite alternate both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-4 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 2600ms both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-5 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 4900ms both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-6 .eko4-hl { animation: eko4-hero-fade 800ms cubic-bezier(0.86, 0, 0.07, 1) 5400ms both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-7 .eko4-hl { animation: eko4-hero-up 800ms cubic-bezier(0.23, 1, 0.32, 1) 3100ms both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-8 .eko4-hl { animation: eko4-hero-up 300ms cubic-bezier(0.23, 1, 0.32, 1) 5400ms both; }
.eko4-hero-website-support-maintenance.is-ready .eko4-hl-9 .eko4-hl { animation: eko4-hero-fade 300ms cubic-bezier(0.77, 0, 0.175, 1) 5820ms both; }