:root
/*{
.container-header {
  background-image: none;
}*/
/*  --website-color-primary: 59,122,87;
  --website-color-hover: 59,122,77;
þessir eru orginal í Cassiopeia
  --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);
  --cassiopeia-color-hover: rgb(var(--website-color-hover));
  --cassiopeia-color-link: blue;
*/
}


/* Menu */

/* Override the background with white 
.container-header {
    background-color: white;
    background-image: none;
}*/

/* Text should now be blue 
.container-header .mod-menu {
    color: #002554;
}
.site-grid {
    background-color: #f4f6f7;
}

.header {
    background-color: #f4f6f7;
}

.grid-child {
    padding: 3px 15px;
    background-color: white;
}

.footer {
    background-color: #f4f6f7;
    background-image: none;
}*/

/* We add padding and radius so that on hover there is a nice background 
.container-header .mod-menu a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px; 
    padding: 3px 15px;
    color: #002554;
}*/

/* On hover there should be a gray background
.container-header .mod-menu a:hover {
    background-color: #eee;
}*/

/* We need to change the color of the Hamburger Menu because white on white is not good 
.container-header .navbar-toggler {
    color: #0088cc;
    border: 1px solid #002554;*/
  /*Sleipnis liturinn er #002554
}*/

/* Menu */  
.header .mod-menu > li {
  position: relative;
}

.header .mod-menu li:hover > ul {
  background-color: #fff;
  border: 1px solid #dfe3e7;  
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 16px;
}