@charset "UTF-8";
.flip {
  position: relative; }

.flip > .front,
.flip > .back {
  display: block;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  cursor: pointer; }

.flip > .front {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg); }

.flip > .back {
  position: absolute;
  background: #FF6183;
  color: #fff;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .flip > .back h2 {
    color: #fff; }
  .flip > .back p {
    padding: 5px;
    font-size: 13px; }

.flip:hover > .front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

.flip:hover > .back {
  opacity: 1;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg); }

@font-face {
  font-family: 'FontAwesome';
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"); }
/* Colores */
/* GridLayout */
/* .grid {
    display: grid;
}

.c-grid {
    width: 100%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 190px);
    grid-gap: 15px;
    ;

    grid-template-areas:
    "elemento1 elemento1 elemento2 elemento2 elemento3 elemento3 elemento4 elemento4"
    "elemento1 elemento1 elemento8 elemento7 elemento6 elemento6 elemento5 elemento5"
    "elemento1 elemento1 elemento9 elemento9 elemento10 elemento10 elemento11 elemento11"
    ;
    .c-grid__element {
        border-radius: 15px;
        box-shadow: 2px 3px 5px rgba(58, 58, 58, 0.705);
        padding: 20px;
        position: relative;
        line-height: 1.1;

        .iconItem {
            fill: white;
        }

        &-icon {
            position: absolute;
            bottom: 18px;
            right: 15px;
            fill: white;
        }

        h3 {
            font-family: 'Bowlby One SC';
            font-size: 16px;
            text-transform: uppercase;
        }

        &--grooming {
            grid-area: elemento1;
            background: white;
        }

        &--clasico {
            grid-area: elemento2;
            background: #35A8C6;
            color: white;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #35A8C6;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #35A8C6 !important;
                }
            }
        }

        &--coqueto-01 {
            grid-area: elemento3;
            color: white;
            background: #66338B;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #66338B;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #66338B !important;
                }
            }

        }

        &--coqueto-02 {
            grid-area: elemento6;
            color: white;
            background: #66338B;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #66338B;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #66338B !important;
                }
            }
        }

        &--delux-01 {
            grid-area: elemento4;
            color: white;
            background: #374697;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #374697;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #374697 !important;
                }
            }
        }

        &--delux-02 {
            grid-area: elemento5;
            color: white;
            background: #374697;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #374697;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #374697 !important;
                }
            }

        }

        &--otros {
            grid-area: elemento11;
            color: white;
            background: #9FCFD4;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #9FCFD4;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #9FCFD4 !important;
                }
            }
        }

        &--extra {
            grid-area: elemento10;
            color: white;
            background: #E570A6;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #E570A6;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #E570A6 !important;
                }
            }
        }

        &--taxipet {
            grid-area: elemento9;
            color: white;
            background: #AB53B1;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #AB53B1;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #AB53B1 !important;
                }
            }
        }

        &--xolos {
            grid-area: elemento8;
            color: white;
            background: #E83085;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #E83085;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #E83085 !important;
                }
            }
        }

        &--gatitos {
            grid-area: elemento7;
            color: white;
            background: #68CDB2;
            overflow: hidden;
            transition: .5s;
            cursor: pointer;

            &:hover {
                transform: scale(1.04);
                background: white;
                color: #000;

                h3 {
                    color: #68CDB2;
                }

                .c-grid__element-icon,
                .iconItem {
                    fill: #68CDB2 !important;
                }
            }
        }
    }
}

@media screen and (max-width:1080px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 190px;
        grid-gap: 15px;
        grid-template-areas:
        "elemento1 elemento1 elemento2 elemento2 elemento8 elemento7"
        "elemento1 elemento1 elemento3 elemento3 elemento6 elemento6"
        "elemento1 elemento1 elemento4 elemento4 elemento5 elemento5"
        "elemento1 elemento1 elemento9 elemento9 elemento10 elemento10"
        "elemento1 elemento1 elemento11 elemento11 elemento11 elemento11"
        ;
    }
}

@media screen and (max-width:992px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 190px;
        grid-gap: 15px;
        grid-template-areas:
        "elemento1 elemento1 elemento1 elemento1 elemento8 elemento7"
        "elemento2 elemento2 elemento3 elemento3 elemento6 elemento6"
        "elemento4 elemento4 elemento5 elemento5 elemento9 elemento9"
        "elemento10 elemento10 elemento10 elemento11 elemento11 elemento11"
        ;
    }
}

@media screen and (max-width:768px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 190px;
        grid-gap: 15px;
        grid-template-areas:
        "elemento1 elemento1 elemento1 elemento1 "
        "elemento2 elemento2 elemento8 elemento7 "
        "elemento3 elemento3 elemento6 elemento6 "
        "elemento4 elemento4 elemento5 elemento5 "
        "elemento9 elemento9 elemento10 elemento10 "
        "elemento11 elemento11 elemento11 elemento11 "
        ;
    }
} */
/* Termina GridLayout */
/* Fondo gradiente */
.fondo {
  background: linear-gradient(246deg, #20d6de, #bc8ee8, #5ed7e4, #5e309d);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 25s ease infinite;
  animation: AnimationName 25s ease infinite; }

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 68%; }
  50% {
    background-position: 100% 33%; }
  100% {
    background-position: 0% 68%; } }
@keyframes AnimationName {
  0% {
    background-position: 0% 68%; }
  50% {
    background-position: 100% 33%; }
  100% {
    background-position: 0% 68%; } }
/* Termina fondo en gradiente */
/* Fondo sección ofrenda */
.fondo-ofrenda {
  background: #2e1e3a;
  background-image: url("../img/ofrenda/fondo.png");
  background-attachment: fixed;
  background-position: center; }

/* Color de menú */
.colormenu {
  background: rgba(255, 255, 255, 0.9); }

/*Termina Color de menú */
/* Tipografias H1*/
h1 {
  font-family: 'Bowlby One SC', cursive; }

/* Termina tipografía h1 */
/* Tipografias en H2 */
h2 {
  font-family: 'Bowlby One SC', cursive;
  color: #51BDCD; }

.h3 {
  font-family: 'Bowlby One SC', cursive;
  font-size: 16px; }

.h5 {
  font-family: 'Bowlby One SC', cursive;
  font-size: 22px; }

/* Color-Texto */
.text-blue {
  color: #35A8C6; }

.text-blue-light {
  color: #9FCFD4; }

.text-green-light {
  color: #68CDB2; }

.text-violeta {
  color: #66338B; }

.text-rosa-m {
  color: #E83085; }

.text-rosa {
  color: #E570A6; }

.text-azul-uva {
  color: #374697; }

.text-morado {
  color: #5A215E; }

.text-morado-light {
  color: #AB53B1; }

/* Background */
.bg-blue {
  background: #35A8C6; }

.bg-blue-light {
  background: #9FCFD4; }

.bg-green-light {
  background: #68CDB2; }

.bg-violeta {
  background: #66338B; }

.bg-rosa-m {
  background: #E83085; }

.bg-rosa {
  background: #E570A6; }

.bg-azul-uva {
  background: #374697; }

.bg-morado {
  background: #5A215E; }

.bg-morado-light {
  background: #AB53B1; }

/* Color SVG */
.svg-blue {
  fill: #35A8C6; }

.svg-blue-light {
  fill: #9FCFD4; }

.svg-green-light {
  fill: #68CDB2; }

.svg-violeta {
  fill: #66338B; }

.svg-rosa-m {
  fill: #E83085; }

.svg-rosa {
  fill: #E570A6; }

.svg-azul-uva {
  fill: #374697; }

.svg-morado {
  fill: #5A215E; }

.svg-morado-light {
  fill: #AB53B1; }

.svg-white {
  fill: white; }

/* .table-responsive{
    display: inline-table!important;
} */
/* Termina tipografia en h2 */
/*Color Contenido de secciones */
.bg-contenido {
  background: #fff; }

/* Termina color de contenido */
/* Tipografia Títulos */
.h1,
h2 {
  font-family: 'Bowlby One SC', cursive;
  color: #51BDCD; }

/* Tipografia Títulos */
/*Pág - home: Servicios de Groomin y baño */
.bano-clasico {
  background: #51BDCD; }

.spa-coqueto {
  background: #945F92; }

.spa-delux {
  background: #F2BB30; }

.spa-patitas {
  background: #00A1AF; }

.bano-gatos {
  background: #6BCDB2; }

.aromaterapia {
  background: #FFA1A7; }

.especiales {
  background: #93348B; }

/*Termina Pág - home: Servicios de Groomin y baño */
/* Redes sociales hover */
a.redes {
  color: white;
  -webkit-transition: 1s;
  transition: 1s; }

.redes:hover {
  color: #4066e6; }

/* Termina Redes sociales hover */
/* Botones redondeados */
.btn-redondo {
  border-radius: 20px; }

/* Termina botones redondeados */
/* Ligas footer */
.ligasfooter a {
  color: aliceblue;
  -webkit-transition: 0.9s;
  transition: 0.9s; }

.ligasfooter a:hover {
  color: #5e309d;
  font-weight: bold; }

/* Termina ligas footer */
/* Animacion de sliders */
/* Nosotros - Flecha */
.senal {
  -webkit-animation: bounce_9912 3.6s ease infinite;
          animation: bounce_9912 3.6s ease infinite;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }

@-webkit-keyframes bounce_9912 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  5.55556% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  11.11111% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  22.22222% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  27.77778% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  33.33333% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  44.44444% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes bounce_9912 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  5.55556% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  11.11111% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  22.22222% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  27.77778% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  33.33333% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  44.44444% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
/* Termina Nosotros - Flecha */
/* Termina animacion de sliders */
/* Background img en secciones */
.nosotros1 {
  background-image: url("../img/nosotros/perro-y-companero.jpg");
  width: 100%;
  height: 310px;
  background-size: cover;
  background-position: center; }

.servicios {
  background-image: url("../img/servicio/perro-en-campo.png");
  width: 100%;
  height: 520px;
  background-size: cover;
  background-position: center; }

.contacto {
  background-image: url("../img/contacto.jpg");
  width: 100%;
  height: 520px;
  background-size: cover;
  background-position: center; }

/* Termina Background img en secciones */
/* Efectos en imagenes de servicio*/
.grooming:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: .8s;
  transition: .8s;
  cursor: pointer; }

.grooming {
  overflow: hidden; }

/*Efecto de botones en nav:  Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  color: #000; }

.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EB6CB3;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.hvr-bounce-to-right:hover,
.hvr-bounce-to-right:focus,
.hvr-bounce-to-right:active {
  color: white; }

.hvr-bounce-to-right:hover:before,
.hvr-bounce-to-right:focus:before,
.hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }

/* Header Home */
.child2 {
  position: absolute;
  top: 70%;
  left: 30%;
  right: 30%; }

.btn-outline-light {
  font-size: 1px; }

.catalogo-head {
  color: white;
  font-size: 12px;
  -webkit-transition: all .2s;
  transition: all .2s; }

.catalogo-head:hover {
  font-size: 14px;
  color: turquoise; }

.bounce-scroll {
  -webkit-animation: bounce_7684 3.6s ease infinite;
          animation: bounce_7684 3.6s ease infinite;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%; }

@-webkit-keyframes bounce_7684 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  5.55556% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  11.11111% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  22.22222% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  27.77778% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  33.33333% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  44.44444% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes bounce_7684 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  5.55556% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  11.11111% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  22.22222% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  27.77778% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  33.33333% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  44.44444% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

/*# sourceMappingURL=style.css.map */