@import url('./normalize.css');
@import url('./bootstrap-grid.css');
@import url('./icon-font.css');

@import url('./shiro-share.css');

@import url('./swiper-bundle.min.css');
@import url('./jquery.fancybox.min.css');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('./vitor.css');

:root{

  /* measures */
  --header-height: 
    60px;
  --card-border-radius: 
    3px;
  
  /* grayscale */
  --ec-white: 
    hsl(0, 0%, 100%);
  --ec-lightgray: 
    hsl(0, 0%, 94%);
  --ec-gray: 
    hsla(180, 5%, 49%, 0.95);
  --ec-black: 
    hsl(180, 7%, 21%);
}

html, body{
  min-width: 280px;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
html{
  overflow-x: hidden;
  overflow-y: auto;
}
body{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  background-color: var(--ec-lightgray);
  color: var(--ec-black);
  
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

main{
  flex-grow: 1;
  padding: 3.5em 0 4em 0;
}

h1, h2, h3, h4, h5, h6{
  color: var(--ec-black);
}

a{
  text-decoration: none;
  color: inherit;
}

img{
  display: block;
}

iframe {
  border: none;
}

pre{
  overflow: hidden;
}

/* HELPERS */

.container{
  width: 95% !important;
  max-width: 1100px !important;
}

.menu-toggle{
  user-select: none;
  cursor: pointer;
}

.img-sizer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.img-sizer > * {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;

  transition: opacity 0.15s ease-out;
}

a{
  /* text-decoration: underline; */
  /* text-decoration-color: red; */
  transition: all .15s ease-out;
}
a:hover{
  /* color: #633030; */
  color:#000;
  text-decoration-color: transparent;
}

a.about-tag {
  display: inline-flex;
  padding: .3em .75em .25em .75em;
  border: 1px solid var(--ec-black);
  
  line-height: 180%;
  text-decoration: none;

  background-color: transparent;
  color: var(--ec-black);
  transition: all .15s ease-out;;
}
a.about-tag:hover {
  background-color: var(--ec-black);
  color: var(--ec-lightgray);
}

[gallery] {
  cursor: pointer;
}

/* HEADER */

header {
  position: sticky; top: 0;
  display: flex;
  flex-direction: column;
  height: var(--header-height);

  background-color: var(--ec-black);
  color: white;

  z-index: 100;
}

  header > * {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  header a,
  header a:hover {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
  }

  header .logo img {
    height: calc(var(--header-height) - 2.3em);
  }

  #mob-nav {
    position: relative;
    z-index: 100;
  }

    #mob-nav-row-1 {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: var(--ec-black);
      z-index: 10;
    }
    #mob-nav-row-1 > .container {
      position: relative;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    #mob-nav-row-2 {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 1em 0;
      background-color: var(--ec-gray);

      z-index: 5;

      transform: translateY(0);
      transition: transform .15s ease-out;
    }
    body.menu-open #mob-nav-row-2 {
      transform: translateY(100%);
    }
    #mob-nav-row-2 > .container {
      display: flex;
      flex-direction: column;
    }
    #mob-nav-row-2 a {
      padding: 1em 0;
      border-bottom: 1px solid var(--ec-lightgray);
    }
    #mob-nav-row-2 a:last-child {
      border-bottom: none;
    }

  @media (max-width: 859px) {
    body header:after{
      content: '';
      position: fixed;
      display: block;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: var(--ec-black);
      z-index: 0;

      pointer-events: none;
      opacity: 0;
      transition: opacity .15s ease-out;
    }
    body.menu-open header:after{
      pointer-events: all;
      opacity: .5;
    }
  }

  #desk-nav {
    font-size: .9em;
    font-weight: 500;
    padding: 1em 0;
  }
    #desk-nav .container {
      height: 100%;

      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 1em;
    }
    #desk-nav .logo {
      margin-right: auto;
      overflow: hidden;
      opacity: .7;
    }
    #desk-nav .logo:hover{
      opacity: 5.5;
      /* outline: 1px solid; */
      /* outline-color: white; */
    }
    #desk-nav .logo img {
      max-width: 100%;
      object-fit: contain;
    }
    
    #desk-nav a {
      letter-spacing: 0.2px;
      color: var(--ec-gray);
    }
    #desk-nav a.current {
      color: white;
    }
    #desk-nav a:hover{
      color: white;
    }

/* STICKY HEADER */

#sticky-header {
  --sh-gap: 20px;

  position: sticky;
  top: calc(var(--header-height) - .1px);
  left: 0;
  width: 100%;
  height: var(--header-height);
  padding: 0 0 .75em 0;
  background-color: var(--ec-gray);

  display: flex;
  
  z-index: 99;
}

  #sticky-header .container {
    align-self: flex-end;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sh-gap);
  }
  .home-sticky .container{
    justify-content: flex-end !important;
  }
  #sticky-header .breadcrumb {
    font-size: 1.5em;
    font-weight: 600;
    text-transform: uppercase;
  }

    #sticky-header .breadcrumb a,
    #sticky-header .breadcrumb a:hover {
      color: inherit;
      text-decoration-color: transparent;
    }

  #sticky-header .autocomplete-component {
    position: relative;
    width: 100%;
    max-width: 360px;
  }

    #sticky-header .autocomplete-component.loading:before {
      content: '';
      display: block;
      position: absolute;
      top: 50%; right: 0;
      transform: translateY(-50%);
      width:  1.5em;
      height: 1.5em;
      background-color: transparent;
      background-image: url('../img/spin-light.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }

    #sticky-header .autocomplete-component.loading input {
      padding-right: 1.5em;
    }

    #sticky-header .autocomplete-component > * {
      width: 100%;
    }

    #sticky-header .autocomplete-component input {
      padding: .3em 0 .3em 0;
      border-width: 1px 1px 1px 1px;
      border-radius: 5px;
      border-style: solid;
      border-color: var(--ec-black);
      outline: none;
      color: var(--ec-black);
      padding-left: 2.25rem;
    

      background-color: transparent;
      background-size: 1rem;
      background-position: .75rem center;
      background-repeat: no-repeat;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='hsl(180, 7%, 21%)' viewBox='0 0 23.66 23.66'%3E%3Cpath d='M15.35,0A8.31,8.31,0,0,0,8.87,13.52L0,22.39l1.28,1.28,8.86-8.86A8.32,8.32,0,1,0,15.35,0Zm0,14.88A6.56,6.56,0,1,1,21.9,8.32,6.56,6.56,0,0,1,15.35,14.88Z'/%3E%3C/svg%3E");
      
    }

      #sticky-header .autocomplete-component input::placeholder {
        color: var(--ec-black);
        font-weight: 500;
      }
    
    #sticky-header .autocomplete-component .autocomplete-component-results {
      position: absolute;
      top: 100%; left: 0;
      height: auto;
      background-color: var(--ec-black);
      color: var(--ec-white);

      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      overflow: hidden;

      display: none;
    }
    
      #sticky-header .autocomplete-component.open .autocomplete-component-results {
        display: block;
      }

      #sticky-header .autocomplete-component .autocomplete-component-results > * {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: baseline;
        gap: .5em;

        line-height: 120%;
        
        padding: 1em;
        cursor: pointer;
      }

        #sticky-header .autocomplete-component .autocomplete-component-results > * > .item-section {
          order: -1;
          font-size: .75em;
          letter-spacing: .2px;
          text-transform: uppercase;
        }

      #sticky-header .autocomplete-component .autocomplete-component-results > *:not(:last-child) {
        border-bottom: 1px solid var(--ec-white);
      }
      #sticky-header .autocomplete-component .autocomplete-component-results > *:hover,
      #sticky-header .autocomplete-component .autocomplete-component-results > *.selected {
        background-color: rgba(255, 255, 255, .5);
      }

  @media (max-width: 575px) {
    #sticky-header[data-layout="home"] {
      padding: 1em 0;
    }
    
    #sticky-header {
      height: auto;
      padding: .75em 0;
    }

    #sticky-header .container {
      flex-direction: column;
      align-items: flex-start;
    }

    #sticky-header .autocomplete-component {
      max-width: 100%;
    }

    #sticky-header .autocomplete-component input {
      padding: .5em;
      padding-left: 2.25rem;
      border-width: 1px 1px 1px 1px;
      border-radius: 5px;
    }

    #sticky-header .autocomplete-component.open input {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

/* CARDS */

.item-card {
  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: var(--card-border-radius);
  overflow: hidden;

  text-decoration: none;
}

.item-card:hover {
  /* box-shadow: 0 0 0 2px var(--ec-black); */
  color: var(--ec-black);
}
.item-card .card-info .card-name,
.item-card .card-info .card-date{
  color: #666;
  /* font-weight: 300; */
}
.item-card .card-info .card-name{
  font-size: .9em;
}
.item-card .card-info .card-date{
  font-size: .8em;
  font-weight: 400;
}


.item-card:hover .card-info .card-name,
.item-card:hover .card-info .card-date{
  color: #000;
}



.item-card:hover .card-img {
  outline: 1px solid;
  outline-color: var(--ec-black);
}
.card-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  aspect-ratio: 1;

  background-color: var(--ppge-gray);
}
/* .item-card .card-img:hover{

} */
.card-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;
  background-color: white;
}

.card-img[data-hover]:after {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  
 
/* 
  content: attr(data-hover);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 0 1.5em;

  font-size: .8em;
  line-height: 150%;
  white-space: pre-line;

  background-color: rgba(255, 255, 255, .95);
  opacity: 0;
  transition: opacity .15s ease-out; */
}

.item-card:hover .card-img[data-hover]:after {
  /* opacity: 1; */
}

@supports not (aspect-ratio: 1) {
  .card-img:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

.no-img .card-img {
  display: none;
}
.swiper-slide .card-img img{
  object-fit: cover;
}

.card-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  padding: 12px 0;

  background-color: var(--ppge-lightgray);
  color: var(--ppge-black);

  font-size: 1em;
  line-height: 130%;
}
  .no-info .card-info {
    display: none;
  }

  .card-info .card-type {
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .card-info .card-title {
    font-size: 1em;
    font-weight: 700;
  }

    .card-info .card-title .subtitle{
      display: block;
      font-weight: 400;
    }

  .card-info .card-date {
    font-size: 0.75em;
    font-weight: 300;
    line-height: 130%;
    text-transform: uppercase;
    padding-bottom: .25rem;
  }

  .card-info .card-author {
    font-size: 0.8em;
    font-weight: 300;
    padding-top: .5em;
    margin-top: auto;
  }

  .card-info .card-desc {
    font-size: 0.8em;
    font-weight: 300;
    padding-top: .5em;
  }
    .card-info .card-desc p{
      margin-top: 0;
    }

  /* MODIFIER */

  .limit-title .card-title{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .limit-desc .card-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 5;
    overflow: hidden;
  }

  /* HOVER */

  .item-card .card-info{
    transition:
      background-color .15s ease-out,
      color .15s ease-out;
  }
  .item-card:hover .card-info{
    background-color: var(--ppge-lightteal);
    color: var(--ppge-indigo);
  }

.square-card {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--ec-black);
  aspect-ratio: 1;

  background-color: transparent;
  color: var(--ec-black);
  transition: all .15s ease-out;
}
  .square-card .card-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .75em;
    padding: .75em;
  }
  .square-card .card-content img{
    object-fit:cover;
    width: 100%;
    height: 100%;
  }
  .square-card .card-content .card-author{
    font-size: .8em;
    text-transform: uppercase;
  }
  .square-card .card-type {
    font-size: .8em;
    text-transform: uppercase;
  }

  .square-card:hover {
    background-color: var(--ec-black);
    color: var(--ec-lightgray);
  }

@supports not (aspect-ratio: 1) {
  .square-card:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
  }
}
#home .square-card{
  /* max-width: 350px; */
  /* height: 300px; */
  height: 100%;
}
#home .square-card,
#series .square-card{
  color: white;
}
#home .square-card:hover,
#series .square-card:hover{
  background-color:transparent;
}

#home .square-card .card-content,
#series .square-card .card-content{
  position: relative;
  padding:0;
}
#home .square-card .card-content .image-description,
#series .square-card .card-content .image-description{
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 35px;
  background: linear-gradient(174deg,rgb(0 0 0 / 0%) 0%, #111111b8 80%);
 /* background: linear-gradient(to bottom, transparent 0%, black 100%); */
  color: white;
  transition: all 1s ease-in;
}

#home .square-card:hover .card-content .image-description,
#series .square-card:hover .card-content .image-description{
  /* background-color: #fffbfb00; */
  /* background: linear-gradient(174deg,rgb(0 0 0 / 0%) 0%, #ffffff00 80%); */
  background: linear-gradient(to bottom, transparent 100%, black 100%);
  transition:all 2s ease-out;
}


#home .square-card .card-content img,
#series .square-card .card-content img{

    object-fit:cover;
    width: 100%;
    height: 100%;
}

#home .square-card .card-content .card-text,
#series .square-card .card-content .card-text{
  z-index: 10;
  padding: .3em .75em .25em .75em;
  border: 1px solid white;
  visibility: visible;
  opacity: 1;
  transition: opacity .20s ease-in;
  font-size: 18px;
  position: absolute;
}
#home .square-card:hover .card-text,
#series .square-card:hover .card-text{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .20s, opacity .20s ease-out;
}


#home .square-card,
#default-item .square-card,
#event-item .square-card,
#article-item .square-card,
#series .square-card{
  aspect-ratio: 2/1;
}
@supports not (aspect-ratio: 2/1) {
 #home .square-card:before,
 #default-item .square-card:before,
 #event-item .square-card::before,
 #article-item .square-card::before,
 #series-list .square-card::before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 50%;
  }
}



/*** FILTROS ***/

#active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1em;
}
.ajax #active-filters{
  display: none;
}
#active-filters .active-filter{
  display: inline-flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: .5em;
  max-width: 100%;

  font-size: 0.8em;
  font-weight: 600;
  
  transition: all .15s ease-out;
}

#active-filters .active-filter:hover{
  color: red;
}

#active-filters .active-filter .item-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#active-filters .active-filter .item-section{
  font-size: 0.6em;
  letter-spacing: 0.3px;
  font-weight: 700;
  text-transform: uppercase;
}

#active-filters .active-filter .delete-bttn{
  display: inline-flex;
  align-items: center;
  width: 10px;
  height: 12px;
  transform: translateY(20%);

  cursor: pointer;
}

#active-filters .active-filter .delete-bttn svg {
  width: 100%;
}


/*** LIST ORDER ***/

#list-order a {
  text-transform: uppercase;
  text-decoration: none;
}
#list-order a:after {
  font-size: 1.2em;
  line-height: 0;
  margin-left: .2em;
}
#list-order a.asc:after { content: '\2193'; }
#list-order a.desc:after { content: '\2191'; }
/* #list-order a.asc:after { content: '\2191'; }
#list-order a.desc:after { content: '\2193'; } */


#list-order #orderCrono a.asc:after { content: '\2191' !important;  }
#list-order #orderCrono a.desc:after { content: '\2193' !important; }
 

/*** PAGINATION ***/

.numbered-pagination {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 1em;
}

.numbered-pagination .pagination-item-current,
.numbered-pagination a {
  display: block;
  padding: .5em .75em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--ec-black);
  text-decoration: none;
}
.numbered-pagination .pagination-item-current {
  background-color: var(--ec-black);
  color: var(--ec-white);
}
.numbered-pagination a:hover {
  border-color: var(--ec-gray);
  background-color: var(--ec-gray);
  color: var(--ec-white);
}

/*** DEFAULT ITEM GALLERIES ***/

  .swiper-container-initialized img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background-color: transparent;
  }

  .swiper-controls{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: .5em;
  }

  .swiper-controls > *{
    position: relative;
  }
  .swiper-controls > *[class*='swiper-button']{
    left: unset; right: unset;
    width: auto;
    height: auto;
    padding: .5em;
    border-radius: var(--card-border-radius);
    margin-top: unset;

    font-weight: bold;
    color: var(--ec-black);
    transition: all .15s ease-out;
  }
  .swiper-controls > *[class*='swiper-button']:hover{
    background-color: var(--ec-black);
    color: var(--ec-white);
  }
  .swiper-controls > *[class*='swiper-button']:after{
    font-size: 1em;
    transition: all .15s ease-out;
  }
  .swiper-controls > *[class*='prev']:active:after{ transform: translateX(-.1em); }
  .swiper-controls > *[class*='next']:active:after{ transform: translateX(+.1em); }

  .swiper-controls > *[class*='swiper-pagination']{
    flex-grow: 1;
    line-height: 0;
  }
  .swiper-controls > *[class*='swiper-pagination'] > *{ margin: 2px; }
  .swiper-controls > *[class*='swiper-pagination'] > *[class*='active']{ background: var(--ec-gray); }


  .gallery-swiper{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;

    opacity: 0;
    transition: opacity .25s ease-out;
  }
  .homeSwiper{
      width: 100%;
      height: 300px;
      overflow: hidden;
      /* margin: 20px auto; */
  }
  .gallery-swiper.swiper-container-initialized,
  .homeSwiper.swiper-container-initialized {
   
    opacity: 1;
  }
  .gallery-swiper .swiper-wrapper{
    pointer-events: none;
  }

  .event-swiper .swiper-slide,
  .gallery-swiper .swiper-slide{
    box-sizing: border-box;
    max-width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--ec-white);
  }
  .homeSwiper .swiper-slide{
    /* width: fit-content !important; */
    box-sizing: border-box;
    position: relative;
    width: 100%;
  }


/* HOME */

#home-hero {
  position: relative;
  display: grid;
  place-items: center;

  height: 600px;
  max-height: 70vh;
}

  #home-hero > .background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }

  #home-hero > .logo {
    position: relative;
    transform: scale(0.7);
    z-index: 1;
  }

#home .row,
#series .row {
  row-gap: 20px;
}

#home .home-gallery{
  display: none;
}

@media (min-width:750px){
 #home .home-gallery{
    display: flex;
  } 
}
#home .home-display-grid{
  display: none;
}
@media (max-width:749px){
  #home .home-display-grid{
    display: flex;
  }
  
}




/* ARTICLE */

article > *:first-child { margin-top: 0 !important; }
article > *:last-child { margin-bottom: 0 !important; }

article h1 { font-size: 2.0em; font-weight: 700; }
article h2 { font-size: 1.9em; font-weight: 400; }
article h3 { font-size: 1.4em; font-weight: 700; }
article h4 { font-size: 1.3em; font-weight: 400; }
article h5 { font-size: 1.0em; font-weight: 700; }
article h6 { font-size: 0.9em; font-weight: 400; }
article p  { font-size: 1.0em; font-weight: 400; }

article h1,
article h2,
article h3,
article h4,
article h5,
article h6{
  margin: .1em 0;
}

article p,
article ul,
article ol,
article blockquote{
  line-height: 170%;

}
article p{
  margin: 1em 0;
}

article p + h1,
article p + h2,
article p + h3,
article p + h4,
article p + h5,
article p + h6{
  margin-top: 1.5em;
}

article ul,
article ol{
  margin: 1.5em 0;
  padding-left: 2em;
}

article ul li,
article ol li{
  padding-left: .5em;
}

article ol li::marker{
  margin-right: 1em;
}

article blockquote{
  font-size: .8em;
}

article img{
  min-width: 50%;
  width: auto;
  max-width: 100%;
}

article .gallery-item{
  margin: 2em auto;
}
article :not(.swiper-slide):not(figure) > img{
  margin: 2em auto;
}

article p.figurecaption{
  font-size: .8em;
  font-style: italic;
  text-align: center;
  margin: -2em 0 2em 0;
}

article figure{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 100%;
  border-radius: 4px;
  margin: 0;

  background-color: var(--ec-white);
}
article :not(.swiper-slide) > figure {
  padding: 10px;
  margin: 1em 0;
}
article figure img{
  margin: 0 auto;
}
article figure figcaption{
  text-align: center;
}

article .video-wrap{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin: 1.5rem auto;
}
article .video-wrap iframe{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width:  100%;
  height: 100%;
}

article table{
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--ppge-lightteal);
  border-collapse: collapse;
  margin: 1em 0;
}
article thead{
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: var(--ppge-lightteal);
}
article th,
article td{
  padding: 8px;
  border-width: 0 1px 0 1px;
  border-style: solid;
  text-align: left;
}
article th:first-child,
article td:first-child{
  border-right-width: 1px;
}
article th:last-child,
article td:last-child{
  border-left-width: 1px;
}
article tr:nth-child(odd) {
  background-color: var(--ppge-white);
}
article th,
article tr:nth-child(odd) td{
  border-color: var(--ppge-lightteal);
}
article tr:nth-child(even) {
  background-color: var(--ppge-lightteal);
}
article tr:nth-child(even) td{
  border-color: var(--ppge-white);
}

article .ql-align-right  { text-align: right;   }
article .ql-align-center { text-align: center;  }
article .ql-align-justify{ text-align: justify; }

article .ql-indent-1{ padding-left: 2em; }
article .ql-indent-2{ padding-left: 4em; }
article .ql-indent-3{ padding-left: 6em; }
article .ql-indent-4{ padding-left: 8em; }
article .ql-indent-5{ padding-left: 10em; }
article .ql-indent-6{ padding-left: 12em; }
article .ql-indent-7{ padding-left: 14em; }
article .ql-indent-8{ padding-left: 16em; }

/* LIST PAGE */

#list-page-header{
  margin: 0 0 1em 0;
  color: var(--ppge-indigo);
}

/* ITEM PAGE */

#vw-image {
  width: 100%;
  height: 65vh;
  max-height: 65vh;
  position: relative;
  /* max-height: 300px; */
}

#vw-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#vw-image .image-description{
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 35px;
  background-color: #00000000;
  background-image: linear-gradient(174deg,rgb(0 0 0 / 0%) 0%, #111111b8 80%);
  color: white;
}
#vw-image .image-description h1{
  color: white;
}

#vw-image .image-description .property-value{
  max-width: 35em;
  width: 100%;
  line-height: 1.4em;
}

#item-row {
  display: grid;
  grid-template-columns: 100%;
  gap: 2em;
}
  
  #item-row > * {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
  }

  #item-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2em;
    overflow: visible !important;
  }

    #item-info > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    #item-info > .shiro-share {
      align-self: flex-start;
    }

    #item-properties {
      display: flex;
      flex-direction: column;
    }

    #item-properties .property-row {
      display: flex;
      flex-direction: column;
      gap: 10px;

      line-height: 180%;
    }

    #item-properties .property-row:not(:first-child) {
      padding-top: 1.25em;
    }

    #item-properties .property-row:not(:last-child) {
      padding-bottom: 1.25em;
      border-bottom: 1px solid var(--ec-gray);
    }

    #item-properties .property-row .property-label {
      font-size: .75rem;
      font-weight: 500;
      text-transform: uppercase;
    }

    #item-properties .property-row .property-values {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #item-properties [data-property=series] {
      grid-template-columns: 100% !important;
    }

    #item-properties [data-property=series] .property-label {
      display: none;
    }
    
    #item-properties [data-property=series] .property-value {
      display: inline-block;
    }

    #item-properties [data-property=series] a {
      display: inline-flex;
      padding: .3em .75em .25em .75em;
      border: 1px solid var(--ec-black);
      
      line-height: 180%;
      text-decoration: none;
    
      background-color: transparent;
      color: var(--ec-black);
      transition: all .15s ease-out;
    }
    #item-properties [data-property=series] a:hover {
      background-color: var(--ec-black);
      color: var(--ec-lightgray);
    }

  #item-content {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  #default-item #item-content {
    grid-row: 1;
  }

    .item-relations {
      display: flex;
      flex-direction: column;
      gap: 1.5em;
    }

    .item-relations > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    .item-relations h2{
      margin-top: 2em;
    }

    .item-relations h2 span{
      font-weight: 300;
    }

    .item-relations .row{
      row-gap: 20px;
    }

@media (min-width: 576px) and (max-width: 991px) {
  #item-properties .property-row {
    display: grid;
    grid-template-columns: 25% 1fr;
  }

}

@media (max-width: 991px) {
  .shiro-share .share-bttn.clipboard:after {
    left: 0;
    right: unset;
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  main #item-row {
    grid-template-columns: 25% 66.6%;
    justify-content: space-between;
  }
  
  #item-info {
    overflow: visible;
  }

  #item-info > .shiro-share {
    --ss-bg: var(--ec-black);
    order: 999;
  }
  
  #default-item #item-content {
    grid-row: unset;
  }
}

/* CREATIVEWORK LIST */

#creativework-list > .container {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.creativework-row {
  --card-padding: 10px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--card-padding);
  
  margin: 0 calc(-1 * var(--card-padding));
}

.creativework-row .item-card {
  gap: var(--card-padding);
  padding: var(--card-padding);
}

/* EVENT LIST */

#event-list > .container {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

#event-list .row {
  /* display: flex; */
  /* flex-direction: column; */
  row-gap: 80px;
  /* width: 100%; */
}

.event-card {
 
  aspect-ratio: 13/5;
  display: flex;
  gap: .5em;
  padding-top: 1em;

  border-width: 2px 0 0 0;
  border-style: solid;
  border-color: var(--ec-black);

  text-decoration: none;
}

.event-card .card-img {
  /* aspect-ratio: 16 / 9; */
  height:100%;
  width: 100%;
  flex-grow: 8;
  flex: 8;
}
.event-card .card-img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.event-card .card-info {
  gap: 1em;
  flex-grow: 5;
  flex: 5;
  padding-left: 0;
  padding-right: 0;
  color: #666;
  
}
.event-card:hover .card-info{
  color:#000;
}
.event-card .card-name {
  font-size: 1.2em;
  line-height: 120%;
  font-weight: 500;
}

.event-card .card-location ,
.event-card .card-date {
  font-size: 0.8em;
  font-weight: 400;
}

.event-card .card-date,
.event-card .card-date > *:not(:last-child) {
  display: flex;
  gap: .5em;
}

.event-card .card-date > *:not(:last-child):after {
  content: '\2192';
  display: inline-block;
}
/* 
@supports not (aspect-ratio: 1) {
  .event-card .card-img:before {
    padding-bottom: 56.75%;
  }
} */

@media (min-width: 860px) {
  .event-card {
    /* grid-template-columns: 70% auto; */
    padding-top: 0;
    border-width: 0;
  }
  .event-card .card-info {
    border-width: 2px 0 0 0;
    border-style: solid;
    border-color: var(--ec-black);
  }
}

@media (max-width: 630px) {
  #event-list .row{
    row-gap: 20px;
  }
  .event-card{
    flex-direction: column;
    aspect-ratio:1;
  }
  .event-card .card-img{
    min-height: 10em;
    height: 100%;
  }
  .event-card .card-info{
    flex: 1;
  }
}

/* ARTICLE LIST */

#article-list > .container {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.article-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 1em;

  padding: 1em .5em;
  border-width: 1px 0 0 0;  
  border-style: solid;  
  border-color: var(--ec-black);  
}

.article-card a {
  text-decoration: none;
}
.article-card .card-info {
  padding: 0;
}

.article-card .card-name {
  font-size: 1.2em;
  line-height: 120%;
  font-weight: 700;
  color: #666;
}
.article-card .card-name span{
  font-weight: 400;
}
.article-card:hover  .card-name{
  color: black;
}
.article-card .card-author,
.article-card .card-date {
  font-weight: 600;
  text-transform: uppercase;
}

.article-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* SERIES LIST PAGE */
#series .series-list-text{
  max-width:50em;
  width: 100%;
  margin-bottom: 80px;

}
#series .series-list-text p{
  /* letter-spacing: 1px; */
  font-size: 1.0em;
  font-weight: 400;
  line-height: 170%;
}

/* SERIES ITEM PAGE */

#series-item {
  padding-top: 0;
}

#series-item #item-row {
  grid-template-columns: 100% !important;
  gap: 2em !important;
  margin-top: 2em;
}

  #series-item #item-row > * {
    grid-row: unset;
    grid-column: unset;
  }

  #series-item #item-info {
    gap: 2em;
  }

  #series-item #item-properties .property-row {
    display: flex !important;
    grid-template-columns: unset !important;
    max-width: 60em;
  }

  #series-item .item-relations {
    overflow: visible
  }
  
  #series-item .item-relations .item-card {
    /* box-shadow: 0 0 0 1px var(--ec-gray); */
  }

  #series-item .item-relations .item-card:hover {
    /* box-shadow: 0 0 0 2px var(--ec-black); */
  }

/* ARTICLE ITEM AND EVENT ITEM */

  #article-item #item-info h1,
  #event-item #item-info h1 {
    font-size: 1.4em;
  }
  #article-item #item-info h1 > [data-property=alternateName],
  #event-item #item-info h1 > [data-property=alternateName] {
    font-weight: 400;
  }

  #article-item #item-info [data-property=author],
  #article-item #item-info [data-property=dateBegin] {
    font-weight: 700;
    text-transform: uppercase;
  }
  #event-item #item-info [data-property=author],
  #event-item #item-info [data-property=dateBegin] {
    font-weight: 700;
    text-transform: uppercase;
  }

  #article-item #item-info [data-property=dateBegin],
  #event-item #item-info [data-property=dateBegin]  {
    margin-top: -1em;
  }
  
  #article-item #item-info [data-property=about],
  #event-item #item-info [data-property=about] {
    display: flex;
    flex-wrap: wrap;
    justify-items: flex-start;
    align-items: flex-start;
    gap: 10px;
  }

/* EVENT ITEM */

  /* #event-item {
    padding-top: 0;
  }

  #event-item > *:first-child:not(#event-hero),
  #event-item #event-hero + * {
    margin-top: 3.5em;
  }

  #event-item #event-hero {
    width: 100%;
    height: 360px;
    max-height: 75vh;
  }
  #event-item #event-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #event-item .shiro-share {
    margin-bottom: 2em;
  }

  #event-item .item-location-date {
    font-size: .8em;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-transform: uppercase;
  }

  #event-item .item-location-date,
  #event-item .item-date,
  #event-item .item-date > *:not(:last-child) {
    display: flex;
    gap: 10px;
  }
  #event-item .item-date:not(:first-child):before{
    content: '(';
    margin-right: -.5em;
  }
  #event-item .item-date:not(:first-child):after{
    content: ')';
    margin-left: -.5em;
  }
  #event-item .item-date > *:not(:last-child):after {
    content: '\2192';
    display: inline-block;
  }

  #event-item #item-row {
    grid-template-columns: 100%;
  }
  #event-item #item-row > #item-content {
    overflow: visible;
  }
  #event-item article > * {
    max-width: 55em;
    margin-left: 0;
  } */
  
  /* #event-item article figure,
  #event-item article .swiper-slide {
    background-color: transparent;
    padding: 0;
  } */

  /* #event-item article .swiper-slide {
    width: auto;
    max-width: 100%;
  } */

/* FOOTER */

footer {
  font-size: .9em;
  font-weight: 500;
  padding: 2em 0 4em 0;

  background-color: var(--ec-black);
  color: var(--ec-white);
}

  footer .container {
    height: 100%;

    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 1em;
  }

  footer .logo {
    margin-right: auto;
    opacity: .7;
  }
  footer .logo:hover{
    opacity: 1;
  }
  footer .logo img {
    max-width: 100%;
    height: calc(var(--header-height) - 2.3em);
    object-fit: contain;
  }

  footer a{
    letter-spacing: .2px;
  }

  footer a,
  footer a:hover {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
  }


  footer a {
    letter-spacing: 0.2px;
    color: var(--ec-gray);
  }
  footer a.current {
    color: white;
  }
  footer a:hover{
    color: white;
  }



  #credits{
    margin-top: 5em;
    font-size: .78em;
    color: var(--ec-gray)
  }

@media (max-width: 859px) {
  footer .container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

/* ERROR */

#error-404 h1{
  font-size: 10rem;
  color: var(--ppge-indigo);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--ppge-indigo);
}
#error-404 h1,
#error-404 h2{
  margin: 0;
}

/* FANCYBOX */

[data-fancybox] {
  cursor: pointer;
}

.fancybox-slide{
  max-height: 100vh;
  overflow: hidden;
}
.fancybox-slide--current{
  display: flex;
  justify-content: center;
  align-items: center;
}

.fancybox-slide main{
  flex-grow: unset;
  width: 95%;
  max-width: 1100px;
  max-height: 90%;
  scroll-behavior: smooth;
}
.fancybox-slide main #item-content {
  justify-content: center;
}
.fancybox-slide main .gallery-swiper .swiper-slide {
  padding: 0;
}
.fancybox-slide main .gallery-swiper img{
  max-height: 50vh;
}

.fancybox-slide main .see-all-bttn{
  display: inline-flex;
  width: 100%;
  padding: .3em .75em .25em .75em;
  border: 1px solid var(--ec-black);
  margin-top: auto !important;
  line-height: 180%;
  text-decoration: none;
  background-color: transparent;
  color: var(--ec-black);
  transition: all .15s ease-out;
}
.fancybox-slide main .see-all-bttn:hover {
  background-color: var(--ec-black);
  color: var(--ec-lightgray);
}

@media (max-width: 859px) {
  .fancybox-show-nav .fancybox-navigation .fancybox-button{
    width:  40px;
    height: 40px;
    padding: 0;
  }
}
@media (min-width: 860px) {
  .fancybox-slide main{
    width: calc(100% - 140px);
  }
}