@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
}

body{
  margin: auto;
  align-items: center;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 20px;
}


.header_nav{
  //*position: fixed!important;*//
  top: 0!important;
  width: 100%;
  mix-blend-mode: difference!important;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  vertical-align: middle;
}

.active{
  font-weight: 500!important;
}


.menu a {
  color: #333333;
  text-decoration: none;
  margin-right: 20px;
  font-weight: bold;
}

.image img {
  height: 10px!important;
}

.logo a img{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  height: 100px!important;
}
.black a {
  color: black!important;
}
.white a {
  color: #ffff!important;
}

.logomenu a{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif!important;
  font-weight: 300;
  font-style: normal;
  color: white!important;
}

.navbas a{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: black!important;
  z-index: 900;
}


.navbas a:hover{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 800;
  color: black!important;
}


.respnoir{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 25px!important;
  color: black;
  margin: 20px;

}

.respblanc{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 25px!important;
  color: #ffff;
  margin: 20px;

}



/* fond de couleurs*/

.backgroundblacklarge {

      width: 100%;
      float: right;
      height: 1400px;
      text-align: center;;
      background-color: black;

}


.backgroundgrislarge {

    margin-top: 900px!important;
    width: 100%;
    float: right;
    height: 1300px;
    text-align: center;;
    background-color: #E4E4E4;


    }

.footerlarge {

    width: 100%;
    float: right;
    height: 700px;
    text-align: center;;
    background-color: black;


}

.footerlargeprisma {
    width: 100%;
    float: right;
    height: 700px;
    text-align: center;;
    background-color: black;


}

.backgroundblackresp {
    width: 100%;
    float: right;
    height: 1400px;
    text-align: center;;
    background-color: black;


}

.backgroundgrisherbier{
  margin-top: -300px!important;
    width: 100%;
    float: right;
    height: 1600px;
    text-align: center;;
    background-color: #E4E4E4;
}

.backgroundgrisresp{
  margin-top: 100px!important;
    width: 100%;
    float: right;
    height: 1600px;
    text-align: center;;
    background-color: #E4E4E4;
}

.backgroundjaunelarge{
    margin-top: 500px!important;
    width: 100%;
    float: right;
    height: 1150px;
    text-align: center;;
    background-color: #EDE17B;
}

.backgroundroselarge{
    width: 100%;
    float: right;
    height: 1150px;
    text-align: center;;
    background-color: #F9D4E6;
}

.backgroundbleularge{
    margin-top: -1500px!important;
    width: 100%;
    float: right;
    height: 1800px;
    text-align: center;;
    background-color: #CBE6DF;
}

.backgroundbleuresp{
    margin-top: 2700px!important;
    width: 100%;
    float: right;
    height: 1800px;
    text-align: center;;
    background-color: #CBE6DF;
}

.backgroundgrislargefreep{
    margin-top: 650px!important;
    width: 100%;
    float: right;
    height: 1400px;
    text-align: center;;
    background-color: #E4E4E4;
}

.backgroundjauneresp{
    margin-top: 100px!important;
    width: 100%;
    float: right;
    height: 700px;
    text-align: center;;
    background-color: #EDE17B;

}

.backgroundgrislarge2{
    margin-top: 180px!important;
    width: 100%;
    float: right;
    height: 2000px;
    text-align: center;;
    background-color: #EEEEE8;
}

.backgroundgrisresp2{

    width: 100%;
    float: right;
    height: 1500px;
    text-align: center;;
    background-color: #EEEEE8;
}

.backgroundnoirherbier{
    margin-top: -380px!important;
    width: 100%;
    float: right;
    height: 1300px;
    text-align: center;;
    background-color: black;
}

.backgroundnoirherbierresp{
    margin-top: -1100px!important;
    width: 100%;
    float: right;
    height: 900px;
    text-align: center;;
    background-color: black;
}

.backgroundbeige{
  margin-top: -300px!important;
    width: 100%;
    float: right;
    height: 900px;
    text-align: center;;
    background-color: #E8D9AE;

}

.backgroundnoircecamm{
   margin-top: 300px!important;
    width: 100%;
    float: right;
    height: 900px;
    text-align: center;;
    background-color: black;
}

.backgroundbeigeresp{
  margin-top: -900px!important;
    width: 100%;
    float: right;
    height: 1400px;
    text-align: center;;
    background-color: #E8D9AE;
}


.backgroundnoircecammrep{
    margin-top: 200px!important;
    width: 100%;
    float: right;
    height: 1050px;
    text-align: center;;
    background-color: black;
}
}

/*footer*/

.footeresp {
    margin-top: 3300px!important;
    width: 100%;
    float: right;
    height: 400px;
    text-align: center;;
    background-color: black;


}

.footerespprisma{
    width: 100%;
    float: right;
    height: 400px;
    text-align: center;;
    background-color: black;


}
}


.uk-divider-vertical{
  margin-top: 25px!important;
  height: 40px!important;
  border-left: 5px solid black!important;
}

/* positionnement des éléments*/

 .plus-hautlarge{
  margin-top:-200px;
 }

 .plus-hautresp{
  margin-top:-100px;
 }

  .plus-hautprisma{
  margin-top:-400px;
 }

  .plus-hautrespprisma{
  margin-top:-100px;
 }

.plus-haut160px{
  margin-top:-160px;
}

.plus-bas500px{
   margin-top:500px!important;
}

.plus-bas350px{
   margin-top:350px!important;
}

.uk-sticky {
  padding : 15px!important;
}

.plus-bas1600px{
  margin-top:1600px!important;
}

.plus-bas1000px{
  margin-top:1000px!important;
}

/*angles image*/

.radius{
  border-radius: 50px
}

.icone img{
  width: 50px!important;
}

/*effet flou au passage de la souris*/

.blur{

-webkit-filter: blur(0px);; /* Chrome, Safari, Opera */
filter: blur(0px); /* Firefox */ 
}

.blur:hover  {

-webkit-filter: blur(3px); /* Chrome, Safari, Opera */
filter: blur(3px); /* Firefox */ 
-webkit-
}



nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  position: relative;
  z-index: 1000;
  
}

.header_nav{
  position: fixed!important;
  top: 0!important;
  z-index: 99999999999998!important;
  width: 100%;
  mix-blend-mode: difference!important;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  vertical-align: middle;
}


.menutext li h1{
  color: white!important;
}

.menutext li h1:hover{
  text-decoration:none!important; 
  color: gray;
}

.menutext li h2:hover{
  text-decoration:none!important;
  color: gray; 
}

.menutextresp{
   font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-size: 35px;
  font-style: normal;
  color: white!important;
}

.uk-link{
  text-decoration: none!important;
}

li a.menutextrespsmall{
  font-family: "lektorat-text-variable", sans-serif;
  font-weight: 300;
  font-size: 20px;
  font-style: normal;
  color: white!important;
}

.menutextresp:hover{
  text-decoration:none!important; 
}

/* animation slider */

body {
  align-items: center;
  justify-content: center;
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-430px * 40));
    transform: translateX(calc(-430px * 40));
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-430px * 40));
    transform: translateX(calc(-430px * 40));
  }
}
.slider::before,
.slider::after {
  content: "";
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  -webkit-animation: scroll 20s linear infinite;
  animation: scroll 150s linear infinite;
  display: flex;
  width: 100%;
}

.slider .slide {
  width: 350px; /* lighe 136 : si je change la taille rectifié la taille sur la ligne 131 */
}

.slide{
  margin: 15px;
}

/*hover menu*/
.uk-link-toggle:hover .uk-link,.uk-link:hover,a:hover {
    text-decoration: none!important;
  }

.uk-link-toggle:hover .uk-link,.uk-link:hover,a .vertige:hover{
     color:#04BD66!important;
}

.uk-link-toggle:hover .uk-link,.uk-link:hover,a .prisma:hover{
     color:#C16C95!important;
}

 .uk-link-toggle:hover .uk-link,.uk-link:hover,a .freep:hover{
     color:#65B29C!important;
  }

 .uk-link-toggle:hover .uk-link,.uk-link:hover,a .vege:hover{
     color:#F6EEC8!important;
  }

   .uk-link-toggle:hover .uk-link,.uk-link:hover,a .cecaam:hover{
     color:#04BD66!important;
  }

   .uk-link-toggle:hover .uk-link,.uk-link:hover,a .piste:hover{
     color:#1628E9!important;
  }

   .uk-link-toggle:hover .uk-link,.uk-link:hover,a .hasard:hover{
     color:#BD5342!important;
  }

 .uk-link-toggle:hover .uk-link,.uk-link:hover,a .instant:hover{
     color:#ECE9E0!important;
  }