area {
  cursor: pointer;
}

.area {
display: block;
width: 127px;
height: 90px;
background-color: #FFF;
position: absolute;
opacity: 0.2;
cursor: pointer;
}

.active {
	background-color: #FFF !important;
	opacity: 0.9 !important;
}

.letra {
float: left;
font-family: 'Montserrat';
font-size: 16px;
left: 60px;
top: 30px;
position: relative;
}

.clique {
color: #b63f9c;
font-weight: bold;
display: inline;
}

#close-me {
  position: fixed;
  display:  block;
  right:  0px;
  bottom: 0px;
  width:  100%;
  height: 100%;
}

#conteudo {
  height: 690px;
}
span.subTexto {
  display: none;
  font-size: 14px;
}

#wrapper table {
  position: relative;
  width: 640px;
  height: 690px;
}

#modal {
  z-index: 9999;
  position: absolute;
  left: 77px;
  top: 160px;
  width:500px;
  height: auto;
  background-color: #fff;
  border: 2px solid #b5b5b5;
  padding: 0px;
  font-family: 'Montserrat', sans-serif;
  font-size: 130%;
  visibility: hidden;
  text-align: center;
  color: #333;
}



#modal div {
  margin: 0px;
}

#close-me {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#modal a {
  text-decoration: none;
  color: #000;
}

#modal a:hover {
  text-decoration: underline;
  border: 0;
  padding: 0;
  margin: 0;
}

.sub-title {
  font-size:  16px;
  color: #fff;
  padding: 10px 25px 10px 25px;
}

.modal-title {
  float:  left;
  clear:  both;
  width:  96%;
  background-color: #b63f9c;
  padding: 10px;
  color: #fff;
}

.conteudomodal{
  
  padding: 20px 0 20px 20px; 
  margin-top: 60px;
  width: 440px; 
  height: auto; 
  display: block;
  float: left;
}

.botaofecha {
	background-color: #84266f;
	padding: 10px;
	width: 200px;
	height: auto;
	text-align: center;
	color: #FFF;
	float: right;
	cursor: pointer;
}