html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  border: 0;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --color: purple;
  --typing-color: #2196f3;
}

*, :after, :before {
  box-sizing: border-box;
  backface-visibility: hidden;
}

html, body {
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  scroll-behavior: smooth;
  background: #000;
  font: 300 .9em / 1.7 Raleway;
  transition: transform 1s;

  @media (width >= 768px) {
    font-size: 1.2em;
  }

  @media (width >= 960px) {
    font-size: 1.1em;
  }
}

h1, h2, h3, h4, h5, h6, strong {
  font-weight: 800;
}

a {
  color: inherit;
}

[class^="icon-"], [class*=" icon-"] {
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
}

.slide-container {
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  position: fixed;
  inset: 0;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.slide {
  text-align: center;
  color: #fff;
  scroll-snap-align: start;
  width: 100vw;
  height: 100dvh;
  padding: 20px;
}

.slide-swipe {
  .not-touch & {
    display: none;
  }

  opacity: 0;
  z-index: -10;
  pointer-events: none;
  z-index: 1;
  background: #00000080;
  transition: opacity 1s;
  position: fixed;
  inset: 0;

  & .icon {
    opacity: 0;
    color: #fff;
    filter: drop-shadow(0 0 5px #000);
    width: 4em;
    height: 4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &.orientation, &.vertical, &.horizontal {
    opacity: 1;
    z-index: 99999;
    transition: none;
  }

  &.vertical .icon-touch {
    animation: .85s 2 swipe-vertical;
  }

  &.horizontal .icon-touch {
    animation: .85s 2 swipe-horizontal;
  }

  &.orientation {
    background: #000000e6;

    & .icon-orientation {
      opacity: 1;
      width: 6em;
      height: 6em;
    }
  }
}

@keyframes swipe-vertical {
  0% {
    opacity: 0;
    transform: translateZ(0)translateY(25vh)rotate(40deg);
  }

  50% {
    opacity: 1;
    transform: translateZ(0)translateY(-25vh)rotate(20deg);
  }

  100% {
    opacity: 0;
    transform: translateZ(0)translateY(25vh)rotate(40deg);
  }
}

@keyframes swipe-horizontal {
  0% {
    opacity: 0;
    transform: translateZ(0)translateX(25vw)rotate(40deg);
  }

  50% {
    opacity: 1;
    transform: translateZ(0)translateX(-25vw)rotate(0);
  }

  100% {
    opacity: 0;
    transform: translateZ(0)translateX(25vw)rotate(40deg);
  }
}

.header {
  color: #fff;
  background: url("bg-header.fc907c7f.jpg") 50% 20% / cover no-repeat;
  position: relative;

  .touch & {
    background-position: bottom;
  }
}

.header-container {
  background-color: #000;
  transition: background-color 5s;
  position: absolute;
  inset: 0;

  .animated & {
    background-color: #000000d9;
  }
}

.header-bio {
  text-align: center;
  width: 100%;
  margin-top: -150px;
  margin-left: -50%;
  font-weight: 300;
  position: absolute;
  top: 42%;
  left: 50%;

  .no-touch & {
    top: 42%;
  }

  & a {
    transition: all .5s;

    &:hover {
      color: var(--color);
    }
  }

  & h2 {
    word-spacing: -.2em;
    margin-bottom: .2em;
    font-size: 2em;
    font-weight: 300;
  }

  & p strong {
    color: #fff;
    opacity: 0;
    transition: opacity 1s;
    position: relative;
  }

  .header.animated & p strong:first-of-type {
    opacity: 1;
    transition-delay: .3s;
  }

  .header.animated & p strong:nth-of-type(2) {
    opacity: 1;
    transition-delay: .6s;
  }

  .header.animated & p strong:nth-of-type(3) {
    opacity: 1;
    transition-delay: .9s;
  }

  .header.animated & p strong:nth-of-type(4) {
    opacity: 1;
    transition-delay: 1.2s;
  }

  .header.animated & p strong:nth-of-type(5) {
    opacity: 1;
    transition-delay: 1.5s;
  }

  .header.animated & p strong:nth-of-type(6) {
    opacity: 1;
    transition-delay: 1.8s;
  }

  .header.animated & p strong:nth-of-type(7) {
    opacity: 1;
    transition-delay: 2.1s;
  }

  & p span {
    color: #eee;
    opacity: 0;
    transition: opacity 3s;
  }

  .header.animated & span {
    opacity: 1;
    transition-delay: 1.8s;
  }
}

.header-avatar {
  border: .15em solid #fff;
  border-radius: 100%;
  width: 6.5em;
  height: 6.5em;
  margin-bottom: .5em;

  @media (width >= 960px) {
    width: 4.8em;
    height: 4.8em;
  }
}

.social {
  margin: .8em auto 0;

  & ul {
    height: 3.5em;
  }

  & ul, & li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    float: left;
    margin: 5px;
  }

  & a {
    opacity: 0;
    border: .12em solid #fff;
    border-radius: 50%;
    width: 3.2em;
    height: 3.2em;
    margin-left: -1.5em;
    text-decoration: none;
    transition: opacity 1s 2.4s, transform .7s ease-out 2.7s, border-color 1s 2.4s;
    display: block;
    position: absolute;
    left: 50%;
    overflow: hidden;
  }

  & .icon {
    color: #ddd;
    opacity: 0;
    width: 1.6em;
    height: 1.6em;
    transition: opacity 1s 2.7s, color 1s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.header.animated {
  & .icon, & a {
    opacity: 1;
  }

  & .social-email a {
    transform: translateX(-180%);
  }

  & .social-codepen a {
    transform: translateX(-60%);
  }

  & .social-github a {
    transform: translateX(60%);
  }

  & .social-linkedin a {
    transform: translateX(180%);
  }
}

.header-scroll {
  .touch & {
    display: none;
  }

  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  width: 100px;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 1s 3s;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  .header.animated & {
    opacity: .7;
  }

  & .icon {
    width: 3em;
    height: 3em;
    margin: 0 auto 10px;
    animation: 2.5s ease-out infinite flash;
    display: block;
  }
}

@keyframes flash {
  0% {
    opacity: .3;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(10px);
  }

  100% {
    opacity: .3;
    transform: translateY(0);
  }
}

.works {
  padding: 0;
  position: relative;
}

.work-container {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: linear-gradient(#444, #000);
  height: 100vh;
  display: flex;
  position: relative;
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.work {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px #000;

  @media (width >= 960px) {
    width: 33.333vw;
  }

  @media (width >= 1200px) {
    width: 25vw;
  }
}

.work-pagination {
  color: #fff;
  opacity: 0;
  z-index: 100;
  margin: 0;
  padding: 0;
  transition: opacity .5s;
  position: fixed;
  bottom: 7.5vh;
  left: 50%;
  transform: translateX(-50%);

  @media (device-width <= 768px) and (orientation: landscape) {
    display: none;
  }

  & a {
    border: .1em solid #fff;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 5px;
    transition: transform .5s;
    display: inline-block;

    &.active {
      background: #fff;
      transform: scale(1.3);
    }
  }
}

html.works-visible .work-pagination {
  opacity: 1;
}

.work-previous, .work-next {
  text-shadow: 0 0 5px #00000080;
  opacity: 0;
  z-index: 100;
  margin-top: 130px;
  font-size: 1.5em;
  text-decoration: none;
  transition: transform 1s, opacity .5s;
  display: block;
  position: fixed;
  top: 47%;
  transform: translate(0, -50%);
}

html.works-visible .work-previous:not(.disabled), html.works-visible .work-next:not(.disabled) {
  opacity: 1;
}

.work-previous {
  left: 30px;

  &.disabled {
    opacity: 0;
    transform: translate(-50px);
  }

  &:not(.disabled) .icon {
    animation: 4s ease-out infinite flash-left;
  }
}

.work-next {
  right: 30px;

  &.disabled {
    opacity: 0;
    transform: translate(50px);
  }

  &:not(.disabled) .icon {
    animation: 4s ease-out infinite flash-right;
  }
}

.work-previous .icon, .work-next .icon {
  width: 1em;
  height: 1.4em;
}

.work-pagination a, .work-button {
  box-shadow: 0 0 5px #0000004d;
}

.work-hover {
  background: linear-gradient(#0000, #0009);
  transition: transform .25s;
  position: absolute;
  inset: 0;
  transform: translateY(100vh);

  @media (width >= 768px) and (device-width >= 769px) {
    .work:hover & {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.work-logo, .work-details, .work-button {
  transition: all 2s cubic-bezier(0, 1, 0, 1);
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.work-logo {
  height: auto;
  display: block;

  @media (width <= 768px) {
    top: 18%;
  }

  @media (width >= 768px) and (device-width >= 769px) {
    .work:hover & {
      opacity: .03;
      transform: translate(-50%, -50%)scale(2.2);
    }
  }
}

.work-details {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  width: 100%;
  padding: 10px;
  display: table;

  @media (width >= 768px) and (device-width >= 769px) {
    opacity: 0;

    .work:hover & {
      opacity: 1;
      transform: translate(-50%, -90px);
    }
  }

  & .work-wrapper {
    vertical-align: middle;
    height: 6em;
    display: table-cell;
  }

  & h3 {
    padding-bottom: .4em;
    font-size: 1.5em;
    line-height: 1.1em;
  }

  & p {
    font-size: .9em;
    line-height: 1.1em;

    @media (width <= 768px) {
      font-weight: bold;
    }
  }
}

.work-button {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  border: .2em solid #fff;
  border-radius: 50%;
  width: 5em;
  height: 5em;
  font-weight: bold;
  line-height: 4.6em;
  text-decoration: none;

  @media (width <= 768px) {
    top: 55%;
  }

  @media (width >= 768px) and (device-width >= 769px) {
    opacity: 0;
    width: 4em;
    height: 4em;
    line-height: 3.8em;

    .work:hover & {
      opacity: 1;
      transform: translate(-50%, 40px);
    }
  }

  &:hover {
    border-color: #fff3;
    transform: translate(-50%, 30px)scale(1.2) !important;
  }
}

.facedetection {
  background: url("facedetection-bg.33245232.jpg") center;
}

.facedetection-logo {
  opacity: .9;
  width: 80%;
  max-width: 450px;
}

.vegas {
  background: #000 url("vegas-bg1.4671fed9.jpg") center / cover no-repeat;
  position: relative;

  & .vegas-logo {
    width: 95%;
    max-width: 450px;
  }

  @media (width >= 768px) and (device-width >= 769px) {
    background-position: 50%;
    transition: background-position .3s;

    &:hover {
      background-position: 60%;
    }
  }
}

.vegas-overlay {
  opacity: .3;
  background: url("vegas-overlay.fddee6c8.png"), linear-gradient(#0000, #0000004d);
  position: absolute;
  inset: 0;
}

.buzz {
  background: linear-gradient(#7fa917, #3f550b);
}

.buzz-logo {
  width: 50%;
  max-width: 300px;
}

.markitup {
  background: linear-gradient(#fff 25%, #538bad 75%);
}

.markitup-logo {
  width: 180%;
  max-width: 700px;
}

@keyframes flash-left {
  0% {
    opacity: .4;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-10px)scale(1.6);
  }

  100% {
    opacity: .4;
    transform: translateX(0);
  }
}

@keyframes flash-right {
  0% {
    opacity: .4;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(10px)scale(1.6);
  }

  100% {
    opacity: .4;
    transform: translateX(0);
  }
}

.footer {
  color: #fff;
  background: url("bg-footer.b79ece6a.jpg") 50% 20% / cover no-repeat;
  padding: 0;
  display: table;
  position: relative;

  & h2 {
    word-spacing: -.2em;
    margin-bottom: .6em;
    font-size: 1.5em;
    line-height: 1.1em;
  }

  & p {
    margin-bottom: 1.2em;
  }

  & p span {
    color: #fff;
    opacity: 0;
    transition: opacity 1s;
    position: relative;
  }

  &.animated p span:first-of-type {
    opacity: 1;
    transition-delay: .1s;
  }

  &.animated p span:nth-of-type(2) {
    opacity: 1;
    transition-delay: .2s;
  }

  &.animated p span:nth-of-type(3) {
    opacity: 1;
    transition-delay: .3s;
  }

  &.animated p span:nth-of-type(4) {
    opacity: 1;
    transition-delay: .4s;
  }

  &.animated p span:nth-of-type(5) {
    opacity: 1;
    transition-delay: .5s;
  }

  &.animated p span:nth-of-type(6) {
    opacity: 1;
    transition-delay: .6s;
  }

  &.animated p span:nth-of-type(7) {
    opacity: 1;
    transition-delay: .7s;
  }

  &.animated p span:nth-of-type(8) {
    opacity: 1;
    transition-delay: .8s;
  }

  &.animated p span:nth-of-type(9) {
    opacity: 1;
    transition-delay: .9s;
  }

  &.animated p span:nth-of-type(10) {
    opacity: 1;
    transition-delay: 1s;
  }

  &.animated p span:nth-of-type(11) {
    opacity: 1;
    transition-delay: 1.1s;
  }

  &.animated p span:nth-of-type(12) {
    opacity: 1;
    transition-delay: 1.2s;
  }

  & p strong {
    color: #eee;
    opacity: 0;
    transition: opacity 4s;
  }

  &.animated strong {
    opacity: 1;
    transition-delay: 1.2s;
  }
}

.footer-container {
  vertical-align: middle;
  background: #000c;
  display: table-cell;
  inset: 0;
}

.cube-container {
  perspective: 1000px;
  opacity: 0;
  width: 200px;
  height: 100px;
  margin: -15px auto 15px;
  transition: opacity 1s 3s;
  display: block;
  position: relative;

  .animated & {
    opacity: 1;
  }
}

.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all .25s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}

.cube div {
  opacity: 0;
  width: 200px;
  height: 100px;
  transition: all .25s ease-out;
  display: block;
  position: absolute;

  &.active {
    opacity: 1;
  }
}

.cube svg, .cube img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cube .front {
  transform: translateZ(50px);
}

.cube .back {
  transform: rotateX(-180deg)translateZ(50px);
}

.cube .top {
  transform: rotateX(90deg)translateZ(50px);
}

.cube .bottom {
  transform: rotateX(-90deg)translateZ(50px);
}

.bubble {
  text-align: left;
  color: #000;
  opacity: 0;
  background: #eee;
  border-radius: 5px;
  width: 260px;
  height: 33px;
  margin-left: -135px;
  padding: 10px;
  font: 12px Courier, sans-serif;
  transition: all .5s ease-in-out;
  animation: 1s infinite alternate glowing;
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateY(25px);

  @media (width >= 768px) {
    margin-left: -20px;
    top: -70px;
  }

  .animated &.shown {
    opacity: 1;
    transition: all .5s ease-in-out 4s;
    transform: translateY(0);
  }
}

.bubble-arrow {
  border-top: 12px solid #eee;
  border-left: 10px solid #0000;
  border-right: 10px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -5px;
  left: 80px;
  transform: rotate(-20deg);

  @media (width >= 768px) {
    bottom: -8px;
    left: 33px;
    transform: rotate(20deg);
  }
}

.bubble-cursor {
  background: var(--typing-color);
  display: inline-block;
  color: #fff !important;
}

.bubble-blinking {
  margin-left: 2px;
  animation: 1s step-end infinite blinking;
}

@keyframes glowing {
  from {
    box-shadow: 0 0 30px var(--typing-color);
  }

  to {
    box-shadow: 0 0 0px var(--typing-color);
  }
}

@keyframes blinking {
  from, to {
    background: var(--typing-color);
  }

  50% {
    background: none;
  }
}

.lang-fr [lang="en"], .lang-en [lang="fr"] {
  display: none;
}

.lang-nav {
  z-index: 100;
  letter-spacing: .05em;
  color: #ffffff80;
  font-size: 11px;
  font-weight: 600;
  position: fixed;
  top: 12px;
  right: 15px;

  & a {
    color: #ffffff80;
    text-decoration: none;
    transition: color .3s;

    &:hover {
      color: #fff;
    }
  }

  .lang-fr & a[data-lang="fr"], .lang-en & a[data-lang="en"] {
    color: #fff;
  }
}
/*# sourceMappingURL=jaysalvat.com.99945b9a.css.map */