@charset "utf-8";
/* CSS Document */

body{
	background-color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
}
h1{
	color: #000000;
	font-family: 'Parisienne', cursive;
    font-size: 5em;
}
h2{
	color: #000000;
	font-family: 'Parisienne', cursive;
    font-size: 2em;
}
h3{
	color: #000000;
	font-family: 'Parisienne', cursive;
    font-size: 2em;
}

/*#suite h2{
    font-family: 'Parisienne', cursive;
}*/
/*-----------------------------------------slides index---------------------------------------- */

.slide h1 {
    font-family: 'Parisienne', cursive;
    font-size: 3.5em;
    font-weight: 300;
    position: absolute;
	margin-left: 10%;
    top: 16%;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 6px 6px rgba(0,0,0,.8);
	}
  @media (min-width: 576px) {
	.slide h1 {
			font-size: 3.5em;
			font-weight: 300;
			margin-left: 15%;
			top: 16%;
		}
 h2{
    font-size: 2em;
}
  }

    @media (min-width: 768px) {
	.slide h1 {
			font-size: 6em;
			font-weight: 400;
			margin-left: 10%;
			top: 20%;
		}
h2{
    font-size: 2.5em;
}
	}

    @media (min-width: 992px) {
		.slide h1 {
			font-size: 7em;
			font-weight: 500;
			margin-left: 15%;
			top: 22%;
			}
h2{
    font-size: 2.5em;
}
	}
    @media (min-width: 1200px) {
		.slide h1 {
				font-size: 8em;
				font-weight: 500;
				margin-left: 15%;
				top: 26%;
				}
h2{
    font-size: 3em;
}
	}
/*-----------------------------------------nav bar---------------------------------------- */
.navbar{
	white-space: nowrap;
}
.navavantsc{
	background-color: hsla(206,23%,44%,0.80) !important;
}
.navapressc{
	/*background-color: hsla(206,3%,40%,0.80) !important;*/ 
	background-color: hsla(208,12%,22%,0.60) !important;
}
    @media (min-width: 576px) {
		.navavantsc{
			background-color: hsla(206,23%,44%,0.80) !important;
		}
	}
    @media (min-width: 768px) {
		.navavantsc{
			background-color: hsla(206,23%,44%,0.80) !important;
		}
	}
    @media (min-width: 992px) {
		.navavantsc{
			background-color: transparent !important;
		}
	}
    @media (min-width: 1200px) {
		.navavantsc{
			background-color: transparent !important;
		}
	}
.navbar .nav-item .nav-link{
	color: #fff !important;
	text-shadow: 0 2px 4px rgba(0,0,0,.8);
	font-size: 16px;
}
.logo{
	padding-left: 30%;
	width: 120px;
}

   @media (min-width: 576px) 
   {
	  	.navbar .nav-item .nav-link{
		font-size:  16px;  
		}
	   .dropdown-menu a{
		font-size: 16px;
		} 
.logo{
	padding-left: 30%;
	width: 120px;
}
	}
    @media (min-width: 768px) 
	{
		.navbar .nav-item .nav-link{
		font-size:  14px;  
		}
		.dropdown-menu a{
		font-size: 14px;
		} 
.logo{
	padding-left: 0;
	width: 120px;
}
	}
    @media (min-width: 992px) 
	{
		.navbar .nav-item .nav-link{
		font-size:  20px;  
		}
		.dropdown-menu a{
		font-size: 20px;
		} 
.logo{
	padding-left: 10%;
	width: 160px;
}
	}
    @media (min-width: 1200px) 
	{
		.navbar .nav-item .nav-link{
		font-size:  25px;  
		}
		.dropdown-menu a{
		font-size: 20px;
		} 
.logo{
	padding-left: 10%;
	width: 220px;
}
	}

.navbar .nav-item .nav-link:hover .navbar .nav-item .nav-link{
    color:red !important;
    
}

.active {
	color: #212529;
	background-color: hsla(210,5%,16%,0.60) ;
	border-color: #f8f9fa;
	border-radius: 10px;
}

/* Medium devices (tablets, 768px and up) 
The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  border-radius:0;
 }
}
/*---------------------------------- bandeaux----------------------------------------------*/
#bandeaumenu{
	background-color: hsla(206,23%,44%,0.80);;
	width: 100%;
	height: 120px;
	background-image: url(../images/bandeaux/bandeau-salle.jpg);
	background-size: cover;
	background-position : bottom left;
}
#bandeauvins{
	background-color: hsla(206,23%,44%,0.80);;
	width: 100%;
	height: 120px;
	background-image: url(../images/bandeaux/bandeauvins.jpg);
	background-size: cover;
	background-position : bottom left;
}
#bandeaufacade{
	background-color: hsla(206,23%,44%,0.80);;
	width: 100%;
	height: 120px;
	background-image: url(../images/bandeaux/bandeau-vin-service.jpg);
	background-size: cover;
	background-position : bottom left;
}
#bandeauneutre{
	background-color: hsla(206,23%,44%,0.80);;
	width: 100%;
	height: 120px;
}

 @media (min-width: 576px) {
	 #bandeaumenu, #bandeauvins, #bandeaufacade, #bandeauneutre{
		height: 120px;
	}
}
@media (min-width: 768px) {
	 #bandeaumenu, #bandeauvins, #bandeaufacade, #bandeauneutre{
		height: 200px;	 } 
}
@media (min-width: 992px) {
	 #bandeaumenu, #bandeauvins, #bandeaufacade, #bandeauneutre{
		height: 240px;	 } 
}
@media (min-width: 1200px) {
	 #bandeaumenu, #bandeauvins, #bandeaufacade, #bandeauneutre{
		height: 400px;	 } 
}

/*---------------------------------- card ----------------------------------------------*/
.card-jm{
	min-width: 240px;
} 
.espac{
	margin-top: 15px;
}
.card-body {
	padding: 0.75rem;
	font-family: 'Open Sans', sans-serif;
}

.card-title {
  margin-bottom: 0.25rem;
}
.card-mbre{
	margin-bottom: 20px;
}
.card-mbre .card-header{
	background-color: hsla(91,23%,49%,0.81);
	color: #000;
	text-align: center;
	font-family: 'Parisienne', cursive;
	font-size: 2em;
}
.card-mbre .card-footer{
	background-color:hsla(206,23%,44%,0.80);
	color: #000000;
	text-align: right;
}

.card-body {
  padding: 0.75rem; 
}
.card-gouaches{
	margin: 10px auto;
	min-width: 140px;
	max-width: 160px;
}

.card-gouaches{
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.card-gouaches:hover{
/* L'image est grossie de 25% */
-webkit-transform:scale(1.1); /* Safari et Chrome */
-moz-transform:scale(1.1); /* Firefox */
-ms-transform:scale(1.1); /* Internet Explorer 9 */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
}
.card-huiles{
	margin: 10px auto;
	min-width: 140px;
	max-width: 160px;
}

.card-huiles{
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.card-huiles:hover{
/* L'image est grossie de 25% */
-webkit-transform:scale(1.1); /* Safari et Chrome */
-moz-transform:scale(1.1); /* Firefox */
-ms-transform:scale(1.1); /* Internet Explorer 9 */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
}

.card-title {
  margin-bottom: 0.25rem;
}
.suite2{
padding-top: 3rem;
padding-bottom: 3rem;
}
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

.cadre{
	width: 90%;
	margin: 30px;
	border: 20px solid white;
}
.cadre:hover{
	border: 20px solid red;
	cursor: pointer;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
.btn-outline-secondary:hover {
  color: #fff;
background-color: hsla(91,23%,49%,0.80);
  border-color: #6c757d;
}
/*-----------------------------------------diaporama-----------------------------------------*/
.diaporama{
	background-color: #000;             /*#2E2E2E*/
	color: #FFFFFF;
}
.colgauche{
	height: 600px;
	overflow: scroll;
	overflow-x: hidden;
}
.w-jm {
margin-top: 20px;
width: 100% !important;
}
    @media (min-width: 576px) {
		.w-jm {
		  width: 100% !important;
		}
	}
    @media (min-width: 768px) {
		.w-jm {
		  width: 80% !important;
		}
	}
    @media (min-width: 992px) {
		.w-jm {
		  width: 60% !important;
		}
	}
    @media (min-width: 1200px) {
		.w-jm {
		  width: 40% !important;
		}
	}

.w-jm_h {
margin-top: 20px;
width: 100% !important;
}
    @media (min-width: 576px) {
		.w-jm_h {
		  width: 100% !important;
		}
	}
    @media (min-width: 768px) {
		.w-jm_h {
		  width: 100% !important;
		}
	}
    @media (min-width: 992px) {
		.w-jm_h {
		  width: 100% !important;
		}
	}
    @media (min-width: 1200px) {
		.w-jm_h {
		  width: 80% !important;
		}
	}





.carousel-caption{
	left:0;
	bottom: -30px;
	width: 40%;
	text-align: center;
	margin-left: 30%;
}
.carousel-caption h5{
	font-size: 12px;
	color: rgb(255,255,255);
	background-color: rgb(102,102,102,0.5);
	padding: 10px;
	z-index: 10000;
}
/*.carousel-indicators {
  position: absolute;
  right: 0;
  top: 30px;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}
*/
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}
.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}

/*-----------------------------------------footer-----------------------------------------*/
#footer{
	background-color: hsla(206,23%,44%,0.80);
	margin-top: 30px;
	padding-top: 10px;
}
#footer a{
	color: #FFFFFF;
	font-size: x-small;
}
#footer p{
	color: #FFFFFF;
	font-size: x-small;
	line-height: 1px;
}







.cartvins {
	padding: 0.75rem;
	margin-bottom: 0;
	color: inherit;
	border-radius: 0.25rem;
	height: 1200px;
	overflow-y: scroll;
	overflow-x: hidden;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.top {
	
	position: absolute;
	top: 0px;
	background-color: hsla(91,23%,49%,0.80);
	color: #000;
	text-align: center;
	font-family: 'Parisienne', cursive;
	font-size: 0.5em;

}

.cardfixh {
	position: fixed;
	padding-top: 10px;
	padding-right: 5%;
	padding-left: 5%;
	padding-bottom: 10px;
	margin-left: 0%;
	z-index: 1500;
	background-color: hsla(91,23%,49%,0.81);
	color: #000;
	text-align: center;
	font-family: 'Parisienne', cursive;
	font-size: 2em;
}
/*.modal-header{
	background-color: hsla(91,23%,49%,0.81);
	justify-content: center;
	}*/
/*.modal-header {
  	background-color: hsla(91,23%,49%,0.81);
	position: fixed;
	z-index: 1500;
}	
	*/
	
.card-header{
	position: fixed;
	width: 50%;
	margin-top: -75px;
}	
	
	
/*.cardfixh1 {
	position: fixed;
	width: 68%;
	padding-top: 10px;
	padding-bottom: 10px;
	z-index: 1500;
	background-color: hsla(91,23%,49%,0.81);
	color: #000;
	text-align: center;
	font-family: 'Parisienne', cursive;
	font-size: 2em;
}
*/
.soustitle {
	padding-top: 3em;
}
.MsoNormal {

}

    @media (min-width: 576px) {
		.top {
			font-size: 0.5em;
		}
		.MsoNormal {
		}
	}
		.cardfixh {	
			position: fixed;
			padding-top: 10px;
			padding-right: 5%;
			padding-left: 5%;
			padding-bottom: 10px;
			margin-left: 0%;
	}
    @media (min-width: 768px) {
		.top {
			font-size: 1em;
		}
		.MsoNormal {
		}
		.cardfixh {	
			position: fixed;
			padding-top: 10px;
			padding-right: 10%;
			padding-left: 10%;
			padding-bottom: 10px;
			margin-left: 0%;
		}
	}
    @media (min-width: 992px) {
		.top {
			font-size: 1.5em;
		}
		.MsoNormal {
		}
		.cardfixh {	
			position: fixed;
			padding-top: 10px;
			padding-right: 10%;
			padding-left: 20%;
			padding-bottom: 10px;
			margin-left: 0%;
		}
	}
    @media (min-width: 1200px) {
		.top {
			font-size: 2em;
		}
		.MsoNormal {
		}
		.cardfixh {	
			position: fixed;
			padding-top: 10px;
			padding-right: 15%;
			padding-left: 30%;
			padding-bottom: 10px;
			margin-left: 2%;
		}
}
	
	
  .modal-lg {
    max-width: 1200px;
  }

.modal-body {
	padding: 1rem;
	margin: 0rem;
}

.card-deck-jm {
	padding: 60px;	
}

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

.img-text{
float: left;
margin-right: 15px;
}
.card-header2 {
	background-color: hsla(91,23%,49%,0.81);
	color: #000;
	text-align: center;
	font-family: 'Parisienne', cursive;
	font-size: 2em;
}