* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 1px;
  background: #f1f1f1;
  max-width:1600px;
}

/* Header/Blog Title */
.header {
  background-color: #0000D8; /*den blå farve i header*/
  text-align: center;
  color: white;
  line-height: 0.1;
  margin-bottom: 0px;
  width:100%;
  top:0;
  padding-top:1px;padding-bottom:1px;

}


.header h1 {
  font-size:5vw;
}

.header h6{
  font-size:2vw;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #0000D8;

/*  Dette gør at overskriften altid er i topen og ikke scroller op...*/
  position: -webkit-sticky; /* Safari */

/* bliver i toppen med en linje  */
  position: sticky;
  top: 0;
  z-index: 10;  /*ensure that the topnav is in front*/
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

/* Change color on hover */
.topnav a:hover {
/*  background-color: #000080;*/
  background-color: #0000D8;
  color: black;
}

/* bruges vist ikke tp 27/1-22
.transition {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}
*/




/* Create 3 unequal columns that floats next to each other  ONLY USED AT THE FRONTPAGE!!!!*/
/* Left column */
.leftcolumn {
  float: left;
  width: 29%;
  padding-left: 0px;
  margin: 0px;
}
.centercolumn {
  float: left;
  width: 42%;
  padding-left: 0px;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 29%;
  padding-left: 0px;
}


.main_page_element {

  padding: 0px;
  margin-top: 0px;
  overflow:hidden;

}

.main_page_element:hover img{
  transform: scale(1.2);
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */

}

.main_page_element img{
  transition: transform 0.25s ease-in-out;

}
/*used for text on the pages*/
.txtcard {
  background-color: white;
  padding-top: 0;
  padding-left: 10px;  /*Tekst starter 10 px inde i txtcard, 20 nede, og der er 20 hvid under tekst*/
/*  padding: 20px;  / * tp added igen Tekst starter 20 px inde i txtcard, 20 nede, og der er 20 hvid under tekst*/

  margin-top: 0px;

}

/*The left navigation inspiration from: https://stackoverflow.com/questions/63698067/how-to-make-a-sticky-div-float-over-the-rest-of-the-page*/
leftnav {

/*  width: 25%;*/
  overflow: auto;  /*Enable scrolling if the sidenav has too much content */
}
.leftnav{
  background-color: white;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px; /* ny var 10*/
  float: left;
  height:0;
  width: 25%;
}

.txtheadingsleft {
  float: left;
  width: 25%;  /*25% lader til at den venstre del går lidt for langt ind i den midderste....??!?!???*/
  /*background-color: #f1f1f1;*/
  padding: 0px; /* ny var 10*/

  /*gør at menu'en ikke scroller op som resten af teksten*/
  position: fixed; /*Make it stick, even on scroll */
  overflow: auto;  /*Enable scrolling if the sidenav has too much content */

}

.txtmaintxtright {
  float: left;
  width: 75%;
/*  background-color: #f1f1f1; */
  padding-left: 10px;
  margin-left:25%
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
  .txtheadingsleft,  .txtmaintxtright {
    width: 50%;
    padding: 0;
    background-color: red;
    padding-left: 100px;

  }

  leftnav {
    background-color: blue;
    padding-left: 50px;
    width: 50%;
  }
  .leftnav{
    background-color: green;
    padding-left: 100px;
    width: 50%;
  }

}


/****************************************************************************************************************************************
    nyt GALLERY med klik-bare billeder - 1/3 brede
****************************************************************************************************************************************/

.picture_matrix:after,.picture_matrix:before,{content:"";display:table;clear:both}
.one_third_row{float:left;width:100%}
>.one_third_row{padding:0 8px}
@media (min-width:601px){.one_third_row{width:33.33333%}}


/****************************************************************************************************************************************
    GALLERY
****************************************************************************************************************************************/

div.gallery {
  border: 1px solid #ccc;
  overflow:hidden;
  position: relative; /* If you want text inside of it */
  margin:10px;

  padding-top: 80%;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  /* Disse to linjer gør at billedet bliver placeret øverst i rammen*/
  position:absolute;
  top:0;

  width: 100%;
  height: auto;
  transition: transform 0.25s ease-in-out;
}
div.gallery:hover img {
  transform: scale(1.2);
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */

}

div.desc {
  padding: 15px;
  text-align: center;
}

.responsive_gallery {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 800px) {
  .responsive_gallery {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive_gallery {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}







/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer - bjælke nederst på siden med copyright*/
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
/*  z-index:5; virker ikke */
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .leftcolumn, .rightcolumn, .centercolumn {
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

/****************************************************************************************************************************************
    New CSS made for the content pages - start
****************************************************************************************************************************************/

h2 {
 margin-top: 75px;
 margin-bottom: 50px;  /* so when choosing in the menu, the first of the content text are visible */
}




.tpsidebar{height:100%;width:300px;background-color:#f1f1f1;position:fixed!important;z-index:2;overflow:auto}
.animate_left{position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@media (min-width:993px){.hide_large_width{display:none!important}.tpsidebar.collapse{display:block!important}}
@media (max-width:992px){.tpsidebar.collapse{display:none}}


/* .tptopbuttonmenu{font-size:large;float:right!important; color:red!important;background-color:yellow!important} */
/*.tptopbuttonmenu{float:right!important; color:white!important;z-index:1;  font-size: 28px;}*/
.tptopbuttonmenu{float:right!important; color:white!important;z-index:1;  font-size: 4vw;}

.button{border:none;display:inline-block;padding:0px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.button:hover{color:black!important}
/*.button:hover{color:#000!important;background-color:#ccc!important}*/

.topbar {

  background-color: #0000D8; /*den blå farve i header*/
  padding: 0px;
  text-align: center;
  font-size: 5vw;
  color: white;
  margin-bottom: 0px;
  padding:0.01em 16px;
  position:fixed;
  width:100%;
  top:0;
  padding-top:16px!important;padding-bottom:16px!important;
  z-index:3;
}



.main_content{
  background-color: white;
  padding-top: 500;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 75px;   /*med nuværende opsætning så er overskriften 65px*/
  margin-left:300px;
  transition:margin-left .4s;
  overflow:hidden;
}

@media (max-width:992px){.main_content{margin-left:0!important;margin-right:0!important}}





.tpanimate_zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.tpmodal{z-index:4;display:none;padding-top:0px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;color:#fff!important;background-color:#000!important; text-align: center;}

/*størrelsen på billedet*/
.tpmodal_content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0; max-width:100%;padding-top:64px!important;padding-bottom:64px!important;background-color:transparent!important}
/*
w3-transparent w3-padding-64
@media (max-width:600px){.tpmodal_content{margin:0 10px;width:auto!important}.tpmodal{padding-top:30px}
@media (max-width:768px){.tpmodal_content{width:500px}.tpmodal{padding-top:50px}}
@media (min-width:993px){.tpmodal_content{width:900px}.hide_large_width{display:none!important}.tpsidebar.collapse{display:block!important}}
*/

.content_image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}




.tpmodal_content_close_x{font-size:24px!important; position:absolute;right:0;top:0}
.tpmenu_overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}

.animate_opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

/****************************************************************************************************************************************
    New CSS made for the content pages - end
****************************************************************************************************************************************/