@font-face {
  font-family: 'Chal';
  src: url('./News/mytupi.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
}

body {
    font-family: 'chal';
    margin: 0;
    padding: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal du fond */
}

a {
	color: inherit;
	text-decoration: inherit
}

.tous {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.clock {
    text-align: center;
    padding: 50px;
    color: #333;
}

.clock #time{
  font-size: 8em;
  align-items: center;
  display: flex;
  justify-content: center;
}

.clock #date{
  font-size: 1.8em;
}

.click{
    position: fixed;
    bottom: 0;
    text-align: center;
    font-size: 1.5em;
    color: #333;
    margin-bottom: 60px;
    left:50%;
    transform: translate(-50%, 50%);
}

.container {
    width: 30%;
    margin: auto;
    height: 5%;
}

.push__wrapper {
    margin-top: 0px;
}


.push__box {
    display: none;
    position: absolute;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    z-index: 999;
    margin: 120px 0;
    left:50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.push__box2 {
  display: none;
  top: 1100px; /* Commencez par positionner la push box au-dessus de la vue */
  position: absolute;
  transition: top 1s ease-in-out, box-shadow 1s ease-in-out; /* Ajoutez des transitions pour top (0.5 seconde) et box-shadow (1 seconde) */
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  z-index: 999;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

.push__box3 {
  display: none;
  position: absolute;
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  z-index: 999;
  margin: 60px 0;
  left:50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.push__box4 {
  display: none;
  position: absolute;
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  z-index: 999;
  margin: 60px 0;
  left:50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.Boite_popup_Travaux{
  z-index: 10;
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  box-shadow: 18px -20px 20px 0px rgba(255, 255, 255, 0), 0px 0px 900px 125px #7c7c7c;
  border-radius: 30px;
  transform: translate(12%, 20%);
  height: 300px;
  width: 80%;
}


.texte_popup_Travaux{
  padding-top: 10px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  height: 220px;
  border-top-right-radius: 28px;
  border-top-left-radius: 28px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.texte1_popup_Travaux{
  margin-top: 20px;
  margin-bottom: 20px;
}

.texte2_popup_Travaux{
  margin-bottom: 20px;
}

.bouton_popup_Travaux{
  display: inline-flex;
  width: 100%;
  height: 70px;
  font-size: 16px;
}

.bouton1_popup_Travaux{
  width: 50%;
  border-top: 2px solid rgb(214, 214, 214);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius : 28px;
  color: rgb(62, 139, 255);
}

.bouton2_popup_Travaux{
  width: 100%;
  border-top: 2px solid rgb(214, 214, 214);
  /* border-left: 2px solid rgb(214, 214, 214); */
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-right-radius: 28px;
  color: rgb(11, 108, 255);
  font-weight: bold;
}
  

@media screen and (max-width: 600px) {
  .push__box {
    display: none;
    position: absolute;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    z-index: 999;
    margin: 90px 0;
    left:50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.push__box2 {
  display: none;
  top: 1100px; /* Commencez par positionner la push box au-dessus de la vue */
  position: absolute;
  transition: top 1s ease-in-out, box-shadow 1s ease-in-out; /* Ajoutez des transitions pour top (0.5 seconde) et box-shadow (1 seconde) */
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  z-index: 999;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

}

.push__box:last-child {
    display: block;
}

.push__box2:last-child {
  display: block;
}

.push__box3:last-child {
  display: block;
}

.push__box4:last-child {
  display: block;
}

.push__box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 25px;
    box-shadow: inset 0 0 100px rgba(63, 63, 63, 0.75);
    backdrop-filter: blur(20px);
    z-index: -1;
}



.push__box2::before {
  content: '';
  position: absolute;
  top:0px;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  box-shadow: inset 0 0 100px rgba(63, 63, 63, 0.62);
  backdrop-filter: blur(20px);
  z-index: -1;
  transition: box-shadow 1s ease-in-out; /* Ajoutez une transition de 1 seconde pour la box-shadow */

}


.push__box3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  box-shadow: inset 0 0 100px rgba(63, 63, 63, 0.6);
  backdrop-filter: blur(20px);
  z-index: -1;
}

.push__box4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  box-shadow: inset 0 0 100px rgba(63, 63, 63, 0.6);
  backdrop-filter: blur(20px);
  z-index: -1;
}


.push__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.push__top .col {
    display: flex;
    align-items: center;
}

.push__imgwrap {
    margin: 2px 5px 0 0;
}

.push__icon {
    max-width: 60px;
    width: auto;
}

.push__imgwrap2 {
  margin: 10px 15px 10px 15px;
}

.push__icon2 {
  max-width: 40px;
  width: auto;
}

.push__title {
    font-size: 14px;
    color: #ffffff;
}

.push__time {
    font-size: 14px;
    color: #d6d6d6;
    padding-right: 10px;
    padding-bottom: 22px;
}

.push__main {
    margin-bottom: 2px;
    color:#ffffff;
}

/* ------------------------------------------------------------------------------------------------*/
#pages-container{
    position:fixed;
    height: 100vh;
	width: 300vw;
}

.fond_ecran{
  position: fixed;
  z-index: -10;
  top: 28%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-left: -100px; /* La moitié de la largeur de l'image */
}

.fond_ecran img{
  width: 200px;
  height: 300px;
}


.fond_ecran2{
  position: fixed;
  z-index: 2;
  top: 28%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-left: -100px; /* La moitié de la largeur de l'image */
}

.fond_ecran2 img{
  width: 200px;
  height: 300px;
}

#page-1 {
  width: 100vw; /* Fixe la largeur à 100% de la fenêtre du navigateur */
  height: 100vh; /* Permet le défilement vertical en fonction du contenu */
}

@media screen and (max-width: 600px) {
.push__title {
  font-size: 11px;
  color: #ffffff;
}

.push__time {
  font-size: 11px;
  color: #d6d6d6;
  padding-right: 10px;
  padding-bottom: 0px;
}

.clock #time{
  font-size: 6em;
  align-items: center;
  display: flex;
  justify-content: center;
}

.clock #date{
  font-size: 1.3em;
}

.click{
  position: fixed;
  bottom: 0;
  text-align: center;
  font-size: 1.5em;
  color: #333;
  margin-bottom: 60px;
  font-weight: bold;
  left:50%;
  transform: translate(-50%, 50%);
}
}



.clock2 {
  padding-top: 6px;
  font-size: 1.3em;
  color: #333;
  display: flex;
  align-items: center; /* Pour centrer verticalement les éléments */
  
}

.datee {
  padding-top: 7px;
  width: 105px;
  height: 23px;
  text-align: left; /* Pour aligner la date à gauche */
}

.timee {
  padding-top: 7px;
  position: relative;
  left:-52.5px;
  width: 53px;
  height: 23px;
  margin: 0 auto; /* Pour centrer l'heure horizontalement */
  text-align: center; /* Pour centrer le texte à l'intérieur de l'heure */
}


@media screen and (max-width: 450px) {
  .clock2 {
    padding-top: 6px;
    font-size: 1.2em;
    color: #333;
    display: flex;
    align-items: center; /* Pour centrer verticalement les éléments */
    
  }
  
  .datee {
    display: none;
  }
  
  .timee {
    position: relative;
    width: 53px;
    left: -35%;
    height: 23px;
    padding-top: 7px;
    margin: 0 auto; /* Pour centrer l'heure horizontalement */
    text-align: left; /* Pour centrer le texte à l'intérieur de l'heure */
  }
  
}





#telecomName {
  display: inline-block;
  background-color: #ffffff;
  position: fixed;
  right: 115px;
  padding-top: 6px;
  font-size: 15px;
  font-weight: bold;
}

.network-search {
    display: inline-block;
    background-color: #ffffff;
    position:fixed;
    right: 40px;
    padding-top: 0;
  }
  
  .bar {
    width: 9px;
    background-color: #333;
    margin: 0 1px;
    border-radius: 2px;
    display: inline-block;
    animation: barAnimation 1.5s infinite;
    transform-origin: bottom;
    animation-fill-mode: both; /* Conserve l'état de l'animation après la fin */
  }
  
  .bar1 {
    height: 4px;
    animation-delay: 0s; /* Pas de délai pour la première barre */
  }
  
  .bar2 {
    height: 7px;
    animation-delay: 0.3s; /* Délai de 0.3 secondes pour la deuxième barre */
  }
  
  .bar3 {
    height: 11px;
    animation-delay: 0.6s; /* Délai de 0.6 secondes pour la troisième barre */
  }
  
  .bar4 {
    height: 16px;
    animation-delay: 0.9s; /* Délai de 0.9 secondes pour la quatrième barre */
  }
  
  @keyframes barAnimation {
    0%, 100% {
      transform: scaleY(0.1);
    }
    50% {
      transform: scaleY(1);
    }
  }
  
  #telecomStatu {
    display: inline-block;
    background-color: #ffffff;
    position: fixed;
    right: 15px;
    padding-top: 6px;
    font-size: 15px;
    font-weight: bold;
  }
  
  

#pages-container .page {
	position: relative;
	width: 95vw;
	padding: 2.5vw 2.5vw 0px 2.5vw;
	float: left;
	height: 100vh
}

.appli{
    margin-top: 30px;
    margin-bottom: 12px;
    position: relative;
    width: 23.75vw;
    height: 8.75vw;
    min-height: 90px;
    float: left;
}

.appli.updating {
	pointer-events: none
}

.logoimg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 70px;
	height: 70px;
	border-radius: 25%;
}

.text {
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: 40px;
	text-align: center;
	/* color: #323232; */
	color:var(--font_color);
	font-weight:bold;
	font-size:14px;
	letter-spacing:0.01em;
}





.folder_text {
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: 35px;
	text-align: center;
	/* color: #323232; */
	color:var(--font_color);
	font-weight:400;
	font-size:14px;
	letter-spacing:0.01em;
}

.sous_text {
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: 55px;
	text-align: center;
	/* color: #323232; */
	color:grey;
	font-weight:400;
	font-size:12px;
	letter-spacing:0.01em;
}

.Camera_encadre{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

#asciiDiv {
  transform: scale(2); /* Ajuster le facteur de zoom en pourcentage */
}


.back-buttoninspi {
  display: inline-flex;
  cursor: pointer;
  padding: 10px 10px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi2 {
    display: inline-flex;
    cursor: pointer;
    padding: 10px 10px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

  .back-buttoninspi3 {
    display: inline-flex;
    cursor: pointer;
    padding: 10px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }


  .BACKBLUE_Artiste_Architecte_Bijoy{
    height: 78px;
    width: 150px;
  }
  .back-buttoninspi3_1 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

  .back-buttoninspi4 {
    display: inline-flex;
    cursor: pointer;
    padding: 10px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

  .back-buttoninspi5 {
    display: inline-flex;
    cursor: pointer;
    padding: 10px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

  .back-buttoninspi6 {
    display: inline-flex;
    cursor: pointer;
    padding: 10px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }
  
  .back-iconinspi {
    height: 18.3px;
    width: 11px;
    margin-right: 10px;
    transition: transform 0.3s;
  }

  .back-iconinspi img {
    height: 18.3px;
    width: 11px;
  }

  .back-buttoninspi:hover .back-iconinspi {
    transform: translateX(-5px);
  }

  .back-buttoninspi2:hover .back-iconinspi {
    transform: translateX(-5px);
  }

  .back-buttoninspi3:hover .back-iconinspi {
    transform: translateX(-5px);
  }

  .back-buttoninspi3_1:hover .back-iconinspi {
    transform: translateX(-5px);
  }


  .back-buttoninspi4:hover .back-iconinspi {
    transform: translateX(-5px);
  }

  .back-buttoninspi5:hover .back-iconinspi {
    transform: translateX(-5px);
  }

  .back-buttoninspi6:hover .back-iconinspi {
    transform: translateX(-5px);
  }

  .back-textinspi {
    color: rgb(0, 81, 255);
    display: inline-block;
    transition: transform 0.3s, opacity 0.3s; /* Ajout de l'animation d'opacité */
    vertical-align: middle;
  }
  

/* Sélecteur pour la section Artiste */
.back-buttoninspi.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}

/* Sélecteur pour la section Artiste */
.back-buttoninspi2.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}

/* Sélecteur pour la section Artiste */
.back-buttoninspi3.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}

.back-buttoninspi3_1.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}

/* Sélecteur pour la section Artiste */
.back-buttoninspi4.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}


/* Sélecteur pour la section Artiste */
.back-buttoninspi5.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}

/* Sélecteur pour la section Artiste */
.back-buttoninspi6.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}





  .Inspiration_Titre {
    color: black;
    position: relative;
    transition: transform 0.3s, opacity 0.3s;
    /* text-align: center; */
    top: -59px;
    z-index: 10;
    transform: translate(46%, 47%);
    font-size: 30px;
}



.BACKBLUE_Artiste_Architecte_Mallet_Stevens{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_3 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_3:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_3.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}



.BACKBLUE_Artiste_Architecte_Sert{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_4 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_4:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_4.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}


.BACKBLUE_Artiste_Architecte_Prouve{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_5 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_5:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_5.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}


  .BACKBLUE_Artiste_Architecte_Häusermann{
    height: 78px;
    width: 150px;
  }

  .back-buttoninspi3_6 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_6:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_6.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
}

.BACKBLUE_Artiste_Architecte_Garnier{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_7 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_7:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_7.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}

.BACKBLUE_Artiste_Architecte_Gray{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_8 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_8:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_8.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}

.BACKBLUE_Artiste_Architecte_Costy{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_9 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_9:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_9.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}


.BACKBLUE_Artiste_Architecte_Rottier{
  height: 78px;
  width: 150px;
}

.back-buttoninspi3_10 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_10:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_10.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}



@media screen and (max-width: 1200px) and (min-width: 900px){
  .Inspiration_Titre {
    transform: translate(45%, 47%);
  }

}


@media screen and (max-width: 900px) {
  .Inspiration_Titre {
    transform: translate(41%, 47%);
  }
}


.logoimgbas {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: auto;
	width: 70px;
	height: 70px;
	border-radius: 25%;
}

.textbas {
	position: absolute;
	width: 100%;
	top: 100%;
	text-align: center;
	/* color: #323232; */
	color:var(--font_color);
	font-weight:400;
	font-size:14px;
	letter-spacing:0.01em;
  padding-top: 2px;
}


.baspage2 {
    z-index: 10;
    position: fixed;
    bottom: 15px;
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
    height: 90px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 30px;
}

.applibas{
    position: relative;
    width: 23.75vw;
    min-height: 90px;
    float: left;
}



.BACKBLUE_Artiste_Architecte_Corbusier{
  height: 78px;
  width: 150px;
}
.back-buttoninspi3_2 {
  display: inline-flex;
  cursor: pointer;
  padding:20px 20px;
  background-color: white;
  transition: background-color 0.3s;
  overflow: hidden;
}

.back-buttoninspi3_2:hover .back-iconinspi {
  transform: translateX(-5px);
}

.back-buttoninspi3_2.clicked .back-textinspi {
transform: translateX(100%);
opacity: 0;
}

  .BACKBLUE_Artiste_Architecte_Lovag{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_11 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_11:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_11.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Gaud�{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_12 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_12:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_12.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Gehry{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_13 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_13:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_13.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Nouvel{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_14 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_14:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_14.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Kahn{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_15 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_15:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_15.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Zumthor{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_16 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_16:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_16.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Hadid{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_17 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_17:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_17.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }


  .BACKBLUE_Artiste_Architecte_Milunic{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_18 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_18:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_18.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Lloyd{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_19 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_19:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_19.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Koolhaas{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_20 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_20:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_20.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Piano{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_21 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_21:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_21.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Rogers{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_22 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_22:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_22.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Perriand{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_1 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_1:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_1.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Sottsass{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_2 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_2:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_2.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Gray{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_3 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_3:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_3.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Paulin{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_4 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_4:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_4.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Ducaroy{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_5 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_5:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_5.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Loewy{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_6 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_6:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_6.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Chapo{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_7 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_7:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_7.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Gras{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_8 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_8:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_8.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Putman{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_9 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_9:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_9.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Guariche{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_10 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_10:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_10.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Starck{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_11 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_11:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_11.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Conran{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_12 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_12:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_12.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Arad{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_13 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_13:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_13.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Corbusier{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_14 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_14:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_14.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Ive{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_15 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_15:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_15.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Designer_Rams{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi4_16 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi4_16:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi4_16.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }

  .BACKBLUE_Artiste_Architecte_Ando{
    height: 78px;
    width: 150px;
  }
  
  .back-buttoninspi3_23 {
    display: inline-flex;
    cursor: pointer;
    padding:20px 20px;
    background-color: white;
    transition: background-color 0.3s;
    overflow: hidden;
  }

 .back-buttoninspi3_23:hover .back-iconinspi {
    transform: translateX(-5px);
  }

 .back-buttoninspi3_23.clicked .back-textinspi {
  transform: translateX(100%);
  opacity: 0;
  }