/*
Theme Name: Magazi

Theme URI: https://toth-illustration.com/magazi/

Description: Magazi is a stylish and user-friendly news, magazine or blog theme. Tired of overcomplicated themes? Just plug in and go! The four first articles are presented in a row, the rest have grid design. Recent news with featured images are added to the sidebar. Beautiful easy-to-read font (Lato). Responsive, liquid layout for all kind of devices. Large banner widget area, two top menus, custom logo, post formats. Start your online newspaper, magazine or blog now! Dark mode by preffered choice on your device or browser.

Magazi WordPress theme, Copyright (C) 2021 Robert Toth
Magazi WordPress theme is licensed under the GPL.
Resource Graphics: All images on the cover is free stock photos. The "your-logo" is the authors design, free to use under GNU, see "license".
Resource Fonts: Lato, Copyright (c) 2010-2021, Łukasz Dziedzic (dziedzic@typoland.com), with Reserved Font Name Lato.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is available with a FAQ at:
http://scripts.sil.org/OFL
Author: Robert Toth
Author URI: https://toth-illustration.com
Version: 2.8.5
Requires at least: 4.5
Tested up to: 5.4
Requires PHP: 5.6
Copyright: Robert Toth, https://toth-illustration.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Resource All graphic objects, example: screenshot.png
Tags: news, blog, featured-images, right-sidebar, two-columns, custom-logo, custom-background, custom-menu, sticky-post, threaded-comments, microformats
Text Domain: magazi
Domain Path: /languages
*/

html,body,ol,ul,li {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;list-style:none}
.clear-all {clear:both}
@font-face {font-family:"Lato";src:local('Lato-Regular'),url("fonts/Lato/Lato-Regular.ttf") format('truetype')}
@font-face {font-family:"Lato";src:local('Lato-Italic'),url("fonts/Lato/Lato-Italic.ttf") format('truetype');font-style:italic}
@font-face {font-family:"Lato";src:local('Lato-Bold'),url("fonts/Lato/Lato-Bold.ttf") format('truetype');font-weight:bold}
@font-face {font-family:"Lato";src:local('Lato-BoldItalic'),url("fonts/Lato/Lato-BoldItalic.ttf") format('truetype');font-weight:bold;font-style:italic}
html[lang] {margin-top:0!important}
#wpadminbar {position:sticky}

@media (prefers-color-scheme:light) {
#footer-wrapper, #secmenu-wrapper{background:#000}
#primmenu-wrapper{background:#EEE}
#footer {color:#777}
#footer a, #footer a:visited, #credits a, #credits a:visited{color:#DDD}
#footer a:hover, #footer a:active, #credits a:hover, #credits a:active{color:#FFF}
}

@media (prefers-color-scheme:dark) {
body {filter:invert(100%) hue-rotate(180deg)}
html {background-color:#000}
img,video,iframe {filter:invert(100%) hue-rotate(180deg) brightness(1.1)}
#wpadminbar {filter:invert(100%) hue-rotate(180deg)}
#footer-wrapper, #primmenu-wrapper{background:#FFF}
#secmenu-wrapper{background:#EEE}
#footer {color:#777}
#footer a, #footer a:visited, #credits a, #credits a:visited{color:#222}
#footer a:hover, #footer a:active, #credits a:hover, #credits a:active{color:#000}
}

@media screen and (min-width:1px) and (max-width:800px) {
body {overflow-wrap:break-word;hyphens:auto}
#header-text {margin:0 auto;text-align:center}
#logo {max-width:200px;margin:0 auto}
#logo h1{text-align:center}
.featured {display:block;padding:10px 0}
.featured img {max-width:100%;height:auto}
#footer .widget {width:92%;padding:20px 4%}
#content,#sidebar {width:100%}
}

@media screen and (min-width:801px) {
#header-text {text-align:left}
#logo {max-width:250px;float:left}
#content {width:75%}
#sidebar {width:20%;margin-left:5%}
#sidebar .widget {margin:0 0 20px 0}
.blog .post-title h1,.archive .post-title h1,.search .post-title h1,.search .page h1 {display:inline;font-size:200%}
.single .post-title h1,.page .post-title h1 {font-size:350% !important;line-height:120%;padding-top:20px}
.alignleft {display:inline;float:left;margin-right:16px!important}
.alignright {display:inline;float:right;margin-left:16px!important}
.aligncenter {clear:both;display:block;margin:10px auto!important}
.post .featured {max-width:320px;max-height:200px;overflow:hidden}
.post .featured img {width:320px;height:200px;object-fit:cover;object-position:0 0}
#sidebar .featured {width:320px;height:200px;overflow:hidden}
.archive .post .featured,.blog .post:nth-child(even) .featured {float:left;padding:15px 15px 0 0}
.search .post .featured,.blog .post:nth-child(odd) .featured {float:right;padding:15px 0 0 15px}
#footer .widget {width:21%;padding:20px 2%}
.blog .post {width:100%}
.blog .post:nth-child(n+5):nth-child(-n+10) .featured {float:none!important;clear:both!important;padding:15px 0 0 0!important;margin:0!important}
.blog .post:nth-child(n+5):nth-child(-n+10) {width:31%!important;float:left!important;height:520px;position:relative;padding:0;margin:0}
.blog .post:nth-child(6),.blog .post:nth-child(9) {padding:0 3.5%!important}
.blog .post:nth-child(n+5):nth-child(-n+10) h1 {font-size:20px!important}
.navigation-item {display:inline}
}

#header img,#header-wrapper img,#logo img,#footer img,.widget img,.comment img,.entry img {max-width:100%;height:auto}
img[class*="align"],img[class*="wp-image-"],img[class*="attachment-"] {height:auto}
img.size-full,img.size-large,img.header-image,img.wp-post-image {max-width:100%;height:auto}
embed,iframe,object,video {max-width:100%}
.entry-content .twitter-tweet-rendered {max-width:100%!important;height:auto}
img {display:block}
a img {border:0}
img.alignleft,img.aligncenter,img.alignright,img.alignnone {margin:0;padding:0;border:none}
.wp-caption {max-width:100%;padding:0;margin:0}
.wp-caption img {max-width:99.03225806%!important;height:auto;padding-top:16px}
.wp-caption-text {position:relative;line-height:110%;font-style:italic;padding:0.4em 0 0.4em 0;font-size:15px}
.wp-block-gallery {display:block;clear:both;width:100%;border:none}
.wp-block-gallery ul {display:block;clear:both;width:100%;margin:0!important;padding:0}
.blocks-gallery-item {display:inline-block;float:left}
.gallery {display:table;width:100%;margin:10px auto;clear:both}
.gallery-item {display:inline-block;vertical-align:top;width:100%}
.gallery-columns-2 .gallery-item {max-width:48%;margin:1% 1% 0 1%}
.gallery-columns-3 .gallery-item {max-width:31%;margin:1% 1% 0 1%}
.gallery-columns-4 .gallery-item {max-width:23%;margin:1% 1% 0 1%}
.gallery-columns-5 .gallery-item {max-width:18%;margin:1% 1% 0 1%}
.gallery-columns-6 .gallery-item {max-width:14%;margin:1% 1% 0 1%}
.gallery-columns-7 .gallery-item {max-width:12%;margin:1% 1% 0 1%}
.gallery-columns-8 .gallery-item {max-width:10%;margin:1% 1% 0 1%}
.gallery-columns-9 .gallery-item {max-width:9%;margin:1% 1% 0 1%}
.gallery-caption {border:none;font-size:15px;max-width:150px;margin:0.4em 0 0 0;padding:0;text-align:center;font-style:italic}
body {font-family:Lato,Helvetica,sans-serif;line-height:170%;color:#444;font-weight:normal;font-size:16px}
#wrapper {max-width:1326px;margin:0 auto;padding-right:20px;padding-left:20px}
#logo {display:block;padding:0 0 15px 0}
#content {float:left}
#content-broad {float:left;width:100%;margin:10px 0 0 0;min-height:300px}
#cat-description {border-bottom:5px solid #eee;margin:15px 0}
#cat-description h2 {color:#999}
#header {display:block;width:100%}
#header-wrapper {display:block;max-width:1326px;padding:0 20px;margin:0 auto}
#header-text {max-width:500px;display:block;z-index:9999;padding:7px 0;letter-spacing:1px;font-size:12px}
.site-title {font-weight:bold;text-transform:uppercase;line-height:110%;color:#222;display:inline}
.site-description {text-transform:uppercase;margin:5px 0px;color:#999;display:inline}
a:link,a:visited {color:#999;text-decoration:none}
a:hover,a:active {color:#222;text-decoration:none}
h1,h2,h3,h4,h5,h6 {font-weight:bold;line-height:110%;margin:0;padding:10px 0;color:#222}
h1 {font-size:30px}
h2 {font-size:26px}
h3 {font-size:22px}
h4 {font-size:20px}
h5 {font-size:18px}
h6 {font-size:16px}
h1 a,h1 a:visited,h2 a,h2 a:visited,h3 a,h3 a:visited,h4 a,h4 a:visited,h5 a,h5 a:visited,h6 a,h6 a:visited {color:#222!important;text-decoration:none}
h1 a:hover,h1 a:active,h2 a:hover,h2 a:active,h3 a:hover,h3 a:active,h4 a:hover,h4 a:active,h5 a:hover,h5 a:active,h6 a:hover,h6 a:active {color:#999!important;text-decoration:none}
.nav {width:100%;display:block;position:relative;padding:0px;text-transform:uppercase;font-size:90%}
#primmenu-wrapper {width:100%;display:block}
#primmenu {max-width:1366px;margin:0 auto}
#secmenu-wrapper {width:100%;display:block}
#secmenu {max-width:1366px;margin:0 auto}
#secmenu li {float:left;position:relative}
#primmenu li {float:right;position:relative}
.nav a {display:block;text-decoration:none;padding:10px 20px}
#secmenu a,#secmenu a:visited {color:#CCC}
#secmenu a:hover,#secmenu a:active {color:#FFF}
.nav ul ul {display:none;position:absolute;top:100%;float:left;text-align:left;z-index:99999}
#primmenu ul ul {background:#eee}
#secmenu ul ul {background:#222}
.nav ul ul ul {top:0%;left:210px;left:0px}
.nav ul ul a {height:auto;padding:10px 15px;width:200px}
.nav li:hover>a,.nav ul ul:hover>a {}
.nav ul li:hover>ul {display:block}
.nav img {position:relative;margin-top:50%}
.post-title {display:block;border-bottom:5px solid #eee;padding-bottom:10px}
.post {padding-bottom:25px;margin-top:10px;display:block;overflow:hidden}
.blog .post,.archive .post,.search .post,.search .page {border-bottom:5px solid #eee}
.post-broad {max-width:94%;padding:3%;float:left;overflow:hidden}
.error404 .post {min-height:600px;text-align:center}
.entry {display:block}
.blog .entry,.archive .entry,.search .entry {display:inline}
.entry {font-size:18px}
.entry ul {padding:20px 30px;display:block}
.entry ul li {list-style-type:square;margin-bottom:5px}
.entry ul ul {display:block;padding:10px 25px}
.entry ul ul li {list-style-type:square;margin-bottom:5px}
.entry ul ul li::marker {color:#BBB}
.entry ol {padding:20px 40px;display:block}
.entry ol li {list-style:decimal;margin-bottom:5px}
.entry a,.entry a:visited {color:#0077AA;text-decoration:none}
.entry a:hover,.entry a:active {color:#2299CC;text-decoration:none}
.postmetadata {display:block;line-height:110%;color:#BBB}
.single .postmetadata {padding-top:10px}
.postmetadata a {padding-right:10px}
.recent-post {display:block;margin:0 0 0 0!important}
.recent-post .postmetadata {padding:0 0 30px 0!important;margin:0!important}
.recent-post h4 {padding:5px 0!important;margin:0!important}
.sticky .entry {border-top:10px solid #cf132e}
blockquote {display:inline-block;margin:0 0 0 2em;padding:0;font-size:20px;line-height:150%;font-style:italic;border:none!important}
blockquote:before {display:block;float:left;line-height:1!important;position:relative;font-style:normal;top:0.15em;padding:0 0.1em 0 0;font-size:500%;content:"\201C"}
address {display:block;font-style:normal;margin:20px 0;padding:20px;background:#eee}
pre {margin:20px 0;padding:20px;letter-spacing:normal;font-size:16px;color:#222;overflow:auto;background:#eee;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}
.pagenumber {max-width:300px;clear:both;padding:5px 20px;margin-top:10px}
.pagenumber a {padding:5px 10px;margin:0px 5px;background:#222;color:#fff}
.pagenumber a:hover {background:#eee;color:#222}
.navigation {width:100%;clear:both;padding:20px 0;text-align:center;color:#999}
.format-aside {border-bottom:5px solid #f0c337!important;padding-top:10px}
.format-chat {border-bottom:5px solid #963d89!important}
.format-audio {border-bottom:5px solid #298171!important}
.format-vide {border-bottom:5px solid #222!important}
.format-link {border-bottom:5px solid #0077AA!important}
.format-image {border-bottom:5px solid #EEE!important}
.format-quote {border-bottom:5px solid #d65130!important}
.format-gallery {border-bottom:5px solid #EEE!important}
.format-status {border-bottom:5px solid #a9d044!important}
#banner {width:100%;display:block;text-align:center;clear:both}
#banner .widget {margin:0 auto 0;clear:both}
.widget h2 {font-size:20px;padding:7px 0 10px 0}
#sidebar {padding:30px 0 20px 0;display:block;float:right;position:relative}
fieldset {padding:0 0 10px 30px;border-left:5px solid #EEE;border-right:none;border-top:none;border-bottom:none}
legend {font-weight:bold;padding-top:20px}
input,textarea {display:block;font-size:100%;line-height:100%;font-family:inherit;overflow:auto;padding:10px;margin:5px 2px;background:#EEE;border:none}
textarea {line-height:150%;max-width:90%;max-width:800px}
select {font-size:100%;overflow:auto;padding:10px;margin:10px 10px 10px 0px;background:#EEE;color:#222;border:none}
#searchform input {font-size:100%;padding:10px;margin:10px 10px 10px 0px;width:95%;max-width:500px;color:#222;background:#EEE;border:none}
#searchsubmit {display:none}
input[type=file] {display:inline-block;padding:0 10px;width:80%;max-width:300px}
button,input[type=submit],input[type=reset],input[type=file]::file-selector-button {display:inline-block;font-size:16px;line-height:100%;color:#FFF;background:#07A;padding:10px 30px;margin:10px 10px 10px 0px;border:none!important;font-weight:normal}
button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=file]::file-selector-button:hover {background:#29C}
button:active,input[type=submit]:active,input[type=reset]:active {background:#222}
input[type="radio"],input[type="checkbox"] {display:inline-block;margin-right:20px!important}
table {text-align:left;margin:10px 0;border:none;border-collapse:collapse}
table th {font-weight:bold;padding:5px 10px;border-top:5px solid #eee;border-bottom:5px solid #eee;background:#eee}
table tr {}
table td {font-weight:normal;padding:5px 10px;border-bottom:5px solid #eee}
hr {height:5px;background:#EEE;border:0;margin:10px 0}
.screen-reader-text {clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.screen-reader-text:focus {background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto!important;color:#21759b;display:block;font-size:14px;font-size:0.875rem;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
#comments {clear:both;overflow-wrap:break-word;hyphens:auto;padding:10px 0 20px 0;border-top:5px solid #eee}
.commentlist li {position:relative}
.commentlist .vcard img.avatar {float:left;padding:0 10px 0 0}
ol.commentlist li {margin:10px 0px;padding:10px 0px;overflow:hidden;border-top:5px solid #eee}
ol.commentlist li.comment {clear:both;margin-top:20px}
ol.commentlist .pingback,ol.commentlist .trackback {padding:10px}
ol.commentlist li.comment ul li {list-style:square;padding-left:20px}
ol.commentlist li.comment ol li {list-style:decimal;padding-left:20px}
#footer-wrapper {width:100%;display:block;clear:both}
#footer-wrapper h1, #footer-wrapper h2, #footer-wrapper h3, #footer-wrapper h4, #footer-wrapper h5, #footer-wrapper h6 {color:#777}
#footer {max-width:1366px;margin:0 auto;padding-top:20px;display:block;clear:both;font-size:14px}
#footer .widget {display:block;float:left}
#footer .widget ul {margin-left:0px}
#credits {width:100%;font-size:12px;clear:both;text-align:center;padding:20px 0;color:#777}