/*Reset navigator*/
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}


/*Style NLUIX global*/

html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1,6;
}

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}

body {
background-color: #fff;
}


/*Nav golbale*/

.inactive {
  background-color: #3B3A38;
  padding: 20px;
}

.logo-nav-nluix {
  width: 100%;
  height: auto;
}

.logo-nav-nluix:hover {
  background-color: transparent;
  border: none;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.p-hide {
  visibility: hidden;
}
.nav-intro {
  min-width: 900px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding: 0px;
  background-color: #fff;
  border: solid 1px;
  border-radius: 4px;
  background-image: linear-gradient (to left, rgba(235, 188, 255, 0.8), rgba(197, 50, 122, 0.9));
  box-shadow: 0px 0px 4px rgba(197, 50, 122, 0.7);
  text-align: center;
  position: relative;
  bottom: 20px;
}

.nav-intro a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #1B1619;
  text-align: center;
  padding: 10px;
  margin: 0px auto;
}

.nav-intro a:hover {
  color: #bc257b;
  border-bottom: 1px solid #bc257b;
  padding: 10px;
  background-color: #F7EDF3 ;
margin: 0px auto;
}
/*Fin Nav globale*/

/*Ico btn*/
.ico-btn-hero {
  background-color: #fff;
  position: relative;
  border-style: none;
  margin: 5px;
}

.ico-btn-hero:hover {
background-color: #F7EDF3;
border-style: none;
margin: 5px;
}
/*Fin Ico btn*/

/*Alerts*/
.encours-mise-en-ligne {
  color: #246AB9;
  padding: 0px;
  background-color: #E0EFFF;
  border: 1px solid #246AB9;
  border-radius: 8px;
  margin: 10px auto;
}

.encours-mise-en-ligne p {
  text-align: left;
  justify-content: center;
  padding: 10px;
  margin: 5px auto;
}

.encours-mise-en-ligne span {
  margin-right: 10px;
}

/*Fin alerts*/

h1 {
  font-size: 2.4rem;
  color: rgb(50, 50, 50);
}

body, html {
  height: 100%;
}

::selection {
  color: #63333D;
  background-color: #FCFAE5;
}

.breadcrumb {
max-width: 1440px;
text-align: center;
padding: 30px 0px 2px 0px;
width: 100%;
border-bottom: solid 1px #1B1619;
}

.breadcrumb a {
color: #115097;
}

.ico-reseau {
width: 45px;
position: relative;
right: 20px;
top: 6px;
}

.ico-reseau button:hover, .show, .btn:focus {
background-color: #Fff;
border: 1px solid #bc257b;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.item-over img {
background-color: #63333d;
padding: 5px;
border: 1px solid #63333D;
border-radius: 4px;
}

.item-over:hover img {
box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.item-over:hover {
background-color: #FCFAE5;
color: #bc257b;
}

.ariane {
display: flex;
max-width: 1420px;
margin: 0px auto 20px auto;
}

hr {
margin: 30px auto 30px auto;
}

.hr-50 {
width:50%;
margin: 25px auto 25px auto;
}

input[type=text], input[type=tel], input[type="email"], select, textarea {
border: 1px solid #494548;
border-style: none;
}

#sujet {
  border: 1px solid #4485C5;
  background-color: #5E2608;
  width: 100%;
}

input[type=text]:active, input[type=tel]:active, input[type="email"]:active, select:active, textarea:active, #sujet:active {
  border: 1px solid #bc257b;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

input[type=email]:active {
  border: 1px solid #bc257b;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
  transition: all 0.5s;
}

#btn-nluix-topnav {
  display: none;
  background-color: #fff;
  border: 1px solid #bc257b;
  border-radius: 4px;
  padding: 10px 20px;
  margin-right: 30px;
  position: fixed;
  bottom: 100px;
  right: 20%;
  opacity: 1;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
  transition: all 0.3s;
}

#btn-nluix-topnav:hover {
  background-color: #F7EDF3;
  bottom: 110px;
  transition: all 0.3s;
}

#btn-nluix-topnav:hover img {
  margin-bottom: 5px;
  transition: all 0.3s;
}

/**/


/*Sections Intro*/
#accueil-intro {
height: 100%;
width: 100%;
display: block;
}

#accueil-intro-1 {
height: 100%;
width: 100%;
display: block;
}


/*Fin sections intro*/

/* The hero image */
#hero-image, #hero-image-1, #hero-image-2, #hero-image-3 {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));

/* Set a specific height */
height: 100%;

/* Position and center the image to scale nicely on all screens */
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: relative;
margin: 0px auto 50px auto;
}

#hero-image .container, #hero-image-1 .container, #hero-image-2 .container, #hero-image-3 .container {
top: 10%;
position: relative;
} 

/*Logotype-Intro*/
.logo-hero {
width: 100%;
  margin: 20px auto 0px auto;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}

.logo-hero img {
width: 100%;
max-width: 350px;
}

.hero-text nav a {
text-align: center;
}

.logo-hero button {
  width:100%;
}

.h1-hero {
font-weight: bold;
font-size: 4rem;
padding: auto;
margin-bottom: 10px;
}

.p-hero {
font-size: 2rem;
line-height: 1.5;
margin: 0px auto;
padding: 10px;
}

.lighter {
font-weight: lighter;
}

.mintypo {
font-size: small;
}
/**/

/* Place text in the middle of the image */
.hero-text {
font-size: 2.4rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(50, 50, 50);
animation: mymove 0.3s ease-in;
}

.hero-text-2 {
font-size: 2.4rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(50, 50, 50);

}

.menuhero-button {
text-align: center;
margin: 0px auto;
}

.menuhero-button nav {
max-width: 650px;
margin: 50px auto 0px auto;
}

.menuhero-button button a img, .hero-text button a img, .hero-text-2 button a img {
animation: btnmove 1.4s infinite;
animation-delay: 5s;
}

.animtext-opacity {
animation: animtext-opacity 0.5s 0.8s linear;
}

.animtext-opacity1 {
animation: animtext-opacity 1.1s 1.4s linear;
}

.animtext-opacity2 {
animation: animtext-opacity 1.4s 2s linear;
}

.mymove {
animation: mymove 0.4s linear;
}

/**/
/* Style the navbar */
#navbar {
position: sticky;
top: 5px;
font-size: 2rem;
  width: 95%;
  margin: 0px auto 0px auto;
  background-color: #fff;
  border: solid 1px;
  border-radius: 10px;
  background-image: linear-gradient (to left, rgba(235, 188, 255, 0.8), rgba(197, 50, 122, 0.9));
  box-shadow: 0px 0px 4px rgba(197, 50, 122, 0.7);
  justify-content: center;
  padding: 0px;
  
}

/* Style the navbar links */
#navbar a {
font-size: 1.2rem;
  float: left;
  color: #1B1619;
  text-align: center;
  padding: 10px ;
  text-decoration: none;
  font-size: 16px;
  border-radius: 4px;
  margin: 0px auto;
  height: 100%;
}

/* Style the logo */


#navbar #logo {
 
  font-weight: bold;
  transition: 0.4s;
  background-image: url(Assets/images/Logo-Typo.svg);
}


#logo img {
 width: 75%;
}

/* Links on mouse-over */
#navbar .navbar-brand:hover {
  background-color: #F7EDF3;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

#navbar a:hover {
  background-color: #F7EDF3;
  color: #bc257b;
  border-bottom: 1px solid #bc257b;
}

/* Style the active/current link */
#navbar a.active {
  background-color: #f7edf3;
  color: #bc257b;;
  border-bottom: 1px solid #bc257b;
}

/* Display some links to the right */
.navbar-right {
  float: right;
}

.left-align {
float: left;
}

.center-align {
float: none;
}

/*Mobil hidden*/
.mobile-container {
visibility: hidden;
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}

.topnav {
visibility: hidden;
overflow: hidden;
background-color: #fff;
position: relative;
box-shadow: 0px 1px 4px rgba(000, 000, 000, 0.5);
}

.topnav #myLinks {
display: none;
}

.topnav a {
color: #bc257b;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

.topnav a.icon {
background: #bc257b;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
}

.topnav a:hover {
background-color: #F7EDF3;
color: #bc257b;
}

/*Mobil end*/
/*Section Presentation*/
#section-presentation {
text-align: center;
padding-top: 5px;
max-width: 1920px;
margin: 0px auto;
}

.carousel-presentation {
margin-bottom: 50px;
}

.carousel-presentation-p {
margin-bottom: 50px;
}

.carousel-indicators {
bottom: -30px;
}

.carousel-indicators [data-bs-target] {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #bc257b;
}

.carousel-item p {
position: relative;
text-align: center;
padding: 20px;
}

.carousel-item img {
  width: 100%;
  height: auto;
}

.carousel-control-prev, .carousel-control-next {
height: 78%;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
background-color: rgba(000, 000, 000, 0.5);
height: 78%;

}
/*Fin carousel*/

/*********************************Button NLUIX*******************************/
.btn-nluix {
  text-align: center;
  display: block;
  color: #F7EDF3;
height: auto;
max-width: 450px;
width: 100%;
background-color: #bc257b;
border: solid 1px #bc257b;
border-radius: 4px;
margin-left: 20px;
padding: 10px 20px;
box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.5);
text-decoration: none;
}

.btn-nluix:hover {
background-color: #F7EDF3;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.5);
}

.btn-nluix:hover  {
color: #bc257b;
background-color: #F7EDF3;
}



.btn-nluix-outline {
  text-align: center;
  text-decoration: none;
  color: #bc257b;
float: right;
height: auto;
max-width: 450px;
width: 100%;
background-color: #Fff;
border: solid 1px #bc257b;
border-radius: 4px;
margin-left: 20px;
padding: 10px 20px;
box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.5);
}


.btn-nluix-outline:hover  {
color: #bc257b;
background-color: #F7EDF3;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.5);
}



/*Avec Icon pour menu*/
.btn-nluix-ico {
background-color: #Fff;
border: none;
text-align: center;
background-size: contain;
background-image: url(Assets/Images/icon/btn-menu-eco.svg);
}

#navbar .btn-nluix-ico a {
padding-top: 0px;
margin-top: 0px;
}

.btn-nluix-ico:hover, .btn-nluix-ico a:hover {
color: #bc257b;
background-color: #F7EDF3;
background-image: #bc257b;
}

.btn-nluix-ico img {
min-width: 18px;
width: 30%;
background-repeat: no-repeat;
top: 0px;
position: relative;
margin-bottom: 0px;
}

#navbar .dropdown-menu {
z-index: 1;
overflow: visible;
}

/*Mobil btn anim menu*/

.btn-anim-mobil {
  color: #fff;
display: inline-block;
cursor: pointer;
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}

.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
/*Fin btn anim mobil*/

/*******************Fin button**************/

/**************************************Section presentation*************************************************/
.row-nluix {
margin-top: 50px;
background-color: #F7F7F7;
padding: 20px;
display: contents;
}

.id-card {
text-align: center;
max-width: 300px;
min-width: 77px;
width: 100%;
height: auto;
background-color: #fff;
margin-bottom: 50px;
padding: 10px;
}

.separator-right {
border-right: solid 1px #bbb;
}

.id-header-card {
width: 100%;
background-image: url(Assets/Images/Img-Presentation/Id-photo.jpg);
background-size: contain;

}

.id-header-card img {
width: 75%;
}

.div-flex {
display: flex;
padding: 20px;
}


.h1-present, .p-present {
text-align: left;
padding: 10px;
}

.bloc-gauche-presentation {
display: block;
}

.bloc-droite-presentation {
background-size: contain;
}

.bloc-droite-presentation img {
max-width: 687px;
width: 100%;
background-image: url(Assets/Images/Img-Presentation/background-img-firstblock.png);
}


.card-content-left {
width: 35%;
background-color: #Fff;
}

.card-content-left ul {
font-size: 1rem;
text-align: center;
margin: 0px auto;
width: 100%;
background-color: #Fff;
padding: 10px;
text-align: left;
}

.card-content-left li {
list-style: none;
font-weight: lighter;
}

.card-content-left p {
font-weight: normal;
}

.btn-nluix-noborder {
  color: #bc257b;
  text-decoration: none;
width: 100%;
background-color: #F7EDF3;
border: solid 1px #F7EDF3;
border-radius: 4px;
margin: 20px auto 10px auto;
padding: 10px;
box-shadow: 0px 0px 2px rgba(000, 000, 000, 0.3);
}

.btn-nluix-noborder a {
color: #bc257b;
text-decoration: none;
}

.btn-nluix-noborder:hover {
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.5);
} 

.card-photo-present {
width: 100%;

}

.card-photo-present img {
background-image: url(Assets/Images/img-presentation/card-photo-present.jpg);
width: 100%;
background-size: cover;
height: 100%;
}

.btn-nluix-right {
  text-decoration: none;
  color: #F7EDF3;
float: right;
height: auto;
max-width: 450px;
width: 100%;
background-color: #bc257b;
border: solid 1px #bc257b;
border-radius: 4px;
margin-left: 20px;
padding: 10px 20px;
box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.5);
}

.btn-nluix-right:hover {
background-color: #F7EDF3;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.5);
}



.btn-nluix-right:hover  {
color: #bc257b;
background-color: #F7EDF3;
}

.bloc-newsletter-present {
background-image: url(Assets/Images/img-presentation/background-bottom-page.svg);
background-clip: content-box;
position: relative;
height: auto;
}

.bg-bottom-nl {
width: 100%;
text-align: center;
height: auto;
max-height: 500px;
width: 100%;
margin: 0px auto;
position: absolute;
background-position: center;
z-index: -1;
bottom: -50px;
left: 0px;
}

.bg-bottom-nl img {
margin: 0px auto;
text-align: center;

}

.newsletter {
text-align: center;
max-width: 900px;
width: 100%;
margin: 20px auto 20px auto;
padding: 20px;
background-color: #Fff;
box-shadow: 0px 0px 12px rgba(95, 7, 66, 0.3);
border: solid 1px rgba(95, 7, 66, 1);
border-radius: 12px;
background-image: linear-gradient(from left #A67AAC, to #4485C5 );
}

.header-newsletter img {
width: 100%;
text-align: center;
}

.newsletter form {
text-align: center;
padding: 20px;
border: solid 1px rgba(95, 7, 66, 1);
border-radius: 8px;
background-image: linear-gradient(from left #A67AAC, to #4485C5 );
}

.btn-form {
color: #Fff;
width: 100%;
background-color: #bc257b;
}

.btn-form:hover {
color: #bc257b;
width: 100%;
background-color: #F7EDF3;
}

.nluixactive:focus {
border: solid 1px #bc257b;
box-shadow: 0px 0px 4px rgba(95, 7, 66, 0.3);
}

/*Blog card*/
.blog-card {
float: left;
position: relative;
width: 100%;
}

.blog-card ul {
float: left;
position: relative;
width: 40%;
height: 100%;
}

.blog-card img {
width: 60%;
float: right;
height: 100%;
}


/*end blog card presentation*/
/*****************************************Fin section presentation**************************************/


/*******************************************Start page projets*****************************************/

.section-projets {
  max-width: 1920px;
  width: 100%;
margin: 0px auto;
justify-content: center;
}

.bg-grey-nluix {
background-color: #f7f7f7;

}

/*Bloc réalisation*/
.projet-rea {
  display: flex;
background-color: #EDFFE8;
border: solid 1px #EDFFE8;
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
padding: 20px;
margin-bottom: 20px;
}

.projet-rea h2, .projet-rea p {
  color: #042B0E;
}
/*End bloc réa*/

/*Bloc en cours*/

.bloc-edito {
    display: flex;
  background-color: #FFF0E8;
  border: solid 1px #FFF0E8;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
  padding: 20px;
  margin-bottom: 20px;

  }
  
  .bloc-edito h2, .bloc-edito p {
    color: #5E2608;

}

/*Fin bloc en cours*/

/*Bloc a venir*/

.bloc-a-venir {
  display: flex;
background-color: #F6F6F6;
border: solid 1px #F6F6F6;
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
padding: 20px;
margin-bottom: 20px;

}

.bloc-a-venir h2, .bloc-a-venir p {
  color: #594E4E;

}

/*End bloc a venir*/

/*Bloc sondage*/

.bloc-sondage {
  background-color: #fff;
  color: #63333D;
  border: 1px solid #bc257b;
  border-radius: 10px;
background-image: linear-gradient(from left #A67AAC, to #C5327A );
margin: 50px auto 10px auto;
box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
padding: 20px;
}

/*End bloc sondage*/

/*Container / separator*/

.container-nluix {
  max-width: 1920px;
  width: 100%;
  margin: 20px auto;
}

.separator-right-projet {
  text-align: center;
  width: 10%;
  margin: 20px 20px 20px 20px;
  border-right: solid 1px #c8c8c8;
}

/*End container / separator*/

/*card-projets*/

.card-projet {
  max-width: 354px;
  width: 100%;
  margin: 10px 20px;
}

.bg-img-projet {
    position: relative;
}

.card-projet .card {
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.card-projet p {
  margin-bottom: 5px;
}

.card-projet .card-footer {
  border-top: none;
  background-color: #fff;
}



.card-projet .card-header {
  background-image: url(Assets/Images/img-presentation/img-projets/header-card-anciens-projet.jpg);
  background-size: cover;
  padding: 0px;
}

.card-projet li {
  margin: 10px auto;
  line-height: 1.3;
}

.card-projet .card-header img {
  width: 100%;
  border-radius: 8px 8px 0px 0px;
}

.bloc-btn-projet {
  display: flex;
}

.bloc-btn-projet a {
  text-align: center;
  width: 100%;
  margin: 0px auto;
}

/*End card projets*/

/***********************************************End page projets*******************************************/


/********************************************Start page expertises*************************/

.section-expertises {
  max-width: 1920px;
  width: 100%;
margin: 0px auto;
justify-content: center;
}

.section-expertises-bg {
  background-image: url(Assets/Images/img-presentation/background-bottom-page.svg);
}

.bloc-ui, .bloc-dev, .bloc-illu, .bloc-brand, .bloc-video {
  display: flex;
  padding: 0px;
  border: 1px solid #bc257b;
  border-radius: 10px;
  background-color: #fff;
  
}



.bg-ui, .bg-dev, .bg-illu, .bg-brand, .bg-video {
  position: relative;
  margin: 0px;
  padding: 0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(Assets/Images/img-presentation/Desktop-PartRight-Section-1.jpg);
}
.center-titre {
  width: 100%;
  padding: 20px;
  background-color: rgba(000, 000, 000, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-titre-light {
  display: block;
  width: 100%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-ui img, .bg-dev img, .bg-illu img, .bg-brand img, .bg-video img {
  width: 100%;
  height: 100%;
  border-radius: 10px 0px 0px 10px;
  background-size: cover;
}


.droite-ui, .droite-dev, .droite-illu, .droite-brand, .droite-video {
  padding: 20px;
}

.droite-ui li, .droite-dev li, .droite-illu li, .droite-brand li, .droite-video li {
  line-height: 1.3;
  margin-bottom: 10px;
}

.expertises-content, .expertises-content-2 {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
}

.margin20-right {
  margin: 0px 10px 0px 0px ;
}

.margin20-left {
  margin: 0px 0px 0px 10px ;
}

.txt-brand-color {
  color: #bc257b;
}

.txt-brand-color-light {
  color: #F7EDF3;
}

/*********************************************End page expertises**************************/


/********************************* Start page blog ****************************************/

.section-blog {
  max-width: 1920px;
  width: 100%;
margin: 0px auto;
justify-content: center;
}

.btn-fix {
  position: relative;
  background-color: #fff;
}

.btn-blog {
  background-color: transparent;
  border: none;
}

.btn-blog a {
  color: #FCFAE5;
  font-size: 1.4rem;
  padding: 10px 50px;
  background-color: rgba(000, 000, 000, 0.5);
  text-decoration: none;
  border-radius: 4px;
  margin: 0px 10px;
}

.btn-blog:hover {
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.btn-blog:hover img {
  margin-left: 50px;
}

.btn-blog span {
  color: #FCFAE5;
  font-size: 1.4rem;
  padding: 10px;
  background-color: rgba(000, 000, 000, 0.5);
  text-decoration: none;
  border-radius: 4px;
  margin: 0px 10px;
}

.btn-blog img {
  border-radius: 10px;
  transition: margin 0.5s;
}

.btn-fix img {
  border-radius: 10px;
  box-shadow: 0px 1px 4px rgba(000, 000, 000, 0.3);
}

.button-bottom {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.button-bottom a {
  border-radius: 10px;
  padding: 20px;
  color: #FCFAE5;
  text-decoration: none;
  background-color: rgba(000, 000, 000, 0.5);
}


/*****************Part blog photo*******************************/
.content-photo {
  display: flex;
  position: relative;
  background-color: #fff;
}

.content-photo img {
  border-radius: 10px;
  box-shadow: 0px 1px 4px rgba(000, 000, 000, 0.3);
}

.text-blog-content {
  display: block;
 width: 100%;
  position: relative;
  
}

.txt-blog-content .container {
  padding: 20px;
  width: 25%;
  height: 40%;
  position: absolute;
  bottom: 0px;
  Left: 0px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0px 10px 0px 10px;}

.text-blog-content h2 {
  background-color: rgba(000, 000, 000, 0.5);
  left: 5px;
  top: 5px;
} 


.ul-blog {
  padding-left: 5px;
  text-align: left;
  list-style: none;
}


.section-article {
  border-radius: 10px;
  background-color: #F7EDF3;
  padding: 20px;
  margin: 20px 10px;
  max-width: 900px;
  width: 100%;
}

.end-article {
  margin: 10px auto;
  border-top: 1px solid #c8c8c8;
  padding: 10px;
  border-bottom: 1px solid #1B1619;
}

.btn-bottom-right {
  float: left;
  text-align: center;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
  text-decoration: none;
  padding: 10px 20px;
  margin: 0px auto;
  color: #F7EDF3;
  background-color: #bc257b;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.btn-bottom-right:hover {
  text-decoration: none;
  color: #bc257b;
  background-color: #F7EDF3;
 
}

.over-img-blog img {
  width: 100%;
  height: auto;
  transition: all 0.3s;
}

.over-img-blog img:hover {
  width: 110%;
box-shadow: 0px 0px 12px rgba(000, 000, 000, 0.3);
transition: all 0.3s;
}

/*********************End blog photo ***************************************/


/*****************Part blog vidéos*******************************/
.bloc-btn-return {
  text-align: center;
  display: flex;
  margin: 10px auto;
  padding: 10px;
  justify-content: center;
}

.btn-return {
  background-color: #fff;
  padding: 10px 20px;
  border: none;
  color: #494548;
  text-decoration: none;
  padding: 10px;
}

.btn-return:hover {
  border-radius: 8px;
 box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.id-header-card a {
  color: #115097;
}

.bloc-btn-return h1 {
  color: #494548;
  border-left: 1px solid #c8c8c8;
  padding-left: 20px;
}

.btn-return:hover img {
  animation: btn-return 0.5s infinite;
}

.video-bg-250 {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 250px;
  background-color: #fff;
  overflow: hidden;
}

.video-bg-250 .video {
width: 100%;
height: 100%;
}



/*********************End blog vidéos ***************************************/

/*********************************** End blog  ********************************************/

/*********************Contact*********************************/

.section-contact {
  max-width: 1920px;
  width: 100%;
margin: 0px auto;
justify-content: center;
height: auto;
}

.section-bg-contact {
  position: relative;
}

.section-expertises-bg {
margin: 0px auto;
}

.form-nluix {
  height: auto;
  width: 100%;
  position: relative;
}

.form-nluix header {
  position: relative;
  padding: 20px;
  color: #1B1619;
  background-image: linear-gradient(to top left, #fff, #F7EDF3 ,#fff);
  border-radius: 10px 10px 0px 0px;
  box-shadow: 0px 2px 4px rgba(000, 000, 000, 0.3);
}

.form-select {
  border: 1px solid #1B1619;
}

.form-option {
  background-color: #fff;
}

.form-option:hover {
  background-color: #F7EDF3;
  color: #bc257b;
}

.row-id {
  
  padding: 20px;
  border-top: 1px solid #c8c8c8;

  border-radius: 0px;
  margin-bottom: 20px;
}

.form-nluix h3 {
  text-align: left;

}

.form-nluix p {
 padding: 10px;
  position: relative;
  text-align: right;
  font-weight: 300;
  font-size: medium;
}

.motif-contact {
  
  display: block;
}

.content-form-left {
  margin: 0px 20px 20px 20px;
  position: relative;
 height: auto;
  max-width: 950px;
  width: 100%;
  border: 1px solid #bc257b;
  border-radius: 10px;
  background-color: #fff;
  padding: 0px;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

input[type=text], .form-nluix input[type=tel], .form-nluix input[type=email]  {
  border: 1px solid #494548;
  border-radius: 4px;
  }

.input-nluix {
  width: 100%;
  border: 1px solid #594E4E;
  border-radius: 4px;
  background-color: #fff;
  padding: 10px;
  margin: 0px auto 10px auto;
  resize: none;
  outline: none;
}

.input-nluix:focus {
  border: 1px solid #bc257b;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.input-nluix:active[type=text] {
  border: 1px solid #bc257b;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.red-alert {
  color: #D93E3E;
}

select {
  padding: 10px;
  background-color: #fff;
  margin: 0px 0px 20px 0px;
  border: 1px solid #594E4E;
border-radius: 4px;
}


.nluix-opt {
  color: #1B1619;
  background-color: #fff;
}

.nluix-opt:focus {
  color: #bc257b;
  background-color: #F7EDF3;
}

.input-50 {
  width: 50%;
  border-radius: 4px;
  background-color: #fff;
  padding: 10px;
  margin: 0px auto 10px auto;
  outline: none;
}

.input-50:focus {
  border: 1px solid #bc257b;
  background-color: #fff;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
  outline: none;
}

.btn-submit {
  padding: 10px;
  width: 100%;
  background-color: #bc257b;
  color: #F7EDF3;
  border-radius: 8px;
  border-color: #bc257b;
}

.btn-submit:hover {
  background-color: #F7EDF3;
  color: #bc257b;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
  border : 1px solid #bc257b;
}

.form-nluix input:active[type=text] {
  border: 1px solid #bc257b;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.form-nluix input:hover[type=textaera] {
  width: 100%;
  border: 1px solid #bc257b;
  resize: none;
  border-style: none;
}

.form-nluix textarea:focus {
  border: 1px solid #bc257b;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.footer-form {
  margin: 20px auto 20px auto;
  padding: 20px;
  border-top: 1px solid #c8c8c8;
}

.content-form-right {
  display: block;
  width: 100%;
  max-width: 650px;
  margin: 0px auto;
}

.bloc-avis {
  width: 100%;
  padding: 20px;
  border: 1px solid #bc257b;
  border-radius: 10px;
  margin : 0px 20px;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.bloc-avis p {
  justify-content: center;
  margin-top: 10px;
}

.bloc-coordonnée {
  width: 100%;
  margin: 20px;
  border: 1px solid #bc257b;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.bloc-coordonnée span img {
  max-width: 42px;
  width: 100%;
  height: auto;
  margin-right: 10px;
}

.reduc-height img {
height: auto;
width: 20px;

}

.bloc-coordonnée ul {
  list-style: none;
}

.bloc-coordonnée li {
  margin: 10px auto;
}

.bloc-coordonnée h3, .bloc-newsletter {
text-align: center;
margin-bottom: 20px;
}

.bloc-newsletter {
  width: 100%;
  margin: 20px;
  border: 1px solid #bc257b;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.bloc-newsletter input {
  border: 1px solid #494548;
  border-radius: 4px;
}

.map {
  background-color: #F7EDF3;
  max-width: 438px;
  width: 100%;
  margin-left: 40px ;
  border: 1px solid #63333D;
  border-radius: 10px;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.map img {
  width: 100%;
}

.btn-checkavis {
  background-color: #fff;
  border: 1px solid #bc257b;
  border-radius: 10px;
  margin: 0px 10px;
  transition: all 0.3s;
}

.btn-checkavis:hover {
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
  transition: all 0.3s;
  background-color: #F7EDF3;
}

.btn-checkavis:hover img {
 padding-bottom: 10px;
}

.btn-checkavis img {
  max-width: 48px;
  width: 100%;
  padding: 10px;
}

/***************************End Contact********************/


/*************************Section porfolio*****************/

.section-porfolio {
  max-width: 1920px;
  width: 100%;
margin: 0px auto;
justify-content: center;
}

.border-bottom {
  border-bottom: 1px solid #555;
  margin: 0px;
  padding: 0px;
}

.border-bottom ul {
  text-align: left;
  list-style: none;
  font-weight: bold;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.border-bottom li {
  font-weight: normal;
}

.card-portfolio {
  display: contents;
  position: relative;
  color: #1B1619;
  margin: 0px 10px 10px 10px;
  background-color: #fff;
  border: 1px solid #bc257b;
  border-radius: 10px;
  padding: 0px;
}


.card-portfolio .card-header img {
  margin: 0px;
  padding: 0px;
  width: 100%;
  box-shadow: 0px 4px 8px rgba(000, 000, 000, 0.3);
  border-radius: 0px;
}

.card-portfolio .lighter {
  text-align: left;
  color: #1B1619;
  margin-top: 0px;
  padding-top: 0px;
  margin-left: 0px;
}

.card-portfolio .card-body {
  display: contents;
  text-align: center;
  width: 100%;
  border-left: 1px solid #c8c8c8;
  border-right: 1px solid #c8c8c8;
  padding: 10px;
  margin-top: 5px;
}



.card-portfolio .card-header {
  border-bottom: 1px solid #c8c8c8;
  padding: 0px;
  background-size: cover;
}

.headlighter {
  font-weight: lighter;
  color: #FCFAE5;
}



.card-footer {
  
  padding: 10px;
  border-top: 1px solid #c8c8c8;
 
}

.a-footer-portfolio {
  display: block;
  color: #bc257b;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px;
  position: relative;
  width: 100%;
  margin: 20px 0px;
  background-color: #F7EDF3;
  border-radius: 8px;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
  position: relative;
}

.a-hide {
  display: none;
}

.card-portfolio h3 {
  color: #bc257b;
  text-align: left;
  margin-bottom: 0px;
  margin-left: 10px;
margin-top: 5px;
}

.card-portfolio p {
  color: #1B1619;
  margin: 0px auto;
  padding: 10px;
}



#blocfiltre .img-filtre {
  width: 100%;
  height: auto;
}

.img-filtre img {
  max-width: 24px;
  padding: 4px;
  background-color: #F7EDF3;
  border-radius: 4px;
}

.containerfiltre h2 {
  margin-bottom: 0px;
width: auto;
color:#FCFAE5;
padding: 10px;
background-color:  #5E2608;
border-radius: 10px 10px 0px 0px;
}

.card-footer img {
  max-width: 24px;
  width: 100%;
  height: auto;
  min-width: 18px;
  transition: all 0.3s;
}


.card-footer:hover img {
  width: 120%;
  max-width: 30px;
  transition: all 0.3s;
}

.card-footer .btn-nluix-noborder img {
  width: 100%;
  transition: all 0.3s;
}

.card-footer .btn-nluix-noborder:hover img {
  width: 120%;
  transition: all 0.3s;
}

.bloc-btn-portfolio {
  text-align: center;
  display: flex;
  margin: 20px auto;
}



/*******************************Fin porfolio**************/

.containertest {
  overflow: hidden;
}

.filterDiv1 {
  float: left;
  background-color: #fff;
  border: 1px solid #5E2608;
  border-radius: 10px;
  color: #1B1619;
  max-width: 438px;
  width: 100%;
  text-align: left;
  margin: 10px;
  padding: 0px;
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn1 {
  text-decoration: none;
  background-color: #fff;
  color: #bc257b;
  padding: 5px;
  margin: 5px;
  border: 1px solid #bc257b;
  border-radius: 4px;
  transition: all 0.5s;
}

/* Add a light grey background on mouse-over */
.btn1:hover {
  background-color: #bc257b;
  color: #F7EDF3;
  transition: all 0.5s;
}

/* Add a dark background to the active button */
.btn1.activenluix {
  background-color: #bc257b;
  color: #F7EDF3;
  transition: all 0.5s;
}


/************************************************Start porfolio détails******************************************/

.left-detail {
  border-right: 1px solid #1B1619;
  padding: 20px 0px 0px 10px;
  margin-right: 0px;
  background-color: #fff;
}

.left-detail-img img {
  width: 100%;
  height: auto;
  max-width: 250px;
}

.left-separator {
  justify-content: center;
  min-width: 20px;
  margin: 15px 0px 0px 10px;
  padding: 0px;
  background-color: #1B1619;
  height: 1px;
}

.left-detail p {
  text-align: center;
  padding: 5px 10px;
  background-color: #5E2608;
  color: #FCFAE5;
}

.right-detail {
  width: 100%;
  padding: 20px;
}

.right-detail-img img {
  width: 100%;
  height: auto;
  max-width: 950px;
  padding: 10px;
}

.right-detail-img .lighter {
  margin: 0px 0px 0px 10px;
}

.recap-projet {
  margin-top:50px;
}

.border-bottom {
  background-color: #fff;
  border-bottom: 1px solid #bc257b;
}

.recap-projet h2 {
  margin: 30px 0px 20px 0px;
}

.p-contexte {
  padding: 20px;
}

.recap-projet .div-flex {
  background-color: #fff;
  padding: 20px;
  border-top: 1px solid #bc257b;
  border-bottom: 1px solid #c8c8c8;
  margin-bottom: 10px;
}

/***********************************************End porfolio détails***********************************************/

/**********************************************CV**************************************/

.section-cv {
  max-width: 1920px;
  width: 100%;
margin: 0px auto;
justify-content: center;
}

.section-cv .bg-bottom-nl img {
  position: absolute;
  top: 900px;
  background-repeat: repeat-y;
}

.section-cv ul {
  list-style:none;
}

.left-section {
  width: 100%;
  margin: 0px 20px;
}

.right-section {
  width: auto;
  margin: 0px auto;
}

.bloc-id-cv {
  width: 100%;
padding: 20px 0px;
margin: 0px auto;
}


.part-id, .part-info {
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
margin: 10px;
border-radius: 10px;
}

.part-id {
  position: relative;
margin-left: 0px;
  width: 60%;
  display: block;
}

.part-id img {
  margin-right: 30px;
}

.part-info {
  width: 40%;
  padding: 20px;
}

.part-info li {
  text-align: left;
  margin: 10px 0px;
}

.part-info li img {
  margin-right: 20px;
}

.exp-section {
  background-color: #fff;
  border: 1px solid #bc257b;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
  padding: 20px 20px 20px 0px;
}

.exp-bloc {
  margin-top: 30px;
  margin-bottom: 50px;
}

.content-exp {
  max-width: 900px;
  margin-left: 25px;
}

.title-exp {
  border-left: 4px solid #bc257b;
  padding-left: 20px;
}

.right-section-cv {
  width: 20%;
}

.bloc-card-right {
  background-color: #fff;
  border-color: #bc257b;
  padding: 0px;
  border-radius: 10px;
  margin: 20px;
  position: relative;
  width: 100%;
}

.bloc-card-right .div-flex {
  margin: 0px;
  padding: 0px;
} 

.card-right {
  margin: 0px;
}

.bloc-card-right h2 {
  margin-bottom: 20px;
}

.list-cv {
  display: block;
  float: left;
}

.list-cv p {
text-align: left;
}

.star-list {
  position: absolute;
  width: 100%;
  max-width: 104px;
  right: 0px;
}

.logiciel {
  border: 1px solid #6DC4C3;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.progra {
  border: 1px solid #505D61;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.cms {
  border: 1px solid #505D61;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.formation {
  color: #fff;
  background-color: #3B3A38;
  border: 1px solid #3B3A38;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.langues {
  border: 1px solid #78C197;
  border-color: linear-gradient (from left #78C197 to #4293D0)  ;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.loisirs {
  border: 1px solid #DC254F;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.annexe {
  border: 1px solid #6ABFDF;
  margin: 30px auto;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 0px 8px rgba(000, 000, 000, 0.3);
}

.bloc-btns-print {
  margin: 30px auto;
  padding: 10px;
  width: 100%;
 
}

.btns-bloc-print {
  text-align: center;
  width: 100%;
  text-decoration: none;
  border: 1px solid #bc257b;
  border-radius: 4px;
  background-color: #fff;
  color: #1B1619;
  padding: 10px 20px;
  transition: all 0.3s;
  margin-right: 10px;
}

.btns-bloc-print .ico-reseau {
  text-align: center;
  width: 100%;
  text-decoration: none;
  border: 1px solid #bc257b;
  border-radius: 4px;
  background-color: #fff;
  color: #1B1619;
  padding: 10px 20px;
  transition: all 0.3s;
  margin-right: 10px;

}

.btns-bloc-print:hover {
  background-color: #F7EDF3;
  transition: all 0.3s;
  
}

.checked {
  color: orange;
}

/*********************************************Fin cv**************************/

/*Mentions légales*/
.head-mention {
text-align: center;
justify-content: center;
  display: flex;
  position: relative;
width: 100%;
max-width: 1400px;
padding: 20px;
margin: 20px auto;
height: 100%;
}

.head-mention .Span-credit {
text-align: right;
}

.Content-Header {
  text-align: left;
  display: flex;
  width: 100%;
  position: absolute;
  top: 30%;
  margin: 10px auto;
}

.Content-Header .container {

  margin: 10px auto;
}

.content-mention {
  background-color: #fff;
width: 100%;
max-width: 1200px;
padding : 20px;
margin: 0px auto;
}

.content-mention ul {
  max-width: 900px;
}

.content-mention p {
  color: #1B1619;
  max-width: 900px;
  text-align: left;
  padding-left: 20px;
}

/*Fin mentions légales*/

/*******************************************Footer*******************************************************/
.footer-nluix {
  width: 100%;
  position: relative;
  bottom: 0px;
margin-top: 50px;
padding: 10px;
background-color: #63333D;
display: flex;
text-align: center;
min-width: 350px;
height: auto;
}

.footer-nluix a:hover {
border-bottom: solid 1px #F7EDF3;
transform: transition 0.3s;
}

.navsocial {
float: left;
}


.navbarmention {
display: flex;
text-align: center;
margin: 0px auto;
justify-content: center;
}

.navsocial button:hover {
animation: btnreturn 0.5s infinite;
}

.float-right {
float: right;
}

.navbarmention p, .navbarmention a, .float-right a {
color: #FCFAE5;
padding: 0px;
margin: 15px 10px;
text-decoration: none;
}

/***************************************End footer*************************/

/******************Coming soon page **************************/

.bgimg {
  background-image: url('Assets/Images/Logo-Typo.svg');
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: #1B1619;
  font-size: 25px;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hr-soon {
  margin: auto;
  width: 40%;
}
.logo-hero-soon-bloc {
  text-align: center;
  top: 20px;

}

.logo-hero-soon-bloc img {
 max-width: 350px;
 min-width: 150px;
 width: 100%;
top: 20px;
}


.logo-hero-soon {
  margin: 20px auto;
text-align: center;
}

/********************Coming soon page******************/

/********************************CSS animation*********************************/
.bulleanim1 {
width: 100px;
height: 100px;
border: 1px solid #FCFAE5;
border-radius: 50%;
animation: bulles1 10s infinite;
position: absolute;
background-color: #bc257b;
background-image: element(border 1px solid);
transform: scale(width 500px);
z-index: -1;
}

.bulleanim {
width: 100px;
height: 100px;
border: 1px solid #FCFAE5;
border-radius: 50%;
animation: bulles 10s infinite;
position: absolute;
background-color: #bc257b;
background-image: element(border 1px solid);
transform: scale(width 500px);
z-index: -1;
}

.bulleanim2 {
width: 100px;
height: 100px;
border: 1px solid #FCFAE5;
border-radius: 50%;
animation: bulles1 20s infinite;
position: absolute;
background-color: #bc257b;
background-image: element(border 1px solid);
transform: scale(width 500px);
z-index: -1;
}

.bulleanim3 {
width: 100px;
height: 100px;
border: 1px solid #FCFAE5;
border-radius: 50%;
animation: bulles2 10s infinite;
position: absolute;
background-color: #bc257b;
background-image: element(border 1px solid);
transform: scale(width 500px);
z-index: -1;
}

.navsocial .btn:hover {
  background-color: #FCFAE5;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

.navsocial .btn:hover img {
  color: #63333D;
  border-radius: 8px;
  border: 1px solid #FCFAE5;
  background-color: #63333D;
  animation: btn-circle 0.2s linear;
  padding: 0px;
  fill: #FCFAE5;
}
/**************************************Fin CSS animations*****************************************/

/******************************************Animations*********************************************/
@keyframes mymove {
  from {margin-left: -1000px; opacity: 0;}
  to {margin-left: 0px; opacity: 1;}
}

@keyframes mymove-Right {
  from {top: 1000px;}
  to {top: 50%;}
}

@keyframes btnmove {
  from {margin-top: 20px;}
  to {margin-top:5px;}
}

@keyframes bulles {
  from {width: 100px; height: 100px;}
  to {width: 600px; height: 600px;}
  from {background-color: #F7EDF3;}
  to {background-color: #FCFAE5;}
  from {bottom: -80%;}
  to {bottom: 20%;}
  from {right: -5%;}
  to {right: 70%;}
  to {right: 30%;}
}

@keyframes bulles1 {
  from {width: 100px; height: 100px;}
  to {width: 600px; height: 600px;}
  from {background-color: #FCFAE5;}
  to {background-color: #F7EDF3;}
  from {bottom: -90%;}
  to {bottom: 10%;}
  from {left: -20%;}
  to {left: 90%;}
  to {left: 60%;}
}

@keyframes bulles2 {
  from {width: 50px; height: 50px;}
  to {width: 450px; height: 450px;}
  from {background-color: #FCFAE5;}
  to {background-color: #F7EDF3;}
  from {top: 20px;}
  to {top: 22220px;}
  from {left: -100%;}
  to {left: 50%;}
  to {left: 10%;}
}

@keyframes logonav80 {
  from {width:100%}
  to {width:80%}
}

@keyframes btnsocial {
  from {scale: 50%;}
  to {scale: 100%;}
}

@keyframes animtext-right{
  from {margin-left:1000px; opacity:0.1}
  to {margin-left:0px; opacity:1}
}

@keyframes animtext-opacity{
  from {opacity:0.1}
  to {opacity:1}
}

@keyframes btn-return {
  from{width:21%; opacity: 1;}
  to {width: 25%; opacity: 0.5;}
}

@keyframes btn-circle {
  from {width: 0%; background-color: #63333d; border-radius: 0px;}
  to {width: 110%; background-color: #FCFAE5; border-radius: 8px;}
}

/******************************************************Fin animations******************************************/

/**********************Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally ********************/
@media screen and (max-width: 580px) {
#navbar {
  padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
}
#navbar a {
  float: none;
  display: block;
  text-align: left;
}
#navbar-right {
  float: none;
}
}

/******************Width 1920px*****************************/
@media screen and (max-width:1920px){
  #hero-image {
    margin: 0px auto 50px auto;
  }
}

/***************end1920px**************************************/

/******************************************************Width 1600px*****************************************************/
@media screen and (max-width:1600px){
.nluix-1600 {
  max-width: 1600px;
  display: block;
  margin: 0px auto 0px auto;
  width: 100%;
}

.btn-nluix {
  float: none;
  margin: 0px auto 20px auto;
}

.blog-card {
float: none;
display: block;
width: 100%;
} 

.card-photo-present {
position: relative;
width: 100%;
background-size: cover;
}

.card-photo-present img {
width: 100%;
height: 100%;
position: relative;
}

.blog-card ul {
width: 100%;
display: block;
position: relative;
padding: 20px 10px;
}

.middle {
  top: 50%;
}

.h1-hero {
  line-height: 1.3;
  font-size: 2.4rem;
  padding: 0px;
  margin: 5px auto;
}
.p-hero {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0px auto;
  padding: 0px;
}


.logo-hero-soon .div-flex .btn-nluix {
  display: block;
  margin: 20px auto;
  width:100%;
  height: auto;
}

hr {
  margin: 10px auto;
}

.right-section-cv {
  width: auto;
  margin: 10px auto;
}

.left-section {
  width: auto;
}

}

/************************************************************end 1600px***************************************************/

/************************************************************Width 1200px*************************************************/
@media screen and (min-width:1200px) {
  .Mobile-nluix, .top-nav { 
    visibility:hidden;
    position: absolute;
  }
}

@media screen and (max-width:1200px) {

.logo-hero {
  max-width: 250px;
}  

.navbar, .nav-intro, .bulleanim, .bulleanim1, .bulleanim2 {
visibility: hidden;
position: absolute;
z-index: -100;
}

.nluix-1200 { 
display: block;
width: 100%;
padding: 20px;
}

.nluix-1200-0padding { 
  display: block;
  width: 100%;
  padding: 0px;
  }

.btn-nluix-noborder {
  margin: 10px auto;
}

#id-card {
max-width: 1200px;
width: 100%;
display: block;
margin: 0px auto;
position: relative;
}

.nluix-hid {
visibility: hidden;
}

.id-card {
text-align: center;
width: 100%;
display: flex;
margin: 0px auto;
}

.id-header-card img {
width: 100%;
}



.separator-right {
max-width: 1200px;
height: auto;
width: 100%;
border-right: none;
border-bottom: solid 1px #bbb;
display: block;
}

.Mobile-nluix {
  top: 0px;
  position: sticky !important;
}

.topnav {
  width: 100%;
  top: 0px;
visibility: visible;
z-index: 10;
position: sticky !important;
}

.topnav a {
text-align: center;
} 

.btn-anim-mobil {
top: 50%;
}

.bar1, .bar2, .bar3 {
  border-radius: 4px;
  top: 50%;
}

.card-photo-present {
  display: block;
  width: 100%;
  max-width: 450px;
  
}

.bloc-droite-presentation {
display: block;
width: 100%;
text-align: center;
padding: 10px;
min-width: 340px;
}


.bloc-gauche-présentation {
width: 100%;
}

.blog-card {
width: 100%;
margin: 0px auto;
}

.newsletter form .row {
display: block;
}

.newsletter input, .newsletter .btn-form, .col-4, .col-8 {
margin: 10px auto;
width: 100%;
padding: 5px;
}


.margin20-right {
  margin: 0px 10px 0px 0px ;
}

.margin20-left {
  margin: 0px 0px 0px 0px ;
}

.bloc-dev, .bloc-illu, .bloc-brand, .bloc-video {
  margin-top: 20px;
}

.bg-ui img, .bg-dev img, .bg-illu img, .bg-brand img, .bg-video img {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0px 0px;
  background-size: cover;
}

.txt-blog-content .container {
 display: none;
 position: relative;
}

.text-blog-content h2 {
  background-color: rgba(000, 000, 000, 0.5);
  left: 5px;
  bottom: 0px;
} 


.ul-blog {
  padding-left: 5px;
  text-align: left;
  list-style: none;
}

.content-photo img {
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 0px 1px 4px rgba(000, 000, 000, 0.3);
}

.bloc-id-cv {
  width: 100%;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
}

.part-id, .part-info {
  width: 100%;
  margin: 10px auto;
}

}

/*********************************End 1200px******************************************/

/**************************Start display Smarphone 350px to 900px************************/
@media screen and (min-width:350px) and (max-width:900px){
.nluix-1200 {
padding: 0px;
}

.nluix-1600 {
padding: 0px;
}

.footer-nluix {
padding: 0px;
margin-top: 30px;
}

.float-right {
display: block;
width: 100%;
background-color: #63333D;
margin: 0px;
}

.id-card {
display: block;
width: 100%;
padding-bottom: 30px;
}

.carousel-inner-mobil {
  width: 100%;
height: auto;
}

.nluix-900 {
  width: 100%;
  display: block;
  padding: 0px;
  float: none;
  margin: 0px auto;
}

.nluix-900 .card-project {
  display: block;
  width: 100%;
  margin: 0px auto;
  padding: 0px;
}

.mobile-nluix {
  display: block;
  visibility: visible;
  height: 100%;
  width: 100%;
  position: fixed;
  }
  
  .topnav {
    width: 100%;
    top: 0px;
  visibility: visible;
  z-index: 1;
  }
  
  .topnav a {
  text-align: center;
  } 
  
  .btn-anim-mobil {
  top: 50%;
  }
  
  .bar1, .bar2, .bar3 {
    border-radius: 4px;
    top: 50%;
  }

  .expertises-content-2 {
    display: block;
    margin: 20px auto;
  }

.bgimg {
  display:contents;
  height: auto;
}

.logo-hero-soon img {
  max-width: 100px;
  width: 100%;
  margin: 10px auto;
}

.middle {
  position: relative;
}

.filterDiv1 {
  margin: 10px 0px;
}


.encours-mise-en-ligne {
  width: 100%;
  margin: 10px 0px;
  padding: 5px;
}

.encours-mise-en-ligne p {
  width: 100%;
  margin: 10px 0px;
  padding-left: 20px;
}






.map {
  background-color: #F7EDF3;
  max-width: 340px;
  width: 100%;
  margin: 5px auto;
  border: 1px solid #63333D;
  border-radius: 10px;
  box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.3);
}

#btn-nluix-topnav {
  z-index: 1;

}


.topnav img {
  max-width: 170px;
  height: auto;
}

.center-titre-light {
  display: contents;
}

.bloc-btn-projet {
  margin: 10px auto;
  padding: 10px;
  display: block;
}

.bloc-btn-projet a {
  display: block;
  margin: 10px auto;
  float: none;
}

.bloc-btn-portfolio {
  text-align: center;
  display: flow-root;
  margin: 20px auto;
}

.bloc-btn-portfolio a {
  margin: 10px auto;
  text-align: center;
}

.bloc-edito, .projet-rea, .bloc-a-venir {
  display: block;
}

.separator-right-projet {
  text-align: center;
  margin: 10px auto;
  border-bottom: 1px solid #c8c8c8;
  border-right: none;
  display: block;
}

#btn-nluix-topnav {
  right: 5%;
}

.content-form-left, .content-form-right, .bloc-avis, .bloc-coordonnée, .bloc-newsletter {
  margin: 20px auto;
}

.input-50 {
  width: 100%
}

}



/*****************************************End small display*******************************/

/**Darkmode**/