@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&display=swap');
/*Importrer skrifttype fra Google Fonts*/

*

/*universal selector*/
    {
    padding: 0px;
    /*Nulstiller default padding på elementer*/
    margin: 0px;
    /*Nulstiller default margen på elementer*/
}

h1,
h2 {
    font-size: 1.6rem
    /*Angiver overskriftstørrelse jf. mock-up 20px*/
}

h3 {
    font-size: 1.15rem;
}

p,
ol,
li,
ul,
a {
    font-size: 1rem;
    /*Angiver teksttørrelsen jf. fibonaccis talrække dvs. 1,618 mindre end overskriften*/
    line-height: 1.5;
    /*Angiver linjehøjde på hele dokumentet til 1,5*tekststørrelse*/
}

ul {
    list-style-type: circle
    /*Alle bulletpoints skal vises som cirkler*/
}

/*Sektionen tilhører body*/

body,
.bodyvedtaegter,
.bodyblivmedlem,
.bodyprivatliv,
.bodyinfo {
    background-color: #fefefe;
    /*Tilføjer baggrundsfarve til body*/
    font-family: 'Assistant', sans-serif;
    /*Angiver font i body*/
}

/*Sektionen indeholder nav med logo*/

.altindhold {
    display: flex;
    /*Logo og hamburgermenu i navigationsbaren vises i flex-retning*/
    width: 100%;
    /*Angiver at navigationsbaren skal fylde 100% af viewport*/
    justify-content: space-between;
    /*Tilføjer afstand mellem logo og hamburgermenu i navigationsbar*/
    background-color: #ffda2e;
    /*Farver bagrundsfarven*/
    height: 107px;
    /*Angiver højden på navbaren jf. prototypen*/
    position: absolute;
    /*Positionerer nav-baren absolut i forhold til siden, da der ikke er noget forudgående positionere forældrelement*/
}

.forsideheader .altindhold {
    background-color: transparent;
    /*Gør navbar transparent på forside*/
}
/*Transparent navbar linje 72 inspiration fra https://chat.openai.com/share/1000448c-9484-480e-ad59-5dead0c3b5ad */

.logo {
    margin-top: 50px;
    margin-left: 32px;
    /*Angiver logoets placering i mobil-version jf. prototype*/
    z-index: 3;
    /*Placerer logo foran menuboks, så den er tilgængelig, når menuboksen åbnes i mobilversion*/
}

/*Sektionen indeholder hamburgermenu med menuboks og links i mobilversion*/

#hamburger {
    display: none;
    /*Skjuler checkboks (lille hvid firkant)*/
}

#hamburgermenuinfo,
#hamburgermenunyheder,
#hamburgermenutrehalvleg,
#hamburgermenuvedtagter,
#hamburgermenuprivatliv,
#hamburgermenublivmedlem,
#hamburgermenumoedos,
#hamburgermenunyhedunderside,
#hamburgermenufaciliteter,
#hamburgermenukontakt,
#hamburgermenusport,
#hamburgermenuarrangementer {
    position: fixed;
    /*Fikserer nav-bar på undersider, så den følger med, når der scrolles.*/
    top: 0;
    /*Sørger for at menuen sidder helt i toppen af siden*/
    width: 100%;
    /*Gør at menuen fylder hele bredden af skærmen*/
    z-index: 5;
    /*Ligger menuen ovenpå de andre elementer*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*lægger en skygge under menubaren/navbaren*/
}

#hamburgermenu label,
#hamburgermenuinfo label,
#hamburgermenunyheder label,
#hamburgermenutrehalvleg label,
#hamburgermenuvedtagter label,
#hamburgermenuprivatliv label,
#hamburgermenublivmedlem label,
#hamburgermenumoedos label,
#hamburgermenunyhedunderside label,
#hamburgermenufaciliteter label,
#hamburgermenukontakt label,
#hamburgermenusport label,
#hamburgermenuarrangementer label {
    /*Angiver størrelse, farve og placering på hamburgermenu på undersider*/
    display: flex;
    /*Viser hamburgermenu i mobilversion*/
    color: black;
    /*Angiver farven sort*/
    font-size: 40px;
    /*Angiver størrelse på hamburgermenu*/
    margin-top: 32px;
    margin-right: 32px;
    /*Placering af hamburgermenu*/
    z-index: 2;
    /*Placerer hamburgermenu foran menuboks, så den er tilgængelig når menuboksen er åben*/
}

#links {
    display: none;
    /*Menuboks med links vises ikke by default*/
    background: #ffda2e;
    /*Angiver baggrundsfarve på menuboks*/
    width: 100vw;
    height: 100vh;
    /*Farver baggrunden på <div> med links i hamburgermnu i 100% bredde og højde af viewporten*/
    padding-top: 100px;
    /*Placerer links med afstand til top, så der er plads til hamburgermenuen*/
    position: absolute;
    /*Positionere elementet i forhold til nærmeste forældrelement, der har anden positions-value end static (by default). Pladsen elementet optog fjernes.*/
    z-index: 1;
}

#links a {
    display: flex;
    flex-direction: column;
    /*Links vises i flex-retning i kolonner*/
    margin-top: 30px;
    /*Angiver afstand mellem links*/
    text-align: right;
    /*Centrecentrer links i højre side*/
    margin-right: 32px;
    color: black;
    /*Links i menu farves sort*/
    text-decoration: none;
    /*Links i menu skal IKKE understreges*/
}

#links a:hover {
    text-decoration: underline;
    /*Tilføjer understregning af links, når musen føres over*/
}

.dropdown-content-links a,
.dropdown-links {
    margin-top: 10px !important;
    /*Afstand mellem undersider under info og kontakt. Dette for loven om nærhed. Elementerne har en samhørighed*/
}

#hamburgermenu input:checked~#links,
#hamburgermenuinfo input:checked~#links,
#hamburgermenunyheder input:checked~#links,
#hamburgermenutrehalvleg input:checked~#links,
#hamburgermenuvedtagter input:checked~#links,
#hamburgermenuprivatliv input:checked~#links,
#hamburgermenublivmedlem input:checked~#links,
#hamburgermenumoedos input:checked~#links,
#hamburgermenunyhedunderside input:checked~#links,
#hamburgermenufaciliteter input:checked~#links,
#hamburgermenukontakt input:checked~#links,
#hamburgermenusport input:checked~#links,
#hamburgermenuarrangementer input:checked~#links {
    display: flex;
    flex-direction: column;
    /*Når checkboksen er checked, vises menuboks med links.*/
}

/*Sektionen tilhører links der vises i desktopversion*/

#links-desktop a {
    display: none;
    /*Skjuler links fra desktop i mobilversion*/
}

#links-desktop {
    display: none;
    /*Fjerner pladsen som <div> fra links-dektop optager og placerer dermed hamburgermenu i højre side af viewport*/
}

/*Sektionen tilhører forsiden*/

.forsidebillede {
    height: 68vh;
    /*Angiver forsidebilledets containers højden*/
    z-index: -1;
    /*Placerer billedet bag ved forsidens elementer*/
    width: 100vw;
    /*<div> som billedet er placeret i skal fylde 100% af viewportens bredde*/
}

.forsidebillede img {
    width: 100%;
    /*Forsidebilledet skal fylde 100% af bredden af den <div>, som den er placeret i (forældrelementet)*/
    height: 100%;
    /*Forsidebilledet skal fylde 70% af højden af den <div>, som den er placeret i (forældrelementet)*/
    object-fit: cover;
    /*Sikrer at forsidebilledet er placeret i <div> uden af deformere det.*/
    object-position: 50% center;
    /*Flytter billedet mod højre og beskærer dermed den glade mands ansigt*/
}

/*Kodekommentarer linje 224-233 af https://chat.openai.com/share/ac1bab65-176c-43bc-a858-ac408cac7c2d */

.overskrift-hovedbudskab-knap {
    position: absolute;
    /*Positionere elementet i forhold til nærmeste forældrelement, der har anden positions-value end static (by default). Pladsen elementet optog fjernes.*/
    margin-left: 32px;
    /*Angiver venstre margen for overskriften (containeren) i mobil-version jf. prototype*/
    margin-top: 35vh;
    /*Angiver placering af elementet i forhold til navbar*/
    z-index: 0;
}

.forsideoverskrift {
    font-size: 2rem;
    /*Anigver størrelsen på overskriften i mobil-version jf. prototype (display-tekst)*/
    /*2 rem overskriver tidligere angivne font-size grundet specificitet*/
    font-weight: 700;
}

.hovedbudskab {
    font-size: 1.125rem;
    /*Anigver størrelsen på hovedbudskabet i mobil-version jf. prototype (display-tekst)*/
    /*1.125 rem overskriver tidligere angivne font-size grundet specificitet*/
    font-weight: 600;
    margin-right: 180px;
    /*Tilføjer margin til højre for containeren, så teksten wrapper, inden det rammer den glade mands ansigt*/
}

.blivmedlemknap {
    display: inline-block;
    /*Gør ellementet til et block element og tillader hermed tilføjelse af margin og padding vertikal*/
    padding: 10px 30px;
    /*Angiver hhv. højden og bedden på rummet omkring knappen*/
    font-size: 1.5rem;
    /*Anigver skriftstørrelsen i rem jf. prototype*/
    /*1.5 rem overskriver tidligere angivne font-size grundet specificitet*/
    font-weight: 600;
    /*Font angives til semibold jf. prototype*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: black;
    /*Farver baggrunden og rummet omkring teksten*/
    color: #fff;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 50px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    margin-top: 20px;
    /*Placerer knappen med 30 px top margen til forældreelement*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
}

.blivmedlemknap:hover {
    background-color: #FFDA2E;
    color: black
        /*Interaktionsdesign*/
}

.blivmedlemknap:active {
    text-decoration: underline;
}
/*Udformning af knap linje 263-299 med inspiration fra https://chat.openai.com/share/64830141-6a71-4cde-9123-4674ffdaa0d1 */

/*Næste sektion tilhører kommende arrangementer afsnit på forsiden*/
.kommendearrangementer {
    background-color: #ffc328;
    /*Angiver baggrundsfarve på arrangement-afsnit*/
    display: flex;
    /*Viser de hvide bokse i flex-retning*/
    position: relative;
    /*Positioneres relativt i forhold til sin tidligere placering. Den tidligere placering vil fortsat optage pladsen*/
    align-items: center;
    /*Centrer den hvid boks vertikalt i forhold til den orange boks*/
    justify-content: center;
    /*Centrerer den hvide boks horizontalt i forhold til den orange boks*/
    height: 250px;
    /*Angiver højde på den orange boks*/
}
/*Centrering af den hvide boks i den orange boks linje 303-316 med inspiration fra https://chat.openai.com/share/e53fe5c1-a40c-4c83-af1e-07f452945bb1 */

.kommendearrangementeroverskrift {
    display: none;
    /*Viser ikke kommende arrangementeroverskrift i mobil-version jf. prototype*/
    margin-top: 50px;
    /*Placerer elementet i forhold til den orange boks*/
}

.arrangementet,
.arrangementto,
.arrangementtre {
    display: flex;
    /*Flexer hhv. logo og tekst+kanp i den hvide boks, så de placeres ved siden af hinanden*/
    background-color: white;
    /*Angiver baggrundsfarve*/
    width: 333px;
    height: 202px;
    /*Angiver størrelse på den hvide boks*/
}

.tekstogknap,
.logoboks {
    align-self: center;
    /*Centerer hhv. logo til tekst+knap horizontalt i den hvide boks*/
    margin-left: 40px;
    /*Placerer elementerne i den hvide boks med standard margen*/
}
/*Centrering af elementer linje 340 med inspiration fra: https://chat.openai.com/share/d26cab92-6e32-4e73-9bdd-d07ad32d5a6a */

.læsmere {
    padding: 5px 20px;
    background-color: #000;
    color: #fefefe;
    border-radius: 30px;
    text-decoration: none;
    /*Fjerner understregning af link*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
}

.læsmere:hover {
    text-decoration: underline;
}

.knapboks {
    margin-top: 15px;
    /*Angiver afstand mellem læs mere-knap og tekst*/
}

.knapboks:hover {
    text-decoration: underline;
    /*Tilføjer understregning af læs mere-knap, når musen føres over*/
}

.arrangementto,
.arrangementtre {
    display: none
        /*Viser ikke arrangement to og tre i mobil-version*/
}

.tekstogknap {
    display: block;
    /*Placerer læs mere-knap under tekst som block-elementer*/
}

/*Næste sektion tilhører velkommen afsnit på forsiden*/
.velkommen {
    margin-top: 75px;
    /*Angiver afstand mellem velkommen overskrift og arrangementsektion*/
    margin-left: 32px;
    margin-right: 32px;
    /*Angiver margen i velkommen-afsnit*/
}

.velkommentekst {
    margin-top: 10px
        /*Angiver afstand fra velkommen-overskrift til velkommen-tekst*/
}

/*Næste sektion tilhører nyheder afsnit på forsiden*/
.senestenyt-container {
    margin-left: 32px;
    margin-top: 75px
        /*Angiver afstand mellem arrangement- og velkommenafsnit*/
}

.fremtilnyhederknap-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 32px;
    margin-bottom: 119px;
    /*Placerer knappen i containeren*/
}

.fremtilnyhederknap {
    padding: 10px 30px;
    /*Angiver bredden og højden på rummet/det sorte felt omkring kanppen*/
    font-size: 1.6rem;
    /*Anigver skriftstørrelsen i rem*/
    font-weight: 700;
    /*Font angives til semibold jf. prototype*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #FFDA2E;
    /*Knappens farve*/
    color: #000;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
}

.fremtilnyhederknap:hover {
    background-color: black;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #fff;
    /*når vi hover over knappen skifter skriften til hvid*/
    text-decoration: underline;
}

.fremtilnyhederknap:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

/*Næste sektion er til footeren*/
footer {
    background-color: #222222;
    /*Angiver baggrundsfarve på footer*/
}

.container-footer {
    display: flex;
    /*her vælger vi at elementerne i containeren skal vises som flex elementer der sætter sig efter hinanden*/
    flex-direction: row;
    /*vi fortæller flex elementerne at de skal køre på en række*/
    flex-wrap: wrap;
    /*ved at sætte wrap på så wrapper elementerne sådan at ved stor skærm fylder de op i den plads der er, og når der ikke er plads til et element så rykker det ned på ny række*/
    justify-content: center;
    /*Sørger for at footer elementerne centreres på skærmen i mobil version*/
    padding-top: 100px;
    /*laver mellemrum mellem footer top og første element i footeren*/
}

.container-footer p,
.undervisningsformaal {
    color: #fefefe;
    display: flex;
    justify-content: center;
    /*sørger for vores tekst i footeren er centreret i mobil version*/
}

.itemfooter {
    /*itemfooter er de 3 kolonner/elementer i footeren*/
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom: 50px;
    /*der er sat margin på højre, venstre og bund*/
}

.undervisningsformaal {
    margin-left: 100px;
    margin-right: 100px;
    padding-bottom: 20px;
    /*vi laver afstand fra bunden så der er mellemrum mellem tekst og sidens bund*/
    padding-top: 30px;
    /*laver afstand så vores border sætter sig højere op*/
    border-top: solid;
    /*vi sætter en border på toppen af <p> for at lave en streg*/
    border-width: 2px;
    /*stregen for en tykkelse på 2px*/
}

.footerlogo {
    width: 5%;
    /*beskriver at logoet fylder 5% af hele skærmens bredde*/
    position: relative;
    /*Gør det muligt at justere på top, bottom, left og right i forhold til elementets oprindelige position. Pladsen hvor elementet tidligere var placeret optaget, så andre elemntet placeres i forhold til elemntets oprindelige position.*/
    bottom: 100px;
    /*Sammen med position: relative placerer dette elementet 100px fra bunden*/
    left: 80%;
    /*siger at logoet skal sidde 80% af skærmens bredde væk fra venstre side - så det sidder tæt på højre side. Det er til mobil*/
}

/*Næste sektion tilhører arrangementer*/
.arrangementertitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 300px;
    /*margin mellem header billede og overskrift*/
    margin-bottom: 30px;
}

.container-kalender {
    width: 100%;
    overflow: hidden;
    /*skjuler det der ligger udenfor <div>*/
    margin-bottom: 120px;
    display: block;
}

.kalenderbillede {
    width: 135%;
    /*Zommer kalenderbillede*/
    height: auto;
}

.arrangementinfo {
    background-color: #dbdbdb;
}

.tilmeldpil {
    font-size: 300%;
    margin-left: 40px;
    margin-top: 20px;
    color: #ffda2e;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Skyggeeffekt: vandret offset, lodret offset, blur radius, farve */
}

.itemkalender {
    line-height: 0;
    /*Fjerne linjehøjde mellem kalenderbillede og arrangementinfo*/
}

.arrangementdato {
    font-size: 1.25rem;
    font-weight: 700;
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 50px;
}

.arrangementnavn {
    font-size: 1.25rem;
    font-weight: 600;
    margin-left: 40px;
    margin-right: 40px;
}

.arrangementinfoet {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 30px;
}

.arrangementinfoto {
    font-size: 1.25rem;
    font-weight: 400;
    margin-left: 40px;
    margin-right: 40px;
    padding-bottom: 50px;
}

/*Næste sektion tilgøhrer pop-up menu på arrangement side*/
.newsletter-container {
    position: fixed;
    /*fikserer nyhedsbrev boksen på siden*/
    top: 45%;
    /*placering på siden*/
    right: 0%;
    /*sætter boksen ud til højre*/
    transform: translate(0, -20%);
    /*når man åbner boksen, skubbes placeringen op 20%*/
    z-index: 2;
    /*sørger for den ligger øverst*/
    animation: bounce 2s infinite;
    /* Anvend bounce-animationen på containeren i 2 sekunder i en uendelig løkke */
}

.newsletter-toggle::before+.newsletter-box {
    cursor: pointer;
    /*ændrer musen til en hånd*/
    transition: width 0.3s;
    /* tilføjer overgang for effekt */
}

/* Rotation af teksten */
.closed-text,
.open-text {
    transform: rotate(-90deg);
    /*roterer boksen, så den kører op ad højre side*/
    display: inline-block;
    /*gør at vi kan rotatere med teksten*/
    color: #222222;
    /*tekst farve*/
    background-color: #FFDA2E;
    width: 300px;
    /*bredden (højden) på den lukkede hold dig opdateret boks*/
    text-align: center;
    /*centrerer teksten*/
    font-weight: 700;
    /*bold*/
}

.closed-text {
    font-size: 2rem;
    /*font str. på teksten når boksen er lukket*/
    background-color: #FFDA2E;
}

.newsletter-form {
    display: none;
    /*skjuler den åbnede boks, når den ikke er trykket på*/
    background-color: #FFDA2E;
    padding: 20px;
    /*padding i den åbnede boks*/
}

.newsletter-form label {
    display: block;
    margin-bottom: 5px;
}

.newsletter-form #email,
.newsletter-form #name {
    width: 92%
        /*bredde på input felter*/
}

.newsletter-form input {
    padding: 8px;
    /*str. på input felter*/
    margin-bottom: 10px;
    /*str. på input felter*/
}

.newsletter-form button {
    /*send / bliv opdateret knappen*/
    background-color: #222222;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 200px;
    margin-bottom: 20px;
    font-size: 1.25rem;
}

.newsletter-toggle:checked+.newsletter-box {
    width: 370px;
    /* Bredden i den åbne tilstand */
}

.newsletter-toggle:checked+.newsletter-box .newsletter-form {
    display: block;
    /*sætter elementerne i den åbnede boks som block elementer, så de sætter sig oven på hinanden/fylder hele bredden*/
}

.newsletter-container input[type=checkbox]+label:before {
    display: none;
    /*fjerner vores egen designet checkboks knap - som vi har på bliv medlem siden*/
}

.closed-text,
.open-text {
    transform-origin: right bottom;
    /*placerer den lukkede til højre*/
    white-space: nowrap;
    /*bruges til den åbnede boks tekst*/
}

.open-text {
    display: none;
    /*skjuler teksten fra den åbnede boks, når boksen er lukket*/
}

.newsletter-toggle:checked+.newsletter-box .closed-text {
    display: none;
    /*skjuler teksten fra den lukkede boks, når boksen er åbnet*/
}

.newsletter-toggle:checked+.newsletter-box .open-text {
    display: inline;
    padding: 10px 62.5px;
    /*sætter padding til teksten når den er åben, så størrelsen passer med resten af boksen*/
    padding-top: 20px;
    font-size: 1.8rem;
    /*skrift str. svarende til 29px*/
}
/* Pop-up menu linje 580-704 laves med inspiration fra: https://chat.openai.com/share/439092b4-63a5-4ab4-a789-910880ccdf21 */

/* @keyframes definere en animation i dette tilfælde bounce-animationen*/
@keyframes bounce {

    /* Start og slutpunkt: Ingen vertikal forskydning (translateY) */
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    /* Toppen af hoppebevægelsen: -30px vertikal forskydning */
    40% {
        transform: translateY(-30px);
    }

    /* Midten af hoppebevægelsen: -15px vertikal forskydning */
    60% {
        transform: translateY(-15px);
    }
}
/*Bouncefunktion linje 592 og 707-728 er lavet med inspiration fra: https://chat.openai.com/share/225de427-c2f5-4047-a447-3bbee976216d */

/*Næste sektion tilhører nyheder*/
.nyhedsidetitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 300px;
}

.nyhedercontainer img {
    width: 100%;
    border-radius: 30px;
    max-height: 100%;
    filter: brightness(65%)
        /*Nedtoner lyset på billederne endnu mere(mørkere tone) 743 med inspration fra https://chat.openai.com/share/6749e34a-44fb-4d5e-a96b-782ba5507696 */
}

.nyhedercontainer img:hover {
    background-color: #fff;
    filter: brightness(25%);
    /*Nedtoner lyset på billederne endnu mere(mørkere tone) linje 749 med inspration fra https://chat.openai.com/share/6749e34a-44fb-4d5e-a96b-782ba5507696 */
    cursor: pointer;
}

.nyhedercontainer {
    display: flex;
    /*her vælger vi at elementerne i containeren skal vises som flex elementer der sætter sig efter hinanden*/
    min-height: 50vh;
    flex-direction: row;
    /*vi fortæller flex elementerne at de skal køre på en række*/
    flex-wrap: wrap;
    /*ved at sætte wrap på så wrapper elementerne sådan at ved stor skærm fylder de op i den plads der er, og når der ikke er plads til et element så rykker det ned på ny række*/
    justify-content: center;
    /*Sørger for at footer elementerne centreres på skærmen i mobil version*/
    margin-bottom: 50px;
}

.itemnyhed {
    width: 500px;
    /*bestemmer bredden på billederne i mobil version*/
    height: 625px;
    /*bestemmer højden på billederne i mobil version*/
    margin: 30px;
    /*sætter margin mellem billederne så der er luft*/
    padding: 0%;
    /*gør at billederne fylder hele div'en - ingen luft*/
    position: relative
}

.itemnyhed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* dette sørger for at billederne udfylder hele containeren */
}

.nyhedoverskrift {
    color: white;
    /*Top og left: Sætter nyhed overskrift lidt til højre og lidt end på billedet så det sidder på den ønskede lokation*/
    font-weight: 700;
    position: absolute;
    /*Gør at vi kan flytte på elementet*/
    left: 20px;
    /*flytter det 20px til højre*/
    top: 40px;
    /*flytter det 40px ned*/
    z-index: 2;
    padding-right: 10px;
    font-size: 1.6rem;
}

.nyheddato {
    position: relative;
    /*Gør at vi kan flytte på elementet*/
    left: 20px;
    bottom: 40px;
    color: white;
    /*Top og bottom: Sætter nyhed dato lidt til højre og lidt op på billedet så det sidder på den ønskede lokation.*/
    font-weight: 700;
}

.sidetal {
    display: flex;
    justify-content: space-evenly;
    /*Disse placerer vores sidetal på midten af skærmens bredde*/
    margin-left: 45%;
    /*dette beskriver at margin til venstre for sidetallene skal hele tiden fylde 45% af skærmens størrelse i mobil version*/
    margin-right: 45%;
    /*dette beskriver at margin til højre for sidetallene skal hele tiden fylde 45% af skærmens størrelse i mobil version*/
    padding-bottom: 50px;
    /*laver afstand mellem sidetal og footeren*/
}

/*Næste sektion tilhører nyhed underside*/
.stortlogonyhed {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}

.stortlogonyhed img {
    width: 25%;
}

.container-nyhedunderside {
    margin: 50px;
}

.tilbagetilnyhederknap {
    display: inline-block;
    /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
    padding: 10px 30px;
    /*Angiver bredden og højden på rummet/det sorte felt omkring kanppen*/
    font-size: 1.6rem;
    /*Anigver skriftstørrelsen i rem*/
    font-weight: 700;
    /*Font angives til semibold jf. prototype*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #FFDA2E;
    /*Knappens farve*/
    color: #000;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    margin-left: 50px;
    /*Placerer knappen med 100 px venstre margen*/
    margin-bottom: 50px;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
}

.tilbagetilnyhederknap:hover {
    background-color: black;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #fff;
    /*når vi hover over knappen skifter skriften til hvid*/
}

.tilbagetilnyhederknap:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

/*Næste sektion tilhører sportsaktiviteter*/
.sporttitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 300px;
    /*margin mellem menubar og overskrift*/
    margin-bottom: 30px;
}

.container-sport img {
    border-radius: 30px;
    filter: brightness(90%);
    /*Nedtoner lyset på billederne endnu mere(mørkere tone) linje 931 med inspration fra https://chat.openai.com/share/6749e34a-44fb-4d5e-a96b-782ba5507696 */
}

.container-sport {
    display: flex;
    justify-content: center;
    margin-left: 35px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
    margin-right: 35px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
}

.itemsport {
    flex-grow: 1;
    /*gør at billederne vokser med skærmen og fylder luftrummet ud linje 945 med inspiration fra https://www.linkedin.com/learning/responsive-layout/distributing-space-to-flex-items?autoSkip=true&resume=false&u=42436220 */
    width: 250px;
    /*bestemmer bredden på billederne i mobil version*/
    height: 250px;
    /*bestemmer højden på billederne i mobil version*/
    margin: 5px;
    /*sætter margin mellem billederne så der er luft*/
    padding: 0%;
    /*gør at billederne fylder hele div'en - ingen luft*/
}

.itemsport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*dette sørger for at billederne udfylder hele containeren*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border: 0.5px solid #22222250;
}

.loebet {
    object-position: 25% center;
    /*Juster billedets position i en <div> linke 929 med inspiration fra https://chat.openai.com/share/7bc5a6b9-1a1a-46a4-a79b-211ce917e5a3 */
}

.container-loeb,
.container-badminton,
.container-volley,
.container-motion,
.container-fodboldu,
.container-fodboldi {
    background-color: #d9d9d960;
    /*tallene 60 beskriver styrken af den grå farve*/
    margin-left: 40px;
    margin-right: 40px;
    border-radius: 30px;
    margin-bottom: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.sportsgrenoverskrift {
    font-weight: 600;
    padding-left: 40px;
    padding-top: 100px;
    font-size: 1.6rem;
}

.sportsgrenbroedtekst,
.sportsgrenkontaktperson,
.sportkommed {
    padding-left: 40px;
    padding-top: 40px;
    padding-right: 50px;
    line-height: 1.5;
}

.fodboldhold {
    margin-left: 10px;
    /*sørger for vores fodbold liste står ens med resten af teksten, på trods af bullet points*/
}

.sportblivmedlemknap {
    display: inline-block;
    /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
    padding: 10px 30px;
    /*Angiver bredden og højden på rummet/det sorte felt omkring knappen*/
    font-weight: 700;
    /*Font angives til semibold jf. prototype*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #FFDA2E;
    /*Knappens farve*/
    color: #000;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    margin-left: 35px;
    /*Placerer knappen med 100 px venstre margen*/
    margin-bottom: 120px;
    /*sætter margin fra knap til bunden af den grå section kasse*/
    margin-top: 15px;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
    font-size: 1.6rem;
}

.sportblivmedlemknap:hover {
    background-color: black;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #fff;
    /*når vi hover over knappen skifter skriften til hvid*/
}

.sportblivmedlemknap:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

.fodboldi {
    margin-bottom: 120px;
    /*laver margin fra nedeste section boks til footeren*/
}

#loeb {
    margin-top: 120px;
}

.sportbilledeoverskrift {
    position: relative;
    /*Gør at vi kan flytte på elementet*/
    right: 25px;
    /*flytter teksten 25px til venstre - laver luft i højre*/
    top: 220px;
    /*flytter det 220px ned*/
    color: white;
    /*Top og left: Sætter nyhed overskrift lidt til højre og lidt end på billedet så det sidder på den ønskede lokation*/
    font-weight: 600;
    /*svarer til semibold*/
    font-size: 1.6rem;
    /*svarer til font str. 20 fra mockup mobil version*/
    z-index: 2;
    text-decoration: none;
    display: flex;
    justify-content: right;
    /*denne bruger vi til at højrejustere overskriften på billederne. Det er ikke align-text, da det er en "knap" og ikke tekst*/
}

.itemsport:hover {
    text-decoration: underline;
    color: white
}

.itemsport img:hover {
    filter: brightness(40%);
}

/*Næste sektion tilhører 3. halvleg*/
.klubhusettitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 300px;
}

.klubhusetbroedtekst {
    margin-right: 40px;
    margin-left: 40px;
    margin-bottom: 40px;
    margin-top: 10px;
    font-weight: 400;
}

.klubbencontainer img {
    border-radius: 30px;
    /*laver runde hjørner på billederne*/
}

.klubbencontainer {
    display: flex;
    /*gør at elementerne sætter sig som flex elementer*/
    flex-direction: row;
    /*gør at flex elementerne sætter sig på en række*/
    flex-wrap: wrap;
    /*beskriver at flex elementerne som står på række skal wrappe -> er der ikke plads til alle på én række, så rykker det automatisk ned på en ny række lige under*/
    margin-bottom: 50px;
    /*sætter margin under "klub galleri"*/
    margin-left: 32px;
    /*sætter margin så det matcher med overskriften i mobil*/
    margin-right: 32px;
    /*sætter margin så det matcher med overskriften i mobil*/
}

.itemklubben {
    flex-grow: 1;
    /*gør at billederne i vores "klub galleri" vokser med skærmen og fylder luftrummet ud*/
    /*gør at billederne vokser med skærmen og fylder luftrummet ud linje 1087 med inspiration fra https://www.linkedin.com/learning/responsive-layout/distributing-space-to-flex-items?autoSkip=true&resume=false&u=42436220 */
    margin: 10px;
    /*sætter margin mellem billederne så der er luft*/
    padding: 0%;
    /*gør at billederne fylder hele div'en - ingen luft*/
}

.itemklubben img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*dette sørger for at billederne udfylder hele containeren*/
}

/*Næste sektion tilhører infoside*/
.bodyinfo {
    background-image: url(img/polygonto.webp);
    /*Indsætter baggrundsbillede i <div>*/
    background-repeat: no-repeat;
    /*Gentager ikke baggrundsbilledet*/
    background-position: -1000px -1050px;
    /*Placering af baggrundsbillede*/
}

.omosoverskrift {
    margin-top: 300px;
    margin-left: 50px;
    margin-bottom: 50px;
    padding-top: 50px
}

.omostekst,
.vardieroverskrift,
.sommedlemkanduoverskrift,
.hvorforoverskrift {
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 32px;
}

.infotekst {
    margin-top: 10px;
}

.infosektion {
    background-color: #fefefe;
    margin-left: 32px;
    margin-right: 32px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding-bottom: 50px
}

.sommedlemkanduoverskrift li,
.vardieroverskrift li {
    margin-left: 32px
}

.footerinfo {
    margin-top: 119px;
}

/*Næste sektion tilhører faciliteter*/
.facilitetertitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 300px;
    margin-bottom: 25px;
    /*margin mellem overskrift og faciliteter containeren*/
}

.container-faciliteter img {
    width: 100%;
    border-radius: 30px;
    max-height: 100%;
    filter: brightness(65%)
}

.container-faciliteter {
    display: flex;
    min-height: 50vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
    margin-left: 30px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
    margin-right: 30px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
}

.itemfaciliteter {
    flex-grow: 1;
    width: 500px;
    /*bestemmer bredden på billederne i mobil version*/
    height: 350px;
    /*bestemmer højden på billederne i mobil version*/
    margin: 10px;
    /*sætter margin mellem billederne så der er luft*/
    padding: 0%;
    /*gør at billederne fylder hele div'en - ingen luft*/
}

.itemfaciliteter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*dette sørger for at billederne udfylder hele containeren*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border: 0.5px solid #22222250;
}

.graaboks {
    background-color: #222222;
    /* Grå farve */
    opacity: 0.8;
    /*justerer farve intensiteten på boksen ud fra mockup*/
    padding: 45px;
    border-radius: 30px;
    /*Laver hjørner*/
    color: #fff;
    /* Tekstfarven indeni boksen */
    height: 260px;
    /*Sætter højden på den grå boks i mobil*/
    margin-top: 25px;
}

.graaboks p {
    font-size: 1.6rem;
    /*svarer til font str. på 25 fra mockup*/
    font-weight: 600;
}

.graaboks ul {
    line-height: 3;
    /*laver større linjeafstand mellem liste elementerne*/
    margin-left: 40px;
    margin-top: 20px;
    font-weight: 600;
}

.faciliteteroverskrift {
    position: relative;
    /*Gør at vi kan flytte på elementet*/
    left: 45px;
    /*flytter det 20px til højre*/
    top: 60px;
    /*flytter det 40px ned*/
    color: white;
    /*Top og left: Sætter nyhed overskrift lidt til højre og lidt end på billedet så det sidder på den ønskede lokation*/
    font-weight: 700;
    font-size: 1.25rem;
    /*Display tekst*/
    z-index: 2;
}

/*Næste sektion tilhører vedtægter*/
.bodyvedtaegter {
    background-image: url(img/polygonet.webp);
    /*Tilføjer baggrundsbillede til <div>*/
    background-repeat: no-repeat;
    /*Bagrgundsbillede skal ikke gentages*/
    background-position: -1000px -1050px;
    /*Baggrundsbilledes positiod mod hhv. venstre og top*/
}

.vedtaegteroverskrift {
    margin-top: 300px;
    margin-left: 32px;
    padding-top: 50px;
}

.vedtaegterunderrubrik,
.vedtagterparagraf,
.visvedtaegter {
    margin-top: 20px;
    margin-left: 32px;
    padding-right: 32px;
}

.vedtaegterunderoveskrift {
    margin-left: 32px
}

.vedtaegteroevre {
    background-color: #fefefe;
    margin-left: 32px;
    margin-right: 32px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding-bottom: 50px
}

.vedtaegternedre {
    background-color: #484848;
    /*80 henviser til opacity*/
    margin-left: 32px;
    margin-right: 32px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding-bottom: 50px;
    padding-top: 50px;
    color: #fefefe;
    margin-bottom: 119px;
}

.visvedtaegteroverskrift {
    display: inline-block;
    /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
    padding: 10px 30px;
    /*Angiver bredden og højden på rummet/det sorte felt omkring knappen*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #000000;
    /*Knappens farve*/
    color: #fefefe;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
}

.visvedtaegteroverskrift:hover {
    background-color: #ffda2e;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #000000;
    /*når vi hover over knappen skifter skriften til hvid*/
}

.visvedtaegteroverskrift:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

/*Næste sektion tilhører vedtægter undeside*/
.vedtaegterunderside-paragraffer {
    margin-top: 20px;
}

.vedtaegterunderside {
    margin-top: 300px;
    margin-left: 32px;
    margin-right: 32px;
}

.pet,
.ptp,
.ptre,
.pfire,
.pfem,
.pseks,
.psyv,
.potte,
.pni,
.pti,
.pelleve,
.ptolv,
.ptretten,
.pfjorten,
.pfemten {
    margin-top: 20px
}

.vedtaegterliste {
    margin-left: 16px
}

.footervedtaegter {
    margin-top: 119px
}

/*Sektionen tilhører privatlivspolitik*/
.bodyvedtaegter {
    background-image: url(img/polygonet.webp);
    background-repeat: no-repeat;
    background-position: -1000px -1050px;
}

.privatlivoverskrift {
    margin-top: 300px;
    margin-left: 32px;
    padding-top: 50px;
}

.privatlivunderrubrik,
.infoprivatliv,
.visprivatliv {
    margin-top: 20px;
    margin-left: 32px;
    padding-right: 32px;
}

.privatlivunderoveskrift {
    margin-left: 32px
}

.privatlivoevre {
    background-color: #fefefe;
    margin-left: 32px;
    margin-right: 32px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding-bottom: 50px
}

.privatlivnedre {
    background-color: #484848;
    /*80 henviser til opacity*/
    margin-left: 32px;
    margin-right: 32px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding-bottom: 50px;
    padding-top: 50px;
    color: #fefefe;
    margin-bottom: 119px;
}

.visprivatlivoverskrift {
    display: inline-block;
    /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
    padding: 10px 30px;
    /*Angiver bredden og højden på rummet/det sorte felt omkring knappen*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #000000;
    /*Knappens farve*/
    color: #fefefe;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*giver knappen en skygge*/
}

.visprivatlivoverskrift:hover {
    background-color: #ffda2e;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #000000;
    /*når vi hover over knappen skifter skriften til hvid*/
}

.visprivatlivoverskrift:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

/*Næste sektion tilhører privatlivspolitik undeside*/
.infoprivatlivunderside p,
ul {
    margin-top: 20px;
    margin-bottom: 30px;
}

.infoprivatlivunderside ul li {
    margin-left: 16px
}

.privatlivunderside {
    margin-top: 300px;
    margin-left: 32px;
    margin-right: 100px;
}

.footervedtaegter {
    margin-top: 119px
}

/*Næste sektion tilhører bliv medlem*/
.baggrundsbilledeblivmedlem {
    background-image: url(/img/soccerfieldheader.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100vw;
    height: 80vh;
    /* 90% af skærmens højde */
}

.blivmedleminfo {
    padding-top: 100px;
    /*Angiver afstand fra billede til tekst*/
    margin-right: 32px;
    margin-left: 32px;
}

.guide {
    margin-left: 16px;
    /*Tilføjer ekstra padding til liste-elementer*/
}

.main-container-blivmedlem,
.guide {
    padding-top: 1.125rem
        /*Angiver afstand til mellem afsnit i teksten*/
}

.main-container-blivmedlem {
    padding-bottom: 1.187rem;
    /*Angiver afstand mellem tekst og betalingstekst*/
}

.betaling {
    padding-bottom: 1.187rem;
    /*Angiver afstand mellem tekst og kontaktformular*/
}

.kontaktformular {
    display: flex;
    flex-direction: column;
    /*Placerer elemeterne oven over hinanden i kolonner*/
    width: 70%;
    /*Formularen fylder 70 % af viewporten*/
    background-color: #fefefe;
    /*Tilføjer baggrundsfarve til formularen*/
    border-radius: 10px;
    /*Skaber runder hjørner på kontaktformularen*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /*Tilføjer skygge til kontaktformularen*/
    margin: 0 auto;
    /* Centrer formularen */
    padding: 50px;
    /*Tilføjer padding til formualren i boksen*/
}

#name,
#vejnavnognummer,
#birthdate,
#email,
#phone,
#postnummerogby,
.checkbox-container,
button {
    width: 100%;
    /*Label (tekstboksene) fylder hele bredden*/
    margin-bottom: 20px;
    /* Tilføj margin mellem felterne */
}

.checkbox-label {
    margin-left: 20px;
    /* Tilføj margin mellem checkbox og tilhørendetekst */
    display: block;
    /*Gøre elementet til et block element, så teksten har lige venstre margen*/
    position: relative;
    z-index: 2;
    margin-top: -25px;
    /*Placerer elementet foran og til højre for checkboksen*/
}

/*Indsat gul checkboks linje 1549-1605 med inspiration fra https://www.youtube.com/watch?v=cXVbsTT5gU8 */
/* Skjuler den oprindelige checkbox */
input[type=checkbox] {
    display: none;
}

/* Design af v-tegn og checkbox før den er markeret */
input[type=checkbox]+label:before {
    content: "\2713";
    /* Symbol: https://www.toptal.com/designers/htmlarrows/symbols/ */
    border: 1px solid #000;
    border-radius: 3px;
    display: inline-block;
    /* Placerer checkbox på linje med øvrig tekst */
    width: 15px;
    /* Bredde på checkbox */
    height: 15px;
    /* Højde på checkbox */
    vertical-align: bottom;
    /* Justerer checkbox efter teksts placering for at stå på linje */
    color: transparent;
    /* Gør v-tegnet transparent, så det ikke vises som standard */
    background-color: #FFDA2E;
    transition: .2s;
    /* Overgangseffekt for visuelle ændringer */
    margin-right: 3px;
    /* Afstand til højre */
    margin-bottom: 3px;
    /* Afstand nedenunder */
}

/* Justerer margen og cursor for label-elementet */
input[type=checkbox]+label {
    margin: 3px;
    /* Margen omkring label */
    cursor: pointer;
    /* Gør cursoren til en pegefinger for at angive interaktivitet */
}

/* Giver feedback, når label trykkes ned */
input[type=checkbox]+label:active:before {
    transform: scale(0);
    /* Skalerer checkbox ned for at give indtryk af tryk */
}

/* Design af checkbox og v-tegn efter det er markeret */
input[type=checkbox]:checked+label:before {
    background-color: #FFDA2E;
    /* Baggrundsfarve for markeret checkbox */
    border-color: #222222;
    /* Kantfarve for markeret checkbox */
    color: #222222;
    /* Farve på v-tegnet for markeret checkbox */
    margin-bottom: 2px;
    /* Justerer margen nedenunder checkbox efter markering */
    padding-bottom: 5px;
    /* Justerer padding nedenunder checkbox efter markering */
}

/*Kodekommentaerer linje 1549-1605 af: https://chat.openai.com/share/aab7d048-586b-403c-9448-71651e3826d2 */

/* Stil for send-knappen */
button {
    background-color: #ffda2e;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    /*Ændre cusor når musen føres over, så den viser, det er et klikbart element*/
    font-size: 1.6rem;
    display: block;
    margin: auto;
    /* Centrer knappen horisontalt */
    width: 50%;
    /*Bestemmer knappens bredde*/
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*laver skygge under knappen*/
}

button:hover {
    background-color: #000;
    color: white;
}

.button:active {
    text-decoration: underline;
}

.blivmedlemfooter {
    margin-top: 110px;
}

/*Næste sektion tilhører kontakt*/
.kontakttitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 120px;
    /*margin mellem header billede og overskrift*/
    margin-bottom: 30px;

}

.container-kontakt {
    display: flex;
    /*her vælger vi at elementerne i containeren skal vises som flex elementer der sætter sig efter hinanden*/
    flex-direction: row;
    /*vi fortæller flex elementerne at de skal køre på en række*/
    flex-wrap: wrap;
    /*ved at sætte wrap på så wrapper elementerne sådan at ved stor skærm fylder de op i den plads der er, og når der ikke er plads til et element så rykker det ned på ny række*/
    justify-content: center;
    /*Sørger for at footer elementerne centreres på skærmen i mobil version*/
    margin-bottom: 50px;
    margin-left: 40px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
    margin-right: 40px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
}

.container-kontakt img {
    width: 100%;
}

.itemkontakt {
    flex-grow: 1;
    /*gør at billederne vokser med skærmen og fylder luftrummet ud*/
    margin-bottom: 50px;
    /*sætter margin mellem billederne så der er luft og plads til tekst*/
    padding: 0%;
    /*gør at billederne fylder hele div'en - ingen luft*/
}

.kontaktbillede {
    width: 500px;
    /*bestemmer bredden på billederne i mobil version*/
    height: 650px;
    /*bestemmer højden på billederne i mobil version*/
    object-fit: cover;
    /*sørger for billederne passer til deres containers str.*/
}

.kontaktnavn {
    font-weight: 700;
    /*gør teksten til bold*/
    font-size: 1.6rem;
    /*font svarende til 25 fra mockup til mobil version*/
    margin-top: 20px;
    /*sætter luft mellem navn og video billede i mobil version*/
}

.kontaktansvar {
    font-weight: 400;
    /*regular tekst*/
}

.kontaktinfo {
    font-weight: 400;
    font-size: 1.25rem;
    margin-top: 10px;
    /* skaber luft mellem navn+position og til tlf.+mail info*/
}

.netbaggrundsbillede {
    width: 100%;
    height: 1200px;
    /*sætter højden på baggrundsbilledet i mobil version*/
    object-fit: cover;
    filter: blur(20px);
    filter: opacity(30%);
    position: absolute;
    /*ved at bruge absolut, sætter det billedet bag de øvrige elementer uden at der kommer et luftrum fra hvor billedet var placeret*/
    z-index: -1;
}

.moedjoergen {
    margin-right: 32px;
    display: block;
}

.moedjoergentekst {
    font-size: 1.6rem;
    font-weight: 600;
    /*semibold*/
    margin-top: 180px;
    margin-right: 50px;
    margin-bottom: 20px;
}

.moedjoergennavn {
    font-weight: 700;
    margin-top: 50px;
}

.moedosvideojoergen {
    width: 110%;
    /*bestemmer bredden på billederne i mobil version*/
    height: 450px;
    /*bestemmer højden på billederne i mobil version*/
    margin-top: 15px;
}

.container-moedjoergen {
    margin-bottom: 50px;
    margin-left: 40px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
    margin-right: 40px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
}

.medlemmerknap {
    display: inline-block;
    /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
    padding: 17.5px 30px;
    /*Angiver højden og bredden på rummet/det sorte felt omkring kanppen*/
    font-size: 1.4rem;
    /*Anigver skriftstørrelsen i rem*/
    font-weight: 700;
    /*Font angives til semibold jf. prototype*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #FFDA2E;
    /*Knappens farve*/
    color: #000;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    margin-bottom: 50px;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*laver skygge under knappen*/
}

.container-kontaktknap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.medlemmerknap:hover {
    background-color: black;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #fff;
    /*når vi hover over knappen skifter skriften til hvid*/
}

.medlemmerknap:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

/*Næste sektion tilhører mød os*/
.baggrundsbilledemoedos {
    background-image: url(/img/soccerfieldheader.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100vw;
    height: 80vh;
    /* 80% af skærmens højde */
}

.moedostitel {
    margin-left: 40px;
    font-weight: 600;
    /*sætter tykkelsen på vores font*/
    margin-top: 120px;
    /*margin mellem header billede og overskrift*/
    margin-bottom: 30px;

}

.container-moedos {
    display: flex;
    /*her vælger vi at elementerne i containeren skal vises som flex elementer der sætter sig efter hinanden*/
    flex-direction: row;
    /*vi fortæller flex elementerne at de skal køre på en række*/
    flex-wrap: wrap;
    /*ved at sætte wrap på så wrapper elementerne sådan at ved stor skærm fylder de op i den plads der er, og når der ikke er plads til et element så rykker det ned på ny række*/
    justify-content: center;
    /*Sørger for at footer elementerne centreres på skærmen i mobil version*/
    margin-bottom: 50px;
    margin-left: 40px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
    margin-right: 40px;
    /*sætter margin i mobil version så det passer med sidens titel placering*/
}

.container-moedos img {
    width: 100%;
}

.itemmoedos {
    flex-grow: 1;
    /*gør at billederne vokser med skærmen og fylder luftrummet ud*/
    margin-bottom: 50px;
    /*sætter margin mellem billederne så der er luft og plads til tekst*/
    padding: 0%;
    /*gør at billederne fylder hele div'en - ingen luft*/
}

.moedosvideo {
    width: 110%;
    /*bestemmer bredden på billederne i mobil version*/
    height: 450px;
    /*bestemmer højden på billederne i mobil version*/
}

.moedosblivmedlemknap {
    display: inline-block;
    /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
    padding: 10px 50px;
    /*Angiver højden og bredden på rummet/det sorte felt omkring kanppen*/
    font-size: 1.6rem;
    /*Anigver skriftstørrelsen i rem*/
    font-weight: 700;
    /*Font angives til semibold jf. prototype*/
    text-align: center;
    /*Centrerer teksen*/
    text-decoration: none;
    /*Fjerner understregning fra link*/
    background-color: #FFDA2E;
    /*Knappens farve*/
    color: #000;
    /*Angiver farven på teksten*/
    cursor: pointer;
    /*Ændrer musemarkøren, når den føres over knappen*/
    border-radius: 30px;
    /*Laver runder hjørner på knappen jf. prototypen*/
    margin-bottom: 50px;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
    /*laver skygge under knappen*/
}

.container-moedosknap {
    display: flex;
    justify-content: center;
}

.moedosblivmedlemknap:hover {
    background-color: black;
    /*når vi hover over knappen skifter baggrundsfarven til sort*/
    color: #fff;
    /*når vi hover over knappen skifter skriften til hvid*/
}

.moedosblivmedlemknap:active {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
    /*når vi klikker på knappen bliver teksten understreget som et link*/
}

.moedoskommed {
    font-size: 1.25rem;
    /*str. på Kom med på holdet!*/
    font-weight: 700;
    margin-bottom: 30px;
}

.videonavn {
    font-weight: 700;
    /*gør teksten til bold*/
    font-size: 1.25rem;
    /*font svarende til 20 fra mockup til mobil version*/
    margin-top: 20px;
    /*sætter luft mellem navn og video billede i mobil version*/
}

.videosport {
    font-weight: 400;
    /*regular tekst*/
    font-size: 1.25rem;
    /*font svarende til 20 fra mockup til mobil version*/
    padding-top: 5px;
    /*linjeafstand mellem navn og sport tekst*/
}

@media (min-width: 992px)
/*Beakpoint 992px*/
    {

    h1,
    h2 {
        font-size: 2.92rem
    }

    h3 {
        font-size: 2rem;
    }

    p,
    ol,
    li,
    ul {
        font-size: 1.25rem
    }

    a {
        font-size: 1.25rem;
    }

    /*Sektionen tilhører navbar og logo*/
    .altindhold {
        height: 104px;
        /*Angiver højden på navbar i desktop version*/
    }

    .forsidebillede {
        height: 85vh;
        /*Div hvori forsidebilledet er placereceret bestemmer billedets højde*/
        line-height: 0px;
    }

    .forsidebillede img {
        width: 100%;
        /*Forsidebilledet skal fylde 100% af bredden af den <div>, som den er placeret i (forældrelementet)*/
        height: 100%;
        /*Forsidebilledet skal fylde 100% af højden af den <div>, som den er placeret i (forældrelementet)*/
    }

    .logo {
        margin-top: 50px;
        margin-left: 100px;
        /*Angiver top og højre margen for logo jf. prototype*/
    }

    /*Sektionen indeholder links i desktopversion*/
    #links-desktop {
        display: flex;
        /*Viser menulinks i desktop-version*/
        margin-top: 50px;
        margin-right: 100px;
        /*Angiver top og højre margen for links i menubar*/
    }

    #links-desktop a {
        display: inline-block;
        /*Laver <div> til inline-block element, så links placeres på linjer*/
        color: black;
        /*Links i menu farves sort*/
        text-decoration: none;
        /*Links i menu skal IKKE understreges*/
        font-weight: 400;
        /*Font angives til semi-bold jf. prototype*/
        margin-right: 20px;
        /*Margen til højre for hvert ord i nav-bar sættes til 20px og angiver dermed afstand mellem ordene*/
    }

    #links-desktop a:hover {
        text-decoration: underline;
        /*Links skal understreges, når musen føres over*/
    }

    .blivmedlemknapnavbar {
        background-color: black;
        /*Giver knappen en sort farve*/
        color: white !important;
        /*Farver teksten hvid*/
        padding: 10px 17px;
        /*Angiver størrelse på rammen*/
        border-radius: 30px;
        /*Laver knappens runde hjørner*/
        position: relative;
        /*Gør det muligt at justere på top, bottom, left og right i forhold til elementets oprindelige position*/
        top: -12px;
        /*Sammen med position: relavtive placerer dette elementet på linje med de øvrige elementer*/
    }

    /*Sektionen tilhører drop down menuer på desktop*/
    #links-desktop .dropdown {
        position: relative;
        /*Skaber et relativt element, hvori nedenstående absolutte element placeres.*/
        display: inline-block;
    }

    #links-desktop .dropdown-content {
        display: none;
        /*Dropdownlinks vises ikke by default*/
        position: absolute;
        /*<Div> med dropdown links placeres absolut i forhold til .dropdoen (info-link), og som dermed gør det muligt at åbne boksen uden at det påvirker andre elementer udenfor boksen*/
        background-color: #ffc328;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        text-align: left;
    }

    #links-desktop .dropdown:hover .dropdown-content {
        display: block;
        /*Da <a> er et inline element anvendes display block til at sætte elementerne i en kolonne*/
    }

    #links-desktop .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        /* Drop down links design*/
    }

    #links-desktop .dropdown-content a:hover {
        text-decoration: underline;
        /*Effekter når musen føres over drop down links*/
    }

    /*Sektionen vedrører hamburgermenu der vises i mobilversion*/
    #hamburgermenu label,
    #hamburgermenuinfo label,
    #hamburgermenunyheder label,
    #hamburgermenutrehalvleg label,
    #hamburgermenuvedtagter label,
    #hamburgermenuprivatliv label,
    #hamburgermenublivmedlem label,
    #hamburgermenumoedos label,
    #hamburgermenunyhedunderside label,
    #hamburgermenufaciliteter label,
    #hamburgermenukontakt label,
    #hamburgermenusport label,
    #hamburgermenuarrangementer label {
        display: none
        /*Skjuler hamburgermenu og checkboks i desktopstørrelse*/
    }

    /*Sektionen tilhører forside*/
    .overskrift-hovedbudskab-knap {
        font-weight: 700;
        /*Font angives til bold jf. prototype*/
        margin-left: 100px;
        /*Angiver venstremargen for overskriften*/
        margin-top: 40vh
    }

    .forsideoverskrift {
        font-size: 4.875rem;
        /*Anigver skriftstørrelsen i rem (display tekst)*/
        font-weight: 700;
        /*Font angives til bold jf. prototype*/
    }

    .hovedbudskab {
        font-size: 1.9rem;
        /*Anigver skriftstørrelsen i rem (display tekst)*/
        /*Da elementet er placeret længere nede i css-dokumentet end angivne skrifttype for hele dokumentet, vil skriftstørrelsen være 2 rem grundet spcificitet */
        font-weight: 600;
        /*Font angives til semibold jf. prototype*/
    }

    .blivmedlemknap {
        display: inline-block;
        /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen vertikalt*/
        padding: 10px 30px;
        /*Angiver bredden og højden på rummet/det sorte felt omkring kanppen*/
        font-size: 1.9rem;
        /*Anigver skriftstørrelsen*/
        /*Da elementet er placeret længere nede i css-dokumentet end angivne skrifttype for hele dokumentet, vil skriftstørrelsen være 2 rem grundet spcificitet */
        font-weight: 600;
        /*Font angives til semibold jf. prototype*/
        text-align: center;
        /*Centrerer teksen*/
        text-decoration: none;
        /*Fjerner understregning fra link*/
        background-color: black;
        /*Knappens farve*/
        color: #fff;
        /*Angiver farven på teksten*/
        cursor: pointer;
        /*Ændrer musemarkøren, når den føres over knappen*/
        border-radius: 50px !important;
        /*Laver runder hjørner på knappen jf. prototypen*/
        margin-top: 30px;
        /*Placerer knappen med 30 px top margen*/
    }

    /*Næste sektion tilhører arrangementsektion på forsiden*/
    .kommendearrangementer {
        margin-top: 0px;
        /*Afstand fra forsidebillede til kommende arrangementer)*/
        height: 270px;
        /*Bestemmer højden på den orange kasse i desktop-version*/
        display: flex;
        align-items: flex-start;
        /*display:flex og align-items nulstiller de hvide bokses placering i midten af den orange boks, da der nu også må tages højde for overskriften, som er display:none i mobil-version*/
        padding-top: 110px;
        /*Indsætter afstand mellem overskrift 'Kommende arrangementer' og de hvide bkose*/
        justify-content: space-between;
    }

    .kommendearrangementeroverskrift {
        display: flex;
        /*Viser overskrift i desktop-version*/
        font-weight: 600;
        /*Skriver kommende arrangementer i semibold jf. prototype*/
        margin-left: 100px;
        z-index: 1;
        position: absolute;
    }

    .arrangementet,
    .arrangementto,
    .arrangementtre {
        display: flex;
        /*Laver kolonner*/
        /*Deler elementerne hhv. lgo og tekst op i to lige store kolonner*/
        background-color: white;
        width: 405px;
        height: 205px;
        /*Angiver størrelse på den hvide boks*/
    }

    .arrangementet {
        margin-left: 100px
    }

    .arrangementtre {
        margin-right: 100px;
    }

    /*Næste sektion tilhører velkommen afsnit på forsiden*/
    .velkommen {
        margin-top: 75px;
        /*Angiver afstand mellem velkommen overskrift og arrangementsektion*/
        margin-left: 100px;
        margin-right: 100px;
    }

    .senestenyt-container {
        margin-left: 110px;
        margin-top: 100px
    }

    .fremtilnyhederknap-container {
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
        margin-bottom: 119px;
        /*Placerer knappen i containeren*/
    }

    /*Næste sektion tilhører footeren*/
    .container-footer {
        display: flex;
        /*her vælger vi at elementerne i containeren skal vises som flex elementer der sætter sig efter hinanden*/
        flex-direction: row;
        /*vi fortæller flex elementerne at de skal køre på en række*/
        flex-wrap: wrap;
        /*ved at sætte wrap på så wrapper elementerne sådan at ved stor skærm fylder de op i den plads der er, og når der ikke er plads til et element så rykker det ned på ny række*/
        justify-content: space-between;
        /*Sørger for at footer elememterne skubbes ud til siderne og fylder skærmen i desktop version*/
    }

    .container-footer p,
    .undervisningsformaal {
        color: #fefefe;
        display: flex;
        justify-content: left;
        /*sørger for vores tekst i footeren er venstrejusteret i desktop version*/
    }

    .footerlogo {
        width: 5%;
        /*beskriver at logoet fylder 5% af hele skærmens bredde*/
        position: relative;
        /*gør at vi kan flytte position på logoet*/
        bottom: 125px;
        /*position på logoet. Det er til desktop*/
        left: 90%;
        /*siger at logoet skal sidde 90% af skærmens bredde væk fra venstre side - så det sidder tæt på højre side. Det er til desktop*/
    }

    /*Næste sektion tilhører arrangementer*/
    .arrangementertitel {
        margin-left: 100px;
    }

    .container-kalender {
        width: 100%;
        overflow: hidden;
        /*skjuler det der ligger udenfor div*/
        margin-bottom: 120px;
        display: flex;
    }

    .arrangementinfo {
        position: relative;
        z-index: 2;
        right: 12%;
        margin-top: 13.5%;
        /*laver responsin margin over arrangement info så den aligner med kalenderen*/
    }

    .newsletter-box p {
        transform: rotate(-90deg);
        /*roterer boksen, så den kører op ad højre side*/
        color: #222222;
        /*tekst farve*/
        background-color: #FFDA2E;
        width: 270px;
        /*bredden (højden) på hold dig opdateret boksen*/
        height: 50px;
        /*højden (bredden) på hold dig opdateret boksen*/
        font-weight: 700;
        font-size: 1.8rem;
        /*ændret str. fra mobil til desktop*/
    }

    .newsletter-container {
        transform: translate(0, -20%);
        /*når man åbner boksen, skubbes placeringen op 20%*/
    }

    /*Næste sektion tilhører nyheder*/
    .nyhedsidetitel {
        margin-left: 105px;
        margin-top: 300px;
        font-weight: 600;
    }

    .nyhedoverskrift {
        font-size: 1.8rem;
    }

    .sidetal {
        display: flex;
        justify-content: space-evenly;
        /*her sætter vi sidetallene på midten af skærmen*/
        margin-left: 48%;
        /*dette beskriver at margin til venstre for sidetallene skal hele tiden fylde 48% af skærmens størrelse i desktop version*/
        margin-right: 48%;
        /*dette beskriver at margin til højre for sidetallene skal hele tiden fylde 48% af skærmens størrelse i desktop version*/
    }

    .itemnyhed {
        width: 350px;
        /*bestemmer bredden på billederne når det er desktop version*/
        height: 475px;
        /*bestemmer højden på billederne når det er desktop version*/
        margin: 30px;
        /*sætter margin mellem billederne*/
        padding: 0%;
        /*sørger for at billederne fylder hele div'en*/
    }

    /*Sektionen tilhører nyheder underside*/
    .container-nyhedunderside {
        margin: 110px;
    }

    .tilbagetilnyhederknap {
        margin-left: 110px;
    }

    /*Næste sektion tilhører Sportsaktiviteter*/
    .sporttitel {
        margin-left: 105px;
        margin-top: 300px;
        /*sætter margin mellem menubar og overskrift*/
        font-weight: 600;
    }

    .itemsport {
        height: 375px;
        width: 350px;
    }

    .container-loeb,
    .container-badminton,
    .container-volley,
    .container-motion,
    .container-fodboldu,
    .container-fodboldi {
        margin-left: 100px;
        /*sætter margin for den grå section boks i desktop version*/
        margin-right: 100px;
        /*sætter margin for den grå section boks i desktop version*/
    }

    .sportsgrenoverskrift {
        font-size: 2.92rem;
        /*svarer til font str. 47 fra mockup desktop version*/
        font-weight: 600;
        padding-left: 70px;
        padding-top: 80px;
    }

    .sportsgrenbroedtekst {
        padding-left: 70px;
        padding-top: 40px;
        padding-right: 600px;
        line-height: 1.5;
    }

    .sportsgrenkontaktperson,
    .sportkommed {
        padding-left: 70px;
        padding-top: 40px;
        line-height: 1.5;
    }

    .sportsgrenmere {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sportblivmedlemknap {
        display: inline-block;
        /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
        padding: 10px 50px;
        /*Angiver bredden og højden på rummet/det sorte felt omkring knappen*/
        font-size: 2rem;
        /*Anigver skriftstørrelsen i rem*/
        font-weight: 700;
        /*Font angives til semibold jf. prototype*/
        text-align: center;
        /*Centrerer teksen*/
        text-decoration: none;
        /*Fjerner understregning fra link*/
        background-color: #FFDA2E;
        /*Knappens farve*/
        color: #000;
        /*Angiver farven på teksten*/
        cursor: pointer;
        /*Ændrer musemarkøren, når den føres over knappen*/
        border-radius: 30px;
        /*Laver runder hjørner på knappen jf. prototypen*/
        margin-left: 70px;
        /*Placerer knappen med 100 px venstre margen*/
        margin-bottom: 120px;
        /*sætter margin fra knap til bunden af den grå section kasse*/
        margin-top: 15px;
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.30);
        /*giver knappen en skygge*/
    }

    .sportblivmedlemknap:hover {
        background-color: black;
        /*når vi hover over knappen skifter baggrundsfarven til sort*/
        color: #fff;
        /*når vi hover over knappen skifter skriften til hvid*/
    }

    .sportblivmedlemknap:active {
        background-color: #000;
        color: #fff;
        text-decoration: underline;
        /*når vi klikker på knappen bliver teksten understreget som et link*/
    }

    .sporttilmeld {
        margin-right: 100px;
        margin-top: 10px;
    }

    .container-sport {
        margin-left: 95px;
        /*sætter margin i desktop version*/
        margin-right: 95px;
        /*sætter margin i desktop version*/
    }

    .itemsport {
        flex-grow: 1;
        /*gør at billederne vokser med skærmen og fylder luftrummet ud*/
        width: 250px;
        /*bestemmer bredden på billederne i desktop version*/
        height: 600px;
        /*bestemmer højden på billederne i desktop version*/
        margin: 15px;
        /*sætter margin mellem billederne så der er luft*/
        padding: 0%;
        /*gør at billederne fylder hele div'en - ingen luft*/
    }

    .sportbilledeoverskrift {
        position: relative;
        /*Gør at vi kan flytte på elementet*/
        right: 85px;
        /*flytter teksten 85px til venstre ved desktop version - laver luft i højre*/
        top: 550px;
        /*flytter det 550px ned ved desktop version*/
        color: white;
        /*Top og left: Sætter nyhed overskrift lidt til højre og lidt end på billedet så det sidder på den ønskede lokation*/
        font-weight: 600;
        /*svarer til semibold*/
        font-size: 4rem;
        /*svarer til font str. 20 fra mockup mobil version*/
        z-index: 2;
        text-decoration: none;
        display: flex;
        justify-content: right;
        /*denne bruger vi til at højrejustere overskriften på billederne. Det er ikke align-text, da det er en "knap" og ikke tekst*/
    }

    /*Næstesektion tilhører infoside*/
    .infosektion {
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 50px;
    }

    /*Næste sektion: 3. halvleg side*/
    .klubhusettitel {
        margin-left: 110px;
        font-weight: 600;
        /*sætter tykkelsen på vores font*/
        margin-top: 300px;
    }

    .klubhusetbroedtekst {
        margin-right: 110px;
        margin-left: 110px;
        margin-bottom: 110px;
        margin-top: 20px;
        font-weight: 400;
    }

    .klubbencontainer {
        margin-left: 100px;
        /*sætter margin så det matcher med overskriften i desktop*/
        margin-right: 100px;
        /*sætter margin så det matcher med overskriften i desktop*/
    }

    .itemklubben {
        height: 375px;
        width: 350px;
    }

    /*Næste sektion tilhører faciliteter*/
    .facilitetertitel {
        margin-left: 105px;
        margin-top: 300px;
        font-weight: 600;
    }

    .itemfaciliteter {
        width: 525px;
        /*bestemmer bredden på billederne når det er desktop version*/
        height: 475px;
        /*bestemmer højden på billederne når det er desktop version*/
        margin: 10px;
        /*sætter margin mellem billederne*/
        padding: 0%
            /*sørger for at billederne fylder hele div'en*/
    }

    .container-faciliteter {
        margin-bottom: 125px;
        /*laver margin mellem containeren og footeren*/
        margin-left: 100px;
        /*sætter margin i desktop version så det passer med sidens titel placering*/
        margin-right: 100px;
        /*sætter margin i desktop version så det passer med sidens titel placering*/
    }

    .graaboks {
        height: 385px;
        /*sætter højden på den grå boks i desktop version*/
        margin-top: 45px;
    }

    .graaboks p {
        font-size: 1.8rem;
        /*svarer til font str. på 29 fra mockup*/
        font-weight: 600;
    }

    .graaboks li {
        font-size: 1.8rem;
        /*svarer til font str. på 29 fra mockup*/
        line-height: 2;
        /*laver større linjeafstand mellem liste elementerne*/
        margin-left: 40px;
        margin-top: 20px;
        font-weight: 600;
    }

    .faciliteteroverskrift {
        font-size: 1.8rem;
        top: 80px;
        /*flytter teksten 80px i desktop version - ud fra position relative i mobil version*/
    }

    /*Sektionen tilhører vedtægter*/
    .vedtaegteroevre {
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 50px;
    }

    .vedtaegternedre {
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 50px;
    }

    .vedtaegterliste {
        margin-left: 20px
    }

    /*Sektionen tilhører vedtægter underside*/
    .vedtaegterunderside {
        margin-right: 100px;
        margin-left: 100px;
    }

    /*Sektionen tilhører privatlivspolitik*/
    .privatlivoevre {
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 50px;
    }

    .privatlivnedre {
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 50px;
    }

    /*Sektionen tilhører privatlivspolitik underside*/
    .privatlivunderside {
        margin-right: 100px;
        margin-left: 100px;
    }

    /*Sektionen tilhører kontakt*/
    .kontakttitel {
        margin-left: 105px;
        margin-top: 120px;
        font-weight: 600;

    }

    .itemkontakt {
        width: 300px;
        /*bestemmer bredden på video billederne i desktop version*/
        margin-bottom: 100px;
        /*sætter margin mellem billederne så der er luft og plads til*/
        padding: 0%;
        /*gør at billederne fylder hele div'en - ingen luft*/
        margin-left: 70px;
        margin-right: 70px;
    }

    .kontaktbillede {
        height: 550px;
        /*ændrer på højden af video billederne i desktop version*/
    }


    .kontaktnavn {
        font-size: 1.8rem;
        /*font svarende til 29 fra mockup til desktop version*/
    }

    .kontaktinfo {
        font-size: 1.8rem;
        /*font svarende til 29 fra mockup til desktop version*/
    }

    .netbaggrundsbillede {
        height: 650px;
        /*sætter højden på baggrundsbilledet i mobil version*/
    }

    .netbaggrundsbillede {
        width: 100%;
        height: 1150px;
        /*sætter højden på baggrundsbilledet i mobil version*/
        object-fit: cover;
        filter: blur(20px);
        filter: opacity(30%);
        position: absolute;
        /*ved at bruge absolut, sætter det billedet bag de øvrige elementer uden at der kommer et luftrum fra hvor billedet var placeret*/
        z-index: -1;
    }

    .moedjoergen {
        margin-right: 100px;
        display: flex;
        justify-content: space-between;
    }

    .moedjoergentekst {
        font-weight: 600;
        /*semibold*/
        margin-top: 180px;
        margin-bottom: 20px;
        max-width: 40vw;
        margin-left: 80px;
        font-size: 2.9rem;
    }

    .moedjoergennavn {
        font-size: 1.8rem;
        /*svarer til font str. 29 i mockup desktop*/
        font-weight: 700;
        margin-top: 50px;
        margin-left: 80px;
    }

    .moedjoergensport {
        font-size: 1.8rem;
        /*svarer til font str. 29 i mockup desktop*/
        font-weight: 400;
        margin-left: 80px;
    }

    .moedosvideojoergen {
        width: 410px;
        /*bestemmer bredden på billederne i mobil version*/
        height: 500px;
        /*bestemmer højden på billederne i mobil version*/
        margin-top: 180px;
    }

    .container-moedjoergen {
        margin-bottom: 50px;
        margin-left: 40px;
        /*sætter margin i mobil version så det passer med sidens titel placering*/
        margin-right: 40px;
        /*sætter margin i mobil version så det passer med sidens titel placering*/
    }

    .medlemmerknap {
        display: inline-block;
        /*Laver inline element til et block elementer og muliggør tilføjelse af padding og margen*/
        padding: 17.5px 50px;
        /*Angiver højden og bredden på rummet/det sorte felt omkring kanppen*/
        font-size: 1.8rem;
        /*Anigver skriftstørrelsen i rem. Svarer til font str. 29*/
        font-weight: 700;
        /*Font angives til semibold jf. prototype*/
        text-align: center;
        /*Centrerer teksen*/
        text-decoration: none;
        /*Fjerner understregning fra link*/
        background-color: #FFDA2E;
        /*Knappens farve*/
        color: #000;
        /*Angiver farven på teksten*/
        cursor: pointer;
        /*Ændrer musemarkøren, når den føres over knappen*/
        border-radius: 30px;
        /*Laver runder hjørner på knappen jf. prototypen*/
        margin-bottom: 70px;
    }

    .container-kontaktknap {
        justify-content: left;
        margin-left: 70px;
        position: relative;
        z-index: 1;
        bottom: 110px;
    }

    /*Næste sektion tilhører mød os*/
    .holdetbillede {
        height: 650px;
        /*sætter højden på billedet i desktop versione*/
        margin-top: 100px;
        /*sætter margin fra top og ned til billedet, pga. menubaren*/
    }

    .moedostitel {
        font-size: 2.625rem;
        /*font str. på titel i desktop version*/
        margin-left: 105px;
        margin-top: 120px;
        font-weight: 600;
    }

    .itemmoedos {
        width: 310px;
        /*bestemmer bredden på video billederne i desktop version*/
        margin-bottom: 100px;
        /*sætter margin mellem billederne så der er luft og plads til*/
        padding: 0%;
        /*gør at billederne fylder hele div'en - ingen luft*/
        margin-left: 68px;
        margin-right: 68px;
    }

    .moedosvideo {
        height: 550px;
        /*ændrer på højden af video billederne i desktop version*/
    }

    .videonavn {
        font-size: 1.8rem;
        /*font svarende til 29 fra mockup til desktop version*/
        padding-top: 30px;
    }

    .videosport {
        font-size: 1.8rem;
        /*font svarende til 29 fra mockup til desktop version*/
        padding-top: 5px;
        /*linjeafstand mellem navn og sport tekst*/
    }

    .moedosblivmedlemknap {
        font-size: 2rem;
        padding: 10px 30px;
        margin: 0;
    }

    .container-moedosknap {
        display: flex;
        justify-content: left;
    }

    .moedoskommed {
        font-size: 2.93rem;
        text-align: left;
        margin-top: 320px;
        margin-right: 100px;
        margin-bottom: 20px;
    }

    /*Næste sektion tilhører bliv medlem*/

    .kontaktformular {
        width: 30%;
        /*Formularen fylder 40% af viewporten*/
        margin-top: 110px;
        margin-right: 100px;
    }

    .blivmedleminfo {
        width: 40%;
        /*Elementet fylder 40% af viewporten*/
    }

    .blivmedlemindhold {
        display: flex;
        /*Indholdet vises i flex-retning*/
        justify-content: space-between;
        /*Angiver at elementerne skal fylde 100% af viewport*/
        margin-left: 70px;
    }
}