#journals {display: flex;}

#journals nav ul {list-style: none; margin: 0; padding: 0;}

#journals nav.filters {min-width: 180px; margin-right: 15px;}
#journals nav.filters > div{border:solid 1px #cfcfcf; padding: 5px 10px 10px}
#journals nav.filters h2{background-color: #f3f3f3; padding: 5px 5px 5px 10px; margin: 0; position: relative;}
/* #journals nav.filters h2::before{content: "\f1de"; font-family:'Awesome'; padding-right: 5px} */
#journals nav.filters h3{margin-bottom: 0; padding-bottom: 0;}
#journals nav.filters ul li{padding: 4px 0; display: flex;}
#journals nav.filters input[type="checkbox"]{display: none;}
#journals nav.filters label {position: relative; margin-left: 25px}
#journals nav.filters input[type="checkbox"]+ label::before{background: #f8f8f8 none repeat scroll 0 0; border: 1px solid #aaa; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; content: ""; width: 15px; height: 15px; position: absolute; top: 1px; left: -25px;}
#journals nav.filters input[type="checkbox"]:checked + label::after{color: #a20015; content: "✔"; font-size: 12px; position: absolute; top: 1px; left: -21px;}
#journals nav.filters input[type="checkbox"]:checked + label{color: #a20015; font-weight: bold;}
#journals nav.filters label:hover{cursor: pointer; color: #a20015}

#journals nav.filters #reset { float: right; position: relative; bottom: 10px; font-size: smaller}

#journals nav.navigation {border:solid 1px #ccc; padding: 5px 10px;}
#journals nav.navigation h2{margin: 0; padding: 0; display: inline-block;}
#journals nav.navigation ul{display: inline-block;}
#journals nav.navigation ul li{display: inline-block; padding: 0 3px; color:#666;}
#journals nav.navigation ul li.active {font-weight: bold; color: #174f82}
#journals nav.navigation ul li.active:hover {cursor: pointer; color: #a20015}

#journals .listing-container {width: 100%}

#journals section h2{background-color: #f3f3f3; border-bottom: 1px solid #ccc; font: bold 22px/22px Trebuchet MS,Arial,sans-serif; margin-top: 20px; padding: 5px 5px 5px 15px;}
#journals section h2 a{font-size: 10px; float: right;}

#journals article{background-color: #f9f9f9;  margin: 5px 0; padding: 10px 20px; display: flex;}
#journals article h3{margin: 0; padding: 0; font-size: 1.3rem;}
#journals article h4{margin:  0; padding: 0; font-size: 1rem; font-style: italic; font-weight: normal; color: #333;}
#journals article .lang-info{border: 1px solid #ccc; color: #333; display: inline-block; font-size: 10px; font-weight: normal; padding: 0 3px; margin-left: 5px; cursor: pointer}
#journals article .lang-info:hover {border: 1px solid #5229f5; background-color: #5229f5; color: #fff; text-decoration: none; transition: all ease 500ms;}
#journals article figure {margin: 5px 20px 5px 0;}
#journals article figure img {background-color: #ccc; box-shadow: 0 1px 2px rgba(128, 128, 128, 0.5); width: 50px;}
#journals article p.journal-info{margin: 0.5rem 0;}
#journals article p.journal-info span{display: block; font-size: 1rem;}
#journals article p.journal-info span.former{font-size: 0.85rem;}
#journals article p.journal-info span.issn{font-size:1rem;}

#journals article .journal-tags .special_article { cursor: pointer}
#journals article .journal-tags .special_article:hover { background-color: #5229f5; color: #fff; text-decoration: none; transition: all ease 500ms;}
#journals article .journal-links a {font-size: 10px}
#journals article .journal-links a {border: 1px solid #ccc; border-radius: 5px; display: inline-block; font-size: 11px; line-height: 17px; padding: 1px 5px 0; margin:5px 5px 0 0;}
#journals article .journal-links a:hover {border: 1px solid #5229f5; background-color: #5229f5; color: #fff; text-decoration: none; transition: all ease 500ms;}


#wait{width: 100%; text-align: center; margin-top: 20px;}
#journals .hidden{display: none;}


@media screen and (max-width: 560px){
#journals{flex-direction:column;}
#journals nav.filters{margin-right: 0}
}


@media screen and (max-width: 320px){
#journals article{flex-direction:column;}
#journals article a img{display: block; margin: 0 auto; width: 75px}
}