@font-face {
    font-weight: 800;
    font-family: EsRebondGrotesque;
    src:  url('../fonts/esrebond-black.woff') format('woff');
    font-display: auto !default;
}
@font-face {
    font-weight: 400;
    font-family: EsRebondGrotesque;
    src:  url('../fonts/esrebond-regular.woff') format('woff');
    font-display: auto !default;
}

body { background: #0F436D; font-family: EsRebondGrotesque, verdana, sans-serif; font-weight: 400; text-align: center; }
.logo { display: block; width: 350px; margin: 100px auto; }
.wrap { max-width: 960px; margin: 0 auto; }
.row { display: flex; flex-direction: row; justify-content: space-evenly; }
.site { width: 25%; border-radius: 25px; padding: 30px; box-shadow: 0px 3px 0px rgba(0,0,0,0.2); }
    .site.workplace { background: #f9D815; }
    .site.education { background: #167ac1; }
    .site.sport { background: #469723; }
    .site img { width: 100px; display: block; margin-top: 10px; margin-left: auto; opacity: 0.4; }
    .site a, .site a:active, .site a:visited, .site a:hover { font-weight: 200; color: #fff; font-size: 40px; text-decoration: none; }

@media only screen and (max-width: 960px) {
    .row { display: block; }
    .row .site { width: 70%; margin: 20px auto; }
}