@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap%');
/* Fjerner default padding/margin og indsætter font */
*{
    padding: 0;
    margin: 0;
    font-family: 'Ultra', serif;
    scroll-behavior: smooth;
}

li {
    text-indent: -22px;
}

h1 {
    font-size: 22px;
    letter-spacing: 1.5px;
    font-weight: 100;
    font-family: 'Ultra', serif;
}

p{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 28px;
}

button {
    background-color: var(--knap);
    border: none;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    width: 60%;
    height: 3em;
    color: var(--body);
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}



/* Indsætter farve variabler */
:root{
    --kasser: #fcfcfc;
    --skrift: #303030;
    --knap: #cd9c43;
    --baggrund: #326537;
    --body: #efefe3;
}
/* Ændre farve af body på alle sider.*/
body{
    background-color: var(--body);
}


/* Alexanders afsnit */
/* Navigation og burgermenu*/

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 80%;
    float: right;
    margin-top: 20px;
}

nav a {
    text-decoration: none;
    color: var(--body);
    letter-spacing: 1.5px;
}

.header {
    background-color: var(--baggrund);
    z-index: 3;
    width: 100%;
    height: 65px;
    position: relative
}

.header ul {
    list-style: none;
    overflow: hidden;
    padding: 0; 
}

.header ul a {
    display: block;
    padding-top: 30px;
    padding-left: 60px;
    text-decoration: none;
    font-size: 20px;
    background: var(--baggrund);
    color: var(--body);
    margin-bottom: -5px;
    letter-spacing: 1.5px;
}

.header .logo {
    float: left;
    display: block;
    padding-left: 10px;
    margin: 5px;
}

.header .menu-content {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* header logo */
.header__logo {
   margin-top: 5px;
   width: 100px;
}

/* Burgermenu ikon*/

.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
}

/*Child til Label - midterste bar til burgermenu*/

.header .menu-icon .nav-icon {
    background: var(--body);
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}

/* top og bund bar til burgermenu -pseudoelementer*/

.header .menu-icon .nav-icon:before {
    background: var(--body);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 5px
}

.header .menu-icon .nav-icon:after {
    background: var(--body);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -5px
}

.header .menu-btn {
    display: none;
}

/* styling af menu overskrift */

.menu__content--overskrift--container {
    width: 100%;
    background-color: var(--baggrund);
    width: 100%;
    height: 60px;
    
}

.menu__content--overskrift {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--baggrund);
    color: var(--body);    
    }

.menu__content--streg {
    width: 20%;
    height: 2px;
    background-color: var(--body);
    border-style: none;
}


/* styling af underlinks */
.menu__content--brodtekst {
    display: block;
    padding-top: 5px;
    padding-left: 80px;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Lato', sans-serif; ;
    background: var(--baggrund);
    color: var(--body);
    margin-bottom: -5px;
}


/* X-transition - luk-effekt på burgermenu */

.header .menu-btn:checked~.menu-content {
    max-height: 700px;
}

.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;

}

.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

/* styling af side info/overskrift áf siden */

.nav-info-boks {
    background-color: var(--baggrund);
}

.nav-info-boks {
    text-align: center;
}

.nav-overskrift {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-top: -1px;
}

.nav-linje {
    width: 16%;
    height: 2px;
    background-color: var(--body);
    border-style: none;
}

.nav-overskrift h1 {
    color: var(--body);
}

.nav-brodtekst p {
    color: var(--body);
    padding-bottom: 20px;
}

.burgerlogo {
    background-color: var(--baggrund);
}

.burgerlogo img {
    width: 200px;
    height: auto;
    margin-top: 30px;
    padding-left: 20px;

}

.burgerlogo {
    text-align: center;
}

/* billede til siden prisliste */

.side__billede {
    background-color: var(--body);
}

.side__billede img{
    max-width: 100%;
    margin-top: 40px;   
}

/* prisliste styling */

.prisliste {
    background-color: var(--body);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px;
    padding-bottom: 50px;
}
.prisliste__container {
    background-color: #FCFCFC ;
    width: 97%;
}

.prisliste__container--overskrift {
    margin-bottom: 12px;
    margin-top: 40px;
    margin-bottom: 0px;
    margin-bottom: 40px;
}

.prisliste__container--overskrift h1 {
    color: var(--skrift);
}

.prisliste__container--overskrift p{
    margin-left: 20px;
    margin-right: 20px;
}

.prisliste__teltcamp--priser--container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.prisliste__teltcamp--content {
    margin-bottom: 40px;
}

.prisliste__teltcamp--content p {
    margin-bottom: 5px;
    margin-left: 20px;
}

.prisliste__teltcamp--pris p{
    margin-bottom: 5px;
}

.prisliste__teltcamp--pris {
    text-align: right;
    margin-right: 20px;
}

.menu__content--skrift {
    color: var(--body);
}

.prisliste__container--overskrift {
    text-align: center;
}

.prisliste__teltcamp--overskrift {
    text-align: center;
    font-weight: 400;
}


/* prisliste knap styling */

.prisliste__button {
    text-align: center;
    
    margin-bottom: 40px;
}

/* styling af sektion værdisæt */

.vaerdisaet {
    background-color: var(--baggrund);
    color: var(--body);
    display: flex;
    justify-content: center;
}

.vaerdisaet__overskrift {
    text-align: center;
}

.vaerdisaet__liste--li {
    font-family: 'Lato', sans-serif;
}

.vaerdisaet__button {
    text-align: center;
    margin-top: 40px;
}
.vaerdisaet__container{
    margin: 40px;   
}
.vaerdisaet__overskrift {
    margin-bottom: 20px;
}
.Vaerdisaet__brodtekst {
    margin-bottom: 20px;
}

    

/* Christians afsnit */
/*--------------------Forside--------------------*/
/* Sætter baggrund og position for slideshow */
.forside-slideshow {
    background-color: var(--baggrund);
    position: relative;
    margin: auto;
  }
  
  /* Gemmer slideshow billeder til at starte med */
  .forside-slideshow__slide {
    display: none;
  }
  
  /* Sætter størrelse på slideshow billeder */
  .forside-slideshow__img{
    width: 100%;
    height: 385px;
    object-fit: cover;
  }
  
 
  /* Baggrundsfarve på sektion for "Corona Camp Tilbyder" + Sætter indhold i flex */
  .forside-tilbyder{
      background-color: var(--baggrund);
      display: flex;
      justify-content: space-evenly;
      padding-bottom: 20px;
      margin-top: -1px;
  }
    
  /* Størrelse af ikoner */
  .forside-tilbyder__ikon{
      width: 30px;
  }
  
  /* Position + indsætning af flex på sektion om "Hvem er vi?" */
  .forside-hvemsektion{
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 40px;
      margin-left: 40px;
      align-items: center;
  }
  
  /* Position af brødtekst i "Hvem er vi?" sektion. */
  .forside-hvem-p{
      max-width: 500px;
  }
  
  /* Styling af billede ved siden af tekst om Corona Camping. */
  .forside-stibillede{
      margin-top: 40px;
      width: 100%;
      height: 300px;
      object-fit: cover;
      object-position: bottom;
  }
  

  /* Justerer position af første knap på forside */
  .forside-knap-read{
      margin-top: 20px;
      margin-left: 40px;
      margin-bottom: 20px;
  }
  
  /* Styling på indsatte links i forside knapper. */
  .forside-knap__link{
      text-decoration: none;
      color: var(--body);
      font-family: 'Lato', sans-serif;
  }
  
  /* Tilpasning af h2 på forside ift. farver, position og skriftudseende. */
  .forside-h2{
      background-color: var(--baggrund);
      color: var(--body);
      font-size: 22px;
      padding-top: 10px;
      padding-bottom: 40px;
      text-align: center;
      margin-top: -1px;
  }
  

  /* Indsætning af baggrundsfarve på Facebook display */
  .fb-container{
      background-color: var(--baggrund);
      text-align: center;
      padding-bottom: 20px;
      margin-top: -1px;
  }

  .forside-radio-sektion{
      text-align: center;
        margin-top: 40px;
        margin-left: 40px;
        margin-right: 40px;
  } 
    
  /* Position af h1-tekst i radio sektion. */
  .forside-viharradio{
      text-align: center;
  }
  
  /* Position af brødtekst om radio. */
  .forside-radio-p{
      text-align: left;
      margin-left: 15px;
      padding-bottom: 15px;
  }
  
  /* Position af radio logo. */
  .forside-radio-img{
      width: 90%
  }


  /* Justerer position af anden knap på forside */
  .forside-knap{
      margin-top: 40px;
      margin-bottom: 40px;
  }

  .forside-knap__container{
       text-align: center;
  }
  .forside-knap__container2{
      text-align: center;
  }
  .forside-booking-knap{
      background-color: var(--baggrund);
      text-align: center;
      margin-top: -1px;
  }

  .forside-hvemervi {
      text-align: center;
      margin-bottom: 20px;
  }

 /*Cecilies afsnit */
/*Kontaktside*/

.card__kontakt--overskrift{
    background-color: var(--kasser);
    min-width: 100%;
    height: 100px;
    text-align: center;
    color: var(--skrift);
    padding-top: 0.6em;
}

.kontakt--info{
    margin-bottom: 1em;
}

.card__kontakt {
    background-color: var(--kasser);
    height: auto;
    color: var(--body);
    padding-bottom:30px;
    color: var(--skrift);
    text-align: center;
}

.card__section {
    background-color: var(--body);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px;
    padding-bottom: 50px;
}

.card__container {
    width: 85%;
}


/* Rosas afsnit */
/* Om Corona Camping */ 

.cc-campingvogn-image{
    width: 100vw;
}

.cc-natur-image{
    width: 100vw;
}

.p-om-os{
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
}

.h1-om-os{
    padding-top: 40px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--skrift);
}


/* Rosa/Alex */
/* Footer styling */

footer{
    padding-top: 10px;
    margin-top: -5px;
}

footer p{
    font-size: 14px;
    margin: 2px;
}

.footer-flex{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
    justify-content: space-between;
}

.wrapper-footer-find{
 text-align: right;
 }

.wrapper-footer-find img{
    width: 40px;
}

.footer-copy{
    text-align: center;
    margin: 25px;
}


/*Monicas/Alexander afsnit*/
/*Informationer*/

.faciindkob__container {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-right: 40px;
}

.faciindkob__faciliteter--overskrift {
    margin-top:40px ;
    text-align: center;
}

.faciindkob__liste--li {
    font-family: 'Lato', sans-serif;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.faciindkob__liste {
    margin-top: 20px;
}

.faciindkob__liste {
    list-style-position: outside;
    
}

.faciindkob__indkob{
    margin-right: 20px;
    
}

.faciindkob__indkob--overskrift {
    margin-top: 40px;
    text-align: center;
}

.faciindkob__indkob--brodtekst {
    margin-top: 20px;
    margin-bottom: 40px;
}

.nemlig {
    color: var(--skrifttekst);
    text-decoration: none;
}

.aktiviteter__container {
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
}

.aktiviteter__container--overskrift {
    margin-top: 40px;
    text-align: center; 
}

.aktiviteter__container--brodtekst {
    margin-top: 20px;
    margin-bottom: 40px;
}

.p-køre {
    margin-top: 20px;
}

.p-overskrift {
    margin-top: 20px;
    font-weight: 400;
}

/*Alex om corona camping */
.his__container {
    display: flex;
    flex-direction: column;
    
}

.nat__container {
    display: flex;
    flex-direction: column;
}

.facilinks {
    text-decoration: none;
    color: var(--knap);
    font-family: 'lato';
    font-weight: 400;
}


/* Alex media queries */

@media screen and (min-width: 800px) {
    
    /* inforamtioner sider */
    .faciindkob__container {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .faciindkob__indkob {
        max-width: 30%;
    }

    /*om corona camping side */

    .his__container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-evenly;
    }
    
    .nat__container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .his__img {
        width: 50%;
    }

    .his__img img{
        width: 100%;
        height: 560px;
        object-fit: cover;
        margin-bottom: -4px;
    }

    .cc__historie {
        max-width: 50%;
        margin: auto;
    }

    .cc__historie h1 {
        text-align: left;
        margin-left: 40px;
    }
    .cc__nat {
        width: 50%;
        height: 100%;
    }

    .cc__nat img {
        width: 100%;
        height: 560px;
        object-fit: cover;
    }

    .cc__natur {
        max-width: 50%;
        margin: auto;
    }

    .cc__natur h1 {
        text-align: left;
        margin-left: 40px;
    }
    
    .trustpilot-container {
        max-width: 50%;
    }

    /* prisliste */
    .prisliste__container {
        width: 50%;
    }

    .side__billede img {
        height: 400px;
        width: 100%;
        object-fit: cover;
        margin-top: 60px;
    }

    .vaerdisaet__container {
        width: 50%;
    }

    /* Kontakt os */

    .card__container {
        width: 50%;
    }
    
    .kontakt__formular--container {
        width: 48%;
    }

    .kontakt__formular--brodtekst {
        width: 50%;
    }
    /* Footer */
    
    .footer-flex {
        justify-content: space-evenly;
                     
    }

    .wrapper-footer-find img {
        width: 15%;
    }

    /* bruger menu */
    .menu-icon {
        display: none;
    }

    /*button */
    button {
        width: 10em;
    }
}

@media screen and (min-width: 800px) {
    /* Desktop slideshow */

    .forside-stibillede{
        width: 300px;
        max-height: 1500px;
    }

    .forside-hvem-p{
        font-size: 20px;
        line-height: 40px;
        max-width: 700px;
    }

    .forside-article{
        margin: auto;
    }

    .forside-radio-sektion{
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        margin-top: 40px;        
    }

    .forside-radio-img {
        width: auto;
        height: 50%;
    }

    .forside-radio-p{
        font-size: 20px;
        line-height: 40px;
        max-width: 400px;
    }


    .forside-radio-text {
        text-align: left;
    }

    .forside-viharradio{
        text-align: left;
        margin-left: 20px;
        
    }

    .forside-knap__container2 {
        margin-top: -200px;
    }
    .forside-slideshow__img {
        width: 100%;
        height: 700px;
        object-fit: cover;
        object-position: bottom;
    }



  }

@media screen and (max-width: 800px) {
    nav {
        display: none;
    }
    .pil {
        display: none;
    }
      
}



/* Ny kodning (videreudvikling/omskrivning) */

.hvem-fb {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.hvem-fb__hvemsec h1{
    text-align: center;
}


.hvem-fb__hvemsec--overskrift {
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--skrift);
}

.fb-container__overskrift{
    margin-top: 5px;
    padding-top: 35px;
    margin-bottom: 20px;    
}

.fb-container {
    padding-bottom: 40px;
}

.hvem-fb__hvemsec--brodtekst{
    margin-left: 40px;
    margin-right: 40px;
}

.nyradio--overskrift {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--skrift);
}

.nyradio {
    width: 50%;
}

.nyradio--brodtekst {
    margin-right: 40px;
    margin-left: 40px;
}

.nyradio__container--elementer {
    display: flex;
    flex-direction: row;
}

.nyradio__container--brod-knap--container {
    text-align: center;
}

.nyradio__video {
    margin-top: 40px;
    width: 90%;
}

.nyradio__video--container {
    text-align: center;
}

.side__billede--forside {
    margin-top: 40px;
    background-color: var(--baggrund);
}

.side__billede--forside img {
    height: 600px;
    width: 100%;
    object-fit: cover;
}

.forside__footer {
    background-color: var(--baggrund);
    color: var(--body);
    padding-bottom: 1px;
}

.fb-følg-knap {
    text-align: center;
}

.nypil {
    text-align: center;
    z-index: 1;
    position: absolute;
    top: 80%;
}

.side__billede--pris {
    margin-bottom: -5px;
}

.side__billede--pris img{
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.slideshowboks {
    position: absolute;
    z-index: 1;
    background: var(--baggrund);
    width: 400px;
    top: 70%;
    left: 50px;
    opacity: 80%;
    text-align: center;
}

.boks-p {
    line-height: normal;
    margin: 40px;
    font-size: 22px;
    color: var(--body);
}

.current {
    text-decoration: underline 3px;
    font-size: 17px;
}



/* desktop format*/
@media screen and (min-width: 800px) {
    .hvem-fb {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    
    .hvem-fb__hvemsec {
        width: 30%;
    }

    .fb-container {
        background-color: var(--body);
        color: var(--skrift);
    }

    .radiobillede {
        width: 30%;
        height: 10%;
    }

    .nyradio {
        width: 30%;
    }
    
    .radio__mobil {
        display: none;
    }

    .forside-knap__container2 {
        display: none;
    }

    .aktiviteter__container--brodtekst {
        margin-left: 200px;
        margin-right: 200px;
    }

    .forside__footer img {
        width: 40px;
    }

    .forside-tilbyder__container{
        margin-left: -400px;
        margin-right: -400px;
    }

    .nav-info-boks h1 {
        font-size: 33px;
    }

    .nav-info-boks p {
        font-size: 20px;
    }

    .nav-info-boks {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    h1 {
        font-size: 28px;
    }

    .forside-h2{
        font-size: 28px;
    }
}
/* Mobil format*/
@media screen and (max-width: 800px) {
    .fb-container {
        color: var(--body);
    }
    
.nyradio {
    display: none;
}

.side__billede--forside img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.nypil {
    display: none;
}

.slideshowboks {
    position: absolute;
    z-index: 1;
    background: var(--baggrund);
    width: 200px;
    top: 60%;
    left: 20px;
    opacity: 80%;
    text-align: center;
}

.boks-p {
    line-height: normal;
    margin: 20px;
    font-size: 17px;
    color: var(--body);
    text-align: left;
}

}