/*font*/

@font-face {
    font-family: 'robotolight';
    src: url('../font/roboto-light-webfont.woff2') format('woff2'),
        url('../font/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Jabottabeck';
    src: url('../font/jabottabeckregular-yzl2a-webfont.woff2') format('woff2'),
        url('../font/jabottabeckregular-yzl2a-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*général*/

body {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}

a {
    text-decoration: none;
    color: #000000;
}
h1{
    display: block;
    margin-top: 7vh;
    margin-bottom: 7vh;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Jabottabeck';
    font-size: 2vw;
    text-align: center;
    text-decoration : underline;
}
p{
    font-family: 'robotolight'; 
    font-size: 1.5vw;
    display: block;
    text-align: justify;
}
/*News*/
.main {
    max-width: 1000px;
    margin: auto;
  }
  
  h1 {
    font-size: 5vw;
    word-break: break-all;

  }
  .content h3{
    font-family: 'Jabottabeck';
    text-align: center; 
    text-decoration: underline;
    font-size: 2.5vw;
  }
  .row {
    margin: 8px -16px;
  }
  
  /* Add padding BETWEEN each column */
  .row,
  .row > .column {
    padding: 0px;
  }
  
  /* Create four equal columns that floats next to each other */
  .column {
    float: left;
    width: 25%;
  }
  
  /* Clear floats after rows */ 
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Content */
  .content_bas{
    background-color: white;
    padding: 1vw;
    margin-bottom: 10vw;
  }
  .content_bas h3{
    font-family: 'Jabottabeck';
    text-align: center; 
    text-decoration: underline;
    font-size: 2.5vw;
  }
  .content {
    background-color: white;
    padding: 1vw;
  }
 .textet{
   text-align: center;
 }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 1000px) {
    .column {
      width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }
/*article notre biere*/
.article1{
    display: flex;

}
.colone1{
    width: 42vw;
       
}
.colone2{
    width: 42vw;
    
}
.paranotrebiere{
padding-top: 20%;
padding-bottom: 20%;
margin-left: 15%;
margin-right: 5%;

display: block;
}
.imagebiere{
    margin: 20%;
    height: 500px;
    width: 600px ;
}
/*fin article notre biere*/
/*header*/

.ulnav{
  display: grid;
  grid-template-columns:20% 20% 20% 20% 20%;
  list-style:none;
}

.navli {
  padding: 3vw;
  font-size: 1.6vw;
  font-family:robotolight;
  color: #000000;
  text-align:center;
}
header a{
    color:black;
}

.ici{
    text-decoration:overline;
}

a:hover{
    text-decoration:underline;
}

.mail{
  font-weight: bold;
  text-decoration : underline;
}

  
/*main*/

.imagebrassage{
    height: 200px;
    width: 200px;
}

/*footer*/
footer {
  border-top: 1.2px solid black;
  font-family:robotolight;
  margin-top:5vw;
}



footer .tdtext {
  padding: 0.75vw;
  text-align: justify;
  vertical-align: top;
  font-family: robotolight;
  font-weight: lighter;
  font-size: 0.9vw;
  width: 25%;
}


footer .tdlist {
  padding: 0.75vw;
  text-align: center;
  vertical-align: top;
  font-family: robotolight;
  font-weight: lighter;
  font-size: 0.9vw;
  width: 25%;
}



.footlih{
  width:20vw;
}

.footlir{
  width:20vw;
}

footer ul {
  list-style-type: none;
}

footer .titre{
  text-align:center;
  font-size:1.2vw;
}

footer a{
  color:black;
}

 /*reseaux*/

.resfix{
  width:7vw;
  height:22vw;
  position : fixed;
  background-repeat: no-repeat;
  margin-top:20vw;
  margin-left:92vw;
  background-image: url("../img/reseaux.svg");
}

.c1{
  height:4vw;
  width:4vw;
  border-radius:100%;
  margin-top:2.4vw;
  margin-left:0.05vw;
}

.c2{
height:4vw;
width:4vw;
border-radius:100%;
margin-top:2.5vw;
margin-left:0.1vw;
}

.c3{
height:4vw;
width:4vw;
border-radius:100%;
margin-top:2.35vw;
margin-left:0.0vw;
}


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

   /*news*/

   .content{
      padding:1.5vw;
   }
   p{
      font-size:2.5vw;
      padding:2vw;
      text-align:center;
   }

  /*header*/
   .resfix{
       display:none;
   }

   header{
       background-color:rgba(255, 0, 0, 0);
   }
   .ulnav{
       display: flex;
       flex-direction:column;
   }
   
   .navli {
       padding: 1.5vw;
       font-size: 2.5vw;
       font-family:robotolight;
       color: #000000;
       text-align:center;
     }

   
     .ici{
         text-decoration:overline;
     }

     /*footer*/

     footer {
       border-top: 0.5px solid black;
       margin-top:10vw;
   }
   
   
   footer .tdtext {
       padding: 0.75vw;
       text-align: justify;
       vertical-align: top;
       font-family: robotolight;
       font-weight: lighter;
       font-size: 0.9vw;
       width: 25%;
       min-width:25%;
       max-width:25%;
   }
   
   
   footer .tdlist {
       padding: 0.75vw;
       text-align: center;
       vertical-align: top;
       font-family: robotolight;
       font-weight: lighter;
       font-size: 0.9vw;
       width: 25%;
       min-width:25%;
       max-width:25%;
   }
   
   
   
   .footlih{
       width:10vw;
       margin-top:1vw;
   }
   
   .footlir{
       width:16vw;
       margin-top:1vw;
   }
   
   footer ul {
       width:16vw;
       margin-right:auto;
       margin-left:auto;
   }
   
   footer .titre{
       text-align:center;
       font-size:1.2vw;
   }
   
   footer a{
       color:black;
   }

     /*accueil*/

     .lmpres {
   background-image: url("../img/intrologo.svg");
   background-size: contain;
   background-repeat:no-repeat;
   background-position:center;
   width: 92vw;
   height: 32vw;
}


.presstext {
   padding: 2vw;
   font-size: 2.1vw;
   width: 58vw;
}


.signiaturelm {
   font-size: 3.5vw;
   margin-top: -3vw;
   margin-left: 30vw;
}

/*caroussel*/

.fond {
   background-color: rgba(255, 255, 0, 0);
   margin-top: 10vw;
   width: 85vw;
   height: 45vw;
}

.leftc {
   height: 45vw;
   width: 6vw;
}

.leftt {
   margin-top: 19vw;
   margin-left: -3vw;
   border-right-width: 6vw;
   border-left-width: 6vw;
   border-bottom: 6.2vw solid #000;
}

.rightc {
   height: 45vw;
   width: 6vw;
}

.rightt {
   margin-top: 19vw;
   margin-left: -3vw;
   border-right-width: 6vw;
   border-left-width: 6vw;
   border-bottom: 6.2vw solid #000;
}

.cache {
   position:absolute;
   margin-left: 75.5vw;
   width: 0.5vw;
   max-width:62vw;
   height: 45vw;
   background-color: rgb(255, 255, 255);
   transition: all 0.7s ease-in-out;
}
/*carri2*/

.container {
   margin-left:auto;
   margin-right:auto;
   background-color:rgba(255, 0, 0, 0);
   width:73vw;
 }
 

 .fd1{
   width:72vw;
   height:45vw;
   background-color:rgba(255, 255, 0, 0);
 }

 .bottle{
   background-image: url("../img/bottle.png");
   background-size:contain;
   background-position:center;
   background-repeat:no-repeat;
   width:22vw;
   height:45vw;
   margin-left:4vw;
   margin-top:0.5vw;
 }

 .slidti{
     font-family:jabottabeckregular;
     letter-spacing:0.15vw;
     font-size:4.5vw;
     margin-left:30vw;
     margin-top:-38vw;
 }

 .slidte{
     font-family:robotolight;
     font-size:2.5vw;
     width:30vw;
     text-align:justify;
     margin-left:28vw;
 }

 .fd2{
   width:72vw;
   height:45vw;
   background-color:rgba(255, 255, 0, 0);
 }

 .fd3{
   width:72vw;
   height:45vw;
   background-color:rgba(255, 255, 0, 0);
 }

 /*produits*/

.title {
   width: 45vw;
   height: 8.5vw;
   background-image: url("../img/produ.svg");
   background-size:contain;
   background-position:center;
   background-repeat: no-repeat;
}
.produtext{
   margin-top:3vw;
   font-size:6vw;
   width:45vw;
   height:5vw;
   text-align:center;
}
.product1 {
   margin-top: 4vw;
   width: 93vw;
   height: 31vw;
}

.product2 {
   margin-top: 8vw;
   width: 93vw;
   height: 31vw;
}

.product3 {
   margin-top: 8vw;
   width: 93vw;
   height: 31vw;
}

.p1 {
   width: 31vw;
   height: 31vw;
}

.p2 {
   width: 31vw;
   height: 31vw;
   margin-top: -31vw;
   margin-left: 31vw;
}

.p1:hover {
   width: 62vw;
}

.p2:hover {
   width: 62vw;
}

.testi{
   margin-left:62vw;
}

.p3 {
   width: 31vw;
   height: 31vw;
}

.p4 {
   width: 31vw;
   height: 31vw;
   margin-top: -31vw;
   margin-left: 31vw;
}

.p3:hover {
   width: 62vw;
}

.p4:hover {
   width: 62vw;
}

.p5 {
   width: 31vw;
   height: 31vw;
}

.p6 {
   width: 31vw;
   height: 31vw;
   margin-top: -31vw;
   margin-left: 31vw;
}

.p5:hover {
   width: 62vw;
}

.p6:hover {
   width: 62vw;
}

.endprod {
   margin-top: 8vw;
   width: 45vw;
   height: 8.5vw;
   background-image: url("../img/produ.svg");
   background-repeat: no-repeat;
   background-position:center;
   background-size:contain;
}

/*int produits*/

.titrep{
   margin-top:2.8vw;
   font-size:3vw;
   margin-left:36.5vw;
   width:30vw;
}

.textep{
   font-size:1.8vw;
   width:28vw;
   height:12.75vw;
   margin-top:2vw;
   margin-left:32.5vw;
}

.commandep{
   font-size:1.5vw;
   margin-left:35.393vw;
   padding:1.75vw 7vw;
}


.titrepd{
   margin-top:2.8vw;
   font-size:3vw;
   margin-right:38vw;
   width:30vw;
}

.textepd{
   font-size:1.8vw;
   width:28vw;
   height:12.75vw;
   margin-top:2vw;
   margin-right:32.5vw;
}

.commandepd{
   font-size:1.5vw;
   margin-right:35.393vw;
   padding:1.75vw 7vw;
}

/*sous produits*/
.textiprodu {
   margin-top: 8vw;
   display: flex;
   flex-direction: column;
   width: 75vw;
}

.logo {
   width: 33vw;
   height: 33vw;
   margin-left:auto;
   margin-right:auto;
}

.tglmp {
   width: 70vw;
   font-size: 2.2vw;
   margin-right:auto;
   margin-left:auto;
}

.tdlmp {
   width: 70vw;
   font-size: 2.2vw;
   margin-right:auto;
   margin-left:auto;
}

/*prod panier*/

.jeveux{
   padding:0.8vw;
   font-family:robotoregular;
}

.row{
   display:flex;
   flex-direction:column;
}

.paddt{
   margin-left:0vw;
}

.imgla{
   width:100%;
   height:auto;
}


}