@font-face {
    font-family: 'Raleway-Regular';
    src: url(../fonts/Raleway-Regular.eot);
    src: url(../fonts/Raleway-Regular.eot?#iefix) format('embedded-opentype'),
         url(../fonts/Raleway-Regular.otf) format('otf'),
         url(../fonts/Raleway-Regular.svg#Raleway-Regular) format('svg'),
         url(../fonts/Raleway-Regular.ttf) format('truetype'),
         url(../fonts/Raleway-Regular.woff) format('woff'),
         url(../fonts/Raleway-Regular.woff2) format('woff2');
    font-display: swap;
  }
  
  @font-face {
      font-family: 'MV-Boli';
      src: url('../fonts/MVBoli.eot');
      src: url('../fonts/MVBoli.eot?#iefix') format('embedded-opentype'),
          url('../fonts/MVBoli.woff2') format('woff2'),
          url('../fonts/MVBoli.woff') format('woff'),
          url('../fonts/MVBoli.ttf') format('truetype'),
          url('../fonts/MVBoli.svg#MVBoli') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
  }
  
  
  /* ------------ Default Elements --------------	*/
  
  html{
      margin: 0px;
      padding: 0px;
      font-family: 'Raleway-Regular', Helvetica, Verdana, Arial;
      font-variant-caps: normal;
      font-size: 12px;
      /* text-transform: uppercase; */
      /* letter-spacing: 40px; */
  }
  #fp-nav{
      display: none;
  }
  #fp-nav.show{
      display: block;
  }
  
  .fp-tooltip{
      font-family: 'Raleway-Regular', Helvetica, Verdana, Arial!important;
  }
  body{
      margin: 0px;
      padding: 0px;
  }
  
  p, div, span, input, select, ul, ol, li {
  
  }
  h{
      
  }
  h1{
      
  }
  h2{
      
  }
  h3{
      
  }
  [onclick]:hover{
      cursor: pointer;
  }
  
  .clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }
  /* ------------ Custom Elements ---------------	*/
  
  body{
      perspective: 1600px;
      background: black;
  }
  .scroll-container{
      transform-style: preserve-3d;
  }
  .fp-section{
      transform-style: preserve-3d;
      overflow: hidden;
      animation-direction: normal;
      animation-fill-mode: forwards;
      animation-duration: 1s;
  }
  
  /* Interface Elements	*/
  #container{
      position: relative;
      display: block;	
  }
  
  /* --Header	*/
  #header{
      z-index: 9;
      box-sizing: border-box;
      position: fixed;
      /* padding: 20px; */
      width: 100%;
      /* bottom: 0px; */
  }
  
  #name_container{
      font-size: 14px;
      letter-spacing: 1.5vw;
      font-weight: lighter;
      color: #aeaeae;
      flex-direction: column;
      justify-content: center;
      /* align-items: stretch; */
      align-content: center;
      transition: all 1.2s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      flex: 1 1 auto;
  }
  
  #name{
      text-align: center;
      padding: 0 40px;
      transition: all 1.2s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      max-width: 100%;
      white-space: nowrap;
      text-transform: uppercase;
  }
  #name_container.go-left {
      flex: 0 1 auto;
  }
  
  /* --Footer	*/
  #footer{
      
  }
  
  
  /* --Content */
  #content{
      
  }
  #title_container{
      /* 	font-size: 70px;
      color: white;
      position: absolute;
      left: 60%;
      top: 30%;
      left: 50%;
      top: 10%;     */
      font-size: 40px;
      color: #afb1a1;
      position: absolute;
      left: 35%;
      top: 25%;
      text-transform: uppercase;
      letter-spacing: 40px;
      display: none;
      }
  #quote_container{
      font-size: 18px;
      color: #b5b5b5;
      position: absolute;
      left: 35%;
      top: 47%;
      width: 50%;
      letter-spacing: 6px;
      display: none;
  }
  
  .top_bar{
      background: rgb(0, 0, 0);
      display: table;
      width: 100%;
      height: 100dvh;
      transition: height 1s, width 1s, margin 1s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      vertical-align: middle;
      /* border-radius: 22px; */
      /* margin: 20px; */
      box-sizing: border-box;
      position: relative;
      /* box-shadow: 3px 3px 36px rgba(0,0,0,0.5); */
      margin: -40px;
      width: calc(100% + 80px);
      height: calc(100dvh + 80px);
      display: flex;
      justify-content: space-between;
  }
  
  .top_bar > *{
      display: inline-flex;
      vertical-align: middle;
      justify-content: flex-end;
  }
  
  .hamburger_menu {
      width: 0px;
      transition: width 1s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .hamburger_menu.expand{
      width: auto;
  }
  .navbar-toggle {
      float: right;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      margin: 0;
      padding: 20px;
      border: none;
      display: block;
      background: none;
      cursor: pointer;
  }
  .icon-bar {
      background-color: #fff;
      display: block;
      width: 22px;
      height: 3px;
      border-radius: 1px;
      margin-top: 5px;
      transition: 0.5s all;
  }
  .navbar-toggle .icon-bar:nth-of-type(1) {
      margin-top: 0px;
  }
  
  /************** Hamburger Menu *****************/
  
  
  .top_bar_shadow{
      background: rgb(255 255 255);
      width: 100%;
      height: 100dvh;
      position: absolute;
      top: -100dvh;
      z-index: 8;
      transform-style: preserve-3d;
      overflow: hidden;
      animation-direction: normal;
      animation-fill-mode: forwards;
      animation-duration: 1s;
      display: block;
      /* border: 2px solid #949494; */
      box-sizing: border-box;
      font-weight: bolder;
  }
  .top_bar_shadow ul{
      box-sizing: border-box;
      height: calc(60dvh);
      width: 100%;
      margin: auto;
      text-align: center;
      color: #000000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      list-style: none;
      font-size: 4dvh;
      flex-wrap: nowrap;
      justify-self: flex-end;
      margin-top: calc(29px + 20dvh);
      text-transform: uppercase;
      /* bottom: 0px; */
      position: absolute;
      letter-spacing: 1vw;
      /* line-height: calc(20px + 5vh); */
      padding: 0 10px;
      z-index: 999;
  }
  .top_bar_shadow ul li a,
  .top_bar_shadow ul li a:hover{
      color: #000000;
      text-decoration: none;
  }
  
  .top_bar_shadow li.active::after,
  .top_bar_shadow li:hover::after{
      max-width: 100%;
      width: 100%;
      left: 0px;
  }
  .top_bar_shadow li::after{
      display: block;
      content: "";
      max-width: 0px;
      transition: 0.5s max-width, 0.5s left;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      width: 100%;
      left: 50%;
      height: 5px;
      position:absolute;
      background: black;
      border-radius: 6px;
  }
  .top_bar_shadow li:last-child::after{
      display: none;
  }
  .contact{
      font-size: 0.6em;
      color: dimgrey;
      letter-spacing: normal;
      /* text-shadow: 0 0 2px black, 0 0 26px #0000006b; */
  }
  .show-menu .top_bar_shadow{
      animation-name: menu-show;
  }
  .show-menu.hide-menu .top_bar_shadow{
      animation-name: menu-hide;
      animation-direction: reverse;
  }
  
  .show-menu .fp-section.active{
      animation-name: menu-hide-page;
  }
  .show-menu.hide-menu .fp-section.active{
      animation-name: menu-show-page;
      animation-direction: reverse;
  }
  
  
  .navbar-toggle .icon-bar:nth-of-type(1) {
      margin-top: 0px;
  }
  
  .show-menu:not(.hide-menu) .navbar-toggle .icon-bar:nth-of-type(1) {
      rotate: 45deg;
      margin-left: 0px;
      margin-top: 7px;
  }
  
  .show-menu:not(.hide-menu) .navbar-toggle .icon-bar:nth-of-type(3) {
      rotate: -45deg;
      margin-left: 0px;
      margin-top: -11px;
  }
  .show-menu:not(.hide-menu) .navbar-toggle .icon-bar:nth-of-type(2) {
      opacity:0;
  }
  
  
  /**************** Homepage Section ***********************/
  
  .arrows{
      position: absolute;
      top: 643px;
      left: 761px;
      cursor: pointer;
      /* margin-left: -9px; */
  }
  #arrows-up{
      /* top: 249px; */
      left: 754px;
      transform: rotate(180deg);
  }
  
  .arrow_animations{
      position: absolute;
      top: 0px;
      left: 0px;	
  }
  .arrow_animations > img{
      position: absolute;
      top: 0px;
      left: 0px;
  /*     opacity: 0; */
  /*     transition: all 0.5s;	 */
  }
  .img_arrow_1{
  }
  .img_arrow_2{
      
  }
  .img_arrow_3{
  }
  
  /* Video Elements	*/
  
  .bg_container{
      /* position: absolute; */
      top: 0px;
      left: 0px;
      min-width: 100%;
      min-height: 100%;
      transition: background-position 1s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  #bg_container{
      position: absolute;
      top: 0px;
      left: 0px;
      min-width: 100%;
      min-height: 100%;
      box-shadow: inset 0px 30px 250px 40px rgba(0,0,0,0.4);
      background: url(../images/page2b.jpg);
      background-size: auto;
      background-position: bottom left;
      transition: background-position 1s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      background-position-y: 300px;
      background-position: top left!important;
  
  }
  .video_container{
      width: 100%;
      height: 100dvh;
      position: absolute;
      /* opacity: 0.5; */
      top: 0px;
      left: 0px;
      z-index: -1;
  }
  video.bgvid {
      position: fixed;
      top: 50%;
      left: 100%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -ms-transform: translateX(-100%) translateY(-50%);
      -moz-transform: translateX(-100%) translateY(-50%);
      -webkit-transform: translateX(-100%) translateY(-50%);
      transform: translateX(-100%) translateY(-48%);
      /* background: url(polina.jpg) no-repeat; */
      background-size: cover;
      /* display: none; */
  }
  
  .cover{
      /* background-image: url(../images/lines.png); */
      /* opacity: 0.2; */
      /* width: 100%; */
      /* height: 80vh; */
      /* position: absolute; */
      /* top: 0px; */
      /* left: 0px; */
      /* filter: brightness(0); */
      /* background-color: rgba(0, 0, 0, 0.1); */
  }
  .main_titles_container{
      /* position: relative; */
  }
  
  .titles{
      position: absolute;
      left: 543px;
      top: 307px;
      z-index: 9;
      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 0.5) 0s;
  }
  .scrollUp {
      top: -607px;
  }
  .titles img {
      display: block;
      width: 100%;
  }
  .designer{
      
  }
  .programmer{
      margin-top: 25px;
  }
  
  .contract{
      height: 59px;
      width: 100%;
      margin: 0px;
  }
  
  #bg_container.video_move{
      background-position-y: 50dvh!important;
  }
  
  
  /*********** Designer Section **********************/
  
  .designer-section{
      background: white;
      font-size: 14px;
      color: #8b8b8b;
  }
  .designer-section .gallery{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 5vw;
      padding: 5vw;
      height: 100%;
      perspective: 1500px;
  }
  
  .designer-section .gallery-category{
      /* background: gray; */
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      transform: rotate3d(0.2, 1, 0, -110deg);
      opacity: 0;
      transition: 0.7s all;
      /* gap: 20px; */
      position: relative;
      transform-style: preserve-3d;
      position: absolute;
      width: calc(33%);
      height: calc(100dvh - 59px);
      /* top: 40px; */
      padding: 5vw;
      box-sizing: border-box;
      padding-right: 0px;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      border-radius: 12px;
      /* padding-top: calc(5vw - 59px); */
      cursor: pointer;
      top: 59px;
  }
  .designer-section .gallery-category:nth-child(2) {
      left: 33%;
  }
  .designer-section .gallery-category:nth-child(3) {
      left: 66%;
  }
  .designer-section .gallery-category:last-child {
      padding-right: 5vw;
  }
  
  .designer-section .gallery-category.show{
      transform: rotate3d(0.2, 1, 0, 0deg);
      opacity: 1;
  }
  
  
  .designer-section .gallery-category.show:hover:not(.flip){
      scale:1.1;
  }
  
  .designer-section .gallery-category .text{
      font-size: 1.5vw;
      font-weight: bold;
      height: 30px;
      flex: 0 0 auto;
      vertical-align: middle;
      z-index: 9;
  }
  .designer-section .gallery-category#government .text {
      text-align: left;
  }
  .designer-section .gallery-category .thumbnail{
      flex: 1 1 auto;
      background: grey;
      /* transform: translateZ(0px); */
      transform-style: preserve-3d;
      background-size: cover;
      background-position: center;
      border-radius: 12px;
      box-shadow: 8px 8px 18px rgb(237 225 210);
  }
  
  .designer-section #government .thumbnail{
      background-image: url(../images/istockphoto-1061329170-2048x2048.jpg);
      background-position: left center;
  }
  .designer-section #commercial .thumbnail{
      background-image: url(../images/istockphoto-1061328680-2048x2048.jpg);
      /*background-image: url(../images/istockphoto-1438275053-2048x2048.jpg);*/
      box-shadow: 8px 8px 18px rgb(73 59 52 / 34%);
      /* margin-top: 29px; */
      flex: 1 1 auto;
      height: 100%;
  }
  .designer-section #posters .thumbnail{
      background-image: url(../images/istockphoto-1149597075-2048x2048.jpg);
      background-position: left center;
      box-shadow: 8px 8px 18px rgb(140 138 126 / 50%);
      /* background-position-x: right; */
  }
  
  .designer-section .gallery-category .thumbnail-content{
      position: absolute;
      width: 100%;
      height: 100%;
      background: #313131;
      transform: rotateY(180deg) translateZ(1px);
      padding: 40px;
      box-sizing: border-box;
      background-image: url(../images/australia1.jpg);
      background-size: cover;
      color: gray;
      overflow: hidden;
      border-radius: 12px;
      transition: 0.7s border-radius, 0.7s left;
      left: 0%;
      /* perspective: 10px; */
      /* transform-style: preserve-3d; */
      background: white;
  }
  
  .designer-section .gallery-category#posters .thumbnail-poster{
      background-size: cover;
      background-position: center;
      background-position-y: 65%;
      width:100%;
      height: 100%;
      position: absolute;
      top:0px;
      left:0px;
      transition: 0.5s left;
      transition-timing-function: cubic-bezier(0.09, 0.49, 0.36, 1);
      padding: 40px;
      box-sizing: border-box;
  }
  .designer-section .gallery-category#posters .nokia{
      background-image: url(../images/istockphoto-178873006-2048x2048-edited.jpg);
  }
  .designer-section .gallery-category#posters .dates{
      background-image: url(../images/dates.jpg);
      left: 100%;
  }
  
  .designer-section .gallery-category.move1#posters .dates{
      left: 0px;
  }
  .designer-section .gallery-category.move1#posters .nokia{
      left: -100%;
  }
  .designer-section .gallery-category#commercial .thumbnail-content{
      background: #87b964;
      /*background: linear-gradient(180deg, rgba(135,185,100,1) 0%, rgba(126,173,95,1) 100%);*/
      transition: 1s background;
      /* transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
  }
  .designer-section  #commercial.move1 .thumbnail-content{
      background: rgb(138,171,206);
      /*background: linear-gradient(180deg, rgba(138,171,206,1) 0%, rgba(85,71,168,1) 100%);*/
  }
  
  .designer-section .gallery-category.flip .thumbnail-content{
      border-radius: 0px;
  }
  
  .designer-section .gallery-category .thumbnail-content .thumbnail-text{
      /* text-align: right; */
  }
  .designer-section .gallery-category.flip{
      transform: rotate3d(0, 1, 0, -180deg);
      width: 100vw;
      height: 100dvh;
      top: 59px;
      z-index: 999;
      padding: 0vw;
      left: 0px;
      cursor: default;
  }
  .designer-section .gallery-category.flip#government{
  
  }
  .designer-section .gallery-category.flip#commercial{
      top: 0px;
      margin-top: 29px;
  }
  .designer-section .gallery-category.flip#posters{
  
  }
  .designer-section .thumbnail-close{
      position: absolute;
      top:0px;
      right: 0px;
      margin: 10px 15px;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      padding: 7px 12px;
      color: black;
      background: #80808024;
      border-radius: 20px;
      z-index: 999;
  }
  .designer-section #posters .thumbnail-close{
      color: white;
      background: #ffffff4d;
      border-radius: 20px;
  }
  .designer-section .thumbnail-text-container{
      width: 35%;
      text-align: right;
      margin-left: auto;
      transition: 1.5s margin-top, 1.5s opacity;
      transition-timing-function: cubic-bezier(0.09, 0.49, 0.36, 1);
      margin-top: 3%;
      opacity: 0;
  }
  
  .designer-section #posters .thumbnail-text-container{
      width: 21%;
      color: white;
      text-align: left;
      margin-right: auto;
      margin-left: 0px;
      z-index: 9;
      position: absolute;
  }
  .designer-section #posters .thumbnail-text-container *{
      color: white;
      text-align: left;
      /* text-shadow: 0px 0px 12px rgb(0 0 0),0px 0px 12px rgb(0 0 0); */
  }
  
  .designer-section h2{
      margin-top: 0px;
  }
  
  .designer-section #posters .thumbnail-text-container .thumbnail-text{
      /* font-weight: bold; */
      /* text-shadow: 0px 0px 12px rgb(0 0 0), 0px 0px 2px rgb(0 0 0), 0px 0px 2px rgb(0 0 0), 0px 0px 2px rgb(0 0 0), 0px 0px 2px rgb(0 0 0), 0px 0px 2px rgb(0 0 0), 0px 0px 2px rgb(0 0 0); */
  }
  .designer-section #commercial .thumbnail-text-container{
      width: 35%;
      text-align: left;
      margin-left: 0px;
      margin-right: auto;
      color: white;
  }
  .designer-section #commercial .thumbnail-text-container *{
      text-align: left;
  }
  
  .designer-section .gallery-category.flip  .thumbnail-text-container{
      transition-delay: 1s;
      margin-top: 15px;
      opacity: 1;
  }
  .designer-section .gallery-category#commercial.flip.move1  .thumbnail-text-container{
      transition-delay: 0s;
      transition: 0.5s margin-top;
      margin-top: -50px;
      opacity: 0;
      pointer-events: none;
  }
  .designer-section .thumbnail-text-container2{
      width: 30%;
      text-align: left;
      margin-right: auto;
      transition: 1.5s margin-top, 1.5s opacity;
      transition-timing-function: cubic-bezier(0.09, 0.49, 0.36, 1);
      margin-top: 3%;
      opacity: 0;
      color: white;
      top: 20px;
      position: absolute;
      z-index: 9;
  }
  .designer-section .gallery-category.flip.move1  .thumbnail-text-container2{
      margin-top: 0px!important;
      opacity: 1;
  }
  
  .designer-section .phones-container{
      width: 100vw;
      text-align: right;
      margin-left: auto;
      perspective: 1600px;
      /* transform-style: preserve-3d; */
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100dvh;
  }
  
  .designer-section .thumbnail-phone-container{
      position: absolute;
      width: 100%;
      height: 200%;
      top: -53px;
      left: 10%;
      transform-style: preserve-3d;
      transition: 0.5s transform;
      transition-timing-function: ease-in-out;
      transform: rotateX(4deg) rotateY(14deg) rotateZ(-22deg) translateZ(-800px);
      pointer-events: none;
  }
  .designer-section .thumbnail-phone{
      width: 100%;
      transition: 0.2s all;
      transition-timing-function: ease-in-out;
      margin-bottom: 30px;
      cursor: pointer;
  }
  .designer-section .thumbnail-phone.tablet{
      width: 180%;
  }
  
  .designer-section .move1 .thumbnail-phone-line,
  .designer-section .move1 .thumbnail-phone-line-middle,
  .designer-section .move1 .thumbnail-phone-line-top{
      transform: translateY(-40%);
  }
  .designer-section .move1 .thumbnail-laptop-line,
  .designer-section .move1 .thumbnail-laptop-line-middle,
  .designer-section .move1 .thumbnail-laptop-line-top
  {
      transform: translateY(-40%);
  }
  .designer-section .move1 .thumbnail-laptop-line-middle{
      transform: translateY(-40%) translatez(5px);
  }
  .designer-section  .move1 .thumbnail-laptop-line-top{
      transform: translateY(-40%) translatez(10px);
  }
  
  .designer-section .thumbnail-phone-line .thumbnail-phone {
      filter: none;
  }
  .designer-section .visible .thumbnail-phone-line  .thumbnail-phone {
      filter: drop-shadow(-7px 7px 3px rgba(0,0,0,0.3));
  }
  .designer-section .move1 .thumbnail-phone-line .thumbnail-phone,
  .designer-section .move1 .thumbnail-laptop-line .thumbnail-laptop{
      filter: drop-shadow(-6px 11px 5px rgba(0,0,0,0.4));
  }
  .designer-section #government.move1 .thumbnail-phone-container{
      transform: rotateX(45deg) rotateY(5deg) rotateZ(-21deg) translateX(-294px) translateZ(-54px);
  }
  .designer-section .move2 .thumbnail-phone-line,
  .designer-section .move2 .thumbnail-phone-line-middle,
  .designer-section .move2 .thumbnail-phone-line-top{
      transform: translateY(-73%);
  }
  
  .designer-section .move2 .thumbnail-phone-line .thumbnail-phone,
  .designer-section .move2 .thumbnail-laptop-line .thumbnail-laptop{
      filter: drop-shadow(6px 6px 4px rgba(0,0,0,0.3));
  }
  .designer-section #government.move2 .thumbnail-phone-container{
      transform: rotateX(44deg) rotateY(-8deg) rotateZ(11deg) translateZ(202px)  translateX(-556px);
  }
  
  .designer-section #commercial.move3 .thumbnail-phone{
      transform: translateY(-550%);
  }
  .designer-section #commercial.move3 .thumbnail-phone-line .thumbnail-phone{
      /* filter: drop-shadow(-5px 8px 3px rgba(0,0,0,0.2)); */
  }
  
  .designer-section .thumbnail-phone-line,
  .designer-section .thumbnail-phone-line-middle,
  .designer-section .thumbnail-phone-line-top{
      position: absolute;
      transition: 0.7s all;
      width: 19vw;
      left: 66%;
      top: 22%;
  }
  .designer-section .thumbnail-phone-line{
      transform: translateZ(1px); 
  }
  .designer-section .thumbnail-laptop-line,
  .designer-section  .thumbnail-laptop-line-middle,
  .designer-section  .thumbnail-laptop-line-top{
      position: absolute;
      transition: 0.7s all;
      transform-style: preserve-3d;
      /* transform: translateX(-114%) translateY(9%); */
      width: 51vw;
      transform: translateY(5%) translateZ(0px);
      left: 8%;
      top: -20%;
  }
  .designer-section .thumbnail-laptop-line-middle{
      transform: translateY(5%) translatez(5px);
  }
  .designer-section  .thumbnail-laptop-line-top{
      transform: translateY(5%) translatez(10px);
  }
  
  .designer-section .thumbnail-laptop-line .thumbnail-laptop, 
  .designer-section .thumbnail-laptop-line-middle .thumbnail-laptop,
  .designer-section .thumbnail-laptop-line-top .thumbnail-laptop{
      width: 100%;
      transition: 0.7s all;
      transition-timing-function: ease-in-out;
      margin-bottom: 300px;
      cursor: pointer;
  }
  .designer-section .thumbnail-laptop-line-top .thumbnail-laptop,
  .designer-section .thumbnail-phone-line-top .thumbnail-phone{
      pointer-events: all;
  }
  
  .designer-section .thumbnail-phone-line,
  .designer-section .thumbnail-phone-line-middle{
      display: none;
  }
  
  .designer-section .enable .thumbnail-phone-line, 
  .designer-section .enable.thumbnail-phone-line-middle{
      display: block;
  
  }
  
  .designer-section .enable .thumbnail-phone-line-middle,
  .designer-section .enable .thumbnail-phone-line-top{
      display: block;
  }
  
  .designer-section .enable.visible .thumbnail-phone-line-middle{
      transform: translateZ(0.6vw);
  }
  .designer-section .enable.visible .thumbnail-phone-line-top{
      transform: translateZ(1.2vw);
  }
  
  .designer-section .enable.visible.move1 .thumbnail-phone-line-middle{
      transform: translateZ(0.6vw) translateY(-40%);
  }
  .designer-section .enable.visible.move1 .thumbnail-phone-line-top{
      transform: translateZ(1.2vw) translateY(-40%);
  }
  
  
  .designer-section .enable.visible.move2 .thumbnail-phone-line-middle{
      transform: translateZ(0.6vw) translateY(-73%);
  }
  .designer-section .enable.visible.move2 .thumbnail-phone-line-top{
      transform: translateZ(1.2vw) translateY(-73%);
  }
  .designer-section .move2 .thumbnail-laptop-line{
      transform: translateY(-62%) translatez(0px);
  }
  .designer-section  .move2 .thumbnail-laptop-line-top{
      transform: translateY(-80%) translatez(10px);
  }
  
  .designer-section .move2 .thumbnail-laptop-line-middle{
      transform: translateY(-62%) translatez(5px);
  }
  .designer-section  .move2 .thumbnail-laptop-line-top{
      transform: translateY(-62%) translatez(10px);
  }
  
  .designer-section .thumbnail-phone-line-middle .thumbnail-phone,
  .designer-section .thumbnail-phone-line-top .thumbnail-phone{
      /* filter: none!important; */
  }
  .designer-section .thumbnail-phone-line-middle .thumbnail-phone{
  }
  .designer-section .thumbnail-phone-line-middle{
      transform: translateZ(0px);
  }
  .designer-section .thumbnail-phone-line-top{
      transform: translateZ(1px);
  
  }
  .designer-section .thumbnail-phone-line-top .thumbnail-phone:hover{
      animation-name: flash;
      animation-duration: 0.2s;
  }
  
  .designer-section .thumbnail-laptop-line-top .thumbnail-laptop:hover{
      animation-name: flash;
      animation-duration: 0.2s;
  }
  
  .thumbnail-next,
  .thumbnail-prev{
      display: none;
      position: absolute;
      right: 20px;
      top: calc(50dvh - 50px);
      font-size: 90px;
      /* scale: 0.5 1; */
      cursor: pointer;
      opacity: 0;
      translate: 0px -50px;
      transition: 1s opacity, 1s translate;
      transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
      z-index: 999;
  }
  .thumbnail-next svg, 
  .thumbnail-prev svg{
      fill: #969696;
      width: 75px;
      height: auto;
  }
  
  .thumbnail-prev{
      right: auto;
      left: 20px;
      translate: 50px 0px;
      display: block;
      top: 20px;
      rotate: 90deg;
      left: calc(50% - 50px);
  }
  .thumbnail-next{
      display: block;
      rotate: 90deg;
      left: calc(50% - 50px);
      right: auto;
      top: auto;
      bottom: 20px;
  }
  
  .enable .thumbnail-next,
  .enable .thumbnail-prev{
      display: block;
  }
  .visible .thumbnail-next,
  .visible .thumbnail-prev{
      opacity: 1;
      translate: 0px;
  }
  
  .designer-section .laptop-australia-image{
      position: absolute;
      width: 726px;
      margin-top: 32px;
      margin-left: 30px;
      height: 485px;
      background: url(../images/Australia/1-Homepage-Laptop.jpg);
      background-size: 100% 100%;
      box-shadow: inset 0px 0px 6px rgba(0,0,0,0.5);
  }
  
  
  
  
  .designer-section #posters .dates .thumbnail-text-container,
  .designer-section #posters .dates .thumbnail-text-container * {
          color: #664c35;
  }
  
  
  
  /****************** Commercial ***************/
  
  
  .designer-section .devices-wrapper{
      width: 100vw;
      text-align: right;
      margin-left: auto;
      perspective: 1600px;
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100dvh;
  }
  .designer-section .devices-container {
      position: absolute;
      width: 100%;
      height: 200%;
      top: -5vw;
      left: 5vw;
      transform-style: preserve-3d;
      transition: 0.5s transform;
      transition-timing-function: ease-in-out;
      transform: rotateX(56deg) rotateY(-20deg) rotateZ(30deg) translateZ(-5.8vw) translateY(18vw);
      pointer-events: none;
  }
  .designer-section .laptop-line
  {
      position: absolute;
      transition: 0.7s all;
      transform-style: preserve-3d;
      /* transform: translateX(-114%) translateY(9%); */
      width: 51vw;
      transform: translateY(5%) translateZ(0px);
      left: 27%;
      top: -20%;
  }
  .designer-section .laptop-line > * ,
  .designer-section .phone-line > * {
      position: absolute;
      transition: 0.7s all;
      transform-style: preserve-3d;
  }
  .designer-section .phone-line {
      position: absolute;
      transition: 0.7s all;
      width: 16vw;
      left: 4%;
      top: -9%;
      transform-style: preserve-3d;
  }
  .designer-section .laptop,
  .designer-section .phone {
      width: 100%;
      pointer-events: all;
  }
  .designer-section .keyboard,
  .designer-section .phone {
      margin-bottom: 4vw;
  }
  .designer-section .keyboard{
      pointer-events: none;
  }
  .designer-section .phone {
      margin-bottom: 34vw;
  }
  .designer-section .phone:first-child {
      margin-bottom: 45vw;
  }
  .designer-section .phone:nth-child(3) {
      margin-bottom: 50vw;
  }
  .designer-section #commercial .tablet {
      width: 190%;
      float:right;
  }
  
  .designer-section .laptop.screen{
      margin: 0px;
      transform: translateZ(14vw) translateY(8.7vw) rotateX(-60deg);
  }
  
  
  .designer-section .laptop-line .bottom .screen-wrapper{
      transform: translateX(0.1vw) translateZ(-0.4vw) translateY(-0.6vw);
  }
  
  .designer-section .laptop-line .middle .screen-wrapper{
      transform: translateX(-0.1vw) translateZ(-0.2vw) translateY(-0.3vw);
  }
  
  .designer-section .laptop-line .screen-wrapper{
      transform-style: preserve-3d;
  }
  
  /** Create 3d effect by brightening bottom & Middle **/
  
  .designer-section .laptop-line > .bottom .laptop.screen,
  .designer-section .laptop-line > .middle .laptop.screen{
  }
  
  .designer-section .bottom .laptop.keyboard {
      transform: translateZ(0.5vw);
      filter: drop-shadow(2px 4px 6px black);
  }
  
  .designer-section .middle .laptop.keyboard {
      transform: translateZ(1vw);
  }
  
  .designer-section .top .laptop.keyboard {
      transform: translateZ(1.5vw);
  }
  
  
  
  .designer-section .bottom .phone{
      transform: translateZ(0.5vw);
      filter: drop-shadow(2px 4px 6px #000000b3);
  
  }
  
  .designer-section .middle .phone{
      transform: translateZ(1vw);
  
  }
  .designer-section .top .phone {
      transform: translateZ(1.5vw);
  }
  
  #commercial .thumbnail-next svg, 
  #commercial .thumbnail-prev svg,
  #posters .thumbnail-next svg, 
  #posters .thumbnail-prev svg
  {
      fill: #ffffff;
  }
  #posters.move1 .thumbnail-next svg, 
  #posters.move1 .thumbnail-prev svg
  {
      fill: #56402d;
  }
  
  
  .designer-section .move1 .devices-container {
      transform: rotateX(32deg) rotateY(-20deg) rotateZ(30deg) translateX(-45vh)  translateZ(-88vh) translateY(-87vw);
  }
  .designer-section .move2 .devices-container {
      transform: rotateX(65deg) rotateY(-11deg) rotateZ(31deg) translateX(-29vh)  translateZ(-31vh) translateY(-177vw);
  }
  .designer-section .move3 .devices-container {
      transform: rotateX(43deg) rotateY(-5deg) rotateZ(21deg) translateX(9.5vh)  translateZ(-2vh) translateY(-203vw);
  }
  .designer-section .top .phone:hover,
  .designer-section .top .laptop:hover{
      animation-name: flash;
      animation-duration: 0.2s;
      cursor: pointer;
  }
  
  
  /***************** Work Experience Section *********************/
  .section2 .container{
      background: #383838;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      height: 100dvh;
  }
  
  .section2 .title{
      margin-top: 58px;
      height: auto;
      font-size: 3.5rem;
      padding: 20px 40px;
      font-weight: 100;
      color: white;
  }
  .section2 .folders{
      flex: 1 1 auto;
      position: relative;
      box-shadow: inset 3px 3px 12px rgba(0,0,0,0.5);
  }
  .section2 .folders .folder{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px; 
      overflow-x: visible;
      overflow-y: clip;
      /*transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
      transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      cursor: pointer;
      pointer-events: none;
  }
  .section2 .paper-texture{
      position: absolute;
      width: 100%;
      height: 100%;
      mix-blend-mode: multiply;
      opacity: 1;
      /* display: none; */
      background: url(../images/paper.jpg);
      top: 0px;
      left: 0px;
      background-repeat: repeat;
      background-size: 25%;
      transform: rotate(8deg) scale(2);
      opacity: 0.5;
  }
  .open{
      transform: translateX(-70vw);
  }
  .folder-hidden{
      transform: translateX(-100vw);
  }
  
  .section2 .folder .insert{
      background: #c0b283;
      width: 100%;
      height: 200%;
      transform: rotate(-8deg) translateY(-20%);
      box-shadow: 0px 3px 8px rgba(0,0,0,0.5);
      pointer-events: auto;
      overflow: clip;
      border: 1px solid #00000047;
  }
  
  .section2 .folder .content{
      position: absolute;
      top: 40px;
      left: 40px;
      width: 55%;
      font-size: 16px;
      pointer-events: all;
  }
  
  .section2 .folder .work-title{
      top: 50%;
      position: absolute;
      right: -27%;
      transform: rotate(90deg);
      font-size: 1.5rem;
      pointer-events: none;
      width: 60%;
      text-align: center;
      font-weight: bold;
  }
  
  .section2 h1{
      font-size: 1.5em;
      margin: 0px;
  }
  
  .section2 h2{
      font-size: 1.1em;
      margin: 0px;
      margin-bottom: 20px;
      color: #444444;
  }
  .section2 .folders .folder:first-child{
      width: 100%;
      color: white;
  }
  .section2 .folders .folder:first-child .insert{
      background: #383838;
  }
  .section2 .folders .folder:first-child .content{
      padding-left: 25%;
  }
  .section2 .folders .folder:first-child .content h2{
      color: #b9b9b9;
  }
  .section2 .folders .folder:nth-child(2){
      width: 95%;
  }
  .section2 .folders .folder:nth-child(2) .insert{
      background: #b8b8b8;
  }
  .section2 .folders .folder:nth-child(2) .content{
      padding-left: 20%;
  }
  
  .section2 .folders .folder:nth-child(3){
      width: 90%;
  }
  .section2 .folders .folder:nth-child(3) .insert{
      background: #f4f4f4;
  }
  .section2 .folders .folder:nth-child(3) .content{
      padding-left: 15%;
  }
  
  .section2 .folders .folder:nth-child(4){
      width: 85%;
  }
  
  .section2 .folders .folder:nth-child(4) .insert{
      background: #ddd1c1;
  }
  .section2 .folders .folder:nth-child(4) .content{
      padding-left: 10%;
  }
  
  .section2 .folders .folder:nth-child(5){
      width: 80%;
  }
  
  .bold{
      font-weight: bold;
      /* line-height: 2em; */
  }
  
  #fp-nav ul li a span, .fp-slidesNav ul li a span {
      background: #fff!important;
      box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  }
  
  .fp-viewing-education #fp-nav ul li a span{
      background: #000!important;
      box-shadow: none;
  }
  
  .fp-viewing-designer #fp-nav ul li a span{
      background: #000!important;
      box-shadow: none;
  }
  
  .fp-sr-only{
  
  }
  
  /**** Work Experience ****/
  .work-titles-container {
      position: absolute;
      left: 94vw;
      font-size: 20px;
      color:white;
      top: 21dvh;
      font-size: 25px;
      display: flex;
      flex-direction: column;
      height: calc(80dvh - 59px);
      justify-content: space-between;
      /* mix-blend-mode: overlay; */
      /* transform-style: preserve-3d; */
      /* transform: translate3d(0, 0, 0); */
      /* z-index: -1; */
      /* background-blend-mode: overlay; */
      transform: translateZ(10px);
  }
  
  .work-titles-container .arrow{
      position: absolute;
      margin-left: -25%;
      margin-top: 7%;
      width: 21%;	
      opacity: 0;
      transition: 0.5s opacity;
  }
  .work-titles-container a.show .arrow{
      opacity: 1;
  }
  .work-titles-container a:nth-child(2) .arrow{
      width: 15%;
      margin-left: -20%;
      transform: rotate(14deg);
      margin-top: 5%;
  }
  .work-titles-container a:nth-child(3) .arrow{
      width: 15%;
      margin-left: -20%;
      transform: rotate(29deg);
      margin-top: 3%;
  }
  .work-titles-container a:nth-child(4) .arrow{
      width: 15%;
      margin-left: -19%;
      transform: rotate(36deg);
      margin-top: 1%;
  }
  .work-titles-container a:nth-child(5) .arrow{
      width: 15%;
      margin-left: -19%;
      transform: rotate(45deg);
      margin-top: -2%;
  }
  
  .work-titles-container .arrow img{
      width: 100%;
  }
  
  .work-titles-container a {
      color: #fed79e;
      display: block;
      text-decoration: none;
      /* mix-blend-mode: soft-light; */
      line-height: max(3dvh, 35px);
      pointer-events: all;
      z-index: 9;
      text-shadow: 0 0 12px rgba(0,0,0,1);
      letter-spacing: -3px;
  }
  .work {
      perspective: 1600px;
  }
  .work .container{
      background: url(../images/desk.jpg);
      background-size: cover;
      height: 120dvh;
      /* margin-top: 59px; */
      position: absolute;
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      transition: 0.3s transform;
      transition-timing-function: ease-in-out;
      transition-delay: 0s;
      width: 150%;
      left: -25%;
      top: -10%;
      /* max-height: 3000px; */
      font-family: 'MV-Boli';
      /* line-height: 1.3em; */
      /* background-blend-mode: overlay; */
      will-change: transform;
  }
  .work .container div,
  .content-plane, 
  .content-plane div{
      will-change: transform;
  }
  .book-text ul{
      /* margin-top: 5px; */
      padding-left: 15px;
      margin-top: 5px;
  }
  .work.open-cover .container{
      transform: rotateX(4deg) rotateY(0deg);
      transition: 0.7s transform;
      transition-delay: 0.1s;
  }
  .work .items{
      transform-style: preserve-3d;
      position: absolute;
      left: 20dvw;
      top: 17dvh;
      width: 100%;
      height: 100dvh;
  }
  .work .pencil{
      height: 70dvh;
      position: absolute;
      left: 20vw;
      top: 51dvh;
      rotate: 64deg;
  }
  
  .work .pencil img{
      height: 100%;
  }
  
  .work .color-pencils{
      height: 70dvh;
      position: absolute;
      left: 38vw;
      top: 36dvh;
  }
  .work .color-pencils img{
      height: 100%;
      width: auto;
  }
  .work .calculator-container{
      left: 100vw;
      height: 42dvw;
      position: absolute;
      transform-style: preserve-3d;
  }
  
  .work .calculator{
      position: absolute;
      transform-style: preserve-3d;
  }
  .work .calculator:nth-child(2){
      transform: translateZ(12px);
  }
  
  .work .calculator:nth-child(3){
      transform: translateZ(25px);
  }
  .work .calculator img{
      width: auto;
      height: 100%;
  }
  .work .mouse-container{
      left: 90vw;
      height: 42dvw;
      position: absolute;
      transform-style: preserve-3d;
  }
  .work .mouse{
      position: absolute;
      transform-style: preserve-3d;
  }
  .work .mouse:nth-child(2){
      transform: translateZ(15px);
  }
  
  .work .mouse:nth-child(3){
      transform: translateZ(30px);
  }
  .work .mouse img{
      width: auto;
      height: 100%;
  }
  .work .book{
      position: absolute;
      /* width: 50vw; */
      /* height: 80%; */
      top: 3dvh;
      left: 36vw;
      /* perspective: 1600px; */
      rotate: -5deg;
      transform-style: preserve-3d;
  }
  .work .cover{
      background: url(../images/book-top.png);
      position: absolute;
      width: 100%;
      height: 100%;
  }
  .work .cover img{
      height: 100%;
      width: auto;
  }
  .work-titles-container a.show .company-name {
      text-decoration: underline;
  }
  /*** Title on inside of book Cover *****/
  .work .page .title{
      margin: 10dvh;
      font-size: 6dvh;
      /* margin-left: 54vh; */
      color: #d2b89c;
      position: absolute;
      left: 0px;
      transform: scaleX(-1) translateZ(-1px);
      line-height: 1em;
      text-shadow: 0 0 12px rgba(0,0,0,1);
  }
  
  /*** Title on outside Cover *****/
  .work .page .title:first-child{
      transform: translateZ(1px);
  }
  
  .work .company-name{
      font-size: 1.4em;
  }
  
  .work .page{
      background: url(../images/book-page.png);
      position: absolute;
      height: 100%;
      width: 100%;
      background: none;
      padding: 5% 7% 8% 4%;
      box-sizing: border-box;
      /* z-index: 1; */
      top: 0px;
      transform: translateZ(25px) translateY(3px);
      transform-style: preserve-3d;
      transform-origin: left;
      transition: 0.5s transform, 0.5s left;
      left: 0px;
      pointer-events: none;
  }
  .work .page:last-child{
      background: none;
      z-index: 3;
      padding: 2.5% 5.0% 5.6% 3.1%;
      transform-style: preserve-3d;
      transform-origin: left;
      transition: 0.5s transform, 0.5s left;
      left: 0px;
      transform: translateZ(3.5vw);
  }
  .work .page:nth-child(6){
      padding: 5% 6% 10% 5%;
  }
  .work .page .book-top{
      height: 100%;
      width: 100%;
      /* transform-origin: left; */
      /* transition: 0.5s transform; */
  }
  .work .page:last-child{
      transform: rotateY(-125deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(1vh)  translateY(0vw);
      left: 1vh;
      z-index: 9;
      animation-name: close-cover;
      animation-direction: reverse;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
      /* transform: rotateY(-125deg) rotateZ(0.5deg) translateX(-1vw) translateZ(1vh)  translateY(0vw); */
      transform: translateZ(30px) translateX(-1.5vw);
      transition: none;
      animation-timing-function: linear;
  }
  .work.open-cover .page:last-child{
      /* transform: rotateY(-125deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(1vh)  translateY(0vw); */
      left: 1vh;
      z-index: 9;
      animation-name: open-cover;
      animation-direction: normal;
      animation-fill-mode: forwards;
      animation-duration: 0.5s;
      /* transform: rotateY(-125deg) rotateZ(0.5deg) translateX(-1vw) translateZ(1vh)  translateY(0vw); */
      /* transform: translateZ(3.5vw) translateX(-1.5vw); */
      transition: none;
      animation-timing-function: linear;
  }
  
  .work.open-page-1 .page:nth-child(6){
      transform: rotateY(-122deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(-1.1vw)  translateY(0vw);
      left: 4vh;
      z-index: 9;
  }
  .work.open-page-1 .book .page:nth-child(6) .book-text{
      opacity: 0;
  }
  .work.open-page-2 .page:nth-child(5){
      transform: rotateY(-122deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(-1.2vw)  translateY(0vw);
      left: 4vh;
      z-index: 9;
  }
  .work.open-page-2 .book .page:nth-child(5) .book-text{
      opacity: 0;
  }
  .work.open-page-3 .page:nth-child(4){
      transform: rotateY(-122deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(-1.3vw)  translateY(0vw);
      left: 4vh;
      z-index: 9;
  }
  .work.open-page-3 .book .page:nth-child(4) .book-text{
      opacity: 0;
  }
  .work.open-page-4 .page:nth-child(3){
      transform: rotateY(-122deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(-1.4vw)  translateY(0vw);
      left: 4vh;
      z-index: 9;
  }
  .work.open-page-4 .book .page:nth-child(3) .book-text{
      opacity: 0;
  }
  .work.open-page-5 .page:nth-child(2){
      transform: rotateY(-122deg) rotateZ(0.5deg) translateX(-0.5vw) translateZ(-1.5vw)  translateY(0vw);
      left: 2.5vh;
      z-index: 9;
  }
  .work.open-page-5 .book .page:nth-child(2) .book-text{
      opacity: 0;
  }
  .work.page:nth-child(6){
      transform: translateZ(-1.1vw) translateX(-1.9vh);
      left: 2.5vh;
      z-index: 9;
  }
  .work .page:nth-child(5){
      transform: translateZ(20px) translateX(-1.9vh)  translateY(0px);
      left: 2.5vh;
      z-index: 9;
  }
  .work .page:nth-child(4){
      transform: translateZ(15px) translateX(-1.9vh)  translateY(-2px);
      left: 2.5vh;
      z-index: 9;
  }
  .work .page:nth-child(3){
      transform: translateZ(10px) translateX(-1.9vh) translateY(1px);
      left: 2.5vh;
      z-index: 9;
  }
  .work .page:nth-child(2){
      transform: translateZ(5px)  translateX(-1.9vh);
      left: 2.5vh;
      z-index: 9;
  }
  .work .page .page-image{
      width: 100%;
      height: auto;
      /* position: absolute; */
  }
  .work .page:first-child{
      position: relative;
      width: auto;
      background: none;
      height: 85dvh;
      padding: 0px;
      transform: translateX(-0.5vh) translateZ(0vw);
  }
  
  .work .page:first-child .book-bottom{
      height: 100%;
      width: auto;
      transform: translateZ(0vw);
  }
  
  .work .book .book-text{
          padding: 7% 12% 12% 9%;
      position: absolute;
      /* z-index: 3; */
  }
  
  .work .book .insert{
      /* position: absolute; */
  }
  .work .book .book-text{
      /* position: absolute; */
      font-size: calc(1.6dvh);
      line-height: 1.8dvh;
      transition: 0.5s opacity;
      transition-timing-function: cubic-bezier(0.32, 1.26, 0.87, 0.96);
  }
  
  .work .book .book-text .content{
      /* position: absolute; */
      font-size: 1.1em;
      margin-top: 5px;
  }
  .work .book .book-text .content h1{
      /* position: absolute; */
      font-size: 1.5em;
      margin: 0px;
      line-height: 1.3em;
  }
  .work .book .book-text .content h2{
      /* position: absolute; */
      font-size: 1.2em;
      margin: 0px;
      line-height: 2em;
      margin-bottom: 5px;
  }
  
  .work .screen-wrapper{
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 9999;
      width: 100%;
      height: 100dvh;
      transform-style: preserve-3d;
      transform: translateZ(200px);
  }
  
  .work .screen-container{
      position: absolute;
      top: 13dvh;
      left: 20dvw;
      width: 70dvw;
      height: 70%;
      transform-style: preserve-3d;
      /* transform: translateZ(-54px); */
  }
  
  .work .screen{
      width: 100%;
      height: 100%;
      background: #0000001a;
      /* margin-left: 20dvw; */
      /* margin-top: 50px; */
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid black;
      position: absolute;
      top: 0px;
      /* left: 50%; */
      transform-style: preserve-3d;
      /* filter: blur(1px); */
      transition: 0.5s;
      /* width: 1px; */
      /* left: 50%; */
      box-sizing: border-box;
  }
  
  .work.open-cover .screen{
      width: 100%;
      height: 100%;
      left: 0px;
  }
  .work .screen + .screen{
      transform: translateZ(10px);
  }
  .work .screen + .screen + .screen{
      transform: translateZ(15px);	
  }
  .work .screen + .screen + .screen + .screen{
      transform: translateZ(20px);	
  }
  .work .screen:first-child{
      /* background: #ffffff21; */
      transform: translateZ(5px);
      filter: none;
      backdrop-filter: blur(5px);
      /* width: 96%; */
      /* height: 96%; */
      /* margin-left: 2%; */
      /* margin-top: 1%; */
      /* border: 2px solid white; */
  }
  .work .screen:last-child{
      transform: translateZ(21px)!important;
      filter: none;
      backdrop-filter: blur(1px);
      /* width: 98%; */
      /* height: 98%; */
      /* margin-left: 1%; */
      /* margin-top: 0.5%; */
      /* width: 96%; */
      /* height: 96%; */
      /* margin-left: 2%; */
      /* margin-top: 1%; */
      /* border: 2px solid white; */
  }
  .work .screen .content{
      font-size: 0.5em;
      transition: margin-left 0.5s;
      /* margin-left: -100%; */
      width: 100%;
      /* font-family: 'Raleway-Regular'; */
      /* overflow-x: clip; */
      /* overflow-y: auto; */
      /* height: 181px; */
      /* overflow: hidden; */
      display: flex;
      width: calc(700% + 120px);
      gap: 20px;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: stretch;
      height: calc(100% - 40px);
  }
  
  .work .screen-bottom-controls{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-content: center;
      flex-direction: row;
      align-items: center;
      padding-bottom: 1px;
  }
  .work .circle-breadcrumbs{
      /* width: 100%; */
      display: flex;
      justify-content: space-between;
      align-content: center;
      flex-direction: row;
      align-items: center;
      width: 100px;
  }
  .work .circle-breadcrumbs .circle{
      width: 7px;
      height: 7px;
      display: inline-block;
      border: 2px solid white;
      border-radius: 10px;
      margin: 0px;
  }
  .work .circle-breadcrumbs .circle.active{
      background: white;
      
  }
  .work .screen button{
      border: 2px solid white;
      background: none;
      border-radius: 16px;
      padding: 5px 15px;
      color: white;
      float: right;
      text-shadow: 0 0 1px black;
  }
  .work .screen-text{
      /* margin: 4dvh 2dvw; */
      color: white;
      text-shadow: 0 0 1px #00000080;
      position: absolute;
      z-index: 9;
      font-size: 2em;
      font-family: monospace;
      /* border: 1px solid #00000078; */
      border-radius: 16px;
      padding: 6dvh 4dvw;
      /* box-shadow: inset 0px 0px 6px #00000014; */
      font-family: 'Raleway-Regular';
      height: calc(100%);
      box-sizing: border-box;
      /* overflow: hidden; */
      width: 100%;
  }
  .work .job-body{
      overflow: hidden;
      width: 100%;
      position: relative;
  }
  .work .screen .shadow-text{
      color: #00000078;
      filter: blur(1px);
      /* border: 1px solid #00000040; */
      opacity: 0.5;
  }
  .work .screen .shadow-text h2{
      color: #00000078;
  }
  .work .screen .shadow-text button{
      color: #00000070;
      border: 1px solid #0000007a;
      text-shadow: none;
  }
  
  .work .screen .shadow-text .circle{
      border: 1px solid gray;
  }
  
  .work .screen .shadow-text .circle.active{
      background: #00000033;
      border: 1px solid #00000070;
  }
  .work .book-text{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      height: 100%;
      flex-wrap: nowrap;
      align-items: flex-start;
      /* overflow: hidden; */
      gap: 20px;
  }
  .work .work-title {
      padding-top: 20px;
  }
  .work .job-description{
      overflow-x: clip;
      overflow-y: auto;
      height: calc(100% - 122px);
      padding-right: 20px;
  }
  .work .content > div{
      box-sizing:border-box;
      flex: 1 0 0;
      position: relative;
      height: 100%;
  }
  .work .job-header{
      /* text-align: right; */
      /* border-top: 1px solid white; */
      border-bottom: 1px white dashed;
      padding-bottom: 10px;
  }
  .work .shadow-text .job-header{
      /* border-top: 1px solid white; */
      border-bottom: 1px black dashed;
  }
  
  .work.open-page-1 .content{
      margin-left: 0px;
  }
  .work.open-page-2 .content{
      margin-left: calc(-100% - 20px);
  }
  
  .work.open-page-3 .content{
      margin-left: calc(-200% - 40px);
  }
  
  .work.open-page-4 .content{
      margin-left: calc(-300% - 60px);		
  }
  
  .work.open-page-5 .content{
      margin-left: calc(-400% - 80px);		
  }
  
  .work.open-page-6 .content{
      margin-left: calc(-500% - 100px);		
  }
  .work .popup-container{
      position:absolute;
      z-index: 999;
      /* bottom: 0px; */
      left: 140px;
      top: 0px;
  }
  .work .popup{
      width: max-content;
      height: auto;
      border: 1px dashed white;
      border-radius: 16px;
      font-size: 10px;
      transition: 0.25s all;
      overflow: hidden;
      max-width: 0px;
      /* padding-left: 0px; */
      /* padding-right: 0px; */
      opacity: 0;
      position: absolute;
      /* top: 0px; */
      margin-left: 20px;
      padding: 8px 0;
  }
  
  .work .popup.on{
      padding: 8px 10px;
      max-width: 200px;
      opacity: 1;
      margin-left: 0px;
      transition-delay: 0.25s;
  }
  
  .work .popup.no-delay{
      transition-delay: 0s;
  }
  .work .popup>div{
      width: max-content;
  }
  
  .work .content h2{
      font-size: 1.2em;
      color: #d8d8d8;	
  }
  
  .work .laptop-container{
      left: -5vw;
      height: 550px;
      position: absolute;
      transform-style: preserve-3d;
      width: 100%;
      top: -35dvh;
  }
  
  /********* Scrollbars ***********/
  
  .job-description::-webkit-scrollbar {
      background-color: transparent;
      width: 7px;
  }
  
  /* Add a thumb */
  .job-description::-webkit-scrollbar-thumb {
      background: #ffffff;
      border-radius: 7px;
  }
  
  /* Buttons */
  .job-description::-webkit-scrollbar-button:single-button {
      background-color: white;
      height: 7px;
      width: 7px;
      border-radius: 7px;
      display: none;
  }
  
  .job-description::-webkit-scrollbar-track {
      background-color: #ffffff1a;
      border-radius: 7px;
  }
  
  
  /* Add a thumb */
  .shadow-text .job-description::-webkit-scrollbar-thumb {
      background: #00000033;
  }
  
  .shadow-text .job-description::-webkit-scrollbar-track {
      background-color: #00000012;
  }
  
  
  /************** Section 3
  *************** Skills & Education ***************/
  
  .section3{
      
  }
  .section3 .wrapper {
      display: grid;
      align-content: stretch;
      justify-content: space-between;
      align-items: stretch;
      justify-items: stretch;
      grid-template-columns: 1fr 1fr;
      height: calc(100% - 59px);
      margin-top: 59px;
      gap: 40px;
      padding: 40px;
      grid-template-rows: min-content 2fr;
      background: url(../images/grid-background.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      box-sizing: border-box;
      /* filter: brightness(1.05); */
  }
  .section3 .title{
      font-size: min(6vw, 30px);
      color: #00aeef;
  }
  .education-container{
      grid-column: span 2;
  }
  
  .content-plane{
      perspective: 2000px;
      transform-style: preserve-3d;
      transform: rotate3d(-41, 86, -16, 45deg) rotateY(19deg);
      position: absolute;
      transition: 1s transform;
      transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
      left: 0px;
      margin-top: 30dvh;
      scale: 0.8;
      width: 512px;
      cursor: pointer;
  }
  
  .skills-container{
      z-index:1;
  }
  .libraries-container{
      z-index:2;
  }
  .content-plane.rotate:hover {
      /*transform: rotate3d(-41, 86, -16, 45deg) rotateY(-40deg);*/
      transform: rotate3d(-41, 86, -16, 45deg) rotateY(-25deg);
  }
  
  .content-plane.rotate.transition{
      transition-duration: 0.4s;	
  }
  
  .content-plane.rotate {
      transform: rotate3d(-41, 86, -16, 45deg) rotateY(0deg);
  }
  .skills-box{
      transform: rotateY(180deg) scaleY(0.0) translateY(-15px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform-style: preserve-3d;
      transition: 1s transform, 0.3s scale, 0.3s box-shadow;
      transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
      margin-left: 70px;
      height: 100%;
  }
  
  .skills-box:hover,
  .skills-box.hover{
      scale: 1.2 1.05;
      transition-timing-function: linear;
  }
  
  .skills-box > div{
      --side-size: 30px;
      --side-offset: 15px;
      height: var(--side-size);
      width: var(--side-size);
      position: absolute;
      border: 0px solid gray;
      box-sizing: border-box;
  }
  
  .skills-box:nth-child(2){
      margin-left: 0px;
      padding-left: 0px;
  }
  
  .box-back{
      transform: rotateY(180deg) translateZ(var(--side-offset));
      filter: brightness(0.7) saturate(1.3);
      /* box-shadow: 0px 0px 6px rgba(0,0,0, 0.5); */
      transition: 0.5s box-shadow;
      /* transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); */
  }
  .box-front{
      transform: rotateY(0deg) translateZ(var(--side-offset));
      filter: brightness(0.78) saturate(2);
  }
  .box-left{
      transform: rotateY(-90deg) translateZ(var(--side-offset));
  }
  .box-right{
      transform: rotateY(90deg) translateZ(var(--side-offset));
      filter: brightness(0.5) saturate(2);
  }
  .box-top{
      transform: rotateX(90deg) translateZ(var(--side-offset));
      filter: brightness(0.85) saturate(1.4);
  }
  .box-bottom{
      transform: rotateX(-90deg) translateZ(var(--side-offset));
  }
  
  /* Box Colors */
  .blue > div{
      background: #83b2df;
  }
  
  .skills-box:hover.blue .box-back,
  .skills-box.hover.blue .box-back{
      box-shadow: 6px 0px 6px rgb(71 144 214 / 40%);
  }
  .skills-box:hover.yellow .box-back,
  .skills-box.hover.yellow .box-back{
      box-shadow: 6px 0px 6px rgb(235 209 80 / 40%);
  }
  .skills-box:hover.red .box-back,
  .skills-box.hover.red .box-back{
      box-shadow: 6px 0px 6px rgb(255 73 78 / 40%);
  }
  .skills-box:hover.aqua .box-back,
  .skills-box.hover.aqua .box-back{
      box-shadow: 6px 0px 6px rgb(7 172 195 / 40%);
  }
  .skills-box:hover.orange .box-back,
  .skills-box.hover.orange .box-back{
      box-shadow: 6px 0px 6px rgb(243 141 38 / 40%);
  }
  .skills-box:hover.purple .box-back,
  .skills-box.hover.purple .box-back{
      box-shadow: 6px 0px 6px rgb(141 91 182 / 40%);
  }
  .skills-box:hover.pink .box-back,
  .skills-box.hover.pink .box-back{
      box-shadow: 6px 0px 6px rgb(242 108 165 / 40%);
  }
  .skills-box:hover.darkblue .box-back,
  .skills-box.hover.darkblue .box-back{
      box-shadow: 6px 0px 6px rgb(54 90 197 / 40%);
  }
  
  .skills-container .yellow > div{
      background: #ede584;
  }
  
  .skills-container .yellow > .box-front{
      filter: none;
      background: #ebd150;
  }
  .skills-container .yellow > .box-top{
      filter: none;
      background: #f2e140;
  }
  
  .skills-container .red > div{
      background: #f3787b;
  }
  
  .skills-container .aqua > div{
      background: #5dc7d6;
  }
  
  .skills-container .orange > div{
      background: #ffbe7c;
  }
  
  .skills-container .purple > div{
      background: #a080ba;
  }
  
  .skills-container .pink > div{
      background: #f59fc4;
  }
  
  .skills-container .darkblue > div{
      background: #5c73b8;
  }
  
  .skills-box.expand{
      transform: rotateY(0deg) scaleY(8) translateY(-15px);
  }
  
  .skills-box.orange.expand{
      transform: rotateY(0deg) scaleY(6) translateY(-15px);
  }
  .skills-box.purple.expand{
      transform: rotateY(0deg) scaleY(4) translateY(-15px);
  }
  .skills-box.pink.expand{
      transform: rotateY(0deg) scaleY(4) translateY(-15px);
  }
  .skills-box.darkblue.expand{
      transform: rotateY(0deg) scaleY(2) translateY(-15px);
  }
  .box-hover{
      padding: 0 37px;
      background: transparent!important;
  }
  .language-div {
      height: auto;
      position: absolute;
      width: 60px;
      transform: translateY(0px);
      margin-left: -30px;
      transition: 0.3s all;
      text-align: center;
  }
  .language-div:hover,
  .language-div.hover
   {
      scale: 1.5;
  }
  
  .language-div img{
      width: 40px;
      height: auto;
      margin-top: 20px;
  }
  
  .chart{
      position: absolute;
      width: 130%;
      top: -236px;
      transform: translateZ(-15px);
      /* transition: 1s box-shadow; */
  }
  .content-plane.rotate:hover .chart {
  /*     background: #ffffffc2;
      box-shadow: 0px 0px 10px 60px rgba(255,255,255,0.8);
   */}
  .chart hr{
      border: 1px solid #d7d7d7!important;
      margin-top: 8.9%;
  }
  .chart hr:first-child{
      margin-top: 6px;
  }
  
  .chart-text{
      float: right;
  }
  
  .education-container .content{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
  }
  .libraries-container .content{
      flex: 1 1 auto;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-content: stretch;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      margin-left: 25%;
  }
  .libraries-container .content{
      margin-top: 10%;
      transition: 1s margin-top, 1s opacity;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);	
      opacity: 0;
  }
  .slide-in .content{
      margin-top: 0px;
      opacity: 1;
  }
  .libraries-chart{
      /* margin-top: 5%; */
      /* display: flex; */
      /* width: 100%; */
      /* position: relative; */
  }
  
  .libraries-chart .libraries-chart-img{
      height: 100%;
      width: auto;
  }
  
  .libraries-chart-container{
      /* margin-top: 5%; */
      display: block;
      /* height: 100%; */
      width: min(40%, 200px);
      position: relative;
  }
  
  .percentages-container{
      position: absolute;
      top: -25%;
      left: -100%;
      width: 300%;
      height: 150%;
  }
  .text-pointer {
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: stretch;
      justify-content: space-evenly;
      position: absolute;
      width: 50%;
      height: 50%;
      gap: 10px;
      /* transition: 0.5s all; */
      padding: 20px;
      /* margin-left: -20px; */
      cursor: pointer;
  }
  .nodejs{
      left: 0px;
      bottom: 0px;
      margin-left: -20px;
      margin-bottom: -20px;
  }
  .dotnet{
      left: 0px;
      top: 4%;
      align-items: start;
      height: 45%;
      width: 46%;
      /* padding: 20px; */
  }
  .text-pointer > *{
      width: 50%;
  }
  .text-pointer .text{
      width: 40%;
      text-align: center;
      transition: 0.6s all;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .text-pointer .pointer{
      width: 60%;
      flex: 1 1 auto;
      height: 100%;
      /* vertical-align: top; */
      position: relative;
  }
  .dotnet .pointer{
      width: 60%;
      height: 100%;
      position: relative;
  }
  .text-pointer .line-container {
      height: 50%;
      position: absolute;
      top: 0px;
      width: 60%;
  }
  .dotnet .line-container {
      height: 60%;
      position: absolute;
      top: 0px;
      width: 100%;
  }
  .line{
      width: 100%;
      height: 5px;
      border-radius:3px;
      margin-top: 30%;
      transition: 0.6s all;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      position: relative
  }
  
  .line .circle{
      width: 10px;
      height: 10px;
      border-radius: 6px;
      margin-left: -2px;
      position: absolute;
      margin-top: -2px;
  }
  .line .circle.end{
      right:0px;
  }
  .purple .line{
      background: #d34d9c;
      transform: rotate(334deg);
  }
  .yellow .line {
      background: #fdbf56;
      transform: rotate(11deg);
      margin-top: 14%;
  }
  
  .yellow .line .circle{
      background: #fdbf56;
  }
  
  .purple .line .circle{
      background: #d34d9c;
  }
  
  
  .green .line .circle{
      right:0px;
      background: #12b15a;
  }
  .green .line .circle.end{
      right:auto;
      left:0px;
  }
  .aqua .line .circle{
      right:0px;
      background: #00b2d1;
  }
  
  
  .aqua .line .circle.end{
      right:auto;
      left:0px;
  }
  
  /**** Libraries / Other ************/
  
  .other{
      left: auto;
      top: 0px;
      align-items: start;
      height: 45%;
      flex-direction: row-reverse;
      right: 0px;
      width: 43%;
      margin-right: -20px;
      margin-top: -40px;
  }
  .other .text {
      width: 40%;
      text-align: left;
  }
  .other .pointer{
      width: 60%;
      height: 100%;
      position: relative;
  }
  .other .line-container {
      height: 70%;
      position: absolute;
      top: 0px;
      width: 100%;
  }
  .green .line{
      background: #12b15a;
      transform: rotate(335deg);
      margin-top: 37%;
  }
  .other-smaller{
      font-size: 0.8em;
  }
  
  /**** Libraries / jQuery ************/
  
  .jquery{
      left: auto;
      bottom: 0px;
      align-items: center;
      height: 45%;
      flex-direction: row-reverse;
      right: 0px;
      width: 37%;
      margin-right: -20px;
      margin-top: -20px;
  }
  .jquery .text {
      width: 40%;
      text-align: left;
  }
  .jquery .pointer{
      width: 60%;
      height: 100%;
      position: relative;
  }
  .jquery .line-container {
      height: 70%;
      position: absolute;
      top: 0px;
      width: 100%;
  }
  .aqua .line {
      background: #00b2d1;
      transform: rotate(16deg);
      margin-top: 23%;
  }
  
  
  
  .section3 .percent{
      font-size: 2em;
  }
  
  .purple .text{
      color: #d34d9c;
  }
  .yellow .text {
      color: #fdbf56;
  }
  
  .aqua .text{
      color: #00b2d1;
  }
  .green .text {
      color: #12b15a;
  }
  
  
  /**** Libraries on Hover ***********/
  
  .text-pointer:hover .text {
      width: 70%!important;
      font-size: 1.5em;
  }
  .text-pointer.green:hover .line {
      transform: rotate(331deg) translateY(12px);
  }
  .text-pointer.yellow:hover .line {
      transform: rotate(10deg) translateY(8px);
  }
  .text-pointer.dotnet:hover .text {
      width: 50%!important;
  }
  
  /* ------------- Media Queries ----------------	*/
  
  
  @media screen and (max-aspect-ratio: 6 / 5){
      
      .work .items{
          /* left: -5vh; */
      }
      .work .work-titles-container {
          font-size: 2.7vw;
          height: calc(70dvh - 59px);
      }
      .work .book .book-text {
          font-size: calc(1.5dvh);
          line-height: 1.6dvh;
      }
      .work .page:first-child {
          height: 80dvh;
      }
      .work .work-titles-container .company-details {
          display: none;
      }
      /* 	
      .work .container{
          background: url(../images/work-background-small.png);
          background-size: cover;
          height: 132vh;
          background-position-y: 59px;
          background-repeat: repeat;
      } */
  }
  
  @media screen and (max-aspect-ratio: 6 / 3){
      .work .items{
          /* left: 17vh; */
      }
      .work-titles-container {
          font-size: 2vw;
          left: 100vw;
      }
  }
  @media screen and (max-aspect-ratio: 6 / 4){
      .work .items{
          /* left: 5vh; */
      }
  }
  
  
  @media screen and (min-aspect-ratio: 2 / 2) {
      #bg_container{
          background-size: auto 100%;
          background-position-x: -32vh!important;
          background-position-y: 19vh!important;
      }
      .titles {
          left: 35.9vh;
          top: 37.5vh;
          width: 90vh;
      }
  
      .programmer {
          margin-top: 3.2vh;
      }
      
      .arrows{
          left: 61.5vh;
          top: 79.5vh;
      }
      #arrows-up{
          left: 60.7vh;
          top: 29.5vh;
      }
      .arrows img{height: 8vh;}
  
  }
  @media screen and (max-aspect-ratio: 20 / 15) and (min-aspect-ratio: 1 / 1) {
      #bg_container{
          background-size: 180%;
          background-position-x: -55vw!important;
          background-position-y: 6.7vw!important;
      }
      .titles {
          left: 6.5vw;
          top: 23.3vw;
          width: 80.5vw;
      }
  
      .programmer {
          margin-top: 3.2vw;
      }
      
      .video_move {
          background-position-y: 27.7vw!important;
      }	
      .arrows{
          left: 29.5vw;
          top: 61.4vw;
      }
      #arrows-up{
          left: 28.6vw;
          top: 15.5vw;
      }
      .arrows img{
          height: 8vw;
      }
  
  }
  
  @media screen and (max-aspect-ratio : 2 / 2) {	
      #bg_container{
          background-size: 180%;
          background-position-x: -55vw!important;
          background-position-y: 27.7vw!important;
      }
      .titles {
          left: 6.5vw;
          top: 44.3vw;
          width: 80.5vw;
      }
  
      .programmer {
          margin-top: 3.2vw;
      }
      
      .video_move {
          background-position-y: 27.7vw!important;
      }	
      .arrows{
      left: 29.5vw;
      top: 82.4vw;
      }
      #arrows-up{
          left: 28.6vw;
          top: 35.5vw;
      }
      .arrows img{
          height: 8vw;
      }
      
      .designer-section .gallery {
          display: block;
          padding-top: 0px;
      }
      .designer-section .gallery-category{
          display: block;
          position: relative;
          width: 100%;
          height: calc(33dvh - 5dvh);
          padding: 5dvh;
          padding-bottom: 0px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          flex-wrap: nowrap;
          gap: 0px;
      }
      .designer-section .gallery-category .thumbnail {
          flex: 1 1 auto;
          height: 100%;
      }
      .designer-section .gallery-category.flip .thumbnail {
          height: 100dvh;
      }
      .designer-section .gallery-category:nth-child(2) {
          left: 0px;
      }
      .designer-section .gallery-category#commercial:nth-child(2) {
          flex-direction:column-reverse;   
      }
      .designer-section .gallery-category:nth-child(3) {
          left: 0px;
      }
      .designer-section .gallery-category:last-child {
          padding-right: 5dvh;
      }
      .designer-section .gallery-category.flip {
          position: absolute;
          /* margin-top: 0px!important; */
      }
      .designer-section .gallery-category.flip#commercial {
          margin-top: 59px;
          height: calc(100dvh - 50px);
      }
      .designer-section .gallery-category .thumbnail-content {
          position: relative;
          width: 100%;
          height: 100%;
      }
      .designer-section .gallery-category.flip .thumbnail-content {
          height: 100%;
      }
  
      .thumbnail-prev {
          top: -20px;
      }
      .thumbnail-next {
          bottom: -10px;
      }
      .designer-section .gallery {
          padding: 0px;
      }
          .content-plane{
          scale: 0.4;
          margin-top: 30dvh;
          /* margin-left: -110px; */
      }
      
      .designer-section .thumbnail-phone-container{
          top: -150px;
          left: 40%;
          width: 150%;
      }
  
      .designer-section .thumbnail-laptop-line,
      .designer-section  .thumbnail-laptop-line-middle,
      .designer-section  .thumbnail-laptop-line-top{
          width: 85vw;
      }
      .designer-section .thumbnail-phone-line, .designer-section .thumbnail-phone-line-middle, .designer-section .thumbnail-phone-line-top {
          width: 25vw;
          left: 70%;
      }
          
      .designer-section .thumbnail-text-container{
          width: 80%!important;
          background: #ffffffe3;
          padding: 20px;
          z-index: 999;
          position: absolute;
          box-sizing: border-box;
          /* right: 0px; */
          /* top: 60px; */
          text-align: left;
          z-index: 3;
      }
      
      .designer-section #commercial .thumbnail-text-container{
          width: 80%!important;
          background: #87b9649e;
          /* padding: 20px; */
          z-index: 999;
          position: absolute;
          box-sizing: border-box;
          /* right: 0px; */
          top: 60px;
          text-align: center;
      }
      .designer-section .gallery-category .thumbnail-content .thumbnail-text {
          /* text-align: center; */
      }
  
      .designer-section .thumbnail-laptop-line, .designer-section .thumbnail-laptop-line-middle, .designer-section .thumbnail-laptop-line-top{
          top: 20%;		
      }
  
      .designer-section #government.move1 .thumbnail-phone-container{
          transform: rotateX(45deg) rotateY(5deg) rotateZ(-21deg) translateX(-85px) translateZ(-54px);
      }
  
      .designer-section #government.move2 .thumbnail-phone-container{
          transform: rotateX(44deg) rotateY(-8deg) rotateZ(11deg) translateZ(202px)  translateX(-318px) translateY(215px);
      }
  
      .designer-section .gallery-category .text {
          font-size: 3vw;
          z-index:3;
          padding: 5px 0;
      }
  
      .designer-section .gallery-category#commercial.flip .text {
          display: none;
      }
      .designer-section .gallery-category#posters .nokia{
          background-size: 160% auto;
          background-position: 50%;
      }
      .designer-section .gallery-category#posters .thumbnail-text-container{
          background: #00000085!important;
          padding: 20px;
      }
          .designer-section .gallery-category#posters .dates .thumbnail-text-container{
          background: #bff2bae8!important;
          /* padding: 10px; */
      }
      .designer-section .gallery-category.flip#posters{
          padding: 0px;
      }
  
      .designer-section #commercial .thumbnail {
      }
  
      .designer-section .phone-line {
          width: 25vw;
          left: -61%;
      }
      .designer-section .laptop-line {
          width: 80vw;
          transform: translateY(5%) translateZ(0px);
          left: -20%;
      }
      .designer-section .devices-container {
          left: -20%;
          transform: rotateX(56deg) rotateY(-20deg) rotateZ(30deg) translateZ(16.2vh) translateY(87vw) translateX(53vh);
      }
      .designer-section .laptop.screen {
          transform: translateZ(22vw) translateY(13.7vw) rotateX(-60deg);
      }
      .designer-section .move1 .devices-container {
          transform: rotateX(32deg) rotateY(-20deg) rotateZ(30deg) translateX(19vh) translateZ(-14vh) translateY(-63vw);
      }
      
      .designer-section .move2 .devices-container {
          transform: rotateX(55deg) rotateY(-11deg) rotateZ(31deg) translateX(14vh)  translateZ(-5vh) translateY(-179vw);
      }
      .designer-section .move3 .devices-container {
          transform: rotateX(43deg) rotateY(-5deg) rotateZ(21deg) translateX(35vh)  translateZ(-2vh) translateY(-259vw);
      }
      .designer-section .gallery-category#posters .thumbnail-poster {
          background-size: cover;
          background-position: center;
          background-position-y: center;
          height: calc(100dvh - 59px);
          top: 0px;
          padding: 40px;
      }
          
      .designer-section .gallery-category#posters .dates{
          /*background-image: url(../images/dates-mobile.jpg);*/
      }
  
      .designer-section .thumbnail-text-container2 {
          width: calc(100%);
          padding: 10px;
          text-align: left;
          background: #8aabcecf;
          z-index:3;
          padding: 20px;
          box-sizing:border-box;
          margin-top: 30px!important;
      }
      .designer-section .thumbnail-text-container2 * {
          text-align: left!important;
      }
      .designer-section .thumbnail-text-container2 h2 {
          font-size: 16px;
      }
  
      .work .items{
          /* left: calc(50dvh - 200px); */
          /* top: 30%; */
      }
      .work .book {
          /* width: 50vw; */
          left: 36vw;
      }
      .work .page:first-child {
          height: 68dvh;
      }
      .work .work-titles-container {
          font-size: 3vw;
          line-height: 0px;
          display: grid;
          flex-direction: row;
          flex-wrap: wrap;
          width: 99vw;
          left: 28vw;
          height: 8%;
          transform: rotateZ(-6deg) translateZ(10px);
          grid-template-columns: 1fr 1fr;
          justify-items: start;
          align-items: start;
          justify-content: space-between;
          align-content: space-between;
          top: calc(12dvh + 59px);
      }
      .work-titles-container a {
          line-height: 30px;
          letter-spacing: -1px;
      }
      .work-titles-container a.show .arrow {
          display: none;
      }
      .work .book .book-text {
          /* position: absolute; */
          font-size: calc(1.3dvh);
          line-height: 1.4dvh;
      }
      .work .company-details {
          display: none;
      }
  
  }
  
  @media screen and (max-aspect-ratio : 2/3) {
      #bg_container{
          background-size: 190%;
          background-position-x: -58vw!important;
          background-position-y: 60vw!important;
      }
      .titles {
          left: 6.5vw;
          top: 77.5vw;
          width: 85.5vw;
      }
  
      .programmer {
          margin-top: 3.2vw;
      }
      
      .video_move {
          background-position-y: 27.7vw!important;
      }	
      .arrows{
          top: 117.8vw;
          left: 30.8vw;
      }
      #arrows-up{
          top: 69.5vw;
          left: 30vw;
      }
      .arrows img{
  
      }
      .designer-section .gallery-category#posters .nokia{
          background-image: url(../images/nokia-mobile.png);
          background-size: 100% auto;
      }
  }
  
  @media screen and (max-width: 1300px){
      .work .color-pencils {
          height: 50dvh;
          position: absolute;
          left: 20dvw;
          top: 36dvh;
      }
      .work .pencil {
          height: 50dvh;
          left: 5vw;
          top: 30dvh;		
      }	
      .work .mouse-container {
          left: 70vw;
          height: 25dvw;
      }	
  }
  
  @media screen and (max-width : 1200px) {
      .work .laptop-container{
          left: -50vw;
          height: 550px;
          top: -35dvh;
      }
      .work .pencil {
          left: 0vw;
          top: 36dvh;
      }
      .work .color-pencils {
          left: 0vw;
          top: 36dvh;
      }
  }
  
  @media screen and (max-width : 1024px) {
      .content-plane{
          scale: 0.6;
          margin-left: -66px;
      }
      .green .line {
          transform: rotate(332deg);
          margin-top: 44%;
      }
      .text-pointer {
          font-size: 1vw;
      }
  }
  @media screen and (max-width : 960px){
      .designer-section .thumbnail-text-container {
          width: 50%;
      }
  }
  @media screen and (max-width : 900px) {
      .work .laptop-container{
          left: -70vw;
      }
  }
  @media screen and (max-width : 768px) {
      .section2 .folder .content {
      }
      .section3 .title{
          font-size: min(6vw, 20px);
      }
      #name {
          text-align: center;
          padding: 0 0px 0 20px;
      }
      .section3 .wrapper {
          gap: 20px;
          padding: 20px;
      }
      .content-plane{
          scale: 0.45;
          margin-left: -110px;
      }
      .section2 .folders .folder{
          width: 100%!important;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          overflow-x: clip;
          overflow-y: visible;
      }
      .section2 .paper-texture{
          position: absolute;
          width: 100%!important;
          height: 100%;
          top: 0px;
          left: 0px;
          transform: rotate(8deg) scale(2);
      }
      .open{
          transform: translateY(50vh);
      }
      .folder-hidden{
          transform: translateY(80vh);
      }
  
      .section2 .folder .insert{
          background: #c0b283;
          width: 120%!important;
          height: 100%;
          transform: rotate(3deg) translateY(0%) translateX(-50px);
      }
  
      .section2 .folders .folder .content{
          position: absolute;
          top: 30px;
          left: 00px;
          width: auto;
          font-size: 12px;
          padding: 20px!important;
      }
  
      .section2 .folder .work-title{
          top: 1.3%;
          position: absolute;
          right: 0;
          transform: none;
          font-size: 1.1rem;
          pointer-events: none;
          width: 100%;
          font-weight: normal;
          text-align: center;
      }
  
      .section2 h1{
          font-size: 1.5em;
          margin: 0px;
      }
  
      .section2 h2{
  
      }
      .section2 .folders .folder:first-child{
          width: 100%;
      }
      .section2 .folders .folder:first-child .insert{
          
      }
      .section2 .folders .folder:first-child .content{
  
      }
      .section2 .folders .folder:first-child .content h2{
  
      }
      .section2 .folders .folder:nth-child(2){
          margin-top: 34px;
      }
      .section2 .folders .folder:nth-child(2) .insert{
          
      }
      .section2 .folders .folder:nth-child(2) .content{
  
      }
  
      .section2 .folders .folder:nth-child(3){
          margin-top: 61px;
      }
      .section2 .folders .folder:nth-child(3) .insert{
  
      }
      .section2 .folders .folder:nth-child(3) .content{
  
      }
  
      .section2 .folders .folder:nth-child(4){
          margin-top: 88px;
      }
  
      .section2 .folders .folder:nth-child(4) .insert{
  
      }
      .section2 .folders .folder:nth-child(4) .content{
  
      }
  
      .section2 .folders .folder:nth-child(5){
          /*width: 80%;
          margin-top: 35px;*/
          margin-top: 118px;
      }
      .section2 .folders .folder:nth-child(5) .insert{
  
      }
      .education-container .content{
          font-size: 0.7em;
      }
      .other {
          width: 42%;
      }
      .green .line {
          transform: rotate(322deg);
          margin-top: 44%;
      }
  
      .work .color-pencils {
          left: auto;
          right: 100dvw;	
      }
      .work .pencil {
          left: auto;
          right: 200dvw;	
      }	
      .work .mouse-container {
          left: 70vw;
      }	
  }
  
  @media screen and (max-width : 600px) {
      .thumbnail-next svg, 
      .thumbnail-prev svg{
          width: 50px;
          height: auto;
      }
      .section2 .folder .content{
          font-size: 13px;
      }
      
      .section2 .folder .work-title{
          font-size: 1.1rem;
      }
      
      .section2 .title{
  
          font-size: 2rem;
      }
      .designer-section .thumbnail-text-container *{
          font-size: 0.8em;
      }
      .popup-container{
          display: none;
      }
      .work .laptop-container{
          left: -110vw;
      }
  }
  
  @media screen and (max-height : 630px) {
      .content-plane{
          scale: 0.5;
          margin-top: 19dvh;
          margin-left: -110px;
      }	
  
  }
  
  @media screen and (max-width : 550px) {
      #name_container{
          font-size: 14px;
          letter-spacing: 2.2vw;
      }
      .text-pointer {
          font-size: 2vw;
          padding: 5vw;
      }
      .education-container {
          grid-column: auto;
      }
      .libraries-container .content {
          align-items: center;
          position: relative;
          margin-left: 5vw;
          margin-right: 5vw;
      }
      .content-plane{
          margin-top: 18dvh;
          /* margin-left: -100px; */
          margin-left: 60vw;
          left: -350px;
      }	
      .section3 .wrapper{
          grid-column: none;
          grid-template-columns: 1fr;
          grid-template-rows: min-content 1fr 1fr;
      }		
      .libraries-container{
          /* margin-top: -10%; */
          display: flex;
          flex-direction: column;
          /* gap: 5vh; */
          justify-content: flex-start;
          align-content: stretch;
          align-items: stretch;
      }
      .green .line {
          transform: rotate(334deg);
          margin-top: 40%;
      }
  
      .top_bar_shadow ul{
          font-size: 3vh;
      }
      .work .work-titles-container {
          font-size: 3.5vw;
          width: 89vw;
          left: 31vw;
      }
      .designer-section .gallery-category .thumbnail-content {
          padding: 4vw;
      }
      .designer-section .thumbnail-text-container2 {
          top: 0px;
          left: 0px;
      }
      .designer-section .thumbnail-text-container,
      .designer-section #commercial .thumbnail-text-container {
          top: 0px;
          left: 0px;
          width: 100%!important;
          /* z-index:0; */
          margin: 0px!important;
      }
  }
  
  @media screen and (max-width : 500px) {
  
      .work .book {
          left: 40vw;
      }
      .work .items {
          /* left: 20dvw; */
          /* top: 30%; */
      }
  }
  
  @media screen and (max-width : 480px){
      .designer-section .devices-container {
          transform: rotateX(56deg) rotateY(-20deg) rotateZ(30deg) translateZ(16.2vh) translateY(87vw) translateX(34vh);
      }
      .designer-section .move1:not(.move2):not(.move3) .devices-container {
          transform: rotateX(32deg) rotateY(-20deg) rotateZ(30deg) translateX(-2vh) translateZ(-14vh) translateY(-35vw);
      }
      .designer-section .thumbnail-content {
          font-size: 13px;
      }
      .work .page .title {
          font-size: 6vw;
      }
      .work .laptop-container {
          left: auto;
          right: 180dvw;
      }
      .work h1{
          font-size: 1.2em;
      }
      .work .content h2{
          font-size: 0.9em;
      }
  }
  @media screen and (max-width : 380px) {
      .designer-section .thumbnail-phone-container{
          left: 65%;
      }
      .designer-section .devices-container {
          transform: rotateX(56deg) rotateY(-20deg) rotateZ(30deg) translateZ(16.2vh) translateY(73vh) translateX(17vh);
      }
      .designer-section .move1:not(.move2):not(.move3) .devices-container {
          transform: rotateX(32deg) rotateY(-20deg) rotateZ(30deg) translateX(-2vh) translateZ(-14vh) translateY(2vw);
      }
      .designer-section .move2:not(.move3) .devices-container {
          transform: rotateX(55deg) rotateY(-11deg) rotateZ(31deg) translateX(-5vh) translateZ(-5vh) translateY(-132vw);
      }
      .designer-section .move3 .devices-container {
          transform: rotateX(43deg) rotateY(-5deg) rotateZ(21deg) translateX(9vh) translateZ(-2vh) translateY(-212vw);
      }
      .content-plane{
          scale: 0.35;
          margin-top: 15dvh;
          margin-left: 60vw;
          left: -300px;
      }	
      #name_container{
          
      }
      #name_container> *{
          letter-spacing: 1.4vw;
          padding-right: 0px!important;
      }
      .green .line {
          transform: rotate(330deg);
          margin-top: 46%;
      }
      
      .top_bar_shadow ul{
          font-size: 2vh;
      }
  
      .work .page:first-child {
          height: 119vw;
      }
      .work .items {
          /* left: calc(22dvh - 160px); */
          /* top: 32%; */
      }
      .work .book {
          left: 36vw;
      }
      .work .book .book-text {
          font-size: calc(2.4vw);
          line-height: 2.9vw;
      }
  }
  
  @media screen and (max-width : 340px) {
      .designer-section .thumbnail-text-container{
          width: auto;
          padding: 20px;
          /* top: 50px; */
          /* left:0px; */
          /* width: calc(100% - 80px)!important; */
      }
      .designer-section .gallery-category#posters .thumbnail-text-container{
      }
      .designer-section .gallery-category .thumbnail-content .thumbnail-text {
          /* text-align: center; */
      }
      .designer-section .devices-container {
          /* transform: rotateX(56deg) rotateY(-20deg) rotateZ(30deg) translateZ(16.2vh) translateY(73vh) translateX(30vh); */
      }
  }
  .fp-watermark{
      display: none!important;
  } 
  
  @keyframes flash{
      50% {
          filter: brightness(1.2);
      }
      100% { 
          filter: brightness(1);
      }
  }
  
  
  /****************************************
  **** Hamburger Menu Animations ******
  ***************************************/
  
  
  
  @keyframes menu-show{
      0% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px)  translateX(0px);
          top: -100vh;
      }
      33% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px) translateX(70px);
          top: -100vh;
      }
      66% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px)  translateX(70px);
          top: 0px;
      }
      100%{
          transform: rotateX(0deg) rotateZ(0deg) translateZ(0px) translateX(0px);
          top: 0px;
      }
  }
  
  /** Play this in reverse **/
  @keyframes menu-hide{
      0% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px)  translateX(0px);
          top: -100vh;
          
      }
      33% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px) translateX(70px);
          top: -100vh;
          
      }
      66% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px)  translateX(70px);
          top: 0px;
          
      }
      100%{
          transform: rotateX(0deg) rotateZ(0deg) translateZ(0px) translateX(0px);
          top: 0px;
          
      }
  }
  
  
  @keyframes menu-hide-page{
      0%{
          transform: rotateX(0deg) rotateZ(0deg) translateZ(0px) translateX(0px);		
      }
      33% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px) translateX(70px);
      }
      66%{
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(-615px) translateX(70px);		
      }
      100%{
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(-615px) translateX(0px);		
      }
  }
  
  /** Play this in reverse **/
  @keyframes menu-show-page{
      0%{
          transform: rotateX(0deg) rotateZ(0deg) translateZ(0px) translateX(0px);		
      }
      33% {
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(0px) translateX(70px);
      }
      66%{
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(-615px) translateX(70px);		
      }
      100%{
          transform: rotateX(58deg) rotateZ(-21deg) translateZ(-615px) translateX(0px);		
      }
  }
  
  @keyframes open-cover{
      0%{
          transform: translateZ(30px) translateX(-1.5vw);
          left: 1vh;
      }
      33%{
          transform: rotateY(-51deg) rotateZ(0.5deg) translateX(0.5vw) translateZ(5vh)  translateY(0vw);
      }
      66%{
          transform: rotateY(-89deg) rotateZ(0.5deg) translateX(0.5vw) translateZ(1.3vh) translateY(0vw);
      }
      100%{
          transform: rotateY(-125deg) rotateZ(0.5deg) translateX(-1vw) translateZ(1vh)  translateY(0vw);
          left: 4vh;
      }
  }
  
  @keyframes close-cover{
      0%{
          transform: translateZ(30px) translateX(-1.5vw);
          left: 1vh;
      }
      33%{
          transform: rotateY(-51deg) rotateZ(0.5deg) translateX(0.5vw) translateZ(5vh)  translateY(0vw);
      }
      66%{
          transform: rotateY(-89deg) rotateZ(0.5deg) translateX(0.5vw) translateZ(1.3vh) translateY(0vw);
      }
      100%{
          transform: rotateY(-125deg) rotateZ(0.5deg) translateX(-1vw) translateZ(1vh)  translateY(0vw);
          left: 4vh;
      }
  }
  
  /********** Safari 7.1+ Support *******/
  /***** For some reason, Safari cannot handle 90 deg 3D rotations and the planes dissapear *******/
  /***** Along with Flickering in planes **********************************************************/
  /***** A Hack is to use 89.9deg and backface-visibility: hidden *********************************/
  
  _::-webkit-full-page-media, _:future, :root .content-plane div {
      backface-visibility: hidden;
  }
  _::-webkit-full-page-media, _:future, :root .box-left{
      transform: rotateY(-89.9deg) translateZ(var(--side-offset));
  }
  _::-webkit-full-page-media, _:future, :root .box-right{
      transform: rotateY(89.9deg) translateZ(var(--side-offset));
      filter: brightness(0.5) saturate(2);
  }
  _::-webkit-full-page-media, _:future, :root .box-top{
      transform: rotateX(89.9deg) translateZ(var(--side-offset));
      filter: brightness(0.85) saturate(1.4);
  }
  
  
  
  .work .job-description a{
      color: #fff8d5;
  }
  
  .job-header-dashed{
      border-top: 1px dashed white;
      width: 400%;
      animation-name: dashed;
      animation-duration: 80s;
      animation-direction:normal;
      animation-fill-mode:forwards;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
  }
  
  @keyframes dashed{
      0%{
          margin-left:0%;
      }
      100%{
          margin-left:-200%;
      }
  }