/* page.css
   pour le site www.fumoiry.ch
   pk, 2017.05.11
*/
@font-face {
   font-family: "Marguerite-altglyphs";
    src: url('Marguerite-altglyphs.eot');
    src: url('Marguerite-altglyphs.eot?#iefix') format('embedded-opentype'),
         url('Marguerite-altglyphs.woff2') format('woff2'),
         url('Marguerite-altglyphs.woff') format('woff'),
         url('Marguerite-altglyphs.ttf') format('truetype'),
         url('Marguerite-altglyphs.svg#marguerite-pk2regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
        font-family: 'Marguerite';
        src: url('Marguerite.eot');
        src: url('Marguerite.eot?#iefix') format('embedded-opentype'),
                url('Marguerite.woff') format('woff'),
                url('Marguerite.ttf') format('truetype'),
                url('Marguerite.svg#Marguerite') format('svg');
        font-weight: normal;
        font-style: normal;
}

/* palette de couleur */
/*:root {
  --color-bckg-a: #FFFDF6;
  --color-bckg-b: #36763D;
  --color-bckg-soustitre: #FFEBAA;
  --color-soustitre: #7F2635;
  --fontscript: "Marguerite";
}*/
body {
  height:100%;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
/*   background-image:url(../images/Tex009.gif); */
/*   background-image:url(../images/texturebois.jpg); */
  background-image:url(../images/ardoise_pk.jpg);
/*   background-image:url(../images/smoke1.jpg); */
/*   background-image:url(../images/Wood_11_UV_H_CM_2.jpg); */
/*   background-image:url(../images/woodboard1.jpg); */
/*   background-image:url(../images/woodtexture22.jpg); */
/*  background-image:url(../images/retro-grunge-wallpaper-patterns-part3-1.jpg);*/
/*   background-image:url(../images/grungy-wallpaper-patterns-1.jpg); */
/*   background-image:url(../images/grungy-wallpaper-patterns-5.jpg); */
/*   background-image:url(../images/seamless-paper-patterns-14pk.jpg); */
/*   background-image:url(../images/grungy-watercolor-textures-5.jpg); */
/*   background-image:url(../images/tileable-stone-pavement-and-marble-textures-1.jpg); */
/*   background-image:url(../images/tileable-stone-pavement-and-marble-textures-2.jpg); */
  background-attachment:fixed;
}
#global {		/* parent: body */
  position:relative;
  margin-left: auto;
  margin-right: auto;
  min-left: 4%;
  width: 92%;		/* même width que #footer */
  max-width: 1024px;	/* même max-width que #footer */
  min-height:100%;	/* 100vh; */
  background-image:url(../images/seamless-paper-patterns-15pk5.jpg);
  background-repeat:repeat;
}
#accueil {		/* parent: #global */
  /* si on veut un header mobile */
   position:relative;
  /* si on veut un header fixé */
/*  position: fixed;
  top: 0px;*/
/*  width:80%;*/		/* même width que #global */
/*  max-width: 1024px;*/	/* même max-width que #global */
  /* si on veut un header fixé, fin */
/*   background-color:#25FF79; */
  background:transparent;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
#titre {		/* parent: #accueil */
  background-image:url(../images/seamless-paper-patterns-15pk5.jpg);
  height:180px;
  text-align:center;
  overflow: hidden;
}
#logotitre {
  width: 360px;
}
#menu {			/* parent: #accueil */
/* si on veut un menu sticky; le sortir de #accueil */
/* parent: #global */
/*  position:sticky;
  top:0px;*/
/*   background-color:#25FF79; */
/*  position: relative; */
/*  z-index: 101; */
  background-image:url(../images/ardoise.jpg);
  height:32px;
  text-align:center;
  text-shadow: 1px 1px 1px rgba(215,170,90,.7), 1px -1px 1px rgba(90,90,90,.9);
}
#main-area {		/* parent: #global */
/*  background:transparent;*/
  height: 800px;
}
#nos_produits {		/* parent: #main-area */
  width: 100%;
/*   background-color: var(--color-bckg-a); */
  background-image:url(../images/seamless-paper-patterns-14pk.jpg);
}
#part-A {		/* parent: #main-area */
  width: 100%;
/*  background-color: var(--color-bckg-a);*/
  vertical-align: middle;
  background-image:url(../images/seamless-paper-patterns-14pk.jpg);
}
#part-A > div {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
#part-A1 {		/* parent: #part-A */
  width: 30%;
}
#part-A11 {		/* parent: #part-A */
  width: 0%;
}
#part-A2 {		/* parent: #part-A */
  width: 40%;
  padding-bottom: 22px;
}
#part-A3 {		/* parent: #part-A */
  width: 30%;
}

#part-A1 > div, #part-A3 > div {
  padding: 32px;
  padding-top: 0px;
}
#part-A1 p, #part-A11 p, #part-A3 p {
  cursor: pointer;
}
.produit {
/*   font-family: var(--fontscript); */
  font-family: "Marguerite";
/*   font-weight: lighter; */
  font-size: 1em;
  line-height:1.3;
/*   margin-bottom: 20px; */
}
#part-A2 a {
  font-size: 0.9em;
  color: #36763D;
/*  color: var(--color-bckg-b);*/
}
#part-A2 a:hover {
  text-decoration: underline;
}
#part-B {		/* parent: #main-area */
  height: 200px;
  width: 100%;
  overflow: hidden !important;
}
#part-C0 {		/* parent: #main-area */
  width: 100%;
/*   background-color: var(--color-bckg-b); */
  background-image:url(../images/seamless-paper-patterns-15pk5.jpg);
}
#part-C {		/* parent: #main-area */
  width: 100%;
/*   background-color: var(--color-bckg-b); */
  background-image:url(../images/seamless-paper-patterns-15pk5.jpg);
  vertical-align: middle;
  overflow: hidden;
}
#part-C > div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
#part-C1 {		/* parent: #part-C */
/*  position: relative;*/
/*  position: absolute; */
/*  height: 300px;*/
  width: 30%;
  font-weight: bold;
 font-style:italic;
}
#part-C2 {		/* parent: #part-C */
/*  position: relative;*/
/*  position: absolute; */
/*  height: 300px; */
/*  margin-left: 3%;*/
/*  margin-right: 5%;*/
  width: 40%;
  left: 30%;
/*   text-align: center; */
}
#part-C3 {		/* parent: #part-C */
/*  position: relative;*/
/*  position: absolute; */
/*   height: 300px; */
  width: 30%;
  left: 70%;
  font-weight: bold;
 font-style:italic;
}
#part-D {		/* parent: #main-area */
/*   height: 120px; */
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2%;
  padding-bottom: 6%;
  color: #fff;
  font-weight: bold;
  font-style: italic;
/*   background-color:#FFF456; */
/*   background-image:url(../images/seamless-paper-patterns-14pk.jpg); */
/* pour un effet paralax */
  background-image:url(../photos/IMG_4573.jpg); /* 4648 / 4673 */
  background-position: center center;
  background-repeat: no-repeat;
/*   background-attachment: scroll; */
  background-attachment: fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
  overflow: hidden !important;

}
#contact {		/* parent: #main-area */
  width: 100%;
  background-image:url(../images/seamless-paper-patterns-14pk.jpg);
}
#part-E {		/* parent: #main-area */
  width: 100%;
  background-image:url(../images/seamless-paper-patterns-14pk.jpg);
/*  height: 200px;*/
}
#part-E > div {
  display: inline-block;
  font-weight: bold;
 font-style:italic;
}
#part-E1 {		/* parent: #part-C */
/*  width: 50%;*/
  width: 100%;
/*  height: 200px;*/
  text-align: center;
}
#part-E2 {		/* parent: #part-C */
  width: 50%;
  height: 200px;
  text-align: center;
}
#liens {
  font-size: 0.8em;
}
#liens a {
 color: #7F2635;
}
#liens a:focus, #liens a:hover, #liens a:active {
  border-bottom: 1px dotted;
}
#part-F {		/* parent: #global */
  position:fixed;
  bottom:0px;
  width:92%;		/* même width que #global */
  max-width: 1024px;	/* même max-width que #global */
/*  height:24px;*/
  background-image:url(../images/ardoise.jpg);
/*  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;*/
  color:#fff;
  vertical-align: middle;
  line-height: 24px;
  font-size: 0.8em;
  text-align: center;
/*   text-shadow: 2px 2px 1px rgba(0,0,0,.8); */
  z-index:103;
}
#part-F > div {
/*  position:relative;*/
/*  display: inline-block;
  text-align: center;
  text-shadow: 2px 2px 1px rgba(0,0,0,.8);*/
}
#part-F1 {		/* parent: #part-F */
  width: 50%;
}
#part-F2 {		/* parent: #part-F */
  width: 50%;
}
#menu ul {
 list-style:none;
/*  height: 51px; */
 padding-left: 5%;
 padding-right: 5%;
 margin: 0px;
/*  padding-top: 9px; */
}
#menu li {
 float: left;
 width: 21%;
 height: 32px;
 text-align: center;
 color: #fff;
/* border-color: red;
 background-color: #83F5FF;*/
 font-size: 1em;
 line-height: 32px;
 margin-left: 1%;
 margin-right: 1%;
}
#menu li:first-child {
 width: 29%;
}
a {
 text-decoration: none;
 color: #fff;
}
#menu a {
 display: block;
 color: #fff;
}
#menu a:hover {
 color: #FFA12E;
}
#menu-min {
  position: fixed;
  top: 16px;
  right: 6%;
  width: 100px;
  height: 120px;
  visibility: hidden;
  z-index: 101;
}
#menu-min img {
  cursor: pointer;
  margin-left: 68px;
}
#menu-min-contenu {
  position: relative;
  display: none;
  background: rgba(0, 0, 0, 0.4);
  left: 200px;
  opacity: 0;
  -moz-transition: all 5s;
  -webkit-transition: all 5s;
  -o-transition: all 5s;
  transition: all 5s;

}
#menu-min-contenu ul {
  padding: 0;
  margin: 0;
/*  margin-left: 50px;*/
  float: left;
}
#menu-min-contenu ul li {
  height: 24px;
/*  border-bottom: #fff;*/
  list-style: none;
  padding: 0px;
  margin: 4px;
}
/*#menu-min-contenu li:last-child {
  border-bottom: 0;
}*/
#menu-min-contenu ul li a {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px;
    padding-left: 18px;
    display: block;
    background: rgba(0, 0, 0, 0.4);
    width: 89px;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
    line-height: 24px;
}
#menu-min-contenu ul li:first-child a {
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
}
#menu-min-contenu ul li:last-child a {
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-bottomleft: 12px;
border-bottom-left-radius: 12px;
}
#menu-min-contenu ul li a:hover {
    background: #54B6A8;
    padding-left: 34px;
/*    width: 70px;*/
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}

#side-nav-div {
position: fixed;
display: block;
top: 40%;
right: 0px;
width: 20px;
text-align: center;
padding: 8px;
padding-top: 16px;
padding-bottom: 16px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
background: rgba(0, 0, 0, 0.4);
opacity: 0.6;
/*-webkit-animation: fadeInRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: fadeInRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: fadeInRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: fadeInRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);*/
z-index: 101;
}
#side-nav-div:hover {
opacity: 1;
}
#side-nav-div a {
 color: #fff;
 font-size: 24px;
 opacity: 0.7;
}
#side-nav-div a:first-child {
 opacity: 1;
}
.icone {
  vertical-align:middle;
}
#lightgallery {
  margin: 6px;
  width: 400px;
}
#lightgallery a {
/*position: absolute;
display: inline-block;
overflow: hidden;*/
}
#lightgallery img {
/*position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: 0;*/
/*  width: 120px;
  margin: 12px;*/
}
/* lightslider avec lightgallery */
#container-imageGallery {
  margin: 0px;
  margin-left: 40px;
  margin-right: 40px;
}
#imageGallery {
/*  margin: 6px;*/
/*  margin-left: 0px;*/
  cursor: pointer;
}
#imageGallery img {
  height: auto;
  width: 100%;
/*  margin-right:auto;
  margin-left:auto;*/
  overflow:hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
/* lightslider produits fumés */
#container-lightSlider {
  margin: 6px;
  margin-left: 40px;
  margin-right: 40px;
}
#lightSlider {
  position: relative;
/*  margin: 6px;*/
/*  margin-left: 0px;*/
  width: 300px;
  margin-right:auto;
  margin-left:auto;
  cursor: pointer;
  text-align: center;
}
#lightSlider li {
  width: 400px;
}

#lightSlider li p {
  position: relative;
/*   font-family: var(--fontscript); */
  font-family: "Marguerite";
  font-weight: lighter;
  cursor: pointer;
  line-height:1.5;
  top: -12px;
}

#lightSlider img {
  height: auto;
  width: 100%;
/*  margin-right:auto;
  margin-left:auto;*/
  overflow:hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

/* image de lancement du diaporama (si dynamic) */
.img-start-diaporama {
  position: absolute;
  width: 20%;
  left: 40%;
  margin: 20px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  cursor: pointer;
}


/* couleur de la bordure des vignettes */
.lg-outer .lg-thumb-item {
 border: 2px solid #353535 !important;
}
.lg-outer .lg-thumb-item.active {
    border-color: #FF8521 !important;
}
.lg-outer .lg-thumb-item:hover {
    border-color: #FFBE4F !important;
}
.lg-outer .lg-img-wrap img {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
.soustitre {
/*   background-color: var(--color-bckg-soustitre); */
/*  background-color: #FFEBAA;*/
/*   color: var(--color-soustitre); */
  color: #7F2635;
  text-align: center;
  padding-top: 36px;
  padding-bottom: 18px;
  font-size: 1.5em;
/*   font-family: var(--fontscript); */
  font-family: "Marguerite";
/*  font-weight: bold;*/
}
. {
  position: relative;
  font-size: 3em;
  vertical-align: middle;
  height: 20px;
/*   font-weight: bold; */
/*   font-family: var(--fontscript); */
  font-family: "Marguerite";
}
.titrehistoire {
  color: #fff;
  text-align: center;
  padding: 2px;
  font-size: 1.5em;
  font-weight: normal;
/*   font-family: var(--fontscript); */
  font-family: "Marguerite";
/*  font-weight: bold;*/
}
#part-P {		/* parent:  */
  position: relative;
  padding-top: 20px;
  vertical-align: top;
}
#part-P > div {
  position: relative;
  display: inline-block;
  width: 48%;
  height: 100%;
  margin: 4px;
  text-align: left;
  vertical-align: top;
}
#part-P1 {		/* parent: #part-P */
}
#part-P2 {		/* parent: #part-P */
}
/* produits du fumoir */
#presentationproduit {
        position: fixed;
        display: none;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #000000;
        background-color: rgba(0,0,0,0.9);
        z-index:100;
}
#cadreproduit {
  position: relative;
  width: 80%;
  height: 60%;
  max-width: 720px;
  height: 334px;
  padding-top: 6px;
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  margin-left: 50vw;
/*   transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  background-image:url(../images/seamless-paper-patterns-14pk.jpg);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

#part-P2 img{
  position: relative;
  width: 98%;
  height: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
#fermerp {
  position: absolute;
  right: -2px;
  top: -28px;
  font-weight: bold;
/*   color: var(--color-soustitre); */
  color: #7F2635;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
#nextp {
  position: absolute;
  left: 48%;
  bottom: -32px;
  font-weight: bold;
/*   color: var(--color-soustitre); */
  color: #7F2635;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
#number {
  display: none;
}
#fermerp:hover, #nextp:hover {
  opacity: 1;
}
#fermerp img, #nextp img {
  width: 100%;
}
#titreproduit {
  position: relative;
  width: 100%;
  top: 5%;
/*   font-family: var(--fontscript); */
  font-family: "Marguerite";
  line-height: 1.5em;
  font-size: 1.3em;
/*   font-weight: lighter; */
}
#detailsproduit {
  position: relative;
  width: 100%;
  left: 2%;
/*   top: 22%; */
/*   height: 70%; */
/*   margin-top: 20px; */
  font-size: 0.9em;
  overflow: hidden;
}
.sstitreproduit {
  position: relative;
  font-size: 0.8em;
  line-height:1.5;
  
}
.environ {
  line-height: 1em;
  font-size: 1.8em;
  font-family: "Marguerite";
  padding-top: 10px;
}

/* carte google map */
#appelcarte {
  font: normal 0.9em 'Trebuchet MS', Tahoma, Sans-serif;
  color: #36763D;
/*  color: var(--color-bckg-b);*/
  cursor: pointer;
}
#appelcarte:hover {
  text-decoration: underline;
}
#carte {
        position: fixed;
        display: none;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #000000;
        background-color: rgba(0,0,0,0.95);
        z-index:102;
}

#map_canvas {
        position: relative;
        top: 60px;
        width: 80%;
        height: 80%;
        max-width: 800px;
        max-height: 480px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #000000;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#carte a {
        color: #ffffff;
        text-decoration:none;
}
#fermerc {
  position: relative;
  right: 20%;
  text-align: right;
  top: 22px;
  color: #fff;
  font-size: 0.8em;
  line-height: 24px;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
#fermerc:hover {
  opacity: 1;
}
#fermerc img {
  width: auto;
  vertical-align: middle;
}
#coord {
  position: relative;
  text-align: center;
  top: 80px;
  color: #fff;
  font-size: 0.8em;
}

.traiteur {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 100px;
}
.only-max {
/*  display: inline-block;*/
}
.only-min {
  display: none;
}
.altglyph {
  font-family: "Marguerite-altglyphs";
}
#changecolor {
  cursor: pointer;
}
.red {
  color:#aa1c34;
}

@media only screen and (min-width: 801px) {
#part-B {
  /*  background: transparent;*/
  /* pour un effet paralax */
    background-image:url(../photos/img_4648_fond.jpg); /* 4648 / 4673 */
    background-position: center center;
    background-repeat: no-repeat;
/*     background-attachment: scroll; */
    background-attachment: fixed !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;
  }
}

@media only screen and (orientation : portrait) {
  #menu {
    display: none;
  }
  #menu-min {
    visibility: visible;
    right: 6%;
  }
  #side-nav-div {
    display: none;
  }
  #part-A > div {
    display: block;
    width: 100%;
  }
  #part-A1, #part-A1 > div {
    padding: 32px;
/*    padding-top: 0px;*/
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  #part-A11, #part11 > div {
    padding: 32px;
    padding-top: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  #part-C > div {
    position: relative;
    left: 0;
    display: block;
    width: 100%;
  }
  #part-E > div {
    display: block;
    width: 100%;
  }
  #part-F {
/*    height:48px;*/
  }
/*  #part-F > div {
    display: block;
    width: 100%;
  }*/
  #part-P > div {
    display: block;
    width: 100%;
  }
#cadreproduit {
  height: auto;
  padding: 2px;
  padding-top: 12px;
  padding-bottom: 4px;
}
#part-P2 img {
  width: 88%;
  margin-left:5%;
}
  .traiteur {
    padding-bottom: 20px;
  }
  .only-max {
    display: none;
  }
  .only-min {
    display: block;
  }
}

@media only screen and (max-width: 800px) {
/* @media only screen and (orientation : portrait) { */
  #menu {
    display: none;
  }
  #menu-min {
    visibility: visible;
    right: 6%;
  }
  #side-nav-div {
    display: none;
  }
  #part-A > div {
    display: block;
    width: auto;
  }
  #part-A1, #part-A1 > div {
    padding: 32px;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  #part-A11, #part-A11 > div {
    padding: 32px;
    padding-top: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
#part-B {
  /*  background: transparent;*/
  /* pour un effet paralax */
    background-image:url(../photos/img_4648_fond.jpg); /* 4648 / 4673 */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;
  }
  #part-C > div {
/*    position: relative;*/
    left: 0;
    display: block;
    width: 100%;
  }
  #part-E > div {
    display: block;
    width: 100%;
  }
  #part-F {
/*    height:48px;*/
  }
/*  #part-F > div {
    display: block;
    width: 100%;
  }*/
  .traiteur {
    padding-bottom: 20px;
  }
  .only-max {
    display: none;
  }
  .only-min {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .no-mininin {
    display: none;
  }
}