/* Les couleurs de la charte sont le bleu (#0065FC), une version plus
claire de ce bleu (#DEEBFF) et le gris pour le fond (#F2F2F2). */
/* Concernant les breakpoints, nous avons convenu avec le designer UI
d’utiliser 992 px et 768 px.
992 px pour les écrans d’ordinateurs et 768 px pour les tablettes, et
tout ce qui est en dessous de 768 pour les téléphones portables. */

body {
	font-family: 'Raleway', sans-serif;
}

main, header {
   padding-left: 5%;
   padding-right: 3%;
}

* {
   box-sizing: border-box; /* Opera/IE 8+ */
   -moz-box-sizing: border-box; /* Firefox, autres Gecko */
   -webkit-box-sizing: border-box; /* Safari/Chrome, autres WebKit */
}

/*animation visuelle des boxes*/

#mar1, #mar2, #mar3, #mar4, #mar5, #mar6, #pop1, #pop2, #pop3, #box_act1, #box_act3, #box_act50-1, #box_act50-2, #box_act40-1, #box_act40-2 { 
   transition: all .2s ease-in-out; 
}

#mar1:hover, #mar2:hover, #mar3:hover, #mar4:hover, #mar5:hover, #mar6:hover, #pop1:hover, #pop2:hover, #pop3:hover, #box_act1:hover, #box_act3:hover, #box_act50-1:hover, #box_act50-2:hover, #box_act40-1:hover, #box_act40-2:hover { 
   transform: scale(1.05); 
}

header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	height: 90px;
}

#logo {
	display: flex;
	flex-direction: row;
	align-items: baseline;
   max-width: 6em;
}

#menu {
	list-style-type: none;
	display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}

nav li {
	margin: 0 30px 0 30px;
}

nav a {
   font-size: 1em;
   padding-top: 59px;
   color: black;
   text-decoration: none;
   padding-left: 25px;
   padding-right: 25px;
}

nav a:hover {
   color:#0065FC;
   border-top: 2px solid #0065FC;
}

/* 1ere section - recherche */

#recherche {
   margin-top: 30px;
}

h1 {
   font-size: 1.3em; 
}

form {
   display: flex;
   text-align: center;
   margin: 20px 0px 20px 0;
   height: 3em;
}

.fa-location-dot {
   background-color: #F2F2F2;
   width: 48px;
   border-radius: 15px 0 0 15px;
   height: 48px;
   padding: 30%;
}

form input {
   border: 1px solid #F2F2F2;
   padding-left: 10px;
}

form input::placeholder {
   opacity: 1;
   font-weight: bolder;
   font-weight: 800;
   color:black;
}

#form-submit {
   color: white;
   background-color: #0065FC;
   border-radius: 0 15px 15px 0;
   width: 150px;
   border-style: none;
   letter-spacing: 1px;
   font-weight: bolder;
   cursor: pointer;
}

#form-submit:hover {
   background-color:#3e89fa;
}

#form-submit:active {
   background-color: #DEEBFF;
   box-shadow: 0px 3px 3px #041116 inset;
    text-shadow: -1px 0 0 rgba(20, 83, 108, 0.5), 
                1px 0 0 rgba(20, 83, 108, 0.5),
               0 -1px 0 rgba(20, 83, 108, 0.5),
                0 1px 0 rgba(20, 83, 108, 0.5);
}

form button {
   display: none;
}

/* filtres de recherche */

#filtres {
   font-weight: 800;
   display: flex;
   align-items: baseline;
   justify-content: flex-start;
}

#filtres ul {
   list-style-type: none;
	display: flex;
   flex-wrap: wrap;
}

#filtres ul li {
   margin-right: 50px;
   border: 2px solid #80808038;
   border-radius: 27px;
   position: relative;
}

#filtres ul li:hover {
   background-color: #F2F2F2;
   cursor: pointer;
}

.fa-money-bill-wave, .fa-child-reaching, .fa-heart, .fa-dog {
   background-color: #DEEBFF;
   border-radius: 50%;
   padding: 15px;
   color: #0065FC;
   width: 50px;
   height: 50px;
   text-align: center;
}

#absolute1 .fa-money-bill-wave, #absolute2 .fa-child-reaching, #absolute3 .fa-heart, #absolute4 .fa-dog {
   background-color: #DEEBFF;
   border-radius: 50%;
   padding: 16px;
   color: #0065FC;
   width: 52px;
   height: 52px;
   text-align: center;
   position: absolute;
   left: -2px;
   top:-1px;
}

#filtres ul li a {
   color: black;
   text-decoration: none;
}

#filtres span {
   margin-left: 10px;
   margin-right: 15px;
}

#info {
   display: inline-block;
   text-align: center;
}

#info i {
   color: #0065FC;
   width: 20px;
   height: 20px;
   border: 1px solid #80808038;
   border-radius: 50%;
   margin-right: 15px;
   font-size: 0.8em;
   padding: 3px;
   vertical-align: bottom;
}

#info p {
   color: black;
   text-decoration: none;
}

/*Hebergement*/

h2 {
   font-size: 1.3em;
   text-decoration: none;
   color: black;
   margin-left: 20px;
}

#hebergements {
   height: 600px;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

#box_heb1 {
   height: 600px;
   width: 65%;
   background-color: #F2F2F2;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

#heb_mar6 {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
}

#mar1, #mar2, #mar3, #mar4, #mar5, #mar6 {
   position: relative;
   overflow: hidden;
   width: 30%;
   height: 230px;
   border-radius: 15px;
   -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3); 
   box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
   border: 4px solid #ffffff;
}

#mar1, #mar2, #mar3 {
   margin-bottom: 15px;
}

.afficher {
   margin: 15px;
   font-weight: bolder;
   font-size: 0.9em;
   background-color: transparent;
   border-style: none;
   cursor: pointer;
   width:100px;
}

#mar1 img {
   width: 350px;
   height: 200px;
   object-position: 0px -35px;
}

#mar2 img {
   width: 350px;
   height: 200px;
   object-position: -20px -35px;
}

#mar3 img {
   width: 350px;
   height: 200px;
   object-position: 0px -40px;
}

#mar4 img {
   width: 350px;
   height: 250px;
   object-position: 0px -50px;
}

#mar5 img {
   width: 400px;
   height: 300px;
   object-position: -20px -90px;
}

#mar6 img {
   width: 350px;
   height: 350px;
   object-position: -10px -150px;
}

.act-filtre-mar {
   position: absolute;
   background-color:white;
   width: 100%;
   height: 40%;
   bottom: 0px;
}

.act-filtre-mar h4 {
   position: absolute;
   left: 20px;
   top:-9px;
   color:black;
   width: 100%;
}

.act-filtre-mar p {
   position: absolute;
   left: 20px;
   top:20px;
   color:black;
   width: 100%;
}

.fivestars {
   position: absolute;
   left: 20px;
   top: 60px;
   width: 100%;
   color: #0065FC;
}

#mar1 .fivestars i:nth-child(5), #mar3 .fivestars i:nth-child(5), #mar5 .fivestars i:nth-child(5) {
   color: #dad8d8;
}

#mar4 .fivestars i:nth-child(n+4) {
   color: #dad8d8;
}

#heb_mar6 span, #heb_pop3 span {
   font-weight: bolder;
}

/*Les plus populaires*/

#box_heb2 {
   height: 600px;
   width: 32%;
   background-color: #F2F2F2;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
}

#h2_star {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 95%;
   margin-top: 5px;
   margin-bottom: 5px;
}

#heb_pop3 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

#pop1, #pop2, #pop3 {
   position: relative;
   overflow: hidden;
   width : 90%;
   height: 150px;
   border-radius: 15px;
   margin-bottom: 20px;
   -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3); 
   box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
   border: 4px solid #ffffff;
}  

#pop1 img {
   width: 300px;
   height: 180px;
   object-position: -50px -15px;
}

#pop2 img {
   width: 300px;
   height: 160px;
   object-position: -50px -10px;
}

#pop3 img {
   width: 220px;
   height: 250px;
   object-position: -10px -60px;
}

.act-filtre-pop {
   position: absolute;
   background-color:white;
   width: 60%;
   height: 100%;
   bottom: 0px;
   left: 200px;
}

.act-filtre-pop h4 {
   position: absolute;
   left: 20px;
   top: -9px;
   color:black;
   width: 75%;
}

.act-filtre-pop p {
   position: absolute;
   left: 20px;
   top: 45px;
   color:black;
   width: 100%;
}

.act-filtre-pop .fivestars {
   position: absolute;
   left: 20px;
   top: 100px;
   color: #0065FC;
   width: 100%;
}

#pop2 .fivestars i:nth-child(5), #pop3 .fivestars i:nth-child(5) {
   color: #dad8d8;
}

/*Activités*/

#activites {
   height: 600px;
}

#box_act {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

#box_act1, #box_act50-40, #box_act3, #box_act40-50 {
   overflow: hidden;
   width : 23%;
   height: 500px;
}

#box_act50-40, #box_act40-50 {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   overflow: visible;
}

#box_act1, #box_act3, #box_act50-40, #box_act40-50 {
   border-radius: 15px;
}

#box_act1, #box_act3, #box_act50-1, #box_act50-2, #box_act40-1, #box_act40-2 {
   -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3); 
   box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
}

#box_act1 a, #box_act3 a, #box_act50-40 a, #box_act40-50 a {
   text-decoration: none;
}

#box_act1 img {
   object-position: -200px 0px;
}

#box_act3 img {
   object-position: -400px -180px;
}

#box_act40-1 img {
   object-position: -150px -100px;
}

#box_act40-2 img {
   object-position: -100px -50px;
}

#box_act50-1 img {
   object-position: -150px -400px;
}

#box_act50-2 img {
   object-position: -50px -50px;
}

#box_act1 {
   position: relative;
}

#box_act3 {
   position: relative;
}

#box_act50-1, #box_act50-2 {
   height: 250px;
   border-radius: 15px;
   position: relative;
   overflow: hidden;
}

#box_act40-1, #box_act40-2 {
   height: 200px;
   border-radius: 15px;
   position: relative;
   overflow: hidden;
}

.act-filtre-solo, .act-filtre-40, .act-filtre-50 {
   position: absolute;
   background-color:white;
   width: 100%;
   height: 50px;
   bottom: 0px;
}

.act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
   position: absolute;
   left: 20px;
   top:-9px;
   color:black;
   width: 100%;
}

h4 {
   text-decoration: none;
}

/*Footer*/

footer {
   background-color: #F2F2F2;
   padding-left: 5%;
}

#foot-main-box {
   display: flex;
   flex-direction: row;
}

#foot_box1, #foot_box2, #foot_box3 {
   display: flex;
   flex-direction: column;
   justify-content: left;
   min-width: 230px;
   margin-right: 18%;
}

footer p {
   font-weight: 800;
   margin-top: 35px;
   margin-bottom: 0px;
}

footer ul {
   list-style-type: none;
   padding-left: 0;
}

footer li {
   margin-bottom: 10px;
}


footer li a {
   text-decoration: none;
   color: black;
}

@media all and (max-width: 1550px) {

   #box_act50-1 img {
      object-position: -200px -400px;
   }

   #box_act40-2 img {
      object-position: -150px -50px;
   }

   #box_act50-2 img {
      object-position: -80px -50px;
   }
}

@media all and (max-width: 1440px) {
   .act-filtre-pop {
      left: 150px;
   }
}

@media all and (max-width: 1280px) {
   #box_act50-1 img {
      object-position: -240px -400px;
   }

   #box_act3 img {
      object-position: -500px -180px;
   }
}

@media all and (max-width: 1250px) {
   .act-filtre-pop {
      left: 140px;
   }

   h4, p {
      font-size: small;
   }
}

@media all and (max-width: 1210px) {
   .act-filtre-pop {
      left: 130px;
   }
}

@media all and (max-width: 1170px) {
   .act-filtre-pop {
      left: 121px;
   }
}

@media all and (max-width: 1110px) {
   #filtres ul li {
      margin-bottom: 10px;
   }
}

@media all and (max-width: 1030px) {
   .act-filtre-pop {
      left: 0px;
      width: 100%;
      height: 40%;
   }

   .act-filtre-pop h4 {
      top: -15px;
      width: 100%;
   }

   .act-filtre-pop p {
      top: 10px;
   }

   .act-filtre-pop .fivestars {
      top: 40px;
   }

   #pop1 img {
      object-position: 0px -50px;
   }

   #pop2 img {
      object-position: 0px -40px;
   }

   #pop3 img {
      width: 280px;
      height: 400px;
      object-position: 0px -180px;
   }

   #box_act50-1 img {
      object-position: -250px -400px;
   }

   #box_act50-2 img {
      object-position: -140px -50px;
   }

   #box_act40-2 img {
      object-position: -200px -50px;
   }
}

@media all and (max-width: 992px) {

   #box_act50-1 img {
      object-position: -15px -10px;
      width: 250px;
      height: 300px;
   }

   #box_act50-2 img {
      object-position: -30px 0px;
      width: 280px;
      height: 200px;
   }

   #box_act40-1 img {
      object-position: -10px -10px;
      width: 280px;
      height: 250px;
   }

   #mar1 img {
      width: 350px;
      height: 200px;
      object-position: -100px -35px;
   }

   #mar2 img {
      width: 250px;
      height: 150px;
      object-position: -30px 0px;
   }

   #mar3 img {
      width: 250px;
      height: 150px;
      object-position: -40px 0px;
   }

    #mar4 img {
      width: 300px;
      height: 220px;
      object-position: -90px -30px;
   }

    #mar5 img {
      width: 200px;
      height: 150px;
      object-position: 0px 0px;
   }

   #mar6 img {
      width: 200px;
      height: 250px;
      object-position: -30px -40px;
   }

    .act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
      left: 10px;
   }

    .act-filtre-mar h4, .act-filtre-mar p, .act-filtre-mar .fivestars, .act-filtre-pop h4, .act-filtre-pop p, .act-filtre-pop .fivestars {
      left: 5px;
   }

   #foot_box1, #foot_box2, #foot_box3 {
      margin-right: 15%;
   }
}

@media all and (max-width: 940px) {
   
   #box_act50-2 img {
      object-position: -25px 0px;
      width: 250px;
      height: 200px;
   }

   #box_act3 img {
      object-position: -100px 0px;
      width: 400px;
      height: 500px;
   }

   .act-filtre-pop h4 {
      top: -10px;
      font-size: 0.6em;
   }

   .act-filtre-mar h4 {
      font-size: 0.65em;
   }

   .act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
      font-size: 0.65em;
   }

   footer li a {
      font-size: 0.9em;
   }

   #foot_box1, #foot_box2, #foot_box3 {
      margin-right: 10%;
   }
}

@media all and (max-width: 768px) {

   header {
      flex-direction: column;
      align-items: center;
      height: 180px;
   }

   #logo {
      max-width: 9em;
      margin-top: 15px;
      margin-left: 45px;
   }

   nav {
      width: 100%;
   }

   nav a {
      border-bottom: 2px solid #F2F2F2;
      padding-bottom: 15px;
      padding-top: 10px;
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 1.5em;
   }

   nav a:hover {
      border-top: none;
      border-bottom: 2px solid #0065FC;
   }

   nav li {
      width: 100%;
      margin:0px;
   }

   main, header {
      padding-left: 0%;
      padding-right: 0%;
   }

   #menu {
      padding: 0px;
      width: 100%;
      height: 50px;
   }

   #recherche {
      margin-left: 15px;
      margin-right: 15px;
   }

   #recherche p {
      font-size: 1.4em;
   }

   h1 {
      font-size: 2.3em;
   }

   h2 {
      margin-left: 40px;
   }

   form {
      justify-content: center;
      height: 70px;
   }

   form input {
      width: 75%;
   }

   #form-submit {
      display: none;
   }

   form button {
      display: none;
   }   

   .fa-location-dot {
      height: 70px;
      padding-top: 30%;
      width: 70px;
      font-size: 1.5em;
   }

   button, input, optgroup, select, textarea {
      font-size: 1.5em;
   }
   form button {
      display: inline-block;
      color: white;
      background-color: #0065FC;
      border-radius: 15px;
      width: 150px;
      border-style: none;
      letter-spacing: 1px;
      font-weight: bolder;
      cursor: pointer;
      position: absolute;
      right: 30px;
      width: 70px;
      height: 70px;
   }

   form button:hover {
      background-color:#3e89fa;
   }

   #filtres {
      flex-direction: column;
      font-size: 1.4em;
   }

   #info i {
      padding: 0px;
   }

   #hebergements {
      display: flex;
      flex-direction: column-reverse;
   }

   #hebergements {
      height: auto;
   }

   #box_heb1 h2 {
      margin: 25px 0 25px 40px;
      font-size: 2.3em;
   }

   #box_heb2 {
      width: 100%;
      height: 650px;
   }

   #box_heb2 h2 {
      font-size: 1.8em;
   }

   #h2_star {
      margin-top: 25px;
      margin-bottom: 25px;
   }

   .act-filtre-pop {
      height: 100%;
      bottom: 0px;
      left: 230px;
      width: 70%;
   }
   
   .act-filtre-pop h4 {
      position: absolute;
      left: 20px;
      top: -9px;
      color:black;
      width: 75%;
      font-size: 1em;
   }
   
   .act-filtre-pop p {
      position: absolute;
      left: 20px;
      top: 45px;
      color:black;
      width: 100%;
      font-size: 1em;
   }
   
   .act-filtre-pop .fivestars {
      position: absolute;
      left: 20px;
      top: 100px;
      color: #0065FC;
      width: 100%;
   }

   #box_heb1 {
      background-color: #ffffff;
      width: 100%;
      height: 2800px;
   }

   #heb_mar6 {
      flex-direction: column;
      align-items: center;
   }

   #pop1 img {
      width: 250px;
      height: 180px;
      object-position: 0px -10px;
   }

   #pop2 img {
      width: 250px;
      height: 200px;
      object-position: 0px -40px;
   }

   #h2_star i {
      font-size: 1.6em;
   }

   #mar1, #mar2, #mar3, #mar4, #mar5, #mar6 {
      width: 90%;
      margin-bottom: 15px;
      border-radius: 30px;
      height: 400px;
   }

   .act-filtre-mar {
      height: 25%;
   }

   .act-filtre-mar h4 {
      font-size: 1em;
   }

   .act-filtre-mar h4, .act-filtre-mar p, .act-filtre-mar .fivestars, .act-filtre-pop h4, .act-filtre-pop p, .act-filtre-pop .fivestars {
      left: 15px;
   }

   .act-filtre-mar p {
      top: 20px;
      font-size: 1em;
   }
   
   .fivestars {
      font-size: 1.3em;
   }

   #mar1 img {
      width: 700px;
      height: 400px;
      object-position: 0px -50px;
   }

   #mar2 img {
      width: 700px;
      height: 400px;
      object-position: -5px -40px;
   }

   #mar3 img {
      width: 700px;
      height: 400px;
      object-position: 0px -40px;
   }

   #mar4 img {
      width: 700px;
      height: 500px;
      object-position: 0px -130px;
   }
   
   #mar5 img {
      width: 700px;
      height: 400px;
      object-position: -5px -80px;
   }

   #mar6 img {
      width: 700px;
      height: 500px;
      object-position: 0px -150px;
   }

   .afficher {
      font-size: 1.7em;
      width: 200px;
      margin-top: -30px;
   }

   h2 {
      font-size: 2.3em;
   }

   #activites {
      height: 2650px;
   }

   #box_act1, #box_act3, #box_act50-1, #box_act50-2, #box_act40-1, #box_act40-2 {
      margin-bottom: 30px;
      width: 90%;
      height: 400px;
      border-radius: 30px;
    }

   #box_act50-40, #box_act40-50 {
      width: 100%;
      height: 830px;
      align-items: center;
      border-radius: 30px;
   }

   #box_act {
      flex-direction: column;
      align-items: center;
   }

   .act-filtre-solo, .act-filtre-40, .act-filtre-50 {
      height: 30%;
   }

   .act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
      font-size: 1.8em;
      left: 20px;
      top: 5px;
   }

   #box_act1 img {
      object-position: 0px 0px;
   }

   #box_act50-1 img {
      object-position: 0px -250px;
      width: 707px;
      height: 900px;
   }
   
   #box_act40-1 img {
      object-position: 0px 0px;
      width: 707px;
      height: 400px;
   } 

   #box_act3 img {
      object-position: 0px 0px;
      width: 707px;
      height: 400px;
   }

   #box_act50-2 img {
      object-position: 0px 0px;
      width: 707px;
      height: 400px;
   }
   
   #box_act40-2 img {
      object-position: 0px 0px;
      width: 707px;
      height: 400px;
   } 

   #pop1, #pop2, #pop3 {
      border-radius: 30px;
   }

   footer {
      padding-left: 0px;
   }

   #foot-main-box {
      flex-direction: column;
   }

   footer p {
      font-size: 1.3em;
   }

   footer li a {
      font-size: 1.3em;
   }

   #foot_box1, #foot_box2, #foot_box3 {
      margin-left: 30px;
   }
}  

@media all and (max-width: 700px) {

   h1 {
      font-size: 1.5em;
   }

   #filtres {
      font-size: 1.3em;
   }

   #box_heb2 h2 {
      font-size: 1.4em;
   }

   #box_heb1 h2 {
      margin: 5px 0 5px 40px;
      font-size: 1.4em;
   }

   .afficher {
      font-size: 1.2em;
      margin-top: -50px;
   }

   h2 {
      font-size: 1.4em;
      margin-bottom: 30px;
   }

   .act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
      font-size: 1.2em;
      top: 20px;
   }

   footer p {
      font-size: 1.2em;
   }

   footer li a {
      font-size: 1.1em;
   }
}

@media all and (max-width: 600px) {

   #box_heb1 {
      height: 2400px;
   }

   #mar1 img {
      object-position: 0px -90px;
   }

   #mar2 img {
      object-position: -5px -90px;
   }

   #mar3 img {
      object-position: 0px -90px;
   }

   #mar4 img {
      object-position: 0px -180px;
   }

   #mar6 img {
      object-position: 0px -180px;
   }

   .afficher {
      margin-top: 5px;
      margin-left: 0px;
   }

   #mar1, #mar2, #mar3, #mar4, #mar5, #mar6 {
      height: 350px;
   }

   #box_act1, #box_act3, #box_act50-1, #box_act50-2, #box_act40-1, #box_act40-2 {
      height: 350px;
   }

   .act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
      top: 15px;
   }

   #box_act50-40, #box_act40-50 {
      height: 730px;
   }

   #activites {
      height: 2350px;
   }

   #recherche p {
      font-size: 1.1em;
   }

   #box_act3 img {
      object-position: -55px -50px;
   }

   #box_act1 img {
      object-position: 0px -80px;
   }

   #box_act50-2 img {
      object-position: -80px -50px;
   }

   #box_act50-1 img {
      object-position: -60px -300px;
   }
}

@media all and (max-width: 550px) {

   #mar4 img {
      object-position: -150px -180px;
   }

   #mar6 img {
      object-position: -150px -180px;
   }

   .act-filtre-pop h4 {
      width: 65%;
   }
}

@media all and (max-width: 500px) {

   h1 {
      font-size: 1.4em;
   }

   #recherche p {
      font-size: 1em;
   }

   #filtres {
      font-size: 1em;
   }

   button, input, optgroup, select, textarea {
      font-size: 1em;
   }

   #info i {
      font-size: 1em;
   }

   .act-filtre-pop h4 {
      width: 60%;
   }
}

@media all and (max-width: 470px) {

   #mar1 img {
      object-position: -250px -90px;
   }

   #mar2 img {
      object-position: -120px -90px;
   }

   #mar3 img {
      object-position: -50px -50px;
      width: 600px;
      height: 300px;
   }

   #box_act50-1 img {
      object-position: -160px -300px;
   }

   #box_act40-1 img {
      object-position: -50px 0px;
      width: 607px;
      height: 300px;
   }

   #box_act40-2 img {
      object-position: 0px 0px;
      width: 507px;
      height: 300px;
   }

   #box_act50-2 img {
      object-position: -50px 0px;
      width: 507px;
      height: 250px;
   }

   form button {
      right: 25px;
   }

   #absolute1 .fa-money-bill-wave, #absolute2 .fa-child-reaching, #absolute3 .fa-heart, #absolute4 .fa-dog {
      left: -3px;
   }

   h1 {
      font-size: 1em;
   }

   #recherche p {
      font-size: 0.9em;
   }

   .act-filtre-pop {
      left: 150px;
   }
}

@media all and (max-width: 450px) {

   form input {
      width: 70%;
   }
}

@media all and (max-width: 400px) {

   h1 {
      font-size: 0.8em;
   }

   #mar1, #mar2, #mar3, #mar4, #mar5, #mar6 {
      height: 300px;
   }

   .act-filtre-mar {
      height: 30%;
   }

   #box_heb1 {
      height: 2100px;
   }

   #mar1 img {
      object-position: -250px -150px;
   }

   #mar2 img {
      object-position: -120px -150px;
   }

   #mar4 img {
      object-position: -220px -250px;
   }

   #mar5 img {
      width: 500px;
      height: 300px;
      object-position: -25px -80px;
   }

   #mar6 img {
      width: 600px;
      height: 500px;
      object-position: -150px -230px;
   }

   #box_act1, #box_act3, #box_act50-1, #box_act50-2, #box_act40-1, #box_act40-2 {
      height: 300px;
   }

   #box_act3 img {
      object-position: -120px -90px;
   }

   #box_act50-2 img {
      object-position: -20px 0px;
      width: 407px;
      height: 250px;
   }

   #activites {
      height: 2000px;
   }

   #box_act50-40, #box_act40-50 {
      height: 630px;
   }

   .act-filtre-pop p {
      top: 50px;
      font-size: 0.8em;
   }

   form input {
      width: 60%;
   }

   form button {
      right: 40px;
   }

   button, input, optgroup, select, textarea {
      font-size: 0.8em;
   }

   .fa-location-dot {
      font-size: 1.2em;
   }
}   

@media all and (max-width: 370px) {

   form button {
      right: 20px;
   }

   button, input, optgroup, select, textarea {
      font-size: 0.6em;
   }

   nav a {
      font-size: 1em;
   }

   #recherche p {
      font-size: 0.8em;
   }

   #filtres ul {
      padding: 0px;
   }

   #filtres ul li {
      margin-right: 5px;
   }

   #info i {
      padding: 1px;
      margin-right: 5px;
      vertical-align: middle;
   }

   #box_heb2 h2 {
      font-size: 1em;
   }

   #h2_star i {
      font-size: 1em;
   }

   #h2_star {
      align-items: baseline;
   }

   .act-filtre-pop {
      left: 120px;
   }

   .act-filtre-pop p {
      top: 60px;
      font-size: 0.8em;
   }

   .act-filtre-pop h4 {
      width: 68%;
   }

   #pop1 img {
      object-position: -20px -10px;
   }

   #pop2 img {
      object-position: -30px -40px;
   }

   #pop3 img {
      object-position: -40px -180px;
   }

   #box_heb1 h2 {
      font-size: 1em;
   }

   #mar3 img {
      object-position: -180px -80px;
   }

   #mar4 img {
      width: 500px;
      height: 300px;
      object-position: -150px -50px;
   }

   #mar6 img {
      width: 400px;
      height: 300px;
      object-position: -90px -50px;
   }

   h2 {
      font-size: 1.2em;
   }

   .act-filtre-solo h4, .act-filtre-40 h4, .act-filtre-50 h4 {
      top: 10px;
      font-size: 1em;
   }

   #box_act50-1 img {
      object-position: -110px -300px;
      width: 507px;
      height: 800px;
   }

   #box_act40-2 img {
      object-position: -40px 0px;
      width: 407px;
      height: 300px;
   }

   #box_act50-2 img {
      object-position: -20px 0px;
      width: 350px;
      height: 250px;
   }
}