@charset "utf-8";
/* CSS Document */
.modal#cookies {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0; right: 0;
  bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}
.modal#cookies h3{
	font-size:30px;
	padding-bottom:5px;
	font-weight:bold;
	border-bottom:1px solid grey;
	margin-bottom:15px;
}
.cookies_text{
	font-size:14px;
	font-style: italic;
}
.modal#cookies:target, .modal#cookies.active {
  visibility: visible;
  opacity: 1;
	display:flex!important;
}
.modal#cookies .modal_content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: rgba(255, 255, 255, 1);
  padding: 1.5em 2em;
}

.modal#cookies .modal_close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: grey;
  text-decoration: none;
	font-size:30px;
}
/* css case à cocher */
/* The container */
.cookies_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cookies_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cookies_container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cookies_container input:checked ~ .checkmark {
  background-color: #377e21;
}
.cookies_container input:checked ~ .checkmark.checkmark_grey {
  background-color: #eee;
}
.img_cookies{
	margin:auto;
	width:70%;
	height:auto;
	display:block;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cookies_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cookies_container .checkmark:after {
  left: 10px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#cookies input[name="all"], #cookies input[name="pers"]{
 background-color: #000;
    color: #fff;
    border-radius: 5px;

    cursor: pointer;
	display:inline-block;
	width:48%;
	box-sizing:border-box;
	padding:10px 10px;
	word-break: keep-all;
	font-size:16px;
	font-weight:bold;
}
#cookies input[name="all"]{
	 background-color: #377e21;
}
@media only screen and (max-width: 767px){
	#cookies input[name="all"], #cookies input[name="pers"]{
 width:100%;
		margin-top:10px;
	}
}