/**
 * fil: css/style.css
 **/
/* Variabler: genbruges og gør designvalg enkle */


@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@100&family=Kaisei+Tokumin&display=swap');
/* Bruges som: font-family: 'Alumni Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Quattrocento&display=swap');
/*font-family: 'Quattrocento', serif;*/
@import url("https://use.typekit.net/dfc4rtv.css");
/*  font-family: bilo,sans-serif;
Bilo Light
font-weight: 400;
font-style: normal;


Bilo Light Italic
font-family: bilo, sans-serif;
font-weight: 400;
font-style: italic;

Bilo Bold
font-family: bilo, sans-serif;
font-weight: 700;
font-style: normal;

Bilo Regular
font-family: bilo, sans-serif;
font-weight: 500;
font-style: normal;*/

:root {
  /* farver */
  --blue: #1e90ff;
  --white: #ffffff;
  --beige: #ede1d2;
  --gron: #2c411c;
  --gronn: #799044;
  /* fonte */
  /* Overskrifter */
    --over: 'bilo', sans-serif;

  /* Brødtekst */
    --Brod: 'Quattrocento', serif;


}

body {
  background-color: var(--beige);
}


/* fonte redigering*/

h2{

font-family: var(--over);
font-weight: 700;
font-style: normal;
font-size: 50px;
}

h3 {
  font-family: var(--over);
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
}

p {
font-family: var(--Brod);

}

/* Header */
/* The navigation menu */

header {
position: relative;

}

.navbar {
  overflow: hidden;
  background-color: var(--gron);
    position: relative;
  height: 9vw;
  width: 100vw;

}

.logo{
  width: auto;
  height: 7.5vw;
  float: left;
  padding-top: 1vw;
  padding-left: 1vw;
  /*
  padding-bottom: 25px;
*/
}



/* Navigation links */
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  text-decoration: none;

}

/* The subnavigation menu */
.subnav {
  float: right;
  overflow: hidden;
  padding-top: 20px;
  z-index: 1;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 2.5vw;
  border: none;
  outline: none;
  color: white;

  text-align: center;

  background-color: inherit;
  font-family: var(--over);
  font-weight: 700;
  font-style: normal;
  margin: 0;
  padding-top: 1vw;
}

#kob{
  padding-left: 20px;
}


/* Add a var(--gron); background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: var(--gron);
    background-color: #799044;
    color: white;

}







/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  padding-top: 10px;
  background-color: var(--gronn);
  width: 100vw;
  height: 90px;
  z-index: 3;

}

/* Style the subnav links */
.subnav-content a {
  float: right;
  color: white;
  text-decoration: none;
  font-family: var(--over);
  font-size: 2vw;
  font-weight: 700;
  padding: 3vw 3vw;
  font-style: normal;

}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: var(--gronn);
  color: white;
  z-index: 1;
}

/*-----body------------------*/

/*-----bigphoto ------------------*/

/* Container holding the image and the text */
.container {
  position: relative;

}

/* Bottom right text */
.text-block {
  position: absolute;
  top: 5vw;
  right: 5vw;;
  /*background-color: black;*/
  color: #617336;
  padding-left: 20px;
  padding-right: 20px;

  /*border: solid red 2px;*/
  text-align: right;
}

#picture{
  width: 100vw;
}


#bigphototekst {
  font-size: 4vw;
  text-align: right;
}

/*-----billede med hvid boks top------------------*/

/* Container holding the image and the text */
.boxxer {
  position: relative;
  width: 70vw;
  padding-left: 10vw;
  padding-bottom: 10vw;
  padding-top: 10vw;
}

/* Bottom right text */
.white {
  position: absolute;
  top: 20vw;
  left: 40vw;
  padding-left: 20px;
  padding-right: 20px;
}

#tre {
width: 50vw;

}

#hvid{
  height: 35vw;
  width: 50vw;

}

.boxtekst {
color:  #483220;
text-align: left;
position: absolute;
top: 23vw;
left: 50vw;
width: 45vw
}

.overskrift{
  font-size: 3.5vw;
}

.brodtekst {
  font-size: 2vw;
  width: 37vw;
  padding-left: 2vw;
}

.readmore {
  color:  #483220;
  text-align: left;
  font-size: 2vw;
  top: 0vw;
  padding-left: 2vw;
  font-family: var(--Brod);
}


/*


/*ny billede stripe*/
* {
  box-sizing: border-box;
}

.row {
  display: flex;
  background-color: #514332;
  padding-top: 1vw;;
  padding-bottom: 10vw;
  padding-left: 0.7vw;
  padding-right: 1vw;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 5px;
  padding-left: 20px;
}


/*-----brun streg med tekst------------------*/

.stregafsnit {
position: relative;

}

.streg {
width: 100vw;
text-align: center;
padding-top: 3vw;
padding-bottom: 1vw;

}


.bruntekst {
font-size: 5vw;
color:  #483220;
text-align: center;
position: absolute;
top: 7vw;
left: 22vw;
}


/*-----billede med hvid boks top------------------*/

/* Container holding the image and the text */
.bundbox {
  position: relative;
  width: 70vw;
  padding-left: 10vw;
  padding-bottom: 30vw;
  padding-top: 3vw;
}

/* Bottom right text */
.whitebox {
  position: absolute;
  top: 30vw;
  left: 20vw;
  padding-left: 20px;
  padding-right: 20px;
}

#sti {
width: 80vw;

}


#box{
  height: 47vw;
  width: 60vw;
  padding-bottom: 10vw;

}

.tekstbox {
color:  #483220;
text-align: left;
position: absolute;
top: 30vw;
left: 27vw;
width: 52vw
}

.overskrift1{
  font-size: 3.5vw;
}

.brodtekst1 {
  font-size: 2vw;
  width: 45vw;
  padding-left: 2vw;

}
/*-----__________underside 1_____color: yellow;_________------------------*/


/*-----bigphoto ------------------*/

/* Container holding the image and the text */
.conta {
  position: relative;

}

/* Bottom right text */
.textblock {
  position: absolute;
  bottom: 5vw;
  left: 3vw;
  /*background-color: black;*/
  color: white;
  padding-left: 20px;
  padding-right: 20px;

  /*border: solid red 2px;*/
  text-align: right;
}

#picture1{
  width: 100vw;
}


#bigphototekst1 {
  font-size: 4vw;
  text-align: right;
}

#bigpictekst1 {
  font-size: 2vw;
  text-align: right;
  padding-left: 3vw;
}
/*-----tekst i artikel øverst ------------------*/

.artikeltekst {
  padding-top: 3vw;
  width: 90vw;
  padding-left: 15vw;
  color:  #483220;
  text-align: left;

}


.tekst1{
  font-size: 3.5vw;
}

.tekst2 {
  font-size: 2vw;
  width: 70vw;

}

/*-----grøn streg------------------*/

.gronstreg {
text-align: center;
width: 75vw;
padding-left: 23vw;
height: 0.1vw;
padding-bottom: 5vw;
padding-top: 5vw;
}


/*-----dyrehave----color: green;--------------*/

.dyrehavesection {
  position: relative;
  width: 70vw;
  padding-left: 10vw;
  padding-bottom: 10vw;
  padding-top: 10vw;
}


#dyrepic {
width: 38vw;

}


.dyretekst {
color:  #483220;
text-align: left;
position: absolute;
top: 7vw;
left: 52vw;
width: 45vw
}

.dyretekst1{
  font-size: 3.2vw;
}

.dyretekst2 {
  font-size: 2vw;
  top: 5vw;
  width: 40vw;
  padding-left: 2vw;
}

/*-----Den Uendelige Bro----color: green;--------------*/

.brosection {
  position: relative;
  width: 70vw;
  padding-left: 10vw;
  padding-bottom: 10vw;
  padding-top: 3vw;
}


#bropic {
width: 38vw;

}


.brotekst {
color:  #483220;
text-align: left;
position: absolute;
top: 0.2vw;
left: 52vw;
width: 45vw
}

.brotekst1{
  font-size: 3.2vw;
}

.brotekst2 {
  font-size: 2vw;
  top: 5vw;
  width: 40vw;
  padding-left: 2vw;
}

/*---------Marselisborg Dyrehave-----color: blue;---------*/


/*-----bigphoto ------------------*/

/* Container holding the image and the text */
.conta {
  position: relative;

}

/* Bottom right text */
.dyreover {
  position: absolute;
  background-color: var(--beige);
  bottom: 0vw;
  left: 22vw;
  color:  #483220;
  padding-bottom: 0vw;
  padding-left: 8vw;
  padding-right: 8vw;

  /*border: solid red 2px;*/
  text-align: center;
}

#picture11{
  width: 100vw;
}


#Marselisborgdyre {
  font-size: 4vw;
  text-align: center;
}

.tekst2 {
  padding-bottom: 6vw;
  padding-top: 3vw;
  padding-left: 1vw;
}

/*ny billede stripe*/
* {
  box-sizing: border-box;
}

.serie {
  display: flex;
  padding-top: 2vw;;
  padding-bottom: 1vw;
  padding-left: 0.7vw;
  padding-right: 1vw;
}

/* Create three equal columns that sits next to each other */
.billedeserie {
  flex: 33.33%;
  padding: 5px;
  padding-left: 20px;
}

/*-----------informationsbox------------*/

.informationsbox {
width: 80vw;
background-color: #d2c1ad;

left: 10vw;
padding-right: 10vw;

}

#adresse {
  color:  #483220;
  font-size: 2.2vw;
}

#adresseinfo {
  color:  #483220;
  font-size: 2vw;

}

.informationsboxtekst2 {
padding-left: 20vw;
padding-top: -10vw;

}

.mapssection {
  padding-top: 5vw;
}


.maps {
  padding-left: 30vw;
  width: 70vw;
}
/* Futter */

/*-----futter------------------*/

footer{
  padding-top: 10vw;
  bottom: 0vw;
  display: block;
  width: 100vw;
}

.downer {
  position: relative;
  top: 0;
  left: 0;
bottom: 0vw;
}


.pic1 /* bund*/ {
  position: absolute;
  top:0;
  width: 100vw;
  bottom: 0vw;
}


.pic2 /*logo*/{
  position: absolute;
  top: 5vw;
  right: 0;
  left: 11.5vw;
  width: 9vw;
  /*border: 1px solid red;*/
}

.pic3 /*facebook bund*/ {
  position: absolute;
  height: auto;
  width: 4.5vw;
  top: 13vw;
  left: 11vw;
  /*border: 1px solid red;*/
}

.pic4 /*insta bund*/{
  position: absolute;
  height: auto;
  width: 4.5vw;
  top: 13vw;
  left: 16vw;
  /*border: 1px solid red;*/
}

.pic5 /*eventyrsport*/{
  position: absolute;
  height: auto;
  width: 15vw;
  left: 77vw;
  top: 7vw;
  /*top: 400px;
  left: 160px;*/

}

.Omos {
position: relative;
color: white;
left:25vw;
  top: 5vw;
width: 25vw;
padding-right: 1vw;
}

.nyttige {
  position: relative;
  color: white;
  left:50vw;
  top: -7vw;
width: 25vw;
padding-left: 1vw;

}

li:hover{
  color: white;
  background-color: transparent;
  text-decoration: underline;
}



ul{

  font-family: var(--over);
  font-weight: 500;
  font-style: normal;
  font-size: 1.5vw;

}

#om{
font-size: 1.8vw;
}

#ny {
  font-size: 1.8vw;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
  z-index: 3;
}



@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}




/* Layout */







/* Typografi */