* {
 
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 scroll-behavior: smooth;
 font-family: Verdana, Geneva, Tahoma, sans-serif;

}
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300';

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');

/*attributs HTML*/
body {
 font-size: 18px;
 height: 100%;
 color:#000;
 background-color:#fff;
}

.lesoursons{
    padding-right:10px;
    padding-left: 10px;
    
}


.imglesoursons{
  width:900px;
  border:1px solid #666;
  margin-right: 20px;
  margin-left: 20px;
}

.imglesoursons2{
    width:900px;
    border:2px solid;
    border-color: #000;
  }

.container-fluid{
   padding-right: 0;
   padding-left: 0;
}

.nav-link {
    display: block;
    padding: .5rem 0rem;
    color: #fff;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
  }

  .nav-link:focus, .nav-link:hover {
  
    color: rgb(186, 228, 1);
  
  }

  .dropdown-item {
    font-size: 0.8rem;
    color: #000 !important;
  }


ul {
    font-size: 1rem;
    list-style-type: none;
    padding-left:12px;
  margin-bottom: 0;
  }

.liste{
    font-size: 0.8rem;
}
.liste ul{
   
    padding-left: 12px;
    margin: 0;
  
}
.liste li{
    /*background-image: url(images/carre.png);
    background-repeat:no-repeat;
    background-size: 5px;
    background-position: 10px;*/
    list-style: square;
    padding: 7px 2px;
    color:#666;
}
li {
    padding: 7px 20px;
    transition: 0.3s;

}
h1 {
    font-weight:lighter !important;
  font-size: 2rem;
  line-height: 3rem;
  width: auto !important;
  font-family: 'Raleway', sans-serif;
  color:#657611;
  text-align: center;
  text-transform: uppercase;
  }

  .chalets{
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  
  .chaletsimg{
  
    display: flex;
    justify-content:space-between;
    align-items: center;
  }

  @media (min-width: 350px) and (max-width: 1000px){
 
    .chaletsimg {
      flex-direction: column;
    }
    }

  .textchalets{
    text-align: center;
  }

  h2 {
    font-weight: lighter !important;
    font-size: 1.5rem;
    line-height: 1.7rem;
    font-family:'Raleway', sans-serif;
    color:#333;
  }

h3{
    font-size: 1rem;
    font-family:'Raleway', sans-serif;
    font-weight: 200;
    color:#000;
    line-height: 1.5;
    
}

h4{
    font-weight: 700 !important;
    font-size: 0.9rem;
    font-family:'Raleway', sans-serif;
    line-height: 1.3rem;
}

p{
    font-size: 0.9rem;
    color:#333;
}

img{
    overflow: hidden;
}
label{
    font-size: 0.8rem;
}

.cadre{
    width:350px;
    border:1px solid;
    border-radius: 0% 5% 0% 5%;

}

form{
    width: 62% !important;;
    margin:auto;
}

.btn {
  
    padding: .1rem .75rem ; 
}


figcaption{
    font-size: 0.8rem;
    text-align: center;
}


strong{
    font-size: 0.8rem;
    color:#666;
    
}

strong a{
color:#e76a10;
      
    }

strong a:hover{
color: rgb(64, 94, 4);
              
            }

footer{
   
    width: 100%;
    height: auto;
    background-color: #666;
    font-size: 0.8rem;
    color:#fff;
    padding-top: 10px;
    padding-bottom: 50px;
}
footer a{
    color:#fff;
}

footer a:hover{
    color: rgb(186, 228, 1);
}

footer strong{
    color:#fff;
}

footer figure a{
color:#fff;
}
header
{
  background-color: #666;
  height: 150px;
  width: 100%;
  z-index: 99;
  opacity: 0.95;
  align-content: center;
  display: flex;
  justify-content: center;
  align-content: center;
}



header img {
    width: 200px;

  }

header li {
    padding: 7px 20px;
    cursor: pointer;
    transition: 0.3s;
}
header li a {
    color: #fff;
    
}

.cadreservation
{
  width: 900px;
  display: flex;
  justify-content: space-between;
}

a{
    text-decoration: none;
}
li a:hover {
    color: rgb(186, 228, 1);
}

header li:hover {
    color: rgb(186, 228, 1);
}

header .active {
    color: #fff;
}
span{
    font-size: 0.8rem;
}
/*classes*/
.fond{
    background-image: url(images/geradmer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}

.fond2{
    background-image: url(images/location-chalet-vacances-gerardmer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}

.fond3{
    background-image: url(images/vue-chambre-geradmer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}


.fond4{
    background-image: url(images/vacances-chalet-gerardmer-vosges.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}

.fond5{
    background-image: url(images/reservation-chalet-gerardmer.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}

.fond6{
    background-image: url(images/location-seminaires-gerardmer.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}
.fond7{
    background-image: url(images/seminaire-gerardmer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}

.fond8{
    background-image: url(images/chalet-geradmer.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    margin:0;
}
.lacabane{
        background-color: #000;
        z-index: 8000;
        position: relative;
      }

.reservation{
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.reservation a{
    color:#fff;
    font-family:'Raleway', sans-serif;
}

.reservation a:hover{
    color: rgb(186, 228, 1);
}

.reserver
{
  border: 1px #ccc solid;
  width: 300px;
  padding: 10px;
  background-color: rgba(50, 50, 50, 0.2);
  height: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: auto;
}


.redac{
    margin:auto;
    width:50%;
  
}
figure a{
    color:#333;
    opacity: 0.8;
}

figure a:hover{
    color: rgb(218, 118, 5);
  opacity: 1;

  -ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}



.adresse{
    display:flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.8rem;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin:auto;
    align-items: center;
    color:#fff;
    padding: 0px 5px 0px 5px;
}
.adresse strong{
    color:#fff;
}

.chalet {
    width: 100%;
    height: auto;
    color: #888;
    padding: 5px 20px;;
  }
.chalet a{
    color: #888;
}

.chalet a:hover{
    color: rgb(186, 228, 1);
}
.adresse p{
color:#fff;
}

.redac a{
    color:#e76a10;
  
}
.redac a:hover{
    color: rgb(64, 94, 4);
  
}

.rgpd{
    width:45%;
    text-align: justify;
}


.bordure{
    border: 1px solid;
    border-color: rgb(202, 199, 199);
    padding:10px;
}

/*MENU BURGER + menu desk*/


.burger{
    cursor: pointer;
}
.burger .line {
    height: 2px;
    width: 30px;
    background-color:  rgb(186, 228, 1);
    margin-bottom: 5px;
}

.nav-phone {
    background-color: #666;
    position: relative;
    top: -700px;
    transition: 0.5s;
    padding:10px;
}

.nav-phone li a {
    color: #fff;
  
}

.nav-phone li:hover {
    color: rgb(186, 228, 1);
  
}

.liphone{
    border-bottom: 1px solid rgb(58, 58, 58);
}

.nav-desk {
    position: relative;
    z-index: 98;
    background-color:#666;
}

.nav-desk ul {
border: 1px #999 solid;
padding: 10px;
}
.show {
    top: 0;
}

.nav-phone .active {
    background-color: #fff;
    color: #fff;
}


/* photos chalet*/
.visuschalet{
    display: flex;
    justify-content: space-between;
   
}

.cabine{
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.equipement{
    display: flex;
    justify-content: space-between;
}

.basdepage{
    display: flex;
    justify-content: space-between;

}

.oursons{
border:1px solid #fff;
border-radius: 0% 5% 0% 5%;
margin-top: 20px;
width: 200px;
overflow: hidden;
}


.oursons figure{
    margin: 10px;
}
.oursons img{
    width:200px;
}

.oursons figcaption{
    font-size: 0.7rem;
}

.domaine{
display: flex;
width:100%;
justify-content:center;
}

.domaine figure{
    margin: 10px;
    }

.diapos{
    margin:auto;
    display: flex;
    justify-content:center;
 
}
.diapos img{
    padding:5px;
    width:400px;
   
}

.diapos a:hover{
  opacity: 0.8;
  cursor: crosshair;
}
.telecabine {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

/* SLIDE SLICK*/

html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}



.slick-prev:before,
.slick-next:before {
    color: black;
}

.slider {
   
    margin: 50px auto !important;
     
  }

  @media (min-width: 350px) and (max-width: 1000px){
 
    .slider {
        width: 80%;
        margin-top: 160px !important;
    }
    }
 

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #fff;
    box-shadow:0;
  }

  

  /*ANIMATION*/
  @keyframes animation {
    0%{opacity:0; left:-400px;}
    25%  {opacity:0; left:-200px;}
    50%  {opacity:0.5; left:0;}
    75%  {opacity:0.7; left:0;}
    100% {opacity:1; left:0;}
     }
      
    
    .animation { 
    position:relative;
    animation-name: animation;
    animation-duration: 4s;
     } 

/*ANIMATION 2*/

       
    .animation3 { 
        opacity:1;
        transition: 4s;
        
         } 
    
    
    .animation2 { 
   opacity:0;
   
     } 
         
      
.scrollretour{
    width:30px;
    height: 30px;
    position: fixed;
    background-color: rgb(186, 228, 1);
    ;
    z-index: 1000;
    opacity: 0.5;
    
}
 .retour{
     display: flex;
    justify-content:flex-end;
    align-content: center;
    align-items: center;
 }