/******************* getting rid of the padding on cols. pbootstrap has a class for this so prob not needed *******************/


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 0;
    padding-right: 0;
}

.container-fluid {
  max-width: 1400px;
}

/******************* setting up the spacing system used throughout *******************/


body, html {
  overflow-x: hidden;
    /*position: relative;*/
}

/* each section is wrapped in a container-wrapper */

.container-wrapper {
    padding: 6rem 4rem;
}

@media only screen and (min-width: 768px) {
    .container-wrapper {
        padding: 4rem 3rem;
    }
}

@media only screen and (min-width: 1200px) {
    .container-wrapper {
        padding: 4rem 5rem;
    }
}


/* each module in a column is wrapped in an element-wrapper */

.element-wrapper {
    padding: 4rem;
}


@media only screen and (min-width: 996px) {
    .element-wrapper {
        padding: 10rem 3rem;
    }
}

@media only screen and (min-width: 1200px) and (min-height:600px){
    .element-wrapper {
        padding: 6rem 4rem;
    }
}

@media only screen and (max-width: 996px) {
    .element-wrapper.phones {
      padding: 50px;
    }
}

.info-box {
  margin-top: 8rem;
}

@media only screen and (max-width: 996px) {
  .about-para {
    padding-bottom: 8rem;
  }
  .info-box {
    margin-top: 25vh;
  }
}

.footer {
    padding-top: 20% ;
    padding-bottom: 25vh; 
}

.thenav li {
  list-style-type: none;
} 




/******************* helpers *******************/

.sticky-top {
  padding-top: 6rem;
}

.rounded {
  border-radius: 4px;
}

.circle-img {
  /*width: 50px;*/
  border-radius: 50% 60% 45% 60%;
}

.img-fluid {
width: 100%;
}
.light {
opacity: 0.7;
font-size: 0.8em;
}

.txt-right {
text-align: right;
}

.email {
transform: rotate(90deg);
color: #777;
display: inline-block;
 transform-origin: top right;
 position: absolute;
 padding: 1rem 2rem 1rem 2rem;
 right:-1px;
 top:100vh;
 width: 100vh;
 background-color: rgba(255,255,255,0.1);
 /*border-bottom: solid 1px #ccc;*/
}

@media only screen and (min-width: 1200px) {
  .email {
    position: fixed;
  }
}

.border {
border: solid 1px #ebebeb;
}




/******************* colours *******************/



body {
  color: #000;
  transition: background-color 1s ease;
}

.yellow {
  color: #EFC90E;
}

.grey {
  color: #999;
}
.bg-mid-grey {
    background-color:#555;
}
.bg-light-grey {
    background-color:#ebebeb;
}
.bg-dark-grey {
    background-color:#222;
    color: #444;
}
.color-dark-grey {
    background-color:#222;
    color: #777;
}
.color-blue {
  background-color:#116af7;
  color: #06285e;
}

.color-light-blue {
  background-color:#b3efff;
  color: black;
}

.color-pink{
  background-color:#fa7776;
  color: white;
}

.color-neutral {
  background-color:#ebe9da;
  /*color: #7d5d24;*/
  color: #533e17;
}
.color-grey {
  background-color:#999;
}

.color-bright-green {
  background-color:#bbffba;
  color: blue;
}

.color-bright-blue {
  background-color:blue;
  color: #bbffba;
}

.color-black {
    background-color:black;
    color: #777;
}

.color-yellow {
    background-color:#EFC90E;
    color: black;
}

.color-about {
    background-color:#252422;
    color: #777;
}
.color-white {
    background-color: white;
    color: #777;
}

.color-elevit, .color-elevit .note {
  background-color: #d1e5f2;
  color: #0a2945;
}

.color-goodhealth, .color-goodhealth .note {
  background-color: #687151;
  color: #fff;
}

.color-light-rail, .color-light-rail .note {
  background-color: #FFB100;
  color: #111;
}

.color-tgh, .color-tgh .note {
  background-color: #263C39;
  color: #E7ECE9;
}


.color-ct, .color-ct .note {
  background-color: #1f1c4f;
  color: #ff4c03;
}

.color-cp, .color-cp .note {
   background-color:#333;
  color: #64baaf;
}

.color-5pm, .color-5pm .note {
   background-color:#21252c;
   color:#e44c46;
}
.color-things, .color-things .note {
  background-color:#ff6a76;
  color:#fefbe8;
}
.color-deloitte, .color-deloitte .note {
  color: #002776;
  background-color:#e3e6e8;
}
.color-mfb, .color-mfb .note {
  background-color:#cfe4a9;
  color:#496315;
}
.color-dogs, .color-dogs .note {
    background-color:#d8e97c;
  color:#4b1221;
}
.color-go-dark, .color-go-dark .note {
  background: #000;
  color: #777;
}

.color-freshcatch, .color-freshcatch .note {
  background-color: #4649ab;
  color: white;
}
.color-mazda, .color-mazda .note {
  background-color: #222526;
  color: #0091ca;
}
.color-footer {
  background-color: #222;
  color: #555;

}







/******************** grid ***********************/



@media only screen and (min-width: 768px) {
    .wrapper {
        display: grid;
        grid-gap: 4px;
        max-width: 1400px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        /*grid-template-rows: 28vw;*/
        border: solid 4px transparent;
        margin:auto;
    }
}

.box {
  position: relative;
  margin: 10rem 0;
}

.box img, .box video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-bottom: solid 2px transparent;
}


.note {
  position: absolute;
  bottom: 0px;
  right: 0;
  display: inline-block;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 5px 15px 0px 15px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 10000;
  font-weight: 400;
}



/*@media only screen and (min-width: 768px) {*/

    .box {
      margin: 6rem 0;
    }

    .a {
        grid-column: 1 / 4;
        /*grid-row: 1;*/
        
    }
    .b {
        grid-column: 4 / 7 ;
        /*grid-row: 1;*/
    }
    .c {
        grid-column: 1 / 5 ;
        /*grid-row: 2 / 4 ;*/
        grid-row: span 2;
    }
    .d {
        grid-column: 5 / 7;
        /*grid-row: span 2;*/
    }
    .e {
        grid-column: 5 / 7 ;
        /*grid-row: span 2;*/
    }
    .f {
        grid-column: 1/4 ;
        /*grid-row: 4;*/
    }
    .g {
        grid-column: 4 / 7 ;
        /*grid-row: 4 ;*/
    }
    .h {
        grid-column: 1 / 4 ;
        /*grid-row: 5;*/
    }
    .i {
        grid-column: 4 / 7 ;
        /*grid-row: 5 ;*/
    }

    .j {
        grid-column: 1/3;
        /*grid-row: 5;*/
    }
    .k {
        grid-column: 3/5;
        /*grid-row: 5;*/
    }
    .l{
        grid-column: 5/7;
        /*grid-row: 5;*/
    }
    .m {
        grid-column: 1/7;
        /*grid-row: 6;*/
    }
    .n {
        grid-column: 1/5;
        /*grid-row: 6;*/
    }
    .o {
        grid-column: 5/7;

    }

    /* centred */

    .p {
        grid-column: 2/6;

    }



/******************** pencil ***********************/



.pencil-wrapper {
  opacity: 1;
  transition: all 1s;
  z-index: 0;
  position: absolute;
  left: 70%;
  top: 15%;
}


.pencil {
  position: absolute;
  -webkit-transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
          transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
   -webkit-animation: rotate-pencil 5s linear infinite;
          animation: rotate-pencil 5s linear infinite; 
}

@media only screen and (min-width: 768px) {

  .pencil-wrapper {
      left: 50%;
      top: 15%;
      margin-left: -30px;
      position: fixed;
    }
  .pencil {
    position: fixed;
  }
}



div[class^='pencil-body-side'] {
  position: absolute;
  width: 20px;
  height: 382.4px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
div[class^='pencil-body-side']:before {
  content: '';
  position: absolute;
  border-bottom: 80px solid #D3AF6B;
  border-left: 10.6px solid transparent;
  border-right: 10.6px solid transparent;
  -webkit-transform: translateZ(9px) rotateX(-13deg);
          transform: translateZ(9px) rotateX(-13deg);
  top: -78.8px;
}
div[class^='pencil-body-side']:after {
  content: '';
  position: absolute;
  border-bottom: 10px solid black;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  -webkit-transform: translateZ(17px) translateX(8px) rotateX(-13deg);
          transform: translateZ(17px) translateX(8px) rotateX(-13deg);
  top: -78.8px;
}

.pencil-body-side-1 {
  background-color: #EFC90E;
  -webkit-transform: translateZ(-18px);
          transform: translateZ(-18px);
}

.pencil-body-side-2 {
  background-color: black;
  -webkit-transform: translateZ(18px) rotateY(180deg);
          transform: translateZ(18px) rotateY(180deg);
}

.pencil-body-side-3 {
  background-color: #EFC90E;
  -webkit-transform: translateZ(8.8px) translateX(15px) rotateY(240deg);
          transform: translateZ(8.8px) translateX(15px) rotateY(240deg);
}

.pencil-body-side-4 {
  background-color: black;
  -webkit-transform: translateZ(-8.8px) translateX(-15px) rotateY(60deg);
          transform: translateZ(-8.8px) translateX(-15px) rotateY(60deg);
}

.pencil-body-side-5 {
  background-color: #EFC90E;
  -webkit-transform: translateZ(8.8px) translateX(-15px) rotateY(-240deg);
          transform: translateZ(8.8px) translateX(-15px) rotateY(-240deg);
}

.pencil-body-side-6 {
  background-color: black;
  -webkit-transform: translateZ(-8.8px) translateX(15px) rotateY(-60deg);
          transform: translateZ(-8.8px) translateX(15px) rotateY(-60deg);
}

.pencil-top {
  position: absolute;
  width: 20px;
  height: 36px;
  top: 373px;
  -webkit-transform: rotateX(90deg) translateZ(9px);
          transform: rotateX(90deg) translateZ(9px);
  background-color: #D3AF6B;
}
.pencil-top:after, .pencil-top:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 36px;
  background-color: #D3AF6B;
}
.pencil-top:before {
  -webkit-transform: translateZ(18px) rotateZ(60deg);
          transform: translateZ(18px) rotateZ(60deg);
}
.pencil-top:after {
  -webkit-transform: translateZ(18px) rotateZ(120deg);
          transform: translateZ(18px) rotateZ(120deg);
}

.pencil-lead {
  background-color: black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  top: 25%;
}

.logo {
  position: absolute;
  -webkit-transform: translateX(-42%) translateY(20px) translateZ(-2px) rotateY(180deg) rotateZ(90deg);
          transform: translateX(-42%) translateY(20px) translateZ(-2px) rotateY(180deg) rotateZ(90deg);
  width: 1500%;
  color: #EFC90E;
  /*text-align: center;*/
  /*background-color: red;*/
  height: 20px;
  top: 40%;
  left: -15px;
  font-size: 13px;
}


.logo-fill {
  fill: #EFC90E;
}

.paper {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100px;
  width: 80px;
  background-color: white;
  -webkit-transform: translateX(-53%) translateY(24px) rotateX(83deg) rotateY(4deg);
          transform: translateX(-53%) translateY(24px) rotateX(83deg) rotateY(4deg);
}
.paper:after {
  content: '';
  position: absolute;
  height: 80px;
  width: 50px;
  border: 6px solid black;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

@-webkit-keyframes rotate-pencil {
  0% {
    -webkit-transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
            transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
  }
  50% {
    -webkit-transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
            transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
  }
  100% {
    -webkit-transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
            transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
  }
}

@keyframes rotate-pencil {
  0% {
    -webkit-transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
            transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
  }
  50% {
    -webkit-transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
            transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
  }
  100% {
    -webkit-transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
            transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
  }
}


.dark {
  opacity: 0;
  transition: all 1s;
}







/* Initial state: pencil offscreen */
.pencil-animate {
  transform: translateY(-200vh);
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s ease;
   opacity: 0; 
}

/* Animate-in with 1s delay */
.pencil-animate.animate-in {
  transform: translateY(0);
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s ease;
   opacity: 1; 
  transition-delay: 1s; /* ✅ delay entrance by 1s */

}

/* Name text */
.name h2,
.name h4 {
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s ease;
  transform: translateY(20px);
  opacity: 0;
}

.name.animate-text h2,
.name.animate-text h4 {
  transform: translateY(0);
  opacity: 1;
}

















/* slide in animation */

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}


@media only screen and (min-width: 768px) {

.intro {
  opacity: 0;
}

 .triggered .intro {
  transform: translateY(30px);
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s;
  opacity: 1;

 }

 .fade-in {
    transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s;
    opacity: 0;
  }

 .add-animation-up {
    transform: translateY(30px);
    transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s;
    opacity: 0;
  }
 .add-animation-up-delay {
    transform: translateY(30px);
    transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s;
    transition-delay: 0.3s;
    opacity: 0;
  }

.add-animation-left {
    transform: translateX(50px);
    transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.5s;
    opacity: 0;
  }
.add-animation-right {
    transform: translateX(-50px);
    transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.5s;
    opacity: 0;
  }
.scale-up{
    transform: scaleX(0.8) scaleY(0.8);
    transition: transform 2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.5s;
    opacity: 0;
  }

  .active {
    transform: translateX(0);
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }

}