/* Path: ALL */

html, body{
  /* margin: 0;
  padding: 0;
  width: 100%;
  height: 95%;
  overflow: hidden; */
  scroll-behavior: smooth;
  background-color: black; 
  overflow-y: scroll;
  overflow-x: hidden;

  cursor: url("/images/cursor_base.png"), auto;
}

:hover{
  cursor: url("/images/cursor_hover.png"), auto;
}


p{
  font-size: 1.5rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
}

.header{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.header #headerContent{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 95.75vw;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);

}

.header h2{
  font-size: 1.5rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  transition: 0.5s;
}

.header h2:hover{
  transform: scale(1.1);
}

a:link { text-decoration: none; color : white;}

a:visited { text-decoration: none; color : white; }

a:hover { text-decoration: none; color : rgb(117, 117, 117);}

a:active { text-decoration: none; color : rgb(94, 99, 122); }

/* Path: index.html */

#projects{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98vh;
  background-image: url("/images/content/misc/misc_crop.jpg");
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#projects h1{
  font-size: 9rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  opacity: 1;
  position: relative;
  transition: 0.5s;
  animation-timing-function: ease-out;
  animation-name: projectIn;
  animation-duration: 1s;
  animation-delay: .3s;
}

#projects h1:hover{
  transform: scale(1.1);
}

@keyframes projectIn {
  0%   {top: -50px; opacity: 0;}
  70%  {top: 0%; opacity: 0.7;}
  100% {top: 0%; opacity: 1;}
}

/* Path: projects.html */

#scrollable{
  position: relative;
  height: 87vh;
}

#content{
  display: grid;
  grid-template-columns: repeat(9, 1fr);  
  grid-template-rows: repeat(7, 1fr);
  row-gap: 5%;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
}

body::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

.container1 {
  position: relative;
  grid-column: 2 / 5;
  grid-row: 2 / 4;
}

.container2 {
  position: relative;
  grid-column: 6 / 9;
  grid-row: 2 / 4;
}

.container3 {
  position: relative;
  grid-column: 2 / 5;
  grid-row: 4 / 6;
}

.container4 {
  position: relative;
  grid-column: 6 / 9;
  grid-row: 4 / 6;
}

.container5 {
  position: relative;
  grid-column: 2 / 5;
  grid-row: 6 / 8;
}

.container6 {
  position: relative;
  grid-column: 6 / 9;
  grid-row: 6 / 8;
}

.coverImage .image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  animation-timing-function: ease-out;
  animation-name: projectsLinksIn;
  animation-duration: .75s;
}


@keyframes projectsLinksIn {
  0%   {left: -50px; opacity: 0;}
  100% {left: 0%; opacity: 1;}
}
@keyframes projectsHoverIn {
  0%   {left: -50px;}
  100% {left: 0%;}
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, .8);
  animation-timing-function: ease-out;
  animation-name: projectsHoverIn;
  animation-duration: .75s;
  backdrop-filter: blur(20px);

  /* cursor: crosshair; */
  cursor: url("/images/cursor_hover.png"), crosshair;
}

.overlay:hover {
  opacity: 0.7;
  border: #ffffff;
  border-style: solid;
  border-width: 1px;
  transform: scale(1.01);
  /* transform: scale(.9); */
}

#coverImageObj .image {
  transition: .5s ease;
}

.container1:hover #coverImageObj .image {
  transform: scale(1.01);
  filter: blur(3px);
}

.container2:hover #coverImageObj .image {
  transform: scale(1.01);
  filter: blur(3px);
}

.container3:hover #coverImageObj .image {
  transform: scale(1.01);
  filter: blur(3px);
}

.container4:hover #coverImageObj .image {
  transform: scale(1.01);
  filter: blur(3px);
}

.container5:hover #coverImageObj .image {
  transform: scale(1.01);
  filter: blur(3px);
}

.container6:hover #coverImageObj .image {
  transform: scale(1.01);
  filter: blur(3px);
}


.text {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Encode Sans Condensed', sans-serif;
}

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: transparent;
  padding-top: 2%;
}

/* Path: about.html */
@media only screen and (orientation : landscape){
  #textAbout{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10%;
  /* height: 88vh; */
}
}
@media only screen and (orientation : portrait){
  #textAbout{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20%;
  /* height: 88vh; */
}
.mainAbout #textAbout p{
  font-size: 2rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 2%;
  margin-bottom: 0%;
}
}

.mainAbout #textAbout p{
  font-size: 1.5rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 2%;
  margin-bottom: 0%;
}

.mainAbout #textAbout #title{
  font-size: 3rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 3%;
  margin-bottom: 0%;
}

.mainAbout #textAbout #contact{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 1rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 0%;
  margin-bottom: 0%;
}

.mainAbout #textAbout a{
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-left: 5%;
  margin-right: 5%;
}

#title{
  font-size: 2rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-top: 3%;
  margin-bottom: 1%;
}



/* .mainAbout #text h1 {
  font-size: 5rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-top: 3%;
  margin-bottom: 0%;
} */

/* #textProject::-webkit-scrollbar { 
  display: none;  Safari and Chrome
} */

#textProject{
  /* overflow-y: scroll;
  overflow-x: hidden; */
  height: 100vh;
}

#textProject p{
  font-size: 1.5rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 0%;
  margin-bottom: 0%;
  text-align: center;
}

#textProject h1 {
  font-size: 2rem;
  color: white;
  font-family: 'Encode Sans Condensed', sans-serif;
  margin-top: 3%;
  margin-bottom: 0%;
  text-align: center;

}

@media only screen and (orientation : landscape) {

#medias{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 2rem;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: .5%;
}

#medias .mediaCrp1{
  grid-column: 1 / 5;
  grid-row: 2 / 6;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaCrp1 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaCrp1{
  grid-column: 1 / 5;
  grid-row: 1 / 2;
}

#medias .mediaCrp2{
  grid-column: 5 / 9;
  grid-row: 2 / 6;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaCrp2 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaCrp2{
  grid-column: 5 / 9;
  grid-row: 1 / 2;
}

#medias .mediaCrp3{
  grid-column: 9 / 13;
  grid-row: 2 / 6;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaCrp3 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaCrp3{
  grid-column: 9 / 13;
  grid-row: 1 / 2;
}


#medias .mediaCrp4{
  grid-column: 1 / 3;
  grid-row: 6 / 13;
  height: 95%;
  width: auto;
  margin: 0%;
  transition: 1s;
}

#medias .mediaCrp4:hover{
  transform: scale(1.05);
}

#medias .mediaCrp5{
  grid-column: 6 / 9;
  grid-row: 6 / 9;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaCrp5:hover{
  transform: scale(1.05);
}

#medias .mediaCrp6{
  grid-column: 9 / 13;
  grid-row: 6 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaCrp7{
  grid-column: 3 / 9;
  grid-row: 9 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaCrp7:hover{
  transform: scale(1.05);
}

#medias .mediaCrp8{
  grid-column: 3 / 6;
  grid-row: 6 / 9;
  height: 100%;
  width: 90%;
  margin-left: 5%;
  transition: 1s;
}

#medias .mediaCrp8:hover{
  transform: scale(1.05);
}

/* medias orkan */

#medias .mediaOrkan1{
  grid-column: 3 / 7;
  grid-row: 2 / 6;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaOrkan1{
  grid-column: 3 / 7;
  grid-row: 1 / 2;
}

#medias .mediaOrkan2{
  grid-column: 7 / 11;
  grid-row: 2 / 6;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaOrkan2{
  grid-column: 7 / 11;
  grid-row: 1 / 2;
}

#medias .mediaOrkan3{
  grid-column: 5 / 9;
  grid-row: 6 / 10;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaOrkan3:hover{
  transform: scale(1.05);
}

#medias .mediaHyphen1{
  grid-column: 4 / 10;
  grid-row: 1 / 7;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

/* projets motion */

#medias .mediaMotion1{
  grid-column: 2 / 7;
  grid-row: 8 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMotion1{
  grid-column: 2 / 7;
  grid-row: 13 / 14;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMotion1 p{
  font-size: 1.5em;
  font-weight: 300;
  color: #fff;
  text-align: center;
  /* margin-top: 10%;
  margin-bottom: 10%; */
}

#medias .mediaMotion2{
  grid-column: 7 / 12;
  grid-row: 8 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMotion2:hover{
  transform: scale(1.05);
}

#medias .textMediaMotion2{
  grid-column: 7 / 12;
  grid-row: 13 / 14;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMotion2 p{
  font-size: 1.5em;
  font-weight: 300;
  color: #fff;
  text-align: center;
  /* margin-top: 10%;
  margin-bottom: 10%; */
}

#medias .mediaMotion3{
  grid-column: 4 / 6;
  grid-row: 1 / 4;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMotion4{
  grid-column: 6 / 8;
  grid-row: 1 / 4;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMotion5{
  grid-column: 4 / 6;
  grid-row: 4 / 7;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMotion6{
  grid-column: 6 / 8;
  grid-row: 4 / 7;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMotion7{
  grid-column: 8 / 10;
  grid-row: 1 / 4;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMotion8{
  grid-column: 8 / 10;
  grid-row: 4 / 7;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMotion3{
  grid-column: 4 / 10;
  grid-row: 7 / 8;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMotion3 p{
  font-size: 1.5em;
  font-weight: 300;
  color: #fff;
  text-align: center;
}


/* projets AR */

#medias .mediaAR1{
  grid-column: 7 / 10;
  grid-row: 7 / 12;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaAR1{
  grid-column: 3 / 7;
  grid-row: 8 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaAR1 p{
  font-size: 1.5em;
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin-top: 10%;
  margin-bottom: 10%;
}

#medias .mediaAR2a{
  grid-column: 4 / 5;
  grid-row: 1 / 4;
  margin: 0%;
  transition: 1s;
}

#medias .mediaAR2a:hover{
  transform: scale(1.05);
}

#medias .mediaAR2b{
  grid-column: 5 / 6;
  grid-row: 1 / 4;
  margin: 0%;
  transition: 1s;
}

#medias .mediaAR2b:hover{
  transform: scale(1.05);
}

#medias .mediaAR2c{
  grid-column: 4 / 5;
  grid-row: 4 / 7;
  margin: 0%;
  transition: 1s;
}

#medias .mediaAR2c:hover{
  transform: scale(1.05);
}

#medias .mediaAR2d{
  grid-column: 5 / 6;
  grid-row: 4 / 7;
  margin: 0%;
  transition: 1s;
}

#medias .mediaAR2d:hover{
  transform: scale(1.05);
}

#medias .mediaAR2e{
  grid-column: 6 / 7;
  grid-row: 1 / 4;
  margin: 0%;
  transition: 1s;
}

#medias .mediaAR2e:hover{
  transform: scale(1.05);
}

#medias .mediaAR2f{
  grid-column: 6 / 7;
  grid-row: 4 / 7;
  margin: 0%;
  transition: 1s;
}

#medias .mediaAR2f:hover{
  transform: scale(1.05);
}

#medias .textMediaAR2{
  grid-column: 7 / 10;
  grid-row: 3 / 7;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaAR2 p{
  font-size: 1.5em;
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin-top: 10%;
  margin-bottom: 10%;
}

/* projets misc */

#medias .mediaMisc2{
  grid-column: 4 / 7;
  grid-row: 1 / 3;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: .5s;
}

#medias .textMediaMisc2 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc2{
  grid-column: 4 / 7;
  grid-row: 3 / 4;
}

#medias .mediaMisc1{
  grid-column: 7 / 10;
  grid-row: 4 / 8;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: .5s;
}

#medias .textMediaMisc1 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc1{
  grid-column: 7 / 10;
  grid-row: 8 / 9;
}

#medias .mediaMisc3a{
  grid-column: 4 / 6;
  grid-row: 6 / 8;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMisc3b{
  grid-column: 6 / 7;
  grid-row: 6 / 8;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMisc3c{
  grid-column: 4 / 7;
  grid-row: 4 / 6;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .mediaMisc3a:hover{
  transform: scale(1.05);
}

#medias .mediaMisc3b:hover{
  transform: scale(1.05);
}

#medias .mediaMisc3c:hover{
  transform: scale(1.05);
}

#medias .textMediaMisc3 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc3{
  grid-column: 4 / 7;
  grid-row: 8 / 9;
}

#medias .mediaMisc4c{
  grid-column: 7 / 9;
  grid-row: 1 / 3;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}
#medias .mediaMisc4b{
  grid-column: 9 / 10;
  grid-row: 1 / 2;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}
#medias .mediaMisc4a{
  grid-column: 9 / 10;
  grid-row: 2 / 3;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMisc4 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc4{
  grid-column: 7 / 10;
  grid-row: 3 / 4;
}

#medias .mediaMisc4a:hover{
  transform: scale(1.05);
}

#medias .mediaMisc4b:hover{
  transform: scale(1.05);
}

#medias .mediaMisc4c:hover{
  transform: scale(1.05);
}

#medias .mediaMisc5{
  grid-column: 4 / 7;
  grid-row: 9 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMisc5 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc5{
  grid-column: 4 / 7;
  grid-row: 13 / 14;
}

#medias .mediaMisc6{
  grid-column: 7 / 10;
  grid-row: 9 / 13;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMisc6 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc6{
  grid-column: 7 / 10;
  grid-row: 13 / 14;
}

#medias .mediaMisc7{
  grid-column: 5 / 9;
  grid-row: 14 / 20;
  height: 100%;
  width: 100%;
  margin: 0%;
  transition: 1s;
}

#medias .textMediaMisc7 p{
  color: white;
  position: relative;
  font-size: medium;
}

#medias .textMediaMisc7{
  grid-column: 3 / 11;
  grid-row: 20 / 21;
}

/* About */

.mainAbout{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;

  /* overflow: hidden; */
}

}


@media only screen and (orientation: portrait) {
  .container1 {grid-column: 1 / 10; grid-row: 1 / 3;}
  .container2 {grid-column: 1 / 10; grid-row: 3 / 5;}
  .container3 {grid-column: 1 / 10; grid-row: 5 / 7;}
  .container4 {grid-column: 1 / 10; grid-row: 7 / 9;}
  .container5 {grid-column: 1 / 10; grid-row: 9 / 11;}
  .container6 {grid-column: 1 / 10; grid-row: 11 / 13;}

  #medias{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(35, 1fr);
    grid-gap: 2rem;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: .5%;
  }

/* projets crp */

  #medias .mediaCrp2{grid-column: 1 / 13; grid-row: 2 / 8; height: 100%; width: 100%; margin: 0%;}
  #medias .textMediaCrp2 p{color: white; position: relative; font-size: medium;}
  #medias .textMediaCrp2{grid-column: 1 / 13; grid-row: 1 / 2;}

  #medias .mediaCrp1{grid-column: 1 / 13; grid-row: 9 / 15; height: 100%; width: 100%; margin: 0%;}
  #medias .textMediaCrp1 p{color: white; position: relative; font-size: medium;}  
  #medias .textMediaCrp1{grid-column: 1 / 13; grid-row: 8 / 9;}

  #medias .mediaCrp3{grid-column: 1 / 13; grid-row: 16 / 22; height: 100%; width: 100%; margin: 0%;}
  #medias .textMediaCrp3 p{color: white; position: relative; font-size: medium;}
  #medias .textMediaCrp3{grid-column: 1 / 13; grid-row: 15 / 16;}
  
  #medias .mediaCrp7{grid-column: 1 / 13; grid-row: 22 / 27; height: 100%; width: 100%; margin: 0%;}

  #medias .mediaCrp4{grid-column: 1 / 6; grid-row: 27 / 37; height: 100%; width: 100%; margin: 0%;}
  
  #medias .mediaCrp8{grid-column: 6 / 10; grid-row: 27 / 31; height: 100%; width: 100%; margin-left: 0%;}
  
  #medias .mediaCrp6{grid-column: 10 / 13; grid-row: 27 / 31; height: 100%; width: 100%; margin: 0%;}
   
  #medias .mediaCrp5{grid-column: 6 / 13; grid-row: 31 / 37; height: 100%; width: 100%; margin: 0%;}

/* projets Orkan */

  #medias .mediaOrkan1{grid-column: 3 / 11; grid-row: 2 / 8; height: 100%; width: 100%; margin: 0%;}
  
  #medias .textMediaOrkan1{grid-column: 1 / 13; grid-row: 1 / 2;}
  
  #medias .mediaOrkan2{grid-column: 3 / 11; grid-row: 9 / 15; height: 100%; width: 100%; margin: 0%;}
  
  #medias .textMediaOrkan2{grid-column: 1 / 13; grid-row: 8 / 9;}
  
  #medias .mediaOrkan3{grid-column: 4 / 10; grid-row: 16 / 21; height: 100%; width: 95%; margin: 0%;}
  
/* projets Hyphen */

  #medias .mediaHyphen1{grid-column: 3 / 11; grid-row: 1 / 8; height: 100%; width: 100%; margin: 0%;}
 
/* projets AR */

  #medias .mediaAR1{grid-column: 4 / 10; grid-row: 26 / 35; height: 100%; width: 100%; margin: 0%;}
  
  #medias .textMediaAR1{grid-column: 1 / 13; grid-row: 25 / 26; height: 100%; width: 100%; margin: 0%;}
  
  #medias .textMediaAR1 p{font-size: 1.5em; font-weight: 300; color: #fff; text-align: center; margin-top: 10%; margin-bottom: 10%;}
  
  #medias .mediaAR2a{grid-column: 1 / 5; grid-row: 2 / 13; margin: 0%;}
  
  #medias .mediaAR2b{grid-column: 5 / 9; grid-row: 2 / 13; margin: 0%;}
  
  #medias .mediaAR2c{grid-column: 1 / 5; grid-row: 14 / 25; margin: 0%;}
  
  #medias .mediaAR2d{grid-column: 5 / 9; grid-row: 14 / 25; margin: 0%;}
  
  #medias .mediaAR2e{grid-column: 9 / 13; grid-row: 2 / 13; margin: 0%;}
  
  #medias .mediaAR2f{grid-column: 9 / 13; grid-row: 14 / 25; margin: 0%;}
  
  #medias .textMediaAR2{grid-column: 1 / 13; grid-row: 1 / 2; height: 100%; width: 100%; margin: 0%;}
  
  #medias .textMediaAR2 p{font-size: 1.5em; font-weight: 300; color: #fff; text-align: center; margin-top: 10%; margin-bottom: 10%;}

/* projets motion */

#medias .mediaMotion1{grid-column: 1 / 7; grid-row: 26 / 31; height: 100%; width: 100%; margin: 0%;}

#medias .textMediaMotion1{grid-column: 1 / 7; grid-row: 31 / 32; height: 100%; width: 100%; margin: 0%;}

#medias .textMediaMotion1 p{font-size: 1.5em; font-weight: 300; color: #fff; text-align: center;}

#medias .mediaMotion2{grid-column: 7 / 13; grid-row: 26 / 31; height: 100%; width: 100%; margin: 0%;}

#medias .textMediaMotion2{grid-column: 7 / 13; grid-row: 31 / 32; height: 100%; width: 100%; margin: 0%;}

#medias .textMediaMotion2 p{font-size: 1.5em; font-weight: 300; color: #fff; text-align: center;}

#medias .mediaMotion3{grid-column: 1 / 7; grid-row: 1 / 9; height: 100%; width: 100%; margin: 0%;}

#medias .mediaMotion4{grid-column: 7 / 13; grid-row: 1 / 9; height: 100%; width: 100%; margin: 0%;}

#medias .mediaMotion7{grid-column: 1 / 7; grid-row: 9 / 17; height: 100%; width: 100%; margin: 0%;}

#medias .mediaMotion5{grid-column: 7 / 13; grid-row: 9 / 17; height: 100%; width: 100%; margin: 0%;}

#medias .mediaMotion6{grid-column: 1 / 7; grid-row: 17 / 25; height: 100%; width: 100%; margin: 0%;}

#medias .mediaMotion8{grid-column: 7 / 13; grid-row: 17 / 25; height: 100%; width: 100%; margin: 0%;}

#medias .textMediaMotion3{grid-column: 1 / 13; grid-row: 25 / 26; height: 100%; width: 100%; margin: 0%;}

#medias .textMediaMotion3 p{font-size: 1.5em; font-weight: 300; color: #fff; text-align: center;}

/* projets misc */

#medias .mediaMisc2{
  grid-column: 3 / 11;
  grid-row: 1 / 9;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc2 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc2{
  grid-column: 3 / 11;
  grid-row: 9 / 10;
}

#medias .mediaMisc4c{
  grid-column: 3 / 11;
  grid-row: 10  / 19;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .mediaMisc4b{
  grid-column: 3 / 11;
  grid-row: 19 / 27;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .mediaMisc4a{
  grid-column: 3 / 11;
  grid-row: 27 / 36;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc4 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc4{
  grid-column: 3 / 11;
  grid-row: 36 / 37;
}

#medias .mediaMisc3a{
  grid-column: 3 / 11;
  grid-row: 42 / 48;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .mediaMisc3b{
  grid-column: 3 / 11;
  grid-row: 48 / 51;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .mediaMisc3c{
  grid-column: 3 / 11;
  grid-row: 37 / 42;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc3 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc3{
  grid-column: 3 / 11;
  grid-row: 51 / 52;
}

#medias .mediaMisc1{
  grid-column: 3 / 11;
  grid-row: 52 / 60;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc1 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc1{
  grid-column: 3 / 11;
  grid-row: 60 / 61;
}

#medias .mediaMisc7{
  grid-column: 3 / 11;
  grid-row: 61 / 69;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc7 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc7{
  grid-column: 3 / 11;
  grid-row: 69 / 70;
}

#medias .mediaMisc6{
  grid-column: 3 / 11;
  grid-row: 70 / 78;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc6 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc6{
  grid-column: 3 / 11;
  grid-row: 78 / 79;
}

#medias .mediaMisc5{
  grid-column: 3 / 11;
  grid-row: 79 / 87;
  height: 100%;
  width: 100%;
  margin: 0%;
}
#medias .textMediaMisc5 p{
  color: white;
  position: relative;
  font-size: medium;
}
#medias .textMediaMisc5{
  grid-column: 3 / 11;
  grid-row: 87 / 88;
}

/* About */

.mainAbout{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* overflow: hidden; */
}
/* END */
}