/*
Theme Name: Refuge
Theme URI: https://vizou.com
Author: Dana Whittle
Author URI: https://vizou.com
Description: Theme for Sultans of String (2021)
Version: 5000
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sultansofstring.com
*/

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

    /* Googlefonts
Lato 300,300i,400,700,900
Philosopher 400,700
*/

    /* display */
    .headline h1,
    h2,
    h2 a,
    h3,
    h3 a,
    blockquote em {
    	font-family: "Philosopher", sans-serif !important;
    	font-style: normal;
    	font-weight: 400;
    }

    .grid.intro .content p:first-letter {
    	font-family: "Philosopher", sans-serif !important;
    	font-style: normal;
    	font-weight: 700;
    }

    /* regular */
    .wp-caption-text,
    h1 {
    	font-family: Lato, sans-serif !important;
    	font-style: normal !important;
    	font-weight: 300 !important;
    }

    em {
    	font-family: Lato, sans-serif !important;
    	font-style: cursive !important;
    	font-weight: 300i !important;
    }

    .gigpress-time,
    .gigpress-artist,
    .gigpress-venue,
    .gigpress-tickets,
    strong,
    blockquote strong nav.nav-main ul li a,
    .copyright,
    ul.tabs li a,
    .wp-playlist-item,
    .wp-playlist-item-title {
    	font-family: Lato, sans-serif !important;
    	font-style: normal !important;
    	font-weight: 400 !important;
    }

    .details,
    .meta,
    .gigpress-date,
    .gigpress-status,
    h4,
    h5,
    h6 {
    	font-family: Lato, sans-serif !important;
    	font-style: normal !important;
    	font-weight: 700 !important;
    }


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

    :root {
    	--overlay: rgba(0, 0, 0, 0.2);
    	--links: #b82718;
    	--hover: #0b939e;
    	--white: #fff;
    	--black: #000;
    	--gray: #dadada;
    	--darkgray: #586061;
    	--bright: #ff972d;
    	--tangerine: #ff972d;
    	--melon: #ffbd7b;
    	--lemon: #fffa98;
    	--lavender: #f6eafc;
    	--rust: #bf412c;
    	--magenta: #d0037e;
    	--teal: #00b2c1;
    	--sky: #a6f2f9;
    	--clouds: #e9fdff;
    	--border: 1px solid var(--gray);
    }

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

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

    html {
    	font-size: min(max(16px, 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: normal 100% Lato, Helvetica, Arial, sans-serif;
    	font-weight: 300;
    	line-height: 1.4em;
    	color: #333;
    	background: var(--white);
    	overflow-x: hidden;
    	overflow-y: auto;
    	width: 100%;
    	height: 100vh;
    	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;
    }

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

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

    .bg img {
    	display: block;
    	width: 100%;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    img.branding {
    	position: absolute;
    	z-index: 1000;
    	top: 50%;
    	left: 50%;
    	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    	max-width: 500px;
    	height: auto;
    }

    .headline {
    	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: end;
    	-ms-flex-pack: end;
    	justify-content: flex-end;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	position: absolute;
    	width: 100%;
    	top: 0;
    	bottom: 100px;
    	height: 100%;
    	padding-bottom: 4em;
    	overflow: hidden;
    }

    .headline h1 {
    	color: var(--white);
    	text-shadow: 0px 0px 55px rgba(0, 0, 0, 0.4);
    	font-size: 5em;
    	line-height: 0.8em;
    	margin: 0 2em;
    	letter-spacing: -1px;
    	text-align: center;
    	text-transform: uppercase;
    }

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

    .nav-wrap {
    	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;
    	background: var(--teal);
    	width: 100%;
    	height: 80px;
    	z-index: 1000;
    	/* 	position:fixed; */
    	position: relative;
    }

    .scrolled .nav-wrap {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	background: var(--magenta);
    	-webkit-transition: background-color 1s linear;
    	-o-transition: background-color 1s linear;
    	transition: background-color 1s linear;
    }

    /*main*/

    nav.nav-main {
    	z-index: 1000;
    }

    a.toggle-nav {
    	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;
    	color: var(--white);
    	font-size: 40px;
    	text-align: center;
    }

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

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

    a.toggle-nav.nav-active .open,
    a.toggle-nav .close {
    	display: none;
    }

    a.toggle-nav.nav-active .close {
    	display: block;
    	color: var(--white);
    }

    /* social nav */

    nav.nav-social ul {
    	padding: 1em;
    	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: 24px;
    	padding: 0 10px;
    }

    .nav-social a:hover {
    	color: var(--lemon);
    }

    /* main menu, open */

    nav.nav-main ul.nav-active {
    	width: 0px;
    	margin-top: -10000px;
    }

    nav.nav-main ul {
    	list-style: none;
    	padding: 2em 0 0 2em;
    	margin: 0;
    	position: fixed;
    	top: 0;
    	left: 0;
    	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: content;
    	-ms-flex-pack: content;
    	justify-content: content;
    	-webkit-box-align: start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    	width: 30%;
    	height: 100vh;
    	background: var(--rust);
    	-webkit-transition: width 0.5s ease-in-out;
    	-o-transition: width 0.5s ease-in-out;
    	transition: width 0.5s ease-in-out;
    }

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

    nav.nav-main ul li a,
    nav.nav-main ul li a:visited {
    	display: block;
    	font-size: 1.2em;
    	letter-spacing: 1px;
    	color: var(--white);
    	text-transform: uppercase;
    }

    nav.nav-main ul li.active a,
    nav.nav-main ul li a:hover {
    	-webkit-transition: background-color 0.5s ease;
    	-o-transition: background-color 0.5s ease;
    	transition: background-color 0.5s ease;
    	color: var(--melon);
    }

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

    .container {
    	width: 100%;
    	height: 100%;
    	position: relative;
    }

    /*named grid areas*/
    .content {
    	grid-area: content;
    }

    .left {
    	grid-area: left;
    }

    .right {
    	grid-area: right;
    }

    .center {
    	grid-area: center;
    }

    /*main grid*/
    .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: 3em 0;
    	position: relative;
    }

    .grid .content {
    	max-width: 1280px;
    	margin: 0 auto !important;
    }

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

    /* - - - - - - - - - - - - - - - - - - - - - - - - - INTRO*/

    .grid.intro {
    	background: var(--lemon);
    	font-size: 1.3em;
    	line-height: 1.4em;
    }

    .grid.intro .content p:first-letter {
    	font-size: 5em;
    	float: left;
    	margin: 0px 0 10px -10px;
    	color: var(--magenta);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - POSTS*/
    .grid-posts {
    	display: grid;
    	grid-gap: 1.5em;
    	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    	padding: 1em 0;
    }

    .post {
    	text-align: center;
    }

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

    .grid-horiz {
    	display: grid;
    	grid-template-columns: 200px auto;
    	grid-column-gap: 1em;
    	grid-template-areas: "left right";
    	border-bottom: var(--border);
    	padding-bottom: 20px;
    	margin-bottom: 20px;
    	width: 100%;
    }

    .grid-horiz:last-of-type {
    	border: 0;
    }

    .grid-horiz .left img {
    	display: block;
    	width: 100%;
    	height: auto;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

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

    .grid-horiz .right {
    	padding: 0 0 0 1em;
    	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;
    }

    .meta {
    	font-size: 0.7em;
    	letter-spacing: 2px;
    	text-transform: uppercase;
    	padding: 0 0 10px 0;
    }

    .grid.product {
    	background: var(--lavender);
    }

    .grid-posts.related {
    	grid-template-columns: repeat(4, 1fr);
    }

    .details {
    	font-size: 0.9em;
    	letter-spacing: 0.02em;
    	margin: 0;
    	text-transform: uppercase;
    }

    .details a {
    	padding: 4px 8px;
    	margin-right: 8px;
    	border-radius: 3px;
    	border: 1px solid var(--magenta);
    }

    .details p {
    	margin-bottom: 20px;
    }

    .details a:hover {
    	border-color: var(--teal);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - PAGINATION*/

    .pagination {
    	clear: both;
    	margin: 2em auto;
    	text-align: center;
    	position: relative;
    	font-size: 1.2em;
    }

    .page-numbers {
    	margin: 0 10px;
    	padding: 5px;
    	color: var(--teal);
    }

    .page-numbers:hover {
    	border-top: 3px solid var(--teal);
    }

    .page-numbers.current {
    	color: var(--magenta);
    }

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

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

    .tab-content:focus {
    	outline: none !important;
    }

    .tab-content {
    	display: none;
    }


    ul.tabs {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-ms-flex-line-pack: center;
    	align-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: 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: 0.7em;
    	letter-spacing: 2px;
    	margin: 0 10px;
    	text-transform: uppercase;
    	color: var(--white);
    	padding: 10px 15px;
    	text-align: center;
    	background: var(--teal);
    	border-radius: 4px;
    }

    ul.tabs li a:hover {
    	background: var(--magenta);
    }

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

    .logos img {
    	margin: 10px !important;
    }

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

    .grid-footer {
    	display: grid;
    	grid-template-columns: "40% 40% 20%";
    	grid-template-areas: "left center right";
    	grid-column-gap: 2em;
    	width: 100%;
    	background: var(--rust);
    	color: var(--white);
    	padding: 2em;
    	height: auto;
    	position: relative;
    }

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

    .grid-footer a {
    	color: var(--melon);
    }

    .grid-footer a:hover {
    	color: var(--white);
    }

    p.copyright {
    	text-align: center;
    	font-size: 0.6em;
    	letter-spacing: 2px;
    	text-transform: uppercase;
    	padding: 2em 0;
    	margin: 0;
    	color: var(--white);
    }

    /* footer nav */
    nav.nav-promo ul,
    nav.nav-promo ul li {
    	list-style: none;
    	text-transform: uppercase;
    	font-size: 1.1;
    	letter-spacing: 1px;
    }

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

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

    h1 {
    	font-size: 3.2em;
    	margin: 0 0 30px 0;
    	text-transform: uppercase;
    }


    h2 {
    	font-size: 2.2em;
    	letter-spacing: -1px;
    	margin: 20px 0;
    	color: var(--rust);
    }

    h2 a {
    	color: var(--rust);
    }

    .grid-horiz h2 {
    	margin: 0 0 10px 0;
    }

    h3 {
    	font-size: 1.3em;
    	color: var(--magenta);
    	margin: 25px 0 10px 0;
    }

    h3 a {
    	color: var(--magenta);
    }

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

    h4 a,
    .post h4 {
    	color: var(--black);
    }

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

    h6 {
    	font-size: 0.6em;
    	color: var(--black);
    	margin: 3px 0;
    }

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

    blockquote {
    	font-size: 1.2em;
    	line-height: 1.1em;
    	margin: 2em 0;
    	padding: 1em;
    	background: var(--clouds);
    	border-radius: 6px;
    }

    blockquote em {
    	font-style: normal;
    	font-size: 0.7em;
    	text-transform: uppercase;
    	color: var(--teal);
    }

    /*lists*/

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

    a.post-edit-link {
    	font-size: inherit;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    	color: var(--gray);
    }

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

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

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

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

    .content img:hover {
    	-webkit-filter: grayscale(1);
    	filter: grayscale(1);
    }

    .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 25px 15px 0;
    }

    img.alignright {
    	margin: 0 0 15px 25px;
    }

    img.alignnone,
    .alignnone {
    	clear: both;
    	float: none;
    	margin: 15px 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;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - GIGPRESS*/

    .gigpress-listing {
    	display: grid;
    	grid-template-columns: repeat(3, 1fr);
    	grid-gap: 1em;
    	font-size: 0.9em;
    	padding: 1em 0;
    }

    .gigpress-item {
    	line-height: 1.2em;
    	-webkit-column-break-inside: avoid;
    	page-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	break-inside: avoid;
    	border-bottom: var(--border);
    	padding: 5px 0;
    	margin: 0;
    }

    .gigpress-date,
    .gigpress-venue {
    	width: 100%;
    	display: block;
    }

    .gigpress-date {
    	font-size: 1.1em;
    	text-transform: uppercase;
    	margin-bottom: 5px;
    }

    .gigpress-notes {
    	display: block;
    	margin: 5px 0;
    	color: var(--darkgray);
    	overflow-wrap: break-word;
    	word-wrap: break-word;
    	word-break: break-word;
    }

    .gigpress-address {
    	font-size: 0.9em;
    }

    .gigpress-venue {
    	font-size: 1em;
    	color: var(--teal);
    }

    .gigpress-artist,
    .gigpress-artist a {
    	font-size: 1em;
    	color: var(--magenta);
    }

    .gigpress-time {
    	font-size: 0.8em;
    	line-height: 1.2em;
    }

    .gigpress-tickets {
    	font-size: 0.8em;
    	text-transform: uppercase;
    	background: var(--lemon);
    	padding: 3px 7px;
    	display: inline-block;
    	margin: 5px 0;
    }

    .gigpress-status {
    	color: var(--magenta);
    	font-size: 0.65em;
    	text-transform: uppercase;
    }

    /*past*/

    .gigpress-listing.past .gigpress-details {
    	display: none;
    }

    .gigpress-listing.past {
    	grid-template-columns: repeat(1, 1fr);
    }

    .gigpress-listing.past .gigpress-item {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }

    .gigpress-listing.past .gigpress-date,
    .gigpress-listing.past .gigpress-venue {
    	display: inline;
    }

    .gigpress-listing.past .gigpress-date,
    .gigpress-listing.past .gigpress-day,
    .gigpress-listing.past .gigpress-month-year,
    .gigpress-listing.past .gigpress-venue {
    	font-size: 1em;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - 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(--rust) !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - SOCIAL FEED*/

    .fts-jal-fb-header h1 {
    	display: none;
    }

    a.fts-powered-by-text {
    	margin-top: -9000px;
    }

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

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

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

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

    @media only screen and (max-width: 767px) {
    	.header .bg img {
    		height: 200px;
    		width: auto;
    	}

    	.header img.branding {
    		width: 85%;
    		-o-object-fit: contain;
    		object-fit: contain;
    	}

    	.headline {
    		-webkit-box-pack: center;
    		-ms-flex-pack: center;
    		justify-content: center;
    		width: 100%;
    		top: 0;
    		bottom: 0;
    		padding: 0 2em;
    		overflow: hidden;
    	}

    	.headline h1 {
    		font-size: 3em;
    		margin: 0;
    	}

    	nav.nav-social ul {
    		padding: 0 0 0 10px;
    	}

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

    	nav.nav-main ul {
    		top: 280px;
    		padding: 1em 0 2em 0;
    		margin: 0;
    		width: 100%;
    		height: auto;
    		-webkit-box-align: center;
    		-ms-flex-align: center;
    		align-items: center;
    	}

    	.scrolled nav.nav-main ul {
    		top: 80px;
    	}

    	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.related,
    	.listing,
    	.grid-posts,
    	.grid-horiz,
    	footer,
    	.grid-footer,
    	.copyright {
    		display: block;
    	}

    	.grid {
    		padding: 2em;
    	}

    	.grid-footer {
    		-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;
    		padding: 2em;
    		margin: 0 auto;
    	}

    	.grid-footer ul,
    	.left,
    	.right,
    	.center {
    		display: block;
    		padding: 0;
    		margin: 0;
    	}

    	.listing .gigpress-item {
    		padding: 1em 0;
    	}

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

    	h1 {
    		font-size: 2.3em;
    	}

    	.alignleft,
    	.alignright {
    		display: block;
    		float: none !important;
    		margin: 20px auto !important;
    	}
    }