@import url('variables.css');

img {max-width: 100%;}

.banner-arrow {display: flex; justify-content: center; margin: 2rem 0;}
.banner-arrow a img {width: 2rem; animation: bounce 2s infinite;}
.banner-arrow a:hover img {animation: none;}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}

.up-link {width: 60px; height: 60px; border-radius: 30px; font-size: 2rem; background: var(--secondary); color: white; position: fixed; right: 2rem; bottom: 2rem; display: flex; justify-content: center; align-items: center; transition: 0.2s; opacity: 0; transform: scale(0); visibility: hidden; box-shadow: rgba(0,0,0,0.5) 0px 0px 10px;}
.up-link.visible {opacity: 0.8; transform: scale(1); visibility: visible;}
.up-link.visible:hover {transform: scale(1.2); opacity: 1;}

.gallery-grid {display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 50vw; gap: 5px; margin: 5px 0;}
.gallery-grid>div {overflow: hidden;}
.gallery-grid>div img {transition: 0.2s; width: 100%; height: 100%; object-fit: cover;}
.gallery-grid.zoom>div img:hover {transform: scale(1.2);}
.gallery-grid img {opacity: 0;}
.mfp-arrow {color: white;}
.mfp-arrow::before,.mfp-arrow::after {border: none;}
.mfp-arrow-right::after {font-family: 'bootstrap-icons'; content: '\f285'; font-size: 1.5rem;}
.mfp-arrow-left::after {font-family: 'bootstrap-icons'; content: '\f284'; font-size: 1.5rem;}
.mfp-title,.mfp-counter {font-size: 0.6rem;}

.mfp-content {text-align: center !important;}
.mfp-close::before {top: 0; right: 25px;}
.mfp-fade.mfp-bg {opacity: 0; transition: all 0.5s ease-out;}
.mfp-fade.mfp-bg.mfp-ready {opacity: 0.8;}
.mfp-fade.mfp-bg.mfp-removing {opacity: 0;}
.mfp-fade.mfp-wrap .mfp-content {opacity: 0; transition: all 0.5s ease-out;}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {opacity: 1;}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {opacity: 0;}

.fade-image {animation: fade 2s; animation-fill-mode: both;}
@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.toast-container {pointer-events: all;}
.toast-item-close {cursor: pointer;}

.section {background: white; color: var(--primary);}
.section-image {background-color: grey; background-position: 50%; background-repeat: no-repeat; background-size: cover; min-height: 50vh;}
.section-text {padding: 4rem 0; text-align: center;}
.section-text>div {margin: 2rem;}
.section-main {padding: 4rem 1rem; text-align: center;}
.section-banner {position: relative; height: 300px; padding: 0; background-color: #888; color: white; background-size: cover; background-position: 50% 50%;}
.section-dark {background-color: var(--primary); color: white;}

#modal_news {color: var(--primary);}

.cms-profiles {display: flex; flex-wrap: wrap; justify-content: center;}
.cms-profiles .thumbnail {width: 40%; margin: 5%; text-align: center;}

.cms-square-gallery {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem;}
.cms-square-gallery-image {width: calc(33% - 1rem);}
.cms-square-gallery-image img {object-fit: cover; width: 100%; aspect-ratio: 1/1;}

.cms-caption-gallery {display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;}
.cms-caption-gallery .thumbnail {width: calc(50% - 1rem); text-align: center;}
.cms-caption-gallery .thumbnail img {object-fit: cover; width: 100%; aspect-ratio: 1/1;}

.cms-carousel-gallery-main {position: relative;}
.cms-carousel-gallery-list {display: flex; overflow-x: scroll; margin-top: 1rem; position: relative;}
.cms-carousel-gallery-thumbnail img {min-width: 150px; aspect-ratio: 1/1; object-fit: cover; border: 3px solid white;}
.cms-carousel-gallery-thumbnail.selected img {border: 3px solid var(--primary);}
.cms-carousel-gallery-nav {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.cms-carousel-gallery-nav .nav-left,.cms-carousel-gallery-nav .nav-right {height: 100%; cursor: pointer; display: block; transition: opacity 0.6s; font-size: 4rem; color: white; text-shadow: 1px 1px 5px black; display: flex; align-items: center; padding: 2rem; text-decoration: none; opacity: 0;}
.cms-carousel-gallery-nav .nav-left:hover,.cms-carousel-gallery-nav .nav-right:hover {opacity: 1;}
.cms-carousel-gallery-nav .nav-left {float: left; width: 34%;}
.cms-carousel-gallery-nav .nav-right {float: right; width: 66%; justify-content: right;} 
.cms-carousel-gallery-caption {position: absolute; background: rgba(0,0,0,0.5); bottom: 0; left: 0; color: white; padding: 5px 10px;}
.cms-carousel-gallery-caption:empty {display: none;}

.gallery-image {float: left; width: 19.2%; margin-bottom: 1%;}
.gallery-image img {width: 100%;}
.gallery-grid-sizer {width: 19.2%;}
.gallery-gutter-sizer {width: 1%;}

@media (min-width: 768px) {
  .gallery-grid {grid-template-columns: repeat(4,1fr); grid-auto-rows: 25vw;}
  .fade-image {animation-delay: var(--delay,0);}

  .cms-profiles .thumbnail {width: 22%; margin: 1.5%;}
  .cms-profiles .thumbnail img {height: 18rem !important; object-fit: contain;}

  .cms-caption-gallery .thumbnail {width: calc(33% - 1rem);}
}