body{
	margin:0;
	background: #39D2FF;
    font-family: sans-serif, verdana;
    text-align: center;
    align-items: center;
    color: #fff;
}


.imagen_1 {
    position: fixed;
    top: -20px;
    left: 0;
    margin-left: 0;
    min-height: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: url(../img/fondo.jpg) no-repeat 50% 0;
    background-size: cover;
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
    z-index: 1;
    background-color: #39D2FF;
}

.marca {
    position: absolute;
    float: left;
    width: 368px;
    height: 97px;
    z-index: 99;
    left: 50%;
    top: 20px;
    margin-left: -184px;
    z-index: 9;
}
.centro {
    width: 90%;
    height: 380px;
    margin: 0 5%;
    text-align: center;
    position: relative;
    display: block;
    z-index: 9;
}

.centro1 {margin-top: 140px; margin-bottom: 64px;}

.mapa{
    height: 250px;
    align-items: center;
}
.informacion {
    width: 340px;
    align-items: center;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -170px;
    border-bottom: 1px solid #39D2FF;
    margin-bottom: 44px;
    padding-bottom: 20px;
}
.iconosredes{margin-top: 20px; }

.telefono{ 
    float: left; 
    margin-right: 10px; 
    background: url('../img/telefono.png') no-repeat scroll 50% 0px transparent;
    width: 44px;
    height: 44px;   
    z-index: 99999999;
    cursor: pointer;
}
.whatsapp{
    float: left; 
    margin-right: 10px; 
    background: url('../img/whatsapp.png') no-repeat scroll 50% 0px transparent;
    width: 44px;
    height: 44px;    
    z-index: 99999999;
    cursor: pointer;
}
.email{
    float: left; 
    margin-right: 10px; 
    background: url('../img/email.png') no-repeat scroll 50% 0px transparent;
    width: 44px;
    height: 44px;
    z-index: 99999999;
    cursor: pointer;
}
.comollegar{
    float: right; 
    z-index: 99999999;
    cursor: pointer;
    background: url('../img/comollegar.png') no-repeat scroll 50% 0px transparent;
    height: 44px;
    width: 165px;
}







h1{
  text-align: center;
  font-size: 24px;
  color: #ffffff;
}


h2{
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;

  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}




/* REDES */

#redes {
    position: absolute;
    float: left;
    width: 162px;
    height: 80px;
    z-index: 9;
    left: 50%;
    margin-left: -81px;
    text-decoration: none;
    list-style: none;
    margin-top: 80px;
}
#redes li{
    float: left;
	width: 44px;
	height: 44px;
	padding-left: 10px;
	text-decoration:none;
	list-style:none;
}
#redes li a{
	text-decoration:none;
}
#redes li a:hover{
	opacity:.5;
	text-decoration:none;
}
.facebook {
    background: url('../img/facebook.png') no-repeat scroll 50% 0px transparent;
    width: 44px;
    height: 44px;;	
    float: left;
    z-index: 99999999;
    cursor: pointer;
}
.instagram {
    background: url('../img/instagram.png') no-repeat scroll 50% 0px transparent;
    float: left;
    width: 44px;
    height: 44px;
    z-index: 99999999;
    cursor: pointer;
}
.web {
    background: url('../img/web.png') no-repeat scroll 50% 0px transparent;
    float: left;
    width: 44px;
    height: 44px;
    z-index: 99999999;
    cursor: pointer;
}