/* ------------------------------------------------------------------------------------------------------------------ */
/* corpo */

div#areas { display: block; position: relative; width: 100%; padding: 0 0 100px 0; overflow: hidden; margin: 0 auto; font-size: 0; text-align: center; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* fotos e titulo */

div#areas div.title { display: block; position: relative; width: 100%; padding: 0; font-size: 0; vertical-align: top; text-align: left; }
	div#areas div.title span { display: block; position: absolute; top: 15px; left: 0; width: 100%; height: 12px; background-color: #c2986b; z-index: 1; }
	div#areas div.title h1 { display: inline-block; position: relative; padding: 0 35px; font-size: 45px; line-height: 60px; color: #c2986b; background-color: #ffffff; z-index: 2; margin: 0 0 0 200px; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* mapa */

div#areas div.map { display: inline-block; position: relative; width: 1176px; height: 607px; margin: 35px 0 0 0; background: transparent url(../src/img/areas.png) no-repeat center center; background-size: contain; vertical-align: top; }
	div#areas div.map div.point { display: block; position: absolute; border-radius: 100%; }
	div#areas div.map div.point[data-status="false"] { background-color: #231f20; z-index: 5; }
	div#areas div.map div.point[data-status="true"] { background-color: #ffffff; z-index: 10; }
	div#areas div.map div.point._1 { top: 169px; left: 514px; width: 10px; height: 10px; }
	div#areas div.map div.point._2 { top: 399px; left: 360px; width: 11px; height: 11px; }
	div#areas div.map div.point._3 { top: 168px; left: 535px; width: 7px; height: 7px; }
	div#areas div.map div.point div.content { display: block; position: absolute; width: 300px; height: auto; border: 1px solid #c3986a; background-color: #ffffff; padding: 30px 40px; margin: 5px 0 0 5px; text-align: left; }
	div#areas div.map div.point[data-status="false"] div.content { opacity: 0; }
	div#areas div.map div.point[data-status="true"] div.content { opacity: 1; }
		div#areas div.map div.point div.content h1 { display: block; position: relative; font-size: 22px; color: #232020; line-height: 35px; width: auto; }
		div#areas div.map div.point div.content p { display: block; position: relative; font-size: 14px; color: #232020; line-height: 20px; width: auto; text-align: justify; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* textos laterais */

div#areas div.text { display: inline-block; position: relative; width: 520px; margin: 35px 0 0 54px; height: 200px; vertical-align: top; text-align: left; }
	div#areas div.text p { display: inline-block; position: relative; font-size: 24px; line-height: 30px; margin: 0 0 15px 0; z-index: 2; cursor: pointer; }
		div#areas div.text p span { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; background-color: #c2986b; z-index: -1; }
	div#areas div.text p[data-status="false"] { color: #c2986a; }
	div#areas div.text p:hover,
	div#areas div.text p[data-status="true"] { color: #231f20; }
        div#areas div.text p[data-status="false"] span { height: 0; }
        div#areas div.text p:hover span,
        div#areas div.text p[data-status="true"] span { height: 15px; }