@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans');
 body {
     font-family: 'Alegreya Sans', sans-serif;
     color: #004164;
     font-size: 16px;
     background-color: #0073af;
     margin: 0px;
}

.admin {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 10px;
    padding-bottom: 5px;
}

.admin a:link {
  color: #FFF;
  text-decoration: none;
}

.admin a:visited {
  font-weight: 400;
  color: #FFF;
  text-decoration: none;
}

.admin a:hover {
  color: #FFF;
  text-decoration: underline;
}

.admin a:active {
  text-decoration: underline;
}

 a:link {
     color: #0073af;
     text-decoration: none;
}
 a:visited {
     font-weight: 400;
     color: #eb9600;
     text-decoration: none;
}
 a:hover {
     color: #eb9600;
     text-decoration: underline;
}
 a:active {
     text-decoration: underline;
}
 .header {
     height: 25vh;
     padding: 6vh;
     text-align: center;
     background: white;
     color: #00b0be;
    /* groen-blauw */
     margin: 0px;
}
 .logoProteion {
     height: 100%;
}
 * {
     box-sizing: border-box;
}
/* Float four columns side by side */
 .column {
     display: inline-block;
     width: 33.33%;
     padding: 0 50px;
}
/* Remove extra left and right margins, due to padding in columns */
 .container {
     margin: 0 0px;
     height: calc(100vh - 25vh);
     text-align: center;
}
/* Clear floats after the columns */
 .container:after {
     content: "";
     display: table;
     clear: both;
}
/* Style the counter cards */
 .card {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* this adds the "card" effect */
     padding: 32px 16px 32px 16px;
     text-align: center;
     background-color: #FFF;
     border-radius: 6px;
     margin-top: 10vh;
}
/* Responsive columns */
 @media screen and (max-width: 600px) {
     .column {
         width: 100%;
         display: inline-block;
         padding: 15px;
         margin-bottom: 0px;
    }
    /* Responsive ARSprintmedia logo */
     @media screen and (max-width: 600px) {
         .logoProteion {
             width: 100%;
             display: block;
             margin-bottom: 20px;
             padding: 5px;
        }
         @media screen and (max-width: 600px) {
             .card {
                 margin-top: 0px;
                 margin-bottom: 0px;
            }

 @media screen and (max-width: 600px) {
     .header {
     padding: 25px;
     height: 20vh;
}