[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:#636;
	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{
	font-size:12px;
	
}

#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:15px;
	
	
	font-weight:bold;
  -webkit-text-fill-color:#8A084B;
  -webkit-text-stroke-color: #FAFAFA;
  -webkit-text-stroke-width: 0.5px; 
	
	
	
	
}

#bienvenidos {
	text-align: center;
	
}

footer{
	background-color:#000;
	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;
	background-color:#309;*/
	
}



#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: 100px;
	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;
	
}

#banner a {
	display: block;
	width: 240px;
	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: -200px;
	}
	
	.logo {
    display: none;
  }
	
	
}

#info {
	/*background: #333;
	color: #fff;*/
	text-align: center;
	padding: 15px;
}

#info .contenedor {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
}

.info-pet {
	margin: 20px;
}

.info-pet img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 7px solid #fff;
}

.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%);
	
	
}

.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);
	
}

#menu-bar:checked ~ .menu {
	transform: translateX(0%);
	z-index:200;
}

@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;
	}
}