/*
Theme Name: Soy Biospa
Description: Es un rincón donde el tiempo se detiene y la serenidad florece, nuestra principal misión se revela: ¡Hacerte sentir estupenda!. Aquí cada tratamiento es una caricia para el alma, un susurro que invita a la calma.
Author: Saul Chávez (Programación y animación) Víctor Martínez(Diseño gráfico)
Author URI: https://verticeasociados.com/
Version: 1.0
Tested up to: 6.6
Requires at least: 3.0
Requires PHP: 5.2.4
Tags: blog, two-columns, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu, flexible-header, featured-images, footer-widgets, featured-image-header, block-patterns
Text Domain: biospa
-------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@font-face {
    font-family: 'Bralyn Free Demo';
    src: url('fonts/BralynFreeDemo.woff2') format('woff2'),
        url('fonts/BralynFreeDemo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{
    --quicksand: "Quicksand", sans-serif;
    --bralyn: 'Bralyn Free Demo';
    --morado: #adb7ea;
    --rosa: #c688b8;
    --rosa-pastel: #f598b9;
    --gris: #e3e3e3;
    --gris-oscuro: #999;
    --color-base: #555;
/*    --fondo-general: #f7f7f7;*/
    --degradado-verde: linear-gradient(24deg, rgba(226,230,154,1) 0%, rgba(132,212,203,1) 100%);
    --degradado-morado: linear-gradient(24deg, rgba(205,110,165,1) 0%, rgba(161,138,186,1) 100%);
    --degradado-rosa: linear-gradient(24deg, rgba(227,198,136,1) 0%, rgba(201,134,163,1) 100%);

    --background: #fff;
    --blob: #fdfbfd;
    --shades: inset 10px 0 40px #f7f8fc, inset -10px 0 20px #f7e1ef, inset -40px 10px 100px #c3c5ea;
    --mask: radial-gradient(30.93px at 50% calc(100% + 20.7px),#0000 calc(99% - 7px),#000 calc(101% - 7px) 99%,#0000 101%) calc(50% - 36px) calc(50% - 12.5px + .5px)/72px 25px , radial-gradient(30.93px at 50% -20.7px,#0000 calc(99% - 7px),#000 calc(101% - 7px) 99%,#0000 101%) 50% calc(50% + 12.5px)/72px 25px ;

    --faciales: #4ccdeb;
    --contour: #ace5db;
    --bienestar: #b3bceb;
    --gift: #67e5cd;
    --depilacion: #f1a3c1;
    --rejuvenecimiento: #e0c1c9;
    --biolife: #3fae97;
    --productos: #c688b8;

}

html{
    scroll-behavior: smooth;
}
body{
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    font-family: var(--quicksand);
    background-color: #FFF;
    color: var(--color-base);
}
body > div{
    position: relative;
    width: 100%;
    overflow-x: hidden;
}
section{
    padding-top: 10vw;
    padding-bottom: 10vw;
}
header{
    position: fixed;
    z-index: 12;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255, 255, 1.0);
}
header > a{
    position: relative;
    height: 100%;
    width: 250px;
    background-image: url(images/logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 90%;
}
header > nav{
    position: relative;
    width: calc(100% - 250px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5%;
}
header > nav > a{
    position: relative;
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
    padding: 20px;
    letter-spacing: .2vw;
}
.inicio{
    position: relative;
    width: 100%;
    padding: 0px;
}
.inicio > .texto > img{
    display: none;
}
.inicio > .texto > h3{
    font-weight: 400;
}
.inicio > .burbuja{
    display: none;
}
.inicio > video{
    position: relative;
    width: 100%;
}
.inicio > .texto{
    position: absolute;
    font-family: var(--bralyn);
    font-weight: 400;
    font-size: 9vw;
    line-height: 1;
    margin: 0px;
    text-align: center;
    z-index: 2;
    color: var(--morado);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.inicio > .texto > h2{
    font-family: var(--quicksand);
    text-transform: uppercase;
    font-size: 2vw;
    color: var(--rosa);
    padding-left: 1vw;
    padding-right: 1vw;
    letter-spacing: .3vw;
    font-weight: 500;
}
.inicio > .texto > svg{
    position: relative;
    width: 40%;
}
.inicio > .texto > svg > path{
    stroke: var(--morado);
    fill: transparent;
    stroke-width: 4px
}
.burbuja{
    position: absolute;
    display: block;
    width: 24vw;
    height: 24vw;
    background-color: var(--blob);  
    background-size: 1600% 1600%;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: transform 30s ease-in-out infinite both alternate, movement 30s ease-in-out infinite both;
    background: var(--degradado-verde);
}
.b1{
    top: 40vw;
    left: 70vw;
    animation: transform 15s ease-in-out infinite both alternate, movement 15s ease-in-out infinite both;
}
.b1-1{
    top: 40vw;
    left: 68vw;
    width: 22vw;
    height: 22vw;
    border: solid 4px #00afde;
    background: transparent;
    animation: transform 13s ease-in-out infinite both alternate, movement 13s ease-in-out infinite both;
}
.b2{
    top: 24vw;
    left: 2vw;
    width: 20vw;
    height: 20vw;
    background: rgb(227,198,136);
    background: var(--degradado-rosa)
}
.b2-2{
    top: 24vw;
    left: 6vw;
    width: 18vw;
    height: 18vw;
    background: #cc5a8e;
    overflow: hidden;
    mask: var(--mask);
    animation: transform 10s ease-in-out infinite both alternate, movement 10s ease-in-out infinite both;
}
.b3-lineas{
    position: relative;
    width: 25vw;
    transform: rotate(15deg);
    margin-bottom: 1vw;
    left: -2vw;
}
.b3-lineas > div{
    position: relative;
    width: 100%;
    height: 5px;
    margin-bottom: 15px;
    background-color: #bed477;
}
.b3{
    top: -5vw;
    left: 70vw;
    background: rgb(205,110,165);
    background: var(--degradado-morado);
    display: flex;
    justify-content: center;
    align-items: end;
}

/***********************************************************
 * FOTOS
************************************************************/
.fotos{
    position: relative;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 20vw;

/*    margin-top: -12vw;*/
/*    overflow-y: visible;*/
}
.foto{
    position: relative;
    width: 20vw;
    height: 20vw;
    border-radius: 10vw;
    background-size: cover;
    background-position: center center;
/*    margin-top: 10vw;*/
    animation-name: transform;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
.foto:nth-child(3n){
    margin-top: 2vw;
    margin-left: 70%;
}
#f1{
    background-image: url(images/IMG_4268.jpg);
/*    top: 10vw;*/
    width: 15vw;
    height: 15vw;
    left: 5vw;
    margin-top: 35vw;
    margin-top: 15vw;
}
#f2{
    
    background-image: url(images/IMG_4278.jpg);
    margin-top: 4vw;
    margin-top: 0vw;
}
#f3{
    background-image: url(images/IMG_4320.jpg);
    margin-top: -17vw;
    width: 24vw;
    height: 24vw;
    left: -4vw;
}
#f4{
    background-image: url(images/IMG_4329.jpg);
}
#f5{
    background-image: url(images/pexels-olly-3757942.jpg);
    width: 50vw;
    height: 50vw;
    margin-left: 20%;
}
#frase{
    font-family: var(--bralyn);
    font-size: 25vw;
    text-transform: lowercase;
    color: var(--gris);
    width: 200%;
    margin: 0px;
    font-weight: 100;
    padding-top: 20vw;
    /* background-color: #FA0; */
    position: absolute;
    top: -18vw;
}
.fotos > article{
    position: relative;
    width: 35%;
    padding-left: 32.5%;
    padding-right: 32.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.fotos > article > *{
    margin: 0px;
}
.fotos > article > h2{
    color: var(--gris-oscuro);
    font-size: 1.5vw;
    text-align: center;
    width: 80%;
}
.fotos > article > h3{
    color: var(--gris-oscuro);
    font-size: 2vw;
    letter-spacing: .5vw;
    font-weight: 300;
}
.fotos > article > h4{
    font-family: var(--bralyn);
    font-weight:100;
    color: var(--rosa-pastel);
    font-size: 8.5vw;
    margin-top: -1vw;
    margin-bottom: 1vw;
}
.fotos > article > p{
    font-size: 1.3vw;
    text-align: center;
    color: var(--color-base);
    font-weight: 400;
    width: 100%;
    text-align: center;
}
@keyframes transform {
    0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes movement {
    0%,
  100% { transform: none; }
   50% { transform: translateY(20%) rotateY(10deg); }
}

.servicios{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.servicios > h2{
    font-size: 1.5vw;
    padding-bottom: 2vw;
/*    color: var(--rosa);*/
}
.servicios > div{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin-left: 5%;
    background-color: #FFF;
    padding: .5vw;
}
.servicios > div > article{
    position: relative;
    width: calc(33.33% - 1vw);
    height: 40vw;
    margin: .5vw;
    padding: 3vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-position: center center;
    background-size: cover;
    /*animation-name: zoom-out;
    animation-duration: .5s;
    animation-fill-mode: forwards;*/

    background-image: url(images/faciales.jpg);
}

.servicios > div > article > h2{
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2vw;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: .4vw;
    text-align: center;
    color: var(--color-base);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,.8);
    color: #777;
    animation-name: fade-in;
    animation-duration: .5s;
    animation-fill-mode: forwards;

    backdrop-filter: grayscale(90%);
}

.servicios > div > article:hover{
    /*animation-name: zoom-in;*/
}
.servicios > div > article:hover > h2{
    animation-name: fade-out;
}
.servicios > aside{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 91%;
    margin-left: 5%;
    background-color: rgba(255,255,255,.9);
    margin-top: 6vw;
    height: 39vw;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
    display: none;

    width: 55%;
}
.servicios > aside > p{
    position: absolute;
    top: -.9vw;
    right: .6vw;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 38px;
    font-size: 20px;
    cursor: pointer;
    background-color: var(--gris-oscuro);
    color: #FFF;
}
.servicios > aside > p:hover{
    background-color: var(--rosa);
}
.servicios > aside > div{
    position: relative;
    width: calc(33.7% - 1vw);
    margin: .5vw;
    height: calc(100% - 1vw);
    background-position: center center;
    background-size: cover;

    width: 45%;
}
.servicios > aside > div > h2{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 4vw;
    letter-spacing: .3vw;
    font-weight: 300;
    margin: 0px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    backdrop-filter: grayscale(0%);
    line-height: 1;
    text-align: center;
}
.servicios > aside > ul > h2{
    font-size: 2.5vw;
    color: var(--rosa);
    margin: 0px;
    font-weight: 400;
    letter-spacing: .4vw;
    line-height: 1;
    padding-top: 3vw;
}
.servicios > aside > ul > p{
    font-weight: 500;
    margin-top: 0px;
    font-size: 1.2vw;
    line-height: 1.1;
    padding-top: 1vw;
/*    padding-bottom: 2vw;*/
}
.servicios > aside > ul{
    background-color: rgba(255,255,255,.7);
    width: calc(33.33% - 4vw);
    height: calc(100% - 1vw);
    padding: 0px;
    margin: 0px;
    padding-left: 4vw;
    list-style: circle;
    line-height: 2;
    margin-top: .5vw;

    width: 45%;
}
.servicios > aside > ul li{
    margin-left: 2vw;
    font-size: 1.1vw;
    line-height: 1;
    margin-bottom: .5vw;
}
.servicios > aside > ul li:hover > a{
    font-weight: 700;
    color: var(--rosa);
}

@keyframes zoom-in{
    from{background-size: 120%}
    to{background-size: 170%}
}
@keyframes zoom-out{
    from{background-size: 170%}
    to{background-size: 120%}
}

@keyframes fade-in{
    from{opacity: 0.01}
    to{opacity: 1}
}
@keyframes fade-out{
    from{opacity: 1}
    to{opacity: 0.01}
}

.instalaciones{
    display: flex;
}
.instalaciones > aside{
    position: relative;
    width: 50%;
    margin-left: 5%;
    height: 35vw;
    /*background-image: url(images/IMG_4268.jpg);
    background-position: center center;
    background-size: cover;*/
    overflow: hidden;
}
.instalaciones > aside .swiper-slide > .frame{
    position: relative;
    width: 100%;
    height: 35vw;
    background-size: cover;
    background-position: center center;
    /*background-color: #FA0;*/
}
.instalaciones > article{
    position: relative;
    width: 33%;
    padding-left: 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.instalaciones > article > h3{
    font-size: 1.2vw;
    font-weight: 500;
    letter-spacing: .2vw;
}
.instalaciones > article > h2{
    font-size: 2.9vw;
    font-weight: lighter;
    line-height: 1;
    margin: 0px;
}
.instalaciones > article > p{
    width: 80%;
    font-size: 1.3vw;
}

.clientas{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}
.clientas > h2{
    font-size: 1.5vw;
    padding-bottom: 2vw;
    color: var(--rosa);
}
.clientas > p{
    margin-top: 0px;
    margin-bottom: 3vw;
    width: 50%;
    letter-spacing: .3vw;
    font-size: 1.5vw;
    text-align: center;
}
.clientas > div{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.clientas > div article{
    position: relative;
    width: calc(33.33% - 1vw);
    width: 100%;
    margin: .5vw;
    height: 17vw;
    padding: 1vw;
    box-sizing: border-box;
    background-color: var(--gris);
}
.clientas > div article > h2{
    font-size: 1.3vw;
}
.clientas > div article > p{
    font-size: 1.3vw;
    font-weight: 400;
}

.fitness{
    height: 50vw;
    background-image: url(images/IMG_4320.png);
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    overflow: hidden;
    /*scale: 2;
    opacity: 0.0;*/
}
.fitness > h2{
    position: relative;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 2vw;
    margin: 0px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,.7);
    padding-top: 22%;
}
.fitness > h3{
    position: relative;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 3vw;
    margin: 0px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,.7);
    padding-bottom: 22%;
}

.contacto{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contacto > aside{
    position: relative;
    width: 55%;
    height: 40vw;
    background-image: url(images/IMG_4329.jpg);
    background-image: url(images/DSC_0006.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
}
.contacto > aside > div{
    position: relative;
    width: 100%;
    height: 100%;
    /*backdrop-filter: grayscale(100%);*/
}
.contacto > article{
    position: relative;
    width: 30%;
    padding-right: 15%;
    display: flex;
    flex-direction: column;
}
.contacto > article > h2{
    font-size: 1.5vw;
    margin-bottom: .5vw;
}
.contacto > article > p{
    font-size: 1.3vw;
    margin-top: 0px;
}
.contacto > article > a{
    font-size: 1.1vw;
/*    border-radius: 1vw;*/
    background-color: var(--gris-oscuro);
    color: #FFF;
    padding: .3vw;
    padding-left: 1vw;
    padding-right: 1vw;
    width: fit-content;
    font-weight: 600;
}
.contacto > article > form{
    position: relative;
    margin-top: 1vw;
}

.contacto > article > form > input, .contacto > article > form > textarea{
    border: solid 1px var(--gris-oscuro);
    height: 1.8vw;
    font-family: var(--quicksand);
    font-weight: 400;
    font-size: 1.1vw;
    width: 100%;
    margin-bottom: 1vw;
/*    border-radius: 1vw;*/
    box-sizing: border-box;
    padding-left: 1vw;
}
.contacto > article > form > textarea{
    height: auto;
}
.contacto > article > form > div{
    position: relative;
    display: flex;
}
.contacto > article > form > div > input[type=submit], .contacto > article > form > div > input[type=reset]{
    background-color: var(--gris-oscuro);
    color: #FFF;
    font-weight: 600;

    border: solid 1px var(--gris-oscuro);
    height: 2vw;
    font-family: var(--quicksand);
    font-size: 1.1vw;
    width: 20%;
    margin-right: .5vw;
    margin-bottom: 1vw;
/*    border-radius: 1vw;*/
}
footer{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bcbcbc;
    height: 150px;
}
footer > div{
    position: relative;
    width: 25%;
    height: 100%;
    background-image: url(images/logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 40%;
}
footer > h2{
    font-size: 2.5vw;
    font-weight: 300;
    width: 40%;
    text-align: center;
}
footer > p{
    letter-spacing: .1vw;
    font-size: 1.2vw;
    text-align: right;
}

.hamburger{
    display: none !important;
}

.servicio > iframe{
    position: relative;
    width: 100%;
    height: 29.2vw;
    border:0px;
    margin-top: 70px;
}
.servicio > video{
    position: relative;
    width: 100%;
    margin-top: 70px;
}
.servicio > div{
    position: relative;
    width: 100%;
    height: 30vw;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 70px;
}
.servicio > nav{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
}
.servicio > nav > a{
    font-size: 14px;
    box-sizing: border-box;
    padding: 1vw;
    font-weight: 500;
}
.servicio > nav > a:hover{
    color: var(--rosa);
}
.servicio > aside{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-left: 7%;
    padding-right: 7%;
    text-align: left;
    padding-top: 3vw;
    padding-bottom: 3vw;
}
.servicio > aside > div{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.servicio > aside > div > h4{
    font-size: 1.5vw;
    font-weight: 500;
    letter-spacing: .2vw;
}
.servicio > aside > div > img{
    position: relative;
    height: 3vw;
}

.servicio > aside > h1{
    color: var(--gris-oscuro);
    font-size: 4.5vw;
    font-weight: 400;
    margin: 0px;
    margin-bottom: 2vw;
}
.servicio > aside > a{
    display: inline-block;
}
.servicio > aside > a > div{
    position: relative;
    width: 12vw;
    height: 3vw;
    font-weight: 600;
    color: #FFF;
    line-height: 3vw;
    border-radius: 3px;
    text-align: center;
    margin-bottom: 2vw;
    background-color: #FA0;
}
.servicio > aside > a:hover > div{
    background-color: #777;
}
.servicio > aside > aside{
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.servicio > aside > aside > article p{
    font-size: 1.2vw;
    margin-top: 0px;
}
.servicio > aside > aside > article h2{
    font-size: 1.3vw;
    margin-bottom: .3vw;
}
.servicio > aside > aside > article h1{
    color: var(--gris-oscuro);
    font-size: 4.5vw;
    font-weight: 400;
    margin: 0px;
    margin-bottom: 2vw;
}
.servicio > aside > aside > article ul{
    margin-top: 0px;
}
.servicio > aside > aside > article ol{
    ist-style: none;
    padding: 0px;
    margin: 0px;
    position: relative;
    display: flex;
}
.servicio > aside > aside > article > ol li{
    background-color: #f2f2f2;
    width: 12vw;
    border-radius: 4px;
    box-sizing: border-box;
    padding: .5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: .5vw;
}
.servicio > aside > aside > article > ol li > p{
    position: relative;
    margin: 0px;
    font-weight: 800;
    font-size: 1.1vw;
    text-align: center;
}
.servicio > aside > aside > article > ol li > p:nth-child(2){
    font-weight: 700;
    font-size: .9vw;
}
.servicio > aside > aside > article > ol li > p:nth-child(3){
    font-size: .8vw;
    font-weight: 500;
}
.servicio > aside > aside > article h3{
    font-size: 1.5vw;
}
.servicio > aside > aside > article h4{
    font-weight: 400;
    cursor: pointer;
    font-size: 1.2vw;
    margin-bottom: .5vw;
}
.servicio > aside > aside > article h4:hover{
    font-weight: 500;
}
.servicio > aside > aside > article h5{
    margin-top: 0px;
    font-size: 1vw;
    font-weight: 400;
    display: none;
}
.servicio > aside > aside > article > h6{
    border-radius: 4px;
    width: 12vw;
    height: 2.5vw;
    line-height: 2.5vw;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    font-size: 1vw;
    margin-top: 1vw;
    margin-bottom: 4vw;
    color: #FFF;
}
.servicio > aside > aside > article > h6:hover{
    background-color: #999;
}
.servicio > aside > aside > article{
    position: relative;
    width: 50%;
}
.servicio > aside > aside > div{
    position: relative;
    width: 40%;
    margin-left: 10%;
/*    height: 30vw;*/
    overflow: hidden;
    display: none;
}
.servicio > aside > aside > div h3{
    text-align: center;
    text-transform: uppercase;
    margin-top: 0px;
}
.servicio > aside > aside > div img{
    position: relative;
    width: 100%;
}
.servicio > aside > aside > div article{
    position: relative;
    width: 100%;
    box-sizing: border-box;
/*    padding: 2vw;*/
}
.servicio > aside > aside > div article > h2{
    font-size: 1.2vw;
}
.servicio > aside > aside > div article > p{
    font-size: 1.1vw;
    font-weight: 500;
}
#nosotros{
    padding-top: 25vw;
/*    margin-top: -120px;*/
}
.no-padding{
    padding-left: 0px;
}
.no-margin{
    margin-left: 0px;
}
.gracias{
	position: relative;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    padding-top: 10vw;
    padding-bottom: 18vw;
}
.gracias h1{
	font-size: 4vw;
	color: var(--azul-oscuro);
}
.gracias h2{
	font-size: 1.5vw;
	color: var(--azul);
}
@media (max-width: 480px){
    header{
        height: 80px;
    }
    header > a{
        background-position: left center;
        width: 80%;
    }
    header > article{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        background-size: 30%;
        background-position: left center;
    }
    header > nav{
        position: fixed;
        top: 70px;
        left: 0px;
        width: 100%;
        height: 100vh;
        background-color: #FFF;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 25vw;
        display: none;
    }
    header > nav > a{
        font-size: 5vw;
    }
    .inicio{
        height: 140vw;
    }
    .inicio > .texto > img{
        display: block;
        position: relative;
        width: 40%;
        margin-bottom: 10vw;
    }
    .inicio > .texto{
        flex-direction: column;
    }
    .inicio > .texto > h2{
        font-size: 6vw;
        margin: 0px;
    }
    .inicio > .texto > h2:nth-child(1){
        position: relative;
    }
    .inicio > .texto > svg{
        width: 65%;
    }
    .b1{
        top: 105vw;
    }
    .b1-1{
        top: 109vw;
    }
    .b2, .b2-2{
        top: 90vw;
    }
    .b3{
        top: 5vw;
    }
    .inicio > .burbuja{
        display: block;
    }
    .inicio > video{
        display: none;
    }
    #frase{
        width: 400%;
        font-size: 45vw;
    }
    .fotos > article{
        width: 100%;
        padding: 0%;
    }
    .fotos > article > h2{
        font-size: 5vw;
        width: 90%;
    }
    .fotos > article > h4{
        font-size: 17vw;
    }
    .fotos > article > p{
        font-size: 4vw;
    }
    #f1{
        margin-top: 25vw;
        width: 25vw;
        height: 25vw;
        left: -5vw;
    }
    #f2{
        margin-top: -4vw;
    }
    #f3{
        margin-top: -3vw;
    }
    #f5{
        margin-left: 42%;
    }
    .servicios > div{
        padding: 0px;
        margin: 0px;
        width: 80%;
    }
    .servicios > h2{
        font-size: 6vw;
    }
    .servicios > div > article{
        width: 100%;
        height: 24vw;
    }
    .servicios > div > article > h2{
        font-size: 5vw;
    }
    .servicios > aside{
        margin-top: 20vw;
        height: 150vw;
        width: 80%;
        margin-left: 0px;
        flex-wrap: wrap;
    }
    .servicios > aside > div{
        width: 100%;
        height: 35%;
    }
    .servicios > aside > ul{
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
        line-height: 1.5;
    }
    .servicios > aside > p{
        z-index: 2;
        top: -3.6vw;
    }
    .servicios > aside > ul > h2{
        font-size: 6vw;
        padding-top: 6vw;
    }
    .servicios > aside > ul > p{
        font-size: 4vw;
    }
    .servicios > aside > ul li{
        font-size: 4vw;
    }
    .instalaciones{
        flex-direction: column;
    }
    .instalaciones > aside{
        width: 90%;
        height: 60vw;
    }
    .instalaciones > aside .swiper-slide > .frame{
        height: 65vw;
    }
    .instalaciones > article{
        width: 80%;
        padding-left: 10%;
    }
    .instalaciones > article > h3{
        font-size: 6vw;
        font-weight: 600;
    }
    .instalaciones > article > h2{
        font-size: 4vw;
        font-weight: 600;
    }
    .instalaciones > article > p{
        font-size: 4vw;
        font-weight: 400;
        width: 100%;
    }

    .clientas > h2{
        font-size: 6vw;
    }
    .clientas > p{
        width: 80%;
        letter-spacing: .1vw;
        font-size: 4vw;
    }
    .clientas > div article{
        height: auto;
        box-sizing: border-box;
        padding: 4vw;
    }
    .clientas > div article > h2{
        font-size: 4vw;
        text-align: center;
    }
    .clientas > div article > p{
        font-size: 4vw;
        text-align: center;
    }

    .fitness > h2{
        font-size: 8vw;
        text-align: center;
    }

    .contacto{
        flex-direction: column;
    }
    .contacto > aside{
        width: 100%;
        height: 60vw;
    }
    .contacto > article{
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
    }
    .contacto > article > h2{
        font-size: 5vw;
    }
    .contacto > article > p{
        font-size: 4vw;
        font-weight: 500;
    }
    .contacto > article > a{
        font-size: 3vw;
        padding: .6vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .contacto > article > form{
        margin-top: 3vw;
    }
    .contacto > article > form > input, .contacto > article > form > textarea{
        font-size: 4vw;
        height: 10vw;
        font-weight: 500;
        margin-bottom: 2vw;
        padding-left: 5%;
        border-radius: 0px;
    }
    .contacto > article > form > textarea{
        height: auto;
    }
    .contacto > article > form > div > input[type=submit], .contacto > article > form > div > input[type=reset], .contacto > article > a{
        height: 10vw;
        font-size: 4vw;
        font-weight: 500;
        margin-right: 3vw;
        width: 30%;
        margin-left: 1%;
        border-radius: 0px;
    }
    .contacto > article > a{
        width: 39%;
        height: 9vw;
        line-height: 9vw;
        text-align: center;
    }
    footer{
        flex-direction: column;
        height: auto;
        padding-top: 10vw;
        padding-bottom: 10vw;
    }
    footer > div{
        width: 100%;
        height: 20vw;
        background-size: auto 50%;
    }
    footer > h2{
        width: 100%;
        font-size: 6vw;
        margin: 0px;
    }
    footer > p{
        font-size: 4vw;
    }
    .hamburger{
        display: block !important;
        z-index: 13 !important;
        top: 4vw !important;
    }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
        background-color: var(--gris-oscuro) !important;
    }

    .servicio > aside > div > h4, .servicio > aside > article p, .servicio > aside > article h4, .servicio > aside > article h5{
        font-size: 4vw;
    }
    .servicio > aside > div > img{
        height: 10vw;
    }
    .servicio > aside > h1{
        font-size: 10vw;
    }
    .servicio > aside > article h2, .servicio > aside > article h3{
        font-size: 5vw;
    }
    .servicio > nav{
        flex-wrap: wrap;
    }
    .servicio > nav > a{
        font-size: 4vw;
        box-sizing: border-box;
        padding: 1vw;
        font-weight: 500;
        padding-left: 4vw;
        padding-right: 4vw;
        border-right: solid 1px #ccc;
        margin-top: .5vw;
        margin-bottom: .5vw;
    }
}
#primary, #secondary, #footer-widget-area{
    display: none;
}
a{
    text-decoration: none;
    color: inherit;
}