/*
Theme Name: Magazi

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

Description: A stylish and easy to use magazine or news theme. The three first blog posts are presented in a row, the rest have column/grid/card design with fading effect. Beautiful sublime font (Lato). Two top menus. Responsive, liquid layout for all kind of devices. Including post formats, custom header, large banner widget area in header, sidebar and footer, width 1366px. Including wide page template suitable for Gutenberg block design. Prepared for Microformats.
Magazi WordPress theme, Copyright (C) 2020 Robert Toth
Magazi WordPress theme is licensed under the GPL.
Resource Graphics: All images on the cover is free stock photos. 
Resource Fonts: Lato, Copyright (c) 2010-2018, Ł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
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: right-sidebar, two-columns, custom-background, custom-header, 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-BoldItalic.ttf") format('truetype');
	font-weight: bold;
	font-style: italic;
}


/*RESPONSIVE ELEMENTS*/

@media screen and (min-width: 1px) and (max-width: 800px){

	.featured{
		display:block;
		overflow: hidden;
		padding: 10px 0 20px 0;
	}

	#footer .widget{
		width:94%;
		padding:3%;
	}

	#content,
	#sidebar,
	#sidebar2{
		width:100%;
	}
	
	/*.wp-caption-text {
	max-width:250px !important;
	}*/
}

@media screen and (min-width: 801px){

	#content{
		width: 65%;
	}

	.blog h1,
	.archive h1,
	.search h1,
	.search .page h1{
		display:inline;
		font-size:200%;
	}
	
	.single h1,
	.page h1{
		display:inline;
		font-size:320%;
		line-height:120%;
	}

	/*FEATURED IMAGES*/

	.search .post .featured,
	.archive .post .featured,
	.blog .post .featured{
		width: 300px !important;
		max-height: 180px !important;
		overflow: hidden !important;
	}
	
	.blog .post .featured{
		float:left;
		padding:15px 15px 15px 0;
		
	}
	
	.search .post .featured,
	.archive .post .featured,
	.search .post .featured{
		float:right;
		padding:15px 0 15px 15px;
	}

	.featured img {
		max-width: 300px;
		height: auto;
		margin:auto 0;
		padding-bottom:15px;
	}
	
	#sidebar,
	#sidebar2{
		width: 35%;
	}

	#sidebar .widget,
	#sidebar2 .widget{
		margin: 0 0 20px 40px;
	}
	
	#comments {

	}
	
	ol.commentlist li{
		padding-right:30%;
	}
	
	#footer .widget{
		width: 21%;
		padding: 1% 2%;
	}
	
}


/* RESPONSIVE images & media */

#header-image img,
#header img,
#header-wrapper img,
#wrapper img,
#footer 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 {
	margin:0;
	border: none;
	padding: 10px 0 0 0;
}

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

.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:14px;
}

/*GALLERY*/


.gallery {
	margin-bottom: 2em;
}

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


/*BASIC*/

body{
	font-family: Lato, Helvetica, sans-serif;
	font-size:16px;
	line-height:160%;
	color:#444;
	font-weight:normal;
	
		/* Break word */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;

	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

#wrapper{
	max-width:1326px;
	margin: 0 auto;
	padding-top: 20px;
	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;
	padding:15px 0;
}

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

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

#header-wrapper{
	display:block;
	max-width:1366px;
	margin:0 auto;
}

#header-text{
	position:relative;
	display:block;
	text-align:left;
	z-index: 9999;
	padding:20px 0;
}


.site-title{
	font-size:160%;
	font-weight:bold;
	text-transform:uppercase;
	line-height:110%;
	color:#333;
	display:inline;
}

.site-description{
	font-size:150%;
	text-transform:uppercase;
	margin:5px 0px;
	color:#AAA;
	display:inline;

}

/*LOGO*/

#logo{
	display:block;
	padding:10px 20px 15px 20px;
	float:left;
}

#logo img{
	max-width:300px;
	height:auto;
}

 
/*LINKS*/

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

a:hover{
	color:#0093d3;
	text-decoration:none;
}

/*HEADINGS*/
 
h1,
h2,
h3,
h4,
h5,
h6{
	font-weight:bold;
	line-height:110%;
	margin:0;
	padding:0 0 0.5em 0;
	color:#222;
}


h1{
	font-size:190%;
}

h2{
	font-size:170%;
}

h3{
	font-size:150%;
}

h4{
	font-size:130%;
}

h5{
	font-size:120%;
}

h6{
	font-size:110%;
}


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


/*NAVIGATION MENUS*/

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

#primmenu,
#secmenu{
	float:right;
	max-width:800px;
}


#primmenu{
	padding-top:30px;
}

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

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

.nav a{
	display:block;
	text-decoration:none;
    padding:10px 15px 10px 15px;
}

#primmenu a{
	color:#222;
	font-size:15px;
	font-weight:bold;

}

#primmenu a:hover{
	color:#333;
}

#secmenu a{
	color:#999;
	font-size:15px;
}

#secmenu a:hover{
	color:#999;
}


.nav ul ul{
	display:none;
    position:absolute;
    top:100%;
    float:left;
	text-align:left;
    z-index:99999;
	background:#f7f7f7;
	border:1px solid #DDD;
}
 
.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;
}


/*POST*/

.post-title{
	display:block;
	/*border-bottom:1px solid #ddd;*/
	padding-top:5px;
}

.post{
	padding:20px 0;
	display:block;
	/*overflow: hidden;*/
	background:#FFF;
}

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

.single .post{
	margin-bottom: 30px;
}

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

.post-404 {
	width: 94%;
	padding: 3%;
	min-height: 400px;
	float: left;
	overflow: hidden;
}

.entry{
	display:block;
	font-size:18px;
	line-height:170%;
}

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

.entry ul{
	margin:0 0 0 40px;
	display:block;
}

.entry ul li{
	list-style-type: square;
	margin: 0 0 5px 5px;
}

.entry ul ul li{
	list-style-type: circle;
	margin-left:20px;
}

.entry ol{
	margin:0 0 0 40px;
	display:block;
}

.entry ol li{
	list-style: decimal;
	margin: 0 0 5px 5px;
}

.entry a:link,
.entry a:visited{
	color:#0083ca !important;
	text-decoration:none;
}

.entry a:hover,
.entry a:active{
	color:#0093d3 !important;
	text-decoration:none;
}


/*POSTMETADATA*/

.postmetadata{
	display:block;
	line-height:130%;
	color:#FFF;
	padding:5px 0;
}

.postmetadata a, 
.postmetadata a:visited{
	color:#999;
	text-decoration: none; 
	padding-right:10px;
}

.postmetadata a:hover{
	color:#222;
	text-decoration: none; 
}

.sticky .entry{
	border-top:10px solid #cf132e;
}

blockquote{
	display: inline-block;
	padding: 20px;
	margin:10px 0;
	font-size:19px;
    font-style:italic;
	background:#f7f7f7;
	border-left:1px solid #e7e7e7;
	border-right:1px solid #e7e7e7;
}


blockquote:before{ 
	display: inline-block; 
	float: left;
	position:relative;
	right:10px;
	top:25px;
	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:10px 0;
	padding:20px;
	background:#f7f7f7;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
}

pre{
	padding:10px; 
    letter-spacing:normal;
	color:#333;
  	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:#333;
	color:#fff;
}

.pagenumber a:hover{
	background:#eee;
	color:#333;
}

/*PAGE NAVIGATION*/

.navigation{
	width:100%;
    clear:both;
	padding:10px 0;
	text-align:center;
}

.navigation a,
.navigation a:visited{
	color:#333;
	font-weight:bold;
}

.navigation a:hover{
	color:#0077AA;
	
}

.edit{
	float:right;
	padding:5px 0;
	font-size:80%;
}

/*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 #333 !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;
	margin:0 auto;
	padding:10px 0;
	clear:both;
	border-bottom:1px solid #DDD;
}

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

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

#header-image{
	display:block;
	padding-bottom:20px;
	border-bottom:1px solid #DDD;
}

#sidebar ul li a, 
#sidebar ul li a:visited,
#sidebar2 ul li a, 
#sidebar2 ul li a:visited{
	color:#333;
	font-weight:bold;
	
}
 
#sidebar ul li a:hover,
#sidebar2 ul li a:hover{
	color:#AAA;
}

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

#sidebar ul li,
#sidebar2 ul li{
	padding:5px 0 10px 0;
	border-bottom:1px solid #DDD;
}

#sidebar2 .widget:nth-child(1){
	padding:20px;
	background:#f7f7f7;
	border:1px solid #e7e7e7;
}

fieldset {
	border:1px solid #DDD;
	padding:10px;
	margin:10px 0px;
}

legend {
	font-weight:bold;
}

/*BUTTONS & FORMS*/

input,
textarea{
	display:block;
	font-size: 100%;
	font-family: inherit;
	overflow: auto;
	margin: 10px 0px;
	padding:3px 10px;
	border:1px solid #DDD;
	max-width:90%;
}

input{
		height:32px;
}


button,
.button,
textarea,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="password"],
input[type="name"],
input[type="tel"],
input[type="url"],
input[type="text"],
input[type="search"],
input[type="email"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
	box-shadow: none;
}

select{
	font-size: 100%;
	overflow: auto;
	border:1px solid #DDD;
	color:#333;
	padding: 3px;
	height: 34px;

}

#searchform input{
    font-size:100%;
	margin:10px 0px;
	padding:3px 10px;
	width:95%;
	max-width:500px;
	height: 32px;
	color:#AAA;
}

#searchsubmit {
    display: none;
}

input[type=file] {
	background:#eee;
	height: 32px;
}

input[type=submit],
input[type=reset]{
	display:table;
	height: 36px;
	font-size: 100%;
	color:#FFF;
	background:#0083ca;
	margin: 10px 0px;
	padding: 0 20px 3px 20px;
	border: none !important;
	font-weight: normal;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
  	border-radius: 3px;
}

input[type=reset]{
text-align:left;
}

input[type=submit]:hover,
input[type=reset]:hover{
	background:#0093d3;
}

input[type=submit]:active,
input[type=reset]:active{
	background:#222;
}

/*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:5px solid #ddd;
	border-bottom:1px solid #ddd;
	background:#ddd;
}

/*
table th a,
table td a{
	background:#222;
	padding:5px 10px;
	margin:0;
	color:#FFF !important;
}
*/

table tr{
}

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


/*LINE*/

hr{
	height:5px;
	background:#EEE;
	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*/

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

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

.commentdate a,
.commentdate a:visited{
	color:#444 !important;
	font-style:italic;
}

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

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

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

.commentlist li {
	position: relative;
	border-top:1px solid #ddd;
}

#comments {
	clear:both;
	padding-top:10px;
	padding-bottom:20px;
}

.commentlist{
	border-bottom:1px solid #ddd;
	margin-bottom:15px;
}

ol.commentlist li{
	padding-top:15px;
	padding-bottom:10px;
	overflow:hidden;
}


/*
	.commentlist .thread-alt {
	padding-left:40px;
	border-top:none;
}
*/

ol.commentlist li.odd{ 

}

ol.commentlist li.even{ 
}

.commentlist li.bypostauthor{
}

ol.commentlist .pingback,
ol.commentlist .trackback {
	padding:10px;
}

ol.commentlist li.comment ul li{ 
	list-style:square;
	margin-left:20px;
}

ol.commentlist li.comment ol li{ 
	list-style:decimal;
	margin-left:20px;
}

/*FOOTER*/


#footer{
	max-width:1366px;
	margin: 0 auto;
	display:block;
    clear: both;
	font-size:90%;
}


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



#footer .widget{
	float:left;
}

#footer .widget ul{
	margin-left:0px;
}


#credits{
	background:#DDD;
	font-size:80%;
	clear: both;
	text-align:center;
	padding:5px 10px 5px 0px;
}

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