/***************/
/*Custom Fonts */
/***************/



/*Regular text*/
@font-face {
    font-family: 'Merriweather-Regular';
    font-style: normal;
    font-weight: 400;
    src: url(https://agencia.pymesolution.com/wp-content/fonts/merriweather/Merriweather-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*Titles and heading*/
@font-face {
    font-family: 'BebasNeue-Regular';
    font-style: normal;
    font-weight: 600;
    src: url(https://agencia.pymesolution.com/wp-content/fonts/bebasneue/BebasNeue-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*Special Text*/
@font-face {
    font-family: 'Bangers';
    font-style: normal;
    font-weight: 400;
    src: url(https://agencia.pymesolution.com/wp-content/fonts/bangers/Bangers-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*Script*/
@font-face {
    font-family: 'DancingScript';
    font-style: normal;
    font-weight: 400;
    src: url(https://agencia.pymesolution.com/wp-content/fonts/dancing/DancingScript-SemiBold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/***************************************
** Index  **

01) General Settings
02) Site Header 
03) Main Menu Style   
04) Ultimate Member Style
05) Posts
06) Footer
07) Elementor
  07) a. Elementor Table
  07) b. FAQs CSS
  07) c. Contacts Block
08) Custom Gallery Lightbox
  08) a. Magnific PopUp Overlay
09)  
11)
12)
13) 
****************************************/


/*****************************************
01) General Settings   
/*****************************************/


body p{
    font-size: 22px !important;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'BebasNeue-Regular', sans-serif !important;
}

/*Removes ReCaptcha Badge Globally*/
/*.grecaptcha-badge { 
    display: none !important; 
}

.grecaptcha-badge-visible { 
    display: block !important; 
}*/

/*Background for Preloader*/
body .newsmatic_loading_box {
    background-color: #ededed5f !important;
}


.newsmatic-ticker-box *{
    font-family: 'BebasNeue-Regular', sans-serif !important;
}

#site-navigation ul li a{
    font-family: 'Merriweather-Regular', serif !important;
    font-size: 1.05em;
}

/*Justificar texto de los posts*/
.entry-content p {
    text-align: justify;
    font-family: 'Merriweather-Regular', serif !important;
}


/*Texto para los posts y listas*/
.entry-content p, .entry-content ul  {
    font-size: 18px; /* Ajusta el tamaño según prefieras */
    line-height: 1.6; /* Mejora la legibilidad */
    padding-left: 8px;
    padding-right: 8px;
}


/*Títulos de las entradas y migas de pan*/
.entry-header, .single h1.entry-title, .breadcrumb_last {
    color: var(--sjs-entries-fontkcolor) !important;
}

.newsmatic_dark_mode .entry-header, .newsmatic_dark_mode .single h1.entry-title, .newsmatic_dark_mode .breadcrumb_last {
    color: var(--sjs-entries-fontkcolor-dark) !important;
}


.entry-content a{
    color: var(--sjs-entries-fontkcolor) !important;
}

.newsmatic_dark_mode .entry-content a{
    color: var(--sjs-entries-fontkcolor-dark) !important;
}

/*Primera letra de los posts, evitar cuadro del autor*/
.entry-content > p:not(.saboxplugin-desc p):first-of-type::first-letter  {
    font-family: 'DancingScript', cursive !important;
    font-size: 2.1em; /* Tamaño de la letra */
    font-weight: bold; /* Opcional: Negrita */
    float: left; /* Hace que la letra esté alineada con el texto */
    margin-right: 5px; /* Espacio entre la letra y el texto */
    line-height: 1; /* Ajusta la alineación vertical */
    color: var(--sjs-entries-fontkcolor-dark) !important;
}


/*Margen a cuadro sobre cuadro del autor*/
.saboxplugin-wrap {
	margin-top: 40px;
    padding-top:  40px !important;
}


.saboxplugin-wrap .saboxplugin-authorname{
    font-size: 1.7rem !important;
}

.saboxplugin-wrap .saboxplugin-desc p, .saboxplugin-wrap .saboxplugin-desc{
    font-size: 1.4rem !important;
}

/*Color de fondo para compartir y sobre el autor*/
.addtoany_share_save_container, .saboxplugin-wrap {
	background-color: var(--sjs-addtoany-back);
}



/****************
02) Site Header   
****************/


.site-header.layout--default .site-branding-section {
    padding: 0rem !important;
}

@media (min-width: 768px) {
    .site-header.layout--default .site-branding-section {
        padding: 0.3rem !important;
    }
}

@media (min-width: 1024px) {
    .site-header.layout--default .site-branding-section {
        padding: 0.8rem !important;
    }
}


/* White text for all header*/
.site-header.layout--default .social-icons-wrap .social-icon {
    color:var(--sjs-white-a);
}
/*.random-news-element a span*/
/* Hover effect for social icons and random article*/
.site-header.layout--default .social-icons-wrap .social-icon:hover,
.random-news-element a span:hover
 {
    color:var(--sjs-primary-backcolor);
}


/* Session buttons and random news flex container for mobile */
.header-right-button-wrap {
    display: flex;
    flex: 0 1 100% !important;
    text-align: center !important;
    gap: 10px;
    flex-wrap: wrap;
}

/* Make container divs 100% width for mobile first*/
.header-right-button-wrap div{
    flex-basis: 100%; 
    min-width: 300px;
}

/* Session buttons and random news flex container for tablet */
@media (min-width: 768px) {
    .header-right-button-wrap {
        flex: 0 1 25% !important; /* Makes items full width */
        text-align: justify !important;
    }
    .header-right-button-wrap div{
        flex-basis: 25%; 
    }
}

/* Session buttons and random news flex container for desktop --> 1024 width and more */
@media (min-width: 1024px) {
    .header-right-button-wrap {
        flex: 0 1 25% !important; /* Makes items full width */
        text-align: end !important;
    }
}

/*For Session Buttons container */
.session-buttons{
    display:block;
    margin-bottom: 10px;
}

/*Margin for session buttons */
div.session-buttons a.um-btn{
    margin-right: 8px !important;
}


.newsmatic-breadcrumb-wrap{

    /*background: url('https://www.pymesolution.com/ugroalek/2025/04/abstractBreadcumbs.webp') !important;
    background-repeat: repeat-x !important;
    background-size: auto 100% !important;
    background: #e8e8e8 !important;
    background: linear-gradient(180deg, rgb(235, 235, 235) 0%, rgb(208, 208, 208) 50%, rgb(224, 224, 224) 100%) !important;*/
    font-size: 1.7rem;
}



/********************
03) Main Menu Style   
/********************/

/*Sidebar menu hide for all screens */
.sidebar-toggle-wrap{
	display:none !important;
}

/*Hide category for any menu item */
.menu-item-description{
	display:none;
}


/*Hover effect for menu items*/
nav.main-navigation ul.menu li > a:last-child:hover,
nav.main-navigation ul.nav-menu > a:last-child:hover  
{
	background-color:rgba(162, 176, 174, 0.33);
}

/*Hover effect for menu items*/
.newsmatic_dark_mode nav.main-navigation ul.menu li > a:last-child:hover, 
.newsmatic_dark_mode nav.main-navigation ul.nav-menu > a:last-child:hover  
{
	background-color:rgba(133, 218, 246, 0.516) !important;
}


/*Media Queries*/
/*@media (max-width: 769px) {

	nav.main-navigation ul.menu li a, nav.main-navigation ul.nav-menu {
		/*background-color:rgba(100, 100, 100, 1)
	}
		
}*/


.newsmatic-ticker-box{
    background: #96ffbd !important;
    background: linear-gradient(180deg, rgba(150, 255, 189, 0.7) 0%, rgba(58, 242, 116, 0.7) 50%, rgba(150, 255, 189, 0.7) 100%) !important;
    color: #3e3e3e !important;
}

.newsmatic-ticker-box li.ticker-item{
    display: flex !important;
    font-size: 1.08em !important;
    height: 50px !important;
    align-items: center !important;
}


.newsmatic_dark_mode .newsmatic-ticker-box{
    /*background-color: rgba(168, 238, 251, 0.89) !important;*/
    background: #82cfff !important;
background: linear-gradient(180deg, rgba(130, 207, 255, 0.7) 0%, rgba(179, 237, 255, 0.7) 50%, rgba(130, 207, 255, 0.7) 100%)!important;
    color:#303030 !important; 
}

/*Media Queries*/
@media (min-width: 769px) {

	.newsmatic-ticker-box li.ticker-item{
        font-size: 1.5em !important;
    }
		
}



/**************************************************
04) Ultimate Member Style
**************************************************/

a.um-btn {
    background-color: var(--sjs-primary-backcolor); /* Color de fondo */
    color: #dbdbdb; /* Color del texto */
    padding: 10px 20px;
    border: none;
    margin-bottom: 8px;
    border-radius: 5px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Horizontally center the text */
    gap: 10px; /* Adds space between the icon and the text */
}

.um-btn:hover::after {
    content: attr(title);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: var(--sjs-white-a);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
}

/* Efecto hover */
.um-btn:hover {
    color: var(--sjs-white-a); /* Color del texto */
    background-color: var(--sjs-primary-backcolor-hover); /* Fondo más oscuro */
    transform: scale(1.05); /* Ligero zoom */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}


/*Leave a margin between social login buttons and form*/
.um-social-login-buttons{
    margin-bottom: 40px !important;
}

.um-social-login-buttons p{
    text-align: center;
}


/* Add the Google and Facebook login button styles */
#facebook-login-button, #google-login-button {
    color: white !important;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

#facebook-login-button i, #google-login-button i  {
    margin-right: 15px;  /* Space between the icon and the text */
    font-size: 18px;
}

/* Colors */
#facebook-login-button {
    background-color: #1877f2 !important;  /* Facebook Blue */
}
#google-login-button {
    background-color: #DB4437 !important;  /* Google Blue */
}

/* Change color on hover */
#facebook-login-button:hover {
    background-color: #0d4989 !important;
}
/* Change color on hover */
#google-login-button:hover {
    background-color: #9c1f14 !important;
}



/* Deshabilitar botones */
.um-btn.disabled {
    background-color: #cccccc; /* Fondo gris */
    color: #666666; /* Texto gris */
    cursor: not-allowed;
    box-shadow: none;
}

.um a.um-button, .um a.um-button.um-disabled:active, .um a.um-button.um-disabled:focus, 
.um a.um-button.um-disabled:hover, .um input[type=submit].um-button, .um input[type=submit].um-button:focus
{

    background-color: var(--sjs-primary-backcolor) !important;
}

.um input[type=submit].um-button:hover, .um input[type=submit].um-button:focus:hover{
    background-color: var(--sjs-primary-backcolor-hover) !important;
}

#um-submit-btn::before{
    font-family: "Font Awesome 5 Free" !important;
    content: "\f2f6" !important; /* Unicode for 'sign-in' icon */
    font-weight: 900 !important;
    margin-right: 8px !important;
    color:var(--sjs-white-a) !important;
}


.um .um-cover-add:hover, .um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i, 
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i, .um .um-item-meta a, .um .um-member-less a:hover, 
.um .um-member-more a:hover, .um .um-member-name a:hover, .um .um-members-pagi a:hover, .um .um-profile-subnav a.active, 
.um .um-tip:hover, .um-account-name a:hover, .um-account-nav a.current, .um-account-side li a.current span.um-account-icon, 
.um-account-side li a.current:hover span.um-account-icon, .um-dropdown li a:hover, i.um-active-color, span.um-active-color{
    color: var(--sjs-primary-backcolor) !important;
}



.um-request-button, .um-account-side a.current {
    background-color: var(--sjs-primary-backcolor) !important; /* Change to your preferred color */
    color: var(--sjs-white-a) !important;
}

/* Estilo para botones pequeños */
.um-btn.small {
    padding: 8px 15px;
    font-size: 14px;
}

/* Botones grandes */
.um-btn.large {
    padding: 12px 25px;
    font-size: 18px;
}





/*********************************
05) Posts
/********************************/

.news-list-wrap article, .news-list-wrap .post, .news-list-wrap .news-item {
    margin-bottom: 15px !important;/* Ajusta el espacio entre publicaciones */
    padding-bottom: 12px !important;
    margin-left: 1% !important;
    margin-right: 1% !important;
    border-bottom: 2px solid #9e9e9e !important; /* Línea separadora opcional */
    border-right: 2px solid #b3b3b3 !important; /* Línea separadora opcional */
    /*background-color: var(--sjs-white-a);*/
}


.primary-content .news-list-wrap article{
    flex: 0 1 48% !important;
    align-items: stretch !important;
}

/* En móviles, el elemento ocupa todo el ancho */
@media (max-width: 610px) {
    body.post-layout--two #theme-content .row .primary-content .news-list-wrap article, 
    body.post-layout--two.no-sidebar #theme-content .row .primary-content .news-list-wrap article {
        flex: 0 1 100% !important; /* Hace que el elemento ocupe todo el ancho */
    }
}


.primary-content > .news-list-wrap{
    background: none !important;
    background-color: transparent !important;
}

/*Pagination align center*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 !important;
  }

.pagination li {
    list-style: none !important;
    margin: 0 5px !important;
}

/*Tag links to red*/
.entry-footer .tags-links a{
    background-color: #ee2c1a !important;
}

/*Facebook Comments on White*/
.fb_iframe_widget_fluid_desktop {
    background-color:rgba(205, 205, 205, 0.369) !important;
}

/*Facebook Comments on White*/
body.newsmatic_dark_mode .fb_iframe_widget_fluid_desktop{
    background-color:rgba(255, 255, 253, 0.76) !important;
}


button.slick-arrow{
    background-color: var(--sjs-primary-backcolor) !important;
}

.newsmatic_vertical_slider .popular-posts-wrap .slick-arrow i{
    color: var(--sjs-white-a) !important;
}


/************************
06) Footer
/***********************/


body.newsmatic_dark_mode.error404 .widget{
    background: none;
}


.wp-block-search__label{
    color: var(--sjs-white-a);
    margin-top: 10px;
}

.main-footer h2{
    margin-top: 40px;
}


.main-footer .footer-widget.column-three, .main-footer .widget.widget_text p {
    text-align: center !important;
}

.widget_search {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    flex-direction: column; /* Stacks input and button */
    /*text-align: center;*/
}


.widget_search .wp-block-search__inside-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between input and button */
    width: 100%;
}

.widget_search input[type="search"] {
    width: 80%; /* Makes the input take 75% of its parent */
    flex: 1; /* Allow the input to grow and fill available space */
    min-width: 200px; /* Prevent flex item from overflowing */
    /*min-width: 220px;*/ /* Ensures it doesn't get too small on smaller screens */
    max-width: 600px; /* Limits width on large screens */
    padding: 10px;
    font-size: 16px;
}

.widget_search input[type="submit"] {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }


/* Session buttons and random news flex container for tablet */
@media (min-width: 769px) {
    .main-footer .footer-widget.column-three, .main-footer .widget.widget_text P {
        text-align: left !important;
    }  

    .widget_search {
        justify-content: left !important; /* Centers horizontally */
        text-align: left !important;
        min-width: 300px !important; /* Prevent flex item from overflowing */
    }
    
    
    .widget_search .wp-block-search__inside-wrapper {
        justify-content: left;
    }

    .main-footer .footer-widget.column-three h2:first-child{
        margin-top: 0px !important;
    }
}



/***************************
07) Elementor
***************************/

/*Max height for images container of slider*/
#custom-flexbox{
    max-height: 600px;
    margin-top: 20px;
}


.newsmatic-container .my-elementor-flexbox{
    padding-top: 40px;
    padding-bottom: 20px;
}

.newsmatic-container .centeredimage{
    width: 100%;
    max-width: 100%;
    height: 200px;
    overflow: hidden;
    justify-content: center;
}

.newsmatic-container .image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    /*max-width: 600px; /* o lo que necesites */
    /*aspect-ratio: 16 / 9; /* opcional, o usa height fija */
    overflow: hidden;
}
  
.newsmatic-container .image-wrapper img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
    display: block;
}
  
.newsmatic-container .image-wrapper h2 {
    position: absolute;
    font-family: 'BebasNeue-Regular', sans-serif !important;
    font-size: 2.5rem !important;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important;
    font-size: 2rem;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    text-align: center;
    padding: 0 10px;
}

@media (min-width: 768px) {


    .newsmatic-container .image-wrapper img {
        height: 150px;
    }

    .newsmatic-container .image-wrapper h2 {
        font-size: 2.9rem !important;
        width: 80%;
    }
}



.newsmatic-container .my-elementor-flexbox h2,
.newsmatic-container .elementor-widget-container h2{
    text-align: center;
    font-family: 'BebasNeue-Regular', sans-serif !important;
    font-size: 2.7rem;
    color: var(--myHeadersColor);
}

.newsmatic-container .my-elementor-flexbox h3,
.newsmatic-container .elementor-widget-container h3{
    text-align: center;
    font-family: 'BebasNeue-Regular', sans-serif !important;
    font-size: 2rem;
    color: var(--myHeadersColor);
}

.newsmatic-container .my-elementor-flexbox ul{
    list-style: none; /* Oculta la viñeta original */
  padding-left: 1.5em;
}

.newsmatic-container .my-elementor-flexbox li{
    text-align: justify;
    font-family: 'Merriweather-Regular', serif !important;
    font-size: 1.3rem;
    position: relative;
    margin-bottom: 0.5em;
}

.newsmatic-container .my-elementor-flexbox li::before{
    content: "\f058"; /* Código de la flecha derecha (chevron-right) */
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900; /* Negrita para los íconos sólidos */
  position: absolute;
  left: -1.6em;
  color: var(--sjs-primary-backcolor);
}


.newsmatic-container .my-elementor-flexbox,
.newsmatic-container .elementor-widget-container,
.newsmatic-container .elementor-widget-container p, 
.newsmatic-container .my-elementor-flexbox p, 
.newsmatic-container .elementor-widget-container span,
.newsmatic-container .my-elementor-flexbox span{
    text-align: justify;
    font-family: 'Merriweather-Regular', serif !important;
    font-size: 1.5rem !important;
}

.newsmatic_dark_mode .elementor-widget-text-editor,
.newsmatic_dark_mode .elementor-widget-text-editor p{
    color: #FFF;
}

/*********************************
07) a. Elementor Table
*********************************/

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.2rem;
}

.responsive-table tr:nth-child(even) td{
    background-color: #d3e0ed7b;
  }

.newsmatic_dark_mode .responsive-table tr:nth-child(even) td{
    background-color: #2c3a477b;
  }

.responsive-table th, .responsive-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.newsmatic_dark_mode .responsive-table td {
    color: #FFF;
}

.responsive-table th {
    background-color: #00618e;
    color: white;
}

@media (max-width: 768px) {
    .responsive-table thead {
        display: none;
    }
    
    .responsive-table, 
  .responsive-table tbody, 
  .responsive-table tr, 
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
  }

  .responsive-table td {
    text-align: right;
    position: relative;
    padding-left: 50%;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    top: 12px;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    color: #00618e;
  }

}




/**************************
07) b. FAQs CSS
**************************/
.faq-answer {
    display: none;
    margin: 10px 0;
}
.faq-question {
    background: none;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
}
.faq-question.active + .faq-answer {
display: block;
}



/**************************
07) c. Contacts Block
**************************/


.newsmatic-container .contactsBlock :is(a, h1, h2, h3, h4){
    color:#718084 !important;    
}

.newsmatic-container  .contactsBlockInner{
  background-color: #eee;
  border-radius: 22px; 
}

.newsmatic-container  .contactsBlockInner span.s3{
  font-size: 1.2rem !important;
}




/********************
Lightbox Gallery  
Kind Popoup
*******************/

/* Set max-height to image height */
.rl-gallery-container .splide__list{
    max-height: 600px; /* 100% of the viewport height */
}

/* Aumentar el tamaño del título en miniaturas */
.rl-gallery-item-title {
    font-size: 32px !important;
    font-weight: bold;
    color: #fff; /* Ajusta el color si es necesario */
    text-align: center;
    display: block;
}



/*******************************
08) Custom Gallery Lightbox
********************************/


#full-width-section .row div.gallery-container{
    padding: 10px 0px !important;
}


/* Full-page container */
.custon-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: fit-content; /* Full height of the viewport */
    margin-top: 30px;
    margin-bottom: 30px;
  }

.responsive-box {
    width: 100%; /* Fixed height */
    max-width: 580px; 
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    background-color: lightgray; /* Just for visibility */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 0;
}

@media (min-width: 600px) {
    .responsive-box {
        width: 98%; /* Fixed height */
        max-width: 780px;
    }
    .custon-container {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (min-width: 800px) {
    .responsive-box {
        width: 94%; /* Fixed height */
        max-width: 960px;
    }
    .custon-container {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

@media (min-width: 1024px) {
    .responsive-box {
        width: 90%; /* Fixed height */
        max-width: 1200px;
    }
    .custon-container {
        margin-top: 55px;
        margin-bottom: 55px;
    }
}


/*.custom-gallery-container{
    width: 100%;
    max-width: 1200px;
    max-height: 600px;
    margin: auto;
    padding: 10px;
    display: block;
}*/


/*.custom-dynamic-gallery{
    display: block;
    z-index: 0;
    width: 100%;
    height: 100%;
}*/

.custom-gallery {
    display: flex;
    flex-direction: row;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    justify-content: center;
}

.thumbs-wrapper {
    backface-visibility: hidden;
    display: flex;
    transition: transform 0.5s ease; /* Smooth horizontal slide */
    /*transform: translateX(-1000px);*/   /*Uncomment for having a translation on x*/  
}



.custom-gallery-item {
    display: block;
    height: 100%;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.custom-gallery  a{
    display: block;
    min-height: 100%;
    min-width: 100%;
}


.custom-gallery-thumbnail {
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit: contain; /* Ensures the image covers the space */
    transition: transform 0.5s ease;
}


.custom-gallery-bottom-bar{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    padding: 0.5rem 0.2rem;
    cursor: pointer;
    z-index: 20;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-items: center;
    justify-content: center;
}

.custom-gallery-title {
    width: 100%;
    color: white;
    text-align: center;
    font-size: 1.2rem;
    cursor: pointer;
}

.custom-gallery-button{
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
}

.custom-gallery-button a{
    width: fit-content;
    text-align: center;
    padding: 0.6rem;
    z-index: 22;
    background-color: #ee2c1a;
    color: #fff;
    display: inline;
    border-radius: 0.3rem;
}

/* Navigation buttons */
.custom-gallery-prev, .custom-gallery-next {
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 20;
    font-size: 1.6rem;
}

.custom-gallery-prev {
    left: 1rem;
}

.custom-gallery-next {
    right: 1rem;
}

@media (min-width: 748px) {
    .custom-gallery-bottom-bar{
        padding: 1rem 0.2rem;
    }
    .custom-gallery-prev, .custom-gallery-next {
        top: 50%;
        font-size: 2rem;
    }
    .custom-gallery-title  {
        width: 65%;
        font-size: 1.6rem;
    }
    .custom-gallery-button{
        width: 35%; 
        font-size: 1.2rem;
    }
}

@media (min-width: 1024px) {
    .custom-gallery-title  {
        width: 65%;
        font-size: 2rem;
    }
    .custom-gallery-button{
        width: 35%; 
        font-size: 1.5rem;
    }
}




/*******************************
08) a. Magnific PopUp Overlay
********************************/

/*Remove full screen and zoom view and leave the Magnific PopUp Modal*/
.dialog-type-lightbox, .dialog-widget-content {
    display: none !important;
}

.mfp-figure button{
    font-size: 2rem;
}


.mfp-bottom-bar{
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    padding-top: 10px;
    min-height: fit-content;
}

/* Mostrar el título en la bottom-bar */
.mfp-title {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    color: white;
    width: 70%;
    position: relative;
    line-height: 3.2rem;
}

.mfp-description {
    display: block;
    font-size: 1.5rem;
    line-height: 1.8rem;
    font-weight: bold;
    color: white;
    width: 100%;
    position: relative;
    word-wrap: break-word;
    margin-top: 0.3rem;
}

.mfp-button {
    display: block;
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-weight: bold;
    width: 100%;
    position: relative;
    word-wrap: break-word;
    margin-top: 0.3rem;
}

.mfp-button a{
    background-color: #fa4307;
    color: white;
}