/* =====================
</> by valentin salaud
====================== */

body {
  font-family: "Vision", "Arial Narrow", Arial, sans-serif;
  color: #333;
  background: #f0f0f0;
}

::selection {
  background-color: #333;
  color: white;
}
::-moz-selection {
  background-color: #333;
  color: white;
}

a {
  color: #333;
  text-decoration: none;
}
p {
  letter-spacing: 0.1em;
  line-height: 1.2em;
}

/* Nav
   ========================================================================== */
nav * {
  z-index: 8;
}
nav .vertical,
nav .horizontal {
  background: #333;
  position: fixed;
}
/* Contour de l'écran */
.vertical {
  height: 100vh;
  width: 10px;
}
.horizontal {
  height: 10px;
  width: 100vw;
}
.nav-left {
  left: 0;
}
.nav-right {
  right: 0;
}
.nav-top {
  top: 0;
}
.nav-bottom {
  bottom: 0;
}

/* Overlay open menu */
.overlay {
  height: 33.3333vh;
  width: 0vw;
  position: fixed;
  background: #333;
  z-index: 8;
  right: 0;
  z-index: 4;

  transition: all 0.5s ease;
}
.overlay2 {
  margin-top: 33.3333vh;
  transition-delay: 0.1s;
}
.overlay3 {
  margin-top: 66.6666vh;
  transition-delay: 0.2s;
}

/* Text Valentin SLD, top left */
.ItsMe {
  font-family: "Exodus";
  position: fixed;
  font-size: 1em;
  left: 28px;
  top: 21px;
}

/* Hamburger */
.hamburger {
  position: fixed;
  right: 28px;
  top: 21px;
  cursor: pointer;
  z-index: 100;
}
.hamburger .line {
  width: 34px;
  height: 3px;
  background: #333;
  display: block;
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}
.hamburger .line:nth-child(1) {
  margin-left: 10px;
}
.hamburger .line:nth-child(2) {
  width: 44px;
}

.hamburger:hover .line:nth-child(1) {
  margin-left: 0;
  width: 44px;
}

/* Liens menu */
.nav-link {
  font-family: "Exodus Stencil";
  margin-top: 50vh;
  transform: translateY(-58%);
  position: fixed;
  right: 0px;
  left: 0px;
  font-size: 7.5em;
  display: none;

  text-align: center;
}
.nav-link a {
  text-align: center;
  display: block;
  margin: 0 auto 0.2em auto;
  opacity: 0;

  display: inline-block;
}
.nav-link a span {
  position: relative;
  top: -57px;
  left: -25px;
  background-color: #fefefe;
  display: block;
  z-index: 10;
  height: 1px;
  width: 0;
  transform: scaleY(20);

  transition: all 0.4s ease;
}
.nav-link a:hover > span {
  width: calc(100% + 50px);
}

.open .nav-link a:hover {
  opacity: 1;
  letter-spacing: 0.15em;
  transition: all 0.4s ease-in-out;
}

/* Icons RS */
.vectoriel {
  position: fixed;
  display: block;
  margin-top: 50vh;
  transform: translateY(-50%);
  z-index: 20;
}
.Icons {
  display: block;
  width: 20px;
  margin: 30px 0 30px 35px;
  transition: all 0.4s ease;
  fill: #333;
  animation: InLeft 1s;
}
.Icons:hover {
  transform: scale(1.3);
}

@keyframes InLeft {
  0% {
    transform: translateX(-70px);
    opacity: 0.2;
  }
  60% {
    transform: translateX(-70px);
    opacity: 0.2;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Open nav HAMBURGER */
.open a {
  color: #f0f0f0;
  transition: all 1s ease;
}
.open .vertical,
.open .horizontal {
  background: #f0f0f0;
  transition: all 1s ease;
}
.open .line {
  background: #f0f0f0;
}
.open .line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  margin-left: 0;
  width: 42px;
}
.open .line:nth-child(2) {
  transform: translateY(-7px) rotate(-45deg);
  z-index: 11;
}
.open .line:nth-child(2)::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 5px;
  background: #333;
  margin-top: 3px;
  z-index: 100;
}

.open .overlay {
  width: 100vw;
}
.open .Icons {
  fill: #f0f0f0;
}

.open .nav-link {
  display: inherit;
}
.open .nav-link a {
  opacity: 0.5;
}
.open .nav-link1 {
  animation: 2s link-open;
}
.open .nav-link2 {
  animation: 2s link-open2;
}
.open .nav-link3 {
  animation: 2s link-open3;
}
.open .nav-link4 {
  animation: 2s link-open4;
  font-size: 35%;
}

@keyframes link-open {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
    transform: translateY(50%);
  }
  75% {
    opacity: 0.5;
  }
}
@keyframes link-open2 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
    transform: translateY(50%);
  }
  85% {
    opacity: 0.5;
  }
}
@keyframes link-open3 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
    transform: translateY(50%);
  }
  95% {
    opacity: 0.5;
  }
}
@keyframes link-open4 {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 0.5;
  }
}

/* GRID
   ========================================================================== */
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-column-gap: 1em;
  margin: 10px auto;
  max-width: 1050px;

  background-size: 25% 100%;
  background-image: linear-gradient(
    90deg,
    #dadada 0px,
    #dadada 1px,
    transparent 2px,
    transparent calc(100% + 1px)
  );
  border-right: 1px solid #dadada;
}

.h100 {
  height: 100vh;
}
.h100-centered {
  margin-top: 50vh;
  transform: translateY(-50%);
}

/* Block reveal */
.MyName {
  grid-column: 1 / span 4;
  text-align: center;

  margin-top: 50vh;
  transform: translateY(-80%);
  /* margin-bottom: calc(50vh - 11em); */
}

.block-reveal {
  display: inline-block;
  position: relative;
  z-index: -1;
}
h1 {
  animation: reveal-text 0.85s ease;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 0.55s;
  margin: -0.2em 0;

  font-family: "Exodus";
  font-size: 6.5em;
  font-weight: 900;
  font-style: italic;
}

.MyJobs {
  grid-column: 1 / span 4;
  /* margin-top: 50vh; */
  text-align: center;
  margin-bottom: 50vh;

  transform: translateY(-50px);
}
.block-reveal p {
  animation: reveal-text 0.85s ease;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 0.55s;
  margin: -0.2em 0;

  font-family: "Vision";
  font-size: 1.5em;
  font-weight: 400;
  font-style: italic;
}

@keyframes reveal-text {
  0% {
    opacity: 0;
  }
  99.99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.block-reveal-background p {
  color: #f0f0f0;
}
.block-reveal-background:after {
  animation: reveal-text 0.85s ease;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 0.55s;
  background-color: #333;
  content: "";
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  border: 5px solid #333;
  top: -5px;
  left: -5px;
}

.block-reveal:before {
  animation: reveal 1.4s ease-in-out;
  animation-delay: 0.55s;
  background-color: #333;
  content: "";
  position: absolute;
  height: 120%;
  transform: translateY(-10%);
  top: 0;
  left: 0;
}

.block-reveal-background.block-reveal:before {
  top: -5px;
  left: -5px;
}

@keyframes reveal {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    width: 100%;
    border: 5px solid #333;
  }
  20% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    width: 100%;
    border: 5px solid #333;
  }
  60% {
    -webkit-clip-path: inset(0 0% 0 0%);
    clip-path: inset(0 0% 0 0%);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    width: 100%;
    border: 5px solid #333;
  }
}

/* Title */
.title {
  grid-column: 1 / span 3;
  z-index: 1;
}
h2 {
  font-family: "Exodus";
  font-size: 5.5em;
  margin-bottom: 15vh;
  margin-top: inherit;
}
.MyWork:after {
  content: "";
  display: block;
  width: 1.8em;
  height: 4px;
  background: #333;
  margin: 0.25em 0.2em;
}
.corporate,
.work {
  grid-column: 1 / span 3;
  font-family: "Exodus";
  font-size: 2em;
  letter-spacing: 0.1em;
  opacity: 0.5;
  transition: all 0.4s ease;
  padding-left: 2px;
  margin-bottom: 1em;
  margin-left: 5px;
}
.corporate:hover,
.work:hover {
  opacity: 1;
}

.corporate {
  position: relative;
  grid-column: 1 / span 4;
  max-width: fit-content;
}
.corporate span::before {
  content: "(";
}
.corporate span::after {
  content: ")";
}
.corporate span {
  font-size: 0.7em;
}
.corporate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;

  height: 2px;
  width: 100%;

  transform-origin: right;
  background: #333;

  transition: transform 0.4s ease;

  transform: scaleX(0);
}
.corporate:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

#travaux {
  margin-top: 12vh;
}
small {
  font-size: 45%;
  opacity: 0.8;
  display: block;
  padding-left: 5px;
}

.work a {
  display: inline;
}
#linee {
  height: 5px;
  width: 0;
  background: #333;
  position: absolute;
  /* transition: all 1s ease; */
  right: 0;
  margin-top: 0.6em;
}

/* Fade In Up 2 : with opacity */
@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 0.5;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 0.5;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}
/* Footer style */
footer {
  grid-column: 1 / 5;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  font-family: "Exodus";
  font-size: 7em;
}
footer a {
  text-shadow: #333 1px 0px 0px, #333 0.540302px 0.841471px 0px,
    #333 -0.416147px 0.909297px 0px, #333 -0.989992px 0.14112px 0px,
    #333 -0.653644px -0.756802px 0px, #333 0.283662px -0.958924px 0px,
    #333 0.96017px -0.279415px 0px;
  opacity: 0.25;
  color: #f0f0f0;
  transition: all 0.5s ease;
}
footer a:hover {
  text-shadow: none;
  opacity: 0.8;
  color: #333;
}
.footerSmall {
  font-size: 75%;
}

/* A propos
========================================================================== */

.photo {
  grid-column: 3 / span2;
  height: 1px;
  z-index: 1;
}
.photo img {
  float: right;
  margin-top: 10vh;
  width: 80%;
  z-index: 1;
}

.title-Prez {
  margin-top: 25vh;
  font-size: 4em;

  margin-left: 10px;
  margin-bottom: 0.5em;
}

.contour {
  color: #f0f0f0;
  text-shadow: #333 1px 0px 0px, #333 0.540302px 0.841471px 0px,
    #333 -0.416147px 0.909297px 0px, #333 -0.989992px 0.14112px 0px,
    #333 -0.653644px -0.756802px 0px, #333 0.283662px -0.958924px 0px,
    #333 0.96017px -0.279415px 0px;
  opacity: 0.8;
}
.contourB {
  color: #333;
  text-shadow: #f0f0f0 1px 0px 0px, #f0f0f0 0.540302px 0.841471px 0px,
    #f0f0f0 -0.416147px 0.909297px 0px, #f0f0f0 -0.989992px 0.14112px 0px,
    #f0f0f0 -0.653644px -0.756802px 0px, #f0f0f0 0.283662px -0.958924px 0px,
    #f0f0f0 0.96017px -0.279415px 0px;
}

.presentation {
  width: calc(100% - 200px);
  margin: 0 auto;
  background: #f7f7f7;
  padding: 35px 35px 45px 35px;
  margin-bottom: 20vh;

  -webkit-box-shadow: 7px 7px 26px 0px rgba(193, 193, 193, 0.3);
  -moz-box-shadow: 7px 7px 26px 0px rgba(193, 193, 193, 0.3);
  box-shadow: 7px 7px 26px 0px rgba(193, 193, 193, 0.3);
}

.title2 {
  grid-column: 1 / span 2;
  font-family: "Exodus";
  font-size: 3.5em;
  letter-spacing: 0.1em;
  text-align: right;
  color: #cccccc;
}
.text {
  grid-column: 3 / span 2;
  padding: 0 20px 20px 20px;
  margin-top: -20px;
  font-size: 1.2em;
}
.text:nth-child(n + 2) {
  margin-bottom: 14vh;
}

/* Responsive
========================================================================== */
@media screen and (min-width: 1800px) {
  .wrapper {
    max-width: 1200px;
  }
}

@media screen and (max-width: 1152px) {
  body {
    font-size: 14px;
  }
  .wrapper {
    width: 80%;
  }
  h1 {
    font-size: 5.5em;
  }
}

@media screen and (max-width: 900px) {
  .wrapper {
    width: calc(100vw - 140px);
  }
  .photo img {
    width: 100%;
  }
}

@media screen and (max-width: 770px) {
  .wrapper {
    background-size: 50% 100%;
    background-image: linear-gradient(
      to right,
      #dadada 0px,
      transparent 1px,
      transparent calc(100% + 1px)
    );
    border-right: 1px solid #dadada;
  }
  .MyName {
    grid-column: 1 / span 4;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 42vh;
  }
  .MyJobs {
    grid-column: 1 / span 4;
    text-align: center;
    transform: translateY(-100%);
    margin-top: 0;
    margin-bottom: 35vh;
  }
  .work {
    opacity: 1;
  }
  @-webkit-keyframes fadeInUp2 {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fadeInUp2 {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
}
@media screen and (max-width: 720px) {
  .wrapper {
    width: calc(100vw - 50px);
  }
  .vectoriel {
    display: none;
    margin-top: inherit;
    bottom: 50px;
  }
  .nav-link {
    font-size: 6.5em;
  }
  .nav-link a span {
    top: -60px;
    transform: scaleY(14);
  }

  /* Icons RS */
  .open .vectoriel {
    position: fixed;
    display: block;
    z-index: 20;
    margin-left: 50vw;
    transform: translateX(-50%);
    animation-delay: 1s;
  }
  .Icons {
    display: inline-block;
    width: 25px;
    margin: 20px;
  }

  .open .nav-link a {
    opacity: 1;
  }
  .nav-link a {
    letter-spacing: 0;
  }
  @keyframes link-open {
    0% {
      opacity: 0;
    }
    35% {
      opacity: 0;
      transform: translateY(50%);
    }
    85% {
      opacity: 1;
    }
  }
  @keyframes link-open2 {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
      transform: translateY(50%);
    }
    85% {
      opacity: 1;
    }
  }
  @keyframes link-open3 {
    0% {
      opacity: 0;
    }
    65% {
      opacity: 0;
      transform: translateY(50%);
    }
    85% {
      opacity: 1;
    }
  }

  /* A propos
  *********/
  .photo,
  .title,
  .title2,
  .text {
    grid-column: 1 / span 4;
  }
  .title-Prez {
    margin-top: 65vh;
  }
  .title2 {
    text-align: left;
  }
  .text {
    grid-auto-rows: 50px;
  }
  .text:nth-child(n + 2) {
    margin-bottom: 0;
  }

  .presentation {
    width: calc(100% - 70px);
  }
}

@media screen and (max-width: 550px) {
  nav .vertical,
  nav .horizontal {
    display: none;
  }
  footer {
    font-size: 5.1em;
  }
  .MyJobs {
    line-height: 2.1em;
  }
  .nav-link {
    font-size: 5em;
  }
  .nav-link a span {
    top: -36px;
    transform: scaleY(10);
  }
  .MyJobs {
    margin-top: 50px;
  }
}

@media screen and (max-width: 550px) {
  body {
    font-size: 11px;
  }
  .wrapper {
    width: calc(100vw - 2em);
  }
  h2 {
    font-size: 10vw;
  }
  .work {
    font-size: 2.5em;
  }
  .Icons {
    margin: 10px;
  }
  /* #hamburger{
    display: none;
    opacity: 0;
  } */

  .photo {
    grid-column: 1 / span4;
    z-index: 1;
    height: inherit;
  }
  .photo img {
    float: inherit;
    margin-top: 50px;
    width: 100%;
    z-index: 1;
  }
  .title-Prez {
    margin-top: 45px;
  }
  .title2 {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 320px) {
  h2 {
    font-size: 3em;
  }
  footer {
    font-size: 3.5em;
  }
}

/* ANIMATION PAGE */

.fade-out {
  animation: fade-out 0.6s ease forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-in {
  animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-out2 {
  animation: fade-out 5s ease forwards;
}

.fade-in2 {
  animation: fade-in 2s ease forwards;
}

.spanAnimated {
  animation: barre 2s ease forwards;
}

@keyframes barre {
  0% {
  }
  25% {
    width: 100vw;
    opacity: 1;
  }
  35% {
    width: 100vw;
    opacity: 1;
    transform: scaleY(1);
    z-index: 900;
  }
  100% {
    width: 100vw;
    opacity: 1;
    transform: scaleY(500);
    background-color: #292929;
    z-index: 900;
  }
}

.outBottom {
  animation: outBottom 0.7s ease;
}
@keyframes outBottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

.P-out .web,
.P-out .wrapper {
  animation: Project 0.5s ease;
  opacity: 0;
}

@keyframes Project {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.P-in {
  animation: Pint 0.2s ease;
  opacity: 1;
}
@keyframes Print {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}