@font-face {
      font-family: 'eb_garamond'; /* Nombre de la familia de fuentes */
      src: url('assets/fonts/garabd.ttf') format('ttf'); /* Ruta y formato */
    
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
      font-style: bold;
      font-weight: bolder;
    }
    #countdown {
      font-family: eb_garamond;
      color: #656472;
      text-align: center;
      font-size: 2em;
      margin-top: 38px;
    }
    #countdown span {
      margin: 0 10px;
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      text-align: center;
    }
    h1{
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      text-align: center;
      font-size: 300%;
      margin-top: -21px;
      margin-bottom: -27px;
      color: #656472;
    }
    h2,h3{
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      text-align: center;
      margin-left: 15%;
      margin-right: 15%;
      margin-top: 6px;
      margin-bottom: 3px;
      padding-top: 12px;
      padding-bottom: 18px;
      color: #bfabb4;
    }
    h4{
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      text-align: center;
      color: #656472;
    }
    p{
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      text-align: justify;
      margin-left: 15%;
      margin-right: 15%;
      margin-top: 18px;
      margin-bottom: 3px;
    }
    #clr{
      color: #656472;
    }
    .center{
      text-align: center;
    }
    #portada{
      display: block;
      margin-left: 15%;
      margin-right: 15%;
      width: 70%;
      border-radius: 30px;
    }
    #margin{
      text-align: center;
      width: 70%;
    }
    .mesas{
      min-width: 210px;
      max-width: 300px;
      margin-top: 9px;
      margin-bottom: 18px;
      border-radius: 15px;
    }
    #left{
      margin-left: 15%;
      display: inline-block;
      vertical-align: top;
      max-width: 70%;
      min-width: 210px;
      border-radius: 30px;
    }
    #right{
      min-width: 300px;
      text-align: justify;
      display: inline-block;
      vertical-align: left;
      width: auto;
      max-width: 90%;
    }
    #prehalf{
      width: auto;
      min-width: 30%;
      vertical-align: center;
      margin-left: 3%;
    }
    #half{
      width: auto;
      min-width: 70%;
      max-width: 70%;
      display: inline-block;
      margin-top: 18px;
      vertical-align: center;
    }
    iframe{
      margin-left: 5%;
      min-width: 70%;
      max-width: 90%;
      vertical-align: center;
      display: inline-block;
      margin-top: 18px;
      border-radius: 30px;
    }
    #section1{
      padding-top: 6px;
      padding-bottom: 24px;
    }
    .bfabab{
      background-color: #bfabab;
      margin-bottom: 18px;
      border-radius: 9px;
    }
    .nn2{
      margin-top: 12px;
      color: #656472;
      margin-bottom: 18px;
      border-radius: 9px;
    }
    #libro{
      color: #bfabb4;
    }
    .txtmap{
      background-color: #bfabab;
      margin-bottom: 18px;
      border-radius: 9px;
      padding-bottom: 24px;
    }
    body{
      background-color: #f2eeee;
    }
    .squared{
      display: block;
      margin-left: 12%;
      vertical-align: center;
      border-radius: 9px;
    }
    .squared2{
      display: block;
      vertical-align: center;
      border-radius: 9px;
    }
    .bgborder{
      border-radius: 30px;
    }
    .italic{
      font-style: italic;
    }
    .uln{
      text-decoration-line: underline;
    }
    a:link{
        text-decoration: none;
    }
    /* Slideshow container */
    .slideshow-container {
      max-width: 75%;
      position: relative;
      margin: auto;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 1.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
    }
    .header{
      margin-top: 6px;
      margin-bottom: 6px;
      padding-top: 6px;
      padding-bottom: 6px;
      position: relative;
    }
    .middle{
      margin-top: 6px;
      margin-bottom: 6px;
      padding-top: 6px;
      padding-bottom: 6px;
      position: static;
    }
    .footer{
      margin-top: 24px;
      margin-bottom: 24px;
      padding-top: 24px;
      padding-bottom: 24px;
      position: relative;
    }
    #f1{
      display: block;
      margin-left: 24%;
      margin-right: 24%;
      width: 200px;
    }
    #f2{
      display: block;
      margin-left: 24%;
      margin-right: 24%;
      width: 200px;
      height: 50px;
    }
    .inline_names{
      max-width: 70%;
      width: auto;
      min-width: 200px;
      margin-top: 18px;      
      margin-bottom: 18px;
      border-radius: 9px;
      padding-bottom: 24px;
      font-family: eb_garamond;
      text-align: center;
      margin-left: 15%;
      margin-top: 6px;
      margin-bottom: 3px;
      padding-top: 12px;
      padding-bottom: 18px;
      color: #bfabb4;
    }
    audio {
      position: fixed;
      width: 0px;
      border-radius: 50%;
      opacity: 0%;
    }
    .eb-garamond-stl{
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
    }
    button {
      width: 45px;
      height: 45px;
      text-align: left;
      border: 3px solid #b1b3b4;
      background-color: #287bd3;
      color: white;
      padding: 10px 15px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none;
      position: fixed;
      border-radius: 50%;
    }
    button:hover {
      background-color: #0056b3;
      border-color: #afcff2;
    }
    button:active {
      transform: scale(0.95);
    }
    i {
      width: 45px;
      height: 45px;
      color: #656472;
    }
    .button{
      display: inline-block;
      width: 45px;
      height: 45px;
      position: absolute;
    }
    .grad1 {
      background-color: red; /* For browsers that do not support gradients */
      background-image: linear-gradient(to bottom right, #ffccff, white, #ffccff);
    }