/* CSS réalisé par Julie Narbonne */

header 
{
  background: white;
  position: static;
  height: 90px;
}

header #banniere {
  display: block;
  width: 230px;
  height: 90px; 
  max-width:  calc(100% - 90px);
}
header #banniere img {
  max-width: 100%;
}

header #banniere object
{

  width: 370px;
  text-align: center;
  display: block;
  margin: auto; /* Pour centre l'image */
  margin-top: 5px;
  margin-bottom: 5px;
}

header #banniere{
  display: none
}

header nav
{
  width: 100%;
  height: 90px;
  line-height: 90px;
  text-align: center;
  margin: 0;
  border-top: 1px solid #dadbdd;
  border-bottom: 1px solid #dadbdd;
  text-transform: uppercase;
  background-color: white;
}

#titre_site_baniere{
  display: block;
  /*height: 40px;*/
  padding: 10px 10px;
}


#titre_site
{
  height: 60px;
  margin: 10px 10px 10px 50px;
  position: absolute;
  left: 0;
}

#titre_site.d2020
{
  height: 60px;
  margin: 15px 10px 15px 30px;
}

.item_nav
{
  list-style-type: none;
  display: inline-block;
  text-align: center;
  color: black;
  position: relative;
}

.item_nav:hover
{
  /*background-color: #f0efef;*/
  color: #c4b49d;
}


.item_nav a
{
    color: #7a726f;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  vertical-align: middle;
}

.item_nav a:hover
{
    color: #c4b49d;
}

header nav a
{ 
  height: 90px;
    line-height: 90px;
    width: 120px;
}

header nav ul
{
  margin : 0px 0 0px 0;
  padding: 0;
}

header nav li.item_nav>a
{
  padding-left: 20px;
  padding-right: 20px;

}

#sous_menu_destinations
{
  overflow: hidden;
  height: 0px;
  -webkit-transition-property: height;
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    top: 89px;
    background-color: white;
    margin: auto;
    position: absolute;
    text-align: left;
    width: 110%;
    z-index: 205;
    left: 0;
}

#sous_menu_destinations #liste_pays
{
  margin-bottom: 10px;
  margin-top: 5px;
}

#sous_menu_destinations #liste_pays li a
{
  margin: 0;
  display: inline-block;
  vertical-align:middle;
  font-size: 13px;
  color: #7a726f;
    padding-left: 15px;
    margin-right: 30px;
    width: 100%;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
}

#sous_menu_destinations #liste_pays li a:hover
{
  color: #c4b49d;
}

#sous_menu_destinations  #liste_pays li
{
  height: 35px;
    line-height: 35px;
    padding: 0;
}

#sous_menu_destinations  #liste_pays li:first-child a
{
    /*border-top: 0px;*/
}

nav li:hover  #sous_menu_destinations, #sous_menu_destinations:hover {
  height: auto;
}

#sous_menu_destinations ul
{
  list-style-type: none;
    box-shadow: 5px black;
}


#social_links{

  height:90px;
  line-height:90px;
  margin-right:10px;
}

#social_links .social_icon{
  vertical-align:middle;
  height:18px;
  margin: 0 10px;
}

#social_links a{
  display: inline-block;
  height:90px;
  line-height:90px;
  width:auto;
  text-align: center;
}

#social_links a + a{
margin-left: 2px;
}

#social_links a:hover{
}

.social_links_header {
  position: absolute;
  right: 0;
}

.social_links_footer {
  display:none;
  padding-top: 15px;
  margin: auto;
  text-align: center;
}

#main_search_block{
  position: absolute;
  right: 20px;
  top: 25px;
  margin-right: 0px;
  display: none;

}

#main_search_block .search_textfield{
  vertical-align: middle;
  border-radius-left: 1px;
}

#main_search_block .search_button{
    width: 17px;
    height: 17px;
    padding: 5px;
    background-color: #7a726f;
    margin-left: 0px;
    vertical-align: middle;
    border-radius-right: 1px;
}

#menu-button {
  display:none;
  padding: 10px;
  background: #dadbdd;
  color: white;
}


.filter-brown {
  /* Généré avec https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(50%) sepia(14%) saturate(0%) hue-rotate(287deg) brightness(97%) contrast(88%);
}

.filter-brown:hover {
  /* Généré avec https://codepen.io/sosuke/pen/Pjoqqp */
  /* #c4b49d */;
  filter: invert(86%) sepia(11%) saturate(510%) hue-rotate(356deg) brightness(85%) contrast(86%);
}

.filter-white {
  /* Généré avec https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(99%) sepia(8%) saturate(434%) hue-rotate(177deg) brightness(91%) contrast(94%);
}

.filter-bluegray {
  /* Généré avec https://codepen.io/sosuke/pen/Pjoqqp */
  /* #5c5f66 */
  filter: invert(36%) sepia(5%) saturate(605%) hue-rotate(184deg) brightness(96%) contrast(86%);
}


/* Pour sur le téléphone */
@media only screen and (max-width: 1150px) {
  
  header {
    height: 70px;
  }


  .social_links_header {
    display:none;
  }

  .social_links_footer {
    display:block;
  }

  header #banniere{
    display: block;
    width: 150px;
    height: 70px;
  }

  header nav #baniere_menu {
    display: none;
  }

  header nav{
    position: absolute;
    top:0;
    bottom:0;
    max-width: 80%;
    width:200px;
    height: auto;
    z-index: 10;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    right:-250px;
    width: 0;
    line-height: 1em;

    transition-property: width;
      transition-duration: 0.3s;
  }

  header nav li, header nav a {
    display: block;
    width: 100%;
  }

  .item_nav
  {
    background-color: white;
  }

  header nav li.item_nav>a {
    border-top: solid 1px #b9b9b9;
  }

  nav li  #sous_menu_destinations, #sous_menu_destinations {
    height: auto;
    position: static;
    text-align: center;
    width: 100%;
  }

  .item_nav a
  {
    font-size: 15px;
    color: black;
  }

  #sous_menu_destinations li a,
  #sous_menu_destinations #liste_pays li a,
  header nav li.item_nav > a {
    padding: 0;
  }

  #sous_menu_destinations #liste_pays li a
  {
    font-size: 13px;
    color: #7a726f;
  }

  .site-cache {
    display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6); 
    }

  body.with-sidebar {
    overflow-y: hidden;
  }

  .with-sidebar .site-cache {
      display: block;
    }

  .with-sidebar header nav {
    right: 0px;
    width: 240px ;
  }

  #menu-button {
    display:block;
    position: absolute;
    top: 2px;
    right: 10px;
    background-color: white;
    padding: 7px;
    cursor: pointer;
    text-align: center;
  }

  #menu-button div
  {
    font-size: 0.9em;
    margin-bottom: 3px;
    color: #94A2A6;
  }

    #icone_menu_header
  {
    height:20px;
    line-height:20px;
  }


  #sous_menu_destinations #liste_pays
  {
    margin: 0;
  }

  header nav li.item_nav > a
  {
    border: 0;
    height: 45px;
    line-height: 45px;
  }

  .icone_fleche
  {
    display: none;
  }
}

