/*
Theme Name:  Site Demo par Arborenzia.ch
Author: Alban Monnier
Description: Theme par ALBAN MONNIER ;
Text Domain: theme_AM
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*RESET*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;    
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

// <weight>: Use a value from 200 to 1000
// <uniquifier>: Use a unique and descriptive class name

.mulish-<uniquifier> {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/*GLOBAL*/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;}
.selected { background: #FF0000; color: #FFF;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
.clear{clear: both;}
p {margin: 0px;  font-size: 1.4vw;}
a:hover { color: #e7c353}
a:active { color: #e7c353}
a { text-decoration: none ; color: #fff3d6; }
*{box-sizing: border-box;}
ul {list-style: none;}
body{ font-family: "Mulish", sans-serif;background-color:black; color: #181818}



h3 {font-size: 1.6vw; font-weight:bold;  }
h2 {font-size: 2.4vw;  font-weight:bold; color: #e7c353; line-height: 3vw}
h1 {font-size: 1.6vw;  }
/* WRAPPER GLOBAL */

hr {border: none;
    color: #fff3d6;
    background-color: #fff3d6;
    height: 0.5px;
    width: 70%;}


.uppercase {text-transform: uppercase;
    color: #e7c353;}

#menu li {float: left; margin-right: 3vw;}
#menu li a {text-decoration: none;font-size: 1.4vw;}
#menu a.active { color: #e7c353}
.select {color: #e7c353}

#cartoucheRS { position: fixed;right: 3vw; }
#logoFb {background-image: url(../img/logfb.svg); width: 1.8vw;height: calc(1.8vw * 1); float:right; background-repeat:no-repeat;   cursor: pointer;}
#logoFb2 {background-image: url(../img/instaLog.svg); width: 1.8vw;height: calc(1.8vw * 1);float:right; background-repeat:no-repeat; margin-right: 0.8vw; cursor: pointer;}


#logoFb:Hover {background-image: url(../img/logfbHoover.svg); }
#logoFb2:Hover {background-image: url(../img/instaLogHoover.svg); }

#logoFbRes {background-image: url(../img/logfbhover.svg); width: 25px; height: 25px; margin-left: 742px; margin-top: 32px; display: none; }
#logoFbRes:Hover {background-image: url(../img/logfb.svg); }

#cartoucheLogo { width: 30vw;height: calc(30vw * 0.5); margin: 0px auto ;background-image: url(../img/logo.svg); background-size: cover ; position: fixed; z-index: 2; cursor: pointer; background-color: black; }
#logo { transition: all 0.5s; width: 30vw;height: calc(30vw * 0.5); margin: 0px auto ;background-image: url(../img/logo.svg); background-repeat: no-repeat; position: fixed; z-index: 2; cursor: pointer; background-color: black; margin-left:12vw }

#logo.petit { transition: all 0.5s; width: 14vw;height: calc(14vw * 0.5); margin: 0px auto ;background-image: url(../img/logo.svg); background-repeat: no-repeat; ; position: fixed; z-index: 2; cursor: pointer; background-color: black; margin-left:1.8vw }

.conteneur {height: 820px ; width: 100vw ; margin: 0px auto; }
.trait { width: 100vw; height: 60px; margin: 0px auto; background-image: url(../img/trait.svg);}
.center { text-align: center; }

/* Header */

header { width: 100vw;height: calc(100vw*0.07);background-color: black;position: fixed;z-index: 1;display: none}

.menu {align-items: center;margin: auto;display: flex;margin-left: 25vw;}

#ff{ display:flex; align-items: center;height: calc(100vw*0.07);s}

.containerTexteHome { margin-top: 20vw; margin-left: 12vw}

#Titre {  font-size: 3vw;  width: 41vw; text-transform: uppercase;  margin-top: 3vw; color: black; position: absolute;  font-weight: bold;letter-spacing: 0.2vw;}
#Titre2 { font-size: 2vw;  width: 39vw; text-transform: uppercase; font-weight: 400; color: black; position: absolute; letter-spacing: 0.2vw;}



#sectionHome {width: 100vw; height: calc(100vw * 0.6); background-color: skyblue;}
.imageBackground {background-image: url(../img/background.jpg);width: 100vw; height: calc(100vw * 0.6);background-repeat: no-repeat;background-position: bottom;background-color: white;background-size: cover; overflow: auto; }


.espaceTexte1 {margin-bottom: 2vw}
.espaceTitre1 {margin-bottom: 3vw}
.espaceTitre2 {margin-bottom: 5vw}

/*HEADER RESPONCIVE*/

#containerLogoMenu {width: 100vw; margin: 0px;height: calc(50vw*0.5);display: none;align-items: center;justify-content: space-between; position: fixed;z-index: 1; transition: 0.4s; }
#containerLogoMenu.petit {width: 100vw; margin: 0px;height: calc(100vw*0.05);display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 13;transition: 0.4s; }

#LogoMenuResponsive { background-image: url(../img/LogoMenuResponsive.svg);width: 2.5vw;height: calc(2.5vw*0.8);background-repeat: no-repeat;display: none;cursor: pointer;z-index: 15;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;}
#LogoMenuResponsive.petit { width: 2vw;height: calc(2vw*0.8)}
#LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 2.5vw;height: calc(2.5vw*0.8)}
#LogoMenuResponsive.open.petit {width: 2vw;height: calc(2vw*0.8)}
#LogoMenuResponsive.open.petit.show {display: block;}

#containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 9.7vw; font-size: 4.93vw; width: 80%;font-weight: bold;}
#headerResponcive { width:100%; height:100vh; background-color:black;position:fixed; z-index: 6;opacity: 1;  margin: auto; font-size: 3.66vw; color: white; display: none; transition: 0.8s; margin-top: -100vh;}
#headerResponcive.ouvert { width:100%; height: 100vh; opacity: 1;display: flex;transition: 0.8s; margin-top: 0px;}
.ChoixMenuResponcive { color: white; display: flex;}

/* Salon */
#sectionSalon { color: #fff3d6; width: 100vw; margin: auto;align-content: center;line-height: 2.2vw;}
.conteneurSalon {width: 50vw ; margin: auto;text-align: left;margin-top: 7vw; margin-bottom: 7vw}
.contenuSalon {}
#salon{cursor: pointer;}


/* Pestation */
#sectionTarifs { color: #fff3d6; align-content:center; width:100vw;line-height: 2.2vw;}
.conteneurTarifs {width: 50vw ; margin: auto;text-align: left;margin-top: 7vw; margin-bottom: 7vw}

.contenuTarifs { margin:auto;}
.contenuTarifsRespensive {display: none;}


/* Horraire */
#sectionHoraires { color: #fff3d6; align-content:center; width:100vw;line-height: 2.2vw;}
.conteneurHoraires {width: 28vw ; margin: auto;text-align: left; margin-top: 7vw; margin-bottom: 7vw}
.contenuHoraires {  margin: auto;}

/* Gallerie */
#sectionGallerie { color: #fff3d6; align-content:center; width:100vw;line-height: 2.2vw;}
.conteneurGallerie{width: 50vw ; margin:  auto; text-align: left;margin-top: 7vw; margin-bottom: 7vw; display: flex;}

.contenuGallerie {text-align: center;margin: auto;}
.slideshowRespensive { display: none; }

/* Contact */
#sectionContact {  color: #fff3d6; align-content:center; width:100vw;line-height: 2.2vw;}
.conteneurContact {width: 60vw ; margin:  auto;text-align: left;margin-top: 7vw; margin-bottom: 7vw;display: flex;}

.contenuContact {width: 30vw; }
#google_map{width:30vw; height: calc(30vw*0.8);float: right;}


/*FOOTER*/
#footer {margin: auto; text-align: center; width: 95vw ; text-transform: uppercase;color:#3d3d3d; color: white}
#containerFooter { margin:auto; }
#logoFooter {background-image: url(../img/3logNew.svg);width: 3vw; height: calc(3vw*1.2); margin: auto; background-repeat: no-repeat;background-position: center;}
#textFooter { display:flex;font-size: 1.2vw;font-weight: bold}
#yearDate{}
#copyright{margin-left: 0.1vw;margin-right: 0.1vw;}
footer p {font-weight: bold; font-size: 0.86vw}
footer a {font-size: 0.86vw; font-weight: bold; color: white;}

  #containerNewFooter{width: 94vw; display: flex;text-align: left; margin: auto;    padding-top: 6vw; padding-bottom: 2vw;}
  #foot1 {width: 30.833vw; margin-right: 1.25vw; font-size: 1.4vw; display: flex; align-items: flex-end; }
   #foot2 {width: 30.833vw; margin-right: 1.25vw; font-size:0.86vw ; text-align: center; margin: auto;display: flex;}
    #foot3  {width: 30.833vw; font-size: 1.4vw; display: flex;justify-content: flex-end;align-items: flex-end; }
    #instaLinks { cursor:pointer; }
    #lienarbo { cursor:pointer; }


.red {background-color:red;}
.jaune{background-color:#e7c353 ;}
.white{background-color:white ;}
.black{background-color:black ;}
.alignright {text-align: right; float: right;}
.txtjaune { color: #e7c353; }
.noMargeTop { margin-top: 0px; }
.txjaune { color: #e7c353; }               



/* Return on top */

#returnOnTop {
    background-color: #e7c353;
    background-image: url(../img/fleche.svg);
    bottom: 9%;
    cursor: pointer;
    display: none;
    filter: alpha(opacity = 100); /* IE < 8 */
    height: 26px;
    opacity: 1;
    position: fixed;
    right: 3vw;
    width: 26px;
    border-radius: 100%;
}

#returnOnTop:hover {
  background-color: grey;
    /*filter: alpha(opacity = 50); /* IE < 8 */
    /*opacity: 0.5;*/
}


/* Slide Show */
/*slide 2 */

:root {
    --size: 30vw;
    --duration: 16s; /* Durée totale de l'animation */
}


.slider {
    display: flex;
    justify-content: center;
    width: 33vw;
    height: 33vw;
    background-color: black;
    border: 2px solid #e7c353;
}

.slider-window {
    width: var(--size);
    height: calc(var(--size)*1);
    overflow: hidden;
      margin: auto;
  
}

.slides {
    display: flex;
    width: calc(var(--size) * 6); /* 5 images + clone */
    animation: slider var(--duration) linear infinite;
}

.slide {
    width: var(--size);
    height: calc(var(--size)*1);
    flex-shrink: 0;
    background-position: center;
    background-size: cover;
}

/* Met ici les images comme background */
#img1 { background-image: url(../img/gal1.jpg); }
#img2 { background-image: url(../img/gal2.jpg); }
#img3 { background-image: url(../img/gal3.jpg); }
#img4 { background-image: url(../img/gal4.jpg); }
#img5 { background-image: url(../img/gal5.jpg); }
#img1-clone { background-image: url(../img/gal1.jpg); }

@keyframes slider {
    0%   { transform: translateX(0); }
    16.666% { transform: translateX(0); }

    20%  { transform: translateX(calc(-1 * var(--size))); }
    36.666% { transform: translateX(calc(-1 * var(--size))); }

    40%  { transform: translateX(calc(-2 * var(--size))); }
    56.666% { transform: translateX(calc(-2 * var(--size))); }

    60%  { transform: translateX(calc(-3 * var(--size))); }
    76.666% { transform: translateX(calc(-3 * var(--size))); }

    80%  { transform: translateX(calc(-4 * var(--size))); }
    96.666% { transform: translateX(calc(-4 * var(--size))); }

    100% { transform: translateX(calc(-5 * var(--size))); }
}



/* SITE RESPENSIVE /////////////////////////////////////////////////////////////// */

/* Tablette ////////////////////////////// */

@media screen and (max-width: 1024px)
{
    nav { display: block; width: 100%;}

    p {margin: 0px;  font-size: 2.26vw;}
    h3 {font-size: 2.6vw; font-weight:bold;  }
    h2 {font-size: 3.4vw;  font-weight:bold; color: #e7c353; line-height: 3vw}
    h1 {font-size: 2.6vw;  }

    #menu li a {text-decoration: none;font-size: 1.8vw;}
    .menu {align-items: center;margin: auto;display: flex;margin-left: 20vw;}

 
    .espaceTexte1 {margin-bottom: 2vw}
    .espaceTitre1 {margin-bottom: 5vw}
    .espaceTitre2 {margin-bottom: 10vw}

    #sectionSalon { color: #fff3d6; width: 100vw; margin: auto;align-content: center;line-height: 3.1vw;}
    .conteneurSalon {width: 60vw ; margin: auto;text-align: left;margin-top: 10vw; margin-bottom: 10vw}

    #sectionTarifs { color: #fff3d6; align-content:center; width:100vw;line-height: 3.1vw;}
    .conteneurTarifs {width: 60vw ; margin: auto;text-align: left;margin-top: 10vw; margin-bottom: 10vw}

    #sectionHoraires { color: #fff3d6; align-content:center; width:100vw;line-height: 3.1vw;}
    .conteneurHoraires {width: 60vw ; margin: auto;text-align: left; margin-top: 10vw; margin-bottom: 10vw}

    #sectionGallerie { color: #fff3d6; align-content:center; width:100vw;line-height: 3.1vw;}
    .conteneurGallerie{width: 60vw ; margin:  auto; text-align: left;margin-top: 10vw; margin-bottom: 10vw; display: flex;}

    #sectionContact {  color: #fff3d6; align-content:center; width:100vw;line-height: 3.1vw;}
    .conteneurContact {width: 60vw ; margin:  auto;text-align: left;margin-top: 10vw; margin-bottom: 10vw;display: flex;}





    

/* Portable/////////////////////////////// */

@media screen and (max-width: 500px)
{
    nav { display: block; width: 100%;}

    #headerResponcive { width:100%; height:100vh; background-color:black;position:fixed; z-index: 6;opacity: 1;  margin: auto; font-size: 3.66vw; color: white; display: flex; transition: 0.8s; margin-top: -100vh;}


      #LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 3vw;height: calc(3vw*1);background-repeat: no-repeat;cursor: pointer;z-index: 16;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;right: 5vw}
      #LogoMenuResponsive {  transition: 0.5s;margin: auto;width: 3vw;height: calc(3vw*1);right: 5vw}

#LogoMenuResponsive.show {display: block;}


     header { width: 100vw;height: calc(30vw*0.5);background-color: black;position: fixed;z-index: 1;display: none}
     .menu {align-items: center;margin: auto;display: none;margin-left: 25vw;}

#containerLogoMenu {width: 100vw; margin: 0px;height: calc(30vw*0.5);display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 13; transition: 0.4s; }


     #sectionHome {width: 100vw; height: calc(100vw * 1.7); background-color: skyblue;}
    .imageBackground {background-image: url(../img/backgroundResponsive.jpg);width: 100vw; height: calc(100vw * 1.7);background-repeat: no-repeat;background-position: bottom;background-color: white;background-size: cover; overflow: auto; }
    #logo { transition: all 0.5s; width: 50vw;height: calc(50vw * 0.5); margin: 0px auto ;background-image: url(../img/logo.svg); background-repeat: no-repeat; position: fixed; z-index: 2; cursor: pointer; background-color: black; margin-left:12vw }
    #logo.petit { transition: all 0.5s; width: 30vw;height: calc(30vw * 0.5); margin: 0px auto ;background-image: url(../img/logo.svg); background-repeat: no-repeat; ; position: fixed; z-index: 2; cursor: pointer; background-color: black; margin-left:6vw }
    .containerTexteHome { margin-top: 48vw; margin-left: 12vw}

    p {margin: 0px;  font-size: 4.1vw;}
    h3 {font-size: 4.6vw; font-weight:bold;  }
    h2 {font-size: 5.4vw;  font-weight:bold; color: #e7c353; line-height: 6vw}
    h1 {font-size: 4.6vw;  }

    .containerTexteHome { margin-top: 40vw; margin-left: 12vw}

    #Titre {  font-size: 6vw;  width: 47vw; text-transform: uppercase;  margin-top: 13vw; color: black; position: absolute;  font-weight: bold;letter-spacing: 0.2vw;line-height: 6vw}
    #Titre2 { font-size: 6vw;  width: 57vw; text-transform: uppercase; font-weight: 400; color: black; position: absolute; letter-spacing: 0.2vw; line-height: 6vw}



    .espaceTexte1 {margin-bottom: 4vw}
    .espaceTitre1 {margin-bottom: 12vw}
    .espaceTitre2 {margin-bottom: 16vw}

    #sectionSalon { color: #fff3d6; width: 100vw; margin: auto;align-content: center;line-height: 5.68vw;}
    .conteneurSalon {width: 80vw ; margin: auto;text-align: left;margin-top: 25vw; margin-bottom: 25vw}

    #sectionTarifs { color: #fff3d6; align-content:center; width:100vw;line-height: 5.68vw;}
    .conteneurTarifs {width: 80vw ; margin: auto;text-align: left;margin-top: 25vw; margin-bottom: 25vw}

    #sectionHoraires { color: #fff3d6; align-content:center; width:100vw;line-height: 5.68vw;}
    .conteneurHoraires {width: 80vw ; margin: auto;text-align: left; margin-top: 25vw; margin-bottom: 25vw}

    #sectionGallerie { color: #fff3d6; align-content:center; width:100vw;line-height: 2.2vw;}
    .conteneurGallerie{width: 80vw ; margin:  auto; text-align: left;margin-top: 25vw; margin-bottom: 25vw; display: flex;}

     #sectionContact {  color: #fff3d6; align-content:center; width:100vw;line-height: 5.68vw;}
    .conteneurContact {width: 80vw ; margin:  auto;text-align: left;margin-top: 25vw; margin-bottom: 25vw;display: flex;}

    .contenuContact {width: 50vw; }


    :root {
    --size: 58vw;
    --duration: 16s; /* Durée totale de l'animation */
}

.slider {
    display: flex;
    justify-content: center;
    width: 63vw;
    height: 63vw;
    background-color: black;
    border: 2px solid #e7c353;
}



    #google_map{display: none;}

           footer p {font-weight: bold; font-size: 2.26vw}
       footer a {font-size: 2.26vw}
      #logoFooter {width: 10vw;height: calc(10vw*1.2);}
          #containerNewFooter{width: 90vw; display: flex;text-align: left; margin: auto;    padding-top: 6vw; padding-bottom: 2vw;}


      #returnOnTop {
    right: 5vw;}

    #cartoucheRSMobil { right: 3vw;width: 30vw; height: 9vw; margin-top: 6vw;}
    #logoFbMobil {background-image: url(../img/logfb.svg); width: 8.8vw;height: calc(8.8vw * 1); float:left; background-repeat:no-repeat;   cursor: pointer;margin-right: 3.2vw; }
    #logoFb2Mobil {background-image: url(../img/instaLog.svg); width: 8.8vw;height: calc(8.8vw * 1);float:left; background-repeat:no-repeat; cursor: pointer;}





   


}