@import url('fonts.googleapis.com/css?family=Open+Sans'); body {

background-color: #111;
color: #fff;
font-family: 'Open Sans';

}

a {

      color: #0074D9;
      text-decoration: none;
transition: color 0.5s;

}

content {

width: 90%;
max-width: 860px;
margin: auto;
margin-top: 60px;

}

header {

height: 50px;
box-sizing: border-box;
line-height: 50px;
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #111;
z-index: 100;
box-sizing: border-box;
padding: 0 10px;

} site-title, main-nav {display: inline-block;} site-title {font-size: 1.5em; font-weight: bold; color: fff}

/* Navbar */ main-nav {float: right}

toggle-menu {

width: 24px;
height: 24px;
display: none;
text-align: center;
box-sizing: border-box;
line-height: 24px;
z-index: 200;
position: relative;

}

/* Footer */

footer {

      border-top: 1px solid;
padding: 10px;
      text-align: center;
      font-size: 0.9em;
      margin-top: 20px;

}

social_links {

text-align: center;

}

social_links > a {

font-size: 1.5em;

}

img {max-width: 100%; height: auto}

/* Video iframe */

div.video {

position: relative;
width: 100%;
padding-bottom:56.25%;

}

div.video > iframe {

      position: absolute;
      width: 100%;
height: 100%;
      top: 0;
      left: 0;

}

table {width: 100%} table th {text-align: left}

a:hover {color: #7FDBFF !important;}

pre {

white-space: pre-wrap;

}

/* Entries list */

.entry {margin-bottom: 20px} .entry .entry-title {

font-size: 1.8em;
display: block;

} .entry .entry-date {

color: #aaa;
display: block;
margin: 5px 0;

}

/* Pagination */

pagination {

text-align: center;
font-size: 1.2em;

}

pagination a, pagination span {

width: 24px;
display: inline-block;
height: 24px;
line-height: 24px;

}

pagination .actual-page {font-weight: bold;} pagination .inactive {color: aaa}

@media (max-width: 768px){

    header {
            line-height: 1px;
            height: 44px;
            line-height: 34px;
    }

    #main-nav {
            position: fixed;
            float: none;
            display: block;
            left: -180px;
            top: 0;
            background-color: #111;
            line-height: initial;
            width: 180px;
            height: 100%;
            padding: 10px;
            padding-top: 40px;
            box-sizing: border-box;
            z-index: 100;
            transition: left 1s;
    }

    #main-nav > a {
            display: block;
            margin-bottom: 5px;
    }
    #toggle-menu {
            display: inline-block;
    }

    #toggle-menu::before {
            font-family: 'Fontello';
            content: '\F0C9';
            color: #fff;
            font-size: 18px;
    }

    #site-title {margin-left: 5px;}

    #main-nav.open {left: 0;}
    #toggle-menu.open {z-index: 200}
    #toggle-menu.open::before {content: '\E800'}

    /* tables */
    table tbody, table thead, table tr,
    table th, table td {display: block}
    table thead {
            position: absolute;
            top: -9999px;
    }

    table tr {
            border-bottom: 1px solid;
            padding: 10px 0
    }

    table td {
            position: relative;
            padding-left: 45%;
    }

    tbody td:before {
            content: attr(data-title);
            position: absolute;
            left: 0;
            display: block;
font-weight: bold;
            width: 40%;
            white-space: nowrap;
    }

}