@import url('fonts.googleapis.com/css?family=Exo');

html, body {font-family: Exo;} body {

background-image: url('bg.jpg');
background-size: cover;
background-position: center;
color: #fff;
background-attachment: fixed;
background-color: #111;

}

body.disable_scroll { overflow-y: hidden; }

/* header and menu */

header {

padding: 10px;
line-height: 40px;
height: 60px;
box-sizing: border-box;
width: 100%;
margin: auto;
position: fixed;
top: 0;
z-index: 20

} header, footer, search-input {background-color: rgba(0,0,0,0.5);}

header::after {

content:"";
display:block;
clear:both;

} header nav {background: transparent;} .navbar > div {display: inline-block;} logo {line-height: 40px;} logo > img {border-radius: 50%; width: 40px; margin-right: 5px; float: left} logo, nav_social_links, search-navbar-btn { font-size: 1.5rem} header a {color: fff; display: inline-block} header nav {width: 100%; display: block; margin: auto;} header nav ul, share {list-style: none; margin: 0;padding: 0; display: inline-block;} header nav li, share li {display: inline-block;} menu > nav > ul > li > a {display: block} .navbar-left {float: left;} .navbar-right {float: right}

menu {

display: inline-block;

} toggle-menu {

position: relative;
margin: 0;
padding: 0;
background: transparent;
border: 0;
color: #fff

} menu {

position: fixed;
top: 0;
left: -170px;
text-align: left;
background: #111;
padding: 5px;
width: auto;
z-index: 666;
line-height: 2;
height: 100%;
width: 160px;
transition: left 0.5s;

}

menu.open {

left: 0;

}

menu nav ul {

margin-top: 5px;
padding: 0;
/*! display: inline-block; */

} menu nav ul li {display: block;width: 100%;}

close-menu {

display: block;
width: 100%;
text-align: right;
font-size: 1.2rem;

}

menu .menu-title {color: #FF4136 }

footer {

padding: 5px;

}

/* Links */

a {

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

}

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

.tag_list {margin: 0; padding: 0;margin-top: 10px;} .tag_list li {

list-style: none;
display: inline;

}

container {

width: 90%;
max-width: 1000px;
margin: 70px auto 10px;

}

/* Entries */

entries {

display: flex;
justify-content: space-between;
flex-flow: row wrap;

}

.entry, entry, archives {

margin: 5px;
background-color: rgba(0,0,0,0.5);
position: relative;

} .entry, entry {border-radius: 5px;} .entry {

width: 48%;
/*height: 400px;*/
padding: 5px;
box-sizing: border-box;
max-width: 470px;
display: inline-block;
vertical-align: top;
flex: 1;

}

entry {padding: 5px}

.entry > .entry-body {

padding: 5px 0;
display: block;
position: relative;

}

.entry > .entry-body{

height: 150px;

}

.entry .entry-body p {

margin: 5px;

}

.entry-date {font-size: 90%; padding: 0; margin: 0}

entry > .entry-body {

display: block;
width: 100%;
height: 100%;
text-align: left

}

.entry-header > h3 {margin: 0 0 5px 0}

.entry-body > .entry-footer {

margin-top: 10px;

}

.entry-footer > .entry-tags, .entry-footer > .read-more {display: inline-block;}

.read-more {

color: #fff;
font-weight: bold;
float: right;

}

.proyect img {margin: 0} share a {font-size: 1.2em}

entry li {margin-bottom: 5px}

/* pre code */

pre {

white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
padding: 5px;

}

/* Pagination */ pagination {

width: 100%;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
font-size: 1.2em;

}

pagination a, pagination span {

width: 32px;
height: 32px;
display: inline-block;
text-align: center;
line-height: 32px;
background-color: rgba(0,0,0,0.5);
border-radius: 5px;

}

/* Search */

search {

position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,0.8);
height: calc(100vh - 60px);
z-index: 100;
overflow-y: auto;
display: none;

} search.open{

display: block;

} search form {

width: 90%;
border: 0;
color: #fff;
display: block;
max-width: 400px;
font-size: 1.5em;
margin: 5px auto;
position: relative;

}

search-input, reset-search {

border: 0;
background-color: transparent;

}

search-input {

border-bottom: 1px solid #fff;
width: 100%;
padding-right: 1.5em;
box-sizing: border-box;
color: #fff;

}

reset-search {

position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;

}

results-container {

width: 90%;
list-style: none;
padding: 0;
margin: auto;
font-size: 1.2em;

} results-container > li {margin: 5px} results-container > a {display: block}

search-menu {

width: 98%;
position: relative;
height: 30px;

}

search-menu input {

width: 100%;
border: 1px solid;
border-radius: 5px;
padding: 5px;
padding-right: 20px;
box-sizing: border-box;

}

search-menu button {

position: absolute;
border: 0;
background-color: transparent;
top: 5px;
height: 30px;
right: 0;
height: 20px;
padding: 0;
width: 20px;

}

search-navbar-btn {display: inline-block}

/* Categories and Tags lists */

.archive-group {margin-bottom: 10px} .archive-group > label {font-size: 1.3em} .category_list {

max-height: 0;
overflow: hidden;
transition: all 1s ease;

}

.acor {display: none} .acor:checked ~ .category_list {

max-height: 500px;
transition: all 0s ease;

}

.acor ~ label > i:before {font-size: 0.8em}

.acor:checked ~ label > i:before {

content: '\E80E';

}

/* Responsive for various elements */

img {

      max-width: 100%;
height: auto;

}

div.video {

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

}

div.video > iframe {

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

}

video {

max-width: 100%;
display: block;
margin: 10px auto;

}

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

/* 404 error page */ error404 {

text-align: center;
font-size: 200%;

}

/* related posts */

relatedPosts {

text-align: center;

}

relatedPosts .related_post {

width: 20%;
display: inline-block;
vertical-align: top;
margin-bottom: 10px;

}

.related_post > figure {margin: 0}

/* Archives */ archives {padding: 10px;} archives article {margin-left: 20px}

@media (min-width: 468px){

#menu_social_links {display: none}

}

@media (max-width: 767px){

    #entries {
            justify-content: space-around;
    }
    .entry{
            width: 100%;
            margin: auto;
            margin-bottom: 10px;
            height: auto;
            float: none;
    }
    /* tables */
    table:not(.no-rp) tbody, table:not(.no-rp) thead, table:not(.no-rp) tr,
    table:not(.no-rp) th, table:not(.no-rp) td {display: block}
    table thead {
            position: absolute;
            top: -9999px;
    }

    table:not(.no-rp) tr {
            border-bottom: 1px solid;
            padding: 10px 0
    }

    table:not(.no-rp) td {
            position: relative;
            padding-left: 45%;
    }

    table:not(.no-rp) tbody td:before {
            content: attr(data-title);
            position: absolute;
            left: 0;
            display: block;
font-weight: bold;
            width: 40%;
            white-space: nowrap;
    }
    #relatedPosts .related_post {width: 45%}

}

@media (max-width: 480px) {

#header .uk-logo { font-size: 1.2rem }
#header {/*! text-align: center */}
#nav_social_links {display: none !important;}
.title {font-size: 1.3rem}
#logo_menu {float: none; /*! width: 90% */}
#search-navbar-big {display: none}
#menu_social_links ul {display: block !important;}
#menu_social_links li a::after {content: attr(title)}
#relatedPosts .related_post {width: 100%}

}