@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'courgetteregular';
    src: url('../fonts/courgette-regular-webfont.woff2') format('woff2'),
         url('../fonts/courgette-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{ box-sizing:border-box; -webkit-box-sizing:border-box}
body{font-family: 'ralewayregular';color: #2B5387}
h1{text-align:center;;font-size:24px;line-height: 40px;font-style: normal;font-weight: 600;letter-spacing: 3px;text-transform: uppercase;}
article h2{ line-height:  50px; font-weight: 700;border-bottom: 1px solid gray}
.chambre h1{text-align: left; margin-left: 2%;border-bottom: 2px solid rgba(0,0,0,0.2)}
h2{text-align: center;}
h3{text-align: center;line-height:  50px; font-style: italic}
h4{font-weight: 700; padding-left: 15px;margin-bottom:20px;margin-top: 15px}
.courgette{font-family: 'courgetteregular';}
header{height: 180px;}
nav{ width: 100%; margin-left: auto;margin-right: auto;}
.Menu{ position: absolute; z-index: 10;width:100%;list-style-type: none; margin :0px; padding: 0px; border: 0px; flex-wrap: wrap;    display: flex;flex-direction: row; align-items: center;justify-content:center; }
/*La propriété flex-shrink définit la possibilité pour un item flex de rétrécir si nécessaire.
La propriété flex-grow définit la possibilité pour un item de grandir, si nécessaire
flex: Cette propriété est le raccourci de flex-grow , flex-shrink et flex-basis
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] par defaut 0 1 auto
*/
.Menu li{ height: 50px; font-size: 14px;margin-right:10px;    margin-left :10px; padding-right: 2px; border: 0px;background: #fff; max-width : 200px; flex: 1 1 auto; text-align: center; transition: all 1s ease-out; }
.Menu li a{transition: color 1s ease-out; width: 100%; color :#225579;    font-size: 19px; margin : 0px; display: block;height: 100%; vertical-align: center;padding-top: 10px; box-sizing: border-box; text-decoration : none;}
.Menu li a:hover{ border-bottom : 3px solid #225579;border-top : 3px solid #225579; color: black}
.menuCache { display: flex; }

.responsive{/*! display:none; */width:100%;min-width:100%;position:absolute;top:80px;left:0}
.responsive li{cursor:pointer;position:relative;z-index:500;width:100%;min-width:100%;margin:0;height: 50px;;text-align:center;border-bottom:1px solid #f2f2f2}
.responsive li a{background:#88b7d5;color:#fff;display:block; height:50px;padding:0;margin:0;}.responsive li a:hover{color:#d29f5f!important}

.boiteAFlex {
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 align-content:top;
 justify-content:center
}
.encart {
 flex:1 1 50%;
 padding:7px
}
  .icon {display: none;;font-size: 30px;z-index: 500;margin-top: -30px;cursor:pointer }
.choixLangue{
    position: absolute;
    top :0; left: 10px;
}
#cd-intro-background .encart{flex : 1 1 auto}
.presentation{background: url('../images/logo.png') no-repeat center top;background-size: 100px;padding-top: 50px}
.presentation h1{margin-top : 20px;}

.accueil{background:  url('../images/48686419.png');background-repeat:  no-repeat;background-size: 100% 650px;width:100%;min-height:650px;height: auto;}
.accueil .encartBlanc{ background-image: url('../images/48686417.jpg');background-repeat:  no-repeat; margin-top: 80px; padding: 0px; margin-left:50px}
.accueil .article{width: 500px;padding: 40px;margin-top: 40px;}
.accueil .article p{color:#fff; text-align: justify;font-size: 14px;line-height: 26px;letter-spacing: 2px;}
.accueil .encart{flex : 1 1 auto;}

.diapos{width:100%; height:auto}
.photoGrande {width:100%;max-width: 800px;text-align: center;margin:auto;margin-top: 90px}
.photoGrande ul{width:100%;margin:0;padding:0;}
.photoGrande li{list-style: none}
.photoGrande img{width: 70%; max-height: 600px; border: 3px solid #FFF;margin-right:auto;margin-left:auto;box-shadow: 3px 2px 4px gray; }

.miniaturesVerticales ul{display:flex ;flex-direction: column; align-content:top;justify-content:right}
.miniaturesVerticales li{flex: 10 1 150px}
 .miniaturesVerticales img{width: 150px; margin: 5px;vertical-align: middle;text-align: center;margin:auto; border: 3px solid #fff;border-bottom: 30px solid #fff;box-shadow: 3px 2px 4px gray;}  

.miniatures{width:100%; margin: 5px;height: 150px;cursor: pointer}
.miniatures img{width: 150px; margin: 5px;vertical-align: middle;text-align: center;margin:auto; border: 3px solid #fff;border-bottom: 30px solid #fff;box-shadow: 3px 2px 4px gray;}
.miniatures ul{width:100%;margin:0;padding:0;display:flex ;flex-direction: row;}
.miniatures li{;list-style: none;;margin: 10px;}
.tarifs{padding:20px;}
.fdnoir{background:  url('../images/fondChbre.png');background-repeat:  no-repeat;background-size: 100% 900px;width:100%;min-height:650px;height: auto;background-position: 50% -143px;}
.fdnoir{color : #fff}

#adresse{margin-left: 50px;flex: 1 1 auto;}
#app{height: auto;}
.fa-bed{margin : 0 7px 8px 0}
.contact form{flex : 1 1 auto;margin-left: 50px}
.divCentrer{margin: auto; width: 80%;text-align: center;}
.txtCentrer{text-align: center;}
.pied{padding: 20px;font-size: 11px}
.modal-mask{position:fixed;display:none;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:table;transition:opacity .3s ease}.modal-wrapper{/*! display: table-cell; *//*! vertical-align: middle; */position:relative;margin:30px auto 20px;z-index:1501}.modal-container{position:relative;z-index:2000;background:#fff;width:550px;margin:30px auto 20px;border-radius:8px;-webkitborder-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;color:#5b5b5b;padding:26px;box-shadow:1px 2px 3px gray;-webkit-box-shadow:1px 2px 3px gray;-moz-box-shadow:1px 2px 3px gray;-o-box-shadow:1px 2px 3px gray}.modal-container .titre{padding:0 0 5px 15px;font-style:italic;font-size:Rem(25);border-bottom:1px solid #b8b5ac}.modal-container .bouton{display:inline-block;width:180px;margin-top:30px;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-radius:4px;-webkitborder-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px}.modal-container .bleu{color:#d0e5f5!important;background:#5c9ccc!important;font-weight:700}.modal-container .commander{color:orange;background:#d0e5f5;font-weight:700}.modal-container .rouge{color:#fff;background:#b91c01}.modal-container .orange{color:#fff;font-weight:700;background:orange}.modal-container .vert{color:#fff;background:#709c99}.modal-container .aDroite{position:relative;margin-right:15px;margin-left:auto;text-align:right}
.modal-container a{margin : 12px;display:block;line-height: 25px;font-size : 14px;text-decoration :none; border-radius : 7px; border: 1px solid gray; text-align: center; transition: color 1s ease}
.modal-container a:hover{color: orange}
@media all and (max-width: 1320px) {
     .accueil .encartBlanc{display: none}
     .presentation h1{font-size: 18px;margin-top: 20px}
}
@media only screen and (max-width: 768px) {
   
   .presentation h1{font-size: 14px;margin-top: 20px}
     .contact form{width: 100%;margin:10px}
     
}
@media all and (max-width: 500px) {
    .Menu{flex-direction: column;}
    .Menu li{width:100%;min-height: 50px; height: auto}
    .fdnoir p,  .fdnoir h2, .fdnoir h3, .fdnoir p{color : black;}
    .icon { display: block }
     .presentation h1{font-size: 12px;margin-top: 20px}
     .menuCache{display: none}
     .boiteAFlex{flex-direction: column}
     
     .contact form{width: 100%;margin:0}
}