body {
    margin:0;
    font-family: 'EB Garamond', serif;
}
h1,h2,h3,p {
    text-align:center;
}
a:link, a:active, a:visited, a:hover {
    color:
    #5e5e5e;
}
ul li {
    display:inline-block;
}
ol li{
  line-height: 2em;
}
.wrapper{
    position:relative;
    min-height:100vh;
}
.container{
    padding-bottom: 150px;
}
.main{
  max-width: 920px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.navbar{
    display:flex;
    align-items:center;
    justify-content:center;
}
.brand{
  width: 100px;
  height: auto;

margin-top: 40px;
}
.navbar nav {
    text-align:center;
}
.navbar nav ul {
    padding-left:0px;
    max-width: 250px;
}
.navbar nav ul li {
  cursor: pointer;
}
.opcion-menu{
  text-decoration: underline;
}
.pipe {
    margin-left: 5px;
    margin-right: 5px;
}
.main h1{
    font-weight: 200;
font-size: 22px;
padding-left: 20px;
padding-right: 20px;
}
.main p{
  text-align: left;
  line-height: 1.5em;
}
.main .hero-img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width: 280px;
}
.responsive-img{
    max-width:100%;
    height: auto;
}
.cent-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 300px;
}
.autora,.sobre-obra{
  text-align: center!important;
  max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.img-autora{
  max-width: 250px;
}
footer{
    position:absolute;
    bottom: 0;
    width:100%;
    height: 70px;
    text-align:center;
    font-size: 10pt;
}
footer span{
    display: block;
}
.cta, button {
    font-size: 18pt;
    text-align: center;
}
button{
  background-color:#5e5e5e;
  color:white;
}
button:hover{
  cursor:pointer;
}
@media screen and (min-width: 576px){
  .container {
    padding-top: 30px;
}
  .brand{
    float: left;
  margin-left: 40px;
  }
  .navbar{
      padding-top:30px;
  }
  .navbar nav {
    margin-left: -130px;
  }
  .navbar-en nav {
    margin-left: -180px!important;
  }
}
@media screen and (min-width: 769px){
  .navbar nav ul {
    max-width:100%;
}

}