@font-face{
 font-family: luca;
 src: url(../fonts/luca.ttf);
 }
body {
 background-image: url(../img/copas.jpg);
 background-size: 100vw 100vh;
 background-attachment: fixed;
 }
.flex-container {
 margin: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.banda_logo {
 width: 100%;
 height: 100px;
 background: #cf190e;
 margin-top: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.banda_datos {
 box-sizing: border-box;
 width: 100%;
 color: white;
 background-color: rgba(207,25,14,.2);
 border: 2px solid white;
 margin-top: 0;
 margin-bottom: 20px;
 display: flex;
 justify-content: center;
 text-align: center;
}
.intro {
 width: 100%;
 max-width: 890px;
 background: rgba(250,243,196,0.9);
 color: #B18904;
 margin-top: 20px;
 border-radius: 5px;
 display: flex;
 flex-direction: column;
}
.articulo {
 width: 100%;
 max-width: 890px;
 background: rgba(250,243,196,0.9);
 color: #B18904;
 margin-top: 20px;
 border-radius: 5px;
 display: flex;
 flex-direction: row;
}
.articulo p {
  margin: 0.5em;
  text-align: justify;
  text-indent: 1em;
 }
.articulo img {
 width: 20%;
 margin: 0.5em;
}
.promo {
 width: 45%;
 background: white;
 color: #B18904;
 margin-top: 20px;
 border-radius: 5px;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.promo img {
 max-width: 100%;
 border-radius: 5px;
}
.complement {
 width: 100%;
 margin: 10px 0;
 border-radius: 5px;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.complement img {
 max-width: 90%;
 border-radius: 5px;
 }
.promocont {
 background: rgba(0,0,0,0.3);
 width: 100%;
 position: absolute;
 bottom: 20px;
 padding-bottom: 5px;
 color: #fff;
 }
.promocont h2 {
 text-align: center;
 }
.promocont p {
 text-align: center;
 }
.intro h2 {
 text-align: center;
 }
.pagina {
 width: 100%;
 max-width: 890px;
 margin: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.item {
 position: relative;
 width: 47%;
 max-width: 890px;
 background: rgba(250,243,196,1);
 color: #B18904;
 margin-top: 20px;
 border-radius: 5px;
 display: flex;
 flex-direction: column;
}
.item h2 {
 text-align: center;
 }
.nombre {
 font-weight: bold;
 padding: 0 .5em;
}
.precio {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}
.detalle {
 padding: 0 .5em;
 margin-left: 1em
}
.izq {
 max-width: 100%;
 border-radius: 5px;
 margin: .5em .8em .5em 0;
 float: left;
}
.nota {
 font-weight: bold;
 padding: 0 .5em 0 0;
}
.logo {
  max-width: 100%;
  height: 100%;
}
.marco, .promo {
 position: relative;
}
.marco img {
 box-sizing: border-box;
 max-width: 100%;
 border: 4px solid white;
}
.contenedor {
 background: rgba(207,25,14,0.3);
 width: 100%;
 position: absolute;
 top: 4px;
 /*padding-bottom: 5px;*/
 color: #f8e201;
 font-family: luca;
 /* line-height: 0.2; */
 }
.contenedor h2 {
 text-align: center;
 margin-top: 0.3em;
 margin-bottom: 0;
 font-size: 1.5em;
 }
.contenedor p {
 text-align: center;
 margin-top: 0;
 }
.banda_menu {
 width: 100%;
 margin-top: 20px;
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
}
.but {
 border: 2px solid white;
 background-color: rgba(207,25,14,.3);
 width: 100px;
 height: 100px;
 color: white;
 font-weight: bold;
 margin: 0.2em;
 border-radius: 50%;
 box-shadow: 0 0 10px #000;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.but:hover {
 background-color: rgba(207,25,14,.9);
 cursor: pointer;
}
.but-2 {
 border: 2px solid white;
 background-color: rgba(207,25,14,.3);
 width: 100px;
 height: 50px;
 color: white;
 font-weight: bold;
 margin: 0.1em;
 border-radius: 5%;
 box-shadow: 0 0 10px #000;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.but-2:hover {
 background-color: rgba(207,25,14,.9);
 cursor: pointer;
}
.nave {
 padding: 0 .5em;
}
.nave li {
 list-style: none;
 line-height: 1.3;
}
.nave a {
 text-decoration: none;
 padding: 0 5px;
 border: 1px solid #B18904;
 color: #B18904;
 font-weight: bold;
}
.nave a:active, .nave a:visited {
 color: #B18904;
}
.nave a:hover {
 background: rgba(250,243,196,1);
 color: blue;
}
.hname {
 text-align:center;
 color: #cf190e;
 font-family: luca;
 line-height: 0.2;
 font-size: 1.2em;
 }
#map {
 text-align: center;
 }
#map iframe {
 width: 95%;
 height: 400px;
 }
.portasello {
 background: rgba(207,25,14,0);
 width: 100%;
 position: absolute;
 top: 20px;
 text-align: right;
 }
.sello {
 width: 20%;
 height: auto;
 }
.pdfview {
  margin: auto;
  display: block;
  width: 90%;
  height: 78vh;
}
.box-1 {
  border: 2px solid white;
  background-color: rgba(207,25,14,.4);
  width: 100%;
  margin-top: .1em;
  margin-bottom: .1em;
}
.box-pic-2 {
width: 30%;
min-width: 320px;
margin: .1em;
}
.box-pic-2 img {
width: 80%;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
.footer {
 background: rgba(0,0,0,0.3);
 margin-top: 10px;
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
 }
.footer p {
 color: white;
 padding: 0.4em;
 border-radius: 0.2em;
 }
.footer a {
 text-decoration: none;
}
.footer a:visited {
 color: white;
}
@media screen and (max-width: 680px) {
.articulo {
 align-items: center;
 flex-direction: column;
}
.item {
 width: 100%;
 }
.promo {
 width: 100%;
 }
.promo img {
 max-width: 100%;
 }

}