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

::-webkit-scrollbar{
    background-color: #3E2713; /*scroll felt er usynligt*/
}

::-webkit-scrollbar-thumb{
    background-color: #ff7a00; /*scrollbar farves og passer til designet*/
}

header{
    background-color: #383838;
    width: 20dvw;
    height: 100dvh;
    position: fixed; /*så den ikke scroller med*/
    text-align: center;
    padding: 2%;
    z-index: 2;
}

#burgermenu{
    cursor: pointer;
    display: none;
    position: fixed; /*så man hele tiden kan klikke på den uanset hvor lang nede på siden man er*/
    /*margin-left: 3vw; Når headeren er lukket sidder menuen i hjørnet*/
}

.streg{ /*streger i burgermenu*/
    display: block;
    width: 10dvw;
    height: 0.8dvh;
    margin: 0.8dvh auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #ff7a00;
}

#menugrafik{
    width: 85%;
    /*
    border-style: solid;
    border-color: #ffa800;
    border-width: 1.25vw;*/
    box-shadow: 7px 8px 8px rgba(0, 0, 0, 0.5);
}

nav{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20%;
    height: 35dvh;
}

nav a{
    color: #ffa800;
    text-decoration: none;
    font-weight: 900;
    font-size: 3.95dvh;
}


nav a:hover{
    color: #4d941f;
}

nav #currentpage{
    color: #ff7a00;
}

nav #currentpage:hover{
    color: #4d941f;
}

/*----------generelle styles til maincontent---------*/
/*----------generelle styles til maincontent---------*/
/*----------generelle styles til maincontent---------*/

main{
    background-color: #3E2713;
    width: 80dvw;
    min-height: 100dvh;
    margin-left: 20dvw; /*Så main content vises ved siden af headeren*/
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-bottom: 7dvh;
    
}

.appelsinlogo{
    width: 27%;
}

.contentblok{
    padding: 3% 0;
    width: 80dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.h1{
    color: #ffa800;
    font-size: 6dvh;
}

h2{
    color: #ffa800;
    font-weight: 900;
    font-size: 4dvh;
}

h3{
    color: #ffa800;
    font-weight: 900;
    font-size: 3.5dvh;
    padding: 3% 0;
}

p{
    color: white;
    font-size: 2.5dvh;
    line-height: 20pt;
    max-width: 40dvw;
    margin: 0.5% 0 1.5% 0;
}

a{
    color: #ff7a00;
}

a:hover{
    color: #4d941f;
}

.trekolonner{
    height: auto;
    flex-wrap: wrap; /*så de kommer under hinanden i mobil device. */
    display: flex;
    align-content: center;
    justify-content: space-around;
    width: 80dvw;
}

.enkolonne{
    height: auto;
    width: 22dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5% 0;
}

.lavkolonne{
    display: flex;
    flex-direction: column;
    padding: 1.8dvh 0;
}

.lavkolonne img{
    height: 45dvh;
}

.cirkelramme{ /*pixel skal ændres i media quies*/
    height: 30dvh; /*px ellers bliver cirklerne ikke "kvadratiske"*/
    width: 30dvh;
    border-style: solid;
    border-color: #ff7a00;
    border-width: 17px;
    border-radius: 50%;
    box-shadow: 7px 8px 8px rgba(0, 0, 0, 0.5);
    display: flex;
}


#cocio{
    background-image: url(images/lyslactosefricociodåse.jpg);
    background-size: cover;
    background-position: -2.5dvw 0; /*dåsen er i midten*/
    background-repeat: no-repeat;
}


.knap{
    background-color: #ff7a00;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    text-decoration: none;
    margin-top: 2%;
    padding: 1.8dvh; /*ændres i mdeia q*/
    border-radius: 0.7rem;
    box-shadow: 7px 8px 8px rgba(0, 0, 0, 0.5);
}

.knap:hover, .knap:focus, .knap:active{
    background-color: #4d941f;
    color: white;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

/*---------------------------styles til jmband page----------------------*/
/*---------------------------styles til jmband page----------------------*/
/*---------------------------styles til jmband page----------------------*/

#jmblogo{
    width: 50%;
    margin-top: 5dvh;
}

.bokstilinfografik{
    display: flex;
    width: 60dvw;
}

.bokstilinfografik div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.bokstilinfografik div img{
    width: 90%;
    margin-bottom: 5dvh;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}

#jmbandpage{
    background-color: #dddde1;
}

.jmbandtitler{
    color: #1773b0;
}

.jmbtekst{
    color: black;
}

.jmbknap{
    background-color: #1773b0;
}

.jmbknap:hover{
    background-color: #1773b0;
}

.firekort{
    width: 60dvw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3dvh 0;
}

.firekort img{
    width: 24%;
}


        /*---------------------------styles til carousel-------------------------*/
        /*---------------------------styles til carousel-------------------------*/
        /*---------------------------styles til carousel-------------------------*/

        .carouselcontainer{
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: auto;
        }

        .carouselcard{
            display: none;
            width: 60dvw;
            height: 80dvh;
            margin: 0 0 3% 0;
            
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background-color: #383838;
            box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
        }

        .prev, .next{
            cursor: pointer;
            position: absolute;
            user-select: none;
        }

        .prev img, .next img{
            height: 10dvh;
        }

        .prev img:hover, .next img:hover{
            height: 10.5dvh;
        }

        .prev{
            left: 3dvw;
            top: 38dvh;
        }

        .next{
            right: 3dvw;
            top: 38dvh;
        }

        .dot{
            cursor: pointer;
            height: 1.5dvh;
            width: 1.5dvh;
            margin: 1.5dvh 0.3dvw;
            border-width: 2px;
            border-style: solid;
            border-color: #1773b0;
            /*background-color: #ffa800;*/
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
            /*box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5);*/
        }

        .activeSlide, .dot:hover{
            background-color: #1773b0;
        }

        .projektbaggrund{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.skygge{ /*skygger til billeder generelt*/
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}

/*---------------------------styles til tshirts-------------------------*/
/*---------------------------styles til tshirts-------------------------*/
/*---------------------------styles til tshirts-------------------------*/

#trekolonnerkunimg{
    height: auto;
}

/*---------------------------styles til swd page --------------------------*/
/*---------------------------styles til swd page --------------------------*/
/*---------------------------styles til swd page --------------------------*/

#evergreenlogo{
    border-radius: 50%;
    margin-top: 5%;
}

#swdbg{
    background-color: #40432D;
}

.swdoverskrifter{
    color: #B9C186;
}

.swdbrunoverskrift{
    color: #412F26;
}

.swdsingleimg{
    border-radius: 25px;
    width: 60%;
}

#swdknap{
    background-color: #B9C186;
    color: #412F26;
}

.treswdkolonner{
    height: auto;
    width: 100%;
    padding: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.swdkolonne{
    height: auto;
    width: 23dvw;
    background-color: #6A6F4C;
    padding: 2%;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}

.italic{
    font-style: italic;
}

.evergreenhighlightp{
    font-weight: 700;
    color: #B9C186;
}

.swdkolonne img{
    width: 90%;
    border-radius: 5%;
}

.tobilleder{
    width: 53dvw;
    display: flex;
    justify-content: space-between;
    padding: 2% 4% 4% 4%;
}

.tobilleder img{
    width: 45%;
}

/*---------------------------styles til cocio page --------------------------*/
/*---------------------------styles til cocio page --------------------------*/
/*---------------------------styles til cocio page --------------------------*/

.cociosingleimg{
    width: 30%;
    margin-bottom: 1%;
}

.cociotwoimg{
    width: 40%;
    margin-bottom: 3%;
}



/*--------------------------styles til om nikoline--------------------*/
/*--------------------------styles til om nikoline--------------------*/
/*--------------------------styles til om nikoline--------------------*/

#faldskærm{
    height: 100dvh;
}

/*---------------------------styles til kontakt----------------------*/
/*---------------------------styles til kontakt----------------------*/
/*---------------------------styles til kontakt----------------------*/

#telefonikon, #mailikon, #linkedinikon{
    height: 25dvh;
}


            /*---------------------------Mediaquies--------------------*/
            /*---------------------------Mediaquies--------------------*/
            /*---------------------------Mediaquies--------------------*/

            @media screen and (max-width:1124px) {
                header{
                    display: none;
                }

                header.active{ /*class bliver tilføjet af js*/
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 80dvw;
                    height: 100dvh;
                    padding-top: 5%;
                }

                #burgermenu{
                    display: block;
                    margin-top: -3%;
                    margin-left: -85%;
                }

                #burgermenu.active{ /*class bliver tilføjet af js*/
                    margin-left: 35%;
                    height: auto;
                    z-index: 5;
                }

                #burgermenu.active .streg:nth-child(2){
                    opacity: 0;
                }

                /*burgermenu transistion
                stregerne vender sig og bliver til kryds*/
                #burgermenu.active .streg:nth-child(1){
                    transform: translateY(1.6dvh) rotate(45deg);
                }

                #burgermenu.active .streg:nth-child(3){
                    transform: translateY(-1.6dvh) rotate(-45deg);
                }

                .streg{ /*streger i burgermenu*/
                    width: 5dvw;
                }

                nav{
                    height: auto;
                }

                nav a{
                    font-size: 5dvh;
                    padding: 2% 0;
                }

                #menugrafik{
                    width: auto;
                    height: 45%;
                    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5);
                }

                main{
                    width: 100dvw;
                    padding-top: 7dvh;
                    margin-left: 0;
                }

                .h1{
                    font-size: 5.5dvh;
                    width: 75%;
                }

                h3{
                    padding: 1.5% 0 1% 0;
                }

                .appelsinlogo{
                    width: 65%;
                }
                
                .trekolonner{
                    width: 80dvw;
                    height: auto;
                }

                .enkolonne{
                    width: 80dvw;
                    height: auto;
                    padding: 3% 0;
                }

                .cirkelramme{ 
                    height: 30dvh; 
                    width: 30dvh;
                    border-width: 2.5dvh;
                }

                p{
                    max-width: 68dvw;
                }

                .knap{
                    font-size: 2.5dvh;
                    margin-top: 1.5%;
                }

                #cocio{
                    background-position: -8dvw 0; /*dåsen er i midten*/
                }

                /*---------styles til carousel---------*/

                .carouselcontainer{
                    padding-bottom: 5%;
                }

                .carouselcard{
                    height: auto;
                    background-color: none;
                    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
                }

                .prev, .next{
                    top: 38%;
                }

                .prev img, .next img{
                    height: 8dvh;
                }
                
                .prev img:hover, .next img:hover{
                    height: 8dvh;
                }

                .prev{
                    left: 5%;
                }
                
                .next{
                    right: 5%;
                }

                .billedekolonne img{
                    width: 60%;
                    margin: 4%;
                }

                /*---------styles til om Nikoline---------*/

                #faldskærm{
                    width: 100%;
                    height: auto;
                }

                /*---------styles til Kontakt---------*/
                
                #telefonikon, #mailikon, #linkedinikon{
                    height: auto;
                    width: 50dvw;
                }

                .lavkolonne a{
                    font-size: 3.5dvh;
                }

                /*---------styles til JM Band page---------*/

                .bokstilinfografik{
                    display: flex;
                    width: 90dvw;
                }
                
                .bokstilinfografik div{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 50%;
                }
                
                .bokstilinfografik div img{
                    width: 85%;
                    margin-bottom: 5dvh;
                    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
                }

                .firekort{
                    width: 75dvw;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    margin: 3dvh 0;
                }
                
                .firekort img{
                    width: 50%;
                }

                #trekolonnerkunimg{
                    height: auto;
                }

                #trekolonnerkunimg .enkolonne{
                    width: 80dvw;
                    height: auto;
                }

                /*------------styles til tshirt---------*/

                #tshirtgrid{
                    width: 80dvw;
                }

                /*------------styles til swd page---------*/

                .swdsingleimg{
                    width: 60dvw;
                }

                .treswdkolonner{
                    flex-direction: column; 
                    align-items: center;
                }

                .swdkolonne{
                    height: auto;
                    width: 60dvw;
                    margin-bottom: 5dvh;
                    padding: 5% 2%;
                    align-items: center;
                }

                .tobilleder{
                    width: 53dvw;
                    flex-direction: column;
                    align-items: center;
                }
                
                .tobilleder img{
                    width: 85%;
                    margin-bottom: 5dvh;
                }

                .cociosingleimg{
                    width: 55%;
                }
                
                .cociotwoimg{
                    width: 45%;
                }
            
            }

                    /*---------------------------Mediaquies--------------------*/
                    /*---------------------------Mediaquies--------------------*/
                    /*---------------------------Mediaquies--------------------*/

                    @media screen and (max-width:500px) {
                        /*-------Burger menu------*/
                        header.active{
                            display: block;
                            width: 85dvw;
                            padding-top: 5dvh;
                        }

                        #burgermenu{ /*når menuen er lukket*/
                            margin-top: -5dvh;
                            margin-left: -85dvw;
                            z-index: 20;
                        }

                        #burgermenu.active{ /*når menuen er åben*/
                            margin-left: 50dvw; /*flyttes fra midten fordi main har text align center*/
                            margin-top: -5dvh;
                            background-color: none;
                        }
        
                        /*burgermenu transistion
                        stregerne vender sig og bliver til kryds*/
                        #burgermenu.active .streg:nth-child(1){
                            transform: translateY(1.6dvh) rotate(45deg);
                        }
        
                        #burgermenu.active .streg:nth-child(3){
                            transform: translateY(-1.6dvh) rotate(-45deg);
                        }
        
                        .streg{ /*streger i burgermenu*/
                            width: 9dvw;
                        }

                        #menugrafik{
                            width: 65%;
                            height: auto;
                        }
                    /*----------maincontent------*/
                        main{
                            padding-top: 10dvh;
                        }

                        nav a{
                            font-size: 2.3rem;
                            padding: 3.5% 0;
                        }
                    
                        h1{
                            font-size: 5dvh;
                            margin: 5% 10% 0 10%;
                        }

                        .h1{
                            font-size: 5dvh;
                            width: 80%;
                        }

                        p{
                            font-size: 2dvh;
                        }

                        .appelsinlogo{
                            width: 70%;
                        }
                        
                        .trekolonner{
                            width: 100dvw;
                            height: 100%;
                            flex-wrap: wrap;
                        }

                        .enkolonne{
                            width: 85dvw;
                            padding: 5% 0;
                        }

                        .contentblok{
                            width: 95dvw;
                        }

                        .cirkelramme{
                            height: 70dvw;
                            width: 70dvw;
                            border-width: 2dvh;
                        }

                        .centerP .enkolonne .knap{
                            padding: 5%;
                        }

                        .knap{
                            margin: 3%;
                        }

                        h2{
                            font-weight: 900;
                            font-size: 3.5dvh;

                        }
                        
                        p{
                            font-size: 2.3dvh;
                            max-width: 90%;
                            margin: 2% 0 5% 0;
                        }

                        .centerP .knap{
                            padding: 2.5%;
                        }

                        /*---------styles til om Nikoline---------*/

                        #faldskærm{
                            width: 145%;
                            height: auto;
                            padding: 0;
                        }

                        /*------Styles til jmb page----*/

                        .carouselcontainer{
                            width: 90%;
                            height: auto;
                        }

                        .carouselcard{
                            width: 90%;
                            box-shadow: 5px 5px 7.5px rgba(0, 0, 0, 0.5);
                        }

                        .prev, .next{
                            top: 75%;
                            transform: translateY(0);
                        }

                        .prev img, .next img{
                            height: 4dvh;
                        }

                        .prev img:hover, .next img:hover{
                            height: 4dvh;
                        }

                        .prev{
                            left: 70%;
                        }
                        
                        .next{
                            right: 7%;
                        }

                        .bokstilinfografik{
                            display: flex;
                            width: 80dvw;
                            flex-direction: column;
                        }
                        
                        .bokstilinfografik div{
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            width: 100%;
                        }
                        
                        .bokstilinfografik div img{
                            width: 90%;
                            margin-bottom: 5dvh;
                            box-shadow: 5px 5px 7.5px rgba(0, 0, 0, 0.5);
                        }
                        
                    
                        /*-------styles til kontakt-------*/
                        #telefonikon, #mailikon, #linkedinikon{
                            height: auto;
                            width: 45dvw;
                        }

                        .lavkolonne a{
                            font-size: 2.90dvh;
                        }

                        /*----------styles til swd page----------*/

                        .swdsingleimg{
                            width: 90%;
                        }

                        .treswdkolonner{
                            width: 85dvw;
                        }

                        .swdkolonne{
                            width: 90%;
                        }

                        .swdbrunoverskrift{
                            font-size: 1.3rem;
                        }

                        .tobilleder{
                            width: 85dvw;
                            flex-direction: column;
                            align-items: center;
                        }

                        .cociosingleimg{
                            width: 80%;
                        }
                        
                        .cociotwoimg{
                            width: 85%;
                            margin-bottom: 5%;
                        }

                    }