/*
* Escola EFA — pigselsultra theme
* Theme-specific CSS only.
*
* Usage:
*
*
*
* Fonts required (add to ):
*
*/
/* ============================================================
1. CSS CUSTOM PROPERTIES — Brand overrides
============================================================ */
:root,
[data-bs-theme=light] {
/* Brand colours */
--bs-primary: #0098a2;
--bs-primary-dark: #005e64;
--bs-primary-darker: #003d41;
--bs-primary-light: #b3d4f9;
--bs-primary-two-red: #e50046;
--bs-primary-two-orange: #f08446;
--bs-primary-two-yellow: #f5dc59;
--bs-primary-two-purple: #9b96b9;
--bs-secondary-light: #abb5be;
--bs-secondary-two: #b0c9f6;
/* RGB versions */
--bs-primary-rgb: 0,152,162;
--bs-primary-dark-rgb: 0,94,100;
--bs-primary-darker-rgb: 0,61,65;
--bs-primary-light-rgb: 179,212,249;
--bs-primary-two-red-rgb: 229,0,70;
--bs-primary-two-orange-rgb: 240,132,70;
--bs-primary-two-yellow-rgb: 245,220,89;
--bs-primary-two-purple-rgb: 155,150,185;
--bs-secondary-light-rgb: 171,181,190;
--bs-secondary-two-rgb: 176,201,246;
/* Backgrounds */
--bs-background-1: #f0f1f2;
--bs-background-2: #f8f9fa;
--bs-app-background: #ecece8;
--bs-background-1-rgb: 240,241,242;
--bs-background-2-rgb: 248,249,250;
--bs-app-background-rgb: 236,236,232;
/* Body */
--bs-body-bg: #ecece8;
--bs-body-bg-rgb: 236,236,232;
--bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Semantic overrides */
--bs-danger: #e50046;
--bs-warning: #f5dc59;
--bs-danger-rgb: 229,0,70;
--bs-warning-rgb: 245,220,89;
/* Focus */
--bs-focus-ring-color: rgba(0,152,162,.25);
/* Form validation */
--bs-form-invalid-color: #e50046;
--bs-form-invalid-border-color: #e50046;
/* Link */
--bs-link-color: #0098a2;
--bs-link-color-rgb: 0,152,162;
--bs-link-hover-color: #007a82;
/* Gradient */
--bs-gradient-primary: linear-gradient(90deg, #e50046, #0098a2 99.81%);
/* Navbar / footer spacing */
--navbar-bottom-margin: 0;
--footer-top-margin: 5rem;
}
@media (max-width: 575.98px) {
:root { --footer-top-margin: 3rem; }
}
/* ============================================================
2. BASE OVERRIDES
============================================================ */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
scroll-behavior: smooth;
}
@media (min-width: 1550px) {
html { font-size: clamp(1rem, 1rem + .1vw, 1.275rem); }
}
body :focus { outline: none; }
body :focus-visible { outline: 2px solid #0098a2; }
::selection { background: #b3d4f9; color: #212529; }
::-moz-selection { background: #b3d4f9; color: #212529; }
/* ============================================================
3. TYPOGRAPHY — custom scale on top of Bootstrap headings
============================================================ */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-weight: 500;
margin: 0;
}
/* Display overrides */
.display-1 { font-size: calc(1.625rem + 4.5vw); line-height: 5.3125; }
@media (min-width: 1200px) { .display-1 { font-size: 5rem; } }
@media (max-width: 576px) { .display-1 { font-size: calc(1.4375rem + 2.25vw); } }
.display-2 { font-size: calc(1.4375rem + 2.25vw); line-height: 1; }
@media (min-width: 1200px) { .display-2 { font-size: 3.125rem; } }
.display-3 { font-size: calc(1.525rem + 3.3vw); line-height: 1; }
@media (min-width: 1200px) { .display-3 { font-size: 4rem; } }
.display-4 { font-size: calc(1.475rem + 2.7vw); line-height: 1; }
@media (min-width: 1200px) { .display-4 { font-size: 3.5rem; } }
.display-5 { font-size: calc(1.425rem + 2.1vw); line-height: 1; }
@media (min-width: 1200px) { .display-5 { font-size: 3rem; } }
.display-6 { font-size: calc(1.375rem + 1.5vw); line-height: 1; }
@media (min-width: 1200px) { .display-6 { font-size: 2.5rem; } }
/* Heading scale */
h1, .h1 { font-size: calc(1.4375rem + 2.25vw); line-height: 1.2; }
@media (min-width: 1200px) { h1, .h1 { font-size: 3.125rem; } }
h2, .h2 { font-size: calc(1.3125rem + .75vw); line-height: 1.2; }
@media (min-width: 1200px) { h2, .h2 { font-size: 1.875rem; } }
h3, .h3 { font-size: 1.25rem; line-height: 1.2; }
h4, .h4 { font-size: calc(1.275rem + .3vw); line-height: 1.2; }
@media (min-width: 1200px) { h4, .h4 { font-size: 1.5rem; } }
h5, .h5 { font-size: calc(1.2625rem + .15vw); line-height: 1.2; }
@media (min-width: 1200px) { h5, .h5 { font-size: 1.375rem; } }
h6, .h6 { font-size: 1.125rem; font-weight: 500; line-height: 1.2; }
/* Subtitle classes */
.subtitle-1 {
font-family: "Manrope", sans-serif;
font-size: calc(1.25625rem + .075vw);
font-weight: 700;
line-height: 1.3;
margin: 0;
}
@media (min-width: 1200px) { .subtitle-1 { font-size: 1.3125rem; } }
@media (max-width: 600px) { .subtitle-1 { font-size: 1.1875rem; } }
.subtitle-2 {
font-family: "Manrope", sans-serif;
font-size: .9375rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
}
.p1 { font-size: 1rem; }
.p2, p { font-size: .875rem; margin: 0; text-wrap: pretty; }
.caption { font-size: .8125rem; line-height: 1.2; }
/* ============================================================
4. MATERIAL SYMBOLS ICON FONT
============================================================ */
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
direction: ltr;
letter-spacing: normal;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease;
}
.fonts-loaded .material-symbols-outlined { opacity: 1; visibility: visible; }
/* ============================================================
5. LAYOUT HELPERS
============================================================ */
.app { display: block; position: relative; }
main { min-height: 50vh; }
.remove-foo-margin { margin-bottom: calc(var(--footer-top-margin) * -1); }
.remove-nav-margin { margin-top: calc(var(--navbar-bottom-margin) * -1); }
.rounded-md { border-radius: .625rem !important; }
.rounded-lg { border-radius: 1rem !important; }
.rounded-xl { border-radius: 1.25rem !important; }
.rounded-2xl { border-radius: 1.5rem !important; }
.rounded-3xl { border-radius: 2rem !important; }
.rounded-4xl { border-radius: 2.5rem !important; }
.hover-zoom { cursor: pointer; overflow: hidden; transition: transform .3s ease; }
.hover-zoom:hover { transform: scale(1.05); }
.bg-gradient-primary { background: linear-gradient(90deg, #e50046, #0098a2 99.81%) !important; }
.border-end-lg { border-right: 0; }
@media (min-width: 992px) { .border-end-lg { border-right: 1px solid #ccc; } }
/* Anchor scroll targets */
.anchor { display: block; position: relative; top: 0; visibility: hidden; }
.anchor-1 { top: -1rem; }
.anchor-2 { top: -2rem; }
.anchor-3 { top: -3rem; }
.anchor-4 { top: -4rem; }
/* Video embeds */
.video-embed { padding: 58% 0 0; position: relative; }
.video-embed iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
/* ============================================================
6. LINKS & BUTTONS
============================================================ */
a { color: inherit; text-decoration: none; }
.link { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); text-decoration: underline; }
.link:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb); }
.link-dark { color: #212529; }
.link-dark:hover { color: #0098a2 !important; }
.link-primary { color: #0098a2; }
button { background: none; border: 0; box-shadow: none; padding: 0; }
/* Base .btn override — pill shape */
.btn {
align-items: center;
border-radius: 50rem;
display: inline-flex;
font-size: 16px;
font-weight: 500;
height: max-content;
justify-content: center;
line-height: normal;
padding: .5rem 1.125rem;
}
.btn-light { background-color: #fff; border-color: #fff; color: #000; }
.btn-light:hover { background-color: #fff; border-color: #fff; color: #0098a2; }
.btn-outline-light { border-color: #fff; color: #fff; }
.btn-outline-light:hover { background-color: #fff; border-color: #000; color: #0098a2; }
.btn-outline-primary { color: #0098a2; }
.btn-outline-primary:hover { color: #fff; }
.btn-outline-primary-two-yellow {
border-color: #212529; color: #212529; padding: .8125rem 1.125rem;
}
.btn-outline-primary-two-yellow:hover,
.btn-outline-primary-two-yellow.--is-current {
background-color: #f5dc59; border-color: #212529; color: #212529;
}
.btn-outline-primary-two-yellow.--is-current { font-weight: 600; }
/* Icon button */
.icon-btn {
align-items: center;
border-radius: 50%;
box-shadow: none;
display: inline-flex;
font-size: 1.25rem;
height: 1.5em;
justify-content: center;
transition: color .15s ease-in-out, background-color .15s ease-in-out,
border-color .15s ease-in-out, box-shadow .15s ease-in-out;
vertical-align: middle;
width: 1.5em;
}
.icon-btn-white:hover { background: #dee2e6; border-color: #dee2e6; }
.icon-btn-xs, .icon-btn-xs i, .icon-btn-xs span { font-size: .875rem; }
.icon-btn-sm, .icon-btn-sm i, .icon-btn-sm span { font-size: 1rem; }
.icon-btn-md, .icon-btn-md i, .icon-btn-md span { font-size: 1.25rem; }
.icon-btn-lg, .icon-btn-lg i, .icon-btn-lg span { font-size: 1.5rem; }
.icon-btn-xl, .icon-btn-xl i, .icon-btn-xl span { font-size: 2rem; }
/* ============================================================
7. NAVBAR
============================================================ */
.navbar {
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
background: #fff;
margin-bottom: var(--navbar-bottom-margin);
padding: 0;
position: relative;
width: 100%;
z-index: 2;
}
.navbar__top { position: relative; width: 100%; }
.navbar__left,
.navbar__top { align-items: center; display: flex; justify-content: space-between; }
.navbar__left { font-size: .875rem; padding: 1.09375rem 0; }
.navbar__left > div { margin-right: 2em; }
.navbar__right { align-items: center; display: flex; justify-content: space-between; }
.navbar__burger { cursor: pointer; display: none; transform: rotateY(0); transition: all .2s ease-in-out; z-index: 10; }
.navbar__burger-patty { background: #000; border-radius: 20px; height: 3px; margin: 0 0 4px; transition: all .2s ease-in-out; width: 24px; }
.navbar__burger-patty:last-child { margin-bottom: 0; }
.navbar__logo { height: 62px; width: 153px; }
@media (max-width: 767.98px) { .navbar__logo { height: auto; width: 84px; } }
.navbar__sections { align-items: center; display: flex; }
.navbar__sections a { padding: 6px 14px; }
.navbar__section { font-size: 1rem; padding: 0 1em; }
.navbar__link { align-items: center; color: #000; display: inline-flex; }
.navbar__link:hover { color: #000; text-decoration: none; }
.navbar__lang { margin-left: 1.6rem; }
.navbar__lang button { align-items: center; border-radius: 3px; display: flex; padding: .3rem; }
.navbar__lang button i { margin-right: .3em; }
.navbar__social .social-icon { margin-right: .8em; }
.navbar__social .social-icon:last-child { margin-right: 0; }
@media (max-width: 991.98px) {
.navbar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255,255,255,.88);
border-radius: 10px;
left: 0; right: 0;
margin: 0 12px;
position: sticky;
top: 12px;
width: auto;
z-index: 1000;
}
.navbar__lang, .navbar__sections, .navbar__social { display: none; }
.navbar__burger { display: block; margin-left: 1.7rem; }
}
/* Mobile menu */
@media (min-width: 992px) { .mbl-menu { display: none !important; } }
.mbl-menu {
background-color: #0098a2;
bottom: 0; left: 0; right: 0; top: 0;
color: #fff;
height: 0;
opacity: 0;
overflow: hidden;
padding: 6.25rem .75rem 2rem;
position: fixed;
transition: all .2s ease-in-out 0ms;
visibility: hidden;
width: 100%;
}
.navbar.navbar--is-mobile { z-index: 1040; }
.navbar.navbar--is-mobile .mbl-menu {
height: 100vh; max-width: 100vw; opacity: 1;
overflow-y: auto; visibility: visible; width: 100vw; z-index: 1;
transition: all .3s ease-in-out .1s;
}
.mbl-menu li a,
.mbl-menu li button { color: #fff !important; }
.mbl-menu li a:hover,
.mbl-menu li button:hover { color: #fff !important; opacity: .85; }
.mbl-menu__block { padding: 1rem 0; }
.mbl-menu__block:first-child { padding-top: 0; }
.mbl-menu__block > ul { padding-left: 0 !important; }
.mbl-menu__block > ul > li { margin-bottom: .75rem; }
.mbl-menu__block ul { list-style: none; margin: 0; }
.mbl-menu__block li { margin-bottom: .5rem; }
.mbl-menu__block li:first-child { margin-top: .5rem; }
.mbl-menu__block li:last-child { margin-bottom: 0; }
.mbl-menu__title {
align-items: center;
border-bottom: 1px solid #dee2e6;
display: flex;
font-family: "Manrope", sans-serif;
font-size: 1.125rem;
font-weight: 500;
margin: 0 0 .5rem;
padding-bottom: .5rem;
}
.mbl-menu__single,
.mbl-menu .mbl-menu__block--no-title .mbl-menu__block-item {
align-items: center;
border-bottom: 1px solid hsla(86,23%,94%,.15);
color: #fff;
display: flex;
font-size: .875rem;
padding-bottom: 1.25rem;
padding-top: 1.25rem;
}
.mbl-menu__sec-header {
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 1.25rem;
padding-bottom: 1.25rem;
}
.mbl-menu__sec-header i { color: #fff; display: block; transform: rotate(0); transition: all .2s ease-in-out; }
.mbl-menu__sec-header.collapsed i { transform: rotate(180deg); }
.mbl-menu__sec-header-container { border-bottom: 1px solid hsla(86,23%,94%,.15); }
.mbl-menu__list { list-style: none; margin: 0; padding: 0 0 .8rem; }
.mbl-menu__list-item { margin-bottom: .8em; }
.mbl-menu__lang-select { align-items: center; display: inline-flex; }
.mbl-menu__lang-select .mbl-menu__lang {
align-items: center;
border: 1px solid #fff;
border-radius: 50%;
display: inline-flex;
font-size: .75rem;
font-weight: 700;
height: 2.4em; width: 2.4em;
justify-content: center;
margin-left: .7rem;
}
.mbl-menu__lang-select .mbl-menu__lang--active,
.mbl-menu__lang-select .mbl-menu__lang:hover { background: #fff; }
.mbl-menu__lang-select .mbl-menu__lang--active a,
.mbl-menu__lang-select .mbl-menu__lang:hover a { color: #0098a2 !important; }
.mbl-menu__subtitle { color: #fff; margin-top: 0; }
.mbl-menu .caret-down__line1,
.mbl-menu .caret-down__line2 { background: #fff; }
/* ============================================================
8. FOOTER
============================================================ */
.foo { margin-top: 0; position: relative; }
.foo__main-content { background: #005e64; color: #fff; padding: 4.625rem 0 3.375rem; }
.foo__bottom { background: #005e64; padding: 1rem 0; }
@media (max-width: 767.98px) {
.foo__main-content { padding-bottom: 1rem; padding-top: 2rem; }
.foo__bottom { padding-bottom: 5rem; }
}
.foo__subtitle { color: #fff; margin-top: 0; }
.foo__list { list-style: none; margin: 0; padding: 0; }
.foo__list-item { margin-bottom: .8em; }
.foo__privacy { color: #fff; }
.foo__copyright,
.foo__madeby { color: #fff; font-size: .875rem; }
.foo__madeby { align-items: center; display: flex; justify-content: flex-end; text-align: right; }
.foo__email { background: #fff; border-radius: 50px; height: 2.8125rem !important; min-height: 2.8125rem !important; padding-inline: 1.5rem !important; }
.foo__button { padding: 10px 18px; }
.foo__button--circle { flex-shrink: 0; height: 2.8125rem; padding: 0; width: 2.8125rem; }
.foo__label { max-width: 23.25rem; }
.foo__links { gap: 2.375rem; }
.foo__contact p { margin-bottom: .6rem; }
.foo__sec-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; pointer-events: none; }
.foo__sec-header i { color: #fff; display: none; transform: rotate(0); transition: all .2s ease-in-out; }
.foo__sec-header.collapsed i { transform: rotate(180deg); }
@media (max-width: 767.98px) {
.foo__sec-header { border-bottom: 1px solid hsla(86,23%,94%,.15); margin-bottom: 1.25rem; padding-bottom: 1.25rem; pointer-events: auto; }
.foo__sec-header i { display: block; }
.foo__sec-header-container:first-child { border-top: 1px solid hsla(86,23%,94%,.15); padding-top: 1.25rem; }
.foo__list { padding-bottom: .8rem; }
.foo__privacy { flex-basis: 100%; margin-bottom: 0; text-align: center; }
.foo__logo { margin: 0 auto 1rem; }
.foo__madeby { display: block; margin-top: 1rem; text-align: center; }
.foo__copyright { display: block; line-height: 1.5; text-align: center; }
}
@media (min-width: 768px) {
.foo__list.collapse:not(.show) { display: block; height: auto !important; visibility: visible; }
}
@media (max-width: 991.98px) {
.foo__privacy { flex-basis: 100%; margin-bottom: 0; text-align: center; }
}
/* ============================================================
9. FORMS — custom overrides
============================================================ */
form textarea { min-height: 9rem !important; }
form .form-group { margin-bottom: .9rem; position: relative; }
.form-label, label { color: #6c757d !important; }
.form-check-label { color: #212529 !important; }
input::-ms-clear { display: none; }
/* Error state */
form.error input[type=text],
form.error input[type=email],
form.error input[type=password],
form.error input[type=tel],
form.error select,
form.error textarea { border-color: #e50046; color: #e50046; }
form.error .c-form__placeholder { color: #e50046; }
.has-error .control-label { color: #e50046; }
.has-error .error { color: #e50046; display: inline-block; font-size: 1em; margin-top: .2em; }
.has-error .form-control { border-color: #e50046 !important; }
/* ============================================================
10. WYSIWYG CONTENT BLOCKS
============================================================ */
.wysiwyg-14 { font-size: .875rem; line-height: 1.5; }
.wysiwyg-14 > :first-child { margin-top: 0; }
.wysiwyg-14 > :last-child { margin-bottom: 0; }
.wysiwyg-14 p { font-size: .875rem; line-height: 1.5; }
.wysiwyg-14 ul { font-size: .875rem; margin: 1em 0; text-align: left; }
.wysiwyg-14 ul > li { margin-bottom: .5em; }
.wysiwyg-14 ul > li::marker { color: #0098a2; }
.wysiwyg-14 a { font-weight: 700; text-decoration: underline !important;
text-decoration-color: var(--bs-primary);
text-decoration-thickness: 2px; text-underline-offset: .2em; }
.wysiwyg-14 img { height: auto; margin: 0 auto; max-width: 100%; }
.wysiwyg-16 { font-size: 1rem; line-height: 1.6; }
.wysiwyg-16 p { font-size: 1rem; line-height: 1.6; }
.wysiwyg-contact p { margin-bottom: .5rem; }
/* Shared wysiwyg heading resets */
.wysiwyg-14 h1, .wysiwyg-14 h2, .wysiwyg-14 h3,
.wysiwyg-14 h4, .wysiwyg-14 h5, .wysiwyg-14 h6,
.wysiwyg-14 p { margin-bottom: 1.5rem; margin-top: 0; }
/* ============================================================
11. CUSTOM LIST STYLES
============================================================ */
.custom-ul { margin: 1em 0; text-align: left; }
.custom-ul > li { margin-bottom: .5em; }
.custom-ul > li::marker { color: #0098a2; }
.custom-ul-check ul { font-size: 16px; list-style: none; margin: 1em 0; padding-left: 1.5em; }
.custom-ul-check ul > li { margin-bottom: 1.5em; position: relative; }
.custom-ul-check ul > li:before {
background-image: url(../images/icons/check-outline.svg);
background-position: 50%; background-repeat: no-repeat; background-size: 1.2rem 1.2rem;
content: ""; height: 1.2rem; left: -1.5em; position: absolute; top: .4em; width: 1.2rem;
}
/* ============================================================
12. SCROLL-TO-TOP BUTTON
============================================================ */
.scroll-to-top {
align-items: center; background: #fff; border-radius: 50%;
bottom: -20rem;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
display: flex; height: 3.5rem; justify-content: center;
opacity: 0; position: fixed; right: 2.5rem;
transition: all .2s ease-in-out;
width: 3.5rem; z-index: 1;
}
.scrolling .scroll-to-top { opacity: 1; transform: translateY(-22.5rem); }
/* ============================================================
13. CARET COMPONENTS
============================================================ */
.caret-down {
display: inline-block; height: .5rem; position: relative; top: 2px; width: 1rem;
}
.caret-down__line1,
.caret-down__line2 {
background: #000; border-radius: .3rem; height: 2px;
position: absolute; top: .15rem; transition: all .2s ease-in-out; width: .5rem;
}
.caret-down__line1 { left: -.15rem; transform: rotate(45deg); }
.caret-down__line2 { left: .15rem; transform: rotate(-45deg); }
.caret-right { display: inline-block; height: 10px; position: relative; width: 10px; }
.caret-right__line1,
.caret-right__line2 { background: #000; border-radius: .3em; height: 2px; margin: 0 0 .23em; transition: all .2s ease-in-out; width: .6em; }
.caret-right__line1 { transform: rotate(45deg); }
.caret-right__line2 { transform: rotate(-45deg); }
/* ============================================================
14. TEXT MODULE
============================================================ */
.text-module__subtitle { margin-bottom: .75rem; }
.text-module__title { margin-top: 0; }
.text-module__description { margin-bottom: 0; margin-top: 3rem; }
/* ============================================================
15. CARDS — common
============================================================ */
.card-title { margin-bottom: 1rem; }
.card-text { font-size: .875rem; line-height: 1.6; margin-bottom: 1rem; }
.card-text > :first-child { margin-top: 0; }
.card-text > :last-child { margin-bottom: 0; }
.card-text a {
font-weight: 700; text-decoration: underline !important;
text-decoration-color: var(--bs-primary); text-decoration-thickness: 2px;
text-underline-offset: .2em;
}
.card-img-top { margin: 0 auto 1.5rem; max-width: 16rem; }
/* ============================================================
16. CARDS MODULE
============================================================ */
.cards-module__item { background-color: #fff; border: none; border-radius: 10px; margin-bottom: 2.5rem; min-height: 28.81rem; }
.cards-module__image { transition: transform .3s ease; }
.cards-module__item:hover .cards-module__image { transform: scale(1.05); }
@media (max-width: 767.98px) {
.cards-module__filters {
-webkit-overflow-scrolling: touch; overflow-x: auto;
padding-bottom: .5rem; scrollbar-width: none;
}
.cards-module__filters::-webkit-scrollbar { display: none; }
.cards-module__filters .btn { min-width: fit-content; white-space: nowrap; }
}
@media (min-width: 768px) { .cards-module__filters { flex-wrap: wrap !important; } }
/* Cards simple */
.cards-simple-module__item {
background-color: #fff; border: none; border-radius: .625rem;
height: 100%; overflow: hidden;
}
.cards-simple-module__item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.cards-simple-module__item .card-body { padding: 1.5rem; }
.cards-simple-module__item .card-body .card-title { line-height: 1.3; margin-bottom: 0; }
/* Cards hover */
.cards-hover-module__item {
background-color: #fff; border: none; border-radius: 12px;
display: flex; height: 100%; min-height: 26.44rem;
overflow: hidden; position: relative; transition: background-color .4s ease;
}
.cards-hover-module__item:hover { background-color: #b3d4f9; }
.cards-hover-module__item:hover .cards-hover-module__image-wrapper { opacity: 0; transform: translateY(-20px); }
.cards-hover-module__item:hover .cards-hover-module__link { opacity: 1; transform: translateY(0); }
.cards-hover-module__inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 2rem 1.5rem; }
.cards-hover-module__image-wrapper { left: 1.5rem; margin-bottom: 1.5rem; position: absolute; top: 1.5rem; transform: translateY(0); transition: all .4s ease; }
.cards-hover-module__image-wrapper img { height: 39px; object-fit: contain; width: 39px; }
.cards-hover-module__content { bottom: 1.5rem; color: #212529; left: 1.5rem; position: absolute; right: 1.5rem; transition: transform .4s ease; }
.cards-hover-module__content p { margin-top: .5rem; }
.cards-hover-module__link { bottom: 1.5rem; left: 1.5rem; opacity: 0; position: absolute; right: 1.5rem; transform: translateY(20px); transition: all .4s ease; }
.cards-hover-module__link a { align-items: center; background-color: #0098a2; border-radius: 30px; color: #fff; display: inline-flex; font-size: .875rem; font-weight: 500; padding: .5rem 1.25rem; text-decoration: none; }
.cards-hover-module__link a span { font-size: 1.25rem; margin-left: .5rem; }
/* Cards white */
.cards-white-module__item {
--bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem;
background-color: #fff; border: none; border-radius: 10px;
height: 31.25rem; margin-bottom: 2.5rem;
}
.cards-white-module__item-link a { font-size: 14px; }
.cards-white-module__item-link span { color: #0098a2; font-size: 16px; }
.cards-white-module__icon { height: 39px; width: 39px; }
/* Decorative blobs */
.cards-white-module__decorative-bg-blue,
.cards-white-module__decorative-bg-blue-left,
.cards-white-module__decorative-bg-blue-right {
background: var(--bs-primary-light, #b3d4f9);
border-radius: 544.281px;
box-shadow: 0 4px 4px 0 rgba(0,0,0,.25);
filter: blur(125px);
pointer-events: none;
position: absolute;
z-index: -1;
}
.cards-white-module__decorative-bg-blue { height: 600px; left: -300px; top: -50px; width: 600px; }
.cards-white-module__decorative-bg-blue-left { height: 1031px; left: -300px; top: -50px; width: 1029px; }
.cards-white-module__decorative-bg-blue-right { height: 1031px; right: -300px; top: -50px; width: 1029px; }
/* ============================================================
17. ACCORDION MODULES
============================================================ */
.accordion-module { border: none; }
.accordion-module__item { border-top: 1px solid #a4a4a4; }
.accordion-module__item:last-child { border-bottom: 1px solid #a4a4a4; }
.accordion-module__header { margin: 0; padding: 0; }
.accordion-module__button {
align-items: center; border: none; box-shadow: none;
display: flex; justify-content: space-between;
padding: 2rem 0; width: 100%;
}
.accordion-module__button:after { display: none; }
.accordion-module__button:hover .accordion-module__icon,
.accordion-module__button:not(.collapsed) .accordion-module__icon { background-color: #0098a2; }
.accordion-module__icon {
align-items: center; background: #fff; border-radius: 50%;
display: flex; font-size: 14px; height: 30px; justify-content: center;
line-height: 1; transition: all .3s ease; width: 30px;
}
.accordion-module__index { display: inline-block; margin-right: 3rem; text-align: left; width: 3rem; }
.accordion-module__body { padding: 0 0 6.25rem; }
/* ============================================================
18. TEAM MODULE
============================================================ */
.team-module__item { background-color: transparent; border: none; border-radius: .625rem; cursor: pointer; height: 100%; overflow: visible; transition: all .3s ease; }
.team-module__item:hover .team-module__plus-btn { background-color: #0098a2; color: #fff; transform: scale(1.1); }
.team-module__image-container { aspect-ratio: 1; border-radius: .625rem; overflow: hidden; align-items: center; display: flex; justify-content: center; min-height: 250px; }
.team-module__image { aspect-ratio: 1; height: auto; object-fit: cover; transition: transform .3s ease; width: 100%; }
.team-module__item:hover .team-module__image { transform: scale(1.05); }
.team-module__plus-btn {
align-items: center; background-color: #fff; border: none; border-radius: 50%;
bottom: .75rem; cursor: pointer; display: flex; flex-shrink: 0;
height: 30px; justify-content: center; position: absolute; right: .75rem; width: 30px;
}
.team-module__plus-btn .material-symbols-outlined { color: #212529; font-size: 24px; }
/* ============================================================
19. MAPS
============================================================ */
.map-responsive { border-radius: 8px; height: 593px; overflow: hidden; position: relative; width: 100%; }
@media (min-width: 768px) { .map-responsive { height: 500px; } }
.cluster-marker {
align-items: center;
background: radial-gradient(circle at center, #0098a2 60%, #00686f 100%);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,152,162,.2), 0 4px 8px rgba(0,0,0,.3);
color: #fff; display: flex; font-size: 14px; font-weight: 700;
height: 40px; justify-content: center; transition: transform .2s ease; width: 40px;
}
.cluster-marker:hover { cursor: pointer; transform: scale(1.1); }
/* Google Maps popup overrides */
.gm-style .gm-style-iw-c {
box-shadow: 3px 3px 4px 0 rgba(0,0,0,.25) !important;
max-width: none !important; min-width: auto !important; padding: 0 !important;
}
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d { background: #fff !important; border-radius: 10px !important; }
.gm-style .gm-style-iw-d { align-items: center !important; display: inline-flex !important; max-width: 244px !important; overflow: hidden !important; padding: 12px 41px 12px 16px !important; }
.gm-style-iw-chr, .gm-ui-hover-effect { display: none !important; }
.maps-module__info-window-title { font-size: 14px; font-weight: 700; margin: 0 !important; }
/* ============================================================
20. CTA MODULE
============================================================ */
.cta-module {
border-radius: .625rem; min-height: 13.19rem;
padding: 58px 57px 58px 45px; position: relative;
}
.cta-module__action,
.cta-module__container,
.cta-module__content { position: relative; z-index: 2; }
.cta-module__decorative-bg-orange,
.cta-module__decorative-bg-blue,
.cta-module__decorative-bg-light-blue {
border-radius: .625rem; height: 100%;
pointer-events: none; position: absolute;
right: 0; top: 0; width: 100%; z-index: 1;
background-position: 100% 0; background-repeat: no-repeat; background-size: contain;
}
@media (min-width: 992px) {
.cta-module__decorative-bg-orange,
.cta-module__decorative-bg-blue,
.cta-module__decorative-bg-light-blue { background-repeat: no-repeat; }
}
/* ============================================================
21. GRID MODULE
============================================================ */
.grid-module {
background: #f5dc59; border-radius: .625rem;
margin-left: 1rem; margin-right: 1rem;
min-height: 30rem; padding: 2rem; position: relative;
}
@media (min-width: 576px) { .grid-module { padding: 4rem 2rem; } }
@media (min-width: 992px) { .grid-module { max-width: 1400px; } }
@media (min-width: 1400px) { .grid-module { margin-left: auto; margin-right: auto; } }
@media (max-width: 767.98px) {
.grid-module { border-radius: 0; margin-left: 0; margin-right: 0; }
}
.grid-module__title { max-width: 45.68rem; }
@media (min-width: 992px) { .grid-module__title { margin-bottom: 8rem !important; } }
.grid-module__item-title { color: #212529; line-height: 1.3; margin-bottom: .875rem; }
.grid-module__item-description { color: #212529; line-height: 1.6; margin-bottom: 0; }
/* ============================================================
22. LINK CARD MODULE
============================================================ */
.link-card-module .custom-link {
align-items: center; background-color: #fff; border-radius: .75rem;
box-shadow: 0 2px 4px rgba(0,0,0,.05);
color: #212529; display: flex; justify-content: space-between;
overflow: hidden; padding: 1.875rem 1.56rem; text-decoration: none;
transition: all .3s ease;
}
.link-card-module .custom-link:hover { color: #212529; text-decoration: none; }
.link-card-module .custom-link--hover:hover {
background-color: #b3d4f9; border-color: #b3d4f9;
box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px);
}
.link-card-module .custom-link__title { color: #212529; flex: 1; font-size: 1rem; font-weight: 700; margin: 0; }
.link-card-module .custom-link__subtitle { color: #212529; font-size: .875rem; margin-bottom: 0; }
.link-card-module .custom-link__icon {
align-items: center; color: #0098a2; display: flex; flex-shrink: 0;
font-size: 2.43rem; justify-content: center; margin-left: 1rem;
position: relative; transition: all .3s ease; z-index: 10;
}
.link-card-module .custom-link--hover:hover .custom-link__icon { transform: scale(1.1); }
/* ============================================================
23. ENTITIES / CONVENIS MODULES
============================================================ */
.entities-module__card {
align-items: center; background-color: #fff; border-radius: .625rem;
display: flex; flex-direction: column; height: 230px; justify-content: center;
overflow: hidden; padding: 37px; position: relative; text-align: left;
transition: background-color .3s ease; width: 261px;
}
.entities-module__card:hover { background-color: #f5dc59; }
.entities-module__card:hover .entities-module__image-container { display: none; }
.entities-module__card:hover .entities-module__text { display: block; }
.entities-module__image-container { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }
.entities-module__image-container img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; }
.entities-module__text { color: #000; display: none; font-size: .9rem; line-height: 1.3; }
.convenis-module__border-top { border-top: 1px solid #a4a4a4; }
.convenis-module__item {
background: #fff; border: 1px solid #e9ecef; border-radius: .75rem;
color: inherit; padding: 1.5rem; text-decoration: none; transition: all .3s ease;
}
.convenis-module__item:hover { border-color: #0098a2; box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-2px); }
.convenis-module__icon { align-items: center; border-radius: 50%; display: flex; height: 1.87rem; justify-content: center; width: 1.87rem; }
.convenis-module__icon--arrow { background: #0098a2; color: #fff; font-size: 1.25rem; }
.convenis-module__title { font-weight: 600; }
.convenis-module__location { color: #6c757d; font-size: .875rem; margin-bottom: 0; }
/* ============================================================
24. PILL NAV
============================================================ */
.pillnav { display: block; font-size: .875rem; list-style: none; margin: 0; overflow-x: auto; padding: 2rem 0; white-space: nowrap; }
.pillnav__item { display: inline-block; margin: 0 .5rem; position: relative; }
.pillnav__item:first-child { margin-left: 0; }
.pillnav__item:last-child { margin-right: 0; }
.pillnav__item.--is-current a { background: #f5dc59; color: #212529; }
.pillnav__item.--is-current i { opacity: 1; width: unset; }
.pillnav__item a {
align-items: center; background: transparent; border: 1px solid #000;
border-radius: 20rem; color: #212529; display: inline-flex;
height: 2rem; padding: 1.4rem 1.125rem; position: relative; transition: color 275ms;
}
.pillnav__item a i { margin-right: .25rem; opacity: 0; width: 0; }
/* ============================================================
25. SWIPER / SLICK SLIDER OVERRIDES
============================================================ */
.slick-dots { bottom: auto; height: 2rem; }
.slick-dots li button:before { color: #f0f1f2; font-size: 2rem; opacity: 1; transition: all .2s ease-in-out; }
.slick-dots li button:hover:before { color: #d8d9da; }
.slick-dots li.slick-active button:before { color: #0098a2; }
.slick-next:before, .slick-prev:before { content: none !important; }
.slick-next, .slick-prev {
align-items: center; background: transparent; border: none;
display: flex !important; height: 26px; justify-content: center; width: 26px; z-index: 10;
}
.slick-next-custom, .slick-prev-custom {
align-items: center; background: #fff; border-radius: 9999px; color: #333;
cursor: pointer; display: flex; flex-shrink: 0; font-size: 1.625rem;
height: 2.5rem; justify-content: center; width: 2.6875rem; transition: background-color .2s;
}
.slick-next-custom:hover, .slick-prev-custom:hover { background: #f2f2f2; }
.slick-items__item { align-items: flex-start; border-radius: 10px; display: flex !important; flex-direction: column; width: calc(100% - 1.5rem) !important; }
.slick-items__item img { border-radius: 10px; height: auto; width: 100%; }
.swiper-module { border-radius: .625rem; margin-left: 1rem; margin-right: 1rem; padding: 2rem; }
@media (max-width: 767.98px) { .swiper-module { border-radius: 0; margin-left: 0; margin-right: 0; } }
@media (min-width: 768px) { .swiper-module { padding: 5.125rem 4.09rem; } }
@media (min-width: 992px) { .swiper-module { max-width: 1400px; } }
@media (min-width: 1400px) { .swiper-module { margin-left: auto; margin-right: auto; } }
/* ============================================================
26. SNACKBAR OVERRIDE
============================================================ */
.snackbar-container {
background-color: #212529 !important;
border-radius: 4px !important;
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12) !important;
}
.snackbar-container p { color: #fff !important; font-size: .9rem !important; font-weight: 400 !important; }
.snackbar-container .action { background: none !important; color: #00e0ef !important; font-weight: 700 !important; }
/* ============================================================
27. BREADCRUMB
============================================================ */
.breadcrumb { align-items: center; display: flex; list-style: none; margin: 0; padding: 0; }
.breadcrumb__item { color: #6c757d; font-size: .75rem; }
.breadcrumb__item.active { color: #0098a2; }
.breadcrumb__item:after { color: #212529; content: "/"; display: inline-block; margin: 0 .6em; }
.breadcrumb__item:last-child:after { display: none; }
.breadcrumb a:hover { color: #0098a2; text-decoration: none; }
/* ============================================================
28. TAG
============================================================ */
.tag { align-items: center; background: #f8f9fa; border-radius: 20rem; color: #fff; display: inline-flex; font-size: .9375rem; justify-content: center; padding: .1em 1em; }
.tag:hover { background: #000; text-decoration: none; }
.tag--primary { background: #0098a2; color: #fff; }
.tag--primary:hover { background: #008992; color: #fff; }
/* ============================================================
29. PAGINATION OVERRIDES
============================================================ */
.pagination { margin: 3rem auto; align-items: center; justify-content: center; }
.page-item > * { border: 1px solid #0098a2 !important; display: flex; height: 2.6rem; width: 2.6rem; align-items: center; justify-content: center; }
.page-item.active > * { background-color: #0098a2 !important; border-radius: 0 !important; color: #fff !important; }
.page-item:not(.active) > * { background-color: transparent; color: #0098a2; }
/* ============================================================
30. HEADER MODULES
============================================================ */
.header1,
.header2 {
background: #f0f1f2;
margin-bottom: 5rem;
margin-top: calc(var(--navbar-bottom-margin) * -1);
padding: 2.5rem 0;
text-align: center;
}
.header2__inner-wrap { align-items: center; display: flex; justify-content: center; }
@media (max-width: 767.98px) {
.header2 { padding: 3.5rem 0 2.5rem; }
.header2__inner-wrap { display: block; }
.header2__img-wrap { display: none; }
}
.header-color-module { min-height: 26.56rem; }
.header-color-module .text-module { min-height: 20rem; }
.header-color-module__author-image { height: 50px; object-fit: cover; width: 50px; }
.header-image-module__custom-banner {
background-position: 50%; background-repeat: no-repeat; background-size: cover;
flex-shrink: 0; height: 20rem; overflow: hidden; position: relative;
}
.header-image-module__custom-banner__overlay {
background: linear-gradient(180deg, hsla(0,0%,40%,0) 25%, rgba(8,8,8,.56));
inset: 0; position: absolute; z-index: 1;
}
/* ============================================================
31. LOZAD LAZY LOAD
============================================================ */
.lozad.lozad--loaded { animation-duration: 2s; animation-name: fade; }
@keyframes fade { 0% { opacity: 0; } to { opacity: 1; } }
/* ============================================================
32. COLLABORATORS MODULE
============================================================ */
.collaborators-module__header { border-top: 1px solid #a4a4a4; padding-top: 1.06rem; }
.collaborators-module__title { margin-bottom: 1.5rem; }
.collaborators-module__item { align-items: center; display: flex; justify-content: center; width: 100%; }
/* ============================================================
33. CARDS LINK MODULE
============================================================ */
.cards-link-module__card {
align-items: center; background-color: #fff; border: .0625rem solid transparent;
border-radius: .5rem; box-shadow: 0 .125rem .5rem rgba(0,0,0,.08);
display: flex; justify-content: space-between; padding: 1.4rem;
text-decoration: none; transition: all .3s ease;
}
.cards-link-module__card:hover {
background-color: #b3d4f9; box-shadow: 0 .25rem 1rem rgba(0,0,0,.12);
text-decoration: none; transform: translateY(-.125rem);
}
.cards-link-module__card:hover .cards-link-module__arrow { background-color: #0098a2; transform: translateX(.25rem); }
.cards-link-module__title { color: #0098a2; flex: 1; font-size: 1rem; font-weight: 600; margin: 0; }
.cards-link-module__arrow {
align-items: center; background-color: transparent; border-radius: 50%;
color: #212529; display: flex; flex-shrink: 0; font-size: 1.25rem;
height: 2rem; justify-content: center; margin-left: 1rem;
transition: all .3s ease; width: 2rem;
}
/* ============================================================
34. SELECT2 THEME OVERRIDES
============================================================ */
.select2-container--default .select2-selection--single {
background: transparent;
border: 1px solid #ced4da;
border-radius: .375rem;
font-size: .9375rem;
height: 56px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #212529; line-height: 3.5em; padding: 0 1.2em;
}
.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: #212529; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e9ecef; border: none; color: #000; font-size: .875rem; }
.select2-container--default .select2-results__option { font-size: .875rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0098a2; }
/* ============================================================
35. OFFCANVAS TEAM OVERLAY
============================================================ */
.offcanvas.offcanvas-end .offcanvas-body ul.offcanvas__list { list-style: none; margin: 0; padding: 0; }
.offcanvas.offcanvas-end .offcanvas-body ul.offcanvas__list li { margin-bottom: 1rem; }
.offcanvas.offcanvas-end .offcanvas-body ul.offcanvas__list .offcanvas__list-item-link {
align-items: flex-start; background-color: #fff; border-radius: .75rem;
color: #212529; display: flex; gap: .75rem; line-height: 1.5;
padding: .9375rem .625rem; text-decoration: none; transition: background-color .3s ease, color .3s ease;
}
.offcanvas.offcanvas-end .offcanvas-body ul.offcanvas__list .offcanvas__list-item-link:before {
background-color: #0098a2; border-radius: 50%;
content: ""; flex-shrink: 0; height: .5rem; margin-top: .4rem; width: .5rem;
}
.offcanvas.offcanvas-end .offcanvas-body ul.offcanvas__list .offcanvas__list-item-link:hover { background-color: #b3d4f9; }
/* ============================================================
36. MAINTENANCE / 404
============================================================ */
.maintenance { height: 100vh; position: relative; }
.maintenance__content {
display: block; left: 50%; margin-top: -2vh;
position: absolute; text-align: center; top: 50%;
transform: translate(-50%, -50%); width: 90vw;
}
.maintenance__logo { margin-bottom: 1rem; max-width: 25rem; }
.maintenance__desc { font-size: 1rem; margin: 0 auto; max-width: 30rem; }
.lost__content { margin: 20vw auto 0; max-width: 600px; min-height: 35vh; position: relative; text-align: center; z-index: 1; }
.lost__title { color: #212529; font-size: .9375rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.lost__hl { background: #0098a2; height: 3px; margin: 1rem auto; width: 8vw; }
.lost__body { color: #212529; font-size: calc(1.275rem + .3vw); font-weight: 700; margin-bottom: 2rem; }
@media (min-width: 1200px) { .lost__body { font-size: 1.5rem; } }