@font-face {
    font-family: 'koliko';
    src: url('Webfont/koliko-regular.eot'); /* IE9 Compat Modes */
    src: url('Webfont/koliko-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('Webfont/koliko-regular.woff2') format('woff2'), /* Modern Browsers */
        url('Webfont/koliko-regular.woff') format('woff'), /* Modern Browsers */
        url('Webfont/koliko-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('Webfont/koliko-regular.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'koliko-bold';
    src: url('Webfont/koliko-Bold.eot'); /* IE9 Compat Modes */
    src: url('Webfont/koliko-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('Webfont/koliko-Bold.woff2') format('woff2'), /* Modern Browsers */
        url('Webfont/koliko-Bold.woff') format('woff'), /* Modern Browsers */
        url('Webfont/koliko-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
        url('Webfont/koliko-Bold.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'koliko-light';
    src: url('Webfont/koliko-Light.eot'); /* IE9 Compat Modes */
    src: url('Webfont/koliko-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('Webfont/koliko-Light.woff2') format('woff2'), /* Modern Browsers */
        url('Webfont/koliko-Light.woff') format('woff'), /* Modern Browsers */
        url('Webfont/koliko-Light.ttf') format('truetype'), /* Safari, Android, iOS */
        url('Webfont/koliko-Light.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
	font-family: 'koliko';
}

header{
	position: relative;
}

#borderHautdepage
{
	color:white;
	left:0;
	right:0;
	padding: 10px;
	background: #232323;
    top: 0;
    z-index: 1;
}

#borderHautdepage1
{
	left:0;
	right:0;
	padding: 2px;
	background: #fc776e;
    top: 0;
    z-index: 1;
}

input:focus {
     outline: none;
}

#covidlien
{
	color:lightgray;
	text-decoration:none;

}

#categocolor
{
  color:white;
  font-weight: bold;
}

#annonce{
	text-align: center;
	font-size:1rem;
	font-weight: normal;
	font-family: "futura";
}

.banner-desc{
	z-index: 5;
	color:white;
	font-weight: bold;
	}

.banner-desc a{
	color: white;
	text-decoration: none;
	border: solid 2px white;
	padding: 1rem;
	padding-left: 3rem;
	padding-right: 3rem;
	font-size: 1rem;
	transition-duration: 0.5s;
	}

	.banner-desc a:hover{
	background-color: white;
	color: #fc776e;
  font-size : 1.5rem;
	}

#marque{
	text-align: center;
	font-size:2rem;
  margin-top: 1rem;
	font-weight: normal;
	font-family: "futura";
}

#contactgrand{
	font-size: 3rem;
  text-align: center;

}

#lienscontact
{
  text-decoration: none;
  color: black;
}

#bieres{
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 3rem 17% 5rem;
}

#services
{
        display: flex;
        text-align: center;
}

#services1
{
        display: flex;
}

.divservice
{
	align-items: center;
    text-align: center;
    display: block;
    margin-top: 80px;
    width: 33,3%;
    padding: 15px;
}

.divservice2
{
    text-align: right;
	  align-items: center;
    display: block;
    margin-top: 80px;
    padding: 20px;
}

.divservice22
{
    text-align: left;
	  align-items: center;
    display: block;
    margin-top: 80px;
    width: 50%;
    padding-left: 14rem;
}

#contactimg
{
	width: 25%;

}

.divservice1
{
	align-items: center;
    text-align: center;
    margin-top: 80px;
}

#contactimg1
{
  height: auto;
	width: 95%;
	cursor: pointer;
}

#contactimg1:hover{
    width:100%;
}

.biere{
	font-family: 'koliko-light';
	font-weight: bolder;
	letter-spacing: 0.2rem;
	color: black;
    width: 20%;
    text-align: center;
	border-radius: 1rem;
    margin: 0.25rem;
    padding: 0.1rem;
}

.biere-nom{
	margin-top: 1rem;
	font-size: 1.5rem;
    text-align: center;
}

.biere-brasserie{
    text-align: center;
}

.biere-info{
	color: white;
    background-color: #494949;
    margin: auto;
    border: solid  1px;
    border-radius: 0.25rem;
    border-spacing: 0;
}

.biere-info td{
    padding: 8px;
    border-right: solid  1px;
}

.div_biere_img{
	position: relative;
	overflow: hidden;
	height: 15rem;
}

.div_biere_img>span{
	position: absolute;
	left: 5%;
	transition-duration: 0s;
	top: 110%;
	padding: 0.5rem 0;
	width: 90%;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	background-color: #fc776e;
}

.biere-achat{
	text-align: center;
	color: white;
}


.biere-achat:hover>.div_biere_img>span{
	top: 87%;
	transition-duration: .2s;
}

.biere-img{
	margin-right: auto;
	margin-left: auto;
	transition-duration: .2s;
	border-radius: 1rem;
	width: 60%;
}

.biere-achat:hover>div>.biere-img{
	width: 90%; /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.biere-prix{
	margin-bottom: 0.2rem;
}

.biere-modif{
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 0.25rem;
	border-radius: 1rem;
	background-color: #fc776e;
}


#trait_dessus{
    content: "";
    left: 0;
    right: 0;
    height: 0.5px;
    background: linear-gradient(to left, white 25%, #202020 25%, #202020 50%, #202020 50%, #202020 75%, white 75% );
	position: absolute;
	padding-top: 0.1rem;
}

#trait_dessus1{
    content: "";
    left: 0;
    right: 0;
    height: 0.5px;
    background: linear-gradient(to left, white 25%, #ef4035 10%, #ef4035 10%, #ef4035 10%, #ef4035 75%, white 75% );
	position: absolute;
	padding-top: 0.1rem;
}

#marquelogo{
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	display:flex;
	padding: 20px;
}

#stylesheet{
  padding: 10px;
}

#idf, #mail, #mdp, #mdpcon, #mailcon
{
  align-items: center;
  text-align: left;
  padding: 10px;
  font-family: 'futura';
  border-radius: 5px;
  padding-right: 3rem;
  border-color: lightgray;
  font-weight: lighter;
}

::placeholder {
  color: gray;
}

#inscrisbutton{
  align-items: center;
  padding: 10px;
  border: none;
  border-radius: 5px;
  padding-left: 3rem;
  padding-right: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  color:white;
  background-color: #00bc2b;
  cursor: pointer;
}

#inscrisbutton:hover
{
  background-color: #00a626;
  border-color: #00a626;
  color: #ececec;
}

#logo {

	   width: 20rem;
}
header img{
	width: 20rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

header nav{
	margin: 1rem auto;
	width: 45%;
	display: flex;
	justify-content: space-between;
}

header nav a{
	margin: 0.25rem 0.5rem;
	text-decoration: none;
	color: #6c6d6d;
	transition-duration: 0.5s;
}

header nav a:hover{
	margin: 0;
	padding: 0.25rem 0.5rem;
	background-color: #6c6d6d;
	color: white;
}

.headeractive{
	margin:0;
	padding: 0.25rem 0.5rem;
	background-color: #6c6d6d;
	color: white;
}

#login{
	position: absolute;
	top: 5px;
	right: 1rem;
}

#deco{
	position: absolute;
	top: 5px;
	left: 1rem;
}

#admin{
	position: absolute;
	top: 5px;
	right: 10rem;
}

#banner-salon{
	overflow: hidden;
	height: 500px;
	position: relative;
}

#img-banner-salon{
	margin-top: -10rem;
	width: 100%;
}

#banner{
	display: flex;
	position: relative;
}


#buttoninscription
{
  text-transform: uppercase;
  font-weight: bold;
  color:white;
  background-color: #00bc2b;
  padding: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
  border-radius: 3px;
  border-color: #00bc2b;
}

#buttoninscription:hover{
  background-color: #00a626;
  border-color: #00a626;
}

#buttonconnexion
{
  text-transform: uppercase;
  font-weight: bold;
  color:white;
  background-color: #eb9700;
  padding: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
  border-radius: 3px;
  border-color: #eb9700;
}

#buttonconnexion:hover{
  background-color: #cd8400;
  border-color: #cd8400;
}

.slide{
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	height: auto;
	overflow: hidden;
}

#slideselect{
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
}

#slide2, #slide3, #slide4{
	display: none;
}

#slide1>img{
	margin-top: 0;
	width: 100%;
}

#slide2>img{
	margin-top: 0rem;
	width: 100%;
}

#slide3>img{
	margin-top: 0rem;
	width: 100%;
}

.bouton-slide{
	position: absolute;
	top: 50%;
	width: 1.5rem;
	height: 2rem;
	background-color: rgba(160,160,160,0.75);
	border: none;
}

#slideprec{
	left: 0;
  	cursor: pointer;
}

#slidesuiv{
	right: 0;
  	cursor: pointer;
}

#mdpoublis{
  color:gray;
  text-decoration: none;
}

#rememberall{
  display: flex;
  text-align: center;
  align-items: center;
}

#centerconnexion{
  align-items: center;
  text-align: center;
  left:0;
  right: 0;
}

#textcontact{
	padding-top: 10;
	right: 0;
	left: 0;
	align-content: center;
	text-align: center;
	align-items: center;
	display: flex;
}


.tendances{
	display: flex;
	}

	.tendances-item{
	flex-basis: 50%;
	}

	.tendances-inverse{
	flex-direction: row-reverse;
	}

  .tendances-img2{
    width: 80%;
	height: 500px;
	background-size: cover;
	background-position: 55%;
	position: relative;
	}

  .tendances-img1{
	height: 500px;
	background-size: cover;
	background-position: 55%;
	position: relative;
	}

	.tendances-img{
	height: 800px;
	background-size: cover;
	background-position: 50%;
	position: relative;
	}

	.tendances-txt {
	  display: block;
	  font-size: 1.25rem;
	  text-align: justify;
	  padding: 0 100px ;
	  color: grey;
	}

	.tendances-txt p{
	margin-bottom: 30px;
	}

	.tendances-txt a{
	text-decoration: none;
	color: dodgerblue;
	}

	.tendances-txt h3{
	font-family: "Reenie Beanie";
	color: black ;
	font-size: 6rem;
	margin-bottom: 20px;
	}

	.tendances-txt .btn-grey{
	color: gray;
	text-decoration: none;
	border: solid 1px ;
	padding: 0.5rem 2rem;
	font-size: 1.5rem;
	transition-duration: 0.5s;
	}

	.tendances-txt .btn-grey:hover{
	background-color: gray;
	color: white;
	}

	.tendances-img > span{
	background-color: rgba(0,0,0,0.75);
	text-align: center;
	width: 100%;
	padding: 1.5rem 0;
	position: absolute;
	bottom: 0;
	color: white;
	font-size: 0.75rem;
	}

  .tendances-img1 > span{
	background-color: rgba(0,0,0,0.75);
	text-align: center;
	width: 100%;
	padding: 1.5rem 0;
	position: absolute;
	bottom: 0;
	color: white;
	font-size: 0.75rem;
	}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.text h1 {
    background-color: #345c9a;
    color: white;
    padding: 2rem 0;
	margin-top: -2rem;
	margin-bottom: 2rem;
}
.text h2 {
    background-color: #fc776e;
    color: black;
    padding: 2rem 0;
	margin-top: -2.4rem;
}
.text{
	padding: 2rem 0 0;
	font-size: 1.2rem;

}

#servicepasdispo
{
	position: absolute;
	width: 32%;
	top:20rem;
}

#exemple{
color:gray;
font-weight: bold;
display: flex;
}

#arrowex
{
  width: 50px;
}

.paragraph{
	font-family: 'koliko-light';
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-align: center;
	color: white;
}

.paragraph a{
	color: white;
	text-decoration: none;
}

.titre-infos{
	font-family: 'futura';
	font-weight: lighter;
	color: #E2CDC8;
	text-shadow: -0.1rem 0 0.1rem ;
	text-align: center;
	font-size: 4rem;
	padding: 5%;
}
.para-infos {
    font-family: 'futura';
     font-weight: lighter;
    font-size: 1.3rem;
    text-align: center;
    margin-left: 700px;
    width: 500px;
}

#communication{
	text-align: center;
	margin-bottom: 5rem;
}

.button{
	text-align: center;
	width: 15%;
	display: block;
	margin: 0.5rem auto;
	height: 2rem;
	background-color: #E2CDC8;
	border: solid 1.5px lightgray;
}

.fichier-{
	position: absolute;
	background-color: rgba(140,104,105,0.50);
	overflow: hidden;
	top: 50%;
	left: 50%;
	text-align: center;
	width: 0;
	height: 0;
	transition-duration: 0.4s;
}

#plan{
	display: block;
	margin: 1rem auto;
	text-align: center;
	width: 90%;
}

#img-plan{
	width: 60%;
}

#planacces{
   margin-bottom: 20px;
	display: flex;
	width: 30%;
	margin-left: auto;
	margin-right: auto;
  justify-content: center;
  align-items: center;
}

#planacces a:first-child{
	width: 66%;
}

#planacces a:nth-child(2){
	width: 34%;
}

#planacces a>img{
    position: relative;
	width: 100%;
    filter: blur(0px);
-webkit-filter: blur(0px);
}

#planacces a>img:hover {
    transition:filter .5s;
filter: blur(4px);
-webkit-filter: blur(4px);
}

footer{
	margin-bottom: 0;
	background-color: black ;
	padding: 1.5rem;
	text-align: center;
}

#footer-social > a{
	margin: 0.15rem;
	display: inline-block;
	width: 45px;
	height: 45px;
  cursor: pointer;
	background: url("../Images/socials1.png");
	background-size: 20rem;
  text-align: center;
}

#footer-social > #fb{
	background-position: -0.2rem -0.3rem;
}

#footer-social > #fb:hover{
	background-position: -0.2rem -3.45rem;
}

#footer-social > #star{
	background-position: -4.3rem -0.3rem;
}

#footer-social > #star:hover{
	background-position: -4.3rem -3.35rem;
}

#mentions{
	font-family: "koliko-light";
	font-weight: bold;
	color: #8e8e8e;
}

#mentions:hover{

	color: white;
}

#mentions1{
	color: #8e8e8e;
}

#mentions1:hover{
	color: white;
}

#panier{
	height: 100vh;
}

.cat_name{
	padding-top: 5rem;
	text-align: center;
}

.search_result{
	text-align: center;
	font-size: 1.5rem;
}

#search{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	margin-left: auto;
}

#search>input{
	border: 1px solid #3EF166;
	height: 2rem;
	padding-left: 1rem;
	border-bottom-left-radius: 2rem;
	border-top-left-radius: 2rem;
	font-weight: bold;
	font-size: 1rem;
	color: #494949;
}

#search>button{
	border: none;
	height: 2rem;
	width: 4.1rem;
	border-bottom-right-radius: 2rem;
	border-top-right-radius: 2rem;
	background-color: #3EF166;
	color: white;
}

#produit{
	padding-top: 5vh;
	padding-bottom: 5vh;
	display: flex;
}

#produit>img{
	margin: auto;
	width: 33%;
}

#produit>div{
	margin-right: auto;
	margin-left: auto;
	width: 33%;
}

#produit>div>p:first-child{
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	color: white;
	padding: 0.5rem 0;
	background-color: #E81F22;
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
}

#produit>div>h1{
	text-transform: uppercase;
	width: 100%;
	font-size: 2.5rem;
	padding: 1rem 0;
}

#produit>div>p:nth-child(4){
	width: 100%;
	padding: 1rem 0 0.5rem;
	font-size: 3rem;
}

#quantite{
	display: flex;
}

#quantite>select{
	font-weight: bold;
	width: 80%;
	height: 2.5rem;
	padding-left: 1rem;
}

#quantite>input{
	width: 10%;
	height: 2.5rem;
	background-color: black;
	color: white;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

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

	 #logo{
		cursor: pointer;
		 width: 40%;
	 }

	 header nav{
		 width: 100%;
	 }
	 header nav a{
		 font-size: 0.6rem;
	 }

	 .slide{
		 height: 10rem;
	 }
	 #slide1>img{
		 margin-top: -1rem;
		 width: 100%;
	 }

	 #slide2>img{
		 margin-top: -1rem;
		 width: 100%;
	 }

	 #slide3>img{
		 margin-top: -11rem;
		 width: 100%;
	 }

	 #slide4>img{
		 margin-top: -4rem;
		 width: 100%;
	 }
	 .bouton-slide{
		 height: 1.5rem;
		 width: 1rem;
		 top: 45%;
	 }
	 .dot{
		 height: 0.5rem;
		 width: 0.5rem;
	 }

	 .text{
		 font-size: 0.8rem;
	 }
	 #banner-salon{
		 overflow: hidden;
		 height: 10rem;
		 position: relative;
	 }
	 #img-banner-salon{
		 margin-top: -2rem;
		 width: 100%;
	 }

	 .titre-infos{
		 font-size: 1.4rem;
		 font-family: "futura";
		 font-weight: bold;
		 text-shadow: 0.5px 0.5px 0 ;
		 width: 100%;
	 }
	 #communication>iframe{
		 width: 80%;
		 height: 10rem;
	 }
	 #communication{
		 margin: 0.1rem auto;
	 }
	 #plan{
		 margin: 0.2rem auto;
	 }
	 #dossierpresse>a .nom-fichier{
		 font-size: 1.5rem;
	 }
	 .button{
		 width: 9.5rem;
		 height: 1.5rem;
	 }
	 #planacces{
		 width: 100%;
	 }
	 .text{
		 padding-top: 1rem;
		 padding-bottom: 1rem;
	 }
	 .text h1{
		 padding-top: 1rem;
		 padding-bottom: 1rem;
	 }
	 .text h2{
		 padding-top: 1rem;
		 padding-bottom: 1rem;
	 }
	 #paraindex>h2{
		 padding-top: 2rem;
		 margin-bottom: 1rem;
	 }

	 footer{
		 margin-bottom: 0;
		 background-color: black;
		 padding: 1rem;
	 }

	 #footer-social > a{
		 width: 2rem;
		 height: 2rem;
		 background-size: 15rem;
	 }
	 #footer-social > #fb{
		 background-position: -0.2rem -0.3rem;
	 }
	 #footer-social > #fb:{
		 background-position: -0.2rem -2.65rem;
	 }

	 #mentions{
		 font-size: 0.5rem;
	 }
}