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

p{
    font-family: "Ubuntu", serif;
}
h1{
    font-family: "Ubuntu", serif;
}
h2{
    font-family: "Ubuntu", serif;
    font-size: large;
}
h3{
    font-family: "Ubuntu", serif;
}
a{
    font-family: "Ubuntu", serif;
}
li{
    font-family: "Ubuntu", serif;
    line-height: 60px;
}


#navbar1{
    height: 12vh;
    width: 100%;
    background-color: #fca311;
    display: grid;
    grid-template-columns: 18vh 1fr 3vw 3vh;
    grid-template-rows: 1fr 3vw 1fr;
    grid-template-areas: ". navbar_pic . ."
                            ". navbar_pic menu_icon ."
                            ". navbar_pic . ." ;
}
.logo{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 18vh;
    width: auto;
    -webkit-user-drag: none;
}
#menu_icon{
    grid-area: menu_icon;
    width: 100%;
    height: auto;
}

#navbar2{
    position: sticky;
    display: grid;
    top: 0%;
    height: 6vh;
    width: 100%;
    line-height: 6vh;
    text-align: center;
    background-color: #14213d;
    color: #ffffff;
    grid-template-columns: 2fr 13vw 1fr 13vw 1fr 13vw 1fr 13vw 1fr;
    grid-template-rows: 6vh;
    grid-template-areas: ". link1 . link2 . link3 . link4 .";
}
#navbar2.scrolled{
    grid-template-columns: 1fr 13vw 1fr 13vw 1fr 13vw 1fr 13vw 1fr;
}
#funktion_länk_des, #hållbarhet_länk_des, #gruppen_länk_des, #galleri_länk_des{
    display: none;
    text-align: left;
    font-size: 1vw;
    line-height: normal;
    margin: 10px;
}
#funktion_länk_des{grid-area: funktion_länk_des;} #hållbarhet_länk_des{grid-area: hållbarhet_länk_des;} #gruppen_länk_des{grid-area: gruppen_länk_des;} #galleri_länk_des{grid-area: galleri_länk_des;}

#navbar2.menu_active{
    height: 38vh;
    grid-template-columns: 2fr 15vw 1fr 15vw 1fr 15vw 1fr 15vw 1fr;
    grid-template-rows: 6vh 1fr;
    grid-template-areas: ". link1 . link2 . link3 . link4 ."
                        ". funktion_länk_des . hållbarhet_länk_des . gruppen_länk_des . galleri_länk_des ." ;
}

#navbar2.menu_active #funktion_länk_des, #navbar2.menu_active #hållbarhet_länk_des, #navbar2.menu_active #gruppen_länk_des, #navbar2.menu_active #galleri_länk_des{
    display: block;
}

.link1{grid-area: link1;} .link2{grid-area: link2;} .link3{grid-area: link3;} .link4{grid-area: link4;}
.link1, .link2, .link3, .link4{
    color: #ffffff;
    text-decoration: none;
}
.link1:hover, .link2:hover, .link3:hover, .link4:hover{
    transition: background-color 0.2s ease-in-out;
    background-color: #D9D9D9;
    color: #14213d;
}


#flow{
    width: 100%;
}
#address{
    color: #8d8d8d;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 10vh;
    margin-bottom: 10vh;
    font-size: small;
}
.section{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 2vw;
    background-color: #ffffff;
}
.section img{
    display: block;
    max-width: 40vw;
    max-height: 40vh;
    margin: 6vh auto 0 auto;
}
.hero{
    width: 100%;
    margin-top: 0px;
    margin-bottom: 50px;
    padding: 4vw;
    background-color: #1C1C26;
    color: #ffffff;
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    gap: 5vw; 
}

.hero p{
    width: 35vw;
    text-align: left;
    font-size: 1.7vw;
}
.hero img{
    display: block;
    width: 40vw;
    max-width: 50vw;
    max-height: 70vh;
}

.slideshow{
    width: 100%;
    height: 50vh; 
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #1C1C26;
    display: grid;
    grid-template-columns: 20% 2% 1fr 5% 1fr 2% 20%;
    grid-template-rows: 1fr 35% 10% 35% 1fr;
    grid-template-areas: 
                        ". . . . . . ."
                        ". . si si si . ."
                        ". bl si si si br ."
                        ". . si si si . ."
                        ". . . sp . . .";
}
.slideshow_image1, .slideshow_image2, .slideshow_image3, .slideshow_image4 {
    grid-area: si;
    /* max-width: 100% !important;
    max-height: 100% !important; */
    margin-left: auto;
    margin-right: auto;
}
.slideshow_image1 img, .slideshow_image2 img , .slideshow_image3 img , .slideshow_image4 img {
    max-width: 100% ;
    max-height: 100% ;
}

.slideshow_button_left{
    grid-area: bl;
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.slideshow_button_right{
    grid-area: br;
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.slideshow_button_right:hover, .slideshow_button_left:hover{
    transition: background-color 0.1s ease-in-out;
    background-color: #d9d9d93c;
}

.slideshow_page{
    grid-area: sp;
}

#footer{
    position: relative;
    bottom: 0%;
    left: 0%;
    margin-top: 20vh;
    height: 28vh;
    background-color: #1C1C26;
    display: grid;
    grid-template-columns: 6vw 8vw 6vw 1fr 1fr 1fr 1fr 5vw 10vw 5vw;
    grid-template-rows: 6vh 5vh 5vh 1fr 4vh;
    grid-template-areas: ". . . . . . . . . ."
                        ". logo_f . link1_f link3_f link2_f link4_f . sm ."
                        ". logo_f . . . . . . . ."
                        ". . . . . . . . . ."
                        ". . . cp cp cp cp . . .";
}
.logo.footer{
    grid-area: logo_f;
    width: 8vw;
    height: auto;
}
.link1.footer, .link2.footer, .link3.footer, .link4.footer{
    text-align: center;
}
.link1.footer:hover, .link2.footer:hover, .link3.footer:hover, .link4.footer:hover{
    transition: color 0.1s ease-in-out;
    background-color: unset;
    color: #fca311;
}
.link1.footer{grid-area: link1_f;} .link2.footer{grid-area: link2_f;} .link3.footer{grid-area: link3_f;} .link4.footer{grid-area: link4_f;}
#social_media_icons{
    grid-area: sm;
    width: 100%;
    height: auto;
}
#copyright_mark{
    grid-area: cp;
    text-align: center;
    line-height: 100%;
    color: #e5e5e5;
    user-select: none;
}



@media only screen and (min-width: 2000px){

    p, li, a, h2{
    font-size: x-large;    }
    h1{
    font-size: xx-large;
    }
}

@media only screen and (max-width: 1025px){
    p, li, a, h2{
        font-size: medium;    
    }
    h1{
        font-size: large;
    }
    .section{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        padding: 1vw;
    }
    #navbar1{
        height: 12vh;
        width: 100%;
        background-color: #fca311;
        display: grid;
        grid-template-columns: 1fr 6vw 3vh;
        grid-template-rows: 1fr 6vw 1fr;
        grid-template-areas: " navbar_pic . ."
                                " navbar_pic menu_icon ."
                                " navbar_pic . ." ;
    }
    .logo{
        height: 12vh;
    }
    #navbar2.menu_active{
        height: 18vh;
        grid-template-columns: 1fr 20vw 1fr 20vw 1fr 20vw 1fr 20vw 1fr;
    }
    #navbar2{
        grid-template-columns: 1fr 20vw 1fr 20vw 1fr 20vw 1fr 20vw 1fr;
    }
    #address{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 2vh;
        margin-bottom: 2vh;
        font-size: x-small;
    }
    .slideshow{
        width: 100%;
        height: 30vh;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    #footer{
        height: 22vh;
        grid-template-columns: 6vw 8vw 6vw 1fr 1fr 1fr 1fr 5vw 10vw 5vw;
        grid-template-rows: 6vh 6vh 6vh 4vh;
        grid-template-areas: ". . . . . . . . . ."
        ". logo_f . link1_f . link3_f link3_f . sm ."
        ". logo_f . link2_f . link4_f link4_f . . ."
        ". . . cp cp cp cp . . .";
    }

}

@media only screen and (max-width: 550px){
    #flow{
        width: 100vw;
    }
    #navbar1{
        width: 100vw;
    }
    #navbar2{
        width: 100vw;
    }
    .section img{
        display: block;
        max-width: 70vw;
        max-height: 40vh;
        margin: 6vh auto 0 auto;
    }
    li{
        line-height: 30px;
        }
    .hero{
        width: 100%;
        margin-top: 0px;
        margin-bottom: 50px;
        padding: 4vw;
        background-color: #1C1C26;
        color: #ffffff;
        display: flex;
        align-items: center; 
        justify-content: flex-start; 
        gap: 5vw; 
    }
    
    .hero p{
        width: 35vw;
        text-align: left;
        font-size: 1.7vw;
    }
    .hero img{
        display: block;
        width: 40vw;
        max-width: 50vw;
        max-height: 70vh;
    }
    #navbar2{
        position: static;
        display: block;
        height: 2vh;
    }
    #navbar2.menu_active{
        height: 32vh;
        text-align: left;
        line-height: 5vh;
        grid-template-columns: 1fr;
        grid-template-rows: 2% 20% 1% 20% 1% 20% 1% 20% 2%;
        grid-template-areas: "."
                                "link1"
                                "."
                                "link2"
                                "."
                                "link3"
                                "."
                                "link4"
                                ".";
    }
    .link1, .link2, .link3, .link4{
        display: none; 
        padding-left: 6vw;  
        padding-top: 2vh; 
        font-size: large;
    }
    #navbar2.menu_active .link1, #navbar2.menu_active .link2, #navbar2.menu_active .link3, #navbar2.menu_active .link4{
        display: block;
    }

    #navbar2.menu_active #funktion_länk_des, #navbar2.menu_active #hållbarhet_länk_des, #navbar2.menu_active #gruppen_länk_des, #navbar2.menu_active #galleri_länk_des{
        display: none;
    }
    .link1.footer, .link2.footer, .link3.footer, .link4.footer{
        display: block; 
        padding-left: unset;  
        padding-top: unset; 
        font-size: unset;
    }
}