body{transition-property: filter; transition-duration: 0.3s;}
body::after{opacity: 0; pointer-events:none;transition-property: opacity; transition-duration: 0.3s;}
body #rgpd{display: none !important;}

body.rgpd_View{filter: blur(10px); }
body.rgpd_View::after{content:""; display: block; position: fixed; top: 0;left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.5);
  z-index: 99998;opacity: 1;}


/********************************************************
 * 						both 
 *******************************************************/

#rgpd_bando, #rgpd_side{
	z-index: 99999;position: fixed;bottom: 0;left: 0;
	background-color: #FFF;
	color:  #000; font-size: 10px; font-family: Arial, sans-serif;
}

/********************************************************
 * 						 bando
 *******************************************************/
#rgpd_bando{ 
	padding: 20px;  
	 width: 100%; overflow: hidden;
transition-property: min-height height padding; transition-duration: 0.3s;}

#rgpd_bando .rgpd_bloc{max-width: 1200px; margin: auto;display: flex; justify-content: space-between; align-items: center;}

#rgpd_bando .rgpd_ico{width: 4.5%;}
#rgpd_bando .rgpd_ico img{width: 100%; }
#rgpd_bando .rgpd_txt{width: 60%;}

.rgpd_button .rgpd_buttonP{border: 2px solid #000;text-transform: uppercase; background-color: #FFF; color: #000;padding: 5px 15px; text-align: center;font-weight: bolder;position: relative;}
.rgpd_button .rgpd_buttonP::before{content: "";display: block;height: 0; background: #000; bottom: 0; width: 100%; position: absolute;left: 0; transition-duration: 0.3s; transition-property: height;}
.rgpd_button .rgpd_buttonP:hover::before{height: 100%;}
.rgpd_button .rgpd_buttonP a{text-decoration: none;  transition-duration: 0.3s; transition-property:color; cursor: pointer;z-index: 2;position: relative;}
.rgpd_button .rgpd_buttonP a::after;{position: absolute; top: 0;left: 0;width: 100%;height: 100%;}
.rgpd_button .rgpd_buttonP:hover a{color: #FFF}


.rgpd_button.reverse .rgpd_buttonP{background-color: #000; color: #FFF;}
.rgpd_button.reverse .rgpd_buttonP::before{background: #FFF;}
.rgpd_button.reverse .rgpd_buttonP:hover a{color: #000}

#rgpd_bando.disparait{min-height: 0; height: 0; padding: 0}

/********************************************************
 * 						 side
 *******************************************************/

#rgpd_side{height: 100%; width: 0; overflow: hidden;
transition-property: width padding; transition-duration: 0.3s;
overflow-y: scroll;
}
#rgpd_side.apparait{width: 350px; padding: 20px; padding-top: 5em;}
#rgpd_BtnOpenSide{z-index: 99999;position: fixed; display: block;cursor: pointer; left: 0; bottom: 0; border-radius: 50% 50% 50% 0;background: #FFF;padding: 5px;width: 35px; height: auto; transition-property:width; transition-duration: 0.3s; }
#rgpd_BtnOpenSide:hover{width: 45px;}

.rgpd_glissiaire input[disabled="disabled"] + label{cursor: not-allowed;}
.rgpd_glissiaire label{display: inline-block;vertical-align: top; width: 3em; height: 1.5em;border-radius: 1.5em; background-color: grey;position: relative;cursor: pointer;transition-duration: 0.3s; transition-property: background-color}
.rgpd_glissiaire label::before{content: ""; display:block;z-index: 2; position: absolute;border-radius: 1.1em; width: 1.1em; height: 1.1em;top: 0.2em; left: 0.2em;background-color: #FFF; transition-duration: 0.3s; transition-property: left;}
.rgpd_glissiaire input{display: none;}
.rgpd_glissiaire input[type="checkbox"]:checked + label{background-color: limegreen;}
.rgpd_glissiaire input[type="checkbox"]:checked + label::before{left: 1.7em;}

.rgpd_PlusMoins{position: relative; width: 20px; height: 20px; display: inline-block; vertical-align: middle;border: 2px solid #FFF; border-radius: 20px;}
.rgpd_PlusMoins::before, .rgpd_PlusMoins::after{content:""; display: block;;position: absolute; top: calc(50% - 1px); left: 20%; width:60%; height: 2px; background-color: #FFF; transition-duration: 0.3s; transition-property: transform ;}
.rgpd_PlusMoins.plus::after{transform:rotate(90deg);}

.rgpd_details{max-height: 0;overflow: hidden; transition-property: max-height; transition-duration: 0.3s;}
.rgpd_details.rgpd_voir{max-height: 800px;}
.rgpd_Voirdetail{text-align: right;display: block;}

.rgpd_rub{width: calc(100% - 4em); display: inline-block;vertical-align: top;font-weight: bolder;}

#rgpd_close{cursor: pointer; position: absolute;top: 5px; right: 5px; width: 35px; height: 35px; display: inline-block; vertical-align: middle; transform: rotate(45deg);}
#rgpd_close::before, #rgpd_close::after{content:""; display: block;;position: absolute; top: calc(50% - 1px); left: 20%; width:60%; height: 2px; background-color: #000; transition-duration: 0.3s; transition-property: transform ;}
#rgpd_close::after{transform:rotate(90deg);}
.rgpd_item{border-top: 1px solid #CCC; padding-top: 20px;}
.rgpd_sauvegarde{margin: auto; width:80%;}
.rgpd_explain{font-size: 0.7em;font-weight: lighter;}

#rgpd_items{padding-bottom: 2em; min-height: calc(100vh - 12em);}

#rgpd_refuse{font-weight: bolder;margin-bottom: 15px;display: block;}

@media screen and (max-width: 750px) {
  #rgpd_bando, #rgpd_side{font-size: 1.7vw !important;}
  .rgpd_ico{display: none;}
  
  #rgpd_bando .rgpd_txt{padding-right: 10px;}
  #rgpd_bando{height: auto; min-height: auto;}
  #rgpd_side.apparait{width: 100%;}
}