/*!
Theme Name: Artix
Author: Syed Taqi
Author URI: http://syedtaqi.com
Description: Artix is a beautiful and professional WordPress theme made for blogs, magazines and personal sites. The theme is highly customizable and can be customized to suit the needs of a wide audience. The theme is fully responsive and cross-browser compatible to serve a wide range of audience. It has a clean design and loads faster. It includes  a jumbotron area which includes call to action button and text and these can be customized according to your requirement.
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: artix
Tags: custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, footer-widgets, blog, entertainment, theme-options, featured-images, threaded-comments, right-sidebar, grid-layout, one-column, two-columns
*/


*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
	width: device-width;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 400;
	line-height: 1.5; /* Customizable */
	text-align: left;
	background-color: #eee;
}

[tabindex="-1"]:focus {
	outline: 0 !important;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	cursor: help;
	border-bottom: 0;
}

address {
	margin-bottom: 1rem;
	font-style: normal;
	line-height: inherit;
}

ol,
ul,
dl {
	margin-top: 0;
	margin-bottom: 1rem;
	padding-left: 2rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
	margin-bottom: 0;
}

dt {
	font-weight: 700;
}

dd {
	margin-bottom: .5rem;
	margin-left: 0;
}

blockquote {
	border-radius: 3px;
	position: relative;  /*  <--- */
	font-style: italic;
	text-align: center;
	padding: 1rem 1.2rem;
	width: 80%;  /* create space for the quotes */
	color: #4a4a4a;
	margin: 0 auto 1rem;
	background: #E8E8E8;
}

dfn {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -.25em;
}

sup {
top: -.5em;
}

a {
	text-decoration: none;
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

a:hover {
	text-decoration: underline;
}

a:not([href]):not([tabindex]) {
	color: inherit;
	text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
	color: inherit;
	text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
	outline: 0;
}

pre,
code,
kbd,
samp {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 1em;
}

pre {
	margin-top: 0;
	margin-bottom: 1rem;
	overflow: auto;
	-ms-overflow-style: scrollbar;
	padding: 1rem;
	background: #ddd;
	border-left: 0.5rem solid #aaa;
}

figure {
	margin: 0 0 1rem;
}

img {
	vertical-align: middle;
	border-style: none;
	height: auto;
	max-width: 100%;
}

svg:not(:root) {
	overflow: hidden;
}

table {
	border-collapse: collapse;
}
tr.odd {
	background: #fff;
}
tr.even {
	background: #f4f4f4;
}
th {
	background: #555;
	color: #ddd;
	text-align: inherit;
}

td, th {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

caption {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	color: #6c757d;
	text-align: left;
	caption-side: bottom;
}

label {
	display: inline-block;
	margin-bottom: 0.5rem;
}

button {
	border-radius: 0;
}

button:focus {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
	-webkit-appearance: listbox;
}

textarea {
	overflow: auto;
	resize: vertical;
}

fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

legend {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	line-height: inherit;
	color: inherit;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	outline-offset: -2px;
	-webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	font: inherit;
	-webkit-appearance: button;
}

output {
	display: inline-block;
}

summary {
	display: list-item;
	cursor: pointer;
}

template {
	display: none;
}

[hidden] {
	display: none !important;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}

hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small {
	font-size: 80%;
	font-weight: 400;
}

mark {
	padding: 0.2em;
	background-color: #fcf8e3;
}

code {
	font-size: 87.5%;
	color: #e83e8c;
	word-break: break-word;
}

a > code {
	color: inherit;
}

kbd {
	padding: 0.2rem 0.4rem;
	font-size: 87.5%;
	color: #fff;
	background-color: #212529;
	border-radius: 0.2rem;
}

kbd kbd {
	padding: 0;
	font-size: 100%;
	font-weight: 700;
}

pre {
	display: block;
	font-size: 87.5%;
	color: #212529;
}

pre code {
	font-size: inherit;
	color: inherit;
	word-break: normal;
}

details {
	display: block;
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.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;
	clip-path: none;
	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;
}

#content[tabindex="-1"]:focus {
	outline: 0;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.widget select,
.footer-widget select {
	max-width: 100%;
}

.sticky {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

.infinity-end.neverending .site-footer {
	display: block;
}

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.custom-logo-link {
	display: inline-block;
}

.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 100%;
}

.gallery-columns-6 .gallery-item {
	max-width: 100%;
}

.gallery-columns-7 .gallery-item {
	max-width: 100%;
}

.gallery-columns-8 .gallery-item {
	max-width: 100%;
}

.gallery-columns-9 .gallery-item {
	max-width: 100%;
}

.gallery-caption {
	display: block;
}


/* ----------------------------------------------
# General CSS Ends Here
-----------------------------------------------*/


/* ----------------------------------------------
# Website CSS Starts Here
-----------------------------------------------*/

.site {
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

.site-header {
	width: 100%;
}

.content-area,
.comments-area {
	width: 100%;
}


.footer-widget-area {
	width: 100%;
	padding-left: 2%;
	padding-right: 2%;
	margin-bottom: 2.5%;
}

.site-header-inner,
.site-content-inner,
.site-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.site-header-inner {
	margin: 0 auto;
}

.site-content-inner {
	margin-left: auto;
	margin-right: auto;
	padding-left: 2%;
	padding-right: 2%;
}

.site-footer-inner {
	margin: 0 auto;
	padding: 2%;
}

/* Logo Image Setting */
.site-branding {
	flex-basis: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
}

a.custom-logo-link {
	display: flex;
	align-items: center;
	margin: 0.5rem;
}

img.custom-logo {
	max-width: 50px;
}

.site-branding h1,
.site-branding p {
	padding: 0;
	margin: 0.5rem;
}

.site-title {
	width: 100%;
}

.site-title,
.site-description {
	text-align: center;
}

.site-description {
	width: 100%;
	text-align: center
}

.site-title a:hover {
	text-decoration: none;
}


/* Link Styles */

/* Main Navigation Styles */

.main-navigation {
	flex-basis: 100%;
}
.menu-button-container {
	text-align: right;
}
.menu-toggle {
	border: none;
	padding: 5px 8px;
	margin: 5px 0;
}

.nav-menu {
	display: none;
}

.main-navigation.toggled .nav-menu {
	display: block;
}



/* Sidebar Widget Area Styles */

.widget-area {
	width: 100%;
}

/* Archive Widget */

.widget_archive ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

/* Calendar Widget */

.widget_calendar table {
	border-collapse: collapse;
	empty-cells: hide;
	width: 100%;
}

.widget_calendar caption {
	margin:0 0 10px;
}

.widget_calendar td {
	border: 1px solid #aaa;
	text-align: center;

}

.widget_calendar th {
	text-align: center;
}

.widget_calendar td#today {
	background: #555;
	color: #ddd;
}

/* Categories Widget */

.widget_categories > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.widget_categories li::before {
	content: '\00BB\0020\0020';
}

.widget_categories .children {
	margin-left: 10px;
	padding-left: 10px;
	list-style: none;
}

/* Pagination Styles */

nav.pagination {
	box-sizing: border-box;
	margin: 0 0 25px;
	text-align: center; /* CUstomize Pagination Alignment */ 
}

.pagination .page-numbers, a.page-numbers {
	display: inline-block;
	color: #888; /* Pagination Text Color */
	background: white; /* Pagination Background Color */
	border: 1px solid #aaa;
	padding: 7px 14px;
	margin-left: 8px;
}
.pagination a.page-numbers:hover,
.pagination span.current {
	background: #555; /* Pagination Hover Background Color */
	color: #ddd; /* Pagination Color */
	text-decoration: none;
}

.pagination a.prev:before {
	content: '\00AB\0020';
}

.pagination a.next:after {
	content: '\0020\00BB';
}

.pagination span.dots {
	background: transparent;
	border: none;
	font-size: 125%;
	padding-left: 0;
	padding-right: 0;
}

/* Post Format Chat */
.format-chat {
	font-family: monospace;
}

.format-chat p {
	background: #C2FAFF;
	border-radius: 20px;
	padding: 15px;
}

.format-link .entry-content a {
	text-decoration: underline;
	font-size: 110%;
}

.format-status p {
	padding: 15px 25px;
	background: lightblue;
	border-radius: 15px;
}

.format-aside .entry-content {
	background: #9CFFD5;
	padding: 15px 25px;
	margin: 20px;
}

.format-audio .entry-content {
	margin: 0 0 15px;
}

/* Comments, Pingbacks and Trackback Styles */
ol.comment-list {
	padding: 0;
	margin: 0;
	list-style: none;
}

li.comment {
	margin-bottom: 1rem;
}

article.comment-body {
	margin: 0.5rem;
	padding: 0.625rem;
}

.comment-list .comment.odd {
	background: #FFB29C;
}

.comment-list .comment.even {
	background: #FFD09F;
}

.comment-list .comment.bypostauthor {
	border-top: 0.25rem solid #B25C47;
	border-bottom: 0.25rem solid #B25C47;
	border-left: 0.5rem solid #B25C47;
	border-right: 0.5rem solid #B25C47;
	border-radius: 10px;
}

footer.comment-meta {
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #222;
	margin-bottom: 0.75rem;
}

div.reply {
	text-align: right;
}

div.reply a.comment-reply-link {
	display: inline-block;
	padding: 5px 10px;
	background: teal;
	color: #ddd;
}

ol.comment-list ol.children {
	padding-left: 0.75rem;
	list-style: none;
}

ol.comment-list img.avatar {
	float: right;
	margin-left: 0.5rem;
}

/* Paginated Posts */

.page-links {
	clear: both;
	margin: 0 0 1.5rem;
}

/* Single Post Page Navigation */

.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
}

.post-navigation .nav-previous,
.posts-navigation .nav-previous,
.comment-navigation .nav-previous,
.post-navigation .nav-next,
.posts-navigation .nav-next,
.comment-navigation .nav-next {
	flex-grow: 1;
	flex-basis: 250px;
	padding: 10px;
	justify-content: center;
	display: flex;
}
.post-navigation .nav-links a,
.posts-navigation .nav-links a,
.comment-navigation .nav-links a {
	align-self: stretch;
	display: block;
	border-radius: 4px;
	padding: 10px 16px;
}

.post-navigation .nav-previous a:before {
	content: '\0020 Older: \00BB\0020\00BB\0020';
}

.post-navigation .nav-next a:before {
	content: '\0020 Newer: \00BB\0020\00BB\0020';
}

/* Comment Form Styles */
.comment-respond textarea,
.comment-respond input[type=text],
.comment-respond input[type=email],
.comment-respond input[type=url] {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.comment-respond .form-submit {
	text-align: center;
}

.comment-respond input[type=submit] {
	color: #ddd;
	background: teal;
	padding: 0.5rem 2rem;
	border-radius: 0.25rem;
	cursor: pointer;
}

.widget {
	padding: 15px;
	margin-bottom: 30px;
}

/* Posts Styling, Single and Blog */
.site-main {
	display: flex;
	flex-wrap: wrap;
}
.site-main > article {
	margin: 0 0 24px;
	display: flex;
	align-items: stretch;
	width: 100%;
}

.site-main .article-inner {
	margin: 0 2% 0;
	width: 96%;
	overflow: hidden;
}


.site-main .navigation {
	width: 100%;
}


img.wp-post-image {
	max-width: 100%;
}

.more-link-container {
	margin: 0 0 16px;
}


.more-link, .more-link:hover {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 5px;
	text-decoration: none;
}

.more-link:after {
	content: '\0020\0020\00BB\0020\0020';
}


/* Styles for Tablet b/w 360.2 and 768
------------------------------------------------*/
@media (min-width: 360px) {

}



/* Styles for Desktop above 768
------------------------------------------------*/

@media (min-width: 768px) {

	.site-header {

	}

	.site-header-inner {
		padding: 0 2%;
	}

	.footer-widget-area {
		width: 50%;
	}


	.site-branding {
		max-width: 33.333333%;
		justify-content: flex-start;
	}

	.site-title,
	.site-description {
		text-align: left;
	}

	.main-navigation {
		max-width: 66.666667%;
		display: flex;
		align-items: center;
	}


	.main-navigation .menu-button-container {
		display: none;
	}

	.main-navigation .nav-menu {
		display: block;
	}

	.site-footer-inner {
	}

	.content-area-inner {
		margin-right: 1.5%;
	}

	.widget-area-inner {
		margin-left: 1.5%;
	}


	.gallery-columns-5 .gallery-item {
		max-width: 20%;
	}

	.gallery-columns-6 .gallery-item {
		max-width: 16.66%;
	}

	.gallery-columns-7 .gallery-item {
		max-width: 14.28%;
	}

	.gallery-columns-8 .gallery-item {
		max-width: 12.5%;
	}

	.gallery-columns-9 .gallery-item {
		max-width: 11.11%;
	}

	.gallery-caption {
		display: block;
	}

}

@media (min-width: 960px) {
	.footer-widget-area {
		width: 25%;
	}

}