/*---------
 GENERALES
----------*/

body {
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	font-size: 100%;
}

.bold {
	font-weight: 600;
}

.contenedor {
	width:960px;
	margin-right: auto;
	margin-left: auto;
}

.clear {
	clear:both;
}

/*---------
   INDEX
----------*/

header {
	width:100%;
	color:white;
	height:95px;
	padding-top:10px;
	padding-bottom:10px;
}

header img {
	float:left;
}

header h1 {
	float:right;
	color:#77777b;
	font-size: 1.3em;
	font-weight: 400;
	margin-top:43px;
}

.principal {
	width:100%;
	background-color:#f0f0f0;
}

.grilla {
	width:100%;
	padding-top:68px;
	padding-bottom:68px;
}

.grilla img {
	width:100%;
}

.cuadrado-grande {
	width:50%;
	float:left;
	height:480px;
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
    overflow: hidden;
}

.cuadrado-chicho {
	width: 25%;
	float:left;
	height:240px;
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
    overflow: hidden;
}

.fila {
	clear:both;
	width:100%;
}

.fila-frincipal {
	width:100%;
}

.columna-grande {
	width:100%;
}

.columna {
	width:25%;
	float:left;
}

h2 {
	font-weight:300;
	font-size: 1.2em;
	color:white;
	text-align: center;
	padding-top:35%;
	text-transform: uppercase;
}

.corporate {
	background-color: #1980a3;
}

.entre {
	background-color: rgb(114, 184, 102);
}

.beauty {
	background-color: rgb(195, 103, 161);
}

.health {
	background-color: rgb(72, 175, 176);
}


.desplegado {
	width:90%;
	height:90%;
	padding:5%;
	cursor:pointer;
	margin-top:100%;
	overflow: hidden !important;
	visibility: hidden;
}

.contenido-desplegado {
	margin-top:30%;
	margin-bottom: 0;
}

.contenido-desplegado-chico {
	margin-top:10%;
	margin-bottom: 0;
}


.contenido-desplegado h3, .contenido-desplegado-chico h3 {
	font-weight:400;
	text-align: center;
	margin-top:5px;
	margin-bottom:5px;
}

.contenido-desplegado-chico h3 {
	font-size: 1em;
}

.contenido-desplegado a, .contenido-desplegado-chico a{
	display:block;
	height:30px;
	line-height: 30px;
	border: 1px solid white;
	border-radius: 2px;
	color:black;
	text-align: center;
	text-decoration: none;
	margin-right: auto;
	margin-left: auto;
	font-weight: 600;
	bottom:0;
}

.contenido-desplegado a{
	margin-top: 30%;
}

.contenido-desplegado-chico a{
	margin-top: 0;
}

.contenido-desplegado a:hover, .contenido-desplegado-chico a:hover{
	background-color: white;
}

.corporate-alpha {
	background-color: rgba(71, 153, 181, 0.8);
}

.entre-alpha {
	background-color: rgba(114, 184, 102, 0.8);
}

.beauty-alpha {
	background-color: rgba(195, 103, 161, 0.8);
}

.health-alpha {
	background-color: rgba(72, 175, 176, 0.8);
}

#cuadrado1 {
	background-image: url('../img/profile/1.jpg');
}

#cuadrado1:hover #desplegado1 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado2 {
	background-image: url('../img/profile/2.jpg');
}

#cuadrado2:hover #desplegado2 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado3 {
	background-image: url('../img/profile/3.jpg');
}

#cuadrado3:hover #desplegado3 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado4 {
	background-image: url('../img/profile/4.jpg');
}

#cuadrado4:hover #desplegado4 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado5 {
	background-image: url('../img/profile/5.jpg');
}

#cuadrado5:hover #desplegado5 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado6 {
	background-image: url('../img/profile/6.jpg');
}

#cuadrado6:hover #desplegado6 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado7 {
	background-image: url('../img/profile/7.jpg');
}

#cuadrado7:hover #desplegado7 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado8 {
	background-image: url('../img/profile/8.jpg');
}

#cuadrado8:hover #desplegado8 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado9 {
	background-image: url('../img/profile/9.jpg');
}

#cuadrado9:hover #desplegado9 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado10 {
	background-image: url('../img/profile/10.jpg');
}

#cuadrado10:hover #desplegado10 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#cuadrado11 {
	background-image: url('../img/profile/11.jpg');
}

#cuadrado11:hover #desplegado11 {
	display:block;
	margin-top:0 !important;
	visibility:visible;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

footer {
	width:100%;
	background-color: #2a2426;
	height:140px;
}

footer ul {
	padding-left:0px;
	margin-right: auto;
	margin-right: auto;
	padding-top:40px;
	text-align: center;
	margin-top: 0;
}


footer ul li {
	display:inline-block;
	text-transform: uppercase;
	font:0.8em;
	font-weight: 300;
	margin-left: 20px;
}

footer p {
	color:#7d7d7d;
	font-size: 0.7em;
	text-align: center;
}

.color-corpo {
	color: #1980a3;
}

.color-entre {
	color: rgb(114, 184, 102);
}

.color-beauty {
	color: rgb(195, 103, 161);
}

.color-health {
	color: rgb(72, 175, 176);
}


/*---------
 RESPONSIVE
----------*/


@media (max-width: 960px) {

.contenedor {
	width:100%;
}

} /* End 960 */

@media (max-width: 768px) {

body {
	font-size:85% !important;
}

.desplegado {
  height: 48%;
  display:block;
  margin-bottom:0 !important;
  visibility:visible;
  width: 91%;
  padding: 5%;
  cursor: pointer;
  margin-top: 78%;
}

.frase {
	display:none;
}

} /* End 768 */


@media (max-width: 480px) {

body {
	font-size:85% !important;
}

.columna {
	width:100%;
	float:none;
}

.cuadrado-chicho {
  width: 50%;
}

.cuadrado-grande {
	width:100%;
	float:none;
}

.desplegado {
  margin-top: 62%;
}

.fila {
	clear:none;
}

} /* End 480 */

@media (max-width: 321px) {

.cuadrado-chicho {
  width: 100%;
}

.desplegado {
  margin-top: 54%;
  padding-top: 0%;
 height: 22%;
}


} /* End 320 */