/*___________ galleri __________*/
.bildegalleri_firePluss {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 1rem;
}
.bildegalleri_tre {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 1rem;
}
.bildegalleri_to {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
}
.bildegalleri_en {
   display: grid;
   grid-template-columns: 1fr;
}
.galleribilde {
   display: flex;
   flex-direction: column;
   place-content: center;
}
/*______ Bildegelleri ______*/
.bildegalleri_fire-pluss div:nth-child(n + 5) {
   display: none;
}
.miniatyrbilde {
   width: 100%;
   height: 100%;
   max-height: 20rem;
   object-fit: cover;
   overflow: hidden;
   object-position: 0 50;
   cursor: pointer;
   transform-origin: center;
   transition: outline 0.1s ease-in-out;
   border-radius: 0.4rem;
}
.bilderammeHeader,
.bildeRammeFooter {
   display: flex;
   width: 100%;
   height: 50px;
   justify-content: space-between;
   place-items: center;
}
.bildetittel {
   text-align: start;
}
.bildetekst {
   text-align: end;
}
.sideTeller {
   position: absolute;
   top: 0;
   right: 0;
   transform: translateX(-50%);
   margin-block-start: 1rem;
   margin-inline-end: 2rem;
}
.sideTeller .gjeldendeSiden,
.sideTeller .siderTotalt,
.sideTeller .sideSkille {
   display: inline-block;
}
.pil-neste {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 22.5px;
   height: 30px;
   transform: translate(-50%, -55%);
}
.pil-tilbake {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 22.5px;
   height: 35px;
   transform: translate(-55%, -50%);
}
.pilBakgrunnTilbake {
   position: absolute;
   top: 50%;
   left: 1rem;
   transform: translateY(-50%);
   background-color: var(--clr-tekstBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   border-radius: 0.25rem;
   height: 60px;
   width: 35px;
   cursor: pointer;
   z-index: 90;
   transition: opacity 0.2s ease-in-out;
   opacity: 0.4;
}
.pilBakgrunnNeste {
   position: absolute;
   top: 50%;
   right: 1rem;
   transform: translateY(-50%);
   background-color: var(--clr-tekstBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   border-radius: 0.25rem;
   height: 60px;
   width: 35px;
   cursor: pointer;
   z-index: 90;
   transition: opacity 0.2s ease-in-out;
   opacity: 0.4;
}
.pilBakgrunnTilbake:hover,
.pilBakgrunnTilbake:focus-visible,
.pilBakgrunnNeste:hover,
.pilBakgrunnNeste:focus-visible {
   transition: opacity 0.3s ease-in-out;
   opacity: 1;
}
.pilGalleriTilbake {
   position: absolute;
   top: 50%;
   left: 0;
   transform: translate(-30%, -50%) scale(1);
   background-color: var(--clr-tekstBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   border-radius: 0.25rem;
   height: 60px;
   width: 35px;
   cursor: pointer;
   z-index: 90;
   transition: all 0.2s ease-in-out;
}
.pilGalleriNeste {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translate(30%, -50%) scale(1);
   background-color: var(--clr-tekstBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   border-radius: 0.25rem;
   height: 60px;
   width: 35px;
   cursor: pointer;
   z-index: 90;
   transition: all 0.2s ease-in-out;
}
.pilGalleriTilbake:hover,
.pilGalleriTilbake:focus-visible {
   transition: all 0.2s ease-in-out;
   transform: translate(-30%, -50%) scale(1.1);
}

.pilGalleriNeste:hover,
.pilGalleriNeste:focus-visible {
   transition: all 0.2s ease-in-out;
   transform: translate(30%, -50%) scale(1.1);
}
.bildefremvisning {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 900;
   background-color: rgba(0, 0, 0, 0.8);
   flex-direction: column;
   justify-content: center;
   align-items: center;
   display: none;
}
.bildeRamme {
   position: relative;
   width: 100%;
   height: 100%;
}
.aktivtBildeRamme {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.aktivtBilde img {
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   border-radius: 0.25rem;
}
.bildetekstAktiv {
   position: absolute;
   bottom: 2px;
   right: 1px;
   padding-inline: 0.5rem;
   padding-block: 0.25rem;
   background-image: linear-gradient(to right, transparent -80%, var(--clr-bakgrunn));
   border-radius: 0.25rem;
}
.bildeTeller {
   position: absolute;
   top: 1px;
   left: 2px;
   padding-inline: 0.5rem;
   padding-block: 0.5rem;
   background-image: linear-gradient(to left, transparent -80%, var(--clr-bakgrunn));
   border-radius: 0.25rem;
}
.bilderTotalt::after,
.nyFane::before {
   content: "|";
   text-decoration: none;
   padding-inline: 0.5rem;
}
.bildeTeller .gjeldendeBilde,
.bildeTeller .bildeSkille,
.bildeTeller .bilderTotalt,
.bildeTeller .bildetittelAktiv,
.bildeTeller .nyFane {
   display: inline-block;
}
.kryssBoks {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background-color: var(--clr-tekstBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   border-radius: 0.25rem;
   width: 40px;
   height: 40px;
   place-items: center;
   transition: all 0.3s ease-in-out;
   transform: scale(1);
   cursor: pointer;
}
.maskeKryss {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   opacity: 0.5;
   width: 25px;
   height: 25px;
}
.kryssBoks:hover,
.kryssBoks:focus-visible {
   transition: all 0.3s ease-in-out;
   transform: scale(1.1);
}
.aktivtBilde img {
   width: auto;
   height: auto;
   overflow: hidden;
   margin-inline: auto;
}
.isolertBildergalleri {
   position: relative;
   padding-block-start: 1rem;
}