*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #e0e5eb;
}

::-moz-selection {
  background-color: #31e2c78a;
}

::selection {
  background-color: #31e2c78a;
}

footer {
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #6c6c6c;
  height: 15vh;
}

footer p {
  color: white;
  font-size: 1.6rem;
  font-weight: 400;
}

@media screen and (max-width: 600px) {
  footer p {
    font-size: 1.2rem;
  }
}

header {
  position: relative;
  height: 100vh;
  width: 100%;
}

.container_header {
  height: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 1300px) {
  .container_header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

/*-----------------------------------------------LOGO------------------------------------------*/
.hero_left--logo {
  position: absolute;
  z-index: 20;
  height: 20%;
  top: 3.2rem;
  left: 7rem;
}

.hero_left--logo span {
  position: relative;
  display: inline-block;
  font-size: 5rem;
  font-weight: 900;
  color: transparent;
  background-image: linear-gradient(75deg, #31e2c6, #578de5, #9953f8);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero_left--logo img {
  height: 10rem;
  width: 10rem;
}

@media only screen and (max-width: 1300px) {
  .hero_left--logo {
    top: 2.5rem;
    left: 4.5rem;
  }
  .hero_left--logo span {
    font-size: 4rem;
  }
}

@media only screen and (max-width: 900px) {
  .hero_left--logo {
    left: 3rem;
  }
}

@media only screen and (max-width: 600px) {
  .hero_left--logo {
    top: 1rem;
  }
  .hero_left--logo span {
    font-size: 3rem;
  }
}

/*----------------------------------------PARTIE-GAUCHE---------------------------------------- */
.hero_left {
  position: relative;
  -ms-flex-preferred-size: 60%;
      flex-basis: 60%;
}

.hero_left .hero_left--name {
  position: absolute;
  top: 27%;
  left: 10%;
  font-size: 13rem;
  font-weight: 400;
  color: #2c2dc7;
  --animate-duration: 3s;
}

.hero_left .hero_left--job {
  position: absolute;
  top: 45%;
  left: 10%;
  color: #31e2c6;
  --animate-duration: 3s;
}

.hero_left .hero_left--job h1 {
  font-size: 15rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.hero_left .hero_left--job h1 span {
  position: relative;
  display: block;
  text-transform: uppercase;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: b 5s ease-in-out infinite;
          animation: b 5s ease-in-out infinite;
}

.hero_left .hero_left--job h1 span::before {
  z-index: 1;
  content: '';
  position: absolute;
  top: calc(50% - 1.5rem);
  left: 0;
  width: 37%;
  height: 10%;
  background-color: #31e2c6;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  /* transition: 0.5s; */
  -webkit-animation: barred_text 5s ease-in-out infinite;
          animation: barred_text 5s ease-in-out infinite;
}

.hero_left .hero_left--job h1 span::after {
  z-index: 1;
  content: '';
  position: absolute;
  top: calc(50% - 1.5rem);
  right: 19%;
  width: 31%;
  height: 10%;
  background-color: #31e2c6;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-animation: barred_text 5s ease-in-out infinite;
          animation: barred_text 5s ease-in-out infinite;
}

.hero_left .hero_left--job h1 span hide {
  -webkit-text-stroke-width: 0.5rem;
  -webkit-text-stroke-color: #31e2c6;
  -webkit-text-fill-color: transparent;
  -webkit-animation: disparate_text 5s ease-in-out infinite;
          animation: disparate_text 5s ease-in-out infinite;
}

@-webkit-keyframes b {
  100% {
    color: #2c2dc7;
  }
}

@keyframes b {
  100% {
    color: #2c2dc7;
  }
}

@-webkit-keyframes barred_text {
  20%,
  60% {
    z-index: 1;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  70%,
  100% {
    z-index: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@keyframes barred_text {
  20%,
  60% {
    z-index: 1;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  70%,
  100% {
    z-index: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-webkit-keyframes disparate_text {
  20%,
  70% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@keyframes disparate_text {
  20%,
  70% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@media only screen and (max-width: 1979px) {
  .hero_left {
    -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
  }
  .hero_left .hero_left--name {
    top: 30rem;
    left: 7rem;
    font-size: 9rem;
    font-weight: 700;
  }
  .hero_left .hero_left--job {
    top: 45rem;
    left: 7rem;
  }
  .hero_left .hero_left--job h1 {
    font-size: 10rem;
  }
  .hero_left .hero_left--job h1 span hide {
    -webkit-text-stroke-width: 0.4rem;
  }
}

@media only screen and (max-width: 1300px) {
  .hero_left {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
  .hero_left .hero_left--name {
    top: -1rem;
    left: 7rem;
    font-size: 9rem;
  }
  .hero_left .hero_left--job {
    top: 10rem;
  }
}

@media only screen and (max-width: 900px) {
  .hero_left {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
  .hero_left .hero_left--name {
    top: 5rem;
    left: 5rem;
    font-size: 7rem;
  }
  .hero_left .hero_left--job {
    top: 16rem;
    left: 5rem;
  }
  .hero_left .hero_left--job h1 {
    font-size: 7rem;
  }
  .hero_left .hero_left--job h1 span hide {
    -webkit-text-stroke-width: 0.3rem;
  }
}

@media only screen and (max-width: 600px) {
  .hero_left {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
  .hero_left .hero_left--name {
    top: 3rem;
    left: 3rem;
    font-size: 3.5rem;
  }
  .hero_left .hero_left--job {
    top: 9rem;
    left: 3rem;
  }
  .hero_left .hero_left--job h1 {
    font-size: 4rem;
  }
  .hero_left .hero_left--job h1 span::before {
    top: 3rem;
  }
  .hero_left .hero_left--job h1 span::after {
    top: 3rem;
  }
  .hero_left .hero_left--job h1 span hide {
    -webkit-text-stroke-width: 0.2rem;
  }
}

/*----------------------------------------PARTIE-DROITE---------------------------------------- */
.hero_right {
  position: relative;
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  --animate-duration: 3s;
}

.hero_right .hero_right--ring {
  position: relative;
  width: 40rem;
  height: 40rem;
  /*40rem*/
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.719);
}

.hero_right .hero_right--ring::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(45deg, #31e2c6, #578de5, #9953f8);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-animation: animate_ring 2s linear infinite;
          animation: animate_ring 2s linear infinite;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.hero_right .hero_right--ring::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  z-index: -2;
  background: linear-gradient(45deg, #31e2c6, #578de5, #9953f8);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-animation: animate_ring 2s linear infinite;
          animation: animate_ring 2s linear infinite;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  -webkit-filter: blur(20px);
          filter: blur(20px);
}

.hero_right .hero_right--ring img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 40px;
}

@-webkit-keyframes animate_ring {
  0% {
    -webkit-transform: rotate(0) scale(1.2);
            transform: rotate(0) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1.2);
            transform: rotate(360deg) scale(1.2);
  }
}

@keyframes animate_ring {
  0% {
    -webkit-transform: rotate(0) scale(1.2);
            transform: rotate(0) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1.2);
            transform: rotate(360deg) scale(1.2);
  }
}

@media only screen and (max-width: 1979px) {
  .hero_right {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
  .hero_right .hero_right--ring {
    margin-top: 0rem;
    width: 30rem;
    height: 30rem;
  }
  .hero_right .hero_right--ring::before {
    width: 30rem;
    height: 30rem;
  }
  .hero_right .hero_right--ring::after {
    width: 30rem;
    height: 30rem;
  }
}

@media only screen and (max-width: 1300px) {
  .hero_right {
    -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
  }
  .hero_right .hero_right--ring {
    margin-top: 8rem;
    width: 25rem;
    height: 25rem;
  }
  .hero_right .hero_right--ring::before {
    width: 25rem;
    height: 25rem;
  }
  .hero_right .hero_right--ring::after {
    width: 25rem;
    height: 25rem;
  }
}

@media only screen and (max-width: 900px) {
  .hero_right .hero_right--ring {
    margin-top: 20rem;
    width: 30rem;
    height: 30rem;
  }
  .hero_right .hero_right--ring::before {
    width: 30rem;
    height: 30rem;
  }
  .hero_right .hero_right--ring::after {
    width: 30rem;
    height: 30rem;
  }
}

@media only screen and (max-width: 600px) {
  .hero_right .hero_right--ring {
    position: relative;
    margin-top: 4rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.719);
  }
  .hero_right .hero_right--ring::before {
    width: 18rem;
    height: 18rem;
  }
  .hero_right .hero_right--ring::after {
    width: 18rem;
    height: 18rem;
  }
}

/*--------------------------------------Boutton-Explorer----------------------------------------*/
.header_button {
  display: inline-block;
  position: relative;
  margin-top: -10rem;
  left: 6.1%;
}

.header_button a {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #e0e5eb;
}

.header_button a i {
  margin-left: 1rem;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.header_button .btn:link,
.header_button .btn:visited {
  background-color: #31e2c6;
  border-radius: 1.2rem;
  text-decoration: none;
  padding: 2rem 5rem;
  -webkit-box-shadow: 4px 7px 17px #6c6c6c;
          box-shadow: 4px 7px 17px #6c6c6c;
}

.header_button .btn:hover,
.header_button .btn:active {
  -webkit-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
  -webkit-box-shadow: 4px 12px 30px #6c6c6c;
          box-shadow: 4px 12px 30px #6c6c6c;
}

@media only screen and (max-width: 1979px) {
  .header_button {
    top: -5%;
    left: 7rem;
  }
}

@media only screen and (max-width: 1300px) {
  .header_button {
    top: 0%;
    left: 7rem;
  }
  .header_button a {
    font-size: 2.5rem;
  }
  .header_button .btn:link,
  .header_button .btn:visited {
    padding: 1rem 3rem;
  }
}

@media only screen and (max-width: 900px) {
  .header_button {
    left: 5rem;
  }
  .header_button a {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 600px) {
  .header_button {
    left: 3rem;
  }
  .header_button a {
    font-size: 2rem;
  }
}

/*--------------------------------------------------------------------------------------*/
/*-----------------------------------------ABOUT----------------------------------------*/
/*--------------------------------------------------------------------------------------*/
.background-back-end {
  position: relative;
}

.section-about__background {
  position: relative;
  padding: 1px 0;
  height: 100vh;
  background-color: #2c2dc7;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 76%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 0% 100%);
}

.section-about-table {
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #2c2dc7;
  z-index: 4;
  display: block;
  font-size: 2.5rem;
  margin: 25rem auto;
  padding: 7rem 1rem 7rem 8rem;
  height: 50rem;
  width: 80rem;
  text-align: center;
  color: white;
  border: 6px solid #31e2c6;
}

.section-about-table::after {
  position: absolute;
  content: '';
  border: 6px solid #31e2c6;
  width: 80rem;
  height: 50rem;
  top: 5rem;
  left: 5rem;
}

#section-about--circle {
  position: relative;
  padding-bottom: 50%;
  overflow: hidden;
}

#section-about--circle text {
  font-size: 1.6rem;
  font-weight: 700;
}

#section-about--circle svg {
  position: absolute;
  left: 9.4rem;
  top: -20rem;
  width: 50%;
  height: 100%;
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@media only screen and (max-width: 1979px) {
  .section-about-table {
    padding: 5rem 1rem 2rem 3rem;
    font-size: 2rem;
    margin: 25rem auto;
    height: 45rem;
    width: 55rem;
    border: 4px solid #31e2c6;
  }
  .section-about-table::after {
    height: 45rem;
    width: 55rem;
    top: 2rem;
    left: 2rem;
    border: 4px solid #31e2c6;
  }
  #section-about--circle svg {
    position: relative;
    left: -2rem;
    top: -21rem;
    width: 100rem;
  }
}

@media only screen and (max-width: 1300px) {
  .section-about-table {
    font-size: 1.8rem;
    padding: 4rem;
    margin: 30rem auto;
    height: 45rem;
    width: 45rem;
    border: 3px solid #31e2c6;
  }
  .section-about-table::after {
    border: 3px solid #31e2c6;
    height: 45rem;
    width: 45rem;
    top: 2rem;
    left: 2rem;
  }
  #section-about--circle svg {
    left: -14rem;
    top: -15rem;
    width: 100rem;
    position: relative;
  }
}

@media only screen and (max-width: 900px) {
  .section-about-table {
    font-size: 1.9rem;
    padding: 4rem;
    margin: 30rem auto;
    height: 45rem;
    width: 50rem;
    border: 3px solid #31e2c6;
  }
  .section-about-table::after {
    border: 3px solid #31e2c6;
    height: 45rem;
    width: 45rem;
    top: 2rem;
    left: 2rem;
  }
  #section-about--circle svg {
    left: -2.6rem;
    top: -15rem;
    width: 116%;
    position: relative;
  }
}

@media only screen and (max-width: 600px) {
  .section-about-table {
    font-size: 1.2rem;
    padding: 3rem 3rem 2.5rem 4rem;
    margin: 20rem auto;
    height: 30rem;
    width: 30rem;
    border: 2px solid #31e2c6;
  }
  .section-about-table::after {
    height: 30rem;
    width: 30rem;
    top: 2rem;
    left: 2rem;
    border: 2px solid #31e2c6;
  }
  #section-about--circle svg {
    left: -5.4rem;
    top: -9rem;
    width: 50rem;
    position: relative;
  }
}

/*-----------------------------------------TIMELINE----------------------------------------*/
.container-timeline {
  position: relative;
  padding: 2rem;
  margin: 0 auto;
  max-width: 150rem;
}

.timeline {
  position: relative;
  min-height: 15rem;
}

.line {
  position: absolute;
  z-index: -1;
  width: 3px;
  top: -55rem;
  bottom: -30rem;
  left: calc(50% - 1px);
  background-color: #2c2dc7;
  display: none;
}

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /*center in vertical*/
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 1s ease;
  transition: 1s ease;
  position: relative;
  z-index: 1;
  margin: 10rem 0;
  padding: 1rem;
  border-radius: 1rem;
  min-height: 30rem;
  /*hauteur min de la box*/
}

.section:last-child {
  margin: 10rem 0 2rem 0;
}

.section:nth-child(odd) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.bead {
  position: absolute;
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: #000;
  left: 50%;
  top: 20%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.content {
  width: calc(50% - 2rem);
  font-size: 1.6rem;
  padding: 3rem;
  border-radius: 50px;
  background: #e0e5eb;
  -webkit-box-shadow: 18px 18px 57px #acb0b5, -18px -18px 57px #ffffff;
          box-shadow: 18px 18px 57px #acb0b5, -18px -18px 57px #ffffff;
}

.show-me:nth-child(n) {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.section .content h2 {
  color: #ee2f2b;
  padding-bottom: 2rem;
  font-size: 2.5rem;
}

.section .content h3 {
  color: #6c6c6c;
  padding-bottom: 1rem;
  font-size: 2.2rem;
}

.section .content h4 {
  color: black;
  padding-bottom: 1rem;
  font-weight: 300;
  font-size: 1.6rem;
}

@media only screen and (max-width: 1300px) {
  .section {
    opacity: 0;
    -webkit-transform: none;
            transform: none;
  }
  .section:nth-child(odd) {
    -webkit-transform: none;
            transform: none;
  }
  .bead {
    -webkit-transform: none;
            transform: none;
  }
  .show-me:nth-child(n) {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .container-timeline {
    padding: 1rem;
    max-width: 150rem;
  }
  .timeline {
    min-height: 15rem;
  }
  .line {
    width: 3px;
    left: 1rem;
  }
  .section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    opacity: 0;
    -webkit-transform: none;
            transform: none;
    padding: 1rem;
    min-height: 20rem;
  }
  .section:nth-child(n) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-transform: none;
            transform: none;
  }
  .bead {
    left: 3%;
    top: 20%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .content {
    width: 90%;
    font-size: 1.6rem;
    padding: 3rem;
  }
  .show-me:nth-child(odd) {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  .section .content h2 {
    color: #ee2f2b;
    font-size: 1.6rem;
  }
  .section .content h3 {
    color: #6c6c6c;
    font-size: 1.4rem;
  }
  .section .content h4 {
    color: black;
    font-weight: 300;
    font-size: 1.2rem;
  }
}

/*--------------------------------------------------------------------------------------*/
/*-----------------------------------------SKILLS---------------------------------------*/
/*--------------------------------------------------------------------------------------*/
.section_transition_skills h1 {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 40vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  color: #e0e5eb;
  font-size: 30rem;
  background: #2c2dc7;
}

.section_transition_skills h1:after {
  z-index: 2;
  content: attr(data-letters);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #ee2f2b;
  background: #e0e5eb;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

@media only screen and (max-width: 1050px) {
  .section_transition_skills h1 {
    height: 40vh;
    font-size: 20rem;
  }
}

@media only screen and (max-width: 700px) {
  .section_transition_skills h1 {
    height: 40vh;
    font-size: 10rem;
  }
}

/*--------------------------------------------SKILLS----------------------------------------*/
.section-skills {
  position: relative;
  background-color: #2c2dc7;
  padding-top: 5vh;
  padding-bottom: 15rem;
}

.container-skills {
  position: relative;
  background-color: #2c2dc7;
  color: white;
}

/*--------------------------------------------CARD-SKILLS----------------------------------------*/
.wrapper-grid {
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (30rem)[3];
      grid-template-columns: repeat(3, 30rem);
  -ms-grid-rows: (35rem)[3];
      grid-template-rows: repeat(3, 35rem);
  grid-auto-flow: row;
  grid-auto-rows: 20rem;
  -webkit-column-gap: 8rem;
          column-gap: 8rem;
  row-gap: 10rem;
  /*ou gap: column row*/
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.card-skills {
  position: relative;
  border-radius: 56px;
  background: #2c2dc7;
  -webkit-box-shadow: 20px 20px 37px #1b1c7b, -20px -20px 37px #3d3eff;
          box-shadow: 20px 20px 37px #1b1c7b, -20px -20px 37px #3d3eff;
}

.item-card-1 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}

.item-card-2 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

.item-card-3 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / span 1;
}

.item-card-4 {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / span 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / span 1;
}

.item-card-5 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / span 1;
}

.item-card-6 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / span 1;
}

.item-card-7 {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / span 1;
}

.item-card-8 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / span 1;
}

.card-skills p.title {
  position: relative;
  width: 80%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 1.5rem 0;
  padding: 1rem 1rem;
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
  -webkit-animation: glow 1.5s ease-in-out infinite alternate;
          animation: glow 1.5s ease-in-out infinite alternate;
}

.card-skills p.title:hover {
  -webkit-animation: none;
          animation: none;
}

.card-skills p.title {
  color: #ee2f2b;
  font-weight: 500;
}

.card-skills .p-skills {
  font-size: 1.8rem;
  line-height: 4rem;
  margin: 0rem 1rem;
}

.card-skills .p-skills span {
  margin-right: 2rem;
  margin-left: 3rem;
}

@media only screen and (max-width: 1109px) {
  .wrapper-grid {
    margin: 0 2rem;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: (35rem)[4];
        grid-template-rows: repeat(4, 35rem);
  }
  .item-card-1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
  .item-card-2 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
  .item-card-3 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1;
  }
  .item-card-4 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / span 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1;
  }
  .item-card-5 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / span 1;
  }
  .item-card-6 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / span 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / span 1;
  }
  .item-card-7 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / span 1;
  }
  .item-card-8 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / span 1;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / span 1;
  }
}

@media only screen and (max-width: 756px) {
  .wrapper-grid {
    margin: 0 4rem;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: (35rem)[8];
        grid-template-rows: repeat(8, 35rem);
  }
  .item-card-1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1;
  }
  .item-card-2 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1;
  }
  .item-card-3 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / span 1;
  }
  .item-card-4 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / span 1;
  }
  .item-card-5 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / span 1;
  }
  .item-card-6 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    grid-row: 6 / span 1;
  }
  .item-card-7 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    grid-row: 7 / span 1;
  }
  .item-card-8 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    grid-row: 8 / span 1;
  }
  .card-skills p.title {
    font-size: 3rem;
  }
  .card-skills .p-skills {
    font-size: 2rem;
  }
  .card-skills .p-skills span {
    margin-right: 3rem;
    margin-left: 5rem;
  }
}

@media only screen and (max-width: 545px) {
  .card-skills p.title {
    font-size: 2rem;
  }
  .card-skills .p-skills {
    font-size: 1.6rem;
  }
  .card-skills .p-skills span {
    margin-right: 2rem;
    margin-left: 3rem;
  }
}

/*--------------------------------------------CLOUDS----------------------------------------------*/
.clouds {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  overflow: hidden;
}

.clouds img {
  height: 100%;
  position: absolute;
  bottom: 0;
}

.c1 {
  -webkit-animation: clouds 10s linear infinite;
          animation: clouds 10s linear infinite;
}

.c2 {
  -webkit-animation: clouds 20s linear infinite;
          animation: clouds 20s linear infinite;
}

.c3 {
  -webkit-animation: clouds 30s linear infinite;
          animation: clouds 30s linear infinite;
}

.c4 {
  -webkit-animation: clouds 50s linear infinite;
          animation: clouds 50s linear infinite;
}

.c5 {
  -webkit-animation: clouds 60s linear infinite;
          animation: clouds 60s linear infinite;
}

.c6 {
  -webkit-animation: clouds 70s linear infinite;
          animation: clouds 70s linear infinite;
}

.c7 {
  -webkit-animation: clouds 80s linear infinite;
          animation: clouds 80s linear infinite;
}

@-webkit-keyframes clouds {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes clouds {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

/*--------------------------------------------------------------------------------------------*/
/*---------------------------------------Transition-screen-----------------------------------*/
/*--------------------------------------------------------------------------------------------*/
.section_transition {
  position: relative;
  height: 60vh;
  background-color: #e0e5eb;
}

.section_transition > .section_transition--title {
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(45deg, rgba(49, 226, 198, 0.737819) 11%, #2d3fc7 29%, rgba(153, 83, 248, 0.832947) 71%, #31e2c6 95%);
  background-size: 400%;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-animation: gradient 10s linear infinite;
          animation: gradient 10s linear infinite;
}

.section_transition--title:nth-child(1) {
  position: absolute;
  top: 16%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 10rem;
}

.section_transition--title:nth-child(2) {
  position: absolute;
  top: 24%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 26rem;
}

@-webkit-keyframes gradient {
  100% {
    background-position: 400%;
  }
}

@keyframes gradient {
  100% {
    background-position: 400%;
  }
}

@media screen and (max-width: 1258px) {
  .section_transition--title:nth-child(1) {
    top: 21%;
    font-size: 9rem;
  }
  .section_transition--title:nth-child(2) {
    top: 30%;
    font-size: 21rem;
  }
}

@media screen and (max-width: 876px) {
  .section_transition--title:nth-child(1) {
    top: 29%;
    font-size: 5rem;
  }
  .section_transition--title:nth-child(2) {
    top: 33%;
    font-size: 14rem;
  }
}

@media screen and (max-width: 564px) {
  .section_transition--title:nth-child(1) {
    top: 22%;
    font-size: 5rem;
  }
  .section_transition--title:nth-child(2) {
    top: 32%;
    font-size: 10rem;
  }
}

/*--------------------------------------------------------------------------------------------*/
/*-------------------------------------------ALGO------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/
.section_project {
  padding: 1px 0;
  background-color: #e0e5eb;
}

.blog-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  max-width: 1200px;
  margin: 1rem auto;
  -webkit-box-shadow: 0 6px 15px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 15px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.4;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
}

.blog-card a {
  color: inherit;
}

.blog-card a:hover {
  color: #31e2c6;
}

.blog-card .meta {
  position: relative;
  z-index: 0;
  -ms-flex-preferred-size: 30%;
  flex-basis: 60%;
  height: auto;
}

.blog-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

.blog-card .clip_project {
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.blog-card .clip_project-reverse {
  -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

.blog-card:hover .photo {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.blog-card .details,
.blog-card .details ul {
  margin: auto;
  padding: 0;
  list-style: none;
}

.blog-card .details {
  position: absolute;
  left: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  -webkit-transition: left 0.2s;
  transition: left 0.2s;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 1.3rem;
}

.blog-card .details a {
  -webkit-text-decoration: dotted underline;
  text-decoration: dotted underline;
}

.blog-card .details ul li,
.blog-card .details .tags ul {
  display: inline-block;
}

.blog-card .details i {
  display: inline-block;
  margin-right: 1rem;
}

.blog-card .details .tags li:not(:last-child):after {
  content: ' / ';
}

.blog-card .description {
  position: relative;
  padding: 5rem;
  -ms-flex-preferred-size: 70%;
  flex-basis: 70%;
  background: #fff;
  z-index: 1;
}

.blog-card .description h1 {
  line-height: 1;
  margin: 0;
  font-size: 3rem;
  font-weight: 300;
  color: #ee2f2b;
}

.blog-card .description h2 {
  font-size: 1.6rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #31e2c6;
  margin-top: 5px;
}

.blog-card .description .read-more {
  margin-top: 1rem;
  text-align: right;
  font-size: 1.2rem;
}

.blog-card .description .read-more button {
  background-color: #31e2c6;
  color: white;
  border: 1px solid #31e2c6;
  border-radius: 14px;
  display: inline-block;
  position: relative;
  margin-top: 1rem;
  padding: 1rem 1.6rem;
  text-decoration: none;
  font-size: 1.4rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.blog-card .description .read-more button:hover {
  background-color: #3bd8c0;
  -webkit-transform: translateY(-0.2rem);
  transform: translateY(-0.2rem);
  -webkit-box-shadow: 0 2px 25px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 25px -1px rgba(0, 0, 0, 0.3);
}

.blog-card.alt {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.blog-card.alt .description:before {
  left: inherit;
  right: -10px;
  -webkit-transform: skew(-3deg);
  transform: skew(-3deg);
}

.blog-card.alt .details {
  padding-left: 25px;
}

.blog-card p {
  position: relative;
  font-size: 1.4rem;
  line-height: 2.3rem;
  margin: 1rem 0 0;
}

.blog-card p:first-of-type {
  margin-top: 1.25rem;
}

.blog-card:hover .details {
  left: 0%;
}

@media screen and (max-width: 740px) {
  .blog-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .blog-card .meta {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    height: 100px;
  }
  .blog-card .clip_project {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  .blog-card .clip_project-reverse {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  .blog-card:hover .photo {
    -webkit-clip-path: none;
    clip-path: none;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  .blog-card .description {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    padding: 2rem;
  }
  .blog-card.alt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .blog-card .description h1 {
    font-size: 2.5rem;
  }
  .blog-card .description h2 {
    font-size: 1.4rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
  .blog-card .description .read-more {
    margin-top: 1rem;
    font-size: 1rem;
  }
}

/*-------------------------------------------------------------------------*/
/*----------------------------------MODAL----------------------------------*/
/*-------------------------------------------------------------------------*/
.hidden {
  display: none;
  -webkit-transition: all 4s;
  transition: all 4s;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(230, 222, 222, 0.541);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 25;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
  color: white;
  background-color: white;
  -webkit-box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 30;
}

.modal .modal-engie,
.modal .modal-isir,
.modal .modal-cvrp,
.modal .modal-sma,
.modal .modal-decision,
.modal .modal-google,
.modal .modal-natour,
.modal .modal-bank,
.modal .modal-doctorante,
.modal .modal-foodshow,
.modal .modal-deuxSevres {
  height: 100%;
  width: 100%;
  padding: 4rem;
  background-size: cover;
  background-repeat: no-repeat;
}

.modal .modal-deuxSevres {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../public/images/deuxSevres.png);
  background-position: right;
}

.modal .modal-engie {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../public/images/wind_turbine.jpeg);
  background-position: center;
}

.modal .modal-isir {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../public/images/robot.png);
  background-position: top right;
}

.modal .modal-cvrp {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../public/images/cvrp.jpeg);
  background-position: top right;
}

.modal .modal-sma {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../public/images/sma.jpeg);
  background-position: top left;
}

.modal .modal-decision {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../public/images/decision.jpeg);
  background-position: top left;
}

.modal .modal-google {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../../public/images/google.jpeg);
  background-position: center;
}

.modal .modal-natour {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../../public/images/tourisme_without.png);
  background-position: left;
}

.modal .modal-bank {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../../public/images/card.jpg);
  background-position: center;
}

.modal .modal-doctorante {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../../public/images/doctorante_without.png);
  background-position: left;
}

.modal .modal-foodshow {
  background-image: linear-gradient(94deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 42%), linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.2) 100%), url(./../../public/images/foodshow_without.jpg);
  background-position: right;
}

.modal .close-modal {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 5rem;
  color: white;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.modal .close-modal:hover {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #31e2c6;
}

.modal .modal-title {
  font-size: 3rem;
  font-weight: 300;
  color: #ee2f2b;
}

.modal .modal-compagny {
  margin-bottom: 4.5rem;
  font-size: 2.2rem;
  font-weight: 400;
  color: #31e2c6;
}

.modal .modal-body,
.modal .actions,
.modal .environment {
  font-size: 1.6rem;
  font-weight: 300;
}

.modal .modal-body {
  margin-bottom: 4rem;
}

.modal .actions {
  margin-left: 1.3rem;
  margin-bottom: 5rem;
}

.modal .actions ul {
  list-style-type: square;
}

.modal .environment {
  margin-bottom: 9rem;
}

.modal .environment ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
}

.modal .environment ul li {
  border: 1px solid white;
  margin: 0.2rem 1rem;
  padding: 0 0.5rem;
}

.modal .modal-button {
  display: inline-block;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-size: 2rem;
  padding: 1rem 4.5rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #31e2c6;
  border-radius: 30px;
  color: #31e2c6;
  text-decoration: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.modal .modal-button:hover {
  color: white;
  background-color: #31e2c6;
  -webkit-transform: translateY(-0.2rem);
  transform: translateY(-0.2rem);
}

@media screen and (max-width: 1200px) {
  .modal {
    width: 80%;
  }
  .modal .modal-title {
    font-size: 2rem;
    color: #ee2f2b;
  }
  .modal .modal-compagny {
    margin-bottom: 2rem;
    font-size: 1.8rem;
  }
  .modal .modal-body,
  .modal .actions,
  .modal .environment {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 700px) {
  .modal {
    width: 100%;
    height: 100%;
  }
  .modal .modal-title {
    margin-top: 5rem;
    font-size: 1.5rem;
    color: #ee2f2b;
  }
  .modal .modal-compagny {
    margin-bottom: 2rem;
    font-size: 1.2rem;
  }
  .modal .modal-body,
  .modal .actions,
  .modal .environment {
    font-size: 1.1rem;
  }
  .modal .modal-body {
    margin-bottom: 2rem;
  }
  .modal .actions {
    margin-bottom: 2rem;
  }
  .modal .environment {
    margin-bottom: 5rem;
  }
  .modal .environment ul li {
    margin: 0.2rem 1rem;
    padding: 0 0.5rem;
  }
  .modal .close-modal {
    top: 1rem;
    right: 1.5rem;
    font-size: 3rem;
  }
  .modal .modal-button {
    font-size: 1.4rem;
    padding: 0.5rem 2.5rem;
    margin-right: 2rem;
    background-color: #31e2c6;
    color: white;
  }
}

/*--------------------------------------------------------------------------------------------*/
/*-------------------------------------------CONTACT------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/
.section_contact {
  background-color: #e0e5eb;
  height: 100vh;
  overflow: hidden;
}

.contact_title {
  margin-top: 14rem;
  margin-left: 2rem;
  font-weight: 700;
  font-size: 16rem;
  color: #e0e5eb;
  text-shadow: -8px -8px 16px rgba(255, 255, 255, 0.5), 8px 8px 16px rgba(0, 0, 0, 0.1), -2px -2px 4px white, 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.contact_mail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 6rem;
}

.contact_mail a {
  position: relative;
  width: 88rem;
  text-decoration: none;
  font-weight: 600;
  -webkit-text-stroke-width: 0.2rem;
  -webkit-text-stroke-color: #ee2f2b;
  -webkit-text-fill-color: transparent;
  font-size: 5rem;
  color: #e0e5eb;
  border-bottom: 3px solid #ee2f2b;
  text-shadow: -8px -8px 16px rgba(255, 255, 255, 0.5), 8px 8px 16px rgba(0, 0, 0, 0.1), -2px -2px 4px white, 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.contact_icon {
  margin-top: 17rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icon-list {
  list-style: none;
  width: 20rem;
  width: 50%;
  padding: 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.icon-list .github:hover .icon-link {
  color: #1f1e1e;
}

.icon-list .mail:hover .icon-link {
  color: #db4a39;
}

.icon-list .linkelin:hover .icon-link {
  color: #0e76a8;
}

.icon-list .icon-list__item {
  padding: 1rem;
}

.icon-list .icon-list__item .icon-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 6rem;
  text-decoration: none;
  color: #b6bbc5;
  width: 13rem;
  height: 13rem;
  border-radius: 20%;
  -webkit-box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.1), -1rem -1rem 2rem rgba(255, 255, 255, 0.5);
  box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.1), -1rem -1rem 2rem rgba(255, 255, 255, 0.5);
}

.icon-list .icon-list__item .icon-link:active {
  -webkit-box-shadow: inset 1rem 1rem 2rem rgba(0, 0, 0, 0.1), inset -1rem -1rem 2rem rgba(255, 255, 255, 0.5);
  box-shadow: inset 1rem 1rem 2rem rgba(0, 0, 0, 0.1), inset -1rem -1rem 2rem rgba(255, 255, 255, 0.5);
}

.icon-link i {
  margin: auto;
}

@media screen and (max-width: 940px) {
  .contact_title {
    margin-top: 17rem;
    margin-left: 4rem;
    font-size: 10rem;
  }
  .contact_mail {
    margin-top: 15rem;
  }
  .contact_mail a {
    width: 60rem;
    font-size: 3.5rem;
  }
  .contact_icon {
    margin-top: 26rem;
  }
  .icon-list .icon-list__item .icon-link {
    font-size: 5rem;
    width: 10rem;
    height: 10rem;
  }
}

@media screen and (max-width: 656px) {
  .contact_title {
    margin-top: 18rem;
    margin-left: 3rem;
    font-size: 7rem;
  }
  .contact_mail a {
    width: 50rem;
    font-size: 3rem;
  }
  .contact_icon {
    margin-top: 26rem;
  }
  .icon-list .icon-list__item .icon-link {
    font-size: 4rem;
    width: 8rem;
    height: 8rem;
  }
}

@media screen and (max-width: 546px) {
  .contact_title {
    margin-top: 12rem;
    margin-left: 2rem;
    font-size: 5rem;
  }
  .contact_mail a {
    width: 30rem;
    font-size: 2rem;
    -webkit-text-stroke-width: 0.1rem;
    border-bottom: 2px solid #ee2f2b;
  }
  .contact_icon {
    margin-top: 10rem;
  }
  .icon-list .icon-list__item .icon-link {
    font-size: 3rem;
    width: 6rem;
    height: 6rem;
  }
}

/*-------------------------------------------------------------------------------------*/
/*--------------------------------------NAVIGATION-------------------------------------*/
/*-------------------------------------------------------------------------------------*/
.navigation {
  position: relative;
}

.overlay-navigation {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay-slide-down {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.overlay-slide-up {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

nav,
nav ul {
  width: 100%;
  height: 100%;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}

nav ul li {
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  background-color: rgba(0, 0, 0, 0.767);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  overflow: hidden;
}

nav li a {
  display: block;
  position: relative;
  top: 50%;
  font-size: 3em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.4rem;
}

.overlay-navigation nav li a:hover {
  color: white;
}

nav li:nth-child(n) a {
  color: #ee2f2b;
}

nav li:not(:last-child) {
  background-color: rgba(0, 0, 0, 0.767);
  border-right: 1px solid white;
}

.slide-in-nav-item {
  -webkit-animation: slide-in-nav-item 0.4s linear 1 0.2s both;
          animation: slide-in-nav-item 0.4s linear 1 0.2s both;
}

.slide-in-nav-item-delay-1 {
  -webkit-animation: slide-in-nav-item 0.4s linear 1 0.4s both;
          animation: slide-in-nav-item 0.4s linear 1 0.4s both;
}

.slide-in-nav-item-delay-2 {
  -webkit-animation: slide-in-nav-item 0.4s linear 1 0.6s both;
          animation: slide-in-nav-item 0.4s linear 1 0.6s both;
}

.slide-in-nav-item-delay-3 {
  -webkit-animation: slide-in-nav-item 0.4s linear 1 0.8s both;
          animation: slide-in-nav-item 0.4s linear 1 0.8s both;
}

.slide-in-nav-item-delay-4 {
  -webkit-animation: slide-in-nav-item 0.4s linear 1 1s both;
          animation: slide-in-nav-item 0.4s linear 1 1s both;
}

.slide-in-nav-item-delay-5 {
  -webkit-animation: slide-in-nav-item 0.4s linear 1 1.2s both;
          animation: slide-in-nav-item 0.4s linear 1 1.2s both;
}

.slide-in-nav-item-reverse {
  -webkit-animation: slide-in-nav-item-reverse 0.3s linear 1 0.6s both;
          animation: slide-in-nav-item-reverse 0.3s linear 1 0.6s both;
}

.slide-in-nav-item-delay-1-reverse {
  -webkit-animation: slide-in-nav-item-reverse 0.3s linear 1 0.5s both;
          animation: slide-in-nav-item-reverse 0.3s linear 1 0.5s both;
}

.slide-in-nav-item-delay-2-reverse {
  -webkit-animation: slide-in-nav-item-reverse 0.3s linear 1 0.4s both;
          animation: slide-in-nav-item-reverse 0.3s linear 1 0.4s both;
}

.slide-in-nav-item-delay-3-reverse {
  -webkit-animation: slide-in-nav-item-reverse 0.3s linear 1 0.3s both;
          animation: slide-in-nav-item-reverse 0.3s linear 1 0.3s both;
}

.slide-in-nav-item-delay-4-reverse {
  -webkit-animation: slide-in-nav-item-reverse 0.3s linear 1 0.2s both;
          animation: slide-in-nav-item-reverse 0.3s linear 1 0.2s both;
}

.slide-in-nav-item-delay-5-reverse {
  -webkit-animation: slide-in-nav-item-reverse 0.3s linear 1 0.1s both;
          animation: slide-in-nav-item-reverse 0.3s linear 1 0.1s both;
}

/*--------------------------------------------------------------------------------------------*/
/*--------------------------------------------BURGER------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/
.open-overlay {
  z-index: 21;
  display: block;
  position: fixed;
  right: 7rem;
  top: 3.2rem;
  width: 3.4rem;
  cursor: pointer;
}

.open-overlay span {
  display: block;
  height: 0.5rem;
  width: 5rem;
  margin-top: 1rem;
  cursor: pointer;
  background-color: #ee2f2b;
}

.open-overlay::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: -11px;
  left: -16px;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.479);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.animate-top-bar {
  -webkit-animation: animate-top-bar 0.6s linear 1 both;
          animation: animate-top-bar 0.6s linear 1 both;
}

.animate-bottom-bar {
  -webkit-animation: animate-bottom-bar 0.6s linear 1 both;
          animation: animate-bottom-bar 0.6s linear 1 both;
}

.animate-middle-bar {
  -webkit-animation: animate-middle-bar 0.6s linear 1 both;
          animation: animate-middle-bar 0.6s linear 1 both;
}

.animate-out-top-bar {
  -webkit-animation: animate-out-top-bar 0.6s linear 1 both;
          animation: animate-out-top-bar 0.6s linear 1 both;
}

.animate-out-bottom-bar {
  -webkit-animation: animate-out-bottom-bar 0.6s linear 1 both;
          animation: animate-out-bottom-bar 0.6s linear 1 both;
}

.animate-out-middle-bar {
  -webkit-animation: animate-out-middle-bar 0.6s linear 1 both;
          animation: animate-out-middle-bar 0.6s linear 1 both;
}

/* ====================================
  Animation keyframes
  ==================================== */
@-webkit-keyframes slide-in-nav-item {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slide-in-nav-item {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slide-in-nav-item-reverse {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes slide-in-nav-item-reverse {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@-webkit-keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@-webkit-keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@-webkit-keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #fff;
  }
}

@keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #fff;
  }
}

@-webkit-keyframes animate-out-top-bar {
  0% {
    background-color: #ee2f2b;
  }
  50% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@keyframes animate-out-top-bar {
  0% {
    background-color: #ee2f2b;
  }
  50% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@-webkit-keyframes animate-out-bottom-bar {
  0% {
    background-color: #ee2f2b;
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
    background-color: #ee2f2b;
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #ee2f2b;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #ee2f2b;
  }
}

@-webkit-keyframes animate-out-middle-bar {
  0% {
    background-color: #e0e5eb;
  }
  80% {
    background-color: #e0e5eb;
  }
  100% {
    background-color: #ee2f2b;
  }
}

@keyframes animate-out-middle-bar {
  0% {
    background-color: #e0e5eb;
  }
  80% {
    background-color: #e0e5eb;
  }
  100% {
    background-color: #ee2f2b;
  }
}

@media only screen and (max-width: 1979px) {
  nav li a {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.4rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@media only screen and (max-width: 1309px) {
  .overlay-slide-down {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .overlay-slide-up {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  nav li:not(:last-child) {
    border-bottom: 1px solid white;
  }
  nav li a {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.4rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  @-webkit-keyframes slide-in-nav-item {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes slide-in-nav-item {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @-webkit-keyframes slide-in-nav-item-reverse {
    from {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
  @keyframes slide-in-nav-item-reverse {
    from {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
}

@media only screen and (max-width: 1309px) and (max-width: 600px) {
  .open-overlay {
    right: 3rem;
    top: 2rem;
  }
  .open-overlay span {
    height: 0.5rem;
    width: 4rem;
    margin-top: 0.5rem;
  }
  .open-overlay::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: -12px;
    left: -10px;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.479);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
}
/*# sourceMappingURL=style.css.map */