/* 
COLOURS
#f9fbfd     - off-white
#f8f9fa     - off-white 2
#eff2f5     - silver light 1
#ffd900     - yellow strong
#ffe600     - yellow medium
#0054d1     - blue medium
#0055b6     - blue dark 
#00af3a     - green medium
#50c2ff     - blue light
*/

/* 
COMMON ELEMENTS 
AND PAGE
CSS
*/

  .bxshdw-1 {
    box-shadow: 0px 1px 18px rgba(165, 189, 224, 0.5) !important;
  }
  * {
    letter-spacing: 0.00em;
    font-family: "fb", sans-serif;
  }
  body {
    font-size: 100%;
    font-family: "fb", sans-serif;
  }
.black-background {
  background-color: #101010;
}
  @media all and (min-width: 2100px) {
    body {
      font-size: 105%;
    }
  }
  @media all and (min-width: 2400px) {
    body {
      font-size: 115%;
    }
  }
  @media all and (min-width: 2700px) {
    body {
      font-size: 120%;
    }
  }
  @media all and (min-width: 3000px) {
    body {
      font-size: 125%;
    }
  }
  @media all and (min-width: 3600px) {
    body {
      font-size: 132%;
    }
  }
  @media all and (min-width: 4200px) {
    body {
      font-size: 136%;
    }
  }



  .title {
    /* Any title, e.g. form title, barticle header */
  }
  .title h1,
  h2,
  h3,
  h4 {
    /* Any title, e.g. form title, article header */
    letter-spacing: 0.008em;
  }
  a,
  li,
  em,
  strong,
  h1,
  h2,
  h3,
  h4 {
    transition: 0.6s cubic-bezier(0.5, 0.7, 0.7, 0.5) all;
  }

  .dark-theme {
    filter: invert(86%);
  }

  .ux-buttons {
    position: fixed;
    z-index: 40;
    right: 0em;
    bottom: 0em;
    background-color: #ffd900;
  }
  .ux-buttons .unit {
    position: absolute;
    cursor: pointer;
    border-radius: 50%;
    width: 2.25em;
    height: 2.1em;
    min-width: 2em;

    font-size: 90%;
    box-shadow: 0px 3px 15px rgba(90, 100, 120, 0.24);
  }
  .ux-buttons .unit img {
    height: 1.5em;
    width: auto;
  }
  .ux-buttons .unit-2 {
    right: 4.8em;
  }
  #fly-to-top:hover {
    padding-bottom: 24px !important;
  }
  .go-back-button {
    /* E.g. on forms and admin pages */
    border: none;
    min-width: 60px;
    display: inline-block;
    padding: 0 !important;
  }
  .go-back-button a {
    display: inline-block;
    padding: 4px 6px;
  }
  .go-back-button .line-anim {
    bottom: -2px;
  }

  .footer-page {
    padding: 24px 24px;
    color: #eff2f5;
  }
  .footer-page {
    background-color: #36455c;
    font-size: 93%;
  }
  .footer-page .footer-nav li {
    margin: 3px 0;
  }
  .footer-page .footer-nav li a {
    display: inline-block;
    min-width: 5em;
    padding: 3px 3px;
  }




/* 
MODULE
CSS
*/
  .module {
    /* For simple pages and the background image to be filled 
    so no white space is created in the bottom */
    min-height: 100vh;
  }
  .module-login {
    padding-top: 60px;
    background: url("../../media/images/bkgd/bkgd-abstract-2.jpg");
    background-size: cover;
    background-position: center;
  }

/* 
BUTTON 
CSS
*/
  .button-subtle {
    box-shadow: none;
    padding: 4px 3px;
    margin: 0;
    color: #646464;
  }
  .button-subtle:hover {
    background-color: none;
  }
  .button-art-2 {
    position: relative;
    box-shadow: none;
    display: block;
    margin: 0 auto;
    padding: 18px 21px;
    min-width: 240px;
    /* width: 420px; */
  }
  .button-art-2:hover {
    background-color: #ffd900;
    box-shadow: none !important;
  }
  .button-line-anim {
    /* A bottom line animated when user 
    hovers over the button */
    position: relative;
  }
  .line-anim {
    display: inline-block;
    width: 0;
    height: 1px;
    position: absolute;
    left: 3px;
    bottom: -4px;
    border-radius: 0.42em;
    background-color: rgb(160, 160, 200);
    transition: 0.6s ease all;
  }

  .button-line-anim:hover .line-anim {
    width: 95%;
  }


/* 
Projects 
Work Samples 
CSS
*/

.heading-3 {
  margin: 0.42em 6%;
  margin-bottom: 0.0em;
  color: white;
  font-family: fontheading2;
  position: relative;
  line-height: 1.08;
  /* font-family: fontlight; */
  /* text-transform: uppercase; */
  /* color: #000; */
  /* color: rgb(171, 183, 206); */
  text-shadow: 8px 5px 20px #3b3e41;
}
.project .heading-3 {
  margin: 0.42em 6%;
  margin-bottom: 0.0em;
  margin-top: 0.2em;
  color: white;
  font-family: fontheading2;
  position: relative;
  line-height: 1.05;
  /* font-family: fontlight; */
  /* text-transform: uppercase; */
  /* color: #000; */
  /* color: rgb(171, 183, 206); */
  text-shadow: 8px 5px 20px #3b3e41;
}
.projects .heading-word  {
  position: relative;
  z-index: 3;
}
.grubieuk .heading-word-2  {
  font-size: 93%;
  margin-left: 0.01em;
}
.project .col-text {
  text-align: left;
}
.project .col-text .text {
  color: #000;
  width: 100%;
  padding: 3% 0%;
  padding-bottom: 0;
}
.project .col-text .title {
  font-size: 4.2em;
  margin-left: -3.5%;
}

.project .images {
  padding: 0 0;
}
.project .image {
  /* width: 80%; */
  /* margin: 4.5% 10%; */
  text-align: left;
  margin-left: 0;
  /* overflow: hidden; */
}
.project .image img {
  /* cursor: pointer; */
  /* max-height: 100vh; */
  margin: 0 0;
  transform: perspective(1000px);
  transition: 0.7s cubic-bezier(0.5, 0.7, 0.7, 0.5) all;
}
.project .col {
  /* height: 100vh; */
}
.project .col-text {
  width: 100%;
  /* float: left; */
  /* background-color: #fff; */
}
.project .col-text .heading span {
  display: inline-block;
}
.project .col-text .list li {
  margin-bottom: 3px;
  font-family: fontbody;
}
.project .col-images {
  width: 100%;
  background-color: #fff;
  /* float: right; */
  /* background-color: #363636; */
}
.project .nav-buttons {
  width: 60%;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
}
.project .nav-buttons .button-next {
}
.project .list li {
  list-style-type: disc;
  list-style-position: inside;
  /* text-indent: 0.64em; */
  padding: 3px 2px;
  margin-bottom: 3px;
}
.list-2 li {
  list-style-type: none !important;
  list-style-position: inside !important;
}


.project .page-section .label {
  font-family: fontheading;
  padding: 6px 15px;
  padding-bottom: 7px;
  display: inline-block;
  border: 1px dashed #777; 
  margin-bottom: 12px;
  border-radius: 0.16em;
}
.chef-hat-image img {
  /* GUK chef hat */
  position: absolute;
  left: 42%;
  top: 48%;
  z-index: 2;
  height: 1.72em;
  width: auto;
  opacity: 0.95;
  transition: 0.6s ease all;

  -webkit-animation: project-image-anim-2 8.4s ease-in-out both 300;
  animation: project-image-anim-2 8.4s ease-in-out both 300;
}
.chef-hat-image img:hover {
  opacity: 0.36
}
.project .tools .unit {
  border-radius: 0.24em;
  padding: 5px 12px;
  border: 1px solid#303030;
  background-color: transparent;
  display: inline-block;
  margin: 0.54em 0.54em;
  margin-left: 0;
  font-weight: bold;
  font-family: fontbody;
  font-size: 87%;
  letter-spacing: 0.024em;
  color: #333;
}
.project .text-section {
  font-family: fontbody;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #101010;
  /* background-color: #fff; */
  max-width: 960px;
  max-width: 80%;
  padding: 3.4% 3.75%;
  padding-top: 2.8%;
  margin-bottom: 1.2em;
  /* box-shadow: 0px 1px 9px rgba(165, 189, 224, 0.5); */
}
.project .page-section .work-duties {
  letter-spacing: 0.012em;
  line-height: 1.36;
}
.project .subtitle {
  font-family: fontheading; 
  /* font-family: fontlight;  */
  /* font-family: fontbody;  */
  margin-top: 6px;
  margin-bottom: 24px;
  margin-left: -5px;
  /* text-transform: uppercase; */
  font-size: 6em;
  letter-spacing: -0.032em;
  font-weight: bold;
  /* color: #b8a274; */
  /* color: #2e3642;  */
  color: #101010; 
  line-height: 1.24;
}
.project .project-screenshots {
  margin-bottom: 0;
}

.project .subtitle-word-1 {
  color: white;
  text-shadow: 3px 3px 21px #778aa1;
  letter-spacing: 0.01em !important;
}
.project .subtitle-word-2 {
  margin-left: 0.42%;
}
.project .page-section .subtext {
  /* margin-left: 1em; */
  margin-bottom: 0.6em;
  background-color: #fff !important; 
  padding: 1.7em 1.75em;
  padding-right: 1.6em;
  font-family: fontlight; 
  color: #000;
  /* box-shadow: 3px 3px 12px rgba(111, 123, 141, 0.24) */
}
.project .subtext-narrow {
  width: 25em;
}
.database-design .subtext-narrow {
  padding-right: 1.4em !important;
}
.project .page-section .list-3 {
  list-style-type: #8801;
}
.list-3 li:before {
  content: '';
  background-image: url('../../media/img/icons/three-lines.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 16px;
  padding-right: 24px;
  /* display: inline-block; */
  /* height: 1em; */
  /* width: 1em; */
}
.project {
  font-size: 108%;
  /* background-color: #d8e3f5; */
  background-color: #d6c296;
  background: linear-gradient(90deg, rgba(77, 81, 94, 0.8) 0%, rgba(70, 78, 85, 0.8)0%), url('../../media/img/bkgd/desk02.jpg');
  background-size: cover;
  background-attachment: fixed;
}
.project .text-section .text {
  line-height: 1.54;
}

.project .work-duties .subtitle span {
  letter-spacing: -0.005em;
}
.project .work-duties .subtitle {
  line-height: 1.12;
}
@media all and (max-width: 900px) {
  .project .subtext {
    padding-right: 4.2% !important;
    padding-left: 5% !important;
    font-size: 96%;
  }
  .project .subtext-narrow {
    max-width: 100%;
  }
  .project .text-section table tr td {
    padding-left: 2%;
    padding-right: 2%;
    min-width: 3.5em;
  }
  .project .text-section {
    font-family: fontbody;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: #101010;
    /* background-color: #fff; */
    max-width: 900px;
    max-width: 100%;
    padding: 2% 0.7%;
    padding-top: 1.5%;
  }
  .project .text-section .subtitle {
    font-size: 3.2em;
    margin-left: -2%;
    line-height: 1.05;
  }
  .project .text-section .subtitle-small {
    font-size: 2.5em;
  }
  .project .text-section .subtitle-small h2 {
    letter-spacing: -0.016em !important;
  }
}
@media all and (max-width: 720px) {
  .project .text-section .subtitle {
    font-size: 3em;
    margin-left: -2%;
    line-height: 1.05;
  }
  .project .text-section .subtitle-small {
    font-size: 2.16em;
  }
  .project .text-section .subtitle-small h2 {
    letter-spacing: -0.02em !important;
  }
}

.project .text-section .subtitle h2 {
  font-size: 1.12em;
  letter-spacing: -0.016em;
}
.project .image-set img {
  width: 100%;
}
.project .sublist {
  line-height: 2.05;
  padding-top: 0.6em; 
  padding-left: 1.27em;
  font-family: fontlight;
}


.project table td {
  padding: 10px 12px;
  line-height: 1.45;
  border-bottom: 1px dashed #b9c0c7;
  border-bottom: none;
}
.project .text-section table em {
  font-family: fontheading;
  color: #0e4dd3;
  color: #0055b6;
  color: #000;
  letter-spacing: -0.014em;
  font-size: 105%;
}
.project .text-section table tr td {
  padding-right: 9px; 
  line-height: 1.51;
}
.project .text-section table tr td:nth-child(1) {
  padding-left: 3px;
  padding-right: 7px; 
}
.project .project-duration {
  color: #fff;
  font-size: 103%;
}
.project .my-role {
  margin-bottom: 0.2em;
}
.project .stakeholders .unit {
  /* clear: both; */
  width: 24em;
  float: left;
  margin-left: -1.6%;
}
@media all and (max-width: 720px) {
  .project .stakeholders .unit {
    width: 21.6em;
    margin-left: -3.2%;
  }
}
.project .stakeholders .unit .image {
  height: 10em;
} 
.project .stakeholders .unit .image img {
  height: 8.6em;
  width: auto;
  padding: 3% 3%;
  margin: 1.2em;
  margin-left: -0.2em;
  /* border: 1px solid silver; */
} 
.project .stakeholders .unit .circle {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  position: relative;
  padding: 3% 3%;
  margin: 0.7em;
  float: left;
  color: #fff;
}
.project .stakeholders .unit-1 .circle {
  background-color: #0a4592 !important;
}
.project .stakeholders .unit-2 .circle {
  background-color: #144abe !important;
}
.project .stakeholders .unit-3 .circle {
  background-color: #0064d6 !important;
}
.project .stakeholders .unit-4 .circle {
  background-color: #0979e2 !important;
}
.project .stakeholders .unit-5 .circle {
  background-color: #0899ee !important;
}
.project .stakeholders .unit-6 .circle {
  background-color: #06a8c5 !important;
}
.project .stakeholders .unit-7 .circle {
  background-color: #2bb693 !important;
}

@media all and (min-width: 720px) {
.projects .grubieuk {
  /* background: linear-gradient(90deg, rgba(41, 45, 47, 0.93) 0%, rgba(23, 24, 24, 0.93) 100%), url('../../media/img/bkgd/foodbkgd01.jpg'); */

  background: linear-gradient(96deg, 
  rgba(37, 37, 39, 0.93) 0%, 
  /* rgba(23, 23, 24, 0.84) 53%,  */
  rgba(49, 51, 52, 0.95) 100%), 
  url('../../media/img/bkgd/foodbkgd01.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
}
@media all and (max-width: 720px) {
  .projects .grubieuk {
    background: linear-gradient(96deg, 
    rgba(37, 37, 39, 0.93) 0%, 
    /* rgba(23, 23, 24, 0.84) 53%,  */
    rgba(49, 51, 52, 0.95) 100%), 
    url('../../media/img/bkgd/foodbkgd01-mobile.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
}




.project .image img:hover {
  /* animation: project-image-anim-1 5s ease-in both 1;   */
}


.project .summary-points {
  text-align: left;
  background-color: transparent;
  color: #fafbfd;
  text-align: left;
  /* letter-spacing: 0.02em; */
  font-size: 101%;
  margin-bottom: 0.6%;
  margin-left: -0.6%;
  /* padding-left: 0em; */
  /* padding-right: 0.3em; */
  padding: 3.4% 3.75%;
  padding-top: 2.8%;
}
.project .summary-points .unit {
  width: 16em;
  max-width: 40em;
  /* margin-left: -7.5%; */
  /* margin-right: 10%; */
  float: left;
  margin-bottom: 2.8em;
  text-align: left;
  padding-right: 2.56em;
}
.project .summary-points .left {
  width: 100%;
  float: left;
}
.project .summary-points .right {
  width: 100%;
  float: left;
}
.project .summary-points .label {
  margin-bottom: 12px;
  margin-left: -2px;
  padding: 6px 20px;
  padding-bottom: 7px;
  padding-left: 0;
  letter-spacing: 0.012em;

  color: #fcfcfc;
  font-size: 127%;
  border: none;
  /* border: 2px solid #fcfcfc; */
  /* border-bottom: 2px solid #fcfcfc; */
  border-radius: 0.05em;
  /* letter-spacing: 0.02em; */
  /* font-family: fontbody; */
  /* text-transform: uppercase; */
}
.project .summary-points .value {
  font-family: fontlight;
  letter-spacing: 0.03em;
  font-size: 0.96em;
  line-height: 1.54;
  color: #eceff3;
}


.project .page-section {
  padding-left: 6%;
  padding-right: 6%;
}
.project .light-backdrop {
  background-color: #f8f9fa;
  /* background-color: #fafbfd; */
  /* background-color: #fff; */
  background-color: #edeeef;
  background-color: #e7ebee;
  background-color: #eef1f5;
}
.project .page-description {
  padding-top: 7%;
}
.project .text-section .label-2 {
  font-family: fontheading;
  margin-top: 1.08em;
  margin-bottom: 5px;
}
.project .stakeholders {
  padding-top: 0;
}
.database-design table tr td:first-child {
}
.database-design table td {
  line-height: 1.6 !important;
}
.database-design table td .point {
  font-size: 127%;
  margin-right: 0.42em;
}
.project-team .subtext table td {
  line-height: 1.54 !important;
  padding-right: 0.36em;
  padding-left: 0.75em;
  padding-top: 0.24em;
  padding-bottom: 0.24em;
}
.project-team .subtext table tr .label-2 { 
  line-height: 1.45 !important;
}
.project-team .subtext table tr .point {
  margin-right: 5px;
  font-size: 101%;
}

.project .point-three-lines {
  font-size: 90%;
  margin-right: 1em;
  line-height: 1.54 !important;
}
.project .text-section-segment {
  position: relative;
  z-index: 3;
  letter-spacing: 0.01em;
}
.project .database-design .subtitle h2 {
  position: relative;
  z-index: 4;
}
.project .text-section-segment .image-backdrop {
  z-index: 0;
}
.project .text-section-segment .image-backdrop img {
  position: absolute;
  bottom: 30%;
  right: -10%;
  z-index: -1;
  width: 54%;
  height: auto;
}
@media all and (max-width: 900px) {
.project .typography .subtitle h2 {
  font-size: 0.86em;
}
.project .mxw-80 {
  max-width: 100% !important;
}
.project .text-section-segment .image-backdrop img {
  bottom: 80%;
  width: 72%;
  max-width: 340px;
}
}
@media all and (max-width: 720px) {
.project .text-section-segment .image-backdrop img {
  bottom: 93%;
  width: 80%;
  max-width: 270px;
}
}


.project .image-stick-chef {
  height: 3em;
  width: auto;
  position: relative;
  left: -0.42em;
  top: 0.05em;
}


@media all and (min-width: 3000px) {
  .project .page-description {
    padding-top: 5%;
  }
}
@media all and (min-width: 2100px) {
  .project .page-description {
    padding-top: 5.7%;
  }
}
@media all and (min-width: 1800px) {
  .project .page-description {
    padding-top: 6%;
  }
}
@media all and (max-width: 1200px) {
  .project .page-description {
    padding-top: 9%;
  }
}
@media all and (max-width: 1080px) {
  .project .page-description {
    padding-top: 10.5%;
  }
}
@media all and (max-width: 900px) {
  .project .page-description {
    padding-top: 12%;
  }
}
@media all and (max-width: 720px) {
  .project .page-description {
    padding-top: 14%;
  }
  .project .summary-points .unit {
    width: 19.6em;
    max-width: 600px;
  }
}



.w-80 {
  width: 80% !important;
}
.w-20em {
  width: 20em !important;
}

.mxw-80 {
  max-width: 80% !important;
}
.mxw-90 {
  max-width: 90% !important;
}
.mxw-100 {
  max-width: 100% !important;
}
.mxw-1500 {
  max-width: 1500px !important;
}

.mxw-35em {
  max-width: 35em !important;
}



.image-w20 img {
  width: 20%;
  min-width: 20%;
}
.image-w25 img {
  width: 25%;
  min-width: 25%;
}
.image-w30 img {
  width: 30%;
  min-width: 30%;
}
.image-w40 img {
  width: 40%;
  min-width: 40%;
}
.image-w50 img {
  width: 50%;
  min-width: 50%;
}
.image-w60 img {
  width: 60%;
  min-width: 60%;
}
.image-w70 img {
  width: 70%;
  min-width: 70%;
}
.image-w80 img {
  width: 80%;
  min-width: 80%;
}
.image-w90 img {
  width: 90%;
  min-width: 90%;
}
.image-w100 img {
  width: 100%;
  min-width: 100%;
}
@media all and (max-width: 720px) {
  .mobile-iw-50 img {
    max-width: 50%;
    min-width: 50% !important;
  }
}

.project .col-images {
  padding: 5% 5%;
}
.project .col-images .image  {
  width: 80% !important;
  margin: 4.2% 10%;
  height: auto;
}


@media all and (max-width: 900px) {
  .project .col-images {
    padding-left: 0;
    padding-right: 0;
  }
  .project .col-images .image {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    margin-left: 0;
    width: 100% !important;
  }
}




.slide-bottom-3 {
}
@keyframes project-image-anim-1 {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(-10deg);
  }
  70% {
    /* transform: rotateX(6deg) rotateY(15deg);     */
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}


@keyframes project-image-anim-2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0px);
  }
  20% {
    /* transform: rotateX(-5deg) rotateY(2deg) rotateZ(-2deg); */
  }
  50% {
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(-10deg)translateY(15px);
  }
  70% {
    transform: translateY(-5px);    
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}






/* 
Initial 
Views 
CSS
*/

.first-screen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 105;
  opacity: 0.9;
}
.first-screen .unit {
  width: 100%;
  height: 12.5vh;
  background-color: rgb(50, 53, 65);
}

.welcome-landscape {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #202020;
  background-color: #fcfcfc;
}
.landscape .col-title .heading {
  font-family: fontLight;
  /* text-transform: uppercase; */
}
.landscape .col-title .title-part {
  display: block;
  margin-bottom: 9px;
}
.landscape .unit-group {
  display: block;
  width: 100%;
  position: relative;
  margin: 2em auto;
  text-align: center;
}
.landscape .col {
  display: block;
  width: 600px;
  float: left;
  text-align: center;
}
.landscape .design-col {
  /* margin-left: 5%; */
}
.landscape .code-col {
  /* margin-right: 5%; */
}
.ground-line {
  width: 96%;
  height: 2px;
  margin: 0 2%;
  position: relative;
  left: 0;
  bottom: 4.5vw;
  background-color: rgb(128, 116, 100);
}
.landscape .unit {
  position: absolute;
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.landscape .unit img {
  margin: 0 auto;
  position: relative;
}
.landscape .line-man {
  width: 186px;
  height: auto;
}
.landscape .design-col .line-man {
  width: 150px;
  height: auto;
}

.landscape .logo img {
  /* TBD */
}
.landscape .logo {
  width: 150px;
  margin: 15px auto;
}
.landscape .logo-wide {
  width: 200px;
}
.photoshop-logo img {
  transform: perspective(200px) translate3d(0px, 0px, 0px) rotateX(-15deg)
    rotateY(10deg);
  margin-bottom: 12[x];
}
.figma-logo img {
  transform: perspective(200px) translate3d(0px, 0px, 0px) rotateX(-15deg)
    rotateY(10deg);
}
.html-logo img {
  transform: perspective(200px) translate3d(0px, 0px, 0px) rotateX(20deg)
    rotateY(-10deg);
}
.js-logo img {
  transform: perspective(200px) translate3d(0px, 0px, 0px) rotateX(20deg)
    rotateY(-10deg);
}
.php-logo img {
  transform: perspective(200px) translate3d(0px, 0px, 6px) rotateX(-24deg)
    rotateY(10deg);
}
.sql-logo img {
  transform: perspective(200px) translate3d(0px, 0px, 0px) rotateX(20deg)
    rotateY(-10deg);
}
.landscape .google-ga-logo {
  width: 300px;
}
.landscape .data-mining-logo {
  width: 295px;
  margin-bottom: 18px;
}
.google-ga-logo img {
  width: 100%;
}
.data-mining-logo img {
  width: 100%;
}

.landscape .unit20 {
  left: 5%;
}

.slide-bottom {
  -webkit-animation: slide-bottom 4s ease-in-out both 900;
  animation: slide-bottom 4s ease-in-out both 900;
}
.slide-bottom-slow {
  -webkit-animation: slide-bottom 6s ease-in-out both 900;
  animation: slide-bottom 6s ease-in-out both 900;
}
.slide-bottom-fast {
  -webkit-animation: slide-bottom 3s ease-in-out both 900;
  animation: slide-bottom 3s ease-in-out both 900;
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-bottom-2 {
  -webkit-animation: slide-bottom-2 4.3s ease-in-out both 900;
  animation: slide-bottom-2 4.3s ease-in-out both 900;
}
@keyframes slide-bottom-2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(3px);
    transform: translateY(10px) translateX(3px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-bottom-3 {
  -webkit-animation: slide-bottom-2 3.75s ease-out both 900;
  animation: slide-bottom-2 3.75s ease-out both 900;
}
@keyframes slide-bottom-3 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(9px) translateX(-3px);
    transform: translateY(9px) translateX(-3px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}


.slide-top {
  -webkit-animation: slide-top 5s ease-in-out both 900;
  animation: slide-top 5s ease-in-out both 900;
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}





.doorway {
  width: 100vw;
  height: 100vh;
}
.doorway .unit {
  position: relative;
  width: 50%;
  height: 100vh;
  perspective: 3000px;
  /* background-color: #f9fbfd; */
}
.doorway .door-image {
  width: 18em;
  height: auto;
  opacity: 0.86;
  position: absolute;
  transition: 0.9s ease-in all;
  transition: 0.6s cubic-bezier(0.3, 0.45, 0.5, 0.3) all;
  box-shadow: 0 8px 16px 0 rgba(106, 116, 158, 0.5),
    0 10px 16px 0 rgba(114, 124, 151, 0.5);
}
.doorway .right {
  float: right;
}
.doorway .left {
  float: right;
}
.doorway .right .door-image {
  left: 0;
}
.doorway .left .door-image {
  right: 0;
}
.doorway:hover .right .door-image {
  /* Door to slide open via animation */
  transform: perspective(2000px) translate3d(9em, 0px, 0px) rotateX(00deg)
    rotateY(-10deg);
}
.doorway:hover .left .door-image {
  /* Door to slide open via animation */
  transform: perspective(2000px) translate3d(-9em, 0px, 0px) rotateX(00deg)
    rotateY(10deg);
}

/* 
Roles 
CSS
*/
.role-section {
  width: 50%;
  padding: 4.2% 3%;
  float: left;
  text-align: center;
}
.role-title {
  font-size: 2em;
  margin-bottom: 6px 0;
}

/* 
FORM
CSS
*/
@media all and (min-width: 0px) {
  .form-outer {
    position: relative;
  }
  .form-title {
    margin-bottom: 21px;
  }
  .form-title h2 {
    font-size: 1.5em;
  }
  .form-subtitle {
    color: #848484;
    margin-top: 15px;
  }
  .form .submit {
    background-color: #0054d1;
    color: white;
    border: none;
    margin-top: 18px;
    font-family: fh;
  }
  .form .submit:hover {
    background-color: #0055b6;
  }
  .form-response-message {
    display: none;
    margin-top: 30px;
    padding: 12px 12px;
    font-family: fh;
    border: 1px solid #eee;
    border-radius: 0.1em;
    color: #333;
  }
  .form-response-message-displayed {
    display: block;
  }
  .form-box-secondary {
    padding: 0 !important;
  }
  .form-box-secondary .input-div {
    margin: 0 !important;
  }
  .form label {
    position: relative;
    color: #777;
  }
  .form .help img {
    position: relative;
    height: 1.68em;
    width: auto;
    bottom: -6px;
    left: 4px;
  }

  .form-art-1 .form-box {
    width: 420px;
    margin: 0 auto;
    padding: 40px 57px;
    padding-bottom: 48px;
    background-color: #fff;
    border-radius: 0.16em;
    box-shadow: 0px 1px 18px rgba(165, 189, 224, 0.5);
  }
  .form-art-1 .form {
    width: 306px;
  }
  .form-art-1 .input-div {
    width: 100%;
    margin-top: 21px;
  }
  .form-art-1 input {
    border: 1px solid rgb(215, 215, 225);
    font-family: fb;
    padding: 14px 12px;
    border-radius: 0.16em;
    /* box-shadow: 0px 1px 9px rgba(165, 189, 224, 0.1); */
  }
  .form-art-1 select {
    border: 1px solid rgb(215, 215, 225);
    font-family: fb;
    padding: 14px 12px;
    border-radius: 0.16em;
  }
  .form-art-1 textarea {
    border: 1px solid rgb(215, 215, 225);
    font-family: fb;
    padding: 14px 12px;
    border-radius: 0.16em;
  }
  .form-art-1 .submit {
    min-width: 200px;
    width: 216px;
    border: 2px solid #0054d1;
    color: #0054d1;
    background-color: white;
    padding: 16px 12px;
  }

  .form-art-1 .submit:hover {
    background-color: #0055b6;
    color: white;
  }
  .form-section-button {
    /* Button to show the next form section 
    in lengthy complex forms */
    padding: 10px 12px;
    padding-bottom: 11px;
    margin-top: 15px;
    cursor: pointer;
    line-height: 1.15;
    display: inline-block;
    text-align: center;
    box-shadow: none;
    min-width: 140px;
    border: 2px solid #333;
    transition: 0.6s ease all;
  }
  .form-section-button:hover {
    background-color: #0055b6;
    color: white;
  }

  .form-pagination {
    /* To navigate to form sections (views) */
    padding-left: 3px;
    margin-top: -1px;
  }
  .form-pagination .paginate-button {
    border-radius: 50%;
    color: #333;
    border: 1px solid #555;
    /* font-family: fh; */
    font-size: 99%;
    display: inline-block;
    margin-right: 8px;
    padding: 3px 3px;
    height: 1.75em;
    width: 1.75em;
    text-align: center;
    cursor: pointer;
    transition: 0.6s ease all;
  }
  .form-pagination .paginate-button:hover {
    background-color: #ffe900;
  }
}

/* 
DATATABLE 
CSS
*/

@media all and (min-width: 0px) {
  .datatable-outer {
    margin-bottom: 30px;
  }
  .datatable {
    max-width: 1600px;
    margin-left: 0 !important;
  }
  .datatable #myTable tr td {
    /* Reset default style */
    background: none !important;
  }
  .datatable #myTable tr:nth-child(even) {
    background-color: #fff !important;
  }
  .datatable #myTable tr:nth-child(odd) {
    background-color: #fafbfd !important;
  }
  .datatable .dataTables_filter {
    margin-right: 5px;
    margin-bottom: 3px;
  }
  button.dt-button {
    /* Datatable export buttons, e.g. Print */
    background: none;
    background-color: #fff;
    border: none;
    margin-right: 6px;
    font-size: 97%;
    min-width: 5em;
  }
  button.dt-button:hover {
    background: none !important;
    background-color: #eef1f5;
    border: none !important;
  }
  table .button {
    color: #555 !important;
    background-color: #ffff;
    border: 1px solid #ccc;
    border-radius: 0.1em;
  }
  table .button:hover {
    font-family: fh;
  }
  .td-subtle {
    color: #777;
    font-size: 93%;
  }
}

/* 
Timeline CSS
 */

.timeline {
  position: relative;
  /* min-height: 86vh; */
  padding: 6.4% 3%;
  padding-top: 5.4%;
  background-color: #edeeef;
  background: linear-gradient(90deg, 
  rgb(242, 243, 245) 0%, 
    rgb(239, 242, 245) 100%);
  background-size: cover;
  background-position: top left;
  background-attachment: fixed;
}
.timeline .calendars {
}
.timeline .title {
  font-size: 2em !important;
  margin-bottom: 0.1em;
  padding-bottom: 0.9em !important;
}
.timeline .title h2 {
  text-align: center;
  letter-spacing: 0.0em;
  /* font-family: fontheading2; */
}
.calendar {
  position: relative;
  width: 84%;
  padding: 1% 1%;
  margin-left: 4%;
  transition: 0.6s ease all;
}
.calendar img {
  transition: 0.6s ease all;
  transform: perspective(1000px);
  /* transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);  */
}
.calendar:hover img {
}
.timeline .disclaimer {
  margin-top: -6px;
  color: #aaa;
  text-align: right;
}
.timeline .disclaimer .text {
  letter-spacing: 0.024em;
  max-width: 200px;
}
.timeline .button-3 {
  margin: 0 auto;
  padding: 0.54em 2.16em;
  padding-top: 0.54em;
  letter-spacing: 0.028em;
  border-radius: 0.1em;
  border-radius: 2.1em;
  line-height: 1.15;
  font-size: 1.6em;
  color: #1caa31;
  /* color: white; */
  /* background-color: #1bb131; */
  /* background: linear-gradient(105deg, #00a143, #53b83a); */
  /* border: 2px solid white; */
  /* text-transform: uppercase; */
  font-family: fontbody;
  /* font-family: fontheading; */
  text-transform: uppercase;
  /* font-weight: bold; */
  box-shadow: 0px 1px 9px rgba(165, 189, 224, 0.5);
  transition: 0.75s ease all;
}
.timeline .button-3 .button-text {
  letter-spacing: 0.06em !important;
}

@media all and (max-width: 900px) {
  .timeline {
    min-height: 40vh;
    padding-bottom: 42px;
  }
  .timeline .button-3 {
    font-size: 1.45em;
  }
  .timeline .title {
    font-size: 1.68em !important;
  }
  .timeline .title h2 {
    font-size: 1.96em;
  }
}
@media all and (max-width: 900px) {
  .timeline {
    min-height: 40vh;
    padding-bottom: 36px;
  }
}

.timeline .button-3:hover {
  color: white;
  background-color: #1caa31;
  padding: 0.59em 2.25em;
  padding-top: 0.59em;
  letter-spacing: 0.096em;
  background: linear-gradient(100deg, #00a118, #77c537);
  background-size: 400% 400%;

  -webkit-animation: gradient-anim-green 4.5s ease 12;
  -moz-animation: gradient-anim-green 4.5s ease 12;
  animation: gradient-anim-green 4.5s ease 12;
}
.timeline .arrow-image {
  position: absolute;
  text-align: center;
  /* width: 40%; */
  margin: 0 50%;
}

@media all and (max-width: 720px) {
  .timeline .button-3 {
    font-size: 1.24em;
  }
  .timeline .title h2 {
    font-size: 1.86em;
  }
}
@media all and (max-width: 600px) {
  .timeline .title h2 {
    font-size: 1.72em;
  }
}

@-webkit-keyframes gradient-anim-green {
  0% {
    background-position: 0% 75%;
  }
  50% {
    background-position: 100% 26%;
  }
  100% {
    background-position: 0% 75%;
  }
}
@-moz-keyframes gradient-anim-green {
  0% {
    background-position: 0% 75%;
  }
  50% {
    background-position: 100% 26%;
  }
  100% {
    background-position: 0% 75%;
  }
}
@keyframes gradient-anim-green {
  0% {
    background-position: 0% 75%;
  }
  50% {
    background-position: 100% 26%;
  }
  100% {
    background-position: 0% 75%;
  }
}
.timeline .arrow-image img {
  filter: invert(1);
  display: none;
  margin: 0 auto;
  margin-top: 7em;
  position: relative;
  height: 7.5em;
  width: auto;
  text-align: center;
  transform: rotate(-10deg);
}






/* 
Design 
Workflow 
CSS
*/

.workflow {
  min-height: 100vh;
  width: 100%;
  background-color: #333;
}
.workflow .col {
  width: 25%;
  height: 100vh;
  float: left;
  padding: 3% 0%;
}
.workflow .unit .title .heading {
  font-size: 2.56em;
  /* text-transform: uppercase; */
  font-family: fontLight;
  letter-spacing: 0.02em;
  line-height: 1.48;
}

.design-workflow {
  background-color: #202020;
  background: linear-gradient(
      100deg,
      rgba(41, 42, 44, 0) 0%,
      rgba(46, 49, 53, 0) 50%,
      rgba(21, 22, 22, 0) 100%
    ),
    url("../../media/img/bkgd/bkgd-01.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: top left;
  background-repeat: repeat;
}
.design-workflow .title h2 {
  text-align: center;
  font-family: fh;
  color: #fcfcfc;
  letter-spacing: -0.01em;
  line-height: 1.16;
  margin-bottom: 1.5%;
  text-transform: uppercase;
  text-shadow: 8px 5px 20px #3b3e41;
}
.design-workflow .col {
  /* Country column */
  opacity: 0.96;
  position: relative;
  min-height: 320px;
  cursor: pointer;
  transition: 1s ease-in all;
}
.design-workflow .col:hover .images {
  bottom: -15vh;
}
.design-workflow .unit .title {
  color: #f9f9f9;
  padding: 9px 15px;
  padding-bottom: 12px;
  /* width: 70%; */
  margin: 0 auto;
  z-index: 11;
  text-shadow: 8px 5px 20px #515c66;
}
.design-workflow .unit .images {
  width: 100%;
  min-width: 160px;
  margin: 0 auto;
  position: relative;
  bottom: -40vh;
  z-index: 10;
  transition: 1.5s ease-out all;
  /* transition: 2.7s cubic-bezier(.5,.7,.7,.5) all; */
}

.design-workflow .unit {
}
.design-workflow .unit:hover {
  background: linear-gradient(
      100deg,
      rgba(41, 42, 44, 0.08) 0%,
      rgba(46, 49, 53, 0.07) 20%,
      rgba(32, 33, 34, 0.7) 40%,
      rgba(21, 22, 22, 0.07) 80%,
      rgba(21, 22, 22, 0.08) 100%
    ),
    url("../../media/img/bkgd/bkgd-01.jpg");
  background-attachment: scroll;
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
}
.design-workflow .three {
  background: linear-gradient(
      100deg,
      rgba(26, 26, 27, 0.8) 0%,
      rgba(24, 24, 26, 0.8) 20%,
      rgba(32, 33, 34, 0.84) 40%,
      rgba(21, 22, 22, 0.8) 80%,
      rgba(21, 22, 22, 0.8) 100%
    ),
    url("../../media/img/fp/bkgd02.jpg");
  background-attachment: scroll;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.design-workflow .three:hover {
  background: linear-gradient(
      100deg,
      rgba(26, 26, 27, 0.1) 0%,
      rgba(24, 24, 26, 0.3) 20%,
      rgba(32, 33, 34, 0.3) 40%,
      rgba(21, 22, 22, 0.3) 80%,
      rgba(21, 22, 22, 0.1) 100%
    ),
    url("../../media/img/fp/bkgd02.jpg");
  background-attachment: scroll;
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
}
.design-workflow .four {
  background: linear-gradient(
      100deg,
      rgba(26, 26, 27, 0.8) 0%,
      rgba(24, 24, 26, 0.8) 20%,
      rgba(32, 33, 34, 0.84) 40%,
      rgba(21, 22, 22, 0.8) 80%,
      rgba(21, 22, 22, 0.8) 100%
    ),
    url("../../media/img/fp/js-php.jpg");
  background-attachment: scroll;
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}
.design-workflow .four:hover {
  background: linear-gradient(
      100deg,
      rgba(26, 26, 27, 0.8) 10%,
      rgba(24, 24, 26, 0.7) 20%,
      rgba(32, 33, 34, 0) 60%,
      rgba(21, 22, 22, 0.7) 80%,
      rgba(21, 22, 22, 0.7) 100%
    ),
    url("../../media/img/fp/js-php.jpg");
  background-attachment: scroll;
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

.design-workflow .unit .subtitle {
  font-size: 1.4em;
  font-family: fb;
  color: white;
  line-height: 1.6;
  letter-spacing: 0.025em;
  margin-top: 18px;
  padding: 15px 18px;
  transition: 0.7s cubic-bezier(0.5, 0.7, 0.7, 0.5) all;
}

.workflow .images .line-man-thinking {
  width: 40%;
}
.workflow .images .line-man-coding {
  width: 48%;
}

.workflow .images .ruler {
  width: 68%;
  margin-left: -6%;
  opacity: 0.99;
  transform: rotateX(-10deg) rotateY(-20deg) rotateZ(-20deg);
}
.workflow .col:hover .images .ruler {
  opacity: 0.8;
}


.greeting-welcome .greeting-inner {
  min-height: 100vh;
  width: 100%;
  background-color: #101010;
}
.greeting-salutation {
  font-size: 3.6em;
}
.greeting-salutation .text {
  font-family: fontheading;
  letter-spacing: -0.16em;
  color: white;
  font-weight: bold;
  /* text-shadow: 8px 5px 20px #4c4f55; */
}
.greeting-salutation .text .letter {
  font-size: 1.6em;
}
.greeting-salutation .text .letter-2 {
  font-size: 1.44em;
}

/* 
  Flying circular units */
.bubbles {
  position: fixed;
  width: 99.6%;
  height: 99.6vh;
}
.bubbles .bubbles-inner {
  /* Controls the font sizes of the bubble unites */
  font-size: 1.4em;
}
.bubbles .unit {
  width: 4.2em;
  height: 4.2em;
  max-width: 28vw;
  max-height: 28vw;
  position: absolute;
  opacity: 0.9;
  border-radius: 50%;

  font-size: 1em;
  color: white;
  /* font-family: fontbody; */
  font-family: fontheading;
  letter-spacing: 0.042em;
  text-align: center;
  background-color: #515c66;
  transition: 1.44s ease all;
}
.bubbles .circle-ux {
  width: 5em;
  height: 5em;
}
.bubbles .circle-ui {
  width: 4.8em;
  height: 4.8em;
  background-color: #37209e;
}
@media all and (max-width: 720px) {
  .bubbles .unit {
    max-width: 27vw;
    max-height: 27vw;
    font-size: 0.9em;
  }
}

.bubbles .unit:hover {
  /* border: 2px solid white;
  color: white;
  background-color: #000;
  font-size: 3em;
  top: 32%;
  left: 37.5%; */
  /*
  font-size: 16em !important;
  top: 1%;
  left: 1%; */
  animation-play-state: paused;
}
.bubbles-skillsets {
  font-size: 1.4em;
}
.bubbles-skillsets .unit:hover {
  /* border: 2px solid white; */
  color: white;
  background-color: #000;
  font-size: 2em !important;
  /* top: 32%; */
  /* left: 37.5%; */
  /* font-size: 16em !important;
  top: 1%;
  left: 1%; */
  z-index: 120;
  animation-play-state: paused;
}
.bubbles-languages .unit {
  transition: 3s cubic-bezier(.5,.7,.7,.5) all;
}
.bubbles-languages .unit:hover {  
  animation-play-state: paused;
  transform: rotate(360deg);
}
.bubbles .unit-word-large {
  width: 4.6em;
  height: 4.6em;
  line-height: 1.16;
  text-transform: uppercase;
}
.bubbles .unit-word-larger {
  width: 5.0em;
  height: 5.0em;
  line-height: 1.16;
  text-transform: uppercase;
}
.bubbles .clientstories {
  top: 55%;
  left: 75%;
}
.bubbles .clientstories .inner-text {
  font-size: 0.82em;
  letter-spacing: 0.014em;
  line-height: 1.2;
  margin-top: 6px;
}
.bubbles-languages .unit {
  font-size: 0.80em;
  width: 4.5em;
  height: 4.5em;
}
.bubbles .unit-lang {
  opacity: 0.8;
  top: 86%;
  left: 10%;
  background-color: #515c66;
  /* background-color: transparent; */
  color: #fff;
}
@media all and (max-width: 900px) {
  .bubbles .clientstories {
    top: 55%;
    left: 60%;
  }
}

.bubbles .unit-5 {
  /* background-color: #00a118; */
}
.bubbles .unit-6 {
  /* background-color: #ffc900; */
}
.bubbles .unit-7 {
  /* background-color: #ff8000; */
}
.bubbles .sql {
  /* background-color: #d6af1e; */
  letter-spacing: 0.024em;
  animation: bubble-anim-lang 36s ease 90;
}
.bubbles .css {
  /* background-color: #fa4358; */
  animation: bubble-anim-lang 27s ease 90;
}
.bubbles .html {
  /* background-color: #ffd100; */
  letter-spacing: 0.0em;
  animation: bubble-anim-lang 24s ease 90;
}
.bubbles .js {
  animation: bubble-anim-lang 30s ease 90;
}
.bubbles .php {
  /* background-color: #795ee6; */
  animation: bubble-anim-lang 33s ease 90;
}
.bubbles .jQuery {
  /* background-color: #ffc900; */
  animation: bubble-anim-lang 40s ease 90;
}
.bubbles .react {
  font-size: 0.70em;
  /* background-color: #01abc5; */
  letter-spacing: 0.012em;
  -webkit-animation: bubble-anim-lang 40s ease 90;
  animation: bubble-anim-lang 43s ease 90;
}
.bubbles .node {
  font-size: 0.70em;
  -webkit-animation: bubble-anim-lang 42s ease 90;
  animation: bubble-anim-lang 45s ease 90;
}


/* Start refers to initial positioning */
.start-40-20 {
  top: 40%;
  left: 20%;
}
.start-20-60 {
  top: 20%;
  left: 60%;
}
.start-20-20 {
  top: 20%;
  left: 20%;
}
.start-40-40 {
  top: 40%;
  left: 40%;
}
.start-60-60 {
  top: 60%;
  left: 60%;
}
.start-80-80 {
  top: 80%;
  left: 80%;
}
.start-60-20 {
  top: 60%;
  left: 20%;
}

/* Unit-integer refers to the order of priority, high to low */
.bubbles .unit-1 {
  background-color: #004ab9;
}
.bubbles .unit-2 {
  background-color: #313db7;
}

.bubbles .unit:hover {
  /* animation: none !important; */
}


.bubbles .circle-colour-1 {
  background-color: #0a4592 !important;
}
.bubbles .circle-colour-2 {
  background-color: #2f26b4 !important;
}
.bubbles .circle-colour-3 {
  background-color: #2330aa !important;
}
.bubbles .circle-colour-4 {
  background-color: #0f46be !important;
}
.bubbles .circle-colour-5 {
  background-color: #250ac2 !important;
}
.bubbles .circle-colour-6 {
  background-color: #0058bd !important;
}
.bubbles .circle-colour-7 {
  background-color: #2bb693 !important;
}

.bubble-anim-left-to-right {
  -webkit-animation: bubble-anim-left-to-right 36s ease 6;
  animation: bubble-anim-left-to-right 36s ease 6;
}
.bubble-anim-left-to-right-2 {
  -webkit-animation: bubble-anim-left-to-right-2 36s ease 6;
  animation: bubble-anim-left-to-right-2 36s ease 6;
}

/* Bubble unit animation definition */

@keyframes bubble-anim-left-to-right {
  /* For start-40-40 */
  0% {
    top: 40%;
    left: 40%;
  }
  20% {
    top: 20%;
    font-size: 1em;
  }
  30% {
    top: 40%;
    font-size: 1.9em;
  }
  35% {
    top: 40%;
    font-size: 0.9em;
  }
  40% {
    top: 40%;
    left: 60%;
    font-size: 1em;
  }
  60% {
    top: 60%;
    left: 80%;
  }
  70% {
    top: 40%;
    left: 40%;
    font-size: 1em;
  }
  80% {
    top: 45%;
    font-size: 7em;
  }
  90% {
    font-size: 0.36em;
  }
  100% {
    font-size: 1em;
  }
}

@keyframes bubble-anim-left-to-right-2 {
  /* For start-40-20 */
  0% {
    top: 40%;
    left: 20%;
  }
  20% {
    top: 20%;
    font-size: 1em;
  }
  30% {
    top: 40%;
    font-size: 1.6em;
  }
  35% {
    top: 40%;
    font-size: 0.9em;
  }
  40% {
    top: 60%;
    left: 50%;
    font-size: 1em;
  }
  60% {
    top: 40%;
    left: 40%;
    font-size: 1em;
  }
  80% {
    top: 45%;
    font-size: 7em;
  }
  90% {
    font-size: 0.5em;
  }
  100% {
    font-size: 1em;
  }
}

@keyframes bubble-anim-lang {
  0% {
    top: 86%;
    left: 10%;
  }
  20% {
    /* transform: rotate(0deg); */
  }
  30% {
    /* transform: rotate(0deg); */
    background-color: #515c66;
  }
  35% {
    /* transform: rotate(30deg); */
    background-color: #3c4654;
    border: none;
  }
  40% {
    left: 60%;
    /* transform: rotate(360deg); */
    background-color: transparent;
    /* border: 2px solid #fcfcfc; */
  }
  45% {
    /* transform: rotate(0deg); */
    background-color: transparent;
    background-color: #515c66;
    border: none;
  }
  50% {
    background-color: #515c66;
  }
  60% {
    left: 80%;
  }
  80% {
  }
  90% {
  }
  100% {
    left: 10%;
  }
}

.animation-paused {
  animation: none !important;
  /* animation-play-state: paused !important; */
}
.animation-paused-logo {
  animation: none !important;
  animation-play-state: paused !important;
  filter: saturate(1.4);
}
.landscape .design-col {
}
.show {
  display: block !important;
}


/* August 2022 */
.circles-landing {
  width: 100%;
  height: 100vh;
  position: relative;
}
.circles-landing .circle {
  position: fixed;
  width: 12em;
  height: 12em;
  border-radius: 50%;
  margin: 0 auto;
  z-index: 15;
  top: 0 !important;
  /* left: 43%; */

  color: #f8f9fa;
  background-color: #0055b6;
}
.circles-landing .circle-ship {
  position: absolute;
  width: 30em;
  height: 30em;
  border-radius: 50%;
  margin: 0 auto;
  z-index: 20;
  top: 20%;
  left: -10%;

  font-size: 1em;
  color: #f8f9fa;
  background-color: #1b1f20;
  background-color: #333;
}
.circle .text {
  font-size: 5em;
  font-family: fontheading;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.circle-ship .text {
  font-size: 8em;
  font-family: fontheading;
  text-transform: capitalize;
  letter-spacing: 0.012em;
}


/* 
Work station CSS
Gateway navigation
*/

.work-station-inner {
  width: 100%;
  position: relative;
  text-align: center;

  background-color: #eff2f5;
  background-color: #fff;
  /* background: url('../../media/img/bkgd/stage02.jpg'); */
  background-size:  cover;
  background-repeat: repeat;
  background-position: top center;
  background-attachment: fixed;
}
.work-station .wordings {
  width: 40%;
  height: auto;
  position: absolute;
  z-index: 90;
  text-align: center;
  top: 36%;
  left: 30%;
}
.work-station .images {
  position: relative;
  text-align: center;
  padding-bottom: 2em;
}
.work-station  .subtitle h2 {
  letter-spacing: 0em;
  line-height: 1.24;
}
.monitor-image-1 img {
  width: 70%;
  height: auto; 
}
.bottle-image img {
  width: 15%;
  height: auto;  
}
.stream-deck-image {
  margin-top: 0.72em;
  margin-bottom: 1.2em;
}
.stream-deck-image img {
  width: 36%;
  height: auto; 
}
.stream-deck-image .text {
  padding-top: 0.42em;
  width: 30em;
  margin: 0 auto;
}
@media all and (max-width: 900px) {
  .stream-deck-image .text {
    width: 25em;
    font-size: 86%;
    line-height: 1.27;
  }
}
.cup-image img {
  width: 340px;
  height: auto;
}
.work-station .images .text {
  margin-top: 1.15em;
  color: #252525;
  text-align: center;
  padding: auto;
  font-family: fontlight;
  line-height: 1.5;
}
.work-station .text span {
  font-size: 1.42em;
  letter-spacing: 0.0042em;
}
@media all and (max-width: 900px) {
  .bottle-image img {
    width: 24%;
    height: auto;  
  }
  .monitor-image-1 img {
    width: 75%;
    height: auto;
  }
}
@media all and (max-width: 720px) {
  .work-station .text span {
    font-size: 1.36em;
  }
  .monitor-image-1 img {
    width: 80%;
    height: auto;
  }
}
@media all and (max-width: 600px) {
  .monitor-image-1 img {
    width: 84%;
    height: auto;
  }
}



.other-facts {
  padding-top: 1.6em;
  font-family: fontbody; 
  color: #404040;
  background-color: #eef1f5;
}
.other-facts .title {
  font-family: fontheading;
  padding-bottom: 0.84em !important;
  text-align: center;
  color: #101010;
}
.other-facts .unit {
  width: 20%;
  margin: 4% 6.55%;
  padding: 1.05em 1.2em;
  line-height: 1.4;
  font-family: fontlight;
  background-color: white;
  border-radius: 0.2em;
  /* border: 2px solid #464646; */
  box-shadow: 4px 4px 10px rgba(111, 123, 141, 0.24);
}
.other-facts .unit .line {
  text-align: center;
  height: 3px;
  width: 1.86em;
  border-radius: 0.06em;
  background-color: rgb(226, 232, 238);
  display: block;
  margin: 1.2em auto;
}
.other-facts .unit .number {
  line-height: 1.4;
  font-family: fontlight; 
  font-size: 1.5em;
  letter-spacing: 0.042em;
  margin-bottom: 0.5em;
  color: #bbc5ce;
}
@media all and (max-width: 720px) {
  .other-facts .unit {
    width: 54%;
    margin: 7.2% 23%;
    padding: 1.05em 1.2em;
    line-height: 1.4;
    background-color: white;
    border-radius: 0.2em;
    /* border: 2px solid #464646; */
    box-shadow: 4px 4px 10px rgba(111, 123, 141, 0.24);
  }
}



.hand-page-inner {
  min-height: 100vh;
  width: 100%;
  background: url('../../media/img/bkgd/stage01.jpg');
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
}
.hand-page .wordings {
  width: 40%;
  height: auto;
  position: absolute;
  z-index: 90;
  text-align: center;
  top: 36%;
  left: 30%;
}
.hand-page .wordings .text {
  font-family: fontheading2;
}

.hand-grab-image img {
 max-height: 30vh;
 width: auto;
 z-index: 80;
 position: fixed;
 top: 1vh;
 left: 0;
 -webkit-animation: hand-grab-anim 12s linear 2s 1;
 animation: hand-grab-anim 12s linear 2s 1;
 /* animation-fill-mode: none, backwards; */
}
@keyframes hand-grab-anim {
0% {
}
20% {
  height: 50vh;
  max-height: 50vh;
  top: 1vh;
  left: 0;
}
30% {
  top: -5vh;
  left: -5%;
}
40% {
  height: 100vh;
  max-height: 100vh;
  top: -20vh;
  left: -14%;
}
70% {
  height: 360vh;
  max-height: 360vh;
  top: -90vh;
  left: -35%;
}
80% {
}
100% {
}
}




.mission-statement {
  /* Could be temporary */ 
  text-align: center;
  padding: 3.6% 3.6%;
  padding-top: 4.2%;
  font-family: fontLight;
}

.title-circle-anim {
  margin: 1% 0.5%;
  margin-bottom: 1.86%;
  height: 3em;
}
.title-circle-anim .unit {
  width: 1.92em;
  height: 0.48em;
  border-radius: 0.12em;
  background-color: #0054d1;  
  /* Default back color */
  display: inline-block;
  margin-right: 0.36%;
  opacity: 0.99;
}
.title-circle-anim .unit:nth-child(1) {
  background-color: #0054d1;
  -webkit-animation: title-circle-anim-1 3s ease-in 0s 600;
  animation: title-circle-anim-1 3s ease-in 0s 600;
}
.title-circle-anim .unit:nth-child(2) {
  background-color: #0a92bb;  
  -webkit-animation: title-circle-anim-2 3s ease-in 0s 600;
  animation: title-circle-anim-2 3s ease-in 0s 600;
}
.title-circle-anim .unit:nth-child(3) {
  background-color: #00a118;  
  -webkit-animation: title-circle-anim-3 3s ease-in 0s 600;
  animation: title-circle-anim-3 3s ease-in 0s 600;
}
@keyframes title-circle-anim-1 {
0% {
  opacity: 0.99;
  font-size: 1em;
}
50% {
  opacity: 0.2;
  /* font-size: 0.8em; */
}
100% {
  opacity: 0.99;
  font-size: 1em;
}
}
@keyframes title-circle-anim-2 {
20% {
  opacity: 0.99;
  font-size: 1em;
}
60% {
  opacity: 0.2;
  /* font-size: 0.8em; */
}
100% {
  opacity: 0.99;
  font-size: 1em;
}
}
@keyframes title-circle-anim-3 {
40% {
  opacity: 0.99;
  font-size: 1em;
}
80% {
  opacity: 0.2;
  /* font-size: 0.8em; */
}
100% {
  opacity: 0.99;
  font-size: 1em;
}
}




/* UX WAY */
.ux-way {
  /* background-color: rgb(223, 219, 202); */
  /* background-color: rgb(255, 238, 0); */
  background-color: rgb(250, 250, 253);
  background-color: #eef1f5;
  background-color: #2b3342;
}
.ux-way .ux-way-inner {
  padding: 3.6% 4.5%;
} 
.ux-way .title {
  font-size: 1.5em;
  text-align: left;
  margin-left: -0.3em;
}
.ux-way .heading {
  font-family: fontheading2;
  /* font-family: fontLight; */
  /* font-family: fontBody; */
  text-align: left;
  font-weight: normal;
}
.ux-way .title-circle {
  background-color: #0045ad;
  color: white;
  width: 18.6em;
  height: 18.6em; 
  border-radius: 50%;
  padding-bottom: 3.6%;
  transition: 0.7s cubic-bezier(.5,.7,.7,.5) all;

  background: linear-gradient(90deg, 
  rgba(0, 47, 134, 0.87) 0%, rgba(0, 35, 151, 0.87) 100%), 
  url('../../media/img/artwork/ux-coder.png');
  background-size: contain;
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
}
@media all and (max-width: 2400px) {
  .ux-way .title-circle {
    width: 18em;
    height: 18em; 
  }
}
@media all and (max-width: 2100px) {
  .ux-way .title-circle {
    width: 17em;
    height: 17em; 
  }
}
@media all and (max-width: 1800px) {
  .ux-way .title-circle {
    width: 16em;
    height: 16em; 
  }
}
@media all and (max-width: 1500px) {
  .ux-way .title-circle {
    width: 12.7em;
    height: 12.7em; 
  }
}
@media all and (max-width: 1200px) {
  .ux-way .title-circle {
    width: 12em;
    height: 12em; 
  }
}
@media all and (max-width: 960px) {
  .ux-way .title-circle {
    width: 12em;
    height: 12em; 
  }
  .ux-way .title {
    font-size: 1.72em;
    text-align: left;
  }
  .ux-way .section-image img {
    width: 18em;
    margin-left: 1%;
    min-width: auto;
  }
}
.ux-way .title-circle .heading {
  color: white;
  text-align: center;
  line-height: 0.72;
}
.ux-way .title-circle span { 
  display: block;
}
.ux-way .title-circle:hover {
  background-color: #363636;
}
.ux-way .title-circle:hover .heading span {
  text-shadow: 4px 2px 14px #545964;
}

.ux-way-section {
  margin-bottom: 7.7%;
  color: #202020;
  color: #eef1f5;
  font-size: 84%;
}
.ux-way-section .section-title {
  font-size: 1.2em;
  margin-bottom: 1.4em;
}
.ux-way .section-title .heading-3 {
  font-family: fontheading;
  /* font-family: fontbody; */
  /* font-family: fontlight; */
  color: #000;
  color: #eef1f5;
  /* font-weight: bold; */
  /* text-transform: uppercase; */
  /* color: #000; */
  /* color: #0054d1; */
  letter-spacing: 0.0162em;
  text-shadow: none; 
  margin: 0;
  margin-top: 0.2em;
}
.ux-way .section-image figcaption {
  text-align: left;
  padding: 3px 1px;
  margin: 3px 0;
  margin-bottom: 9px;
  font-size: 0.84em;
  color: #e0e5eb;
  font-style: italic; 
  transition: 0.75s ease all;
  transition-delay: 0.2s;
}
.ux-way .section-image:hover figcaption {
  /* color: #333; */
  font-size: 0.93em;
  margin-bottom: 3px;
}
.ux-way .section-image figure {
  text-align: left;
  margin-bottom: 4.5%;
}
.ux-way .section-image img {
  text-align: left;
}
.ux-way-section {
}
.ux-way .section-content .unit {
  text-align: left;
  padding: 0.3% 0.1%;
  margin: 0.3% 0;
  letter-spacing: 0.024em;
  clear: both;
}
.ux-way .section-content .unit .subtitle {
  font-family: fontheading; 
  /* font-family: fontBody; */
  /* text-transform: uppercase;  */
  font-size: 1.27em;
  /* color: #000; */
  margin-bottom: 15px;
  margin-top: 1.96%;

  width: 80%;
  float: left;
  /* background-color: #2e404b; */
}
.ux-way .section-content .unit .subtitle em {
  /* font-family: fontheading; */
}
.ux-way .description {
  color: #eef1f5;
  line-height: 1.5;
  margin-top: 3.2%;
}
.ux-way .description-text-highlight {
  font-size: 1.27em;
}
.ux-way .description .text {
  font-family: fontlight;
  letter-spacing: 0.05em;
  font-size: 1.17em;
  max-width: 32em;
}
.ux-way .description .text em {
  font-family: fontheading;
}
.ux-way .ux-way-sections .section-title .digit {
  color: rgb(255, 223, 43);
  color: rgb(71, 233, 219);
  font-family: fontheading;
  /* background-color: #2e404b; */
  /* background-color: #000; */
  display: inline-block;
  /* padding: 0.2em 0.5em; */
  margin-bottom: 0.32em;
  /* margin-left: 2px; */
  min-width: 1.68em;
  text-align: center;
  font-size: 1.6em;
}
.ux-way .section-content .unit .digit {
  color: rgb(39, 222, 235);
  color: rgb(255, 223, 43);
  font-family: fontheading;
  /* background-color: #2e404b; */
  background-color: transparent;
  display: inline-block;
  /* padding: 0.3em 0.42em; */
  /* margin-top: 1.2%; */
  min-width: 1.4em;
  text-align: left;
  float: left;
  margin-right: 0.5%;
  padding-top: 0.1em;
}
.ux-way .section-content .unit .subtitle-text {
  width: 90%;
  max-width: 28.8em;
  float: left;
  line-height: 1.54;
  letter-spacing: 0.04em;
  /* clear: both; */
  /* letter-spacing: -0.02em; */
}
@media all and (max-width: 1500px) {
  .ux-way .section-content .unit .subtitle-text {
    max-width: 30em;
  }
}
.ux-way .section-content .points {
  width: 70%;
  float: left;
  padding-left: 2%;
  color: #202020;
  padding-top: 0.84%;
} 
.ux-way .section-content .points-list {
  transition: 0.6s ease all;
}
.ux-way .section-content .points-list li {
  list-style-type: ">  ";
  list-style-position: inside;
  text-indent: 0.46em;
  padding: 4px 0.6%;
  margin-bottom: 5px;
  letter-spacing: 0.028em;
  font-size: 1.06em;
  transition: 0.5s ease-in all;
}
.show-points-button {
  min-width: 6.4em;
  padding: 0.6em 0.54em;
  margin-bottom: 0.96em;
  border-radius: 0.2em;
  font-size: 0.98em;
  line-height: 1.10; 
  /* font-family: fontheading; */
  /* text-transform: uppercase; */
  background-color: #0e4dd3;
  background-color: #fff;
  /* color: #fff; */
  box-shadow: 0px 1px 10px rgba(165, 189, 224, 0.6);

  /* transform: rotate(-90deg); */
  /* -webkit-transform: rotate(-90deg); */
}
.show-points-button .icon {
  display: inline-block;
  margin-left: 4.2%;
  text-align: center;
}
.show-points-button .icon img {
  display: inline-block;
  width: 1.05em;
  height: auto;
}
.ux-way .section-content .points-list {
  height: 0;
  overflow: hidden;
}
.ux-way .section-content .points-list li {
}
.show-points-button:hover + .points-list {
}
.ux-way .section-content .points-list-show {
  height: auto;
  overflow: visible;
}
.ux-way .section-content .points-list-show li {
  /* opacity: 1; */
  /* display: block; */
}
.uxway-final .digit {
  text-align: left !important;
}




.gateway {
  position: relative;
  min-height: 80vh;
  background-color: #fff;
  padding: 0 0;
  background-color: #555;
  
  background: linear-gradient(96deg, 
  rgba(37, 37, 39, 0.97) 0%, 
  /* rgba(23, 23, 24, 0.84) 53%,  */
  rgba(49, 51, 52, 0.97) 100%), 
  url('../../media/img/bkgd/foodbkgd01.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.gateway .gate {
  position: relative;
  width: 50%;
  height: 40vh;
  /* border: 1px dashed #eee; */
  transition: 0.6s ease all;
}
.gateway .top-left {
  top: 0;
  left: 0;
  float: left;
}
.gateway .top-right {
  top: 0;
  right: 0;
  float: right;
}
.gateway .center {
  width: 30%;
  height: 20vh;
  margin-left: 35%;
}
.gateway .bottom-left {
  bottom: 0;
  left: 0;
  float: left;
}
.gateway .bottom-right {
  bottom: 0;
  right: 0;
  float: right;
}

.gateway .gate .section-title {
  border-radius: 50%;
  background-color: #0b40b3;
  padding: 3% 3%;
  width: 37vh;
  height: 37vh;
  overflow: hidden;
  opacity: 0.9;
  cursor: pointer;
  transition: 0.6s ease all;
}
.gateway .gate .section-title .heading {
  text-align: center;
  max-width: 84%;
  margin: 0 auto;

  font-family: fontBody;
  font-family: fontheading;
  line-height: 1.24;
  letter-spacing: 0.012em;
  color: #fff;
  transition: 0.6s ease all;
}
.gateway .gate .section-title .heading-2 {
  padding-top: 7%;
  text-align: center;  
  /* font-family: fontLight; */
  font-family: fontBody;
  /* font-family: fontheading;  */
  font-size: 0.8em;
  line-height: 1.16;
  color: #fff;
  background-color: transparent;
  opacity: 0.97;
  transition: 0.6s ease all;
}
.gateway .gate .section-title .heading-2 em {
  /* text-transform: uppercase; */
  font-family: fontheading; 
  letter-spacing: -0.01em;
  /* color: #ffe100; */
}
.gateway .gate .section-title .heading strong {
  /* text-transform: uppercase; */
  /* display: block; */
}
.gateway .gate .section-title .heading .question-mark {
  display: inline-block;
}
.gateway .gate .section-title .heading-2 .subtopic {
  display: block;
  margin: 0.7em 0;
}
.gateway .center .line-man-image { 

  height: 20vh;
  width: auto;
  margin: 0 auto;
}

.gateway .gate .section-title:hover .heading {
    /* font-size: 90%;
    position: absolute;
    top: 10%; */
}
.gateway .section-title .heading-hover-class {
  position: absolute;
  font-size: 95%;
  opacity: 0.8;
  top: 14%;
  font-family: fontLight !important;
  text-transform: uppercase;
  line-height: 1.15 !important;
  max-width: 8.2em !important;
}




@media all and (max-width: 4800px) {
  .gateway .gate .section-title {
}
}
@media all and (max-width: 4200px) {
  .gateway .gate .section-title {
    /* width: 640px; */
    /* height: 640px; */
}
}
@media all and (max-width: 3600px) {
  .gateway .gate .section-title {
    /* width: 500px; */
    /* height: 500px; */
}
}
@media all and (max-width: 3000px) {
  .gateway .gate .section-title {
    /* width: 450px; */
    /* height: 450px; */
}
}
@media all and (max-width: 2560px) {
  .gateway .gate .section-title {
    /* width: 420px; */
    /* height: 420px; */
}
}
@media all and (max-width: 2160px) {
  .gateway .gate .section-title {
    /* width: 400px; */
    /* height: 400px; */
}
}
@media all and (max-width: 1920px) {
  .gateway .gate .section-title {
    /* width: 384px; */
    /* height: 384px; */
}
}
@media all and (max-width: 1680px) {
  .gateway .gate .section-title {
    width: 375px;
    height: 375px;
}
}
@media all and (max-width: 1440px) {
  .gateway .gate .section-title {
    width: 360px;
    height: 360px;
}
}
@media all and (max-width: 1200px) {
  .gateway .gate .section-title {
    width: 350px;
    height: 350px;
}
}
@media all and (max-width: 1080px) {
  .gateway .gate .section-title {
    width: 340px;
    height: 340px;
}
}
@media all and (max-width: 900px) {
  .gateway .gate .section-title {
    width: 320px;
    height: 320px;
}
}
@media all and (max-width: 800px) {
  .gateway .gate .section-title {
    width: 300px;
    height: 300px;
}
}
@media all and (max-width: 720px) {
  .gateway .gate .section-title {
    width: 270px;
    height: 270px;
}
}
@media all and (max-width: 640px) {
  .gateway .gate .section-title {
    width: 240px;
    height: 240px;
}
}
@media all and (max-width: 570px) {
  .gateway .gate .section-title {
    width: 200px;
    height: 200px;
}
}



.cover-nav {
  /* The animation that takes the user to the next page depending on the clicked gate  */ 
  height: 100vh;
  width: 100vw; 
  position: fixed;
  top: 0;
  left: -100vw;
  z-index: 124;
  background-color: #22272c;
  opacity: 0.97;
  transition: 0.7s cubic-bezier(.5,.7,.7,.5) all;
}
.cover-nav .line-man-running {
  position: fixed;
  z-index: 125;
  bottom: 42vh;
  /* left: -6.4vw; */
  left: -8.6em;
}
.cover-nav .line-man-running img {
  height: 10em;
  width: auto;
}
.cover-nav-animation {
  -webkit-animation: cover-nav-closing-anim 3s linear 0s 1; 
  -moz-animation: cover-nav-closing-anim 3s linear 0s 1; 
  animation: cover-nav-closing-anim 3s linear 0s 1; 
}
/* To make the animation faster on smaller screens */
@media all and (max-width: 720px) {
  .cover-nav-animation {
    -webkit-animation: cover-nav-closing-anim 3s linear 0s 1; 
    -moz-animation: cover-nav-closing-anim 3s linear 0s 1; 
    animation: cover-nav-closing-anim 3s linear 0s 1; 
  }
}
.cover-nav-text {
  font-size: 1.4em;
  z-index: 120;
  letter-spacing: 0.06em;
}
.cover-nav-text .text-div {
  font-family: fontheading; 
  color: #eff2f5;
  text-shadow: 8px 5px 20px #3b3e41;
  margin-left: 6%; 
  min-width: 10em;
  letter-spacing: 0.02em;
  line-height: 1.24;
}
.line-man-running-animation {
  -webkit-animation: lineman-running-anim 3s linear 0s 1; 
  -moz-animation: lineman-running-anim 3s linear 0s 1; 
  animation: lineman-running-anim 3s linear 0s 1; 
}
/* To make the animation faster on smaller screens */
@media all and (max-width: 720px) {
  .line-man-running-animation {
    -webkit-animation: lineman-running-anim 3s linear 0s 1; 
    -moz-animation: lineman-running-anim 3s linear 0s 1; 
    animation: lineman-running-anim 3s linear 0s 1; 
  }
}
@keyframes cover-nav-closing-anim {
  0% {
    left: -100vw;
  }
  50% {
  }
  100% {
    left: 0vw;
  }
  }
@keyframes lineman-running-anim {
0% {
  left: 0vw;
}
50% {
}
100% {
  left: 93vw;
}
}
@-webkit-keyframes cover-nav-closing-anim {
  0% {
    left: -100vw;
  }
  50% {
  }
  100% {
    left: 0vw;
  }
  }
@-webkit-keyframes lineman-running-anim {
0% {
  left: 0vw;
}
50% {
}
100% {
  left: 93vw;
}
}
.cover-nav .cover-column {
  position: absolute;
  width: 16.5%;
  height: 100vh;
  float: left;
}
.cover-column:nth-child(1) {
  background-color: #0980ff;
  right: 82.5%;
}
.cover-column:nth-child(2) {
  background-color: #0062ff;  
  right: 66%;
}
.cover-column:nth-child(3) {
  background-color: #0057e2;  
  right: 49.5%;
}
.cover-column:nth-child(4) {
  background-color: #004ca2;  
  right: 33%;
}
.cover-column:nth-child(5) {
  background-color: #13417c;  
  right: 16.5%;
}
.cover-column:nth-child(6) {
  background-color: #162942;  
  right: 0;
}


.font-size-1-2em {
  font-size: 1.2em;
}
.font-size-1-4em {
  font-size: 1.4em;
}




/* 
CONTACT CSS
*/
.contact-outer {
  position: relative;
  z-index: 6;
  background-color: #000;
}
.contact {
  background-color: #000;
  color: #fcfcfc;
  padding-top: 1.2%;
  padding-bottom: 3.2%;
}
@media all and (min-width: 1920px) {
  .contact {
    background: linear-gradient(96deg, 
    rgba(0, 0, 0, 0.84) 0%, 
    rgba(0, 0, 0, 0.84) 100%), 
    url('../../media/img/artwork/keyboard02b.png');
    background-size: 57% auto;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
@media all and (max-width: 1920px) {
  .contact {
    background: linear-gradient(96deg, 
    rgba(0, 0, 0, 0.84) 0%, 
    rgba(0, 0, 0, 0.84) 100%), 
    url('../../media/img/artwork/keyboard02b.png');
    background-size: 60% auto;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
@media all and (max-width: 900px) {
  .contact {
    background: linear-gradient(96deg, 
    rgba(21, 21, 27, 0.84) 0%, 
    rgba(15, 15, 25, 0.84) 100%), 
    url('../../media/img/artwork/keyboard02b-mobile.png');
    background-size: 90% auto;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
@media all and (max-width: 720px) {
  .contact {
    background: linear-gradient(96deg, 
    rgba(21, 21, 27, 0.84) 0%, 
    rgba(15, 15, 25, 0.84) 100%), 
    url('../../media/img/artwork/keyboard02b-mobile.png');
    background-size: 115% auto;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
@media all and (max-width: 600px) {
  .contact {
    background: linear-gradient(96deg, rgba(43, 48, 52, 0.84) 0%, rgba(42, 45, 51, 0.84) 100%), url('../../media/img/artwork/keyboard02b-mobile.png');
    background-size: 154% auto;
    background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
.contact .section {
  padding: 3% 2%;
  padding-bottom: 3%;
  float: left;
}
.contact .left {
  width: 100%;
  text-align: center;
  line-height: 1.24;
  color: #eee;
}
.contact .left .image img {
  filter: invert(1) brightness(1.5);
  height: 192px;
  width: auto;
}
.contact .right {
  width: 100%;
  text-align: center;
  font-family: fontlight;
}
.contact .right .in {
  position: relative;
  display: block;
  text-align: center;
  font-size: 1.27em;
  float: left;
  /* background-color: white; */
  /* background-color: #ffc900; */
  margin: 0.42em 0;
  /* clear: both; */
  padding: 1.6% 3%;
  padding-bottom: 2%;
  padding-left: 3.6%;
  padding-right: 3.6%;
  transition: 0.42s cubic-bezier(.5,.7,.7,.5) all;
}
.contact .right .in .icon {
  /* width: 20%; */
  /* float: left; */
}
.contact .right .in .value {
  /* width: 80%; */
  /* float: left; */
  font-family: fontlight;
  font-size: 1.12em;
  letter-spacing: 0.042em;
}
.contact .right .in .icon img {
  filter: invert(1);
  height: 3em;
  width: auto;
  margin-bottom: 9px;
}
.contact .right .phone .value {
  letter-spacing: 0.07em;
}
.contact .right .email {
  font-size: 1.25em;
}
.contact .right .email .value {
  font-size: 102%;
  letter-spacing: 0.057em !important;  
}
.contact .right .linkedin .value {
  letter-spacing: 0.048em !important;  
}
.contact .right .phone {
}
.contact .right .in:hover {
  /* background-color: #eff2f5;  */
  /* color: #000; */
}
.contact .right .in:hover .icon img {
  /* filter: invert(0); */
  /* margin-bottom: 3px; */
}
.contact .right .in:hover .value {
  /* font-family: fontbody; */
  /* font-size: 107%; */
  font-weight: bold;
}
.contact .copy-button {
  opacity: 0.64;
  position: relative;
  display: inline-block;
  bottom: -1.24em;
  font-size: 0.6em;
  padding: 8px 24px;
  padding-top: 8px;
  letter-spacing: 0.042em;
  color: #fcfcfc;
  cursor: pointer;
  /* border: 2px solid white; */
  border: none;
  border-radius: 1.5em;
  transition: 0.6s cubic-bezier(.5,.7,.7,.5) all;
}
.contact .copy-email {
  padding-right: 27px;
  padding-left: 27px;
}
.contact .email:hover .copy-email {
  opacity: 1;
  border: 1px solid white;
}
.contact .phone:hover .copy-phone-number {
  opacity: 1;
  border: 1px solid white;
}
.contact .linkedin:hover .copy-linkedin {
  opacity: 1;
  border: 1px solid white;
}
.contact-wording {
  font-family: fontlight;
  font-family: fontheading;
  letter-spacing: 0.024em;
}
.contact .bottom {
  margin-top: 1.4%;
  padding: 1% 3%;
  padding-bottom: 1%;
  float: left;
}
.contact .bottom .text {
  font-family: fontlight;
  font-size: 0.96em;
  line-height: 1.2;
  letter-spacing: 0.042em;
  margin-bottom: 1.6em;
  /* border-top: 1px dashed #fcfcfc; */
  /* border-bottom: 1px dashed #fcfcfc; */
  padding: 9px 17px;
  border-radius: 0.14em;
}
.contact .bottom .subtext {
  color: #c7c8ca; 
  letter-spacing: 0.024em;
  margin-top: 6px;
}

@media all and (max-width: 1600px) {
  .contact .right {
    font-size: 93%;
  }
}
@media all and (max-width: 1440px) {
  .contact .right {
    font-size: 84%;
  }
}
@media all and (max-width: 1280px) {
  .contact {
    padding-bottom: 1.4em;
  }
  .contact .right {
    padding-top: 4.2%;
  }
  .contact .left {
    width: 100%;
    text-align: center;
    margin-top: 2.16em;
  }
  .contact .right .in {
    clear: both;
    width: 60%;
    margin-top: 0.6em;
  }
  .contact-wording {
    font-size: 1.2em;
    margin-bottom: 3px;
  }
  .contact .right .in .icon img {
    margin-bottom: 9px;
  }
  .contact .right .email {
    border-right: 0px dashed #f8f9fa;
  }
  .contact .right .phone {
    border-right: 0px dashed #f8f9fa;
  }
  .contact .bottom {
    margin-top: 1.86%;
    float: left;
  }
}
@media all and (max-width: 900px) {
  .contact {
    padding-top: 1.5%;
    padding-bottom: 1.8em;
  }
  .contact .right {
    width: 100%;
  }
  .contact .right .in {
    width: 100%;
    margin-left: 0;
  }
  .contact .left {
    margin-top: 2.7em;
  }
  .contact .bottom {
    margin-top: 18px;
    float: left;
  }
  .contact .right .in .icon img {
    margin-bottom: 3px;
  }
  .contact-wording {
    font-size: 1.16em;
  }
}




.aboutme {
  background-color: #fff; 
}
.aboutme .title {
  font-size: 2.4em;
  padding: 0.9em 2%;
  padding-bottom: 1.32em;
}
.aboutme .title h1 {
  font-family: fontheading2;
  line-height: 1.2;
}
.aboutme .subheading-aboutme {
  margin-top: 1em;
  margin-left: 1.27em;
  font-size: 0.6em;
  max-width: 27em;
  line-height: 1.42;
}
.aboutme .subheading-text {
  letter-spacing: 0.02em !important;
}
.title-about-me h1 {
  margin-left: 0.32em;
  padding-bottom: 0.06em;
}
@media all and (max-width: 1200px) {
.aboutme .title {
  font-size: 2.7em;
}
.aboutme .subheading-aboutme {
  font-size: 0.51em;
  text-align: center;
  margin: 0 auto;
  margin-top: 0.93em;
  margin-bottom: -0.16em;
}
}
@media all and (max-width: 900px) {
.aboutme .subheading-aboutme {
  font-size: 0.45em;
}
}
@media all and (max-width: 720px) {
.aboutme .subheading-aboutme {
  font-size: 0.42em;
}
}
.aboutme .heading-unbold {
  font-family: fontlight;
}
@media all and (max-width: 1200px) {
  .aboutme .title h1 {
    text-align: center;
  }

}




/* TESTIMONIALS */
.testimonials {
  color: #202020;
  background-color: #eef1f5;
  padding-top: 1em;
  padding-bottom: 1.08em;
}
.testimonial {
  background-color: #fff;
  width: 25%;
  margin: 4.15% 4.15%;
  float: left;
  padding: 1.86em 1.4em; 
  padding-bottom: 1.64em;
  border-radius: 0.16em;
  /* border: 2px solid #464646; */
  box-shadow: 4px 4px 10px rgba(111, 123, 141, 0.24);
} 
.testimonials .subtitle-box {
  border: none;
  box-shadow: none;
  padding-left: 1.54em;
  padding-right: 1.36em;
}
.testimonial .subheading {
  text-align: left;
  font-family: fontlight;
  font-size: 96%;
}
.testimonials .subtitle h2 {
  line-height: 1.24;
  letter-spacing: 0.00em; 
  text-align: left;
  font-size: 1.4em;
  margin-bottom: 0.1em;
}
.testimonial-spaced {
  padding-right: 1.54em;
  padding-left: 1.54em;
}
.testimonial .feedback {
  font-size: 127%;
  line-height: 1.36;
  font-family: fontlight;
  letter-spacing: 0.01em;
}
.testimonial .name {
  font-family: fontheading;
  font-size: 116%;
  margin-bottom: 2px;
}
.testimonial .designation {
  color: #464d56;
  font-size: 96%;
  font-family: fontlight;
}
.testimonial .year {
  color: #464d56;
  font-size: 96%;
  font-family: fontlight;
  margin-top: 0.42em;
}
.testimonial {
  line-height: 1.42;
}
.testimonial .unit {
  display: block;
  width: 100%;
}
.testimonial .quotes {
  /* font-family: fontheading, sans-serif; */
  font-size: 1.02em;
  /* display: block;
  line-height: 1.16;
  margin-bottom: -0.42em; */
}
.testimonial .quotes-end {
  /* margin-top: 0.2em; */
}
.testimonial .photo {
  width: 50%;
  margin-top: 1.08em;
  margin-bottom: 0.72em;
}
.testimonial .photo img {
  width: 100%;
  height: auto;
  filter: grayscale(1) brightness(1.03);
  border-radius: 50%;
  /* border: 2px solid #464646; */
}
.testimonial .quotes {

}

@media all and (min-width: 2100px) {
  .testimonial {
    width: 24%;
  } 
}
@media all and (min-width: 2400px) {
  .testimonial {
    width: 23%;
  } 
}
@media all and (min-width: 2700px) {
  .testimonial {
    width: 22.5%;
  } 
}
@media all and (min-width: 3000px) {
  .testimonial {
    width: 21.5%;
  } 
}


@media all and (max-width: 1200px) {
  .testimonial {
    width: 27%;
    margin: 3.15% 3.15%;
    padding: 1.4em 1.2em; 
    padding-bottom: 1.2em;
  } 
  .testimonial {
    font-size: 90%;
  }
}
@media all and (max-width: 720px) {
  .testimonials .testimonial {
    width: 75%;
    margin: 7.2% 12.5%;
    padding: 2em 1.24em; 
    padding-bottom: 1.86em;
  }
  .testimonials .subtitle-box {
    text-align: center;
    max-height: 10em !important;
    margin-bottom: 1.6%;
  }
  .testimonials .subtitle h2 {
    text-align: center;
  }
  .testimonial .photo {
    width: 60%;
  }
  .testimonial {
    font-size: 105%;
  }
  .testimonial .feedback {
    line-height: 1.5;
  }
  .testimonials .subtitle h2 {
    margin-bottom: 0.16em;
  }
}




/* GATEWAY II */
.entry {
  position: fixed;
  width: 100%;
  min-height: 100vh;
  top: 0;
  left: 0;
  background-color: #323436;
}
@media all and (max-width: 720px) {
  .entry {
  }
}
.entry .section {
  display: inline-block;
  float: left;
  text-align: center;
  position: relative;
  padding: 0.90em 1.32em; 
  margin: 2.4% 2%;
  cursor: pointer;
  border-radius: 0.12em;
  
  /* New edit in August 2022 */
  /* width: 100%;  */
  text-align: left; 
  display: inline-block;
  background-color: transparent; 
  opacity: 1; 
  z-index: 5; 
  clear: both;
  border: 3px solid #e7ebee;
  transition: 0.45s cubic-bezier(.5,.7,.7,.5) all;
}
.entry .section:hover {
  background-color: #004cbe;   
}
.entry .left {
  width: 50%;
  float: left;
  /* Min-height messes with flex */
  /* min-height: 100vh; */
  padding-top: 0%;
  padding-left: 7.2%;
}
.entry .right {
  position: relative;
  width: 50%;
  float: right;
  min-height: 100vh;
  z-index: 3;
  padding-left: 9.6%;
  padding-right: 2.4%;
}
@media all and (max-width: 900px) {
  .entry .right {
    padding-left: 5%;
}
}
.entry .right .contents .in {
  display: none;
  width: 100%;
  max-width: 27em;
  text-align: left;
  font-family: fontlight;
  color: #e7ebee;
  font-size: 75%; 
  letter-spacing: 0.024em;
  line-height: 1.4;
}
.display-block {
  display: block !important;
}
.entry .right .in {
  margin: 2.16% 1%;
}
.entry .door-title {
  position: relative;
  z-index: 3;
  font-size: 0.72em;
  opacity: 1;
}
.entry .door-title .text {
  /* font-family: fontheading2; */
  font-family: fontheading;
  /* font-family: fontbody; */
  color: #e7ebee;
  /* text-transform: uppercase; */
  /* text-shadow: 8px 5px 20px #414346; */
  letter-spacing: 0.028em;
  line-height: 1.07; 
  text-align: center;
}


.entry-animal .animal-image img {
  /* filter: brightness(0.7); */
  position: relative;
  z-index: 2;
  opacity: 0.7;
  width: 80%;
  left: 10%;
  top: 72%;
  position: absolute;
  filter: grayscale(1);
  -webkit-animation: entryAnimalAnim 7s ease both 60;  
  animation: entryAnimalAnim 7s ease both 60;  
}
.entry-animal .horse img {
  top: 72%;
  width: 75%;
  left: 12.5%;
  /* opacity: 0.77; */
  /* filter: grayscale(1) brightness(1.5); */
}
.entry-animal .eagle img {
  width: 80%;
  left: 10%;
  top: 57%;
}
.entry .section:hover .entry-animal img {
  opacity: 0.9 !important;
  animation-play-state: paused;
}

.entry-horse-backdrop {
  background-size: cover;
  background-attachment: scroll;
  background-position: center;
}
.entry-rhino-backdrop {
  background-size: cover;
  background-attachment: scroll;
  background-position: center;
}

#entry-video {
  position: fixed;
  right: 0;
  top: 0;
  min-width: 100%;
  /* min-height: 100%; */
  width: 100%;
  height: auto;
  top: -7%;
  left: 0;
  z-index: 0;
}
.entry .video-overlay {
  position: fixed;
  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100vh;
  opacity: 0.7;
  background-color: #0d0d0e;
}
@media all and (max-width: 1800px) {
  #entry-video {
    /* width: 115vw;  */
    /* margin: 0 -7.5vw; */
    /* margin: 0 auto; */
  }
}
@media all and (max-width: 1200px) {
  #entry-video {
    /* width: 120vw;  */
    /* margin: 0 -10vw; */
  }
}
@media all and (max-width: 900px) {
  #entry-video {
    /* width: 150vw;  */
    /* margin: 0 -25vw; */
  }
  .entry .left {
    padding-left: 0;
  }

}
@media all and (max-width: 720px) {
  #entry-video {
    width: 180vw; 
    /* margin: 0 -40vw; */
  }
}

@keyframes entryAnimalAnim {
0% { 
  opacity: 0.6;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
50% {
  opacity: 0.99;
  -webkit-transform: translateY(10px) translateX(3px);
  transform: translateY(10px) translateX(3px);  
}
100% {
  opacity: 0.6;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
}
@-webkit-keyframes entryAnimalAnim {
0% { 
  opacity: 0.6;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
50% {
  opacity: 0.99;
  -webkit-transform: translateY(10px) translateX(3px);
  transform: translateY(10px) translateX(3px);  
}
100% {
  opacity: 0.6;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
}


@media all and (max-width: 900px) {
  .entry .section {
    /* width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 6% 3.6%;
    padding-top: 6%;
    margin-top: 5%;
    margin-bottom: 32%; */
  }
}

@media all and (max-width: 900px) {
  .entry .video-overlay {
    min-width: auto;
    min-height: auto;
    width: 100%;
    height: 100vh;
  }
  #entry-video {
    position: fixed;
    right: 0;
    top: 0;
    min-width: auto;
    min-height: auto;
    width: 100%;
    height: auto;
    z-index: 0;
    
    /* To combat mobile portrait issue of video being only displayed on top part of screen */
    width: 150vw; 
    margin: 0 -25vw;
    margin-right: -35vw;
    margin-left: -15vw;
  }
  .entry .section {
    margin: 2.7% 5%;
    border-radius: 0.09em;
    padding: 0.8em 1.05em; 
    min-width: 16.5em;
  }
  .entry .door-title {
    font-size: 0.93em;
  }
}
@media all and (max-width: 720px) {
  #entry-video {    
    /* To combat mobile portrait issue of video being only displayed on top part of screen */
    width: 180vw; 
    margin: 0 -40vw;
    margin-right: -55vw;
    margin-left: -25vw;
  }
  .entry .section {
    float: none; 
    clear: both;
    margin: 1.02em 4.6%;
    min-width: 15.75em;
  }
  .entry .door-title {
    font-size: 0.95em;
  }
  .entry .door-title .text {
    text-align: center;
  }
  .entry .right {
    display: none;
  }
  .entry .left {
    width: 100%;
    padding-top: 27vh;
  }
}



.anim-stage {
  position: relative;
}
.anim-stage img {
  position: absolute;
}


.table-spacing-lower tr td {
  padding-top: 0.27em;
  padding-bottom: 0.27em;
  padding-left: 0.4em;
}
.table-line-height-more {
  line-height: 1.6 !important;
}
.line-divider {
  width: 70%;
  margin: 1.86em 0;  
  border-top: 1px dashed rgb(166, 174, 190);
}

.line-height-14 {
  line-height: 1.4;
}
.line-height-15 {
  line-height: 1.5;
}
.line-height-16 {
  line-height: 1.6;
}
.line-height-17 {
  line-height: 1.7;
}

/* To resolve smaller font size on 2K to 4K screens */
@media all and (min-width: 2400px) {
  .project {
    font-size: 108%;
  }
}
@media all and (min-width: 3000px) {
  .project {
    font-size: 112%;
  }
}
  @media all and (min-width: 3600px) {
    .project {
      font-size: 115%;
    }
}



.worked-map-image {
  position: relative;
}
.worked-map-innermost {
  position: relative;
}
.worked-map-image .map-above {
  position: absolute;
  top: 0;
  left: 0;
} 
.worked-map .map-caption {
  text-align: center;
  margin-top: -1.27em;
}
.map-caption h2 {
  font-family: fontlight;
  margin-bottom: 0.75em; 
  letter-spacing: 0em; 
}
.map-caption .countries {
  font-family: fontheading;
  color: #000;
  font-size: 1.02em;
}
.map-caption .sub-em-text {
  font-size: 0.96em;
}
@media all and (max-width: 800px) {
  .worked-map-image {
    overflow: hidden;
  }
  .worked-map-image img {
    width: 120%;
    overflow: hidden;
    margin-left: -10%;
    margin-right: -10%;
  }
}
@media all and (max-width: 600px) {
  .worked-map-image {
    overflow: hidden;
  }
  .worked-map-image img {
    width: 125%;
    overflow: hidden;
    margin-left: -15%;
    margin-right: -10%;
  }
}




.all-project-screenshots {  
  background-color: #fff; 
  padding: 3em 0;
  padding-top: 0;
  padding-bottom: 5%;
  position: relative;
  z-index: 2;
}
.all-project-screenshots .title {
  text-align: center;
  position: relative;
  z-index: 3;
  background-color: #fff; 
  padding: 1.1em 2%;
  padding-bottom: 1.5em;
}
.all-project-screenshots .title .subtitle {
  font-size: 70%;
  line-height: 1.4;
}
.all-project-screenshots .title h1 {
  letter-spacing: 0.007em;
  font-family: fontheading2;
  margin-bottom: 0.3em;
}
.all-project-screenshots .screenshots {
  text-align: center;
  position: relative;
  z-index: 2;
}
.all-project-screenshots .screenshots .inner {
  max-width: 1800px;
  margin: 1em auto;
  margin-top: 0;
  max-width: 90%;
}
@media all and (max-width: 1080px) {
  .all-project-screenshots .screenshots .inner {  
  margin-top: -4.2%;
  }
}
@media all and (max-width: 720px) {
  .all-project-screenshots .screenshots .inner {  
  margin-top: -5%;
  }
}
.all-project-screenshots .image-box {
  /* width: 50%; */
  clear: both;
  width: 100%;
  margin: 6.1% 0%;
}
.all-project-screenshots table {
  margin-top: -0.5%;
}
.all-project-screenshots table td {
  padding: 9px 9px;
  padding-left: 3px;
  border-bottom: 1px dashed #aab3bb;
}
table .td-subtext {
  font-size: 90%;
}
.all-project-screenshots .video-overlay {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  /* background-color: #dde3e9 !important; */
  background-color: #e0e5eb !important;
  opacity: 1 !important;
}
#video-backdrop {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}
.all-project-screenshots .video-overlay {
  position: fixed;
  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  opacity: 0.30;
  background-color: #1b1f20;
}
@media all and (max-width: 900px) {
  .all-project-screenshots .screenshots-inner {
    width: 100%;
  }
  .all-project-screenshots .inner {
    width: 100%;
    max-width: 100% !important;
  }
  .all-project-screenshots .screenshots .image-box img {
    min-width: 70%;
  }
  .all-project-screenshots .screenshots .image-box .image-w30 img {
    min-width: 70%;
  }
  .all-project-screenshots .screenshots .image-box .image-w40 img {
    min-width: 80%;
  }
  .all-project-screenshots .screenshots .image-box .image-w50 img {
    min-width: 90%;
  }
  .all-project-screenshots .screenshots .image-box .image-w60 img {
    min-width: 90%;
  }
  .all-project-screenshots .screenshots .image-box .image-w70 img {
    min-width: 90%;
  }
  .all-project-screenshots .screenshots .image-box .image-w80 img {
    min-width: 90%;
  }
  .all-project-screenshots .screenshots .image-box .image-w90 img {
    min-width: 90%;
  }
  #video-backdrop {
    bottom: auto;
    top: 0%;
    min-width: auto;
    min-height: auto; 

    width: 120vw; 
    height: auto;
    margin: 0 auto;
  }
}
.all-project-screenshots .section-title {
  padding-top: 1em;
  padding-bottom: 0.2em;
  line-height: 1.45;
  margin-top: 3.6%;
}
.all-project-screenshots .section-title h2 {
  font-family: fontheading2;
  text-shadow: 8px 5px 9px #8b95a4;
  font-size: 3.4em;
  color: white;
  line-height: 1.05;
}
.all-project-screenshots .subtitle-box {
  background-color: white; 
  padding: 2em 1.86em;
  padding-left: 2.05em;
  width: 30em; 
  margin: 0.6em auto;
  margin-bottom: 2.16em;
  margin-top: 4.1%;
}
.all-project-screenshots .subtitle-box .subtitle {
  text-align: left;
}
.all-project-screenshots .section-title .subtitle {
  margin-top: 1em;
  color: #3e4348;
  line-height: 1.5;
  font-family: fontlight;
  letter-spacing: 0.02em;
}
.all-project-screenshots .section-title .region {
  margin-top: 0.42em;
}
.all-project-screenshots .section-title .client-summary {
  margin-top: 0;
}
.all-project-screenshots .subtitle-box h4 {
  margin-bottom: 0.84em;
  font-family: fontheading;
  font-size: 1.12em;
}
.all-project-screenshots .point {
  font-size: 124%;
  margin-right: 0.32em;
}
.all-project-screenshots .button-view-project {
  margin: 6% 0; 
  margin-bottom: 10%; 
  border-radius: 1.5em;
  font-family: fontheading;
  font-size: 124%;
  color: #000; 
  border: 3px solid #101010;
  display: inline-block; 
  padding: 0.57em 1.65em; 
  padding-bottom: 0.57em;
  transition: 0.36s ease all;
  animation: buttonViewProjectAnim 3.2s linear 1s 30;
}
.all-project-screenshots .button-view-project:hover {
  background-color: #333;
  color: #eef1f5; 
}
@-webkit-keyframes buttonViewProjectAnim {
0% {
  background-color: transparent;
}
20% {
  background-color: transparent;
}
40% {
  background-color: #ffd900;
}
60% {
  background-color: #ffd900;
}
80% {
  background-color: transparent;
}
100% {
  background-color: transparent;
}
}
@keyframes buttonViewProjectAnim {
0% {
  background-color: transparent;
}
20% {
  background-color: transparent;
}
40% {
  background-color: #ffd900;
}
60% {
  background-color: #ffd900;
}
80% {
  background-color: transparent;
}
100% {
  background-color: transparent;
}
}
@media all and (min-width: 2100px) {
  .all-project-screenshots .screenshots-inner .inner {
    max-width: 64%;
  }
}
@media all and (min-width: 2400px) {
  .all-project-screenshots .screenshots-inner .inner {
    max-width: 60%;
  }
}
@media all and (min-width: 2700px) {
  .all-project-screenshots .screenshots-inner .inner {
    max-width: 57%;
  }
}
@media all and (min-width: 3000px) {
  .all-project-screenshots .screenshots-inner .inner {
    max-width: 55%;
  }
}
@media all and (min-width: 3600px) {
  .all-project-screenshots .screenshots-inner .inner {
    max-width: 53%;
  }
}
@media all and (min-width: 4200px) {
  .all-project-screenshots .screenshots-inner .inner {
    max-width: 51%;
  }
}




@media all and (max-width: 900px) {
  .all-project-screenshots .subtitle-box {
    width: 70%;
    max-width: 70%; 
    margin-bottom: 1.6em;
  }
  .all-project-screenshots .image-box {
    width: 100%;
    margin: 8.4% 0%;
  }
}
@media all and (max-width: 720px) {
  .all-project-screenshots .subtitle-box {
    width: 75%;
    max-width: 75%; 
  }
}
@media all and (max-width: 480px) {
  .all-project-screenshots .subtitle-box {
    width: 82%;
    max-width: 82%; 
  }
}



/* MENU */
.main-nav-menu {

}
.header .side-nav-links {
  width: 3em;
  height: 3em;
  position: fixed;
  right: 0.3em;
  top: 0.3em; 
  z-index: 216;
}
.side-nav-link-button {
  min-width: 4.8em;  
  position: fixed;
  right: 1em;
  top: 1.16em;
  z-index: 10;
  padding: 1px 2px;
  border-radius: 1.5em;
  cursor: pointer;

  font-size: 93%;
  color: #000;
  font-family: fontlight;
  text-align: center;
  background-color: white;
  /* box-shadow: 0px 2px 12px rgba(84, 93, 119, 0.24); */
  transition: 0.6s ease all;
}
.aboutme-page #show-menu-button {
  border: 2px solid #596777;
}
.recruit-game-page #show-menu-button {
  border: 2px solid #596777;
}
.header .side-nav-link-button:nth-child(1) {
}
.header .side-nav-link-button:nth-child(2) {
}
.side-nav-link-button .nav-link {
  display: inline-block;
  padding: 5px 12px;
  padding-top: 5px;
  padding-left: 14px;
  letter-spacing: 0.042em;
  font-family: fontlight;
  font-weight: bold;
  font-size: 90%;
  /* text-transform: uppercase; */
  transition: 0.7s cubic-bezier(.5,.7,.7,.5) all;
}
#hide-menu-button {
  display: none; 
  color: #eef1f5; 
  border: 2px solid #eef1f5; 
  background-color: transparent;
  text-align: center;
}
#hide-menu-button .nav-link {
  font-family: fontheading;
}
#hide-menu-button:hover {
  color: #000; 
  border: 2px solid #eef1f5; 
  background-color: #fff;
}
.side-nav-link-button:hover {
  box-shadow: 0px 2px 12px rgba(84, 93, 119, 0.24);
}
.main-page-header {
  /* background: linear-gradient(90deg, rgba(25, 25, 26, 0.84) 0%, rgba(32, 33, 34, 0.75) 100%);
  width: 100%;
  height: 100vh;
  z-index: 6;
  position: absolute;
  top: 0;
  left: 0; */
}
.main-nav {
  position: fixed;
  top: 0;
  right: -10vw;
  text-align: left;
  background-color: #212529; 
  width: 100%;
  height: 100vh;
  min-height: 99.9vh;
  padding: 7% 4.2%;
  z-index: 210;
  opacity: 0.98;
  width: 2em;
  transition: 0.7s cubic-bezier(.5,.7,.7,.5) all;
  
  background: linear-gradient(90deg, rgba(25, 25, 26, 0.9) 0%, rgba(32, 33, 34, 0.87) 100%), 
  /* url('../../media/img/artwork/top-view-coder.png'); */
  url('../../media/img/artwork/overcome-milestone.png');
  /* url('../../media/img/bkgd/desk02.jpg'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
} 
.nav-inner {

}
.main-nav .nav-link {
  display: block; 
  margin: 2.16% 3%; 
  font-size: 105%; 
  width: 100%;
  text-align: left;
}
@media all and (max-width: 900px) {
  .main-nav {
    padding-left: 6%;
  }
  .main-nav .nav-link {
    margin: 3.75% 3%; 
    font-size: 103%; 
  }
}
.main-nav .nav-link-a {
  /* background-color: #e7ebee; */
  display: inline-block;
  min-width: 6em;
  font-family: fontheading2;
  font-family: fontheading;
  /* font-family: fontlight;  */
  letter-spacing: 0.014em;
  padding: 0.14em 0.5em;
  color: #e7ebee;
  text-align: center;

  border-radius: 0.07em;
  border: 3px solid #e7ebee;
  padding: 0.32em 0.64em;
  padding-bottom: 0.36em;
}
.main-nav .nav-link-a:hover {
  background-color: #004cbe;
}
.main-nav .nav-link .icon {
  padding: 0.14em 0em;
  margin-left: 0.6em;
}
.main-nav .nav-link .icon img {
  vertical-align: middle;
  height: 2.1em;
  width: auto;
  padding-bottom: 0.2em;
  filter: invert(1);
}
/* .main-nav .nav-link-a:hover + .icon img {
  animation: navIconMove 3s ease-in-out 0.5s 1 forwards;
} */
.nav-icon-move {
  animation: navIconMove 3s ease-in-out 0s 1 forwards;
}
.nav-link-anim-show {
  animation: mainNavShow 1.65s ease-out 0s 1 forwards;
}
.nav-link-anim-hide {
  animation: mainNavHide 1.54s cubic-bezier(.5,.7,.7,.5) 0s 1 forwards;
}

.main-nav .image-sun img {
  height: 2em;
  width: auto; 
  cursor: pointer;
  margin-left: 0.42em;
}
.photos-of-me {
  margin: 0 5.7%;
}
.photos-of-me .photo img {
  height: 6.4em;
  width: auto;
  max-height: 17.5vh;
  margin: 0.5em 0;
  margin-right: 0.72em;
  filter: grayscale(1) brightness(1.02);
}
@media all and (max-width: 900px) {
  #side-menu-home-button {
    display: none;
  }
  .side-nav-link-button {
    min-width: 4em;  
    position: fixed;
    right: 0.54em;
    top: 0.7em;
    font-size: 93%;
    z-index: 6;
    padding: 1px 1px;
  }
}
@media all and (max-width: 640px) {
  .main-nav {
    padding-top: 9.6%;
  }
  .main-nav .nav-link-a {
    border: 2px solid #e7ebee;
  }
}

@keyframes navIconMove {
0% { 
  transform: translateX(0);
  opacity: 1;
}
100% {
  transform: translateX(60vw);
  opacity: 0;
}
}

@keyframes mainNavShow {
0% {
  width: 2em;
  right: -10vw;
  opacity: 1;
}
50% {
}
100% {
  width: 100%;
  right: 0;
}
}
@keyframes mainNavHide {
0% {
  width: 100%;
  right: 0;
  opacity: 1;
  z-index: 12;
}
30% {
  opacity: 0.5;
}
75% {
  width: 100%;
  right: 0;
  opacity: 0;
}
100% {
  width: 100%;
  right: 0;
  opacity: 0;
  z-index: 0;
}
}



.night-button {
  background-color: transparent;
  color: #e7ebee; 
}
.night-button:hover {
  background-color: #e7ebee;
  color: #000 !important; 
  /* font-family: fontheading; */
}


/* Recruit me mini-game */ 
.recruit-game {
  padding: 5.4% 3.6%;
  min-height: 36em;
  text-align: center;
}
@media all and (min-width: 1500px) {
  .recruit-game {
    padding: 4.8% 3.2%;
}
.recruit-game .options {
  margin-top: 9px;
}
}
.recruit-game .title {
}
.recruit-game .question {
  font-family: fontbody;
  /* font-family: fontheading; */
  font-family: fontlight;
  letter-spacing: 0.002em;
  margin-top: 0.84em;
}
.recruit-game section {
  font-size: 1.36em;
}
@media all and (max-width: 900px) {
  .recruit-game section {
    font-size: 1.27em;
  }
}
@media all and (max-width: 720px) {
  .recruit-game section {
    font-size: 1.2em;
  }
}
@media all and (max-width: 600px) {
  .recruit-game section {
    font-size: 1.17em;
  }
}
.recruit-game .section-one {
  min-height: 7em;
}
.recruit-game .options {
  text-align: center;
}
.recruit-game .option {
  cursor: pointer;
  font-family: fontbody;
  font-family: fontheading;
  margin: 1.27em 0.9em; 
  border-radius: 0.24em;
  margin-bottom: 0.5em;
  letter-spacing: 0.016em;
  padding: 15px 18px; 
  min-width: 14em; 
  color: #f8f9fa; 
  color: #000; 
  background-color: #0064d6;
  background-color: transparent;
  border: 4px solid black;
  /* box-shadow: 1px 3px 14px rgba(128, 136, 147, 0.5); */
  transition: 0.5s ease-out all;
}
.recruit-game .option:hover {
  background-color: #0064d6;
  background-color: #3b3e41;
  color: #f8f9fa; 
  /* background-color: transparent; */
  /* border: 5px solid #202020; */
  /* color: #333;  */
}
.recruit-game .title .heading h1 {
  font-family: fontheading2;
  font-family: fontheading;
  letter-spacing: 0em; 
  margin-bottom: 10px;
}
@media all and (max-width: 720px) {.recruit-game .title .heading h1 {
  margin-top: 7%;
}
}
.recruit-game-inner {
  position: relative;
}
.game-points-section .points-ui {
  position: relative;
  text-align: center;
}
.points-total .value .digit {
  font-family: fontbody;
  font-family: fontheading;
  font-size: 6.4em;
  margin-top: 0.12em;
  margin-left: 0.2em;
  line-height: 1;
  color: #1b9c64; 
  letter-spacing: -0.03em;
  display: inline-block;
}
.points-total .value .label {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 1.86em;
  font-family: fontheading;
}
.recruit-game .label-2 {
  font-family: fontheading;
  font-size: 93%; 
  /* margin-left: -1em; */
  margin-top: -0.07em;
}
.recruit-game .question {
  display: none;
  line-height: 1.36;
}
.recruit-game .q1 {
  display: block;
}
.preferred-option-anim {
  animation: preferredOptionAnim 4.2s ease-in-out 0.3s 1 backwards;
}
.recruit-game .question em {
  font-family: fontheading;
}
.recruit-game .qfinal-em {
  display: block;
  color: #1b9c64; 
  font-size: 3.6em;
  margin-top: 0.3em;
  margin-bottom: -0.2em;
}
.progress-bar {
  margin-top: 6px;
  height: 0.9em;
  width: 1.5em;
  margin: 0 auto;
  margin-top: 0.3em;
  border-radius: 0.42em;
  background-color: #f8f9fa; 
  border: 3px solid black;
  transition: 0.7s cubic-bezier(.5,.7,.7,.5) all;
}
.recruit-game .progress-text {
  font-size: 77%;  
  margin-top: 1.05em; 
  margin-bottom: 1em; 
}
.progress-bar-10 {
  width: 1.25em;
}
.progress-bar-20 {
  width: 2.5em;
}
.progress-bar-30 {
  width: 3.75em;
}
.progress-bar-40 {
  width: 5em;
}
.progress-bar-50 {
  width: 6.25em;
}
.progress-bar-60 {
  width: 7.5em;
}
.progress-bar-70 {
  width: 8.75em;
}
.progress-bar-80 {
  width: 10em;
}
.progress-bar-90 {
  width: 11.25em;
}
.progress-bar-100 {
  width: 12.5em;
  background-color: rgb(0, 170, 91); 
}
@keyframes preferredOptionAnim {
10% {
  border: 4px solid black;
}
25% {
  background-color: transparent;
  border: 4px solid #36455c;
}
40% {
  background-color: #ffd000;
  border: 4px solid black;
}
60% {
  background-color: transparent;
  border: 4px solid #36455c;
}
80% {
}
100% {
  border: 4px solid black;
}
}

.recruit-game .final-links {
  padding-top: 1em;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.recruit-game .final-links .option {
  width: 17em;
  max-width: 18.6em;
  margin: 0 auto;
  margin-top: 1.65em;
  font-size: 1.36em;
}






.about-me-summary {
  padding-top: 1.6em;
  padding-bottom: 1.65em;
  background-color: #fff;
}
.about-me-summary .left {
  float: left;
  width: 30%;
}
.about-me-summary .right {
  float: right;
  width: 70%;
}
.about-me-summary .box-data {
  margin: 2.95% 3%;
  height: 16em;
  width: 19%;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 96%;
  box-shadow: 3px 4px 60px rgba(111, 123, 141, 0.32);
}
.about-me-summary .subtitle-box {
  width: 19.6em;
  height: 15.6em;
  margin: 2.3% 3.5%;
  /* background-color: transparent; */
}
.about-me-summary .subtitle-box .subheading {
  font-size: 0.8em;
}
.about-me-summary .designation {
  font-size: 1.27em; 
  color: #000;
}
.designation-subtext {
  color: #8c95a0;
  font-size: 80%;
  margin-top: 0.6em;
}
@media all and (max-width: 1920px) {
  .about-me-summary .left {
    width: 25%;
  }
  .about-me-summary .right {
    padding-left: 3%;
    width: 75%;
  }
}
@media all and (max-width: 1800px) {
  .about-me-summary .left {
    width: 23%;
  }
  .about-me-summary .right {
    width: 77%;
    padding-left: 3.5%;
  }
  .about-me-summary .box {
    height: 15.6em;
  }
}
@media all and (max-width: 1680px) {
  .about-me-summary .right {
    padding-left: 4.2%;
  }
}
@media all and (max-width: 1500px) {
  .about-me-summary .left {
    width: 28%;
  }
  .about-me-summary .right {
    width: 72%;
    padding-left: 3.5%;
  }
  .about-me-summary .box {
    height: 15em;
  }
  .about-me-summary .subtitle-box {
    height: 16em;
  }
}
@media all and (max-width: 1200px) {
  .about-me-summary .left {
    padding-left: 2.5%;
    width: 40%;
  }
  .about-me-summary .right {
    padding-right: 0.5%;
    width: 60%;
  }
  .about-me-summary .box-data {
    width: 35%;
    margin: 5% 5%;
    height: 16em;
  }
  .about-me-summary .subtitle-box {
    height: 37.84em;
  }
}
@media all and (max-width: 1080px) {
  .about-me-summary .left {
    width: 27%;
  }
  .about-me-summary .right {
    width: 73%;
  }
  .about-me-summary .box-data {
    width: 30%;
    margin: 3.84% 4%;
    height: 16em;
  }
  .about-me-summary .subtitle-box {
    height: 37.84em;
  }
}
@media all and (max-width: 960px) {
  .about-me-summary {
    padding-top: 5em;
  }
  .about-me-summary .left {
    width: 100%;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-me-summary .right {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-me-summary .box {
    width: 30%;
    margin: 3.2% 3.2%;
    height: 19.6em; 
    text-align: center;
  }
  .about-me-summary .subtitle-box {
  }
  .about-me-summary .subtitle-box h2 {
    text-align: center;
    margin-top: 0.36em;
  }
  .about-me-summary .subtitle-box .subheading {
    text-align: center;
    font-size: 1.05em;
    margin-top: 3px;
  }
}
@media all and (max-width: 720px) {
  .about-me-summary .box {
    width: 40%;
    margin: 4.5% 30% !important;
    height: 19.6em; 
    text-align: center;
    padding-left: 6%;
    padding-right: 6%;
  }
  .about-me-summary .subtitle-box {
  }
}
@media all and (max-width: 640px) {
  .about-me-summary .box {
    width: 36%;
    margin: 4.2% 32% !important;
    height: 17.5em; 
    text-align: center;
  }
  .about-me-summary .subtitle-box {
  }
}
@media all and (max-width: 570px) {
  .about-me-summary .box {
    width: 46%;
    margin: 4.5% 27% !important;
    height: 17.7em; 
    text-align: center;
  }
  .about-me-summary .subtitle-box {
  }
}
@media all and (max-width: 480px) {
  .about-me-summary .box {
    width: 49.5%;
    margin: 4.5% 4.5%;
    height: 15em; 
    text-align: center;
  }
  .about-me-summary .subtitle-box {
  }
}


.about-me-duties {
  background-color: #eef1f5;
}
.about-me-duties .about-me-summary-inner .box {
}
.about-me-duties .about-me-summary-inner .box-data {
  width: 27%;
  height: 18.6em;
  font-size: 112%;  
  text-align: left;
  padding-left: 1.96em;
  padding-right: 1.86em;
  margin: 3% 3%;
  line-height: 1.5;
  /* box-shadow: none; */
  /* border: 1px solid #333; */
  box-shadow: 4px 4px 15px rgb(111, 123, 141, 0.20);
  
  background: linear-gradient(125deg, 
  rgba(253, 253, 255, 1) 50%, rgba(248, 251, 255, 1) 100%);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
.subtitle-box-outer {
  width: 100%;
}
.about-me-duties .about-me-summary-inner .subtitle-box {
  width: 100%;
  margin-bottom: -1.6%;
  margin-top: 0;
  background-color: #eef1f5;
}
.about-me-duties .about-me-summary-inner .subtitle-box .subtitle {
  text-align: center;
}
.about-me-duties .about-me-summary-inner .subtitle-box h2 {
  text-align: center;
}
.about-me-duties .about-me-summary-inner .subtitle-box .subheading {
  text-align: center;
}
.about-me-duties .subtitle-box .subheading {
  font-size: 0.72em;
}
.about-me-summary .box-data em {
  color: #000;
  font-size: 97%;
  font-family: fontheading; 
  letter-spacing: 0.016em;
}
.about-me-duties .details {
  color: #000;
}
.details-subtext {
  color: #8c95a0;
  font-size: 93%;
  margin-top: 1.05em;
}
.button-view-project-2 {
  font-size: 82%;
  margin-top: 1.2em;
  border: 1px solid #777;
  text-align: center;
  padding: 8px 19px;
  display: inline-block;
  border-radius: 0.05em;
  line-height: 1.54;
  transition: 0.42s cubic-bezier(.5,.7,.7,.5) all;
}
.button-view-project-2:hover {
  color: #f8f9fa;
  background-color: #004cbe;
  border: 1px solid #004cbe;
}
.button-view-project-3 {
  padding: 9px 21px;
}
.button-view-project-3:hover {
  color: #f8f9fa;
  background-color: #005dc7;
  border: 1px solid #005dc7;
  border-radius: 2.4em;
}

@media all and (min-width: 1860px) {
  .value-added-outer {
    width: 80%;
  }
}
@media all and (min-width: 2400px) {
  .value-added-outer {
    width: 75%;
  }
}
@media all and (min-width: 2700px) {
  .value-added-outer {
    width: 70%;
  }
}
@media all and (min-width: 3000px) {
  .value-added-outer {
    width: 68%;
  }
}


@media all and (max-width: 1200px) {
  .value-added-outer {
    width: 100%;
  }
  .about-me-summary .subtitle-box {
    height: 12.7em;
  }
  .about-me-duties .about-me-summary-inner .box-data {
    width: 30%;
    height: 17em;
    margin: 5% 4.2%;
  }
}
@media all and (max-width: 1080px) {
  .about-me-duties .about-me-summary-inner .box-data {
    width: 32%;
    height: 16.5em;
    margin: 4.2% 4.2% !important;
  }
}
@media all and (max-width: 780px) {
  .about-me-duties .about-me-summary-inner .box-data {
    width: 40%;
    height: 17.7em;
    padding-left: 1.5em;
    padding-right: 1.43em;
  }
}
@media all and (max-width: 640px) {
  .about-me-duties .about-me-summary-inner .box-data {
    width: 57%;
    height: 18.6em;
    margin: 6% 4.5% !important;
  }
}
@media all and (max-width: 540px) {
  .about-me-duties .about-me-summary-inner .box-data {
    width: 64%;
    height: 18em;
  }
}


.about-me-overview {

}
.about-me-overview .box-content {
  padding-top: 6%;
  padding-bottom: 6%;
}
.about-me-overview .box-content .detail {
  font-size: 1.36em;
  font-family: fontheading;
  letter-spacing: 0.006em;
  line-height: 1.4;
  margin-top: 1em;
}
.about-me-overview .subtitle-box .subheading {
  font-size: 1.00em;
}
.about-me-overview .sub-detail {
  font-size: 105%;
  margin-top: 1em;
}
.about-me-overview .box-title {
  font-size: 1.32em;
}
.about-me-summary .box-content .photo img {
  filter: grayscale(1) brightness(1.34);
}
.about-me-overview .box-content .photo {
  width: 50%;
  margin-top: 0;
  margin-bottom: 0;
}
@media all and (max-width: 1500px) {
  .about-me-overview .box-content .detail {
    font-size: 1.34em;
  }
}
@media all and (max-width: 900px) {
  
  .about-me-overview-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-me-overview .box-content {
    width: 23em;
    margin-left: 10%;
    margin-right: 10%;
    height: 27em;
    clear: both;
  }
  .about-me-overview .subtitle-box {
    width: 23em;
    margin-left: 10%;
    margin-right: 10%;
  }
}
@media all and (max-width: 720px) {  
  .about-me-overview {
    padding-top: 5%;
    padding-bottom: 12%;
  }
  .about-me-overview .box-content {
    width: 20em !important;
    margin-left: 7%;
    margin-right: 7%;
    height: 24.5em;
    clear: both;
    margin-bottom: 3.6%;
  }
  .about-me-overview .subtitle-box {
    width: 20em !important;
    margin-left: 7%;
    margin-right: 7%;
  }
  .about-me-summary {
    padding-top: 6%;
  }
  .about-me-summary .box {
    margin-bottom: 6.4% !important;
  }
  .about-me-summary .subtitle-box {
    font-size: 1.36em;
  }
}
@media all and (max-width: 510px) {  
  .about-me-overview .box-content {
    width: 17em !important;
    margin-left: 3%;
    margin-right: 3%;
    height: 21.5em;
    clear: both;
    margin-bottom: 3.6%;
  }
  .about-me-overview .subtitle-box {
    width: 17em !important;
    margin-left: 3%;
    margin-right: 3%;
  }
}

 /*
@media all and (max-width: 1600px) {
  .about-me-overview .box-content {
    padding-top: 5em;
    padding-bottom: 5em;
  }
}
@media all and (max-width: 1400px) {
  .about-me-overview .box-content {
    padding-top: 4.5em;
    padding-bottom: 4.5em;
  }
}
@media all and (max-width: 1080px) {
  .about-me-overview .box-content {
    padding-top: 4em;
    padding-bottom: 4em;
  }
}
@media all and (max-width: 840px) {
  .about-me-overview .box-content {
    padding-top: 3em;
    padding-bottom: 3em;
  }
} */

.dot-decor {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: black; 
  margin: 0.36em auto;
  text-align: center;
}
.dot-more-space-above {
  margin-top: 0.4em;
}
.about-me-summary .dot-decor {
  display: inline-block;
  margin-bottom: 0.72em;
  margin-right: 2px;
}





.project .ux-process .subtext {
  padding: 0;
  background-color: none;
  font-size: 90%; 
}
@media all and (max-width: 900px) {
  .project .ux-process .subtext {
    padding: 0 !important;
  }
}
.project .ux-process .other-facts {
  background-color: none;
  padding: 1.54% 1.5%;
  padding-left: 0rem;
}
.project .ux-process .unit {
  background-color: #3c4654; 
  margin: 3% 6%;
  margin-left: 0%;
  width: 25%;
  min-width: 13.5em;
  padding-bottom: 5%;
  background: linear-gradient(90deg, rgba(46, 48, 51, 0.9) 0%, rgba(50, 51, 54, 0.9) 100%), url('../../media/img/artwork/team-board.png');
  background-size: 64% auto;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
} 
.project .ux-process .unit .line {
  background-color: #ffd900;
  margin: 0.96em auto;
}
.project .ux-process .unit .number {
  color: #ffd900;
  font-family: fontheading2;
  font-size: 2.4em; 
  letter-spacing: 0.072em;
}
.project .ux-process .unit {
  color: #eef1f5;
}
.project .ux-process .unit .unit-text {
  color: #eef1f5;
  line-height: 1.45;
  letter-spacing: 0.034em;
}
.project .ux-process .unit .unit-text em {
  font-family: fontheading;
  display: block;
  margin-bottom: 17px;
  margin-top: -3px;
  font-size: 120%; 
  letter-spacing: 0.024em; 
}


.letterspacing-0 {
  letter-spacing: -0.005em !important;
}