@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
html
{
	height: 100%;
	overflow: hidden;
	width: 100%;
}
body
{
	background-color: #555;
	font-size: 0;
	height: 100%;
	margin: 0;
	padding: 0;
}
body *
{
	font-size: 100%;
}
h1, h2, h3, h4, h5, h6
{
	font-weight: normal;
}
#main
{
	height: 55vw;
	margin: 0 auto 0 0;
	width: 100%;
}
#facebook {
	background: url('images/facebook.png') center no-repeat;
	background-size: cover;
	text-indent: -9999px;
	-webkit-transition: 0.25s all ease-in-out;
	transition: 0.25s all ease-in-out;
	display: block;
	height: 50%;
	width: 100%;
}
#facebook:hover {
	background-image: url('images/facebook_hover.png');
}
#twitter {
	background: url('images/twitter.png') center no-repeat;
	background-size: cover;
	text-indent: -9999px;
	-webkit-transition: 0.25s all ease-in-out;
	transition: 0.25s all ease-in-out;
	display: block;
	height: 50%;
	width: 100%;
}
#twitter:hover {
	background-image: url('images/twitter_hover.png');
}
.tile
{
	background: #8E8E8E;
	box-sizing: border-box;
	display: inline-block;
	height: 50%;
	padding: 1.3%;
	transition: all 0.25s ease-in-out;
	vertical-align: top;
	width: 25%;
}
.tile:hover
{
	background: #FD8F19;
	cursor: pointer;
}
.tile.large
{
	width: 50%;
}
.tile.medium
{
	width: 37.5%;
}
.tile.min
{
	padding: 0;
	width: 12.5%;
}
.tile > .inner
{
	background-color: #5C5C5C;
	height: 100%;
	overflow: hidden;
	transition: all 0.25s ease-in-out;
	width: 100%;
}
.tile:hover > .inner
{
	background-color: #A55D0D;
}
/* TILES DIFFERENT BLACK COLORS */
.light
{
	background-color: #6C6C6C;
}
.light:hover
{
	background-color: #FD8F19;
}
.light > .inner
{
	background-color: #464646;
}
.light:hover > .inner
{
	background-color: #A55D0D;
}
.dark
{
	background-color: #3E3E3E;
}
.dark:hover
{
	background-color: #FD8F19;
}
.dark > .inner
{
	background-color: #282828;
}
.dark:hover > .inner
{
	background-color: #A55D0D;
}
.regular
{
	background-color: #555555;
}
.regular:hover
{
	background-color: #FD8F19;
}
.regular > .inner
{
	background-color: #373737;
}
.regular:hover > .inner
{
	background-color: #A55D0D;
}
/* TILES BACKGROUND IMAGES */
.acciones
{
	background-image: url('menu/acciones.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.aprende
{
	background-image: url('menu/aprende.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.blog
{
	background-image: url('menu/blog.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.conocenos
{
	background-image: url('menu/conocenos.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.cultura
{
	background-image: url('menu/cultura.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.despertemos
{
	background-image: url('menu/despertemos.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


@media (min-width: 600px) and (max-width: 768px) {
	.tile{
		width:50%;
		}
}

@media (min-width: 320px) and (max-width: 599px) {
	.tile{
		width:100%;
		}
		.tile.large{
			width: 100%;
		}
		.tile.medium {
    width: 100%;
}
}