@charset "UTF-8";

html {
  height: 100%;
}
body {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  margin: 0;padding: 0;
  color: #FFFFFF;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
spline-viewer {
  position: absolute;
  left: 0;
  top: -200px;
  width: 100vw;
  height: calc(100vh + 150px);
  z-index: 12;
  opacity: 1;
  mix-blend-mode: overlay;
}
a {
  text-decoration: none;
  font-weight: 600;
  color:#FFFFFF;
}
h1 {
  font-size: 6em;
  line-height: 1em;
  font-weight: 500;
  margin: 0;
  letter-spacing: 9px;
}
h2 {
  font-size: 2.3em;
  line-height: 3rem; 
  font-weight: 400;
  margin: 131px 0 0;
}
ul {margin: 0 0 0 -18px;}
svg {
  overflow: visible;
  display: block;
  margin: 0 auto;
}
#speedy-button {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 100px;
  z-index: 999999;
  cursor: pointer;
  animation-name: speedyBounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transition: all .25s ease;
  transform: none;
  transform-origin: center center;
  opacity: 0; visibility: hidden;
  top: -50px;
}

#speedy-button img {width:100%;height:auto;}

@keyframes speedyBounce {
  0% {transform: scale(1)}
  5% {transform: scale(1.1)}
  10% {transform: scale(1)}
  20% {transform: scale(1.25)}
  30% {transform: scale(1)}
  100% {transform: scale(1)}
}

@-webkit-keyframes fadein {from { opacity: 0;} to { opacity: 1; }}
@keyframes fadein {from { opacity: 0;} to { opacity: 1; }}
@-moz-keyframes fadein {from { opacity: 0;} to { opacity: 1; }}
@-ms-keyframes fadein {from { opacity: 0;} to { opacity: 1; }}

.container {
  background: #FFFFFF;
  width: 100%;
  position:relative;
  text-align: center;
  z-index: 2;
}

.background-container {
  width: 100%;height: 100vh;
  position: absolute;
  overflow: hidden;
  text-align: center;
  z-index: 2;
  top: 0;left: 0;
  background: linear-gradient(-45deg, #ea5518, #E60079, #23A6D5, #83bc25);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

.intro-page #arrow {
  position: absolute;
  bottom: 20px;
  width: 45px;
  left: 50%;
  transform: translateX(-50%);
  animation-name: bounceArrow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes bounceArrow {
  0%{bottom: 20px;}
  50%{bottom: 45px;}
  100%{bottom: 20px;}
}

.fixed {
  position: fixed !important;
}

body.fixed {
  position: fixed !important;
  top: 0;left: 0;bottom: 0;right: 0;
  width: 100%;height: 100%;
}

.back-to-top {
  position: fixed;
  top: 20px;right: 20px;
  background: linear-gradient(90deg, #729fcd, #cecfe9);
  width: 50px;height: 50px;
  border-radius: 100%;
  z-index: 999;
  font-weight: 600;
  font-size: 0.8em;
  line-height: 1em;
  box-sizing: border-box;
  padding: 11px 0 0;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}

.main-logo {
  left: 25px;top: 25px;
  width: 140px;height: 60px;
  z-index: 80;
  -webkit-backface-visibility: hidden;
  position: absolute;
  transition: opacity .4s;
}

.main-logo .black {
  background-image: url('../images/penknife-logo-black.svg');
  background-repeat: no-repeat;
  opacity: 1;
  position: absolute;
  top: 0;left: 0;
  width: 100%;height: 100%;
  display: none;
}

.main-logo .white {
  background-image: url('../images/penknife-logo-white.svg');
  background-repeat: no-repeat;
  position: absolute;
  top: 0;left: 0;
  width: 100%;height: 100%;
  visibility: hidden;opacity: 0;
}

.main-logo:after, .main-logo:before {
  position: absolute;
  width: 100%;height: 100%;
  background-size: 100% 100%;
  transition: opacity .4s;
}

.intro-page {
  width: 100%;height: 100vh;
  position: relative;
  text-align: center;
  z-index: 10;
  top: 0;left: 0;
  box-sizing: border-box;
  padding: 0 13em;
}
.content {
  width: 600px;
  height: 310px;
  position: relative;
  top: 50%;left: 50%;
  transform: translate(-50%,-50%);
}
.intro--copy {
  font-size: 1.5em;
  line-height: 1.3em;
  max-width: 100%;
  font-weight: 300;
  visibility: hidden;
}
.content.one {visibility: hidden;opacity: 0;}

#introtext, #imctext {
  position: absolute;
  width: 100%;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  box-sizing: border-box;
  font-weight: 300;
  line-height: 1.3em;
}

#imctext {
  opacity: 0;
  visibility: hidden;
}

.text--slider--container {
  position: relative;
  height: 100px;
  top: 40px;left: 50%;
  transform: translateX(-50%);
}

.text--slider--container svg {
  position: absolute;
  top: 0;left: 50%;
  transform: translateX(-50%);
}

.copy--slider--container {
  width: 600px;
  position: relative;
  height: auto;
  margin: 0 auto;
  top: 0;
  font-size: 1em;
}

.intro--copy {position: absolute;top: 90px;}

.svg--styles path {
  fill:#FFFFFF;
  stroke:#FFFFFF;
  stroke-width:1px;
  stroke-miterlimit:10;
}

.radial--circle {
  position:absolute;
  border-radius: 100%;
  width: 1010px;height: 1010px;
  -webkit-animation: radialanimation 5s infinite ease-out;
  -moz-animation: radialanimation 5s infinite ease-out;
  -ms-animation: radialanimation 5s infinite ease-out;
  animation: radialanimation 5s infinite ease-out;
  animation-delay: 5s;
  z-index: -999;
  transform: translate(-50%, -50%) scale(0);
}

.radial--circle::after {
  content: '';
  background: #1f1f1f;
  border-radius: 100%;
  width: 990px;height: 990px;
  position: absolute;
  left: 50%;top: 50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes radialanimation {
  0%  {transform: translate(-50%, -50%) scale(0);opacity: 0;}
  30% {opacity: 0.3;}
  100% {transform: translate(-50%, -50%) scale(1);opacity: 0;}
}

@-moz-keyframes radialanimation {
  0%  {transform: translate(-50%, -50%) scale(0);opacity: 0;}
  30% {opacity: 0.3;}
  100% {transform: translate(-50%, -50%) scale(1);opacity: 0;}
}

@-ms-keyframes radialanimation {
  0%  {transform: translate(-50%, -50%) scale(0);opacity: 0;}
  30% {opacity: 0.3;}
  100% {transform: translate(-50%, -50%) scale(1);opacity: 0;}
}

.circle1 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation: 2s;
  top:50%;left:50%;
  z-index: -999;
  background: linear-gradient(-45deg, #E60079, #e40420);
}
.circle2 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -ms-animation: 2.5s;
  animation-delay: 2.5s;
  top:50%;left:50%;
  z-index: -999;
  background: linear-gradient(-45deg, #f28c01, #ea5518);
}
.circle3 {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation: 3s;
  animation-delay: 3s;
  top:50%;left:50%;
  z-index: -999;
  background: linear-gradient(-45deg, #83bc25, #00993e);
}
.circle4 {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -ms-animation: 3.5s;
  animation-delay: 3.5s;
  top:50%;left:50%;
  z-index: -999;
  background: linear-gradient(-45deg, #b8b7b7, #8d8d8c);
}

.whatwedo-page {
  z-index: 0;
  width: 100%;height: 1000px;
  position:relative;
  overflow: hidden;
  text-align: center;
  background: #1f1f1f;
}

.roundal {
  box-sizing: border-box;
  text-align: center;
  border-radius: 100%;
}

.roundal.imc {
  width: 280px;height: 280px;
  border: 2px solid;
  border-color: #c8cbe7;
  font-weight: 400;
  font-size: 2.4em;
  line-height: 1.3em;
  position: absolute;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: -1;
}

.roundal.mainroundal {
  width: 160px;height: 160px;
  background-size: 200% 200%;
  position: absolute;
  visibility: hidden;opacity: 0;
  inset: none !important;
}

.roundal.mainroundal.blopblop {
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
  transition: all .5s ease;
}
.roundal.mainroundal.blopblop .subroundal {
  top: 50% !important; left: 50% !important;
  bottom: initial !important; right: initial !important;
  transform: translate(-50%,-50%) !important;
  transition: all .5s ease;
}

.bobbing {-moz-animation: bobbing 7s ease-out infinite;}
.bobbing2 {-moz-animation: bobbing 10s ease-out infinite;}
.bob-delay {animation-delay: 6.4s;}

@keyframes bobbing {
  0% {transform: translateY(0)}
  50% {transform: translateY(18px)}
  100% {transform: translateY(0)}
}

.roundal.design {
  background: linear-gradient(-45deg, #E60079, #e40420);
  top: -23%;left: -52%;
  transform: translate(100px, 100px) scale(0);
}
.roundal.design::after {
  content: '';
  display: block;
  background: url('../images/pk-design-white.svg') 50% 50% no-repeat;
  position: absolute;
  width: 90%;height: 60px;
  top: 50%;left: 50%;
  transform: translate(-50%, -52%);
}
.roundal.subroundal.center {
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
}
.roundal.hidden::after {
  opacity: 0;visibility: hidden;
  transition: all .25s ease;
}
.roundal.hidden {background: transparent !important;}
.roundal.imc.hidden {border-color: transparent;} 
.roundal.digital {
  background: linear-gradient(-45deg, #f28c01, #ea5518);
  bottom: -33%;left: -45%;
  transform: translate(100px, -100px) scale(0);
}
.roundal.digital::after {
  content: '';
  display: block;
  background: url('../images/pk-digital-white.svg') 50% 50% no-repeat;
  position: absolute;
  width: 90%;height: 90%;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
}
.roundal.global {
  background: linear-gradient(-45deg, #83bc25, #00993e);
  top: -33%;
  right: -45%;
  transform: translate(-100px, 100px) scale(0);
}
.roundal.global::after {
  content: '';
  display: block;
  background: url('../images/pk-global-white.svg') 50% 50% no-repeat;
  position: absolute;
  width: 90%;height: 90%;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
}
.roundal.strategy {
  background: linear-gradient(-45deg, #b8b7b7, #8d8d8c);
  bottom: -30%;right: -47%;
  transform: translate(-100px, -100px) scale(0);
}
.roundal.strategy::after {
  content: '';
  display: block;
  background: url('../images/pk-strategy-white.svg') 50% 50% no-repeat;
  position: absolute;
  width: 90%;height: 90%;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
}
.roundal.subroundal {
  width: 140px;
  height: 140px;
  position: absolute;
  border: 2px solid;
  font-size: 0.55em;
  line-height: 1em;
  transform: scale(0);
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
}
/* .roundal.subroundal.blepblep {
  top: -50% !important; left: -50% !important;
  transform: translate(-50%,-50%) !important;
  transition: all .5s ease;
  transition-delay: .75s;
} */
.roundal.mainroundal.design .subroundal {border-color: #e6007a;}
.roundal.mainroundal.digital .subroundal {border-color: #f28c01;}
.roundal.mainroundal.global .subroundal {border-color: #5eaf2c;}
.roundal.mainroundal.strategy .subroundal {border-color: #b6b5b5;}

.roundal.subroundal::after {
  transform: translate(-50%, -50%);
  cursor: pointer;
  position: absolute;
  width: 100%;height: 100%;
  background-size: 100% !important;
}
.roundal.subroundal.advertising {top: -90%;left: -4%;transform: translate(20px, 50px) scale(0);}
.roundal.subroundal.advertising::after {content: '';background: url('../images/icon-advertising.svg') 50% 50% no-repeat;top: 44%;left: 48%}
.roundal.subroundal.directmail {top: -48%;left: 90%;transform: translate(-100px, 50px) scale(0)}
.roundal.subroundal.directmail::after {content: '';background: url('../images/icon-directmail.svg') 50% 50% no-repeat;top: 49%;left: 48%}
.roundal.subroundal.powerpoints {top: -38%;left: -79%;transform: translate(100px, 50px) scale(0)}
.roundal.subroundal.powerpoints::after {content: '';background: url('../images/icon-powerpoints.svg') 50% 50% no-repeat;top: 45%;left: 50%}
.roundal.subroundal.infographics {top: 37%;left: -157%;transform: translate(100px, 50px) scale(0)}
.roundal.subroundal.infographics::after {content: '';background: url('../images/icon-infographics.svg') 50% 50% no-repeat;top: 45%;left: 50%}
.roundal.subroundal.collateral {top: 52%;left: -79%;transform: translate(100px, -50px) scale(0)}
.roundal.subroundal.collateral::after {content: '';background: url('../images/icon-collateral.svg') 50% 50% no-repeat;top: 48%;left: 50%}
.roundal.subroundal.branding {top: 8%;left: -158%;transform: translate(200px, 0)}
.roundal.subroundal.branding::after {content: '';background: url('../images/icon-branding.svg') 50% 50% no-repeat;top: 48%;left: 50%}
.roundal.subroundal.genai {top: -82.5%;left: -158%;transform: translate(200px, 0)}
.roundal.subroundal.genai::after {content: '';background: url('../images/icon-genai.svg') 50% 50% no-repeat;top: 48%;left: 50%}
.roundal.subroundal.ebooks {top: -23%;left: -87%;transform: translate(100px, 50px) scale(0)}
.roundal.subroundal.ebooks::after {content: '';background: url('../images/icon-ebooks.svg') 50% 50% no-repeat;top: 70px;left: 50%}
.roundal.subroundal.edm {top: 66%;left: -70%;transform: translate(100px, -50px) scale(0)}
.roundal.subroundal.edm::after {content: '';background: url('../images/icon-edm.svg') 50% 50% no-repeat;top: 72px;left: 49%}
.roundal.subroundal.websites {top: 52%;left: 146px;transform: translate(-100px, 50px) scale(0)}
.roundal.subroundal.websites::after {content: '';background: url('../images/icon-websites.svg') 50% 50% no-repeat;top: 70px;left: 50%}
.roundal.subroundal.video {top: 144%;left: 155px;transform: translate(-100px, 50px) scale(0)}
.roundal.subroundal.video::after {content: '';background: url('../images/icon-video.svg') 50% 50% no-repeat;top: 70px;left: 50%}
.roundal.subroundal.socialmedia {top: 102%;left: 14.5%;transform: translate(-100px, 50px) scale(0)}
.roundal.subroundal.socialmedia::after {
  content: '';
  background: url('../images/icon-socialmedia.svg') 50% 50% no-repeat;
  top: 70px;left: 50%;
  transition: all .25s ease;
}
.roundal.subroundal::before {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  top: initial;left: 0;
  transition: all .25s ease;
  border-radius: 50%;
  transform:translateY(100%); opacity: 0;
  z-index: 999;
  cursor: pointer;
}
.roundal.subroundal:hover::before {transform: translateY(0);opacity: 1}
.roundal.subroundal.websites::before {background: url('../images/websites-2.jpg') 0% 50% no-repeat;background-size: cover;}
.roundal.subroundal.edm::before {background: url('../images/edm-3.jpg') 0% 2% no-repeat;background-size: cover;}
.roundal.subroundal.video::before {background: url('../images/video-4.jpg') 50% 50% no-repeat;background-size: cover;}
.roundal.subroundal.socialmedia::before {background: url('../images/linkedin-6.jpg') 50% 50% no-repeat;background-size: 100%}
.roundal.subroundal.collateral::before {background: url('../images/collateral1.jpg') 50% 50% no-repeat;background-size: 100%}
.roundal.subroundal.infographics::before {background: url('../images/infographics3.png') 50% 50% no-repeat;background-size: 100%}
.roundal.subroundal.eventcomms::before {background: url('../images/event-comms4.png') 50% 50% no-repeat;background-size: cover}
.roundal.subroundal.ebooks::before {background: url('../images/ebooks-1.jpg') 50% 50% no-repeat;background-size: cover;}


.roundal.subroundal.advertising::before {background: url('../images/advertising/electronic-board2-advertising.jpg') 50% 50% no-repeat;background-size: cover;}
.roundal.subroundal.directmail::before {background: url('../images/nhs-leaflet1-dm.jpg') 50% 50% no-repeat;background-size: cover;}
.roundal.subroundal.powerpoints::before {background: url('../images/powerpoint-3.jpg') 50% 50% no-repeat;background-size: cover;}
.roundal.subroundal.branding::before {background: url('../images/watford-market-branding.jpg') 50% 50% no-repeat;background-size: cover;}
.roundal.subroundal.genai::before {background: url('../images/speedy-bg.svg') 50% 50% no-repeat;background-size: cover;}
/* .roundal.subroundal.branding::before {background: url('../images/collateral1.jpg') 50% 50% no-repeat;background-size: cover;} */



.roundal.subroundal.copywriting {top: 98%;left: 61px;transform: translate(-100px, 30px) scale(0)}
.roundal.subroundal.copywriting::after {content: '';background: url('../images/icon-analysis.svg') 50% 50% no-repeat;top: 48%;left: 49%}
.roundal.subroundal.planning {top: 32%;left: 102%;transform: translate(-100px, -30px) scale(0)}
.roundal.subroundal.planning::after {content: '';background: url('../images/icon-planning.svg') 50% 50% no-repeat;top: 48%;left: 51%}
.roundal.subroundal.emea {top: -71%;left: 64%;transform: translate(-50px, 50px) scale(0)}
.roundal.subroundal.emea::after {content: '';background: url('../images/icon-emea.svg') 50% 50% no-repeat;top: 49%;left: 50%;}
.roundal.subroundal.cala {top: -67%;left: 160%;transform: translate(-180px, 50px) scale(0)}
.roundal.subroundal.cala::after {content: '';background: url('../images/icon-cala.svg') 50% 50% no-repeat;top: 51%;left: 51%}
.roundal.subroundal.na {top: 91%;left: 54%;transform: translate(-100px, 30px) scale(0)}
.roundal.subroundal.na::after {content: '';background: url('../images/icon-na.svg') 50% 50% no-repeat;top: 50%;left: 50%}
.roundal.subroundal.apac {top: 98%;left: 145%;transform: translate(-100px, 60px) scale(0)}
.roundal.subroundal.apac::after {content: '';background: url('../images/icon-apac.svg') 50% 50% no-repeat;top: 50%;left: 50%}
.roundal.subroundal.eventcomms {top: 9%;left: 102%;transform: translate(-100px, 0) scale(0)}
.roundal.subroundal.eventcomms::after {content: '';background: url('../images/icon-eventcomms.svg') 50% 50% no-repeat;top: 47%;left: 50%}

/* ----------------------- NEW CONTENT START ----------------------- */

.spine-shelf {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 100%; height: 100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  z-index: -2;
  top: 0;
}
.spine-shelf::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 3px solid #f28c01;
  z-index: -1;
  height: 425px;width: 425px;
  opacity: 0; visibility: hidden;
  transition: all .25s ease;
}
.spine-shelf.design-2::after {border: 3px solid #e6007a;opacity: 1;visibility: visible;}
.spine-shelf.digital-2::after {border: 3px solid #f28c01;opacity: 1;visibility: visible;}
.spine-shelf.global-2::after {border: 3px solid #5eaf2c;opacity: 1;visibility: visible;}
.spine-shelf.strategy-2::after {border: 3px solid #b6b5b5;opacity: 1;visibility: visible;}
.spine-shelf .spine {
  position: relative;
  display: flex;
  text-align: center;
  width: 170px; height: 170px;
  border-radius: 50%;
  margin: 0 1.25em;
  cursor: pointer;
  transform: scale(0);
  justify-content: center;
  align-items: center;
  background-size: cover !important;
}
.spine-shelf.digital-2.mac::after {
  height: 525px !important;
  width: 525px !important;
}
.spine-shelf .spine .device {
  background: url('../images/iphone.png') no-repeat center center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 264px;
  margin-top: -10px;
  height: 522px;
  display: block;
  opacity: 1;
  visibility: visible;
  background-size: contain;
}
.spine-shelf .spine .device.mac {
  background: url('../images/macbook.svg') no-repeat center center;
  background-size: contain;
  width: 520px;
  margin-top: 18px;
}
.spine-shelf .spine .device.mac.nodevice {
  background: transparent;
}
.spine-shelf .spine::before {
  content: 'VISIT';
  position: absolute;
  background-color: #000000;
  border-radius: .25em;
  padding: .5em 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all .25s ease;
}
.spine-shelf .spine.link:hover::before {
  opacity: 1; visibility: visible;
}
.spine-shelf .spine::after {
  content: '';
  position: absolute;
  width: 100%;height: 100%;
  left: -12px;top: -12px;
  padding: 10px;
  border-radius: 50%;
}
.spine-shelf .spine:nth-child(3) {
  border-radius:32px !important;height:508px !important;
}
.spine-shelf .spine.mac:nth-child(3) {
  border-radius:32px !important;height:254px !important;
}
.spine-shelf.nodevice .spine:nth-child(3) {
  border-radius:0px !important;height:508px !important;
}
.spine-shelf .spine.design-1::after {border: 3px solid #e6007a;}
.spine-shelf .spine.digital-1::after {border: 3px solid #f28c01;}
.spine-shelf .spine.global-1::after {border: 3px solid #5eaf2c;}
.spine-shelf .spine.strategy-1::after {border: 3px solid #b6b5b5;}
.spine-shelf .spine.design-1 {background: #e6007a;}
.spine-shelf .spine.digital-1 {background: #f28c01;}
.spine-shelf .spine.global-1 {background: #5eaf2c;}
.spine-shelf .spine.strategy-1 {background: #b6b5b5;}

.spine-shelf .spine:nth-child(2) {width: 210px;height:210px;margin-left: -40px;z-index: 2;}
.spine-shelf .spine:nth-child(4) {width: 210px;height:210px;margin-right: -40px;z-index: 2;}
.spine-shelf .spine:nth-child(3) {width: 235px;min-height:250px;border-radius:0;height:inherit;}
.spine-shelf .spine:nth-child(3)::after {border: 0px;}

.spine-shelf .spine.mac:nth-child(3) {width: 405px;min-height:254px;border-radius:0 !important;height:inherit;z-index:9999999;background-size: contain !important;}
.spine-shelf.nodevice .spine.mac:nth-child(3) {background-size: contain !important;}

.spine-shelf .spine.test3.design-1:nth-child(3) {background: url('../images/collateral3.jpg') no-repeat center center;background-size:contain !important;}
.spine-shelf .spine.test7.digital-1:nth-child(3) {background: url('../images/7-mobile-2.jpg') no-repeat center center;background-size:contain !important;}
.spine-shelf .spine.test8.digital-1:nth-child(3) {background: url('../images/linkedin-3.jpg') no-repeat center center;background-size:contain !important;}

.tostart {
  position:absolute;
  z-index:9999;
  font-weight:900;
  cursor:pointer;
  left: 50%; transform: translateX(-50%);
  bottom: 7.5em;
  font-size: 1.5em;
  opacity: 0; visibility: hidden;
}
.video-container {
  position: absolute;
  width: 90%;
  margin: auto;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%) scale(0);
  z-index: 99999;
}
.video-container video {
  max-width: 100%;
  max-height: 85vh;
  width: inherit;
}
#videoclose {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  font-size: 4em;
  color: #ffffff;
  line-height: 0;
  font-weight: 500;
  cursor: pointer;
}
/* ----------------------- NEW CONTENT END ----------------------- */

/* our clients page */
.ourclients-page {
  background: #FFFFFF;
  width: 100%;height: 768px;
  position:relative;
  overflow: hidden;
  text-align: center;
}

.ourclients-page h2 {
  color: #333132;
  margin: 0;
  line-height: 85px;
}

.ourclients-page .col50 {
  width: 50%;
  float: left;
  vertical-align: top;
  height: 110px;
  position: relative;
}

.ourclients-page .col25 {
  width: 25%;
  float: left;
  vertical-align: top;
  height: 128px;
  position: relative;
  background: rgba(0,0,0,0.06);
}

.ourclients-page .light {
  background: rgba(0,0,0,0.03);
}

.ourclients-page .logo {
  position: absolute;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%) scale(1);
  height: 100%;
  z-index: 0;
  transition: all .25s ease;
}

.ourclients-page .logo:hover {
  transform: translate(-50%, -50%) scale(1.25);
}

.access {background: url('../images/logo-access.svg') 50% 50% no-repeat;width: 53%;}
.amdocs {background: url('../images/logo-amdocs.svg') 50% 50% no-repeat;width: 52%;}
.autoglym {background: url('../images/logo-autoglym.jpg') 50% 50% no-repeat;background-size: 45%;width: 46%;}
.bombardier {background: url('../images/logo-bombardier.svg') 50% 50% no-repeat;width: 46%;}
.nice {background: url('../images/nice-logo.svg') 50% 50% no-repeat;width: 21%;}
.citrix {background: url('../images/logo-citrix.svg') 50% 50% no-repeat;width: 35%;}
.saniflo {background: url('../images/saniflo-logo.svg') 50% 50% no-repeat;width: 45%;}
.diageo {background: url('../images/logo-diageo.svg') 50% 50% no-repeat;width: 42%;}
.gentrack {background: url('../images/gentrack-logo.svg') 50% 50% no-repeat;width: 46%;}
.gsk {background: url('../images/logo-gsk.svg') 50% 50% no-repeat;width: 23%;}
.kantarworldpanel {background: url('../images/logo-kantar.svg') 50% 50% no-repeat;width: 43%;}
.veolia {background: url('../images/Veolia\ logo.svg') 50% 50% no-repeat;width: 38%;}
.landsec {background: url('../images/logo-landsec.svg') 50% 50% no-repeat;width: 18%;}
.mothercare {background: url('../images/logo-mothercare.svg') 50% 50% no-repeat;width: 43%;}
.nhs {background: url('../images/logo-nhs.svg') 50% 50% no-repeat;width: 27%;}
.theopenuniversity {background: url('../images/logo-theopenuniversity.svg') 50% 50% no-repeat;width: 28%;}
.ubisoft {background: url('../images/logo-vindicia.svg') 50% 50% no-repeat;width: 53%;}
.solera {background: url('../images/solera-logo.svg') 50% 50% no-repeat;width: 48%;}
.nebula {background: url('../images/nebula-exhibits-logo.svg') 50% 50% no-repeat;width: 46%;}
.watfordcouncil {background: url('../images/logo-watfordcouncil.svg') 50% 50% no-repeat;width: 42%;}
.watfordtowncentre {background: url('../images/watford-bid-logo.svg') 50% 50% no-repeat;width: 26%;}
.whitefriars {background: url('../images/logo-whitefriars.svg') 50% 50% no-repeat;width: 46%;}
.woodmansterne {background: url('../images/logo-woodmansterne.svg') 50% 50% no-repeat;width: 46%;}

.contactus-page {
  background: #1f1f1f;
  width: 100%;height: 768px;
  position:relative;
  overflow: hidden;
  text-align: left;
  font-size: 1.1em;
}

.contactus-page .col50 {
  width: 50%;height: 100%;
  display: inline-block;
  margin: 0 -4px 0 0;
  vertical-align: top;
  position: relative;
}

.contactus-page .col50:first-of-type {padding: 2%;box-sizing: border-box;}

.contactus-page h2 {margin: 20px 0 1em;}

.background-menu {
  position: fixed;
  top: 0;left: 0;right: 0;bottom: 0;
  width: 100vw;height: 100vh;
  visibility: hidden;
  z-index: 999;
}

@-webkit-keyframes Gradient {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}
@-moz-keyframes Gradient {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}
@keyframes Gradient {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}

.global {background: #f0f0f0 url('../images/pk-global.svg') 50% 50% no-repeat;}

/* footer */
.footer {
  color: #949293;
  margin: 90px 0;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.legal {
  font-size: 0.6em;
  margin: 0;
  position: absolute;
  bottom: 2%;
}

@media screen and (min-width: 1700px) {
.menu-page div a {font-size: 1.3em;margin: 0 1.2em;}
.menu {width: 69px;height: 39px;}
.logo.fix {width: 210px;height: 88px;}
.access {width: 40%;}
.amdocs {width: 36%;}
.autoglym {background-size: 45%;width: 32%;}
.bombardier {width: 39%;}
.bre {width: 15%;}
.citrix {width: 30%;}
.corona,.storm {width: 23%;}
.ea,.ubisoft {width: 16%;}
.gsk,.theopenuniversity {width: 17%;}
.kantarworldpanel {width: 57%;}
.landsec {width: 14%;}
.mothercare,.whitefriars {width: 38%;}
.nhs {width: 20%;}
.soleraaudatex {width: 44%;}
.watfordcouncil {width: 30%;}
.watfordbid {width: 14%;}
.woodmansterne {width: 38%;}
}

@media screen and (min-width: 1300px) {
.landsec {width: 14%;}
.watfordbid {width: 14%;}
.ea {width: 16%;}
.nhs {width: 20%;}
.corona,.storm {width: 23%;}
.citrix {width: 30%;}
.watfordcouncil {width: 30%;}
.diageo,.kantarworldpanel {width: 30%;}
.mothercare,.whitefriars {width: 38%;}
.woodmansterne {width: 38%;}
.access {width: 40%;}
.amdocs {width: 36%;}
.bombardier {width: 39%;}
.autoglym {background-size: 45%;width: 32%;}
.bre,.gsk,.theopenuniversity {width: 17%;}
.soleraaudatex {width: 44%;}
.ubisoft {width: 45%;}
}

@media only screen and (max-width: 1280px) {

  .spine-shelf .spine {
    width: 150px;
    height: 150px;
  }

  .spine-shelf .spine:nth-child(2) {
    width: 190px;
    height: 190px;
  }
  
  .spine-shelf .spine:nth-child(3) {
    width: 225px;
    height: 495px !important;
  }

  .spine-shelf .spine:nth-child(4) {
    width: 190px;
    height: 190px;
  }

  .spine-shelf .spine .device {
    width: 256px;
  }

  .spine-shelf .spine.mac:nth-child(3){
    width: 320px;
  }
  .spine-shelf .spine .device.mac {
    width: 414px;
    margin-top: 13px;
  }

}

@media screen and (max-width: 775px) {

  body, .container, .background-container, .intro-page {
    height: 100%;
  }
  #arrow {
    width: 32px;
  }
  #introtext {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }

  .roundal.mainroundal.blopblop {
    position: absolute !important;
    top: 0% !important;
    left: 0% !important;
    transform: translate(0%,0%) !important;
    transition: all .5s ease;
    height: 1150px !important;
  }

  .roundal.mainroundal.blopblop .subroundal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    margin-top: -35px !important;
  }
  
  .roundal.imc {height: 1185px !important;}


  .spine-shelf .spine .device.mac {
    width: 350px;
  }
  .spine-shelf.digital-2.mac::after {
    width: 300px !important; height: 300px !important;
  }
  .spine-shelf .spine.test8.digital-1:nth-child(3) {
    border-radius: 60px !important;
  }

  .spine-shelf .spine .device.mac {
    height: 215px !important;
  }
  .spine-shelf .spine .device {
    height: 415px !important;
  }

  .spine-shelf {
    flex-direction: row;
    width: 100%; height: 850px;
    flex-wrap: wrap;
    max-width: 375px;
    margin: auto;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
  }
  .spine-shelf .spine {
    width: 170px; height: 170px;
  }
  .spine-shelf .spine:nth-child(2) {
    margin-left: 35px;
    width: 170px; height: 170px;
  }
  .spine-shelf .spine:nth-child(4) {
    margin-right: 35px;
    width: 170px; height: 170px;
  }

  .spine-shelf .spine {
    margin: 0;
  }

  .spine-shelf .spine:nth-child(3) {
    height: 402px !important;
  }

  .spine-shelf .spine.mac:nth-child(3) {
    min-height: 173px;
    height: 173px !important;
    width: 282px;
  }

  .roundal.subroundal.socialmedia::after{
    top: 52%;
  }
  .roundal.subroundal::before {
    content: '';
    top: 0;
  }
.ourclients-page {height: auto;}
.menu-page div a {
  display: block;
  font-size: 56px;
  line-height: 100px;
}
.ourclients-page .col50,.ourclients-page .col25 {height: 90px;}
.ourclients-page .col50 {width: 100%;}
.ourclients-page .col25 {width: 50%;}
.ourclients-page .light {background:rgba(0,0,0,0.06);}
.ourclients-page .mobilelight {background:rgba(0,0,0,0.03);}
}

@media screen and (max-width: 990px) {.menu-page div a {font-size: 22px;}}
@media screen and (max-width: 850px) {.menu-page div a {display: block;font-size: 27px;line-height: 2.5em;}}
@media screen and (max-width: 775px) and (orientation: landscape) {

.content {width: 45% !important;height: 210px !important;}
.text--slider--container {top: 0px !important;height: 90px !important;}
.intro--copy {top: 10px !important;font-size: 1em !important;}
.main-logo {width: 120px !important;}
h2 {
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 400;
  margin: 40px 0 30px 0;
}

.contactus-page .col50 {width: 100%;display: block;}
.content {width: 70%;}
.copy--slider--container {width: 100%;}
svg {width: 100%;}
.intro-page {padding: 0;}

.whatwedo-page {
  height: auto;
  padding: 0 9px 40px;
  box-sizing: border-box;
}

.roundal {
  box-sizing: border-box;
  padding: 26px 10px 10px 10px;
  text-align: center;
  border-radius: 0;
  position: static !important;
  display: block !important;
  transform: translate(0) !important;
  height: auto !important;width: 100% !important;
  background: none !important;
}

.roundal.subroundal {
  border-radius: 100%;
  width: 100px !important;height: 100px !important;
  display: inline-block !important;
  padding: 47px 10px 10px 10px;
  font-size: 0.5em;
  vertical-align: top;
  cursor: pointer !important;
}

.roundal.imc {
  font-size: 1.6em;
  line-height: 1.3em;
  border-radius: 50px;
}
.roundal.imc::after{display: none;}
#imctext{display: block;}
.roundal.design {margin: 25px 0 0 0;}

.roundal.design::after {
  top: 11px;
  width: 100%;
  transform: translateX(-50%);
  background: url(../images/pk-design.svg) 50% 50% no-repeat;
}
.roundal.digital::after {
  top: 11px;
  width: 100%;height: 60px;
  transform: translateX(-50%);
  background: url(../images/pk-digital.svg) 50% 50% no-repeat;
}
.roundal.global::after {
  top: 11px;
  width: 100%;height: 60px;
  transform: translateX(-50%);
  background: url(../images/pk-global.svg) 50% 50% no-repeat;
}
.roundal.strategy::after {
  top: 11px;
  width: 100%;height: 60px;
  transform: translateX(-50%);
  background: url(../images/pk-strategy.svg) 50% 50% no-repeat;
}
.roundal.mainroundal {padding: 76px 10px 10px;}
.logo {
  left: 15px;top: 15px;
  width: 110px;height: 60px;
}
.watfordtowncentre {width: 55px !important;}
.nice {width: 70px;}
.menu {
  right: 25px;top: 25px;
  width: 42px;height: 29px;
}
.roundal.subroundal.infographics::after {background-size: 100%;cursor: pointer !important;}
.roundal.subroundal.collateral::after {background-size: 100%;cursor: pointer !important;}
.roundal.subroundal.branding::after {background-size: 100%;cursor: pointer !important;}
.roundal.subroundal.ebooks::after {
  background-size: 100%;cursor: pointer !important;
  top: 50px;
}
.roundal.subroundal.edm::after {top: 51px;}
.roundal.subroundal.websites::after {
  background-size: 100%;cursor: pointer !important;
  top: 51px;
}
.roundal.subroundal.video::after {top: 52px;}
.roundal.subroundal.emea::after {background-size: 100%;}
.roundal.subroundal.cala::after {background-size: 100%;}
.roundal.subroundal.na::after {background-size: 100%;}
.roundal.subroundal.apac::after {background-size: 100%}
.roundal.subroundal.eventcomms::after {background-size: 100%;}
.roundal.subroundal.copywriting::after {background-size: 100%;}
.roundal.subroundal.planning::after {background-size: 100%;}
.bre,.ea {width: 52px;}
.diageo,.citrix {width: 76px;}
.bombardier {width: 88px;}
.landsec {width: 40px;}
.watfordbid,.theopenuniversity {width: 60px;}
.woodmansterne,.autoglym {width: 96px;}
.nhs {width: 64px;}
.storm {width: 70px;}
.watfordcouncil {width: 78px;}
.corona {width: 73px;}
.ubisoft {width: 56px;}
.gsk {width: 50px;}
.mothercare {width: 87px;}
.whitefriars {width: 94px;}
.contactus-page .col50:last-child {height: 270px;}
.legal {font-size: 0.6em;margin: 5em 0 1em;position: static;}
.svg--weare {width: 83%;}
.svg--design,.svg--digital,.svg--global {width: 78%;}
}

@media screen and (max-width: 775px) and (orientation: portrait) {
  .spine-shelf::after {
    height: 400px;width: 400px;
  }
  .spine-shelf .spine:nth-child(3) {
    height: 402px !important;
    width: 183px;
    border-radius: 14px !important;
  }
h2 {
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 400;
  margin: 40px 0 30px 0;
}
.contactus-page .col50 {width: 100%;display: block;}
.content {width: 70%;}
.copy--slider--container {width: 100%;}
svg {width: 100%;}
.intro-page {padding: 0;}
.whatwedo-page {
  height: auto;
  padding: 0 9px 40px;
  box-sizing: border-box;
}
.roundal {
  box-sizing: border-box;
  padding: 26px 10px 10px 10px;
  text-align: center;
  border-radius: 0;
  width: 100% !important;
  position: static !important;
  display: block !important;
  transform: translate(0) !important;
  height: auto !important;
  background: none !important;
}
.roundal.subroundal {
  border-radius: 100%;
  width: 100px !important;height: 100px !important;
  display: inline-block !important;
  padding: 47px 10px 10px 10px;
  font-size: 0.5em;
  vertical-align: top;
}
.roundal.imc {
  font-size: 1.6em;
  line-height: 1.3em;
  border-radius: 50px;
}
.roundal.imc::after{display: none;}
#imctext{display: block;}
.roundal.design {margin: 65px 0 0 0;}
.roundal.design::after {
  top: 11px;
  width: 100%;
  transform: translateX(-50%);
  background: url(../images/pk-design.svg) 50% 50% no-repeat;
}
.roundal.digital::after {
  top: 11px;
  width: 100%;height: 60px;
  transform: translateX(-50%);
  background: url(../images/pk-digital.svg) 50% 50% no-repeat;
}
.roundal.global::after {
  top: 11px;
  width: 100%;height: 60px;
  transform: translateX(-50%);
  background: url(../images/pk-global.svg) 50% 50% no-repeat;
}
.roundal.strategy::after {
  top: 11px;
  width: 100%;height: 60px;
  transform: translateX(-50%);
  background: url(../images/pk-strategy.svg) 50% 50% no-repeat;
}
.roundal.mainroundal {padding: 76px 10px 10px;}
.logo {left: 15px;top: 15px;width: 110px;height: 60px}
.watfordtowncentre {width: 55px !important;}
.nice {width: 70px !important;}
.menu {right: 25px;top: 25px;width: 42px;height: 29px}
.roundal.subroundal.infographics::after,.roundal.subroundal.ebooks::after {background-size: 100%;top:50%;}
.roundal.subroundal.edm::after,.roundal.subroundal.websites::after {background-size: 100%;top: 51px;}
.roundal.subroundal.video::after {top: 52px;}
.roundal.subroundal.na::after, .roundal.subroundal.cala::after,.roundal.subroundal.emea::after,
.roundal.subroundal.eventcomms::after,.roundal.subroundal.apac::after,.roundal.subroundal.branding::after,
.roundal.subroundal.copywriting::after,.roundal.subroundal.planning::after, .roundal.subroundal.collateral::after{background-size: 100%;}
.bre,.ea {width: 52px;}
.diageo,.citrix  {width: 76px;}
.bombardier {width: 88px;}
.landsec {width: 40px;}
.watfordbid, .theopenuniversity {width: 60px;}
.woodmansterne, .autoglym {width: 96px;}
.nhs {width: 64px;}
.storm {width: 70px;}
.watfordcouncil {width: 78px;}
.corona {width: 73px;}
.ubisoft {width: 56px;}
.gsk {width: 50px;}
.mothercare {width: 87px;}
.whitefriars {width: 94px;}
.contactus-page .col50:last-child {height: 270px;}
.legal {font-size: 0.6em;margin: 5em 0 1em;position: static;}
.svg--weare {width: 83%;}
.svg--design,.svg--global,.svg--digital {width: 78%;}
}

@media screen and (max-width: 445px) {
.main-logo {width: 116px;}
.text--slider--container {width: 100%;top: 0px;}
.intro--copy {top: 0;font-size: 1.2em;line-height: 1.2em;}
}