.main
{
    font-family: 'Raleway', sans-serif;
    margin:0px;
    width:100%;
}
html, body
{
    overflow-x: hidden;
}
/*header section*/
.logo_reservia
{
    padding-left: 45px;
    width: 120px;
    height:50px;
}
.para_deco
{
    margin:20px;
}
.font_para
{
    font-size:21px;
    
}
.filter_name
{
    padding-left: 10px;
    padding-right: 10px;
}
.deco
{
    display: flex;
    flex-direction: row;
    list-style-type : none;
    line-height: 4.5rem;
   padding-left: 25px;
   padding-right: 5px;
   color: black;
}

.inscrire
{
    display:flex;
    align-self: center;
    padding-right: 50px;
    font-size: 20px;
    align-items: center;
    color:  #0065fc;
    
}
nav
{
    padding-top: 0px;
}
li 
{
    display: flex;
    align-self: center;
}


#logo_header
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size: 20px;
    color: #0065fc;
    padding-top: 20px;
    height: 40px;
    padding-right: 20px;
}

a, .inscrire
{
    text-decoration: none;
}

.premier_section
{
    margin: 50px 0px 30px 20px;
}

#align_header
{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    width: 86%;
}
section
{
    margin-left: 20px;
    margin-right: 20px;
}
nav a:hover
{
    border-top: 3px solid #0065FC;
    color: #0065fc;
}
h1
{
    font-size: 28px;
    font-weight: bolder;
    margin-left: 20px;
}
/*search section*/
button
{
    cursor:pointer;
    border-radius: 0 1rem 1rem 0;
    min-height: 45px;
    font-size: 5px;
    background-color:#0065FC;
    color: #F2F2F2;
    width: 150px;
    border: none;
}

#icon_map
{
    padding: 13px 19px;  
    font-size: 22px;
    background-color: #F2F2F2;
    border-radius: 1rem 0 0 1rem;
    text-align: center;
}
.icon_search
{
    visibility: hidden;
    color:white;
    background-color: #0065FC;
}
.search
{
    display: flex;
    flex-flow: column wrap;
    min-width: 100px;
    min-height: 45px;
    font-size: 16px;    
    border-color: lightgray transparent;
    text-align: justify;
    font-weight: bolder;
    color:black;
}
.form_recherche
{
    display: flex;
    flex-flow: row nowrap;
    margin:30px 0px 30px 20px;
    
}
.research
{
    padding-top: 10px;
    font-size: 22px;
}

div i
{
    border-radius: 2rem 2rem 2rem 2rem; 
    background-color: #DEEBFF;
    font-size: 28px;
    color: #0065FC;
    padding: 14px 17px;
}
/*Filtre Section*/
.sur_vol:hover
{
    cursor: pointer;
    font-size: 17px;
    background-color: #DEEBFF;
    text-transform: uppercase;
    font-weight: bolder;
    color: #0065FC;
    border: 3px #0065FC solid;
}
.filtre_content
{
    display: flex;
    margin:30px 0px 30px 20px;
}
.align_filtre
{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bolder;
}
#economique_filtre, #famillial_filtre, #romantique_filtre, #animal_filtre
{
    display: flex;
    align-items: center;
    border: 2px lightgray solid;
    border-left-width:0rem;
    border-radius: 2rem 2rem 2rem 2rem;
    font-size: 18px;
    font-weight: bolder;
    padding-right: 5px;
    min-width: 212px;
    margin-left: 35px;
}
.filtres
{
    display: flex;
    margin-left: 20px;
}
.info_section
{
    display:flex;
    margin-left: 20px;
}
/*Info Section*/
#info_icon
{
    background-color:white;
    border: 1px solid gray;
    font-size: 15px;
}
.info_texte
{
    padding-left: 10px;
    
}
.section_title, .heber_title
{
    font-size: 26px;
    
    margin-left: 55px;
    color: black;
}
.aside_title
{
    font-size: 26px;
    font-weight: bolder;
    color: black;
}
.footer_title
{
    font-size: 22px;
    
}
.activity_name
{
    font-size: 18px;
    color: black;
    font-weight: bolder;
    padding: 15px;
}
.hotel_name
{
    margin-top: 20px;
    font-size: 22px;
    font-weight: bolder;
    color: black;
    padding-left: 10px;
}
.hotel_name_por
{
    margin-top: 4px;
    font-size: 18px;
    font-weight: bolder;
    color:black;
    
}
.hotel_name:hover
{
    text-decoration: underline;
}
.hebergement
{
    border-radius:2rem;
    min-height: 350px;
    width:65%;
    background-color: #F2F2F2;
    padding-top: 25px;
}
.les_hebergements
{
    margin:20px;
    height: 250px;
    border-radius:2rem;
    width:100%;
    background-color: white;
    box-shadow: 2px 3px gainsboro;
}
.les_hebergements:hover
{
    box-shadow: 3px 3px 8px rgb(85, 84, 84);
}
/*Pour Deactive l'étoile Icon*/

.disable_icon
{
    color: rgb(175, 173, 173);
}
.align_star
{
    display: flex;
    color: #0065FC;
    font-size: 15px;
    margin-top: 4px;
    padding-left: 15px;
}
.align_star_populaire
{
    display: flex;
    color: #0065FC;
    font-size: 18px;
    padding-left: 10px;
}
.hotel_name_por, .heber_align_tab
{
    padding-left: 15px;
    
}
.heber_align
{
    font-weight: normal;
    font-size: 16px;
    color: black;
    padding-left: 10px;
}

.image_heberge
{
    max-width: 100%;
    max-height: 140px;
    width: 96%;
    padding: 5px;
    border-radius: 2rem 2rem 0 0;
    object-fit: cover;
}

.hebergement_content
{
    display: flex;
    margin-left: 25px;
    margin-right: 25px;
   
} 
.hebergement_content_1
{
    margin-bottom: 20px;
}
.affiche_plus
{
    font-size: 22px;
    font-weight: bolder;
    color: black;
    margin-top:70px;
    margin-left:50px;
}
.fig_cap
{
    flex-flow: column;
    font-size: 16px;
    color:black;
    align-items: flex-start;
    max-width: 100%;
    border-radius: 2rem 2rem 0 0;
    padding-right: 10px;
}   
.hebergement_et_plus
{
    display: flex;
    justify-content: space-around;
}
aside
{
    border-radius:2rem;
    min-height: 600px;
    width:30%;
    background-color: #F2F2F2;
    max-width: 600px; 
} 
.aside_title, .hebergement_title
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.courbe
{
    padding-right: 45px;
}
.les_plus_populaire
{
    display: flex;
    flex-direction: column; 
    margin: 0px;
}
.les_populaires
{
    display: flex;
    margin:0px 30px 30px 25px;
    border-radius:2rem;
    box-shadow: 2px 3px gainsboro;
    background-color: white;
    height: 200px;
}
.les_populaires:hover
{
    box-shadow: 2px 3px 8px rgb(85, 84, 84);
}
.image_populaire
{
    width: 70%;
    border-radius: 10% 0% 0% 10%;
}
.content_icon, .image_content_icon
{
    display: flex;
    flex-direction: column;
}
.image_les_populaires
{
    border-radius:2rem 0 0 2rem;
    width: 170px;
    max-height: 190px;
    padding: 8px;
    object-fit: cover;
}
.activités
{
    padding-top: 40px;
}
.activité_content
{
    display: flex;
    align-items:center;
    justify-content: space-evenly;
}
.activité_1, .activité_4
{
    
    border: 1px solid gainsboro;
    border-radius: 2rem;
    width: 400px;
    height: 600px;
    margin-left: 0px;
    box-shadow: 2px 3px gainsboro;
}
.image_activ_1
{
    max-width: 400px;
    max-height: 600px;
    height: 550px;
    width: 400px;
    border-radius: 2rem 2rem 0 0;
    object-fit: cover;
}
.image_activ_2
{
    max-width: 400px;
    max-height:250px;
    height: 230px;
    width: 400px;
    border-radius: 2rem 2rem 0 0;
    object-fit: cover;
}
.colonne_1
{
  display: flex;
  flex-direction: column;
}
.activité_2, .activité_5, .activité_6
{
    
    border: 1px solid #ccc;
    border-radius: 2rem;
    width: 400px;
    height: 280px;
    margin-left: -10px;
    box-shadow: 2px 3px gainsboro;
    margin-right: 5px;
}
.activité_3
{
    
    border: 1px solid #ccc;
    border-radius: 2rem;
    width: 400px;
    height: 280px;
    margin-left: -10px;
    box-shadow: 2px 3px gainsboro;
}
.activ_survol:hover
{
    box-shadow: 2px 3px 8px rgb(68, 67, 67);  
}
.activity_name:hover
{
    text-decoration: underline;
}
.footer_section
{
    display: flex;
    margin: 0px;
    background-color: #F2F2F2;
    width: 98%;
    text-align: justify;
    padding: 24px 41px 0px 20px;
}
.footer_column
{
    width: 100%;
    padding-left: 30px;
    padding-bottom: 20px;
}
.footer_font
{
    font-size: 18px;
    font-weight: lighter;
    color: black;
}
.footer_font:hover
{
    text-decoration: underline;
    color: #0065FC;
}
/* Responsive pour Mobile*/
@media screen and (min-width : 300px) and (max-width : 700px)
{
    html, body
    {
        overflow-x: hidden;
    }
    .main
    {
        position: relative;
        margin: auto;
        font-family: 'Raleway', sans-serif;
        font-weight: normal;
        
    }
    .logo_reservia
    {
        width: 100px;
        height: 60px;
       padding-left: 25px;
    }
    section
    {
        margin-left: 0px;
        margin-right:0px;
    }
    li
    {
        padding: 0px;
        margin-left: 0px;
    }
    #logo_header
    {
        flex-flow: row wrap;
        justify-content: space-between;
        margin: 0;
        height:auto;
        padding-right: 0px;
        width: 90%;
        font-size: 18px;
    }
    .para_deco
    {
        margin-left:10px;
    }
    .premier_section
    {
        width:95%;
        margin-top: 20px;
        margin-left: 0px;
        margin-right: 0px;
    }
    #align_header
    {
        order:3;
        position: relative;
        width:100%;
        justify-content: center;
    }
    .deco
    {
        line-height: normal;
        padding-left:25px;
    }
  
    .inscrire
    {
        padding-right: 5px; 
       align-self: flex-end;
        font-size: 20px;
        
    }
    
    #heber, #activ
    {
        border-top: none;
        border-bottom: 4px solid #f2f2f2;
        color:black;
       align-items: flex-start;
       padding-left: 45px;
        padding-right: 50px;
        padding-bottom: 10px;
    }
    #heber:hover
    {
        border-bottom: 6px solid #0065FC;
        color: #0065FC;
    }
    #activ:hover
    {
        border-bottom: 6px solid #0065FC;
        color: #0065FC;
    }
    
    h1
    {
        font-size: 20px;
        font-weight: bolder;
        text-align: left;
        margin-left: 10px;
    }
    .font_para
    {
        font-size:16px;
        font-weight: lighter;
    }
    
    
    button
    {
        display: flex;
        flex-direction: column;
        border-radius: 0rem 1rem 1rem 0rem;
        max-height: 80px;
        height: 55px;
        width: 55px;
        align-content: flex-start;
        
    }
    #icon_cherche
    {
       margin-top: -25px;
    }
   
    .icon_search
    {
        visibility: visible;
        color:white;
        background-color: #0065FC;
        font-size: 25px;
    }
    .info_section
    {
        margin-left: 10px;
    }
    .info_texte
    {
        padding-left: 10px;
    }
    .research
    {
        visibility: hidden;
    }
    .filtres, .filtre_content
    {
        display: flex;
        flex-flow: row wrap;
        margin:0px;
       margin-bottom: 15px;
    }
    div i
    {
        font-size: 18px;
    }
    .align_filtre
    {
        padding: 18px 15px 10px 10px;
        font-size: 18px;
    }
    .sur_vol
    {
        margin-top: 25px;
    }
    .form_recherche
    {
        margin: 30px 0px 30px 10px;
        width:86%;
    }
    #economique_filtre, #famillial_filtre, #romantique_filtre, #animal_filtre 
    {
        padding-right: 6px;
        min-width: 90px;
        font-size: 15px;
    }  
    #info_icon
    {
        padding: 6px 12px;
        
    }  
    .info_icon
    {
        align-self: center;
    }
    aside
    {
        border-radius:0;
        width:100%;
        height:660px;
        background-color: #F2F2F2;
       
    }
    
    .hebergement
    {
       order: 1; 
    }
    .hebergement_et_plus
    {
        display: flex;
        flex-flow: column wrap;
    }
    .les_plus_populaire
    {
        width:89%;
    }
    .les_populaires
    {
        margin: 10px 15px;
        font-size: 12px;
        height: 160px;
        width: 100%;
    }
    .image_les_populaires
    {
        max-width: 125px;
        height:auto;
        
    }
    .hotel_name
    {
        font-size: 16px;
        padding-left: 5px;
    }
    .hotel_name_por
    {
        margin: -5px 0px 0px 18px;
        font-size: 18px;
    }
    .heber_align
    {
        margin-top: 0px;
        margin-left: 0px;
        font-size: 15px;
        text-align: justify;
        padding-left: 5px;
    }
    
    .heber_align_mob
    {
        margin-top: 5px;
        margin-left: 18px;
    }
    .heber_title, .section_title, .affiche_plus
    {
        font-size: 20px;
        font-weight: bolder;
        margin-top: 20px;
        margin-left: 22px;
    }
    .hebergement
    {
        margin: 0;
        border-radius:2rem;
        min-height: 500px;
        width:95%;
        background-color:white;
        
    }
    .les_hebergements
    {
        margin-bottom: 0px;
        height: 195px;
        width: 100%;
        
    }
    .hebergement_content
    {
        display: flex;
        flex-flow: column wrap;
        margin-left: 0px;
        margin-right: 0px;
        width: 90%;
        
    } 
    .image_heberge
    {
        max-width: 100%;
        height: 112px;
        width: 97%;
        
    } 
   
    .sur_vol:hover
    {
        cursor : pointer;
        border-radius: 2rem 2rem 2rem 2rem;
        background-color: #DEEBFF;
        font-size: 16px;
        min-width: 155px;   
    }
     .align_star
    {
        margin-top: -10px;
        text-align: justify;
        font-size: 14px;
        margin-left: 16px;
    }
   .align_star_populaire
   {
       margin-left: 0px;
       margin-top: 0px;
       font-size: 15px;
       padding-left: 5px;
   }
    .activité_content
    {
        display: flex;
        flex-flow: row wrap;
        margin:0px;
       margin-bottom: 15px;
       font-size: 16px;
       width:95%;
    }
    .image_activ_2, .image_activ_1
    {
        max-width: 100%;
        max-height:250px;
        height: 150px;
        
    }
    .activité_1, .activité_2, .activité_3, .activité_4, .activité_5, .activité_6
    {
        max-width: 100%;
        max-height: 200px;
        border: 1px solid gainsboro;
        border-radius: 2rem;
        margin: 12px 12px;
        margin-left: 15px;
        box-shadow: 2px 3px gainsboro;
        width: 92%;
    }
    .footer_section
    {
        
        display: flex;
        flex-direction: column;
        background-color: #F2F2F2;
        padding-left: 0px;
        width:90%;
    }
    .footer_column
    {
        width:75%;        
        text-align: justify;
    }
    .footer_font
    {
        font-size: 15px;
        font-weight: lighter;
    }
}


/* Responsive pour Tablettes*/
@media screen and (min-width : 700px) and (max-width : 1025px)
{
    html, body
    {
        overflow-x: hidden;
    }
    body 
    {
        position: relative;
    }
    .logo_reservia
    {
        width: 100px;
        height:60px;
    }
    .inscrire
    {
        font-size: 20px;
        padding-right: 4rem;
    }
    .deco
    {
        font-size: 18px;
        padding-left: 15px;
        padding-right: 55px;  
    }
    h1
    {
        font-size: 25px;
        font-weight: bolder;
        margin-left: 0px;
    }
    .para_deco
    {
        margin: 20px 0px;
    }
    .form_recherche
    {
        margin: 30px 0px;
    }
    button
    {
        width: 110px;
    }
    .search
    {
        font-size: 14px;    
    }
    .research
    {
        font-size: 20px;
    }
    form
    {
        margin-bottom: 20px;
    }
    .filtres, .filtre_content
    {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin:10px 0px 15px 0px;
    }
    #economique_filtre, #famillial_filtre, #romantique_filtre, #animal_filtre, .info_section
    {
        margin-left: 0px;
    }
    .premier_section
    {
        margin: 30px 25px 0px 25px;
    }
    .sur_vol
    {
        margin-right: 5px;
    }
    .sur_vol, aside, .hebergement
    {
        margin-top: 30px;

    }
    .les_populaires
    {
        
        height: 190px;
        width: 90%;
        padding:8px 8px;
    }
    aside
    {
       max-width: 100%;
       width:100%;
    }
    .image_les_populaires
    {
       width: 200px;
    }
    .courbe
    {
        padding-right: 75px;
    }
    .section_title, .heber_title
    {
        margin-left: 30px;
    }
    .les_hebergements
    {
        margin:8px 5px;
    }
   
    .hebergement_content
    {
        margin-left: 5px;
        margin-right: 6px;
        padding: 10px;
    }
    .align_star_populaire
    {
        padding-left: 30px;
    }
    .hotel_name
    {
        font-size: 22px;
        margin-left: 20px;
    }
    .heber_align
    {
        font-size: 18px;
        font-weight: lighter;
        margin-left: 20px;
    }
    .image_heberge
    {
        height:140px;
        width:100%;
        padding: 0px;
    }
    .align_star
    {
        font-size: 16px;
        margin: 10px 5px;
    }
   
    .heber_align_tab
    {
        margin: 0px 0px 0px 5px;
        color: black;
        font-size:14px;
    }
    .hotel_name_por
    {
        font-size: 17px;
        margin: 5px 0px 10px 5px;
    }
    .hebergement
    {
       order: 1; 
       width: 100%; 
       max-height: 800px;
       height: 750px;
    }
    .hebergement_et_plus
    {
        display: flex;
        flex-flow: column wrap;
        padding: 10px 25px 30px 25px;
    }
    .affiche_plus
    {
        margin-left: 22px;
    }
    .activités
    {
        padding-top: 10px;
    }
    
    .activité_content
    {
        flex-flow: row wrap;
        margin-left: 0px;
       /* justify-content:center;*/
    
    }
    #column
    {
        order:-1;
    }
    .image_activ_2, .image_activ_1
    {
        max-width: 280px;
        max-height:200px;
        height: 160px;
        padding: 5px;
    }
    .colonne_1
    {
       /* flex-flow: row wrap;
        justify-content: space-around;*/
        margin: 16px;
        max-width: 100%;
    }
    
    .activité_1, .activité_4, .activité_3, .activité_2, .activité_5, .activité_6
    {
        
       /* max-width: 300px;
        max-height: 300px;*/
        width: auto;
        height: 230px;
        margin: 20px;
        
    }
    .activity_name
    {
        padding:10px 20px;
    }
    .footer_column
    {
        padding-left: 20px;
    }

    .footer_section
    {
        margin-left: 0px;
        display: flex;
        background-color: #F2F2F2;
        padding: 20px 0px 0px 30px;
    }
    .footer_font
    {
        font-size: 15px;
        font-weight: lighter;
    }
    
}

/* Responsive pour Ordinateur Portable(LAPTOP)*/
@media all and (min-width : 1025px) and (max-width : 1600px)
{
    html, body
    {
        overflow-x: hidden;
    }
    body
    {
        position: relative;
        margin: auto;
    }    
   .logo_reservia
    {
        width: 120px;
        height:60px;
        padding-left:15px;
    }
    section
    {
        margin-left: 0px;
        margin-right:20px;
    }
    
    img
    {
        padding: 0px;
    }
    aside
    {
        width:min-content;
    }
    .image_les_populaires
    {
        max-width: 170px;
        min-width: 170px;
        
    }
    .les_populaires
    {
       
        width: auto;
    }
    /*.hotel_name, .heber_align
    {
        margin-left: 10px;
        
    }*/
    .hotel_name_por
    {
        font-size: 16px;
    }
    .hotel_name
    {
        font-size: 18px;
    }
    .align_star_populaire
    {
       font-size: 20px;
       padding-right: 25px;
    }
    .activité_content
    {
        padding-left: 20px;
        width:98%;
    }
    .activité_1, .activité_4
    {
       
        width: 300px;
        height: auto;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .image_activ_1
    {
        max-width: 100%;
        height: 480px;
        padding: 0px;
    }
    .image_activ_2
    {
        max-width: 100%;
        height: 200px;
        padding: 0px;
    }
    .activité_2, .activité_5, .activité_6
    {
       
        width: 300px;
        height: 250px;
        margin-right: 10px;
        margin-left: 10px;
    }
    .activité_3
    {
        margin-right: 10px;
        margin-left: 10px;
        width: 300px;
        height: auto;
    }
    .footer_section
    {
        width: 98%;
    }

}