@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
    background-color: #fff6d5;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

header{
    position: sticky;
    top: 0px;
    background-color: #fff6d5;
    width: 100%;
    z-index: 1000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container{
    max-width: 65rem;
    padding: 0 2rem;
    display: flex;
    position: relative;
    align-content: center;
    justify-content: flex-start;
    height: 70px;
}

.logo-container{
    flex: 1;
    display: flex;
    align-items: center;
    z-index: 1;
    position: fixed;
    margin: 10px;
}

img{
    width: 100px;
}

.nav-btn{
    flex: 3;
    display: flex;
    align-items: center;
}

.nav-links{
    flex: 2;
    justify-content: center;
}

.log-sign{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.logo span{
    font-weight: 300;
}

.btn{
    display: inline-block;
    padding: .5rem 1.3rem;
    font-size: .8rem;
    border: 2px solid #fff;
    border-radius: 2rem;
    line-height: 1;
    margin: 0 .2rem;
    transition: .3s;
    text-transform: uppercase;
}

.btn.solid, .btn.transparent:hover{
    background-color: #fff;
    color: #69e776;
}

.btn.transparent, .btn.solid:hover{
    background-color: transparent;
    color: #0b4420;
}

.nav-links > ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-link{
    position: relative;
}

.nav-link > a{
    line-height: 3rem;
    color: #afb384;
    padding: 0 .8rem;
    letter-spacing: 1px;
    font-size: .80rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}

.nav-link > a > i{
    margin-left: .2rem;
}

.nav-link:hover > a{
    transform: scale(1.1);
}

.dropdown{
    position: absolute;
    top: 100%;
    left: 0;
    width: 10rem;
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: .5s;
}

.dropdown ul{
    position: relative;
}

.dropdown-link > a{
    display: flex;
    background-color: #fff6d5;
    color: #afb384;
    padding: .5rem 1rem;
    font-size: .9rem;
    align-items: center;
    justify-content: space-between;
    transition: .3s;
}

.dropdown-link:hover > a{
    background-color: #afb384;
    color: #fff;
}

.dropdown-link:not(:nth-last-child(2)){
    border-bottom: 1px solid #efefef;
}

.dropdown-link i{
    transform: rotate(-90deg);
}

.arrow{
    position: absolute;
    width: 11px;
    height: 11px;
    top: -5.5px;
    left: 32px;
    background-color: #fff;
    transform: rotate(45deg);
    cursor: pointer;
    transition: .3s;
    z-index: -1;
}

.dropdown-link:first-child:hover ~ .arrow{
    background-color: #34db6e;
}

.dropdown-link{
    position: relative;
}

.dropdown.second{
    top: 0;
    left: 100%;
    padding-left: .8rem;
    cursor: pointer;
    transform: translateX(10px);
}

.dropdown.second .arrow{
    top: 10px;
    left: -5.5px;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: auto;
}

/* Styling af sprogslideren */
.sprog{
    display: flex;
    position: relative;
    color: #afb384;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-right: 20px;
    font-size: 0.80rem;
}

.check{
    width: 20px;
    cursor: pointer;
    margin-right: 15px;
}


.check:before{
    position: absolute;
    content:'';
    width: 25px;
    height: 15px;
    background: #ded7af;
    border-radius: 25px;
}

.check:checked::before{
    background: #ded7af;
}

.check::after{
    position: absolute; 
    content:'';
    left: 0px;
    width: 15px;
    height: 15px;
    background:#d85e12;
    border-radius: 25px;
    transition: 0.25s;
    box-sizing: border-box;
    border:2px solid #ded7af;
}

.check:checked::after{
    left: 12px;
    border: 2px solid #ded7af;
}

/*Burger menu styling */
.hamburger-menu-container{
    flex: 1;
    display: none;
    align-items: center;
    justify-content: flex-end;
}

.hamburger-menu{
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hamburger-menu div{
    width: 1.6rem;
    height: 3px;
    border-radius: 3px;
    background-color: #d85e12; 
    /* streg i midten */
    position: relative;
    z-index: 1000;
    transition: .5s;
}

.hamburger-menu div:before,
.hamburger-menu div:after{
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: #d85e12; /* Kryds */
    border-radius: 3px;
    transition: .5s;
    
}

.hamburger-menu div:before{
    transform: translateY(-7px);
}

.hamburger-menu div:after{
    transform: translateY(7px);
}

#check{
    position: absolute;
    right: 1.5rem;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 120px;
    z-index: 90000;
    cursor: pointer;
    opacity: 0;
    display: none;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div{
    background-color: transparent;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:before{
    transform: translateY(0) rotate(-45deg);
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:after{
    transform: translateY(0) rotate(45deg);
}

/************************* STYLING AF FORSIDE ****************************/
/* BANNER */
.banner{
    width: 100%;
    }
    
    /* GRØN BOKS */
    /* Tekst i grøn boks */
    .gronboks{
        width: 100%;
        background-color: #afb283;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 5px;
        padding: 2% 12%;
        margin-top: 1%;
    }
    .tekstforside{
        background-color: #afb283;
        width:90%;
        line-height: 1.5;
    }
    .tekstforside h1{
        font-size: 2.2em;
        color: #fff6d4;
    }
    .tekstforside p{
        font-size: 1em;
        color: #fff6d4;
    }
    
    
    /* Foldud text */
    #ch{
        display: none;
    }
    #ch:checked ~ .foldud {
        display: block;
    }
    #ch:checked ~ label {
        display: none;
    }
    .foldud{
        display: none;
    }
    
    label{
        display: inline-block;
        cursor: pointer;
        color: #fff6d4;
        background-color: #81845e;
        padding: 3px 13px;
        border-radius: 3px;
        margin-top: 12px;
    }
    
    /* Knapper */
    .containerknapper{
        display: flex;
        gap: 50px;
        justify-content: center;
        margin-left: 8%;
    }
    
    .knap{
        position: relative;
        height: 70%;
        display: flex;
        width: 10em;
    }
    .knap img{
        width: 100%;
        border-radius: 5px;
        opacity: 90%;
        object-fit: cover;
    }
    .knap button{
        position: absolute;
        top: 70%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #7d426f; opacity: 80%;
        color: #fff6d4;
        font-size: 18px;
        padding: 12px 24px;
        margin: 0;
        border: none;
        cursor: pointer;
        border-radius: 5px;
    }
    .knap button:hover{
        background-color: #afb283;
        color: #fff6d4;
    }
    
    
    
    /*  KALENDEREN */
    .kalender_{
        width: 100%;
        margin-top: 20px;
        padding: 0;
        display: grid;
        justify-content: center;
        align-items: center;
    }
    
    .dagensevents_{
        color: #fff6d5;
        justify-items: center;
        align-items: center;
    }
    
    /* Styling af font udseende */
    /* Kalender */
    .dage_ {
        color: #fff6d5;
        margin-top: 1em;
        text-align: center;
    }
     
    .dage_ h2 {
        font-weight: bold;
        color: #afb384;
    }
     
    /* styling af hvert event ud fra deres kategori. Hver class/kategori har egen farve */
    .yoga_ {
        background-color:#e6a276;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px;
        justify-items: center;
        align-items: center;
    }
     
    .meditation_ {
        background-color:#b5d0cd;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px;
    }
     
    .forlob_ {
        background-color:#926c89;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px;
    }
     
    .dans_ {
        background-color:#727495;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px;
    }
     
    .cafe_ {
        background-color:#b6bb8c;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px;
    }
     
    .musik_ {
        background-color: #b7b1ce;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px;  
    }
    .fake{
        background-color: #fff6d4;
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 120px;
        width: 170px; 
    }
    
    /* Styling af dage */
    .mandag_ {
        display: grid;
        justify-content: center;
    }
    .tirsdag_ {
        display: grid;
        justify-content: center;
    }
    .onsdag_ {
        display: grid;
        justify-content: center;
    }
    .torsdag_ {
        display: grid;
        justify-content: center;
    }
    .fredag_ {
        display: grid;
        justify-content: center;
    }
    .lordag_ {
        display: grid;
        justify-content: start;
    }
    .sondag_ {
        display: grid;
        justify-content: start;
    }
    
    
    .forside {
        overflow: scroll;
     }

/* STYLING AF KALENDER-SITE

I følgende afsnit styles kalender-sitet. Der er flere dele af stylingen. For overskuelighedens skyld er her oversigt over de trin sitet styles i: 
-  buttons 
-  dropdown menuer 
-  alle kategorier 
-  Media Query
*/

/* Styling af sidens elementer i forhold til hinanden ved brug af grid */

.kalender-site {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 10% 20% 40%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 5%;
}

.kalender-knapper {
    grid-column: 2;

}

.kalender {
    grid-column: 2;
    margin-top: 2%;
}

/* Styling af buttons på kalender siden */
 
.uge-knap {
    background-color:#562049;
    width: 170px; 
    height: 40px;
    border-radius: 20px;
    font-size: large;
    color: #fff6d5;

}

.kategori-knap {
    background-color: #afb384;
    width: 170px;
    height: 40px;
    border-radius: 20px;
    font-size: large;
    color: #fff6d5;
}


/* Dropdown menu til knapperne. Funktion er til for brugeren kan vælge ønsket kategori og uge på en overskuelig måde */
 
/* DROPDOWN UGE */
 
/* The dropdown container */
.dropdown-uge {
    float: right;
    overflow: hidden;
  }
 
  /* Dropdown button */
  .dropdown-uge .uge-knap{
    font-size: 16px;
    border: none;
    outline: none;
    padding: 14px 16px;
    margin: 0; /* Important for vertical align on mobile phones */
  }
 
  /* Dropdown content (hidden by default) */
  .dropdown-content-uge {
    display: none;
    position: absolute;
    background: #afb384;
    min-width: 160px;
    z-index: 1;
    opacity: 0.9;
  }
 
  /* Links inside the dropdown */
  .dropdown-content-uge a {
    float: none;
    color: #fff6d5;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    opacity: 0.9;
  }
 
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content-uge a:hover {
    background-color: #e7e1c1;
  }
 
  /* Vis dropdown ved hover */
  .dropdown-uge:hover .dropdown-content-uge {
    display: block;
  }
 
 
 
  /* DROPDOWN KATEGORI */
 
/* The dropdown container */
.dropdown-kategori {
    float: right;
    overflow: hidden;
  }
 
  /* Dropdown button */
  .dropdown-kategori .kategori-knap{
    font-size: 16px;
    border: none;
    outline: none;
    padding: 14px 16px;
    margin: 0; /* Important for vertical align on mobile phones */
  }
 
  /* Dropdown content (hidden by default) */
  .dropdown-content-kategori {
    display: none;
    position: absolute;
    background: #afb384;
    min-width: 160px;
    z-index: 1;
    opacity: 0.9;
  }
 
  /* Links inside the dropdown */
  .dropdown-content-kategori a {
    float: none;
    color: #fff6d5;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    opacity: 0.9;
  }
 
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content-kategori .cafe1:hover {
    background-color: #b6bb8d;
    color: #562049;
  }
 
  .dropdown-content-kategori a:hover {
    background-color: #e7e1c1;
  }
 
  .dropdown-content-kategori .yoga1:hover {
    background-color: #e6a276;
  }
 
  .dropdown-content-kategori .meditation1:hover {
    background-color: #b5d0cd;
  }
 
  .dropdown-content-kategori .forlob1:hover {
    background-color: #926c89;
  }
 
  .dropdown-content-kategori .dans1:hover {
    background-color: #727495 ;
  }
 
  .dropdown-content-kategori .musik1:hover {
    background-color: #b7b1ce;
  }
 
  /* Vis dropdown ved hover */
  .dropdown-kategori:hover .dropdown-content-kategori {
    display: block;
  }


/* STYLING AF  SELVE KALENDEREN */


/* Styling af font udseende */

.dage {
    color: #fff6d5;
}

.dage h2 {
    font-weight: bold;
    color: #afb384;
}
.uge {
    color: #afb384;
}
/* Centrer teksten i kalender boblerne */
.dage {
    text-align: center;
}


/* styling af hvert event ud fra deres kategori. Hver class/kategori har egen farve */
.yoga {
    background-color:#e6a276;
    border-radius: 20%;
    padding: 10px;
    margin: 10px;
    height: 120px;
    width: 170px;
}

.meditation {
    background-color:#b5d0cd ;
    border-radius: 20%;
    padding: 10px;
    margin: 10px;
    height: 120px;
    width: 170px;
}

.forlob {
    background-color:#926c89;
    border-radius: 20%;
    padding: 10px;
    margin: 10px;
    height: 120px;
    width: 170px;
}

.dans {
    background-color:#727495 ;
    border-radius: 20%;
    padding: 10px;
    margin: 10px;
    height: 120px;
    width: 170px;
}

.cafe {
    background-color:#b6bb8c ;
    border-radius: 20%;
    padding: 10px;
    margin: 10px;
    height: 120px;
    width: 170px; 
}

.musik {
    background-color: #b7b1ce ;
    border-radius: 20%;
    padding: 10px;
    margin: 10px;
    height: 120px;
    width: 170px;  
}

/************************ Medlemside ***********************'*/

h2{
    color: #898c69;
}

.info{
    width: 100%;
}

.fordele_info{
    display: grid;
    grid-template-columns: 810px;
    grid-template-rows: 100px 1fr;
    padding: 100px;
    justify-content: center;
}


/************************** Fra månedlig til årlige medlemskaber *************************/


.aarligt_maanedligt {
    display: flex;
    justify-content: left;
    flex-direction: row;
    align-content: center;
    
}

.switch{
    position: relative;
    width: 200px;
    height: 45px;
    border-radius: 25px;
}

.switch input {
    appearance: none;
    width: 200px;
    height: 50px;
    border-radius: 25px;
    background: #afb384;
    outline: none;
}

.switch input::before,
.switch input::after {
    z-index: 2;
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    font-weight: bold;

}

.switch input::before {
    content:  "Månedlig";
    left: 20px;
}

.switch input::after {
    content:  "Årlig";
    right: 20px;
}

.switch input:checked {
    background-color: #afb384;
}

.switch label {
    z-index: 1;
    position: absolute;
    top: 0 ;
    bottom: 4px;
    border-radius: 20px;
}

.switch input{
    transition: 0.25s;
}

.switch input:checked:before,
.switch input:checked::after{
color:white;
transition: color 0.5s;
}

.switch input:checked+label{
    left: 10px;
    right: 100px;
    background: #898c69;
    transition: left 0.5s, right 0.4s 0.2s;
}

.switch input:not(:checked){
background:#afb384;
transition: background 0.4s;
}

.switch input:not(:checked)::before{
    color: white;
    transition: color 0.5s;
}

.switch input:not(:checked)::after{
    color: white;
    transition: color 0.5s 0.2s;
}

.switch input:not(:checked) +label{
    left: 100px;
    right: 10px;
    background: #898c69;
    transition: left 0.4s 0.2s, right 0.5s, background 0.35s;
}

/************************** Medlemskaber starter **************************/

.medlemskaber{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.medlemskab{
    background: #562049;
    width: 250px;
    height: 400px;
    margin: 10px;
    border-radius: 15px;

}

.medlemfarve_1{
    background: #562049b4;
    width: 250px;
    height: 400px;
    margin: 10px;
    border-radius: 15px;
}
.medlemfarve_2{
    background: #727495af;
    width: 250px;
    height: 400px;
    margin: 10px;
    border-radius: 15px;
}

.medlemfarve_3{
    background: #afb3849f;
    width: 250px;
    height: 400px;
    margin: 10px;
    border-radius: 15px;
}

.medlemfarve_1 h2, .medlemfarve_2 h2, .medlemfarve_3 h2{
    padding: 10px;
    color: white;
}

.medlemfarve_1 p, .medlemfarve_2 p, .medlemfarve_3 p{
    padding: 10px;
    color: white;
}

/***************** Knap **************/

.medlemfarve_1 a{background-color:#562049;}
.medlemfarve_2 a{background-color: #727495;}
.medlemfarve_3 a{background-color: #afb384;}

.medlemfarve_1 a,
.medlemfarve_2 a,
.medlemfarve_3 a {
    color: white;
    padding: 15px 20px;
    display: block;
    text-align: center;
    margin: 20px 20px;
    text-decoration: none;
    border-radius: 15px;
    margin-top: 50%;
}

.medlemfarve_1 a:hover, .medlemfarve_2 a:hover, .medlemfarve_3 a:hover{
    background-color: #d85e12;
    color: white;
    cursor: pointer;
    transform: scale(1.03);
}

/* Styling af footer */

.footer {
   padding: 40px;
   background-color: #fff6d5;
}

.footer, .social {
   text-align: center;
   padding: 25px 0 0 0 ;
   color: #afb384;
}

/* Styling af anchor tag */

.footer .social a {
   font-size: 24px;
   color: inherit;
   border: 1px solid #afb384;
   width: 40px;
   height: 40px;
   line-height: 38px;
   display: inline-block;
   text-align: center;
   border-radius: 50%;
   margin: 0 8px;
   opacity: 0.75;
}

.footer .social a:hover {
   opacity: 0.9;
}

.footer ul {
   margin-top: 0;
   padding: 0;
   list-style: none;
   font-size: 18px;
   line-height: 1.6;
   margin-bottom: 0;
}


.footer ul li {
   display: inline-block;
   padding: 0 23px 25px 23px;
}

.footer ul li a {
   color: inherit;
   text-decoration: none;
   opacity: 0.8;
}

.footer ul li a:hover {
   opacity: 1;
}

.adresse {
   padding: 20px;
   text-align: center;
   font-size: 18px;
   line-height: 1.6;
   color: #afb384;
}

.footer {
   bottom: 0;
   width: 100%;
}

/* MEDIA */
@keyframes animation{
    from{
        opacity: 0;
        transform: translateY(15px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
}
/* SMARTPHONE 767px */

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

    /* Der vises kun en row på telefon version */
    .dage {
       display: grid;
       grid-template-rows: 1fr;
       grid-template-columns: 1fr;
   }

   .kalender-site {
       margin-bottom: 150px;
       grid-template-rows: 5% 20% 40%;
   }

   /* Den vandrette kolonne med dage fjernes fra mobil versionen */
   .uge {
       display: none;
   }
   .kalender-site h1 {
       display: none;
   }

   /* Der tilføjes linjer på venstre side af telefon versionen */

   .dage h3 h4 {
    font-size: small;
   }

   .mandag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .tirsdag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .onsdag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .torsdag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .fredag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .lordag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   } 
   .sondag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }

}

@media (max-width: 968px){
 /* navbar */

 .container{
    background-color: #fff6d5;
    position: sticky;
 }

 .hamburger-menu-container{
    display: flex;
}

#check{
    display: block;
}

.sprog{
    left: 3%;
}

.nav-btn{
    position: fixed;
    height: calc(100vh - 3rem);
    top: 3rem;
    left: 0;
    width: 100%;
    background-color: #fff6d5; /* Baggrunds farve på burgermenu */
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(100%);
    transition: .65s;
}

#check:checked ~ .nav-btn{
    transform: translateX(0);
}

#check:checked ~ .nav-btn .nav-link,
#check:checked ~ .nav-btn .log-sign{
    animation: animation .5s ease forwards var(--i);
}

.nav-links{
    flex: initial;
    width: 100%;
}

.nav-links > ul{
    flex-direction: column;
}

.nav-link{
    width: 100%;
    opacity: 0;
    transform: translateY(15px);
}

.nav-link > a{
    line-height: 1;
    padding: 1.6rem 2rem;
}

.nav-link:hover > a{
    transform: scale(1);
    background-color: #ded7af; /* Baggrundsfarve på hovereffect på menu punkter */
    color: #afb384; /* textfarve */
}

.dropdown, .dropdown.second{
    position: initial;
    top: initial;
    left: initial;
    transform: initial;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    padding: 0;
    background-color: #ded7af; /* Bagbrundsfarve på supmenupunkter */
    color: #afb384;
    display: none;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
    display: block;
}

.nav-link:hover > a > i,
.dropdown-link:hover > a > i{
    transform: rotate(360deg);
}

.dropdown-link > a{
    background-color: transparent;
    color: #afb384;
    padding: 1.2rem 2rem;
    line-height: 1;
}

.dropdown.second .dropdown-link > a{
    padding: 1.2rem 2rem 1.2rem 3rem;
}

.dropdown.second .dropdown.second .dropdown-link > a{
    padding: 1.2rem 2rem 1.2rem 4rem;
}

.dropdown-link:not(:nth-last-child(2)){
    border-bottom: none;
}

.arrow{
    z-index: 1;
    background-color: #69e78d;/* ?? */
    left: 10%;
    transform: scale(1.1) rotate(45deg);
    transition: .5s;
}

.nav-link:hover .arrow{
    background-color: #b9d650;/* ?? */
}

.dropdown .dropdown .arrow{
    display: none;
}

.dropdown-link:hover > a{
    background-color: #afb384; /* Baggrundsvarve ved hover på supmenu */
    color: #ded7af; /* textfarve */
}

.dropdown-link:first-child:hover ~ .arrow{
    background-color: #50a9d6; /* ?? */
}

.nav-link > a > i{
    font-size: 1.1rem;
    transform: rotate(-90deg);
    transition: .7s;
}

.dropdown i{
    font-size: 1rem;
    transition: .7s;
}
/* navbar slut */
}


@media (min-width: 768px) and (max-width: 1023px){
    /* kalender start */
    .log-sign{
        flex: initial;
        width: 100%;
        padding: 1.5rem 1.9rem;
        justify-content: flex-start;
        opacity: 0;
        transform: translateY(15px);
    }
    /* Der vises kun en row på tablet version, men tre colums */
    .dage {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
   } 

   .kalender-site {
    grid-template-rows: 5% 20% 40%;
}
  
   .kalender-site h1 {
       display: none;
   }

   /* Der tilføjes linjer pÃ¥ venstre side af telefon versionen */

   .mandag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .tirsdag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .onsdag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .torsdag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .fredag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
   .lordag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   } 
   .sondag {
       border-left: 3px solid #b6bb8c;
       padding-left: 10px;
       margin-bottom: 10%;
   }
}

@media (min-width: 1024px){
    .logo-container {
        display: flex;
        align-items: center; /* Adjust alignment as needed */
    }

    .logo img {
        width: auto; /* Adjust the width as needed */
        height: 40px; /* Set the desired height */
    }

    .nav-btn{
        position: fixed;
        right:2%;
        width: 100%;
        height: 70px;
        margin-top: 0;
        background-color: #fff6d5; /* Baggrunds farve på burgermenu */
        justify-content: flex-end;
    } 
    
    .kalender-knapper {
       display: flex;
    }
   
   .dage {
       display: grid;
       grid-template-rows: 1fr;
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   }

   }

/* Styling af kalender opsætning ved brug af CSS grid  */

/* For at styre hvordan grid layoutet skal se ud bruger vi media query, her er der tre opstillinger. Da layoutet for kalenderen ændres en del 
fra tablet til pc er der brugt specifikationer til hvert breakpoint for at få ting frem eller til at forsvinde */


/* TABLET  imellem 768-1023px*/

/**************** JOHANNE MEDIA ***************/

/* MEDIA QUERY */
/* Mobile Screen */
@media screen and (max-width: 767px){


    /* GRØN BOKS */
        /* Banner fjernes på mobilversion */
        .banner{
            display: none;
        }
    
        .gronboks{
            background-color: #fff6d4;
            display: list-item;
            justify-content: center;
            margin-top: 4em;
            margin-bottom: 4em;
            padding: 0;
        }
    
        /* Headline */
        .tekstforside{
            background-color: #fff6d4;
            margin-bottom: 2em;
            margin-top: 1em;
            margin-left: 2em;
            margin-right: 2em;
            justify-items: center;
    
        }
        .tekstforside h1{
            color: #81845e;
            font-size: 50px;
        }
        .tekstforside p{
            color: #81845e;
            font-size: 30px;
            line-height: 1.4;
        }
        .label_{
            font-size: 25px;
            }
    
        /* Fjerner dekstoptekstversion */
        .desktoptablettekst{
            display: none;
        }
        .desktoptekst{
            display: none;
        }
    
        /* Knapper */
        .containerknapper{
        background-color: #afb283;
        padding: 3%;
        margin: 0;
        gap: 60px;
        }
    
        .knap button{
            font-size: 23px;
            background-color: #7d426f;
            color: #fff6d4;
           
        }
    
        /******************* Kalender *******************/
        .kalender_{
        display: grid;
        justify-content: left;
        }
    
        /* Styling af Dagens Events */
    .mandag_{
        display: grid;
        justify-content: left;
        margin-left: 50px;
        border-left: 3px solid #b6bb8c;
    }
    .dagensevents_{
        display: grid;
        justify-content: left;
        margin-left: 50px;
        font-size: 30px;
    }
    .yoga_ {
        border-radius: 20%;
        margin: 10px;
        height: 180px;
        width: 250px;
        display: grid;
        justify-content: center;
        line-height: 1.5;
    }
    .musik_ {
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 180px;
        width: 250px;
        line-height: 1.5;
        display: grid;
        justify-content: center;
    }
    .meditation_{
        border-radius: 20%;
        padding: 10px;
        margin: 10px;
        height: 180px;
        width: 250px;
        line-height: 1.5;
        display: grid;
        justify-content: center;
    }
    
    
    .dage h3{
        font-size: 20px;
    }
    .dage h4{
        font-size: 15px;
    }
    .dage p{
        font-size: 15px;
    }
    
    
    
    /* Fjerner dage der ikke skal vises */
    .uge_{
        display: none;
    }
    .mandag_ h2{
        display: none;
    }
    .tirsdag_{
        display: none;
    }
    .onsdag_{
        display: none;
    }
    .torsdag_{
        display: none;
    }
    .fredag_{
        display: none;
    }
    .lordag_{
        display: none;
    }
    .sondag_{
        display: none;
    }
    }
    
    /* Tablet Screen */
    @media screen and (min-width: 768px) and (max-width: 1023px){
    
    
    
    /* GRØN BOKS */
        /* Mobilcontent fjernes */
        .pmobile{
            display: none;
        }
        label{
            display: none;
        }
        .dagensevents_{
            display: none;
        }
    
        /* Forsideknapper */
        .knap{
            position: relative;
            height: 70%;
            display: flex;
            width: 7em;
        }
        /* Forside tekst */
        .tekstforside{
            background-color: #afb283;
            width:90%;
            line-height: 1.5;
        }
        .tekstforside h1{
            font-size: 1.5em;
            color: #fff6d4;
        }
        .tekstforside p{
            font-size: 0.6em;
            color: #fff6d4;
        }
    
        /* Kalender */
        /* Fjerner dage der ikke skal vises */
    
        .torsdag_{
            display: none;
        }
        .fredag_{
            display: none;
        }
        .lordag_{
            display: none;
        }
        .sondag_{
            display: none;
        }
    
        /* Kalender */
    /* Der vises kun en row på tablet version, men tre colums */
    .dage_ {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    /* Der tilføjes linjer på venstre side af telefon versionen */
    
    .mandag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    .tirsdag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    .onsdag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    .torsdag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    .fredag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    .lordag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    .sondag_ {
        border-left: 3px solid #b6bb8c;
        padding-left: 10px;
        margin-bottom: 10%;
    }
    
    
    
    }
    
     
    
    
    /* Desktop Screen */
    @media screen and (min-width: 1024px) {
    
    /* GRØN BOKS */
        .pmobile{
            display: none;
        }
        label{
            display: none;
        }
        /* Kalender */
        .kalender_{
            margin-right: 20px;
            margin-left: 20px;
        }
        .dagensevents_{
            display: none;
        }
        /* Kalender */
        .dage_ {
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        }
        }

/****************** ANNA MEDIA ***************/
/******************** mobil ********************/

@media screen and (max-width:767px) {
    
    .fordele_info{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100px 1fr;
        padding: 30px 30px;
    }
    
    .medlemfarve_1 p, .medlemfarve_2 p, .medlemfarve_3 p{
        margin: 0 2%;
    }
    
    .btn-vealg {
        font-size: 25px; /* Skift størrelsen efter behov */
    }
    
    
    .h{
        margin-bottom: 0;
        padding: 2%
    }
    
    .aarligt_maanedligt{
        padding: 1.5%
    
    }
    
    .medlemskaber{
        display: flex;
        flex-direction: column;
        padding: 30px 30px;
    
    }
    
    .medlemfarve_1, .medlemfarve_2, .medlemfarve_3{
        width: 90%;
        height: 110px;
    }
    
    .medlemfarve_1 a,
    .medlemfarve_2 a,
    .medlemfarve_3 a {
        padding: 25px 45px;
        float: right;
        text-align: center;
        margin: -110px 20px;
        
    }
    .medlemfarve_2 a{
        margin: -90px 20px;
    }
    
    .medlemfarve_3 a{
        margin: -70px 20px;
    }
      
    .udvid_medlem {
        display: none;
    }
    }
    
    
    
    /******************** Ipad ********************/
    
    @media screen and (min-width:767px) and (max-width:1268px) {
    
    .info{
        width: 100%;
    }

    .h{
        padding: 1%;
    }
    
    .aarligt_maanedligt{
        padding: 1%;
    }

    .alable{
        display: block;
    }

    .fordele_info{
        display: grid;
        grid-template-columns: 660px;
        grid-template-rows: 100px 1fr;
        padding: 40px 100px;
    }
    
    .medlemskaber{
        display: flex;
        flex-direction: column;
    }

    .medlemfarve_1{
        width: 200px;
        height: 370px;
    }
    .medlemfarve_2{
        width: 200px;
        height: 370px;
    }
    
    .medlemfarve_3{
        width: 200px;
        height: 370px;
    }
    
    .medlemskaber{
        display: grid;
        grid-template-columns: 220px 220px 220px;
        grid-template-rows: 100px 100px 1fr;
        padding: 40px 100px;
    }
    
    .fordel{
        grid-row: 1;
    }

    .medlemfarve_1{
        grid-row: 3;
        grid-column: 1;
    }
    .medlemfarve_2{
        grid-row: 3;
        grid-column: 2;
    }

    .medlemfarve_3{
        grid-row: 3;
        grid-column: 3;
    }

    .aarligt_maanedligt{
        grid-row: 2;
        grid-column: 1;
    }
    }
    
    /******************** Desktop ********************/
    
    @media screen and (min-width:1025px) {
    
    .info{
        width: 100%;
    }

    .fordele_info{
        display: grid;
        grid-template-columns: 810px;
        grid-template-rows: 100px 1fr;
        padding: 40px 100px;
    }
   
    .alable{
        display: block;
    }

    .medlem_body{
        place-items: center;
    }

    .medlemskaber{
        display: grid;
        grid-template-columns: 270px 270px 270px;
        grid-template-rows: 100px 100px 1fr;
        padding: 40px 100px;
    }
    
    .fordel{
        grid-row: 1;
        margin: 1%;
    }

    .medlemfarve_1{
        grid-row: 3;
        grid-column: 1;
    }
    .medlemfarve_2{
        grid-row: 3;
        grid-column: 2;
    }

    .medlemfarve_3{
        grid-row: 3;
        grid-column: 3;
    }

    .aarligt_maanedligt{
        grid-row: 2;
        grid-column: 1;
    }

    .lille{
        display: none;
    }
    
    }