@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');/*font-family: 'Open Sans', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');/*font-family: 'Nanum Gothic', sans-serif;*/

:root {
    --primaire: #000;
    --secondaire: #464646;
	--tertiaire: #fff;
	--primaire-opacite:0, 0, 0;
	--primaire-secondaire:0, 0, 0;
	--primaire-tertiaire:0, 0, 0;
	--font1:'Open Sans', sans-serif;
	--font2:'Open Sans Condensed', sans-serif;
}



body {

    line-height:1.5em;


}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
 
.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}




/* HEADER */
#header { background: url(../charte/bandeau-header.jpg) no-repeat top fixed; width: 100%; height: 130px}
#logo {text-align:center; margin-top: 5px}
#slogan p {font-size:34px; font-family:var(--font2);text-align:right; margin-top: 50px; font-weight: bold}
#slogan p a {color:var(--primaire)}
#slogan p a:hover {text-decoration: none}
#slogan .icone {text-align: right; padding:5px 0px}
#slogan .icone a {color:var(--secondaire)}
#slogan .icone a:hover {text-decoration: none; color:var(--primaire)}
#slogan .langue p  {text-align: right; font-size: 14px; margin-top: 10px}



@media (max-width: 992px) {
#header { background:none; background-color:var(--tertiaire); width: 100%; height: auto}
#logo {text-align:center}
#slogan p {font-size:28px;text-align:center}
#slogan .icone {text-align: center; padding-top: 15px}
#slogan .langue p  {text-align: center; font-size: 14px; margin-top: 10px}	
}


/*hack menu sur smartphone*/
@media (max-width:700px) {
body {
    padding-top:0px!important;
}	
.navbar.fixed-left {
    position: relative!important;
}	
}
/*hack menu sur smartphone*/

.parallax-head {
    /* The image used */
    background-image:;

    /* Set a specific height */
    height: ;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


@media (max-width: 992px) {
.parallax-head {height: 250px;}
}


@media only screen and (max-device-width: 1366px) {
  .parallax-head {
    background-attachment: scroll;
  }
}

/*HEADER*/


/*COLONNES*/


/*COLONNES*/

/*INFOS*/
/*.infos { color: #690808; text-align: center; width: 100%;}*/
/*INFOS*/


/*CAROUSEL*/
.carousel-caption h2 { font-size:6vw;margin-top: -10%}
.carousel-caption p { font-size:1vw;}
.carousel-caption {

    position: absolute;
    right: 15%;
    bottom: 35%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color:var(--tertiaire);
    text-align: center;

}

.filtre { background-color:var(--primaire);}
.opaciter img { opacity: 1;}
/*CAROUSEL*/

/*MENU*/

.navbar-brand {
    display: inline-block;
    padding-top: 0rem!important;
    padding-bottom: .0rem!important;
    margin-right: 0rem!important;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.nav { width: 100%}
#menu { background:#fff; width: 100% }
li.nav-item { background-color:#fff; width: 100%;  color:#000}
.nav-link { color:#006271; padding: 10px 10px; text-align: center; text-transform: uppercase}
.nav-link:hover {background-color:#fff;  color:#343A40; border-radius:0px}
.nav-link.active {background-color:#fff;  color:#343A40; border-radius:0px}
.nav-pills .nav-link {
    border-radius:0rem;
}	

.navbar-dark .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,1);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}	
.navbar-dark .navbar-nav .nav-link {
	color: #000; font-family: 'Nanum Gothic', sans-serif; font-weight: bold}

.navbar-dark {background:#fff}
@media (max-width: 720px) {
.nav-link img  { width: 50%; text-align: center}
.navbar-brand img  { width: 50%; text-align: center}
}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
    color: #006271;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #006271;
}


/*MENU*/

.container {
    max-width: 1400px;
}

/*INTEGRATION*/
#section1 {background:#fff; padding:20px 0px; }
@media (max-width: 992px) {
#section1 {background: none; background-color: #fff; padding:60px 0px; min-height: 400px }
}
#section1 h1 { color:#3d3d3d; line-height:1.5em; text-align: center; font-family: 'Nanum Gothic', sans-serif;}
#section1 p {line-height:1.5em; font-family: 'Montserrat', sans-serif;}
#section1 .icone {color:var(--secondaire); text-align: center}




#section2 { background-color:#fff; padding:10px 0px}
#section2 h2 { color: #3d3d3d; line-height:1.5em; text-align: center; padding-top: 20px;  font-family: 'Nanum Gothic', sans-serif;}
#section2 p {color: #000;line-height:1.5em; font-family: 'Montserrat', sans-serif;}
#section2 .icone {color:var(--tertiaire); text-align: center}
#section2 .image-right {position:relative;width: 50%;float: right;}
@media (max-width: 992px) {
#section2 .image-right {position:relative;width: 100%;float: none; clear: both}
#section2 {height: auto}
}


#section3 {}
#section3 h2 {padding-top:170px; color:#fff; font-size:40px; text-align: center;  font-family: 'Nanum Gothic', sans-serif;}
@media (max-width: 992px) {
#section3 h2 {padding-top:10px}
}
#section3 p {text-align: center; font-weight:bold}
.parallax {
    /* The image used */
    background-image: url("../charte/img-parallax.jpg");

    /* Set a specific height */
    height: 450px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


@media (max-width: 992px) {
.parallax {height: 250px;}
}


@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

#section4 { background-color:#fff; padding: 40px 0px}
#section4 h2 { color:#006271; line-height:1.5em; text-align: left;  font-family: 'Pacifico', cursive;}
#section4 p {line-height:1.5em; text-align: justify; font-family: 'Montserrat', sans-serif;}
#section4 a {color:var(--primaire);}
#section4 .icone {color:var(--primaire);text-align: center}
#section4 .btn { background-color:var(--primaire); color:var(--tertiaire); text-align: center; margin-bottom: 10px}
#section4 .btn:hover { background-color:var(--secondaire); color:var(--tertiaire); text-align: center}
.patch{width: 170px; height: 170px; border-radius:100%; background-color:var(--primaire);margin-top: 50px; padding-top:50px; color:var(--tertiaire);}
@media (max-width: 992px) {
.patch{margin-top: 20px;margin-left: 0%}
}


#section-rubrique {padding: 50px 0px; font-family: 'Montserrat', sans-serif;}
@media (max-width: 992px) {
#section-rubrique {padding: 70px 0px 40px}
}
#section-rubrique h1 { color:#3d3d3d; line-height:1.5em; text-align: center; font-family: 'Nanum Gothic', sans-serif;}
#section-rubrique h2 { color:#3d3d3d; line-height:1.5em; text-align: center; font-family: 'Nanum Gothic', sans-serif;}
#section-rubrique h3 { color:#3d3d3d; line-height:1.5em; text-align: center; font-family: 'Nanum Gothic', sans-serif;}



/*boutons custom bootstrap*/
.btn-custom {
	color: #fff;
    background-color: #000;
    border-color:none;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
    color: #fff;
    background-color: #000;
    border-color: none; /*set the color you want here*/
}
/*fin boutons custom bootstrap*/



/*a, a:hover, a:visited {color:var(--secondaire);}*/


table td{padding:0.5em;border:1px solid #fff}
.fondgris1{background-color:#eaeee3}
.fondgris2{background-color:#e1f1c6}


h4{color:var(--primaire);}

.ekko-lightbox-nav-overlay a {
    color: #c97b17;
}

@media (max-width: 767px){
dl, ol, ul {
   
    margin-bottom: 0rem;
}
}




/* ANIMATION PHOTO - source : https://codepen.io/melnik909/pen/QgPpeg  */
.photobox{
  display: inline-block;
}

.photobox__previewbox{
  position: relative;
  overflow: hidden;
}

.photobox__preview{
  display: block;
  max-width: 100%;
}

.photobox__previewbox:before{
  content: "";
}

.photobox_type11 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  background-color:rgba(161,152,132,0.5);
  border-radius: 50%;
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;

  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;

  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}

.photobox_type11:hover .photobox__previewbox:before{
  -webkit-transform: translate(-50%, -50%) scale(4);
          transform: translate(-50%, -50%) scale(4);
  transition-duration: var(--photoboxAnimationDuration, .8s);
}

.photobox_type11 .photobox__label{
  width: 95%;
  text-align: center;
  
  -webkit-transform: translate(-200%, -50%);
  
          transform: translate(-200%, -50%);
  transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
  transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
  will-change: transform;
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
	font-size:22px;
}

.photobox_type11:hover .photobox__label{
  transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);color:var(--tertiaire);
}

.photobox_type11 .photobox__preview{
	transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
	transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
	transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
  will-change: transform;
	-webkit-transform: scale(1);
	        transform: scale(1);
}

.photobox_type11:hover .photobox__preview{
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}


/* FIN ANIMATION */




/* MASONRY */
.grid {
  background: #fff;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
  padding:0.2em; min-height: auto;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

@media screen and (max-width: 992px) {
.grid-sizer, .grid-item { width: 46%;
} 	
}
@media screen and (max-width: 767px) {
.grid-sizer, .grid-item { width: 100%;
} 	
}
/* FIN MASONRY */










@media screen and (max-width: 767px) {
/* DEBUT TABLEAU RESPONSIVE */


    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #eee; margin-top: 1em;}
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		/* border-bottom: 1px solid #eee; */
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }

/* FIN TABLEAU RESPONSIVE */

}

/*INTEGRATION*/



/*ADRESSE*/
#adresse { background: url("../charte/bandeau-coordonees.jpg") no-repeat; background-color:#ccc; margin: 0; padding: 20px 0px; color:#000; background-size:100%}
#adresse h2 { color:#000}
#adresse a {color:#000; text-decoration: none}
/*ADRESSE*/

/*MAP*/
#map {margin: 0; padding:0px}
/*MAP*/





/*FOOTER*/
#toTop{
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	display: none;
	border-radius:15%;
}
.btn-top {
    color:  #fff;
    background-color: #000;
}
.btn-top:hover {
    color: #fff;
    background-color: #000 ;
}


footer {
    background: #fff;
    padding: 20px;
   min-height: 100px;
	width: 100%;
	float: right;
}
footer p {color: #000}
footer p a {color:#000; font-weight: bold}
footer p a:hover {color:#000; text-decoration: none}

.list-inline-item:not(:last-child) {

    margin-right: .1rem;

}

.list-inline-item a {color: #006271; font-size: 12px}

div#logo-distributeur > a {text-decoration:none;display:block;width:50px;height:70px;background:none no-repeat top left transparent; margin: 0 auto} 
div#logo-distributeur > a.distal {background-image:url('../charte/logo-al.png')}
div#logo-distributeur > a.distar {background-image:url('../charte/logo-ar.png')}
div#logo-distributeur > a.distco {background-image:url('../charte/logo-co.png')}
div#logo-distributeur > a.disteo {background-image:url('../charte/logo-eo.png')}
div#logo-distributeur > a.distsi {background-image:url('../charte/logo-si.png')}
div#logo-distributeur > a.distpr {background-image:url('../charte/logo-pr.png'); width:100px;height:60px;}

#liens-referencement {font-size:11px;text-align:center}
#liens-referencement a {color: var(--primaire)}
/*FOOTER*/



/*ACTUALITES*/
#actu-bloc1 { background: rgba( var(--primaire-opacite),0.1); padding:20px; border:5px solid  var(--tertiaire)}
.liens-actu {text-align: right;}
.liens-actu a {color: var(--primaire)}
.liens-actu a:hover {color: var(--primaire); text-decoration: none}
#actu-bloc2 { background: rgba( var(--primaire-opacite),0.1); padding:20px; border:5px solid  var(--tertiaire)}
#actu-bloc3 { background: rgba( var(--primaire-opacite),0.1); padding:20px; border:5px solid  var(--tertiaire)}

/*ACTUALITES*/


/*POP UP*/
#admodal a { color:  var(--tertiaire)}
/*POP UP*/


/*CATALOGUE*/
.liens-catalogue a {color: var(--tertiaire)}
.liens-catalogue a:hover {color: var(--primaire); text-decoration: none}

.breadcrumb .active {color: var(--secondaire)}

.card-product h4 {color: var(--primaire); font-family: var(--font2);}
.card-product .img-wrap {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    position: relative;
    height: 220px;
    text-align: center;
}
.card-product .img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.card-product .info-wrap {
    overflow: hidden;
    padding: 15px;
    border-top: 1px solid  var(--secondaire);
}
.card-product .bottom-wrap {
    padding: 15px;
    border-top: 1px solid var(--secondaire);
}

.label-rating { margin-right:10px;
    color: var(--secondaire);
    display: inline-block;
    vertical-align: middle;
}

.card-product .price-old {
    color: var(--secondaire);
}

.search {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.search * {
  outline: none;
  box-sizing: border-box;
}
.search__wrapper {
  position: relative;
}
.search__field {
  width: 50px;
  height: 50px;
  color: transparent;
  font-family: Lato, sans-serif;
  font-size: 1.35em;
  padding: 0.35em 50px 0.35em 0;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.search__field:focus {
  border-bottom-color: var(--secondaire);
  width: 50vw;
  color: var(--secondaire);
  cursor: default;
}
.search__field:focus ~ .search__icon {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.search__icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color:var(--tertiaire);
  width: 50px;
  height: 50px;
  font-size: 1.35em;
  text-align: center;
  border-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  display: inline-block;
  transition: background-color 0.2s ease-in-out;
}
.search__field::-webkit-input-placeholder {
  position: relative;
  top: 0;
  left: 0;
  transition-property: top, color;
  transition-duration: .1s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.search__field:-moz-placeholder {
  position: relative;
  top: 0;
  left: 0;
  transition-property: top, color;
  transition-duration: .1s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.search__field::-moz-placeholder {
  position: relative;
  top: 0;
  left: 0;
  transition-property: top, color;
  transition-duration: .1s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.search__field:-ms-input-placeholder {
  position: relative;
  top: 0;
  left: 0;
  transition-property: top, color;
  transition-duration: .1s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.search__field::-webkit-input-placeholder[style*=hidden] {
  color: var(--secondaire);
  font-size: .65em;
  font-weight: normal;
  top: -20px;
  opacity: 1;
  visibility: visible !important;
}
.search__field:-moz-placeholder[style*=hidden] {
  color: var(--secondaire);
  font-size: .65em;
  font-weight: normal;
  top: -20px;
  opacity: 1;
  visibility: visible !important;
}
.search__field::-moz-placeholder[style*=hidden] {
  color: var(--secondaire);
  font-size: .65em;
  font-weight: normal;
  top: -20px;
  opacity: 1;
  visibility: visible !important;
}
.search__field:-ms-input-placeholder[style*=hidden] {
  color: var(--secondaire);
  font-size: .65em;
  font-weight: normal;
  top: -20px;
  opacity: 1;
  visibility: visible !important;
}


ol li a {margin:0px 5px}
ol li.active {margin:0px 5px}

img {
  max-width: 100%; }

.preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (max-width: 996px) {
    .preview {
      margin-bottom: 20px; } }

.preview-pic {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.preview-thumbnail.nav-tabs {
  border: none;
  margin-top: 15px; }
  .preview-thumbnail.nav-tabs li {
    width: 18%;
    margin-right: 2.5%; }
    .preview-thumbnail.nav-tabs li img {
      max-width: 100%;
      display: block; }
    .preview-thumbnail.nav-tabs li a {
      padding: 0;
      margin: 0; }
    .preview-thumbnail.nav-tabs li:last-of-type {
      margin-right: 0; }

.tab-content {
  overflow: hidden; }
  .tab-content img {
    width: 100%;
    -webkit-animation-name: opacity;
            animation-name: opacity;
    -webkit-animation-duration: .3s;
            animation-duration: .3s; }

.card {
  margin-top:0px;
  background: var(--tertiaire);
  padding: 1em;
  line-height:1.5em; }

@media screen and (min-width: 997px) {
  .wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }

.details {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.colors {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.product-title, .price, .sizes, .colors {
  text-transform: UPPERCASE;
  font-weight: bold; }

.checked, .price span {
  color: var(--primaire); }

.product-title, .rating, .product-description, .price, .vote, .sizes {
  margin-bottom: 15px; }

.product-title {
  margin-top: 0; }

.size {
  margin-right: 10px; }
  .size:first-of-type {
    margin-left: 40px; }

.color {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 2em;
  width: 2em;
  border-radius: 2px; }
  .color:first-of-type {
    margin-left: 20px; }

.add-to-cart, .like {
  background: var(--primaire);
  padding: 1.2em 1.5em;
  border: none;
  text-transform: UPPERCASE;
  font-weight: bold;
  color: var(--tertiaire);
  -webkit-transition: background .3s ease;
          transition: background .3s ease; }
  .add-to-cart:hover, .like:hover {
    background:var(--secondaire);
    color: var(--tertiaire); }

.not-available {
  text-align: center;
  line-height: 2em; }
  .not-available:before {
    font-family: fontawesome;
    content: "\f00d";
    color:var(--tertiaire); }



.tooltip-inner {
  padding: 1.3em; }

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
            transform: scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes opacity {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
            transform: scale(3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }
/*CATALOGUE*/


/*CARTE*/
h2.titrecarte {font-family: var(--font2); color: var(--secondaire); text-align: center; padding-bottom: 10px}
h3.sectionplat {font-family: var(--font2); color: var(--secondaire); font-size: 26px; text-align: center; background-color: bisque; padding: 10px 0px}
p.nomplat {font-family:  var(--font2); text-align: center}
p.prixplat {font-family:  var(--font2); color: coral; font-size: 20px; text-align: center}
hr.dashed { background-color:  var(--tertiaire); color:  var(--tertiaire); width:100%; border:none; border-bottom: dashed  var(--secondaire) 2px;} 
/*CARTE*/


/*FLEURISTE*/
#section-fleuriste h1 {text-align: center; font-family:  var(--font2)}
#section-fleuriste h2 {text-align: center; font-family:  var(--font2); color: var(--secondaire); font-size:30px; border-bottom : 1px solid  var(--secondaire); padding-bottom: 5px}
#section-fleuriste.btn { background-color: var(--tertiaire); color: var(--primaire); text-align: center; margin-bottom: 10px}
.description { text-align: justify}
/*FLEURISTE*/




/*Photos*/
#section-photo h1 {text-align: center; font-family:  var(--font2);}
.profile-card-1 {
  font-family:  var(--font1);
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  color: var(--tertiaire);
  text-align: center;
  height:368px;
  border:none;
	background-color: rgba( var(--primaire-opacite),0.5)
}
.profile-card-1 .background {
  width:100%;
  vertical-align: top;
  opacity: 0.6;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  transform: scale(1.4);	
}


.profile-card-1:hover .background {
  width:100%;
  vertical-align: top;
  opacity: 0.4;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}



.profile-card-1 .card-content {
  width: 100%;
  padding: 15px 25px;
  position: absolute;
  left: 0;
  top: 5%;
}
.profile-card-1 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  max-width: 100px;
  opacity: 1;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 1);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.profile-card-1 h2 {
  margin: 0 0 5px;
  font-weight: 600;
  font-size:25px;
}
.profile-card-1 h2 small {
  display: block;
  font-size: 15px;
  margin-top:10px;
}
.profile-card-1 i {
  display: inline-block;
    font-size: 16px;
    color:  var(--tertiaire);
    text-align: center;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height:1.5em;
    border-radius: 50%;
    margin:0px 5px;
}
.profile-card-1 .icon-block{
    float:left;
    width:100%;
    margin-top:15px;
}
.profile-card-1 .icon-block a{
    text-decoration:none;
}
.profile-card-1 i:hover {
  background-color: var(--tertiaire);
  color: var(--secondaire);
  text-decoration:none;
}
/*Photos*/


/*toolbar*/
#toolbar {background-color:#fff; min-height:30px; padding: 10px 0px; border-bottom:1px solid #3d3d3d}

/*langue*/
.langue  {background-color: #fff}
.langue a {color: #000}
/*fin langue*/


/*search*/
.hero-area .advance-search {
    background: #fff;
    padding: 40px 30px;
    border-radius: 3px;
    margin-bottom: -50px;
    box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.12);
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
/*search*/



/*Panier*/
ul.dropdown-cart{
    min-width:250px;
}
ul.dropdown-cart li .item{
    display:block;
    padding:3px 10px;
    margin: 3px 0;
}
ul.dropdown-cart li .item:hover{
    background-color:#f3f3f3;
}
ul.dropdown-cart li .item:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

ul.dropdown-cart li .item-left{
    float:left;
}
ul.dropdown-cart li .item-left img,
ul.dropdown-cart li .item-left span.item-info{
    float:left;
}
ul.dropdown-cart li .item-left span.item-info{
    margin-left:10px;   
}
ul.dropdown-cart li .item-left span.item-info span{
    display:block;
}
ul.dropdown-cart li .item-right{
    float:right;
}
ul.dropdown-cart li .item-right button{
    margin-top:14px;
}
/*fin panier*/
/*fin toolbar*/

.qualite{color: black !important}
.qualite:hover{color: #22B3BE !important}
.horaire{
  background-color: #7BE0E7;
  padding: 15px;
  width: 50%
}
.horaire2{
  background-color: #7BE0E7;
  padding: 15px;
  width: 30%
}

.contact{
  border: 1px solid #B8B8B8;
  border-radius: 10px;
  padding: 15px;
  width: 50%
}

.encart-cheque{
  background-color: #7BE0E7;
  color: black;
  padding:25px;
  width: 60%
}

.encart-cheque:hover{
  background-color: #23BAC4;
  text-decoration: none
}

a .encart-cheque{text-decoration:none !important}



.ha-bg-parallax {
	background: url(https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/23621599_1243573765772587_1463122925949401168_n.jpg?oh=b6641b3c2f50526b0fa2d2046943c7aa&oe=5B12D8F4) 50% 0% fixed;
	-moz-background-size: 100%;
	-o-background-size: 100%;
	-webkit-background-size: 100%;
	background-size: 100%;
	min-height:1100px;
	margin: 0 auto;
	width: 100%;
	display: table;
	vertical-align: middle;
	position: relative;
}

@media (max-width:1600px) {
.ha-bg-parallax {
	background: url(https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/23621599_1243573765772587_1463122925949401168_n.jpg?oh=b6641b3c2f50526b0fa2d2046943c7aa&oe=5B12D8F4) top center 50% -0px no-repeat fixed;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: 100%;
	min-height:1000px;
	margin: 0 auto;
	width: 100%;
	display: table;
	vertical-align: middle;
	position: relative;background-position: top center;
}

}


@media (max-width: 1400px) {
.ha-bg-parallax {
	background: url(https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/23621599_1243573765772587_1463122925949401168_n.jpg?oh=b6641b3c2f50526b0fa2d2046943c7aa&oe=5B12D8F4) 50% -0 no-repeat ;
	min-height:800px;
	background-size: 100%;
}

}







.ha-parallax-body {
	vertical-align: middle;
	color: #000;
	min-height: 650px;
}
.vertical .carousel-inner {
	height: 100%;
}
.carousel.vertical .item {
	-webkit-transition: 0.6s ease-in-out top;
	-moz-transition: 0.6s ease-in-out top;
	-ms-transition: 0.6s ease-in-out top;
	-o-transition: 0.6s ease-in-out top;
	transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
	top: 0;
}
.carousel.vertical .next {
	top: 100%;
}
.carousel.vertical .prev {
	top: -100%;
}
.carousel.vertical .next.left, .carousel.vertical .prev.right {
	top: 0;
}
.carousel.vertical .active.left {
	top: -100%;
}
.carousel.vertical .active.right {
	top: 100%;
}
.carousel.vertical .item {
	left: 0;
}
.carousel-indicators {
	position: absolute;
	bottom: 10px;
	left: unset;
	right: 2%;
	z-index: 15;
	width: 1%;
	padding-left: 0;
	margin-left: -30%;
	list-style: none;
	top: 30%;
}

.carousel-indicators li {
	float: none
}

/*#carousel-example-generic {
	top: 800px; background:rgba(255,255,255,0.9); padding: 40px; margin: 0px 300px
}*/
#carousel-example-generic {
	top:650px; background:rgba(255,255,255,0.9); padding: 30px; margin: 0px 300px
}



@media (max-width: 1800px) {
#carousel-example-generic {
	top: 800px; background:rgba(255,255,255,0.9); padding: 10px; margin: 0px 50px
}
}




#carousel-example-generic h3 {
	font-family: 'Nanum Gothic', sans-serif; font-size:36px;
	color: #000;
	margin: 0;
	text-shadow: 0 0 10px #666;
}
#carousel-example-generic h1 {
	font-family: 'Nanum Gothic', sans-serif;
	color: #000;
	margin: 0;
	text-shadow: 0 0 10px #666;
}


@media (max-width: 1600px) {
#carousel-example-generic {
	top:650px; background:rgba(255,255,255,0.9); padding:20px; margin: 0px 10%;
}
#carousel-example-generic h3 {
	font-family: 'Nanum Gothic', sans-serif; font-size:26px;
	color: #000;
	margin: 0;
	text-shadow: 0 0 10px #666;
}
#carousel-example-generic h1 {
	font-family: 'Nanum Gothic', sans-serif;
	color: #000;
	margin: 0;
	text-shadow: 0 0 10px #666;
}
}

@media (max-width: 1400px) {
#carousel-example-generic {
	top:400px; background:rgba(255,255,255,0.9); padding:5px; margin: 0px 2%;
}
#carousel-example-generic h3 {
	font-family: 'Nanum Gothic', sans-serif; font-size:26px;
	color: #000;
	margin: 0;
}
#carousel-example-generic h1 {
	font-family: 'Nanum Gothic', sans-serif;
	color: #000;
	margin: 0;
}
}


@media (max-width:900px) {
#carousel-example-generic {
	top:300px; background:rgba(255,255,255,0.9); padding:5px; margin: 0px 2%;
}
#carousel-example-generic h3 {
	font-family: 'Nanum Gothic', sans-serif; font-size:26px;
	color: #000;
	margin: 0;
}
#carousel-example-generic h1 {
	font-family: 'Nanum Gothic', sans-serif;
	color: #000;
	margin: 0;
}
}


@media (max-width:700px) {
#carousel-example-generic {
	top:180px; background:rgba(255,255,255,0.9); padding:0px; margin: 0px 0%;
}
#carousel-example-generic h3 {
	font-family: 'Nanum Gothic', sans-serif; font-size:26px;
	color: #000;
	margin: 0;
}
#carousel-example-generic h1 {
	font-family: 'Nanum Gothic', sans-serif;
	color: #000;
	margin: 0;
}
}


.fab {color: #000}

.zoom {
  transition: transform .2s; /* Animation */
	cursor:pointer
}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.gal {

	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	  
	
	}	
.gal img{ width: 100%; padding: 7px 0;}
@media (max-width: 500px) {
		
.gal {
-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
}
a {color: #006271;}






.encart-contact {padding:50px; background: url("../media/images/encart-contact.jpg") no-repeat center; background-size: 100%; height:267px}

@media (max-width:500px) {
.encart-contact {padding:50px; background: none; background-size: 100%; height:auto; border:5px solid #F3E500 }
}


.encart-btn {background:#70C3D5; color:#fff; padding:30px; border-radius:20px }
.encart-btn a {color:#fff}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236EC4D6' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236EC4D6' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}



.masonry-like {
        -webkit-column-count: 4;
        -moz-column-count:4;
        -ms-column-count: 4;
        column-count: 4;
        -webkit-column-gap: 1em;
        -moz-column-gap: 1em;
        -ms-column-gap: 1em;
        column-gap: 1em;
        font-size: .85em;
        padding: 0;
      }
      .masonry-like.card {
        -webkit-transition:1s ease all;
        -moz-transition:1s ease all;
        -o-transition:1s ease all;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-shadow: 2px 2px 4px 0 #ccc;
      }
      
      .masonry-like.card img {
        max-width:100%;
        height: auto;
      }
      
      @media (min-width: 1440px) {
        .masonry-like {
          -moz-column-count: 4;
          -webkit-column-count: 4;
          -ms-column-count: 4;
          column-count: 4;
        }
      }
      @media (min-width: 1281px) and (max-width: 1439px) {
        .masonry-like {
          -moz-column-count: 4;
          -webkit-column-count: 4;
          -ms-column-count: 4;
          column-count: 4;
        }
      }
      @media (min-width: 1025px) and (max-width: 1280px) {
        .masonry-like {
          -moz-column-count: 4;
          -webkit-column-count: 4;
          -ms-column-count: 4;
          column-count: 4;
        }
      }
      @media (min-width: 768px) and (max-width: 1024px) {
        .masonry-like {
          -moz-column-count: 3;
          -webkit-column-count: 3;
          -ms-column-count: 3;
          column-count: 3;
        }
      }
      @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        .masonry-like {
          -moz-column-count: 3;
          -webkit-column-count: 3;
          -ms-column-count: 3;
          column-count: 3;
        }  
      }
      @media (min-width: 481px) and (max-width: 767px) {
        .masonry-like {
          -moz-column-count: 2;
          -webkit-column-count: 2;
          -ms-column-count: 2;
          column-count: 2;
        }
      }
      @media (min-width: 320px) and (max-width: 480px) {
        .masonry-like {
          -moz-column-count: 1;
          -webkit-column-count: 1;
          -ms-column-count: 1;
          column-count: 1;
        } 
      }