*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

/*-------styles til headeren---------*/
header {
    display: flex;
    justify-content: center;
    background-color: #414141; /*Header,main og footer skal have baggrundsfarven, ellers får alle elementer farven*/
}

.header{
    width: 85vw; /*så den hvide streg ikke fylder hele breden*/
    padding-top: 1em;
    border-bottom: solid white 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .tilbage {
    transform: rotate(90deg);
    top: 0.5em; /*pilens position*/
    left: 1em;
}

.header h1{
    position: absolute; /*for at få teksten foran billedet*/
    font-size: 40pt;
    color: white;
    font-family: 'Oregano', cursive;
    letter-spacing: 1px;
}

#sol{
    width: 70vw;
}

/*----------styles til main--------*/
main{
    background-color: #414141;
    display: flex;
    flex-direction: column; /*for at kortene til at være lodret*/
    justify-content: center;
    align-items: center;
    padding: 2em 0; /* luft til header og footer*/
    gap: 6em; /*længere luft mellem kortene*/
}

#trekort{
    width: 70vw;
    height: 90vh;
    border-style: solid;
    border-color: #b2bc0d;
    border-width: 8px;
    display: flex; /*for at få billedekortene på vandret*/
}

.billedekort{
    width: 34%;
    height: 100%;
    padding: 1em;
    display: flex; /*for at rykke teksten inde i kortene ned i bunden*/
    flex-direction: column; 
    justify-content: end;
    transition: width 1s; /*bredden skal blive større når man hoover*/
    transition-timing-function: ease;
    opacity: 0.70;
}

.billedekort:hover{
    width: 65%;
    opacity: 1; 
}

.billedekort:first-child{
    background: url(images/img_2767.jpg) no-repeat;
    background-size: cover;
}

.billedekort:nth-child(2){
    background: url(images/img_2882.jpg) no-repeat center;
    background-size: cover;
}

.billedekort:nth-child(3){
    background: url(images/img_2818.jpg) no-repeat center;
    background-size: cover;
}

a:link{
    text-decoration: none;
    color: white;
}

a:visited{
    text-decoration: none;
    color: white;
}

h2{
    font-size: 31pt;
    font-family: 'Oregano', cursive;
    letter-spacing: 1px; 
}

p{
    font-family: 'Pontano Sans', sans-serif;
    font-size: 16pt;
    padding: 0 0 2em 0;
}

.roadtripkort{
    width: 70vw;
    height: 90vh;
    background: url(images/kortmtekst.jpg) no-repeat right;
    background-size: cover; /*shortcut reagere ikke på cover...*/
    display: flex;
    align-items: end;
    padding: 0 0 8em 8em; /*knappens position*/
}

.knap{
    border-style: solid;
    border-color: white;
    border-width: 3.5px;
    border-radius: 10px;
    font-family: 'Oregano', cursive;
    font-size: 36pt;
    background-color: #c92e5d;
    color: white;
    box-shadow: 0 0 10px 2px black; /*x og y er 0 så skyggen kommer rundt alle steder, 10px blur 2px shadow bredde*/
    padding: 1%;
    transition: transform 0.75s ease-out; /*knappens hover effekt*/
}

.knap:hover{
    transform: scale(1.25); /*hvor meget den bliver større*/
    box-shadow: 0 0 15px 4px black; /*10px blur 2px shadow bredde*/
}

.omos{
    width: 70vw;
    padding: 5% 3%;
    background-color: #e1b585;
    display: flex; /* Så de to diver vises i koloner*/
}

.grafik{
    width: 50%;
    display: flex; /*så porten og billedet kan rykkes*/
    flex-direction: column;
    justify-content: center;
    align-items: center; /*så det kun er padding i .omos der styrre afstanden mellem kanten*/
    position: relative; /*så den grå firkant kan komme foran porten*/
}

.grafik img{
    height: 450px; /*størrelsen på porten kan æmdres, fordi det er en svg fil*/
} /*højden er fast så den ikke tilpasser sig*/

.pladsholder{
    width: 250px; /*så hvidt muligt samme bredde som porten*/
    height: 250px; /*højden er fast så den ikke tilpasser sig*/
    position: absolute;/* så den kan være uden for porten*/
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);/*så den bliver ved med at være i midten*/
    z-index: 10;
    background: url(images/img_110609.jpg) no-repeat center;
    background-size: auto 250px; /*så hele højden er med på billedet (showtcut reagere stadig ikek på background-size*/
    box-shadow: 0 0 25px 1px black; /*20px blur så shadow bliver tyndere end på knapperne*/
}

.port {
    position: relative;
    z-index: 2;
}

.text{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end; /*så knappen altid er på linje med porten*/
    align-items: start; /*så teksten er venstrestillet og starter i midten*/
}

.text h2{
    color: white;
}

.text .knap{
    background-color: #ff9412;
    font-size: 24pt;
}

#følgos{
    width: 70vw;
    background-color: #e1b585;
    text-align: center;
    padding-top: 3em;
}

#følgos h2{
    color: white;
}

.some{
    display: flex; 
    flex-direction: column;
    justify-content: space-around;
    padding: 2em;
}

.some img{
    height: 5em;
    margin: 1em 0 0.5em 0;
}

.some a{
    font-family: 'Pontano Sans', sans-serif;
    color: black;
    font-size: 15pt;
}

.some a:hover{
    color: #ff9412;
    text-decoration: underline;
}

/*--------styles til footer-forside--------*/
footer{
    background-color: #414141;
    color: white;
    font-family: 'Oregano', cursive;
    text-align: center;
    padding-bottom: 2em; /*samme afstand som til headeren*/
}

label img{ /*når man klikker på søg ikonet kommer man til inputfeltet*/
    margin-top: 1em;
}

#søgefelt{
    width: 60vh;
    font-size: 16pt;
    padding: 8px;
    font-family: 'Oregano', cursive;
    color: #414141;
    border-style: none;
    border-radius: 5px;
    background-color: #ffddb9;
    margin-bottom: 1em;
}

.tiltoppen{
    transform: rotate(180deg);
    font-size: 60pt;
    position: fixed; /*så den følger med til toppen*/
    bottom: 0.5em; /*pilens position*/
    right: 1.30em;
}

#logo{
    margin-top: 1em; /*space mellem title og logo*/
    width: 150px;
}

/*--------styles til footer-om os--------*/ 
#kontaktknap{
    background-color: #ff9412;
    text-align: center;
    font-size: 20pt;
    padding: 0.5%;
    margin: 0 auto 0.5em auto; /*for at få knappen i midten, ved ikke hvorfor den ikke høre efter ellers..*/ 
    
}

/*--------styles til hvidbjergstrand--------*/
.underside{
    background-color: #414141;
    padding: 0 0;
    display: flex;
    justify-content: center;
    gap: 1em; /*afstand mellem alle elementerne for afstanden mellem knap og billedebreakers skyld*/
}

.hero {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex; /*så teksten kan blive rykket ind i midten*/
    justify-content: center;
    align-items: center;
}

.herovideo {
    position: absolute; /*så videoen kan være baggrund*/
    width: 100%;
    height: 100%; /*videoen skal fylde hele .hero*/
    object-fit: cover;
}

.hero h2{
    color: white;
    font-size: 36pt;
    z-index: 40;
}

.citat{
    text-align: center;
    font-size: 36pt;
    color: #056c66;
    margin: 1em 0; 
}

#trebillederhvidbjerg{
    width: 100%;
    height: 100%;
    display: flex; /*så de tre billeder kommer op på linje*/
    justify-content: center; /*så de kommer i midten*/
    align-items: center;
    flex-wrap: wrap; /*så de ryger ned under hinaden*/
    gap: 2%; /*mellemrum mellem billederne*/
}

.enaftre{
    width: 325px;
    height: 225px;
}

#trebillederhvidbjerg .enaftre:nth-child(1){
    background: url(images/img_2795.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#trebillederhvidbjerg .enaftre:nth-child(2){
    width: 225px; /*den i midten er på højkant*/
    height: 325px;
    background: url(images/img_2785.jpg) no-repeat right;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#trebillederhvidbjerg .enaftre:nth-child(3){
    background: url(images/img_2782.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#adresseelement{
    display: flex; /*så alle elemnter er på individuel linje*/
    flex-direction: column; /*så de kommer på lodret linje*/
    margin: 2em; /*afstanden over og under adresse*/
}

#adresse{
    color: #b2bc0d;
    text-align: center;
}

#lokikon{
    height: 50px; /*afstand til ikonet*/
    margin: 0.5em 0;
}

#loklink{
    font-family: 'Pontano Sans', sans-serif;
    text-align: center;
}

#loklink:hover{
    color: #b2bc0d;
    text-decoration: underline;
}

#beskrivelseskort{
    width: 70vw;
    background-color: #e1b585;
    padding: 1.5em;
}

#beskrivelseskort .knap{
    background-color: #b2bc0d;
    font-size: 24pt;
    padding: 1%;
    position: absolute; /*så knappen ryger foran beskrivelseskortet*/
    left: 50%;
    transform: translate(-50%); /*aå den kommer i midten på x-aksen og ikke kun 50% væk fra kanten*/
}

#beskrivelse{
    text-align: center;
    color: #275b10;
}

#beskrivelsep{
    text-align: center;
    padding: 0 4em;
}

#beskrivelseskort #beskrivelsep{
    margin-bottom: 2em;
}
/*------styles til dropdown content*/
#dropdownContent{
    display: none; /*gemmer content som default*/
}

#toggleButton:hover{
    cursor: pointer;
}

.halvbeskrivelse {
    display: flex;
    flex-wrap: wrap; /*så den tredje .h3ogp automatisk kommer ned under*/
}

.halvbeskrivelse h3{
    color: #275b10;
}

.h3ogp{
    width: 50%; /*så de kommer i to kolonner*/
    padding: 0 2%; /*plads mellem paragraferne*/
}

.halvbeskrivelse .h3ogp a{
    color: #275b10;
}

.halvbeskrivelse .h3ogp a:hover{
    text-decoration: underline;
}

#billedecollagehvidbjerg{
    width: 100%; /*angiv specifik højde og bredde så der kommer whitepsace */
    height: 100%;
    padding: 2%;
    margin: 0 0 4% 0;
    display: flex; /*udgangspunkt for  collagelayout*/
    align-items: center; /*alle collage elementer er rykket ud fra det her udgangspunkt*/
}
/*              Layout for billedecollage mangler stadig*/
#billedecollagehvidbjerg #img1{
    width: 200px;
    height: 200px;
    background: url(images/img_2796.jpg) no-repeat bottom;
    background-size: cover;
    z-index: 0;
}

#billedecollagehvidbjerg #img2{
    width: 250px;
    height: 300px;
    background: url(images/img_2791.jpg) no-repeat bottom;
    background-size: cover;
    z-index: 0;
}

#firkant{
    width: 40px;
    height: 350px;
    background: #275b10;
    z-index: 10;
}

#billedecollagehvidbjerg #img3{
    width: 275px;
    height: 350px;
    background: url(images/img_2799.jpg) no-repeat left;
    background-size: cover;
    z-index: 20;
    right: 25px;
}
/*drowdown content slut*/

#billedebreakerhvidbjerg{
    width: 100vw;
    height: 100vh;
    background: url(images/img_110936.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 30px 1px white;
}

#delelement{
    text-align: center;
    margin: 1em;
}

#delelement h2{
    color: #056c66;
}

#delelement p{
    color: white;
    padding: 1em 0 0 0;
}

h3{
    color: #b2bc0d;
    font-family: 'Oregano', cursive;
    font-size: 26pt;
}

#billedegridhvidbjerg{
    display: flex; /*så hele grid'et kan rykkes*/
    justify-content: center; /*så grid'et kommet i midten*/
    display: grid;
    margin-bottom: 5em;
    width: 70vw; /*samme bredde som solen*/
    height: 100%;
    grid: 140px 210px 140px 210px 140px / 140px 210px 210px 140px;
    gap: 20px;
}

#billedegridhvidbjerg #A{
    width: 140px; /*kvadratisk størrelse*/
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    background: url(images/img_2797.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #B{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    background: url(images/img_2766.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #C{
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    background: url(images/img_114239.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #D{
    grid-row: 2 / 3;
    grid-column: 3 / 5;
    background: url(images/img_2773.jpg) no-repeat bottom;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #E{
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    background: url(images/img_2768.jpg) no-repeat bottom;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #F{
    grid-row: 3 / 5;
    grid-column: 3 / 4;
    background: url(images/img_2803.jpg) no-repeat left;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #G{
    grid-row: 3 / 4;
    grid-column: 4 / 5;
    background: url(images/img_2750.jpg) no-repeat right;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridhvidbjerg #H{
    width: 140px; /*kvadratisk størrelse*/
    grid-row: 5 / 6;
    grid-column: 2 / 3;
    background: url(images/img_2786.jpg) no-repeat center;
    background-size: cover;
    justify-self: end; /*så den er parallel med den inderste linje*/
    box-shadow: 0 0 20px 0.5px black;
}

/*------styles til underside footer*/

#footerknapper{
    display: flex; /*så knapperne kommer på samme linje*/
    justify-content: center; /*så de kommer i midten*/
    gap: 2em;
    margin: 0.75em 0;
}

#footerknapper .knap{
    font-size: 28pt;
    padding: 2%;
}

#footerknapper .knap:hover{
    transform: scale(1.10); /*mindre end knapperne i maincontent*/
}

#omknap{
    background-color: #ff9412;
    width: 5em; /*ellers står teksten på to linjer*/
}

#kontaktknap{
    background-color: #f4af07;
    width: 3.5em;
}

footer .some{
    flex-wrap: nowrap; /*så de er uafhængige af p elementet*/
    flex-direction: row; /*så de er på vandret*/ 
    justify-content: center;
}

footer .some img{
    height: 4em;
    margin: 1em 2em 0em 2em;
}

footer .some p{
    display: none;
    margin: 0;
}

/*-------styles til underside træskohage----------*/

#trebilledertrasko{
    width: 100%;
    height: 100%;
    display: flex; /*så de tre billeder kommer op på linje*/
    justify-content: center; /*så de kommer i midten*/
    align-items: center;
    flex-wrap: wrap; /*så de ryger ned under hinaden*/
    gap: 2%; /*mellemrum mellem billederne*/
}

#trebilledertrasko .enaftre:nth-child(1){
    background: url(images/img_2913.jpg) no-repeat bottom;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#trebilledertrasko .enaftre:nth-child(2){
    width: 225px; /*den i midten er på højkant*/
    height: 325px;
    background: url(images/img_2934.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#trebilledertrasko .enaftre:nth-child(3){
    background: url(images/img_2927.jpg) no-repeat right;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#billedecollagetrasko{
    width: 100%; /*angiv specifik højde og bredde så der kommer whitepsace */
    height: 100%;
    padding: 2%;
    margin: 0 0 4% 0;
    display: flex; /*udgangspunkt for  collagelayout*/
    align-items: center; /*alle collage elementer er rykket ud fra det her udgangspunkt*/
}

#billedecollagetrasko #img1{
    width: 200px;
    height: 200px;
    background: url(images/img_2909.jpg) no-repeat bottom;
    background-size: cover;
    z-index: 0;
}

#billedecollagetrasko #img2{
    width: 250px;
    height: 300px;
    background: url(images/img_2867.jpg) no-repeat left;
    background-size: cover;
    z-index: 0;
}

#billedecollagetrasko #img3{
    width: 275px;
    height: 350px;
    background: url(images/img_2933.jpg) no-repeat left;
    background-size: cover;
    z-index: 20;
    right: 25px;
}

#billedebreakertrasko{
    width: 100vw;
    height: 100vh;
    background: url(images/img_2882.jpg) no-repeat center;
    box-shadow: 0 0 30px 1px white;
}

#billedegridtrasko{
    display: flex; /*så hele grid'et kan rykkes*/
    justify-content: center; /*så grid'et kommet i midten*/
    display: grid;
    width: 70vw; /*samme bredde som solen*/
    height: 100%;
    grid: 140px 210px 140px 210px 140px / 140px 210px 210px 140px;
    gap: 20px;
}
/*            gentagelser så hver individuel div kan få baggrundsbillede*/
#billedegridtrasko #A{
    width: 140px; /*kvadratisk størrelse*/
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    background: url(images/img_2878.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #B{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    background: url(images/img_2937.jpg) no-repeat;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #C{
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    background: url(images/img_2906.jpg) no-repeat;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #D{
    grid-row: 2 / 3;
    grid-column: 3 / 5;
    background: url(images/img_2917.jpg) no-repeat bottom;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #E{
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    background: url(images/img_2935.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #F{
    grid-row: 3 / 5;
    grid-column: 3 / 4;
    background: url(images/img_2922.jpg) no-repeat left;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #G{
    grid-row: 3 / 4;
    grid-column: 4 / 5;
    background: url(images/img_2880.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridtrasko #H{
    width: 140px; /*kvadratisk størrelse*/
    grid-row: 5 / 6;
    grid-column: 2 / 3;
    background: url(images/img_2931.jpg) no-repeat center;
    background-size: cover;
    justify-self: end; /*så den er parallel med den inderste linje*/
    box-shadow: 0 0 20px 0.5px black;
}

/*------Styles til underside Holster hage*/
#trebillederholster{
    width: 100%;
    height: 100%;
    display: flex; /*så de tre billeder kommer op på linje*/
    justify-content: center; /*så de kommer i midten*/
    align-items: center;
    flex-wrap: wrap; /*så de ryger ned under hinaden*/
    gap: 2%; /*mellemrum mellem billederne*/
}

#trebillederholster .enaftre:nth-child(1){
    background: url(images/img_2856.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#trebillederholster .enaftre:nth-child(2){
    width: 225px; /*den i midten er på højkant*/
    height: 325px;
    background: url(images/img_2917.jpg) no-repeat right;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#trebillederholster .enaftre:nth-child(3){
    background: url(images/img_2858.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 25px 1px black;
}

#billedecollageholster{
    width: 100%; /*angiv specifik højde og bredde så der kommer whitepsace */
    height: 100%;
    padding: 2%;
    margin: 0 0 4% 0;
    display: flex; /*udgangspunkt for  collagelayout*/
    align-items: center; /*alle collage elementer er rykket ud fra det her udgangspunkt*/
}

#billedecollageholster #img1{
    width: 200px;
    height: 200px;
    background: url(images/img_2841.jpg) no-repeat center;
    background-size: cover;
    z-index: 0;
}

#billedecollageholster #img2{
    width: 250px;
    height: 300px;
    background: url(images/img_2820.jpg) no-repeat center;
    background-size: cover;
    z-index: 0;
}

#billedecollageholster #img3{
    width: 275px;
    height: 350px;
    background: url(images/img_2839.jpg) no-repeat right;
    background-size: cover;
    z-index: 20;
    right: 25px;
}

#billedebreakerholster{
    width: 100vw;
    height: 100vh;
    background: url(images/img_2823.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 30px 1px white;
}

#billedegridholster{
    display: flex; /*så hele grid'et kan rykkes*/
    justify-content: center; /*så grid'et kommet i midten*/
    display: grid;
    width: 70vw; /*samme bredde som solen*/
    height: 100%;
    grid: 140px 210px 140px 210px 140px / 140px 210px 210px 140px;
    gap: 20px;
}
/*gentagelser så hver individuel div kan få baggrundsbillede*/
#billedegridholster #A{
    width: 140px; /*kvadratisk størrelse*/
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    background: url(images/img_2844.jpg) no-repeat;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #B{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    background: url(images/img_2836.jpg) no-repeat;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #C{
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    background: url(images/img_2853.jpg) no-repeat right;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #D{
    grid-row: 2 / 3;
    grid-column: 3 / 5;
    background: url(images/img_2825.jpg) no-repeat bottom;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #E{
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    background: url(images/img_2861.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #F{
    grid-row: 3 / 5;
    grid-column: 3 / 4;
    background: url(images/img_2847.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #G{
    grid-row: 3 / 4;
    grid-column: 4 / 5;
    background: url(images/img_2828.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 0 20px 0.5px black;
}

#billedegridholster #H{
    width: 140px; /*kvadratisk størrelse*/
    grid-row: 5 / 6;
    grid-column: 2 / 3;
    background: url(images/img_2814.jpg) no-repeat center;
    background-size: cover;
    justify-self: end; /*så den er parallel med den inderste linje*/
    box-shadow: 0 0 20px 0.5px black;
}

/*-------styles til underside roadtrip-----*/
#roadtriph2{
    color: #c92e5d;
    margin-bottom: -1em;
}

.roadtripkort h2{
    color: #c92e5d;
    font-size: 46pt;
}

article h2{
    color: #741E5E;
    text-align: center;
}

article #beskrivelsep{
    color: white;
}

.sektion{
    display: flex; /*så de kommer på lodret linje*/
    align-items: center; /*så de bliver centreret på y-aksen*/
    margin: 4em 1em;
}

.halvcirkel img{
    height: 350px; /*så halvcirklen er lidt mindre end billedet*/
    z-index: -1; /*så halv cirklen er bagerst*/
}

.sektion .h3ogp{
    margin-right: -7em; /*så teksten kommer lidt over halvcirklen*/
    z-index: 5; /*så teksten kommere foran halvcirklen*/
}

.sektion .h3ogp h3{
    color: #741E5E;
    text-align: left;
}

.sektion .h3ogp p{
    color:white;
    text-align: right;
}

.billedefirkant{
    width: 400px;
    height: 350px;
    background: url(images/sunrise.jpg) no-repeat;
    background-size: cover;
}

.sektion:nth-of-type(3) .billedefirkant{
    background: url(images/sunset.jpg) no-repeat center;
    background-size: cover;
}

.sektion:nth-of-type(2){
    justify-content: space-between; /*mellemrum mellem billedet og teksten*/
}

.sektion:nth-of-type(2) .h3ogp{
    background-color: #741E5E;
    margin: 0%;
}

.sektion:nth-of-type(2) .h3ogp h3{
    color: #c92e5d;
    text-align: left;
}

.sektion:nth-of-type(2) .h3ogp p{
    text-align: left;
}

#billedecirkel{
    background-color: #c92e5d;
    width: 350px; /*kvadratisk*/
    height: 350px;
    border-radius: 50%; /*50% gør div'en til en cirkel*/
    background: url(images/img_2818.jpg) no-repeat;
    background-size: cover;
}

/*---------------mediea q 1000 tablet---------------*/
/*---------------mediea q 1000 tablet---------------*/
/*---------------mediea q 1000 tablet---------------*/
/*---------------mediea q 1000 tablet---------------*/

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

    .header h1{
        font-size: 28pt;
    }

    .header {
        width: 100vw;
    }

    /*--------styles til main--------*/

    #trekort{
        flex-direction: column;
        width: 90vw;
    }

    .billedekort{
        width: 100%; /*højden og breden er byttet om, så de udvidder sig lodret*/
        height: 34%;
        padding: 0 1em;
        transition: height 1s; /*højden skal blive større når man hoover*/
        transition-timing-function: ease;
        opacity: 1;
    }

    .billedekort:hover{
        height: 65%;
        width: 100%; /*Ellers forblev breden stadig kort*/
    }

    h2{
        font-size: 32pt;
    }

    p{
        font-size: 14pt;
    }

    .roadtripkort{
        width: 85vw;
        height: 50vh;
        background-position: right;
        padding: 0 0 4em 4em;
    }

    .knap{
        font-size: 32pt;
        padding: 1.5%;
    }

    .omos{
        flex-direction: column;
        width: 90vw;
    }

    .omos p{
        margin: 0 4em;
    }

    .grafik{
        width: 100%;
        height: 50%;
        justify-content: center;
        align-items: center;
        margin-bottom: 2em;
    }

    .pladsholder{
        width: 250px;
        height: 250px;
    }

    .text .knap{
        font-size: 26pt;
    }

    .text {
        align-items: center;
        width: 100%;
    }

    .text p{
        text-align: center;
    }

    #følgos{
        width: 90vw;
    }

    .some img{
        height: 4.5em;
    }

    /*-----styles til forside footer-----*/

    #søgefelt{
        width: 40vw;
    }

    .tiltoppen{
        font-size: 45pt;
        right: 1em;
    }

    /*-----styles til underside hvidbjerg strand-----*/

    .hero {
        height: 50vh; /*I og med jeg har sat object-fit til cover 
        cutter den selv størrelsen til, hvilket ikke gør noget for min video*/
    }

    #trebillederhvidbjerg{
        gap: 0%;
        width: 100vw;
    }

    .enaftre{
        width: 275px; /*tilføj box-shadow hvid du får tid*/
        height: 200px;
        background-color: #ff9412;
    }
    
    .enaftre:nth-child(2){
        width: 200px; /*den i midten er på højkant*/
        height: 300px;
    }

    #loklink{
        font-size: 14pt;
    }

    #beskrivelseskort{
        width: 85vw;
    }

    #beskrivelsep{
        padding: 0;
    }

    #billedecollagehvidbjerg #img1{
        height: 175px;
    }

    #billedecollagehvidbjerg #img2{
        height: 250px;
    }

    #firkant{
        height: 300px;
    }
    
    #billedecollagehvidbjerg #img3{
        height: 300px;
    }

    #billedebreakerhvidbjerg{
        height: 50vh;
    }

    #billedegridhvidbjerg{
        grid: 100px 170px 100px 170px 100px / 100px 170px 170px 100px; /*mindre kasser*/
        gap: 10px; /*mindre mellemrum*/
    }

    #billedegridhvidbjerg #A{
        width: 100px; /*kvadratisk størrelse*/
    }

    #billedegridhvidbjerg #H{
        width: 100px; /*kvadratisk størrelse*/
    }

    /*----styles til underside Træskohage Fyr------*/

    #trebilledertrasko{
        gap: 0%;
        width: 100vw;
    }

    #billedecollagetrasko #img1{
        height: 175px;
    }

    #billedecollagetrasko #img2{
        height: 250px;
    }
    
    #billedecollagetrasko #img3{
        height: 300px;
    }

    #billedebreakertrasko{
        height: 50vh;
    }

    #billedegridtrasko{
        grid: 100px 170px 100px 170px 100px / 100px 170px 170px 100px; /*mindre kasser*/
        gap: 10px; /*mindre mellemrum*/
    }

    #billedegridtrasko #A{
        width: 100px; /*kvadratisk størrelse*/
    }

    #billedegridtrasko #H{
        width: 100px; /*kvadratisk størrelse*/
    }

    /*-----styles til underside Holster Hage----*/
    #trebillederholster{
        gap: 0%;
        width: 100vw;
    }

    #billedecollageholster #img1{
        height: 175px;
    }

    #billedecollageholster #img2{
        height: 250px;
    }
    
    #billedecollageholster #img3{
        height: 300px;
    }

    #billedebreakerholster{
        height: 50vh;
    }

    #billedegridholster{
        grid: 100px 170px 100px 170px 100px / 100px 170px 170px 100px; /*mindre kasser*/
        gap: 10px; /*mindre mellemrum*/
    }

    #billedegridholster #A{
        width: 100px; /*kvadratisk størrelse*/
    }

    #billedegridholster #H{
        width: 100px; /*kvadratisk størrelse*/
    }

    /*-----styles til roadtrip------*/
    .sektion{
        display: flex;
        flex-wrap: wrap; /*så teksten ryger ned på næste linje af sig selv*/
        justify-content: space-between; /* mellemrum mellem halvcirklen og teksten*/
    }

    .billedefirkant{
        width: 100%; /*billedet skubber teksten ned*/
        margin-bottom: 1.5em; /*afstand mellem billede og .h3ogp+halvcirklen*/
    }

    .halvcirkel img{
        height: 275px; /*så halvcirklen er lidt mindre end billedet*/
    }

    .sektion .h3ogp{
        margin-right: 0; /*så teksten er ud fra halvcirklen*/
        width: 75%;
    }

    .sektion .h3ogp h3{
        text-align: right;
    }

    .sektion:nth-of-type(2){
        justify-content: center; /*mellemrum mellem billedet og teksten*/
    }

    .sektion:nth-of-type(2) .h3ogp{
        width: 100%; /*så den lilla boks fylder det hele*/
        margin-top: 1.5em; /*afstand mellem cirklen og teksten*/
        padding: 1em 3.5em; /*luft i den lilla boks*/
    }
}

/*------------mediea q 760 mobil---------------*/
/*------------mediea q 760 mobil---------------*/
/*------------mediea q 760 mobil---------------*/
/*------------mediea q 760 mobil---------------*/

@media screen and (max-width:760px){
    .header h1 {
        font-size: 19pt;
    }

    .header {
        width: 100%;
        padding-top: 4%;
    }

    .header .tilbage{
        top: 0.25em; /*pilensposition*/
        left: 0.5em;
    }

    #sol {
        width: 100%;

    }

    /*--------styles til main--------*/

    main{
        gap: 3em;
    }

    .billedekort{
        padding: 1em 1em; 
    }

    h2 {
        font-size: 24pt;
    }

    p{
        font-size: 14pt;
        padding: 0;
    }

    .roadtripkort{
        width: 90%;
        height: 40vh;
        padding: 3em 1.5em;
        background: url(images/kortudentekst.jpg) no-repeat left;
        background-size: cover;
    }

    .omos {
        width: 90%;
    }

    .omos p{
        margin: 0;
    }

    .grafik img {
        width: 85vw;
    }

    .text h2{
        text-align: center;
    }

    .text p{
        padding: 2% 0 4% 0;
    }

    #følgos {
        width: 90%;
        padding: 1.5em;
    }

    .some img{
        height: 4em;
    }

    #følgos a{
        padding: 0.5em 0 1.5em 0;
    }

/*-------forside footer----------*/
    label img{
        width: 40px;
    }

    #søgefelt{
        width: 60vw;
    }

    .tiltoppen{
        display: none;
    }

    /*--------styles til om os--------*/
    
    .header .tilbage{
        top: 0.4%;
        font-size: 20pt;
    }
    
    #omosfooter .knap{
        font-size: 16pt;
        border-width: 2.5px;
    }

    /*-----styles til underside hvidbjerg strand-----*/

    .hero{
        height: 50vh; 
    }

    .hero h2{
        font-size: 30pt;
    }

    .citat{
        font-size: 24pt;
    }

    #trebillederhvidbjerg{
        align-content: space-between;
    }
    
    .enaftre {
        width: 85vw;
        height: 40vh;
    }

    #trebillederhvidbjerg .enaftre:nth-child(1){
        background-size: cover;
        background-position: bottom; /*beskæring så der ikke kommer så meget himmel med*/
    }

    #trebillederhvidbjerg .enaftre:nth-child(2){
        width: 85vw; /*den i midten er på same størrelse*/
        height: 40vh;
        background-size: cover;
    }

    #trebillederhvidbjerg .enaftre:nth-child(3){
        background-size: cover;
        background-position: bottom; /*beskæring så mere græs kommer med*/
    }

    #beskrivelseskort{
        width: 90vw;
    }

    #billedecollagehvidbjerg{
        flex-direction: column;
    }

    #firkant{
        width: 100%;
        height: 40px;
    }

    #billedecollagehvidbjerg #img3{
        width: 100%;
    }

    .h3ogp{
        width: 100%; /*så de igen bliver til en kolonne på mobil*/
        padding: 3% 2%; /*plads mellem paragraferne*/
    }

    #billedebreakerhvidbjerg{
        width: 100vw;
        height: 50vh; /*så den ikke bliver så høj*/
    }

    #billedegridhvidbjerg{
        grid: 80px 100px 80px 100px 80px / 80px 100px 100px 80px; /*mindre kasser*/
        gap: 5px; /*mindre mellemrum*/
    }

    #billedegridhvidbjerg #A {
        display: none;
    }

    #billedegridhvidbjerg #B{
        display: none;
    }

    #billedegridhvidbjerg #G{
        display: none;
    }

    #billedegridhvidbjerg #H{
        display: none;
    }

    /*---------styles til underside træskohage fyr*/
    #trebilledertrasko{
        align-content: space-between;
    }

    #trebilledertrasko .enaftre:nth-child(2){
        width: 85vw; /*den i midten er på same størrelse*/
        height: 40vh;
    }

    #billedecollagetrasko{
        flex-direction: column; /*så "collages kommer på lodret rækker*/
    }

    #billedecollagetrasko #img3{
        width: 100%;
    }

    #billedebreakertrasko{
        width: 100vw;
        height: 40vh; /*så den ikke bliver så høj*/
    }

    #billedegridtrasko{
        grid: 80px 100px 80px 100px 80px / 80px 100px 100px 80px; /*mindre kasser*/
        gap: 5px; /*mindre mellemrum*/
    }

    #billedegridtrasko #A {
        display: none;
    }

    #billedegridtrasko #B{
        display: none;
    }

    #billedegridtrasko #G{
        display: none;
    }

    #billedegridtrasko #H{
        display: none;
    }
    /*------styles til underside holster hage------*/
    #trebillederholster{
        align-content: space-between;
    }

    #trebillederholster .enaftre:nth-child(2){
        width: 85vw; /*den i midten er på same størrelse*/
        height: 40vh;
        background-position: center;
    }

    #billedecollageholster{
        flex-direction: column;
    }

    #billedecollageholster #img3{
        width: 100%;
    }

    #billedebreakerholster{
        width: 100vw;
        height: 40vh; /*så den ikke bliver så høj*/
    }

    #billedegridholster{
        grid: 80px 100px 80px 100px 80px / 80px 100px 100px 80px; /*mindre kasser*/
        gap: 5px; /*mindre mellemrum*/
    }

    #billedegridholster #A {
        display: none;
    }

    #billedegridholster #B{
        display: none;
    }

    #billedegridholster #G{
        display: none;
    }

    #billedegridholster #H{
        display: none;
    }

    /*-----styles til roadtrip-----*/
    
    .sektion{
        margin: 4em 0.25em;
    }
    
    .billedefirkant{
        height: 200px; /*billedet skubber teksten ned*/
    }

    .sektion .h3ogp{
        width: 100%;
    }

    .sektion .h3ogp h3{
        text-align: center;
    }

    .sektion .h3ogp p{
        text-align: center;
    }

    .halvcirkel img{
        display: none;
    }

    #billedecirkel{
        width: 250px; /*kvadratisk*/
        height: 250px;
    }

    .sektion:nth-of-type(2) .h3ogp{
        padding: 5%; /*luft i den lilla boks*/
    }
}