html,body{font-family:'Montserrat','Raleway','ubunturegular';font-size:14px; font-weight:500; height:100%;margin:0px;padding:0px;top:0px; background-color: #eee; color:#888;}
a {text-decoration:none; }
.header{height:120px; width:100%; color:#FFF;background-color:#e52d5d; margin:0 auto; right:0px;left:0px;top:0px;}
.header_logo{height:120px; width:320px; float:center; background:url(logo.png)no-repeat center #fff; margin:0 auto;}
#headerdeco {background:url(lambrequin.png) repeat-x; width: 840px;height:22px; margin:0 auto; margin-top:-1px;}
.footer{height:120px; width:100%; color:#FFF;background-color:#333; margin:0 auto; right:0px;left:0px;bottom:0px;}
.main { max-width:900px; height:auto; top:0px; margin-top:10px; padding-bottom:15px; padding:10px; margin:0 auto; background-color:#eee;overflow: hidden; }
.main p{ margin-left:10px; text-align: justify;}
.module_contain { width: 50%; float:left; padding-left:10px; padding-right:10px; font-weight: 500; font-size:14px; }
.module_contain:hover {color:#555; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; }
.module_contain h2 { font-weight: 600; font-size:18px; margin-bottom:0px; }
.module_contain h3 { font-weight: 600; font-size:14px; }
.module { max-width: 100%; float:left; font-weight: 500; font-size:14px; background:#fff; padding-left:10px; padding-right:10px; }
.module_contain2 { width:800px; float:left; padding-left:10px; font-weight: 500; font-size:14px; top:0px; margin-top:0px; margin-bottom:10px; }
.module_contain2 h2 { width:100%; margin-bottom:20px; font-weight: 600; font-size:18px; margin-bottom:5px; text-align: center; color:#333; }
.module_contain2 h3 { font-weight: 600; font-size:14px; text-align: center; color:#888; }
.module2 { width: 800px; min-height:505px; color:#555; float:left; font-weight: 400; font-size:14px; padding-left:10px; padding-right:10px; text-align: justify; }
.module2 img { width:180px; height:180px; margin:5px; float: left;}
.logo { margin:30px 30px 30px 30px;}
.boutoncontact { margin-top:40px; padding:20px; background:#333; color:#fff;font-size:18px;}
.boutoncontact:hover { background:#555;}
.left_module { width:50%; height:500px; float:left;}
.right_module { width: 50%; height:500px; float:left; color:#fff;}
.airbnb {width:400px; height:125px; margin:0 auto; margin-top:20px; background:url('img/airbnb.png') no-repeat center; }
.airbnb:hover { background:#666 url('img/airbnb1.png') no-repeat center;}
.booking {width:400px; height:125px; margin:0 auto; margin-top:20px; background:url('img/booking.png') no-repeat center; }
.booking:hover { background:#1e3e79 url('img/booking1.png') no-repeat center;}
.leboncoin {width:400px; height:125px; margin:0 auto; margin-top:20px; background:url('img/leboncoin.png') no-repeat center; }
.leboncoin:hover { background:#f56b2a url('img/leboncoin1.png') no-repeat center;}
#faspage {font-size:400px; width:100%; float:right; top:100px; left:300px;}
.text {width:50%; float: left; padding-top:10px;}
.text:hover {color:#555; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; }
.contain_slider {width:100%; float: right; background:#333 }
.contain_icons {width:100px; float: left; height:auto; }
.icon {width:150px; height:85px; font-size:12px; margin:5px; float:left}
#fas {font-size:60px; width:100%; margin:0 auto; float:left; }
.icon a {color:#aaa; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out;} .icon a:hover {color:#777; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out;} .icon a:hover p{font-size:15px; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out;}
.icon p{ margin:0 auto; width:100%; float:left; text-align: center; font-size:12px; font-weight:600; padding-top:5px;}
*{box-sizing:border-box}
img{
max-width: 100%;
}
/*pour le saut de page, on cree une class que l'on met en display:none*/
.target{
display: none
}
/* englobe le slider */
.cadre_diapo{
max-width: 800px;
margin: 2rem auto;
overflow: hidden;
}
.interieur_diapo{
display: flex;
width: 600%;
transition: transform .6s ease-in-out
}
.description{
position: relative;
}
.description span{
width:100%;
position: absolute;
left: 0;
bottom: 0%;
font-size: 75%;
display: flex;
padding: .5rem;
justify-content: center;
color: white;
background: hsla(0,0%,0%,.35)
}
#id1:target ~ .cadre_diapo .interieur_diapo{
transform:translatex(0)
}/*image 1*/
#id2:target ~ .cadre_diapo .interieur_diapo{
transform:translatex(-16.66%)
}/*image 2*/
#id3:target ~ .cadre_diapo .interieur_diapo{
transform:translatex(-33.33%)
}/*image 3*/
#id4:target ~ .cadre_diapo .interieur_diapo{
transform:translatex(-49.99%)
}/*image 4*/
#id5:target ~ .cadre_diapo .interieur_diapo{
transform:translatex(-66.66%)
}/*image 5*/
#id6:target ~ .cadre_diapo .interieur_diapo{
transform:translatex(-83.33%)
}/*image 6*/
/*navigation avec images miniatures*/
.navigation_diapo{
display: flex; /*permet d'aligner les photos les unes à la suite des autres, on peut aussi utiliser le positionnement absolu*/
list-style-type: none;
margin: 0;
padding: 0
}
.navigation_diapo li {
padding: .25rem;
}
.navigation_diapo img{
/*
border: 3px solid white;
box-shadow:0 0 5px hsla(0,0%,0%,.4);
*/
}
@media (min-width:31.25rem){
.description span{
font-size: initial
}
}
@media (max-width:866px){
.module_contain { width: 100%; float:left; padding-left:10px; font-weight: 500; font-size:14px; margin:0 auto; float:left; }
.module_contain h2 { font-weight: 600; font-size:18px; margin-bottom:0px; }
.module_contain h3 { font-weight: 600; font-size:14px; }
.module { width: 91%; float:left; font-weight: 500; font-size:14px; background:#fff; padding-left:10px; color:#333; }
.module_contain2 { width: 100%; float:left; padding-left:10px; font-weight: 500; font-size:10px; margin:0 auto; float:left; top:0px; margin-top:0px; }
.module_contain2 h2 { font-weight: 600; font-size:18px; margin-bottom:5px; }
.module_contain2 h3 { font-weight: 600; font-size:14px; }
.module { width: 100%; float:left; font-weight: 500; font-size:14px; background:#fff; padding-left:10px; color:#333; }
.text {width:100%; float: left;}
}