[class*="fontawesome-"]:before {
	font-family: 'FontAwesome', sans-serif;
  }
  
  * {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  
  }
  
  body {
	  font-family: 'Open Sans', sans-serif;
	  
  }
  
  header {
	  width: 100%;
	  height: 150px;
	  background:#500303;
	  color: #fff;
	  
	  /*position: fixed;*/
	  top: 0;
	  left: 0;
	  /*z-index: 100;*/
  }
  
  
  
  
  .contenedor {
	  width: 98%;
	  margin: auto;
	  
	  
  }
  
  
  
  h1 {
	  float: left;
  }
  
  header .contenedor {
	  display: table;
	  
	  
	  
	  
  }
  
  section {
	  width: 100%;
	  margin-bottom: 25px;
  }
  
  
  #banner .contenedor{
	 

	  position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: #fff;
  }
  
  #elcontenido{
	  margin-top:180px;
  
  }
  
  #elcontenido .contenedortablas{
	  
	  font-size:12px;
	  /*background-color:#090;*/
	  padding:10px;
	  width:100%;
	  height:100%;


  }
  #elcontenido .contenedortablas h2{
	  font-size:18px;
	  color:#F39;
	  
	  }
  
  
  #banner .contenedor h2{
	  font-size:28px;
  }
  
  #bienvenidos {
	  text-align: center;
	  
  }
  
  footer{
	  background-color:#333;
	  color:#CCC;
	 
	  
  }
  
  footer .contenedor {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  padding-bottom: 25px;
	 
	  
  }
  
  .copy {
	  font-size: 15px;
	  /*font-weight:bold;*/
	  text-align:center;
  }
  
  .sociales {
	  width: 100%;
	  text-align: center;
	  font-size: 10px;
	  padding-top:5px;
  }
  
  .sociales a {
	  color: #333;
	  text-decoration: none;
  }
  
  @media (min-width:768px) { 
	  .sociales {
		  width: auto;
	  }
	  
	  footer .contenedor {
		  justify-content: space-between;
	  }
	  
  }
  
  
  @media (min-width:1024px) {
	  .contenedor {
		  width: 1000px;
		 
	  }
	  
	  #banner .contenedor{
		  font-size:20px;
	  }
	  
	  #banner .contenedor h2{
	  font-size:32px;
	  }
	  
	  .sociales {
	   font-size: 15px;
  }
	  
  }
  
  
  #blog{
	  /*margin-top:180px;*/
	  
  }
  
  
  
  #blog h3, h4 {
	  text-align: center;
  }
  
  #blog .contenedor{
	  display: flex;
	  justify-content: center;
	  flex-wrap: wrap;
  }
  
  #blog article {
	  margin: 15px;
	  background-color:#9C3;
	  width:100%;
	  
  }
  
  #blog img {
	  width: 100%;
	  /*max-width: 280px;*/
	  max-width:100%;
	  
  }
  
  #blog .grafica {
	  width:100%;
	  height:300px;
	  background-color:#060;
	  margin-top:50px;
	  
	  
  
  }
  
  
  
  #banner {
	  margin-top: 0px;
	  position: relative;
  }
  
  #banner img {
	  width: 100%;
	  height: 100%;
  }
  
  #banner .contenedor {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translateX(-50%) translateY(-50%);
	  color: #fff;
  }
  
  #banner h2 {
	  font-size: 28px;
	  color: #fff;
	  
  }
  
  #banner a {
	  display: block;
	  width: 200px;
	  color: #fff;
	  text-decoration: none;
	  padding: 7px;
	  margin-top: 10px;
	  border: 3px solid #fff;
	  
	  background: rgba(51,51,51,0.5);
	  
  }
  
  #banner a:hover {
	  background: rgba(51,51,51,0.5);
  }
  
  @media (min-width:480px) {
	  #banner h2 {
		  font-size: 40px;
	  }
	  
	  #banner a {
		  margin-top: 25px;
	  }
  }
  
  @media (min-width:768px) { 
	  #banner {
		  height: 300px;
		  overflow: hidden;
	  }
	  
	  #banner img {
		  height: auto;
		  margin-top: -100px;
	  }
	  
	  
	  
	  
  }
  
  @media (min-width:1024px) { 
	  #banner img {
		  margin-top: -130px;
	  }
	  
	  .logo {
	  display: none;
	}
	  
	  
  }
  
  #info {
	  background: #333;
	  color: #fff;
	  text-align: center;
	  padding: 15px;
  }
  
  #info .contenedor {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  
  }

  #info .contenedor a {
	  text-decoration: none;
	 
  }
  
  .info-pet {
	  margin: 30px;
	  color: rgb(129, 119, 119);
	  	 
  }
  
  .info-pet img {
	  width: 180px;
	  height: 180px;
	  border-radius: 50%;
	  border: 7px solid rgb(104, 3, 3);
  }


  .info-pet img:hover{
	background-color:#ffffff;
	  color:#f7f2f4;
	  text-align: center;
	  padding: 20px;
	 border-radius: 50%;
	  transform: scale(1.05);
  }

  
  .titulo{
	  display:none;
  
  }
  
  @media (min-width:480px) {
	  .info-pet {
		  width: 40%;
	  }
  }
  
  @media (min-width:1024px) {
	  .info-pet {
		  width: auto;
	  }
	  
	  .titulo{
		  display:block;
		  font-weight:bold;
		  font-size:20px;
	  }
  }
  #menu-bar {
	  display: none;
  }
  
  header label {
	  float: right;
	  font-size: 28px;
	  margin: 6px 0;
	  cursor: pointer;
  }
  
  .menu {
	  position: absolute;
	  top: 150px;/*comienzo menu*/
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background: rgba(51,51,51,0.9);
	  transition: all 0.5s;
	  transform: translateX(-100%);
	  z-index:200;
	  
	  
  }
  
  .menu a {
	  display: block;
	  color: #fff;
	  height: 50px;
	  text-decoration: none;
	  padding: 15px;
	  border-bottom: 1px solid rgba(255,255,255,0.3);
	  
  
	  
  }
  
  .menu a:hover {
	  background: rgba(255,255,255,0.3);
	  color:#FF0;
	  text-decoration:none;
	  
  }
  
  #menu-bar:checked ~ .menu {
	  transform: translateX(0%);
  }
  
  @media (min-width:1024px) {
	  .menu {
		  position: static;
		  width: auto;
		  height: auto;
		  transform: translateX(0%);
		  float: right;
		  display: flex;
	  }
	  
	  .menu a {
		  border: none;
	  }
	  
	  header label { 
		  display: none;
	  }
  }