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

body, html{
	margin:0px;
	background-color:#FFF;
	height:100%;
	
}

body{
	overflow-x:hidden;
}

a{
	text-decoration:none;
	}

a:visited {
	text-decoration: none;
	color:#009;
}

#header_pet{
	background-color:rgb(29,111,184); /*Azul
	background-image:url(../images/huellitas.png);*/
	background-repeat:repeat;
	width:100%;
	height:250px;
}

#logoqr{
	width:100%;
	text-align:center;
	padding:20px;
}

#logoqr img{
	width:200px;
	height:auto;
	padding:20px;
	left:-100%;
	box-shadow: 0 0 20px rgba(0, 0, 0, .8);
}

#register_pet{
	position:fixed;
	margin:0 auto;
	max-width:700px;
	width:93%;
	height:44px;
	box-shadow:0px 0px 20px #666666;
	padding:5px 10px 10px 10px;
	background-color:#FFF;
	border-radius: 0px 0px 10px 10px;
	
	left: 50%;
    top: 0px;
    transform: translate(-50%, -0%);
    -webkit-transform: translate(-50%, -0%);
	z-index:100;
	transition: all 0.5s ease 0s;
	
	overflow: hidden;
	text-align:center;
}

#register_pet:hover{
	height:400px;
	}

#register_barra{
	border-radius: 0px 0px 10px 10px;
	width:100%;
	position:absolute;
	background-color:#06C; /*Azul de la barra*/
	color:#fff;
	text-align:center;
	z-index:110;
	top:0px;
	left:0px;
	cursor:pointer;
	display:table;
}

#register_barra h3{
	padding:0px;
}
  
#register_barra:hover{
	cursor:pointer;
	background-color:#09F;
}


#element1, #element2, #element3{
	margin:0 auto;
	max-width:600px;
	width:95%;
	height:350px;
	/*border:5px solid;*/
	text-align:center;
	/*float:left;*/
	position:absolute;
	left:50%;
    top: 70px;
    transform: translate(-50%, -0%);
    -webkit-transform: translate(-50%, -0%);
	overflow: auto;
	  
  transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  
}

.div_circle{
	position:relative;
	overflow: hidden;
	border-radius: 2% 2% 2% 2%;
	background-color:#fff;
	background-size:cover;
	background-position:center;
	width:150px;
	height:200px;
	margin:auto;
	/*text-align: center;*/
	left:0px;
	right:0px;
	top:100px;
	border:0px #000 solid; 
	box-shadow: 0 0 20px rgba(0, 0, 0, .8);
	padding:0px 0px 0px 0px;
}

.div_circle img{
	overflow: hidden !important;
	width:150px;
	height:auto;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.div_code{
	position:relative;
	margin:auto;
	left:0px;
	right:0px;
	top:100px;
	width:250px;
	z-index:10;
	}

.bloque_gris{
	width:100%;
	/*height:400px;*/
	background-color:#E4E4E4;
	/*padding:10px 10px 10px 10px;*/
	padding-bottom:15px;
	padding-left:0px;
	padding-right:0px;
}

.bloque_gris h2{
	text-align:center;
	padding-top:20px;
	margin-bottom:5px;
	font-size:22px;
}

.bloque_blanco{
	width:100%;
	background-color:#FFF;
	/*padding:10px 10px 10px 10px;*/
	padding-left:0px;
	padding-right:0px;
}

.bloque_blanco h2{
	text-align:center;
	padding-top:5px;
	font-size:16px;
}

.bloque_centrado{
	padding:80px 10px 30px 10px;
	position:relative;
	max-width:700px;
	left:0px;
	right:0px;
	margin:auto;
	/*background-color:#060;*/
}

.bloque_centrado ul { list-style-type: none; }

.bloque_centrado2{
	padding:20px 10px 30px 10px;
	position:relative;
	max-width:700px;
	left:0px;
	right:0px;
	margin:auto;
	/*background-color:#060;*/
}

.bloque_centrado2 h2{
	color:#036;
	margin:5px 0px;
	font-size:20px;
	text-align:left;
}

.bloque_centrado2 p{
	color:#666;
	font-size:16px;
	margin:5px 0px;
}

/*############ FORMULARIO DE CONTACTO ##############*/

/*--- estilos para los ul y li del formulario ---*/
.contact_form img{
	padding:10px 10px 10px 10px; /*Top..*/
	box-shadow:0 0 10px #333333 inset;
	margin:10px;
}

.contact_form ul {
    width:100%;
    list-style-type:none;
	margin:0px;
	padding:0px;
}
.contact_form li{
	padding:5px;
	/*border-bottom:1px solid #eee;*/
	position:relative;
	left:0px; /*-5*/
}
.contact_form label {
    color: #555555;
    display: inline-block;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    width: 100%;
	text-align:left;
}
.contact_form input {
	height:40px; 
	width:100%;
	/*max-width:500px;*/
	padding:5px 5px;
	text-align:center;
}
/*.contact_form select{
	height:3.8em;
	width:100%;
	max-width:512px;
	/*font-size:14px;
	/*padding:5px 5px;
} */

textarea{
	padding:10px;
	resize:none;
	height:110px;
    width:100%;
}

.contact_form button {
	/*margin-left:150px;*/
	width:100px;
}
/*----- estilos visuales de los elementos --------*/

.contact_form input, .contact_form textarea, .contact_form select {
	/*display:block !important;*/
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
	color: #888;
	font-size: 18px;
	padding-right:0px;
	/*padding:5px 5px;*/
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
	text-transform:uppercase;
	width:100%;
	/*max-width:600px;*/
}
.contact_form select:focus {
	background: #fff; 
	border:1px solid #28921f; /*verde #555gris*/
	box-shadow: 0 0 5px #28921f;
	padding-right:0px;
	outline: none;
}
.contact_form input:focus, .contact_form textarea:focus {
	background: #fff; 
	border:1px solid #28921f; /*verde #555gris*/
	box-shadow: 0 0 3px #aaa;
	padding-right:0px;
	/*padding:12px 5px;
	font-size:22px;*/
	outline: none;
}

/* === Estilos de Validacion === */	

.contact_form input:required:valid, .contact_form textarea:required:valid {
	box-shadow: 0 0 5px #28921f; /*verde*/
	border-color: #0C6;
}

.contact_form input:required:invalid, .contact_form textarea:required:invalid {
	/*box-shadow: 0 0 5px #999, 0 10px 15px #eee inset; /*verde*/
	box-shadow: 0 0 5px #0080FF, 0 10px 15px #eee inset; /*azul*/
	border-color: #09C;
}

.contact_form input:focus:valid, .contact_form textarea:required:valid {
	box-shadow: 0 0 6px #28921f; /*verde*/
	border-color: #0C6;
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	box-shadow: 0 0 6px #d45252; /*rojo*/
	border-color: #F99; 
}
/* === Estilos del boton de Envio === */
button.submit {
   margin: 5px 0px 10px 0px;
   padding: 10px;
   font-family: Helvetica, Arial, sans-serif;
   /*font-weight: bold;*/
   line-height: 1;
   color: #fff;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#06C), to(#09F));
   background-image: -moz-linear-gradient(0% 100% 90deg, #06C, #09F);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   font-size:18px;
   width:100%;
   /*max-width:700px;*/
}
button.submit:hover {
	opacity:.55;
	cursor: pointer; 
	color: #fff;
}
button.submit:active {
	border: 1px solid #222;
	box-shadow: 0 0 10px 5px #444 inset; 
}

/*ESTILOS PARA LA VENTANA MODAL*/

.modal-contenido{
  background-color:#FFF;
  border-radius:5px;
  box-shadow:0 0 10px #aaa;
  width:300px;
  padding: 10px 20px;
  margin: 20% auto;
  position: relative;
}

.modal{
  background-color: rgba(0,0,0,.8);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  /*opacity:.5;
  pointer-events:none;*/
  transition: all 1s;
  z-index:200;
}
#miModal:target{
  opacity:1;
  pointer-events:auto;
}

/*FORMULARIO 2*/

/*--- estilos para los ul y li del formulario ---*/
.register_form img{
	padding:10px 10px 10px 10px; /*Top..*/
	box-shadow:0 0 10px #333333 inset;
	margin:10px;
}

.register_form ul {
    width:100%;
    list-style-type:none;
	margin:0px;
	padding:0px;
	text-align-last:center;
}
.register_form li{
	padding:5px 0px;
	/*border-bottom:1px solid #eee;*/
	position:relative;
	left:0px; /*-5*/
}
.register_form label {
    color: #555555;
    display: inline-block;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: inherit;
    margin-top: 3px;
    padding: 3px;
    width: 100%;
	text-align: left;
}

.register_form textarea{
	padding: 5px 0px;
	resize: none;
	height: 110px;
    width: 100%;
	text-align: center;
}

.register_form input, select {
	height: 30px; 
	width: 100%;
	padding: 5px 0px;
	text-align: center;
}

.register_form button {
	/*margin-left:150px;*/
	width:100%;
}


/*----- estilos visuales de los elementos --------*/
.register_form input, .register_form textarea, .register_form select {
	/*display:block !important;*/
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
	color: #888;
	font-size: 18px;
	padding-right:0px;
	/*padding:5px 5px;*/
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
	/*text-transform:uppercase;*/
	/*width:100%;
	/*max-width:600px;*/
}

.register_form select{
	cursor:pointer;
}

.register_form select:focus {
	background: #fff; 
	border:1px solid #28921f; /*verde #555gris*/
	box-shadow: 0 0 5px #28921f;
	padding-right:0px;
	outline: none;
}
.register_form input:focus, .register_form textarea:focus {
	background: #fff; 
	border:1px solid #28921f; /*verde #555gris*/
	box-shadow: 0 0 3px #aaa;
	padding-right:0px;
	/*padding:12px 5px;
	font-size:22px;*/
	outline: none;
}

/* === Estilos de Validacion === */	

.register_form input:required:valid, .register_form textarea:required:valid {
	box-shadow: 0 0 5px #28921f; /*verde*/
	border-color: #0C6;
}

.register_form input:required:invalid, .register_form textarea:required:invalid {
	/*box-shadow: 0 0 5px #999, 0 10px 15px #eee inset; /*verde*/
	box-shadow: 0 0 5px #0080FF, 0 10px 15px #eee inset; /*azul*/
	border-color: #09C;
}

.register_form input:focus:valid, .register_form textarea:required:valid {
	box-shadow: 0 0 6px #28921f; /*verde*/
	border-color: #0C6;
}

.register_form input:focus:invalid, .register_form textarea:focus:invalid {
	box-shadow: 0 0 6px #d45252; /*rojo*/
	border-color: #F99; 
}

/*FORMULARIO SUBIDA IMAGEN*/
.upload a {
	text-decoration: none;
	color: red;
}
.upload a:hover {
text-decoration: underline;
}
header {
border-bottom: 1px gray dotted;
padding-bottom: 25px;
margin-bottom: 25px;
}
header h1 {
	margin-top:30px;
	font-size: xx-large;
	text-shadow: 1px 1px 5px gray;
}
header em {
	color: gray;
	text-align:justify;
}
.upload section form {
	font-size: small;
}
.upload section form fieldset {
	padding: 10px 25px;
	background-color: white;
	border: 1px gray solid;
	border-radius: .5em;
}
.upload section form fieldset legend {
	padding: 5px 10px;
	border: 1px gray solid;
	border-radius: .5em;
	background-color: white;
}
footer {
	border-top: 1px gray dotted;
	padding-top: 25px;
	margin-top: 25px;
	position: relative;
}
.msg {
	margin-bottom: 20px;
	padding: 10px;
	background-color: rgb(255,250,250);
	border: 1px red dotted;
}
.elimina {
	color: blue;
}

/****************/

.parrafo1{
	font-family:'Merriweather', Times, serif;
	font-size:18px;
	text-align:center;
	color:#333;
	padding:100px 10px 10px 10px;
}

.centrar{
	text-align: center;
}

.columna-0{
	width:250px;
	height:100%;
	margin:5px;

	/* IMPORTANTE */
	display:inline-table;
	text-align:center;

}

.columna-0 h2{
	font-size:18px;
	font-weight:bold;
	color:#036;
	padding:0px;
	/*height:50px;*/
	text-align:center;
}

.columna-0 p{
	font-size:18px;
	color:#666;
	padding:0px;
	text-align:left;
}
/****** *******/

.columna-1{
	max-width:300px;
	height:auto;
	margin:10px 20px;

	/* IMPORTANTE */
	display:inline-table;
	vertical-align:middle;
}

.columna-1 h2{
	font-size:26px;
	color:#036;
	text-align:left;
}

.columna-1 p{
	font-size:16px;
	color:#666;
	text-align:justify;
}

.columna-2{
	width:300px;
	height:300px;
	margin:5px;

	/* IMPORTANTE */
	display:inline-table;
	padding:40px 20px 10px 10px;
	background-color:#FFF;
	margin:20px 10px;
	transition:all 1s;
	cursor:pointer;
}
.columna-2:hover{
	background-color:#CCC;
}

.columna-2 h2{
	font-size:16px;
	color:#036;
	text-align:center;
	padding:0px;
	padding-bottom:5px;
	/*height:20px;*/
}

.columna-2 p{
	font-size:16px;
	color:#666;
	text-align:center;
	padding-top:5px;
}
/****** TABLAS *******/

.country{
	/*Sin estilo definido
	border:1px #000033 solid;
	background:#CCFF99;*/
	text-align:left;
	padding: 20px 0px 20px 0px;
}


.country img{
	position:absolute;
	right:0px;
	transform: translate(0%, -50%);
}


.country table td {
	/*Sin estilo definido*/
	background-color:#CCCCFF;
}

.centrar-bloques{
	text-align: center;
	overflow-x:auto;
	margin:10px;
	padding-bottom:20px;
}

/*CSS de las tablas*/

.tabla h1 {
  text-align: center;
  font-size: 150%;
  font-family: 'Covered By Your Grace', cursive;
  text-shadow: 0 2px 1px white;
  }

.tabla {
	margin:0 auto;
  	padding: 0px 0px 10px 0px;
   	text-align:center;
	overflow: auto;
}
.tabla table{
	width:100%;
	border-spacing:0px;
	padding:0px 2px 5px 2px;
}

.tabla thead{background-color:#9FC}

.tabla th {
	border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid rgba(255,255,255, 0.2);
    background:#3e3f44; /*gris oscuro*/
	text-decoration:none;
    color:#fff;
    text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
    filter: dropshadow(color=#000, offx=1, offy=0);
	padding:10px;
	text-align:center;
}
.tabla td{
	/*display: block;*/
    border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid rgba(255,255,255, 0.2);
    background:#fafafa; /*gris claro*/
	text-decoration:none;
    color:#666;
    text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
    filter: dropshadow(color=#000, offx=1, offy=0);
    padding: 2px 0px 2px 0px;
	text-align:center;
}

.tabla a{
	display: block;
    /*border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid rgba(255,255,255, 0.2);
    background:#fafafa; /*gris oscuro*/
	text-decoration:none;
    color:#666;
    text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
    filter: dropshadow(color=#000, offx=1, offy=0);
    padding:8px;
    }

.tabla a:hover{
	background: none repeat scroll 0 0 #ccc;
	color: #fff;
	transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -webkit-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
}

/* Fin tablas */
	
.centrar-bloques table{
	/*margin: 0 auto;*/
	text-align: left;
	width:700px;
	border-collapse:collapse;
	/*display:inline-table;*/
}

tr:nth-child(even) {background-color: #f2f2f2}

th{
	text-align:left;
	color:#036;
	padding: 8px 10px;
	border-bottom: 1px solid #ddd;
}

td {
    padding: 8px 10px;
    text-align: center;
	border-bottom: 1px solid #ddd;
}

/****** FOOTER ********/
.footer{
	width:100%;
	/*height:400px;*/
	background-color:#333;
	padding:20px 0px 10px 0px;
}

.columna-3{
	width:20%;
	min-width:150px;
	min-height:100px;
	margin:0px 10px;
	/* IMPORTANTE */
	display:inline-table;
	padding:0px 0px;
	/*border:1px #CCCCCC solid;*/
}
@media (max-width: 600px) {
  .columna-3{
	  width:95%;
	  margin:0px;
  }
  
  .columna-2{
	  width:80%;
	  margin:10px;
  }
    .columna-1{
	  width:90%;
	  margin:0px;
  }
}

@media (max-width: 415px) {
  .columna-0{
	  width:90%;
	  margin:0px;
  }
}

.columna-3 p{
	color:#CCC;
	font-size:12px;
	text-align:center;
}

.columna-3 h2{
	font-size:18px;
	color:#fff;
	margin:2px;
	text-align:left;
	text-transform:uppercase;
}

.columna-3 ul{
	width:100%;
    list-style-type:none;
	margin:15px 0px;
	padding:0px;
	text-align:left;
	color:#BEBEBE;
}

.columna-3 ul a:link, ul a:visited{
	width:100%;
    color: #BEBEBE;;
    padding: 10px 0px;
    text-align: left; 
    text-decoration: none;
    display: inline-block;
	transition:all 1s ease;
	border-bottom:1px #666666 solid;
}

.columna-3 ul a:hover{
	color:#FFF;
	border-bottom:1px #FFF solid;
	/*background-color:#1E1E1E;*/
}

.columna-3 li{
	padding:0px;
	/*border-bottom:1px solid #eee;*/
	position:relative;
}