html,body{margin: 0;
padding: 0;}


 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgba(138, 73, 4, 0.749);}

    .navbar-toggler{color: lightblue;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}



.entete{width: 100%;
height: 580PX;
background-color:#FFBE00 ;}

.logo{width: 225px;
height: 350px;
margin-top: -950px;
margin-left: 42%;}
h1
{text-align: center;
    position: absolute;
    margin-top: -550px;
    margin-left: 10px;
color:white;
font-size: 40px;
  font-family: sans-serif;
  font-weight: 700;
  font-style: normal;
  padding-top: 80PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 100px;
margin-left: 27%;
}

.slogan2{font-family:sans-serif ;
color:black;
font-size: 30px;
font-weight: 500;
font-style: italic;
text-align: center;
position: absolute;
margin-top: -200px;
margin-left: 22%;
line-height: 40PX;
}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: showup 10S; 
  animation-fill-mode:both;
  
}


  .slogan2:last-of-type p {
  
  animation: reveal 10s ;
  animation-fill-mode: both;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}



@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:0;width:0px;}
    30% {width:755px;}
    80% {opacity:1;}
    100% {opacity:1;width:755px;}
}




.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}
.titreheader{color:white;
font-size:26PX;
margin-top:-340px;
margin-left: 37%;}
   h2{  font-family:sans-serif;
    font-size: 36PX;
    font-weight:800;
    margin-top: 40px;
  text-align: center; 
color:rgba(138, 73, 4, 0.749);
 }

 
.accroche{font-family:sans-serif ;
 text-align: center;
font-size: 24px;
font-weight: 600;
color: black;
margin-top: 30PX;}


.conteneur1{display: flex;
  flex-wrap: wrap;
 width: 90%;
height: 90%;
  margin-top: 10%;
}

.titre{text-align: center;
  margin-top: 28PX;
  font-size: 32PX;
  color:rgba(138, 73, 4, 0.749);
  font-weight: 800;
   font-family: sans-serif;
   font-style:normal;
  background-color:white;
  margin-left: 6%;
}

.texte{font-size: 20PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 5%;
margin-left: 8%;
font-family:sans-serif;}

.photovitrine{width:24%;
  height: 58%;
  position: absolute;
margin-left: -34%;
margin-top: -3%;}

.vitrine
{width: 47%;
  height: 300PX;
background-color:white; 
margin-left: 54%;
margin-top: -30PX;
}
.contenu{position: absolute;
    width: 40%;
margin-top: -20px;
margin-left: 46%;
transition: transform 0.5s;}
.contenu:hover
{transform: scale(1.5);
z-index: 4;}


.boutonvitrine{border-radius: 20PX;
background-color: rgb(255, 196, 0);
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 44%;
margin-top: 22px;}

.commerce{width: 47%;
  height:300PX;}
.photocommerce {width: 24%;
height: 58%;
position: absolute;
margin-left: 58%;
margin-top: -10%;
border-color: #C9C094;}
.contenu2{margin-left: 15%;
margin-top: 5%;
transition: transform 0.5s;}
.contenu2:hover
{transform: scale(1.5);
z-index: 2;}

p.texte2{font-family: sans-serif;
font-size:20PX;
color: black;
font-weight: 700;
text-align: center;}
.boutoncommerce{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 38%;
margin-top: 20px;}

p.titre{margin-left: 11%;
margin-top: 10%;}

.landing{width: 40%;
  height: 250PX;
border-color: #C9C094;
border-radius: 50PX;
background-color: white;
margin-left: 48%;
margin-top: 20px;}
.contenu3{margin-left: -0%;
  transition: transform 0.5s;}
.contenu3:hover
{transform: scale(1.5);
z-index: 2;}

.landingphotos{width: 24%;
  height: 58%;
  position: absolute;
margin-left: -30%;
margin-top: 10PX;}

.objectif{font-family:sans-serif;
text-align: center;
font-size: 14px;
font-weight: 700;
color:rgba(138, 73, 4, 0.749);
margin-left: 8%;}

.boutonlanding{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 42%;
margin-top: 20px;}

.contenu4{margin-left: -0%;
width: 80%;
transition: transform 0.5s;}
.contenu4:hover
{transform: scale(1.5);
z-index: 2;}

p.titre3{text-align: center;
  margin-top: 38PX;
  font-size: 30PX;
  color:rgba(138, 73, 4, 0.749);
  font-weight: 800;
   font-family:sans-serif;
   font-style: normal;
  margin-left: 6%;}
 
.réferencement{width:47%;
  height: 300PX;
margin-left:10%;
margin-top:14%;}

p.titre4{text-align: center;
  margin-top: 24PX;
  font-size: 30PX;
  color:rgba(138, 73, 4, 0.749);
  font-weight: 800;
  font-family: sans-serif;
   font-style: normal;
  margin-left: 4%;}

.seo{position:absolute;
  margin-left: 54%;
  width: 20%;
  height: 38%;
margin-top: 10PX;}

  .texte4{font-size: 20PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 0%;
font-family:sans-serif;
margin-top: 18PX;
margin-left: 8%;}

.boutonseo{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
font-weight: 600;
width: 140PX;
border-style: none;
margin-left: 42%;
margin-top: 20px;}

  .reseaux
  {margin-top: 50px;
  transition: transform 0.5s;}
.reseaux:hover
{transform: scale(1.5);
z-index: 2;}
  
  .instagram{width: 180PX;
  margin-top: 3PX;
margin-left:68%;}
.facebook{position: absolute;
  margin-top: 5PX;
  margin-left: 17%;
}

.réseausociaux{font-family:sans-serif;
    position: absolute;
text-align: center;
color: black;
font-size: 20PX;
font-weight: 700;
margin-left: 29%;
margin-top: -140px;
width: 40%;
}

.boutonréseaux{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 44%;
margin-top: 20px;}

 
footer{max-width: 100%;
height: 340px;
margin-top: 120PX;
background-color: #FFBE00;}

.logofooter{width: 225px;
height: 210px;
width: 140PX;
margin-top: -10px;
margin-left: 46%;}

h4
{margin-left: 42%;
  position: absolute;
font-family:sans-serif;
font-size: 24PX;
font-weight: 800;
color:white;
text-align: center;
margin-top: -55px;
}

.pfooter{font-size: 25PX;
text-align: center;
font-family:sans-serif;
margin-top: 40px;
margin-left: 45%;
position: absolute;
color: black;
}
 .mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 38%;
margin-top: 105PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 52%;
    margin-top: 80PX;
  }




@media screen and (min-width: 300px) and (max-width: 650px){
.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 18PX;
font-weight: 600;
 margin-left: 4%;
 position: sticky;
}
.navbar-nav{flex-direction: column;
margin-top: 8PX;}


 .navbar-nav > li > a
{font-size:20px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: 0%;
    color:rgba(138, 73, 4, 0.749);}

    .navbar-toggler{margin-left: 80%;
        z-index: 1;
        color:#C9C094;}
    .navbar-toggler-icon{color:gold;
    }
.navbar-toggler.collapsed{margin-top: -14PX;}
.entete{height: 300px;}

.logo{
height: 150px;
width: 100PX;
margin-top: -520px;
margin-left: 38%;}

h1
{text-align: center;
    position: absolute;
    margin-top: -300px;
    margin-left: -25px;
color:white;
font-size: 16px;
  font-family:  sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}



 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:#6c6c64 ;
font-size: 15px;
text-align: center;
position: absolute;
margin-top: -130px;
margin-left: 2%;
line-height: 20PX;
color: black;}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: showup 10s; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 14s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}}

    .titreheader{color:white;
font-size:12PX;
margin-top:-200px;
margin-left: 28%;}

 h2{font-family: sans-serif;
    font-size: 22PX;
    font-weight: 800;
    margin-top: -20px;
  text-align: center; 
color:rgba(138, 73, 4, 0.749);
 }
 .titrepage{width:85%;
margin-left: 8%;}
 
.accroche{font-family:sans-serif ;
 text-align: center;
font-size: 18px;
color: black;
margin-top: 30PX;}


.conteneur1{display: flex;
    flex-wrap: wrap;
 width: 90%;
height: 90%;
  margin-top: 10%;
}

.titre{text-align: center;
  margin-top: 50PX;
  font-size: 24PX;
  color:rgba(138, 73, 4, 0.749);
  font-weight: 600;
   font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: 30%;
}

.texte{font-size: 14PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 0%;
margin-left: -2%;
font-family:sans-serif;}

.photovitrine{width:38%;
  height: 26%;
  position: absolute;
margin-left: -14%;
padding-top: 25px;}

.vitrine
{width: 47%;
  height: 300PX;
background-color:white; 
margin-left: 54%;
margin-top: -30PX;
}
.contenu{display: flex;
    flex-wrap: wrap;
    position: absolute;
    width: 82%;
margin-top: 100px;
margin-left: 12%;
  transition: transform 0.5s;}
.contenu:hover
{transform: scale(1.2);
z-index: 2}



.boutonvitrine{border-radius: 20PX;
background-color: #FFBE00 ;
color: white;
height: 38PX;
width: 145PX;
border-style: none;
margin-left: 56%;
margin-top: 14px;}

.commerce{width: 85%;
  height:300PX;}
.photocommerce {width: 40%;
height: 26%;
position: absolute;
margin-left: 32%;
margin-top: -64%;
border-color: #C9C094;}

p.texte2{
font-size: 14PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 0%;
font-family:sans-serif;}

.contenu2{margin-left: 20%;
margin-top: 2%;
transition: transform 0.5s;}
.contenu2:hover
{transform: scale(1.2);
z-index: 2;}

p.titre{font-size: 24px;
    margin-left: 20%;
margin-top: 85%;
width: 80%;}
.boutoncommerce{border-radius: 20PX;
background-color: #FFBE00 ;
color: white;
height: 38PX;
width: 145PX;
border-style: none;
margin-left: 24%;
margin-top: 14px;}

.landing{width: 85%;
  height: 250PX;
border-color: #C9C094;
border-radius: 50PX;
background-color: white;
margin-left: 6%;
margin-top: 20px;}
.contenu3{display: flex;
    flex-wrap: wrap;
    margin-left: 4%;
margin-top: 5PX;  transition: transform 0.5s;}
.contenu3:hover
{transform: scale(1.2);
z-index: 2}

.landingphotos{width: 38%;
  height: 25%;
  position: absolute;
margin-left: 28%;
margin-top: -70PX;}

.objectif{font-family:sans-serif;
text-align: center;
font-size: 12px;
font-weight: 700;
color:rgba(138, 73, 4, 0.749);
margin-left: 1%;}

.contenu4{margin-left: -0%;
width: 85%;
margin-top: 24%;
  transition: transform 0.5s;}
.contenu4:hover
{transform: scale(1.2);
z-index: 2}

p.titre3{text-align: center;
  padding-top: 86PX;
  font-size: 24PX;
  color:rgba(138, 73, 4, 0.749);
  font-weight: 600;
   font-family: sans-serif;
   font-style: normal;
  margin-left: 25%;}

  .boutonlanding{border-radius: 20PX;
background-color: #FFBE00 ;
color: white;
height: 35PX;
width: 145PX;
border-style: none;
margin-left: 56%;
margin-top: 14px;} 
 
.réferencement{width:90%;
  height: 300PX;
margin-left:10%;
margin-top:8%;}

p.titre4{text-align: center;
  margin-top: 445PX;
  font-size: 24PX;
color:rgba(138, 73, 4, 0.749);
  font-weight: 700;
   font-family:sans-serif;
   font-style: normal;
margin-left: 22px;}
.texte4{font-size: 14PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 8%;
font-family:sans-serif;
margin-left: 7%;}


.seo{position:absolute;
  margin-left: 30%;
  width: 24%;
  height: 20%;
margin-top: -46%;}

.boutonseo{border-radius: 20PX;
background-color: #FFBE00 ;
color: white;
height: 35PX;
width: 145PX;
border-style: none;
margin-left: 30%;
margin-top: 14px;}

  .reseaux
  {margin-top: 100px;
      transition: transform 0.5s;}
.reseaux:hover
{transform: scale(1.5);
z-index: 2}
  .instagram{width: 85PX;
  margin-top: -168PX;
margin-left:75%;}
.facebook{position: absolute;
    width:85px ;
  margin-top: -115PX;
  margin-left: 4%;
}


.réseausociaux{font-family:sans-serif;
    position: absolute;
text-align: center;
color: black;
font-size: 12PX;
font-weight: 700;
margin-left: 29%;
margin-top: -140px;
width: 42%;
}

.boutonréseaux{border-radius: 20PX;
background-color:#FFBE00;
color: white;
height: 35PX;
width: 145PX;
border-style: none;
margin-left: 32%;
margin-top: 14px;}

 
footer{max-width: 100%;
height: 260px;
margin-top: 120PX;
background-color: #FFBE00;}

.logofooter{height: 128PX;
width: 90PX;
margin-left: 40%;}
h4{
  margin-left: 32%;
  position: absolute;
font-family:sans-serif;
font-size: 16PX;
font-weight: 600;
color:white;
margin-top: -30px;
text-align: center;
}

.pfooter{font-size: 20PX;
text-align: center;
font-weight: 400;
margin-top: 40px;
margin-left: 33%;
position: absolute;
color: rgb(134, 90, 9);}

 .mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 8%;
margin-top: 120PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 45%;
    margin-top: 95PX;
  }

}



        @media screen and (min-width: 651px) and (max-width: 1023px){ 

   .navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 58%;
}
 .logo{margin-left: 36%;}      
h1
{text-align: center;
    position: absolute;
    margin-top: -450px;
    margin-left: -95px;
color:white;
font-size: 34px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{font-size: 23PX;
  margin-top: -280px;
margin-left: 28%;}
 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:black ;
font-size: 28px;
text-align: center;
position: absolute;
margin-top: -180px;
margin-left: 2%;}


.conteneur1{display: flex;
  flex-wrap: wrap;
 width: 90%;
height: 90%;
  margin-top: 10%;
}

.titre{text-align: center;
  margin-top: 24PX;
  font-size: 30PX;
  color: rgb(154, 120, 56);;
  font-weight: 600;
   font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: 5%;
}

.texte{font-size: 18PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 0%;
margin-left: 8%;
font-family:sans-serif;}

.photovitrine{width:28%;
  height: 30%;
  position: absolute;
margin-left: -38%;
margin-top: -3%;}

.vitrine
{width: 47%;
  height: 300PX;
background-color:white; 
margin-left: 54%;
margin-top: -30PX;
}
.contenu{position: absolute;
    width: 40%;
margin-top: -20px;
margin-left: 46%;
  transition: transform 0.5s;}
.contenu:hover
{transform: scale(0.5);
z-index: 3}


.boutonvitrine{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 34%;
margin-top: 20px;}

.commerce{width: 47%;
  height:300PX;}
.photocommerce {width: 28%;
height: 26%;
position: absolute;
margin-left: 58%;
margin-top: -10%;
border-color: #C9C094;}
.contenu2{margin-left: 8%;
margin-top: 5%;}

.boutoncommerce{border-radius: 20PX;
background-color:#FFBE00 ;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 34%;
margin-top: 20px;}

p.titre{margin-left: 16%;
margin-top: 10%;}


.landing{width: 46%;
  height: 250PX;
border-color: #C9C094;
border-radius: 50PX;
background-color: white;
margin-left: 50%;
margin-top: 20px;}
.contenu3{margin-left: -20%;}

.landingphotos{width: 28%;
  height: 30%;
  position: absolute;
margin-left: -40%;
margin-top: 10PX;}

.objectif{font-family:sans-serif;
text-align: center;
font-size: 14px;
font-weight: 700;
color: rgb(154, 120, 56);
margin-left: 8%;}

.boutonlanding{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 40%;
margin-top: 20px;}

.contenu4{margin-left: -0%;
width: 80%;}
p.titre3{text-align: center;
  margin-top: 28PX;
  font-size: 30PX;
  color: rgb(154, 120, 56);
  font-weight: 600;
   font-family:sans-serif;
   font-style: normal;
  margin-left: 8%;}
 
.réferencement{width:64%;
  height: 300PX;
margin-left:0%;
margin-top:24%;}

p.titre4{text-align: center;
  margin-top: 24PX;
  font-size: 30PX;
  color: rgb(154, 120, 56);
  font-weight: 600;
   font-family:sans-serif;
   font-style: normal;
  margin-left: 6%;}

.seo{position:absolute;
  margin-left: 62%;
  width: 26%;
  height: 18%;
margin-top: 45PX;}

  .texte4{font-size: 20PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 0%;
font-family:sans-serif;
margin-top: 15PX;
margin-left: 8%;}

.boutonseo{border-radius: 20PX;
background-color: #FFBE00 ;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 40%;
margin-top: 20px;}

  .reseaux
  {margin-top: 50px;}
  .instagram{width: 180PX;
  margin-top: 10PX;
margin-left:72%;}
.facebook{position: absolute;
  margin-top: 12PX;
  margin-left: 4%;
}

.réseausociaux{font-family:sans-serif;
    position: absolute;
text-align: center;
color: black;
font-size: 20PX;
font-weight: 700;
margin-left: 29%;
margin-top: -152px;
width: 40%;
}

.boutonréseaux{border-radius: 20PX;
background-color:#FFBE00 ;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 41%;
margin-top: 20px;}

 
footer{max-width: 100%;
height: 320px;
margin-top: 60PX;
background-color: #FFBE00;}


h4{
  margin-left: 42%;
  position: absolute;
font-family:sans-serif;
font-size: 20PX;
font-weight: 800;
color:white;
margin-top: -50px;
}

.pfooter{font-size: 26PX;
text-align: center;
font-family:sans-serif;
margin-top: 38px;
margin-left: 44%;
position: absolute;
color: black;}

.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 34%;
margin-top: 70PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 60%;
    margin-top: 50PX;
  }

}


        @media screen and (min-width: 1300px) {
html,body{margin: 0;
padding: 0;}

@font-face {
	font-family: 'Ruthligos';
	src: url('font/Ruthligos.ttf')}
@font-face {
  font-family:'Mister Sally' ;
  src: url('font/Mister\ sally.ttf');
}



 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:grey;}

    .navbar-toggler{color: lightblue;}
    .navbar-toggler-icon{color:gold;}

.navbar-nav{flex-direction: column-reverse;
margin-top: 8PX;}



.entete{width: 100%;
height: 580PX;
background-color: #FFBE00;}
h1
{text-align: center;
    position: absolute;
    margin-top: -480px;
    margin-left: 100px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}


.titreheader{margin-top: -300px;
margin-left: 31%;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 60px;
margin-left: 26%;
}

.slogan2{font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 26px;
text-align: center;
position: absolute;
margin-top: -180px;
margin-left: 26%;}

h1:first-of-type {    
  animation: showup 4s;
  animation-iteration-count: 1;
  
}

h1:last-of-type {
  
  animation: reveal 10S; 
  animation-fill-mode:both;
  
}

.slogan2:last-of-type p {
  
  animation: showup 14s ;
  animation-iteration-count: 1;}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:100px; }
    20% { margin-left:100px; }
    35% { margin-left:100px; }
    100% { margin-left:100px; }
}

@keyframes reveal {
    0% {opacity:1;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:655px;}
    80% {opacity:1;}
    100% {opacity:1;width:655px;}
}


 .navbar-nav > li > a
{font-size:22px;
  font-family:sans-serif;
  font-weight: 600;
  font-style: normal;
    text-align: center;
    margin-left: -50%;
    color:rgba(138, 73, 4, 0.749);}

.navbar-brand{color: #C9C094;
  position: absolute;
  margin-top: 0PX;
font-size: 30PX;
font-weight: 600;
 margin-left: 4%;
}

   h2{font-family:sans-serif;
    font-size: 36PX;
    font-weight: 700;
    margin-top: 40px;
  text-align: center; 
color: rgb(154, 120, 56);
 }
 
 
.accroche{font-family:sans-serif ;
 text-align: center;
font-size: 24px;
color: black;
margin-top: 30PX;}


.conteneur1{display: flex;
  flex-wrap: wrap;
 width: 90%;
height: 90%;
  margin-top: 15%;
}

.titre{text-align: center;
  margin-top: 24PX;
  font-size: 30PX;
  color: rgb(154, 120, 56);
  font-weight: 600;
   font-family:sans-serif;
   font-style: normal;
  background-color:white;
  margin-left: 20%;
}
  .texte {
    font-size: 20PX;
    color: black;
    text-align: center;
    font-weight: 700;
    margin-top: 3%;
    margin-left: 18%;
    font-family:sans-serif;}

.photovitrine{width:24%;
  height: 54%;
  position: absolute;
margin-left: -32%;
margin-top: -3%;}

.vitrine
{width: 47%;
  height: 300PX;
background-color:white; 
margin-left: 54%;
margin-top: -30PX;
}
.contenu{position: absolute;
    width: 40%;
margin-top: -20px;
margin-left: 46%;}

.boutonvitrine{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 52%;
margin-top: 20px;}

.commerce{width: 47%;
  height:300PX;}
.photocommerce {width: 23%;
height: 50%;
position: absolute;
margin-left: 60%;
margin-top: -10%;
border-color: #C9C094;}
.contenu2{margin-left: 15%;
margin-top: 5%;}

.boutoncommerce{border-radius: 20PX;
background-color: #C9C094;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 42%;
margin-top: 20px;}

p.titre{margin-left: 22%;
margin-top: 18%;}

p.texte2{margin-left: 6%;
margin-top: -5%;
font-family:sans-serif;
font-size: 20PX;
color:black;
text-align: center;
font-weight: 700;}


.landing{width: 45%;
  height: 250PX;
border-color: #C9C094;
border-radius: 50PX;
background-color: white;
margin-left: 46%;
margin-top: 70px;}
.contenu3{margin-left: -5%;}

.landingphotos{width: 24%;
  height: 58%;
  position: absolute;
margin-left: -30%;
margin-top: -60PX;}

.objectif{font-family:sans-serif;
text-align: center;
font-size: 14px;
font-weight: 700;
color: rgb(154, 120, 56);
margin-left: 14%;}

.boutonlanding{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 48%;
margin-top: 20px;}

.contenu4{margin-left: -0%;
width: 80%;}
p.titre3{text-align: center;
  margin-top: 44PX;
  font-size: 30PX;
  color: rgb(154, 120, 56);
  font-weight: 600;
   font-family:sans-serif;
   font-style: normal;
  margin-left: 14%;}
 
.réferencement{width:47%;
  height: 300PX;
margin-left:10%;
margin-top:14%;}

p.titre4{text-align: center;
  margin-top: 24PX;
  font-size: 30PX;
  color: rgb(154, 120, 56);
  font-weight: 600;
   font-family: sans-serif;
   font-style: normal;}

.seo{position:absolute;
  margin-left: 52%;
  width: 18%;
  height: 25%;
margin-top: 0PX;}

  .texte4{font-size: 20PX;
color:black;
text-align: center;
font-weight: 700;
margin-top: 0%;
font-family:sans-serif;
margin-top: 15PX;
margin-left: 8%;}

.boutonseo{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 42%;
margin-top: 20px;}

  .reseaux
  {margin-top: 50px;}
  .instagram{width: 180PX;
  margin-top: 3PX;
margin-left:68%;}
.facebook{position: absolute;
  margin-top: 5PX;
  margin-left: 17%;
}

.réseausociaux{font-family:sans-serif;
    position: absolute;
text-align: center;
color: black;
font-size: 20PX;
font-weight: 700;
margin-left: 29%;
margin-top: -140px;
width: 40%;
}

.boutonréseaux{border-radius: 20PX;
background-color: #FFBE00;
color: white;
height: 40PX;
width: 140PX;
border-style: none;
margin-left: 45%;
margin-top: 20px;}

footer{max-width: 100%;
height: 330px;
margin-top: 60PX;
background-color: #FFBE00;}

h4{
  margin-left: 44%;
  position: absolute;
font-family:sans-serif;
font-size: 24PX;
font-weight: 800;
color:white;
margin-top: -60px;
}

.pfooter{font-size: 28PX;
text-align: center;
font-family:sans-serif;
margin-top: 30px;
margin-left: 45%;
position: absolute;
color: black;}
}


.mention{margin-top: 90px;}

.politique{margin-top:70PX;}


        

  
   @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {

    h1
{text-align: center;
    position: absolute;
    margin-top: -460px;
    margin-left: 20px;
color:white;
font-size: 36px;
  font-family: sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-top: 40PX;
  overflow:hidden;
  white-space:nowrap;
z-index: 1;}

.titreheader{margin-top: -280PX;
margin-left: 28%;
font-size: 23PX;}

 .slogan1{font-family:sans-serif;
  font-style: italic;
color:#6c6c64 ;
font-size: 20px;
text-align: center;
position: absolute;
margin-top: 50px;
margin-left: 26%;
width: 800PX;
}

.slogan2 {font-family:sans-serif ;
  font-style: italic;
color:black;
font-size: 32px;
text-align: center;
position: absolute;
margin-top: -170px;
margin-left: 15%;}


    .photovitrine{width:24%;
  height: 46%;
  position: absolute;
margin-left: -34%;
margin-top: -3%;}

.photocommerce {width: 24%;
height: 44%;
position: absolute;
margin-left: 58%;
margin-top: -10%;
border-color: #C9C094;}
.contenu2{margin-left: 15%;
margin-top: 5%;}

.boutoncommerce{background-color: #FFBE00;}

.landingphotos{width: 24%;
  height: 46%;
  position: absolute;
margin-left: -30%;
margin-top: 10PX;}

.boutonlanding{border-radius: 20PX;
background-color: #FFBE00;}
.seo{position:absolute;
  margin-left: 54%;
  width: 18%;
  height: 24%;
margin-top: -16PX;}

.logofooter{margin-top: -16PX;}

footer{max-width: 100%;
height: 320px;
margin-top: 90PX;
background-color: #FFBE00;}
h4{
  margin-left: 43%;
  position: absolute;
font-family:sans-serif;
font-size: 22PX;
font-weight: 800;
color:white;
margin-top: -54px;
}

.pfooter{font-size: 20PX;
text-align: center;
margin-top: 50px;
margin-left: 48%;
position: absolute;
color: black;
font-family: sans-serif;}

.mention{position: absolute;
    color: rgb(154, 120, 56);
  margin-left: 38%;
margin-top: 95PX;}

 .politique{position: absolute;
    color: rgb(154, 120, 56);
    margin-left: 52%;
    margin-top: 70PX;
  }

}