@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
 
  .center {
    position:absolute;
    top:623%;
    left:83%;
    transform:translate(-50%,-50%);
  }
  .share-menu {
    position:relative;
    width:220px;
    height:120px;
  }
  .share-menu .share-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    background:#2980B9;
    color:#f5f5f5;
    font-size:30px;
    text-align:center;
    line-height:80px;
    border-radius:50%;
    cursor:pointer;
    z-index:2;
}
.share-menu i.fa-close {
    display:none;
}
.share-menu.active i.fa-envelope-o {
    display:none;
}
.share-menu.active i.fa-close {
    display:inline;
}
.share-menu .social-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:75px;
    height:75px;
    background:#fff;
    color:#222;
    border-radius:50%;
    cursor:pointer;
    text-align:center;
    line-height:75px;
    font-size:30px;
    transition:all 300ms ease-in-out 0ms;
}
.share-menu.active div:nth-child(2){
    top:-25%;
    left:50%;
    transform:translate(-50%,-100%);
    transition:all 300ms ease-in-out 0ms;
}
.share-menu.active div:nth-child(3){
    top:0%;
    left:100%;
    transform:translate(-50%,-50%);
    transition:all 300ms ease-in-out 80ms;
}
.share-menu.active div:nth-child(4){
    top:100%;
    left:100%;
    transform:translate(-50%,-50%);
    transition:all 300ms ease-in-out 160ms;
}
/* .share-menu.active div:nth-child(5){
    top:125%;
    left:50%;
    transform:translate(-50%,0%);
    transition:all 300ms ease-in-out 240ms;
} */
 .share-menu.active div:nth-child(6){
    top:100%;
    left:0%;
    transform:translate(-50%,-50%);
    transition:all 300ms ease-in-out 320ms;
}
/*
.share-menu.active div:nth-child(7){
    top:0%;
    left:0%;
    transform:translate(-50%,-50%);
    transition:all 300ms ease-in-out 400ms;
} */

/* Start: Google Maps Responsive */
.map-responsive {
    overflow:hidden;
    padding-bottom:400px; /*Reduce este valor si el mapa fuera muy alto, por ejemplo 250px, puedes usar porcentajes, 50%*/
    position:relative;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/*imagenes*/
img{
	width: 100%;
}

#img_logo{
	width: 80px; 
	height: 60px;
}


/* End: Google Maps Responsive */


@media screen and (max-width: 850px){
    .center {
        position:absolute;
        top:1415%;
        left:53%;
        transform:translate(-50%,-50%);
      }
    .share-menu {
        position:relative;
        width:220px;
        height:120px;
      }
    
}