@import "bootstrap";
@import "jquery.bxslider";

@import "fontawesome/font-awesome";

@import "public/top";

@import "public/plume";

@import "qi_css/grid";

.credits{
  text-align:center;
  font-size:0.9em;
  color:rgba(0,0,0,0.6);
  padding:2px 0;
}
.observer-et-photographier-la-faune-sans-deranger{
  .couv{
    
    float:left;
    width:300px;
    margin-right:10px;
  }
  
}

iframe{
  margin:auto;
  width:100%;
  
}

a{
  img{
    
    border:0;
  }
  
}

body{
  font-family:"Lato", arial, sans-serif;
  
  line-height:1.4em;
  text-align:justify;
  
  padding:0;
  margin:0;
  font-size:15px;
  color:#333333;
  background-color:rgba(241,240,238,0.2);
  background: url('/fond2.jpeg') center center fixed;
  background-size: cover;
  
}

img{
  max-width:100%;
  
}
 
a{
  color:rgba(66,139,202,1);
  text-decoration:none;
  
  &:hover{
  color:#68b9ff;
text-decoration:none;
  }
 
}

.clear{
  clear:both;
}
 
#large{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:10;

   h3{
     color:white;
     text-align:center;
     margin-top:5px;
     margin-bottom:0;
     font-weight:300;
     font-size:0.95em;
 
   }
  .next, .prev{
    width:20px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;

  }
  .prev{
    left:15px;
  }
  .next{
    right:15px;
  }
 
  .img_container{
    height:100%;
    width:100%;
    box-sizing: border-box;

   .large-img{
      cursor:pointer;
      padding:10px;
      background:rgba(250, 250, 250, 0.9);
      display:block;
      margin:auto;
    }
  }
}



.rea-gal{
  padding-left:0px;

  margin-right:-5px;
  margin-bottom:-5px;
  img{
  padding-right:5px;
  padding-bottom:5px;
    width:200px;
    float:left;
    box-sizing: border-box;
    &:hover{
      opacity:0.8;
      
    }
  }
}


 





.main{
width:100%;
max-width:1020px;
position:relative;
margin:auto;

}



#slider_content{
  position:relative;
  min-height:50px;
  
}






.top_home{
  #logo{
  width:185px;
  position:absolute;
  bottom:0;
  left:40px;
  
  

  }
  
  height:50px;
  width:100%;

  margin:auto;

  
  position:absolute;
  bottom:0px;
  right:0;
  left:0;
  background:rgba(250,250,250,0.8);
  z-index:3;
  box-shadow:0 0 5px rgba(0,0,0,0.5);

  #menu{
    margin-right:40px;
    margin-top:14px;
    font-size:14px;
  text-align:right;
  text-transform:uppercase;

  a{
  
    margin:0;
  
  display: inline-block;
  color:#4d4d4d;
  text-decoration: none;


  padding: 2px 10px;

  margin-right:5px;



  &:hover, &.active{

    color:rgba(116,180,55,1);
  }

  &:last-child{
    margin-right:0;
  
  }


  }
  }
  
  
}

#main{
  width:100%;
  max-width:1300px;
  margin:50px auto;
  
  
  #corps{
    width:68%;
    float:left;
    background:rgba(255,255,255,0.95);
    padding:10px 20px;
    min-height:600px;
    
  }
  #sidebar{
    width:30%;
    float:right;
    background:white;
    padding:10px 20px;
    text-align:left;
    
    a.active{
      font-weight:bold;
      
    }
    ul{
      padding-left:20px;
      
    }
    li{
      padding-bottom:10px;
      ul{
        padding-left:30px;
        li{
          padding-bottom:0;
        }
      }
    }
    
    
  }
  
}
$header_font : "source-sans-pro";

.top_background{
  
  
  min-height:150px;
  ;
  
}
.dark_background{
background:rgba(40,40,40,1);
padding-top:3em;
color:#F2F2F2;
}

.gray_light_background{
background:rgba(91,92,94,1);
}


.blue_background{
background:rgba(0,162,216,1);
}

.yellow_background{
background:rgba(248,164,40,1);
}

.green_background{
background:rgba(176,201,49,1);
}

.rose_background{
background:rgba(230,0,125,1);
}
.content_center{
text-align:center;
}




h1,h2,h3,h4{
  text-align:left;
font-weight: 700;
font-family:$header_font, Arial, sans-serif;
color:#69952f;
text-transform:uppercase;
font-weight:bold;

a{
  color:#69952f;
  
}

}


h1{

  
  font-size:22px;
  line-height:24px;
  font-family:$header_font, Arial, sans-serif;
}

h2{
  
  color: #333333;
  font-weight: bold;
  font-size: 16px;
  font-family: "source-sans-pro", Arial, sans-serif;
  text-transform:none;
}

.date{
  margin-top:10px;
  margin-bottom:-20px;
  font-size:18px;
  font-family:$header_font, Arial, sans-serif;
}

.share{
  
  font-size:16px;
  a{
    padding:0 10px;
    
  }
}

.bottom{



  font-size:0.8em;
  padding:0.7em 1em;
  margin-top:120px;
  
  img{

    
    float:right;
    height:19px;
    margin:0;

    
  }
}

.close_link{
  position:fixed;
  top:10px;
  right:10px;
  width:40px;
  cursor:pointer;
  
}

a{

    .event{
      color:black;
      padding:10px;
      margin-top:10px;
      .date{
        margin-top:0px;
      
      }
      p{
        margin-top:0px;
      
      }
      background:white;
      background:rgba(250,250,250,0.8);
    
      &:hover{
        background:white;
        
      }
    }

}
#corps{
  .event{
    
    img{
      
      float:left;
      margin-right:10px;
    }
  }
  
}

article{
  margin-bottom:6em;
  
}

.articles_button, .share a{
  color:black;
  float:right;
  padding:0.7em 1em;
  display:block;
  background:white;
  background:rgba(250,250,250,0.8);
  margin-left:10px;
  &:hover{
    
    background:white;
    color:black;
    
  }
  
}

.main_section_title{
  
  border-bottom:#C4C4C4 1px solid;
  padding:5px 0;
  padding-top:10px;
  margin-bottom:10px;
  a{
    text-decoration:none;
    color:#1a1a1a;
    font-size:15px;
    
  }
  
}


.first_article{
  
  .image{
    float:left;
    width:65%;
    background: #757575 center center no-repeat;
    background-size:100%;
    background-size:cover;
    margin-bottom:5px;
    height:400px;
    
  }
  .description{
    width:34%;
    float:left;
    font-family:arial;
    h1{margin-left:10px;margin-top:0;}
    p{
      margin-left:10px;
      color:black;
    }
   
    
  }
  
}

.articles{
  .image{
    width:15%;
    float:left;
    background: #757575 center center no-repeat;
    background-size:100%;
    background-size:cover;
    
    height:80px;
    overflow:hidden;
    margin-bottom:5px;
  }
  .description{
    width:35%;
    float:left;
    height:80px;
    margin-bottom:5px;
  }
  
  h2{
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
  }

  
}





.article_date{
  text-align:left;
  margin-bottom:10px;
}


.event{
  margin-bottom:2em;
  %strong{
    
    color:#E5383A;
  }
  .date{
    font-weight: 400;
    font-family:$header_font, Arial, sans-serif;
    
  }
  .image{
    width:200px;
    img{
        max-width:200px;
        max-height:300px;
    
        width:100%;
        float:left;
 
        background:#757575;
      }
    
  }
  
  
}
.articles_index{
  
  a{
    color:inherit;
    &:hover{
      
      color:inherit;
      text-decoration:none;
    }
    
    
  }
}


.article_list{

  .image{
    width:200px;
    float:left;
    background: #757575 center center no-repeat;
    background-size:100%;
    background-size:cover;

    overflow:hidden;
    margin-bottom:5px;
  }
  .description{


    margin-left:210px;
    margin-bottom:5px;
    
  }
  margin-bottom:3em;
  
  
}

.breadcrumb{
  
  background:transparent;
  padding:0;
  color:rgba(115,115,115,1);
  a,a.active{
    color:rgba(115,115,115,1);
  }
}

  .event_mini_link{
    
    &:hover{
      text-decoration:none !important;
      
    }
    .event_mini{
      
      margin-bottom:15px;
      img{
        float:left;
        width:120px;
        margin-right:5px;
      }
    
      .date{
        font-size:1em;
      }
      h2{
      
        color:rgba(106,148,54,1);
        font-size:1.2em;
      }
    
      color:black;
    

      
      
    
    }  }


.actu_link{
  float:right;
  margin:10px;
  padding:8px 15px;
  border:1px solid #69952f;
  font-weight:bold;
  color:#69952f;
  margin-right:0;
  
  &:hover{
    background:#69952f;
    color:white;
    text-decoration:none;
  }

  
}

.actu_title{
  
  margin-bottom:60px;
}