/* Declare Variables */

@import url('https://fonts.googleapis.com/css2?family=Imbue:opsz,wght@10..100,100..900&display=swap');



:root {



  /* colors */

  --c-primary: #156edf;

  --c-secondary: #33997c; /* fonts */

  --f-bodyfont: 'Open Sans';  /* --f-titlefont for H tags or other title fonts */

  --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%);    /*background-color: #222;*/

  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%;

    /* margin: 0 auto; */

    padding: 100px 10vw;

}

.accessibility-trigger-button.bottom-right
Specificity: (0,2,0)
 {
    bottom: 200px !important ;
    right: 0;
}



/** Breakpoints **/



/* Large devices (large desktops, 1200px and up) */

@media (max-width:1200px) {

  .section[data-bg="masonry"] .masonry-bg {

    grid-auto-rows: 6.2vh;

  }



  

/* Medium devices (desktops, 992px and up) */

@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;

  }

}



/* Small devices (tablets, 768px and up) */

@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;

  }



}



/* X-Small devices  */

@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;

  }

}