/******************************/
/*  PB - HOME - DESCRIPTION
/******************************/

#pb_home_description{
  padding-bottom: 3em;
}

#pb_home_description .home_description_titre{
  text-align: center;
  padding: 2em 2em;
}

#pb_home_description .home_description_titre img{
  width: 100%;
  max-width: 500px;
  margin-top: 15px;
}

#pb_home_description .home_description_titre h1{
  font-size: 250%;
  font-weight: 600;
  text-transform: uppercase;
}

#pb_home_description .home_description_titre h2{
  font-size: 150%;
  font-weight: 400;
  margin-top: -25px;
  margin-left: 5em;
}

#pb_home_description .home_description_photo{
  background-position: center;
  text-align: center;
}

#pb_home_description .home_description1 .home_description_texte{
  padding: 0 0 0 2em;
  text-align: justify;
}

#pb_home_description .home_description2 .home_description_texte{
  padding: 0 2em 0 0;
  text-align: justify;
}

#pb_home_description .home_description_photo img{
  width: 100%;
  max-width: 500px;
}

#pb_home_description .home_description_soustitre h2{
  text-align: center;
  margin: 2em 0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 150%;
}

@media(max-width: 992px){

  #pb_home_description .home_description1 .home_description_photo{
    padding-bottom: 2em;
  }

  #pb_home_description .home_description2 .home_description_photo{
    padding-top: 1em;
  }

  #pb_home_description .home_description1 .home_description_texte,
  #pb_home_description .home_description2 .home_description_texte{
    padding: 0 1em;
  }

}




/*******************************/
/*  PB - HOME - EVENEMENTS
/*******************************/

@media (min-width: 768px) {

    /* show 3 items */
    #evenementsCarousel .carousel-inner .active,
    #evenementsCarousel .carousel-inner .active + .carousel-item,
    #evenementsCarousel .carousel-inner .active + .carousel-item + .carousel-item,
    #evenementsCarousel .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    #evenementsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #evenementsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    #evenementsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    #evenementsCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    #evenementsCarousel .carousel-inner .carousel-item-next,
    #evenementsCarousel .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    #evenementsCarousel .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    #evenementsCarousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    #evenementsCarousel .carousel-item-next.carousel-item-left + .carousel-item,
    #evenementsCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    #evenementsCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    #evenementsCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    #evenementsCarousel .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    #evenementsCarousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    #evenementsCarousel .carousel-item-prev.carousel-item-right + .carousel-item,
    #evenementsCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    #evenementsCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    #evenementsCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}




#home_evenements{
  background-color: #333;
}

#home_evenements .filet{
  padding: 2em 0;
}

#home_evenements .filet span{
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #fff;
}

#home_evenements .home_evenements_titre h1{
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-size: 150%;
  font-weight: 400;
}

#home_evenements .croix_basque{
  text-align: center;
  margin-bottom: 1em;
}

#home_evenements .croix_basque img{
  width: 100%;
  max-width: 30px;
  margin: 1em 0;
}

#home_evenements .home_evenements_liste{

}

#home_evenements .home_evenements_liste_bloc{
  padding: 0 1em;
}

#home_evenements .home_evenements_liste .photo{
  background-color: green;
  width: 100%;
}

#home_evenements .home_evenements_liste .photo img{
  width: 100%;
}

#home_evenements .home_evenements_liste .content{
  background-color: red;
  position: relative;
}

#home_evenements .home_evenements_liste .titre{
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  padding: 0.7em;
}

#home_evenements .home_evenements_liste .bloc:hover{

}

#home_evenements .home_evenements_liste .bloc .hover_content{
  display: none;
  position: absolute;
}

#home_evenements .home_evenements_liste .bloc:hover .hover{
  background-color: rgba(0,0,0,0.8);
  border: dashed 2px #fff;
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9;
  color: #fff;
}

#home_evenements .home_evenements_liste .bloc:hover .hover_content{
  width: 100%;
  text-align: center;
  display: inline-block;
}

#home_evenements .home_evenements_liste .bloc:hover .titre{
  display: none;
}

#home_evenements .home_evenements_liste .bloc:hover .hover_content{
  padding: 1em;
}

#home_evenements .home_evenements_liste .bloc:hover h2{
  font-size: 120%;
}

#home_evenements .home_evenements_liste .bloc:hover p{
  font-size: 90%;
  display: block;
  margin-bottom: 2em;
}

#home_evenements .home_evenements_liste .bloc:hover a{
  color: #fff;
  padding: 0.5em 1.5em;
  border-radius: 10px;
  border: solid 1px #fff;
  margin-top: 1em;
  font-size: 90%;
}

#home_evenements .home_evenements_liste .bloc:hover a:hover{
  text-decoration: none;
  background-color: #333;
}

#home_evenements .home_evenements_liste .carousel-indicators {
  left: 0;
  top: auto;
  bottom: -50px;

}

/* The colour of the indicators */
#home_evenements .home_evenements_liste .carousel-indicators li {
  background: #a3a3a3;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 0.3em;
}

#home_evenements .home_evenements_liste .carousel-indicators .active {
background: #fff;
}

#home_evenements .link{
  text-align: center;
  margin-top: 3em;
}

#home_evenements .link a{
  color: #fff;
  padding: 0.5em 1.5em;
  border-radius: 10px;
  border: solid 1px #fff;
  margin-top: 1em;
  font-size: 90%;
}

#home_evenements .link a:hover{
  text-decoration: none;
  background-color: #333;
}

#home_evenements .home_evenements_liste .bloc{
  margin: 1em 0;
}

@media(max-width: 992px){

  #home_evenements .home_evenements_liste .bloc{
    margin: 1em 0;
  }

}




/*****************************/
/*   PB - HOME - ARTICLES
/*****************************/

#home_articles{
  padding: 3em 0 5em;
}

#home_articles .home_articles_titre{
  text-align: center;
}

#home_articles .home_articles_titre h1{
  text-transform: uppercase;
  font-size: 180%;
  font-weight: 600;
}

#home_articles .croix_basque{
  text-align: center;
  margin-bottom: 1em;
}

#home_articles .croix_basque img{
  width: 100%;
  max-width: 30px;
  margin: 1em 0;
}

#home_articles .article_titre{
  text-align: center;
  height: 80px;
  width: 100%;
  display: inline-block;
}

#home_articles .article_titre h2{
  font-size: 110%;
  margin: 0;
  text-align: center;
  width: 100%;
}

#home_articles .article_photo img{
  width: 100%;
}

#home_articles .article_date{
  text-align: center;
  margin: 0.3em 0;
  font-size: 90%;
}

#home_articles .article_texte{
  text-align: center;
  font-size: 80%;
}

#home_articles .article_bouton{
  text-align: center;
  margin-top: 1em;
  padding-bottom: 1em;
}

#home_articles .article_bouton a{
  color: #fff;
  padding: 0.5em 1.5em;
  border-radius: 10px;
  font-size: 90%;
  box-shadow: 2px 2px 2px #999;
}

#home_articles .article_bouton a:hover{
  background-color: #333;
  text-decoration: none;
}

#home_articles .carousel-indicators {
  left: 0;
  top: auto;
  bottom: -50px;

}

/* The colour of the indicators */
#home_articles .carousel-indicators li {
  background: #a3a3a3;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 0.3em;
}





/******************************/
/*  PB - HOME - VILLES
/******************************/

#home_villes{
  background-color: #eee;
  padding: 2em 1em;
}

#home_villes .home_villes_titre{
  text-align: center;
}

#home_villes .home_villes_titre img{
  width: 100%;
  max-width: 300px;
}

#home_villes .home_villes_bloc{
  text-align: center;
  padding: 1em;
}

#home_villes .home_villes_bloc img{
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  border: solid 10px #fff;
}

#home_villes .home_villes_link{
  font-size: 200%;
  font-weight: 600;
}

#home_villes .home_villes_link span{
  display: inline-block;
}

#home_villes .home_villes_link a{
  display: inline-block;
  font-size: 80%;
  color: #fff;
  padding: 0.3em 1em;
  margin-top: 0.5em;
  border-radius: 10px;
}

#home_villes .home_villes_link a:hover{
  background-color: #333;
  text-decoration: none;
}






/******************************/
/*  PB - LISTE VILLES
/******************************/

#liste_villes{
  padding: 2em 1em;
}

#liste_villes .liste_villes_titre{
  text-align: center;
}

#liste_villes .liste_villes_titre img{
  width: 100%;
  max-width: 300px;
}

#liste_villes .liste_villes_bloc{
  text-align: center;
  padding: 1em;
}

#liste_villes .liste_villes_bloc img{
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  border: solid 5px #fff;
  box-shadow: 2px 2px 10px #CCC;
}

#liste_villes .liste_villes_link{
  font-size: 200%;
  font-weight: 600;
}

#liste_villes .liste_villes_link span{
  display: inline-block;
}

#liste_villes .liste_villes_link a{
  display: inline-block;
  font-size: 80%;
  color: #fff;
  padding: 0.3em 1em;
  margin-top: 0.5em;
  border-radius: 10px;
}

#liste_villes .liste_villes_link a:hover{
  background-color: #333;
  text-decoration: none;
}