*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    min-height: 100dvh
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance
}

p {
    text-wrap: pretty
}

ul[role=list],
ol[role=list] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto
}

a {
    text-decoration: none
}

a:-webkit-any-link {
    text-decoration: none
}

@keyframes wiggle {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(2deg)
    }

    50% {
        transform: rotate(-2deg)
    }

    75% {
        transform: rotate(1deg)
    }

    100% {
        transform: rotate(0)
    }
}

@font-face {
    font-family: "shine_flowerregular";
    src: url("../fonts/shine_flower-webfont.woff2") format("woff2"), url("../fonts/shine_flower-webfont.woff") format("woff"), url("../fonts/shine_flower-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

html,
body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    height: 100%;
    line-height: 1.4;
    margin: 0;
    overflow: auto;
    padding: 0;
    scroll-behavior: smooth;
    transition: all .5s linear
}

@media(min-width: 560px) {

    html,
    body {
        font-size: 14px
    }
}

h1,
h2,
h3,
h4 {
    font-family: "shine_flowerregular";
    font-weight: normal;
    line-height: 1
}

h2.titulo {
    color: #eb0a2a;
    font-size: 60px;
    margin: 0 0 40px
}

p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0
}

p+p {
    margin-top: 16px
}

.center-align {
    text-align: center
}

section {
    display: flex;
    align-items: center;
    justify-content: center
}

section.no-full {
    margin: 40px auto;
    min-height: unset
}

section .contenido {
    margin-inline: auto;
    max-width: 1200px;
    width: 100%
}

.columnas {
    display: flex;
    flex-direction: column;
    gap: 30px
}

@media(min-width: 991px) {
    .columnas {
        flex-direction: row
    }

    .columnas .columna {
        width: 50%
    }
}

#menu-share {
    background-color: #255699;
    border-radius: 20px 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-right: 12px;
    padding: 30px 8px 30px 12px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 9
}

@media(max-width: 767px) {
    #menu-share {
        display: none
    }
}

#menu-share a {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat
}

#menu-share a.facebook {
    background-image: url("../images/share-facebook.svg")
}

#menu-share a.instagram {
    background-image: url("../images/share-instagram.svg")
}

#menu-share a.whatsapp {
    background-image: url("../images/share-whatsapp.svg")
}

#lista-productos ul {
    list-style: none
}

#lista-productos ul li {
    border-top: 2px solid #255699
}

#lista-productos ul li.is-open .producto-contenido {
    opacity: 1
}

#lista-productos ul li.is-open .toggle-producto svg {
    transform: rotate(0deg)
}

#lista-productos ul li h3 {
    color: #255699
}

#lista-productos ul li .producto-contenido {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height .4s ease, opacity .3s ease
}

#lista-productos ul li .producto-contenido .in {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 40px;
    padding: 30px;
    text-align: center
}

@media(min-width: 1100px) {
    #lista-productos ul li .producto-contenido .in {
        grid-template-columns: repeat(4, 1fr)
    }
}

#lista-productos ul li .toggle-producto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    cursor: pointer;
    font-size: 40px;
    line-height: 1;
    margin: 0;
    padding: 25px 0
}

#lista-productos ul li .toggle-producto .q-faq {
    background-color: #0b6e90;
    color: #fff;
    padding: 10px
}

#lista-productos ul li .toggle-producto svg {
    transform: rotate(90deg);
    transition: transform .3s ease
}

#menu-productos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px
}

@media(min-width: 1100px) {
    #menu-productos {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px
    }
}

#menu-productos a {
    display: inline-block
}

#menu-productos a:hover {
    animation: wiggle .4s ease-in-out
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999
}

.modal.active {
    display: block
}

.modal .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .65)
}

.modal.tiempo30min .modal-tiempo {
    background: url("../images/modal-tiempo-30min.png") no-repeat center
}

.modal.tiempo1h .modal-tiempo {
    background: url("../images/modal-tiempo-1h.png") no-repeat center
}

.modal .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 1180px);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px 14px
}

.modal .modal-dialog .modal-close {
    background: rgba(0, 0, 0, 0);
    border: 0;
    font-weight: bold;
    font-size: 28px;
    color: #eb0a2a;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 18px;
    top: 18px
}

.modal .modal-dialog .modal-header {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: auto 220px;
    grid-template-areas: "header-tipo header-info" "header-title header-info" ". header-info"
}

.modal .modal-dialog .modal-header #modalTitle {
    grid-area: header-title;
    color: #255699;
    font-size: 50px;
    margin: 30px 0 0
}

.modal .modal-dialog .modal-header #modalTipo {
    grid-area: header-tipo;
    align-self: center;
    justify-self: center
}

.modal .modal-dialog .modal-header .info {
    grid-area: header-info;
    padding-top: 22px
}

.modal .modal-dialog .modal-header .pdf-download {
    display: inline-block
}

.modal .modal-dialog .modal-header .modal-tiempo {
    background-size: contain;
    height: 76px;
    width: 214px
}

.tiempo30min .modal .modal-dialog .modal-header .modal-tiempo {
    background: url("../images/modal-tiempo-30min.png") no-repeat center
}

.tiempo1h .modal .modal-dialog .modal-header .modal-tiempo {
    background: url("../images/modal-tiempo-1h.png") no-repeat center
}

.modal .modal-dialog .modal-body {
    padding: 6px 0 0
}

.modal .modal-dialog .modal-body .recipe-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 18px
}

@media(max-width: 820px) {
    .modal .modal-dialog .modal-body .recipe-grid {
        grid-template-columns: 1fr
    }
}

.modal .modal-dialog .modal-body .recipe-grid .recipe-box {
    display: grid;
    grid-template-rows: min-content min-content auto;
    align-items: flex-end;
    color: #255699;
    padding: 0;
    min-height: unset
}

.modal .modal-dialog .modal-body .recipe-grid .recipe-box h3 {
    color: #eb0a2a;
    font-size: 24px;
    margin: 0 0 10px
}

.modal .modal-dialog .modal-body .recipe-grid .recipe-box .recipe-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.modal .modal-dialog .modal-body .recipe-grid .recipe-box .recipe-step {
    margin: 0 0 10px
}

.modal .modal-dialog .modal-body .recipe-grid .recipe-box .recipe-step b {
    display: block;
    margin-bottom: 4px
}

#contactModal .modal-dialog {
    width: min(94vw, 980px)
}

#contactModal .modal-body {
    display: flex;
    justify-content: center
}

#contactModal .modal-body .modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(min-width: 991px) {
    #contactModal .modal-body .modal-content {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 100px
    }
}

#contactModal .modal-body .modal-content .lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media(max-width: 990px) {
    #contactModal .modal-body .modal-content .lado:nth-child(1) {
        order: 2
    }

    #contactModal .modal-body .modal-content .lado:nth-child(2) {
        order: 1
    }
}

#contactModal .titulo {
    max-width: 320px;
    padding: 20px 15px 16px;
    position: relative;
    text-align: center
}

#contactModal .titulo.movil {
    margin-bottom: 20px
}

#contactModal .titulo.web {
    display: none
}

@media(min-width: 991px) {
    #contactModal .titulo.movil {
        display: none
    }

    #contactModal .titulo.web {
        display: block
    }
}

#contactModal .titulo h2 {
    color: #eb0a2a;
    font-size: 28px;
    margin: 0
}

#contactModal .titulo:before {
    content: "";
    background-image: url("../images/contacto-stars.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 46px;
    left: 0;
    position: absolute;
    top: 0;
    width: 37px
}

#contactModal .titulo:after {
    content: "";
    background-image: url("../images/contacto-face.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 45px;
    right: 0;
    position: absolute;
    bottom: 0;
    width: 47px
}

#contactModal .mail {
    color: #255699;
    font-family: "shine_flowerregular";
    font-size: 28px;
    margin: 20px auto;
    text-align: center
}

#contactModal .bloque {
    font-size: 16px;
    color: #255699;
    margin-top: 20px;
    max-width: 260px;
    text-align: center
}

#contactModal .bloque b {
    display: block;
    margin-bottom: 6px
}

#contactModal .bloque a {
    color: #255699
}

#contactModal .share {
    margin-top: 20px
}

#contactModal .contact-form {
    max-width: 520px;
    margin: 0 auto;
    background: #d9d9d9;
    border-radius: 22px;
    padding: 22px 22px 18px;
    display: grid;
    gap: 14px;
    box-sizing: border-box
}

#contactModal .contact-form .field {
    position: relative
}

#contactModal .contact-form .field.field-textarea label {
    top: 14px;
    transform: unset
}

#contactModal .contact-form .field input,
#contactModal .contact-form .field textarea {
    width: 100%;
    border: 0;
    outline: none;
    background: #fff;
    border-radius: 999px;
    padding: 18px 18px 14px;
    box-sizing: border-box;
    font-size: 15px
}

#contactModal .contact-form .field textarea {
    border-radius: 22px;
    padding-top: 22px;
    resize: vertical;
    min-height: 120px
}

#contactModal .contact-form .field label {
    position: absolute;
    left: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #255699;
    pointer-events: none;
    top: 50%;
    transform: translate(0, -50%)
}

#contactModal .contact-form .field label span {
    color: #255699
}

#contactModal .contact-form .field input:not(:-moz-placeholder)+label,
#contactModal .contact-form .field textarea:not(:-moz-placeholder)+label {
    opacity: 0;
    transform: translateY(-6px)
}

#contactModal .contact-form .field input:focus+label,
#contactModal .contact-form .field textarea:focus+label,
#contactModal .contact-form .field input:not(:placeholder-shown)+label,
#contactModal .contact-form .field textarea:not(:placeholder-shown)+label {
    opacity: 0;
    transform: translateY(-6px)
}

#contactModal .contact-form .form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px
}

@media(max-width: 520px) {
    #contactModal .contact-form .form-bottom {
        flex-direction: column;
        align-items: stretch
    }
}

#contactModal .contact-form .form-bottom .check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 12px;
    color: #255699
}

#contactModal .contact-form .form-bottom .check input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

#contactModal .contact-form .form-bottom .check input:checked+.box {
    border-color: #255699
}

#contactModal .contact-form .form-bottom .check input:checked+.box:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #255699;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg)
}

#contactModal .contact-form .form-bottom .check .box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    display: inline-block;
    position: relative;
    flex: 0 0 auto
}

#contactModal .contact-form .form-bottom .btn {
    background: #255699;
    color: #fff;
    border: 0;
    padding: 10px 26px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    min-width: 140px
}

@media(max-width: 520px) {
    #contactModal .contact-form .form-bottom .btn {
        width: 100%
    }
}

#contactModal .contact-form .form-bottom .btn:hover {
    filter: brightness(0.95)
}

#inicio .swiper-slide {
    text-align: center
}

#inicio .nav-controls .swiper-button-next,
#inicio .nav-controls .swiper-button-prev {
    color: #eb0a2a
}

#inicio .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 20px
}

#inicio .swiper-pagination .swiper-pagination-bullet {
    border: 1px solid #235497;
    background-color: #fff;
    height: 12px;
    opacity: 1;
    width: 12px
}

#inicio .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #235497
}

#conoce-productos {
    background: rgba(217, 217, 217, .2);
    padding: 40px
}

#conoce-productos h2 {
    color: #eb0a2a;
    font-size: 60px;
    margin: 0 0 15px
}

#conoce-productos #menu-productos {
    margin-top: 40px
}

#creadores {
    position: relative
}

#creadores .contenido {
    display: flex
}

#creadores img {
    margin-inline: auto;
    max-height: 90vh
}

#creadores .descubre {
    position: absolute;
    bottom: 0;
    transform: translate(0, 43%)
}

#donde-comprar {
    background: rgba(217, 217, 217, .2);
    padding: 90px 40px 40px;
}

#donde-comprar .columnas {
    align-items: center;
    padding-top: 120px;
    position: relative
}

@media(min-width: 991px) {
    #donde-comprar .columnas {
        padding-top: 60px
    }
}

#donde-comprar .columnas .columna:nth-child(2) {
    padding-top: 20px
}

#donde-comprar .columnas:before {
    content: "";
    background-image: url("../images/logo-san-antonio.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 110px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 220px
}

#donde-comprar .swiper-contenedor {
    max-width: 500px
}

@media(min-width: 991px) {
    #donde-comprar .swiper-contenedor {
        max-width: 90vw
    }
}

#donde-comprar .swiper {
    padding-bottom: 20px
}

#donde-comprar .swiper .swiper-slide {
    width: 100% !important
}

#donde-comprar .swiper img {
    width: 100%
}

#donde-comprar h2 {
    color: #385f9d;
    font-size: 40px;
    margin: 0 0 20px
}

#donde-comprar button {
    background-color: #eb0a2a;
    border-radius: 24px;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin: 30px 0;
    padding: 12px 36px
}

#donde-comprar ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding-left: 40px
}

#donde-comprar .marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 40px
}

#donde-comprar .marcas h3 {
    color: #eb0a2a;
    font-size: 26px;
    margin: 0
}

@media(max-width: 1099px) {
    #donde-comprar .marcas h3 {
        flex: 1 100%;
        text-align: center
    }
}

#donde-comprar .marcas img {
    margin: auto;
    max-width: 100%;
    mix-blend-mode: multiply
}

#salchipulpo-intro h2 {
    color: #eb0a2a;
    font-size: 56px;
    margin: 0
}

#salchipulpo-intro p {
    text-align: right
}

#salchipulpo-intro .columnas .columna:nth-child(1) {
    flex: 1 30%
}

#salchipulpo-intro .columnas .columna:nth-child(2) {
    flex: 1 70%;
    align-self: flex-end
}

@media(min-width:991px) {
    #salchipulpo-intro .columnas .columna:nth-child(1) img {
        transform: translateX(60px)
    }
}

#salchipulpo-ideas h2 {
    color: #255699
}

#salchipulpo-ideas .ideas-swiper .swiper-slide {
    width: auto;
    flex-shrink: 0
}

#salchipulpo-ideas .ideas-swiper .swiper-wrapper {
    transition-timing-function: linear !important
}

#salchipulpo-ideas .ideas-swiper .in {
    background-image: url("../images/idea-marco.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    display: grid;
    grid-template-columns: 40% auto;
    align-items: self-end;
    height: 240px;
    padding: 26px 28px;
    width: min(400px, 90vw)
}

#salchipulpo-ideas .ideas-swiper .in .info {
    padding-left: 20px
}

#salchipulpo-ideas .ideas-swiper .in .info h3 {
    color: #255699;
    font-size: 30px;
    margin: 0 0 10px
}

#salchipulpo-ideas .ideas-swiper .in .info p {
    font-size: 14px
}

#historia {
    text-align: center;
    flex-direction: column;
    padding-inline: 0
}

#historia h2 {
    color: #255699;
    padding-inline: 10px
}

@media(min-width: 768px) {
    #historia h2 {
        padding-inline: 50px
    }
}

#historia .logo {
    margin-bottom: 40px;
    width: 260px
}

#historia .info {
    padding-inline: 10px
}

@media(min-width: 768px) {
    #historia .info {
        -moz-column-count: 2;
        column-count: 2;
        -moz-column-gap: 2rem;
        column-gap: 2rem;
        -moz-column-fill: balance;
        column-fill: balance;
        padding-inline: 50px;
        text-align: left
    }
}

#historia h3 {
    color: #eb0a2a;
    font-size: 50px;
    margin: 100px 0 40px
}

#historia .swiper-wrapper {
    transition-timing-function: linear !important
}

#historia .fechas-swiper {
    background: #255699;
    overflow: hidden;
    padding: 50px 10px;
    width: 100%
}

@media(min-width: 768px) {
    #historia .fechas-swiper {
        padding: 70px 0
    }
}

#historia .fechas-swiper .swiper-slide {
    padding: 0 40px;
    white-space: nowrap;
    width: auto
}

#historia .fecha-in {
    display: flex;
    align-items: center;
    gap: 20px;
    width: -moz-max-content;
    width: max-content
}

#historia .fecha-in .anio {
    color: #fff;
    font-family: "shine_flowerregular";
    font-size: 50px;
    font-weight: 600
}

#historia .fecha-in p {
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    max-width: 240px;
    text-align: left;
    text-wrap: balance
}

#recetas {
    margin-top: 80px
}

#recetas h2 {
    color: #255699
}

#recetas #menu-recetas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px
}

@media(min-width: 1100px) {
    #recetas #menu-recetas {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        -moz-column-gap: 30px;
        column-gap: 30px;
        grid-template-rows: repeat(3, auto);
        row-gap: 5px
    }
}

#recetas .producto {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    min-width: 260px;
    padding: 26px 0
}

#recetas .producto a {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-items: flex-end;
    justify-content: center;
    color: #255699;
    font-weight: bold;
    text-align: center
}

#recetas .producto a * {
    justify-self: center
}

#recetas-intro {
    text-align: center
}

#recetas-intro p {
    margin-inline: auto;
    max-width: 600px
}

#recetas-intro .swiper {
    margin-top: 40px
}

#recetas-intro .swiper img {
    max-height: 40vh
}

nav {
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .4);
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    position: relative;
    z-index: 9
}

@media(min-width: 1200px) {
    nav {
        display: grid;
        justify-content: space-evenly;
        grid-template-columns: 130px auto
    }
}

nav .links {
    gap: 30px;
    display: grid;
    align-items: center;
    justify-content: space-evenly;
    grid-template-columns: auto minmax(min-content, 200px)
}

nav .search-pill {
    display: grid;
    grid-template-columns: auto 18px;
    align-items: center;
    height: 36px;
    border: 2px solid #255699;
    border-radius: 36px;
    padding: 0 14px;
    width: 200px
}

@media(min-width: 1200px) {
    nav .search-pill {
        width: 100%
    }
}

@media(min-width: 1300px) {
    nav .search-pill {
        width: 200px
    }
}

nav .search-pill:focus-within {
    box-shadow: 0 0 0 3px rgba(47, 95, 215, .3)
}

nav .search-pill input {
    background: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    font-size: 16px;
    color: #255699;
    width: 100%
}

nav .search-pill input::-moz-placeholder {
    color: #255699;
    opacity: 1
}

nav .search-pill input::placeholder {
    color: #255699;
    opacity: 1
}

nav .search-pill button {
    border: none;
    background: none;
    cursor: pointer;
    color: #2f5fd7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

nav #menu-toggle {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
    display: none;
    margin: 8px 15px;
    padding: 0;
    position: relative;
    width: 26px
}

@media(max-width: 1199px) {
    nav #menu-toggle {
        display: block
    }
}

nav #menu-toggle span {
    background-color: #eb0a2a;
    display: block;
    height: 4px;
    transition: all .3s;
    width: 26px
}

nav #menu-toggle span+span {
    margin-top: 4px
}

nav ul {
    display: flex;
    -moz-column-gap: 30px;
    column-gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0
}

@media(min-width: 1200px) {
    nav ul li.active a {
        color: #eb0a2a
    }
}

@media(min-width: 1300px) {
    nav ul {
        -moz-column-gap: 40px;
        column-gap: 40px
    }
}

nav ul a {
    color: #2b5597;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none
}

@media(min-width: 1200px) {

    nav ul a:hover,
    nav ul a:active,
    nav ul a:focus {
        color: #eb0a2a
    }
}

@media(max-width: 1199px) {
    nav {
        flex-wrap: wrap
    }

    nav.active .links {
        left: 0
    }

    nav.active #menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg)
    }

    nav.active #menu-toggle span:nth-child(2) {
        opacity: 0
    }

    nav.active #menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg)
    }

    nav .links {
        animation: fadeIn .5s ease;
        background-color: #fff;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 5vh;
        height: calc(100vh - 40px);
        left: -100%;
        max-width: 440px;
        padding: 0 40px 0 40px;
        position: fixed;
        top: 0;
        transition: left .5s ease;
        width: 100%
    }

    nav .links ul {
        flex-direction: column;
        gap: 15px;
        width: 100%
    }

    nav .links ul:before {
        background-image: url("../images/logo-san-antonio.svg");
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 8vh;
        width: 100%
    }

    nav .links ul a {
        display: block;
        padding: 10px 0;
        width: 100%
    }
}

footer {
    background-color: #255699;
    padding: 30px 10px
}

@media(max-width: 767px) {
    footer {
        padding: 30px
    }
}

footer .footer-in {
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 767px) {
    footer .footer-in {
        flex-direction: column;
        gap: 15px
    }
}

footer .footer-in * {
    color: #fff
}

@media(max-width: 767px) {
    footer .footer-in * {
        text-align: center
    }
}

footer .footer-in *:after {
    content: "|";
    padding: 0 20px
}

@media(max-width: 767px) {
    footer .footer-in *:after {
        display: none
    }
}

footer .footer-in *:last-child::after {
    display: none
}

/*# sourceMappingURL=styles.min.css.map */