*{
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif
}

/* ↓↓ Navbar ↓↓ */
/* Selve navigationsbaren */
nav {
    display: flex; 
    justify-content: center;
    align-items: center;
    background-color: #2a3478;
    font-family: charter;
    height: 8vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 100;
}

/* Logo i navigationsbaren */
nav img {
    height: 6.5vh;
    width: auto;
    display: flex;
    align-items: center;
    margin-left: 1vw;
}

/* boksen links ligger i, i navigationsbaren */
.nav-links {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    list-style: none;
}

/* Links */
.nav-links a {
    height: 100%;
    padding: 0rem 2vw;
    text-decoration: none; 
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #fcba16;
    font-size: 1.2vw;
}

/* Skalere linksne 1.1 op når man holder musen over */
.nav-links a:hover {
    transform: scale(1.1);
}


/* ↓↓ dropdown meny ↓↓*/
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 9;
}

/* boksen links ligger i, i dropdownbaren */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 14vw;
    background-color: #2a3478;
    font-size: 2.2vh;
}

/* Links i dropdownbaren */
.dropdown-content a {
    margin: 2.2vh 0; 
    color: #fcba16;
    display: flex;
    justify-content: flex-start;
    font-size: 2.4vh;
}

/* Gør dropdownmenuen synlig når man holder musen over et hovedmenupunkt */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Gør at billede ikke bliver vist på skærme over 768px*/
#burger-menu-image {
    display: none;
}



/* ↓↓ Main på index filen ↓↓ */
.main-index{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 92vh;
    width: 100%;
    padding-top: 8vh;
}

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


.main-index aside{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.main-index aside h2{
    font-size: 4vw;
    text-align: center;
    color: #2a3478;
    font-family: charter;
}

.main-index aside h3{
    font-size: 4vh;
    text-align: center;
    color: #2a3478;
    font-family: charter;
    margin: 3vh 0 0 0;
    border: #fcba16 solid 3px;
}

.main-index aside img{
    width: 10vw;
    height: auto;
    margin: 3vh 0;
}

.forside-billede {
    height: 85vh;
    width: auto;
}

/* ↓↓ Main på undersiderne ↓↓*/
main{
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 3vh;
}

.underside {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding-top: 8vh;
}

.underside section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85.5vh;
}

.underside .section-one {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding-top: 10vh;
    padding-top: 1vh;
    height: 100%;
    width: 100%;
}

.streg{
    width: 100%; 
    height: 0.3vh; 
    margin: 0.5vw 0;
    background-color: #fdbc17;
}

.streg-ipa{
    background-color: #96d9ef;
}
.streg-lager{
    background-color: #b6d98c;
}
.streg-stout{
    background-color: #f5831f;
}
.streg-fruity{
    background-color: #f69da8;
}
.streg-pilsner{
    background-color: #fdbc17;
}
.streg-weissbier{
    background-color: #fbecca;
}

.overskrift{
    box-sizing: border-box;
    margin: 0 6.6vw 0 6.6vw;
}

.overskrift h2
{
    font-size: 3.5vh;
    color: #2a3478;
    font-family: charter;
}


.underside p{
    font-size: 0.9rem;
    color: #2a3478;
    text-align: justify;
    margin: 1.1vh 6.6vw 0 6.6vw;
}

.mindre p{
    font-size: 0.8rem;
    color: #2a3478;
    text-align: justify;
    margin: 1.1vh 6.6vw 0 6.6vw;
}

#rundvisning a{
    font-size: 0.8rem;
    color: #2a3478;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: -1vh;
}

.underside #strong{
    font-size: 0.8rem;
    color: #2a3478;
    margin: 4vh 6.6vw 0 6.6vw;
    text-align: center;
}

.underside h1{ 
    font-size: 4vh;
    text-align: center;
    color: #2a3478;
    font-family: charter;
    margin-top: 2vh;
}

/* ↓↓ Slideshow ↓↓ */
.images{
    display: flex;
}

.images img{
    height: 71.5vh;
    width: auto;
    transition: all 0.15s ease; 
}

.images input{
    display: none;
}


.dots{
    display: flex;
    justify-content: center;
    margin: 5px;
}

.dots label {
    height: 2.5vh;
    width: 2.5vh;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0.4vh;

}
.dots label:nth-of-type(1){
    height: 2.5vh;
    width: 2.5vh;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0.4vh;
    background: #2a3478;
}

.slider .dots label {
    border: solid 0.3vh #fdbc17;
}

.slider {
    width: 53.5vh;
    height: auto;
    overflow: hidden;
    border: #fdbc17 solid 0.3vh;
}

.slider-ipa {
    width: 53.5vh;
    height: auto;
    overflow: hidden;
    border: #96d9ef solid 0.3vh;
}
.slider-lager{
    width: 53.5vh;
    overflow: hidden;
    border: #b6d98c solid 0.3vh;
}
.slider-stout{
    width: 53.5vh; 
    overflow: hidden;
    border: #f5831f solid 0.3vh;
}
.slider-fruity{
    width: 53.5vh; 
    overflow: hidden;
    border: #f69da8 solid 0.3vh;
}
.slider-pilsner{
    width: 53.5vh; 
    overflow: hidden;
    border: #fdbc17 solid 0.3vh;
}
.slider-weissbier{
    width: 53.5vh; 
    overflow: hidden;
    border: #fbecca solid 0.3vh;
}

.slider-ipa .dots label {
    border: solid 0.3vh #96d9ef;
}
.slider-lager .dots label {
    border: solid 0.3vh #b6d98c;
}
.slider-stout .dots label {
    border: solid 0.3vh #f5831f;
}
.slider-fruity .dots label {
    border: solid 0.3vh #f69da8;
}
.slider-pilsner .dots label {
    border: solid 0.3vh #fdbc17;
}
.slider-weissbier .dots label {
    border: solid 0.3vh #fbecca;
}

.dots label:hover {background: #2a3478}
#img1:checked ~ .m1 {
    margin-left: 0;
}
#img2:checked ~ .m2 {
    margin-left: -53.5vh;
}
#img3:checked ~ .m3 {
    margin-left: 0vh;
}
#img4:checked ~ .m4 {
    margin-left: -53.5vh;
}
#img5:checked ~ .m5 {
    margin-left: -0px;
}
#img6:checked ~ .m6 {
    margin-left: -53.5vh;
}
#img7:checked ~ .m7 {
    margin-left: 0vh;
}
#img8:checked ~ .m8 {
    margin-left: -53.5vh;
}
#img9:checked ~ .m9 {
    margin-left: -0px;
}
#img10:checked ~ .m10 {
    margin-left: -53.5vh;
}
#img11:checked ~ .m11 {
    margin-left: 0vh;
}
#img12:checked ~ .m12 {
    margin-left: -53.5vh;
}


.bund-bi{
    width: auto;
    height: 5vh;
    display: flex;
    justify-content: center;
}

/* ↓↓ Footer ↓↓ */
.footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #2a3478;
    height: 35vh;
    width: 100vw;
}

.footer div{
   margin: 2vh;
}

.midt-logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-links{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    list-style: none;
}
.footer-links{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    list-style: none;
}

#footer-links-to{
    margin-top: -2vh;
}

.footer-links h1{
    font-size: 2.7vh;
    color: #fcba16;
    font-family: charter;

}

.footer-links a {
    text-decoration: none;
    color: #fcba16;
    font-size: 1.6vw;
    font-family: charter;
}

.footer-links p {
    text-decoration: none;
    color: #fcba16;
    font-size: 1.6vw;
    font-family: charter;
}

.footer-links a:hover {
    color: white;
}

.footer-links a:active {
    color: #fcba16;
}

.footer-social {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.footer-social a {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 3vh 0 3vh;
}

.footer-social a img {
    height: 6vh;
    width: auto;
}

.footer-social a img:hover {
    transform: scale(1.5);
}

.footer-logo img{
    height: 10vh;
    width: auto;
    display: flex;
    align-items: center;
}

/* Media query til mobil / skærme under 768px*/
@media screen and (max-width: 768px) {
nav {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    background-color: #2a3478;
    font-family: charter;
    height: 8vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 100;
}

nav img {
    height: 7vh;
    width: auto;
    display: flex;
    align-items: center;
    margin-left: 2vw;
}

.nav-links {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: none;
    right: 0;
    height: 200vh;
    width:100%;
    top: 0vh;
    background-color: #ffffff;
    border: #2a3478 solid 0.3vh;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
    
}

.nav-links a {
    height: 100%;
    padding: 0;
    text-decoration: none; 
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #2a3478;
    font-size: 1.1rem;
    margin: 4vh 0;
    font-family: charter;
}


/* ↓↓ dropdown meny ↓↓*/
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 9;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 12vw;
    background-color: #2a3478;
    font-size: 2.2vh;
}

.dropdown-content a {
    margin: 2.2vh 0; 
    color: #fcba16;
    display: flex;
    justify-content: flex-start;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none !important;
}


.burger {
    display: block;
    cursor: pointer;
}


.burger div {
    width: 5vh;
    height: 0.6vh;
    background-color: #fcba16;
    margin: 1vh;
}

#burger-menu-image {
    display: block;
    margin-top: 15vh; 
}


.burger.toggle {
    position: fixed;
    top: 3vw;
    right: 10px;
}

.burger.toggle div:nth-child(1) {
    transform: rotate(-45deg) translate(-1vh, 1.2vh); 
}

.burger.toggle div:nth-child(2) {
    opacity: 0;
}

.burger.toggle div:nth-child(3) {
    transform: rotate(45deg) translate(-1vh, -1.2vh); 
}

/* ↓↓ Main på index filen ↓↓ */
.main-index{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 92vh;
    width: 100%;
    padding-top: 8vh;
}

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

.main-index aside{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.main-index aside h2{
    font-size: 10vw;
    text-align: center;
    color: #2a3478;
    font-family: charter;
}

.main-index aside h3{
    font-size: 3vh;
    text-align: center;
    color: #2a3478;
    font-family: charter;
    margin: 3vh 0 0 0;
    border: #fcba16 solid 3px;
}

.main-index aside img{
    width: 30vw;
    height: auto;
}

.forside-billede {
    height: 49vh;
    width: auto;
}

/* Main på undersiderne */
main{
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 3vh;
    
}

.underside {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding-top: 8vh;
}

.underside section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85.5vh;
}

.underside .section-one {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding-top: 10vh;
    padding-top: 1vh;
    height: 100%;
    width: 100%;
}

.streg{
    width: 100%; 
    height: 0.3vh; 
    margin: 0.5vw 0;
    background-color: #fdbc17;
}

.streg-ipa{
    background-color: #96d9ef;
}
.streg-lager{
    background-color: #b6d98c;
}
.streg-stout{
    background-color: #f5831f;
}
.streg-fruity{
    background-color: #f69da8;
}
.streg-pilsner{
    background-color: #fdbc17;
}
.streg-weissbier{
    background-color: #fbecca;
}

.overskrift{
    box-sizing: border-box;
    margin: 0 6.6vw 0 6.6vw;
}

.overskrift h2
{
    font-size: 3.5vh;
    color: #2a3478;
    font-family: charter;
}

.underside p{
    font-size: 1rem;
    color: #2a3478;
    text-align: justify;
    margin: 1.5vh 6.6vw 0 6.6vw;
}

#rundvisning a{
    font-size: 0.8rem;
    color: #2a3478;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 3vh;
}

.underside #strong{
    font-size: 1rem;
    color: #2a3478;
    margin: 5vh 6.6vw 0 6.6vw;
    text-align: center;
}

.underside h1{ 
    font-size: 4vh;
    text-align: center;
    color: #2a3478;
    font-family: charter;
    margin-top: 4vh;
}

/* ↓↓ Slideshow ↓↓ */
.images{
    display: flex;
}

.images img {
    height: 63vh;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    transition: all 0.15s ease;
}

.images input{
    display: none;
}

.dots{
    display: flex;
    justify-content: center;
    margin: 5px;
}

.dots label {
    height: 4vh;
    width: 4vh;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0.4vh;
}

.dots label:nth-of-type(1){
    height: 4vh;
    width: 4vh;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0.4vh;
    background: #2a3478;
}

.slider .dots label {
    border: solid 0.3vh #fdbc17;
}

.slider {
    width: 47vh;
    height: auto;
    overflow: hidden;
    border: #fdbc17 solid 0.3vh;
}

.slider-ipa {
    width: 47vh;
    height: auto;
    overflow: hidden;
    border: #96d9ef solid 0.3vh;
}
.slider-lager{
    width: 47vh;
    overflow: hidden;
    border: #b6d98c solid 0.3vh;
}
.slider-stout{
    width: 47vh;
    overflow: hidden;
    border: #f5831f solid 0.3vh;
}
.slider-fruity{
    width: 47vh;
    overflow: hidden;
    border: #f69da8 solid 0.3vh;
}
.slider-pilsner{
    width: 47vh;
    overflow: hidden;
    border: #fdbc17 solid 0.3vh;
}
.slider-weissbier{
    width: 47vh;
    overflow: hidden;
    border: #fbecca solid 0.3vh;
}

.slider-ipa .dots label {
    border: solid 0.3vh #96d9ef;
}
.slider-lager .dots label {
    border: solid 0.3vh #b6d98c;
}
.slider-stout .dots label {
    border: solid 0.3vh #f5831f;
}
.slider-fruity .dots label {
    border: solid 0.3vh #f69da8;
}
.slider-pilsner .dots label {
    border: solid 0.3vh #fdbc17;
}
.slider-weissbier .dots label {
    border: solid 0.3vh #fbecca;
}

.dots label:hover {background: #2a3478}
#img1:checked ~ .m1 {
    margin-left: 0;
}
#img2:checked ~ .m2 {
    margin-left: -47vh;
}
#img3:checked ~ .m3 {
    margin-left: -0vh;
}
#img4:checked ~ .m4 {
    margin-left: -47vh;
}
#img5:checked ~ .m5 {
    margin-left: 0;
}
#img6:checked ~ .m6 {
    margin-left: -47vh;
}
#img7:checked ~ .m7 {
    margin-left: -0vh;
}
#img8:checked ~ .m8 {
    margin-left: -47vh;
}
#img9:checked ~ .m9 {
    margin-left: 0;
}
#img10:checked ~ .m10 {
    margin-left: -47vh;
}
#img11:checked ~ .m11 {
    margin-left: -0vh;
}
#img12:checked ~ .m12 {
    margin-left: -47vh;
}


.bund-bi{
    width: auto;
    height: 5vh;
    display: flex;
    justify-content: center;
}

/* footer */
.footer{
    display: flex;
    flex-direction: column;
    background-color: #2a3478;
    height: 60vh;
    width: 100vw;
}

.midt-logo {
    order: 2;
}

.footer-links {
    order: 1;
}

.footer-links h1{
    font-size: 2.7vh;
    color: #fcba16;
    font-family: charter;

}

.footer-links a {
    text-decoration: none;
    color: #fcba16;
    font-size: 2.2vh;
    font-family: charter;
    margin-bottom: 0.7vh;
}
.footer-links {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    list-style: none;
}

.footer-links a {
    text-decoration: none;
    color: #fcba16;
    font-size: 2.2vh;
    font-family: charter;
    margin-bottom: 0.7vh;
    margin: 0.5vh;
}


.footer-links p {
    text-decoration: none;
    color: #fcba16;
    font-size: 2.2vh;
    font-family: charter;
    margin-bottom: 0.7vh;
}

.footer-links a:hover {
    color: white;
}

.footer-links a:active {
    color: #fcba16;
}

.footer-social {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.footer-social a img {
    height: 6vh;
    width: auto;
}

.footer-social a img:hover {
    transform: scale(1.5);
}

.footer-logo img{
    height: 10vh;
    width: auto;
    display: flex;
    align-items: center;
}


/* ! Skal ligge nederst ! */
/* Gør linksne synlige når man trykker på burgermenu */
.nav-links {
    transform: translateX(0);
}

.nav-active {
    display: flex;
    transform: translateX(0%);
}
}