.blur-it {
  filter: blur(40px);
}


a.btn {
	width: 200px;
	/*padding: 18px 0;*/
	padding:0.1em 0.5em 0.1em 0.5em;
	/*position: absolute;*/
	transform: translate(-50%, -50%);
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 0.5em;
	border-bottom:none;
	background: #8d7a5e;
	-moz-transition: color 0.6s ease-in-out, background 0.6s ease-in-out, font-weight 0.6s ease-in-out;
	-webkit-transition: color 0.6s ease-in-out, background 0.6s ease-in-out, font-weight 0.6s ease-in-out;
	-ms-transition: color 0.6s ease-in-out, background 0.6s ease-in-out, font-weight 0.6s ease-in-out;
	transition: color 0.6s ease-in-out, background 0.6s ease-in-out, font-weight 0.6s ease-in-out;
}
a.btn:hover{
	background:#ecb588;
	color:black!important;
	/*font-weight:bold;*/
	z-index:1;
}
a.notebtn {
	/*margin:0.5em 0.5em 1.2em 1.5em;*/
	padding:0.5em;
	font-size:0.4em;
	line-height:1em;
	vertical-align:bottom;
	position: absolute;
	transform: translate(-30%, -27%);
	text-decoration: none;
	color: #fff;
	border-radius: 2em;
	border-bottom:none;
	background: #8d7a5e;
	-moz-transition: color 0.6s ease-in-out, background 0.6s ease-in-out;
	-webkit-transition: color 0.6s ease-in-out, background 0.6s ease-in-out;
	-ms-transition: color 0.6s ease-in-out, background 0.6s ease-in-out;
	transition: color 0.6s ease-in-out, background 0.6s ease-in-out;
}
a.notebtn:hover{
	background:#ecb588;
	color:black!important;
	z-index:1;
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  background: rgba(15, 15, 15, 0.95);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
  z-index:1;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;

}

.modal {
  width: 37em;
  height: auto;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
/*  background: #fff;*/
  background:#333;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  border-radius:1em;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}

.bandeau { 
  width: 100%; /*90%;*/
  height: auto;
  padding: 0.08em 0.8em; /*12px 30px;*/
  overflow: hidden;
  background: #222;/*#e2525c;*/
  border-radius:1em 1em 0 0;

}

.btn-close {
  font-size: 1em;
  display: block;
  float: right;
  color: #fff;
	border-bottom:none;
}

.notes {
  padding: 2%;
  padding-top:0%;
}

.detail-note {
  text-align: center;
  color: #e2525c;
   padding:0% 2% 2% 2%;
}
.detail-note .fa-thumbs-o-up {
  font-size: 5em;/*60px;*/
}
.detail-note legend {
	text-align:justify;
  color:#f1f1f1;
}




.modal-wrapper1, .modal-wrapper2, .modal-wrapper3, .modal-wrapper4, .modal-wrapper5, .modal-wrapper6, .modal-wrapper7, .modal-wrapper8, .modal-wrapper9 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  background: rgba(15, 15, 15, 0.94);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
  z-index:1;
}

.modal-wrapper1.open, .modal-wrapper2.open, .modal-wrapper3.open, .modal-wrapper4.open, .modal-wrapper5.open, .modal-wrapper6.open, .modal-wrapper7.open, .modal-wrapper8.open, .modal-wrapper9.open {
  opacity: 1;
  visibility: visible;

}

.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
  width: 37em;
  height: auto;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
/*  background: #fff;*/
  background:#333;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  border-radius:1em;
}

.modal-wrapper1.open .modal1, .modal-wrapper2.open .modal2, .modal-wrapper3.open .modal3, .modal-wrapper4.open .modal4, .modal-wrapper5.open .modal5, .modal-wrapper6.open .modal6, .modal-wrapper7.open .modal7, .modal-wrapper8.open .modal8, .modal-wrapper9.open .modal9 {
  margin-top: -200px;
  opacity: 1;
}




/**** MEDIA QUERIES FOOTER ****/
@media (min-width: 1280px) {
	.modal, .modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
		width:40em;
		left:43%;
	}
}
@media (max-width: 1280px) {
	.modal, .modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
		width:40em;
	}
}
@media (max-width: 1024px) {
	.modal, .modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
		width:35em;
	}
}
@media (max-width: 980px) {

}

@media (max-width: 767px) {
	.modal, .modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
		width: 32em;
		left:53%;
	}
}
@media (max-width: 650px) {
	.modal, .modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
		width: 27em;
		left:60%;
	}
}
@media (max-width: 580px) {
	.modal, .modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 {
		width: 25em;
		left:60%;
	}

}