@charset "utf-8";

:root {
    --primary-one:#F1F1F1;
    --primary-two:#ff6f61 ;  
    --primary-three:#ff6d70;
    --primary-four:#333333; 
  }
  html{
  font-family: "Roboto", sans-serif;
  height: 100%;
 }
  body{
    margin:0;
    padding: 0;
    height: 100%;
    background-color: #F1F1F1;
  }
  h1{
    width: 80%;
    text-align: center;
  }
  h2{
    font-weight: 400;
    font-size: 30px;
  }
  h4{
    font-weight: 200;
  }
  a:focus {
      outline-color:#ff6d70 ;
      outline-style:solid;  
      outline-width: medium;
    }
  
  * {
    box-sizing: border-box;
  }
  hr{
    border: 1px solid #F1F1F1;
  }

  .icons{
    margin:10px;
    margin-right: 20px;
    font-size: 50px;
    color: #ff6f61;
    color: var(--primary-two);
  }
  .icons-sm{
    text-align: center;
    font-size: 18px;
    width: 10px;
    height: 10px;
    top: 5px;
  }
  .icons-m{
    font-size: 30px;
    margin: 0;
    padding: 10px;
    margin-right: 10px;
    position: relative;
    /* Adjust these values accordingly */
    top: 5px;
    left: 5px;
  }
  .label {
    color: white;
    padding: 5px;
    margin-left: 5px; 
    border-radius: 12px;
    font-weight: 400;
  }

  .ny {
    background-color: #f44336;
  }
  .nav{grid-area: nav;}
  .aside{grid-area: aside;}
  .messages{grid-area: message;}
  .avtaler{grid-area: avtaler; }
  .tjenester{grid-area: tjenester; }
  .footer{grid-area: footer;}

  .grid-container {
    display: grid;
    -ms-display: -ms-grid;
    min-height: 100%;
    grid-template-areas:
      'nav nav nav nav nav nav'
      'aside message message message message message'
      'aside avtaler avtaler avtaler avtaler avtaler'
      'aside tjenester tjenester tjenester tjenester tjenester'
      'footer footer footer footer footer footer';
      -ms-grid-template-areas:
      'nav nav nav nav nav nav'
      'aside message message message message message'
      'aside avtaler avtaler avtaler avtaler avtaler'
      'aside tjenester tjenester tjenester tjenester tjenester'
      'footer footer footer footer footer footer';
      grid-template-columns: 430px auto auto;
      grid-template-rows: auto 1fr 1fr 1fr auto;
      grid-column-gap:20px;
      -ms-grid-rows: auto 1fr 1fr 1fr auto;
      -ms-grid-columns: 430px auto auto;
  }
  nav{
    background-color: var(--primary-four);
    background-color:#333333;
    height: auto;
  }
  nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  nav li {
    float: left;
  }
  nav li a{
    display: block;
    color:var(--primary-one);
    margin:10px;
    padding: 8px 16px;
    text-decoration: none;
    
}
  nav li a:focus{
  background-color: #555;
  }
  nav li a:hover {
    background-color: #555;
    color: white;
  }
  .cards{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 2px 16px;
    color:#757575;
    background-color: #FFFFFF;
  }
  aside{
    margin-left: 40px;
    overflow: auto;
  }
  aside ul{
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  aside li a{
    display: block;
    color: #000;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
}
  aside li a:hover {
    background-color: #555;
    color:white;
    transition: 0.3s;
  }
  aside p{
    text-align: center;
  }
  aside h1{
    margin-left: 30px;
    font-size: 20px;
    font-weight: 400;
  }
 .fa-id-badge{
    margin:30px;
 }
  figure{
    text-align: center;
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 10px;
    height: auto;
    width: 100%;
    background-color: #F1F1F1;
  }
  figure h2{
    color: #000;
  }
  #Kontaktopplysninger{
    margin-left: 30px;
    font-size: 15px;
  }
  article{
    margin-left: 30px;
    margin-bottom: 15px;
    padding: 10px;
    text-decoration: none;
  }
  article:hover{
      background-color:var(--primary-one);
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      cursor: pointer;
      filter: alpha(opacity=40); /* For IE8 and earlier */
      transition: 0.4s;
  }
  article a{
    display: block;
    text-decoration: none;
    color:#757575;
  }
  article a:focus{
    background-color:var(--primary-one);
    }
  .sektorIkon{
    float: right;
    height: 30px;
    width: auto;
  }
  #userImg{
    max-width: 30%;
    height: auto;
    margin-top:15px;
  }
  .kontaktperson {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
  }
  
  .kontaktperson img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  .messages{
    margin-right: 40px;
  }
  .avtaler{
    margin-right: 40px;
  }
  .tjenester{
    margin-right: 40px;
  }
  .tjenester a{
    display: block;
    text-decoration: none;
  }
  .tjenester .cards{
    text-align: center;  
  }
  .tjenester .cards:hover{
    background-color: #ff6f61 ;
    background-color:var(--primary-two);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
    color: white;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
  }
  .tjenester .cards:hover .icons{
    color: white;
  }
  .column {
    float: left;
    width: 25%;
    padding: 0 10px;
 }
 .kontakt a{
   display: block;
  color:#757575;
 }
 .kontakt a:focus{
    outline-color:#ff6d70  ;
    outline-style:solid;  
    outline-width: medium;
 }
 .kontakt{
   margin-left:30px;
   text-align: center;  
   width: 80%;
   display: block;
   margin-bottom: 20px;
   padding: 0 10px;
 }

  .row {margin: 0 -5px;}

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

 .footer{
   background-color: #ff6f61;
    background-color: var(--primary-two);
    color: white;
    text-align: center;
    padding: 10px;
  }
  .footer a:focus{
    outline-color:white ;
    outline-style:solid;  
    outline-width: medium;
  }
/*Help-tip hentet fra   https://tutorialzine.com/2014/07/css-inline-help-tips*/
  .help-tip{
    position: absolute;
    top: 140px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 34px;
    cursor: default;
}
.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}
.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color:#333333;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}
  
  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .grid-container {
    grid-template-areas:
      'nav nav nav nav nav nav'
      'aside aside aside aside aside aside'
      'message message message message message message'
      'avtaler avtaler avtaler avtaler avtaler avtaler'
      'tjenester tjenester tjenester tjenester tjenester tjenester'
      'footer footer footer footer footer footer';
    grid-gap: 0px;
    padding: 0px;
    }
  h3{
    font-weight: 400;
  }
  .aside{
    margin-left: 0px;
    padding: 10px;
    margin: 0;
  }
  .cards{
    margin:10px;
    height: auto;
  }
  .aside li a{
    padding: 10px;
  }
  article{
    margin: 0;
  }
  #userImg{
    max-width: 15%;
  }
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
  .kontakt{
    display: block;
    margin-left:0;
    text-align: center;  
    width: 100%;
  }
  
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 768px) and (max-width: 1024px) {
      .grid-container {
        grid-template-areas:
          'nav nav nav nav nav nav'
          'aside aside aside aside aside aside'
          'message message message message message message'
          'avtaler avtaler avtaler avtaler avtaler avtaler'
          'tjenester tjenester tjenester tjenester tjenester tjenester'
          'footer footer footer footer footer footer';
        grid-gap: 0px;
        padding: 0px;
        }
        h3{
          font-weight: 400;
        }
        .aside{
          margin-left: 0px;
        }
        .cards{
          margin:10px;
          height: auto;
        }
        .messages .cards{
          height: auto;
        }
        .aside {
          padding: 20px;
        }
        .aside li a{
          padding: 25px;
        }
        article{
          margin: 0;
        }
        #userImg{
          max-width: 15%;
        }
        .column {
          width: 100%;
          display: block;
          margin-bottom: 20px;
        }
        .kontakt{
          display: block;
          margin-left:0;
          text-align: center;  
          width: 100%;
        }
}