/*
Theme Name: Fiddlefire
Theme URI: https://vizou.com
Author: Dana Whittle
Author URI: https://vizou.com
Description: Theme for Chris McKhool
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiddlefire
*/

    /* - - - - - - - - - - - - - - - - - - - - - - - - - TYOPGRAPHY*/

    /* Googlefonts (local)
Nunito 300-800
Hepta Slab 300-600
*/

    .curriculum,
    .wp-caption-text,
    blockquote em {
    	font-family: "Nunito", sans-serif !important;
    	font-style: normal;
    	font-weight: 300;
    }

    h2,
    h2 a {
    	font-family: "Nunito", sans-serif !important;
    	font-style: normal;
    	font-weight: 400;
    }

    footer,
    ul.tabs li a,
    nav.nav-main ul li a {
    	font-family: "Nunito", sans-serif !important;
    	font-style: normal !important;
    	font-weight: 500 !important;
    }

    .content p a,
    .details,
    a.post-edit-link,
    h1 {
    	font-family: "Nunito", sans-serif !important;
    	font-style: normal !important;
    	font-weight: 400 !important;
    }

    em {
    	font-family: "Hepta Slab", sans-serif !important;
    	font-style: italic !important;
    	font-weight: 300 !important;
    }

    #ajax-load-more p,
    .wp-playlist-item-title {
    	font-family: "Hepta Slab", sans-serif !important;
    	font-style: normal !important;
    	font-weight: 500 !important;
    }

    .label-dist,
    strong,
    blockquote strong,
    .meta,
    a .nav-name,
    h4,
    h5,
    h6 {
    	font-family: "Nunito", sans-serif !important;
    	font-style: normal !important;
    	font-weight: 600 !important;
    }

    .detail-label,
    footer a,
    footer h2,
    .grid-horiz h2 a,
    h3,
    h3 a {
    	font-family: "Nunito", sans-serif !important;
    	font-style: normal !important;
    	font-optical-sizing: auto;
    	font-weight: 800 !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - VARIABLES*/

    :root {
    	--overlay: rgb(96 128 123 / 62%);
    	--links: #0178ca;
    	--hover: #a0c8e3;
    	--white: #fff;
    	--black: #555555;
    	--gray: #e4e0d9;
    	--body: #f1ece2;
    	--darkgray: #c7c0b2;
    	--dark: #0b6eb2;
    	--medium: #128de2;
    	--headers: #0070c6;
    	--light: #a0c8e3;
    	--pale: #dee9f0;
    	--whisper: #f3f2fb;
    	--bright: #079eb9;
    	--admin: #97f4ff;
    	--red: #e50000;
    	--border: 1px solid var(--darkgray);
    }

    .which-template {
    	display: none;
    	color: red;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - BASICS*/

    html {
    	font-size: 18px;
    	font-size: min(max(18px, calc(1rem + (20 - 16) * ((100vw - 320px) / (1920 - 320)))), 20px);
    	min-height: 0vw;
    	width: 100%;
    	height: 100%;
    	scroll-behavior: smooth;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }

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

    body {
    	font-family: "Hepta Slab", sans-serif;
    	font-weight: 350;
    	line-height: 1.5em;
    	color: var(--black);
    	background: var(--body);
    	overflow-x: hidden;
    	overflow-y: auto;
    	width: 100%;
    	min-height: 100%;
    	margin: 0 auto;
    	display: grid;
    }

    p {
    	margin: 5px 0 10px 0;
    }

    small {
    	font-size: 0.85em;
    }

    .screen-reader-text {
    	margin-left: -5000px;
    }

    em {
    	font-style: italic;
    }

    a,
    a:visited {
    	color: var(--links);
    	text-decoration: none;
    }

    a:hover {
    	color: var(--hover);
    	text-decoration: none;
    }

    img {
    	max-width: 100%;
    	height: auto;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - HEADER*/

    .bg {
    	position: relative;
    	width: 100%;
    }

    .overlay {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	height: 33vh;
    	background: var(--overlay);
    	-webkit-mask: -webkit-gradient(linear,
    			left top, left bottom,
    			from(#000000), to(#00000000));
    	-webkit-mask: linear-gradient(to bottom,
    			#000000 0%, #00000000 100%);
    	mask: -webkit-gradient(linear,
    			left top, left bottom,
    			from(#000000), to(#00000000));
    	mask: linear-gradient(to bottom,
    			#000000 0%, #00000000 100%);
    	z-index: 400;
    }

    .header-padding {
    	height: 120px;
    }

    .bg img,
    .bg video {
    	display: block;
    	width: 100%;
    	height: auto;
    	-o-object-fit: cover;
    	object-fit: cover;
    	border-bottom-right-radius: 100%;
    }

    .bg-video {
    	position: relative;
    }

    /* Default state (autoplaying) - show pause icon, hide play icon */
    a.playpause .fa-play {
    	display: none;
    }

    a.playpause .fa-pause {
    	display: inline-block;
    }

    /* Paused state - show play icon, hide pause icon */
    a.playpause.paused .fa-play {
    	display: inline-block;
    }

    a.playpause.paused .fa-pause {
    	display: none;
    }

    a.playpause:hover {
    	cursor: pointer;
    }

    a.playpause {
    	font-size: 1.5em;
    	color: var(--white);
    	position: absolute;
    	bottom: 1em;
    	left: 2em;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - NAVIGATION*/

    .nav-wrap {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: justify;
    	-ms-flex-pack: justify;
    	justify-content: space-between;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	-ms-flex-line-pack: center;
    	align-content: center;
    	width: 100%;
    	height: 100px;
    	padding: 1em 2em;
    	position: fixed;
    	z-index: 500;
    }

    .scrolled .nav-wrap {
    	height: 100px;
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	z-index: 500;
    }

    .scrolled .nav-wrap.menu-open,
    .scrolled .nav-wrap {
    	background: var(--medium);
    	-webkit-transition: background 1s linear;
    	-o-transition: background 1s linear;
    	transition: background 1s linear;
    }

    /*main*/

    nav.nav-main {
    	z-index: 500;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }

    a.toggle-nav {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }

    a.toggle-nav i {
    	font-size: 36px;
    	color: var(--white);
    }

    a.toggle-nav.nav-active,
    .scrolled a.toggle-nav {
    	color: var(--white);
    }

    a.toggle-nav:hover {
    	color: var(--hover) !important;
    }

    .nav-name {
    	color: var(--white);
    	margin: 0 20px;
    	font-size: 3em;
    	line-height: 1em;
    }

    /* main menu, open */

    nav.nav-main ul.nav-active {
    	visibility: hidden;
    }

    nav.nav-main ul {
    	list-style: none;
    	padding: 6em 3em 2em 0;
    	margin: 0;
    	position: absolute;
    	top: -1em;
    	left: -5%;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: flex-end;
    	width: 30%;
    	height: 110vh;
    	background: var(--red);
    	border-bottom-right-radius: 8px;
    	rotate: 5deg;
    	-webkit-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    	transition: all 0.5s ease;
    }

    nav.nav-main ul li {
    	list-style: none;
    	margin: 0.5em 0;
    	padding: 0;
    }

    nav.nav-main ul li a,
    nav.nav-main ul li a:visited {
    	display: block;
    	font-size: 1.5em;
    	color: var(--white);
    }

    nav.nav-main ul li.active a,
    nav.nav-main ul li a:hover {
    	-webkit-transform: scale(1.3);
    	-ms-transform: scale(1.3);
    	transform: scale(1.3);
    	-webkit-transition: -webkit-transform 0.5s ease;
    	transition: -webkit-transform 0.5s ease;
    	-o-transition: transform 0.5s ease;
    	transition: transform 0.5s ease;
    	transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    }

    /* social nav */

    nav.nav-social ul {
    	padding: 1em 2em;
    	margin: 0;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }

    nav.nav-social ul li {
    	list-style: none;
    	padding: 0;
    }

    nav.nav-social ul li a {
    	color: var(--white);
    	font-size: 22px;
    	padding: 0 10px;
    }

    nav.nav-social a i:hover {
    	-webkit-transform: scale(1.5);
    	-ms-transform: scale(1.5);
    	transform: scale(1.5);
    	-webkit-transition: -webkit-transform 0.5s ease;
    	transition: -webkit-transform 0.5s ease;
    	-o-transition: transform 0.5s ease;
    	transition: transform 0.5s ease;
    	transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    }

    nav.nav-social li.nav-admin a {
    	color: var(--admin);
    }

    /* nav.nav-social li.wpmenucartli a {
    	background: var(--medium);
    	padding: 3px 8px;
    	border-radius: 4px;
    }

    nav.nav-social li.wpmenucartli a:hover {
    	background: var(--darkgray);
    }

    nav.nav-social li.wpmenucartli i {
    	font-size: 22px;
    }

    nav.nav-social li.wpmenucartli .amount {
    	font-size: 0.8em;
    } */

    /* - - - - - - - - - - - - - - - - - - - - - - - - - LAYOUT*/

    .container {
    	position: relative;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	width: 100%;
    	height: 100%;
    	min-height: 100vh;
    }

    .content {
    	grid-area: content;
    }

    .left {
    	grid-area: left;
    }

    .right {
    	grid-area: right;
    }

    .center {
    	grid-area: center;
    }

    .left,
    .right {
    	-webkit-column-break-inside: avoid !important;
    	page-break-inside: avoid !important;
    	-moz-column-break-inside: avoid !important;
    	break-inside: avoid !important;
    	word-wrap: break-word;
    }

    .grid {
    	display: grid;
    	grid-template-columns: repeat(12, 1fr);
    	grid-template-areas:
    		". . content content content content content content content content . .";
    	grid-column-gap: 0;
    	padding: 1.5em 0;
    	position: relative;
    	width: 100%;
    }

    .parent-content {
    	padding: 0 0 2em 0;
    }

    .grid.holding {
    	width: 100%;
    	height: 100%;
    	height: 100px;
    	width: 100vw;
    	position: absolute;
    	left: 50vw;
    	margin-left: -50vw;
    	bottom: 20vh;
    	text-align: center;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    }

    .grid.holding h2 {
    	font-size: 3em;
    	color: var(--white) !important;
    	-webkit-filter: drop-shadow(-4px 1px 10px #555);
    	filter: drop-shadow(-4px 1px 10px #555);
    }

    .bg.maintenance img {
    	position: relative;
    	display: block;
    	width: 100%;
    	height: 100vh;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - POSTS*/

    /* Videos */

    .grid-posts {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	text-align: center;
    	gap: 2em;
    }

    .grid-posts .post {
    	rotate: 2deg;
    }

    .grid-posts .post:nth-child(even) {
    	rotate: -2deg;
    }

    /* News */

    .grid-horiz {
    	display: grid;
    	grid-template-columns: 50% 50%;
    	grid-column-gap: 1em;
    	grid-template-areas: "left right";
    	margin: 2em 0;
    	width: 100%;
    	rotate: 2deg;
    }

    .grid-horiz .left {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }

    .grid-horiz img {
    	display: block;
    	width: 100%;
    	min-width: 300px;
    	max-width: 300px;
    	min-height: 300px;
    	max-height: 300px;
    	-o-object-fit: cover;
    	object-fit: cover;
    	border-radius: 100%;
    }

    .grid-horiz img:hover {
    	border-radius: 6px;
    	-webkit-transition: border-radius 0.3s linear;
    	-o-transition: border-radius 0.3s linear;
    	transition: border-radius 0.3s linear;
    }

    .grid-horiz:nth-child(even) {
    	rotate: -2deg;
    	grid-template-areas: "right left";
    	margin: inherit;
    }

    #ajax-load-more .grid-horiz:nth-child(odd) {
    	grid-template-areas: "right left";
    	rotate: -2deg;
    }

    #ajax-load-more .grid-horiz:nth-child(even) {
    	grid-template-areas: "left right";
    	rotate: 2deg;
    }

    .grid-horiz .right {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    }

    .video-embed iframe {
    	width: 100%;
    	height: auto;
    	aspect-ratio: 16/9;
    	border-radius: 8px;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - PRODUCTS */

    /* Products */

    .grid-posts.products {
    	-webkit-box-orient: horizontal;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: row;
    	flex-direction: row;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	gap: 2em;
    	margin-top: 2em;
    }

    .grid-posts.products .post {
    	-webkit-box-flex: 0;
    	-ms-flex: 0 0 calc(50% - 2em);
    	flex: 0 0 calc(50% - 2em);
    }

    .grid-posts.products .post img {
    	width: 100%;
    	height: auto;
    	max-width: 300px;
    	display: block;
    	-o-object-fit: cover;
    	object-fit: cover;
    	margin: 0 auto;
    }

    .grid-posts.products .post {
    	rotate: -2deg;
    }

    .grid-posts.products .post:nth-child(even) {
    	rotate: 2deg;
    }

    .single .page-content {
    	padding-bottom: 2em;
    	margin-bottom: 2em;
    	border-bottom: var(--border);
    }

    .grid-posts.products.related {
    	-webkit-box-pack: justify;
    	-ms-flex-pack: justify;
    	justify-content: space-between;
    	margin-top: 2em;
    }

    .grid-posts.products.related .post {
    	-webkit-box-flex: 0;
    	-ms-flex: 0 0 calc(20% - 0.5em);
    	flex: 0 0 calc(20% - 0.5em);
    }


    .platforms {
    	font-size: 1em;
    	margin: 0;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	gap: 1.5em;
    }

    .platforms a i {
    	margin-right: 5px;
    }

    .platforms .button {
    	color: var(--white);
    	background: var(--red);
    	text-transform: uppercase;
    	text-align: center;
    }

    .label-dist {
    	font-size: 1.1em;
    	margin: 1.5em 0;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - WOOCOMMERCE*/

    .single-product .product_meta {
    	display: none;
    }

    .single .single-product .woocommerce .product {
    	margin: 2em 0;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    	gap: 1.5em;
    	width: 100%;
    }

    .single .single-product .woocommerce img {
    	display: block;
    	width: 100%;
    	height: 100%;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    .single .single-product .woocommerce h1 {
    	rotate: 0deg;
    	font-size: 3em;
    	margin: 0;
    }

    form.cart {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }

    form.cart .qty {
    	height: 35px;
    }


    /* - - - - - - - - - - - - - - - - - - - - - - - - - QUOTES*/

    .grid.quotes .page-content {
    	-webkit-column-count: 3;
    	-moz-column-count: 3;
    	column-count: 3;
    	-webkit-column-gap: 20px;
    	-moz-column-gap: 20px;
    	column-gap: 20px;
    	-webkit-column-fill: balance;
    	-moz-column-fill: balance;
    	column-fill: balance;
    	font-size: 0.9em;
    	line-height: 1.3em;
    }

    .grid.quotes .page-content p:nth-child(even) {
    	rotate: -1deg;
    }

    .grid.quotes .page-content>p {
    	-webkit-column-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	break-inside: avoid;
    	margin-bottom: 12px;
    	display: inline-block;
    	width: 100%;
    	background: var(--white);
    	padding: 1em;
    	border-radius: 4px;
    	rotate: 1deg;
    }

    .page-id-16 strong,
    .grid.quotes strong {
    	color: var(--medium);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - PROJECTS*/

    .details {
    	font-size: 1.1em;
    	margin: 2em 0;
    }

    .detail-label {
    	font-weight: 500;
    }

    .curriculum {
    	font-size: 1.5em;
    	line-height: 1.2em;
    	margin: 1em 0;
    	padding: 1em 0;
    	border-top: var(--border);
    	border-bottom: var(--border);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - TABS*/

    .grid.tabbed,
    .tab-container,
    .tab-content {
    	width: 100%;
    }

    ul.tabs {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-ms-flex-line-pack: center;
    	align-content: center;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	margin: 0;
    	padding: 0 0 1em 0;
    }

    ul.tabs li {
    	list-style: none;
    }

    ul.tabs li a {
    	font-size: 1.4em;
    	margin: 0 1em 0 0;
    	color: var(--links);
    }

    ul.tabs li.active a,
    ul.tabs li a:hover {
    	color: var(--hover);
    	border-bottom: var(--border);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - LOGOS*/

    .logos {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	text-align: center;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	width: 100%;
    	padding: 1em 2em;
    	gap: 10px;
    }

    .logos p {
    	margin: 0;
    }

    .logos p img {
    	-webkit-box-flex: 0;
    	-ms-flex: 0 0 auto;
    	flex: 0 0 auto;
    	margin: 0;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - FOOTER*/

    .grid-footer {
    	display: grid;
    	grid-auto-columns: 40% auto;
    	grid-template-areas: "left right";
    	grid-column-gap: 2em;
    	width: 100%;
    	padding: 3em 4em;
    }

    nav.nav-promo ul,
    nav.nav-promo ul li {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }

    nav.nav-promo ul li {
    	margin: 0 0 0.25em 0;
    }

    nav.nav-promo ul li a {
    	font-size: 1.4em;
    }

    .grid-footer .left {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-ms-flex-line-pack: start;
    	align-content: flex-start;
    	-webkit-box-align: start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    }

    .grid-footer #mc_embed_signup_scroll {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	gap: 5px;
    }

    .grid-footer .right {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: justify;
    	-ms-flex-pack: justify;
    	justify-content: space-between;
    	-webkit-box-align: end;
    	-ms-flex-align: end;
    	align-items: flex-end;
    }

    .grid-footer h2 {
    	font-size: 1.5em;
    	margin: 0 10px 0 0;
    }

    .grid-footer .button {
    	margin: 10px 0;
    }

    .grid-footer input.email {
    	max-width: 200px;
    	font-size: 0.9em;
    	margin: 0;
    }

    p.copyright {
    	font-size: 0.6em;
    	margin: 0;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - HEADERS*/

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	line-height: 1em;
    	margin: 10px 0;
    	color: var(--headers);
    	-webkit-column-break-inside: avoid;
    	page-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	break-inside: avoid;
    }

    h1 {
    	font-size: 6em;
    	margin: 0 0 0.25em -1em;
    	letter-spacing: -0.03em;
    	color: var(--bright);
    	rotate: -3deg;
    }

    .single h1 {
    	margin-top: 0.25em;
    }

    .category h1 {
    	font-size: 9em;
    	rotate: 2deg;
    }

    h2 {
    	font-size: 2.5em;
    	margin: 20px 0;
    }

    .grid-horiz h2 {
    	font-size: 2em;
    	margin: 0 0 5px 0;
    }

    h3 {
    	font-size: 1.6em;
    	margin: 0.5em 0;
    }


    h4 {
    	font-size: 1.1em;
    	margin: 15px 0 5px 0;
    }

    h5 {
    	font-size: 0.8em;
    	margin: 0 0 5px 0;
    	text-transform: uppercase;
    }

    h6 {
    	font-size: 0.6em;
    	margin: 3px 0;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - CONTENT*/

    .content i {
    	color: var(--bright);
    	margin-right: 10px;
    }

    blockquote {
    	font-size: 1.5em;
    	line-height: 1.3em;
    	margin: 2em 0 2em -2em;
    }

    blockquote strong,
    blockquote em {
    	font-size: 1rem;
    	text-transform: uppercase;
    	color: var(--medium);
    }

    ul {
    	padding: 0 0 10px 20px;
    	margin: 0 0 20px 10px;
    	list-style-position: outside;
    }

    ul li {
    	list-style-type: disc;
    	padding: 5px 0;
    }

    ol {
    	list-style-type: decimal;
    	list-style-position: outside;
    	margin: 0 0 0 15px;
    	padding: 0 0 0 15px;
    }

    ol li {
    	padding: 3px 0;
    	margin: 0;
    }

    .meta {
    	font-size: 1em;
    	letter-spacing: 0.02em;
    	text-transform: uppercase;
    	margin: 10px 0 5px 0;
    }

    .meta a {
    	font-size: inherit !important;
    }

    a.post-edit-link {
    	font-size: 0.7em;
    	text-transform: uppercase;
    	letter-spacing: 0.02em;
    	color: var(--red);
    }

    a.post-edit-link:hover {
    	color: var(--hover);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - IMAGES, ALIGNMENT*/

    iframe {
    	max-width: 100% !important;
    	border: 0 !important;
    }

    .gallery,
    .rl-gallery-container {
    	-webkit-column-break-inside: avoid;
    	page-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	break-inside: avoid;
    	margin: 1em 0;
    }

    img.alignleft {
    	margin: 0.5em 1.5em 1em 0;
    }

    .single img.alignleft {
    	rotate: -3deg;
    }

    img.alignright {
    	margin: 0.5em 0 1em 1.5em;
    }

    .single img.alignright {
    	rotate: 3deg;
    }

    img.alignnone,
    .alignnone {
    	clear: both;
    	float: none;
    	margin: 1em 0;
    }

    .alignleft {
    	float: left;
    }

    .alignright {
    	float: right;
    }

    .aligncenter {
    	text-align: center;
    }

    .wp-caption-text {
    	padding: 5px 10px;
    	font-size: 0.8em;
    	line-height: 1em;
    	font-style: italic;
    	text-align: center;
    }

    .gallery-item img {
    	border: 0 !important;
    }

    /* in home page quickloop */

    .grid.videos iframe {
    	width: 100%;
    	height: auto;
    	aspect-ratio: 16/9;
    	margin: 1em 0;
    	text-align: center;
    	border-radius: 8px;
    }

    /* - - - - - - - - - - - - - - - - - AJAX LOAD MORE */

    .alm-btn-wrap {
    	margin: 2em 0 !important;
    }

    button.alm-load-more-btn {
    	background: var(--links) !important;
    	-webkit-box-shadow: none !important;
    	box-shadow: none !important;
    	text-transform: uppercase !important;
    }

    button.alm-load-more-btn:hover {
    	background: var(--hover) !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - EVENTS*/

    .event {
    	display: grid;
    	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    	grid-template-areas: 'left right';
    	border-top: var(--border-white);
    }

    /* collapse empty right column */
    .event .right:empty {
    	display: none;
    }

    /* when right column empty, left column takes full width */
    .event .right:empty~.left {
    	grid-column: 1 / -1;
    }

    .event .left,
    .event .right {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-box-align: start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    }

    .event .left {
    	line-height: 1.2em;
    	padding-bottom: 1em;
    }

    .event .left img {
    	max-width: 160px;
    	height: auto;
    }

    .event .right {
    	padding: 0 0 1em 2em;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }

    .event-artist.venue-first::before {
    	content: " / ";
    }

    .event-venue.artist-first::before {
    	content: " / ";
    }

    .event img.event-thumb {
    	display: block;
    	width: 100%;
    	max-height: 100px;
    	-o-object-fit: cover;
    	object-fit: cover;
    	-webkit-transform: rotate(2deg);
    	-ms-transform: rotate(2deg);
    	transform: rotate(2deg);
    	margin: -1em 0 10px;
    }

    .event p {
    	margin: 3px 0;
    }

    p.event-date {
    	font-size: 0.9em;
    	text-transform: lowercase;
    	margin: 0 0 5px 0;
    	background: var(--white);
    	padding: 5px 10px;
    	border-bottom-left-radius: 6px;
    	border-bottom-right-radius: 6px;
    }

    .event h3 {
    	font-size: 1em;
    	margin: 10px 0 0 0;
    }

    .event h3 a {
    	color: var(--links);
    }

    .event-tickets.button {
    	text-align: center;
    	border-radius: 4px;
    }

    .event-address {
    	font-size: 0.8em;
    }

    .event a.post-edit-link {
    	display: inline;
    	margin-left: 10px;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - PLAYER*/

    .wp-playlist {
    	border: 0 !important;
    }

    .wp-playlist-caption {
    	font-size: 1em !important;
    }

    .wp-playlist-current-item {
    	display: none;
    }

    .wp-playlist-playing {
    	background: var(--pale) !important;
    }

    .wp-playlist-playing .wp-playlist-item-title {
    	font-weight: bold !important;
    }

    .mejs-time-current {
    	background: var(--pale) !important;
    }

    .wp-playlist .mejs-controls {
    	background: var(--dark) !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - FORMS*/

    form {
    	margin: 1em 0;
    	border: 0;
    }

    form label {
    	font-size: 0.8em !important;
    }

    form input {
    	padding: 3px 5px;
    }

    #mc_embed_signup .email {
    	width: 200px;
    	border-radius: 3px;
    	border: 0;
    	padding: 5px 10px;
    }

    .add_to_cart_button,
    form .button,
    .button,
    form button {
    	font-size: 0.9em !important;
    	text-transform: uppercase !important;
    	color: var(--white) !important;
    	border: 0 !important;
    	background: var(--medium) !important;
    	padding: 5px 12px !important;
    	border-radius: 3px !important;
    	line-height: 25px !important;
    	margin: 5px 0 !important;
    	-webkit-box-shadow: none !important;
    	box-shadow: none !important;
    }

    .add_to_cart_button:hover,
    form .button:hover,
    .button:hover,
    form button:hover {
    	background: var(--gray) !important;
    	color: var(--white) !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - BREAKPOINTS*/

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

    	body {
    		display: block;
    	}

    	.bg {
    		width: 100%;
    	}

    	.bg img,
    	.bg video {
    		min-height: 50vh;
    		max-height: 50vh;
    	}

    	a.playpause {
    		left: 1em;
    	}

    	.nav-wrap {
    		-webkit-box-orient: vertical;
    		-webkit-box-direction: normal;
    		-ms-flex-direction: column;
    		flex-direction: column;
    		-webkit-box-pack: end;
    		-ms-flex-pack: end;
    		justify-content: flex-end;
    		padding: 0 16px;
    		height: 120px;
    		width: 100%;
    	}

    	.scrolled .nav-wrap {
    		height: 120px;
    	}

    	a.toggle-nav {
    		padding-bottom: 1em;
    	}

    	a.toggle-nav i {
    		font-size: 40px;
    	}

    	.nav-name {
    		font-size: 1.8em;
    	}

    	nav.nav-social ul {
    		padding: 0 20px;
    		-webkit-box-pack: justify;
    		-ms-flex-pack: justify;
    		justify-content: space-between;
    		position: absolute;
    		top: 20px;
    		left: 0;
    		right: 0;
    	}

    	nav.nav-social ul li a {
    		font-size: 20px;
    		padding: 0 8px;
    	}

    	nav.nav-social ul li.nav-admin {
    		display: none;
    	}

    	nav.nav-main ul {
    		position: fixed;
    		padding: 4em 0 3em 0;
    		margin: 0;
    		top: -3vh;
    		-webkit-box-align: center;
    		-ms-flex-align: center;
    		align-items: center;
    		width: 110%;
    		height: auto;
    		border-radius: 0;
    		rotate: 2deg;
    		-webkit-transition: all 1s ease;
    		-o-transition: all 1s ease;
    		transition: all 1s ease;
    	}

    	nav.nav-main ul li {
    		margin: 10px 0;
    	}

    	nav.nav-main ul li a {
    		font-size: 1.5em;
    	}

    	ul.tabs li {
    		-webkit-box-flex: 0;
    		-ms-flex: none;
    		flex: none;
    	}

    	ul.tabs li a {
    		margin: 0 8px 0 0;
    	}

    	.grid,
    	.single-product,
    	.grid-posts,
    	.grid-horiz,
    	.grid-footer,
    	.post,
    	.left,
    	.right,
    	.copyright,
    	.grid-footer #mc_embed_signup_scroll {
    		display: block;
    		width: 100%;
    		overflow-x: hidden;
    		max-width: 100vw;
    	}

    	.grid,
    	.grid-footer {
    		padding: 1em 2em;
    	}

    	.grid.quotes .page-content {
    		-webkit-column-count: 1;
    		-moz-column-count: 1;
    		column-count: 1;
    	}

    	.grid-horiz,
    	.grid-horiz:nth-of-type(even) {
    		text-align: center;
    	}

    	.grid-horiz .left,
    	.grid-horiz .right {
    		padding: 10px 0;
    	}

    	.grid-horiz img {
    		width: 300px;
    		height: 300px;
    	}

    	.grid-footer {
    		text-align: center;
    	}

    	.grid-footer .left,
    	.grid-footer .right {
    		-webkit-box-align: center;
    		-ms-flex-align: center;
    		align-items: center;
    	}

    	.grid.logos .content p {
    		-ms-flex-wrap: wrap;
    		flex-wrap: wrap;
    	}

    	.grid-footer #mc_embed_signup_scroll {
    		-webkit-box-orient: vertical;
    		-webkit-box-direction: normal;
    		-ms-flex-direction: column;
    		flex-direction: column;
    		-ms-flex-line-pack: justify;
    		align-content: space-between;
    		-webkit-box-align: center;
    		-ms-flex-align: center;
    		align-items: center;
    		gap: 0;
    	}

    	.grid-footer #mc_embed_signup_scroll h2 {
    		margin: 0 0 10px 0;
    	}

    	.platforms {
    		gap: 0.5em;
    	}

    	blockquote {
    		margin: 1em 0;
    	}

    	img {
    		max-width: 100%;
    		height: auto;
    	}

    	h1,
    	.category h1 {
    		font-size: 3.4em;
    		line-height: 0.8em;
    		margin: 20px 0;
    		font-weight: 700 !important;
    	}

    	h2 {
    		font-size: 2em;
    	}

    	h3 {
    		font-size: 1.5em;
    	}

    	img.alignleft,
    	img.alignright,
    	.alignleft,
    	.alignright {
    		float: none !important;
    		margin: 1em 0 !important;
    		rotate: 0deg !important;
    	}
    }

    @media screen and (max-width: 414px) {
    	html {
    		font-size: 18px;
    	}

    }