/*
  Mulig denne kan brukes til å lage fancy strek på title
*/
h1::after {
  content: ""; /* This is necessary for the pseudo element to work. */
  display: block; /* This will put the pseudo element on its own line. */
  /*margin: 0 auto;*/ /* This will center the border. */
  width: 90px; /* Change this to whatever width you want. */
  padding-top: 10px; /* This creates some space between the element and the border. */
  border-bottom: 8px solid #007c33; /* This creates the border. Replace black with whatever color you want. */
}

h2::after {
  content: ""; /* This is necessary for the pseudo element to work. */
  display: block; /* This will put the pseudo element on its own line. */
  /*margin: 0 auto;*/ /* This will center the border. */
  width: 60px; /* Change this to whatever width you want. */
  padding-top: 10px; /* This creates some space between the element and the border. */
  border-bottom: 5px solid #007c33; /* This creates the border. Replace black with whatever color you want. */
}

h1,
h2,
.page h3,
.page h4 {
  text-transform: uppercase;
}

.page h1 {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  font-weight: bold;
}

@media only screen and (max-height: 1000px) {
  .page h1 {
    font-size: 2rem;
    padding-top: 70px;
    padding-bottom: 50px;
    font-weight: bold;
  }
}

.page h2 {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.page h4 {
  color: #007c33;
}

.page ul {
  list-style: none; /* Remove default bullets */
  padding-inline-start: 0;
}

.page ul li ul {
  padding-inline-start: unset;
  padding-left: 25px;
}

.page ul li::before {
  content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #007c32; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

/*
endrer litt på block-cover
*/
.has-background {
  padding: 0 !important;
}

/*
  Dimension
*/
.sff_unset_height {
  height: unset !important;
}

.sff_unset_width {
  width: unset !important;
}

.sff_cover_video video {
  /*width: unset;*/
  height: unset;
  max-width: 100vw;
}

.sff_unset_width_video video {
  width: unset !important;
}

.sff_unset_min_height {
  min-height: unset !important;
}

div.sff_contact_video {
  position: relative;
  display: block;
  height: unset;
}

.sff_contact_video video {
  position: relative;
  top: unset;
  left: unset;
  transform: unset;
}

.sff_contact_video p {
  position: absolute;
  height: 10%;
  width: 10%;
}

.sff_contact_video a {
  position: absolute;
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 1);
}

.sff_contact_video a:hover {
  border: 2px solid #007c33;
  color: rgba(0, 0, 0, 1);
}

@media only screen and (max-width: 1000px) {
  div.sff_contact_video {
    display: none;
  }
}

.sff_contact_video p.norway {
  top: 9%;
  left: 44%;
}

.sff_contact_video p.denmark {
  top: 14%;
  left: 57%;
}

.sff_contact_video p.sweden {
  top: 15%;
  left: 31%;
}

.sff_contact_video p.canada {
  top: 28%;
  left: 66%;
}

.sff_contact_video p.england {
  top: 38%;
  left: 11%;
}

.sff_contact_video p.korea {
  top: 41%;
  left: 75%;
}

.sff_contact_video p.scotland {
  top: 27%;
  left: 18%;
}

.sff_contact_video p.singapore {
  top: 52%;
  left: 70%;
}

.sff_contact_video p.australia {
  top: 75%;
  left: 70%;
}

.sff_contact_video p.italia {
  top: 72%;
  left: 12%;
}

.sff_contact_video p.spania {
  top: 55%;
  left: 18%;
}
/*
  Endrer padding på innhold
*/
.sff_add_padding {
  padding: 1.25em 2.375em;
}

.sff_add_padding-top {
  padding-top: 2em;
}

.sff_add_padding-bottom {
  padding-bottom: 2em;
}

.sff_add_padding-left {
  padding-left: 2.375em;
}

.sff_add_padding-right {
  padding-right: 2.375em;
}

.sff_no_padding-left {
  padding-left: 0;
}

.sff_no_padding-right {
  padding-right: 0;
}

.sff_no_margin-bottom {
  margin-bottom: 0 !important;
}

.sff_green_border {
  border: 2px solid #007c33;
  z-index: 2;
  background-color: #fff;
}

.sff_green_border_image {
  transform: translate(0em, 50%);
  z-index: 15;
}

.margin_bottom-40 {
  margin-bottom: -40px;
}

.sff-font-14 {
  font-size: 13px !important;
}

.sff-z10 {
  z-index: 10;
}

.sff-h-260 {
  min-height: 260px;
}

.sff-h-100 {
  min-height: 100px;
}

.sff-h-80 {
  min-height: 80px;
}

@media only screen and (max-width: 782px) {
  .sff_green_border_image {
    display: none;
  }
}

.wp-block-column {
  position: relative;
}

.wp-block-group {
  position: relative;
}

.ieIcons {
  display: flex;
  align-items: center;
}

/*@media (min-width: 782px)*/
/*.sff_offset_up_left img, .sff_offset_up_left figure  {*/
@media only screen and (min-width: 782px) {
  .sff_green_center-incl-padding .wp-block-column:not(:first-child)::before {
    position: absolute;
    height: 80%;
    top: 10%;
    bottom: 10%;
    margin-left: -3.375em;
    border-left: 3px solid #007c33;
    content: "";
  }

  .sff_green_center .wp-block-column:not(:first-child)::before {
    position: absolute;
    height: 80%;
    top: 10%;
    bottom: 10%;
    margin-left: -1em;
    border-left: 3px solid #007c33;
    content: "";
  }

  .sff_green_cross::before {
    position: absolute;
    height: 80%;
    top: 10%;
    left: 50%;
    bottom: 10%;
    margin: 0 auto;
    border-left: 3px solid #007c33;
    content: "";
  }

  .sff_green_cross::after {
    position: absolute;
    width: 80%;
    height: 50%;
    top: 0;
    left: 10%;
    right: 10%;
    border-bottom: 3px solid #007c33;
    content: "";
  }

  /*
    Offset bilde
  */
  .sff_offset_up_left {
    transform: translate(2em, -2em);
  }

  .sff_offset_left {
    transform: translate(2em, 0em);
  }

  .sff_offset_right {
    transform: translate(-2em, 0em);
  }

  .sff_offset_up {
  }

  .sff_offset_down {
    transform: translate(0em, 2em);
  }

  .sff_scale_up {
    transform: scale(1.25, 1.25);
  }

  /*
    Grønn hake
  */
  .sff_border_right::before {
    position: absolute;
    top: -1em;
    right: -1em;
    content: ""; /* This is necessary for the pseudo element to work. */
    /*display: block;*/ /* This will put the pseudo element on its own line. */
    width: 60%; /* Change this to whatever width you want. */
    height: 60%;
    max-width: 260px;
    max-height: 260px;
    border-top: 3px solid #007c33; /* This creates the border. Replace black with whatever color you want. */
    border-right: 3px solid #007c33; /* This creates the border. Replace black with whatever color you want. */
    z-index: 11;
  }

  .sff_border_left::before {
    position: absolute;
    top: -1em;
    left: -1em;
    content: ""; /* This is necessary for the pseudo element to work. */
    /*display: block;*/ /* This will put the pseudo element on its own line. */
    width: 60%; /* Change this to whatever width you want. */
    height: 60%;
    max-width: 260px;
    max-height: 260px;
    border-top: 3px solid #007c33; /* This creates the border. Replace black with whatever color you want. */
    border-left: 3px solid #007c33; /* This creates the border. Replace black with whatever color you want. */
    z-index: 11;
  }

  .sff_img_contain {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .sff_expand-right {
    margin-right: -8em;
    padding-right: 8em;
  }

  .sff_expand-width {
    margin-right: -8em;
    margin-left: -8em;
  }

  .sff_expand_small-right {
    margin-right: -3.5em;
  }

  .sff_expand-left {
    margin-left: -8em;
  }

  .sff_expand-up {
    margin-top: -2em;
  }
}

.makeBold a:hover {
  transform: scale(1.1);
  font-weight: bold;
  display: inline-block;
}

.sff_stock_image {
  height: 683px !important;
}

.sff_material_grades_padding {
  padding: 3rem !important;
}

@media only screen and (max-width: 1000px) {
  .sff_stock_image {
    min-height: unset !important;
    height: 250px !important;
  }

  .sff_social_responisibility_image {
    min-height: unset !important;
    height: 280px !important;
  }

  .sff_material_grades_padding {
    padding: 1rem !important;
  }
}