/*---------------*/
/***** Button *****/
/*---------------*/

.myButton {
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  background-color: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  cursor: pointer;
  color: #666666;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 9px 25px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffffff;
}
.myButton:hover {
  background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  background-color: #e9e9e9;
}
.myButton:active {
  position: relative;
  top: 1px;
}

/*---------------*/
/***** Bubble *****/
/*---------------*/

.bubble {
  height: 250px;
  width: 100%;
  /* background: var(--bgColor); */
  opacity: 1;
  margin: -250px 0 0 auto !important;
  z-index: 1;
  display: block;
  color: var(--bgColor2);
  padding: 50px 35px 0 50px;
}

.bubble i {
  font-size: 1.3rem;
}

.bubble h3 {
  font-size: 1.2rem;
  margin-top: 5px;
}

#p01 .bubble h3 {
  font-size: 2.3rem;
}

.bubble:hover {
  opacity: 0.8;
}

.bubble:first-child {
  margin-left: 0;
}

/*---------------*/
/***** Bubble photo *****/
/*---------------*/

.bubble-photo {
  min-height: 250px;
  width: calc(100% / 3);
  background: var(--bgLight);
  -webkit-box-shadow: 0 8px 6px -6px var(--bgColor3);
  -moz-box-shadow: 0 8px 6px -6px var(--bgColor3);
  box-shadow: 0 8px 12px -8px var(--bgColor3);
  /*opacity: 0;*/
  transform: translateY(6rem) scale(0.7);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  margin: 0 !important;
  padding: 0;
  text-align: right;
  cursor: default;
}

.hab .bubble-photo,
.hab .bubble {
  background: none;
  opacity: 1;
}

a.bubble-photo:hover {
  opacity: 0.8;
  text-decoration: none;
}

#p01 .bubble-photo {
  margin-left: 2rem !important;
  width: calc(93% / 3);
}

#p01 .bubble-photo:first-child {
  margin-left: 0 !important;
}

#p01 .bubble-photo:last-child {
  margin-right: 0 !important;
}

.bubble-photo.photo100 {
  width: 100%;
}

.bubble-photo .info {
  margin-top: 15px !important;
}

.salon-photo {
  min-height: 350px;
  width: calc(100% / 2);
  background: var(--bgLight);
  -webkit-box-shadow: 0 8px 6px -6px var(--bgColor3);
  -moz-box-shadow: 0 8px 6px -6px var(--bgColor3);
  box-shadow: 0 8px 12px -8px var(--bgColor3);
  opacity: 0;
  transform: translateY(6rem) scale(0.7);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  margin: 0 !important;
  padding: 0;
}

.bubble-photo.is-visible,
.salon-photo.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.text-on-photo {
  background: var(--bgLight2);
  margin-top: -350px;
  padding: 4rem 3rem 5rem;
  margin-bottom: 30px;
}

.page {
  text-align: center;
  margin-top: 650px;
  background: none;
}

#p013 {
  margin-top: 0;
}

#p01 {
  margin-top: 650px;
}

#p01:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/desktop-1920-px.jpg) no-repeat center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p01 .back-01 {
  background-color: #ffffff;
  padding: 2rem;
}

#p01 .header-title {
  margin-top: 3.5rem;
  font-size: 2rem;
  font-family: var(--primaryFont);
  font-weight: 400;
}

#p01 .info {
  margin-top: 0;
}

#p01 .info h4 {
  margin-bottom: 0;
}

#p02:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background:  url(../img/banner-inicio-desayuno-1920-px.jpg) no-repeat bottom;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

.page:after {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background:var(--bgLight);
  content: "";
  height: 135rem;
  left: 0;
  position: absolute;
  right: 0;
  top: 650px;
  transform-origin: 0 0;
  z-index: -1;
}



.header-content h4 {
  font-family: var(--secondaryFont);
  margin: 0;
}

.header-title {
  font-family: var(--primaryFont);
  font-size: 3rem;
  margin: 0.5rem 0 1rem;
  font-weight: 300;
  color: var(--bgColor4);
}

.header-content p {
  margin-top: 0;
}

#p03:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background:  url(../img/banner-bebidas-desayuno.jpg) no-repeat bottom;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

p {
  font-size: 14px;
  line-height: 23px;
}

#p03 .container > .info .col {
  margin-top: 30px;
  margin-bottom: 30px;
}

#p04:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background:  url(../img/banner-comidas.jpg) no-repeat bottom center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p05:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background:  url(../img/banner-bebidas.jpg) no-repeat bottom center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p06:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/banner-vinos.jpg) no-repeat center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p07:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/destilados-banner.jpg) no-repeat bottom
      center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p08:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/banner-coctelería-escritorio.jpg) no-repeat bottom center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p09:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/banner-thanks-d.jpg) no-repeat bottom center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

#p10:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)),
    url(../img/Treatment-cabin-2pax-Spa-by-JW.jpg) no-repeat center -350px;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: 190px;
  right: 0;
  left: 0;
  height: 455px;
  z-index: -1;
}

#p11:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)),
    url(../img/Roble-room-classroom-setup-MYJW-warm.jpg) no-repeat bottom;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: 190px;
  right: 0;
  left: 0;
  height: 455px;
  z-index: -1;
}

#p12:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)),
    url(../img/Back-07.png) no-repeat bottom;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: 190px;
  right: 0;
  left: 0;
  height: 455px;
  z-index: -1;
}
#p13:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/banner-vinos.jpg) no-repeat center;
  background-size: cover;
  content: "";
  opacity: 0;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  height: 680px;
  z-index: -1;
}

.info .col:first-child {
  padding-top: 0;
}

p.show-on-scroll,
.col.show-on-scroll,
h4.show-on-scroll {
  opacity: 0;
  transform: translateY(6rem) scale(0.7);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
}

p.is-visible,
.col.is-visible,
h4.is-visible {
  opacity: 1;
  transform: translateY(0rem) scale(1);
}

.nopadding {
  padding: 0px;
}

/*---------------*/
/***** fondo marmol *****/
/*---------------*/

.footer {
  background: url(../img/bg-marmol.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-marmol::after {
  content: "";
  position: absolute;
  background: url(../img/bg-marmol.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100%;
  z-index: -1;
  top: 860px;
}

/*---------------*/
/***** salones *****/
/*---------------*/

.col.salones {
  padding-top: 0;
}
.nav-salones {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  transition: var(--mainTransition);
  margin: 0;
}

.salon-item {
  width: auto;
  height: auto;
  padding: 0.5rem 1rem 1rem;
  margin: 0 4px 10px;
  font-size: 0.9rem;
  text-align: center;
  background: var(--bgLight);
  border-radius: 1px;
  box-shadow: 0px 5px 5px -3px rgba(22, 22, 22, 0.38);
  cursor: pointer;
  border: 2px solid var(--bgAcento);
  transition: var(--fastTransition);
  z-index: 2;
}

.salon-item:hover {
  background: var(--bgLightFalloff);
  box-shadow: 0px 5px 15px -7px rgba(22, 22, 22, 0.38);
  transform: scale(0.95);
  font-weight: 600;
  font-size: 1.1rem;

  z-index: 3;
}

.datossl {
  display: none;
}

.datossl.showDiv {
  display: block;
}

.datossl .nombre {
  font-size: 1.5rem;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0;
}

.datossl ul {
  width: 30vw;
  padding: 10px 18px;
  list-style-type: none;
  margin-top: 10px;
  text-align: center;
}

.datossl ul li {
  display: grid;
  margin-bottom: 3px;
  font-size: 1rem;
  border-bottom: 1px solid var(--bgColor);
  font-weight: 600;
}

.remate-izq {
  position:absolute;
  background: url("../img/remate-1.png");
  width: 109px;
  height: 1200px;
  left: 15%;
  top: 1350px;
  bottom:0px;
  
  
}

.remate-der {
  position: absolute;
  background: url("../img/remate-2.png");
  width: 109px;
  height: 1200px;
  top:1350px;
  right: 15%;
  bottom: 0px;
  
}

.remate-der.view-mobile {
  width: 40px;
  right: 0px;
  /* top: 1150px; */
  background-size: contain;
}

.remate-der.view-mobile.sugerencias {
max-height: 600px !important;
}

.datossl ul li span {
  display: grid;
  font-size: 0.9rem;
  font-weight: 400;
}

@media only screen and (min-width: 1200px) {
  #p01 {
    margin-top: 650px;
  }

 

  .page {
    margin-top: 650px;
  }

  .page:after {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    content: "";
    height: 135rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 650px;
    transform-origin: 0 0;
    z-index: -1;
  }
}

@media only screen and (max-width: 999px) {
  .post-grid__item {
    grid-column: auto / span 1 !important;
  }
}

@media only screen and (max-width: 860px) {
  #p01 .header-content {
    max-width: 70vw;
  }

  .col-50,
  .col-100 {
    width: 100%;
    margin: 0 !important;
  }

  .flexCol > .col-100 {
    padding: 0;
  }

  p {
    font-size: 16px;
    line-height: 23px;
  }
}

@media only screen and (max-width: 760px) {
  .header-content {
    width: 85%;
  }

  .info .flexRow {
    flex-direction: column;
  }

  .footslide.flexRow,
  .footslide .flexRow {
    flex-direction: row;
  }

  .col-40,
  .col-60,
  .photo.col-60 {
    width: 100%;
  }

  .img-01,
  .img-03,
  .img-05,
  .img-08,
  .img-09,
  .img-11,
  .img-15,
  .img-16,
  .img-18,
  .img-20,
  .img-23,
  .img-24,
  .img-25,
  .img-26,
  .img-28,
  .img-31,
  .img-34,
  .img-27,
  .img-32,
  .img-29,
  .img-30,
  .img-33,
  .local-01,
  .local-02,
  .local-03 {
    min-height: 40vh;
  }

  .bg-01,
  .bg-02 {
    margin-left: 0 !important;
  }

  .view-mobile {
    display: block !important;
  }

  .view-desktop {
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  #p01:before {
    height: 480px;
  }

  #p01:after {
    top: 475px;
    height: 40rem;
  }

  .page:before {
    height: 350px;
  }

  .page:after {
    top: 540px;
    height: 40rem !important;
  }

  #p08:after {
    height: 28rem !important;
  }

  #p05:after {
    height: 25rem !important;
  }

  .flexRow {
    flex-direction: column;
  }

  .bubble.col-30 {
    margin: 20px auto;
    padding: 1.5rem;
  }

  #p01 .bubble .info {
    margin-top: 1rem;
  }

  .header-content img {
    width: 60vw;
  }

  .info .col {
    margin: 0 auto;
  }

  .bubble-photo {
    width: 100%;
  }

  .salon-photo {
    width: 100%;
  }

  .salones1,
  .salones2 {
    min-height: 350px;
  }

  header .wrapper {
    width: 100%;
  }

  .nav-btn {
    font-size: 1.5rem;
    padding: 1.5rem 0.5rem;
    background: var(--bgColor2);
  }

  #p01 .bubble-photo,
  #p01 .bubble-photo:first-child,
  #p01 .bubble-photo:last-child {
    width: 80%;
    margin: 0 auto 25px !important;
  }

  .header-content {
    margin-bottom: 40px !important;
  }

  #p03 .img-06,
  #p03 .img-07 {
    min-height: 250px;
  }

  .salon .post-grid .bubble {
    padding: 0;
  }

  .grid-wrapper.salon {
    margin-left: -10px;
  }

  @media not all and (min-resolution: 0.001dpcm) {
    @media {
      body {
        overflow-x: hidden;
      }

      header {
        width: 100%;
      }

      #Menu,
      #Idioma,
      #datos,
      .footslide {
        width: 100%;
      }

      .flexRow.col {
        display: -webkit-box;
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
      }

      .bubble {
        display: block;
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  .page {
    margin-top: 337px;
  }

  .container > .info .col {
    margin: 0 !important;
  }

  .col {
    padding: 1rem;
  }

  .col-20,
  .col-30,
  .col-50,
  .col-60,
  .col-80 {
    width: 100%;
  }

  .col-30 .toTheLeft {
    text-align: center;
    padding: 0 20px;
  }

  .img-02 {
    min-height: 45vh !important;
  }

  .info {
    width: 80%;
    margin: 0 auto;
  }

  .info .photo:first-child {
    margin-top: 30px !important;
  }

  .bubble-photo.col {
    padding: 0;
  }

  .toTheLeft,
  .toTheRight {
    text-align: center !important;
  }

  .page .header-content {
    margin: 0 auto 20px !important;
    padding: 1.5rem 1.5rem 0rem;
    min-height: auto;
  }

  .header-content-wrapper {
    padding: 2rem 2rem 1.8rem;
  }

  #p01 .bubble-photo {
    min-height: 220px;
  }

  #p01 .header-content {
    margin-bottom: 4rem;
  }

  .toTheCenter h1 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #p01 .header-title {
    color: #ffffff;
  }

  .navbar-nav,
  .datosSln {
    max-width: 80vw;
    width: 80vw;
  }

  .nav-item {
    width: 80%;
  }

  .datossl ul {
    width: 50vw;
  }

  .salon-item {
    width: 60vw;
  }

.nav-item.menu {
  line-height: 3;
}

.nav-item {
  display: block;
  width: 100%;
  padding: 0px 10px !important;
}

.nav-item.sub {
  background: var(--bgColor3) ;
  line-height: 2.5;
}

.active.sub {
  background: var(--bgAcento) ;
}

  #p01 .container > .col:first-child {
    padding-bottom: 0;
  }

  #p01 .container > .col:last-child {
    padding-top: 0;
  }

  #p01 {
    margin-top: 480px;
  }

  #p01:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/movil-1024-px.png) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    position: absolute;
    top: -20px;
    right: 0;
    bottom: 420px;
    left: 0;
    z-index: -1;
  }

  #p01:after {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: #f9fcff;
    content: "";
    height: 3800px !important;
    left: -10%;
    position: absolute;
    right: -5%;
    top: 580px;
    transform-origin: 0 0;
    z-index: -1;
  }

  #p02:after {
    height: 16rem !important;
    margin-top: 252px;
  }

  #p02:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-1024-px.jpg) no-repeat center;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p03:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-bebidas-desayuno-movil.png) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p04:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/1024-px-m.png) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p05:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-bebidas-movil.png) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p06:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-vinos-mobile.png) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p07:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/destilados-banner-m.jpg) no-repeat
      bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p08:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-coctelería-movil.jpg) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p09:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-thanks-m.jpg) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  #p10:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/Treatment-cabin-2pax-Spa-by-JW.jpg) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 350px;
  }

  #p11:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/Roble-room-classroom-setup-MYJW-warm.jpg) no-repeat
      bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 350px;
  }

  #p12:before {
    animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
    background: url(../img/banner-vinos-mobile.png) no-repeat bottom;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 420px;
  }

  .header-content h4,
  .header-content h3 {
    font-size: 1.1rem;
  }

  .header-title {
    font-size: 1.6rem;
  }

  #p06 .header-title {
    font-size: 1.8rem;
  }

  .footslide {
    height: 0px;
  }

  .footslide .wrapper {
    height: 0px;
  }

  .nav-btn {
    height: 70px;
  }

  #p01 .grid-wrapper,
  #p01 .post-grid {
    height: 2000px;
  }

  #p06 .hab.grid-wrapper,
  #P06 .hab .post-grid {
    height: calc(315px * 6);
  }

  #p01 .post-grid__item:nth-child(5) {
    display: none;
  }

  #p02 .padding-t25 {
    padding-top: 0 !important;
  }

  #p01 .footer p {
    display: grid;
  }
}

@media only screen and (max-width: 320px) {
  .header-title {
    font-size: 2rem;
  }

  .header-content h4 {
    font-size: 1rem;
  }

  #p02:after {
    height: 18rem !important;
    margin-top: 286px;
  }

  #p02 .header-title {
    font-size: 1.4rem;
  }

  #p02 .header-content p {
    font-size: 1rem;
  }
}

@media screen and (max-height: 700px) {
  .nav-item {
    margin: 0 auto;
  }
}
@media screen and (max-height: 600px) {
  .nav-item {
    margin: 0 auto;
    padding: 6px 8px;
  }
}

@media screen and (max-height: 500px) {
  .nav-item {
    margin: 0 auto;
    padding: 3px 8px;
  }
}