/*
2018
Rose #58978D;
2019
Vert : #58978D #58978D;
Jaune Tournesol : #F7DA49
Orange Tournesol : #DD7B2F
*/
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css');
@font-face {
    font-family: LemonMilkThin;
    src: url(../../font/lemon-milk/LemonMilklight.otf);
}
@font-face {
    font-family: Font;
    src: url(../../font/Font.ttf);
}

@font-face {
    font-family: CGR;
    src: url(../../font/CGR.ttf);
}

body {
    color: #666;
    font-family: "Poppins",sans-serif;

}

p{
  line-height: 1.5em;
  font-family: "Poppins",sans-serif;
}


h1,h2,h3,h4,h5,h6 {
    color: #444;
    font-family: CGR

}

a {
    font-family: "Poppins",sans-serif;
    color:#DD7B2F;
    text-decoration: none;
}
#appel img{
  width:100px;
  max-width: 200px;
  position:fixed;
  right:1em;
  transition: transform 1s ease-in-out,right 1s;
  transform:rotateZ(0deg);
  transition-delay:0.1s;


}
#appel {
    width:100%;
    position:fixed;
    top:2em;
    z-index:10;
    /*display:none;*/
}
#appel.swipe img{
    right:-60em;
    transform: rotateZ(240deg);
}
#horaire{text-align:left;margin-top:0;padding-left: 1em;font-family: LemonMilkThin,sans-serif;}
.vasso{
    position: relative;

}

h3.village{
  font-family: "LemonMilkThin";
}

.groupe-sq{
    padding:0.2em;
}
.groupe-sq:hover{
    background: #EEE;border-radius: 1px;
}
.text-danger{
    color:red
}
.vasso::before{
  position: absolute;
  content: "•••••••••";
  left:-1.5em;
  top:3.5em;
  color:lightgray;
}

.shadow{
  box-shadow:0px -4px 5px 0px rgba(0,0,0,0.75);
}

.white-board{
  background:rgba(255,255,255,0.9);
  border-radius:2px
}
.bleu{
  background-image: url(../../img/fond-bleu.jpg)

}
.center{
  text-align:center;
}

.margin-top div{
  margin-top:1em;
}

.l-box-1 {
    padding: 1em;
}

.l-box-2 {
    padding: 0.5em;
}

.l-box-3 {
    padding: 2em;
}


.mobi .l-box-2,.mobi .l-box-1{
  padding: 0.7em;
}

.pure-button{
  margin-top:0.5em;
}


#testmobile{
  display: none;
}

.mobi #testmobile{
  display: inline-block;
}

#groupefocus{
  top:-80em;
  background-color: rgba(0,0,0,0.5);
  box-sizing: border-box;
  height:100vh;
  margin:auto 0;
  padding:2em;
  position:fixed;
  width:100%;
  z-index:100;
  transition: all 0.6s ease-in-out;
  border-radius: 2px;
}

  #groupefocus.display{
    display: block;
    opacity:1;
    top:0em;

  }
  #groupefocus a{
    color:#58978D;
  }

  #groupefocus img{
    transform: rotate(-2deg);
  }


  #groupefocus >div {
    box-sizing: border-box;
    height:100%;
    padding:1em;
    background: white;
    overflow:scroll;
  }
  .info h1{
    padding-left:1em;
  }

  .info p{
    padding:1em;
  }
  .commande{
    font-size:2em;
    /*text-align: right;*/
    position: absolute;
    right:2px;
    top:2px;
    border:2px #58978D solid;
    border-radius: 50px;
    color:#58978D;
    height:1.5em;
    width:1.5em;
    font-size: 2em;
    text-align:center;
    background:white;
    z-index: 10;
  }

    #close-dialog{
      cursor: pointer;
    }

.thin-border{
  border:1px #ccc solid;
}
.dons >div{
  margin:2em 0;
}
.pure-button{
  color:#ccc;
}

.filter-selected {
 background:#58978D;
 color: white;
}

.groupe{
  position:relative;
  margin:0.9%;
  cursor: pointer;
}

  .groupe:hover img{
    filter: contrast(150%);
  }
  .groupe img{
    filter: sepia(50%);
    border-radius: 100%;
  }
  .groupe p{
/*    height: 0px;
    width:0px;
    padding: 0px;
    margin: 0px;
    opacity: 0;
    */
    position:absolute;
    bottom:-2em;
    color:black;
    font-size: 1.6em;
    font-family: LemonMilkThin;
    line-height: normal;
    z-index:-10;
    /*text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;*/

  }
  .pure-u-md-1-5.groupe p{
    font-size: 1em;
  }


  .groupe p, .mobi .groupe p{
    /*height:3em;*/
    width:50%;
    bottom: 1em;
    transition: bottom 0.3s, opacity 0.4s;
    background:rgba(255,255,255,0.8);
    opacity:1;
    letter-spacing: 0;
    z-index:10;
    margin:auto;
  }

  .display-off{
    height:0px;
    width:0px;
    font-size: 0em;
    transition: all 0.2s ease-in-out;
    opacity:0;
    padding:0;
    margin: 0;
    -webkit-filter:grayscale(100%);
    -webkit-filter:brightness(40%);*/
  }

#fb{
  background:url(../../img/fb.png);
}
#sc{
  background:url(../../img/sc.png);
}

#fb,#sc {
    float:left;
    margin: 2px;
    background-position:left top;
    width:64px;
    height:64px;
    transition:background-position .2s ease-in-out, background-color 0.2s;
    border-radius: 3px;
    background-color: #9e9e9e;
    display:inline-block;
}
#fb:hover{
    background-position: left bottom;
    background-color: #3b5998;
}
#sc:hover{
    background-position: left bottom;
    background-color: #ff4f00;
}

.header .pure-menu {
    border-bottom-color: black;
    border-radius: 0;
    background-color:#222222;
}

.pure-menu-link {
    padding: 0.8em .7em;
    color:white;
    font-size:1.2em;
    font-family: "CGR",sans-serif;
    background: none;
    z-index: 2;
    position:relative;
    transition:all 0.3s;
}

span.pure-menu-item{
  display:inline-block;
}

.pure-menu-item::before,.pure-menu-item.selected:before {
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  border-radius: 2px;
  background: #fff;
  content: '';
  position: absolute;
  z-index: 1;
  transition:all 0.3s;

}

.open .pure-menu-item::before,.open .pure-menu-item.selected:before, .open .pure-menu-link{
    transition: all 0s;
}

.pure-menu-item:hover::before,.pure-menu-item.selected::before {
  height:90%;
}

.pure-menu-link:hover,.selected .pure-menu-link {
  background: none;
  color: #555555;
  /*padding-top: 0.5em;*/
}


/*----------------------------------------*/

.custom-wrapper {
    background-color: #222222;
    height: 2.8em;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
}

.custom-wrapper.open {
    height: 30em;
}

.custom-menu-3 {
    text-align: right;
}

.custom-toggle {
    width: 34px;
    height: 34px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.custom-toggle .bar {
    background-color: white;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    top: 16px;
    right: 7px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.custom-toggle .bar:first-child {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}
.custom-toggle .bar:last-child {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
}

.custom-toggle.x .bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.custom-toggle.x .bar:last-child {
    -webkit-transform: rotate(0deg) translateY(12px);
    -moz-transform: rotate(0deg) translateY(12px);
    -ms-transform: rotate(0deg) translateY(12px);
    transform: rotate(0deg) translateY(12px);

}


@media (max-width: 63.999em) {

    .custom-menu-3 {
        text-align: left;
    }

    .custom-toggle {
        display: block;
    }

    #groupefocus{
        padding:1em;
    }

}


.photo-box, .text-box {
    overflow: hidden;
    position: relative;
    /*height: 350px;*/
    /*text-align: center;*/
    background-color:black;
}

.photo-box-thin {
    height: 120px;
}


    .photo-box img {
        max-width: 100%;
        height: auto;
        /*min-height: 250px;*/
    }

    .photo-box aside {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 1em 0.5em;
        color: white;
        width: 100%;
        font-size: 80%;
        text-align: right;
        background: -moz-linear-gradient(top,  rgba(16,27,30,0) 0%, rgba(12,2,2,1) 90%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,27,30,0)), color-stop(90%,rgba(12,2,2,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */

    }

    .photo-box aside span {
        color: #aaa;
    }

        .photo-box aside span a {
            color: #ccc;
            text-decoration: none;
            font-family: CGR;
        }



.text-box {
    background: rgb(49, 49, 49); /* bluish grey */

}



    .text-box-head {
        font-family: CGR, sans-serif;
        color:#DD7B2F;
        padding-bottom: 0.2em;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 24px;

    }

    .text-box-subhead {
        font-weight: normal;
        letter-spacing: 0.1em;
        color:white;
    }

.pink-text-box {
    background: #58978D;

}

  .pink-text-box .text-box-head {
      color:white;
  }



.form-box {
    text-align: center;
    font-size: 120%;
    border-bottom: 1px solid #eee;
}

    .form-box .pure-button {
        background-color: #61B842;
        color: white;
        vertical-align: top;
        font-size: 85%;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: 4px;
        margin: 0.3em;
    }
    .pure-form input[type] {
        margin: 0.3em auto;
        text-align: center;
    }

.footer {
    background: #f3f3f3;
    color: #666;
    text-align: center;
    padding: 1em;
    font-size: 80%;
    box-shadow:0px -4px 5px 0px rgba(0,0,0,0.75);
}
.footer li{
  list-style-type: none;
  padding: 0.4em;
}

.footer  a{
  color:#999;
}
.footer  a:hover{
  color:#555;
}

@media (min-width: 30em) {
    .photo-box, .text-box {
        text-align: left;
    }

    .photo-box-thin {
        height: 250px;
    }
}