/*
Theme Name: Vivex
Theme URI: https://photricity.com/wordpress-themes/vivex/
Author: Josh Meyer
Author URI: https://photricity.com
Description: Vivex is a clean, bright WordPress theme with a fully responsive layout, magazine style text columns, and fresh green and orange accents. It features a subtle geometric header background and bold, modern fonts. The navigation menu is customizable with single-level submenus and collapsing smartphone menu. Vivex is extremely lightweight, uses no JavaScript by default, and contains completely valid HTML5 and CSS3.
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-menu, featured-images, sticky-post, editor-style, one-column, two-columns, three-columns, footer-widgets, threaded-comments, custom-background, blog, news
Text Domain: vivex

Vivex WordPress Theme, Copyright (C) 2020, Josh Meyer
Vivex is distributed under the terms of the GNU GPL

This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation; either version 2 of the License, or (at your option)
any later version.

This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc., 51
Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/


/**
 * General
 */

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

body {
	margin: 0;
	font: 300 1.3em/1.5 Oswald, sans-serif;
	color: #555;
	background: #fff url(images/vivex-background.jpg) no-repeat center top;
	background-size: contain;
	word-wrap: break-word;
}

#header {
	margin: 1.5em 5% 2em 5%;
	clear: both;
}

.archive-header {
	margin: 0 5%;
}

#site-title {
	margin: 0 0 0.2em 0;
	font-size: 3.5em;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.1;
}

#site-description {
	margin: 0;
	font-size: 1.1em;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
}

#widget-bar {
	margin-top: 3em;
	padding: 1.5em 5% 0 5%;
	overflow: hidden;
	background-color: #f1f3f3;
}

#widget-bar ul li {
	margin-bottom: 0.4em;
	line-height: 1.2;
}

#widget-bar .post-date {
	margin-top: 0.2em;
}

#footer {
	margin: 3em 5% 2em 5%;
	overflow: hidden;
	font-size: 0.8em;
	font-weight: 400;
}


/**
 * Typography
 */

h1,
h2 {
	margin: 0 0 0.5em 0;
	font-size: 1.8em;
	font-weight: 400;
}

h3,
h4,
h5,
h6 {
	margin: 0 0 0.3em 0;
	font-weight: 400;
}

h3 {
	font-size: 1.17em;
}

h4 {
	font-size: 1em;
}

h5,
h6 {
	font-size: 0.83em;
	text-transform: uppercase;
}

p {
	margin: 0 0 1em 0;
}

b,
strong {
	font-weight: 400;
}

em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 0 1em 0;
	padding-left: 1.7em;
	color: #e79545;
}

blockquote:before {
	content: "\201C";
	display: block;
	position: relative;
	width: 2em;
	left: -0.57em;
	top: 0.54em;
	font-size: 3.2em;
	line-height: 0;
}

.wp-block-quote {
	border-left: none;
}

.wp-block-pullquote {
	border-color: #e79545;
}

.wp-block-pullquote blockquote {
	margin-left: 0;
}

.wp-block-pullquote blockquote:before {
	content: "";
}

abbr[title],
acronym[title] {
	border-bottom: 1px dotted;
}

del {
	text-decoration: line-through;
}

dfn {
	font-style: italic;
}

small,
.small {
	font-size: 80%;
}

big,
.big {
	font-size: 120%;
}

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

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

code,
kbd,
pre,
samp {
	font-family: monospace;
	font-size: 1em;
}

pre {
	overflow: auto;
}

hr,
.wp-block-separator {
	clear: both;
	height: 2px;
	background: #e79545;
	border: 0;
}

.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

ul,
ol,
li {
	margin: 0;
	padding: 0;
	list-style: none;
}

article.post ul li,
article.page ul li {
	margin-left: 1.2em;
	list-style: circle outside none;
}

article.post .post-content > ul,
article.page .post-content > ul {
	margin-bottom: 1em;
}

article.post ul ul li,
article.page ul ul li {
	list-style: circle outside none;
}

article.post ol ul li,
article.page ol ul li {
	list-style: circle outside none;
}

article.post ol li,
article.page ol li,
article.post ol ol ol li,
article.page ol ol ol li {
	margin-left: 1.4em;
	list-style: decimal outside none;
}

article.post .post-content > ol,
article.page .post-content > ol {
	margin-bottom: 1em;
}

article.post ol ol li,
article.page ol ol li {
	list-style: lower-alpha outside none;
}

/* use highlight class to make text orange */
.highlight {
	color: #e79545;
}


/**
 * Links
 */

a {
	color: #a2b332;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

a:hover,
a:active,
a:focus {
	color: #e79545;
	outline: 0;
	text-decoration: none;
}

.skip-link {
	position: absolute;
	top: 5px;
	left: -9999rem;
}

.skip-link:focus {
	left: 5px;
}


/**
 * Posts
 */
article.post,
article.page,
article.attachment {
	margin: 0 5% 2em 5%;
	overflow: hidden;
}

article.post .post,
article.page .page {
	margin: 0;
}

.post-content {
	clear: both;
	margin-bottom: 0.3em;
	overflow: hidden;
}

article.post .title {
	margin-bottom: 0.2em;
	font-size: 1.8em;
	line-height: 1.2;
}

article .post-date {
	margin: 0 0 0.4em 0;
	color: #e79545;
	font-size: 0.8em;
	line-height: 1.1;
	text-transform: uppercase;
}

article .post-date:before {
	content: "\2014";
	margin-right: 0.1em;
	font-size: 1.5em;
	line-height: 0;
}

.sticky .post-date {
	display: none;
}

.comments-button {
	float: left;
	margin: 0 0.5em 0.5em 0;
}

span.comments-button {
	background-color: #a2b332 !important;
}

.post-info {
	float: left;
	font-size: 0.8em;
	text-transform: uppercase;
	line-height: 1.4;
}

.pagination {
	padding: 1em 5%;
	overflow: hidden;
	font-weight: 400;
}

.search-results .pagination {
	padding: 1em 0;
}

.page-numbers {
	display: inline-block;
	float: left;
	text-align: center;
	padding: 0.3em 0.5em;
}

.archive-title {
	margin-left: 5%;
}

.article-header {
	margin-bottom: 0.5em;
}


/**
 * Comments
 */

#comments {
	margin: 0 5%;
}

.comment-metadata {
	font-size: 0.8em;
	text-transform: uppercase;
}

.commentlist {
	margin-bottom: 2em;
}

.bypostauthor .comment-body {
	padding: 0.5em;
	border-radius: 0.3em;
	background: #f1f3f3;
}

.bypostauthor .comment-content {
	font-weight: 400;
}

#comments .comment-notes {
	display: none;
}

.comment-navigation {
	margin-bottom: 2em;
}

.vcard .avatar {
	float: left;
	margin: 0.3em 0.8em 0 0;
}

b.fn {
	float: left;
	margin-right: 0.3em;
}

.comment-content {
	clear: both;
	margin-top: 0.4em;
}

.comment .depth-2,
.comment .depth-3,
.comment .depth-4,
.comment .depth-5{
	margin-left: 1em;
}

.comment-body {
	margin-bottom: 1.7em;
}

.comment-body .reply {
	margin-top: -0.7em;
}

.comment-reply-link {
	font-size: 0.7em;
}

.pingback .comment-body {
	margin-bottom: 0.8em;
}

.comment-navigation,
.no-comments{
	font-weight: 400;
}

.comment-edit-link,
.post-edit-link {
	margin-left: 0.4em;
}


/**
 * Images
 */

img {
	max-width: 100%;
	height: auto;
	border: 0;
	border-radius: 0.3em;
}

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

.size-thumbnail {
	max-width: 45%;
}

.alignnone {
	max-width: 100%;
	margin: 0.2em 0.8em 0.8em 0;
}

.aligncenter {
	max-width: 100%;
	margin: 0.2em auto;
}

.alignright {
	float: right;
	max-width: 48%;
	margin: 0.2em 0 0.8em 0.8em;
}

.alignleft,
.attachment-post-thumbnail {
	float: left;
	max-width: 48%;
	margin: 0.2em 0.8em 0.8em 0;
}

.auto-columns .attachment-post-thumbnail {
	float: none;
	max-width: 100%;
}

a img .alignright {
	float: right;
	margin: 0.2em 0 0.8em 0.8em;
}

a img .alignnone {
	margin: 0.2em 0.8em 0.8em 0;
}

a img .alignleft {
	float: left;
	margin: 0.2em 0.8em 0.8em 0;
}

a img .aligncenter {
	display: block;
	margin: 0 auto;
}

.wp-caption {
	padding: 0.2em 0 0.4em;
	text-align: center;
	color: #e79545;
	font-size: 80%;
}

.wp-caption .alignnone {
	margin: 0.2em 0.8em 0.8em 0;
}

.wp-caption .alignleft {
	margin: 0.2em 0.8em 0.8em 0;
}

.wp-caption .alignright {
	margin: 0.2em 0 0.8em 0.8em;
}

.wp-caption img {
	max-width: 98.5%;
	margin: 0;
	padding: 0;
}

.wp-caption .wp-caption-text {
	margin: 0;
	padding: 0 0.1em 0.2em;
}

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

.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
    background: none;
}

@media (max-width: 750px) {
	.alignleft,
	.alignright,
	a img .alignleft,
	a img .alignright {
		display: block;
		float: none;
		max-width: 100%;
		margin: 0.2em 0 0.4em 0;
	}

	.alignnone {
		margin: 0 0.4em 0.4em 0;
	}
}


/**
 * Layout
 */

/* Automatic text columns (wrap text with class "auto-columns") */
.auto-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1em;
	-moz-column-gap: 1em;
	column-gap: 1em;
}

@media (max-width: 1000px) {
	.auto-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}

	.post-date {
		padding: 0.08em 0.13em 0.13em 0.13em;
	}
	#widget-bar .post-date {
		margin-top: 0.1em;
	}

	body {
		font-size: 1.2em;
		background-size: 1024px;
	}

	#site-title {
		font-size: 3.2em;
	}
}

@media(max-width: 850px) {
	.footer-box {
		text-align: center !important; /* Override #theme text-align right for mobile */
	}
}

@media (max-width: 750px) {
	.auto-columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}

	body {
		font-size: 1.1em;
	}

	#site-title {
		font-size: 2.8em;
	}
}


/**
 * Flexbox Grid 7/21/2017
 */

.flex-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -2%;
}

.flex-grid > * {
	margin-right: 2%;
	margin-bottom: 1.5em;
}

.col-xxl {
	width: 73%;
}

.col-xl {
	width: 64.66%;
}

.col-lg {
	width: 48%;
}

.col-md {
	width: 31.33%;
}

.col-sm {
	width: 23%;
}

.col-xs {
	width: 18%;
}

@media (max-width: 1350px) {
	.col-xxl {
		width: 64.66%;
	}

	.col-sm {
		width: 31.33%;
	}

	.col-xs {
		width: 23%;
	}
}

@media (max-width: 1000px) {
	.col-xxl,
	.col-xl,
	.col-md,
	.col-sm {
		width: 48%;
	}

	.col-xs {
		width: 31.33%;
	}
}

@media (max-width: 850px) {
	.col-lg {
		width: 100%;
	}

	.col-xs {
		width: 48%;
	}
}

@media (max-width: 750px) {
	.col-xxl,
	.col-xl,
	.col-md,
	.col-sm {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.col-xs {
		width: 100%;
	}
}


/**
 * Tables
 */

table {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1em 0;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: transparent;
}

table th,
table td {
	padding: 0.5em 0.2em;
	vertical-align: top;
	text-align: center;
	border: 1px solid #ddd;
}

table th {
	font-weight: 400;
	background: #f1f3f3;
}


/**
 * Misc
 */

embed,
iframe,
object,
video {
	max-width: 100%;
	margin-bottom: 1.5em;
}

p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {
	margin-bottom: 0;
}

[hidden],
template {
	display: none;
}

#theme {
	text-align: right;
	color: #ccc;
}

#theme a {
	color: #ccc;
}

#credit-logo {
	width: 1.4em;
	height: 1.4em;
	vertical-align: middle;
}

.tag-cloud {
	line-height: 1.2;
}

article.search article {
	margin: 0 0 1em 0 !important;
}

footer {
	clear: both;
}

.wp-block-embed,
.wp-block-audio {
	max-width: 1000px;
	margin-right: 0;
	margin-left: 0;
}

/* RESPONSIVE VIDEO (place each embed in div with class "responsive-video") */
.responsive-video {
	position: relative;
	height: 0;
	margin-bottom: 15px;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
}

.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/**
 * Navigation
 */

#nav {
	width: 90%;
	padding: 0 5%;
	text-transform: uppercase;
}

#nav li {
	float: left;
}

#nav li a {
	display: block;
	padding: 0.3em 0.7em;
	font-weight: 400;
}

#nav .menu {
	margin-left: -0.7em;
}

#nav li ul {
	display: none;
	position: absolute;
	margin-left: 0.7em;
	overflow: hidden;
	z-index: 100;
}

#nav ul ul li {
	float: none;
}

#nav .menu-item-has-children:hover > ul,
#nav .menu-item-has-children:focus-within > ul {
	display: block;
}

.mobile-nav {
	display: none;
}

@media (min-width: 1001px) {
	#nav ul.menu > li > ul,
	#nav div.menu > ul > li > ul {
		border: 1px solid #a2b332;
		border-radius: 0.3em;
		background: #fff;
	}

	#nav .menu {
		width: 95%;
		margin-top: 0.3em;
		overflow: hidden;
	}

	#nav ul ul ul,
	#nav ul ul ul ul,
	#nav ul ul ul ul ul {
		position: static;
	}
}

@media (max-width: 1000px) {
	#nav {
		line-height: 2;
	}

	.mobile-nav {
		position: relative;
		left: -0.7em;
		width: 3em;
		height: 2.6em;
		text-indent: -999em;
	}

	.mobile-nav:before {
		content: "";
		position: absolute;
		top: 33%;
		left: 25%;
		right: 25%;
		height: 4px;
		border-top: 12px double #a2b332;
		border-bottom: 4px solid #a2b332;
	}

	.mobile-nav:after {
		content: "";
		top: 60%;
	}

	#nav:not(:target) .mobile-nav:first-of-type,
	#nav:target .mobile-nav:last-of-type {
		display: block;
	}

	#nav .menu {
		display: none;
		position: absolute;
		left: 0;
		width: 100%;
		margin-left: 0;
		border-bottom: 1px solid #a2b332;
		z-index: 200;
	}

	#nav:target .menu,
	#nav:target {
		display: block;
		background: #fff;
	}

	#nav ul.menu > li,
	#nav div.menu > ul > li {
		width: 95%;
		padding-left: 5%;
	}

	#nav li ul {
		display: block;
		position: relative;
	}

	#nav li a {
		padding: 0.3em 0;
	}

	#nav li > ul {
		border: 0;
	}
}


/**
 * Forms
 */

button,
input,
optgroup,
select,
textarea {
	margin: 0 0 0.2em 0;
	color: inherit;
	font: inherit;
}

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

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input {
	line-height: normal;
}

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

input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

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

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

textarea {
	overflow: auto;
}

input,
textarea {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.3em 0.5em;
	background: #fff;
	border-radius: 0.3em;
	border: 1px solid #a2b332;
	-webkit-transition: border 0.2s ease-in-out;
	-o-transition: border 0.2s ease-in-out;
	transition: border 0.2s ease-in-out;
}

input:hover,
input:focus,
textarea:hover,
textarea:focus {
	outline: 0;
	border: 1px solid #e79545;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button,
.more-link,
.comment-reply-link,
.nav-next a,
.nav-previous a {
	padding: 0.3em 1em 0.4em 1em;
	background: #a2b332 !important;
	color: #fff;
	border-radius: 0.3em !important;
	border: 0;
	-webkit-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-file__button:hover,
.more-link:hover,
.comment-reply-link:hover,
.nav-next a:hover,
.nav-previous a:hover {
	background: #e79545 !important;
	color: #fff;
	cursor: pointer;
}

.more-link {
	display: table;
	margin-top: 0.5em;
	clear: both;
}

button[disabled],
input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

textarea {
	display: block;
	width: 25em;
	min-height: 5em;
	overflow: auto;
}

input[type="image"] {
	width: auto;
	height: auto;
}

input[type="radio"],
input[type="checkbox"] {
	width: auto;
	height: auto;
	background: none;
}

input[type="file"] {
	border: 0;
}

.wp-block-file__button {
	display: table;
	margin-left: 0 !important;
}

.screen-reader-text,
.assistive-text,
.form-allowed-tags,
.search-submit {
	display: none;
}

#search-button {
	position: absolute;
	top: 0.4em;
	right: 5%;
	padding: 0.2em 0.15em;
	z-index: 300;
	cursor: pointer;
}

.search-button-svg {
	float: right;
	width: 1.5em;
	height: 1.5em;
	margin-bottom: 0.5em;
}

#search-button .search-field {
	float: right;
	width: 0;
	padding: 0;
	border-width: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#search-button:hover .search-field,
#search-button .search-field:focus {
	width: 10em !important;
	padding: 0.3em 0.5em;
	border-width: 1px;
	z-index: 300;
}


/**
 * Editor colors
 */

.has-vivex-green-color {
	color: #a2b332;
}

.has-vivex-green-background-color {
	background-color: #a2b332;
}

.has-vivex-orange-color {
	color: #e79545;
}

.has-vivex-orange-background-color {
	background-color: #e79545;
}


/**
 * Print
 */

@media print {
	body {
		background: none;
		font-size: 1em;
	}

	#header,
	article.post,
	article.page,
	#comments,
	.post-edit-link,
	.comment-edit-link,
	#footer {
		margin-right: 0;
		margin-left: 0;
	}

	#nav,
	#widget-bar,
	.comment-reply-link,
	#respond {
		display: none;
	}
	
	.button,
	.more-link
	input[type="submit"],
	input[type="reset"] {
		border: 1px solid #a2b332;
		background: none;
	}
}