/* Projects page */

.project-header {
  height: 70vh;
  /* background: #121213; */
  width: 100vw;
}

@media (min-width: 768px) {
  .project-header {
    height: 90vh;
  }

}

.vertical-line-container {
    position: relative;
    z-index: 20
}

.vertical-line {
  height: 100vh;
  width: 1px;
  position: fixed;
}
.vertical-line.line-left { left: 10px }
.vertical-line.line-right { right: 10px }

.vertical-line,
.MaA-horizontal-line {
  background-color: #616161;
}

.MaA-horizontal-line {
  height: 1px !important;
  width: 100vw;
  margin: 0
}

.MaA-box-line {
  height: 1px;
  width: 20px;
  background-color: #616161;
  position: absolute;
}

.MaA-box-line.lineLeft {
  top: 50%;
  left: -10px;
}
.MaA-box-line.lineRight {
  top: 50%;
  right: -10px;
}
.MaA-box-line.lineTop {
  left: 50%;
  top: 0px;
  transform: rotate(90deg)
}
.MaA-box-line.lineBottom {
  left: 50%;
  bottom: 0px;
  transform: rotate(90deg)
}

.project-category-item {
  position: relative
}

.MaA-crosshair-contianer.crosshair-container-top {
  position: absolute;
  top: 0;
  right: calc(50% + 10px);
}

.MaA-crosshair-contianer.crosshair-container-bottom {
  position: absolute;
  bottom: 0;
  right: calc(50% + 10px);
}

.MaA-crosshair {
  height: 1px;
  width: 20px;
  background-color: #616161;
  position: absolute;
}

.MaA-crosshair.crosshair-horizonstal {
  transform: rotate(90deg)
}


.MaA-horizontal-line.middle-line {
  margin: 30px 0;
}

@media (min-width: 768px) {
  .vertical-line.line-left { left: 20px }
  .vertical-line.line-right { right: 20px }

  .MaA-box-line { width: 30px; }
  .MaA-box-line.lineLeft { left: -15px; }
  .MaA-box-line.lineRight { right: -15px; }
}

@media (min-width: 1000px) {
  .vertical-line.line-left { left: 30px }
  .vertical-line.line-right { right: 30px }

  .MaA-box-line { width: 50px; }
  .MaA-box-line.lineLeft { left: -20px; }
  .MaA-box-line.lineRight { right: -20px; }

}


@media (min-width: 1400px) {
  .vertical-line.line-left { left: calc( (100vw - 1340px) /2 ) }
  .vertical-line.line-right { right:  calc( (100vw - 1340px) /2 )  }

}

.design-and-branding #design-and-branding-header {display: block}
.web-and-digital #web-and-digital-header {display: block}
.motion-and-animation #motion-and-animation-header {display: block}

.design-and-branding #web-and-digital-header,
.design-and-branding #motion-and-animation-header {display: none}
.web-and-digital #design-and-branding-header,
.web-and-digital #motion-and-animation-header {display: none}
.motion-and-animation #design-and-branding-header,
.motion-and-animation #web-and-digital-header {display: none}


#design-and-branding-header .nav-left-link img,
#design-and-branding-header .nav-right-link img {
  width: 12vw;
  min-width: 110px;
  max-width: 180px;
  transition: 0.2s ease;
  transform-origin: 100% 100%;
}

#design-and-branding-header .nav-left-link img:hover,
#design-and-branding-header .nav-right-link img:hover {
  transform: scale(1.1) rotate(2deg);
  transition: 0.3s ease;
}

#design-and-branding-header .nav-right-link img {transform-origin: 100% 100%;}
#design-and-branding-header .nav-left-link img {transform-origin: 00% 00%;}



#designAndBranding img {
  width: 100%;
  max-width: 800px;
  margin: 0 auto
}

#design-and-branding-header .featured-project-category {
  width: 100%;
}

#motion-and-animation-header .featured-project-category {
  width: 100%;
  max-width: 1000px;
  padding: 40px 20px;
  position: relative
}

#motion-and-animation-header #webAndDigital,
#motion-and-animation-header #designAndBranding {
  width: 200px;
  border: 1px solid #616161;
  padding: 27px 20px;
  text-align: center;
  background: black;
  z-index: 5000;
}

.motion-and-animation #webAndDigital,
.motion-and-animation #designAndBranding {
  transition: 0.4s ease;
}
.motion-and-animation #webAndDigital:hover,
.motion-and-animation #designAndBranding:hover {
  transition: 0.2s ease;
  transform:scale(1.08)

}

 #motion-and-animation-header h1 {
   font-family: "new-science-mono", sans-serif;
   font-weight: 500;
   font-style: normal;
 }

#motion-and-animation-header p,
#motion-and-animation-header a {
  font-family: "Fira Mono", serif;
  font-weight: 400;
  font-style: normal;
  color: white;
}

#web-and-digital-header h1 {
  font-family: "VTF MisterPixel", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: #0E22D2;
  text-align: center;
  letter-spacing: 0.8vw;
  transform: translateY(2px);
  pointer-events: none;
  font-size: clamp(18px, 3.6vw, 42px)
}

#web-and-digital-header a {
  font-family: "VTF MisterPixel", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: white;
  letter-spacing: 5px;
  display: block;
  /* border: 1px solid white; */
  width: auto
}

#web-and-digital-header #designAndBranding a {
  text-align: right;
}


@media(min-width: 1400px) {
  #web-and-digital-header h1 {
    letter-spacing: 10px;
  }
}

.web-and-digital #webAndDigital {
  background: white;
  border-radius: 3000px;
  padding: 12px 20px;
  width: fit-content;
  margin: 0 auto
}

#web-and-digital-header p {
  font-family: "Cutive Mono", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-align: center;
  max-width: 760px
}


#motion-and-animation-header #motionAndAnimation {
  position: relative
}
#motionAndAnimation h1 { transform: translate(0px, -2px)}

.motion-and-animation #motion-and-animation-header #webAndDigital.project-category-item,
.motion-and-animation #motion-and-animation-header #designAndBranding.project-category-item  {
  background:
  linear-gradient(to right, #616161 1px, transparent 1px) 0 0,
  linear-gradient(to right, #616161 1px, transparent 1px) 0 100%,
  linear-gradient(to left, #616161 1px, transparent 1px) 100% 0,
  linear-gradient(to left, #616161 1px, transparent 1px) 100% 100%,
  linear-gradient(to bottom, #616161 1px, transparent 1px) 0 0,
  linear-gradient(to bottom, #616161 1px, transparent 1px) 100% 0,
  linear-gradient(to top, #616161 1px, transparent 1px) 0 100%,
  linear-gradient(to top, #616161 1px, transparent 1px) 100% 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
border: unset
}


@media (min-width: 768px) {
  .mobile-only {display: none}
}

@media (max-width: 767px) {
  .desktop-only {display: none}
}

@media (max-width: 767px) {
  #motion-and-animation-header #motionAndAnimation {
    border: 1px solid #616161;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
  }
}


@media (min-width: 768px) {
  #motion-and-animation-header .featured-project-category {
    border: 1px solid #616161;
    margin: 0px 4vw
  }
}

#motion-and-animation-header .featured-project-category h1 {
  color: #00FFD1;
  font-size: clamp(24px, 4vw, 53px);
  font-weight: 500;
  text-align: center;

}

#motion-and-animation-header .filter-text-container p {
  font-size: clamp(13px, 2.5vw, 53px);
  line-height: 1.6;
  color: white;
  text-align: center
}

#motion-and-animation-header a { font-size: clamp(24px, 4vw, 53px) }


#motion-and-animation-header .filter-text-container {
  margin-top: 25px;
}

#design-and-branding-header .filter-text-container {
  width: 100%;
}

@media (min-width: 768px) {
  #design-and-branding-header .featured-project-category {
    padding: 0 20px;
  }

 #design-and-branding-header .project-category-container {
   padding: 0
 }

 #motion-and-animation-header .featured-project-category h1 {
   font-size: clamp(24px, 4vw, 53px);
 }

 #motion-and-animation-header .filter-text-container p {
   font-size: clamp(13px, 1.5vw, 18px);
 }

 #motion-and-animation-header a {
   font-size: clamp(18px, 1.5vw, 20px)
 }

}

.design-and-branding #ajax-load-more .container {
  max-width: unset;
  width: 100vw
}

.arrow-illustration {
  display: none;
}

.sketch-illustration {
  margin: 20px auto 0 auto;
  width: 173px;
}

@media(min-width: 768px) {
  .arrow-illustration {
    display: block;
    transform: scale(0.5);
    position: absolute;
    right: -50px;
    top: -70px;
  }

  #design-and-branding-header .filter-text-container {
    width: 100%;
    padding: 0px 0px 0px 1vw
  }
  .sketch-illustration {
    left: 22vw;
    position: absolute;
    margin: 20px 0 0 0

  }
}

@media(min-width: 950px) {
  #design-and-branding-header .filter-text-container {
    padding: 0px 0px 0px 21vw
  }
}


@media(min-width: 1100px) {
  #design-and-branding-header .filter-text-container {
    width: 547px;
    margin: 0 auto;
    padding: 0;
    right: -121px;
  }
  .sketch-illustration {
    left: 0px;
  }

}



/*.project-nav-allProjects {
  padding-top: 30px;
  display: inline
}

.project-filter-text {
  padding-top: 200px;
  text-align: center
}


.project-filter-text a,
.design-and-branding.all-projects .project-nav-allProjects a,
.motion-and-animation.all-projects .project-nav-allProjects a,
.web-and-digital.all-projects .project-nav-allProjects a,
.project-filter-text a {
  color: #00ffd166;
  font-weight: 600;
  border: 1px solid #00ffd166;
  background: #121213;
  border-radius: 200px;
  transition: 0.4s ease;
}

.project-filter-text.hover a:hover {
  color: #00ffd1;
  border: 1px solid #00ffd1;
} */

/* active state + hover of container */
/* .project-filter-text.hover .project-nav-allProjects a,
.design-and-branding .project-filter-text.hover #designAndBranding a,
.motion-and-animation .project-filter-text.hover #motionAndAnimation a,
.web-and-digital .project-filter-text.hover #webAndDigital a {
  color: #00ffd166;
  border: 1px solid #00ffd166;
  background: #121213;
}


.project-nav-allProjects a {
    font-size: 48px;
    font-weight: 600;
    padding: 3px 16px;
    margin-left: 50px;
} */

/* active state */
/* .all-projects .project-nav-allProjects a,
.design-and-branding #designAndBranding a,
.motion-and-animation #motionAndAnimation a,
.web-and-digital #webAndDigital a
 {
    background: #00ffd1;
    color: #121213;
    border: 1px solid #00ffd1;
}

.all-projects .project-filter-text.hover .project-nav-allProjects a:hover,
.design-and-branding .project-filter-text.hover #designAndBranding a:hover,
.motion-and-animation .project-filter-text.hover #motionAndAnimation a:hover,
.web-and-digital .project-filter-text.hover #webAndDigital a:hover
 {
    background: #00ffd1;
    color: #121213;
    border: 1px solid #00ffd1;
}



.project-nav-filterContainer a {
    font-size: 22px;
    padding: 5px 12px;
    margin: 0 15px
}

.project-nav-filterContainer {
  display: flex;
  justify-content: center;
  margin-top: 40px
} */


.project-category-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}



.nav-right-link, .nav-left-link { display: none }
@media(min-width: 768px) {
  .nav-right-link, .nav-left-link { display: block }
}


/* .nav-left-link {
  left: 0
}
.nav-right-link {
  right: 0
} */



.filter-text-container {
  /* max-width: 700px; */
  margin: 50px auto 0 auto;
  position: relative;
}

#design-and-branding-header .filter-intro-text {
  color: black;
  font-weight: 300
}

@media(max-width: 769px) {
  #design-and-branding-header .filter-intro-text {
    max-width: 540px;
    margin: 0 auto
  }
}

@media(min-width: 768px) {
  .motion-and-animation .filter-intro-text {
    padding: 0 20px;
  }
}

/* .motion-and-animation main * {
  pointer-events: none
} */

.motion-and-animation .hole {
  background-image: url(https://tomharrington-website.s3.eu-west-2.amazonaws.com/wp-content/uploads/2024/12/24162816/LED+screen-lr.jpg);
  background-size: cover;
  --x: 200px;
  --y: 150px;
  width: 100vw;
  height: 90vh;
  position: absolute;
  z-index: -1;
  margin-left:-20px
}

.hole::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  background-size: cover;
  z-index: 1;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  -webkit-mask-image: radial-gradient(70px at var(--x) var(--y), #00000029 0%, #000000 200%);
  mask-image: radial-gradient(70px at var(--x) var(--y), #00000029 0%, #000000 200%);
  animation: pixel-oscillate 2s ease infinite;
  opacity: 1
}


.filter-intro-text {
  color: white;
  font-size: 15.5px;
  line-height: 1.4;
  pointer-events: none
}

#web-and-digital-header .filter-intro-text {
  font-size: 16px;
}

@media (min-width: 768px) {
  .filter-intro-text {
    font-size: 18px;
  }

  #web-and-digital-header .filter-intro-text {
    font-size: 18px;
  }
}

@media (min-width: 1000px) {
  .filter-intro-text {
    font-size: 20px;
  }

  #web-and-digital-header .filter-intro-text {
    font-size: 22px;
  }
}

/* End Projects page */





/* Services */

.services-container {
  margin: 0 auto;
	text-align: center;
	padding: 40px 0;
  background: #121213;
  color: #D9D9D9;
}

.services-container li:hover {
  color: red;
}

.services-container h2 {
    font-size: 40px;
		margin-bottom: 3vw;
}

.services-container li {
    font-size: clamp(16px, 2.6vw, 20px);
		margin-bottom: 25px;
    font-weight: 400;
    transition: 0.3s ease;
    pointer-events: none;
    line-height: 1.2;
}

@media (min-width: 1200px) {
  .services-container li {
      font-size: clamp(21px, 1.8vw, 24px);
  }
}

@media (max-width: 768px) {
ul.services-ul li:nth-child(20), ul.services-ul li:nth-child(15),
ul.services-ul li:nth-child(16), ul.services-ul li:nth-child(17),
ul.services-ul li:nth-child(18), ul.services-ul li:nth-child(19)
 {
  display: none
}
}

/* .services-container li:nth-of-type(1):hover,
.services-container li:nth-of-type(7):hover,
.services-container li:nth-of-type(13):hover,
.services-container li:nth-of-type(19):hover { color: blue }

.services-container li:nth-of-type(2):hover,
.services-container li:nth-of-type(8):hover,
.services-container li:nth-of-type(14):hover,
.services-container li:nth-of-type(20):hover { color: yellow }

.services-container li:nth-of-type(3):hover,
.services-container li:nth-of-type(9):hover,
.services-container li:nth-of-type(15):hover,
.services-container li:nth-of-type(21):hover { color: green }

.services-container li:nth-of-type(4):hover,
.services-container li:nth-of-type(10):hover,
.services-container li:nth-of-type(16):hover,
.services-container li:nth-of-type(22):hover { color: pink }

.services-container li:nth-of-type(5):hover,
.services-container li:nth-of-type(11):hover,
.services-container li:nth-of-type(17):hover,
.services-container li:nth-of-type(23):hover { color: purple }

.services-container li:nth-of-type(6):hover,
.services-container li:nth-of-type(12):hover,
.services-container li:nth-of-type(18):hover,
.services-container li:nth-of-type(24):hover { color: orange } */


.services-container ul {
    column-count: 2;
}

@media (min-width: 700px) {
	.services-container ul {
	    column-count: 3;
	}
  .services-container {
      padding: 60px 0
  }

  .services-container li {
  		margin-bottom: 40px;
  }
}

@media (min-width: 1000px) {
	.services-container ul {
	    column-count: 4;
	}
  .services-container {
      padding: 100px 0
  }

  .services-container li {
      margin-bottom: 60px;
  }
}

.design-and-branding .services-container {
  background: unset;
  color: black;
}

.design-and-branding .services-title {
  background: url(https://tomharrington-website.s3.eu-west-2.amazonaws.com/wp-content/uploads/2025/01/21155940/Services.png) center center/cover no-repeat;
  background-size: 190px auto;
  width: 250px;
  height: 50px;
  margin: 0 auto 36px auto;
}

.services-title {
  margin: 0 auto 36px auto;
}

@media (min-width: 768px) {
  .design-and-branding .services-title {
    background-size: 250px auto;
    margin: 0 auto 50px auto;
  }

.services-title {
    margin: 0 auto 50px auto;
  }
}

@media (min-width: 1000px) {
  .design-and-branding .services-title {
    background-size: 280px auto;
    margin: 0 auto 70px auto;
    width: 280px;
  }
  .design-and-branding .services-title {
    margin: 0 auto 70px auto;
  }
}

.design-and-branding .services-title h2 {
  display:none;
}

/* End Services */


.no-click {
  pointer-events: none
}


/* Web and Digital */

.WaD-only { display: none }
.web-and-digital .WaD-only {display: block}

.WaD-colour-fade {background: #0e22d27d; transition: 0.5s ease;}
.WaD-colour-fade:hover {background: #0e22d200; transition: 0.5s ease}


.WaD-rounded-rectangle {
  fill-opacity: 0;
  stroke: #6775F4;
  stroke-width: 1px;
}

/* rectangle: Tom Harrington */



#WaD-site-title {
  position: absolute;
  top: 0px;
  left: -25px;
  width: 390px;
  transform: scale(0.95);
  translate: -3px 2px;
  max-width: 310px;
  transition: 0.3s ease;
  opacity: 1
}

.site-title.modal-menu-open a {
  color: white !important
}

#WaD-site-title.modal-menu-open {
  opacity: 0
}

@media (min-width: 500px) {
  #WaD-site-title {
    transform: scale(0.975);
    translate: 4px 2px;
    max-width: 333px;
  }
}

@media (min-width: 768px) {
  #WaD-site-title {
    transform: scale(0.975);
    translate: 0px 1px;
    max-width: 344px;
  }
}

@media (min-width: 1100px) {
  #WaD-site-title {
    transform: scale(1);
    translate: 0px 0px;
    max-width: 390px;
  }
}

  .WaD-rectangle-one {
    stroke-dasharray: 8 4;
  }

  .WaD-rectangle-one {
    -webkit-animation: dashOne 2s infinite linear;
    -moz-animation: dashOne 2s infinite linear;
    -o-animation: dashOne 2s infinite linear;
    animation: dashOne 2s infinite linear;
  }
  @-webkit-keyframes dashOne {
    to { stroke-dashoffset: -12; }
  }
  @-moz-keyframes dashOne {
    to { stroke-dashoffset: -12; }
  }
  @-o-keyframes dashOne {
    to { stroke-dashoffset: -12; }
  }
  @keyframes dashOne {
    to { stroke-dashoffset: -12 ; }
  }



  .site-title {position: relative;}
  ul.primary-menu {position: relative; }


  /* rectangle: Projects */

  #WaD-projects {
    position: absolute;
    top: 11px;
    right: 107px;
    width: 125px;
  }




    .WaD-rounded-rectangle.WaD-rectangle-two {
      stroke-dasharray: 12 6;
      stroke-width: 2px;
    }

    .WaD-rectangle-two {
      -webkit-animation: dashTwo 2s infinite linear;
      -moz-animation: dashTwo 2s infinite linear;
      -o-animation: dashTwo 2s infinite linear;
      animation: dashTwo 2s infinite linear;
    }
    @-webkit-keyframes dashTwo {
      to { stroke-dashoffset: -18; }
    }
    @-moz-keyframes dashTwo {
      to { stroke-dashoffset: -18; }
    }
    @-o-keyframes dashTwo {
      to { stroke-dashoffset: -18; }
    }
    @keyframes dashTwo {
      to { stroke-dashoffset: -18 ; }
    }

    /* rectangle: About */

    #WaD-about {
      position: absolute;
      top: 11px;
      right: -3px;
      width: 79px;
    }

      .WaD-rounded-rectangle.WaD-rectangle-three {
        stroke-dasharray: 12 6;
        stroke-width: 2px;
      }

      .WaD-rectangle-three {
        -webkit-animation: dashThree 2s infinite linear;
        -moz-animation: dashThree 2s infinite linear;
        -o-animation: dashThree 2s infinite linear;
        animation: dashThree 2s infinite linear;
      }
      @-webkit-keyframes dashThree {
        to { stroke-dashoffset: -18; }
      }
      @-moz-keyframes dashThree {
        to { stroke-dashoffset: -18; }
      }
      @-o-keyframes dashThree {
        to { stroke-dashoffset: -18; }
      }
      @keyframes dashThree {
        to { stroke-dashoffset: -18 ; }
      }


@media (min-width: 768px) {
  #WaD-projects {
    top: 8px;
  }

  #WaD-about {
    top: 8px;
  }
}


@media (min-width: 1100px) {
  #WaD-projects {
    top: 11px;
  }

  #WaD-about {
    top: 11px;
  }
}


      /* rectangle: Sub menu DaB */

      #WaD-sub-DaB {
        position: absolute;
        top: 59px;
        right: 27px;
        width: 205px;
      }

        .WaD-rounded-rectangle.WaD-rectangle-six {
          stroke-dasharray: 12 6;
          stroke-width: 2px;
        }

        .WaD-rectangle-six {
          -webkit-animation: dashSix 2s infinite linear;
          -moz-animation: dashSix 2s infinite linear;
          -o-animation: dashSix 2s infinite linear;
          animation: dashSix 2s infinite linear;
        }
        @-webkit-keyframes dashSix {
          to { stroke-dashoffset: 18; }
        }
        @-moz-keyframes dashSix {
          to { stroke-dashoffset: 18; }
        }
        @-o-keyframes dashSix {
          to { stroke-dashoffset: 18; }
        }
        @keyframes dashSix {
          to { stroke-dashoffset: 18 ; }
        }

        /* rectangle: Sub menu MaA */

        #WaD-sub-MaA {
          position: absolute;
          top: 109px;
          right: 19px;
          width: 213px;
        }

          .WaD-rounded-rectangle.WaD-rectangle-seven {
            stroke-dasharray: 12 6;
            stroke-width: 2px;
          }

          .WaD-rectangle-seven {
            -webkit-animation: dashSeven 2s infinite linear;
            -moz-animation: dashSeven 2s infinite linear;
            -o-animation: dashSeven 2s infinite linear;
            animation: dashSeven 2s infinite linear;
          }
          @-webkit-keyframes dashSeven {
            to { stroke-dashoffset: -18; }
          }
          @-moz-keyframes dashSeven {
            to { stroke-dashoffset: -18; }
          }
          @-o-keyframes dashSeven {
            to { stroke-dashoffset: -18; }
          }
          @keyframes dashSeven {
            to { stroke-dashoffset: -18 ; }
          }


          /* rectangle: Sub menu WaD */

          #WaD-sub-WaD {
            position: absolute;
            top: 158px;
            right: 70px;
            width: 162px;
          }

            .WaD-rounded-rectangle.WaD-rectangle-eight {
              stroke-dasharray: 12 6;
              stroke-width: 2px;
            }

            .WaD-rectangle-eight {
              -webkit-animation: dashEight 2s infinite linear;
              -moz-animation: dashEight 2s infinite linear;
              -o-animation: dashEight 2s infinite linear;
              animation: dashEight 2s infinite linear;
            }
            @-webkit-keyframes dashEight {
              to { stroke-dashoffset: 18; }
            }
            @-moz-keyframes dashEight {
              to { stroke-dashoffset: 18; }
            }
            @-o-keyframes dashEight {
              to { stroke-dashoffset: 18; }
            }
            @keyframes dashEight {
              to { stroke-dashoffset: 18 ; }
            }





  /* rectangle: Motion and Animation / Design and Branding links */

  #WaD-nav-link-left,
  #WaD-nav-link-right {
    position: absolute;
    top: -13px;
    width: 350px;
    max-width: unset;
  }

  #WaD-nav-link-left { left: -206px; }
  #WaD-nav-link-right { right: -210px; }

    .WaD-rectangle-four, .WaD-rectangle-five {
      stroke-dasharray: 8 4;
    }

    .WaD-rectangle-four, .WaD-rectangle-five {
      -webkit-animation: dashFour 2s infinite linear;
      -moz-animation: dashFour 2s infinite linear;
      -o-animation: dashFour 2s infinite linear;
      animation: dashFour 2s infinite linear;
    }
    @-webkit-keyframes dashFour {
      to { stroke-dashoffset: -12; }
    }
    @-moz-keyframes dashFour {
      to { stroke-dashoffset: -12; }
    }
    @-o-keyframes dashFour {
      to { stroke-dashoffset: -12; }
    }
    @keyframes dashFour {
      to { stroke-dashoffset: -12 ; }
    }



  .web-and-digital .project-category-item {
    transition: 0.4s ease;
  }
.web-and-digital .project-category-item:hover {
  transform: scale(1.1);
  transition: 0.2s ease;
}

.web-and-digital .project-category-item#WebAndDigital:hover {
  transform: scale(1.03);
  transition: 0.2s ease;
}

    @media(min-width: 1279px) {
      #WaD-nav-link-left,
      #WaD-nav-link-right {
        width: 260px;
        top: -14px;
      }

      #WaD-nav-link-left { left: -8px; }
      #WaD-nav-link-right { right: -11px; }
      .web-and-digital #motionAndAnimation a { letter-spacing: 4px; padding-left: 8px}

      .web-and-digital .project-category-item:hover {
        transform: scale(1.05);
        transition: 0.2s ease;
      }
    }

    @media(min-width: 1440px) {
      .web-and-digital .nav-right-link,
      .web-and-digital .nav-left-link {
        transform: scale(1.25);
      }
      .web-and-digital .nav-right-link:hover,
      .web-and-digital .nav-left-link:hover {
        transform: scale(1.35);
      }

      .web-and-digital .nav-right-link {
        right: 30px;
      }
      .web-and-digital .nav-left-link {
        left: 30px;
      }
    }

@media(min-width: 768px) {
.web-and-digital .filter-text-container {
  margin-top: 25px;
  }
}

.web-and-digital .current-menu-item a {
  font-style: italic;
  opacity: 0.3
}

.web-and-digital .primary-menu svg.sub-menu-rectangle { display: none}
.web-and-digital .primary-menu.projects-hovered svg.sub-menu-rectangle { display: block}


/* WaD thumb layouts */

.WaD-content-item{
  padding: 7vw 0
}
.flex {display: flex; justify-content: space-between}
.flex.flex-start {justify-content: flex-start}

.WaD-margin-left {margin-left: 1.3vw}
.WaD-margin-right {margin-right: 1.3vw}
.WaD-margin-bottom {margin-bottom: 1.3vw}
.WaD-margin-top {margin-top: 1.3vw}
@media (min-width: 1440px) {
  .WaD-margin-left {margin-left: 20px}
  .WaD-margin-right {margin-right: 20px}
  .WaD-margin-bottom {margin-bottom: 20px}
  .WaD-margin-top {margin-top: 20px}
}

.WaD-content-item .thumb-container.flex-direction-columns {flex-direction: column}
.WaD-content-item .thumb-container { flex-direction: row;}


.WaD-content-item {
  transform: scale(0.97);
  transition: 0.4s ease;
}
.WaD-content-item:hover{
  transform: scale(1);
  transition: 0.2 ease
}

.WaD-flex-item {
  /* -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.8); */
  /* -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.8); */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);
  transition: 0.4s ease;
}

.WaD-content-item:hover .WaD-flex-item {
  /* -webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.8);
  -moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.8); */
  /* box-shadow: 15px 15px 0px 0px rgba(0,0,0,0.3); */
  transition: 0.2s ease;

}



.WaD-custom-code-contianer {position: relative}

.WaD-content-item .thumb-container {
    width: 100%;
    height: calc((100vw - 100px)   * 0.562 );
}



.one-third {width: 33%;}
.one-third:last-child {margin-right: 0}
.two-thirds {width: 66%;}
.one-image {width: 100%; }
.one-quarter {width: 33%;}
.three-quarters {width: 67%;}

.WaD-content-item.one-quarter.thumb-container {width: 25%;}

@media (min-width: 768px) {
  .WaD-content-item .thumb-container {
      width: 100%;
      height: calc((100vw - 100px)   * 0.47 );
  }

  .one-quarter {width: 25%; }
  .three-quarters {width: 75%;}
}

@media (min-width: 1440px) {
  .WaD-content-item .thumb-container {
      height: calc(((((100vw - 1000px ) / 2) + 1000px) * 1 ) * 0.45 );
  }
}


.WaD-content-item img, .WaD-content-item video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.WaD-flex-item {
  /* background: grey; */
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 650px) {
  .WaD-flex-item {  border-radius: 12px; }
}

@media (min-width: 768px) {
  .WaD-flex-item {  border-radius: 12px; }
}

@media (min-width: 1100px) {
  .WaD-flex-item {  border-radius: 12px; }
}


.web-and-digital .alm-placeholder, .web-and-digital .work-grid-layout{
  max-width: unset
}


.WaD-item-title {
  display: flex;
  flex-direction: row;
  padding-top: 3vw;
  align-items: center;
}

.WaD-item-title h3 {
  border: 1px solid;
  padding: 1.5vw 2.3vw;
  border-radius: 100px;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 500;
  margin-right: 2vw;
  transition: 0.4s ease;
}

@media (min-width: 1400px) {
  .WaD-item-title h3 {
    padding: 20px 30px;
    margin-right: 30px;
  }
}

.WaD-item-title h3:hover {
  background: #ffffff17;
  transition: 0.1s ease;
}

.WaD-item-title h4 {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 22px);
}

.WaD-coming-soon {
  position: absolute;
    bottom: 30px;
    left: 30px;
}

.WaD-coming-soon p {
  color: white;
    border: 1px solid white;
    border-radius: 1000px;
    padding: 16px;
}

#belay-thumb-two {
  background-color: #6379f0
}
#belay-thumb-two img {
  object-fit: scale-down;
  transform: translateY(2%);
}

/* #the-blair-partnership-hp-img img {
  object-fit: contain;
  width: 100%;
  margin: 0 auto
} */

#the-blair-partnership-hp-img {
  height: 75%;
}

#woolwich-works-website-thumb {
  height: calc((100vw - 100px)   * 0.5625 )
}


@media (min-width: 1400px) {
  #woolwich-works-website-thumb { height: 728px }
}

/* */



/* About */

.about_header_section {
  background: #121213;
  padding-top: calc(15vw + 50px);
  padding-bottom: 50px;
  color: #D9D9D9;
  min-height: 60vh;
  display: flex;
  align-items: start;
}

.about_header_section h1 {
  font-weight: 500;
  font-size: clamp(29px, 7.2vw, 42px);
  max-width: 700px;
  padding-right: 5vw
}

@media (min-width: 768px) {
  .about_header_section {
    align-items: center;
    min-height: 60vh;
    padding-top: 50px;
  }
  .about_header_section h1 {
    font-size: clamp(29px, 7.2vw, 36px);
    max-width: 60vw;
    padding-right: 0px;
  }
}

@media (min-width: 1000px) {
  .about_header_section {
    min-height: 75vh;
    padding-top: 50px;
  }

  .about_header_section h1 {
    font-size: clamp(29px,3.3vw, 60px);
    max-width: 47vw;
  }
}

@media (min-width: 1400px) {


  .about_header_section h1 {
    font-size: 50px;
    max-width: 710px
  }
}


/* About ticker */

.sector-container {
  background: #121213;
  width: 100vw;
  display: flex;
  flex-direction: row;
  color: #D9D9D9;
  border-top: 1px solid #d9d9d95c;
  border-bottom: 1px solid #d9d9d95c;
  padding: 24px 0;
}

.sector-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sector-item h5 {
    /* min-width: 160px; */
    font-style: italic;
    text-align: center;
    font-weight: 300;
    font-size: clamp(16px, 1.9vw, 20px);
}

.sector-item:last-of-type {
  margin-right: 55px;
}

.ticker-tape-container {
  overflow-x: hidden;
  display: flex;
}

.ticker-tape {
  --direction: normal;
  --duration: 40s;
  --delay: 0s;
  --iteration-count: infinite;
  --play: running;
  display: flex;
  gap: 3rem;
  margin-right: 1rem;
  flex: 0 0 auto;
  align-items: center;
  animation: marquee var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}

@media (min-width: 768px) {
  .ticker-tape {
    gap: 5rem;

  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}



.about-services-container {
  background: #121213;
  padding: 100px 0;
  color: #9f9fa0;
}


.service_category.active,
.service_category.active.hovered,
.service_category.hovered
 {
  color: white;
}

.service_category.active .button-1,
.service_category.active.hovered .button-1,
.service_category.hovered .button-1,
.service_category.active .button-2,
.service_category.active.hovered .button-2,
.service_category.hovered .button-2 {
  background-color: white
}

.about_subheadline p, .clients-container h4 {
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 36px);
  padding-bottom: calc(4vw + 20px);
}

.about_service_title h2 {
  font-weight: 500;
  font-size: clamp(33px, 4vw, 50px);
  padding-bottom: 10px;
}






.about_service_title p {
  font-weight: 400;
  font-size: clamp(17px, 4vw, 25px);
}

.services_list h5 {
  font-weight: 500;
  font-size: 25px;
  padding: 10px 0
}

.services_list p {
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px)
}

.service_category {
  padding-bottom: 20px;
  position: relative;
  height: 70px;
  overflow: hidden;
  margin-bottom: 30px;
  cursor: default;
}

.service_category.active {
  height: 540px;
  margin-bottom: 30px;
  padding-bottom: 50px;
}

.service_category,
.service_category .about_service_title p,
.service_category .services_list {
  transition: 0.4s ease;
}



.service_category .about_service_title p,
.service_category .services_list {
  opacity: 0;
  transform: translateY(0px)
}

.service_category .about_service_title p {
  line-height: 1.4
}

.service_category.active .about_service_title p,
.service_category.active .services_list {
  opacity: 1;
  transform: translateY(20px)
}


.about_service_item_container {
  padding-left: 40px;
}

.services_list {
  padding: 30px 0;
  width: 100%
}

.about_service_item {
  padding: 10px 0
}

.about_service_title {
  max-width: 100vw;
}

.services-list-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.about_service_item {
  width: 50%;
}

@media (min-width: 600px) {
  .about_service_item {
    width: 25%;
  }
}


@media (min-width: 1000px) {
  .service_category {
    display:flex;
    flex-direction: row;
  }

  .about_service_title h2 {
    padding-bottom: 20px;
  }

  .service_category.active {
    height: 380px;
    margin-bottom: 60px;
    padding-bottom: 60px;
  }

  .about_service_item_container {
    padding-left: 40px;
    display: flex;
  }


  .about_service_item {
    width: 50%;
  }

  .about_service_title {
    max-width: calc(50vw - 40px);
    margin-top: -0.5vw;
  }

  .services_list {
    padding: 0px 30px;
    border-left: 1px solid #d9d9d95c;
    margin-left: 80px
  }

  .services_list h5 {
    padding: 0 0 20px 0;
  }
}


@media (min-width: 1350px) {
    .about_service_title {
      margin-top: -8px;
    }
}

.service-plus-button {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 6px;
  transition: 0.4s ease
}



.service_category.active .service-plus-button {
  transform: scale(1) rotate(180deg);
  transition: 0.6s ease;
}


.button-1, .button-2 {
  background: #D9D9D9;
  width: 2px;
  height: 26px;
  position: absolute;
  transition: 0.6s ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  opacity 1;
}

.button-2 {
  transform: rotate(90deg) translateY(-13px);
}

.button-1 {
  transform: rotate(0deg) translateX(13px);
}

.service_category.active .button-1 {
  clip-path: polygon(48% 0, 52% 0, 252% 100%, 48% 100%);
  opacity: 0
}



.clients-container {
  background: #121213;
  padding-top: 50px;
  padding-bottom: 100px;
  color: #D9D9D9
}

.clients-group {
  border-top: 1px solid #d9d9d95c;
  padding-top: 100px;
}

.client-image-grid-container {
  display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10vw;

}

.client-item img {
  width: 100%;
  object-fit: cover;
}

.client-item {
  width: 100%;
    padding: 0px;
    margin: auto 0px;
    transition: 0.5s ease;
    opacity: 0.6
}

.client-item:hover {
  transform:scale(1.05);
  transition: 0.2s ease;
  opacity: 1;
}

.client-item:nth-child(19),
.client-item:nth-child(20)
 {display:none}

@media (min-width: 600px) {
  .client-image-grid-container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 7vw;
  }

  .client-item:nth-child(19),
  .client-item:nth-child(20)
   {display:block}


}


@media (min-width: 768px) {
  .client-image-grid-container {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 7vw;
        grid-row-gap: 5.5vw
  }
}

@media (min-width: 1200px) {
  .client-image-grid-container {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 7vw;
        grid-row-gap: 5.5vw
  }
  .client-image-grid-container #Esse {display: none}
  .client-image-grid-container #Belay {display: none}

  .clients-container {
    padding-bottom: 150px;

  }
}



.client-image-grid-container #M-and-S-Bank img,
.client-image-grid-container #Liberty-in-North-Korea img,
.client-image-grid-container #Mastercard img {
  padding: 1vw
}

.client-image-grid-container #the-chase img {
  padding: 0.3vw
}

.client-image-grid-container #plates img,
.client-image-grid-container #Just-Eat img,
.client-image-grid-container #AWS img {
  padding: 1.4vw
}

.client-image-grid-container #Woolwich-Works img {
  transform:scale(1.2)
}

.client-image-grid-container #BBFC img {
  padding: 0.7vw
}

@media (min-width: 1440px) {
  .client-image-grid-container {
        grid-column-gap: 100px;
        grid-row-gap: 75px;
  }

  .client-image-grid-container #M-and-S-Bank img,
  .client-image-grid-container #Liberty-in-North-Korea img,
  .client-image-grid-container #Mastercard img {
    padding: 14px
  }

  .client-image-grid-container #the-chase img {
    padding: 4px
  }

  .client-image-grid-container #plates img,
  .client-image-grid-container #Just-Eat img,
  .client-image-grid-container #AWS img {
    padding: 20px
  }

  .client-image-grid-container #Woolwich-Works img {
    transform:scale(1.2)
  }

  .client-image-grid-container #BBFC img {
    padding: 10px
  }

}

.about .current_page_item {
  border: unset;
}
.about .current_page_item a {
  /* border: 1px solid white !important */
  background: white;
  color: black !important;
}

.DaB-belay-container {
  position: relative;
  margin-top: 10vh;
  margin-left: 10vh
}
.scroll-speed-item {
  width: 20vw;
  height: 20vw;
  background: grey;
  position: absolute;
}

.scroll-speed-item:nth-child(1) {
  background: red;
  top: 15vh;
  left: 15vh
}

.scroll-speed-item:nth-child(2) {
  background: blue;
  top: 30vh;
  left: 30vh
}


.credits h3 {
  font-size: 15px;
  color: #838383;
  font-weight: 400
}

.credits {
  width: fit-content;
  margin-right: auto;
  margin-left: 0px;
}

.credits h3, .credit-title, a.credit-title { color: #838383 }

.credit-name, a.credit-name { color: black; }

.credit-name, .credit-title {
  font-weight: 500;
  font-size: 16px;
}

.credit-item, .credits h3 {
  padding-bottom: 10px;
}


@media (min-width: 768px) {
  .credits h3 {
    font-size: 16px;
  }

  .credit-name, .credit-title {
    font-size: 18px;
  }
}


@media (min-width: 1000px) {

}


@media (min-width: 1200px) {

}











/* */