/**
 * Content
 */

/* Default cursor: a white circle with a black border, the same 30px size as the Personal (black circle) cursor.
   The square, circle and triangle project cursors below override it. */
html,
body,
a,
.hover-title,
.hover-text {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='14' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 15 15, auto !important;
}

.rectangle {
    cursor: url("https://files.cargocollective.com/c1479174/Rectangle.png") 15 15, auto !important;
}
.circle{
	 cursor: url("https://files.cargocollective.com/c1479174/Ellipse-1.png") 15 15, auto !important;
}
.triangle{
	 /* Equilateral triangle matching the legend; the old image is the fallback */
	 cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpolygon points='15,2 30,28 0,28'/%3E%3C/svg%3E") 15 15, url("https://files.cargocollective.com/c1479174/Rectangle-29.png") 15 15, auto !important;
}
.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-text {
    display: none !important;
}

 .hover-title:hover  + .hover-text{
    display: block !important;

}


.hover-number {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
	position: absolute !important;
    width: 100% !important;
    visibility: hidden;
    z-index: 2;
    pointer-events: none;
    /* sits just under the project title, however many lines it wraps to */
    margin-top: 0.5rem !important;
}

/* every main image is exactly as wide as its column. Cargo sizes images by measuring them,
   which fails for projects hidden under SELECTED WORKS, so the size comes from the column instead */
.hover-number {
    position: relative;
}

.hover-number .hover-image {
    left: 1rem;
    right: 1rem;
    width: auto !important;
}

.hover-number .hover-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

 .hover-number:hover   div.hover-image {
   visibility: visible !important;

}
 .hover-span {
    /* the title shows all the time, on the line below the number */
    display: block;
}

 .hover-number:hover >  .hover-span{
    visibility: visible !important;

}

/**
 * Legend: one entry per line, icons in a fixed-width column so the words line up
 */

[data-predefined-style="true"] h2.legend {
    line-height: 1.7;
}

.legend-icon {
    position: relative;
    display: inline-block;
    width: 1.6em;
    text-align: center;
    margin-right: 0.4em;
}

/* Nudge the icons so each is centred on its word and the gaps between them are equal */
.legend .legend-icon:nth-of-type(1) {
    top: -0.055em;
}

.legend .legend-icon:nth-of-type(2) {
    top: 0.021em;
}

/* Professional: an equilateral triangle drawn in place of the icon-font glyph,
   as wide as the circle so it reads the same size as the square and circle */
.legend .legend-icon:nth-of-type(3) {
    color: transparent;
}

.legend .legend-icon:nth-of-type(3)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(50% - 0.05em);
    width: 1.155em;
    height: 1em;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* SELECTED WORKS, INDEX and MORETHANVIZ sit together under BYRON CAI, after the same
   visible space that separates them from the legend */
[data-predefined-style="true"] bodycopy .view-toggle.view-selected {
    display: inline-block;
    margin-top: 1.3em;
}

/* MORETHANVIZ link under BYRON CAI, in the same type: grey, red on hover */
[data-predefined-style="true"] bodycopy a.morethanviz-link {
    color: rgb(128, 128, 128);
    border-bottom: 0;
    padding-bottom: 0;
}

[data-predefined-style="true"] bodycopy a.morethanviz-link:hover {
    color: rgb(255, 0, 0);
}

/**
 * Responsive project grid: 5 per row at full width, fewer as the window narrows
 */

.page_container[data-id="25566683"] .page_content {
    display: grid;
    /* at most 5 per row; a column needs room for about 20 characters of title per line,
       so a narrower window drops a column rather than squeezing the titles */
    grid-template-columns: repeat(auto-fill, minmax(max(calc(20ch + 2rem), 20%), 1fr));
    grid-auto-rows: 11rem;
    /* top margin puts the first row just under "No." */
    margin: 13.1rem -2rem 0;
    padding: 1rem 1rem 12rem;
}

/* narrower windows step down: two projects per row from 601px to 850px wide... */
@media (min-width: 601px) and (max-width: 850px) {
    .page_container[data-id="25566683"] .page_content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ...and one per row at 600px wide or less */
@media (max-width: 600px) {
    .page_container[data-id="25566683"] .page_content {
        grid-template-columns: 1fr;
    }
}

.page_container[data-id="25566683"] .page_content > div,
.page_container[data-id="25566683"] [grid-row] {
    display: contents;
}

.page_container[data-id="25566683"] .page_content br,
.page_container[data-id="25566683"] .page_content div:empty {
    display: none;
}

/* except a line break typed into a project title in the editor */
.page_container[data-id="25566683"] .page_content .hover-span br {
    display: inline;
}

.page_container[data-id="25566683"] .hover-number {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1rem !important;
}

/* one typeface everywhere: Diatype Semi-Mono Regular (Cargo's variable Diatype at its
   semi-mono setting); italics use its italic */
html body,
html body * {
    font-variation-settings: 'MONO' 0.5;
}

/* the page still scrolls, but without a visible scroll bar */
html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* phones: text a little larger, for reading on a small screen */
[data-predefined-style="true"] body.mobile bodycopy {
    font-size: 1.4rem;
}
[data-predefined-style="true"] body.mobile h2 {
    font-size: 1.15rem;
}
/* keep the header's lines whole at the larger size */
body.mobile .view-toggle,
body.mobile a.morethanviz-link,
body.mobile h2.legend {
    white-space: nowrap;
}
html body.mobile .site-footer {
    font-size: 1.4rem;
}
/* the larger header text pushes "No." down, so the grid starts lower to match */
body.mobile .page_container[data-id="25566683"] .page_content {
    margin-top: 19.94rem;
}





body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

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

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

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

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "Diatype Semi-Mono Variable", Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Diatype Semi-Mono Variable", Icons;
	font-style: normal;
	line-height: 1.3;
	font-variation-settings: 'slnt' 0, 'MONO' 0.5;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(105, 143, 255);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

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

[data-predefined-style="true"] h1 {
	font-family: "Diatype Semi-Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 2.64rem;
	line-height: 1.2;
	color: rgba(207, 103, 103, 0.85);
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] h2 {
	font-family: "Diatype Semi-Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 0.82rem;
	line-height: 1.2;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.36rem;
	line-height: 1.3;
	font-family: "Diatype Semi-Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
}

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

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255)/*!body_bgcolor*/;
}

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

[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: "Diatype Semi-Mono Variable", 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: "Diatype Semi-Mono Variable", 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
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 2rem /*!site_menu_button*/;
	right: 2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

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

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: "Diatype Semi-Mono Variable", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

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

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * 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: "Diatype Semi-Mono Variable", 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: "Diatype Semi-Mono Variable", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: "Diatype Semi-Mono Variable", 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: "Diatype Semi-Mono Variable", 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: "Diatype Semi-Mono Variable", Icons;
    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-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: "Diatype Semi-Mono Variable", 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;
}