* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gosha Sans Regular";
}

html {
  background-color: #C4CDDA;
}

@font-face {
  font-family: "Gosha Sans Bold";
  src: url("/fonts/GoshaSans-Bold.eot") format("eot"), url("/fonts/GoshaSans-Bold.woff") format("woff"), url("/fonts/GoshaSans-Bold.otf") format("otf"), url("/fonts/GoshaSans-Bold.ttf") format("truetype"), url("/fonts/GoshaSans-Bold.svg") format("svg");
}
@font-face {
  font-family: "Gosha Sans Regular";
  src: url("/fonts/GoshaSans-Regular.eot") format("eot"), url("/fonts/GoshaSans-Regular.woff") format("woff"), url("/fonts/GoshaSans-Regular.otf") format("otf"), url("/fonts/GoshaSans-Regular.ttf") format("truetype"), url("/fonts/GoshaSans-Regular.svg") format("svg");
}
::-moz-selection {
  background-color: #000;
  mix-blend-mode: difference;
}
::selection {
  background-color: #000;
  mix-blend-mode: difference;
}

::-moz-selection {
  background-color: #000;
  mix-blend-mode: difference;
}

::-webkit-selection {
  background-color: #000;
  mix-blend-mode: difference;
}

::-webkit-scrollbar {
  width: 2px;
  height: 6px;
}
::-webkit-scrollbar:hover {
  width: 12px;
}

::-moz-scrollbar {
  height: 6px;
  width: 2px;
}

::-o-scrollbar {
  height: 6px;
  width: 2px;
}

::-webkit-scrollbar-thumb {
  background-color: #000000;
}

::-moz-scrollbar-thumb {
  background-color: #000000;
}

::-o-scrollbar-thumb {
  background-color: #000000;
}

.noise {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.05;
}

#links-page a {
  text-decoration: none;
  color: #000;
  text-align: center;
}
#links-page a:hover {
  background-color: red;
}
#links-page a h2 {
  font-size: 4rem;
  margin-top: 25px;
  padding-bottom: 10px;
}
#links-page a p {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 2px solid black;
  font-size: 1rem;
}

#about-container #main-header, #work-container #main-header, #project-container #main-header {
  position: fixed;
  z-index: 1;
  background-color: #C4CDDA;
}
#about-container #main-header #main-nav, #work-container #main-header #main-nav, #project-container #main-header #main-nav {
  padding: 15px 0;
}
#about-container #main-header #main-nav #main-box .btn a, #work-container #main-header #main-nav #main-box .btn a, #project-container #main-header #main-nav #main-box .btn a {
  font-size: 1.2rem;
  font-weight: bold;
}
#about-container .trigger-element-top, #work-container .trigger-element-top, #project-container .trigger-element-top {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease-out;
}
#about-container .trigger-element-top.fade-in, #work-container .trigger-element-top.fade-in, #project-container .trigger-element-top.fade-in {
  opacity: 1;
  transform: translateY(0);
}
#about-container #intro-rw, #work-container #intro-rw, #project-container #intro-rw {
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
}
#about-container #intro-rw #intro-fd-img, #work-container #intro-rw #intro-fd-img, #project-container #intro-rw #intro-fd-img {
  background-image: url("assets/pdp_oniki_2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 75%;
  background-position-x: 50%;
  filter: grayscale(100%);
  overflow: hidden;
}
#about-container #intro-rw #intro-fd-img #fd-img-container, #work-container #intro-rw #intro-fd-img #fd-img-container, #project-container #intro-rw #intro-fd-img #fd-img-container {
  width: 100%;
  height: 100%;
}
#about-container #intro-rw #intro-fd-img #fd-img-container canvas, #work-container #intro-rw #intro-fd-img #fd-img-container canvas, #project-container #intro-rw #intro-fd-img #fd-img-container canvas {
  margin: 0;
  padding: 0;
  max-width: 974px !important;
  max-height: 460px !important;
}
#about-container #intro-rw #intro-fd-img #fd-img-container canvas img, #work-container #intro-rw #intro-fd-img #fd-img-container canvas img, #project-container #intro-rw #intro-fd-img #fd-img-container canvas img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
#about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 .shape, #work-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 .shape, #project-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 .shape {
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}
#about-container #services-rw #services-card, #work-container #services-rw #services-card, #project-container #services-rw #services-card {
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}

/* MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  #about-container {
    height: 100vh;
  }
  #about-container #main-header {
    width: 100%;
    bottom: 0;
    border-top: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #about-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #about-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-logo #logoImg {
    width: 75%;
  }
  #about-container #main-header #main-nav #nav-picto {
    display: none;
  }
  #about-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
  }
  #about-container #main-header #main-nav #main-box .btn:first-child {
    border-radius: 120px 0 0 120px;
    background-color: #8d84f0;
  }
  #about-container #main-header #main-nav #main-box .btn:last-child {
    border-left: none;
    border-radius: 0 120px 120px 0;
    background-color: #000;
    color: #C4CDDA;
  }
  #about-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    color: #C4CDDA;
    font-size: 1.1rem;
  }
  #about-container #main-header #main-nav #nav-contact {
    display: none;
  }
  #about-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #about-container #intro-rw {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 6rem 2.5rem 3rem 24rem 12rem;
    grid-template-areas: "portfolio portfolio " "quote quote " "colpal colpal " "fd-img fd-img " "picto code";
  }
  #about-container #intro-rw #intro-portfolio {
    width: 100%;
    grid-area: portfolio;
    background-color: #236f51;
    display: grid;
    grid-template-columns: 1fr 6rem;
    grid-template-rows: 6rem;
    grid-template-areas: "title date";
  }
  #about-container #intro-rw #intro-portfolio #intro-date {
    grid-area: date;
    background-color: #000;
    color: #C4CDDA;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #intro-rw #intro-portfolio #title-content {
    grid-area: title;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-portfolio #title-content #intro-title {
    font-size: 3rem;
    text-align: center;
  }
  #about-container #intro-rw #intro-fd-img {
    grid-area: fd-img;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
  #about-container #intro-rw #intro-quote {
    grid-area: quote;
    background-color: #000;
    display: grid;
    grid-template-columns: 5rem 1fr;
  }
  #about-container #intro-rw #intro-quote #qt-picto {
    background-color: #a1b6f9;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-quote #qt-txt {
    width: 100%;
    background-color: #000;
    align-self: center;
    height: 25px;
    overflow: hidden;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee {
    display: inline-block;
    width: 100rem;
    overflow: hidden;
    white-space: nowrap;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p {
    color: #fff;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p:nth-child(1) {
    display: inline-block;
    animation: marquee 15s linear infinite;
    background-color: #000;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p:nth-child(2) {
    background-color: #000;
    display: inline-block;
    animation: marquee2 15s linear infinite;
    animation-delay: 4.5s;
  }
  @keyframes marquee {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee2 {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(-150%);
    }
  }
  #about-container #intro-rw #intro-picto {
    grid-area: picto;
    background-color: #a1b6f9;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-qrcode {
    grid-area: code;
    background-color: #8d84f0;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-qrcode a {
    text-align: center;
  }
  #about-container #intro-rw #intro-colpal {
    grid-area: colpal;
    background-color: #C4CDDA;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-colpal .colpal-bk {
    width: 75%;
    height: 20px;
    margin-left: 10px;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
    border: 2px solid black;
  }
  #about-container #intro-rw #intro-colpal span {
    border: 2px solid black;
    border-left: none;
    width: 5px;
    height: 20px;
    margin: 0 2px;
  }
  #about-container #infos-rw {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 5fr 6fr;
    grid-template-areas: "heading heading" "form form";
  }
  #about-container #infos-rw #infos-head {
    grid-area: heading;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
  }
  #about-container #infos-rw #infos-head #infos-hd-title {
    margin-right: 15px;
    grid-column: 2;
    align-self: end;
  }
  #about-container #infos-rw #infos-head #infos-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #about-container #infos-rw #infos-head #infos-hd-shape {
    align-self: end;
  }
  #about-container #infos-rw #infos-head #infos-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #about-container #infos-rw #infos-form {
    margin: 25px;
    grid-area: form;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3rem 10 rem 10rem;
    grid-template-areas: "cta cta" "leftbox leftbox" "rightbox rightbox";
  }
  #about-container #infos-rw #infos-form #infos-form-cta {
    grid-area: cta;
    text-align: center;
    background-color: #8d84f0;
    border: 2px solid black;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    padding-bottom: 3px;
    text-decoration: none;
    color: #000;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox {
    grid-area: leftbox;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2rem 2rem 2rem 2rem;
    grid-template-areas: "lastname lastname" "firstname firstname" "birth birth" "barcode numb";
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname {
    grid-area: lastname;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinNumber {
    position: absolute;
    font-size: 0.5rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinInfos {
    width: 100%;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinNumber {
    top: 50%;
    right: 2.5%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname {
    grid-area: firstname;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinNumber {
    position: absolute;
    font-size: 0.5rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinInfos {
    width: 100%;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinNumber {
    top: 50%;
    right: 2.5%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth {
    grid-area: birth;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 2px solid black;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinNumber {
    position: absolute;
    font-size: 0.5rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinInfos {
    top: 50%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinNumber {
    top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinNumber {
    position: absolute;
    font-size: 0.5rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinInfos {
    top: 50%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinNumber {
    top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by {
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinNumber {
    position: absolute;
    font-size: 0.5rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinInfos {
    top: 50%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinNumber {
    top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-barcode {
    grid-area: barcode;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    font-family: "Libre Barcode EAN13 Text", cursive;
    font-weight: normal;
    font-size: 1.5rem;
    letter-spacing: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-numb {
    grid-area: numb;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox {
    display: grid;
    grid-area: rightbox;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-template-rows: 6rem 10rem;
    grid-template-areas: "picto location" "graphic graphic";
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-picto {
    grid-area: picto;
    background-color: rgb(0, 0, 0);
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-picto img {
    width: 75%;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg {
    grid-area: location;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-areas: "city city" "lat long";
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg h3 {
    grid-area: city;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.8rem;
    margin-top: 5px;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg .lat {
    text-align: center;
    grid-area: lat;
    font-size: 0.8rem;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg .lon {
    text-align: center;
    grid-area: long;
    font-size: 0.8rem;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-graphic {
    grid-area: graphic;
    background-color: #8d84f0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
  }
  #about-container #infos-rw #infos-form #infos-shape {
    display: none;
  }
  #about-container #bio-rw {
    margin-top: 50px;
    width: 100%;
  }
  #about-container #bio-rw #infos-heading {
    margin-bottom: 40px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title {
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 30px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p1 {
    color: #a1b6f9;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p2 {
    text-align: left;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p2 .nickname {
    color: #236f51;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 .shape {
    border: 2px solid black;
    border-radius: 100px;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town {
    font-style: italic;
    color: #8d84f0;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town::before {
    content: "Brussels";
    text-decoration: line-through;
    pointer-events: none;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town::after {
    content: "Paris";
    margin-left: 15px;
  }
  #about-container #bio-rw #infos-bio {
    margin: 80px 30px;
  }
  #about-container #bio-rw #infos-bio p {
    font-size: 1.5rem;
    margin-bottom: 25px;
    text-align: left;
    letter-spacing: 1px;
  }
  #about-container #services-rw {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "infos infos" "card card";
  }
  #about-container #services-rw #services-ww {
    grid-area: infos;
    margin: 0 30px;
  }
  #about-container #services-rw #services-ww .service-ww {
    display: grid;
    grid-template-columns: 7rem 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "shape title" "pg pg";
  }
  #about-container #services-rw #services-ww .service-ww .ww-shape {
    grid-area: shape;
    width: 80px;
    height: 13px;
    border-radius: 50px;
    background-color: #000;
  }
  #about-container #services-rw #services-ww .service-ww .ww-title {
    margin-top: -4px;
    grid-area: title;
    grid-column: span 2;
  }
  #about-container #services-rw #services-ww .service-ww .ww-pg {
    text-align: left;
    font-size: 0.9rem;
    grid-area: pg;
    margin-bottom: 50px;
  }
  #about-container #services-rw #services-card {
    margin: 0 25px;
    grid-area: card;
    display: grid;
    align-self: start;
    background-color: #a1b6f9;
    border: 2px solid black;
    height: 250px;
    grid-template-columns: 7rem 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "shape title" "shape list";
    padding: 30px;
  }
  #about-container #services-rw #services-card #services-c-shape {
    grid-area: shape;
    background-color: #000;
    width: 80px;
    height: 13px;
    border-radius: 100px;
  }
  #about-container #services-rw #services-card #services-c-title {
    grid-area: title;
    margin-top: -4px;
  }
  #about-container #services-rw #services-card #services-c-list {
    grid-area: list;
    grid-column: span 2;
  }
  #about-container #services-rw #services-card #services-c-list li {
    list-style: none;
    font-size: 0.9rem;
  }
  #about-container #contact-rw {
    margin-top: 100px;
  }
  #about-container #contact-rw #contact-head {
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
  }
  #about-container #contact-rw #contact-head #contact-hd-title {
    margin-right: 15px;
    align-self: end;
    grid-column: 2;
  }
  #about-container #contact-rw #contact-head #contact-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #about-container #contact-rw #contact-head #contact-hd-shape {
    align-self: end;
  }
  #about-container #contact-rw #contact-head #contact-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #about-container #contact-rw #contact-form {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 6rem;
    grid-template-rows: 6rem 1fr;
    grid-template-areas: "cpicto behance insta gram" "personal personal personal personal";
  }
  #about-container #contact-rw #contact-form a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
  }
  #about-container #contact-rw #contact-form #contact-picto {
    grid-area: cpicto;
    background-color: #000;
    color: #fff;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #contact-rw #contact-form #contact-sm-behance {
    grid-area: behance;
    background-color: #236f51;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-sm-insta {
    grid-area: insta;
    background-color: #8d84f0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-sm-gram {
    grid-area: gram;
    background-color: #a1b6f9;
    border-top: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-personal {
    grid-area: personal;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    grid-template-rows: 2.5rem 2.5rem;
    grid-template-areas: "pmail tmail" "pphone tphone";
  }
  #about-container #contact-rw #contact-form #contact-personal a {
    font-size: 1.2rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pi-mail {
    grid-area: pmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pg-mail {
    grid-area: tmail;
    border-top: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pi-phone {
    grid-area: pphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pg-phone {
    grid-area: tphone;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #about-container footer {
    margin: 15px 0;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
  #about-container footer #copyright {
    background-color: #000;
    width: 150px;
    padding: 6px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #about-container footer #copyright p {
    color: #C4CDDA;
    text-align: right;
    font-size: 0.6rem;
  }
  #work-container #main-header {
    width: 100%;
    bottom: 0;
    border-top: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #work-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #work-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-logo #logoImg {
    width: 75%;
  }
  #work-container #main-header #main-nav #nav-picto {
    display: none;
  }
  #work-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
  }
  #work-container #main-header #main-nav #main-box .btn:first-child {
    border-radius: 120px 0 0 120px;
    background-color: #000;
  }
  #work-container #main-header #main-nav #main-box .btn:last-child {
    border-left: none;
    border-radius: 0 120px 120px 0;
    background-color: #8d84f0;
    color: #C4CDDA;
  }
  #work-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    color: #C4CDDA;
    font-size: 1.1rem;
  }
  #work-container #main-header #main-nav #nav-contact {
    display: none;
  }
  #work-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #work-container #work-rw {
    margin-top: 50px;
  }
  #work-container #work-rw #work-head {
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
    margin-bottom: 40px;
  }
  #work-container #work-rw #work-head #work-hd-title {
    margin-right: 15px;
    align-self: end;
    grid-column: 2;
  }
  #work-container #work-rw #work-head #work-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #work-container #work-rw #work-head #work-hd-shape {
    align-self: end;
  }
  #work-container #work-rw #work-head #work-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #work-container #work-rw #project-summary {
    background: radial-gradient(circle, #236f51 3%, #a1b6f9 15%, #8d84f0 25%, #C4CDDA 42%);
  }
  #work-container #work-rw #project-summary .art-projects {
    padding: 20px 0;
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #work-container #work-rw #project-summary .art-projects .projectNbr {
    text-align: center;
    width: 25px;
    height: 25px;
    border: 2px solid black;
    border-radius: 50%;
  }
  #work-container #work-rw #project-summary .art-projects .project-addIn {
    font-size: 1rem;
    margin-top: 15px;
  }
  #work-container #work-rw #project-summary .art-projects .project-title {
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase;
    border-top: 2px solid black;
    margin: 15px 0;
  }
  #work-container #work-rw #project-summary .art-projects .projectHl {
    display: block;
    width: 100%;
  }
  #work-container #contact-rw {
    margin-top: 100px;
  }
  #work-container #contact-rw #contact-head {
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
  }
  #work-container #contact-rw #contact-head #contact-hd-title {
    margin-right: 15px;
    align-self: end;
    grid-column: 2;
  }
  #work-container #contact-rw #contact-head #contact-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #work-container #contact-rw #contact-head #contact-hd-shape {
    align-self: end;
  }
  #work-container #contact-rw #contact-head #contact-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #work-container #contact-rw #contact-form {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 6rem;
    grid-template-rows: 6rem 1fr;
    grid-template-areas: "cpicto behance insta gram" "personal personal personal personal";
  }
  #work-container #contact-rw #contact-form a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
  }
  #work-container #contact-rw #contact-form #contact-picto {
    grid-area: cpicto;
    background-color: #000;
    color: #fff;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #contact-rw #contact-form #contact-sm-behance {
    grid-area: behance;
    background-color: #236f51;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-sm-insta {
    grid-area: insta;
    background-color: #8d84f0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-sm-gram {
    grid-area: gram;
    background-color: #a1b6f9;
    border-top: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-personal {
    grid-area: personal;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    grid-template-rows: 2.5rem 2.5rem;
    grid-template-areas: "pmail tmail" "pphone tphone";
  }
  #work-container #contact-rw #contact-form #contact-personal a {
    font-size: 1.2rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pi-mail {
    grid-area: pmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pg-mail {
    grid-area: tmail;
    border-top: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pi-phone {
    grid-area: pphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pg-phone {
    grid-area: tphone;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #work-container footer {
    margin: 15px 0 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
  #work-container footer #copyright {
    background-color: #000;
    width: 150px;
    padding: 6px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #work-container footer #copyright p {
    color: #C4CDDA;
    text-align: right;
    font-size: 0.6rem;
  }
  #project-container #main-header {
    width: 100%;
    bottom: 0;
    border-top: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #project-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #project-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-logo #logoImg {
    width: 75%;
  }
  #project-container #main-header #main-nav #nav-picto {
    display: none;
  }
  #project-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
  }
  #project-container #main-header #main-nav #main-box .btn:first-child {
    border-radius: 120px 0 0 120px;
    background-color: #000;
  }
  #project-container #main-header #main-nav #main-box .btn:last-child {
    border-left: none;
    border-radius: 0 120px 120px 0;
    background-color: #8d84f0;
    color: #C4CDDA;
  }
  #project-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    color: #C4CDDA;
    font-size: 1.1rem;
  }
  #project-container #main-header #main-nav #nav-contact {
    display: none;
  }
  #project-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #project-container #Inproject-rw {
    width: 100%;
    display: grid;
    -moz-column-gap: 20px;
         column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 350px auto auto;
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt tt tt" "in in in in in in in in in in in in " "cb cb cb cb cb cb cb cb cb cb cb cb " "ft ft ft ft ft ft ft ft ft ft ft ft " "cp cp cp cp cp cp cp cp cp cp cp cp ";
  }
  #project-container #Inproject-rw #header-project {
    grid-area: tt;
    color: #000;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 20px 20px;
  }
  #project-container #Inproject-rw #header-project .projectDate {
    width: 100%;
    text-align: center;
    justify-content: center;
    align-content: center;
    width: 120px;
    height: 30px;
    border: 2px solid black;
    border-radius: 5px;
    font-size: 0.8rem;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #project-container #Inproject-rw #header-project .projectCat {
    text-align: center;
    width: 500px;
    height: 25px;
    font-size: 1rem;
    text-decoration: underline;
    text-transform: uppercase;
  }
  #project-container #Inproject-rw #header-project .project-title {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin: 10px;
  }
  #project-container #Inproject-rw #project-infos {
    color: #000;
    grid-area: in;
    grid-column: 1/span 12;
    margin-bottom: 55px;
    padding: 0 30px;
  }
  #project-container #Inproject-rw #project-infos #project-heading {
    font-size: 1.8rem;
  }
  #project-container #Inproject-rw #project-infos #project-pg {
    margin-top: 15px;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
  }
  #project-container #Inproject-rw #project-colpal {
    margin-bottom: 50px;
    padding: 0 30px;
    grid-area: cp;
  }
  #project-container #Inproject-rw #project-colpal #heading-colpal {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal {
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    align-content: center;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal div {
    height: 50px;
    width: 320px;
    display: flex;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: red;
    border: 2px solid black;
    margin: 3px;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal div p {
    margin-top: 3px;
    font-size: 0.5rem;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal div h3 {
    text-transform: uppercase;
    font-size: 0.9rem;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(1) {
    background-color: #E52647;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(2) {
    background-color: #F3E8DE;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(3) {
    background-color: #143F3F;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(4) {
    background-color: #E7E8F3;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-album-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-album-colpal div:nth-child(1) {
    background-color: #DB6149;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wptc-album-colpal div:nth-child(2) {
    background-color: #111214;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(1) {
    background-color: #3C6EF3;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(2) {
    background-color: #5BE1FE;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(3) {
    background-color: #A7BEFF;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(4) {
    background-color: #D794FF;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #daemon-colpal div:nth-child(1) {
    background-color: #f59731;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #daemon-colpal div:nth-child(2) {
    background-color: #aa829b;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #daemon-colpal div:nth-child(3) {
    background-color: #000;
    border: 2px solid black;
    color: #fff;
  }
  #project-container #Inproject-rw #project-colpal #kinnitty-colpal div:nth-child(1) {
    background-color: #a80402;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #kinnitty-colpal div:nth-child(2) {
    background-color: #B58454;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #kinnitty-colpal div:nth-child(3) {
    background-color: #BD9A98;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #bm-colpal div:nth-child(1) {
    background-color: #ffd400;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #bm-colpal div:nth-child(2) {
    background-color: #0540c4;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #bm-colpal div:nth-child(3) {
    background-color: #c19af7;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #immanent-colpal div:nth-child(1) {
    background-color: #001aff;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #immanent-colpal div:nth-child(2) {
    background-color: #ff00c9;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #immanent-colpal div:nth-child(3) {
    background-color: #21ff00;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(1) {
    background-color: #fc0000;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(2) {
    background-color: #ff8236;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(3) {
    background-color: #ac60ef;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(4) {
    background-color: #00cf8b;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(5) {
    background-color: #e5eae9;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(1) {
    background-color: #00ff06;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(2) {
    background-color: #a090e1;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(3) {
    background-color: #ffa0ff;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(4) {
    background-color: #ff8e3f;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(5) {
    background-color: #493e77;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(1) {
    background-color: #dedcdb;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(2) {
    background-color: #e83a6c;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(3) {
    background-color: #f28d3b;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(4) {
    background-color: #6dbb7c;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(5) {
    background-color: #8ebcd9;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(6) {
    background-color: #9896c9;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-collab {
    grid-area: cb;
    grid-column: 1/span 12;
    font-size: 1.2rem;
    margin-bottom: 55px;
    padding: 0 30px;
  }
  #project-container #Inproject-rw #project-collab #heading-collab {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  #project-container #Inproject-rw .project-font {
    grid-area: ft;
    grid-column: 1/span 12;
    margin-bottom: 55px;
    padding: 0 30px;
  }
  #project-container #Inproject-rw .project-font #heading-font {
    font-size: 1.8rem;
  }
  #project-container #Inproject-rw .project-font .symbol-font {
    margin-top: 15px;
    font-size: 1.2rem;
  }
  #project-container #Inproject-rw .project-font .name-font {
    text-decoration: underline;
    font-size: 1rem;
    margin-bottom: 10px;
  }
  #project-container #assets-rw {
    margin-top: 20px;
  }
  #project-container #assets-rw .asset_c12 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "one one one one" "two two two two" "three three three three" "four four four four" "five five five five" "six six six six" "seven seven seven seven" "height height height height";
  }
  #project-container #assets-rw .asset_c12 .asset_one {
    grid-area: one;
  }
  #project-container #assets-rw .asset_c12 .asset_one img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_two {
    grid-area: two;
  }
  #project-container #assets-rw .asset_c12 .asset_two img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_three {
    grid-area: three;
  }
  #project-container #assets-rw .asset_c12 .asset_three img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_four {
    grid-area: four;
  }
  #project-container #assets-rw .asset_c12 .asset_four img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_five {
    grid-area: five;
  }
  #project-container #assets-rw .asset_c12 .asset_five img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_six {
    grid-area: six;
  }
  #project-container #assets-rw .asset_c12 .asset_six img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_seven {
    grid-area: seven;
  }
  #project-container #assets-rw .asset_c12 .asset_seven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_height {
    grid-area: height;
  }
  #project-container #assets-rw .asset_c12 .asset_height img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "one one one one" "two two two two" "three three three three" "four four four four" "five five five five" "six six six six" "seven seven seven seven" "eight eight eight eight" "nine nine nine nine" "ten ten ten ten" "eleven eleven eleven eleven" "twelve twelve twelve twelve" "thirteen thirteen thirteen thirteen";
  }
  #project-container #assets-rw .asset_img .asset_one {
    grid-area: one;
  }
  #project-container #assets-rw .asset_img .asset_one img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_two {
    grid-area: two;
  }
  #project-container #assets-rw .asset_img .asset_two img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_three {
    grid-area: three;
  }
  #project-container #assets-rw .asset_img .asset_three img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_four {
    grid-area: four;
  }
  #project-container #assets-rw .asset_img .asset_four img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_five {
    grid-area: five;
  }
  #project-container #assets-rw .asset_img .asset_five img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_six {
    grid-area: six;
  }
  #project-container #assets-rw .asset_img .asset_six img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_seven {
    grid-area: seven;
  }
  #project-container #assets-rw .asset_img .asset_seven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_eight {
    grid-area: eight;
  }
  #project-container #assets-rw .asset_img .asset_eight img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_nine {
    grid-area: nine;
  }
  #project-container #assets-rw .asset_img .asset_nine img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_ten {
    grid-area: ten;
  }
  #project-container #assets-rw .asset_img .asset_ten img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_eleven {
    grid-area: eleven;
  }
  #project-container #assets-rw .asset_img .asset_eleven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_twelve {
    grid-area: twelve;
  }
  #project-container #assets-rw .asset_img .asset_twelve img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_thirteen {
    grid-area: thirteen;
  }
  #project-container #assets-rw .asset_img .asset_thirteen img {
    width: 100%;
  }
  #project-container #footer-rw {
    width: 100%;
    padding-bottom: 80px;
    display: grid;
    -moz-column-gap: 20px;
         column-gap: 20px;
    margin: 50px 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "previous previous previous previous" "work work work work " "next next next next";
  }
  #project-container #footer-rw #letswork {
    width: 100%;
    grid-area: work;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 20px;
    border: 2px solid black;
    background-color: #000;
    color: #FFF;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
  }
  #project-container #footer-rw #letswork #footer-heading {
    font-size: 3rem;
  }
  #project-container #footer-rw #letswork #cta-contact {
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    position: absolute;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
    border: 2px solid black;
    text-align: center;
    padding: 15px 35px;
    border-radius: 100PX;
    rotate: -6deg;
    font-size: 2rem;
    opacity: 0.95;
    font-size: 1rem;
    transition: all 0.9s ease-in-out;
    box-sizing: content-box;
  }
  #project-container #footer-rw #letswork #cta-contact:hover {
    transform: rotate(360deg);
    padding: 30px 70px;
  }
  #project-container #footer-rw #letswork #cta-contact a {
    text-decoration: none;
    color: #FFF;
  }
  #project-container #footer-rw #previous-work {
    width: 100%;
    grid-area: previous;
    align-content: center;
    text-align: center;
    margin-bottom: 15px;
  }
  #project-container #footer-rw #previous-work a {
    text-decoration: none;
    color: #000;
    font-size: 1.3rem;
    transition: all 0.3s ease-in-out;
    padding: 25px;
  }
  #project-container #footer-rw #previous-work a:hover {
    margin-right: 25px;
  }
  #project-container #footer-rw #next-work {
    grid-area: next;
    align-content: center;
    text-align: center;
    margin-top: 15px;
  }
  #project-container #footer-rw #next-work a {
    text-decoration: none;
    color: #000;
    font-size: 1.3rem;
    transition: all 0.3s ease-in-out;
    padding: 25px;
  }
  #project-container #footer-rw #next-work a:hover {
    margin-left: 25px;
  }
}
/*  END MOBILE */
/* TABLET */
@media only screen and (min-device-width: 766px) and (max-device-width: 1280px) {
  #about-container {
    height: 100vh;
  }
  #about-container #main-header {
    width: 100%;
    bottom: 0;
    border-top: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #about-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #about-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-logo #logoImg {
    width: 40%;
  }
  #about-container #main-header #main-nav #nav-picto {
    display: none;
  }
  #about-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
  }
  #about-container #main-header #main-nav #main-box .btn:first-child {
    border-radius: 120px 0 0 120px;
    background-color: #8d84f0;
  }
  #about-container #main-header #main-nav #main-box .btn:last-child {
    border-left: none;
    border-radius: 0 120px 120px 0;
    background-color: #000;
    color: #C4CDDA;
  }
  #about-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    color: #C4CDDA;
    font-size: 1.1rem;
  }
  #about-container #main-header #main-nav #nav-contact {
    display: none;
  }
  #about-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #about-container #intro-rw {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 8rem 4rem 5rem 40rem 24rem;
    grid-template-areas: "portfolio portfolio " "quote quote " "colpal colpal " "fd-img fd-img " "picto code";
  }
  #about-container #intro-rw #intro-portfolio {
    width: 100%;
    grid-area: portfolio;
    background-color: #236f51;
    display: grid;
    grid-template-columns: 1fr 8rem;
    grid-template-rows: 8rem;
    grid-template-areas: "title date";
  }
  #about-container #intro-rw #intro-portfolio #intro-date {
    grid-area: date;
    background-color: #000;
    color: #C4CDDA;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #intro-rw #intro-portfolio #title-content {
    grid-area: title;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-portfolio #title-content #intro-title {
    font-size: 4rem;
    text-align: center;
  }
  #about-container #intro-rw #intro-fd-img {
    grid-area: fd-img;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
  #about-container #intro-rw #intro-quote {
    grid-area: quote;
    background-color: #000;
    display: grid;
    grid-template-columns: 8rem 1fr;
  }
  #about-container #intro-rw #intro-quote #qt-picto {
    background-color: #a1b6f9;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-quote #qt-txt {
    width: 100%;
    background-color: #000;
    align-self: center;
    height: 25px;
    overflow: hidden;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee {
    display: inline-block;
    width: 60rem;
    overflow: hidden;
    white-space: nowrap;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p {
    color: #fff;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p:nth-child(1) {
    display: inline-block;
    animation: marquee 15s linear infinite;
    background-color: #000;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p:nth-child(2) {
    background-color: #000;
    display: inline-block;
    animation: marquee2 15s linear infinite;
    animation-delay: 4.5s;
  }
  @keyframes marquee {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee2 {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(-150%);
    }
  }
  #about-container #intro-rw #intro-picto {
    grid-area: picto;
    background-color: #a1b6f9;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-qrcode {
    grid-area: code;
    background-color: #8d84f0;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-qrcode a {
    text-align: center;
  }
  #about-container #intro-rw #intro-colpal {
    grid-area: colpal;
    background-color: #C4CDDA;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-colpal .colpal-bk {
    width: 85%;
    height: 30px;
    margin-left: 10px;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
    border: 2px solid black;
  }
  #about-container #intro-rw #intro-colpal span {
    border: 2px solid black;
    border-left: none;
    width: 5px;
    height: 30px;
    margin: 0 3px;
  }
  #about-container #intro-rw #intro-colpal p {
    font-size: 1.4rem;
  }
  #about-container #infos-rw {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 5fr 6fr;
    grid-template-areas: "heading heading" "form form";
  }
  #about-container #infos-rw #infos-head {
    grid-area: heading;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
  }
  #about-container #infos-rw #infos-head #infos-hd-title {
    margin-right: 15px;
    grid-column: 2;
    align-self: end;
  }
  #about-container #infos-rw #infos-head #infos-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #about-container #infos-rw #infos-head #infos-hd-shape {
    align-self: end;
  }
  #about-container #infos-rw #infos-head #infos-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #about-container #infos-rw #infos-form {
    margin: 25px;
    grid-area: form;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3rem 10 rem 10rem;
    grid-template-areas: "cta cta" "leftbox rightbox";
  }
  #about-container #infos-rw #infos-form #infos-form-cta {
    grid-area: cta;
    text-align: center;
    background-color: #8d84f0;
    border: 2px solid black;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    padding-bottom: 5px;
    text-decoration: none;
    color: #000;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox {
    grid-area: leftbox;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3rem 3rem 3rem 3rem;
    grid-template-areas: "lastname lastname" "firstname firstname" "birth birth" "barcode numb";
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname {
    grid-area: lastname;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinInfos {
    width: 100%;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinNumber {
    top: 50%;
    right: 2.5%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname {
    grid-area: firstname;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinInfos {
    width: 100%;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinNumber {
    top: 50%;
    right: 2.5%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth {
    grid-area: birth;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 2px solid black;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinInfos {
    top: 25%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinNumber {
    top: 25%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinInfos {
    top: 25%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinNumber {
    top: 25%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinInfos {
    top: 25%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinNumber {
    top: 25%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-barcode {
    grid-area: barcode;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    font-family: "Libre Barcode EAN13 Text", cursive;
    font-weight: normal;
    font-size: 2.3rem;
    letter-spacing: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-numb {
    grid-area: numb;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox {
    display: grid;
    grid-area: rightbox;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-template-rows: 6rem 15rem;
    grid-template-areas: "picto location" "graphic graphic";
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-picto {
    grid-area: picto;
    background-color: rgb(0, 0, 0);
    border: 2px solid black;
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg {
    grid-area: location;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-areas: "city city" "lat long";
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg h3 {
    grid-area: city;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
    margin-top: 5px;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg .lat {
    text-align: right;
    margin-right: 30px;
    grid-area: lat;
    font-size: 0.8rem;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg .lon {
    text-align: left;
    margin-left: 30px;
    grid-area: long;
    font-size: 0.8rem;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-graphic {
    grid-area: graphic;
    background-color: #8d84f0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
  }
  #about-container #infos-rw #infos-form #infos-shape {
    display: none;
  }
  #about-container #bio-rw {
    margin-top: 50px;
    width: 100%;
  }
  #about-container #bio-rw #infos-heading {
    margin-bottom: 50px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title {
    font-size: 1.65rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 30px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p1 {
    color: #a1b6f9;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p2 {
    text-align: right;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p2 .nickname {
    color: #236f51;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 {
    padding-left: 40px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 .shape {
    border: 2px solid black;
    border-radius: 100px;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 {
    text-align: right;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town {
    font-style: italic;
    color: #8d84f0;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town::before {
    content: "Brussels";
    text-decoration: line-through;
    pointer-events: none;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town::after {
    content: "Paris";
    margin-left: 20px;
  }
  #about-container #bio-rw #infos-bio {
    margin: 80px 30px;
  }
  #about-container #bio-rw #infos-bio p {
    font-size: 1.5rem;
    margin-bottom: 25px;
    text-align: left;
    letter-spacing: 1px;
  }
  #about-container #services-rw {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "infos infos" "card card";
  }
  #about-container #services-rw #services-ww {
    grid-area: infos;
    margin: 0 30px;
  }
  #about-container #services-rw #services-ww .service-ww {
    display: grid;
    grid-template-columns: 7rem 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "shape title" "pg pg";
  }
  #about-container #services-rw #services-ww .service-ww .ww-shape {
    grid-area: shape;
    width: 80px;
    height: 13px;
    border-radius: 50px;
    background-color: #000;
  }
  #about-container #services-rw #services-ww .service-ww .ww-title {
    margin-top: -4px;
    grid-area: title;
    grid-column: span 2;
  }
  #about-container #services-rw #services-ww .service-ww .ww-pg {
    text-align: left;
    font-size: 1.1rem;
    grid-area: pg;
    margin-bottom: 50px;
  }
  #about-container #services-rw #services-card {
    margin: 0 25px;
    grid-area: card;
    display: grid;
    align-self: start;
    background-color: #a1b6f9;
    border: 2px solid black;
    grid-column: 2/span 2;
    height: 250px;
    grid-template-columns: 7rem 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "shape title" "shape list";
    padding: 30px;
  }
  #about-container #services-rw #services-card #services-c-shape {
    grid-area: shape;
    background-color: #000;
    width: 80px;
    height: 13px;
    border-radius: 100px;
  }
  #about-container #services-rw #services-card #services-c-title {
    grid-area: title;
    margin-top: -4px;
  }
  #about-container #services-rw #services-card #services-c-list {
    grid-area: list;
    grid-column: span 2;
  }
  #about-container #services-rw #services-card #services-c-list li {
    list-style: none;
    font-size: 0.9rem;
  }
  #about-container #contact-rw {
    margin-top: 100px;
  }
  #about-container #contact-rw #contact-head {
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
  }
  #about-container #contact-rw #contact-head #contact-hd-title {
    margin-right: 15px;
    align-self: end;
    grid-column: 2;
  }
  #about-container #contact-rw #contact-head #contact-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #about-container #contact-rw #contact-head #contact-hd-shape {
    align-self: end;
  }
  #about-container #contact-rw #contact-head #contact-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #about-container #contact-rw #contact-form {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 8rem 8rem 8rem 8rem 1fr;
    grid-template-rows: 8rem;
    margin-left: 30px;
    margin-right: 30px;
  }
  #about-container #contact-rw #contact-form a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
  }
  #about-container #contact-rw #contact-form #contact-picto {
    background-color: #000;
    color: #fff;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #contact-rw #contact-form #contact-sm-behance {
    background-color: #236f51;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-sm-insta {
    background-color: #8d84f0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-sm-gram {
    background-color: #a1b6f9;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-personal {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-rows: 4rem 4rem;
    grid-template-areas: "pmail tmail" "pphone tphone";
  }
  #about-container #contact-rw #contact-form #contact-personal a {
    font-size: 1.4rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pi-mail {
    grid-area: pmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pg-mail {
    grid-area: tmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pi-phone {
    grid-area: pphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pg-phone {
    grid-area: tphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #about-container footer {
    margin: 15px 0;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
  #about-container footer #copyright {
    background-color: #000;
    width: 150px;
    padding: 6px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #about-container footer #copyright p {
    color: #C4CDDA;
    text-align: right;
    font-size: 0.6rem;
  }
  #project-container {
    height: 100vh;
  }
  #project-container #main-header {
    width: 100%;
    bottom: 0;
    border-top: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #project-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #project-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-logo #logoImg {
    width: 40%;
  }
  #project-container #main-header #main-nav #nav-picto {
    display: none;
  }
  #project-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
  }
  #project-container #main-header #main-nav #main-box .btn:first-child {
    border-radius: 120px 0 0 120px;
    background-color: #8d84f0;
  }
  #project-container #main-header #main-nav #main-box .btn:last-child {
    border-left: none;
    border-radius: 0 120px 120px 0;
    background-color: #000;
    color: #C4CDDA;
  }
  #project-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    color: #C4CDDA;
    font-size: 1.1rem;
  }
  #project-container #main-header #main-nav #nav-contact {
    display: none;
  }
  #project-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #work-container {
    height: 100vh;
  }
  #work-container #main-header {
    width: 100%;
    bottom: 0;
    border-top: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #work-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #work-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-logo #logoImg {
    width: 40%;
  }
  #work-container #main-header #main-nav #nav-picto {
    display: none;
  }
  #work-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
  }
  #work-container #main-header #main-nav #main-box .btn:first-child {
    border-radius: 120px 0 0 120px;
    background-color: #8d84f0;
  }
  #work-container #main-header #main-nav #main-box .btn:last-child {
    border-left: none;
    border-radius: 0 120px 120px 0;
    background-color: #000;
    color: #C4CDDA;
  }
  #work-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    color: #C4CDDA;
    font-size: 1.1rem;
  }
  #work-container #main-header #main-nav #nav-contact {
    display: none;
  }
  #work-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #work-container #contact-rw {
    margin-top: 100px;
  }
  #work-container #contact-rw #contact-head {
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 8rem 10rem;
    grid-template-rows: 1fr;
  }
  #work-container #contact-rw #contact-head #contact-hd-title {
    margin-right: 15px;
    align-self: end;
    grid-column: 2;
  }
  #work-container #contact-rw #contact-head #contact-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.7rem;
    height: 18px;
  }
  #work-container #contact-rw #contact-head #contact-hd-shape {
    align-self: end;
  }
  #work-container #contact-rw #contact-head #contact-hd-shape div {
    background-color: #000;
    width: 150px;
    height: 18px;
    border-radius: 50px;
  }
  #work-container #contact-rw #contact-form {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 8rem 8rem 8rem 8rem 1fr;
    grid-template-rows: 8rem;
    margin-left: 30px;
    margin-right: 30px;
  }
  #work-container #contact-rw #contact-form a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
  }
  #work-container #contact-rw #contact-form #contact-picto {
    background-color: #000;
    color: #fff;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #contact-rw #contact-form #contact-sm-behance {
    background-color: #236f51;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-sm-insta {
    background-color: #8d84f0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-sm-gram {
    background-color: #a1b6f9;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-personal {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-rows: 4rem 4rem;
    grid-template-areas: "pmail tmail" "pphone tphone";
  }
  #work-container #contact-rw #contact-form #contact-personal a {
    font-size: 1.4rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pi-mail {
    grid-area: pmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pg-mail {
    grid-area: tmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pi-phone {
    grid-area: pphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pg-phone {
    grid-area: tphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #work-container footer {
    margin: 15px 0;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
  #work-container footer #copyright {
    background-color: #000;
    width: 150px;
    padding: 6px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #work-container footer #copyright p {
    color: #C4CDDA;
    text-align: right;
    font-size: 0.6rem;
  }
}
/*  END TABLET */
/* DESKTOP */
@media only screen and (min-device-width: 1280px) {
  #about-container {
    margin-left: 40px;
    margin-right: 40px;
  }
  #about-container #main-header {
    width: 100%;
    left: 0;
    top: 0;
  }
  #about-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #about-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-logo #logoImg {
    width: 50%;
  }
  #about-container #main-header #main-nav #nav-picto {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
    position: relative;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }
  #about-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    font-size: 1.1rem;
    color: #C4CDDA;
    padding: 15px 0;
  }
  #about-container #main-header #main-nav #main-box .Ibtn-about {
    border-radius: 50px 0 0 50px;
    background-color: #8d84f0;
    border-right: 1px solid #000;
    overflow: hidden;
    padding-left: 15px;
  }
  #about-container #main-header #main-nav #main-box .btn-work {
    padding-right: 15px;
    border-radius: 0 50px 50px 0;
    background-color: #000;
    border-left: 1px solid #000;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
  }
  #about-container #main-header #main-nav #main-box .btn-work a {
    position: relative;
    z-index: 1;
  }
  #about-container #main-header #main-nav #main-box .btn-work:hover a {
    color: #000 !important;
  }
  #about-container #main-header #main-nav #main-box .btn-work::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 0 50px 50px 0;
    background-color: #C4CDDA;
    transition: width 0.5s, height 0.5s;
  }
  #about-container #main-header #main-nav #main-box .btn-work:hover::before {
    width: 200px;
    height: 200px;
  }
  #about-container #main-header #main-nav #nav-contact {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-contact a {
    padding: 3px;
    width: 110px;
    text-decoration: none;
    color: #C4CDDA;
    background-color: #000;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    border: 2px solid black;
    transition: all 0.3s 0.1s;
  }
  #about-container #main-header #main-nav #nav-contact a:hover {
    background: none;
    border: 2px solid black;
    color: #000;
  }
  #about-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #about-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #about-container #intro-rw {
    min-height: 80vh;
    margin-top: 80px;
    display: grid;
    grid-template-columns: 6rem 8fr 350px;
    grid-template-rows: 350px 350px 40px;
    grid-template-areas: "portfolio fd-img picto" "portfolio fd-img code" "portfolio quote colpal";
  }
  #about-container #intro-rw #intro-portfolio {
    grid-area: portfolio;
    background-color: #236f51;
    display: grid;
    grid-template-rows: 6rem;
  }
  #about-container #intro-rw #intro-portfolio #intro-date {
    background-color: #000;
    color: #C4CDDA;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
  }
  #about-container #intro-rw #intro-portfolio #title-content {
    border-left: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    position: relative;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-portfolio #title-content #intro-title {
    position: absolute;
    transform: rotate(-90deg) translate(0, -55%);
    font-size: 3.2rem;
    top: 45%;
    left: -55%;
    font-weight: bold;
  }
  #about-container #intro-rw #intro-fd-img {
    grid-area: fd-img;
    background-color: rgb(32, 29, 29);
    border: 2px solid black;
  }
  #about-container #intro-rw #intro-quote {
    grid-area: quote;
    background-color: #000;
    display: grid;
    grid-template-columns: 10rem 1fr;
  }
  #about-container #intro-rw #intro-quote #qt-picto {
    background-color: #a1b6f9;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-quote #qt-txt {
    width: 100%;
    background-color: #000;
    align-self: center;
    height: 25px;
    overflow: hidden;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee {
    display: inline-block;
    width: 60rem;
    overflow: hidden;
    white-space: nowrap;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p {
    color: #fff;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p:nth-child(1) {
    display: inline-block;
    animation: marquee 15s linear infinite;
    background-color: #000;
  }
  #about-container #intro-rw #intro-quote #qt-txt .marquee p:nth-child(2) {
    background-color: #000;
    display: inline-block;
    animation: marquee2 15s linear infinite;
    animation-delay: 4.5s;
  }
  @keyframes marquee {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee2 {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(-150%);
    }
  }
  #about-container #intro-rw #intro-picto {
    grid-area: picto;
    background-color: #a1b6f9;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-qrcode {
    grid-area: code;
    background-color: #8d84f0;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-qrcode a {
    text-align: center;
  }
  #about-container #intro-rw #intro-colpal {
    grid-area: colpal;
    background-color: #C4CDDA;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
  }
  #about-container #intro-rw #intro-colpal .colpal-bk {
    width: 70%;
    height: 20px;
    margin-left: 10px;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
    border: 2px solid black;
  }
  #about-container #intro-rw #intro-colpal span {
    border: 2px solid black;
    border-left: none;
    width: 5px;
    height: 20px;
    margin: 0 2px;
  }
  #about-container #infos-rw {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 5fr 6fr;
  }
  #about-container #infos-rw #infos-head {
    display: grid;
    grid-template-columns: 10rem 15rem;
    grid-template-rows: 1fr;
  }
  #about-container #infos-rw #infos-head #infos-hd-title {
    margin-right: 15px;
    align-self: start;
  }
  #about-container #infos-rw #infos-head #infos-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.9rem;
    height: 24px;
  }
  #about-container #infos-rw #infos-head #infos-hd-shape {
    align-self: start;
  }
  #about-container #infos-rw #infos-head #infos-hd-shape div {
    background-color: #000;
    width: 200px;
    height: 24px;
    border-radius: 50px;
  }
  #about-container #infos-rw #infos-form {
    display: grid;
    grid-template-columns: 4fr 4fr 1fr;
    grid-template-rows: 2rem 15rem;
    grid-template-areas: "cta cta" "leftbox rightbox";
  }
  #about-container #infos-rw #infos-form #infos-form-cta {
    grid-area: cta;
    text-align: center;
    background-color: #8d84f0;
    border: 2px solid black;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    padding-bottom: 5px;
    text-decoration: none;
    color: #000;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox {
    grid-area: leftbox;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "lastname lastname" "firstname firstname" "birth birth" "barcode numb";
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname {
    grid-area: lastname;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinInfos {
    width: 100%;
    top: 25%;
    left: 10%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-lastname .thinNumber {
    top: 25%;
    right: 2.5%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname {
    grid-area: firstname;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinInfos {
    width: 100%;
    top: 25%;
    left: 10%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-firstname .thinNumber {
    top: 25%;
    right: 2.5%;
    transform: translate(-50%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth {
    grid-area: birth;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 2px solid black;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinInfos {
    top: 25%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bd .thinNumber {
    top: 25%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinInfos {
    top: 25%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-bm .thinNumber {
    top: 25%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by {
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinInfos, #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinNumber {
    position: absolute;
    font-size: 0.6rem;
    font-weight: normal;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinInfos {
    top: 25%;
    left: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-birth .leftbox-by .thinNumber {
    top: 25%;
    right: 10%;
    transform: translate(0%, -50%);
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-barcode {
    grid-area: barcode;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    font-family: "Libre Barcode EAN13 Text", cursive;
    font-weight: normal;
    font-size: 3rem;
    letter-spacing: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-leftbox #infos-lbox-numb {
    grid-area: numb;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox {
    display: grid;
    grid-area: rightbox;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    grid-template-rows: 7.5rem 15rem;
    grid-template-areas: "picto location" "graphic graphic";
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-picto {
    grid-area: picto;
    background-color: rgb(0, 0, 0);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-picto img {
    width: 75%;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg {
    grid-area: location;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-areas: "city city" "lat long";
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg h3 {
    grid-area: city;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    margin-top: 15px;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg .lat {
    text-align: center;
    grid-area: lat;
    font-size: 0.8rem;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-pg .lon {
    text-align: center;
    grid-area: long;
    font-size: 0.8rem;
  }
  #about-container #infos-rw #infos-form #infos-form-rbox #infos-rbox-city #infos-rbox-graphic {
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    grid-area: graphic;
    background-color: #8d84f0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #infos-rw #infos-form #infos-shape {
    justify-self: flex-end;
    width: 30%;
    height: 402px;
    border-radius: 50px;
    background-color: #000;
  }
  #about-container #bio-rw {
    margin-top: 250px;
    width: 100%;
  }
  #about-container #bio-rw #infos-heading {
    margin-bottom: 50px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title {
    font-size: 3.42rem;
    line-height: 1.25;
    text-transform: uppercase;
    font-weight: bold;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p1 {
    color: #a1b6f9;
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p2 {
    width: 100%;
    text-align: justify;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p2 .nickname {
    color: #236f51;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p3 .shape {
    border: 2px solid black;
    border-radius: 100px;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    transition: all 0.3s ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .based {
    display: inline-block;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town {
    height: 100px;
    width: 430px;
    margin-left: 20px;
    display: inline-block;
    overflow: hidden;
    color: #8d84f0;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town.city-effect::after {
    position: relative;
    content: "Brussels";
    font-style: italic;
    text-decoration: line-through;
    top: 0;
    left: -50%;
    transform: translate(0, -50%);
    transition: all 400ms ease-in-out;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town.city-effect:hover::after {
    position: relative;
    top: -100px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town.city-effect::before {
    width: 100%;
    position: relative;
    content: "Paris";
    font-style: italic;
    top: 0;
    transition: all 400ms;
    top: 100px;
  }
  #about-container #bio-rw #infos-heading #infos-heading-title #infos-heading-p4 .town.city-effect:hover::before {
    top: 0;
  }
  #about-container #bio-rw #infos-bio {
    margin: 150px 100px;
  }
  #about-container #bio-rw #infos-bio p {
    font-size: 2.1rem;
    margin-bottom: 25px;
    text-align: left;
  }
  #about-container #services-rw {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10rem;
    grid-template-areas: "infos card";
  }
  #about-container #services-rw #services-ww {
    grid-area: infos;
  }
  #about-container #services-rw #services-ww .service-ww {
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "shape title" "shape pg";
  }
  #about-container #services-rw #services-ww .service-ww .ww-shape {
    grid-area: shape;
    width: 100px;
    height: 13px;
    border-radius: 50px;
    background-color: #000;
  }
  #about-container #services-rw #services-ww .service-ww .ww-title {
    margin-top: -2px;
    grid-area: title;
    grid-column: span 2;
  }
  #about-container #services-rw #services-ww .service-ww .ww-pg {
    text-align: left;
    grid-area: pg;
    margin-bottom: 50px;
  }
  #about-container #services-rw #services-card {
    grid-area: card;
    display: grid;
    align-self: start;
    background-color: #a1b6f9;
    border: 2px solid black;
    height: 350px;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: 2rem;
    grid-template-areas: "shape title" "shape list";
    padding: 50px;
  }
  #about-container #services-rw #services-card #services-c-shape {
    grid-area: shape;
    background-color: #000;
    width: 100px;
    height: 13px;
    border-radius: 100px;
  }
  #about-container #services-rw #services-card #services-c-title {
    grid-area: title;
    margin-top: -4px;
  }
  #about-container #services-rw #services-card #services-c-list {
    grid-area: list;
    grid-column: span 2;
    border-bottom: 2px solid black;
  }
  #about-container #services-rw #services-card #services-c-list li {
    list-style: none;
  }
  #about-container #contact-rw {
    margin-top: 100px;
  }
  #about-container #contact-rw #contact-head {
    width: 100%;
    display: grid;
    grid-template-columns: 10rem 15rem;
  }
  #about-container #contact-rw #contact-head #contact-hd-title {
    margin-right: 15px;
    align-self: end;
  }
  #about-container #contact-rw #contact-head #contact-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.9rem;
    height: 24px;
  }
  #about-container #contact-rw #contact-head #contact-hd-shape {
    align-self: end;
  }
  #about-container #contact-rw #contact-head #contact-hd-shape div {
    background-color: #000;
    width: 200px;
    height: 24px;
    border-radius: 50px;
  }
  #about-container #contact-rw #contact-form {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 8rem 8rem 8rem 8rem 2fr 1fr;
    grid-template-rows: 8rem;
  }
  #about-container #contact-rw #contact-form a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
  }
  #about-container #contact-rw #contact-form #contact-picto {
    background-color: #000;
    color: #fff;
    grid-column: 2;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about-container #contact-rw #contact-form #contact-sm-behance {
    background-color: #236f51;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-sm-insta {
    background-color: #8d84f0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-sm-gram {
    background-color: #a1b6f9;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #about-container #contact-rw #contact-form #contact-personal {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-rows: 4rem 4rem;
    grid-template-areas: "pmail tmail" "pphone tphone";
  }
  #about-container #contact-rw #contact-form #contact-personal a {
    font-size: 1.6rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pi-mail {
    grid-area: pmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pg-mail {
    grid-area: tmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pi-phone {
    grid-area: pphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
  }
  #about-container #contact-rw #contact-form #contact-personal .contact-pg-phone {
    grid-area: tphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #about-container footer {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
  #about-container footer #copyright {
    background-color: #000;
    width: 150px;
    padding: 6px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #about-container footer #copyright p {
    color: #C4CDDA;
    text-align: right;
    font-size: 0.6rem;
  }
  #project-container #main-header {
    width: 100%;
    left: 0;
    top: 0;
  }
  #project-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #project-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-logo #logoImg {
    width: 50%;
  }
  #project-container #main-header #main-nav #nav-picto {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
    position: relative;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }
  #project-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    font-size: 1.1rem;
    color: #C4CDDA;
    padding: 15px 0;
  }
  #project-container #main-header #main-nav #main-box .btn-about {
    border-radius: 50px 0 0 50px;
    background-color: #000;
    border-right: 1px solid #000;
    overflow: hidden;
    padding-left: 15px;
  }
  #project-container #main-header #main-nav #main-box .btn-about a {
    position: relative;
    z-index: 1;
  }
  #project-container #main-header #main-nav #main-box .btn-about:hover a {
    color: #000 !important;
  }
  #project-container #main-header #main-nav #main-box .Wbtn-work {
    padding-right: 15px;
    border-radius: 0 50px 50px 0;
    background-color: #8d84f0;
    border-left: 1px solid #000;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
  }
  #project-container #main-header #main-nav #main-box .btn-about::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    width: 0;
    height: 0;
    border-radius: 50px 0 0 50px;
    background-color: #C4CDDA;
    transition: width 0.5s, height 0.5s;
  }
  #project-container #main-header #main-nav #main-box .btn-about:hover::before {
    width: 200px;
    height: 200px;
  }
  #project-container #main-header #main-nav #nav-contact {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-contact a {
    padding: 3px;
    width: 110px;
    text-decoration: none;
    color: #C4CDDA;
    background-color: #000;
    border-radius: 50px;
    border: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s 0.1s;
  }
  #project-container #main-header #main-nav #nav-contact a:hover {
    background: none;
    border: 2px solid black;
    color: #000;
  }
  #project-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #project-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #project-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #project-container #footer-rw {
    width: 100%;
    display: grid;
    -moz-column-gap: 20px;
         column-gap: 20px;
    margin: 100px 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "previous work work work work next";
  }
  #project-container #footer-rw #letswork {
    width: 100%;
    grid-area: work;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 50px;
    border: 2px solid black;
    background-color: #000;
    color: #FFF;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    border-radius: 53px;
  }
  #project-container #footer-rw #letswork #footer-heading {
    font-size: 9em;
  }
  #project-container #footer-rw #letswork #cta-contact {
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    position: absolute;
    background: linear-gradient(90deg, rgb(35, 111, 81) 0%, rgb(161, 182, 249) 30%, rgb(141, 132, 240) 60%, rgb(196, 205, 218) 90%);
    border: 2px solid black;
    text-align: center;
    padding: 15px 35px;
    border-radius: 100PX;
    rotate: -6deg;
    font-size: 4rem;
    opacity: 0.95;
    font-size: 4rem;
    transition: all 0.9s ease-in-out;
    box-sizing: content-box;
  }
  #project-container #footer-rw #letswork #cta-contact:hover {
    transform: rotate(360deg);
    padding: 30px 70px;
  }
  #project-container #footer-rw #letswork #cta-contact a {
    text-decoration: none;
    color: #FFF;
  }
  #project-container #footer-rw #previous-work {
    width: 100%;
    grid-area: previous;
    align-content: center;
    text-align: center;
  }
  #project-container #footer-rw #previous-work a {
    text-decoration: none;
    color: #000;
    font-size: 1.3rem;
    transition: all 0.3s ease-in-out;
    padding: 25px;
  }
  #project-container #footer-rw #previous-work a:hover {
    margin-right: 25px;
  }
  #project-container #footer-rw #next-work {
    grid-area: next;
    align-content: center;
    text-align: center;
  }
  #project-container #footer-rw #next-work a {
    text-decoration: none;
    color: #000;
    font-size: 1.3rem;
    transition: all 0.3s ease-in-out;
    padding: 25px;
  }
  #project-container #footer-rw #next-work a:hover {
    margin-left: 25px;
  }
  #work-container {
    margin-left: 40px;
    margin-right: 40px;
  }
  #work-container #main-header {
    width: 100%;
    left: 0;
    top: 0;
  }
  #work-container #main-header #main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px;
  }
  #work-container #main-header #main-nav #nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-logo #logoImg {
    width: 50%;
  }
  #work-container #main-header #main-nav #nav-picto {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #main-box {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #main-box .btn {
    padding: 10px;
    list-style: none;
    width: 100px;
    border: 2px solid black;
    position: relative;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }
  #work-container #main-header #main-nav #main-box .btn a {
    text-decoration: none;
    font-size: 1.1rem;
    color: #C4CDDA;
    padding: 15px 0;
  }
  #work-container #main-header #main-nav #main-box .btn-about {
    border-radius: 50px 0 0 50px;
    background-color: #000;
    border-right: 1px solid #000;
    overflow: hidden;
    padding-left: 15px;
  }
  #work-container #main-header #main-nav #main-box .btn-about a {
    position: relative;
    z-index: 1;
  }
  #work-container #main-header #main-nav #main-box .btn-about:hover a {
    color: #000 !important;
  }
  #work-container #main-header #main-nav #main-box .Wbtn-work {
    padding-right: 15px;
    border-radius: 0 50px 50px 0;
    background-color: #8d84f0;
    border-left: 1px solid #000;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
  }
  #work-container #main-header #main-nav #main-box .btn-about::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    width: 0;
    height: 0;
    border-radius: 50px 0 0 50px;
    background-color: #C4CDDA;
    transition: width 0.5s, height 0.5s;
  }
  #work-container #main-header #main-nav #main-box .btn-about:hover::before {
    width: 200px;
    height: 200px;
  }
  #work-container #main-header #main-nav #nav-contact {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-contact a {
    padding: 3px;
    width: 110px;
    text-decoration: none;
    color: #C4CDDA;
    background-color: #000;
    border-radius: 50px;
    border: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s 0.1s;
  }
  #work-container #main-header #main-nav #nav-contact a:hover {
    background: none;
    border: 2px solid black;
    color: #000;
  }
  #work-container #main-header #main-nav #nav-colpal {
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #main-header #main-nav #nav-colpal .colpal {
    list-style: none;
    margin-left: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-one {
    background: linear-gradient(-45deg, #a1b6f9 50%, #236f51 50%);
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-two {
    background: linear-gradient(-45deg, #F8EE00 50%, #9F359F 50%);
  }
  #work-container #main-header #main-nav #nav-colpal .cpl-three {
    background: linear-gradient(-45deg, #99f7ab 50%, #FEA9C6 50%);
  }
  #work-container #work-rw {
    margin-top: 100px;
  }
  #work-container #work-rw #work-head {
    width: 100%;
    display: grid;
    grid-template-columns: 10rem 15rem;
    margin-bottom: 50px;
  }
  #work-container #work-rw #work-head #work-hd-title {
    margin-right: 15px;
    align-self: end;
  }
  #work-container #work-rw #work-head #work-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.9rem;
    height: 24px;
  }
  #work-container #work-rw #work-head #work-hd-shape {
    align-self: end;
  }
  #work-container #work-rw #work-head #work-hd-shape div {
    background-color: #000;
    width: 200px;
    height: 24px;
    border-radius: 50px;
  }
  #work-container #work-rw #project-summary {
    background: radial-gradient(circle, #236f51 3%, #a1b6f9 15%, #8d84f0 25%, #C4CDDA 42%);
  }
  #work-container #work-rw #project-summary .art-projects {
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
  }
  #work-container #work-rw #project-summary .art-projects:hover {
    border-bottom: 2px solid black;
    border-top: 2px solid black;
  }
  #work-container #work-rw #project-summary .art-projects .projectNbr {
    text-align: center;
    width: 25px;
    height: 25px;
    border: 2px solid black;
    border-radius: 50%;
    margin-right: 15px;
  }
  #work-container #work-rw #project-summary .art-projects .project-addIn {
    font-size: 0.6rem;
    transform: rotate(-90deg);
  }
  #work-container #work-rw #project-summary .art-projects .project-title {
    font-size: 5rem;
    text-transform: uppercase;
  }
  #work-container #work-rw #project-summary .art-projects .projectHl {
    display: none;
  }
  #work-container #contact-rw {
    margin-top: 100px;
  }
  #work-container #contact-rw #contact-head {
    width: 100%;
    display: grid;
    grid-template-columns: 10rem 15rem;
  }
  #work-container #contact-rw #contact-head #contact-hd-title {
    margin-right: 15px;
    align-self: end;
  }
  #work-container #contact-rw #contact-head #contact-hd-title h3 {
    text-align: center;
    border: 2px solid black;
    border-radius: 50px;
    font-size: 0.9rem;
    height: 24px;
  }
  #work-container #contact-rw #contact-head #contact-hd-shape {
    align-self: end;
  }
  #work-container #contact-rw #contact-head #contact-hd-shape div {
    background-color: #000;
    width: 200px;
    height: 24px;
    border-radius: 50px;
  }
  #work-container #contact-rw #contact-form {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 8rem 8rem 8rem 8rem 2fr 1fr;
    grid-template-rows: 8rem;
  }
  #work-container #contact-rw #contact-form a {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
  }
  #work-container #contact-rw #contact-form #contact-picto {
    background-color: #000;
    color: #fff;
    grid-column: 2;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #work-container #contact-rw #contact-form #contact-sm-behance {
    background-color: #236f51;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-sm-insta {
    background-color: #8d84f0;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-sm-gram {
    background-color: #a1b6f9;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }
  #work-container #contact-rw #contact-form #contact-personal {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-rows: 4rem 4rem;
    grid-template-areas: "pmail tmail" "pphone tphone";
  }
  #work-container #contact-rw #contact-form #contact-personal a {
    font-size: 1.6rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pi-mail {
    grid-area: pmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pg-mail {
    grid-area: tmail;
    border-top: 2px solid black;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pi-phone {
    grid-area: pphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
  }
  #work-container #contact-rw #contact-form #contact-personal .contact-pg-phone {
    grid-area: tphone;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  #work-container footer {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
  #work-container footer #copyright {
    background-color: #000;
    width: 150px;
    padding: 6px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #work-container footer #copyright p {
    color: #C4CDDA;
    text-align: right;
    font-size: 0.6rem;
  }
  #project-container #project-nav #second-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-right: 50px;
    margin-left: 50px;
  }
  #project-container #project-nav #second-nav #back-all-project button, #project-container #project-nav #second-nav #next-project button {
    border: none;
    background: none;
    color: #000;
    text-align: center;
    font-size: 1.5rem;
    cursor: pointer;
  }
  #project-container #project-nav #second-nav #back-all-project a, #project-container #project-nav #second-nav #next-project a {
    border: none;
    background: none;
    text-align: center;
    font-size: 1.5rem;
    cursor: pointer;
    color: #000;
    text-decoration: none;
  }
  #project-container #project-nav #second-nav #project-cat p {
    text-align: center;
    font-size: 1.5rem;
    padding: 0 15px 5px 15px;
    border: 2px solid black;
    border-radius: 50px;
  }
  #project-container #Inproject-rw {
    width: 100%;
    display: grid;
    -moz-column-gap: 20px;
         column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 0 40px;
    grid-template-rows: 550px auto auto;
    grid-template-areas: "tt tt tt tt tt tt tt tt tt tt tt tt" "in in in in in in in in in in in in " "cb cb cb cb ft ft ft ft cp cp cp cp";
  }
  #project-container #Inproject-rw #header-project {
    grid-area: tt;
    color: #000;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    border: 2px solid black;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    border-radius: 25px;
  }
  #project-container #Inproject-rw #header-project .projectDate {
    width: 100%;
    text-align: center;
    justify-content: center;
    align-content: center;
    width: 160px;
    height: 45px;
    border: 2px solid black;
    border-radius: 5px;
    font-size: 1rem;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  }
  #project-container #Inproject-rw #header-project .projectCat {
    text-align: center;
    width: 500px;
    height: 25px;
    font-size: 1.8rem;
    text-decoration: underline;
    text-transform: uppercase;
  }
  #project-container #Inproject-rw #header-project .project-title {
    font-size: 8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  #project-container #Inproject-rw #header-project .projectNbr {
    text-align: center;
    width: 25px;
    height: 25px;
    border: 2px solid black;
    border-radius: 50%;
    margin-right: 15px;
  }
  #project-container #Inproject-rw #header-project .project-addIn {
    font-size: 0.8rem;
    transform: rotate(-90deg);
  }
  #project-container #Inproject-rw #project-infos {
    color: #000;
    grid-area: in;
    grid-column: 1/span 12;
    margin-bottom: 75px;
  }
  #project-container #Inproject-rw #project-infos #project-heading {
    font-size: 1.8rem;
  }
  #project-container #Inproject-rw #project-infos #project-pg {
    margin-top: 15px;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
  }
  #project-container #Inproject-rw #project-colpal {
    grid-area: cp;
  }
  #project-container #Inproject-rw #project-colpal #heading-colpal {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal {
    width: 100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal div {
    height: 60px;
    width: 130px;
    display: flex;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: red;
    border: 2px solid black;
    font-size: 0.9rem;
    margin: 3px;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal div p {
    margin-top: 3px;
    font-size: 0.5rem;
  }
  #project-container #Inproject-rw #project-colpal .block-colpal div h3 {
    text-transform: uppercase;
  }
  #project-container #Inproject-rw #project-colpal #daemon-colpal div:nth-child(1) {
    background-color: #f59731;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #daemon-colpal div:nth-child(2) {
    background-color: #aa829b;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #daemon-colpal div:nth-child(3) {
    background-color: #000;
    border: 2px solid black;
    color: #fff;
  }
  #project-container #Inproject-rw #project-colpal #kinnitty-colpal div:nth-child(1) {
    background-color: #a80402;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #kinnitty-colpal div:nth-child(2) {
    background-color: #B58454;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #kinnitty-colpal div:nth-child(3) {
    background-color: #BD9A98;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #bm-colpal div:nth-child(1) {
    background-color: #ffd400;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #bm-colpal div:nth-child(2) {
    background-color: #0540c4;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #bm-colpal div:nth-child(3) {
    background-color: #c19af7;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #immanent-colpal div:nth-child(1) {
    background-color: #001aff;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #immanent-colpal div:nth-child(2) {
    background-color: #ff00c9;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #immanent-colpal div:nth-child(3) {
    background-color: #21ff00;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(1) {
    background-color: #fc0000;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(2) {
    background-color: #ff8236;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(3) {
    background-color: #ac60ef;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(4) {
    background-color: #00cf8b;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #corrosif-colpal div:nth-child(5) {
    background-color: #e5eae9;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(1) {
    background-color: #00ff06;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(2) {
    background-color: #a090e1;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(3) {
    background-color: #ffa0ff;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(4) {
    background-color: #ff8e3f;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wash-colpal div:nth-child(5) {
    background-color: #493e77;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(1) {
    background-color: #dedcdb;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(2) {
    background-color: #e83a6c;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(3) {
    background-color: #f28d3b;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(4) {
    background-color: #6dbb7c;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(5) {
    background-color: #8ebcd9;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #fdc-colpal div:nth-child(6) {
    background-color: #9896c9;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(1) {
    background-color: #E52647;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(2) {
    background-color: #F3E8DE;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(3) {
    background-color: #143F3F;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #galatea-colpal div:nth-child(4) {
    background-color: #E7E8F3;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-album-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-album-colpal div:nth-child(1) {
    background-color: #DB6149;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wptc-album-colpal div:nth-child(2) {
    background-color: #111214;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(1) {
    background-color: #3C6EF3;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(2) {
    background-color: #5BE1FE;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(3) {
    background-color: #A7BEFF;
    border: 2px solid black;
  }
  #project-container #Inproject-rw #project-colpal #wptc-ep-colpal div:nth-child(4) {
    background-color: #D794FF;
    border: 2px solid black;
    margin: 0 5px;
  }
  #project-container #Inproject-rw #project-collab {
    grid-area: cb;
    grid-column: 1/span 12;
  }
  #project-container #Inproject-rw #project-collab #heading-collab {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  #project-container #Inproject-rw .project-font {
    grid-area: ft;
  }
  #project-container #Inproject-rw .project-font #heading-font {
    font-size: 1.8rem;
  }
  #project-container #Inproject-rw .project-font .symbol-font {
    margin-top: 15px;
    font-size: 1.2rem;
  }
  #project-container #Inproject-rw .project-font .name-font {
    text-decoration: underline;
    font-size: 0.9rem;
  }
  #project-container #assets-rw {
    margin-top: 100px;
  }
  #project-container #assets-rw .asset_c12 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "one one one one" "two two three three" "four four four four" "five five five five" "six six six six" "seven seven seven seven" "height height height height";
  }
  #project-container #assets-rw .asset_c12 .asset_one {
    grid-area: one;
  }
  #project-container #assets-rw .asset_c12 .asset_one img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_two {
    grid-area: two;
  }
  #project-container #assets-rw .asset_c12 .asset_two img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_three {
    grid-area: three;
  }
  #project-container #assets-rw .asset_c12 .asset_three img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_four {
    grid-area: four;
  }
  #project-container #assets-rw .asset_c12 .asset_four img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_five {
    grid-area: five;
  }
  #project-container #assets-rw .asset_c12 .asset_five img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_six {
    grid-area: six;
  }
  #project-container #assets-rw .asset_c12 .asset_six img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_seven {
    grid-area: seven;
  }
  #project-container #assets-rw .asset_c12 .asset_seven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_c12 .asset_height {
    grid-area: height;
  }
  #project-container #assets-rw .asset_c12 .asset_height img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "one one one one" "two two two two" "three three three three" "four four four four" "five five five five" "six six six six" "seven seven seven seven" "eight eight eight eight" "nine nine nine nine" "ten ten ten ten" "eleven eleven eleven eleven" "twelve twelve twelve twelve" "thirteen thirteen thirteen thirteen";
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_one {
    grid-area: one;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_one img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_two {
    grid-area: two;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_two img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_three {
    grid-area: three;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_three img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_four {
    grid-area: four;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_four img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_five {
    grid-area: five;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_five img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_six {
    grid-area: six;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_six img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_seven {
    grid-area: seven;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_seven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_eight {
    grid-area: eight;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_eight img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_nine {
    grid-area: nine;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_nine img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_ten {
    grid-area: ten;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_ten img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_eleven {
    grid-area: eleven;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_eleven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_twelve {
    grid-area: twelve;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_twelve img {
    width: 100%;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_thirteen {
    grid-area: thirteen;
  }
  #project-container #assets-rw .asset_fdc_2022 .asset_thirteen img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "one one one one" "two two two two" "three three three three" "four four four four" "five five five five" "six six six six" "seven seven seven seven" "eight eight eight eight" "nine nine nine nine" "ten ten ten ten" "eleven eleven eleven eleven" "twelve twelve twelve twelve" "thirteen thirteen thirteen thirteen";
  }
  #project-container #assets-rw .asset_img .asset_one {
    grid-area: one;
  }
  #project-container #assets-rw .asset_img .asset_one img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_two {
    grid-area: two;
  }
  #project-container #assets-rw .asset_img .asset_two img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_three {
    grid-area: three;
  }
  #project-container #assets-rw .asset_img .asset_three img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_four {
    grid-area: four;
  }
  #project-container #assets-rw .asset_img .asset_four img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_five {
    grid-area: five;
  }
  #project-container #assets-rw .asset_img .asset_five img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_six {
    grid-area: six;
  }
  #project-container #assets-rw .asset_img .asset_six img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_seven {
    grid-area: seven;
  }
  #project-container #assets-rw .asset_img .asset_seven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_eight {
    grid-area: eight;
  }
  #project-container #assets-rw .asset_img .asset_eight img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_nine {
    grid-area: nine;
  }
  #project-container #assets-rw .asset_img .asset_nine img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_ten {
    grid-area: ten;
  }
  #project-container #assets-rw .asset_img .asset_ten img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_eleven {
    grid-area: eleven;
  }
  #project-container #assets-rw .asset_img .asset_eleven img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_twelve {
    grid-area: twelve;
  }
  #project-container #assets-rw .asset_img .asset_twelve img {
    width: 100%;
  }
  #project-container #assets-rw .asset_img .asset_thirteen {
    grid-area: thirteen;
  }
  #project-container #assets-rw .asset_img .asset_thirteen img {
    width: 100%;
  }
}
/*  END DESKTOP *//*# sourceMappingURL=style.css.map */