@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(open-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* inspired by http://j4n.co/blog/Creating-your-own-css-grid-system */

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

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.container:after {
    content: "";
    display: table;
    clear: both;
}

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

[class*='col-'] {
    float: left;
    /*-- our gutter */
    padding: 6px;
    /*background-color: #FFDCDC;*/
}

.col-1 { width: 16.66%; }
.col-2 { width: 33.33%; }
.col-3 { width: 50%; }
.col-4 { width: 66.66%; }
.col-5 { width: 83.33%; }
.col-6 { width: 100%; }

.outline, .outline * {
    outline: 1px solid #F6A1A1;
}

/*-- some extra column content styling --*/
/*
[class*='col-'] > p {
    background-color: #FFC2C2;
    padding: 0;
    margin: 0;
    text-align: center;
    color: white;
}
*/
@media all and (max-width:800px){
    .col-1{ width: 33.33%;  }
    .col-2{ width: 50%;     }
    .col-3{ width: 83.33%;  }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }

    .row .col-2:last-of-type{
        width: 100%;
    }

    .row .col-5 ~ .col-1{
        width: 100%;
    }
}

@media all and (max-width:650px){
    .col-1{ width: 50%;     }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }
}

body {
    background-color: #F7F7F7;
    padding-top: 80px;
    font-family: "Open sans", sans-serif;
    font-size: 14px;
}

hr {
    border: 0;
    border-top: 1px solid #ddd;
}

h1 {
    font-size: 5em;
}

h2, h3 {
    font-size: 1.5em;
}
h2 {
    padding: 12px;
}

a {
    text-decoration: none;
    color: black;
}

.link-item {
    padding: 6px;
    transition: background-color .5s;
}
.link-item:hover {
    background-color: #D1DDEB;
}
.hl, .link-item h3 {
    color: #428BCA;
    transition: color .5s;
}
.link-item:hover h3 {
    color: #23527c;
}
.link-item .subtitle {
    color: gray;
    padding-bottom: 6px;
}
.link-item img {
    vertical-align: middle;
    float: left;
    width: 30px;
    margin-top: 12px;
    margin-right: 6px;
}