*{
	margin: 0;
	padding: 0;
}
html, body , #main{
  height: 100%;
}
@-webkit-keyframes appear {
  from {top: 0px;opacity:0;}
  to {top: 20px;opacity:1;}
}
@-moz-keyframes appear {
  from {top: 0px;opacity:0;}
  to {top: 20px;opacity:1;}
}
@-ms-keyframes appear {
  from {top: 0px;opacity:0;}
  to {top: 20px;opacity:1;}
}
@-o-keyframes appear {
  from {top: 0px;opacity:0;}
  to {top: 20px;opacity:1;}
}


@media(min-width:481px){
	#main{
		background:url('../img/fondo.png') no-repeat center center;
		animation: appear 2s linear;
	}
}
@media(max-width:480px){
	#main{
		animation: appear 2s linear;
	}
}

p{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a{
	text-decoration: none;
	text-align: center;
	width: 300px;
	height: 300px;
	overflow:hidden;
}
a img{
	max-width:80%;
	transition: all .3s ease-in-out;
	filter: grayscale(1);
}
a:hover img{
	transition: all .3s ease-in-out;
	filter: grayscale(0);
	max-width:90%;
}
a p{
	transition: all .3s ease-in-out;
}

a:hover p{
	color: black;
	text-shadow: none;
	transition: all .3s ease-in-out;
}
#main,.logo{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.logo img{
	max-width:70%;
}


@media(min-width:481px){
	.sites{
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
@media(max-width:480px){
	.sites{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
}
.sites div{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin:20px 50px;
	padding:20px;
}

.sites p{
    color: white;
    text-shadow: 5px 0px 10px cyan, 0px 5px 10px magenta, 5px 5px 10px yellow, 0px 0px 10px black;
 }