@font-face {
    font-family: 'CroissantOne_regular';
    src: url('../fonts/croissantone-regular-webfont.woff2') format('woff2'),
         url('../fonts/croissantone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kelt_condensed_bold';
    src: url('../fonts/kelt_condensed_bold-webfont.woff2') format('woff2'),
         url('../fonts/kelt_condensed_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Calligraffitti-Regular';
    src: url('../fonts/calligraffitti-regular-webfont.woff2') format('woff2'),
         url('../fonts/calligraffitti-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*changer la police, la taille et l'alignement du titre du site*/
.site-title
    {
        font-family: kelt_condensed_bold;
        font-size: 3em;
        text-align:center;
    }

/*Personnaliser la ligne horizontale (hr)*/
hr
    {
        border: 1px solid rgb(255,200,0);
        width:60%;
    }

/*Décolorer la bordure de l'article en vedette dans le blog*/
.card
    {
        border:#fff;
    }
/*changer la couleur des boutons lire la suite*/
.btn-primary
    {
        background-color:rgb(255, 200, 0);
        border-color:#fff;
    }
.btn-primary:hover
    {
        background-color:rgb(251, 121, 6);
        border-color:#fff;
    }


/*Ajouter une image de fond dans la hero section, sous le menu principal*/
#hero-image1 /*lieu*/
    {
        width:100%;
        background: url(https://nogareve.fr/images/nogaret/plantes-succulentes.jpg);
        min-height:300px;
        background-size: contain;
        background-attachment:fixed;
        background-repeat:repeat-x;
    }
#hero-image2 /*communauté*/
    {
        width:100%;
        background: url(https://nogareve.fr/images/nogaret/spirale-avent.jpg);
        min-height:300px;
        background-size: contain;
        background-attachment:fixed;
        background-repeat:repeat-x;
    }

#hero-image3 /*séjours et formations*/
    {
        width:100%;
        background: url(https://nogareve.fr/images/nogaret/mandala-cartes.jpg);
        min-height:300px;
        background-size: contain;
        background-attachment:fixed;
        background-repeat:repeat-x;
    }
    
#hero-image4 /*contact*/
    {
        width:100%;
        background: url(https://nogareve.fr/images/nogaret/mandala-automne.jpg);
        min-height:300px;
        background-size: contain;
        background-attachment:fixed;
        background-repeat:repeat-x;
    }
    
#hero-image5 /*accueil*/
    {
        width:100%;
        background: url(https://nogareve.fr/images/nogaret/mandala-feuilles.jpg);
        min-height:300px;
        background-size: contain;
        background-attachment:fixed;
        background-repeat:repeat-x;
    }
    
#hero-image6 /*actu*/
    {
        width:100%;
        background: url(https://nogareve.fr/images/nogaret/oiseau-ephemere.jpg);
        min-height:300px;
        background-size: contain;
        background-attachment:fixed;
        background-repeat:repeat-x;
    }
    
/*Ajouter un texte à l'image de fond*/
.hero-texte
    {
        font-family: 'Calligraffitti-Regular', kelt_condensed_bold;
        font-size: 2em;
        color: #fff;
        background-color: rgb(94, 60, 0);
        background-color: rgba(94, 60, 0,0.5);
        padding:20px;
    }
    
/* Responsive layout - supprimer le bandeau décoratif sur les petits écrans */
@media screen and (max-width: 600px) {
  .hero-texte
    {
        display:none;
    }
    #hero-image1, #hero-image2, #hero-image3, #hero-image4, #hero-image5, #hero-image6
    {
        display:none;
    }
  }
    
    
/*galerie d'image dans article photos*/
.row-galerie {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column-galerie {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column-galerie img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 992px) {
  .column-galerie {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-galerie {
    flex: 100%;
    max-width: 100%;
  }
}
/*galerie d'image dans module photos*/
.row-galerie2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create 2 equal columns that sits next to each other */
.column-galerie2 {
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.column-galerie2 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-galerie2 {
    flex: 100%;
    max-width: 100%;
  }
}
/*rendre invisible le plugin sige*/
.sige_small {
    visibility: hidden
}

/*modifier la police sur la page d'accueil*/
h2, .bienvenue
    {
        font-family:'Calligraffitti-Regular', 'Montserrat', Tahoma;
        font-size: 2em;
        text-align:center;
        padding-top:10px;
        color:rgb(255, 200, 0);
    }

.bienvenue2
    {
        font-family:'Calligraffitti-Regular', 'Montserrat', Tahoma;
        font-size: 1.4em;
        padding-top:10px;
        color:rgb(255, 200, 0);
    }

/*centrer les images et ajouter un effet hover*/
.image-centree 
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border-radius:10px;
    }
.image-postal
    {
        border-radius:20px;
        /*filter: sepia(30%);*/
    }

/*.image-postal:hover
    {
        filter:none;
    }*/
 
 /*Améliore l'affichage du texte à côté des images dans la page d'accueil*/   
.postal-column
    {
        align-self:center;
        padding-top:10px;
        border-radius:30px 0px;
    }


/*aligne verticalement les coordonnées en pied de page*/
.astroid-contact-info
    {
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
    }
    
/*affiche les logos des sites amis en mode flexbox, avec mediaqueries*/
.logos-amis
    {
        display: flex;
        border:20px;
    }
.col-logos-amis
    {
        flex:20%;
        padding:10px;
        filter: Sepia(50%);
        flex-wrap:wrap;
    }
    

@media screen and (max-width: 740px) {
    .logos-amis
    {
        display: flex;
        justify-content: center;
        border:20px;
        flex-direction: row;
        flex-wrap:wrap;
    }

.col-logos-amis
    {
        flex:0 0 33%;
        width:160px;
        filter: Sepia(50%);
    }
}

.col-logos-amis:hover
    {
        filter: none;
    }

.row-postal
    {
        margin-bottom:15px;
    }
    
/* pour que les images ne prennent pas trop de place dans un cas float-left */
@media screen and (min-width: 741px) {
.image-resize
    {
        max-width: 40%;
        border-radius:20px;
    }
}
@media screen and (max-width: 740px) {
.image-resize
    {
        display:none;
    }
}

/*Pour que les images dans les articles soient ni trop grandes ni trop petites*/
@media screen and (max-width: 740px) {
.image-article
    {
        max-width:50%;
    }
}
.image-article
    {
        border-radius:20px;
        /*filter: sepia(30%);*/
        
    }

/*.image-article:hover
    {
        filter:none;
    }*/

.image-article2
    {
        border-radius:20px;
        filter: sepia(40%);
        
    }
.image-article2:hover
    {
        filter:none;
    }
    
/*Pour que les images flottent dans les articles */
.float-left
    {
        float:left;
        padding-right:20px;
        padding-bottom:10px;
    }
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.float-right
    {
        float:right;
        padding-left:20px;
        padding-bottom:10px;
    }
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*Pour que les boutons de navigation dans le blog ne soient plus bleu*/
.page-link
    {
       color:rgb(255, 200, 0);
    }
.page-link:hover
    {
       background-color:white;
       border-color:orange;
    }
a.page-link:hover
    {
       background-color:rgb(255, 200, 0)!important;
       border-color:orange!important;
    }