.danger {
color: #FF0000;
}

.se-pre-con {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
background: url(../img/Preloader_3.gif) center no-repeat rgba(255, 255, 255, 0.6);
}

.my-actions {
margin: 2em 2em 0;
}

.order-1 {
order: 1;
}

.order-2 {
order: 2;
}

.order-3 {
order: 3;
}

.right-gap {
margin-right: auto;
}

.left-gap {
margin-left: auto;
}

#payment-form {
width: 400px;
margin: 0 auto;
}

#card-element {
border: 1px solid #ccc;
padding: 10px;
border-radius: 1px;
padding-top: 13px;
height: 45px;
}

#card-errors {
color: #fa755a;
margin-top: 10px;
}

.optNewAddress {
background-color: #d1d1d1;
}

@font-face {
    font-family: 'Acme';
    src: url('../files/fonts/7_acme.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Aerolite';
    src: url('../files/fonts/33_aerolite.otf')
    format('opentype');
    }

    @font-face {
    font-family: 'Allura';
    src: url('../files/fonts/41_allura.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arabic Font';
    src: url('../files/fonts/28_arabic_font.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arial';
    src: url('../files/fonts/8_arial.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arial Arabic';
    src: url('../files/fonts/51_arial_arabic.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arial Bold';
    src: url('../files/fonts/9_arial_bold.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arial Regular';
    src: url('../files/fonts/10_arial_regular.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arial Unicode';
    src: url('../files/fonts/11_arial_unicode.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Arial Unicode Bold';
    src: url('../files/fonts/12_arial_unicode_bold.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Audiowide';
    src: url('../files/fonts/22_audiowide.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Baloo';
    src: url('../files/fonts/42_baloo.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Bangers';
    src: url('../files/fonts/18_bangers.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Bankgothic';
    src: url('../files/fonts/14_bankgothic.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Bebas Neue';
    src: url('../files/fonts/19_bebas_neue.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Birkham';
    src: url('../files/fonts/6_birkham.otf')
    format('opentype');
    }

    @font-face {
    font-family: 'Cambria Math';
    src: url('../files/fonts/38_cambria_math.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Caveat';
    src: url('../files/fonts/23_caveat.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Chewy';
    src: url('../files/fonts/43_chewy.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Cinzel';
    src: url('../files/fonts/20_cinzel.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'College Heavy Outline';
    src: url('../files/fonts/13_college_heavy_outline.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Courgette';
    src: url('../files/fonts/17_courgette.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Deja Vu Sans';
    src: url('../files/fonts/27_deja_vu_sans.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Ebrima';
    src: url('../files/fonts/37_ebrima.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Fjalla One';
    src: url('../files/fonts/24_fjalla_one.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Great Vibes';
    src: url('../files/fonts/48_great_vibes.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Lobster';
    src: url('../files/fonts/47_lobster.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Luckiest Guy';
    src: url('../files/fonts/25_luckiest_guy.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Mekon Gradient';
    src: url('../files/fonts/32_mekon_gradient.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Montserrat';
    src: url('../files/fonts/46_montserrat.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Nirmala Ui';
    src: url('../files/fonts/30_nirmala_ui.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Noto Sans Arabic';
    src: url('../files/fonts/36_noto_sans_arabic.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Noto Sans Ethiopic';
    src: url('../files/fonts/35_noto_sans_ethiopic.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Pacifico';
    src: url('../files/fonts/16_pacifico.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Pashto';
    src: url('../files/fonts/29_pashto.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Permanent Marker';
    src: url('../files/fonts/21_permanent_marker.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Righteous';
    src: url('../files/fonts/45_righteous.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Rubik Wet Paint Regular';
    src: url('../files/fonts/34_rubik_wet_paint_regular.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Satisfy';
    src: url('../files/fonts/15_satisfy_.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Segoe Ui Historic';
    src: url('../files/fonts/40_segoe_ui_historic.TTF')
    format('opentype');
    }

    @font-face {
    font-family: 'Shadows Into Light';
    src: url('../files/fonts/44_shadows_into_light.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Staatliches';
    src: url('../files/fonts/26_staatliches.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Super Giggle';
    src: url('../files/fonts/31_super_giggle.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Syncopate';
    src: url('../files/fonts/50_syncopate.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Times New Roman';
    src: url('../files/fonts/39_times_new_roman.ttf')
    format('truetype');
    }

    @font-face {
    font-family: 'Unica One';
    src: url('../files/fonts/49_unica_one.ttf')
    format('truetype');
    }

    .truncate {
white-space: nowrap;
/* Prevent the text from wrapping to a new line */
overflow: hidden;
/* Hide any text that overflows the div */
text-overflow: ellipsis;
/* Add the ellipsis (...) */
width: 96%;
/* Set a width for the div */
}

.btn-outline-primary .myDot {
background-color: black;
}

.btn-outline-primary:hover .myDot {
background-color: white;
}

.btn-primary .myDot {
background-color: white;
}

.myDot {
display: inline-block;
width: 4px;
height: 4px;
margin: 0 1px;
border-radius: 50%;
opacity: 0;
animation: appear 1.5s infinite steps(1);
}

.myDot:nth-child(1) {
animation-delay: 0s;
}

.myDot:nth-child(2) {
animation-delay: 0.3s;
}

.myDot:nth-child(3) {
animation-delay: 0.6s;
}

@keyframes appear {

0%,
100% {
opacity: 0;
}

50% {
opacity: 1;
}
}

#coupon {
text-transform: uppercase;
}

/* The switch - the outer container */
.switch-xs {
position: relative;
display: inline-block;
width: 28px;
height: 16px;
}

/* Hide the default HTML checkbox */
.switch-xs input {
opacity: 0;
width: 0;
height: 0;
}

.slider-xs {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}

/* The slider before the switch */
.slider-xs:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

/* Checkbox checked state */
input:checked+.slider-xs {
background-color: #2196F3;
}

/* Move the slider when checked */
input:checked+.slider-xs:before {
transform: translateX(12px);
}

/* The switch - the outer container */
.switch-sm {
position: relative;
display: inline-block;
width: 38px;
height: 24px;
}

/* Hide the default HTML checkbox */
.switch-sm input {
opacity: 0;
width: 0;
height: 0;
}

.slider-sm {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}

/* The slider before the switch */
.slider-sm:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

/* Checkbox checked state */
input:checked+.slider-sm {
background-color: #2196F3;
}

/* Move the slider when checked */
input:checked+.slider-sm:before {
transform: translateX(14px);
}

/* The switch - the outer container */
.switch-md {
position: relative;
display: inline-block;
width: 48px;
height: 28px;
}

/* Hide the default HTML checkbox */
.switch-md input {
opacity: 0;
width: 0;
height: 0;
}

.slider-md {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}

/* The slider before the switch */
.slider-md:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

/* Checkbox checked state */
input:checked+.slider-md {
background-color: #2196F3;
}

/* Move the slider when checked */
input:checked+.slider-md:before {
transform: translateX(20px);
}

/* Styles for disabled state */
input:disabled+.slider {
background-color: #bfbfbf;
/* Change slider background for disabled state */
cursor: not-allowed;
/* Change cursor to indicate it's disabled */
}

input:disabled+.slider:before {
background-color: #e6e6e6;
/* Optional: change the knob color in disabled state */
}

/* For the medium switch (slider-md) */
input:disabled+.slider-md {
background-color: #bfbfbf;
/* Change slider background for disabled state */
cursor: not-allowed;
/* Change cursor to indicate it's disabled */
}

/* Move the slider when checked */
input:disabled+.slider-md:before {
background-color: #e6e6e6;
/* Optional: change the knob color in disabled state */
}

/* The switch - the outer container */
.switch-lg {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide the default HTML checkbox */
.switch-lg input {
opacity: 0;
width: 0;
height: 0;
}

.slider-lg {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}

/* The slider before the switch */
.slider-lg:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

/* Checkbox checked state */
input:checked+.slider-lg {
background-color: #2196F3;
}

/* Move the slider when checked */
input:checked+.slider-lg:before {
transform: translateX(26px);
}

.h7 {
font-size: 14px;
}

.slashed {
position: relative;
}

.slashed::after {
content: "";
width: 120%;
height: 8px;
background: repeating-linear-gradient(
to bottom,
black 0%, black 50%,
white 51%, white 100%
);
transform: rotate(-45deg);
position: absolute;
top: 45%;
left: -10%;
}

/* Dropdown Categories*/
.menu-categories {
display: none;
width: 100%;
justify-items: center;
text-align: center;
}

.nav-item:hover > .menu-categories {
display: block;
}

.menu-categories .drop-item {
display: inline-block;
margin: 10px;
}

.drop-item {
list-style: none;
transition: all 0.3s ease-in-out;
}

.drop-item img {
width: 100px;
height: 90px;
}

.drop-link, .menu-categories.show .drop-link {
display: block;
padding: 0.5rem 1rem;
color: #000;
text-decoration: none;
position: relative;
transition: color 0.3s ease-in-out;
}

.drop-link::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: currentColor;
transition: width 0.3s ease-in-out;
}

/* Estilo solo para el enlace seleccionado */
.drop-link.selected {
font-weight: 600;
}

.drop-link.selected::before {
width: 100%;
}

.drop-link:hover::before,
.drop-link.active::before {
width: 100%;
}

.menu-categories.show .drop-link:hover,
.menu-categories .drop-link:hover,
.subcategories .drop-link:hover,
.drop-link.active {
font-weight: 500;
color: #000;
}

.drop-link.active,
.drop-item.active > .drop-link {
font-weight: 500;
color: #000;
}

.drop-item.active .drop-link::before {
width: 100%;
transition: 0.5s;
}

.subcategories {
display: none;
width: 100%;
justify-items: center;
text-align: center;
}

.shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.drop-item:hover > .subcategories {
display: block;
}

.subcategories .drop-item {
display: inline-block;
}

/* Estilo base para las categorías */
.menu-categories-mobile {
width: 100%;
text-align: left;
display: none;
}

/* Estilo para los ítems principales */
.menu-categories-mobile .drop-item {
position: relative;
}

/* Estilo del enlace de las categorías principales */
.menu-categories-mobile .drop-link {
display: block;
padding: 8px 15px;
cursor: pointer;
text-decoration: none;
}

/* Estilo para las subcategorías */
.subcategories-mobile {
display: none;
}

.subcategories-mobile.show {
display: block;
}

.subcategories-mobile .drop-item {
padding-left: 15px;
font-weight: 300;
}

.subcategories-mobile .drop-item > a:hover {
background-color: #ddd;
color: #000;
}

.subcategories-mobile .drop-item {
position: relative;
}

.subcategories-mobile .drop-item .drop-link {
display: block;
padding: 8px 15px;
cursor: pointer;
}

.subcategories-mobile .drop-item.has-sub:hover .subcategories-mobile {
display: block;
}

.subcategories-mobile .drop-item {
padding-left: 15px; /* Sangría para las subcategorías */
}

.item-description {
display: flex;
flex-direction: column;
align-items: center;
}

@media only screen and (max-width: 1200px) {
.menu-categories-mobile.show .drop-item {
align-items: center;
margin: 20px 0;
}

.menu-categories-mobile.show .drop-item:hover {
font-weight: 600;
}

.drop-item img {
width: 43px;
height: 43px;
}

.item-description {
display: flex;
flex-direction: row;
align-items: center;
}

.drop-link:not(.selected)::before {
width: 0;
}

.drop-link.selected {
font-weight: 600;
}

.drop-link.selected::before {
width: 0%;
}

.selected > .drop-link {
font-weight: 600;
}

.sidenav img {
max-width: 130px;
}

}

/* div additionals */

.about, .additional {
    display: none;
    justify-items: center;
}

.about-table tbody tr:nth-child(odd),
.additional-table tbody tr:nth-child(odd) {
    background-color: #e4e4e43d;
}

.btn-group, .btn-group-vertical {
    display: flex;
}

.btn-group .btn.btn-secondary.active {
    background-color: #000;
    color: #fff;
}

.btn-group .btn.btn-secondary.active {
    background-color: #000;
    color: #fff;
}

.btn-group .btn.btn-secondary {
    background-color: #fff;
    color: #000;
}

/* iframe home */
#iframe-home {
    width: 100%;
}

@media only screen and (max-width: 1200px) {
    #iframe-home {
        height: 500px;
    }
}

@media only screen and (max-width: 991px) {
    #iframe-home {
        height: 400px;
    }
}

@media only screen and (max-width: 766px) {
    #iframe-home {
        max-height: 250px;
    }
}

/* Grid Logos Home*/ 
.grid-logos {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.container-logos {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    justify-items: center; 
    align-items: center;
    padding: 4%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

@media only screen and (max-width: 1200px) {
    #iframe-home {
        height: 500px;
    }
}

@media only screen and (max-width: 991px) {
    #iframe-home {
        height: 400px;
    }
}

@media only screen and (max-width: 766px) {
    .container-logos h1 {
        font-size: 10px !important;
    }

    .grid-logos img{
        max-width: 55px;
    }
}

/* Newsletter */

.input-email {
    border: none;
    display: inline-block;
    color: black;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: white;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    line-height: 1.65;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 300px;
}

.input-email::placeholder {
  color: black;
}

.btn-hover {
    position: relative;
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    border-radius: 3px; 
    border: 1px solid black;
    background-color: black;
    color: white;
    padding: 6px 12px;
}

.btn-hover:hover {
    border: 1px solid black !important;
    background-color: black;
    color: #fff;
    font-weight: 600;
}

.newsletter-container {
    flex-direction: column; 
    width: 100%; 
    padding: 5%; 
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; 
    align-items: center; 
    /* background-image: url('/images/slide/banner6.jpg'); */
    background-color: #FFFFFF;
}

form h1 {
    color: white; 
    text-shadow: 4px 4px #0006;
}

@media only screen and (max-width: 766px) {
    form h1 {
        font-size: 1.5rem;
        text-align: center;
        font-weight: 700;
        color: white; 
        text-shadow: 3px 3px #0006;
    }

    form p {
        font-size: 12px;
        text-align: center;
    }

    .newsletter-container {
        flex-direction: column; 
        width: 100%; 
        padding: 5%; 
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; 
        align-items: center; 
        background-image: url('/images/slide/banner6.jpg');
    }

    .form-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .input-email{
        margin-bottom: 4%;
    }

    #register {
        width: 45%;
        font-size: 12px;
        padding: 0.5rem 1.5rem;
        background-color: black;
        color: white;
        font-weight: 600;
    }
}

/* Footer */
#footer-mobile {
    display: none;
}

/* Footer */
@media only screen and (max-width: 991px) {
    #footer-mobile {
        display: block;
    }

    #footer {
        display: none !important;
    }
}

.table th, td {
    border: 1px solid #e4e4e4;
}

/* Fancybox de compra (shop) */
@media only screen and (max-width: 766px) {
    #nombre-producto {
        font-size: 1.3rem !important;
    }

    .abs-bottom-right {
        position: relative !important;
        text-align: center;
        justify-self: center;
        right: 0 !important;
        margin: 15px 0;
    }

    .abs-bottom-right .col-sm-12 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .abs-bottom-right button {
        float: none !important;
    }

    #divText1 .row {
        flex-direction: column;
    }

    #divText1 .row .col-xl-6 {
        margin-bottom: 12px;
    }

    #divFlImagen i {
        font-size: 2.5em !important;
    }
}

/* Canvas-sidebar (ShoppingCart) */
@media only screen and (max-width: 766px) {
    .canvas-sidebar #card-cart, .cart-canvas.show {
        position: absolute !important;
        right: 0 !important;
        max-width: 100%;
    }
}

/* Search */
@media only screen and (max-width: 766px) {
    #formSearch .keyboard {
        font-size: 1.2rem !important;
    }

    .buttons-categories button.selected {
        background-color: white !important;
        color: black !important;
        border-color: white !important;
    }
}

/* Review List*/

.grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 16px; /* Espacio entre las columnas */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item {
    position: relative;
}

.icon-chevron {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
}

.text-hidden {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.rating {
    margin-top: 5px;
}
@media only screen and (max-width: 766px) {
    .info-puntuacion {
        flex-direction: column;
    }

    .puntuacion h1 {
        font-size: 4.5rem;
        margin: 0;
    }

    .bi-star-fill {
        font-size: 12px;
    }

    .rating {
        flex-direction: column;
    }

    .rating p {
        padding: 0 !important;
        margin: 0 !important;
    }

    .progress {
        width: auto;
    }
}