/*
    Theme Name: Skolefrukt Tema
    Author: Joachim Hauge
    Version: 1.0
*/

/*
  Proxima Soft Light
  font-family: "proxima-soft", sans-serif;
  font-weight: 300;
  font-style: normal;

  Proxima Soft Regular
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;

  Proxima Soft Italic
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: italic;

  Proxima Soft Semibold
  font-family: "proxima-soft", sans-serif;
  font-weight: 600;
  font-style: normal;

  Proxima Soft Bold
  font-family: "proxima-soft", sans-serif;
  font-weight: 700;
  font-style: normal;

  Proxima Soft Extrabold
  font-family: "proxima-soft", sans-serif;
  font-weight: 800;
  font-style: normal;
*/

@font-face {
  font-family: "VAG Rounded Black SSi";
  src: url("/fonts/VAGRoundedBlackSSiBlack.eot");
  src: url("/fonts/VAGRoundedBlackSSiBlack.eot?#iefix")
      format("embedded-opentype"),
    url("/fonts/VAGRoundedBlackSSiBlack.woff2") format("woff2"),
    url("/fonts/VAGRoundedBlackSSiBlack.woff") format("woff"),
    url("/fonts/VAGRoundedBlackSSiBlack.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.visuallyhidden{
  display: none;
}

#skip_to_main_content{
  position: absolute;
  top: -100%;
  left: 200px;
  background-color: white;
  color: #2b3031;
  padding: 10px;
  z-index: 1000;
  text-decoration: none;
  font-family: "proxima-soft", sans-serif;
  font-weight: 600;
}
#skip_to_main_content:focus{
  top: 12px;
}

body {
  font-family: "proxima-soft", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2b3031;
  overflow-x: hidden;
  /* background: #f3f3f1; */
}

h2 {
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  font-size: 32px;
  margin: 0;
  margin-top: 54px;
  margin-bottom: 32px;
}
h2:first-of-type {
  margin-top: 0;
}

p {
  font-size: 18px;
  line-height: 25px;
}

.wp-caption {
  margin: 32px 0px;
}

p.wp-caption-text {
  font-size: 15px;
  font-style: italic;
  color: #404546;
  margin-top: 4px;
  line-height: 20px;
}

/* CONTACT SHORTCUT */
#contact-shortcut {
  position: fixed;
  z-index: 50;
  bottom: 16px;
  right: 120px;
  width: 54px;
  height: 70px;
  background-image: url(/graphics/contact-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.wrapper {
  padding: 52px 24px 92px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.main-content {
  position: relative;
}

.wrapper .content-fruit-1,
.wrapper .content-fruit-2,
.wrapper .about-fruit,
.wrapper .about-fruit-right {
  opacity: 1;
  position: absolute;
  width: 50%;
  max-width: 400px;
  z-index: -1;
  user-select: none;
  pointer-events: none;
}

.wrapper .content-fruit-1 {
  left: 0;
  top: 800px;
}

.wrapper .content-fruit-2 {
  right: 0;
  top: 1800px;
}

.wrapper .about-fruit {
  left: -150px;
  top: 480px;
}

.wrapper .about-fruit-right {
  right: -200px;
  bottom: 300px;
}

header {
  position: absolute;
  z-index: 300;
  top: 16px;
  left: 0;
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

header.fixed {
  top: 0px;
  position: fixed;
  background-color: white;
  -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
}

header .logo,
header .logo-dark {
  position: absolute;
  z-index: 50;
  left: 0px;
  width: 145px;
  padding: 16px;
}

header .logo img,
header .logo-dark img {
  width: 100%;
}

header .logo-dark {
  display: none;
}

header .logo.hidden {
  display: none;
}

header .logo-dark.show {
  display: block;
}

header .menu-icon {
  position: absolute;
  z-index: 50;
  right: 32px;
  width: 30px;
  height: 20px;
  background-image: url(/graphics/menu-icon-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  display: none;
}

header .menu-icon.dark {
  background-image: url(/graphics/menu-icon.svg);
}

header .menu-icon.close {
  background-image: url(/graphics/menu-icon-close.svg);
}

header .nav-container {
  display: flex;
  align-items: center;
}

header .nav-container ul {
  margin: 0;
  padding: 0;
}

header .nav-container li {
  list-style-type: none;
  display: inline-block;
}

header .nav-container a {
  margin-right: 18px;
  font-weight: 500;
  letter-spacing: 0.7px;
  cursor: pointer;
  padding: 18px 0px;
  border-bottom: 3px solid rgba(255, 255, 255, 0);
  text-decoration: none;
  color: white;
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
}

header .nav-container a:hover {
  border-bottom: 3px solid rgba(255, 255, 255, 1);
}

header .nav-container a:visited {
  color: white;
}

header .nav-container a.dark {
  color: #2b3031;
}

header .nav-container a.dark:hover {
  color: #2b3031;
  border-bottom: 3px solid rgb(68, 68, 68);
}

header .nav-container a.dark:visited {
  color: #2b3031;
}

header .nav-container .nav-link {
  margin-right: 0px;
  padding: 15px 24px;
  background-color: #697f10;
  background-color: #4a7322;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  color: white;
  border-bottom: none;
}

header .nav-container .nav-link:visited {
  color: white;
}

header .nav-container .nav-link:hover {
  background-color: #588828;
  border-bottom: none;
}

.hero-container {
  width: 100%;
  height: 550px;
  position: relative;
  background-color: #cc3f44;
  background-color: #c30c28;
}

.hero-container .hero-shape {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(1px) scale(1.02) scaleX(-1);
  user-select: none;
  pointer-events: none;
}

.hero-container .hero-fruit {
  z-index: 1;
  position: absolute;
  right: 0;
  top: 150px;
  width: 40%;
  max-width: 450px;
  min-width: 300px;
  user-select: none;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 920px;
  padding: 0px 24px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
}

.hero-content h1 {
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 76px;
  font-size: 72px;
  color: white;
}

.hero-sub-container {
  position: relative;
  padding-top: 54px;
  width: 100%;
  padding-bottom: 64px;
  background-color: #cc3f44;
  background-color: #c30c28;
}

.hero-sub-container.orange {
  background-color: #e17000;
}

.hero-sub-container.yellow {
  background-color: #e6b400;
  background-color: #c30c28;
}

.hero-sub-container.green {
  background-color: rgb(143, 165, 55);
  background-color: #5c9728;
}

.hero-sub-container.random {
  background-color: #358cc3;
  background-color: #c30c28;
}

.hero-sub-container .hero-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
  -webkit-transform: translateY(1px) scale(1.02);
  transform: translateY(1px) scale(1.02);
}

.hero-sub-content {
  max-width: 920px;
  padding: 0px 24px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
}

.hero-sub-content h1 {
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 2px;
  margin-bottom: 0;
  margin-top: 92px;
  font-size: 46px;
  line-height: 56px;
  color: white;
}

.hero-text a {
  text-decoration: none;
}

.btn {
  padding: 15px 24px;
  border-radius: 25px;
  background-color: white;
  color: #cc3f44;
  color: #c30c28;
  cursor: pointer;
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
  text-decoration: none;
  user-select: none;
}
.btn.btn-red_fill {
  background-color: #cc3f44;
  background-color: #c30c28;
  color: white;
}
.btn.btn-red_fill:hover {
  background-color: #b33a3f;
}
.btn.btn-red_border {
  background-color: white;
  color: #cc3f44;
  color: #c30c28;
  border: 2px solid #cc3f44;
  border: 2px solid #c30c28;
}
.btn.btn-red_border:hover {
  background-color: #cc3f44;
  background-color: #c30c28;
  color: white;
  border: 2px solid #cc3f44;
  border: 2px solid #c30c28;
}
.btn.btn-green_fill {
  background-color: #697f10;
  background-color: #4a7322;
  color: white;
}
.btn.btn-green_fill:hover {
  background-color: #5c6f0e;
}
.btn.btn-green_border {
  background-color: white;
  color: #697f10;
  color: #4a7322;
  border: 2px solid #697f10;
  border: 2px solid #4a7322;
}
.btn.btn-green_border:hover {
  background-color: #697f10;
  background-color: #4a7322;
  color: white;
  border: 2px solid #697f10;
  border: 2px solid #4a7322;
}

.btn_container {
  display: flex;
}
.btn_container.left {
  justify-content: flex-start;
}
.btn_container.mid {
  justify-content: center;
}
.btn_container.right {
  justify-content: flex-end;
}

.hero-content .bestill-btn {
  margin-right: 16px;
  margin-bottom: 16px;
}

.bestill-btn {
  background-color: #697f10;
  background-color: #4a7322;
  color: white;
}
.bestill-btn:hover {
  background-color: #588828;
}

.hero-content .btn {
  display: inline-block;
}

.hero-sub-content .btn {
  display: inline-block;
}

.intro-content {
  padding-bottom: 32px;
}

.intro-content h2 {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 12px;
}

.intro-content h2:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 40px;
  border-radius: 3px;
  height: 3px;
  background-color: #cc3f44;
  background-color: #c30c28;
}

.intro-text {
  max-width: 520px;
  margin-bottom: 96px;
}

.intro-text.last {
  margin-bottom: 42px;
}

.intro-text p {
  margin-bottom: 24px;
}

p a {
  color: #c30c28;
  text-decoration: none;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

p a:visited {
  color: #c30c28;
}

p a:active {
  color: #c30c28;
}

p a:hover {
  color: #c30c28;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.content-link {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 20px;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.content-link:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

.content-link.back {
  background-image: url(/graphics/back-arrow.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 8px;
  padding-left: 18px !important;
}

blockquote {
  margin: 0;
  padding: 0;
  padding-left: 8px;
}

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 72px;
}

.content:nth-child(odd) {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.content h2,
.content p {
  width: 100%;
  max-width: 500px;
  display: block;
}

.content p:first-of-type {
  display: none;
}

.content p a {
  color: #274b8f;
  text-decoration: none;
}
a span {
  color: inherit !important;
}

.content p a:visited {
  color: #274b8f;
}

.content p a:active {
  color: #274b8f;
}

.content p a:hover {
  color: #274b8f;
  border-bottom: 1px solid #274b8f;
}

.artikkel-content p a {
  color: #274b8f;
  text-decoration: none;
}

.artikkel-content p a:visited {
  color: #274b8f;
}

.artikkel-content p a:active {
  color: #274b8f;
}

.artikkel-content p a:hover {
  color: #274b8f;
  border-bottom: 1px solid #274b8f;
}

.content h2 {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 12px;
  font-size: 32px;
}

.content h2:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 40px;
  border-radius: 3px;
  height: 3px;
  background-color: #e6b400;
}

.content ul,
.main-content ul {
  max-width: 500px;
  margin: 0;
  line-height: 10px;
}

.content ul li,
.main-content ul li {
  line-height: 22px;
  padding: 5px 0px;
}

.aktuelt-container,
.video-container {
  margin-bottom: 72px;
}

.aktuelt-grid,
.video-grid,
.admin-aktuelt-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 250px;
  grid-gap: 24px;
  margin-bottom: 24px;
}

.aktuelt-grid.front {
  margin-bottom: 32px;
}

.aktuelt,
.video,
.admin-aktuelt {
  cursor: pointer;
  position: relative;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  background-color: white;
  overflow: hidden;
  border-radius: 5px;
}

.aktuelt:visited,
.video:visited,
.admin-aktuelt:visited {
  color: #2b3031;
}

.video-container {
  min-height: 400px;
}

.video-container-single {
  height: 400px;
  margin-bottom: 96px;
}

.video-container iframe,
.video-container-single iframe {
  border: none;
  margin-bottom: 24px;
}

.cover-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  user-select: none;
}

.aktuelt:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 3;
}

.aktuelt:hover,
.video:hover,
.admin-aktuelt:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

/*
.aktuelt h3, .video h3{
    position: absolute;
    margin: 0;
    width: 100%;
    right: 0;
    font-family: 'VAG Rounded Black SSi';
    font-weight: bold;
    font-style: normal;
    letter-spacing: 1px;
    color: #2b3031;
    font-size: 16px;
    bottom: 0;
    padding: 16px 16px;
    background-color: rgba(255, 255, 255, 0.94);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
*/

.aktuelt h3,
.video h3,
.admin-aktuelt h3 {
  position: absolute;
  margin: 0;
  width: 100%;
  right: 0;
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
  color: #2b3031 !important;
  font-size: 16px;
  line-height: 22px;
  bottom: 0;
  padding: 16px 16px;
  background-color: rgba(255, 255, 255, 0.94);
}

h3 {
  font-size: 24px;
  margin-top: 32px;
  color: inherit !important;
}
h3 span {
  color: inherit !important;
}
h3 a {
  color: #c30c28 !important;
}
h3 span a {
  color: #c30c28 !important;
}

.artikkel-content {
  margin-bottom: 64px;
}

.artikkel-header {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 24px;
}

.publisert {
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  color: white;
  margin: 12px 0px;
}

.artikkel-image {
  width: 100%;
  height: 300px;
  margin-bottom: 32px;
  background-size: cover;
  background-position: center;

  position: relative;
}

p.hovedbilde-tekst {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.75);
  margin: 0px;
  padding: 8px 12px;
  font-size: 15px;
  width: 100%;
  font-style: italic;
}

/* Artikkel styling */
h4 {
  font-size: 18px;
  line-height: 26px;
}

.artikkel-text a {
  color: #274b8f;
  text-decoration: none;
}

.artikkel-text a:visited {
  color: #274b8f;
}

.artikkel-text a:active {
  color: #274b8f;
}

.artikkel-text a:hover {
  color: #274b8f;
  border-bottom: 1px solid #274b8f;
}

.artikkel-text ul {
  max-width: 500px;
  margin: 0;
  line-height: 10px;
}

.artikkel-text ul li {
  line-height: 22px;
}

.artikkel-ingress,
.artikkel-avsnitt {
  margin: 0 auto;
}

.artikkel-ingress {
  line-height: 26px;
  margin-bottom: 20px;
  font-size: 18px;
}

.artikkel-avsnitt {
  margin-bottom: 16px;
}

.vedlegg-info {
  font-weight: bold;
  margin-top: 32px;
}

.vedlegg-link {
  color: #2b3031;
}

.vedlegg-link:visited,
.vedlegg-link:active {
  color: #2b3031;
}

.employees {
  display: flex;
}

.employee:nth-of-type(1) {
  margin-right: 24px;
}

.employee h4 {
  margin-bottom: 0px;
}

/*
$$$$$$$$\                   $$\                         
$$  _____|                  $$ |                        
$$ |    $$$$$$\   $$$$$$\ $$$$$$\    $$$$$$\   $$$$$$\  
$$$$$\ $$  __$$\ $$  __$$\\_$$  _|  $$  __$$\ $$  __$$\ 
$$  __|$$ /  $$ |$$ /  $$ | $$ |    $$$$$$$$ |$$ |  \__|
$$ |   $$ |  $$ |$$ |  $$ | $$ |$$\ $$   ____|$$ |      
$$ |   \$$$$$$  |\$$$$$$  | \$$$$  |\$$$$$$$\ $$ |      
\__|    \______/  \______/   \____/  \_______|\__|      
*/

footer {
  width: 100%;
  padding: 0px;

  color: white;
  position: relative;
  background-color: #c30c28;
}
footer.green{
  background-color: #5c9728;
}

footer h4 {
  font-size: 20px;
  color: white !important;
}
footer p {
  color: white !important;
  line-height: 30px !important;
}
footer a {
  font-size: 18px;
  font-weight: 600;
  color: white !important;
  text-underline-offset: 4px;
}
footer a:hover {
  text-decoration-thickness: 2px;
}
footer p a {
  color: white !important;
}

.footer_content {
  padding: 32px 24px;
  padding-bottom: 54px;
  max-width: 920px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer_content_row.three_col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 54px;
}
.footer_flags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.flag_link:hover .footer_flag {
  outline: 1px solid white;
}
.footer_flag {
  width: 40px;
  height: auto;
  border: 0.5px solid white;
}

.some_links {
  display: flex;
  gap: 24px;
}
.some_link {
  border-radius: 3px;
}
.some_link:hover {
  outline: 2px solid white;
  outline-offset: 6px;
}
.some_logo {
  width: 115px;
  height: auto;
}

.footer_links {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 30px !important;
}

.footer_partners {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 24px;
}
.partner_link {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.partner_logo {
  max-height: 120px;
  width: auto;
  max-width: 250px;
}
.footer_copy {
  font-size: 16px;
}

@media only screen and (max-width: 950px) {
  .footer_content_row.three_col {
    grid-template-columns: 1fr;
    grid-gap: 0px;
  }

  .footer_partners {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 32px;
  }
  footer h4 {
    margin-top: 36px;
    margin-bottom: 20px;
  }
  footer p {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .footer_links {
    margin-bottom: 32px;
  }
  .footer_flag {
    width: 38px;
    height: auto;
    border: 0.5px solid white;
  }
}

/*
$$$$$$$$\ $$\ $$\   $$\                                     
$$  _____|\__|$$ |  $$ |                                    
$$ |      $$\ $$ |$$$$$$\    $$$$$$\   $$$$$$\              
$$$$$\    $$ |$$ |\_$$  _|  $$  __$$\ $$  __$$\             
$$  __|   $$ |$$ |  $$ |    $$$$$$$$ |$$ |  \__|            
$$ |      $$ |$$ |  $$ |$$\ $$   ____|$$ |                  
$$ |      $$ |$$ |  \$$$$  |\$$$$$$$\ $$ |                  
\__|      \__|\__|   \____/  \_______|\__|                                                                        
 $$$$$$\                                          $$\       
$$  __$$\                                         $$ |      
$$ /  \__| $$$$$$\   $$$$$$\   $$$$$$\   $$$$$$$\ $$$$$$$\  
\$$$$$$\  $$  __$$\  \____$$\ $$  __$$\ $$  _____|$$  __$$\ 
 \____$$\ $$$$$$$$ | $$$$$$$ |$$ |  \__|$$ /      $$ |  $$ |
$$\   $$ |$$   ____|$$  __$$ |$$ |      $$ |      $$ |  $$ |
\$$$$$$  |\$$$$$$$\ \$$$$$$$ |$$ |      \$$$$$$$\ $$ |  $$ |
 \______/  \_______| \_______|\__|       \_______|\__|  \__|
*/

.filter-and-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  padding-bottom: 24px;
  margin-bottom: 24px;
  gap: 20px;
}

.filter-and-search.admin {
  justify-content: flex-end;
}
.filter-and-search button {
  background: none;
  border: none;
  padding: 0px;
  padding-bottom: 8px;
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  font-size: 18px;
  border-bottom: 3px solid rgba(128, 128, 128, 0);
  cursor: pointer;
  user-select: none;
}
.filter-and-search button:hover {
  border-bottom: 3px solid rgb(54, 54, 54);
}
.filter-and-search button.active {
  color: #e17000;
  border-bottom: 3px solid #e17000;
}

/*
$$\       $$\             $$\               
$$ |      \__|            $$ |              
$$ |      $$\  $$$$$$$\ $$$$$$\    $$$$$$\  
$$ |      $$ |$$  _____|\_$$  _|  $$  __$$\ 
$$ |      $$ |\$$$$$$\    $$ |    $$$$$$$$ |
$$ |      $$ | \____$$\   $$ |$$\ $$   ____|
$$$$$$$$\ $$ |$$$$$$$  |  \$$$$  |\$$$$$$$\ 
\________|\__|\_______/    \____/  \_______|
*/

select {
  font-family: "Helvetica", sans-serif;
  height: 47px;
  width: 200px;
  font-size: 16px;
  border-radius: 25px;
  padding-left: 16px;
  border: 2px solid #2b3031;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/graphics/down-arrow.svg);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: 165px center;
  cursor: pointer;
}

select:active,
select:focus {
  /* outline: none; */
  box-shadow: none;
  outline-offset: 8px;
}

#fylke {
  margin-right: 16px;
  margin-bottom: 24px;
}

.results p span {
  font-weight: bold;
}

.results #disclaimer {
  /*    text-decoration: underline;*/
  /*    font-weight: 18px;*/
  font-weight: bold;
}

.skoleliste {
  padding-top: 32px;
}

.skoleliste table {
  width: 100%;
}

.skoleliste th {
  text-align: left;
  padding: 16px 8px;
  font-size: 18px;
  background-color: white;
}

.skoleliste th:last-of-type {
  display: none;
}

.skoleliste tr td {
  padding: 16px 8px;
  font-size: 16px;
}

.skoleliste tr td:last-of-type {
  display: none;
}

.skoleliste tr:nth-child(even) {
  background-color: rgb(230, 230, 230);
}

.search-form {
  position: relative;
  margin-right: 18px;
}
.search-submit {
  position: absolute;
  right: 2px;
  width: 46px;
  height: 46px;
  border: none;
  outline: none;
  background-image: url(/graphics/search-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  background-color: transparent;
  color: transparent;
  border-radius: 100%;
}
.search-submit:focus,
.search-submit:active {
  outline: 2px solid blue;
  outline-offset: -5px;
}
.search-field {
  padding: 14px;
  border-radius: 25px;
  border: none;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 50px;
  color: #2b3031;
}
.search-field::placeholder {
  color: #2b3031;
}
#header.fixed .search-field {
  background: rgb(233, 233, 233);
}

/*
$$\      $$\                 $$\ $$\                            
$$$\    $$$ |                $$ |\__|                           
$$$$\  $$$$ | $$$$$$\   $$$$$$$ |$$\  $$$$$$\                   
$$\$$\$$ $$ |$$  __$$\ $$  __$$ |$$ | \____$$\                  
$$ \$$$  $$ |$$$$$$$$ |$$ /  $$ |$$ | $$$$$$$ |                 
$$ |\$  /$$ |$$   ____|$$ |  $$ |$$ |$$  __$$ |                 
$$ | \_/ $$ |\$$$$$$$\ \$$$$$$$ |$$ |\$$$$$$$ |                 
\__|     \__| \_______| \_______|\__| \_______|                 
                                                                                                                                                                                 
 $$$$$$\                                $$\                     
$$  __$$\                               \__|                    
$$ /  $$ |$$\   $$\  $$$$$$\   $$$$$$\  $$\  $$$$$$\   $$$$$$$\ 
$$ |  $$ |$$ |  $$ |$$  __$$\ $$  __$$\ $$ |$$  __$$\ $$  _____|
$$ |  $$ |$$ |  $$ |$$$$$$$$ |$$ |  \__|$$ |$$$$$$$$ |\$$$$$$\  
$$ $$\$$ |$$ |  $$ |$$   ____|$$ |      $$ |$$   ____| \____$$\ 
\$$$$$$ / \$$$$$$  |\$$$$$$$\ $$ |      $$ |\$$$$$$$\ $$$$$$$  |
 \___$$$\  \______/  \_______|\__|      \__| \_______|\_______/ 
     \___|                                                      
*/

@media only screen and (max-width: 1160px) {
  .search-form {
    margin-right: 0px;
    margin-bottom: 32px;
  }

  .search-field {
    border: 2px solid black;
  }

  header .menu-icon {
    display: block;
  }

  header .nav-container {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
  }

  header .nav-container .menu-item {
    display: block;
    text-align: center;
    margin-bottom: 42px;
  }

  header .nav-container.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  header .nav-container a {
    border-bottom: 3px solid rgb(27, 27, 27, 0);
    color: #2b3031;
    padding: 10px 0px;
    margin-right: 0;
  }

  header .nav-container a:hover {
    border-bottom: 3px solid rgb(27, 27, 27);
  }

  header .nav-container a:visited {
    color: #2b3031;
  }

  header .nav-container .nav-link {
    border-radius: 25px;
  }
}

@media only screen and (max-width: 1200px) {
  .wrapper .about-fruit {
    left: 0px;
    top: 400px;
    width: 30%;
    max-width: 300px;
  }

  .wrapper .about-fruit-right {
    bottom: 350px;
    right: 0px;
    width: 30%;
    max-width: 300px;
  }
}

@media only screen and (max-width: 920px) {
  .wrapper .about-fruit {
    display: none;
  }

  .wrapper .about-fruit-right {
    display: none;
  }

  .main-content .content {
    margin-bottom: 54px;
  }

  .aktuelt-grid,
  .video-grid,
  .admin-aktuelt-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
  }
}

@media only screen and (max-width: 768px) {
  .hero-content h1 {
    letter-spacing: 1.5px;
    font-size: 56px;
    line-height: 62px;
  }

  .footer-content .contact-copyright .contact {
    flex-direction: column;
  }

  .footer-content .contact-copyright .contact p {
    width: 100%;
    margin-bottom: 16px;
  }

  .hero-sub-content h1 {
    font-size: 42px;
  }

  .video-container-single {
    height: 380px;
  }

  .artikkel-image {
    height: 250px;
  }

  .employees {
    display: block;
  }

  footer .footer-content .section {
    flex-direction: column;
    margin-bottom: 0px;
  }

  footer .copyright-contact {
    flex-direction: column-reverse;
  }

  footer .copyright-contact p {
    margin: 8px 0px;
  }
}

@media only screen and (max-width: 600px) {
  h3 {
    font-size: 22px;
    margin-top: 24px;
  }

  .hero-content h1 {
    letter-spacing: 1.5px;
    font-size: 40px;
    line-height: 42px;
  }

  .hero-sub-content h1 {
    font-size: 28px;
    line-height: 32px;
  }

  .main-content .content {
    margin-bottom: 32px;
  }

  .artikkel-header {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 16px;
  }

  .aktuelt-grid,
  .video-grid,
  .admin-aktuelt-grid {
    grid-gap: 18px;
  }

  .aktuelt-grid,
  .video-grid,
  .admin-aktuelt-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 175px;
  }

  .aktuelt:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 1;
  }

  .video-container-single {
    height: 320px;
    margin-bottom: 92px;
  }
}

@media only screen and (max-width: 560px) {
  h2 {
    font-size: 25px;
    letter-spacing: 1.5px;
    margin-top: 46px;
    line-height: 32px;
    margin-bottom: 26px;
  }

  .intro-content h2,
  .content h2 {
    font-size: 25px;
    line-height: 32px;
  }

  .search {
    margin-top: 32px;
  }
}

@media only screen and (max-width: 484px) {
  select {
    display: block;
    width: 100%;
    background-position: right 16px center;
    cursor: pointer;
  }
  .skoleliste th {
    text-align: left;
    padding: 12px 6px;
    font-size: 16px;
  }

  .skoleliste tr td {
    padding: 12px 6px;
    font-size: 14px;
  }
}

@media only screen and (max-width: 400px) {
  header {
    top: 0px;
  }

  header .logo,
  header .logo-dark {
    left: 0px;
    width: 120px;
  }

  header .menu-icon {
    right: 16px;
  }

  .hero-container {
    height: 425px;
  }

  .artikkel-header {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .artikkel-image {
    height: 200px;
  }

  .hero-sub-container {
    padding-top: 0px;
    padding-bottom: 24px;
  }

  .hero-container .hero-fruit {
    top: 120px;
    min-width: 200px;
    display: none;
  }

  .hero-content {
    padding: 50px 16px;
  }

  .hero-sub-content {
    padding: 0px 16px;
  }

  .wrapper {
    padding: 42px 16px 62px;
    max-width: 920px;
    margin: 0 auto;
  }

  .wrapper .content-fruit-1,
  .wrapper .content-fruit-2 {
    display: none;
  }

  .intro-content h2,
  .content h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .video-container-single {
    height: 200px;
  }

  .footer-content .about-skolefrukt {
    margin-bottom: 8px;
  }

  .footer-content .about-skolefrukt .footer-flag {
    margin-right: 4px;
  }

  .btn {
    font-size: 15px;
  }

  .footer-content {
    padding: 0px 16px;
  }
}

/* IE SPECIFIC STYLING */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */

  .hero-sub-container .hero-shape {
    display: none;
  }

  .aktuelt-grid,
  .video-grid,
  .admin-aktuelt-grid {
    position: relative;
    display: block;
  }

  .aktuelt,
  .video,
  .admin-aktuelt {
    display: inline-block;
    position: relative;
    width: 30%;
    min-width: 260px;
    max-width: 100%;
    height: 250px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    background-color: white;
    -webkit-transition-duration: 0.2s;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 0.2s;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 22px;
    margin-bottom: 22px;
  }

  @media only screen and (max-width: 920px) {
    .aktuelt,
    .video,
    .admin-aktuelt {
      width: 46.5%;
      min-width: 260px;
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 760px) {
    .aktuelt,
    .video,
    .admin-aktuelt {
      width: 100%;
      min-width: 260px;
      max-width: 100%;
    }
  }
}

/* 404 ERROR */
#error-header {
  font-size: 26px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 36px;
}

#error-msg {
  font-size: 18px;
  text-align: center;
  line-height: 36px;
}

/*** April 2022 - Start ***/
.custom-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
/*** April 2022 - End ***/
a.custom-grid-elem {
  margin-bottom: 24px;
  width: 100%;
  /*    height: 240px;*/
  aspect-ratio: 20/5;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  text-decoration: none;
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgb(0 0 0 / 30%);
  transition-duration: 0.2s;
  color: #2b3031;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  color: transparent;
}
a.custom-grid-elem.sfskolen {
  background-image: url(/graphics/btns/sfskolen-2025-btn.jpg);
}
a.custom-grid-elem.sfboka {
  background-image: url(/graphics/btns/sfboka-2025-btn.jpg);
}
a.custom-grid-elem.fjtb {
  background-image: url(/graphics/btns/fjtb-2025-btn.jpg);
}
a.custom-grid-elem:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
  box-shadow: 0px 10px 20px rgb(0 0 0 / 15%);
}

[data-puzzel-chat].web:not([data-view="bubble"]) {
  z-index: 999;
}

[data-puzzel-chat][data-view="bubble"] {
  z-index: 999;
}

header#drag-handle {
  top: 0px !important;
}

/***** KONKURRANSE ****/
#konkurranse {
  width: 100%;
  min-height: 800px;
  background-color: #cc3f44;
  background-color: #c30c28;
  font-family: "Open Sans", sans-serif;
  padding: 24px;
  position: relative;
}
#konkurranse h2 {
  color: white;
  margin-bottom: 54px;
}
#konkurranse p {
  color: white;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 24px;
  font-family: "Open Sans", sans-serif;
}
#konkurranse .content {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  margin-bottom: 54px;
}
#konkurranse #img {
  width: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 32px;
}
#konkurranse #img img {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  height: 100%;
}
#konkurranse #form-container {
  width: 50%;
}
#konkurranse #form {
  padding: 16px;
  background: #bc383d;
  border-radius: 10px;
  position: relative;
}

#konkurranse #form input,
#konkurranse #form textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 12px 16px;
  border-radius: 5px;
  margin-bottom: 16px;
}

#konkurranse #form span {
}

#konkurranse #form textarea {
  resize: none;
  font-family: "Open Sans", sans-serif;
}

#konkurranse #form label {
  display: block;
  margin-bottom: 6px;
  color: white;
  padding-left: 8px;
  font-size: 18px;
  user-select: none;
}

#konkurranse #form input[type="submit"] {
  font-size: 18px;
  padding: 16px;
  background: #697f10;
  background: #4a7322;
  cursor: pointer;
  color: white;
  margin-bottom: 0px;
  font-family: "VAG Rounded Black SSi";
  letter-spacing: 1px;
}
#konkurranse #form input[type="submit"]:hover {
  background: #779013;
}
#konkurranse #form input[type="submit"].submitted {
  user-select: none;
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

#konkurranse #form-container {
  position: relative;
}

#konkurranse #form-container #validate {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: white;
  padding: 24px;
  border-radius: 10px;
  background-color: #bc383d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  text-align: center;
  transition-duration: 0.2s;
  font-size: 24px;
  opacity: 0;
}

#konkurranse #form-container #validate.show {
  visibility: visible;
  opacity: 1;
}

#konkurranse #form-container #val-tooltip {
  display: none;
  position: absolute;
  font-size: 15px;
  right: 24px;
  background: #ffc7c9;
  padding: 4px 10px;
  color: black;
  border-radius: 5px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  font-family: "Open Sans", sans-serif;
}

#konkurranse #form-container #val-tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: -5px;
  left: calc(50% - 5px);
  background: #ffc7c9;
  transform: rotate(45deg);
}

input#name {
  display: none;
  user-select: none;
  pointer-events: none;
}

#konkurranse #form .check {
  display: flex;
  margin-bottom: 16px;
}
#konkurranse #form .check.shake {
  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

#konkurranse #form .check label {
  font-size: 18px;
}
#konkurranse #form input[type="checkbox"] {
  width: auto;
  margin: 0;
  margin-top: 4px;
}
#konkurranse p.terms {
  font-size: 15px;
  max-width: 540px;
  line-height: 18px;
  margin-bottom: 24px;
  font-weight: 400;
}

/*** NOV 22 ***/
.artikkel-text iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/*** CRAFT ***/
.content_wrapper {
  display: flex;
  flex-direction: column;
  gap: 116px;
}
.aktuelt_body .content_wrapper {
  gap: 42px;
}

.content_block.has_image {
  display: flex;
  /* gap: 54px; */
}
.aktuelt_body .content_block.has_image {
  gap: 54px;
}
.content_block.has_image.text_right {
  flex-direction: row-reverse;
}
.content_block.has_image .content_block_text {
  width: 50%;
}
.content_block.has_image .content_block_image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_block.has_image .content_block_image img {
  width: 100%;
}
.content_block.has_image .content_block_image {
  transform: translateX(100px);
}
.aktuelt_body .content_block.has_image .content_block_image {
  transform: translateX(0px) !important;
}
.content_block.has_image.text_right .content_block_image {
  transform: translateX(-100px);
}
.aktuelt_body .content_block.has_image.text_right .content_block_text {
  transform: translateX(0px);
}

.forside_body h2 {
  position: relative;
}
.forside_body h2::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  background: #e6b400;
  bottom: -12px;
  left: 0;
}

.forside_body h2::before {
  background: #cc3f44;
  background-color: #c30c28;
}

.content_block ul {
  margin: 0;
  padding: 0;
  padding-left: 16px;
}
.content_block li {
  max-width: 600px;
  margin-bottom: 6px;
  line-height: 24px;
  font-size: 18px;
}

.sider_body .first {
  margin-bottom: -92px;
}

img {
  display: block;
  margin: 0;
  padding: 0;
}

.search_results {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.search_result_hits {
  color: white;
  font-weight: bold;
  font-size: 22px;
}
.search_results a {
  display: flex;
  font-family: "Proxima Nova", sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: bold;
  color: #2b3031;
  text-decoration: none;
}
.search_results a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.search_result_type {
  font-size: 18px;
  font-weight: normal;
}
.search_result_img {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  aspect-ratio: 5/4;
  margin-right: 24px;
  border-radius: 5px;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.search_result_img.no_img {
  background: rgb(225, 225, 225);
  position: relative;
}
.search_result_img.no_img::before {
  content: "Mangler bilde";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(112, 112, 112);
  font-family: "Proxima Nova", sans-serif;
  font-size: 16px;
  text-align: center;
  line-height: 20px;
}
.search_result_text {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  /* justify-content: center; */
}

.magasin {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  grid-auto-flow: dense;
  /* width: calc(100% + 200px);
  transform: translateX(-100px); */
  /* max-width: 100%; */
}

.magasin_element_layout {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  background: #c30c28;
  color: white;
  padding: 4px 8px;
  border-bottom-right-radius: 5px;
  font-size: 12px;
  font-weight: 600;

  display: none;
}
.magasin_element {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;

  border-radius: 5px;
  overflow: hidden;

  text-decoration: none;
  color: #2b3031;
  /* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  padding: 12px; */
}
.magasin_element:hover h3 {
  text-decoration: underline;
}
.magasin_element p {
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 0px;
  margin-top: 8px;
  font-weight: 600;
}
.magasin_element h3 {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 8px;
  margin-top: 12px;

  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.2px;
}

.magasin_element.liten img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

.magasin_element.litenMBakgrunn {
  justify-content: flex-end;

  min-height: 340px;
}
.magasin_element.litenMBakgrunn img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.magasin_element.litenMBakgrunn .magasin_element_content {
  position: relative;
  z-index: 1;
  padding: 16px;
  padding-top: 54px;
  background: linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  border-radius: 5px;
  color: white;
}

.magasin_element img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.magasin_element.medium {
  grid-column: span 2;
  justify-content: flex-end;

  min-height: 340px;
}
.magasin_element.medium h3 {
  font-size: 24px;
  line-height: 28px;
}
.magasin_element.medium img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.magasin_element.medium .magasin_element_content {
  position: relative;
  z-index: 1;
  padding: 16px;
  background: linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  border-radius: 5px;
  color: white;
}
.magasin_element.stor {
  grid-column: span 3;
  flex-direction: row;
  gap: 32px;

  min-height: 340px;
}
.magasin_element.stor h3 {
  font-size: 26px;
  line-height: 30px;
}
.magasin_element.stor img {
  width: calc(100% - 34.333%);
  height: 100%;
  max-height: 340px;
  object-fit: cover;
}
/* BGS & COLORS */
.magasin_element.red {
  background: #c30c28;
}
.magasin_element.red .magasin_element_content {
  background: none;
}

.magasin_element.red_apple {
  background-color: #c30c28;
  background-image: url("/graphics/sf-24-illustrasjoner/apple.svg");
  background-size: 200px;
  background-position: center top 24px;
  background-repeat: no-repeat;
}
.magasin_element.red_apple .magasin_element_content {
  background: none;
}

.magasin_element.green {
  background: #4a7322;
}
.magasin_element.green .magasin_element_content {
  background: none;
}

.magasin_element.green_pear {
  background-color: #4a7322;
  background-image: url("/graphics/sf-24-illustrasjoner/pear.svg");
  background-size: 150px;
  background-position: center top 24px;
  background-repeat: no-repeat;
}
.magasin_element.green_pear .magasin_element_content {
  background: none;
}

.magasin_element.orange {
  background: #e75921;
}
.magasin_element.orange .magasin_element_content {
  background: none;
}

.magasin_element.orange_carrot {
  background: #e75921;
  background-image: url("/graphics/sf-24-illustrasjoner/carrot.svg");
  background-size: 200px;
  background-position: center top 24px;
  background-repeat: no-repeat;
}
.magasin_element.orange_carrot .magasin_element_content {
  background: none;
}


/**** FORM ****/
.form_container.background{
  padding: 54px;
  border-radius: 10px;
  color: white;
}
.form_container.border{
  padding: 54px;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
}
.form_container h3:first-of-type{
  margin-top: 0px !important;
}
.freeform-form{
  position: relative;
  padding-bottom: 0px !important;
}
.freeform-row .freeform-column .freeform-label, .freeform-group .freeform-label {
  margin-bottom: 4px;
}
.freeform-label a{
  color: inherit !important;
}
.background .freeform-row .freeform-column .freeform-label, .freeform-group .freeform-label {
  color: white !important;
  cursor: pointer !important;
}

.freeform-column-6:first-of-type{
  margin-right: 8px !important;
}
.freeform-column-6:last-of-type{
  margin-left: 8px !important;
}

.freeform-row .freeform-column .freeform-label.freeform-required:after{
  color: inherit !important;
  margin-left: 2px !important;
}

.freeform-row .freeform-column .freeform-input{
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-family: 'Proxima Nova', sans-serif !important;
  outline: none !important;
}
.freeform-instructions{
  color: inherit !important;
}
.freeform-form-errors, .freeform-form-success{
  position: absolute;
  bottom: -16px;
  left: 0px;
  border: none !important;
  /* width: 100%; */
}
.freeform-form-success{
  font-weight: bold !important;
}
.freeform-form-errors p{
  font-size: 16px !important;
}
.background .freeform-form-errors{
  background: none !important;
  color: inherit !important;
  padding: 0px !important;
  font-weight: bold !important;
}
/* .freeform-row .freeform-column{
  padding: 5px 0px !important;
} */

.background .freeform-errors li{
  color: white !important;
}

.freeform-button-submit{
  background: #4a7322;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
.background .freeform-button-submit{
  background: white;
  color: black !important;
}

.freeform-form textarea{
  resize: vertical;
}

@media only screen and (max-width: 1180px) {
  .content_block.has_image {
    display: flex;
    gap: 54px;
  }
  .content_block.has_image .content_block_image {
    transform: translateX(0px);
  }
  .content_block.has_image.text_right .content_block_image {
    transform: translateX(0px);
  }
  .magasin {
    width: 100%;
    transform: translateX(0px);
  }
}

@media only screen and (max-width: 860px) {
  .content_block.has_image {
    flex-direction: column !important;
    gap: 54px;
  }
  .content_block.has_image .content_block_text {
    width: 100%;
  }
  .content_block.has_image .content_block_image {
    width: 100%;
  }

  .content_wrapper {
    gap: 64px;
  }
  .aktuelt_body .content_wrapper {
    gap: 32px;
  }

  .sider_body .first {
    margin-bottom: -54px;
  }

  .search_results {
    gap: 16px;
  }
  .search_results a {
    font-size: 16px;
    line-height: 22px;
  }
  .search_result_img {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    margin-right: 12px;
    border-radius: 3px;
  }
  .search_result_type {
    font-size: 14px;
  }
  .search_result_hits {
    font-size: 18px;
  }
  .search_result_text {
    padding-top: 0px;
  }

  .magasin {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .magasin_element.medium {
    grid-column: span 1;
  }
  .magasin_element.stor {
    grid-column: span 1;
    flex-direction: column;
    gap: 0px;
  }
  .magasin_element.stor img {
    width: 100%;
    object-fit: cover;
  }
  .magasin_element p {
    font-size: 14px;
    line-height: 18px;
  }
  .magasin_element.medium h3 {
    font-size: 20px;
    line-height: 24px;
  }
  .magasin_element.stor h3 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media only screen and (max-width: 960px) {
  nav #menu-btn {
    display: block;
  }

  nav .main-nav {
    display: none;
    background-color: #eef3f4;
  }

  nav .main-nav.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 92px;
    padding-bottom: 32px;
  }

  nav #menu-btn.show {
    background-image: url(graphics/menu-icon-close.svg);
    background-size: 18px;
  }

  nav {
    background: none;
  }

  nav.show {
    background: #eef3f4;
  }

  ol {
    margin-bottom: 24px;
  }

  nav a {
    font-size: 20px;
    margin-left: 0px;
    padding: 8px 0px;
    margin-bottom: 24px;
  }

  nav a.btn-link {
    margin-bottom: 0px;
  }

  a.btn-link {
    font-size: 16px;
    padding: 12px 24px;
    padding-top: 14px;
  }

  #price {
    margin-bottom: 54px;
  }

  #konkurranse h2 {
    margin-bottom: 18px;
  }

  #konkurranse #form .check label {
    font-size: 14px;
  }

  #konkurranse .content {
    flex-direction: column;
    padding: 24px 0px;
    margin-bottom: 0px;
  }
  #konkurranse #img {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 32px;
  }

  #konkurranse #img img {
    max-height: 450px;
    margin: 0 auto;
  }

  #konkurranse #form-container {
    width: 100%;
  }
  #konkurranse #form-container #validate {
    font-size: 20px;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/** SKOLELISTE POPUP 2023 **/
#popup {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.35);
  /*
    user-select: none;
    pointer-events: none;
*/
}
#popup-wrapper {
  /*
    user-select: auto;
    pointer-events: auto;
*/
  position: relative;
  background: white;
  width: 100%;
  max-width: 856px;
  padding: 54px;
  border-radius: 10px;
}

#popup-wrapper p {
  max-width: 620px;
  margin-top: 8px;
}

#popup-wrapper h2 {
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  font-size: 32px;
  margin: 0;
  margin-bottom: 16px;
}

#popup-wrapper h3 {
  font-weight: normal;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}

#popup-wrapper h4 {
  font-size: 18px;
  margin: 0;
  margin-top: 24px;
  margin-bottom: 8px;
}

#popup.open {
  display: flex;
  justify-content: center;
  align-items: center;
}

#close-popup {
  position: absolute;
  right: 4px;
  top: 12px;
  border: 0px solid white !important;
}
#close-popup:hover {
  text-decoration: underline;
}

#open-popup {
  font-family: "VAG Rounded Black SSi";
  margin-top: 8px;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0.8px;
  font-size: 16px;
  padding: 15px 24px;
  border-radius: 25px;
  outline: none;
  color: #2b3031;
  border: 2px solid #2b3031;
  cursor: pointer;
  background: white;
  display: none;
}
#open-popup:focus,
#open-popup:active{
  outline: 1px solid blue;
  outline-offset: 8px;
}
#copy-text-btn:focus,
#copy-text-btn:active{
  outline: 1px solid blue;
  outline-offset: 8px;
}
#close-popup:active,
#close-popup:focus {
  outline: 1px solid blue;
  outline-offset: 0px;
}

#popup-wrapper button {
  margin-bottom: 12px;
  font-family: "VAG Rounded Black SSi";
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0.8px;
  font-size: 16px;
  padding: 15px 24px;
  border-radius: 25px;
  outline: none;
  color: #2b3031;
  border: 2px solid #2b3031;
  cursor: pointer;
  background: white;
}

#popup-wrapper button.copied {
  pointer-events: none;
  user-select: none;
  background: #697f10;
  background: #4a7322;
  color: white;
  border: 2px #697f10;
  border: 2px #4a7322;
}

#popup-wrapper a {
  color: #274b8f;
  text-decoration: none;
  border-bottom: 1px solid #274b8f;
}

#popup-wrapper #pre-copy {
  font-style: italic;
}

@media only screen and (max-width: 766px) {
  .freeform-row .freeform-column{
    padding: 5px 0px !important;
  }
  .form_container p{
    font-size: 16px;
    line-height: 22px ;
  }
  .form_container.background{
    padding: 24px;
  }
  .form_container.border{
    padding: 24px;
  }
  .freeform-errors li{
    font-size: 13px !important;
  }
  .freeform-form-errors{
    padding: 8px 12px !important;
    bottom: -8px;
  }
  .freeform-form-errors p{
    font-size: 14px !important;
    line-height: 18px !important;
  }
  .freeform-form {
    padding-bottom: 42px !important;
  }
  .freeform-form-errors, .freeform-form-success {
    bottom: 0px;
}

  #popup-wrapper {
    padding: 24px;
    padding-top: 76px;
    padding-bottom: 54px;
    height: 100%;
  }

  #popup-wrapper h2 {
    font-size: 24px;
    line-height: 28px;
  }

  #popup-wrapper h3 {
    font-weight: normal;
    line-height: 26px;
    font-size: 16px;
  }

  #popup-wrapper h4 {
    font-size: 16px;
    margin: 0;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  #konkurranse #img img {
    max-height: 300px;
  }

  a.custom-grid-elem {
    font-size: 24px;
  }
}

.craft-video-container {
  width: 100%;
  max-width: 920px;
}
.craft-video_wrapper {
  position: relative;
  margin-bottom: 24px;
}
.craft-video_wrapper.sixteen_nine {
  padding-bottom: 56.25%;
}
.craft-video_wrapper.one_one {
  padding-bottom: 100%;
}
.craft-video_wrapper.four_three {
  padding-bottom: 75%;
}
.craft-video_wrapper.three_two {
  padding-bottom: 66.66%;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}