:root {
    
/*    
    Alternativt farveskema:
    Jordfarver
    --darkestcolor: #504B38;
    --middlecolor: #B9B28A;
    --lightercolor: #EBE5C2;
    --lightestcolor: #F8F3D9;
    
    Mørk og orange
    --darkestcolor: #443627;
    --middlecolor: #D98324;
    --lightercolor: #EFDCAB;
    --lightestcolor: #F2F6D0;

    blå sand
    --darkestcolor: #4C585B;
    --middlecolor: #B9B28A;
    --lightercolor: #F4EDD3;
    --lightestcolor: #FFFFEC;
    
    Business
    --darkestcolor: #23486A;
    --middlecolor: #4C7B8B;
    --lightercolor: #DEDEDE;
    --lightestcolor: #FFFFEC;
    --orangecolor: #FFDDAE;
    
*/  
 /*504B38;*/
    --darkestcolor: #27445D; 
    --darkercolor: #A59D84;
    --middlecolor: #C1BAA1;
    --lightercolor: #D7D3BF;
    --lightestcolor: #ECEBDE;
    --orangecolor: #FFDDAE;


}





header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.infoDivContainer {
    position: fixed;
    top: 100;
    width: 100%;
    z-index: 50;
    visibility: hidden;
}
.infoDivContent {
    top: 50%;
    width: 600px;
    visibility: hidden;
}

.menu {
    position: fixed;
    background: var(--darkercolor);
    border: none;
/*    padding-left: 20%; */
    width: 100%;
    z-index: 50;
}

.menupunkter {
    float: left;
    font-size: 20px;
    color: var(--lightestcolor);
    text-decoration: none;
    margin: 5px;
}
.menupunkter:hover, .menupunkter:focus{
    background: var(--darkercolor);
    text-decoration: underline;
}

.menupunkter:active, a:active {
    text-decoration: underline;
}

.current {
    text-decoration: underline;
}

.submenu {
    position: fixed;
    background: var(--darkercolor);
    border: 1px;
    border-style: solid;
    border-color: var(--lightercolor);
    width: 200px;
    z-index: 150;
}

.submenupunkter {
    float: left;
    font-size: 20px;
    color: var(--darkestcolor);
    text-decoration: none;
    margin: 5px;
}


.submenu td{
    border-bottom: 1px solid;
    border-color: var(--lightercolor);
}

.submenupunkter:hover, .menupunkter:focus{
    background: var(--darkercolor);
    text-decoration: underline;
}
.submenupunkter a:active {
    background: var(--darkercolor);
}

nav {
  float: right;
}

nav ul li {
  display: inline;
  padding: 0px 20px;
  float: left;
}

.main {
  position: relative;
}

.sub {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0;
  list-style-type: none;
}

.main:hover .sub {
  display: block;
}

.noborder{
    border: 0px;
    border-collapse: collapse;
}

th {
    background: var(--darkestcolor);
    
}

.minwidth{
    min-width: 320px;
}

.maxwidth{
    max-width: 1480px;
}

.roundedgetable {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px var(--lightercolor); /* this draws the table border  */ 
}
 
.middle-bgcolor {
    color: var(--darkestcolor);
    border-collapse: collapse;
    background: var(--middlecolor);
    border-color: var(--middlecolor);
}

.lighter-bgcolor {
    color: var(--darkestcolor);
    border-collapse: collapse;
    background: var(--lightercolor);
    border-color: var(--lightercolor);
}

.lightest-bgcolor {
    color: var(--darkestcolor);
    border-collapse: collapse;
    background: var(--lightestcolor);
    border-color: var(--lightestcolor);
}


.roundcorners_top {
    border: 1px solid var(--lightercolor);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.roundcorners_bottom {
    border: 1px solid var(--lightercolor);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* style="background-color: #54585d;color: #ffffff; border:1px solid #FFFCF1; border-radius: 0.5rem"  */

.fillemptycell{
    empty-cells: show; 
    min-height: 200px;
    background: none;
    border: none;
}


h1 {
    text-align: center;
    font-size: 40px;
    color: var(--lightestcolor);
}

h2 {
    text-align: center;
    font-size: 35px;
    color: var(--darkestcolor);
}


h3 {
    text-align: center;
    font-size: 25px;
    color: var(--darkestcolor);
}



p {
    font-size: 20px;
    color: var(--darkestcolor);
}


li {
    font-size: 14px;
    color: var(--darkestcolor);
}

.title {
    color: var(--lightestcolor);
}

.selectedphoto {
    position: fixed;
    top: 250px;
    left: 25%;
    width: 50%;
    height: 250px;
    border: solid black;
}

/* container benyttes til  objekter, der skal have centreret tekst */
.container {
  position: relative;
}

/* Class center benyttes til tekst eller andet, der skal ceentreres i container eller på billede */
.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  align-content: center;
}

.imgview {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: 110; 
    visibility: hidden;
    transition: .5s ease;
}
.imgviewbackground{
    background: var(--lightestcolor);
    opacity: 0.8;
    z-index: 100; 
    transition: .5s ease;
}
.navigationlayer {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: 120; 
    visibility: hidden;
    transition: .5s ease;
}

img{
  border: none;
  margin: 0px;
  opacity: 1;
}

.imgdefault { 
  width: 100%;
  height: auto;
  opacity: 1;  /* kan gøre billedet gennemsigtigt 0.0 - 1.0 */
}


.portfoliosize { 
    display: inline-block;
    object-fit: scale-down;
    max-height: 250px;
    max-width: 90%;
    height: auto;
    width: auto; 
    border: none;
    opacity: 1;  /* kan gøre billedet gennemsigtigt 0.0 - 1.0 */
    cursor:pointer;
    cursor:hand;
}


.hide {
    visibility: hidden;
}


/* CSS */
.button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    border-radius: 6px;
    border: none;
    
    background: var(--darkercolor);
    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    color: var(--lightestcolor);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button:hover {
  cursor: pointer;
}

.button:focus {
  box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}

.link {
    font-size: 20px;
    color: var(--lightestcolor);
/*    background-color: var(--darkercolor);*/
    text-decoration: none;
    margin: 5px;
}

.link:hover {
  cursor: pointer;
}

.linkdescrete {
    font-size: 20px;
    color: var(--darkestcolor);
/*    background-color: var(--darkercolor);*/
    text-decoration: none;
    margin: 5px;
}