h1 { font-family: var(--font-family-h1); font-size: var(--font-size-h1); color: var(--color-h1); font-weight: var(--font-weight-h1); text-align: var(--text-align-h1); }
h2 { font-family: var(--font-family-h2); font-size: var(--font-size-h2); color: var(--color-h2); font-weight: var(--font-weight-h2); text-align: var(--text-align-h2); }
h3 { font-family: var(--font-family-h3); font-size: var(--font-size-h3); xcolor: var(--color-h3); font-weight: var(--font-weight-h3); text-align: var(--text-align-h3); }
h4 { font-family: var(--font-family-h4); font-size: var(--font-size-h4); color: var(--color-h4); font-weight: var(--font-weight-h4); text-align: var(--text-align-h4); margin-top: 0;  margin-bottom: 0; }

h1, h2, h3, h4 { line-height: 1em;  margin-top: 1.5em;  margin-bottom: 1em; }
/* h2:first-of-type, h3:first-of-type { margin-top: 0.5em; } */
p + h2, p + h3 { margin-top: 1.5em; }
h1 + h2, h2 + h3 { margin-top: 0.5em; }
.kartica h2, .kartica h3 { margin-top: 0; }

table { border-collapse:collapse; }
table thead { color: #ffffff; font-size: 0.9em; font-weight: bold; background-color: var(--background-color-table-header); }
td, th { border-bottom: 1px solid #ddd; padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.2em; padding-bottom: 0.2em; }
tr:nth-child(even){background-color: #e7f4f7;}
tr:hover { background-color: #f2e5e5;}
thead tr:hover { background-color: var(--background-color-table-header);}
th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #04AA6D; color: white; }


/* tr:last-of-type .td:last-of-type { text-align: left; } */
/* td:first-of-type { text-align: center; } */
/* td:last-of-type { text-align: right; } */

.vstopna h2 { display: inline-block; position: relative; xfont-size: 2em; color: var(--color-tekst); text-align: center; margin-top: 2em;  margin-bottom: 1.5em; padding-bottom: 0.5em }
.vstopna h2:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.1em;
    background-image: -webkit-linear-gradient(-180deg, var(--barva-logo) 0%, #ffffff 100%);
    background-image: -moz-linear-gradient(-180deg, var(--barva-logo) 0%, #ffffff 100%);
    background-image: -ms-linear-gradient(-180deg, var(--barva-logo) 0%, #ffffff 100%);
    background-image: -o-linear-gradient(-180deg, var(--barva-logo) 0%, #ffffff 100%);
    background-image: linear-gradient(270deg, #ffffff 0%, var(--barva-logo) 100%);
}

.manjsi_tekst { font-size: 0.8em; }

#vsebina { position: relative; min-height: 50vh; text-align: left; margin-bottom: 5rem;  padding-top: 95px; }
#vsebina ul { list-style-type: circle; padding-left: 1em; }
#vsebina ul ul { list-style-type: disc; padding-left: 2em; }
#vsebina li::marker { color: var(--color-list-bulet); }

#vsebina .opozorilo { color: var(--barva-logo-tekst); font-weight: bold; font-style: italic; }

/* ---- izpostavljene vsebine ----------------------------------------------------*/	

#izpostavljeno-wrap { position: relative; display: block; width: 100%; margin-bottom: 50px; }
#seznam_izpostavljeno, #seznam_slik, #newsletter { width: calc(100% + 1em); grid-template-columns: 33% 33% 33%; margin-left: -1em; }
.izpostavljeno_item { padding-left: 1em; padding-bottom: 1.5em; }
.izpostavljeno_item a{ display: block; }
.izpostavljeno { position: relative; width: 100%; height: 100%; }
.izpostavljeno_slika, .izpostavljeno_slika img {
    border-radius: 1rem;
    object-fit: cover;
    width: 100%;
    height: 100%;
	max-height: min(60vh,450px);
	overflow:hidden;
}

.izpostavljeno_vsebina {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
	color: #ffffff;
	xfont-size: var(--font-size-tekst);
    padding: 16px 84px 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), rgba(0, 0, 0, .1);
    backdrop-filter: blur(8px);
}

.izpostavljeno_vsebina .razdelek { font-size: 0.7em; text-align: left; text-transform:uppercase;  }
.izpostavljeno_vsebina .datum { font-size: 0.7em; text-align: left;  }
.izpostavljeno_vsebina h4 { font-size: 1.2em; font-weight: 400; color: #ffffff !important; text-align: left; margin-top: 0;  margin-bottom: 0; }

.izpostavljeno_vsebina.noimage {
	color: #666666;
    background: none;
    backdrop-filter: none;
}
.izpostavljeno_vsebina.noimage h4 { color: #666666 !important; }


.link_puscica, .link_slika {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    background-color: transparent
}

.link_puscica:before {
    mask-position: calc(100% - 22px) calc(100% - 16px);
    transition: all .15s;
    background-color: hsla(0,0%,100%,.5)
}

.link_puscica:after,.link_puscica:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    mask-size: 32px 32px;
    mask-repeat: no-repeat;
	-webkit-mask-size: 32px 32px;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 12.536c2.667 1.54 2.667 5.388 0 6.928l-12 6.928c-2.667 1.54-6-.385-6-3.464V9.072c0-3.08 3.333-5.004 6-3.464l12 6.928z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 12.536c2.667 1.54 2.667 5.388 0 6.928l-12 6.928c-2.667 1.54-6-.385-6-3.464V9.072c0-3.08 3.333-5.004 6-3.464l12 6.928z' fill='%23000'/%3E%3C/svg%3E")
}

.link_puscica:after {
    mask-position: calc(100% - 35px) calc(100% - 16px);
    background-color: #fff
}

.link_puscica:hover:before {
    mask-position: calc(100% - 16px) calc(100% - 16px);
    transition: all .2s
}

#seznam_dokumentov { margin-top: 2em; }
#seznam_slik { margin-top: 4em; }
#vsebina_slika { width: 45%; float: right; }
/* #vsebina_slika .izpostavljeno_slika, #vsebina_slika .izpostavljeno_slika img { object-fit: contain ; } */

.slika, .slika img {
    border-radius: 1rem;
    object-fit: cover;
    width: 100%;
    height: 100%;
}



/* --------------------------- prijava na e-novice -------------------------------- */

#newsletter-wrap { background-color: #e7f4f7; padding-top: 1rem; padding-bottom: 2rem; border-top: 2px solid var(--background-color-footer); }
#newsletter-wrap h3 { text-align: center; }
#newsletter-wrap .newsletter_agreement { justify-content: center; font-size: var(--font-size-opomba); margin-top: 1em; }
#newsletter-input-wrap { position: relative; width: 70%;  margin-left: auto; margin-right: auto; }
.mail-input-wrap { border-bottom: 1px solid var(--background-color-footer); }
.mail-input-wrap input, .mail-input-wrap input:hover, .mail-input-wrap input:focus, .mail-input-wrap input:active { width: calc(100% - 2rem); height: 2rem; line-height: 2rem; font-size: var(--font-size-tekst);  background: transparent; border: none !important; }
.mail-input-wrap button { width: 1.7rem; height: 1.5rem; background: none; margin-left: -0.7rem; border: none; cursor: pointer; }
.newsletter-ikona {
    display: block;
    background: url(../images/newsletter.svg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 1.7rem;
    width: 1.7rem;
}

#newsletter-wrap input[type="checkbox"] { font-size: 3.5rem; }

#newsletter { width: 70%; xgrid-template-columns: auto auto auto; grid-template-columns: repeat(auto-fit, minmax(380px, auto)); text-align: left; margin-left: auto; margin-right: auto; margin-top: 2em; }
#newsletter_edit_forma button { font-size: var(--font-size-tekst); color: white; background-color: var(--barva-zg-vrstice); border: 1px solid var(--background-color-footer); padding: 0.5rem; margin-top: 2em; cursor: pointer; }
#newsletter_edit_forma button:hover { color: black; }


/*---------------------------- custom checkbox --------------------------------*/

.custom-checkbox { }

.container {
  display: block;
  position: relative;
  xfont-size: 22px;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
	top: 0;
	left: 0;
  height: 21px;
  width: 21px;
  background-color: white;
  border: 1px solid var(--background-color-footer);
}

/* On mouse-over, add a grey background color */
/*.container:hover input ~ .checkmark {
  background-color: #ccc;
} */

.container:focus input ~ .checkmark {
  border: 2px solid var(--background-color-footer);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--background-color-zg-vrstica);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 3px;
  top: 3px;
  width: 13px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  
  -webkit-transform: rotate(-50deg) scaleX(-1);
  -ms-transform: rotate(-50deg) scaleX(-1);
  transform: rotate(-50deg) scaleX(-1); 
}


#odgovor { display: block; color: white; text-align: center;  background-color: var(--background-color-zg-vrstica);  }


/* -------------------- footer --------------------------------*/
/*
#footer .stolpec { position:relative; width:auto; }
#footer .stolpec.prvi { margin-left: 25px; margin-right:105px; }
#footer .stolpec ul { list-style-type: none; margin-left: 0px; }
#footer .stolpec a { text-decoration:none; }
#footer .stolpec a:hover { color: var(--color-link-hover-footer); text-decoration:underline; }
*/