@import url("https://fonts.googleapis.com/css2?family=Imbue:opsz,wght@10..100,100..900&display=swap");
:root { --c-primary: #156edf;
--c-secondary: #33997c; --f-bodyfont: 'Open Sans'; --f-titlefont: 'Catamaran';
}
* {
position: relative;
font-family: "Imbue", serif;
font-weight: 700;
}
html, body {
font-family: "Imbue", serif;
font-weight: 700;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden !important;
}
a, a:visited {
color: inherit;
}
a:hover {
text-decoration: none;
}
.entry-content a:not(.button):not(.btn) {
color: var(--c-primary);
}
.entry-content a:not(.button):not(.btn):hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Imbue", serif;
font-weight: 700;
}
.form-control:focus {
box-shadow: none;
border-color: var(--c-primary);
}
.btn {
font-weight: 700;
font-size: 15px;
border: 0px;
}
.btn, .btn-primary {
background-color: var(--c-primary);
color: #fff;
}
.btn, .btn-secondary {
background-color: var(--c-secondary);
}
.c-primary {
color: var(--c-primary);
}
.c-inherit {
color: inherit !important;
}
.container {
width: 100%;
min-width: 100%;
}
.container.container-sm {
width: 100%;
}
#main {
margin: 0;
padding: 0;
padding-top: 63px !important;
}
.row.archive-row article {
display: flex;
align-items: center;
}
.row.archive-row article .post-img {
max-width: 33%;
flex-shrink: 1;
margin-right: 1.5rem;
} #header {
background-color: black !important;
}
#pagepiling {
height: 100vh;
width: 100%;
position: relative;
background-color: black;
}
.section {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
overflow: hidden;
transition: transform 0.8s ease-in-out;
}
.masonry-bg {
background-color: black;
}
.section .static-bg, .section .carousel-background, .section .masonry-bg {
position: absolute;
inset: 0;
z-index: 1;
}
.section[data-bg="image"] .static-bg img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
.section[data-bg="carousel"] .owl-stage-outer, .section[data-bg="carousel"] .owl-stage, .section[data-bg="carousel"] .owl-item, .section[data-bg="carousel"] .item {
height: 100%;
}
.section[data-bg="carousel"] .item img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
.section[data-bg="masonry"] .masonry-bg {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 7vh;
grid-auto-flow: dense;
gap: 8px;
padding: 8px;
overflow: hidden;
}
.section[data-bg="masonry"] .m-item {
border-radius: 10px;
overflow: hidden;
grid-column: span 3;
grid-row: span 3;
}
.section[data-bg="masonry"] .m-xxs {
grid-row: span 2;
}
.section[data-bg="masonry"] .m-xs {
grid-row: span 3;
}
.section[data-bg="masonry"] .m-sm {
grid-row: span 4;
}
.section[data-bg="masonry"] .m-md {
grid-row: span 5;
}
.section[data-bg="masonry"] .m-lg {
grid-row: span 6;
}
.section[data-bg="masonry"] .m-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.overlay-light {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 56px);
pointer-events: none;
}
.overlay-light .section-content, .overlay-light .section-content-right {
pointer-events: auto;
}
.overlay-disabled {
position: absolute;
z-index: 2;
left: 20px;
right: 20px;
bottom: 20px;
pointer-events: none;
}
.section-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
opacity: 0;
transition: opacity 0.6s ease;
}
.section.active .section-content {
opacity: 1;
}
.section-content-right {
position: absolute;
top: 40px;
right: 20px;
text-align: right;
color: #fff;
opacity: 0;
transition: opacity 0.6s ease;
}
.section.active .section-content-right {
opacity: 1;
}
.section-content p, .section-content-right p {
margin: 0;
font-size: 2.5rem;
}
.box-child p {
font-size: 1.5rem;
}
.section[data-bg="masonry"] .masonry-bg img, .section[data-bg="carousel"] .item img {
cursor: zoom-in;
}
#navDots {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
#navDots div {
width: 30px;
height: 15px;
border: 1px solid #83697d;
cursor: pointer;
transition: background 0.3s;
}
#navDots div:hover {
background-color: #83697d;
}
#navDots div.active {
background-color: #83697d;
}
#navDots div::before {
content: attr(data-title);
position: absolute;
right: 110%;
top: 50%;
transform: translateY(-50%); color: #fff;
padding: 4px 8px;
font-size: 13px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
#navDots div:hover::before {
opacity: 1;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.box {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
}
.box-child {
flex: 1 1;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
color: #fff;
border: 2px solid #83697d;
}
.box p {
font-size: 1.8rem;
}
.custom-link {
color: white !important;
border: 2px solid white;
padding: 2px 5px;
transition: all .35s;
position: relative;
font-size: 1.2em;
}
.custom-link span {
position: relative;
z-index: 2;
}
.custom-link:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: white;
transition: all .35s;
}
.custom-link:hover {
color: black !important;
}
.custom-link:hover:after {
width: 100%;
}
.custom-link-ing {
transition: all .35s;
position: relative;
padding: 7px;
}
.custom-link-ing:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: #83697d78;
transition: all .35s;
border-radius: 10px;
}
.custom-link-ing:hover:after {
width: 100%;
}
.navbar-brand {
color: #83697d !important;
text-transform: uppercase;
font-size: 3rem;
}
.mobile-link {
margin-left: 15px;
margin-top: 0px;
}
.container-left {
text-align: center;
align-items: center;
display: flex;
flex: 100;
}
.ing-logo img {
max-width: 35px;
}
#homepage {
position: relative;
overflow: hidden;
}
.carousel-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.carousel-background .item {
width: 100%;
height: 100vh;
}
.carousel-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
#logo-brand span {
display: inline-block;
opacity: 0;
transform: translateX(-20px);
transition: all 1s ease;
}
.static-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
z-index: 0;
}
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #80667a;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
animation: fadeOutOverlay 1s ease forwards;
animation-delay: 0.8s;
}
.overlay-img {
width: 300px;
height: auto !important;
}
.loading-title {
color: white;
font-size: 8rem;
font-weight: bold;
letter-spacing: 2px;
opacity: 0;
animation: fadeUpTitle 1s ease forwards;
}
@keyframes fadeOutOverlay {
to {
opacity: 0;
visibility: hidden;
}
}
@keyframes fadeUpTitle {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.navbar-brand img {
height: 50px;
}
.lb-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .9);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
}
.lb-overlay.active {
display: flex;
}
.lb-img {
max-width: 92vw;
max-height: 92vh;
display: block;
}
.lb-close, .lb-prev, .lb-next {
position: absolute;
top: 20px;
padding: 10px 14px;
background: rgba(255, 255, 255, .12);
color: #fff;
border-radius: 8px;
font-size: 14px;
line-height: 1;
cursor: pointer;
user-select: none;
}
.lb-close {
right: 20px;
}
.lb-prev {
left: 20px;
}
.lb-next {
right: 80px;
}
.section-content-right {
position:absolute;
top:40px;
right:20px;
text-align:right;
}
.mobile-link {
display: none;
}
.page-hero {
width: 100%;
height: 500px;
background-size: cover;
background-position: center;
position: relative;
background-color: black;
}
.page-hero__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.page-hero__inner {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
z-index: 2;
}
.page-hero__title {
margin: 0;
font-size: clamp(28px, 4vw, 56px);
line-height: 1.1;
color: #fff;
}
.content-box {
width: 100%; padding: 100px 10vw;
}
.accessibility-trigger-button.bottom-right
Specificity: (0,2,0)
{
bottom: 200px !important ;
right: 0;
}  @media (max-width:1200px) {
.section[data-bg="masonry"] .masonry-bg {
grid-auto-rows: 6.2vh;
} @media (max-width:992px) {
.section[data-bg="masonry"] .masonry-bg {
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 7vh;
}
.section[data-bg="masonry"] .m-item {
grid-column: span 4;
}
} @media (max-width:768px) {
.content-box {
padding: 50px 5vw;
}
.page-hero {
height: 200px;
}
.navbar-brand img {
height: 40px;
}
.mobile-link {
display: block;
}
.section-content-right {
position: relative;
top: auto;
right: auto;
margin: 100px auto 0;
text-align: left;
}
.desk-display-none {
display: none;
}
.section-content p {
font-size: 1.5rem;
}
.box p {
font-size: 1.3rem;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1.5rem;
}
.contenedor {
flex-direction: column;
}
} @media (max-width:576px) {
.custom-link {
font-size: 14px;
}
.navbar-brand img {
height: 30px;
}
.section[data-bg="masonry"] .masonry-bg {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 8vh;
}
.section[data-bg="masonry"] .m-item {
grid-column: span 3;
}
.overlay-disabled {
left: 12px;
right: 12px;
bottom: 12px;
}
.section-content-right{
position:absolute;
top:70px;
right:12px ;
left:auto ;
bottom:auto ;
margin:0 ;
transform:none;
text-align:right ;
width:auto;
max-width:calc(100% - 24px); 
pointer-events:auto;
}
.section-content-right.overlay-disabled{
top:12px ;
right:12px ;
left:auto ;
bottom:auto ;
}
.overlay-light{
align-items:flex-start !important;
justify-content:flex-start !important;
}
}