/*
Theme Name: Magazi

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

Description: Magazi is a stylish and user-friendly news theme, magazine or blog. Tired of overcomplicated themes? You hardly need any plugins, just 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: 10
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
*/

/*-----Magazi, WORD PRESS STYLESHEET------*/

/*RESET*/

html,
body,
ol,
ul,
li{
	margin:0;
	padding:0;
	border:0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style:none;
}

/*CLEAR*/

.clear-all{
	clear: both;
}

/*CUSTOM FONTS*/

@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;
}

ADMINBAR


html[lang]{
  margin-top: 0 !important;
}

#wpadminbar {
  position: sticky;
}



/*DARK MODE*/

@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.2);
  }
	
	#logo img {
    	filter: invert(100%) hue-rotate(180deg) brightness(0.6);
  }
	
	#wpadminbar {
  		filter: invert(100%) hue-rotate(180deg);
	}
}


/*RESPONSIVE ELEMENTS*/

@media screen and (max-width: 900px){
	
	body{
		overflow-wrap: break-word;
		hyphens: auto;
	}
	
	#primmenu,
	#secmenu,
	.nav,{
		display:none;
	}
	
	#header-text{
		margin:0 auto;
		text-align:center;
	}
	
	#logo{
		max-width:250px;
		display:block;
		margin:10px auto;
	}
	
	.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: 901px){
	
	#header-text{
		/*Center header text*/
		/*margin:0 auto;
		text-align:center;*/
	}

	#logo{
		max-width:250px;
		display:inline-block;
		margin:10px 0;
	}
	
	#content{
		width: 70%;
	}
	
	#sidebar{
		width: 25%;
		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%;
		line-height:120%;
		padding-top:20px;
	}
	
	/*IMAGE ALIGNMENT*/
	
	.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;
	}

	/*FEATURED IMAGES*/

	.post .featured{
		width: 290px;
		height: 180px;
		overflow: hidden;
	}
	
	.post .featured img{
		width: 290px;
		height: 180px;
		object-fit: cover;
        object-position: 0 0;
	}
	
	#sidebar .featured{
		max-width:325px;
		max-height:201px;
		overflow: hidden;
	}
	
	.archive .post .featured,
	.blog .post .featured{
		float:left;
		padding:15px 20px 15px 0;
	}
	
	ol.commentlist li{
		padding-right:30%;
	}

	#footer .widget{
		width: 21%;
		padding: 20px 2%;
	}


	/*GRID after fourth post, presented in columns*/

	.blog .post{
		width:100%;
	}
	
	.navigation-item{
		display: inline;
	}
	
	/*EXTRA FEATURE 2, The blockquote will be 50% of post size to the left 

	.single blockquote,
	.page blockquote{
	width: 44% !important;
	margin: 1% 2% 1% 0 !important;
	float:left;
	}
	
	*/
	
	/*.blog .post:nth-child(n+5):after{
  		position: absolute;
  		bottom: 0;  
  		height: 100%;
  		width: 100%;
  		content: "";
  		background: linear-gradient(to top,
     		rgba(255,255,255, 1) 1%, 
     		rgba(255,255,255, 0) 40%
  		);
  		pointer-events: none;
	}*/

}

/* RESPONSIVE images & media */

#header img,
#header-wrapper img,
#logo img,
#footer img,
#banner img,
.widget img,
.comment img,
.entry img{
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
	height: auto;
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */

}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
	height: auto;
}

/*IMAGES*/

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;
}

/* BLOCK GALLERY */

.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*/


.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;
}


/*BASIC*/

body{
	font-family: Lato, Helvetica, sans-serif;
	line-height:170%;
	color:#222;
	font-weight:normal;
	font-size: 16px;
	background:#FFF;
}

#wrapper{
	max-width:1326px;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
	background:#FFF;
}

#content{
	float:left;
}

#content-broad{
	float:left;
	width: 100%;
	margin:10px 0 0 0;
	min-height:300px;
}

#cat-description{
	border-bottom: 1px solid #ddd;
	margin:15px 0;
}

#cat-description h2{
	color:#999;
}

#header{
	display:block;
	width:100%;
	border-bottom: 1px solid #ddd;
}

#header-wrapper{
	display:block;
	max-width:1326px;
	padding:10px 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;
}
 
/*LINKS*/

a:link,
a:visited{
	color:#999;
	text-decoration:none;
}

a:hover,
a:active{
	color:#222;
	text-decoration:none;
}

/*HEADINGS*/
 
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;
}


/*NAVIGATION MENUS*/

.nav{
	/*width:100%;*/
	display:block;
	position:relative;
	padding:0px;
	text-transform:uppercase;
}

#primmenu-wrapper,
#secmenu-wrapper{
	display:inline-block;
	float:right;
	position:relative;
}

#primmenu{
	margin-top:25px;
}

#secmenu{

}

#secmenu li{
	float:left;
	position:relative;
}

#primmenu li{
	float:left;
	position:relative;
}

.nav a{
	display:block;
	text-decoration:none;
    padding:7px 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:#f7f7f7;
	border:1px solid #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{
	/*background:#FFF;*/
}
 
.nav ul li:hover > ul{
    display:block;
}

.nav img{
	position:relative;
	margin-top:50%;
}


/*POST*/

.post-title{
	display:block;
	border-bottom:1px solid #ddd;
	padding-bottom:10px;
}

.post{
	padding-bottom:15px;
	margin-top:15px;
	display:block;
	overflow: hidden;
}

.blog .post,
.archive .post,
.search .post,
.search .page{
	border-bottom:1px solid #ddd;
}

.post-broad{
	max-width:94%;
	padding:3%;
	float:left;
	overflow:hidden;
}

.error404 .post{
	min-height:600px;
	text-align:center;
}


.blog .entry,
.archive .entry,
.search .entry{
	display:inline;
}

.entry{
	display:block;
	font-size:18px;
}

.single .entry{
	line-height:180%;
}

.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*/

.postmetadata{
	display:block;
	line-height:110%;
	color:#BBB;
}

.single .postmetadata{
	padding-top:10px;
}

.postmetadata a{
	padding-right:10px;
}

.recent-post{
	display:block;
	margin:10px 0 0 0 !important;
	padding-top:10px;
	border-top:1px solid #DDD;
}

.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: "\201D";*/
	content: "\201C";
} 

/*blockquote:after{ 
	display: block; 
	margin:0.2px;
	float: right; 
	content: "\201D";
	font-size:400%;
}*/


address{
	display: block;
	font-style:normal;
	margin:20px 0;
	padding:20px;
    background:#f7f7f7;
	border:1px solid #EEE;
}

pre{
	margin:20px 0;
	padding:20px;
    letter-spacing:normal;
	font-size:16px;
	color:#222;
  	overflow: auto;
    background:#eee;
	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+ */
}

.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;
}

/*PAGE NAVIGATION*/

.navigation{
	width:100%;
    clear:both;
	padding:20px 0;
	text-align:center;
	color:#999;
}

/*FORMATS*/


.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;
}

/*SIDEBAR & BANNER*/

#banner{
	max-width:1366px;
	display:block;
	clear:both;
	text-align:center;
	padding:15px 0;
}

#banner .widget{
	margin:0 auto;
	clear:both;
}

.widget h2{
	font-size:20px;
	padding:7px 0 10px 0;
}

#sidebar{
	padding:30px 0 20px 0;
	display:block;
	float:right;
	position:relative;
}

.blog #sidebar .widget:nth-child(1),
.archive #sidebar .widget:nth-child(1),
.page #sidebar .widget:nth-child(1){
	background:#f7f7f7;
	padding:10px;
	border:1px solid #EEE;
}


fieldset {
	padding:0 0 10px 30px;
	border-left:1px solid #ddd;
	border-right:none;
	border-top:none;
	border-bottom:none;
}

legend {
	font-weight:bold;
	padding-top:20px;
}

/*CALENDAR*/

.widget_calendar a{
	font-weight:bold;
	color:#222;
}

.widget_calendar{
	color:#999;
	font-weight:normal;
}

#wp-calendar caption,
#wp-calendar thead th{
	color:#222;
}

/*BUTTONS & FORMS*/

input,
textarea{
	display:block;
	font-size: 100%;
	line-height:100%;
	font-family: inherit;
	overflow: auto;
	padding:10px;
	margin: 5px 2px;
	background:#f7f7f7;
	border:1px solid #CCC;
}

textarea{
	line-height:150%;
	max-width:90%;
	max-width:800px;
}

select{
	font-size: 100%;
	overflow: auto;
	padding:10px;
	margin: 10px 10px 10px 0px;
	background:#f7f7f7;
	color:#222;
	border:1px solid #CCC;
}

#searchform input{
    font-size:100%;
	padding:10px;
	margin: 10px 10px 10px 0px;
	width:95%;
	max-width:500px;
	color:#222;
	background:#f7f7f7;
	border:1px solid #CCC;
}

#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*/

table{
	background:#FFF;
	text-align:left;
	margin:10px 0;
	border:none;
	border-collapse:collapse;
}

table th{
	font-weight:bold;
	padding:5px 10px;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	background:#eee;
}

table tr{
}

table td{
	font-weight:normal;
	padding:5px 10px;
	border-bottom:1px solid #ddd;
}


/*LINE*/

hr{
	height:1px;
	background:#DDD;
	border:0;
	margin:10px 0;
}

/* SCREEN READERS*/

.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; /* Above WP toolbar. */
}

/*COMMENTS*/


#comments {
	clear:both;
	overflow-wrap: break-word;
	hyphens: auto;
	padding:10px 0 20px 0;
	border-top:1px solid #ddd;
}

.commentlist li {
	position: relative;
}

.commentlist img.avatar {
	float:left;
	margin: 5px 15px 0 0;
}

.commentauthor{
	font-weight:bold;
	color:#222 !important;
}

.commentauthor a,
.commentauthor a:visited{
	color:#222 !important;
}


.commentnumber {
	position: absolute;
	right: 5px;
	top: 15px;
	font-size: 16px;
	color:#222;
	font-weight:bold;
}

.commentnumber a,
.commentnumber a:visited{
	color:#222 !important;
}

ol.commentlist li{
	margin:10px 0px;
	padding:10px 0px;
	overflow:hidden;
	border-top:1px solid #ddd;
}

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*/

#footer-wrapper{
	width:100%;
	display:block;
    clear: both;
	background:#EEE;
}

#footer{
	max-width:1366px;
	margin: 0 auto;
	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;
	background:#DDD;
}


/* calendar widget */
.widget_calendar {}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 12px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #bbb; }
#wp-calendar tbody a, #wp-calendar tbody a:hover, #wp-calendar tbody a:visited { color: #222;}
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:link { background: #999; }
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 12px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 12px; text-transform: uppercase; padding-top: 10px; }