/* rules */
/* - scale: 2,4,6,8,12,16,24,32,48,64 */

/* colors */
:root {
  --OZ_bg: #050505;
  --OZ_bg-light: #212121;
  --OZ_text: #F5F5F5;
  --OZ_text-dark: #B0B0B0;
  --OZ_link: #2795D3;
  --OZ_link-hover: #53C1FF;
  --OZ_line: #6D6D6D;
  --OZ_category: #3D9387;
  --OZ_category-hover:#51C4B4;
  --OZ_collection: #a0a0a0;
  --OZ_collection-hover:#a8a8a8;
  --OZ_location: #b79a3e;
  --OZ_location-hover:#b79a3e;
}



/* elements */
body {background:var(--OZ_bg); color:var(--OZ_text); font-family:Roboto, Arial; letter-spacing:2px;}
h1 {font-size:32px; margin:0;}
h2 {margin:0; font-size:24px; font-style:normal; font-weight:100;}
a {color:var(--OZ_link); text-decoration:none;}
  a:hover {color:var(--OZ_link-hover);}




/* layout */
#header {position:relative; width:1200px; height:55px; margin:0 auto; padding:12px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #3e3d3d; z-index:11;}
  #header .logo {width:500px; text-align:center;}
  #header .logo img {width:100%; animation:loadLogo 10s ease forwards;}
  #header .logo:hover {opacity:0.7;}

.canvas {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; z-index:10; animation:loadCanvas 1s ease forwards;}
  .canvas .progressCont {width:200px; text-align:left; font-size:60%; color:var(--OZ_line);}
  .canvas .progress {width:200px; height:1px; margin-top:2px; background:var(--OZ_link); animation:loadProgress 1s ease forwards;}



.menu {display:flex; justify-content:center; gap:48px; font-size:140%;}
.menu a {display:flex; align-items:center; flex-direction:row;}
.menu a .icon {height:18px; margin-right:8px;}

#container {display:flex; flex-direction:column; gap:24px; width:1200px; margin:0 auto;}
.content {width:100%; display:flex; flex-direction:column; gap:24px;}
  .content .cnt-head .description {margin-top:8px; color:var(--OZ_text-dark);}
  .content .cnt-head.divider {margin-top:32px;}
  .content .cnt-main.photo {text-align:center;}
    .content .cnt-main.photo img {max-width:100%; border:2px solid var(--OZ_bg-light);}
      .content .cnt-main.photo img.vertical {max-height:1000px;}
  .content .cnt-main.right {display:flex; justify-content:flex-end; gap:12px;}
  .content .cnt-main.list {display:flex; flex-wrap:wrap; justify-content:flex-start; gap:24px;}
  .content .cnt-main.list .list-item {display:flex; align-items:center; justify-content:center; width:280px; height:145px; margin:0 auto; border:1px solid var(--OZ_link); border-width:0 0 1px 0; overflow:hidden}
  .content .cnt-main.list .list-item:hover {border:1px solid var(--OZ_link-hover); border-width:0 0 1px 0;}
  .content .cnt-main.list.big .list-item {width:31%; height:250px;}
  .content .cnt-main.list.small .list-item {height:100px;}
  .content .cnt-main.list.text .list-item {justify-content:flex-start; gap:8px;}
    .list-item .item-bottom {width:95%; display:flex; align-items:flex-start; align-items:center; gap:4px; padding-top:4px}
  .content .cnt-main.list .list-item.category, .content .cnt-main.list .list-item.location {border-radius:5px; border-width:1px 1px 1px 1px;}
  .content .cnt-main.list .list-item.photo {flex-direction:column; border:0; height:207px; width:276px;}
    .content .cnt-main.list .list-item.photo:hover {filter:brightness(1.1);}
  .content .cnt-main.list .list-item.photo.big {flex-direction:column; border:0; height:414px; width:500px;}
    .content .cnt-main.list .list-item.photo .imgCont {display:flex; align-items:center; justify-content:center; width:100%; border:1px solid #15374f; overflow:hidden;}
    .content .cnt-main.list .list-item.photo .imgCont img {height:100%;}
    .content .cnt-main.list .list-item.photo .imgCont img.vertical {width:100%; height:auto;}
    .content .cnt-main.list .list-item.photo .item-bottom {width:100%; border:1px solid var(--OZ_link); border-width:1px 0 0 0;}
    .content .cnt-main.list .list-item.collection {border-width: 1px 1px 3px 1px; border-bottom: 3px solid var(--OZ_collection) !important; border-radius: 8px;}
    .content .cnt-main.list .list-item.collection .box_gradient {flex-direction: column; justify-content: flex-end;}
    .content .cnt-main.list .list-item.collection .description {height:40px; margin-bottom: 8px; overflow:hidden; font-size:90%;opacity: 0.7;
      line-height: 19px;}


  .content .cnt-main .icon {height:14px; margin-right:4px; }
  .content .cnt-main .box_gradient {display:flex; align-items:flex-end; gap:8px; width:100%; height:60%; margin-top:auto; padding:0 8px 8px 8px; background:url('img/bg_gradient.png'); background-size:contain; font-size:14px;}
  .content .cnt-main .title {font-size:90%;}
  .content .cnt-main .count {border:1px solid var(--OZ_line);     border-radius: 16px;
    padding: 4px;
    font-size: 60%;
    background: #ffffff26;}
  
  .content.imageTop.hidden {display:none;}
  .content.imageTop .cnt-head {position:absolute; top:0; display:flex; justify-content:center; align-items:center; height:400px; margin-top:0; overflow:hidden; opacity:1; z-index:-5; width:100%; left:0;}
  .content.imageTop .cnt-main {display:flex; justify-content:space-between; align-items:center; margin:0 0 0 0; padding:0 0px 20px 0px; border-bottom:1px solid #3e3d3d;}
  #imageTop2, #imageTop3 {animation:imageTopSlide 0.5s ease forwards;}

#footer {width:1200px; margin:32px auto 64px auto; padding:16px 0; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--OZ_line);}
.lang a {padding:2px 5px;}



/* classes */
.hidden {display:none;}
.disabled {color:#aaaaaa; opacity:0.8; cursor:text;}

.imageSizeCont {display:flex; gap:16px;}
  .imageSizeCont .item {display:flex; gap:4px; cursor:pointer;}
  .imageSizeCont .item:hover {opacity:0.8;}
  .imageSizeCont .icon {width:16px;}
  .imageSizeCont .disabled .icon {filter:saturate(0.1);}

.category {color:var(--OZ_category); border-color:var(--OZ_category) !important;}
  .category:hover {color:var(--OZ_category-hover); border-color:var(--OZ_category-hover) !important;}
  .category .icon {filter: hue-rotate(-32deg); opacity:0.8;}
  .category:hover .icon {opacity:1;}

.collection {color:var(--OZ_collection); border-color:#525252 !important;}
  .collection:hover {color:var(--OZ_collection-hover); border-color:var(--OZ_collection-hover) !important;}
  .collection .icon {filter: hue-rotate(-32deg); opacity:0.8;}
  .collection:hover .icon {opacity:1;}

.location {color:var(--OZ_location); border-color:var(--OZ_location) !important;}
  .location:hover {color:var(--OZ_location-hover); border-color:var(--OZ_location-hover) !important;}
  .location .icon {filter: hue-rotate(-152deg); opacity:0.8;}
  .location:hover .icon {opacity:1;}


.truncate140 {
  display:inline-block;
  max-width: 75%; /* Define the width of the element */
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide any overflowing text */
  text-overflow: ellipsis; /* Display an ellipsis (...) when text overflows */
}

.note {color:var(--OZ_text-dark);}

.button {display:inline-flex; gap:8px; padding:4px 16px; border:1px solid var(--OZ_link); border-radius:4px; background:var(--OZ_bg-light);}
.buttonText {display:flex; align-items:center; justify-content:flex-end;}
  .button .icon, .buttonText .icon {width:16px;}

.list-row {display:flex; align-items:flex-start; margin-bottom:12px;}
.list-row .title {margin-right:8px;}
.list-row .icon {height:12px; margin-right:6px;}
.list-row .value.column {display:flex; flex-direction: column; gap:12px;}

.entity img {height:14px; filter:grayscale(100%);}
 
.chip {display:inline-flex; align-items:center; background:var(--OZ_bg-light); margin:0px 4px; padding:2px 8px; border-radius:16px; font-size:80%;}
  .chip .icon {height:10px;}

.mapa {width:100%; height:700px; margin:0 auto;}
  .mapa.small {height:200px;}
  .mapa.middle {height:700px;}
  .mapa.full {position:absolute; width:100%; height:100%; top:0; left:0; z-index:11;}
  .full_close {display:none;}
  .mapa.full .full_close {position:absolute; top:15px; right:100px; display:block; padding:8px; background:#000; border-radius:2px; line-height:0; z-index:1000; cursor:pointer;}
  .mapa .leaflet-popup-content-wrapper {max-width:190px !important;}
  .mapa .leaflet-popup-content-wrapper a {width:150px;}
  .mapa .leaflet-popup-content-wrapper img {width:150px;}
  
.legend {clear:both; display:flex; justify-content:space-between; align-items:center; width:100%; text-align:center;}
  .legend .item {display:flex; align-items:center;}

.message_noMap {padding:20px 30px; color:#666; animation:cssAnimation 0s 3s forwards; visibility:hidden;}

/* Photo markers on map */
.photo-marker {
  border: 2px solid var(--OZ_bg-light);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.photo-marker:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
    @keyframes cssAnimation { to { visibility: visible; } }

    .message_noMap strong {font-size:130%;} 

.prevnext {display:flex; justify-content:space-between; margin:16px 0 0 0;}

.socialNetworks {display:flex; align-items:center; gap:8px;}
.socialNetworks .icon {height:32px;}


/* animations */  
@keyframes loadLogo {
  from {width:450px;}
  to {width:500px;}
}
@keyframes imageTopSlide {
  from {margin-left:500px;}
  to {margin-left:0px;}
}
@keyframes loadCanvas {
  from {opacity:1;}
  70% {opacity:1;}
  to {opacity:0; display:none;}
}
@keyframes loadProgress {
  from {width:0px;}
  60% {width:200px;}
  to {width:200px;}
}



/* mobile */  
@media only screen and (max-width: 1024px) {
  body {width:100%; margin:0; font-size:90%;animation:loadContainerMobile 15s ease forwards;}
  h1 {font-size:24px;}
  h2 {margin:0 0 5px 0; font-size:20px;}
  #header, #container, #footer {width:96%;}
    #header {height:45px; align-items:center; flex-direction:column; gap:24px; border-bottom:1px solid #3e3d3d; text-align:center;}
    #header .logo {width:90%;}
    #header .logo img {animation:loadLogoMobile 15s ease forwards;}
    .menu {position:fixed; bottom:0; width:100%; padding:10px 0; background:var(--OZ_bg-light); font-size:10px;}
      .menu a {flex-direction:column; width:15%;}
      .menu a .icon {height:24px; margin-right:0px;}
  #container {}
  .content .cnt-head {margin-top:15px;}
  .content .cnt-main.list .list-item {width:46%;}
  .content .cnt-main.list.big .list-item {width:100%; height:200px;}
  .content .cnt-main.list.small .list-item {width:46%; height:75px;}
  .content .cnt-main.list .list-item.photo {flex-direction:column; border:0; height:145px; width:46%;}
  .content .cnt-main.list .list-item.photo.big {flex-direction:column; border:0; height:290px;}
  .content .cnt-main.list .list-item.photo .imgCont img {height:100%;}
  .content .cnt-main.photo img {width:100%;}
  .content .cnt-main.photo.full img {max-width:none; width:auto;}  
  
  .list-row {margin-bottom:12px;}

  .mapa {width:98%; height:500px; margin:0 auto;}
  .mapa.small {height:100px;}
  .mapa.middle {height:400px;}
  
  .legend {flex-direction:column; gap:16px;}

  .chip {margin:2px 4px;}

}


/* animations */  
@keyframes loadLogoMobile {
  from {width:80%; opacity:0;}
  10% {width:85%; opacity:1;}
  to {width:90%;}
}
@keyframes loadContainerMobile {
  from {visibility:invisible;}
  to {visibility:visible;}
}

/* filter */
.filter {margin:8px 0; display:flex; gap: 12px; flex-direction: column;}
.filter-section {}
.filter-title {display:block; margin-bottom:8px; font-size:90%; color:var(--OZ_text-dark);}
.filter-controls {display:flex; gap:8px; margin-top:4px;}
.filter-btn {
  background: #231d0b;
  border: 0.5px solid #b79a3e;
  color: var(--OZ_text-dark);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 60%;
  transition: all 0.2s ease;
}
.filter-btn:hover {
  background: #342b10;
  color: var(--OZ_text);
}
.filter-checkboxes {display:flex; flex-wrap:wrap; gap:12px;}
.checkbox-label {display:flex; align-items:center; gap:4px; cursor:pointer; font-size: 60%;
  background: #231d0b;
  padding: 2px 4px;
  border-radius: 4px;
  border: 0.5px solid #b79a3e;}
.checkbox-label:hover {color:var(--OZ_text); background: #342b10;}
.custom-checkbox {
  width: 6px;
  height: 6px;
  background: #b79a3e;
  border-radius: 2px;
  border: 0.5px solid #a3a3a3;
  transition: background-color 0.2s ease;
}
.custom-checkbox .icon {width:6px; height:6px;}
.checkbox-label[data-checked="false"] {
  background: #333333;
  border: 0.5px solid #a3a3a3;
}
.checkbox-label[data-checked="false"] .custom-checkbox {
  background: #333333;
  border: 0.5px solid #b79a3e;
}
.checkbox-text {color:var(--OZ_text-dark);}
.checkbox-label:hover .checkbox-text {color:var(--OZ_text);}