@font-face { 
    font-family: 'GjensidigeSansOT-Regular'; 
    src: url('assets/fonts/GjensidigeSansOT-Regular.otf') format("opentype"); 
    font-weight: normal; 
}

@font-face { 
    font-family: 'GjensidigeSansOT-Medium'; 
    src: url('assets/fonts/GjensidigeSansOT-Medium.otf') format("opentype"); 
    font-weight: normal; 
}

@font-face { 
    font-family: 'GjensidigeSansOT-Bold'; 
    src: url('assets/fonts/GjensidigeSansOT-Bold.otf') format("opentype"); 
    font-weight: normal; 
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #FFF5D7;
    color: #233F53;
    font-family: 'GjensidigeSansOT-Regular';
    line-height: 1.6;
    position: relative;    
}

* {
    box-sizing: border-box;
}

header {
    position: relative;
    z-index: 20;
}
.headers {
    background-color: #233F53;
    color: #FFF5D7;
    width: 100%;
    height: auto;
    display: grid;
}

.wrapper {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 20px;    
    display: grid;
}

.headers .wrapper {
    grid-template-columns: auto auto;
    align-items: center;
    display: grid;
}
.logo-wrapper a { display: inline-block;}
.logo-wrapper img {
    max-width: 90px;    
    display: block;
}
.logo-wrapper {display: flex;}
.menu-wrapper {
    grid-gap: 40px;
    display: flex;
    justify-content: end;    
}

.menu-wrapper svg {
    fill: #FFF5D7;
    width: 100%;
    max-width: 30px;
    cursor: pointer;
}

.menu-wrapper a {
    text-decoration: none;
    color: #FFF5D7;
    font-size: 18px;
    font-family: 'GjensidigeSansOT-Bold';
    text-transform: uppercase;
    display: none;
}

/* .hero {
    background-color: #98C7D9;
    height: calc(100vh - 120px);
} */

.hero .wrapper {
    grid-template-columns: 1fr;
    padding: 0;
}


.wrapper .content {
    order: 2;
    padding: 20px;
    line-height: 1.3;
}
.image {
    background-color: #98C7D9;
}
.image img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.buttons a:first-of-type,
.logos a:first-of-type { margin-right: 15px; }
.logos img {
    max-width: 110px;
    max-height: 25px;    
}
.siste-måned,
.oppsummering,
.intervju,
.resultater,
.premier { line-height: 1.3;}

.siste-måned h2,
.oppsummering h2,
.intervju h2,
.resultater h2,
.premier h2,
.content .text h2 { font-family: 'GjensidigeSansOT-Bold'; font-size: 26px; margin: 10px 0;}

.siste-måned p,
.oppsummering p,
.intervju p,
.resultater p,
.premier p,
.siste-måned a,
.oppsummering a,
.content .text p { font-family: 'GjensidigeSansOT-Regular'; font-size: 18px; margin: 10px 0 20px 0;}

.siste-måned a,
.oppsummering a { color:#233F53; }

.stilisert-tabell {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 16px;
    font-family: 'GjensidigeSansOT-Regular';
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); */
}

.stilisert-tabell thead tr {
    background-color: #233F53;
    color: #FFF5D7;
    text-align: left;
}

.stilisert-tabell tbody { background-color: #f0f8ff7a;}
.stilisert-tabell tbody tr { border: 1px solid #233F53;}
.stilisert-tabell th,
.stilisert-tabell td {
    padding: 12px 15px;
}


.intervju h1 { font-size: 22px;}
.intervju span {
    margin-top: -10px;
    display: block;
}

.intervju p.question {
    font-family: 'GjensidigeSansOT-Bold';
}

.buttons { display: grid; grid-gap: 10px; }
.buttons a {
    background: #233F53;
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;    
    width: fit-content;
    width: max-content;
}


.andre-har-gjettet {
    background-color: #233F53;
    color: #FFF5D7;
}

.filtere {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 20px 0;
    font-size: 0;
    align-items: center;
    line-height: 1;    
}



div.filtere input, div.filtere span {
    display: block;
    width: 47% !important;
    padding: 10px 15px !important;
    font-family: 'GjensidigeSansOT-Regular';
    box-sizing: border-box;
    font-size: 14px !important;
    border-radius: 5px;
}

div.filtere svg, div.filtere span svg {
    fill: #FFF5D7;
    width: 18px;
    height: 18px;
}

.andre-har-gjettet input {
    background: none;
    border: 1px solid #FFF5D7;
    outline: none;
    max-width: 100%;
    color: #FFF5D7;
}
input#getName {
    font-family: 'GjensidigeSansOT-Regular';
    cursor: default;
}


input#findMe::placeholder,
input#getName::placeholder {
    color: #FFF5D7;
    font-family: 'GjensidigeSansOT-Regular'; 
    opacity: 1;
}
input#findMe:-ms-input-placeholder,
input#getName:-ms-input-placeholder,
input#getName::-ms-input-placeholder{
    color: #FFF5D7;
    font-family: 'GjensidigeSansOT-Regular'; 
}

svg.bino {
    margin-left: -70px;
}

.andre-har-gjettet span.filtrer {
    border: 1px solid #FFF5D7;
    outline: none;
    max-width: 100%;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.andre-har-gjettet .wrapper h2 {
    margin: 0;
}

div.filtere span svg {
    position: absolute;
    right: 20px;
    bottom: 8px;
}
.utvalg { width: 100%;}

.utvalg-wrapper {
    padding: 30px;
    background-color: white;
    color: #233F53;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    position: relative;
    padding-bottom: 50px;    
}

span.range-span-text {
    margin: 0 15px;
    font-family: 'GjensidigeSansOT-Bold';
}

div#rangeOptions {
    position: absolute;
    display: block;
    font-size: 16px;
    left: 50%;
    transform: translate(-50%);
    bottom: 15px;
    width: 100%;
}

div#rangeOptions span {
    margin: 0 5px;
    cursor: pointer;
    text-decoration: underline;
}

.skjul {
    display: none !important;
}
.resultatliste,
.oversikt {
    display: grid;
    grid-gap: 15px;    
}


.oversikt .innslag {
    background-color: white;
    border-radius: 5px;
    color: #233F53;    
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-areas:
        "1 3"
        "2 4";    
    grid-gap: 10px;
}
.resultatliste .innslagheader,
.resultatliste .innslag {
    background-color: white;
    border-radius: 5px;
    color: #233F53;    
    padding: 20px;
    display: grid;
    /* grid-template-columns: repeat(4, auto); */
    /* grid-template-columns: 35px 140px 60px 50px; */
    grid-template-columns: 1fr 3fr 3fr 1fr;
    
    grid-gap: 10px 0;
}




.innslag span.navn {
    font-size: 14px;
    font-family: 'GjensidigeSansOT-Bold';
}

.antall img {
    max-width: 32px;
    margin-right: 15px;
    height: 23px;    
}

.antall span {
    font-size: 14px;        
    /* font-family: 'GjensidigeSansOT-Bold'; */
}

.plass span { font-size: 14px;}
.diff { text-align: end; font-size: 14px;}
/* .diff span {
    font-size: 14px;    
} */

.ikon span{
    cursor: pointer;
    font-size: 14px;    
}
.ikon img {
    fill: #233F53;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;    
}

.antall {
    display: flex;
}

.navn {
    text-align: left;
    grid-area: 1;
    grid-column: 1/-1;
}

.resultatliste .navn {
    grid-area: unset;
    grid-column: unset;
}

.ikon {
    display: flex;
    justify-content: end;    
    align-items: center;
}

.siden {
    display: grid;
    display: none;
    grid-area: 1;
    justify-content: end;    
}

.detaljvisning {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    border-top: 1px solid;
    padding-top: 25px;
    background-color: white;
    border-radius: 0 0 5px 5px;
    color: #233F53;
    grid-column: 1/-1;    
}

.detail-view-month {
    width: 100%;
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

span.detail-label {
    font-size: 16px !important;
    display: block;
    line-height: 1 !important;    
    font-family: 'GjensidigeSansOT-Bold';
}

span.detail-value {
    font-size: 16px !important;
    line-height: 1 !important;
    font-family: 'GjensidigeSansOT-Regular';
}

span.load-more-results,
span.load-more-btn {
    display: flex;
    align-items: center;
    margin: 20px auto;
    width: fit-content;
    line-height: 1;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
}

.resultatliste .innslagheader {
    background-color: unset;
    padding: 0 15px;
    color: #FFF5D7;
    /* grid-template-columns: 40px 130px 70px 60px; */
}

.innslagheader .navn { padding-left: 5px;}
.innslagheader .diff {text-align: right;}

.innslagheader .antall {
    text-align: center;
}

svg.chevr-down {
    fill: #FFF5D7;
    margin-left: 10px;
    width: 20px;
    height: 20px;
}

.premier span#lesmer {
    text-decoration: underline;
    color: #233F53;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;    
    font-size: 18px;
}
.premier span img {
    display: inline-block;
    width: 20px;
    margin-left: 10px;    
}

.premier .cards {
    width: 100%;
    height: auto;
    display: grid;
    grid-gap: 20px;
    margin-top: 40px;
    font-family: 'GjensidigeSansOT-Bold';    
}

.cards .card {
    background-color: white;
    display: grid;
    padding: 30px;
    text-align: center;
    border-radius: 5px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;    
}

span.place {
    font-size: 22px;
    font-weight: 600;
    border-bottom: 1px solid #233F53;
    width: fit-content;
    padding: 3px 35px;
    margin: auto;
    margin-bottom: 5px;
}

span.prize {
    font-size: 36px;
    font-weight: 600;
}

footer p {
    font-size: 16px;
    line-height: 1.3;
}

footer p a {
    color: #233F53;
    text-decoration: none;
    font-weight: 600;    
}

footer .logos {
    margin: 30px 0;
}

.footerline {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
}

footer span.copyright {
    width: 100%;
}

.footerline span#seetermsFooter {
    color: #233F53;
    margin-right: 20px;
    text-decoration: underline;
    cursor: pointer;
}

.footerline span.isipisi {
    margin-left: 20px;
}

footer img.caricon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
}

footer .menu-wrapper { 
    margin-bottom: 30px;
    display: grid;
    width: 100%;
    grid-gap: 0;
    justify-content: flex-start;
}

footer .menu-wrapper a {
    display: block;
    color: #233F53;
    width: max-content;
    width: fit-content;
}

.mobile-menu{
    background-color: #233F53;
    color: #FFF5D7;
    display: grid;
    grid-gap: 10px;
    margin-top: 20px;
}

.mobile-menu a {
    color: #FFF5D7;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'GjensidigeSansOT-Bold';    
}

.vilkar {
    background-color: #fff;
    position: fixed;
    z-index: 5;
    box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
    padding: 30px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 96%;
    height: 96vh;
    overflow-y: auto;
    margin: auto;
    border: 3px solid #0c1332;    
}

.vilkar a {
    color: #0c1332;
}

#closeText {
    cursor: pointer;
    text-decoration: underline;    
}

svg.closeterms {
    width: 24px;
    height: 24px;
    left: 50px;
    bottom: -25px;
    cursor: pointer;
}


.ld-light {
    font-family: 'GjensidigeSansOT-Regular';
}
.ld-bold {
    font-family: 'GjensidigeSansOT-Bold';
}


.resultater {
    background-color: #233F53;
    color: #FFF5D7;    
}

.sok {
    width: 100%;
    position: relative;
    max-width: 400px;
    display: grid;
    align-items: center;    
    margin-bottom: 25px;
}

.resultatliste { margin-bottom: 15px;}

.sok input {
    width: 100%;
    /* padding: 10px; */
    background: none;
    border: 1px solid #FFF5D7;
    outline: none;
    color: #FFF5D7;
    font-family: 'GjensidigeSansOT-Regular';
    cursor: default;
    font-size: 18px !important;
    padding: 15px 20px !important;
    border-radius: 5px;    
}

.sok svg {
    top: 20px;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 15px;
    fill: #FFF5D7;    
}

.sok span {
    margin: 15px 0;
    display: block;
    cursor: pointer;
    background-color: white;
    border-radius: 5px;
    color: #233F53;
    padding: 10px;
    width: max-content;
    width: fit-content;
}

.intervju {
    background-color: #98C7D9;
}

img.vinnerbilde {
    border-radius: 20px;
    max-height: unset !important;
    max-width: 170px !important;    
    margin-top: 15px;
}

@media (min-width: 1140px) {
    .headers {
        min-height: 120px;
    }
    .menu-wrapper a {
        display: block;
    }

    .menu-wrapper svg {
        display: none;
    }

    .logo-wrapper img {
        max-width: 190px;
    }

    .hero { background-color: #98C7D9; height: calc(100vh - 120px); max-height: 850px; position: relative;}
    .hero .wrapper {
        grid-template-columns: 1fr 1fr;
        height: 100%;
    }

    .image img {
        width: 100%;
        /* max-width: 50vw; */
        bottom: 0;
        position: absolute;
        max-height: 700px;
        object-fit: contain;
        z-index: 2;
        left: -20vw;
    }

    .hero .wrapper .content {
        z-index: 5;
        display: grid;
        height: fit-content;
        max-width: 100%;
        margin: auto 4vw;
    }

    .logos img {
        max-width: 170px;
        max-height: 40px;        
    }

    .hero .text h2 {
        font-size: 38px;
        margin-top: 50px;
    }

    .hero .text p {
        font-size: 22px;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .buttons a { font-size: 20px; padding: 13px 26px; }

    .intervju {
        background-color: #FFF5D7;
    }

    .intervju .wrapper {
        max-width: 840px;
        margin: 100px auto;
        padding: 50px;
        background-color: #98C7D9;
        border-radius: 20px;
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .interview-text { grid-column: 1/-1;}
    .interview-top-text { margin: auto 0;}
    .interview-top-text h2 {
        font-size: 40px;
    }

    div.interview-top-text { font-size: 20px;}

    .oppsummering .wrapper { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 5vw; }

    .andre-har-gjettet .wrapper h2,
    .siste-måned h2, .oppsummering h2, .intervju h2, .resultater h2, .premier h2, .content .text h2 { font-size: 38px;}
    .siste-måned p, .oppsummering p, .intervju p, .resultater p, .premier p, .siste-måned a, .oppsummering a, .content .text p { font-size: 20px;}
        
    .wrapper {
        padding: 30px;
    }

    .siste-måned .wrapper { max-width: 900px;}

    .resultatliste .innslagheader, .resultatliste .innslag {
        grid-template-columns: 1fr 3fr 3fr 2fr;
    }

    .resultatliste .innslag {padding: 30px;}
    .innslag span.navn,
    .innslag span,
    .innslagheader span { font-size: 20px;}

    .resultater p { font-size: 24px;}

    .sok {
        margin: 20px 0 40px 0;
    }

    .andre-har-gjettet .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .utvalg, .oversikt { grid-column: 1/-1;}
    div.filtere input, div.filtere span { 
        font-size: 18px !important;
        padding: 20px !important;
    }

    div.filtere span svg {bottom: 18px;}

    .oversikt { margin-top: 50px;}

    .navn {grid-column: unset;}
    .oversikt .innslag { grid-template-columns: 1fr 1fr 1fr; padding: 30px; grid-gap: 0;}

    .detaljvisning {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20px 0;
        margin-top: 20px;
    }

    .detail-view-month { flex-flow: column;}
    span.detail-value { margin-top: 5px;}

    span.load-more-results, span.load-more-btn {
        grid-column: 1/-1;
    }

    .premier .text { max-width: 50%;}
    .premier .wrapper { margin: 50px auto}
    .premier span#lesmer { font-size: 20px;}

    .premier .cards { 
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 30px;
    }

    .cards .card {
        padding: 65px 50px;
    }

    footer .wrapper { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 100px;}
    footer img.caricon { width: 120px;}
    footer .menu-wrapper {
        display: flex;
        flex-flow: column;
        order: 2;
    }

    .footerline {display: block;}
    .footerline span#seetermsFooter { margin-left: 50px;}

    .andre-har-gjettet .wrapper,
    .resultater .wrapper {
        max-width: 1240px;
    }

    .vilkar {
        max-width: 800px;
        font-size: 20px;
        padding: 50px;
        height: 90vh;
        max-height: 900px;
    }

    .antall img {
        height: 28px;
    }
}