* {
   /* box-sizing: border-box; */
   margin: 0;
   padding: 0;
   font-family: 'Brown', sans-serif;
   scroll-behavior: smooth;
}

@font-face {
   font-family: 'helveticaneuelight';
   src: url('helveticaneue_light-webfont.woff2') format('woff2'),
        url('helveticaneue_light-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-BoldItalicAlt.eot');
   src:url('./fonts/Brown-BoldItalicAlt.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-BoldItalicAlt.woff2') format('woff2'),
       url('./fonts/Brown-BoldItalicAlt.woff') format('woff'),
       url('./fonts/Brown-BoldItalicAlt.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-Bold.eot');
   src: url('./fonts/Brown-Bold.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-Bold.woff2') format('woff2'),
       url('./fonts/Brown-Bold.woff') format('woff'),
       url('./fonts/Brown-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-BoldItalic.eot');
   src: url('./fonts/Brown-BoldItalic.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-BoldItalic.woff2') format('woff2'),
       url('./fonts/Brown-BoldItalic.woff') format('woff'),
       url('./fonts/Brown-BoldItalic.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-BoldBackslanted-Alt.eot');
   src: url('./fonts/Brown-BoldBackslanted-Alt.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-BoldBackslanted-Alt.woff2') format('woff2'),
       url('./fonts/Brown-BoldBackslanted-Alt.woff') format('woff'),
       url('./fonts/Brown-BoldBackslanted-Alt.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-BoldBackslanted.eot');
   src: url('./fonts/Brown-BoldBackslanted.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-BoldBackslanted.woff2') format('woff2'),
       url('./fonts/Brown-BoldBackslanted.woff') format('woff'),
       url('./fonts/Brown-BoldBackslanted.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-BoldAlt.eot');
   src: url('./fonts/Brown-BoldAlt.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-BoldAlt.woff2') format('woff2'),
       url('./fonts/Brown-BoldAlt.woff') format('woff'),
       url('./fonts/Brown-BoldAlt.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-Light.eot');
   src: url('./fonts/Brown-Light.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-Light.woff2') format('woff2'),
       url('./fonts/Brown-Light.woff') format('woff'),
       url('./fonts/Brown-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-Thin.eot');
   src: url('./fonts/Brown-Thin.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-Thin.woff2') format('woff2'),
       url('./fonts/Brown-Thin.woff') format('woff'),
       url('./fonts/Brown-Thin.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-RegularBackslantedAlt.eot');
   src: url('./fonts/Brown-RegularBackslantedAlt.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-RegularBackslantedAlt.woff2') format('woff2'),
       url('./fonts/Brown-RegularBackslantedAlt.woff') format('woff'),
       url('./fonts/Brown-RegularBackslantedAlt.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-ThinBackslanted.eot');
   src: url('./fonts/Brown-ThinBackslanted.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-ThinBackslanted.woff2') format('woff2'),
       url('./fonts/Brown-ThinBackslanted.woff') format('woff'),
       url('./fonts/Brown-ThinBackslanted.ttf') format('truetype');
   font-weight: 100;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-RegularItalicAlt.eot');
   src: url('./fonts/Brown-RegularItalicAlt.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-RegularItalicAlt.woff2') format('woff2'),
       url('./fonts/Brown-RegularItalicAlt.woff') format('woff'),
       url('./fonts/Brown-RegularItalicAlt.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-RegularAlt.eot');
   src: url('./fonts/Brown-RegularAlt.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-RegularAlt.woff2') format('woff2'),
       url('./fonts/Brown-RegularAlt.woff') format('woff'),
       url('./fonts/Brown-RegularAlt.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-RegularBackslanted.eot');
   src: url('./fonts/Brown-RegularBackslanted.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-RegularBackslanted.woff2') format('woff2'),
       url('./fonts/Brown-RegularBackslanted.woff') format('woff'),
       url('./fonts/Brown-RegularBackslanted.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-Regular.eot');
   src: url('./fonts/Brown-Regular.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-Regular.woff2') format('woff2'),
       url('./fonts/Brown-Regular.woff') format('woff'),
       url('./fonts/Brown-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-LightItalic.eot');
   src: url('./fonts/Brown-LightItalic.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-LightItalic.woff2') format('woff2'),
       url('./fonts/Brown-LightItalic.woff') format('woff'),
       url('./fonts/Brown-LightItalic.ttf') format('truetype');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-ThinItalic.eot');
   src: url('./fonts/Brown-ThinItalic.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-ThinItalic.woff2') format('woff2'),
       url('./fonts/Brown-ThinItalic.woff') format('woff'),
       url('./fonts/Brown-ThinItalic.ttf') format('truetype');
   font-weight: 100;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-RegularItalic.eot');
   src: url('./fonts/Brown-RegularItalic.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-RegularItalic.woff2') format('woff2'),
       url('./fonts/Brown-RegularItalic.woff') format('woff'),
       url('./fonts/Brown-RegularItalic.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Brown';
   src: url('./fonts/Brown-LightBackslanted.eot');
   src: url('./fonts/Brown-LightBackslanted.eot?#iefix') format('embedded-opentype'),
       url('./fonts/Brown-LightBackslanted.woff2') format('woff2'),
       url('./fonts/Brown-LightBackslanted.woff') format('woff'),
       url('./fonts/Brown-LightBackslanted.ttf') format('truetype');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}


/* .stop-scrolling {
   height: 100%;
   overflow: hidden;
} */

#intro {
   position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: center;
   top: 0px;
   left: 0;
   width: 100%;

   height: 100vh;
   z-index: 19000;
   background-color: #fff;
}
.intro {

   display: block;

   margin-left: auto; 

   margin-right: auto;
   max-width: 100%;
   z-index: 20000;
   background-color: #fff;
}




#h2bar {
   color: #888;
   background-color: #888;
}

h2 {
   font-size: 20px;
   margin-top: 5px;
   margin-bottom: 15px;
}

h3 {
   font-size: 16px;
   margin-top: 5px;
   margin-bottom: 5px;
}
h5 {

   font-size: 15px;
   margin-top: 5px;
   margin-bottom: 5px;
   font-weight: bolder;
}
h5, h1 {
   display: inline-block;
}
h6 {
   font-size: 16px;
   margin-top: 5px;
   margin-bottom: 5px;
   text-align: center;
}

h4 {
   font-size: 12px;
   font-weight: bold;
}

p {
   font-size: 12px;
}

#navbar {
   background: #ffffff;
   height: 80px;
   opacity: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: small;
   position: sticky;
   top: 0;
   z-index: 999;
}

.navbar__container {
   display: flex;
   justify-content: space-between;
   height: 80px;
   z-index: 1;
   width: 100%;
   max-width: 4300px;
   margin: 0 auto;
   padding: 0 50px;
   position: fixed;
   top: 0;
   /* background: #fff; */
   background-color: hsla(0,0%,100%,.85);
}

.setinvisible{
   top: -80px;
}

.img_logo {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-top: 5px;
   padding-left: 5px;

   /* padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 5px; */

   /* height: 80px; */
   width: 125px;
}
.navbar__menu {
   display: flex;
   align-items: center;
   list-style: none;
   margin-bottom: 0;
}

.navbar__item {
   height: 80px;
   z-index: 99;
}

.navbar__links {
   color: #000000;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 125px;
   text-decoration: none;
   height: 100%;
   /* transition: all 0.3s ease; */
   font-size: 0.9rem;
   font-weight: normal;
}

.navbar__btn {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 1rem;
   width: 100%;
}

.button {
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   padding: 10px 20px;
   height: 100%;
   width: 100%;
   border: none;
   outline: none;
   border-radius: 4px;
    color: #000000;
   transition: all 0.3s ease;
}

.navbar__links:hover {
   color: #ff0000;
   transition: all 0.3s ease;
   text-decoration: none;
}

.menurow{
   width: 100%;
   max-width: 1300px;

   padding-left:  25px;
   /* padding-right: 2rem;
   align-items: center; */
}
.menuitem{
   padding: 0;
}
#search2 {
   vertical-align: middle;
   /* margin-top: 28px;
   margin-right: 15px; */
    width: 24px;
   height: 80px; 
   border-radius: 0;
   border: hidden;
   /* background-color: #fff; */
   background-color: rgba(255, 255, 255, 1);
}
@media screen and (max-width: 960px) {
   #search2 {
       height: 80px;
       padding: 0;
       margin: auto;

   }
   .navbar__container {
       display: flex;
       justify-content: space-between;
       height: 80px;
       z-index: 1;
       width: 100%;
       max-width: 1300px;
       padding: 0;

   }
   .navbar__menu {
       display: flex;
       flex-direction: column;
       /* grid-template-columns: auto; */
       margin: 0;
       width: 100%;
       position: absolute;
       top: -5000px;
       opacity: 1;
       transition: all 0.5s ease;
       z-index: -1;

   }
   .navbar__menu.active {
      background: #ffffff;
      padding: 0;
      top: 100%;
      opacity: 1;
      transition: all 0.5s ease;
      z-index: 99;
      height: 100vh;
      font-size: 1.6rem;
  }

   #navbar__logo {
       padding: 10px 10px;
   }
   .navbar__toggle .bar {
       width: 25px;
       height: 3px;
       margin: 5px auto;
       transition: all 0.3s ease-in-out;
       background: #000;
   }
   .navbar__item {
       width: 100%;
       height: 80px;
   }

   .navbar__links {
       text-align: center;
       padding: 2rem;
       width: 100%;
       display: table;


       font-size: 2.25rem;
       font-weight: bold;
   }
   .highlight{
       top: 100%;
       height: 0;
       opacity: 0;
       width: 0;
       margin: 0;
       padding: 0;
   }
   .navbar__btn {
       padding-bottom: 2rem;
   }
   .button {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 80%;
       height: 80px;
       margin: 0;
   }
   #mobile-menu {
       position: absolute;
       top: 25px;  
        /* top: 20%; */
       right: 5%;

       /* transform: translate(5%, 20%); */

   }

   .navbar__toggle .bar {
       display: block;
       cursor: pointer;
   }
   #mobile-menu.is-active .bar:nth-child(2) {
       opacity: 0;
   }
   #mobile-menu.is-active .bar:nth-child(1) {
       transform: translateY(8px) rotate(45deg);
   }
   #mobile-menu.is-active .bar:nth-child(3) {
       transform: translateY(-8px) rotate(-45deg);
   }
}

.action-container {
   display: flex;
   position: relative;
   justify-items: center;
   justify-content: center;
   margin-top: 10%;
}

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 4px solid #000;
   margin: 1em auto;
   padding: 0;
   width: 300px;
}

/* ul {
   text-align: center;
} */


/* Set a style for all buttons */

.addBtn {
   background-color: #04AA6D;
   color: white;
   padding: 14px 20px;
   margin-top: 8px;
   margin-bottom: 24px;
   border: none;
   cursor: pointer;
   width: auto;
}


/* Add a hover effect for buttons */

.addBtn:hover {
   opacity: 0.8;
}


/* Extra style for the cancel button (red) */

.delBtn {
   background-color: #f44346;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: auto;
}

#basebtn {
   border: none;
   background-color: #fff;
}

#loggedinicon {
   fill: #df6969;
   background-color: #ffffff;
   width: 40px;
   height: 40px;
   padding: 8px;
   border: none;
   border-radius: 50%;
}




/* Add a hover effect for buttons */

.delBtn:hover {
   opacity: 0.8;
}


/* Agence Section */

#agence {
   background: #ffffff;
   padding: 80px 20px;
   margin-left: auto;
   /* margin-left: 10px;
   margin-right: 10px; */
   text-align: justify;
   max-width: 1600px;
   overflow: hidden;
}

#agence h2 {
   color: #ff0000;
   font-weight: bold;
}

#whiteDot {
   color: #fff;
}

#subcol-left {
   margin-left: 0;
   padding: 0;
   text-align: left;
}

#subcol-left h2 {
   color: #000;
}

#subcol-right h2 {
   color: #000;
}

#subcol-right {
   margin-right: 0;
   padding: 0;
   text-align: right;
}

@media screen and (max-width: 1170px) {
   #subcol-right {
       margin-right: 0;
       padding: 0;
       text-align: left;
   }
}


/*  Personnes  */

#equipe h2 {
   color: #ff0000;
   font-weight: bold;
}

#persocontainer {
   padding: 5%;
}

#personnes {
   display: table;
   height: 100px;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
   /* justify-content: start; */
   vertical-align: middle;
}

#personnes img {
   float: left;
   width: 100px;
   border-radius: 50%;
   margin-right: 5px;
   margin-left: 5px;
   /* vertical-align: middle;  */
}

#personnes2 {
   display: table;
   height: 100px;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
   /* justify-content: start; */
   vertical-align: middle;
}

#personnes2 img {
   float: left;
   width: 100px;
   border-radius: 50%;
   margin-right: 5px;
   margin-left: 5px;
   /* vertical-align: middle;  */
}

#personnes2 hr {
   size: 5px;
   margin-left: 20%;
   margin-right: 20%;
   color: #9e9e9e;
}

#personTxt {
   display: table-cell;
   vertical-align: middle;
   /* padding-right: 80px; */
}

#personnes hr {
   size: 5px;
   margin-left: 20%;
   margin-right: 20%;
   color: #9e9e9e;
}






@media screen and (max-width: 768px) {
   .agence__heading {
       font-size: 60px;
   }
   .agence__description {
       font-size: 40px;
   }
}

.equipe {
   padding-top: 120px;
   padding-bottom: 120px;
   max-width: 1600px;
}

#equipe-row {
   padding-bottom: 20px;
}


/* Services Section */

.services {
   background: #ffffff;
   display: flex;
   flex-direction: column;
   /* justify-content: center; */
   align-items: center;
   padding: 0 2rem;
}



   #projets {
       background: #ffffff;
       display: flex;
       flex-direction: column;
       align-items: center;
       padding-left:  2rem;
       padding-right:  2rem;

   }




.backBtn, .backBtn2 {

   margin-top: 17px;
   margin-right: 15px;
   margin-bottom: 20px;
   width: 20px;
   height: 20px;
   padding-bottom: 20px;

   border: hidden;
   background-color: #fff;

}


.backBtn img {
   margin-right: 15px;
   width: 20px;
   height: 20px;
   border: hidden;
   background-color: #fff;
}
.backBtn2 img {
   margin-right: 15px;
   width: 20px;
   height: 20px;
   border: hidden;
   background-color: #fff;
   transform: scaleX(-1);

}

.input_on {
   /* font-family: 'Kumbh Sans', sans-serif; */
   background: #ffffff;
   text-decoration: none;
   justify-content: center;
   list-style-type: none;
   border: 0px dotted #ffffff;
   border-radius: 0;
   /* font-size: 1.3rem; */
   color: #ff0000;

}

.input_off {
   /* font-family: 'Kumbh Sans', sans-serif; */
   background: #ffffff;
   text-decoration: none;
   justify-content: center;
   list-style-type: none;
   border: 0px dotted #ffffff;
   border-radius: 0;
   /* font-size: 1.3rem; */
   color: #000000;
}

.input_off:hover {
   color: #ff0000;
   transition: all 0.3s ease;
}

#projets__menu {

   color: #ffffff;
   width: 100%;
   height: 80px;
   justify-content: center;
   background: #ffffff; 

   display: flex;
flex-direction: column;
align-items: center;
padding-left: 2rem;
padding-right: 2rem;
}

.services__col {
   padding: 0 20px;
}

#projets__col {
   padding: 0 20px;
}

.services__links {
   background: #ffffff;
   color: #1fc564;
   text-decoration: none;
   justify-content: center;
   list-style-type: none;
   transition: all 0.3s ease;
   border: 0px dotted #ffffff;
   border-radius: 0;
   font-size: 1.3rem;
}

.services__wrapper {
   display: grid;
   height: 100%;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr;
}




/* a {
   text-align: center;
} */

a:hover a:focus {
   opacity: 75%;
   background: #fff;
   color: #ff0000;
   text-decoration: none,
}

a.navbar__links {
   text-align: center;
   text-decoration: none;
}

a.navbar__links:hover a.navbar__links:focus {
   opacity: 75%;
   background: #fff;
   text-decoration: none;
}

/* a div {
   opacity: 0;
} */


/* .prjt-txt {
   color: #ff0000;
   width: 90%;
   padding-left: 5%;
   padding-right: 5%;
   text-align: center;
   margin-top: -25%;
   transform: translateY(-50%);
} */

.prjt-txt {
   /* position: absolute;
   display: table-cell; */
   /* vertical-align: middle; */
   text-decoration: none;
   color: #ff0000;
   width: 100%;
   /* margin: auto; */
   padding-top: 135px;
   height: 270px;
   /* padding-left: 5%;
   padding-right: 5%;
   text-align: center;
   margin-top: -25%;*/
   text-align: center;
   transform: translateY(-100%);
}
.prjt-txt2 {
   text-decoration: none;
   color: #000;
   width: 100%;
   margin: auto;
   /* padding-top: 135px; */
   height: 100px;

}





/* .card-picture:hover {
   opacity: 0.6;
} */

@media screen and (max-width: 1800px) {
   .services__wrapper {
       grid-template-columns: 1fr 1fr 1fr;
   }
}

@media screen and (max-width: 1300px) {
   .services__wrapper {
       grid-template-columns: 1fr 1fr;
   }
}

@media screen and (max-width: 768px) {
   .services__wrapper {
       grid-template-columns: 1fr;
   }
}


/* Footer CSS */

.footer__container {
   bottom: 0;
   background-color: #ffffff;
   padding: 5rem 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   position: absolute;
   width: 100%;
   bottom: -500px;
}

#footer__logo {
   color: #000000;
   display: flex;
   align-items: center;
   cursor: default;
   text-decoration: none;
   font-size: 2rem;
   height: 40px;
}

.social__media--wrap p {
   margin: 0;
   font-size: 8px;
}
.footer__links {
   width: 100%;
   max-width: 1000px;
   display: flex;
   justify-content: center;
}

.footer__link--wrapper {
   display: flex;
}

.footer__link--items {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin: 16px;
   text-align: left;
   width: 160px;
   box-sizing: border-box;
}

.footer__link--items h2 {
   margin-bottom: 16px;
   color: #000;
}

.footer__link--items h3 {
   margin-bottom: 16px;
   color: #000;
   font-weight: bold;
}

.footer__link--items a {
   color: #000;
   text-decoration: none;
   transition: 0.3 ease-out;
}

/* .footer__link--items a:hover {
   color: #ff0000;
   transition: 0.3 ease-out;
} */

#contact H2 {
   font-size: 24px;
}

.social__icon--link {
   color: #000;
   height: 20px;
   font-size: 24px;
   margin-bottom: 0.5rem;
}
.social__icon--link a {
   color: #000;
   height: 20px;
   font-size: 24px;
}

.social__icon--link img {
   color: #000;
   height: 20px;
   font-size: 24px;
}

.social__media {
   max-width: 600px;
   width: 100%;
}

.social__media--wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 90%;
   max-width: 1000px;
   margin: 40px auto 0 auto;
}

.social__icons {
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 240px;
}


@media screen and (max-width: 820px) {
   .footer__links {
       padding-top: 2rem;
   }
   #footer__logo {
       margin-bottom: 2rem;
   }
   .website__rights {
       margin-bottom: 2rem;
   }
   .footer__link--wrapper {
       flex-direction: column;
   }
   .social__media--wrap {
       flex-direction: column;
   }
}

@media screen and (max-width: 480px) {
   .footer__link--items {
       margin: 0;
       padding: 10px;
       width: 100%;
   }
}


/* The Modal (background) */

.modal {
   display: none;
   /* Hidden by default */
   position: fixed;
   /* Stay in place */
   z-index: 1000;
   /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;
   /* Full width */
   height: 100%;
   /* Full height */
   overflow: auto;
   /* Enable scroll if needed */
   background-color: rgb(0, 0, 0);
   /* Fallback color */
   background-color: rgba(0, 0, 0, 0.4);
   /* Black w/ opacity */
   padding-top: 60px;
}


/* Modal Content/Box */

.modal-content {
   background-color: #fefefe;
   margin: 15% auto;
   /* 15% from the top and centered */
   border: 1px solid #888;
   width: 500px;
   /* Could be more or less, depending on screen size */
   border-radius: 10px;
}

#lang {
   display: flex;
   background-color: #fefefe;
   /* margin: 15px auto; */
   /* 15px from the top and centered */
   border: 1px solid #888;
   width: fit-content;
   /* height: 275px; */
   /* Could be more or less, depending on screen size */
   border-radius: 0;
   display: block;
   margin-right: 0;
   margin-top: 0px;
}

#searchm {
   display: flex;
   background-color: #fefefe;
   border-radius: 0px;
   display: block;

   justify-content: center;

   width: 80%;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
}



#id04 {
   position: absolute;
   padding-left: 50px;
   padding-right: 50px;
   height: 150vh;
}


.cse input.gsc-input, input.gsc-input {
   background-image:none !important;
}

#cse form{
border: hidden;
}

#manage {
   background-color: #fefefe;
   margin: 15% auto;
   margin-top: 15%;
   margin-right: auto;
   border: 1px solid #888;
   width: 200px;
   height: 154px;
   border-radius: 10px;
   display: block;
   margin-right: 0;
   margin-top: 0px;
}

.managebtn {
   background-color: #04AA6D;
   color: white;
   padding: 14px 10px;
   margin-bottom: 16px;
   border: none;
   width: 100%;
   justify-content: center;
}

#logout {
   background-color: #f44346;
   color: white;
   border: none;
   cursor: pointer;
   width: 100%;
}
#logout a {
   padding: 14px 64px;
   width: 100%;
   text-decoration: none;
   color: white;
   display: inline-block;
}

#managecontainer {
   display: flex;
}


/* The Close Button */

.close {
   /* Position it in the top right corner outside of the modal */
   position: absolute;
   right: 25px;
   top: 0;
   color: #000;
   font-size: 35px;
   font-weight: bold;
}


/* Close button on hover */

.close:hover,
.close:focus {
   color: red;
   cursor: pointer;
}


/* Add Zoom Animation */

.animate {
   -webkit-animation: animatezoom 0.6s;
   animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
   from {
       -webkit-transform: scale(0)
   }
   to {
       -webkit-transform: scale(1)
   }
}

@keyframes animatezoom {
   from {
       transform: scale(0)
   }
   to {
       transform: scale(1)
   }
}


/* Bordered form */

form {
   border: 3px solid #f1f1f1;
}


/* Full-width inputs */

input[type=text],
input[type=password] {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   box-sizing: border-box;
}


/* Set a style for all buttons */

.loginButton {
   background-color: #04AA6D;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: 100%;
}

#admin {
   /* margin: 8px 0; */
   display: flex;
   width: 16px;
   height: 16px;
   color: #fff;
   /* background-color: #fff; */
   border-radius: 50%;
   border: none;
   fill: rgb(245, 245, 245);
   background-color: hsla(0,0%,100%,0);
}

#adminloggedin {
   /* margin: 8px 0; */
   /* padding: 3px; */
   width: 16px;
   height: 16px;
   color: #fff;
   background-color: #fff;
   border-radius: 50%;
   border: none;
   fill: rgb(255, 72, 72);
}


/* Add a hover effect for buttons */

.loginButton:hover {
   opacity: 0.8;
}


/* Extra style for the cancel button (red) */

.cancelButton {
   width: auto;
   padding: 10px 18px;
   background-color: #f44336;
}


/* Center the avatar image inside this container */

.imgcontainer {
   text-align: center;
   margin: 24px 0 12px 0;
}


/* Avatar image */

img.avatar {
   width: 40%;
   border-radius: 50%;
}


/* Add padding to containers */

.modal-container {
   padding: 16px;
}


/* The "Forgot password" text */

span.psw {
   float: right;
   padding-top: 16px;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
   span.psw {
       display: block;
       float: none;
   }
   .cancelButton {
       width: 100%;
   }
}


/* Language buttons */


/* 
#frBtn {
   background-image: "/assets/00FLAGS/FR.png";
}
*/

button.langBtn {
   vertical-align: middle;
   /* margin-top: 28px;
   margin-right: 15px; */
   /* width: 40px;
   height: 40px; */
   /* border-radius: 50%; */
   border: hidden;
   /* background-color: #fff; */
   background-color: hsla(0,0%,100%,0);
}
.lngTxtDiv img{
   width: 48px;
   height: 24px;
   margin-right: 16px;
}



.langBtn {
   vertical-align: middle;
   margin-top: 28px;
   margin-bottom: 28px;
   margin-right: 15px;
   /* width: 40px;
   height: 40px; */
   /* border-radius: 50%; */
   border: hidden;
   background-color: #fff;
}

#langBtn2 {
   vertical-align: middle;
   display: flex;
   /* margin-top: 28px;
   margin-right: 15px; */
    /* width: 60px; */
   /*height: 40px; */
   /* border-radius: 50%; */
   border: hidden;
   /* background-color: #fff; */
   background-color: hsla(0,0%,100%,0);
}
.lngTxtDiv{
   display: flex;
}
.lngTxt{
   height: 24px;
   line-height: 20px;
}

#actutxt .slick-slide{
   opacity: .5;
}
#actutxt .slick-current{
   opacity: 1;
}

.rowtxt{
   width: 100%;
}

/* .actutxt {
   
    display: inline-block;
} */


#actutxt {
  /* line-height: 5; */
  display: inline-block;
  width: 100%;
  /* position: absolute;
  top: 50%;
  height: 10em;
  margin-top: -5em; */
}


/* resizeable slideshow */

html,
body {
   height: 100%;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
   background: #fff;
}

/* hide scrollbar but allow scrolling */
html,body {
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* for Firefox */
   overflow-y: scroll; 
}

body::-webkit-scrollbar {
   display: none; /* for Chrome, Safari, and Opera */
}
html::-webkit-scrollbar {
   display: none; /* for Chrome, Safari, and Opera */
}

.slick-slide img {
   width: 100%;
}

.slick .item img {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(.8);
   width: 100%;
   height: auto;
   object-fit: contain;
   opacity: 1;
   filter: none;
}

#slick button {
   height: 0px;
   width: 0px;
   font-size: 0px;
   color: rgba(0, 0, 0, 0.0);
   background: rgba(255, 255, 255, 0);
   border: none;
}

#slick .slick-arrow {
   z-index: 900;
}

#slick .slick-arrow::before {
   color: white;
   cursor: pointer;
   font-size: 30px;
}

#slick .slick-prev {
   position: absolute;
   top: 50%;
   left: 0px;
   transform: translateX(10px);
}

#slick .slick-next {
   position: absolute;
   top: 50%;
   right: 00%;
   transform: translateX(-40px);
}

#slick .slick-prev::before {
   content: "◀";
   /*   font-weigth: bold; */
   background: rgba(0, 0, 0, 0.0);
   padding: 10px 10px 10px 0px;
}

#slick .slick-next::before {
   content: "▶";
   /*   font-weigth: bold; */
   background: rgba(0, 0, 0, 0.0);
   padding: 10px 0px 10px 10px;
}




/* slick2 agence.php */


.slick2 .item img {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(.8);
   width: 100%;
   height: auto;
   object-fit: contain;
   opacity: 1;
   filter: none;
}

#slick2 button {
   height: 0px;
   width: 0px;
   font-size: 0px;
   color: rgba(0, 0, 0, 0.0);
   background: rgba(255, 255, 255, 0);
   border: none;
}

#slick2 .slick-arrow {
   z-index: 900;
}

#slick2 .slick-arrow::before {
   color: white;
   cursor: pointer;
   font-size: 30px;
}

#slick2 .slick-prev {
   position: absolute;
   top: 50%;
   left: 0px;
   transform: translateX(10px);
}

#slick2 .slick-next {
   position: absolute;
   top: 50%;
   right: 00%;
   transform: translateX(-40px);
}

#slick2 .slick-prev::before {
   content: "◀";
   /*   font-weigth: bold; */
   background: rgba(0, 0, 0, 0.0);
   padding: 10px 10px 10px 0px;
}

#slick2 .slick-next::before {
   content: "▶";
   /*   font-weigth: bold; */
   background: rgba(0, 0, 0, 0.0);
   padding: 10px 0px 10px 10px;
}


/* .actutxt {
   line-height: 2em;
} */
.c1 {
   float: left;
   width: 2%;
}
.c2 {
   float: left;
   width: 98%;
}


 /* Clear floats after the columns */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }




 /* mobile menu  warning*/


/* #mobile-menu:before{
   content: '';
   position: absolute;
   border: 5px solid rgb(252, 95, 95);
   border-radius: 20%;
   top: -10px;
   left: -11px;
   right: -11px;
   bottom: -10px;
   animation: hithere 2s linear infinite;
   animation-iteration-count: 2;
   opacity: 0;
   z-index: 1000  ;
} */


.hithere{
   /* content: '';
   position: absolute;
   border: 5px solid rgb(252, 95, 95);
   border-radius: 20%;
   top: -20px;
   left: -23px;
   right: -23px;
   bottom: -20px; */
   animation: hithere 1s ease infinite;
   animation-iteration-count: 2;
   animation-delay: 2.5s;
   opacity: 1;
   z-index: 1000  ;
   transform-origin: center;

}

@keyframes hithere {
   30% { transform: scale(1.2); }
   40%, 60% { transform: rotate(-20deg) scale(1.2); }
   50% { transform: rotate(20deg) scale(1.2); }
   70% { transform: rotate(0deg) scale(1.2); }
   100% { transform: scale(1); }
 }


/* @keyframes bloom2 {
   0%{
       transform: scale(.5);
   }
   50%{
       opacity: 1;
   }
   100%{
       transform: scale(.85);
   }
} */

#redostyle{

   fill: red;
}



#intro3 {
   background-image: url("assets/SPLASHV3.jpg");
   position: relative;

   /* Full height */
   height: 100%;

   /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;    



   /* display: flex;
   flex-flow: column;
   height: 100%;
   z-index: 19000;
   background-color: #fff; */
}



.scrollable{
   overflow-y: scroll;

 }

.intro3 {
   position: absolute;
   top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /* The image used */


 /* Full height */
 width: 80%;

 /* Center and scale the image nicely */


   /* flex: 1 1 auto;
  
   z-index: 20000;
   background-color: #fff; */
}


*{
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

   .sortPrjts{
      margin: 0   ;
      width: 40px;
      padding: 0;
   }
.sortBtn img{
   vertical-align: top;
   height: 15px;
   /* margin-top: 5px; */
}

.sortOn{
   color: red;
}

.sortOff{
   color: #000;
}

    ul#sortprjt, ul.sub1 {
        list-style-type: none;
        z-index: 800;
        margin: 0;
        width: 40px;
        height: 25px;
        padding-left: 0;
         /* outline: 1px solid red;  */

    }

    ul#sortprjt li {
       /* outline: 1px solid blue;  */
        width: 40px;

        text-align: center;
        position: relative;
        float: left;
        margin-right: 4px;
    }

    ul#sub1 li  {
      /* outline: 1px solid green;  */
       width: 100px;

   } 
   ul#sub1 {
     display: block;

   } 
    ul#sortprjt button {
         /* outline: 1px solid red;  */
        color: #000000;
        /* display: block; */
        width: 40px;
        height: 20px;
        background-color: #FFF;
        line-height: 25px;
        border: hidden;
        padding-top: 2px;

    }


    li#sortBtn  {
       /* outline: 1px solid red;  */
      color: #000000;
      display: block;
      margin: 0;
      margin-top: 5px;
      padding: 0;
      border: hidden;
      height: 20px;
      width: 40px;

  }

  #sortBtn   {
    /* outline: 1px solid red;  */
   color: #000000;
   display: block;

   height: 25px;
   background-color: #FFF;

   border: hidden;

}


    /* ul#sortprjt .sub1 li {
        outline: 1px solid green;
         
     } */

    ul#sortprjt .sub1 button {
       height: 40px;
       margin-top: 3px;
       margin-bottom: 3px;
       border-radius: 0px; 
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       width: 100px;
       text-align: left;
       padding-left: 10px;
    }

     ul#sortprjt li:hover > button {
        background-color: rgb(255, 255, 255);
         color: red;
     }

     ul#sortprjt li:hover  button:hover {
        background-color: rgb(255, 255, 255);
         color: red;
     }

     ul#sortprjt ul.sub1 {
        display: none;
        position: absolute;
        top: 25px;
        left: 0px;

     }

     ul#sortprjt button#SURFACE{
      color: #000;
     }
     ul#sortprjt button#CODEAFF{
      color: #f00;
     }
     ul#sortprjt button#MONTANT{
      color: #000;
     }

     ul#sortprjt li:hover ul.sub1 {
        display: block;

     }


     button#search    {
      height: 0px;
      width: 40px;
      display: block;
   }

   ul.sub1 li > button {
      width: 80px;
   }
.sub1Btn {
   width: 80px;
}

.hidden {
   display: none;
}


/* .input_on{
   color: red;
} 

.input_off{
   color: black;
} */

.card-picture {
   display: inline;
   position: relative;
   /* margin: 1% 1%; */
   width: 100%;
   height: 300px;
   object-fit: cover;
   color: rgba(255, 255, 255, 0);
   font-size: 0;
}



.carddiv{
   height: 300px;
   overflow: hidden;
}
      div#prjtCardDisplay {
         height: 100%;
         width: 100%;
         max-width: 1300px;    
         padding-bottom: 250px;
     }



     div#prjt__card {
         display: block;
         /* position: relative; */
         height: 400px;
         /* width: 100%; */
         color: #ff0000;
         padding-right: 25px;
     padding-left: 25px;

     }

     a#prjt__card_a {
         position: relative;
         height: 300px;
         font-size: 1.5rem;
         font-weight: bolder;
         text-decoration: none;
         width: 100%;
         color: #ff0000;
         display: block;
         /* overflow: hidden; */
       }

     #prjt__txt {
         vertical-align: middle;
         text-align: center;
     }

      .prjt-txt3 {
         text-transform: uppercase;
         text-decoration: none;
         font-weight: 200;
         color: #000;
         width: 100%;
         margin: auto;
         /* padding-top: 135px; */
         /* height: 60px; */
         font-size:.6em;
         font-weight: bold;
         background-color: #FFF;
         line-height: 1.25rem;

     }
.prjt-txt4 {
/* text-transform: uppercase; */
   text-decoration: none;
   color: rgb(133, 133, 133);
   width: 100%;
   margin: auto;
   margin-top: 2px;
   /* padding-top: 135px; */
   /* height: 40px; */
   font-size:.5em;
   font-weight: 300;
}
hr {
   color: #000;
   position: relative;
   display: block;

   border-top: 4px solid #000;

      margin-left: 0;
   padding: 0;
   width: 30px;
}

.hrbar{

   height: 10px;
   background-color: #FFF;

}

.hrbar hr{

   height: 10px;
   background-color: #FFF;
   border-top: 4px solid #000;
   opacity: 1;
   margin-top: 13px;
}


  /* a:hover div {
   opacity: 1;
   color: #000000;
   background-color: rgba(255, 255, 255, 0.5);
} */

.cardtest:hover img{
   /* transform: scale(1.15); */
   opacity: .5;
   transition: all 0.1s  ease;

}

.cardtest img{

   transition: all 1s cubic-bezier(.47,0,.74,.71);

}

/* #projets__menu{
   max-width: 1300px;
justify-content: left;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
} */

.projets__menu button{
   text-transform: uppercase;
   padding-right: 10px;
   font-size: small;
}

.vl {
   border-left: 1px solid #000;
   height: .8rem;
   padding-right: 10px;
   margin-top: auto;
   margin-bottom: 4px;
 }



 .highlight {

   border-top: 2px solid #ff0000;

   position: absolute;

   /* margin-top: 14px; */
   margin-left: 250px;


}
.highlightTxt {

   color: #ff0000;
}

#gotop{
   display: block;
   position: absolute;
bottom: 20px;
left: 5px;

}
#gotop img{
   height: 32px;
   transform: rotate(90deg);
   background-color: rgba(255,255,255,.01);
}
#topdiv{
   height: 0;
   top: 0;
}

.st0{fill:#FFFFFF;}
.st1{fill:#000000;}
.st1:hover{fill:#ff0000;}
.bg{fill: rgba(255,255,255,0)}
.bg:hover ~ .st1 {    fill:#ff0000;}
.st0:hover ~ .st1 {    fill:#ff0000;}



.gs-image{
   height: 40px !important;
width: fit-content !important;
max-width: 40px !important;
}

.gsc-result{
   text-transform: uppercase;
}
.gs-title{
   color: red !important;
}
.gs-webResult .gs-visibleUrl {
   color: #fff !important;
   height: 1px !important;
   font-size: 1px !important;
 }

 .gsc-above-wrapper-area {
   height: 1px;
   border-bottom: 0px solid #fff !important;
   color: #fff;
 }

 .gsst_a .gscb_a {
   color: #d0d0d0ad !important;
   cursor: pointer !important;
 }
 .gsst_a{
color: #d0d0d070 !important;

 }
 .gsst_a:hover .gscb_a {
   color: #d0d0d0f5 !important;
 }

 .gsc-search-button-v2:hover {
   border-color: #c06666 !important;
   background-color: #c06666 !important;
 }
 .gsc-search-button-v2 {
   border-color: #c4c4c4 !important;
   background-color: #c4c4c4 !important;
 }

 .viewWindow{
   position: absolute;
   top: 0;
   bottom: 0;
   pointer-events: none;
   height: 100%;
   width: 100%;
 }