/* Made with help of colours.joomla.com */
/* If you feel like it, you can help support */
/* me by donating to paypal@coolcat-creations.com or even just */
/* paying it forward and helping out another Joomler in need. */
/* Either way, have a great day! */


/* new color variables */
:root {
  --dark-color: #2f3334;
  --light-color:#5A5C5E;
  --main-background: #ffffff;
  --primary-background: #ffffff;
  --primary-textColor: #5A5C5E;
  --secondary-background: #ffffff;
  --secondary-textColor: #5A5C5E;
  --accent-background: #2D93D0;
  --accent-textColor: #FFFFFF;
  --primary-gradient: white;
  --secondary-gradient: white;
}

:root, [data-bs-theme=light]{
  --success: #A7C538;
}

.site-grid {
    grid-template-areas: ". banner banner banner banner ." 
                         ". top-a top-a top-a top-a ." 
                         ". top-b top-b top-b top-b ." 
                         ". side-l comp comp side-r ." 
                         ". bot-a bot-a bot-a bot-a ." 
                         ". bot-a-gray bot-a-gray bot-a-gray bot-a-gray ." 
                         ". bot-b bot-b bot-b bot-b ."
                         ". bot-b-gray bot-b-gray bot-b-gray bot-b-gray ."
                         ". banner-a banner-a banner-a banner-a ."
                         ". footer-menu footer-menu footer-menu footer-menu .";
}

body {
  background: var(--main-background);         /* background of your website */
  color: var(--main-color);       /* color of your website */
}

a {
    color: var(--secondary-textColor); /* color of your links */
}

.container-header {
  background-color: var(--primary-background); /* Solid background of your header */
  background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
  color: var(--secondary-textColor);
  background-image: url('/images/website/home-cuadricula.png'), url('/images/website/home-cuadriculaf.png'), linear-gradient(0deg, rgba(255, 255, 255) 0%, rgba(255, 255, 255) 100%);
  background-position: left top,  right top;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.container-header .mod-menu{
  color:  var(--secondary-textColor);
}

.mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
  background-color: var(--primary-background);
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

.btn.btn-primary {
  background-color: var(--primary-background); /* background of your primary buttons */
  border-color: var(--light-color); /* border color of your primary buttons */
  color: var(--primary-textColor); /* text color of your primary buttons */
}

.btn-check:checked+.btn, :not(.btn-check)+.btn:active, .btn:first-child:active, .btn.active, .btn.show{
  color: var(--btn-active-color);
  background-color: var(--accent-background);
  border-color: var(--accent-background);
}

.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary{
  background-color: var(--primary-background); /* background of your primary buttons */
  border-color: var(--accent-background); /* border color of your primary buttons */
  color: var(--accent-background); /* text color of your primary buttons */
}

.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary:hover {
  background-color: var(--accent-background); /* background of your secondary buttons */
  border-color: var(--accent-background); /* border color of your secondary buttons */
  color: var(--primary-background); /* text color of your secondary buttons */
  text-decoration: none;
}

.btn.btn-secondary {
  background-color: var(--primary-background); /* background of your secondary buttons */
  border-color: var(--accent-background); /* border color of your secondary buttons */
  color: var(--accent-background); /* text color of your secondary buttons */
}

.bg-info {
  color: var(--accent-textColor);
  background-color: var(--accent-background) !important;
}

.mod-list li a{
  font-weight: 300;
  color:#2f3334;
}

.container-bottom-a-gray{
  background-color: #f5f5f5;
  grid-area: bot-a-gray;
}

.container-bottom-b-gray{
  background-color: #f5f5f5;
  grid-area: bot-b-gray;
}

.container-banner-a {
    grid-area: banner-a;
}

.container-footer-menu{
  grid-area:footer-menu;
}

.container-footer-menu>*{
  flex: 1;
  margin: 0.5em 0;
}

.bggray{
  background-color: #f5f5f5;
}

.container-header .navbar-toggler{
  color: var(--primary-textColor);
  border: 1px solid var(--primary-textColor);
}

.card {
  border: 1px solid var(--primary-background); /* border color of your cards */
  border-radius: 0; /* border radius of your cards */
  background-color: var(--primary-background); /* background color of your cards */
}

.card-header {
  background-color: var(--primary-background); /* background color of your card headers */
  border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
  color: var(--primary-textColor); /* text color of your card headers */
}

.card-body {
  background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
  border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
  color: var(--primary-textColor); /* text color of your card bodies */
}

.card-body a {
  color: var(--primary-textColor); /* text color of your card body links */
}

.card.secondary {
  border: 1px solid var(--secondary-background); /* border color of your secondary cards */
  border-radius: 0; /* border radius of your secondary cards */
  background-color: var(--secondary-background); /* background color of your secondary cards */
}

.card-header.secondary {
  background-color: var(--secondary-background); /* background color of your secondary card headers */
  border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
  color: var(--secondary-textColor); /* text color of your card headers */
}

.card-body.secondary {
  background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
  border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
  color: var(--secondary-textColor); /* text color of your secondary card bodies */
}

.card-body.secondary a {
  color: var(--secondary-textColor); /* text color of your secondary card body links */
}

.plg_system_webauthn_login_button svg {
  fill: var(--primary-color); /* color of your webauthn login button icon */
}

.footer {
  background-color: var(--secondary-background); /* background color of your footer */
  background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
  color: var(--secondary-color); /* text color of your footer */
}

::selection {
  background-color: var(--accent-background); /* background color of your text selection */
  color: var(--dark-color); /* text color of your text selection */
}

.metismenu.mod-menu .metismenu-item > ul {
  background-color: var(--secondary-background); /* background color of your dropdown menu */
  border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
  color: var(--secondary-color); /* text color of your dropdown menu */
}

.metismenu.mod-menu .metismenu-item > ul a {
  color: var(--secondary-color); /* text color of your dropdown menu links */
}

.metismenu.mod-menu .metismenu-item li{}
.metismenu.mod-menu .metismenu-item li:hover{
  background-color: var(--template-bg-light); /* background color of your dropdown menu */
}

.main-top.card.colorpicker-module {
  background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
  color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
  border: none;
}

.colorpicker-module .card-header, .colorpicker-module .card-body  {
  background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
  color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
}

.article-info {
  background-color: var(--main-background); /* background color of your article info */
}

.article-info dd {
  color: var(--main-color); /* text color of your article info */
}

.btn.btn-info {
  background-color: var(--primary-background); /* background color of your info buttons */
  border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
  color: var(--primary-color); /* text color of your info buttons */
}

.btn-primary .icon-white:before {
  color: var(--primary-textColor); /* text color of your info buttons in primary */
}

.btn-secondary .icon-white:before {
  color: var(--secondary-textColor); /* text color of your info buttons in primary */
}

.form-control {
  background-color: var(--main-background); /* background color of your form controls */
  border: 1px solid var(--secondary-textColor); /* border color of your form controls */
  color: var(--primary-color); /* text color of your form controls */
  border-radius: 0; /* border radius of your form controls */
}

.metismenu.mod-menu .metismenu-item>a:focus, .metismenu.mod-menu .metismenu-item>button:focus{
  outline: none;
}

label {
  font-weight: bold; /* font weight of your labels */
}

/* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
h1, .h1 {
  font-size: clamp(18px, 5vw, 28px);
}

/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
h2, .h2 {
  font-size: clamp(16px, 5vw, 26px);
  font-weight: normal;
}

/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
h3, .h3 {
  font-size: clamp(14px, 5vw, 24px);
  color: var(--light-color);
}

/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
h4, .h4 {
  font-size: clamp(12px, 5vw, 22px);
}

p{
  font-weight: 300;
  color: var(--dark-color);
}

.blog-item{
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.blog-item .item-content{
  padding: 10px;
}

.blog-item .item-image{
  margin-top:0px;
}

.mod-breadcrumbs__wrapper{
  background-color: #f5f5f5;  
}

.breadcrumb{
  background-color: transparent;
  font-size: small;
  padding: 1rem 0;
}

.breadcrumb-item a{
  text-decoration: none;
}

.breadcrumb-item a:hover{
  text-decoration: underline;
}

/* tabs */

#pills-home-tab.active{
  color: #FFFFFF;
  background-color: var(--success);
  border-color: var(--success);
}
#pills-profile-tab.active{
  color: #FFFFFF;
  background-color: #2D93D0;
  border-color: #2D93D0;
}

#pills-contact-tab.active{
  color: #FFFFFF;
  background-color: #FFA300;
  border-color: #FFA300;
}

#pills-contact2-tab.active{
  color: #FFFFFF;
  background-color: #A51890;
  border-color: #A51890;
}

.nav-pills>li>button{
  border-radius: 2rem!important;
  color: var(--light-color);
  border-color: var(--light-color);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);  
}

.text{
  color: var(--primary-textColor)!important;
  line-height: 1.5!important;
  padding-bottom: 0px!important;
}

.title{
  font-size: large;
  padding-bottom: 0px!important;
  line-height: 1.5!important;
  font-weight: bold;
}

.card-nosotros {
    background: #FFFFFF;
    border: 0.5px solid #DCDCDC;
    box-shadow: 24px 27px 35px rgba(0, 0, 0, 0.09);
    border-radius: 6px;
    width: 15em;
    z-index: 3;
    margin: 0 auto;
}

.big-space {
    padding: 40px 0px;
}

.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.form-row>.col, .form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}

.img-zoom {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.img-zoom:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 9;
}

.btn{
  background-color: var(--accent-background);
  color: var(--main-background);
}

.btn:hover{
  background-color:transparent;
  color: var(--accent-background);;
  border-color:var(--accent-background);
}

.readmore .btn-secondary:hover{
  color: var(--primary-background);
  border-color: var(--accent-background);
  background-color: var(--accent-background);
}

.btn-verde-saeko{
  background-color: var(--success);
  color: var(--main-background)!important;
}

.btn-verde-saeko:hover, .btn-verde-saeko:active{
  color: var(--success)!important;
  background-color: var(--main-background)!important;
  border-color:var(--success)!important;
}

.btn-azul-saeko{
  background-color: #2D93D0;
  color: var(--main-background)!important;
}

.btn-azul-saeko:hover, .btn-azul-saeko:active{
  color: #2D93D0!important;
  background-color: var(--main-background)!important;
  border-color:#2D93D0!important;
}

.btn-naranja-saeko{
  background-color: #FAA61B;
  color: var(--main-background)!important;
}

.btn-naranja-saeko:hover, .btn-naranja-saeko:active{
  color: #FAA61B!important;
  background-color: var(--main-background)!important;
  border-color:#FAA61B!important;
}

.btn-morado-saeko{
  background-color: #6F2F8E;
  color: var(--main-background)!important;
}

.btn-morado-saeko:hover, .btn-morado-saeko:active{
  color: #6F2F8E!important;
  background-color: var(--main-background)!important;
  border-color:#6F2F8E!important;
}

.btn-rosa-saeko{
  background-color: #AA258C;
  color: var(--main-background)!important;
}

.btn-rosa-saeko:hover, .btn-rosa-saeko:active{
  color: #AA258C!important;
  background-color: var(--main-background)!important;
  border-color:#AA258C!important;
}

.btn-verde-claro-saeko{
  background-color: #A7C538;
  color: var(--main-background)!important;
}

.btn-verde-claro-saeko:hover, .btn-verde-claro-saeko:active{
  color: #A7C538!important;
  background-color: var(--main-background)!important;
  border-color:#A7C538!important;
}

.btn-rojo-saeko{
  background-color: #F44336;
  color: var(--main-background)!important;
}

.btn-rojo-saeko:hover, .btn-rojo-saeko:active{
  color: #F44336!important;
  background-color: var(--main-background)!important;
  border-color:#F44336!important;
}

.text-azul{ color: #2D93D0}
.text-naranja{color:#FAA61B}
.text-morado{color:#6F2F8E}
.text-rosa{color:#AA258C}
.text-verde-claro{color:#A7C538}
.text-rojo{color:#F44336}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
}

.bd-callout-azul{border-left-color: #2D93D0}
.bd-callout-naranja{border-left-color:#FAA61B}
.bd-callout-morado{border-left-color:#6F2F8E}
.bd-callout-rosa{border-left-color:#AA258C}
.bd-callout-verde-claro{border-left-color:#A7C538}
.bd-callout-rojo{border-left-color:#F44336}

.bd-callout-azul h4{color: #2D93D0}
.bd-callout-naranja h4{color:#FAA61B}
.bd-callout-morado h4{color:#6F2F8E}
.bd-callout-rosa h4{color:#AA258C}
.bd-callout-verde-claro h4{color:#A7C538}
.bd-callout-rojo h4{color:#F44336}

.bg-azul{background-color: #2D93D01f}
.bg-naranja{background-color:#FAA61B1f}
.bg-morado{background-color:#6F2F8E1f}
.bg-rosa{background-color:#AA258C1f}
.bg-verde-claro{background-color:#A7C5381f}
.bg-rojo{background-color:#F443361f}

.sticky-admin {
    top: 80px;
    bottom: 600px;
    z-index: 9;
    list-style: none;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 0px;
}

.sticky-admin li{
  border-bottom: 1px solid #E1E8EE;
}

.scard{
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem;
}

.a-sindeco {
    color: var(--secondary-textColor);
    text-decoration: none;
}

.subheading-1{
  text-transform: uppercase;
}

.menu-ayuda li{
  border-bottom: 1px solid #E1E8EE;
  padding: 15px;
  margin: 0px;
}

.carousel-indicators button{
  background-color: #2D93D0!important;
  border-radius: 100px;
  height: 10px;
  width: 10px;
  border: 0px;
}

.search-query{
  padding: 5px 5px;
  margin: 0px 10px 0px 0px;
  width: 80%;
}

.page-link.active, .active>.page-link{
  background-color: var(--accent-background);
  border-color: var(--accent-background);
}

.page-link, .page-link:hover{
  color:var(--accent-background);
}

.com-content-article__body a{
  color:var(--accent-background);
}

.a-none{
 text-decoration: none;
}

.list-group-item-primary{
  background-color: var(--template-bg-light); /* background color of your dropdown menu */ 
  color: var(--dark-color)!important;
  border: none;
}

.list-group-item-primary:hover, .list-group-item-action:active, .list-group-item-action:hover, .list-group-item-action:focus{
  color: var(--accent-background);
  background-color: var(--template-bg-light);
  text-decoration: none;
}

.com-content-article__body p{
  line-height: 2;
  font-size: 1.125rem;
  padding-bottom: 15px;
}

.com-content-article__body li{
  font-weight: 300;
  line-height: 2;
  font-size: 1.125rem;
  padding-bottom: 15px;
}

.link-menu{
  text-decoration: none;
  color: var(--dark-color)!important;
}

.link-menu:hover{
  font-weight: bold;
  color:#2D93D0;
}

.index-menu{
  line-height: 1!important;
  font-size: 1rem!important;
}

.list-nostyle{
  list-style: none;
}

.list-nostyle a{
  text-decoration: none;
  color: var(--dark-color)!important;
}

.list-nostyle a:hover{
  font-weight: bold;
  color:#2D93D0;
}

.table-azul{
  border-color: var(--accent-background)!important;
}
.table-azul thead th{
  background-color: var(--accent-background);
  color: var(--accent-textColor);
  font-size: larger;
  font-weight: bold;
  text-align: center;
}

.mi-modulo .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.mi-modulo .card {
    width: 18rem;
    color: white !important;
}

.mi-modulo .card-title,
.mi-modulo .card-text {
    color: transparent;
}