@charset "utf-8";
/* CSS Document */

/*////BÁSICO///////////////////////////////////////
/////////////////////////////////////////////////
/////////////////////////////////////////////////
/////////////////////////////////////////////////
/////////////////////////////////////////////////*/

html{
	height:100%;
}

body{
	height:100%;
	width:100%;
	margin:0;
	font-family: 'Ubuntu', sans-serif;
}

a{
	text-decoration:none;
	color:inherit;
}

input:focus, textarea:focus, select:focus{
	outline:none;
}

input{
	-webkit-appearance: none;
	-webkit-border-radius:0;
}

img{
	border:none;
}

h1{
	color:#069;
	margin:5px auto;
	font-family: 'Ubuntu', sans-serif;
	text-align:center;
	font-size:24px;
	text-transform:uppercase;
}

h2{
	color:#069;
	margin:5px auto;
	font-family: 'Ubuntu', sans-serif;
	text-align:center;
	font-size:22px;
	text-transform:uppercase;
}

h3{
	color:#069;
	margin:5px auto;
	font-family: 'Ubuntu', sans-serif;
	text-align:center;
	font-size:20px;
	text-transform:uppercase;
}

h4{
	color:#069;
	margin:5px auto;
	font-family: 'Ubuntu', sans-serif;
	text-align:center;
	font-size:18px;
	text-transform:uppercase;
}

p.paragrafo {
    text-indent: 2em;
	margin:0;
	text-align:justify;
}

p.paragrafo {
    text-indent: 2em;
	margin:0;
	text-align:justify;
}

#base{
	position:absolute;
	display:table;
	width:100%;
	height:100%;
	background-image:url(../images/bg.jpg);
	background-position:center center;
	background-size:cover;
	background-attachment:fixed;
}












/*//////////Base da Página //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#base{
	position:absolute;
	display:table;
	width:100%;
	height:100%;
	background-image:url(../images/bg.jpg);
	background-position:center center;
	background-size:cover;
	background-attachment:fixed;
}









/*//////////  HEADER       //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/


#header{
	position:relative;
	display:table;
	width:100%;
	height:60px;
	background:rgba(0,51,102,.9);
	padding:10px 0;
	font-size:20px;
	font-weight:400;
	z-index:200;
	font-family: 'Ubuntu Condensed', sans-serif;
}

#header a.area_restrita{
	position:absolute;
	right:60px;
	top:16px;
}

#header ul{
	position:absolute;
	display:table;
	list-style:none;
	color:#B5D6FD;
	padding:0;
	left:50px;
}

#header li{
	float:left;
	cursor:pointer;
	margin:2px 15px;
	transition:color 0.2s;
}

#header li:hover{
	color:#FFF;
}

#header li.pai{
	position:relative;
	cursor:default;
}

#header ul.filho{
	position:absolute;
	display:none;
	background:rgba(0,51,102,.8);
	padding:16px 10px;
	margin-left:0;
	top:30px;
	left:-10px;
	white-space:nowrap;
}

#header ul.filho:before{
	position:absolute;
	display:table;
	width:100%;
	top:-20px;
	height:20px;
	content:'';
}

ul.filho li{
	clear:both;
}
















/*//////////  BANNER       //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#banner{
	position:relative;
	display:table;
	width:100%;
	height:200px;
	background-image:url(../images/puppies01.jpg);
	background-size:cover;
	background-position:center center;
	border-bottom:#036 solid thin;
}

#banner #logo{
	position:absolute;
	display:table;
	width:258px;
	height:180px;
	background:url(../images/logo.png);
	top:10px;
	left:20px;
}


















/*//////////  PETS LOCAIS   //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#pets_locais{
	position:relative;
	display:table;
	width:100%;
	max-width:100%;
	overflow-x:hidden;
}

#container_empresas{
	position:relative;
	display:block;
	text-align:center;
}

#pet_local{
	position:relative;
	display:inline-block;
	float:left;
	width:12%;
	height:auto;
	padding:1%;
	padding-bottom:4%;
	margin:1%;
	background:rgba(2,142,90,.4);
	text-align:center;
	border-radius:2px;
}

#pet_local.first{
	margin-left:3%;
}

#pet_local h2{
	position:absolute;
	display:table;
	font-size:16px;
	line-height:15px;
	text-align:center;
	width:100%;
	left:0;
	top:76%;
}

#pet_local #info{
	position:absolute;
	display:block;
	bottom:0;
	left:0;
	width:100%;
	height:150px;
}

#pet_local #button{
	position:absolute;
	display:table;
	right:5px;
	bottom:5px;
}

#pet_local #infos{
	position:absolute;
	display:none;
	background:rgba(0,51,102,.9);
	color:#FFF;
	text-align:left;
	font-size:13px;
	bottom:0;
	left:0;
	width:100%;
	height:150px;
	border-radius:0 0 2px 2px;
}

#pet_local #infos p{
	position:relative;
	display:block;
	padding:10px;
	text-align:left;
}

#pet_local span{
	position:absolute;
	display:block;
	text-align:center;
	width:100%;
}

#pet_local span.mail_pet_local{
	bottom:10px;
	font-size:12px;
}

#pet_local span.fone_pet_local{
	bottom:40px;
	font-size:16px;
	text-align:center;
}

#pet_local.pet_01, #pet_local.pet_02, #pet_local.pet_03, #pet_local.pet_04, #pet_local.pet_05, #pet_local.pet_06{
	display:none;
}

















/*//////////  ATALHOS   //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#atalhos{
	position:relative;
	display:block;
	margin:0 auto;
	padding:10px;
	height:160px;
	border-top:#000 solid thin;
	border-bottom:#000 solid thin;
	background-image:url(../images/atalhos.jpg);
	background-size:cover;
}

#atalhos #center{
	position:relative;
	display:table;
	width:980px;
	margin:0 auto;
}

#atalho{
	display:table;
	float:left;
	margin:1px;
	transition:opacity 0.2s;
	opacity:.8;
}

#atalho:hover{
	opacity:1;
}


























/*//////////  RAÇAS   //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#racas{
	position:relative;
	display:table;
	width:100%;
	max-width:100%;
	overflow-x:hidden;
}

#raca{
	position:relative;
	display:table;
	float:left;
	width:12%;
	height:auto;
	padding:1%;
	padding-bottom:4%;
	margin:1%;
	background:rgba(0,0,0,.4);
	text-align:center;
	border-radius:2px;
}

#raca.first{
	margin-left:3%;
}

#raca img{
	background:#FFF;
}

#raca h2{
	position:absolute;
	display:table;
	font-size:16px;
	text-transform:none;
	text-align:center;
	width:100%;
	left:0;
	top:76%;
	color:#EEE;
}













/*//////////  MAPA       //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#box_mapa, #mapa{
	position:relative;
	display:table;
	width:100%;
	height:400px;
}

#box_mapa.mapa_filter, #box_mapa.mapa_filter #mapa{
	height:600px;
}

#box_mapa h2{
	position:relative;
	display:table;
	width:100%;
	padding:10px 0;
	background:rgba(0,51,102,.8);
	color:#ccead4;
	margin:0;
}

#box_mapa h2:after{
	position:absolute;
	display:table;
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: rgba(0,51,102,.8) transparent transparent transparent;
	bottom:-10px;
	left:50%;
	margin-left:-10px;
	z-index:999;
}


#loja{
	position:absolute;
	display:none;
	background:rgba(0,51,102,.8);
	color:#FFF;
	font-size:14px;
	text-align:center;
	top:46px;
	left:15%;
	z-index:999;
	padding:10px;
	padding-bottom:80px;
}

#loja input[type=button]{
	position:absolute;
	display:block;
	background-color:rgba(0,51,102,.9);
	width:100%;
	height:20px;
	border:none;
	color:#EEE;
	bottom:-20px;
	left:0;
	cursor:pointer;
	font-size:12px;
}

#box_mapa #loja h2{
	font-size:16px;
	font-weight:normal;
}

#box_mapa #loja p{
	position:relative;
	display:block;
	padding:10px;
	margin:0;
}

#box_mapa #loja span{
	position:absolute;
	display:block;
	text-align:center;
	width:100%;
	left:0;
}

#box_mapa #loja span.mail_pet_local{
	bottom:10px;
	font-size:12px;
}

#box_mapa #loja span.fone_pet_local{
	bottom:40px;
	font-size:16px;
	text-align:center;
}

#btns_mapa{
	position:absolute;
	display:block;
	width:100%;
	text-align:center;
	top:70px;
	z-index:999;
}

#btns_mapa a{
	display:inline-table;
	padding:10px;
	transition:background .2s;
	margin:0 10px;
	width:220px;
	box-shadow:2px 2px 0 rgba(0,0,0,.3);
	color:#FFF;
}

#btns_mapa a.perdi{
	background:rgba(153,0,0,.8);
}

#btns_mapa a.perdi:hover{
	background:rgba(153,0,0,.9);
}

#btns_mapa a.encontrei{
	background:rgba(0,102,0,.8);
}

#btns_mapa a.encontrei:hover{
	background:rgba(0,102,0,.9);
}
























/*//////////  LIGHTBOX   //////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#lightbox{
	position:fixed;
	display:none;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0,51,102,.9);
	z-index:1000;
}

#lightbox #form{
	position:relative;
	display:table;
	margin:40px auto;
	width:500px;
	height:500px;
	background:#FFF;
	box-shadow:4px 4px 0 rgba(0,0,0,.3);
}

#lightbox a.close_box{
	position:absolute;
	display:table;
	right:-10px;
	top:-10px;
	background:#CCC;
	color:#FFF;
	width:30px;
	height:26px;
	padding:4px;
	text-align:center;
	border-radius:26px;
	border:#FFF solid 3px;
	font-size:24px;
	box-shadow:4px 4px 0 rgba(0,0,0,.3);
}
























/*//////////  FORM   //////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#form{
	position:relative;
	display:table;
	margin:0 auto;
}

#form img{
	position:relative;
	display:none;
	margin:10px auto;
	box-shadow:2px 2px 4px rgba(0,0,0,.3);
}

#form form{
	position:relative;
	display:table;
	margin:0 auto;
	padding:20px;
	border:#DDD solid thin;
	border-radius:3px;
}

#form #btn{
	position:relative;
	display:inline-block;
	margin:20px 3px 0 3px;
	border:#DDD solid thin;
	border-bottom:none;
	border-radius:3px 3px 0 0;
	padding:3px 10px;
	cursor:pointer;
}

#form #btn.ativo{
	background:#DDD;
}

#form #btn.first{
	margin-left:30px;
}

#form #form_page{
	display:none;
}

#form input[type=text], #form select, #form textarea{
	font-family: 'Ubuntu', sans-serif;
	color:#036;
	padding:4px 8px;
	width:400px;
	float:left;
	clear:both;
	background:none;
	font-size:16px;
	margin:4px;
	border:#999 solid thin;
	border-radius:3px;
}

#form check{
	font-family: 'Ubuntu', sans-serif;
	color:#036;
	padding:4px 8px;
	width:400px;
	float:left;
	clear:both;
	background:none;
	font-size:16px;
	margin:4px;
}

#form select{
	width:418px;
}

#form textarea{
	max-width:400px;
	height:40px;
	max-height:80px;
}

#img_uploader, #form input[type=submit]{
	position:relative;
	display:table;
	font-family: 'Ubuntu', sans-serif;
	color:#EEE;
	padding:4px 8px;
	width:402px;
	height:22px;
	float:left;
	clear:both;
	background:#036;
	font-size:16px;
	margin:4px;
	border:none;
	border-radius:3px;
	text-align:center;
	cursor:pointer;
	overflow:hidden;
}

#img_uploader:before{
	position:absolute;
	display:table;
	width:400px;
	left:0;
	text-align:center;
	content:'Buscar Imagem';
}

#img_uploader input[type=file]{
	position:absolute;
	left:-120px;
	width:520px;
	height:20px;
	opacity:0;
	cursor:pointer;
}

#form input[type=submit]{
	width:418px;
	height:30px;
}
































/*//////////  AEP   //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#aeps_locais{
	position:relative;
	display:table;
	width:100%;
	max-width:100%;
	overflow-x:hidden;
}

#container_aep{
	position:relative;
	display:block;
	width:100%;
	text-align:center;
}

#aep_local{
	position:relative;
	display:inline-block;
	width:12%;
	height:180px;
	padding:1%;
	padding-bottom:4%;
	margin:1%;
	text-align:center;
	border-radius:2px;
}

#aep_local.achado{
	background:rgba(230,230,0,.8);
	color:#000;
}

#aep_local.achado h2, #aep_local.achado h3{
	color:#000;
}

#aep_local.achado #desde{
	color:rgba(0,0,0,.5);
}

#aep_local.perdido{
	background:rgba(153,0,0,.8);
	color:#FFF;
}

#aep_local.voltou{
	background:rgba(0,179,0,.8);
}

#aep_local.voltou h2{
	color:#FFF;
}

#aep_local h2{
	position:absolute;
	display:table;
	font-size:16px;
	line-height:15px;
	text-align:center;
	width:100%;
	left:0;
	top:56%;
}

#aep_local h3{
	position:absolute;
	display:table;
	font-size:14px;
	font-weight:normal;
	text-transform:none;
	line-height:15px;
	text-align:center;
	width:100%;
	left:0;
	top:71%;
}

#desde{
	position:absolute;
	left:4px;
	bottom:4px;
	font-size:11px;
	text-align:left;
	color:rgba(255,255,255,.5);
}

#aep_local.perdido h2, #aep_local.perdido h3{
	color:#FFF;
}

#aep_local #info{
	position:absolute;
	display:block;
	bottom:0;
	left:0;
	width:100%;
	height:150px;
}

#aep_local #button{
	position:absolute;
	display:table;
	right:5px;
	bottom:5px;
}

#aep_local #infos{
	position:absolute;
	display:none;
	background:rgba(0,51,102,.9);
	color:#FFF;
	text-align:left;
	font-size:13px;
	bottom:0;
	left:0;
	width:100%;
	height:150px;
	border-radius:0 0 2px 2px;
}

#aep_local #infos p{
	position:relative;
	display:block;
	padding:10px;
	text-align:left;
}

#aep_local span{
	position:absolute;
	display:block;
	text-align:center;
	width:100%;
}

#aep_local span.mail_pet_local{
	bottom:10px;
	font-size:12px;
}

#aep_local span.fone_pet_local{
	bottom:40px;
	font-size:16px;
	text-align:center;
}

#aep_local.pet_01, #aep_local.pet_02, #aep_local.pet_03, #aep_local.pet_04, #aep_local.pet_05, #aep_local.pet_06{
	display:none;
}


.marca_perdi{
	overflow:visible !important;
}

.marca_perdi div{
	position:relative;
	display:inline-block;
	margin-top:-13px;
	margin-left:-7.5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 7.5px 0 7.5px;
	border-color: #900 transparent transparent transparent;
}

.marca_perdi div img{
	position:absolute;
	top:-59px;
	left:-22px;
	border-radius:4px;
	border:#900 solid 2px;
}

.marca_voltou{
	overflow:visible !important;
}

.marca_voltou div{
	position:relative;
	display:inline-block;
	margin-top:-13px;
	margin-left:-7.5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 7.5px 0 7.5px;
	border-color: #090 transparent transparent transparent;
}

.marca_voltou div img{
	position:absolute;
	top:-59px;
	left:-22px;
	border-radius:4px;
	border:#090 solid 2px;
}

.marca_achei{
	overflow:visible !important;
}

.marca_achei div{
	position:relative;
	display:inline-block;
	margin-top:-13px;
	margin-left:-7.5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 7.5px 0 7.5px;
	border-color: #D9D900 transparent transparent transparent;
}

.marca_achei div img{
	position:absolute;
	top:-59px;
	left:-22px;
	border-radius:4px;
	border:#D9D900 solid 2px;
}

#pet_view h3{
	color:rgba(255,255,255,.8);
	text-transform:none;
	font-size:16px;
	font-weight:normal;
	padding-top:5px;
}

#pet_view p{
	max-width:300px;
}


#pet_aep{
	position:relative;
	display:table;
	width:100%;
	padding:20px 0;
	background:rgba(102,153,153,.5);
	/*background: -webkit-gradient(radial, center center, 0, center center, 460, from(#FFF), to(#DDD));
	background: -webkit-radial-gradient(circle, #FFF, #DDD);
	background: -moz-radial-gradient(circle, #FFF, #DDD);
	background: -ms-radial-gradient(circle, #FFF, #DDD);*/
	text-align:center;
	vertical-align:top;
	border-bottom:#036 solid thin;
	color:#036;
}

#pet_aep #dado_aep{
	position:relative;
	display:inline-block;
	margin:0 10px;
	text-align:left;
	vertical-align:top;
}

#dado_aep p{
	text-align:justify;
	max-width:300px;
}

#dado_aep h2{
	position:relative;
	background:#0072A8;
	color:#FFF;
	padding:4px 0;
	margin:0 0 10px 0;
}

#dado_aep h2:before{
	position:absolute;
	display:table;
	bottom:-8px;
	left:10%;
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: #0072A8 transparent transparent transparent;
}

#dado_aep h3{
	text-transform:none;
	font-weight:normal;
	text-align:left;
}

#dado_aep a{
	color:#069;
}

#dado_aep img{
	display:table;
	border-radius:3px;
	box-shadow:2px 2px 0 rgba(0,0,0,.3);
}
























/*//////////  ANÚNCIO AEP   //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#anuncio_aep{
	position:relative;
	display:table;
	width:100%;
	max-width:100%;
	overflow-x:hidden;
	padding-bottom:20px;
	background:#FFF;
}

#anuncio_aep img{
	position:relative;
	display:table;
	margin:10px auto;
	width:300px;
	border-radius:3px;
	border:#999 solid 2px;
}

#anuncio_aep input[type=button]{
	position:relative;
	display:table;
	margin:5px auto;
	background:#090;
	border:none;
	border-radius:3px;
	padding:6px 16px;
	color:#FFF;
	cursor:pointer;
}

#anuncio_aep h3{
	color:#090;
}























/*//////////  QUERO ANUNCIAR   //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#quero_anunciar{
	position:relative;
	display:block;
	margin:0;
	padding:20px 0;
	width:100%;
	background:#FFF;
	border-bottom:#036 solid thin;
}

#quero_anunciar form{
	position:relative;
	display:table;
	margin:20px auto;
	width:400px;
}

#quero_anunciar input[type=text], #quero_anunciar textarea{
	position:relative;
	display:table;
	margin:2px 0;
	float:left;
	clear:both;
	padding:6px;
	width:388px;
	border-radius:3px;
	font-family: 'Ubuntu', sans-serif;
	font-size:14px;
	border:#CCC solid thin;
}

#quero_anunciar textarea{
	height:60px;
}

#quero_anunciar input[type=submit]{
	position:relative;
	display:table;
	margin:4px auto;
	padding:6px;
	width:180px;
	border-radius:3px;
	font-family: 'Ubuntu', sans-serif;
	font-size:14px;
	border:none;
	background:rgba(0,51,102,.8);
	color:#FFF;
	transition:background .2s;
	cursor:pointer;
}

#quero_anunciar input[type=submit]:hover{
	background:rgba(0,51,102,.9);
}






























/*//////////  FOOTER       //////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////*/

#footer{
	position:relative;
	display:table;
	width:100%;
	height:200px;
	background:rgba(0,0,0,.9);
}

#footer #rol{
	position:relative;
	display:table;
	float:left;
	margin:20px 0 40px 60px;
	color:#CCC;
}

#rol ul{
	list-style:none;
	margin:0;
	padding:0;
	font-size:12px;
}

#footer h3{
	color:#999;
	font-size:14px;
	font-weight:normal;
	text-align:left;
}

#footer #logo{
	position:absolute;
	display:table;
	background:url(../images/logo_mono.png);
	background-size:contain;
	background-repeat:no-repeat;
	width:150px;
	height:100px;
	right:60px;
	bottom:20px;
	font-family: 'Ubuntu', sans-serif;
}