@charset "utf-8";
/* CSS Document */

.aboutdata{
  position:absolute;
  left:20%;
  width:60%;
  max-width:60%;
  top:auto;
  bottom:500px;
  text-align:left;
  font-size:1.4em;
  color:#FFF;
  z-index:5;
  transition: all 0.5s ease 0.6s;
}
#aboutbagui{
  display:inline-block;
  width:280px;
  max-width:100%;
  float:left;
}
#aboutviva{
  display:inline-block;
  width:260px;
  float:left;
  clear:both;
}
.aboutdata .tile-title{
	height:auto;
}
.active .aboutdata{
  top:auto;
  bottom:230px;
}
.linkmail{
	display:block;
  font-size:0.7em;
  color:#FFF;
  font-weight:bold;
  margin-bottom:20px;
  margin-top:5px;
	transition:color 0.2s;
}

.linkmail:hover{
	color:#000;
}
.aboutinfo{
	display:block;
	margin-top:20px;
	font-size:0.6em;
	line-height: 1em;
}	
.plata{
	color:#FFF;
	font-weight:bold;
	text-align:center;
  position:absolute;
  right:20%;
  width:320px;
  max-width:60%;
  bottom:500px;
  text-align:right;
	line-height: 0.9em;
	font-size:1.8em;
  transition: all 0.5s ease 0.5s; 
  z-index: 30;
}
.plata a{
	color:#FFF;
	transition:color 0.2s;
}
.plata a:hover{
	color:#000;
}
.active .plata{
  bottom:250px;
}
#aboutsocial{
	position: absolute;
  top:0;
	right:0;
	height: 200px;
	*background:url(../images/socialme.png) center 50px no-repeat;
	background-size:140px auto;
  transition: all 0.5s ease 0.5s; 
  z-index: 30;
}
#aboutsocial .sticker{
	width:42px;
	height:42px !important;
}
#aboutsocial .sticker div{
	width:40px;
	height:40px !important;
	background-size:80px auto;
}
#aboutsocial .sticker .s_fb {
	background-position: 0px 0px;
	transition: background-position 0.3s;
}
#aboutsocial .sticker:hover .s_fb {
	background-position: 40px 0px;
}
#aboutsocial .sticker .s_be {
	background-position: 0px -40px;
	transition: background-position 0.3s;
}
#aboutsocial .sticker:hover .s_be {
	background-position: 40px -40px;
}
#aboutsocial .sticker .s_linkedin {
	background-position: 0px -120px;
	transition: background-position 0.3s;
}
#aboutsocial .sticker:hover .s_linkedin {
	background-position: 40px -120px;
}
#aboutsocial .sticker .s_insta {
	background-position: 0px -200px;
	transition: background-position 0.3s;
}
#aboutsocial .sticker:hover .s_insta {
	background-position: 40px -200px;
}
#aboutsocial .sticker .s_tweet {
	background-position: 0px -240px;
	transition: background-position 0.3s;
}
#aboutsocial .sticker:hover .s_tweet {
	background-position: 40px -240px;
}
#aboutsocial .sticker .s_vimeo {
	background-position: 0px -80px;
	transition: background-position 0.3s;
}
#aboutsocial .sticker:hover .s_vimeo {
	background-position: 40px -80px;
}

#aboutlogoviva{
	display:block;
	position: absolute;
	right:0;
  width:200px;
  height:200px;
  background: url(../s_viva.png) center no-repeat;
  background-size: 0px;
  transition: background-size 0.3s ease 0.56s;
  z-index: 40;
}
.active #aboutlogoviva{
  background-size: 200px;
}
@media all and (max-width:1024px) {
.plata{
display:none;
	width:250px;
font-size:2.0em;
}
#aboutlogoviva{
display:none;
}
}

@media all and (max-width:800px) {
.plata{
display:none;
}
#aboutsocial{
  top:100%;
	height:42px;
	right:auto;
	left:0;
}

}
@media all and (max-height: 650px)  {
.active .aboutdata{
	bottom:170px;
}
.active .plata{
  bottom:190px;
}
}
@media all and (max-height: 650px) and (max-width:650px)  {
.active .aboutdata{
	font-size:1.4em;
  bottom:225px;
}
}
@media all and (max-height: 600px)  {
.plata{
display:none;
font-size:1.4em;
}
#aboutlogoviva{
display:none;
}
.aboutdata{
	top:-220px;
	bottom:auto;
  width:60%;
    font-size:1.4em;
	top:-420px;
}
.active .aboutdata{
	top:20px;
	bottom:auto;
}
.active .plata{
  bottom:180px;
}
#aboutbagui{
  width:260px;
}
#aboutviva{
	position: absolute;
	right:0;
  text-align:right;
  width:300px;
}
#aboutsocial{
  top:100%;
  margin-top:-40px;
  	left:auto;
	right:0;
	height: 42px;
}

}

@media all and (max-height: 600px) and (max-width:900px)  {
.aboutdata{
  left:10%;
  width:80%;
  max-width:80%;
  font-size:1.4em;
}	
#aboutviva{
}
#aboutbagui{
  display:inline-block;
  *max-width:100%;
  float:left;
}
#aboutsocial{
  bottom:0px;
}
}
@media all and (max-height: 600px) and (max-width:650px)  {
.aboutdata{
  font-size:1.4em;
}	
#aboutviva{
	position: relative;
	right:0;
  text-align:left;
}
#aboutbagui{
  display:inline-block;
  *max-width:100%;
  float:left;
}
}
@media all and (max-height: 500px) {
.aboutdata{
  font-size:1.4em;
}
}
@media all and (max-height: 500px) and (max-width:600px) {
.aboutdata{
  left:10% !important;
  width:80% !important;
  max-width:80% !important;
  font-size:1.2em !important;
}
#aboutbagui{
  display:inline-block;
  width:100%  !important;
  max-width:100%  !important;
  float:left;
}
#aboutsocial{
  bottom:20px;
}
}
@media all and (max-height: 450px) {
.aboutdata{
  font-size:1.3em;
}
#aboutbagui{
  max-width:300px;
}
}
@media all and (max-height: 450px) and (max-width:600px) {
.aboutdata{
  left:10% !important;
  width:80% !important;
  max-width:80% !important;
  font-size:1.1em;
}
#aboutbagui{
  max-width:100%;
}
}
@media all and (max-height: 350px) {
.aboutdata{
  font-size:1.1em;
}
.active .aboutdata{
  bottom:160px;
}
}