/*********GENERAL**************/
 @font-face {
     font-family: "garamond";
     src: url("../fonts/Adobe Garamond Pro Regular.ttf") format("truetype");
}
 body{
     background-color: black;
     color:#D4AF37;
     font-family: "garamond";
}
 .logo{
     width: 9em;
     height: 6em;
}
 img{
     max-width: 100%;
     height: auto;
}
/**********VERSION MOBILE*********/
 #openNav{
     font-size: 3em;
     margin-left: 1rem;
     padding-bottom: 1.85rem;
}
 .color_hamburger{
     background-color: #111;
}
/*****ACCUEIL*****/
 .menu{
     height: 6em;
}
 .menu a{
     display: flex;
     justify-content: flex-end;
     position: fixed;
     width: 100%;
     height: auto;
     background-color: black;
     border-bottom: 1px solid #D4AF37;
     z-index: 1;
}
 .sidenav {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 2;
     top: 0;
     left: 0;
     background-color: #111;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
}
 .sidenav a {
     font-size: 21px;
     width:18rem;
     margin-left: 1rem;
     padding: 8px 8px 8px 0px;
     text-decoration: none;
     color: #D4AF37;
     display: block;
     transition: 0.3s;
}
 .sidenav a:first-child{
     margin-top: 2rem;
}
 .sidenav a:hover {
     color: #f1f1f1;
}
 .sidenav .closebtn {
     position: absolute;
     top: 0;
     right: 25px;
     font-size: 36px;
     margin-left: 50px;
}
 .side_nav{
     width: 20em;
}
 .accueil{
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}
 #logo{
     width: 16rem;
     margin: 0 auto;
}
/*****CONCEPT*****/
 .concept_container fieldset{
     padding: 2em 1em;
}
 .concept_container article{
     text-align: justify;
}
/*****SERVICES*****/
/*****SWIPE*****/
 .mapB{
     max-width: 100%;
     grid-column: 1 / -1;
     text-align: center;
     position: relative;
     bottom: 17px;
}
 .badge{
     display: inline-block;
     height:5px;
     width:5px;
     padding:0;
     border: solid;
     border-radius:25px;
     background-color: #D4AF37;
     opacity: 0.4;
}
 .badge:hover{
     opacity:1;
}
 .badge.active{
     opacity:1;
}
/**********/
 .slide{
     display: none;
}
 .galerie_mobile{
     padding:0.2rem;
     display: grid;
     grid-template-columns: repeat(5,auto);
     max-width: 45rem;
     margin: 0 auto;
}
 .galerie_mobile .first{
     grid-column: 1 / -1;
}
 .title{
     display: flex;
     justify-content: center;
     margin-top: 1rem;
     margin-bottom: 1rem;
}
 .title img{
     width: 5rem;
     height: 5rem;
}
 .legend{
     margin-left: 1rem;
     margin-right: 1rem;
     font-size:18px;
}
 .accordion{
     min-width: 22rem;
     max-width: 53rem;
     width: 85%;
}
 .accordion_content td:first-child{
     width: 97%;
}
 .accordion_content td:last-child{
     vertical-align: baseline;
}
 .services p{
     text-align: center;
}
/*****CONTACT*****/
 i {
     font-size: 5em;
     color: #D4AF37;
     cursor: pointer;
}
 section.location{
     text-align: center;
     /*display: grid;
     grid-template-columns: repeat(2, 1fr);*/
     margin: 0 auto;
}
 .map{
     max-width: 100%;
     grid-column: 1 / -1;
}
 iframe{
     height: 25rem;
     width: 100%;
}
 .facebook, .instagram{
     margin-top: 1rem;
     margin-bottom: 1rem;
}
 fieldset{
     border-color: #D4AF37;
}
 legend h2{
     margin-left: 1rem;
     margin-right: 1rem;
}
 .contact{
     text-align: center;
}
 .contact a{
     color: #D4AF37;
     text-decoration: none;
}
/*****FOOTER*****/
 footer{
     text-align: center;
}
 footer nav{
     margin-top: 1rem;
}
 footer p{
     margin: 1rem;
}
 footer nav a{
     color: #D4AF37;
     text-decoration: none;
}
 div.ui-loader{
     display: none;
}
 @media screen and (min-width: 768px) {
    /*****GENERAL*****/
     img{
         max-width: 60%;
         height: auto;
    }
    /*****SERVICES*****/
     .galerie_mobile img{
         max-width: 100%;
         height: auto;
    }
    /*****CONTACT * CONCEPT*****/
     .contact_container, .concept_container{
         width: 90vw;
         margin:0 auto;
    }
     section.location {
         text-align: center;
         display: grid;
         grid-template-columns: 80% 20%;
         margin: 0 auto;
    }
     .map{
         max-width: 100%;
         grid-row: 1 / 3;
         grid-column: 1;
    }

    .map_visit{
      max-width: 100%;
      grid-row: 1 / 3;
    }

    .map_visit .visit {
      padding-left: 0;
    }

     .contact{
         display: flex;
         flex-direction: row;
         justify-content: space-around;
    }
     .contact p{
         margin: 0;
    }
     iframe{
         padding-left:2em;
    }
     .facebook, .instagram{
         padding-left: 2em;
    }
}
 @media screen and (min-width: 1024px) {
    /******VERSION PC**********/
     h1.accueil{
         margin-top: 0;
    }
     a .logo{
         display: none;
    }
    /*ACCUEIL*/
     .menu a{
         padding-left: 5rem;
         position: fixed;
         width: 6em;
         height: auto;
         background-color: none;
         border-bottom: none;
    }
     #logo{
         width: 24rem;
         margin-top: -1em;
    }
     #barbiers, #bientot{
         max-width: 56rem;
    }
    /******SLIDE******/
     .slide{
         margin: 0 auto;
         width: 54rem;
    }
     .slide img{
         position: absolute;
    }
    /****/
     .salon{
         width: 55em;
         height: auto;
         margin:0 auto;
    }
    /*****CONCEPT*****/
     .concept_container{
         width: 100vh;
    }
     .concept_container fieldset{
         padding: 2em 2em;
    }
     .concept_container article{
         font-size: 19px;
         text-align: justify;
    }
    /*****SERVICES*****/
     img{
         max-width: 100%;
         height: auto;
    }
     .accordion{
         min-width: 60rem;
         max-width: 73rem;
         width: 82%;
    }
     .slide{
         display: block;
    }
     .galerie_mobile{
         display: none;
    }
    /* .services{
         margin: 35rem auto 0;
    }*/
     .legend{
         font-size:26px;
    }
     .tarifs{
         width: 100%;
    }
     div.container{
         display: flex;
         justify-content: space-around;
    }
     td{
         padding-bottom: 1rem;
         font-size: 20px;
    }
     .soins_visage{
         margin-top: 0;
    }
    /*****CONTACT*****/
     section.location{
         text-align: center;
         padding-bottom: 1rem;
    }
     .contact_container{
         width: 100vh;
    }
     .facebook, .instagram{
         margin-top:2em;
    }
    /**Icone facebook semblable au flyer** .facebook{
         background:black;
         border: 1px solid #f4b310;
         border-radius: 5px;
         padding: 0.2rem 0.2rem 0.2rem 2rem;
    }
     **/
     .instagram{
         grid-column: 2;
    }
     .contact div p:first-child{
         margin:0;
    }
    /*****TEST***** .test{
         width: 5em;
         height: 5em;
         background-color: red;
    }
     .flip-vertical-right {
         -webkit-animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
         animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) none;
    }
     @-webkit-keyframes flip-vertical-right {
         0% {
             -webkit-transform: rotateY(0);
             transform: rotateY(0);
        }
         100% {
             -webkit-transform: rotateY(180deg);
             transform: rotateY(180deg);
        }
    }
     @keyframes flip-vertical-right {
         0% {
             -webkit-transform: rotateY(0);
             transform: rotateY(0);
        }
         100% {
             -webkit-transform: rotateY(180deg);
             transform: rotateY(180deg);
        }
    }
     .flip-vertical-left {
         background-color: green;
         -webkit-animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
         animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
     @-webkit-keyframes flip-vertical-left {
         0% {
             -webkit-transform: rotateY(0);
             transform: rotateY(0);
        }
         100% {
             -webkit-transform: rotateY(-180deg);
             transform: rotateY(-180deg);
        }
    }
     @keyframes flip-vertical-left {
         0% {
             -webkit-transform: rotateY(0);
             transform: rotateY(0);
        }
         100% {
             -webkit-transform: rotateY(-180deg);
             transform: rotateY(-180deg);
        }
    }
     */
}