/*
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: 2.4
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){


	body{
		font-size: 15px;
	}
	
	.featured{
		display:block;
		padding: 10px 0;
	}

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

	#content,
	#sidebar{
		width:100%;
	}
}

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

	body{
	font-size: 16px;
	}

	#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:350%;
		line-height:120%;
	}

	/*FEATURED IMAGES*/

	.archive .post .featured,
	.blog .post .featured{
		max-width: 250px;
		max-height: 150px;
		overflow: hidden;
	}
	
	.archive .post .featured,
	.blog .post:nth-child(1) .featured{
		float:left;
		padding:10px 15px 15px 0;
	}
	
	.blog .post:nth-child(2) .featured{
		float:right;
		padding:10px 0 15px 15px;
	}
	
	 .blog .post:nth-child(3) .featured{
		float:left;
		padding:10px 15px 15px 0;
	}

	.featured img {
		max-width: 250px;
		height: auto;
		margin:auto 0;
	}
	
	#sidebar{
		width: 35%;
	}

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

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

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


	/*GRID, after thirds posts, the rest will be presented in columns*/

	.blog .post:nth-child(n+4){
		width: 30% !important;
		padding: 0 3% 0 0 !important;
		float:left;
		height: 450px;
 		position: relative;
	}
	
	.blog .post:nth-child(n+4) h1,
	.archive .post:nth-child(n+4) h1{
		font-size:140% !important;
	}

	.blog .post:nth-child(n+4):after{
  		position: absolute;
  		bottom: 0;  
  		height: 100%;
  		width: 100%;
  		content: "";
  		background: linear-gradient(to top,
     		rgba(255,255,255, 1) 10%, 
     		rgba(255,255,255, 0) 40%
  		);
  		pointer-events: none; /* so the text is still selectable */
	}

}

/* RESPONSIVE images & media */

#header img,
#footer img,
.widget img,
.comment img,
.post 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 {
    width: 100%;
	padding:0;
	margin:0;
}

.wp-caption.alignnone{
    width: 100% !important;
}

.wp-caption img {
    max-width: 99.03225806% !important;
    height: auto;
	padding-top:16px;
}

.wp-caption-text {
	text-align: center;
	position:relative;
	padding:0.4em 0 0.4em 0;
	font-size:90%;
	font-style:italic;
}

.wp-caption.alignnone .wp-caption-text{
  	text-align: left;
	border:none !important;
}

.gallery-caption {
	border:none;
	/*background:#EEE;*/
	font-size:90%;
	max-width:150px;
	margin:-7px 0px 5px 0px;
	text-align: center;
	font-style:italic;
}

/*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;
	line-height:160%;
	color:#222;
	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-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: 5px solid #eee;
	margin:15px 0;
}

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


#header{
	display:block;
	width:100%;
}

#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:#222;
	display:inline;
}

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

}
 
/*LINKS*/

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

a:hover{
	color:#2299CC;
	text-decoration:none;
}

/*HEADINGS*/
 
h1,
h2,
h3,
h4,
h5,
h6{
	font-weight:bold;
	line-height:110%;
	margin:0;
	padding: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;
	font-size:90%;
}

#primmenu{
	float:right;
	background:#eee;
	/*border-top:5px solid #eee;*/
}

#secmenu{
	float:left;
	background:#222;
}

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

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

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

#primmenu a{
	color:#999;

}

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

#secmenu a{
	color:#AAA;
}

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


.nav ul ul{
	display:none;
    	position:absolute;
    	top:100%;
    	float:left;
	text-align:left;
    	z-index:99999;
	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;
}


/*POST*/

.post-title{
	display:block;
	border-bottom:5px solid #eee;
	padding-top:5px;
}

.post{
	margin:15px 0;
	display:block;
	overflow: hidden;
}

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

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

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


/*POSTMETADATA*/

.postmetadata{
	display:block;
	line-height:110%;
	color:#BBB;
	padding:5px 0;
	font-size:90%;
}

.postmetadata a, 
.postmetadata a:visited{
	color:#AAA;
	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 10px;
	margin:10px 0 10px 0;
	font-size:120%;
    font-style:italic;
	background:#eee;
	border:none;
}


blockquote:before{ 
	display: block; 
	float: left;
	position:relative;
	top:0.35em;
	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:10px 10px 20px 0px;
	padding:10px;
    background:#eee;
}

pre{
	padding:10px; 
    letter-spacing:normal;
	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:10px 0;
	text-align:center;
}

.navigation a,
.navigation a:visited{
	color:#222;
	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 #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{
	width:100%;
	display:block;
	text-align:center;
	clear:both;
}

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

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

#sidebar a, 
#sidebar a:visited{
	color:#222;
	font-weight:bold;
	
}
 
#sidebar a:hover{
	color:#AAA;
}

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


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;
	background:#eee;
	max-width:90%;
	border:none;
}

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;
	background:#eee;
	color:#222;
	padding: 3px;
	height: 34px;
	border:none;
}

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

#searchsubmit {
    display: none;
}

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

input[type=submit],
input[type=reset]{
	display:table;
	height: 32px;
	font-size: 100%;
	color:#FFF;
	background:#0077AA;
	margin: 10px 0px;
	padding: 5px 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:#2299CC;
}

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

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

table tr{
}

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


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

#comments {
	clear:both;
	padding-top:10px;
	border-top:5px solid #eee;
}

.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 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;
	padding:0;
	display:block;
    clear: both;
	background:#222;
	color:#AAA;
	font-size:90%;
}

#footer h2{
	color:#FFF;
}

#footer .widget{
	float:left;
}

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


#footer a,
#footer a:visited{
	color:#DDD;
}

#footer a:hover{
	color:#FFF;
}

#credits{
	font-size:90%;
	clear: both;
	text-align:center;
	padding:5px 10px 5px 0px;
	color:#AAA;
	background:#333;
}