* {
    transition: all ease-in 0.2s;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 25px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #EC436B;
    border-radius: 25px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #D52965;
}

/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 9 jul. 2022, 12:44:42
    Author     : Vanilla Softworks
    Web Page: https://vanillasoftworks.com/
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

.prefooter {
    width: 100%;
    background: #F3F3F3;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 48px;
}


.details {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    row-gap: 10px;
}


#carrito {


    width: 100%;
    max-width: 850px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    column-gap: 15px;
    background: white;
    position: fixed;
    align-content: flex-start;
    align-items: flex-start;
    left: 50%;
    top: 0px;
    overflow: auto;
    transform: translate(-50%, 0%);
    flex-wrap: wrap;
    z-index: 3001;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

#carrito #content {

    padding: 0px 48px 48px 48px;
    width: 100%;
    height: calc(100% - 96px);
    overflow: auto;

}

#carritoView {
    width: 100%;
    height: calc(100% - 75px);

}

.cartHead {
    height: 48px;
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    border-bottom: solid;
    border-bottom-width: thin;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.cartHead h4 {
    color: #A6A6A6;
    width: auto;
    font-weight: normal;
}

.cartBody {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}

.tableCart {
    border-collapse: collapse;
    width: 100%;
}

.tableCart thead tr {
    border-bottom: solid;
    border-bottom-width: thin;
    border-bottom-color: rgba(0, 0, 0, 0.1);
    height: 48px;
}

.tableCart thead td {
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
}


.tableCart tbody tr td {
    border: none;
}

.tableCart tbody tr:nth-child(even) {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.tableCart tbody tr:nth-child(even) td {
    padding: 5px;
}

.tableCart tbody td {
    text-align: center;
    padding: 10px;
    font-size: 10pt;
}

.tableCart2 {
    border-collapse: collapse;
    width: 100%;
}

.tableCart2 thead tr {
    border-bottom: solid;
    border-bottom-width: thin;
    border-bottom-color: rgba(0, 0, 0, 0.1);
    height: 48px;
}

.tableCart2 thead td {
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
}

.tableCart2 tbody tr {
    border-bottom: solid;
    border-bottom-width: thin;
    border-bottom-color: rgba(0, 0, 0, 0.1);
    height: 48px;
}



.tableCart2 tbody tr td {
    border: none;
    font-size: 10pt;
}

.tableCart2 tbody td {
    text-align: center;
    padding: 10px;

}



#carrito #pestanas {
    min-width: 360px;
    width: 100%;
    height: 48px;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    border-bottom: solid;
    border-bottom-width: thin;
    border-bottom-color: rgba(0, 0, 0, 0.2);
}

#carrito #pestanas .pestana {
    width: 180px;
    height: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    cursor: pointer;
}

#carrito #pestanas .pestana b {
    color: #A6A6A6;
}

#carrito #cursor {
    position: relative;
    left: 0px;
    width: 60px;
    height: 10px;
    background: #EC436B;
    border-radius: 2px;
}

.cerrarG {
    width: 100%;
    height: 48px;
    background: rgb(230, 230, 230);
    border: none;
    cursor: pointer;
}

.cerrarG:hover {
    background: rgb(240, 240, 240);
}

#datosArticulo {
    width: 90%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    column-gap: 15px;
    background: white;
    position: fixed;
    align-content: flex-start;
    align-items: flex-start;
    left: 50%;
    top: 0px;
    transform: translate(-50%, 0%);
    z-index: 3001;
    flex-wrap: wrap;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);

}

#datosArticulo #galeria {
    width: 100%;
    max-width: 350px;
    height: 500px;
    background: white;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;

}

.cerrar {

    cursor: pointer;
}

#datosArticulo #galeria .command {
    width: 25px;
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 0px 25px;
    cursor: pointer;
    background-image: url(../icon/flecha-carousel.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#datosArticulo #galeria .command:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

#datosArticulo #body {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 380px);
    height: 80%;
    align-content: space-between;
    align-items: space-between;
}

#datosArticulo #content {
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    row-gap: 20px;
}

#datosArticulo #content #escalas {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#datosArticulo #content #escalas .precio {
    display: flex;
    width: 100px;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
    padding: 10px;

}

#datosArticulo #content #escalas .precio span {
    text-align: center;
    width: 100%;
}

.btn2 {
    background-color: #A70000;

    text-align: center;
    text-decoration: none;
    width: 200px;
    border: none;
    font-size: 10pt;
    color: white;
    font-weight: bold;
    padding: 10px 0px;
    cursor: pointer;
}

.btn2:hover {
    background: #ff3300;

}




#splash {
    width: 95%;
    height: 95%;

    position: fixed;
    background: white;
    top: 50%;
    left: 50%;
    display: none;
    align-content: center;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);

}

#splash .cerrar {
    position: relative;
    top: -50%;
    transform: translateY(100%);
    left: 90%;
}

#splash .img {
    background: black;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

#splash #linkImgZoom {
    width: 100%;
    height: 100%;
    display: flex;
}

#splash .container {
    width: 100%;
    height: calc(100% - 32px);
    display: flex;
}


#banner2 {
    width: 90%;
    background: white;
    display: flex;
    height: 275px;
    align-items: center;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);

}

#banner2 #vista2 {
    display: flex;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 280px;
}

#banner2 a {
    width: 100%;
    height: 100%;

}




.form-vanilla {
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    row-gap: 15px;
}

.form-vanilla input {
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #9C9C9C;
}

.form-vanilla .input-m {
    width: 41%;
    padding: 15px;
}

.form-vanilla .input-l {
    width: 100%;
    padding: 15px;
}

.form-vanilla button {
    width: 50%;
    padding: 10px;
    background: #EFA82D;
    color: white;
    border: none;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.form-vanilla button:hover {
    background: #ff9700;

}

@font-face {
    font-family: 'open-sans';
    src: url('../font/opensans.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}


body {
    background: white;
    display: flex;
    flex-wrap: wrap;
}

.portada {
    width: 100%;
    display: flex;
    height: 200px;
    justify-content: center;
    align-items: center;
    background-image: url(../img/fondito.png);
    background-size: cover;
    background-repeat: no-repeat;


}

#mainNav .buscador {
    display: flex;
    justify-content: center;
    padding: 10px 0px 10px 15px;
    overflow: hidden;
    width: calc(50%);

}

#mainNav .buscador button {
    padding: 10px;
    transform: translate(-16px);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    background: #EC436B;
    color: white;
    width: 128px;

    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);

}

#mainNav .buscador button:hover,
.tarjeta a:hover {
    background: #EC436B;

}

#mainNav .buscador button img {
    height: 24px;

}

.campo {
    width: 100%;
    background: white;
    display: flex;
    border-radius: 25px;
    overflow: hidden;
    padding: 0px 20px;
    align-items: center;
}

.campo h2 {
    display: flex;
    align-items: center;
}

.campo input,
.campo select {
    border: none;
    outline: none;
    padding: 0px 2px;
}

.campo input {
    width: 100%;
}

.campo select {
    border-left: 2px;
    border-color: #A6A6A6;
    border-left-style: solid;
}



.buscador button:hover,
.tarjeta a:hover {
    background: #D52965;

}



* {
    margin: 0px;
    color: black;
    font-family: open-sans;
}

#mainNav {
    background: #D52965;
    padding: 0px 20px;
    height: 64px;
    color: white;
    display: flex;
    justify-content: space-between;
}

#mainNav a {
    color: white;
}

#logo {
    display: flex;
    align-items: center;
    justify-content: center;

    font-style: oblique;
}

#logo span {
    color: white;
    display: flex;
    align-content: center;
    align-items: center;
    column-gap: 10px;
}

#logo span b {
    color: white;
    font-weight: 700;
}

#logo img {
    filter: grayscale(100%) brightness(1000000%);
}

nav {
    width: 100%;
}

#mainNav .botonera {
    display: flex;
    column-gap: 15px;
    padding: 0px 25px;
}



.botonera .perfil {
    height: 100%;
    cursor: default;
}

#perfil #datosUser {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    row-gap: 5px;
    width: 200px;
    top: 60px;
    z-index: 3499;
    position: absolute;
    background: white;
}

#perfil #datosUser .btnOp {
    background: #a70000;
    text-align: center;
    text-decoration: none;
    width: 200px;
    border: none;
    font-size: 10pt;
    color: white;
    font-weight: bold;
    padding: 10px 0px;
    cursor: pointer;
}

.btnOp:hover {
    opacity: 0.7;
}

/*#perfil:hover>#datosUser{
    display: flex;
}*/

#mainNav .botonera .item,
.botonera .perfil {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: white;
    cursor: pointer;
    color: white;
    border: none;
    column-gap: 10px;
}


#mainNav .botonera a img {
    width: 20px;
    filter: grayscale(100%) brightness(1000%);

}

#mainNav .botonera a:hover {
    color: #ff3300;
}

#mainNav .botonera a:hover>img {
    filter: grayscale(0%) brightness(100%);

}

.btn-i {
    font-style: oblique;
    font-weight: bold;
}



#mainNav .botonera b {
    color: white;
}

#mainFrame {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-content: flex-start;
    align-items: flex-start;
}

#verMas {
    display: flex;
    column-gap: 10px;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    color: #438EA8;
    cursor: pointer;
}

#descr {
    overflow: hidden;
    font-size: 11pt;
}

.container-s {
    width: 25%;
    max-width: 250px;
    min-width: 200px;
    padding: 20px;
    min-height: 400px;
    background: #F9F9F9;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
}

.container-m {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    padding-bottom: 56px;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 10px;
}

#banner {
    width: 100%;
    aspect-ratio: 16/7;
    background: white;
}

#banner #vista {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

#banner #selector {
    width: 100%;

    height: 24px;
}

.carroussel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    align-content: flex-start;
    padding: 40px;
    min-height: 200px;
    overflow: hidden;
}

.carroussel .tier {
    width: 100%;
    padding: 10px;
    display: flex;
    overflow: hidden;
}



.carroussel .tier .content {
    width: 100%;
    overflow: hidden;
}

/* 
#articulos{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 15px;
} */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inputNum {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 80px;
    margin: 0px;
    height: 24px;
    z-index: 2;
    overflow: hidden;
    font-weight: bold;
    border: none;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}



.inputNum input {
    width: 50%;
    text-align: center;
    display: flex;
    border: none;
    justify-content: center;

}

.inputNum .btn {
    border: none;
    background: #D52965;
    color: #FFA4A4;
    width: 25%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 1;
    cursor: pointer
}

.inputNum .btn:hover {
    background: #EC436B;
}

#articulos a {
    text-decoration: none;
}

.tarjeta {
    justify-content: center;
    width: 200px;
    padding: 10px 15px;
    row-gap: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-content: space-between;
    background: #F9F9F9;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.tarjeta .info {
    width: 100%;
    align-content: space-between;
}

.tarjeta .title {
    width: 100%;
    text-align: center;
    font-size: 10pt;
}

.tarjeta .profilePic {
    width: 100%;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.tarjeta .precio {
    row-gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    justify-content: center;
}

.tarjeta .precio h4 {
    text-align: left;
    width: 50%;
    color: black;
}

.tarjeta span {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 10pt;
    align-items: center;
    column-gap: 10px;
}

.tarjeta .btn1 {

    width: 100%;
}

.btn1 {
    background: #D52965;
    text-align: center;
    text-decoration: none;
    width: 200px;
    border: none;
    font-size: 10pt;
    color: white;
    font-weight: bold;
    padding: 10px 0px;
    cursor: pointer;
}

.btn1:hover {
    background: #EC436B;

}


.carroussel .tier .content #images {
    width: 1400px;
    height: 250px;
    display: flex;
    align-content: center;
    align-items: center;
    column-gap: 20px;
    position: relative;
}

.carroussel .tier .content .img {
    background-size: contain;
    width: 200px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.carroussel .tier .content .img:hover {
    opacity: 0.5;
    transform: scale(1.2);
}


.descr {
    width: calc(100% - 80px);
    padding: 40px;
    min-height: 200px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
    background: #F9F9F9;
}

.descr p {
    margin-top: 20px;
}

.profile {
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 20px;
    max-width: 260px;
    min-width: 210px;
    background: #F9F9F9;
    padding: 40px;
    min-height: 400px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
    justify-content: center;
}

.profile .profilePic {
    width: 90%;
}

.profile span {
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    column-gap: 10px;
    font-size: 10pt;
}



.profile span img {
    width: 16px;
}

.profile h4 {
    font-size: 10pt;
    width: 100%;
    text-align: center;
}

.profile .social {
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.profile .social img {
    height: 24px;
    cursor: pointer;
}

#nav2 {
    width: 100%;
    background: white;
    height: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 3000;
}

#navMobile .buscador {
    justify-content: center;
    padding: 10px 0px 10px 15px;
    overflow: hidden;
    width: calc(90%);
}

#navMobile .buscador input {
    font-size: 8pt
}

#navMobile .buscador button {
    padding: 10px;
    transform: translate(-16px);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    background: #D52965;
    color: white;
    width: 40px;

    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);

}


#navMobile .buscador button img {
    height: 16px;

}

#navMobile .buscador select {
    width: 90px;

}

#navMobile {
    display: none;
    width: 100%;
    background: #F5F5F5;
    z-index: 2999;
}

#navMobile .buscador {
    display: flex;
}



#nav2 .botonMenu {
    display: inline-flex;
    column-gap: 10px;
    align-content: center;
    align-items: center;
    height: 48px;
    padding: 0px 10px;
    cursor: pointer;
    width: 150px;
    ;
    justify-content: center;
}

#nav2 .navItem:hover {
    background: white;
}

#nav2 #menu:hover>#categorias-menu {
    display: flex;

}

#categorias-menu {
    display: none;
    background: #F5F5F5;
    position: relative;
    top: 0px;
    padding: 0px;
    width: calc(100% - 20px);
    padding: 10px;
    flex-wrap: wrap;
}

#categorias-menu a {
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    #categorias-menu {
        width: 100%;
        left: 0%;
    }

    #mainNav {
        justify-content: center;
        flex-wrap: wrap;
    }

    #nav2 {
        height: 120px;
    }
}

#categorias-menu .itemMenu {
    width: 200px;

}

#categorias-menu .itemMenu h4 {
    width: calc(100% - 20px);
    cursor: pointer;

}

#categorias-menu .itemMenu h4:hover {
    text-decoration: underline;

}

.botonMenu {
    width: 100%;
    text-align: center;
}

#categorias-menu .itemMenu a {
    display: flex;
    column-gap: 10px;
    align-content: center;
    align-items: center;
    padding: 10px;
    width: calc(100% - 20px);
    cursor: pointer;

}

#categorias-menu .itemMenu a:hover {
    background: #D52965;
    color: white;
}

.mapouter {
    position: relative;
    text-align: right;
    width: 240px;
    height: 240px;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    width: 240px;
    height: 240px;
    border-radius: 120px;
}

.gmap_iframe {
    width: 240px !important;
    height: 240px !important;
}


.footer {
    padding: 50px;
    background: #D52965;
    background-size: contain;
    background-position: top;
    width: 100%;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    row-gap: 20px;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer form {
    display: flex;
    margin-top: 20px;
    column-gap: 10px;
}

.footer form input {
    padding: 15px;
    width: 300px;
    background: #D52965;
    border-color: white;
    border-style: solid;
    border-width: 1px;

}

.footer form input::placeholder {
    color: white;
}

.footer form button {
    padding: 10px;
    color: white;
    border-color: white;
    border-style: solid;
    background: none;
    border-width: 1px;
    font-size: 12pt;
    font-weight: bold;
    font-style: oblique;
}

.footer h1,
.footer h4 {
    font-weight: normal;
    width: 100%;
    text-align: center;
    color: white;
}


.footer .info span {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    color: white;
    font-size: 12pt;
    column-gap: 15px;
    margin-top: 20px;
}

.footerAdvice {
    font-size: 18pt;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    color: white;
    column-gap: 15px;
    margin-top: 20px;
}


.footer div {
    color: white;
}

.footer .info {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 75%;
    color: white;
    padding: 30px 15px;
    margin-top: 10px;
    border-top-style: solid;
    border-top-width: 2px;
    border-color: rgba(255, 255, 255, 0.15);

}

.footer span b {
    font-style: oblique;
    color: white;
}

.footer span img {
    filter: grayscale(100%) brightness(1000%);
}

#irArriba {
    background-color: white;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.traslucent {
    background: none;
    border: none;
    cursor: pointer;
}

#alerta {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    position: fixed;
    left: 50%;
    top: 100%;
    background: #D52965;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -100%);
    z-index: 3003;
}

#alerta #textAlert {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    color: white;
}

#user {
    width: 100%;
    padding: 10px 25px;
}

.form1 {
    margin: auto;
    width: 100%;
    max-width: 600px;

    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: space-around;
    align-content: flex-start;
    align-items: flex-start;
}

.form1 .input {

    display: flex;
    width: 45%;
    flex-wrap: wrap;
}

.form1 .input-G {

    display: flex;
    width: 99%;
    flex-wrap: wrap;
}

.form1 .input span,
.form1 .input-G span {
    width: 100%;
    font-size: 10pt;
}

.form1 .input input,
.form1 .input select,
.form1 .input textarea,
.form1 .input-G input,
.form1 .input-G select,
.form1 .input-G textarea {
    width: 100%;
    padding: 5px;
    border: none;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
}

.itemPrice {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;

}

.itemPrice #total {
    display: flex;

    align-content: center;
    align-items: center;
}


.messageW {
    color: white;
    font-size: 10pt;
    text-align: center;
    width: 160px;
    padding: 20px;
    height: 60px;
    background: rgba(109, 76, 191, 0.90);
    border-radius: 10px;
}

.pedidoFinDetail {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    height: 200px;
    overflow-y: auto;

}

#ampliarImagen {
    display: none;
}

#modal {
    background: #F3F3F3;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    z-index: 10000;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#modal #titleBar button {
    background: none;
    border: none;
    height: 100%;
}

#modal #titleBar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    align-content: center;
    align-items: center;
}

#modal h1 {
    text-align: center;
}

#modalContent {
    width: 100%;
    padding: 25px;
}

@media only screen and (max-width: 800px) {

    .tarjeta .precio h4 {
        text-align: center;

    }

    .pedidoFinDetail span,
    .pedidoFinDetail h4 {
        font-size: 8pt;

    }

    #carrito #content {
        padding: 0px 10px 10px 10px;
        width: 100%;
        height: calc(100% - 76px);
        overflow: auto;

    }

    #carrito #pestanas {
        width: 100%;
        min-width: 100%;
        justify-content: space-between;
    }


    #carrito #pestanas .pestana {
        width: 60px;

    }

    #carrito #pestanas .pestana h4 {
        font-size: 8pt;

    }

    .form1 {
        font-size: 10pt;
        justify-content: center;
    }

    .form1 .input {
        width: 90%;
    }

    .form1 .input-G {
        width: 90%;
    }

    .form1 .input span {

        font-size: 10pt;

    }

    #mainNav .buscador {
        display: none;
    }





    .footer {
        padding: 20px 10px;
        width: calc(100% - 20px);
    }

    .footer .info span {
        font-size: 8pt;
    }

    .footer form {
        display: flex;
        margin-top: 20px;
        column-gap: 10px;
    }

    .footer form input {
        padding: 15px;
        width: 100px;
        font-size: 8pt;
        background: #D52965;
        border-color: white;
        border-style: solid;
        border-width: 1px;
        color: white;

    }

    .footerAdvice {
        font-size: 12pt;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        color: white;
        column-gap: 10px;
        margin-top: 20px;
    }

    .footer form input::placeholder {
        color: white;
    }

    .footer form button {
        padding: 5px;
        color: white;
        border-color: white;
        border-style: solid;
        background: none;
        border-width: 1px;
        font-size: 8pt;
        font-weight: bold;
        font-style: oblique;
    }


    .tableCart thead td {
        font-size: 8pt;

    }

    .tableCart tbody td {
        font-size: 8pt;

    }

    .inputNum {
        display: flex;
        justify-content: center;
        margin: 0px;
        height: 20px;
        z-index: 2;
        overflow: hidden;
        font-weight: bold;
        border: none;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    }



    .inputNum input {
        width: 60%;
        text-align: center;
        display: flex;
        border: none;
        justify-content: center;

    }

    .inputNum .btn {
        border: none;
        background: #D52965;
        color: #FFA4A4;
        width: 33%;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        z-index: 1;
        cursor: pointer
    }

    .container-m {
        width: 100%;

    }

    #mainFrame {
        padding: 0px;
        width: 100%;
    }

    #datosArticulo {
        min-width: calc(100%);
        height: calc(100%);
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        justify-content: center;
        column-gap: 15px;
        background: white;
        position: fixed;
        align-content: flex-start;
        align-items: flex-start;
        row-gap: 10px;
        left: 50%;
        top: 0px;
        transform: translate(-50%, 0%);
        z-index: 3001;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    }

    #datosArticulo #galeria {

        width: 100%;
        max-width: 100%;
        height: 550px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        justify-content: space-between;

    }

    #datosArticulo #body {
        width: 90%;
        height: calc(100% - 300px);
        justify-content: center;
    }

    #datosArticulo #content {
        min-height: 10px;
    }

    #datosArticulo #escalas {
        justify-content: center;
        font-size: 10pt;
    }

    #datosArticulo .btn1 {
        width: 80px;
    }


    .tarjeta {
        justify-content: center;
        width: 100px;
        padding: 15px 15px;
        min-height: 220px;
        row-gap: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        background: #F9F9F9;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    }

    .tarjeta .profilePic {
        height: 75px;
    }

    .tarjeta .precio h4 {
        font-size: 8pt;
    }

    .tarjeta .title {
        font-size: 8pt;
    }

    .tarjeta .precio {
        align-content: center;
        align-items: center;
    }

    .tarjeta .btn1 {
        font-size: 8pt;
    }

    .tarjeta .minimo {
        font-size: 6pt;
    }

    #navMobile {
        display: flex;
    }

    #alerta #textAlert {
        font-size: 8pt;
        padding: 5px;
    }

    #carrito {
        max-height: 100%;
    }

    #ampliarImagen {
        display: block;
    }
}