@charset "UTF-8";

body, html{
margin:0;
text-align:center;

}

h3 {
  letter-spacing:2px;
  font-family:"century gothic";
  color:black;
  text-align:center;
}

.heading {
  text-align:left;
}

.pagina {
  width:70%;
  text-align:center;
  display:inline-block;
  overflow:hidden;
  position:relative;
}

.text {
  width:100%;
  font-family:"century gothic";
  font-size:15px;
  color:gray;
  text-align:center;
}

.imagens {
  width:100%;
  text-align:center;
  display:inline-block;
  overflow:hidden;
  position:relative;
}

.loja {
  float:left;
  width:500px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}

.about {
  text-align:left;
  color:gray;
  font-family:"century gothic";
  font-size:15px;
  margin-left:525px;
}
  
.contatos {
  width:70%;
  text-align:center;
  display:inline-block;
  overflow:hidden;
  position:relative;
}

.info {
  margin-left:525px;
  height:600px;
  text-align:left;
  font-family:"century gothic";
  font-size:15px;
  color:gray;
}


.mapa {
  float:left;
  height:600px;
  width:500px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}

.fb {
  display: flex;
  width: 50%;
  position: absolute;
  align-items: center;
  margin-left: 10%;
}

/* NavBar ou Footer */

#nav {
    display:table;
    background-color:white;
    text-align:center;
    font-family:"century gothic";
    width:100%;
    font-weight:bold;
    font-size:14px;
    padding-top:5px;
    align-items:center;
}


ul {
    list-style: none;
    display: inline-block;
}

ul li {
    float: left;
    margin: 0 20px;
}

ul li a {
    color: gray;
    text-decoration: none;
}

ul li a:hover {
    color: #BDBDBD;
}


@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    50% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    20%,
    80% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    50% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    80% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
}

.shake:hover {
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
}