:root {
--BG: #f7f7f9;
--BGtint1: #FFFFFF;
--BGtint2: #BABAC9;
--BGtint3: #E8E8ED;
--main: #111003;
--hover: #111003;
--secondary: #5243C7;
--secondaryhover:#9B91DE;
}

[data-theme="dark"] {
--BG: #1D1A05;
--BGtint1: #FFFFFF;
--BGtint2: #242319;
--BGtint3: #333228;
--main: #F5F5F5;
--hover: #F5F5F5;
--secondary: #8C81D9;
--secondaryhover: #C5C0EC;
}

/**
 * Content
 */

body * {
    color: var(--main);
    /*background-color: var(--BG);*/
    transition-property: background, color;
    transition-duration: 500ms;
}

a:active {
	opacity: 0.7;
}

.page a.active {
    color: var(--BGtint2);    
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
    border-radius: .4rem;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1.4em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: var(--main);
    opacity: 10%;
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
}

.instrument-sans-normal {
  font-family: "Instrument Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.instrument-sans-medium {
  font-family: "Instrument Sans", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.instrument-sans-semibold {
  font-family: "Instrument Sans", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

@font-face {
font-family: 'timezone';
src: url('https://files.cargocollective.com/c1601211/HALTimezone-Regular.woff2') format('woff2'),
url('https://files.cargocollective.com/c1601211/HALTimezone-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'timezone';
src: url('https://files.cargocollective.com/c1601211/HALTimezone-Italic.woff2') format('woff2'),
url('https://files.cargocollective.com/c1601211/HALTimezone-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
}

.commonhood-rider {
	font-family: 'instrument sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: .6em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2em;
}

.commonhood-h1 {
	font-family: 'timezone', serif;
    font-style: italic;
    font-size: 3em;
    line-height: 1.1;
    margin-top: 20vh;
    margin-bottom: .5em;
}

.commonhood-h2 {
	font-family: 'timezone', serif;
    font-style: italic;
    font-size: 3em;
    line-height: 1.1;
    margin-bottom: .5em;
}

.commonhood-h3 {
	font-family: 'timezone', serif;
    font-style: italic;
    font-size: 2em;
    line-height: 1.1;
       margin-top: 25vh;
    margin-bottom: .8em;
}

.commonhood-h4 {
	font-family: 'timezone', serif;
    font-style: normal;
    font-size: 1.1em;
    margin-top: .2em;
    margin-bottom: .8em;
}
.commonhood-body {
	font-family: 'instrument sans', sans-serif;
    font-style: normal;
    font-size: .9em;
}

.commonhood-small {
	font-family: 'instrument sans', sans-serif;
    font-style: normal;
    font-size: .8em;
}

.commonhood-small a {
    display: inline-block;
    position: relative;
    border-bottom: none;
}

.commonhood-small a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 0.1rem;
    top: 1.5rem;
    left: 0;
    background-color: var(--main);
    transform-origin: bottom right;
    transition: transform 200ms ease-in-out;
}

.commonhood-small a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/*.commonhood-column {
    height: 80vh;
    align-content: center;
}*/

.gallery_image_caption {
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    font-size: 0.8rem;
	font-weight: 400;
	color: var(--main);
	font-family: "DM Mono", Monospace, Icons;
	font-style: normal;
	line-height: 1;
    text-transform: uppercase;
}

.classification {
	color: var(--main);
	font-family: "DM Mono", Monospace, Icons;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.2;
    text-transform: uppercase;
    display: block;
    position: relative;
    margin-bottom: 0.5rem;
}

.mobile .classification {
	font-size: 1.2rem;
}

.intro-block {
    display: block;
    margin-bottom: 10vh;
}

.links-block {
	display: block;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.reduced-height {
	display: block;
    margin-top: 40vh;
    width: 80vw;
}

.mobile .reduced-height {
	margin-top: 40vh;
    width: 100%;
}

.footer {
    display: block;
	margin-top: 20vh;
}

.mobile .footer {
	margin-top: 15vh;
}

.thumbnail-block {
    display: block;
	margin-bottom: 5vh;
}

.mobile .thumbnail-block {
	margin-bottom: 5vh;
}

.project {
    display: block;
    width: 100%;
}

.project-offset {
    display: block;
    margin-left: 15vw;
    width: 100%;
}

.mobile .project-offset {
	margin-left: 0;
}

/*
.project:hover {
    cursor: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 46.2759'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%235243c7;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2'%3E%3Cpath id='Path_77' class='cls-1' d='M35.8916,14.8038c-.9479-.204-1.9344-.1309-2.8419,.2105-.9521-1.521-2.6263-2.4379-4.4207-2.4208l-1.3683,.2105c-.7104-2.0093-2.6053-3.3568-4.7364-3.3681h-1.0525v-3.9997C21.5677,2.5313,19.2904,.0987,16.3855,.0029c-.3408-.0112-.6819,.0107-1.0184,.0654-2.467,.5449-4.2201,2.7363-4.2102,5.2627v15.5776l-2.5261-2.5261c-.9649-1.0014-2.2933-1.5707-3.6839-1.5788-1.3618-.0004-2.6609,.5727-3.5786,1.5788C.4941,19.1998-.0015,20.3434,0,21.5401c.0673,1.5012,.5401,2.9562,1.3683,4.2102,1.263,2.3156,8.9466,15.5776,11.2622,19.472,.3534,.6572,1.0432,1.063,1.7893,1.0525h19.7878c.9847,.0312,1.8593-.6248,2.1051-1.5788l3.5786-13.8935c.0845-.1992,.1206-.4157,.1053-.6315v-9.9991c.0315-2.5213-1.6635-4.7378-4.1049-5.368Zm-3.1576,27.2608H15.5776c-2.8419-4.7364-9.4729-16.3144-10.6307-18.4195-.1053-.2105-1.1578-1.8946-.7368-2.3156l.7368-.3158c.2754,.0142,.5366,.1261,.7368,.3158l6.1047,6.3152c.8818,.7577,2.2109,.6571,2.9685-.2247,.3005-.3497,.4779-.7885,.5048-1.2488V5.2257c0-.5813,.4712-1.0525,1.0525-1.0525s1.0525,.4712,1.0525,1.0525v14.7356c-.0581,1.1029,.7889,2.0442,1.8918,2.1023,.036,.0019,.072,.0028,.108,.0028h0c1.1626,0,2.1051-.9425,2.1051-2.1051v-5.2627c-.0253-.5522,.4018-1.0205,.954-1.0458,.5522-.0253,1.0205,.4018,1.0458,.954,.0014,.0306,.0014,.0612,0,.0918v6.3152c0,1.1626,.9425,2.1051,2.1051,2.1051h0c1.1626,0,2.1051-.9425,2.1051-2.1051v-3.1576c-.0507-.5522,.3558-1.041,.9081-1.0918s1.041,.3558,1.0918,.9081c.0056,.0611,.0056,.1226,0,.1837v5.2627c0,1.1626,.9425,2.1051,2.1051,2.1051h0c1.1045,.0015,2.0011-.8926,2.0026-1.9971,0-.036-.0009-.0721-.0028-.108v-3.1576c0-.5813,.4712-1.0525,1.0525-1.0525s1.0525,.4712,1.0525,1.0525v9.9991c.0153,.2159-.0207,.4323-.1053,.6315l-3.0524,11.4727Z'/%3E%3C/g%3E%3C/svg%3E") 20 20, auto !important;
}
*/

.project-thumbnail {
    overflow: hidden;
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: .4rem;
}

.project-thumbnail img {
    transition: transform 300ms ease;
    display: block;
}

.project-thumbnail:hover img{
    transform: scale(1.03);
}

.cta {
    display: block;
    position: relative;
    top:-7rem;
    height: 0rem;
    text-align: right;
}

.cta:hover img{
    transition: transform 20s linear;
	transform: rotate(-360deg);
}

.mobile .cta{
	height: 15vh;
    scale: 50%;
    text-align: center;
}

p {
    display: block;
    margin-top: 0.2rem;
    margin-bottom: 1rem;
    border-bottom: none;
}

divider {
    content: none;
	background: var(--main);
	border: 0;
	height: 1px;
	display: block;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

spacer {
	content: none;
    background: none;
    height: 5rem;
    display: block;
}

gap {
	content: none;
    background: none;
    height: 2rem;
    display: block;
}

gap-s {
	content: none;
    background: none;
    height: 1rem;
    display: block;
}
/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

video {
    display: block;
    width: 100%;
    height: auto;
    padding: 0rem;
    margin: 0rem;
    border-radius: .4rem;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--main);
	font-family: "DM Sans", Icons;
	font-style: normal;
	line-height: 1.4;
}

.mobile bodycopy {
	font-size: 1.6rem;
}

[data-predefined-style="true"] bodycopy a {
    text-decoration-line: none;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: none;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "DM Sans", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 5.5rem;
	line-height: 1.1;
	color: var(--main);
    border-bottom: none;
	}

.mobile h1 {
	font-size: 4rem;
}
[data-predefined-style="true"] h1 a {
    display: inline-block;
    position: relative;
}

[data-predefined-style="true"] h1 a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 0.3rem;
    bottom: -0.5rem;
    left: 0;
    background-color: var(--main);
    transform-origin: bottom right;
    transition: transform 200ms ease-in-out;
}

[data-predefined-style="true"] h1 a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

[data-predefined-style="true"] h2 {
	font-family: "DM Sans", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: var(--main);
	font-size: 2.5rem;
	line-height: 1.2;
	}

[data-predefined-style="true"] h2 a {
	color: var(--main);
    position: relative;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--main);
    display: inline-block;
    margin-bottom: 1rem;
}

h2 a:after {
	content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: var(--main);
    transform-origin: bottom right;
    transition: transform 200ms ease-in-out;
}

h2 a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.mobile h2 {
	font-size: 2rem;
    line-height: 1.3;
}

[data-predefined-style="true"] h3 {
	font-family: "DM Sans", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin-top: 0.5rem;
    margin-bottom: 1rem;
	color: var(--main);
	font-size: 1.5rem;
	line-height: 1.4;
}

.mobile h3 {
	font-size: 1.8rem;
    line-height: 1.3;
}

[data-predefined-style="true"] h3 a {
	color: var(--main);
    border-bottom: 1px dashed;
    display: inline-block;
    position: relative;
}

h3 a:after {
	content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: var(--main);
    transform-origin: bottom right;
    transition: transform 200ms ease-in-out;
}

h3 a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

[data-predefined-style="true"] h4 {
	font-family: "DM Mono", Icons;
	font-style: normal;
	font-weight: normal;
    text-transform: uppercase;
	padding: 0;
	margin: 0;
	color: var(--main);
	font-size: 1.25rem;
	line-height: 1.2;
	}

.mobile h4 {
	font-size: 1.6rem;
}

[data-predefined-style="true"] h4 a {
    display: inline-block;
    position: relative;
    border-bottom: none;
}

[data-predefined-style="true"] h4 a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 0.1rem;
    top: 1.5rem;
    left: 0;
    background-color: var(--main);
    transform-origin: bottom right;
    transition: transform 200ms ease-in-out;
}

.mobile h4 a:after {
	top: 2rem;
}

[data-predefined-style="true"] h4 a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

[data-predefined-style="true"] small {
	display: inline;
	font-size: 1rem;
	line-height: 1.5;
	font-family: "DM Mono", Icons;
	font-style: normal;
	font-weight: 400;
    text-transform: uppercase;
	color: var(--main);
}

.mobile small {
	font-size: 1.2rem;
    line-height: 1.6;
}

[data-predefined-style="true"] small a {
	color: var(--main);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
}

[data-css-preset] .container {
    
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_left*/;
    background: transparent;
}
[data-css-preset] body {
    background: var(--BG);
}

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 3rem /*!main_margin*/;
	padding-bottom: 3rem /*!main_margin*/;
	padding-left: 3rem /*!main_margin*/;
	padding-right: 3rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: .3rem;
    font-size: 1.8rem;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.1;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu Button
 */

#site-menu-button {
	font-family: "DM Mono", Icons;
	font-style: normal;
	font-weight: normal;
    text-transform: uppercase;
	padding: 0;
	margin: 0;
	color: var(--main);
	font-size: 1.25rem;
	line-height: 1.2;
    display: inline-block;
    position: relative;
}

.mobile #site-menu-button {
	font-size: 1.6rem;
}

#site-menu-button:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 0.1rem;
    top: 1.5rem;
    left: 0;
    background-color: var(--main);
    transform-origin: bottom right;
    transition: transform 200ms ease-in-out;
}

.mobile #site-menu-button:after {
	top: 2rem;
}

#site-menu-button:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


#site-menu-button .active {
	display: none;
}

/**
 * Site Menu
 */

#site-menu {
    display: block;
    position: relative;
	background: var(--BGtint1);
    padding: 3rem;
    height: 100vh;
    width: 50vw;

}

#site-menu:after {
    transform:translateX(20px);
    transition: transform 200ms ease-in-out;
}

#site-menu:hover:after{
	transform:translateX(40px);
}

#site_menu {
	font-family: "DM Sans", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 4.5rem;
	line-height: 1.1;
    background: var(--BGtint1);
	padding: 20px 30px 90px 30px;
	max-width: 100vw;
	min-width: 50vw;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: var(--main);
}

#site_menu .set-link > a {
    color: var(--main);
    font-weight: normal;
}

#site_menu a:active {
}

#site_menu a.active {
    border-bottom: 0.3rem solid var(--main);
}

#site_menu .close {
    content: "close";
	display: block;
	color: var(--main);
	line-height: 1rem;
	font-size: 4rem;
    top: 3rem /*!site_menu_button*/;
	right: 3rem /*!site_menu_button*/;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 4rem;
	line-height: 1;
}

#site_menu .break {
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.85) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */

.image-gallery {
	border-radius: .4rem;
    overflow: hidden;
}
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

/* The sidepanel menu */
.sidepanel {
  height: 100vh; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  background-color: var(--BGtint1);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
    margin-left: 3rem;
    margin-bottom: 2rem;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
}

.mobile .sidepanel a{
	margin-left: 2rem;
}

.openbtn {
	font-family: "DM Mono", Icons;
	font-style: normal;
	font-weight: normal;
    text-transform: uppercase;
	padding: 0;
	margin: 0;
	color: var(--main);
	font-size: 1.25rem;
	line-height: 1.2;
    display: inline-block;
    float: right;
    border: none;
    background: none;
    cursor: pointer;
	}

.mobile .openbtn {
	font-size: 1.6rem;
}

.mobile openbtn:after {
	top: 2rem;
}

.closebtn {
    display: block;
	margin: 3rem;
}

.mobile .closebtn{
	margin: 2rem;
}