/*______ Grid Oppdragsbank ______*/
.ob_hovedsideGrid {
   display: grid;
   margin-block-start: 2.5rem;
   column-gap: 1rem;
   row-gap: 2rem;
   width: 90%;
   height: 90%;
   margin-inline: auto;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto 1fr 1fr auto;
   grid-template-areas:
      "tek tek tek tek tek"
      "gra tre fot fil ani"
      "lyd dri pro web kun"
      "inf inf inf inf inf";
}
/* .ob_hovedsideGrid > * {
   width: min-content;
} */

.toD_grafikkGrid {
   grid-area: gra;
}
.treD_grafikkGrid {
   grid-area: tre;
}
.fotografiGrid {
   grid-area: fot;
}
.filmGrid {
   grid-area: fil;
}
.animasjonGrid {
   grid-area: ani;
}
.lyddesignGrid {
   grid-area: lyd;
}
.driftGrid {
   grid-area: dri;
}
.programmeringGrid {
   grid-area: pro;
}
.webutviklingGrid {
   grid-area: web;
}
.ki-Grid {
   grid-area: kun;
}
.tekstGrid {
   grid-area: tek;
   position: relative;
   width: 10rem;
   margin-inline: 3rem;
   margin-block-start: -4rem;
   margin-block-end: 1rem;
   z-index: 150;
   @media only screen and (max-width: 600px) {
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline: auto;
      z-index: 130;
   }
}
.tekstGrid[open] {
   width: 80%;
   z-index: 130;
   margin-block-start: 0;
   margin-block-end: 0;
   margin-inline: auto;
}
.infoFlex {
   display: flex;
   padding-inline: 1rem;
   column-gap: 1rem;
   @media only screen and (max-width: 600px) {
      display: flex;
      flex-direction: column;
      padding-inline: 1rem;
      row-gap: 1rem;
   }
}
.infoIntro {
   grid-area: obb;
}
.infoKnapper {
   grid-area: inf;
}
/*______ Kategoriside infoBokser ______*/
.infoBoksGrid {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 1rem;
}
.infoBoks {
   display: flex;
   flex-direction: column;
   place-items: center;
   gap: 0.5rem;
}
.infoBoksIkon {
   display: flex;
   gap: 1rem;
   height: 50px;
   width: 90px;
}
/*______ KategoriIkoner ______*/
.kategoriIkon {
   position: relative;
   width: 11.5rem;
   height: 11.5rem;
   margin-inline: auto;
   padding: 2rem;
   z-index: 110;
}
.kategoriTittel {
   position: relative;
   margin-top: -0.5rem;
   width: 12rem;
   z-index: 100;
   text-align: center;
   align-content: center;
   padding-block: 0.5rem;
}
/*______ InfoKnapper ______*/
.infoKnapper {
   display: flex;
   flex-wrap: wrap;
   width: 90%;
   margin-inline: auto;
   justify-content: space-around;
}
.infoKnappIkon {
   position: relative;
   width: 70px;
   height: 70px;
   z-index: 110;
   padding: 0.25rem;
}
.infoKnappTittel {
   position: relative;
   min-width: 225px;
   padding: 0.5rem;
   margin-inline-start: -2rem;
   z-index: 100;
}
/*______ Kategoriside TittelHover ______*/
.hover2d,
.hover3d,
.hoverFoto,
.hoverFilm,
.hoverAnimasjon,
.hoverLyd,
.hoverDrift,
.hoverProgrammering,
.hoverWeb,
.hoverKi {
   display: grid;
   place-items: center;
   transition: transform 0.3s ease-in-out;
   text-decoration: none;
   transform: scale(1);
}
.hover2d:hover,
.hover2d:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-rubin);
   transform: scale(1.03);
}
.hover3d:hover,
.hover3d:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-spessartin);
   transform: scale(1.03);
}
.hoverFoto:hover,
.hoverFoto:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-citrin);
   transform: scale(1.03);
}
.hoverFilm:hover,
.hoverFilm:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-smaragd);
   transform: scale(1.03);
}
.hoverAnimasjon:hover,
.hoverAnimasjon:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-amazonitt);
   transform: scale(1.03);
}
.hoverLyd:hover,
.hoverLyd:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-akvamarin);
   transform: scale(1.03);
}
.hoverDrift:hover,
.hoverDrift:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-safir);
   transform: scale(1.03);
}
.hoverProgrammering:hover,
.hoverProgrammering:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-ametyst);
   transform: scale(1.03);
}
.hoverWeb:hover,
.hoverWeb:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-kunzitt);
   transform: scale(1.03);
}
.hoverKi:hover,
.hoverKi:focus-visible {
   transition: transform 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-thulitt);
   transform: scale(1.03);
}
.flexInfoKnapp {
   display: flex;
   text-align: center;
   align-items: center;
   margin: 1rem;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   transform: scale(1);
}
.flexInfoKnapp:hover:not(.utilgjengelig),
.flexInfoKnapp:focus-visible:not(.utilgjengelig) {
   transition: all 0.3s ease-in-out;
   text-decoration: 3px underline var(--clr-tekst);
   transform: scale(1.02);
}
/*___________________________________*/
/*______ Oppdragskategori Grid ______*/
/*___________________________________*/
/*______ KategorisideGrid ______*/
.ob_kategorisideGrid {
   display: grid;
   position: relative;
   grid-gap: 1rem;
   margin-block-start: 2.5rem;
   width: 80%;
   margin-inline: auto;
   grid-template-columns: 1fr;
   grid-template-areas: "kat";
   z-index: 1;
}
.kategoriTabell {
   grid-area: kat;
}
/*______ Oppdragskategori Ikoner ______*/
.spiciness {
   display: flex;
   place-items: center;
}
.tid {
   display: flex;
   place-items: center;
}

.oppdrag .boksRamme,
.oppdrag .spiciness {
   margin-inline-end: 1rem;
}

.spiciness > *,
.tid > * {
   margin-inline-end: 0.5rem;
}
/*______ Oppdragskategori tabeller ______*/
table thead tr th {
   padding-block: 0.5rem;
   padding-inline: 1rem;
   text-align: start;
}
.op_knapp {
   width: max-content;
   display: flex;
   transition: all 0.3s ease-in-out;
   transform: scale(1);
}
.op_knapp:nth-child(2) {
   margin-inline-start: -1rem;
}
.op_knapp:hover,
.op_knapp:focus-visible {
   transition: all 0.3s ease-in-out;
   transform: scale(1.02);
}
.oppdragsTittel {
   position: relative;
   padding-block: 0.5rem;
   padding-inline-start: 3rem;
   padding-inline-end: 2rem;
   margin-inline-start: -2.5rem;
   z-index: 90;
}
.oppdragsIkon {
   width: 60px;
   height: 60px;
   z-index: 100;
   padding: 0.4rem;
}
.oppdragsKnapp {
   display: grid;
   grid-template-columns: auto 1fr;
   /* margin: 0.2rem; */
   padding: 0.4rem;
   align-items: center;
   transition: all 0.1s ease-in-out;
   /* transform: scale(1); */
}
/*___________________________________*/
/*___________ kategoriSide __________*/
/*___________________________________*/
.filterMeny {
   position: relative;
   z-index: 2;
}
.filterMeny .kategoriFilter {
   margin-block: 0.5rem;
   margin-inline: 1rem;
}
.tilbakeKnapp {
   position: absolute;
   bottom: 0;
   left: 1rem;
   transform: translate(0%, 50%) scale(1);
   background-color: var(--clr-ixDBoks);
   border: 1px solid var(--clr-ramme);
   border-radius: 0.25rem;
   width: 60px;
   height: 40px;
   z-index: 900;
   place-items: center;
   transition: all 0.3s ease-in-out;
}
.tilbakePil {
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--clr-tekst);
   width: 24px;
   height: 24px;
}
.tilbakeKnapp:hover,
.tilbakeKnapp:focus-visible {
   transition: all 0.3s ease-in-out;
   transform: translate(0%, 50%) scale(1.1);
}
.kategoriSeksjon {
   display: flex;
   flex-direction: column;
   z-index: 2;
}
.kategoriSeksjon button,
.kategoriSeksjon a {
   margin-block: 0.1rem;
   margin-inline: 1rem;
   position: relative;
}
.kategoriSeksjon {
   padding-block-end: 0.5rem;
}
.kategoriHeader {
   background-color: var(--clr-tabellBoks);
   width: 100%;
   padding-inline: 1rem;
   padding-block-end: 0.5rem;
   padding-block-start: 0.25rem;
   margin-block-end: 0.5rem;
   border-top-right-radius: clamp(0.1rem, 0.2rem, 0.3vw);
   border-top-left-radius: clamp(0.4rem, 0.8rem, 0.8vw);
}
.kategoriHeader h3 {
   padding-block: 0.25rem;
}
.kategoriFilter {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: center;
}
.kategoriFilter button {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100px;
   display: grid;
   width: max-content;
   align-content: center;
   max-width: 200px;
   height: 3rem;
   font-family: "Roboto", sans-serif;
   color: var(--clr-tekst);
   line-height: 120%;
   font-size: 1rem;
   font-weight: 500;
}
.kategoriLenke {
   display: flex;
   justify-content: space-between;
   position: relative;
   z-index: 80;
   height: 2.5rem;
   z-index: 90;
   height: 2.5rem;
   place-items: center;
}
.midtStiltHeader {
   text-align: center;
}
.kategoriKnapp {
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   gap: 0.2rem;
   position: relative;
   z-index: 80;
   z-index: 90;
   align-content: center;
}
.kategoriKnappSolo {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.2rem;
   position: relative;
   z-index: 80;
   z-index: 90;
   align-content: center;
}
.kategoriKnapp > * {
   margin-block: auto;
}
.kategoriKnappInfo {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: space-between;
   height: 2.5rem;
   padding-inline: 0.6rem;
   border-radius: 0.2rem;
   background-color: var(--clr-ixDBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
}
.spiceOgTid {
   display: flex;
   position: relative;
   margin-block: 0.5rem;
}
.kategoriKnappIkon {
   border-radius: 50rem;
   background-color: var(--clr-ixDBoks);
   width: 2.5rem;
   height: 2.5rem;
   z-index: 100;
   border-radius: 50rem;
   background-color: var(--clr-ixDBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   padding: 0.3rem;
}
.op_spice {
   display: flex;
   align-items: center;
   height: 2.5rem;
   padding-inline: 0.6rem;
   border-radius: 0.2rem;
   background-color: var(--clr-ixDBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   min-width: 185px;
}
.op_tid {
   display: flex;
   padding-inline: 0.5rem;
   align-items: center;
   height: 2.5rem;
   padding-inline: 0.6rem;
   border-radius: 0.2rem;
   background-color: var(--clr-ixDBoks);
   border-color: var(--clr-ramme);
   border-width: 1px 1px 2px 2px;
   border-style: solid;
   min-width: 130px;
}
.kravIkon {
   position: absolute;
   right: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
   z-index: 400;
   width: 25px;
   height: 25px;
}

.op_spice-oppdrag {
   display: flex;
   align-items: center;
   min-width: 175px;
}
.op_tid-oppdrag {
   display: flex;
   min-width: 130px;
   padding-inline: 0.5rem;
   align-items: center;
}
.op_ikon {
   width: 100%;
   height: 100%;
}
.tittel-og-Krav {
   display: flex;
   place-items: center;
}
/* .kravIkon {
   width: 25px;
   height: 25px;
   margin-inline-end: 2rem;
} */
.kravIkonStor {
   width: 30px;
   height: 30px;
}
.spiceIkon {
   width: 90px;
   height: 30px;
}
.spiceIkonStatisk {
   width: 90px;
   height: 30px;
}
.tidIkon {
   width: 18px;
   height: 30px;
}
.hidden {
   display: none;
}
.flexInfoKnapp:hover:not(.utilgjengelig) .displayOutline,
.flexInfoKnapp:focus-visible:not(.utilgjengelig) .displayOutline {
   display: none;
}
.flexInfoKnapp:hover:not(.utilgjengelig) .displayFill,
.flexInfoKnapp:focus-visible:not(.utilgjengelig) .displayFill {
   display: block;
}
/*___________ Spiciness __________*/
.spice0::after {
   /* content: "Uten krydder";
   content: "Utemperert";
   content: "Ukrydret";;
   content: "Krydderfri";
   content: "Basisk"; */
   content: "Nøytral";
   padding-inline-start: 0.5rem;
}
.spice1::after {
   /* content: "Ekstra Mild";
   content: "Lett"; */
   content: "Krydret";
   padding-inline-start: 0.5rem;
}
.spice2::after {
   /* content: "Mild";
   content: "Pikant"; */
   content: "Smakfull";
   padding-inline-start: 0.5rem;
}
.spice3::after {
   /* content: "Medium";
   content: "Hot"; */
   content: "Sterk";
   padding-inline-start: 0.5rem;
}
.spice4::after {
   /* content: "Intens";
   content: "Blussende"; */
   content: "Brennhet";
   padding-inline-start: 0.5rem;
}
.spice5::after {
   /* content: "Ekstra Sterk";
   content: "Infernal"; */
   content: "Eksplosiv";
   padding-inline-start: 0.5rem;
}

/*___________ Tid __________*/
.tid1::after {
   content: "≤1 timer";
   padding-inline-start: 0.5rem;
}
.tid1-3::after {
   content: "1-3 timer";
   padding-inline-start: 0.5rem;
}
.tid3-6::after {
   content: "3-6 timer";
   padding-inline-start: 0.5rem;
}
.tid6-9::after {
   content: "6-9 timer";
   padding-inline-start: 0.5rem;
}
.tid9-12::after {
   content: "9-12 timer";
   padding-inline-start: 0.5rem;
}
.tid12-15::after {
   content: "12-15 timer";
   padding-inline-start: 0.5rem;
}
.tid15::after {
   content: "15 timer+";
   padding-inline-start: 0.5rem;
}
.spice0,
.spice1,
.spice2,
.spice3,
.spice4,
.spice5,
.tid1,
.tid1-3,
.tid3-6,
.tid6-9,
.tid9-12,
.tid12-15,
.tid15 {
   font-family: "Roboto", sans-serif;
   font-size: clamp(0.9rem, 1vw, 1rem);
   font-weight: 500;
}
.ikonDefinisjoner {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   gap: 0.5rem;
   margin-inline: 1rem;
}
.ikonDefinisjon {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.5rem;
   align-items: center;
}
.ikonDefinisjon h5 {
   line-height: 120%;
}
.intDef::after {
   content: "Interne oppdrag/øvelser";
}
.eksDef::after {
   content: "Eksterne oppdrag/øvelser";
}
.kursDef::after {
   content: "Sertifiseringskurs";
}
.ressDef::after {
   content: "Faglitteratur og referanser";
}
.kontoDef::after {
   content: "Krever brukerkonto";
}
.utstyrDef::after {
   content: "Krever utstyr eller studio";
}
.nedDef::after {
   content: "Krever utstyr eller studio";
}
.ccDef::after {
   content: "Creative Commons lisens";
}
.progDef::after {
   content: "Programvare og opplæring";
}
.fagDef::after {
   content: "Teori og faglitteratur";
}
.ixdDef::after {
   content: "Interaktive ressurer";
}
.refDef::after {
   content: "Referansenettsider";
}
.ressDef::after {
   content: "Ressursbibliotek";
}
.spillDef::after {
   content: "Undervisningsspill";
}
.playDef::after {
   content: "Undervisningsvideo";
}
.intDef,
.eksDef,
.kursDef,
.ressDef,
.kontoDef,
.utstyrDef,
.nedDef,
.ccDef,
.progDef,
.fagDef,
.ixdDef,
.refDef,
.ressDef,
.spillDef,
.playDef {
   font-family: "Roboto", sans-serif;
   font-size: clamp(0.9rem, 1vw, 1rem);
   font-weight: 500;
}
/*___________________________________*/
/*___________ OppdragsSide __________*/
/*___________________________________*/
.ob_oppdragssideGrid {
   display: grid;
   position: relative;
   margin-block-start: 2.5rem;
   row-gap: 1rem;
   column-gap: 2rem;
   width: 80%;
   height: auto;
   margin-inline: auto;
   grid-template-columns: 1fr 0.6fr;
   grid-template-rows: 1fr auto auto;
   grid-template-areas:
      "opp opp"
      "eks res"
      "gal gal";
   /*
   opp = Oppdrag
   eks = Ekstra info
   res = Nettressurser
   gal = Galleri
   */
}
.ob_oppdragssideGridAlt {
   display: grid;
   position: relative;
   margin-block-start: 2.5rem;
   row-gap: 1rem;
   column-gap: 2rem;
   width: 80%;
   height: auto;
   margin-inline: auto;
   grid-template-columns: 1fr 0.6fr;
   grid-template-rows: 1fr auto auto;
   grid-template-areas:
      "opp opp"
      "eks eks"
      "gal gal";
   /*
   opp = Oppdrag
   eks = Ekstra info
   res = Nettressurser
   gal = Galleri
   */
}
.oppdragGrid {
   grid-area: opp;
   position: relative;
}
.infoGrid {
   grid-area: eks;
   position: relative;
}
.ressursGrid {
   grid-area: res;
   position: relative;
}
.bildeGrid {
   grid-area: gal;
   position: relative;
}
.modulIkon {
   position: absolute;
   top: 10px;
   right: 0;
   transform: translateX(50%);
   width: 50px;
   height: 50px;
   z-index: 100;
   padding: 0.2rem;
}
/*___________ OppdragsGrid __________*/
.oppdragsSideBilde {
   float: right;
   clear: right;
   margin: 1rem;
}
.horisontaltStandard {
   height: auto;
   width: 24rem;
}
.vertikaltStandard {
   height: auto;
   width: 14rem;
}
.vertikaltSmalt {
   height: auto;
   width: 10rem;
}
.horisontaltSmalt {
   height: 6.5rem;
   width: auto;
}
.kvadratisk {
   height: auto;
   width: 20rem;
}
.stortInspBilde {
   display: grid;
   grid-template-columns: 1fr 0.8fr;
   gap: 1rem;
}
.stortInspBilde img {
   /* max-width: 30rem; */
   overflow: hidden;
   object-fit: cover;
}
.hvitBakgrunn {
   background-color: whitesmoke;
}
.oppdragGrid h3 {
   margin-block-end: 0.5rem;
   margin-block-start: 1rem;
}
.infoGrid h3,
.ressursGrid h3,
.bildeGrid h3 {
   margin-block-end: 0.5rem;
}
.nettResFlex {
   display: flex;
   gap: 1rem;
   margin-block-start: 0.5rem;
}
.nettResFlex > * {
   flex-basis: 200px;
   flex-grow: 1;
   flex-shrink: 1;
   max-width: 500px;
}
.nettResFlexKol {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin-block-start: 0.5rem;
}
.nettResMono {
   display: flex;
   width: max-content;
   margin-block-start: 0.5rem;
   margin-block-end: 1rem;
}
.flexGalleriBredde {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
   justify-content: center;
}
.nettResGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 0.5rem;
}
.nettResGrid a {
   height: 100%;
}
.flexGalleriBredde img {
   cursor: pointer;
   transform-origin: center;
   border-radius: 0.4rem;
}
.flexGalleri > * {
   max-width: 350px;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 250px;
}
.kategoriKnapp {
   margin-block: 0.2rem;
}