html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}
.navbar {
  background-color: #d53324b4;
  position: fixed;
  width: 100vw;
  padding: 0.5rem 1rem 0.5rem 1rem;
  z-index: 99;
  font-family: 'Oswald', sans-serif;
}
.nav-link:hover {
  color: rgb(97, 97, 97);
}
.black-text{
  color: black;
}
.white-text{
  color: white;
}
.btn-almo{
  background-color: #303030;
  box-shadow: 1px 1px 10px black;
}
.btn-almo:hover{
  background-color: #d53324;
  box-shadow: 2px 2px 10px red;
}
h1{
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 3px;
}
h2, h3, h4, h5, h6, p, label {
  font-family: 'Oswald', sans-serif;
}
.whatsapp-btn {
  background-color: #25D366;
  z-index: 99;
  top: 80%;
  right: 2%;
  border-radius: 50%;
  padding: 10px 14px 10px 14px;
}

.pulse-wt {
  position: relative;
  animation: mymove-wt 1s infinite;
  animation-direction: alternate;
}
@keyframes mymove-wt {
  from {
    color: white;
  }

  to {
    color: grey;
  }
}

/* INTRO ---------------- */
#intro-intro{
  height: 100vh;
  background: linear-gradient(0deg, #d53324, #d53324cb),
  url(../img/intro-bgn-bn.jpg) fixed center;
  background-size: cover;
}
/* HOME ---------------- */
#intro-home{
  height: 100vh;
  background: linear-gradient(0deg, #d53324e5, #d53324),
  url(../img/intro-index-pc.jpg) fixed center;
  background-size: cover;
}
/* NOSOTROS -------------- */
#nosotros{
  height: auto;
  background: linear-gradient(0deg, #1f1f1f7a, #353535),
  url(../img/intro-bgn-bn.jpg) fixed center;
  background-size: cover;
}
/* 3 PART ---------------- */
/*---------------*/
/***** Honey *****/
/*---------------*/
.grid {
  position: relative;
  list-style: none;
  text-align: center;
}

/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  background: #000000;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  opacity: 0.8;
}

.grid figure figcaption {
  color: #fff;
  /* text-transform: uppercase; */
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption>a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption>a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 200;
  letter-spacing: 3px;
}

.grid figure h2 span {
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.grid figure h2,
.grid figure p {
  margin: 0;
  text-shadow: 2px 2px 1px black;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}
/* Individual Effect */
figure.effect-layla {
  background: #d53324;
  width: 100%;
}

figure.effect-layla img {
  width: 100%;
}

figure.effect-layla figcaption {
  padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
  position: absolute;
  content: '';
  opacity: 0;
}

figure.effect-layla figcaption::before {
  top: 50px;
  right: 30px;
  bottom: 50px;
  left: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
  top: 30px;
  right: 50px;
  bottom: 30px;
  left: 50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

figure.effect-layla h2 {
  padding-top: 26%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-layla p {
  padding: 0.5em 2em;
  text-transform: none;
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}

figure.effect-layla img,
figure.effect-layla h2 {
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
/* TRATAMIENTOS --------------------------------- */
.trat-border {
  border: 5px solid rgb(41, 41, 41);
  min-height: 27rem;
}
/* FACIALES----------------------- */
#intro-faciales {
  height: 100vh;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/faciales.jpg) fixed center;
  background-size: cover;
}
/* CORPORALES----------------------- */
#intro-corporales {
  height: 100vh;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/corporales.jpg) fixed center;
  background-size: cover;
}
/* TRATAMIENTOS LANDINGS */
#intro-trat {
  height: 100vh;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/intro-index-pc.jpg) fixed center;
  background-size: cover;
}
#intro-trat-faciales {
  height: 100vh;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/faciales.jpg) fixed center;
  background-size: cover;
}
.title-trat-sm{
  color: #d53324;
}
.mid-img-corporales{
  background: linear-gradient(0deg, #d533249a, #d533247c),
  url(../img/corporales.jpg) fixed center no-repeat;
  background-size: cover;
  height: 60vh;
}
.mid-img-faciales{
  background: linear-gradient(0deg, #d533249a, #d533247c),
  url(../img/faciales.jpg) fixed center no-repeat;
  background-size: cover;
  height: 60vh;
}

/* EMTONE --------------------------------------- */
#intro-emtone {
  height: 100vh;
  background: linear-gradient(0deg, #d53324b2, #d53324),
    url(../img/tratamientos/corporales/emtone/emtone-pc.jpg) fixed center;
  background-size: cover;
}
/* EMSCULPT --------------------------------------- */
#intro-emsculpt {
  height: 100vh;
  background: linear-gradient(0deg, #d53324b2, #d53324),
    url(../img/tratamientos/corporales/emsculpt/emsculpt-pc.jpg) fixed center;
  background-size: cover;
}
/* VANQUISH --------------------------------------- */
#intro-vanquish {
  height: 100vh;
  background: linear-gradient(0deg, #d53324b2, #d53324),
    url(../img/tratamientos/corporales/vanquish/vanquish-pc.jpg) fixed center;
  background-size: cover;
}
/* VELASHAPE --------------------------------------- */
#intro-velashape {
  height: 100vh;
  background: linear-gradient(0deg, #d53324b2, #d53324),
    url(../img/tratamientos/corporales/velashape/intro.jpg) fixed center;
  background-size: cover;
}
/* HYPERSCULPT --------------------------------------- */
#intro-hyper {
  height: 100vh;
  background: linear-gradient(0deg, #d53324b2, #d53324),
    url(../img/tratamientos/corporales/hypersculpt/intro.jpg) fixed center;
  background-size: cover;
}
/* COOLSCULPTING --------------------------------------- */
#intro-cool {
  height: 100vh;
  background: linear-gradient(0deg, #d53324b2, #d53324),
    url(../img/tratamientos/corporales/coolsculpting/intro.png) fixed center;
  background-size: cover;
}
/* FOOTER ------------------------ */
.footer-style {
  background-color: #d53324;
  font-family: 'Lato', sans-serif;
}

.kcm {
  background-color:#6b0f07;
}

/* RESPONSIVE ------------------- */
@media(max-width: 760px) {
  #intro-intro {
    background: linear-gradient(0deg, #d53324, #d53324cb),
      url(../img/intro-bgn-bn.jpg) scroll center;
    background-size: cover;
  }
  #intro-home {
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/intro-index-pc.jpg) scroll center;
    background-size: cover;
  }
  #nosotros {
    background: linear-gradient(0deg, #1f1f1f7a, #353535),
      url(../img/intro-bgn-bn.jpg) scroll center;
    background-size: cover;
  }
  #intro-faciales {
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/faciales.jpg) scroll center;
    background-size: cover;
  }
  #intro-corporales {
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/corporales.jpg) scroll center;
    background-size: cover;
  }
  .mid-img-corporales {
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/corporales.jpg) scroll center;
  }
  .mid-img-faciales {
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/faciales.jpg) scroll center;
  }
  #intro-trat {
    height: 100vh;
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/intro-index-mobile.jpg) scroll center;
    background-size: cover;
    padding-top: 80px;
  }
  #intro-trat-faciales {
    height: auto;
    background: linear-gradient(0deg, #d53324e5, #d53324),
      url(../img/faciales.jpg) scroll center;
    background-size: cover;
    padding-top: 80px;
  }
  #intro-emtone {
  height: auto;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/tratamientos/corporales/emtone/emtone-mobile.jpg) scroll center;
  background-size: cover;
  padding-top: 80px;
  }
  #intro-emsculpt {
  height: auto;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/tratamientos/corporales/emsculpt/emsculpt-mobile.jpg) scroll center;
  background-size: cover;
  padding-top: 80px;
  }
  #intro-vanquish {
  height: auto;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/tratamientos/corporales/vanquish/vanquish-mobile.jpg) scroll center;
  background-size: cover;
  padding-top: 80px;
  }
  #intro-velashape {
  height: auto;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/tratamientos/corporales/velashape/intro.jpg) scroll center;
  background-size: cover;
  padding-top: 80px;
  }
  #intro-hyper {
  height: auto;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/tratamientos/corporales/hypersculpt/intro.jpg) scroll center;
  background-size: cover;
  padding-top: 80px;
  }
  #intro-cool {
  height: auto;
  background: linear-gradient(0deg, #d53324e5, #d53324),
    url(../img/tratamientos/corporales/coolsculpting/intro.png) scroll center;
  background-size: cover;
  padding-top: 80px;
  }
}