/******************* 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;
  color: #333;
background: rgb(60,60,60);
background: linear-gradient(86deg, rgba(60,60,60,1) 0%, rgba(37,37,37,1) 51%);
    /*position: relative;*/
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.left { 
  position: relative;
  height: 100vh;
  width: 50%;
  left: -50%;
  }

/* this is the animation bit for the right on page load */
@media only screen and (min-width: 1024px) {

.triggered .left {  
  transform: translateX(100%);
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s;
  position: fixed;

  }
}

.right { 
  position:relative;
  height: auto;
  width: 50%;
  background-color: #EFC90E;
  left: 100%;
}
/* this is the animation bit for the right on page load */
@media only screen and (min-width: 1024px) {
  .triggered .right {  
      transform: translateX(-150%);
      transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 1s;
    
    }
  }


.middle-right {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

.name {
  position: fixed;
  color: #EFC90E;
  top: 4rem;
  left: 4rem;
}

.top-right {
  position: absolute;
  top: 4rem;
  left: 0rem;
}

.bottom-right {
  position: absolute;
  bottom: 4rem;
  right: 0rem;
}

.title {
  position: fixed;
  color: #EFC90E;
  text-align: left;
  bottom: 4rem;
  left: 4rem;
  padding-right: 4rem;

}

.content {
  max-width: 450px;
  margin: auto;
  padding-bottom: 4rem;

}



.video-wrapper {
  max-width: 450px;
  max-height: 450px;
  width: 100%;
  /* height: 100%; */
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 50%;
   /* --o:calc(50%*tan(-37.5deg));
   clip-path: polygon( 
    var(--o) 50%,
    50% var(--o),
    calc(100% - var(--o)) 50%,
    50% calc(100% - var(--o))
  );  */
}



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

  .wrapper {
    display: block;
  }
  .left { 
    position: relative;
    display:block;
    height: 100vh;
    width: 100%;
    }
    .right {
      display:block;
      background-color: #EFC90E;
      height: auto;
      width: 100%;
      padding: 0 4rem;
      position: relative;
      left: 0;
    }
    .content {
      padding: 0 2rem 4rem 2rem;
    }
    

}




/******************* colour *******************/


.yellow {
  color: #EFC90E;
}

.bg-yellow {
  background-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;
}


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

.mb-8 {
  margin-bottom: 8rem;
}
.mt-8 {
  margin-top: 8rem;
}


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

.rounded {
    border-radius: 4px;
}

.circle-img {
    /*width: 50px;*/
    border-radius: 50% 60% 45% 60%;
    filter: grayscale(1);
    margin-top: 5vw;
}

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

.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;
}




 /****************** video *********************/


 /* Change all text and icon colors in the player. */
 .vjs-theme-forest {
    --vjs-theme-forest--primary: #EFC90E;
/*    --vjs-theme-forest--primary: #fff;*/
    --vjs-theme-forest--secondary: #000;
 
}

.vjs-theme-forest .vjs-picture-in-picture-control { display: none; }
.vjs-theme-forest .vjs-volume-control { display: none; }
.vjs-theme-forest .vjs-fullscreen-control { display: none; }
.vjs-theme-forest .vjs-remaining-time { left: 35%; color:#EFC90E;} 
.vjs-theme-forest .vjs-progress-control { display: none; }
.vjs-theme-forest .vjs-play-control { left: 48%; margin-left: -10px; }





.vjs-theme-forest .vjs-big-play-button, .vjs-theme-forest:hover .vjs-big-play-button {
    background: url('data:image/svg+xml,<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1_4)"><path fill-rule="evenodd" clip-rule="evenodd" d="M44 88C19.738 88 0 68.262 0 44C0 19.738 19.738 0 44 0C68.262 0 88 19.738 88 44C88 68.262 68.262 88 44 88ZM44 3C21.393 3 3 21.393 3 44C3 66.608 21.393 85 44 85C66.607 85 85 66.608 85 44C85 21.393 66.607 3 44 3ZM60.063 46.898L39.629 60.741C39.1027 61.0981 38.489 61.3049 37.854 61.339C37.2189 61.3732 36.5866 61.2335 36.025 60.935C35.463 60.6377 34.9929 60.1926 34.6653 59.6477C34.3376 59.1028 34.165 58.4788 34.166 57.843V30.158C34.166 28.859 34.878 27.675 36.025 27.066C36.5863 26.7665 37.2188 26.6262 37.8541 26.6604C38.4893 26.6946 39.1031 26.902 39.629 27.26L60.062 41.103C60.536 41.4232 60.9242 41.8547 61.1926 42.3599C61.4611 42.865 61.6015 43.4282 61.6016 44.0002C61.6017 44.5722 61.4614 45.1355 61.1932 45.6408C60.925 46.146 60.5369 46.5777 60.063 46.898ZM58.38 43.587L37.946 29.744C37.8652 29.6868 37.769 29.6554 37.67 29.654C37.5865 29.6548 37.5044 29.6761 37.431 29.716C37.3496 29.7571 37.2815 29.8205 37.2346 29.8987C37.1877 29.9769 37.1639 30.0668 37.166 30.158V57.843C37.166 58.105 37.332 58.232 37.431 58.285C37.531 58.338 37.73 58.403 37.946 58.257L58.38 44.414C58.4484 44.3689 58.5044 44.3074 58.5429 44.2351C58.5813 44.1627 58.6009 44.0819 58.6 44C58.6007 43.9183 58.5809 43.8377 58.5425 43.7655C58.5041 43.6934 58.4482 43.632 58.38 43.587Z" fill="%23EFC90E"/></g><defs><clipPath id="clip0_1_4"><rect width="88" height="88" fill="%23EFC90E"/></clipPath></defs></svg>');
} 




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


.pencil-wrapper {
  opacity: 1;
  transition: all 1s;
  z-index: 0;
  left: 70%;

  overflow: hidden;
  height: 100vh;

}




.pencil {
  position: fixed;
 
   /* background-color: #ccc; */
  left: 50%;
  top: 15%;
 
  -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: 1024px) { 

.pencil-wrapper {
      z-index: 3; 
      position: fixed;
    }
  .pencil {
    position: fixed;
    margin-top: -240px; 
    left: 50%;
    top: 50%;
  }
} 


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;
}












/* 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) {



  

  .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;
  }

}