:root {
    font-size: 15px
}

html * {
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    text-rendering: optimizelegibility;
    letter-spacing: normal;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html,
body {
    font-size: 100%;
    line-height: 2rem;
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'visuelt', 'San Francisco', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-display: swap;
}

a,
.link {
    cursor: pointer;
    text-decoration: none;
    color: #000;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

a.image-link picture{
     -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}
a.image-link:hover picture{
    opacity: 0.8;
}

picture img{
    max-width: 100%;
}

.hero a {
    color: inherit;
    padding-bottom: 2px
}

.button {
    display: -webkit-inline-box;
    display: inline-flex;
    padding: 0.2rem 1rem 0.3rem 1rem;
    background: white;
    border: 2px solid #222;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.5s;
    transition: 0.5s
}

.button:hover {
    background: white;
    border: 2px solid #222;
    color: inherit;
    border-radius: 5rem;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.5s;
    transition: 0.5s
}

a::after,
.link::after:not(#footer) {
    content: '';
    position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    border-bottom: rgba(0, 0, 0, 0) solid 2px;
    -webkit-transition-property: border-bottom-color;
    transition-property: border-bottom-color;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.hero a:hover {
    color: inherit;
    border-bottom: 2px solid
}

a:hover::after,
.link:hover::after {
    border-bottom-color: rgba(0, 0, 0, 0.6)
}

p {
    margin-bottom: 2rem
}

ul {
    list-style: none
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-light.woff") format("woff"), url("../fonts/visuelt-light.woff2") format("woff2");
    font-display: swap;
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-light-italic.woff") format("woff"), url("../fonts/visuelt-light-italic.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-regular.woff") format("woff"), url("../fonts/visuelt-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-italic.woff") format("woff"), url("../fonts/visuelt-italic.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-medium.woff") format("woff"), url("../fonts/visuelt-medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-medium-italic.woff") format("woff"), url("../fonts/visuelt-medium-italic.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-bold.woff") format("woff"), url("../fonts/visuelt-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-bold-italic.woff") format("woff"), url("../fonts/visuelt-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: 'visuelt';
    src: url("../fonts/visuelt-black.woff") format("woff"), url("../fonts/visuelt-black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: 'visuelt';
    font-display: swap;
    src: url("../fonts/visuelt-black-italic.woff") format("woff"), url("../fonts/visuelt-black-italic.woff2") format("woff2");
    font-weight: 900;
    font-style: italic
}

.font__visuelt {
    font-family: 'visuelt'
    font-display: swap;
}

/*@font-face {
    font-family: 'Calibre';
    src: url("../fonts/CalibreWeb-Light.woff2") format("woff2"), url("../fonts/CalibreWeb-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Calibre';
    src: url("../fonts/CalibreWeb-Regular.woff2") format("woff2"), url("../fonts/CalibreWeb-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Calibre';
    src: url("../fonts/CalibreWeb-RegularItalic.woff2") format("woff2"), url("../fonts/CalibreWeb-RegularItalic.woff") format("woff");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: 'Calibre';
    src: url("../fonts/CalibreWeb-Bold.woff2") format("woff2"), url("../fonts/CalibreWeb-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal
}

.font__Calibre {
    font-family: 'Calibre'
}*/

p,
li {
    font-size: 1.45rem;
    line-height: 2.2rem;
    font-weight: 400;
    text-rendering: optimizeLegibility
}

[typo*="title"] li,
[typo*="title"] {
    font-size: 4.4rem;
    line-height: 5rem;
    font-weight: 900;
    margin-bottom: 2rem
}

[typo*="headline"] {
    font-size: 3.0667rem;
    line-height: 1.2;
    font-weight: 900;
    margin-bottom: 2rem
}

[typo*="subheadline"] {
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 400;
    margin-bottom: 2rem;
    letter-spacing: 0
}

[typo*="subheading"] {
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 900;
    margin-bottom: 2rem;
    letter-spacing: 0
}

[typo*="heading"] {
    font-size: 1.6rem;
    line-height: 2rem;
    margin-top: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0
}

[typo*="hvaskjeringress"],
[typo*="hvaskjeringress"] p {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 1rem
}

[typo*="lead"] {
    font-size: 1.75rem;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0
}

[typo*="small"] {
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 1rem
}

[typo*="xsmall"] {
    font-size: 0.9rem;
    line-height: 1.1rem;
    font-weight: 400
}

[typo*="center"] {
    text-align: center
}

[typo*="right"] {
    text-align: right
}

[typo*="left"] {
    text-align: left
}

[typo*="negative"] {
    color: #fff
}

[typo*="black"] {
    font-weight: 900
}

[typo*="bold"] {
    font-weight: 700
}

[typo*="medium"] {
    font-weight: 500
}

[typo*="regular"] {
    font-weight: 400
}

[typo*="light"] {
    font-weight: 300
}

[typo*="negative"] {
    color: #ffffff
}

[typo*="positive"] {
    color: #000000
}

[typo*="gradient"] {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    position: relative
}

@media screen and (max-width: 736px) {

    [typo*="title"] li,
    [typo*="title"] {
        font-size: 2.6rem;
        line-height: 3rem
    }

    [typo*="headline"] {
        font-size: 2.1rem;
        line-height: 2.5rem;
        margin-bottom: 2rem
    }

    [typo*="lead"] {
        font-size: 1.55rem;
        line-height: 1.45;
        letter-spacing: 0
    }
}

.caption p {
    font-size: 1.1rem;
    font-weight: 400;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    opacity: 0.4
}

.caption p:hover {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    opacity: 1
}

.artikkel {
    font-size: 1.2rem;
    font-weight: 300
}

.artikkel a div {
    border: 3px solid transparent;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.5s;
    transition: 0.5s
}

.artikkel a div:hover {
    border: 3px solid black;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    background-color: white
}

.artikkel {
    line-height: 1.5
}

.article__content ul {
    list-style: disc;
    margin-left: 1.5rem
}

.article__content ul li {
    margin-bottom: 1rem
}

.kontaktinfo {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0
}

.fornavn {
    margin: 0
}

.etternavn {
    font-size: 1.7rem;
    line-height: 1.2;
    margin-bottom: 1rem
}

.epost {
    margin-bottom: 1.5rem
}

.kontaktinfo a:hover {
    text-decoration: underline
}

.hide {
    display: none
}

.show-for-tablet-down {
    display: none
}

@media screen and (max-width: 1200px) {
    .show-for-desktop {
        display: none !important
    }

    .show-for-tablet-down {
        display: block !important
    }
}

.show-for-mobile-only {
    visibility: hidden
}

@media screen and (max-width: 736px) {
    .show-for-mobile-only {
        visibility: visible
    }
}

.grid {
    margin: 0 4rem
}

[layout*="artikkel"].grid {
    grid-template-areas: ". a a a ."". b b b ."". c c c ."
}

@media screen and (min-width: 1285px) {
    .grid {
        max-width: 100%;
        padding-left: calc((100% - 84rem) / 2);
        padding-right: calc((100% - 84rem) / 2);
        margin: 0 2rem
    }
}

[layout] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 4rem
}

@media screen and (max-width: 736px) {
    [layout*="artikkel"].grid {
        grid-template-columns: auto;
        grid-template-areas: "a""b""c""d"
    }
}

[layout*="artikkel"] p a {
    text-decoration: underline
}

[layout*="tight"],
[grid*="tight"] {
    grid-column-gap: 0;
    grid-gap: 0
}

[grid*="bottom"] {
    align-self: flex-end
}

[grid*="bottom"] p {
    margin-bottom: 0
}

[grid*="margin-Nx2"] {
    margin-top: 0;
    margin-bottom: 4rem
}

[grid*="margin-x2"] {
    margin-top: 4rem;
    margin-bottom: 4rem
}

[grid*="margin-x4"] {
    margin-top: 8rem;
    margin-bottom: 8rem
}

[grid*="padding-x2"] {
    padding-top: 4rem;
    padding-bottom: 4rem
}

[grid*="padding-x2y4"] {
    padding-top: 4rem;
    padding-bottom: 8rem !important
}

[grid*="padding-x4"] {
    padding-top: 8rem;
    padding-bottom: 8rem
}

@media screen and (max-width: 736px) {
    [grid*="margin-x2"] {
        margin-top: 1rem;
        margin-bottom: 1rem
    }

    [grid*="margin-x2y4"] {
        margin-top: 1rem;
        margin-bottom: 2rem !important
    }
}

[grid*="item-A"] {
    grid-area: a
}

[grid*="item-B"] {
    grid-area: b
}

[grid*="item-C"] {
    grid-area: c
}

[grid*="item-D"] {
    grid-area: d
}

[grid*="item-E"] {
    grid-area: e
}

[grid*="item-F"] {
    grid-area: f
}

[grid*="item-G"] {
    grid-area: g
}

[grid*="item-H"] {
    grid-area: h
}

[grid*="item-I"] {
    grid-area: i
}

[grid*="item-J"] {
    grid-area: j
}

[grid*="item-K"] {
    grid-area: k
}

[grid*="item-L"] {
    grid-area: l
}

[grid*="item-M"] {
    grid-area: m
}

[grid*="item-N"] {
    grid-area: n
}

[grid*="item-O"] {
    grid-area: o
}

[grid*="item-P"] {
    grid-area: p
}

[grid*="item-Q"] {
    grid-area: q
}

[grid*="item-R"] {
    grid-area: r
}

[grid*="item-S"] {
    grid-area: s
}

[grid*="item-T"] {
    grid-area: t
}

[grid*="item-U"] {
    grid-area: u
}

[grid*="item-V"] {
    grid-area: v
}

[grid*="item-W"] {
    grid-area: w
}

[grid*="item-X"] {
    grid-area: x
}

[grid*="item-Y"] {
    grid-area: y
}

[grid*="item-Z"] {
    grid-area: z
}

[grid*="item-Z1"] {
    grid-area: z1
}

[grid*="item-Z2"] {
    grid-area: z2
}

[grid*="item-Z3"] {
    grid-area: z3
}

[grid*="item-Z4"] {
    grid-area: z4
}

[grid*="item-Z5"] {
    grid-area: z5
}

[grid*="item-Z6"] {
    grid-area: z6
}

[grid*="item-Z7"] {
    grid-area: z7
}

[grid*="item-Z8"] {
    grid-area: z8
}

[grid] {
    background-color: rgba(255, 0, 0, 0)
}

[grid*="size-1"] {
    grid-column: span 5
}

[grid~="size-1of5"] {
    grid-column: span 1
}

[grid~="size-2of5"] {
    grid-column: span 2
}

[grid~="size-3of5"] {
    grid-column: span 3
}

[grid~="size-4of5"] {
    grid-column: span 4
}

[grid~="push-1"] {
    grid-column-start: 2
}

[grid~="push-2"] {
    grid-column-start: 3
}

header,
#header {
    position: relative;
    z-index: 1000;
    width: 100%;
    max-height: 16rem;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 4rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    /*-webkit-box-pack: justify;*/
    justify-content: space-between;
}



header a {
    text-decoration: none;
    color: #000;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

header a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    border-bottom: rgba(0, 0, 0, 0) solid 2px;
    border-radius: 2px;
    -webkit-transition-property: border-bottom-color;
    transition-property: border-bottom-color;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

header a:hover:after {
    border-bottom-color: rgba(0, 0, 0, 0.6)
}

header a.is-active {
    color: #444
}

header a.is-active:after {
    border-bottom-color: rgba(0, 0, 0, 0.6)
}

header a.havnevik__logo {
    cursor: pointer
}

header a.havnevik__logo:after {
    border-bottom-color: rgba(0, 0, 0, 0)
}

nav#header__navigation {
    -ms-grid-row-align: center;
    align-self: center
}

#header__navigation--mobile-container {
    display: none
}

ul#header__navigation--menu {
    list-style-type: none;
    display: -webkit-box;
    display: flex
}

ul#header__navigation--menu li {
    margin-left: 2rem;
    font-size: 1.2rem;
    font-weight: 400
}

header #header__navigation--mobile-container span.line {
    width: 2rem;
    height: 2px;
    background-color: #000;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}

header #header__navigation--mobile-container span.line:nth-child(1),
header #header__navigation--mobile-container span.line:nth-child(3) {
    width: 1.75rem
}

header #header__navigation--mobile-container.is-active span.line:nth-child(1) {
    -webkit-transform: translateY(0.5rem) translateX(0.25rem) rotate(-45deg);
    transform: translateY(0.5rem) translateX(0.25rem) rotate(-45deg)
}

header #header__navigation--mobile-container.is-active span.line:nth-child(2) {
    opacity: 0;
    -webkit-transform: translateY(2.25rem);
    transform: translateY(2.25rem)
}

header #header__navigation--mobile-container.is-active span.line:nth-child(3) {
    -webkit-transform: translateY(-0.45rem) translateX(0.25rem) rotate(45deg);
    transform: translateY(-0.45rem) translateX(0.25rem) rotate(45deg)
}

@media screen and (max-width: 736px) {

    header,
    #header {
        max-height: 6rem;
        padding: 2rem;
		padding-left:1rem;
        position: relative;
		
    }

    header .havnevik__logo--brandmark svg {
        width: 2rem;
        height: 2rem
    }

    #header__navigation--mobile-container {
        display: block
    }

    ul#header__navigation--menu {
        display: none
    }
}

#header__bouy {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.header__bouy {
    opacity: 0
}

#header__bouy--beacon,
#header__bouy--anchor {
    max-width: 50%;
    flex-basis: 50%
}

#header__bouy--beacon {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row
}

#header__bouy--beacon a,
#header__bouy--beacon p {
    -webkit-box-align: center;
    align-items: center;
    padding-right: 0;
    margin: 0
}

#header__bouy--beacon p {
    line-height: 3rem;
    margin-left: 0.5rem
}

#header__bouy--anchor {
    text-align: right
}

@media screen and (min-width: 736px) and (max-width: 1320px) {
    #header__bouy {
        padding: 2rem
    }
}

@media screen and (max-width: 736px) {
    #header__bouy {
        display: none
    }
}

#navigation__menu--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    z-index: 1000;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    opacity: 1;
    background: #000
}

#navigation__menu--fullscreen.isHidden {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
    display: none
}

#navigation__menu--fullscreen-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #fff;
    display: -webkit-box;
    display: flex
}

#navigation__menu--fullscreen ul li {
    text-align: left
}

#navigation__menu--fullscreen ul li a {
    -webkit-transition-property: border-bottom;
    transition-property: border-bottom;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    color: #fff;
    border-bottom: 2px solid #fff;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: flex
}

#navigation__menu--fullscreen ul li a:hover {
    color: #fff;
    border-bottom: 2px solid white
}

svg.hdot {
    height: 3.8rem
}

footer {
    background-color: #222;
    padding: 4rem 2rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row
}

footer.grid {
    margin: 0
}

footer div:first-child {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: end;
    justify-content: flex-end
}

footer div:last-child {
    color: #fff
}

footer p {
    margin-bottom: 0
}

footer #footer__navigation {
    margin-bottom: 4rem
}

footer a {
    text-decoration: none;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 3.5rem;
    -webkit-transition-property: color background;
    transition-property: color background;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

footer #company a {
    font-size: 1rem;
    line-height: 2rem
}

footer a:hover,
footer .link:hover,
footer a:hover::after,
footer .link:hover::after {
    border-bottom-color: rgba(0, 0, 0, 0)
}

footer a:hover::after {
    border: none
}

footer .havnevik__logo--brandmark {
    margin-bottom: 2rem
}

footer .havnevik__logo--brandmark svg {
    width: 10rem;
    fill: #ffffff
}

footer .havnevik__logo--logotype svg {
    fill: #ffffff;
    margin-bottom: 1rem
}

.no-touch footer .link.social {
    display: none
}

@media screen and (max-width: 736px) {

    footer,
    #footer {
        padding: 2rem
    }

    footer div:last-child {
        grid-column: span 5
    }

    footer div:last-child p {
        text-align: left
    }

    footer a::after {
        content: '';
        display: none
    }

    footer a:hover {
        color: #fff
    }
}

.hero {
    height: 810px;
    height: calc(100vh);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.hero::after {
    content: "";
    background-size: cover;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1
}

#home .hero {
    height: calc(60vh)
}

#hero__omoss {
    background-color: #000
}

#hero__omoss::after {
    content: "";
    background: url(https://picsum.photos/1380/810);
    background-size: cover;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1
}

figure {
    overflow: hidden
}

.artikkelbilde {
    width: 100%
}

#nyhetsliste .artikkelbilde {
    height: 30rem;
    background-size: cover;
    background-position: center center
}

.grid figure img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    line-height: 0;
    border-radius: 0px
}

.grid .portfolio__image .portfolio__item {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 0;
    border-radius: 0px
}

[layout*="home"] .portfolio__image a div:hover,
a .artikkelbilde:hover {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    opacity: 0.76
}

[layout*="home"] .portfolio__image a div,
a .artikkelbilde {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    opacity: 1
}

[layout*="list"] {
    grid-auto-rows: 1fr;
    grid-gap: 2rem;
    align-content: space-between;
    margin-left: 2rem;
    margin-right: 2rem
}

[layout*="nyhetsliste"] {
    grid-auto-rows: 3fr;
    grid-gap: 4rem;
    align-content: space-between;
    margin-left: calc((100% - 84rem) / 2);
    margin-right: calc((100% - 84rem) / 2);
    grid-template-columns: repeat(3, 1fr)
}

[layout*="list"] li.list__item,
[layout*="list"] a li.list__item {
    padding-bottom: 100%;
    position: relative
}

[layout*="list"] li.list__item .list__item--content {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

[layout*="list"] li.list__item .list__item--content.list__item--content-v-centered {
    -webkit-box-align: center;
    align-items: center
}

[layout*="list"] li.list__item .list__item--content.list__item--content-h-centered {
    -webkit-box-pack: center;
    justify-content: center
}

[layout*="list"] li.list__item .list__item--content.list__item--content-v-bottom {
    -webkit-box-pack: end;
    justify-content: flex-end
}

[layout*="list"] li.list__item .list__item--content img.list-item__content--image {
    max-width: calc(100% - 4rem);
    max-height: 40%;
    height: auto
}

#kundene-våre [layout*="list"] li.list__item .list__item--content img.list-item__content--image {
    max-width: calc(100% - 2rem);
    max-height: none;
    height: auto;
    position: absolute
}

[grid*="box-large"] {
    grid-template-columns: 1fr
}

[grid*="box-big"] {
    grid-template-columns: 1fr 1fr
}

[grid*="box-medium"] {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

[grid*="box-small"] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem
}

[grid*="box-large"] li {
    min-width: 100%
}

[grid*="box-large"] li,
[grid*="box-big"] li {
    border-radius: 6px;
    overflow: hidden
}

[grid*="box-medium"] li,
[grid*="box-small"] li,
[grid*="box-medium"] a li,
[grid*="box-small"] a li {
    border-radius: 0px;
    overflow: hidden
}

@media screen and (max-width: 1300px) {
    [layout*="nyhetsliste"] {
        margin-left: 2rem;
        margin-right: 2rem
    }
}

@media screen and (max-width: 1200px) {
    [layout*="list"] li.list__item .list__item--content {
        padding: 1rem
    }
}

@media screen and (max-width: 1080px) {
    [grid*="box-medium"] {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem
    }

    [grid*="box-small"] {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }

    [layout*="nyhetsliste"] {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width: 736px) {
    [grid*="box-big"] {
        grid-template-columns: 1fr
    }

    [grid*="box-medium"] {
        grid-template-columns: 1fr 1fr
    }

    [grid*="box-small"] {
        grid-template-columns: 1fr 1fr 1fr
    }

    [layout*="nyhetsliste"] {
        grid-template-columns: auto;
        margin-left: 2rem;
        margin-right: 2rem
    }
}

.bleed [layout*="referenceList"][grid*="box-large"] a li h3 {
    max-width: 84rem;
    margin: 0 auto
}

.bleed [layout*="referenceList"][grid*="box-big"] a:nth-child(odd) li {
    border-radius: 0 6px 6px 0
}

.bleed [layout*="referenceList"][grid*="box-big"] a:nth-child(even) li {
    border-radius: 6px 0 0 6px
}

.bleed [layout*="referenceList"][grid*="box-medium"] a:nth-child(3n) li {
    border-radius: 0 6px 6px 0
}

.bleed [layout*="referenceList"][grid*="box-medium"] a:nth-child(3n+3) li {
    border-radius: 6px 0 0 6px
}

.bleed [layout*="referenceList"][grid*="box-big"] {
    grid-gap: 4rem
}

.bleed [layout*="referenceList"][grid*="box-big"] a li.list__item,
[layout*="referenceList"][grid*="box-large"] a li.list__item {
    padding-bottom: 75%
}

.bleed [layout*="referenceList"][grid*="box-big"] li.list__item .list__item--content,
.bleed [layout*="referenceList"][grid*="box-large"] li.list__item .list__item--content {
    padding: 4rem
}

.bleed [layout*="referenceList"][grid*="box-medium"] {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem
}

[grid*="home"] {
    grid-template-areas: "1fr 2fr""2fr 1fr";
    grid-gap: 6rem;
    margin-left: 4rem;
    margin-right: 4rem
}

.referenceList::after {
    content: "";
    background-size: cover;
    background-position: center;
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1
}

.referenceList h3,
.referenceList::after {
    -webkit-transition-property: opacity transform;
    transition-property: opacity transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.referenceList:hover::after {
    opacity: 0
}

.referenceList h3 {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    margin-bottom: 0
}

.referenceList:hover h3 {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.referenceList .referenceLogo {
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: 0
}

.referenceList:hover .referenceLogo {
    opacity: 1
}

.referenceList .referenceLogo {
    max-width: 200px;
    position: absolute
}

@media screen and (min-width: 2200px) {
    [layout*="referenceList"] li h3 {
        width: 80%
    }
}

@media screen and (min-width: 1600px) {

    .bleed [layout*="referenceList"][grid*="box-big"] a li.list__item,
    [layout*="referenceList"][grid*="box-large"] a li.list__item {
        padding-bottom: 65%
    }

    .grid [layout*="referenceList"][grid*="box-large"] li.list__item .list__item--content {
        padding: 4rem
    }

    .grid [layout*="referenceList"] li h3 {
        width: 60%
    }
}

/*@media screen and (max-width: 1100px) {
    [layout*="referenceList"] {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%
    }
}*/

@media screen and (max-width: 736px) {
    .grid {
        margin-left: 1rem;
        margin-right: 1rem
    }

    .hero .grid {
        margin-left: 2rem;
        margin-right: 2rem
    }

    .bleed {
        margin-left: 0;
        margin-right: 0
    }

    .grid [layout*="referenceList"][grid*="box-large"],
    .grid [layout*="referenceList"][grid*="box-big"],
    .grid [layout*="referenceList"][grid*="box-medium"],
    .grid [layout*="referenceList"][grid*="box-small"],
    .bleed [layout*="referenceList"][grid*="box-large"],
    .bleed [layout*="referenceList"][grid*="box-big"],
    .bleed [layout*="referenceList"][grid*="box-medium"],
    .bleed [layout*="referenceList"][grid*="box-small"] {
        grid-gap: 1rem
    }

    [grid*="tight"] [layout*="referenceList"][grid*="box-large"],
    [grid*="tight"] [layout*="referenceList"][grid*="box-big"],
    [grid*="tight"] [layout*="referenceList"][grid*="box-medium"],
    [grid*="tight"] [layout*="referenceList"][grid*="box-small"] {
        grid-column-gap: 0;
        grid-gap: 0
    }

    .grid [layout*="referenceList"][grid*="box-small"] a li.list__item,
    .grid [layout*="referenceList"][grid*="box-medium"] a li.list__item,
    .grid [layout*="referenceList"][grid*="box-big"] a li.list__item,
    .grid [layout*="referenceList"][grid*="box-large"] a li.list__item {
        padding-bottom: 150%
    }

    .bleed [layout*="referenceList"][grid*="box-small"] a li.list__item,
    .bleed [layout*="referenceList"][grid*="box-medium"] a li.list__item,
    .bleed [layout*="referenceList"][grid*="box-big"] a li.list__item,
    .bleed [layout*="referenceList"][grid*="box-large"] a li.list__item {
        padding-bottom: calc(150% - 3rem);
        border-radius: 0
    }

    .grid [layout*="referenceList"][grid*="box-small"] li.list__item .list__item--content,
    .grid [layout*="referenceList"][grid*="box-medium"] li.list__item .list__item--content,
    .grid [layout*="referenceList"][grid*="box-big"] li.list__item .list__item--content,
    .grid [layout*="referenceList"][grid*="box-large"] li.list__item .list__item--content,
    .bleed [layout*="referenceList"][grid*="box-small"] li.list__item .list__item--content,
    .bleed [layout*="referenceList"][grid*="box-medium"] li.list__item .list__item--content,
    .bleed [layout*="referenceList"][grid*="box-big"] li.list__item .list__item--content,
    .bleed [layout*="referenceList"][grid*="box-large"] li.list__item .list__item--content {
        padding: 2rem
    }

    .grid [layout*="referenceList"][grid*="box-small"],
    .grid [layout*="referenceList"][grid*="box-medium"],
    .grid [layout*="referenceList"][grid*="box-big"],
    .grid [layout*="referenceList"][grid*="box-large"],
    .bleed [layout*="referenceList"][grid*="box-small"],
    .bleed [layout*="referenceList"][grid*="box-medium"],
    .bleed [layout*="referenceList"][grid*="box-big"],
    .bleed [layout*="referenceList"][grid*="box-large"] {
        grid-template-columns: 1fr
    }

    .referenceList::after {
        opacity: 1
    }

    .referenceList h3 {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        font-size: 1.2rem;
        line-height: 1.6rem;
        font-weight: 400
    }
}

[layout*="portfolio"] {
    -ms-grid-columns: 1fr [2];
    grid-template-columns: repeat(2, 1fr);
    align-content: space-between
}

[layout*="portfolio"] li {
    min-height: 34rem;
    padding: 4rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

[layout*="portfolio"] li h3 {
    width: 80%
}

li.even,
li.even::after {
    border-radius: 0 6px 6px 0
}

li.odd,
li.odd::after {
    border-radius: 6px 0 0 6px
}





.case_item-poster{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
    -webkit-transition-property: opacity transform;
    transition-property: opacity transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
	
}
.case_item-poster > img{
   object-fit: cover;
   width: 100%;
   max-width: 100%; 
   height: 100%;
   max-height: 100%;
}


.case_item-icon,
.case_item-copy{
	position: relative;
}

.case_item-icon{
	z-index: 2;
}
.case_item-copy{
	z-index: 3;
}

.case_item:hover .case_item-poster{ opacity: 0; }


/*
.portfolio__case::after {
    content: "";
    background-size: cover;
    background-position: center;
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1

.portfolio__case::after {
    -webkit-transition-property: opacity transform;
    transition-property: opacity transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.portfolio__case:hover::after {
    opacity: 0.3
}
}

*/
.portfolio__case h3{
    -webkit-transition-property: opacity transform;
    transition-property: opacity transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}



.portfolio__case h3 {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    margin-bottom: 0
}

.portfolio__case:hover h3 {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.link-list {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap
}

.link-list li {
    padding-top: 1.2rem;
    padding-bottom: 0.2rem;
    margin-bottom: 2rem
}

.link-list li.link::after {
    cursor: pointer;
    top: 4rem
}

.link-list li.link.active:active {
    color: #ddd
}

.link-list li.link.active:active::after {
    border-bottom-color: rgba(0, 0, 0, 0)
}

.link-list li.link.active {
    color: #444
}

.link-list li.link.active::after {
    border-bottom-color: rgba(0, 0, 0, 0.6)
}

li.portfolio__filter--link {
    position: relative;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: rgba(0, 0, 0, 0)
}

li.portfolio__filter--link.active::before {
    position: absolute;
    content: '⨯';
    margin-left: -1rem
}

li.portfolio__filter--link:hover {
    color: #666;
    border-bottom-color: rgba(0, 0, 0, 0.6)
}

li.portfolio__filter--link.active {
    border-bottom-color: rgba(0, 0, 0, 0.6)
}

ul#portfolio__services--list {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-top: 2rem;
    margin-bottom: 2rem
}

ul#portfolio__services--list li {
    margin-left: 2rem;
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: normal;
    line-height: 2rem
}

.portfolio__video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto
}

.portfolio__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 1100px) {
    [layout*="portfolio"] {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%
    }

    [layout*="portfolio"] li {
        min-height: 32rem
    }

    [layout*="portfolio"] li:nth-child(odd),
    [layout*="portfolio"] li:nth-child(odd)::after,
    [layout*="portfolio"] li:nth-child(even),
    [layout*="portfolio"] li:nth-child(even)::after {
        border-radius: 0 !important
    }
}

@media screen and (min-width: 1600px) {
    [layout*="portfolio"] li {
        min-height: 40rem
    }
}

@media screen and (min-width: 2200px) {
    [layout*="portfolio"] li {
        min-height: 54rem
    }

    [layout*="portfolio"] li h3 {
        width: 60%
    }
}

@media screen and (max-width: 736px) {
    .link-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    [layout*="portfolio"] li:nth-child(odd)::after,
    [layout*="portfolio"] li:nth-child(even)::after {
        border-radius: 6px 6px 0 0 !important
    }

    [layout*="portfolio"] li:nth-child(odd),
    [layout*="portfolio"] li:nth-child(even) {
        border-radius: 6px !important
    }

    [layout*="portfolio"] li {
        padding: 2rem 1rem;
        margin-left: 1rem;
        margin-right: 1rem
    }

    .portfolio__case::after {
        max-height: 24rem
    }

    .portfolio__case h3 {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        font-size: 1rem;
        line-height: 1.5rem
    }

    [layout*="portfolio"] li h3 {
        width: 100%
    }
}
/*  ------------------------------------------- 
    SECRECT SEO TRICK
     ------------------------------------------ */
    .visuallyhidden,
    .documnet-header-for-seo{
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        -webkit-clip-path:inset(0px 0px 99.9% 99.9%);
        clip-path: inset(0px 0px 99.9% 99.9%);
        overflow: hidden;
        height: 1px;
        width: 1px;
        padding:0;
        border:0;
        top:50%;}

.js-opacity-one {
    opacity: 1
}

.js-opacity-zero {
    opacity: 0
}