$grey:#61676A;
$marron:#9A9289;
$vert:#7BAE53;
$beige:#F1F0EE;

@import "qi_css/grid";
img{
  opacity:1;
  position:relative;
  z-index:100;
  
}




#mentions{
  background:$beige;
  color:$marron;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:15px 30px;
  margin-top:10px;
  padding-bottom:25px;
  
  .legals{
    text-style:italic;
    font-size:0.9em;
    
  }
  font-size:0.9em;
  p{margin-top:0;
    margin-bottom:4px;}
}
#couv{
  height:685px;
  
  margin-top:85px;
  background:rgba(0,0,0,0.8) center center no-repeat;
  background-size:cover;
  
}

a{
  color:rgba(66,139,202,1);
  text-decoration:none;
  
  &:hover{
  color:#68b9ff;
text-decoration:none;
  }
 
}
#plume_sub_header{
  position:absolute;
  top:210px;
  left:0;
  right:0;
  background:white;
  padding:5px 30px;

  
  .p_column{
    float:left;
    width:33.33%;
  
    
    .plume_cat{
      text-transform:uppercase;
      color:$vert;
      font-size:23px;
      margin-top:0px;
      font-weight:bold;
      margin-bottom:0px;
    }
    h2{
      font-size:18px;
      margin:0px 0;
      font-weight:bold;
      color:black;
      text-transform:none;
      margin-bottom:8px;
      padding-right:30px;
    }
    
  }
}
.agenda{
  background:$beige;
  margin:15px -20px;
  margin-top:25px;
  padding:1px 20px;
  font-size:1em;
  page-break-inside: avoid;
}
.credits{
  text-align:center;
  font-size:0.9em;
  color:rgba(0,0,0,0.6);
  padding:2px 0;
}

.author{

  color:rgba(0,0,0,0.6);
  padding:0px 0;
  padding-right:25px;
  text-align:right;
}
#bottom{
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  background:$grey;
  .desc{
    position:absolute;
    right:0;
    bottom:0;
    left:230px;
    height:136px;
    color:white;
    p{
      font-size:18px;
      font-weight:bold;
      margin-bottom:5px;
    }
  }
  #logo{
    background:white;
    width:160px;
     padding:8px 20px;
    img{
      height:120px;
      display:block;
      margin:auto;
     
    }
  }
}

.page_inner{
  padding:25px 50px;
  padding-bottom:0;
  font-size:14px;
  font-weight:300;
  h1{
    
    text-transform:uppercase;
    color:$vert;
    margin-top:10px;
    margin-bottom:0px;
    padding:0;
    font-size:25px;
    
  }
}

body{
  -webkit-text-size-adjust: none;
  font-weight:normal;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  font-family:Lato, serif;
}

img{
  max-width:100%;
}

html{
  height:100%;
  width:100%;
  padding:0;
  margin:0
  
}
.clear{
  clear:both;
}
.page{
  display: block;
  clear: both;
  width:788px;
  margin:auto;
  position:relative;
  min-height: 295mm;
  page-break-after: always;

  //position:relative;
  
}

.page_header{
  background:$beige;
  padding:10px 20px;
  padding-top:20px;
  font-weight:700;
  img{
    width:80px;
    
  }
  .right{
    text-align:right;
    width:400px;
    float:right;
    font-size:18px;
    margin-top:-10px;
    span{
      position:relative;
      top:-7px;
    }
  }
  .left{
    text-transform:uppercase;
    font-size:25px;
    color:$marron;
  }
}
  
  
  #plume_header{
    .plume_logo_mobile{
      display:none;
    }
  
    text-align:center;
    img{
      display:block;
      margin:auto;
      width:600px;
      max-width:100%;
      padding-top:15px;

    }
  
    .baseline{
      font-size:14px;
      font-weight:normal;
    }
  
    .hr{
      margin:8px 0;
      height:20px;
      margin-bottom:0;
      background:$grey;
    }
  }

  .sommaire{
    float:left;
    width:295px;
    text-align:left;
    margin-left:40px;
    .sommaire_panel{
      background:$marron;
      padding:10px;
      .content{
        padding:8px 16px;
        border:dashed 1px white;
        h2{
          font-weight:bold;
          color:white;
          font-size:28px;
          margin-bottom:10px;
          
          text-align:center;
          text-transform:uppercase;
          margin-top:0;
          padding-top:0;
          padding-top:5px;
        }
        h3{
          text-transform:uppercase;
          margin:0;
          padding:0;
          font-size:18px;
          margin-top:10px;
          font-weight:bold;
          color:white;
        }
        
        a{
          display:block;
          color:black;
          font-size:15px;
          &:hover{
            text-decoration:none;
          }
        }
      }
      
      
    }
  }

.plume-article_header{
  .plume_cat{
    text-transform:uppercase;
    color:$vert;
    font-size:25px;
    margin-top:15px;
    font-weight:bold;
    margin-bottom:20px;
  }
  h1{
    font-size:30px;
    margin:10px 0;
    font-weight:bold;
    color:black;
    text-transform:none;
  }
  
}
.render_block{
  padding:10px 0;
  padding-top:0;
}


.plume_event{
  border-bottom:1px dashed $marron;
  padding: 3px 0;
  padding-bottom:6px;

  h2{
    color:$vert;
    font-size:20px;
    text-transform:none;
    margin:0;
  }
  .date{
    margin: 5px 0;
  
  }
  margin-bottom:3px;

}

.plume_breve{
  border-bottom:1px dashed $marron;
  padding: 0px 0;

  h2{
    color:$vert;
    font-size:20px;
    text-transform:none;
    margin:0;
  }

  margin-bottom:10px;
  .render_block{
    padding-bottom:20px;
    padding-top:0px;
    
  }
}


.article{
  
  
  width:50%;
  float:left;
  
  &.article_large{
    float:none;
    width:auto;
    margin-top:60px;
    margin-bottom:100px;
    .image{
      width:47%;
      margin-left:1%;
      float:left;
    }
    .description{
      margin-left:50%;
      padding-left:20px;
    }
    
  }
  .inner{
    margin:0 20px;
  }
  
  .image{
    height:300px;
  }
  
  .plume_cat{
    text-transform:uppercase;
    color:$vert;
    font-size:30px;
    margin-top:15px;
    font-weight:bold;
  }
  h2{
    font-size:20px;
    margin:10px 0;
    font-weight:bold;
  }
}
  .plume_bottom{
    background:$grey;
    padding:10px 20px;
    margin-top:20px;
    .big{
      font-size:20px;
    }
    p{
      margin:5px 0;
      
    }
    *{
      color:white;
    }
    
  }



.fill_img{
  background:center center no-repeat;
  background-size:100%;
  background-size:cover;
}

h1,h2,h3,h4{
  text-align:left;
  
  
}

#edito_place{
  padding-top:0px;
  margin-left:305px;
  .left{
    text-transform:uppercase;
    font-size:25px;
    color:$marron;
    font-weight:bold;
  }
}