body{
    margin: 0;
    padding: 0;
    background-color: #F5F5F5;
}
/*Header*/


.header{
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2196F3;
    box-shadow: 0 4px 2px -2px grey;
}
.openMenuButton{
    display: none;
}

.menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: table;
}
.menu li{
    display: table-cell;
}
.menu a{
    color: white;
    display: inline-block;
    margin: 0;
    padding: 10px 0;
    font-family: Verdana;
    font-size: 1.2em;
    text-align: center;
    width: 100%;
    transition: background-color 0.3s;
}
.menu a:hover{
    cursor: default;
    background-color: #1976D2;
}
.menu a:active{
    background-color: #0D47A1;
}

/*Verkenfi*/

.verkefni{
    position: absolute;
    left: 0;
    top: 45px;
    width: 100%;
    height: calc(100vh - 45px);
}
.verkefni ul{
    list-style: none;
    display: block;
    width: 250px;
    margin: 0 auto;
    margin-top: 100px;
    padding: 0;
}
.verkefni li{
    margin: 10px auto;
    display: block;
    width: 100%;
}
.verkefni a{
    display: block;
    width: 100%;
    text-align: center;
    font-family: Verdana;
    font-size: 1.3em;
    background-color: #2196F3;
    color: white;
    padding: 10px;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 3px 3px 3px gray;
    border-radius: 5px;
    text-decoration: none;
}
.verkefni a:hover{
    cursor: default;
    background-color: #1976D2;
}
.verkefni a:active{
    box-shadow: 1px 1px 1px gray;
    background-color: #0D47A1;
}
.verkefniDivs{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 700px){
    .openMenuButton{
       display: block;
       padding: 10px 0 10px 10px;
       color: white;
       width: 50px;
       height: 43px;
       transition: background-color 0.3s;
    }
    .openMenuButton:hover{
       cursor: default;
       background-color: #1976D2;
    }
    .openMenuButton:active{
       background-color: #0D47A1;
    }
    .menu{
        background-color: #2196F3;
        position: fixed;
        top: 0;
        left: -300px;
        transition: all 0.3s;
        padding-top: 10px;
        height: 100vh;
        width: 300px;
    }
    .header{
        width: 100%;
        height: 43px;
        background-color: #2196F3;
    }
    .menu ul{

    }
    .menu li{
        display: block;
    }
    menuOpen{
        -webkit-transform: translateX(200px);
    }
}






/* loading */

.loadingScreen{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
}

.loader {
  position: relative;
  margin: 0 auto;
  margin-top: 40vh;
  width: 100px;
}
.loader:before{
    content: '';
    display: block;
    padding-top: 100%;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

/*    */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}